|  |  |  | 
|---|
|  |  |  | <template> | 
|---|
|  |  |  | <ProDialog title="余额明细" v-model="visible" destroy-on-close draggable> | 
|---|
|  |  |  | <ProDialog title="余额明细" v-model="visible" destroy-on-close draggable width="1200px"> | 
|---|
|  |  |  | <ProDialogTableWrapper :height="500"> | 
|---|
|  |  |  | <ProTableQueryFilterBar @on-reset="reset"> | 
|---|
|  |  |  | <template #query> | 
|---|
|  |  |  | <QueryFilterItem> | 
|---|
|  |  |  | <FieldSelect | 
|---|
|  |  |  | v-model="extraParamState.status" | 
|---|
|  |  |  | :valueEnum="[]" | 
|---|
|  |  |  | v-model="extraParamState.type" | 
|---|
|  |  |  | :valueEnum="EnumUserWalletTransactionTypeText" | 
|---|
|  |  |  | clearable | 
|---|
|  |  |  | filterable | 
|---|
|  |  |  | placeholder="交易类型" | 
|---|
|  |  |  | @change="getList()" | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </QueryFilterItem> | 
|---|
|  |  |  | <QueryFilterItem tip-content="查询日期"> | 
|---|
|  |  |  | 
|---|
|  |  |  | </QueryFilterItem> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | </ProTableQueryFilterBar> | 
|---|
|  |  |  | <ProTableV2 v-bind="proTableProps" :columns="columns" :showOperationColumn="false"> | 
|---|
|  |  |  | <ProTableV2 v-bind="proTableProps" :columns="columns" :operationBtns="operationBtns"> | 
|---|
|  |  |  | <template #income="{ row }"> | 
|---|
|  |  |  | <div style="color: #67c23a" v-if="row.type === EnumUserWalletTransactionType.Income"> | 
|---|
|  |  |  | {{ `+${toThousand(row.amount)}` }} | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div v-else>/</div> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | <template #outcome="{ row }"> | 
|---|
|  |  |  | <div style="color: #f56c6c" v-if="row.type === EnumUserWalletTransactionType.Withdraw"> | 
|---|
|  |  |  | {{ toThousand(row.amount) }} | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div v-else>/</div> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | <template #account="{ row }"> | 
|---|
|  |  |  | {{ `${row.receiveAccount} - ${row.receiveName}` }} | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | </ProTableV2> | 
|---|
|  |  |  | </ProDialogTableWrapper> | 
|---|
|  |  |  | <FinanceDetailDialog v-bind="dialogProps"></FinanceDetailDialog> | 
|---|
|  |  |  | </ProDialog> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | FieldSelect, | 
|---|
|  |  |  | ProTableV2, | 
|---|
|  |  |  | ProTableQueryFilterBar, | 
|---|
|  |  |  | defineOperationBtns, | 
|---|
|  |  |  | useFormDialog, | 
|---|
|  |  |  | } from '@bole-core/components'; | 
|---|
|  |  |  | import * as enterpriseServices from '@/services/api/enterprise'; | 
|---|
|  |  |  | import * as userServices from '@/services/api/user'; | 
|---|
|  |  |  | import { ModelValueType } from 'element-plus'; | 
|---|
|  |  |  | import { format, toThousand } from '@/utils'; | 
|---|
|  |  |  | import { EnumUserWalletTransactionType, EnumUserWalletTransactionTypeText } from '@/constants'; | 
|---|
|  |  |  | import FinanceDetailDialog from './FinanceDetailDialog.vue'; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | defineOptions({ | 
|---|
|  |  |  | name: 'FinanceDetailDialog', | 
|---|
|  |  |  | 
|---|
|  |  |  | const columns = defineColumns([ | 
|---|
|  |  |  | { | 
|---|
|  |  |  | id: '1', | 
|---|
|  |  |  | enCode: 'name', | 
|---|
|  |  |  | enCode: 'transDate', | 
|---|
|  |  |  | name: '交易时间', | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | id: '2', | 
|---|
|  |  |  | enCode: 'name', | 
|---|
|  |  |  | enCode: 'income', | 
|---|
|  |  |  | name: '收入', | 
|---|
|  |  |  | width: 100, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | id: '3', | 
|---|
|  |  |  | enCode: 'name', | 
|---|
|  |  |  | enCode: 'outcome', | 
|---|
|  |  |  | name: '支出', | 
|---|
|  |  |  | width: 100, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | id: '4', | 
|---|
|  |  |  | enCode: 'name', | 
|---|
|  |  |  | enCode: 'balance', | 
|---|
|  |  |  | name: '账户余额', | 
|---|
|  |  |  | width: 100, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | id: '4', | 
|---|
|  |  |  | enCode: 'name', | 
|---|
|  |  |  | id: '5', | 
|---|
|  |  |  | enCode: 'account', | 
|---|
|  |  |  | name: '对方帐号/户名', | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | id: '4', | 
|---|
|  |  |  | enCode: 'name', | 
|---|
|  |  |  | id: '6', | 
|---|
|  |  |  | enCode: 'purpose', | 
|---|
|  |  |  | name: '用途', | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | ]); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const operationBtns = defineOperationBtns([ | 
|---|
|  |  |  | { | 
|---|
|  |  |  | data: { | 
|---|
|  |  |  | enCode: 'detailBtn', | 
|---|
|  |  |  | name: '明细', | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | emits: { | 
|---|
|  |  |  | onClick: (role) => openDialog(role), | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | ]); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | () => visible.value, | 
|---|
|  |  |  | (value) => { | 
|---|
|  |  |  | if (value) { | 
|---|
|  |  |  | extraParamState.type = '' as any as EnumUserWalletTransactionType; | 
|---|
|  |  |  | extraParamState.creationTime = [] as unknown as ModelValueType; | 
|---|
|  |  |  | getList(); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | 
|---|
|  |  |  | } = useTable( | 
|---|
|  |  |  | async ({ pageIndex, pageSize }, extraParamState) => { | 
|---|
|  |  |  | try { | 
|---|
|  |  |  | let params: API.GetEnterprisesQuery = { | 
|---|
|  |  |  | let params: API.GetPersonalUserTransactionsQuery = { | 
|---|
|  |  |  | pageModel: { | 
|---|
|  |  |  | rows: pageSize, | 
|---|
|  |  |  | page: pageIndex, | 
|---|
|  |  |  | orderInput: extraParamState.orderInput, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | // searchKeys: extraParamState.keyword, | 
|---|
|  |  |  | createdTimeStart: format(extraParamState.creationTime?.[0] ?? '', 'YYYY-MM-DD 00:00:00'), | 
|---|
|  |  |  | createdTimeEnd: format(extraParamState.creationTime?.[1] ?? '', 'YYYY-MM-DD 23:59:59'), | 
|---|
|  |  |  | type: extraParamState.type, | 
|---|
|  |  |  | userId: form.value.id, | 
|---|
|  |  |  | }; | 
|---|
|  |  |  | let res = await enterpriseServices.getEnterprises(params); | 
|---|
|  |  |  | let res = await userServices.getPersonalUserTransactions(params); | 
|---|
|  |  |  | return res; | 
|---|
|  |  |  | } catch (error) {} | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | defaultExtraParams: { | 
|---|
|  |  |  | status: '', | 
|---|
|  |  |  | type: '' as any as EnumUserWalletTransactionType, | 
|---|
|  |  |  | creationTime: [] as unknown as ModelValueType, | 
|---|
|  |  |  | orderInput: [{ property: 'id', order: EnumPagedListOrder.Asc }], | 
|---|
|  |  |  | orderInput: [{ property: 'id', order: EnumPagedListOrder.Desc }], | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | columnsRenderProps: {}, | 
|---|
|  |  |  | columnsRenderProps: { | 
|---|
|  |  |  | transDate: { type: 'date', format: 'YYYY-MM-DD HH:mm:ss' }, | 
|---|
|  |  |  | balance: { type: 'money' }, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | } | 
|---|
|  |  |  | ); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const { dialogProps, handleEdit, editForm } = useFormDialog({ | 
|---|
|  |  |  | defaultFormParams: { | 
|---|
|  |  |  | id: '', | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | }); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | function openDialog(row: API.GetPersonalUserTransactionsQueryResultItem) { | 
|---|
|  |  |  | handleEdit({ | 
|---|
|  |  |  | id: row.id, | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | </script> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <style lang="scss" scoped> | 
|---|