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

2025-10-05 20:45:55 +08:00
parent 8f20182050
commit 73e64b468a
3 changed files with 62 additions and 44 deletions
--- 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',
--- 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/"
      />
    </template>
-    <DetailModal @success="onRefresh" />
+    <DetailModal @success="handleRefresh" />
    <Grid table-title="支付订单列表">
      <template #actions="{ row }">
        <TableAction
--- a/apps/web-antd/src/views/pay/order/modules/detail.vue
+++ b/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>