feat(web-payment): 新增三方交易流水查询功能

庹加林
1 parent e274c08f
Showing 4 changed files with 236 additions and 16 deletions
apps/web-payment/src/api/report.ts
apps/web-payment/src/router/routes/core.ts
apps/web-payment/src/views/report/thirdPayRecord/index.vue
vben-admin.code-workspace
+import { requestClient } from '#/api/request';
+
+export async function getPayRecordList(data: any) {
+  return requestClient.post<any>(
+    '/onlinePayment/report/listDetail/loadData',
+    data,
+    { responseReturn: 'body' },
+  );
+}
@@ -52,6 +52,14 @@ const coreRoutes: RouteRecordRaw[] = [
       title: '支付成功',
     },
   },
+  {
+    name: 'ThirdPayRecord',
+    path: '/report/thirdPayRecord',
+    component: () => import('#/views/report/thirdPayRecord/index.vue'),
+    meta: {
+      title: '三方交易流水查询',
+    },
+  },
 ];
 export { coreRoutes, fallbackNotFoundRoute };
+<script lang="ts" setup>
+import type { VbenFormProps } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import dayjs from 'dayjs';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getPayRecordList } from '#/api/report';
+
+const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'customerName',
+      label: '客户',
+      componentProps: {
+        placeholder: '请输入客户名称',
+        clearable: true,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'paymentId',
+      label: '交易订单号',
+      componentProps: {
+        placeholder: '请输入交易订单号',
+        clearable: true,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'serialNo',
+      label: '业务单号',
+      componentProps: {
+        placeholder: '请输入业务单号',
+        clearable: true,
+      },
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        multiple: true,
+        options: [
+          { value: 10, label: '微信支付' },
+          { value: 11, label: '支付宝支付' },
+          { value: 19, label: '园区卡支付' },
+          { value: 20, label: '工商银行' },
+          { value: 21, label: '农业银行' },
+          { value: 22, label: '中国银行' },
+          { value: 23, label: '建设银行' },
+          { value: 24, label: '交通银行' },
+          { value: 25, label: '中信银行' },
+          { value: 27, label: '招商银行' },
+          { value: 28, label: '盛京银行' },
+          { value: 29, label: '农商银行' },
+          { value: 30, label: '杭州银行' },
+        ],
+      },
+      fieldName: 'channelIdList',
+      label: '支付通道',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        multiple: true,
+        options: [
+          { value: 0, label: '未知方式' },
+          { value: 10, label: '微信支付' },
+          { value: 11, label: '支付宝支付' },
+          { value: 12, label: '银联支付' },
+          { value: 13, label: '掌银支付' },
+          { value: 19, label: '园区卡支付' },
+          { value: 20, label: '银行卡支付' },
+        ],
+      },
+      fieldName: 'outPayTypeList',
+      label: '支付方式',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        multiple: true,
+        options: [
+          { value: 10, label: '交易' },
+          { value: 20, label: '退款' },
+        ],
+      },
+      fieldName: 'tradeTypeList',
+      label: '交易类型',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        multiple: true,
+        options: [{ value: 10, label: '大润发' }],
+      },
+      fieldName: 'sourceList',
+      label: '来源',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        multiple: true,
+        options: [
+          { value: 1, label: '待处理' },
+          { value: 4, label: '交易成功' },
+          { value: 5, label: '交易退款' },
+          { value: 6, label: '交易失败' },
+          { value: 7, label: '交易关闭' },
+        ],
+      },
+      fieldName: 'stateList',
+      label: '支付状态',
+    },
+    {
+      component: 'DatePicker',
+      fieldName: 'createTime',
+      label: '创建时间',
+      componentProps: {
+        type: 'daterange',
+        // clearable: false,
+      },
+      defaultValue: [
+        dayjs().format('YYYY-MM-DD'),
+        dayjs().format('YYYY-MM-DD'),
+      ],
+    },
+    {
+      component: 'DatePicker',
+      fieldName: 'payTime',
+      label: '支付时间',
+      componentProps: {
+        type: 'daterange',
+        // clearable: false,
+      },
+    },
+  ],
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  submitButtonOptions: {
+    content: '查询',
+  },
+  // 是否在字段值改变时提交表单
+  submitOnChange: false,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+  wrapperClass:
+    'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4',
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    highlight: true,
+    labelField: 'name',
+  },
+  columns: [
+    { field: 'paymentId', title: '交易订单号', width: 160 },
+    { field: 'serialNo', title: '业务单号', width: 160 },
+    // { field: 'customerCode', title: '客户编号' },
+    { field: 'customerName', title: '客户名称' },
+    { field: 'channelName', title: '支付通道' },
+    { field: 'outPayTypeName', title: '支付方式' },
+    { field: 'tradeTypeName', title: '支付类型' },
+    { field: 'goods', title: '商品', width: 160 },
+    { field: 'mchName', title: '商户名称', width: 160 },
+    { field: 'amountText', title: '交易金额' },
+    { field: 'payTime', title: '支付时间', width: 160 },
+    { field: 'createdTime', title: '创建时间', width: 160 },
+    { field: 'modifiedTime', title: '修改时间', width: 160 },
+    { field: 'stateName', title: '状态' },
+    { field: 'sourceName', title: '来源' },
+    { field: 'description', title: '说明' },
+  ],
+  keepSource: true,
+  border: true,
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues) => {
+        try {
+          const res = await getPayRecordList({
+            mchId: 1001,
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            startTime: formValues.createTime
+              ? `${dayjs(formValues.createTime[0]).format('YYYY-MM-DD')} 00:00:00`
+              : '',
+            endTime: formValues.createTime
+              ? `${dayjs(formValues.createTime[1]).format('YYYY-MM-DD')} 23:59:59`
+              : '',
+            startPayTime: formValues.payTime
+              ? `${dayjs(formValues.payTime[0]).format('YYYY-MM-DD')} 00:00:00`
+              : '',
+            endPayTime: formValues.payTime
+              ? `${dayjs(formValues.payTime[1]).format('YYYY-MM-DD')} 23:59:59`
+              : '',
+            ...formValues,
+          });
+          return {
+            items: res.data,
+            total: res.total,
+          };
+        } catch (error) {
+          console.warn(error);
+        }
+      },
+    },
+  },
+};
+
+const [Grid] = useVbenVxeGrid({ formOptions, gridOptions });
+</script>
+
+<template>
+  <div class="vp-raw w-full">
+    <Grid />
+  </div>
+</template>
 {
   "folders": [
     {
-      "name": "@vben/backend-mock",
-      "path": "apps/backend-mock",
-    },
-    {
-      "name": "@vben/web-antd",
-      "path": "apps/web-antd",
-    },
-    {
       "name": "@vben/web-payment",
       "path": "apps/web-payment",
     },
     {
-      "name": "@vben/web-naive",
-      "path": "apps/web-naive",
-    },
-    {
-      "name": "@vben/web-tdesign",
-      "path": "apps/web-tdesign",
-    },
-    {
       "name": "@vben/docs",
       "path": "docs",
     },