feat: 完善支付订单功能，新增订单数据结构和详情展示，更新相关表单和表格配置

apps/web-antd/src/views/pay/order/index.vue

@@ -1,13 +1,89 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import type { VbenFormProps } from '@vben/common-ui';
 
-import { Button } from 'ant-design-vue';
+import type { VxeGridProps } from '#/adapter/vxe-table';
 
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { Tag } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import * as OrderApi from '#/api/pay/order';
 import { DocAlert } from '#/components/doc-alert';
+
+import { columns, querySchema } from './data';
+import detailFrom from './modules/OrderDetail.vue';
+
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 100,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  schema: querySchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+  // 处理区间选择器RangePicker时间格式 将一个字段映射为两个字段 搜索/导出会用到
+  // 不需要直接删除
+  // fieldMappingTime: [
+  //  [
+  //    'createTime',
+  //    ['params[beginTime]', 'params[endTime]'],
+  //    ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
+  //  ],
+  // ],
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+    // 点击行选中
+    // trigger: 'row',
+  },
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        return await OrderApi.getOrderPage({
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  // 表格全局唯一表示 保存列配置需要用到
+  id: 'pay-order-index',
+};
+
+const [BasicTable] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+const [DetailModal, modalDetailApi] = useVbenModal({
+  connectedComponent: detailFrom,
+});
+
+const openDetail = (id: number) => {
+  modalDetailApi.setData({
+    id,
+  });
+  modalDetailApi.open();
+};
 </script>
 
 <template>
-  <Page>
+  <Page :auto-content-height="true">
     <DocAlert
       title="支付宝支付接入"
       url="https://doc.iocoder.cn/pay/alipay-pay-demo/"
@@ -20,23 +96,29 @@ import { DocAlert } from '#/components/doc-alert';
       title="微信小程序支付接入"
       url="https://doc.iocoder.cn/pay/wx-lite-pay-demo/"
     />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/pay/order/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/pay/order/index
-      代码，pull request 贡献给我们！
-    </Button>
+    <BasicTable>
+      <template #action="{ row }">
+        <a-button
+          type="link"
+          v-access:code="['pay:order:query']"
+          @click="openDetail(row.id)"
+        >
+          {{ $t('ui.actionTitle.detail') }}
+        </a-button>
+      </template>
+      <template #no="{ row }">
+        <p class="order-font">
+          <Tag size="small" color="blue"> 商户</Tag> {{ row.merchantOrderId }}
+        </p>
+        <p class="order-font" v-if="row.no">
+          <Tag size="small" color="orange">支付</Tag> {{ row.no }}
+        </p>
+        <p class="order-font" v-if="row.channelOrderNo">
+          <Tag size="small" color="green">渠道</Tag>
+          {{ row.channelOrderNo }}
+        </p>
+      </template>
+    </BasicTable>
+    <DetailModal />
   </Page>
 </template>