diff --git a/apps/web-antd/src/views/pay/order/data.ts b/apps/web-antd/src/views/pay/order/data.ts index 1fcd6ee21..86312814f 100644 --- a/apps/web-antd/src/views/pay/order/data.ts +++ b/apps/web-antd/src/views/pay/order/data.ts @@ -11,66 +11,74 @@ import { erpPriceInputFormatter, formatDateTime } from '@vben/utils'; import { Tag } from 'ant-design-vue'; import { DictTag } from '#/components/dict-tag'; +import { getRangePickerDefaultProps } from '#/utils'; /** 列表的搜索表单 */ export function useGridFormSchema(): VbenFormSchema[] { return [ { - component: 'Input', fieldName: 'appId', label: '应用编号', + component: 'Input', componentProps: { + allowClear: true, placeholder: '请输入应用编号', }, }, { - component: 'Select', fieldName: 'channelCode', label: '支付渠道', + component: 'Select', componentProps: { - placeholder: '请选择开启状态', + allowClear: true, + placeholder: '请选择支付渠道', options: getDictOptions(DICT_TYPE.PAY_CHANNEL_CODE, 'string'), }, }, { - component: 'Input', fieldName: 'merchantOrderId', label: '商户单号', + component: 'Input', componentProps: { + allowClear: true, placeholder: '请输入商户单号', }, }, { - component: 'Input', fieldName: 'no', label: '支付单号', + component: 'Input', componentProps: { + allowClear: true, placeholder: '请输入支付单号', }, }, { - component: 'Input', fieldName: 'channelOrderNo', label: '渠道单号', + component: 'Input', componentProps: { + allowClear: true, placeholder: '请输入渠道单号', }, }, { - component: 'Select', fieldName: 'status', label: '支付状态', + component: 'Select', componentProps: { + allowClear: true, placeholder: '请选择支付状态', options: getDictOptions(DICT_TYPE.PAY_ORDER_STATUS, 'number'), }, }, { - component: 'RangePicker', fieldName: 'createTime', label: '创建时间', + component: 'RangePicker', componentProps: { - placeholder: ['开始日期', '结束日期'], + ...getRangePickerDefaultProps(), + allowClear: true, }, }, ]; @@ -79,65 +87,74 @@ export function useGridFormSchema(): VbenFormSchema[] { /** 列表的字段 */ export function useGridColumns(): VxeTableGridOptions['columns'] { return [ - { type: 'checkbox', width: 60 }, { - title: '编号', field: 'id', + title: '编号', + minWidth: 100, }, { - title: '支付金额', field: 'price', + title: '支付金额', + minWidth: 120, formatter: 'formatAmount2', }, { - title: '退款金额', field: 'refundPrice', + title: '退款金额', + minWidth: 120, formatter: 'formatAmount2', }, { - title: '手续金额', field: 'channelFeePrice', + title: '手续金额', + minWidth: 120, formatter: 'formatAmount2', }, { - title: '订单号', field: 'no', + title: '订单号', + minWidth: 240, slots: { default: 'no', }, }, { - title: '支付状态', field: 'status', + title: '支付状态', + minWidth: 120, cellRender: { name: 'CellDict', props: { type: DICT_TYPE.PAY_ORDER_STATUS }, }, }, { - title: '支付渠道', field: 'channelCode', + title: '支付渠道', + minWidth: 120, cellRender: { name: 'CellDict', props: { type: DICT_TYPE.PAY_CHANNEL_CODE }, }, }, { - title: '支付时间', field: 'successTime', + title: '支付时间', + minWidth: 180, formatter: 'formatDateTime', }, { - title: '支付应用', field: 'appName', + title: '支付应用', + minWidth: 150, }, { - title: '商品标题', field: 'subject', + title: '商品标题', + minWidth: 200, }, { title: '操作', - width: 100, + width: 80, fixed: 'right', slots: { default: 'actions' }, }, @@ -166,7 +183,7 @@ export function useDetailSchema(): DescriptionItemSchema[] { { field: 'status', label: '支付状态', - content: (data) => + content: (data: any) => h(DictTag, { type: DICT_TYPE.PAY_ORDER_STATUS, value: data?.status, @@ -175,37 +192,39 @@ export function useDetailSchema(): DescriptionItemSchema[] { { field: 'price', label: '支付金额', - content: (data) => `¥${erpPriceInputFormatter(data?.price)}`, + content: (data: any) => `¥${erpPriceInputFormatter(data?.price)}`, }, { field: 'channelFeePrice', label: '手续费', - content: (data) => `¥${erpPriceInputFormatter(data?.channelFeePrice)}`, + content: (data: any) => + `¥${erpPriceInputFormatter(data?.channelFeePrice)}`, }, { field: 'channelFeeRate', label: '手续费比例', - content: (data) => `${erpPriceInputFormatter(data?.channelFeeRate)}%`, + content: (data: any) => + `${erpPriceInputFormatter(data?.channelFeeRate)}%`, }, { field: 'successTime', label: '支付时间', - content: (data) => formatDateTime(data?.successTime) as string, + content: (data: any) => formatDateTime(data?.successTime || '') as string, }, { field: 'expireTime', label: '失效时间', - content: (data) => formatDateTime(data?.expireTime) as string, + content: (data: any) => formatDateTime(data?.expireTime || '') as string, }, { field: 'createTime', label: '创建时间', - content: (data) => formatDateTime(data?.createTime) as string, + content: (data: any) => formatDateTime(data?.createTime || '') as string, }, { field: 'updateTime', label: '更新时间', - content: (data) => formatDateTime(data?.updateTime) as string, + content: (data: any) => formatDateTime(data?.updateTime || '') as string, }, { field: 'subject', @@ -218,7 +237,7 @@ export function useDetailSchema(): DescriptionItemSchema[] { { field: 'channelCode', label: '支付渠道', - content: (data) => + content: (data: any) => h(DictTag, { type: DICT_TYPE.PAY_CHANNEL_CODE, value: data?.channelCode, @@ -231,7 +250,7 @@ export function useDetailSchema(): DescriptionItemSchema[] { { field: 'channelOrderNo', label: '渠道单号', - content: (data) => + content: (data: any) => h(Tag, { color: 'green' }, () => data?.channelOrderNo || ''), }, { @@ -241,7 +260,7 @@ export function useDetailSchema(): DescriptionItemSchema[] { { field: 'refundPrice', label: '退款金额', - content: (data) => `¥${erpPriceInputFormatter(data?.refundPrice)}`, + content: (data: any) => `¥${erpPriceInputFormatter(data?.refundPrice)}`, }, { field: 'notifyUrl', diff --git a/apps/web-antd/src/views/pay/order/index.vue b/apps/web-antd/src/views/pay/order/index.vue index 098b88e34..4560d5b79 100644 --- a/apps/web-antd/src/views/pay/order/index.vue +++ b/apps/web-antd/src/views/pay/order/index.vue @@ -8,6 +8,7 @@ import { Tag } from 'ant-design-vue'; import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table'; import { getOrderPage } from '#/api/pay/order'; +import { $t } from '#/locales'; import { useGridColumns, useGridFormSchema } from './data'; import Detail from './modules/detail.vue'; @@ -18,7 +19,7 @@ const [DetailModal, detailModalApi] = useVbenModal({ }); /** 刷新表格 */ -function onRefresh() { +function handleRefresh() { gridApi.query(); } @@ -30,11 +31,11 @@ function handleDetail(row: PayOrderApi.Order) { const [Grid, gridApi] = useVbenVxeGrid({ formOptions: { schema: useGridFormSchema(), - collapsed: false, }, gridOptions: { cellConfig: { height: 80, + }, columns: useGridColumns(), height: 'auto', @@ -52,9 +53,7 @@ const [Grid, gridApi] = useVbenVxeGrid({ }, rowConfig: { keyField: 'id', - isCurrent: true, isHover: true, - resizable: true, }, toolbarConfig: { refresh: true, @@ -80,7 +79,7 @@ const [Grid, gridApi] = useVbenVxeGrid({ url="https://doc.iocoder.cn/pay/wx-lite-pay-demo/" /> - +