feat：【antd】【ele】【pay 支付】pay/order 在 antd 代码优化

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',

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/"
       />
     </template>
-    <DetailModal @success="onRefresh" />
+    <DetailModal @success="handleRefresh" />
     <Grid table-title="支付订单列表">
       <template #actions="{ row }">
         <TableAction

apps/web-antd/src/views/pay/order/modules/detail.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { PayOrderApi } from '#/api/pay/order';
 
 import { ref } from 'vue';
@@ -10,11 +10,11 @@ import { useDescription } from '#/components/description';
 
 import { useDetailSchema } from '../data';
 
-const detailData = ref<PayOrderApi.Order>();
+const formData = ref<PayOrderApi.Order>();
 
 const [Descriptions] = useDescription({
   componentProps: {
-    bordered: false,
+    bordered: true,
     column: 2,
     class: 'mx-4',
   },
@@ -22,9 +22,9 @@ const [Descriptions] = useDescription({
 });
 
 const [Modal, modalApi] = useVbenModal({
-  onOpenChange: async (isOpen) => {
+  async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
-      detailData.value = undefined;
+      formData.value = undefined;
       return;
     }
     // 加载数据
@@ -34,7 +34,7 @@ const [Modal, modalApi] = useVbenModal({
     }
     modalApi.lock();
     try {
-      detailData.value = await getOrder(data.id);
+      formData.value = await getOrder(data.id);
     } finally {
       modalApi.unlock();
     }
@@ -48,6 +48,6 @@ const [Modal, modalApi] = useVbenModal({
     :show-cancel-button="false"
     :show-confirm-button="false"
   >
-    <Descriptions :data="detailData" />
+    <Descriptions :data="formData" />
   </Modal>
 </template>