diff --git a/apps/web-antd/src/api/pay/demo/order/index.ts b/apps/web-antd/src/api/pay/demo/order/index.ts index 63cb1396d..262351059 100644 --- a/apps/web-antd/src/api/pay/demo/order/index.ts +++ b/apps/web-antd/src/api/pay/demo/order/index.ts @@ -20,7 +20,7 @@ export namespace DemoOrderApi { createTime?: Date; } - export interface OrderPageReq extends PageParam { + export interface OrderPageReqVO extends PageParam { spuId?: number; createTime?: Date[]; } @@ -32,7 +32,7 @@ export function createDemoOrder(data: DemoOrderApi.Order) { } /** 获得示例订单分页 */ -export function getDemoOrderPage(params: DemoOrderApi.OrderPageReq) { +export function getDemoOrderPage(params: DemoOrderApi.OrderPageReqVO) { return requestClient.get>( '/pay/demo-order/page', { diff --git a/apps/web-antd/src/views/pay/demo/order/data.ts b/apps/web-antd/src/views/pay/demo/order/data.ts index 9e61188f0..1de11c995 100644 --- a/apps/web-antd/src/views/pay/demo/order/data.ts +++ b/apps/web-antd/src/views/pay/demo/order/data.ts @@ -2,32 +2,35 @@ import type { VbenFormSchema } from '#/adapter/form'; import type { VxeTableGridOptions } from '#/adapter/vxe-table'; import { DICT_TYPE } from '@vben/constants'; +import { formatDateTime } from '@vben/utils'; /** 新增/修改的表单 */ export function useFormSchema(): VbenFormSchema[] { return [ { - component: 'Input', fieldName: 'id', + component: 'Input', dependencies: { triggerFields: [''], show: () => false, }, }, { - component: 'Select', fieldName: 'spuId', label: '商品', - rules: 'required', + component: 'Select', componentProps: { options: [ - { label: '华为手机 --- 1.00元', value: 1, price: 1 }, - { label: '小米电视 --- 10.00元', value: 2, price: 10 }, - { label: '苹果手表 --- 100.00元', value: 3, price: 100 }, - { label: '华硕笔记本 --- 1000.00元', value: 4, price: 1000 }, - { label: '蔚来汽车 --- 200000.00元', value: 5, price: 200_000 }, + { label: '华为手机', value: 1 }, + { label: '小米电视', value: 2 }, + { label: '苹果手表', value: 3 }, + { label: '华硕笔记本', value: 4 }, + { label: '蔚来汽车', value: 5 }, ], + placeholder: '请输入下单商品', + allowClear: true, }, + rules: 'required', }, ]; } @@ -38,37 +41,45 @@ export function useGridColumns(): VxeTableGridOptions['columns'] { { field: 'id', title: '订单编号', + minWidth: 100, }, { field: 'userId', title: '用户编号', + minWidth: 100, }, { field: 'spuName', title: '商品名字', + minWidth: 150, }, { field: 'price', title: '支付价格', + minWidth: 100, formatter: 'formatAmount2', }, { field: 'refundPrice', title: '退款金额', + minWidth: 100, formatter: 'formatAmount2', }, { field: 'createTime', title: '创建时间', + minWidth: 180, formatter: 'formatDateTime', }, { field: 'payOrderId', title: '支付单号', + minWidth: 120, }, { field: 'payStatus', title: '是否支付', + minWidth: 100, cellRender: { name: 'CellDict', props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING }, @@ -77,16 +88,26 @@ export function useGridColumns(): VxeTableGridOptions['columns'] { { field: 'payTime', title: '支付时间', + minWidth: 180, formatter: 'formatDateTime', }, { field: 'refundTime', title: '退款时间', - slots: { default: 'refundTime' }, + minWidth: 180, + formatter: ({ cellValue, row }) => { + if (cellValue) { + return formatDateTime(cellValue); + } + if (row.payRefundId) { + return '退款中,等待退款结果'; + } + return ''; + }, }, { title: '操作', - width: 200, + width: 220, fixed: 'right', slots: { default: 'actions' }, }, diff --git a/apps/web-antd/src/views/pay/demo/order/index.vue b/apps/web-antd/src/views/pay/demo/order/index.vue index f143cc6a3..1f52488d8 100644 --- a/apps/web-antd/src/views/pay/demo/order/index.vue +++ b/apps/web-antd/src/views/pay/demo/order/index.vue @@ -5,7 +5,6 @@ import type { DemoOrderApi } from '#/api/pay/demo/order'; import { useRouter } from 'vue-router'; import { DocAlert, Page, useVbenModal } from '@vben/common-ui'; -import { formatDateTime } from '@vben/utils'; import { message } from 'ant-design-vue'; @@ -24,7 +23,7 @@ const [FormModal, formModalApi] = useVbenModal({ const router = useRouter(); /** 刷新表格 */ -function onRefresh() { +function handleRefresh() { gridApi.query(); } @@ -52,15 +51,14 @@ async function handleRefund(row: DemoOrderApi.Order) { }); try { await refundDemoOrder(row.id as number); - message.success({ - content: '退款成功', - }); - onRefresh(); + message.success('发起退款成功!'); + handleRefresh(); } finally { hideLoading(); } } + const [Grid, gridApi] = useVbenVxeGrid({ gridOptions: { columns: useGridColumns(), @@ -79,13 +77,13 @@ const [Grid, gridApi] = useVbenVxeGrid({ }, rowConfig: { keyField: 'id', + isHover: true, }, toolbarConfig: { refresh: true, - search: true, }, } as VxeTableGridOptions, -}); + }); - + -