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

apps/web-antd/src/views/pay/app/modules/app-form.vue

@@ -11,7 +11,7 @@ import { message } from 'ant-design-vue';
 import { useVbenForm } from '#/adapter/form';
 import { createApp, getApp, updateApp } from '#/api/pay/app';
 
-import { useFormSchema } from '../data';
+import { useAppFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
 const formData = ref<PayAppApi.App>();
@@ -30,7 +30,7 @@ const [Form, formApi] = useVbenForm({
     labelWidth: 160,
   },
   layout: 'horizontal',
-  schema: useFormSchema(),
+  schema: useAppFormSchema(),
   showDefaultActions: false,
 });
 
@@ -53,7 +53,7 @@ const [Modal, modalApi] = useVbenModal({
       modalApi.unlock();
     }
   },
-  onOpenChange: async (isOpen) => {
+  async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       formData.value = undefined;
       return;

apps/web-antd/src/views/pay/app/modules/channel-form.vue

@@ -12,11 +12,10 @@ import { message } from 'ant-design-vue';
 import { useVbenForm } from '#/adapter/form';
 import { createChannel, getChannel, updateChannel } from '#/api/pay/channel';
 
-import { channelSchema } from './data';
+import { useChannelFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
 const formData = ref<any>();
-const formType = ref<string>('');
 const title = computed(() => {
   return formData.value?.id === 0
     ? $t('ui.actionTitle.create', '应用')
@@ -44,17 +43,9 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.lock();
     // 提交表单
     const data = (await formApi.getValues()) as PayChannelApi.Channel;
-    // 只保留表单中实际存在的字段，且值不为 undefined
-    const data2 = Object.fromEntries(
-      Object.entries(data).filter(([key, value]) => {
-        // 检查字段是否在表单中存在，且值不为 undefined
-        return key in data && value !== undefined;
-      }),
-    );
-    const data3 = { ...formData.value, ...data2 };
-    data3.config = JSON.stringify(data3.config);
+    data.config = JSON.stringify(data.config);
     try {
-      await (data3.id ? updateChannel(data3) : createChannel(data3));
+      await (data.id ? updateChannel(data) : createChannel(data));
       // 关闭并提示
       await modalApi.close();
       emit('success');
@@ -69,88 +60,69 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     // 加载数据
-    const { id, payCode } = modalApi.getData() as {
-      id?: number;
-      payCode?: string;
+    const { appId, code } = modalApi.getData() as {
+      appId?: number;
+      code?: string;
     };
-    if (!id || !payCode) {
+    if (!appId || !code) {
       return;
     }
     modalApi.lock();
-    formType.value = payCode;
-    if (payCode.includes('alipay_')) {
-      formData.value = {
-        appId: id,
-        code: payCode,
-        status: CommonStatusEnum.ENABLE,
-        remark: '',
-        feeRate: null,
+    formData.value = {
+      appId,
+      code,
+      status: CommonStatusEnum.ENABLE,
+      remark: '',
+      feeRate: 0,
+      config: {},
+    };
+    if (code.includes('alipay_')) {
+      formData.value.config = {
+        appId: undefined,
+        serverUrl: undefined,
+        signType: 'RSA2',
+        mode: undefined,
+        privateKey: undefined,
+        alipayPublicKey: undefined,
+        appCertContent: undefined,
+        alipayPublicCertContent: undefined,
+        rootCertContent: undefined,
+        encryptType: undefined,
+        encryptKey: undefined,
+      };
+    } else if (code.includes('mock')) {
+      formData.value.config = {
+        name: 'mock-conf',
+      };
+    } else if (code.includes('wallet')) {
+      formData.value.config = {
         config: {
-          appId: '',
-          serverUrl: null,
-          signType: 'RSA2',
-          mode: null,
-          privateKey: '',
-          alipayPublicKey: '',
-          appCertContent: '',
-          alipayPublicCertContent: '',
-          rootCertContent: '',
-          encryptType: '',
-          encryptKey: '',
+          name: 'wallet-conf',
         },
       };
-    } else if (payCode.includes('mock')) {
-      formData.value = {
-        appId: id,
-        code: payCode,
-        status: CommonStatusEnum.ENABLE,
-        remark: '',
-        feeRate: 0,
-        config: {
-          name: 'mock-conf',
-        },
-      };
-    } else if (payCode.includes('wallet')) {
-      formData.value = {
-        appId: id,
-        code: payCode,
-        status: CommonStatusEnum.ENABLE,
-        remark: '',
-        feeRate: 0,
-        config: {
-          name: 'mock-conf',
-        },
-      };
-    } else if (payCode.includes('wx')) {
-      formData.value = {
-        appId: id,
-        code: payCode,
-        status: CommonStatusEnum.ENABLE,
-        feeRate: undefined,
-        remark: '',
-        config: {
-          appId: '',
-          mchId: '',
-          apiVersion: '',
-          mchKey: '',
-          keyContent: '',
-          privateKeyContent: '',
-          certSerialNo: '',
-          apiV3Key: '',
-          publicKeyContent: '',
-          publicKeyId: '',
-        },
+    } else if (code.includes('wx')) {
+      formData.value.config = {
+        appId: undefined,
+        mchId: undefined,
+        apiVersion: undefined,
+        mchKey: undefined,
+        keyContent: undefined,
+        privateKeyContent: undefined,
+        certSerialNo: undefined,
+        apiV3Key: undefined,
+        publicKeyContent: undefined,
+        publicKeyId: undefined,
       };
     }
 
     try {
-      const res = await getChannel(id, payCode);
-      formData.value = {
-        ...res,
-        config: {
-          ...JSON.parse(res.config),
-        },
-      };
+      const res = await getChannel(appId, code);
+      if (res) {
+        formData.value = {
+          ...res,
+          config: JSON.parse(res.config),
+        };
+      }
       // 设置到 values
       await formApi.setValues(formData.value);
     } finally {
@@ -161,7 +133,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal :close-on-click-modal="false" :title="title" class="w-2/5">
-    <Form :schema="channelSchema(formType)" />
+  <Modal :title="title" class="w-2/5">
+    <Form :schema="useChannelFormSchema(formData?.code)" />
   </Modal>
 </template>

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

@@ -1,492 +0,0 @@
-import type { VbenFormSchema } from '#/adapter/form';
-
-import { h } from 'vue';
-
-import { DICT_TYPE } from '@vben/constants';
-import { getDictOptions } from '@vben/hooks';
-
-import { InputUpload } from '#/components/upload';
-
-export function channelSchema(formType: string): VbenFormSchema[] {
-  if (formType.includes('alipay_')) {
-    return [
-      {
-        label: '应用编号',
-        fieldName: 'appId',
-        component: 'Input',
-        dependencies: {
-          show: () => false,
-          triggerFields: [''],
-        },
-      },
-      {
-        label: '渠道费率',
-        fieldName: 'feeRate',
-        component: 'InputNumber',
-        rules: 'required',
-        componentProps: {
-          placeholder: '请输入渠道费率',
-          addonAfter: '%',
-        },
-        defaultValue: 0,
-      },
-      {
-        label: '开放平台 APPID',
-        fieldName: 'config.appId',
-        component: 'Input',
-        rules: 'required',
-        componentProps: {
-          placeholder: '请输入开放平台 APPID',
-        },
-      },
-      {
-        label: '渠道状态',
-        fieldName: 'status',
-        component: 'RadioGroup',
-        rules: 'required',
-        componentProps: {
-          options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
-        },
-        defaultValue: 0,
-      },
-      {
-        label: '网关地址',
-        fieldName: 'config.serverUrl',
-        component: 'RadioGroup',
-        rules: 'required',
-        componentProps: {
-          options: [
-            {
-              value: 'https://openapi.alipay.com/gateway.do',
-              label: '线上环境',
-            },
-            {
-              value: 'https://openapi-sandbox.dl.alipaydev.com/gateway.do',
-              label: '沙箱环境',
-            },
-          ],
-        },
-      },
-      {
-        label: '算法类型',
-        fieldName: 'config.signType',
-        component: 'RadioGroup',
-        rules: 'required',
-        componentProps: {
-          options: [
-            {
-              value: 'RSA2',
-              label: 'RSA2',
-            },
-          ],
-        },
-        defaultValue: 'RSA2',
-      },
-      {
-        label: '公钥类型',
-        fieldName: 'config.mode',
-        component: 'RadioGroup',
-        rules: 'required',
-        componentProps: {
-          options: [
-            {
-              value: 1,
-              label: '公钥模式',
-            },
-            {
-              value: 2,
-              label: '证书模式',
-            },
-          ],
-        },
-      },
-      {
-        label: '应用私钥',
-        fieldName: 'config.privateKey',
-        component: 'Textarea',
-        rules: 'required',
-        componentProps: {
-          placeholder: '请输入应用私钥',
-          rows: 8,
-        },
-      },
-      {
-        label: '支付宝公钥',
-        fieldName: 'config.alipayPublicKey',
-        component: 'Textarea',
-        rules: 'required',
-        componentProps: {
-          placeholder: '请输入支付宝公钥',
-          rows: 8,
-        },
-        dependencies: {
-          show(values) {
-            return values?.config?.mode === 1;
-          },
-          triggerFields: ['config.mode', 'mode', 'config'],
-        },
-      },
-      {
-        label: '商户公钥应用证书',
-        fieldName: 'config.appCertContent',
-        component: h(InputUpload, {
-          inputType: 'textarea',
-          textareaProps: { rows: 8, placeholder: '请上传商户公钥应用证书' },
-          fileUploadProps: {
-            accept: ['crt'],
-          },
-        }),
-        rules: 'required',
-        dependencies: {
-          show(values) {
-            return values?.config?.mode === 2;
-          },
-          triggerFields: ['config.mode', 'mode', 'config'],
-        },
-      },
-      {
-        label: '支付宝公钥证书',
-        fieldName: 'config.alipayPublicCertContent',
-        component: h(InputUpload, {
-          inputType: 'textarea',
-          textareaProps: { rows: 8, placeholder: '请上传支付宝公钥证书' },
-          fileUploadProps: {
-            accept: ['crt'],
-          },
-        }),
-        rules: 'required',
-        dependencies: {
-          show(values) {
-            return values?.config?.mode === 2;
-          },
-          triggerFields: ['config.mode', 'mode', 'config'],
-        },
-      },
-      {
-        label: '根证书',
-        fieldName: 'config.rootCertContent',
-        component: h(InputUpload, {
-          inputType: 'textarea',
-          textareaProps: { rows: 8, placeholder: '请上传根证书' },
-          fileUploadProps: {
-            accept: ['crt'],
-          },
-        }),
-        rules: 'required',
-        dependencies: {
-          show(values) {
-            return values?.config?.mode === 2;
-          },
-          triggerFields: ['config.mode', 'mode', 'config'],
-        },
-      },
-      {
-        label: '接口内容加密方式',
-        fieldName: 'config.encryptType',
-        component: 'RadioGroup',
-        rules: 'required',
-        componentProps: {
-          options: [
-            {
-              value: 'NONE',
-              label: '无加密',
-            },
-            {
-              value: 'AES',
-              label: 'AES',
-            },
-          ],
-        },
-        defaultValue: 'NONE',
-      },
-      {
-        label: '接口内容加密密钥',
-        fieldName: 'config.encryptKey',
-        component: 'Input',
-        rules: 'required',
-        dependencies: {
-          show(values) {
-            return values?.config?.encryptType === 'AES';
-          },
-          triggerFields: ['config.encryptType', 'encryptType', 'config'],
-        },
-      },
-      {
-        label: '备注',
-        fieldName: 'remark',
-        component: 'Input',
-        componentProps: {
-          placeholder: '请输入备注',
-        },
-      },
-    ];
-  } else if (formType.includes('mock') || formType.includes('wallet')) {
-    return [
-      {
-        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 [
-      {
-        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',
-        help: '前往微信商户平台[https://pay.weixin.qq.com/index.php/extend/merchant_appid/mapay_platform/account_manage]查看 APPID',
-        component: 'Input',
-        rules: 'required',
-        componentProps: {
-          placeholder: '请输入微信 APPID',
-        },
-      },
-      {
-        label: '商户号',
-        fieldName: 'config.mchId',
-        help: '前往微信商户平台[https://pay.weixin.qq.com/index.php/extend/pay_setting]查看商户号',
-        component: 'Input',
-        rules: 'required',
-        componentProps: {
-          placeholder: '请输入商户号',
-        },
-      },
-      {
-        label: '渠道状态',
-        fieldName: 'status',
-        component: 'RadioGroup',
-        rules: 'required',
-        componentProps: {
-          options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
-        },
-        defaultValue: 0,
-      },
-      {
-        label: 'API 版本',
-        fieldName: 'config.apiVersion',
-        component: 'RadioGroup',
-        rules: 'required',
-        componentProps: {
-          options: [
-            {
-              label: 'v2',
-              value: 'v2',
-            },
-            {
-              label: 'v3',
-              value: 'v3',
-            },
-          ],
-        },
-      },
-      {
-        label: '商户密钥',
-        fieldName: 'config.mchKey',
-        component: 'Input',
-        rules: 'required',
-        componentProps: {
-          placeholder: '请输入商户密钥',
-        },
-        dependencies: {
-          show(values) {
-            return values?.config?.apiVersion === 'v2';
-          },
-          triggerFields: ['config.mode', 'mode', 'config'],
-        },
-      },
-      {
-        label: 'apiclient_cert.p12 证书',
-        fieldName: 'config.keyContent',
-        component: h(InputUpload, {
-          inputType: 'textarea',
-          textareaProps: {
-            rows: 8,
-            placeholder: '请上传 apiclient_cert.p12 证书',
-          },
-          fileUploadProps: {
-            accept: ['p12'],
-          },
-        }),
-        rules: 'required',
-        dependencies: {
-          show(values) {
-            return values?.config?.apiVersion === 'v2';
-          },
-          triggerFields: ['config.mode', 'mode', 'config'],
-        },
-      },
-      {
-        label: 'API V3 密钥',
-        fieldName: 'config.apiV3Key',
-        component: 'Input',
-        rules: 'required',
-        componentProps: {
-          placeholder: '请输入 API V3 密钥',
-        },
-        dependencies: {
-          show(values) {
-            return values?.config?.apiVersion === 'v3';
-          },
-          triggerFields: ['config.mode', 'mode', 'config'],
-        },
-      },
-      {
-        label: 'apiclient_key.pem 证书',
-        fieldName: 'config.privateKeyContent',
-        component: h(InputUpload, {
-          inputType: 'textarea',
-          textareaProps: {
-            rows: 8,
-            placeholder: '请上传 apiclient_key.pem 证书',
-          },
-          fileUploadProps: {
-            accept: ['pem'],
-          },
-        }),
-        rules: 'required',
-        dependencies: {
-          show(values) {
-            return values?.config?.apiVersion === 'v3';
-          },
-          triggerFields: ['config.mode', 'mode', 'config'],
-        },
-      },
-      {
-        label: '证书序列号',
-        fieldName: 'config.certSerialNo',
-        component: 'Input',
-        help: '前往微信商户平台[https://pay.weixin.qq.com/index.php/core/cert/api_cert#/api-cert-manage]查看证书序列号',
-        rules: 'required',
-        componentProps: {
-          placeholder: '请输入证书序列号',
-        },
-        dependencies: {
-          show(values) {
-            return values?.config?.apiVersion === 'v3';
-          },
-          triggerFields: ['config.mode', 'mode', 'config'],
-        },
-      },
-      {
-        label: 'public_key.pem 证书',
-        fieldName: 'config.publicKeyContent',
-        component: h(InputUpload, {
-          inputType: 'textarea',
-          textareaProps: {
-            rows: 8,
-            placeholder: '请上传 public_key.pem 证书',
-          },
-          fileUploadProps: {
-            accept: ['pem'],
-          },
-        }),
-        dependencies: {
-          show(values) {
-            return values?.config?.apiVersion === 'v3';
-          },
-          triggerFields: ['config.mode', 'mode', 'config'],
-        },
-      },
-      {
-        label: '公钥 ID',
-        fieldName: 'config.publicKeyId',
-        component: 'Input',
-        help: '微信支付公钥产品简介及使用说明[https://pay.weixin.qq.com/doc/v3/merchant/4012153196]',
-        rules: 'required',
-        componentProps: {
-          placeholder: '请输入公钥 ID',
-        },
-        dependencies: {
-          show(values) {
-            return values?.config?.apiVersion === 'v3';
-          },
-          triggerFields: ['config.mode', 'mode', 'config'],
-        },
-      },
-      {
-        label: '备注',
-        fieldName: 'remark',
-        component: 'Input',
-        componentProps: {
-          placeholder: '请输入备注',
-        },
-      },
-    ];
-  } else {
-    return [];
-  }
-}