feat：【antd】【pay 支付】pay/app 代码优化 2/4

apps/web-antd/src/views/pay/app/data.ts

@@ -258,10 +258,9 @@ export function useAppFormSchema(): VbenFormSchema[] {
 
 /** 渠道新增/修改的表单 */
 export function useChannelFormSchema(formType: string = ''): VbenFormSchema[] {
-  // TODO @AI：id、appId、feeRate、code、备注，这几个整合起来（放最前面）。然后差异化的去 push
+  const schema: VbenFormSchema[] = [];
-  // TODO @AI：radiogroup 都改成 buttonStyle、optionType
+  // 添加通用字段
-  if (formType.includes('alipay_')) {
+  schema.push(
-    return [
     {
       component: 'Input',
       fieldName: 'id',
@@ -279,6 +278,15 @@ export function useChannelFormSchema(formType: string = ''): VbenFormSchema[] {
         triggerFields: [''],
       },
     },
+    {
+      label: '渠道编码',
+      fieldName: 'code',
+      component: 'Input',
+      dependencies: {
+        show: () => false,
+        triggerFields: [''],
+      },
+    },
     {
       label: '渠道费率',
       fieldName: 'feeRate',
@@ -290,6 +298,21 @@ export function useChannelFormSchema(formType: string = ''): VbenFormSchema[] {
       },
       defaultValue: 0,
     },
+    {
+      label: '渠道状态',
+      fieldName: 'status',
+      component: 'RadioGroup',
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+    },
+  );
+  // 根据类型添加特定字段
+  if (formType.includes('alipay_')) {
+    schema.push(
       {
         label: '开放平台 APPID',
         fieldName: 'config.appId',
@@ -299,16 +322,6 @@ export function useChannelFormSchema(formType: string = ''): VbenFormSchema[] {
           placeholder: '请输入开放平台 APPID',
         },
       },
-      {
-        label: '渠道状态',
-        fieldName: 'status',
-        component: 'RadioGroup',
-        rules: 'required',
-        componentProps: {
-          options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
-        },
-        defaultValue: 0,
-      },
       {
         label: '网关地址',
         fieldName: 'config.serverUrl',
@@ -325,6 +338,8 @@ export function useChannelFormSchema(formType: string = ''): VbenFormSchema[] {
               label: '沙箱环境',
             },
           ],
+          buttonStyle: 'solid',
+          optionType: 'button',
         },
       },
       {
@@ -339,6 +354,8 @@ export function useChannelFormSchema(formType: string = ''): VbenFormSchema[] {
               label: 'RSA2',
             },
           ],
+          buttonStyle: 'solid',
+          optionType: 'button',
         },
         defaultValue: 'RSA2',
       },
@@ -358,6 +375,8 @@ export function useChannelFormSchema(formType: string = ''): VbenFormSchema[] {
               label: '证书模式',
             },
           ],
+          buttonStyle: 'solid',
+          optionType: 'button',
         },
       },
       {
@@ -380,7 +399,7 @@ export function useChannelFormSchema(formType: string = ''): VbenFormSchema[] {
           rows: 3,
         },
         dependencies: {
-          show(values) {
+          show(values: any) {
             return values?.config?.mode === 1;
           },
           triggerFields: ['config.mode', 'mode', 'config'],
@@ -398,7 +417,7 @@ export function useChannelFormSchema(formType: string = ''): VbenFormSchema[] {
         }),
         rules: 'required',
         dependencies: {
-          show(values) {
+          show(values: any) {
             return values?.config?.mode === 2;
           },
           triggerFields: ['config.mode', 'mode', 'config'],
@@ -416,7 +435,7 @@ export function useChannelFormSchema(formType: string = ''): VbenFormSchema[] {
         }),
         rules: 'required',
         dependencies: {
-          show(values) {
+          show(values: any) {
             return values?.config?.mode === 2;
           },
           triggerFields: ['config.mode', 'mode', 'config'],
@@ -434,7 +453,7 @@ export function useChannelFormSchema(formType: string = ''): VbenFormSchema[] {
         }),
         rules: 'required',
         dependencies: {
-          show(values) {
+          show(values: any) {
             return values?.config?.mode === 2;
           },
           triggerFields: ['config.mode', 'mode', 'config'],
@@ -456,6 +475,8 @@ export function useChannelFormSchema(formType: string = ''): VbenFormSchema[] {
               label: 'AES',
             },
           ],
+          buttonStyle: 'solid',
+          optionType: 'button',
         },
         defaultValue: 'NONE',
       },
@@ -465,122 +486,15 @@ export function useChannelFormSchema(formType: string = ''): VbenFormSchema[] {
         component: 'Input',
         rules: 'required',
         dependencies: {
-          show(values) {
+          show(values: any) {
             return values?.config?.encryptType === 'AES';
           },
           triggerFields: ['config.encryptType', 'encryptType', 'config'],
         },
       },
-      {
+    );
-        label: '备注',
+  } else if (formType.includes('wx_')) {
-        fieldName: 'remark',
+    schema.push(
-        component: 'Input',
-        componentProps: {
-          placeholder: '请输入备注',
-        },
-      },
-    ];
-  } else if (formType.includes('mock') || formType.includes('wallet')) {
-    return [
-      {
-        component: 'Input',
-        fieldName: 'id',
-        dependencies: {
-          triggerFields: [''],
-          show: () => false,
-        },
-      },
-      {
-        label: '应用编号',
-        fieldName: 'appId',
-        component: 'Input',
-        dependencies: {
-          show: () => false,
-          triggerFields: [''],
-        },
-      },
-      {
-        label: '渠道状态',
-        fieldName: 'status',
-        component: 'RadioGroup',
-        rules: 'required',
-        componentProps: {
-          options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
-        },
-        defaultValue: 0,
-      },
-      {
-        label: '渠道编码',
-        fieldName: 'code',
-        component: 'Input',
-        dependencies: {
-          show: () => false,
-          triggerFields: [''],
-        },
-      },
-      {
-        label: '渠道费率',
-        fieldName: 'feeRate',
-        component: 'InputNumber',
-        rules: 'required',
-        componentProps: {
-          placeholder: '请输入渠道费率',
-          addonAfter: '%',
-        },
-        defaultValue: 0,
-        dependencies: {
-          show: () => false,
-          triggerFields: [''],
-        },
-      },
-      {
-        label: '备注',
-        fieldName: 'remark',
-        component: 'Input',
-        componentProps: {
-          placeholder: '请输入备注',
-        },
-      },
-    ];
-  } else if (formType.includes('wx')) {
-    return [
-      {
-        component: 'Input',
-        fieldName: 'id',
-        dependencies: {
-          triggerFields: [''],
-          show: () => false,
-        },
-      },
-      {
-        label: '应用编号',
-        fieldName: 'appId',
-        component: 'Input',
-        dependencies: {
-          show: () => false,
-          triggerFields: [''],
-        },
-      },
-      {
-        label: '渠道编码',
-        fieldName: 'code',
-        component: 'Input',
-        dependencies: {
-          show: () => false,
-          triggerFields: [''],
-        },
-      },
-      {
-        label: '渠道费率',
-        fieldName: 'feeRate',
-        component: 'InputNumber',
-        rules: 'required',
-        componentProps: {
-          placeholder: '请输入渠道费率',
-          addonAfter: '%',
-        },
-        defaultValue: 0,
-      },
       {
         label: '微信 APPID',
         fieldName: 'config.appId',
@@ -601,16 +515,6 @@ export function useChannelFormSchema(formType: string = ''): VbenFormSchema[] {
           placeholder: '请输入商户号',
         },
       },
-      {
-        label: '渠道状态',
-        fieldName: 'status',
-        component: 'RadioGroup',
-        rules: 'required',
-        componentProps: {
-          options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
-        },
-        defaultValue: 0,
-      },
       {
         label: 'API 版本',
         fieldName: 'config.apiVersion',
@@ -627,6 +531,8 @@ export function useChannelFormSchema(formType: string = ''): VbenFormSchema[] {
               value: 'v3',
             },
           ],
+          buttonStyle: 'solid',
+          optionType: 'button',
         },
       },
       {
@@ -638,7 +544,7 @@ export function useChannelFormSchema(formType: string = ''): VbenFormSchema[] {
           placeholder: '请输入商户密钥',
         },
         dependencies: {
-          show(values) {
+          show(values: any) {
             return values?.config?.apiVersion === 'v2';
           },
           triggerFields: ['config.mode', 'mode', 'config'],
@@ -659,7 +565,7 @@ export function useChannelFormSchema(formType: string = ''): VbenFormSchema[] {
         }),
         rules: 'required',
         dependencies: {
-          show(values) {
+          show(values: any) {
             return values?.config?.apiVersion === 'v2';
           },
           triggerFields: ['config.mode', 'mode', 'config'],
@@ -674,7 +580,7 @@ export function useChannelFormSchema(formType: string = ''): VbenFormSchema[] {
           placeholder: '请输入 API V3 密钥',
         },
         dependencies: {
-          show(values) {
+          show(values: any) {
             return values?.config?.apiVersion === 'v3';
           },
           triggerFields: ['config.mode', 'mode', 'config'],
@@ -695,7 +601,7 @@ export function useChannelFormSchema(formType: string = ''): VbenFormSchema[] {
         }),
         rules: 'required',
         dependencies: {
-          show(values) {
+          show(values: any) {
             return values?.config?.apiVersion === 'v3';
           },
           triggerFields: ['config.mode', 'mode', 'config'],
@@ -711,7 +617,7 @@ export function useChannelFormSchema(formType: string = ''): VbenFormSchema[] {
           placeholder: '请输入证书序列号',
         },
         dependencies: {
-          show(values) {
+          show(values: any) {
             return values?.config?.apiVersion === 'v3';
           },
           triggerFields: ['config.mode', 'mode', 'config'],
@@ -731,7 +637,7 @@ export function useChannelFormSchema(formType: string = ''): VbenFormSchema[] {
           },
         }),
         dependencies: {
-          show(values) {
+          show(values: any) {
             return values?.config?.apiVersion === 'v3';
           },
           triggerFields: ['config.mode', 'mode', 'config'],
@@ -747,22 +653,22 @@ export function useChannelFormSchema(formType: string = ''): VbenFormSchema[] {
           placeholder: '请输入公钥 ID',
         },
         dependencies: {
-          show(values) {
+          show(values: any) {
             return values?.config?.apiVersion === 'v3';
           },
           triggerFields: ['config.mode', 'mode', 'config'],
         },
       },
-      {
+    );
+  }
+  // 添加备注字段（所有类型都有）
+  schema.push({
     label: '备注',
     fieldName: 'remark',
     component: 'Input',
     componentProps: {
       placeholder: '请输入备注',
     },
-      },
+  });
-    ];
+  return schema;
-  } else {
-    return [];
-  }
 }

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ActionItem, VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { PayAppApi } from '#/api/pay/app';
 
 import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
@@ -90,9 +90,22 @@ async function handleStatusChange(
   });
 }
 
-/** 根据渠道编码判断渠道列表中是否存在 */
+/** 生成渠道配置按钮 */
-function isChannelExists(channels: string[], channelCode: string) {
+function createChannelConfigAction(
-  return channels?.includes(channelCode);
+  row: PayAppApi.App,
+  channelCode: string,
+): ActionItem[] {
+  const exists = row.channelCodes?.includes(channelCode);
+  return [
+    {
+      type: 'primary',
+      size: 'small',
+      icon: exists ? 'lucide:check' : 'lucide:x',
+      danger: !exists,
+      shape: 'circle',
+      onClick: handleChannelForm.bind(null, row, channelCode),
+    },
+  ];
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
@@ -173,340 +186,81 @@ const [Grid, gridApi] = useVbenVxeGrid({
           ]"
         />
       </template>
-      <!-- TODO @AI：有没办法简化 -->
       <template #alipayAppConfig="{ row }">
         <TableAction
-          :actions="[
+          :actions="
-            {
+            createChannelConfigAction(row, PayChannelEnum.ALIPAY_APP.code)
-              type: 'primary',
+          "
-              size: 'small',
-              icon: isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.ALIPAY_APP.code,
-              )
-                ? 'lucide:check'
-                : 'lucide:x',
-              danger: !isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.ALIPAY_APP.code,
-              ),
-              shape: 'circle',
-              onClick: handleChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.ALIPAY_APP.code,
-              ),
-            },
-          ]"
         />
       </template>
       <template #alipayPCConfig="{ row }">
         <TableAction
-          :actions="[
+          :actions="
-            {
+            createChannelConfigAction(row, PayChannelEnum.ALIPAY_PC.code)
-              type: 'primary',
+          "
-              size: 'small',
-              icon: isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.ALIPAY_PC.code,
-              )
-                ? 'lucide:check'
-                : 'lucide:x',
-              danger: !isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.ALIPAY_PC.code,
-              ),
-              shape: 'circle',
-              onClick: handleChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.ALIPAY_PC.code,
-              ),
-            },
-          ]"
         />
       </template>
       <template #alipayWAPConfig="{ row }">
         <TableAction
-          :actions="[
+          :actions="
-            {
+            createChannelConfigAction(row, PayChannelEnum.ALIPAY_WAP.code)
-              type: 'primary',
+          "
-              size: 'small',
-              icon: isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.ALIPAY_WAP.code,
-              )
-                ? 'lucide:check'
-                : 'lucide:x',
-              danger: !isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.ALIPAY_WAP.code,
-              ),
-              shape: 'circle',
-              onClick: handleChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.ALIPAY_WAP.code,
-              ),
-            },
-          ]"
         />
       </template>
       <template #alipayQrConfig="{ row }">
         <TableAction
-          :actions="[
+          :actions="
-            {
+            createChannelConfigAction(row, PayChannelEnum.ALIPAY_QR.code)
-              type: 'primary',
+          "
-              size: 'small',
-              icon: isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.ALIPAY_QR.code,
-              )
-                ? 'lucide:check'
-                : 'lucide:x',
-              danger: !isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.ALIPAY_QR.code,
-              ),
-              shape: 'circle',
-              onClick: handleChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.ALIPAY_QR.code,
-              ),
-            },
-          ]"
         />
       </template>
       <template #alipayBarConfig="{ row }">
         <TableAction
-          :actions="[
+          :actions="
-            {
+            createChannelConfigAction(row, PayChannelEnum.ALIPAY_BAR.code)
-              type: 'primary',
+          "
-              size: 'small',
-              icon: isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.ALIPAY_BAR.code,
-              )
-                ? 'lucide:check'
-                : 'lucide:x',
-              danger: !isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.ALIPAY_BAR.code,
-              ),
-              shape: 'circle',
-              onClick: handleChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.ALIPAY_BAR.code,
-              ),
-            },
-          ]"
         />
       </template>
       <template #wxLiteConfig="{ row }">
         <TableAction
-          :actions="[
+          :actions="createChannelConfigAction(row, PayChannelEnum.WX_LITE.code)"
-            {
-              type: 'primary',
-              size: 'small',
-              icon: isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.WX_LITE.code,
-              )
-                ? 'lucide:check'
-                : 'lucide:x',
-              danger: !isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.WX_LITE.code,
-              ),
-              shape: 'circle',
-              onClick: handleChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.WX_LITE.code,
-              ),
-            },
-          ]"
         />
       </template>
       <template #wxPubConfig="{ row }">
         <TableAction
-          :actions="[
+          :actions="createChannelConfigAction(row, PayChannelEnum.WX_PUB.code)"
-            {
-              type: 'primary',
-              size: 'small',
-              icon: isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.WX_PUB.code,
-              )
-                ? 'lucide:check'
-                : 'lucide:x',
-              danger: !isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.WX_PUB.code,
-              ),
-              shape: 'circle',
-              onClick: handleChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.WX_PUB.code,
-              ),
-            },
-          ]"
         />
       </template>
       <template #wxAppConfig="{ row }">
         <TableAction
-          :actions="[
+          :actions="createChannelConfigAction(row, PayChannelEnum.WX_APP.code)"
-            {
-              type: 'primary',
-              size: 'small',
-              icon: isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.WX_APP.code,
-              )
-                ? 'lucide:check'
-                : 'lucide:x',
-              danger: !isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.WX_APP.code,
-              ),
-              shape: 'circle',
-              onClick: handleChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.WX_APP.code,
-              ),
-            },
-          ]"
         />
       </template>
       <template #wxNativeConfig="{ row }">
         <TableAction
-          :actions="[
+          :actions="
-            {
+            createChannelConfigAction(row, PayChannelEnum.WX_NATIVE.code)
-              type: 'primary',
+          "
-              size: 'small',
-              icon: isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.WX_NATIVE.code,
-              )
-                ? 'lucide:check'
-                : 'lucide:x',
-              danger: !isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.WX_NATIVE.code,
-              ),
-              shape: 'circle',
-              onClick: handleChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.WX_NATIVE.code,
-              ),
-            },
-          ]"
         />
       </template>
       <template #wxWapConfig="{ row }">
         <TableAction
-          :actions="[
+          :actions="createChannelConfigAction(row, PayChannelEnum.WX_WAP.code)"
-            {
-              type: 'primary',
-              size: 'small',
-              icon: isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.WX_WAP.code,
-              )
-                ? 'lucide:check'
-                : 'lucide:x',
-              danger: !isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.WX_WAP.code,
-              ),
-              shape: 'circle',
-              onClick: handleChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.WX_WAP.code,
-              ),
-            },
-          ]"
         />
       </template>
       <template #wxBarConfig="{ row }">
         <TableAction
-          :actions="[
+          :actions="createChannelConfigAction(row, PayChannelEnum.WX_BAR.code)"
-            {
-              type: 'primary',
-              size: 'small',
-              icon: isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.WX_BAR.code,
-              )
-                ? 'lucide:check'
-                : 'lucide:x',
-              danger: !isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.WX_BAR.code,
-              ),
-              shape: 'circle',
-              onClick: handleChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.WX_BAR.code,
-              ),
-            },
-          ]"
         />
       </template>
       <template #walletConfig="{ row }">
         <TableAction
-          :actions="[
+          :actions="createChannelConfigAction(row, PayChannelEnum.WALLET.code)"
-            {
-              type: 'primary',
-              size: 'small',
-              icon: isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.WALLET.code,
-              )
-                ? 'lucide:check'
-                : 'lucide:x',
-              danger: !isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.WALLET.code,
-              ),
-              shape: 'circle',
-              onClick: handleChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.WALLET.code,
-              ),
-            },
-          ]"
         />
       </template>
       <template #mockConfig="{ row }">
         <TableAction
-          :actions="[
+          :actions="createChannelConfigAction(row, PayChannelEnum.MOCK.code)"
-            {
-              type: 'primary',
-              size: 'small',
-              icon: isChannelExists(row.channelCodes, PayChannelEnum.MOCK.code)
-                ? 'lucide:check'
-                : 'lucide:x',
-              danger: !isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.MOCK.code,
-              ),
-              shape: 'circle',
-              onClick: handleChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.MOCK.code,
-              ),
-            },
-          ]"
         />
       </template>
     </Grid>