diff --git a/apps/web-ele/src/views/pay/transfer/data.ts b/apps/web-ele/src/views/pay/transfer/data.ts index 730ca4a08..828fcf6db 100644 --- a/apps/web-ele/src/views/pay/transfer/data.ts +++ b/apps/web-ele/src/views/pay/transfer/data.ts @@ -1,17 +1,17 @@ import type { VbenFormSchema } from '#/adapter/form'; import type { VxeTableGridOptions } from '#/adapter/vxe-table'; +import type { PayTransferApi } from '#/api/pay/transfer'; import type { DescriptionItemSchema } from '#/components/description'; import { h } from 'vue'; +import { DICT_TYPE } from '@vben/constants'; +import { getDictOptions } from '@vben/hooks'; import { erpPriceInputFormatter, formatDateTime } from '@vben/utils'; import { ElTag } from 'element-plus'; import { DictTag } from '#/components/dict-tag'; -import { DICT_TYPE } from '@vben/constants'; -import { getDictOptions } from '@vben/hooks'; - import { getRangePickerDefaultProps } from '#/utils'; /** 列表的搜索表单 */ @@ -22,7 +22,7 @@ export function useGridFormSchema(): VbenFormSchema[] { label: '转账单号', component: 'Input', componentProps: { - clearable: true, + allowClear: true, placeholder: '请输入转账单号', }, }, @@ -32,7 +32,7 @@ export function useGridFormSchema(): VbenFormSchema[] { component: 'Select', componentProps: { options: getDictOptions(DICT_TYPE.PAY_CHANNEL_CODE), - clearable: true, + allowClear: true, placeholder: '请选择支付渠道', }, }, @@ -41,7 +41,7 @@ export function useGridFormSchema(): VbenFormSchema[] { label: '商户单号', component: 'Input', componentProps: { - clearable: true, + allowClear: true, placeholder: '请输入商户单号', }, }, @@ -51,7 +51,7 @@ export function useGridFormSchema(): VbenFormSchema[] { component: 'Select', componentProps: { options: getDictOptions(DICT_TYPE.PAY_TRANSFER_TYPE), - clearable: true, + allowClear: true, placeholder: '请选择类型', }, }, @@ -61,7 +61,7 @@ export function useGridFormSchema(): VbenFormSchema[] { component: 'Select', componentProps: { options: getDictOptions(DICT_TYPE.PAY_TRANSFER_STATUS), - clearable: true, + allowClear: true, placeholder: '请选择转账状态', }, }, @@ -70,16 +70,16 @@ export function useGridFormSchema(): VbenFormSchema[] { label: '收款人姓名', component: 'Input', componentProps: { - clearable: true, + allowClear: true, placeholder: '请输入收款人姓名', }, }, { - fieldName: 'accountNo', + fieldName: 'userAccount', label: '收款人账号', component: 'Input', componentProps: { - clearable: true, + allowClear: true, placeholder: '请输入收款人账号', }, }, @@ -88,7 +88,7 @@ export function useGridFormSchema(): VbenFormSchema[] { label: '渠道单号', component: 'Input', componentProps: { - clearable: true, + allowClear: true, placeholder: '请输入渠道单号', }, }, @@ -98,7 +98,7 @@ export function useGridFormSchema(): VbenFormSchema[] { component: 'RangePicker', componentProps: { ...getRangePickerDefaultProps(), - clearable: true, + allowClear: true, }, }, ]; @@ -110,96 +110,95 @@ export function useGridColumns(): VxeTableGridOptions['columns'] { { field: 'id', title: '编号', - }, - { - field: 'createTime', - title: '创建时间', - formatter: 'formatDateTime', - }, - { - field: 'appName', - title: '支付应用', + minWidth: 100, }, { field: 'price', title: '转账金额', - formatter: 'formatFenToYuanAmount', + minWidth: 120, + formatter: 'formatAmount2', + }, + { + field: 'merchantTransferId', + title: '转账单号', + minWidth: 350, + slots: { + default: 'no', + }, }, { field: 'status', title: '转账状态', + minWidth: 120, cellRender: { name: 'CellDict', props: { type: DICT_TYPE.PAY_TRANSFER_STATUS }, }, }, - { - field: 'type', - title: '类型', - cellRender: { - name: 'CellDict', - props: { type: DICT_TYPE.PAY_TRANSFER_TYPE }, - }, - }, { field: 'channelCode', - title: '支付渠道', + title: '转账渠道', + minWidth: 140, cellRender: { name: 'CellDict', props: { type: DICT_TYPE.PAY_CHANNEL_CODE }, }, }, { - field: 'merchantTransferId', - title: '商户单号', + field: 'createTime', + title: '创建时间', + minWidth: 180, + formatter: 'formatDateTime', }, { - field: 'channelTransferNo', - title: '渠道单号', + field: 'successTime', + title: '转账时间', + minWidth: 180, + formatter: 'formatDateTime', + }, + { + field: 'subject', + title: '转账标题', + minWidth: 150, + }, + { + field: 'appName', + title: '支付应用', + minWidth: 150, }, { field: 'userName', title: '收款人姓名', + minWidth: 150, }, { - field: 'accountNo', - title: '收款人账号', + field: 'userAccount', + title: '收款账号', + minWidth: 200, }, { title: '操作', - width: 120, + width: 80, fixed: 'right', slots: { default: 'actions' }, }, ]; } -/** 详情的配置 */ +/** 详情的字段 */ export function useDetailSchema(): DescriptionItemSchema[] { return [ - { - field: 'id', - label: '编号', - }, { field: 'merchantTransferId', label: '商户单号', - content: (data) => { - return h(ElTag, { - color: 'blue', - content: data?.merchantTransferId, - }); - }, + content: (data: PayTransferApi.Transfer) => + h(ElTag, {}, () => data?.merchantTransferId), }, { field: 'no', label: '转账单号', - content: (data) => { - return h(ElTag, { - color: 'blue', - content: data?.no, - }); - }, + content: (data: PayTransferApi.Transfer) => + h(ElTag, { color: 'orange' }, () => data?.no), }, { field: 'appId', @@ -208,7 +207,7 @@ export function useDetailSchema(): DescriptionItemSchema[] { { field: 'status', label: '转账状态', - content: (data) => + content: (data: any) => h(DictTag, { type: DICT_TYPE.PAY_TRANSFER_STATUS, value: data?.status, @@ -217,22 +216,24 @@ export function useDetailSchema(): DescriptionItemSchema[] { { field: 'price', label: '转账金额', - content: (data) => { - return h(ElTag, { - color: 'blue', - content: `￥${erpPriceInputFormatter(data?.price)}`, - }); - }, + content: (data: PayTransferApi.Transfer) => + h( + ElTag, + { color: 'success' }, + () => `￥${erpPriceInputFormatter(data?.price || 0)}`, + ), }, { field: 'successTime', label: '转账时间', - content: (data) => formatDateTime(data?.successTime) as string, + content: (data: PayTransferApi.Transfer) => + formatDateTime(data?.successTime) as string, }, { field: 'createTime', label: '创建时间', - content: (data) => formatDateTime(data?.createTime) as string, + content: (data: PayTransferApi.Transfer) => + formatDateTime(data?.createTime) as string, }, { field: 'userName', @@ -245,25 +246,23 @@ export function useDetailSchema(): DescriptionItemSchema[] { { field: 'channelCode', label: '支付渠道', - content: (data) => + content: (data: PayTransferApi.Transfer) => h(DictTag, { type: DICT_TYPE.PAY_CHANNEL_CODE, value: data?.channelCode, }), }, { - field: 'channelCode', + field: 'userIp', label: '支付 IP', }, { field: 'channelTransferNo', label: '渠道单号', - content: (data) => { - return h(ElTag, { - color: 'blue', - content: data?.channelTransferNo, - }); - }, + content: (data: PayTransferApi.Transfer) => + data?.channelTransferNo + ? h(ElTag, { color: 'success' }, () => data.channelTransferNo) + : '', }, { field: 'notifyUrl', diff --git a/apps/web-ele/src/views/pay/transfer/index.vue b/apps/web-ele/src/views/pay/transfer/index.vue index 9f50fd857..c0d830dc4 100644 --- a/apps/web-ele/src/views/pay/transfer/index.vue +++ b/apps/web-ele/src/views/pay/transfer/index.vue @@ -3,10 +3,11 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table'; import type { PayTransferApi } from '#/api/pay/transfer'; import { DocAlert, Page, useVbenModal } from '@vben/common-ui'; -import { downloadFileFromBlobPart } from '@vben/utils'; + +import { ElTag } from 'element-plus'; import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table'; -import { exportTransfer, getTransferPage } from '#/api/pay/transfer'; +import { getTransferPage } from '#/api/pay/transfer'; import { $t } from '#/locales'; import { useGridColumns, useGridFormSchema } from './data'; @@ -18,16 +19,10 @@ const [DetailModal, detailModalApi] = useVbenModal({ }); /** 刷新表格 */ -function onRefresh() { +function handleRefresh() { gridApi.query(); } -/** 导出表格 */ -async function handleExport() { - const data = await exportTransfer(await gridApi.formApi.getValues()); - downloadFileFromBlobPart({ fileName: '转账单.xls', source: data }); -} - /** 查看转账详情 */ function handleDetail(row: PayTransferApi.Transfer) { detailModalApi.setData(row).open(); @@ -38,6 +33,9 @@ const [Grid, gridApi] = useVbenVxeGrid({ schema: useGridFormSchema(), }, gridOptions: { + cellConfig: { + height: 80, + }, columns: useGridColumns(), height: 'auto', keepSource: true, @@ -54,6 +52,7 @@ const [Grid, gridApi] = useVbenVxeGrid({ }, rowConfig: { keyField: 'id', + isHover: true, }, toolbarConfig: { refresh: true, @@ -69,21 +68,8 @@ const [Grid, gridApi] = useVbenVxeGrid({ - + - + diff --git a/apps/web-ele/src/views/pay/transfer/modules/detail.vue b/apps/web-ele/src/views/pay/transfer/modules/detail.vue index 79868c194..301f7aea1 100644 --- a/apps/web-ele/src/views/pay/transfer/modules/detail.vue +++ b/apps/web-ele/src/views/pay/transfer/modules/detail.vue @@ -12,6 +12,18 @@ import { useDetailSchema } from '../data'; const formData = ref(); +const [Descriptions] = useDescription({ + componentProps: { + border: true, + column: 2, + direction: 'horizontal', + labelWidth: 140, + title: '', + extra: '', + }, + schema: useDetailSchema(), +}); + const [Modal, modalApi] = useVbenModal({ async onOpenChange(isOpen: boolean) { if (!isOpen) { @@ -31,18 +43,6 @@ const [Modal, modalApi] = useVbenModal({ } }, }); - -const [Description] = useDescription({ - componentProps: { - title: '基本信息', - border: false, - column: 2, - direction: 'horizontal', - labelWidth: 200, - extra: '', - }, - schema: useDetailSchema(), -});