refactor: pay app

apps/web-antd/package.json

@@ -26,7 +26,6 @@
     "#/*": "./src/*"
   },
   "dependencies": {
-    "@ant-design/icons-vue": "catalog:",
     "@form-create/ant-design-vue": "catalog:",
     "@form-create/antd-designer": "catalog:",
     "@tinymce/tinymce-vue": "catalog:",

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

@@ -1,9 +1,12 @@
-import type { FormSchemaGetter } from '#/adapter/form';
+import type { VbenFormSchema } from '#/adapter/form';
-import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { PayAppApi } from '#/api/pay/app';
 
+import { CommonStatusEnum } from '#/utils/constants';
 import { DICT_TYPE, getDictOptions } from '#/utils/dict';
 
-export const querySchema: FormSchemaGetter = () => [
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
     {
       component: 'Input',
       fieldName: 'name',
@@ -29,9 +32,16 @@ export const querySchema: FormSchemaGetter = () => [
         placeholder: ['开始日期', '结束日期'],
       },
     },
-];
+  ];
+}
 
-export const columns: VxeGridProps['columns'] = [
+export function useGridColumns<T = PayAppApi.App>(
+  onStatusChange?: (
+    newStatus: number,
+    row: T,
+  ) => PromiseLike<boolean | undefined>,
+): VxeTableGridOptions['columns'] {
+  return [
     { type: 'checkbox', width: 60 },
     {
       title: '应用标识',
@@ -42,10 +52,17 @@ export const columns: VxeGridProps['columns'] = [
       field: 'name',
     },
     {
-    title: '开启状态',
       field: 'status',
-    slots: {
+      title: '状态',
-      default: 'status',
+      minWidth: 100,
+      align: 'center',
+      cellRender: {
+        attrs: { beforeChange: onStatusChange },
+        name: 'CellSwitch',
+        props: {
+          checkedValue: CommonStatusEnum.ENABLE,
+          unCheckedValue: CommonStatusEnum.DISABLE,
+        },
       },
     },
     {
@@ -139,15 +156,16 @@ export const columns: VxeGridProps['columns'] = [
       },
     },
     {
-    field: 'action',
-    fixed: 'right',
-    slots: { default: 'action' },
       title: '操作',
-    minWidth: 160,
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
     },
-];
+  ];
-
+}
-export const modalSchema: FormSchemaGetter = () => [
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
     {
       label: '应用编号',
       fieldName: 'id',
@@ -220,4 +238,5 @@ export const modalSchema: FormSchemaGetter = () => [
         placeholder: '请输入备注',
       },
     },
-];
+  ];
+}

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

@@ -1,90 +1,83 @@
 <script lang="ts" setup>
+import type { PayAppApi } from '#/api/pay/app';
+
 import { computed, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
-import { cloneDeep } from '@vben/utils';
+
+import { message } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
-import * as PayApi from '#/api/pay/app';
+import { createApp, getApp, updateApp } from '#/api/pay/app';
 
-import { modalSchema } from '../data';
+import { useFormSchema } from '../data';
 
-const emit = defineEmits<{ reload: [] }>();
+const emit = defineEmits(['success']);
-
+const formData = ref<PayAppApi.App>();
-const isUpdate = ref(false);
 const title = computed(() => {
-  return isUpdate.value
+  return formData.value?.id
     ? $t('ui.actionTitle.edit', '应用')
     : $t('ui.actionTitle.create', '应用');
 });
 
-const [BasicForm, formApi] = useVbenForm({
+const [Form, formApi] = useVbenForm({
   commonConfig: {
-    // 默认占满两列
-    formItemClass: 'col-span-2',
-    // 默认label宽度 px
-    labelWidth: 160,
-    // 通用配置项 会影响到所有表单项
     componentProps: {
       class: 'w-full',
     },
+    formItemClass: 'col-span-2',
+    labelWidth: 160,
   },
-  schema: modalSchema(),
+  layout: 'horizontal',
+  schema: useFormSchema(),
   showDefaultActions: false,
-  wrapperClass: 'grid-cols-2',
 });
 
-const [BasicModal, modalApi] = useVbenModal({
+const [Modal, modalApi] = useVbenModal({
-  fullscreenButton: false,
+  async onConfirm() {
-  onCancel: handleCancel,
-  onConfirm: handleConfirm,
-  onOpenChange: async (isOpen) => {
-    if (!isOpen) {
-      return null;
-    }
-    modalApi.modalLoading(true);
-
-    const { id } = modalApi.getData() as {
-      id?: number;
-    };
-    isUpdate.value = !!id;
-
-    if (isUpdate.value && id) {
-      const record = await PayApi.getApp(id);
-      await formApi.setValues(record);
-    }
-
-    modalApi.modalLoading(false);
-  },
-});
-
-async function handleConfirm() {
-  try {
-    modalApi.modalLoading(true);
     const { valid } = await formApi.validate();
     if (!valid) {
       return;
     }
-    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
+    modalApi.lock();
-    const data = cloneDeep(await formApi.getValues()) as PayApi.PayAppApi.App;
+    // 提交表单
-    await (isUpdate.value ? PayApi.updateApp(data) : PayApi.createApp(data));
+    const data = (await formApi.getValues()) as PayAppApi.App;
-    emit('reload');
+    try {
-    await handleCancel();
+      await (formData.value?.id ? updateApp(data) : createApp(data));
-  } catch (error) {
+      // 关闭并提示
-    console.error(error);
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
     } finally {
-    modalApi.modalLoading(false);
+      modalApi.unlock();
     }
-}
+  },
-
+  onOpenChange: async (isOpen) => {
-async function handleCancel() {
+    if (!isOpen) {
-  modalApi.close();
+      formData.value = undefined;
-  await formApi.resetForm();
+      return;
-}
+    }
+    // 加载数据
+    const { id } = modalApi.getData() as {
+      id?: number;
+    };
+    if (!id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getApp(id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
 </script>
 <template>
-  <BasicModal :close-on-click-modal="false" :title="title" class="w-[40%]">
+  <Modal :close-on-click-modal="false" :title="title" class="w-[40%]">
-    <BasicForm />
+    <Form />
-  </BasicModal>
+  </Modal>
 </template>

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

@@ -1,104 +1,96 @@
 <script lang="ts" setup>
+import type { PayChannelApi } from '#/api/pay/channel';
+
 import { computed, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
-import { cloneDeep } from '@vben/utils';
 
-import { Row, Space, Textarea } from 'ant-design-vue';
+import { message, Row, Space, Textarea } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
-import * as ChannelApi from '#/api/pay/channel';
+import { createChannel, getChannel, updateChannel } from '#/api/pay/channel';
 import { FileUpload } from '#/components/upload';
 
-import { modalAliPaySchema } from './data';
+import { channelSchema } from './data';
 
-const emit = defineEmits<{ reload: [] }>();
+const emit = defineEmits(['success']);
-
+const formData = ref<PayChannelApi.Channel>();
-const isUpdate = ref(false);
+const formType = ref<string>('');
 const title = computed(() => {
-  return isUpdate.value
+  return formData.value?.id
     ? $t('ui.actionTitle.edit', '应用')
     : $t('ui.actionTitle.create', '应用');
 });
 
-const [BasicForm, formApi] = useVbenForm({
+const [Form, formApi] = useVbenForm({
   commonConfig: {
-    // 默认占满两列
-    formItemClass: 'col-span-2',
-    // 默认label宽度 px
-    labelWidth: 160,
-    // 通用配置项 会影响到所有表单项
     componentProps: {
       class: 'w-full',
     },
+    formItemClass: 'col-span-2',
+    labelWidth: 160,
   },
-  schema: modalAliPaySchema(),
+  layout: 'horizontal',
   showDefaultActions: false,
-  wrapperClass: 'grid-cols-2',
 });
 
-const [BasicModal, modalApi] = useVbenModal({
+const [Modal, modalApi] = useVbenModal({
-  fullscreenButton: false,
+  async onConfirm() {
-  onCancel: handleCancel,
-  onConfirm: handleConfirm,
-  onOpenChange: async (isOpen) => {
-    if (!isOpen) {
-      return null;
-    }
-    modalApi.modalLoading(true);
-
-    const { id, payCode } = modalApi.getData() as {
-      id?: number;
-      payCode?: string;
-    };
-
-    if (id && payCode) {
-      const record = await ChannelApi.getChannel(id, payCode);
-      isUpdate.value = !!record;
-      record.code = payCode;
-      if (isUpdate.value) {
-        record.config = JSON.parse(record.config);
-        await formApi.setValues(record);
-      }
-    }
-
-    modalApi.modalLoading(false);
-  },
-});
-
-async function handleConfirm() {
-  try {
-    modalApi.modalLoading(true);
     const { valid } = await formApi.validate();
     if (!valid) {
       return;
     }
-    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
+    modalApi.lock();
-    const data = cloneDeep(
+    // 提交表单
-      await formApi.getValues(),
+    const data = (await formApi.getValues()) as PayChannelApi.Channel;
-    ) as ChannelApi.PayChannelApi.Channel;
+    try {
-    data.config = JSON.stringify(data.config);
+      await (formData.value?.id ? updateChannel(data) : createChannel(data));
-    await (isUpdate.value
+      // 关闭并提示
-      ? ChannelApi.updateChannel(data)
+      await modalApi.close();
-      : ChannelApi.createChannel(data));
+      emit('success');
-    emit('reload');
+      message.success($t('ui.actionMessage.operationSuccess'));
-    await handleCancel();
-  } catch (error) {
-    console.error(error);
     } finally {
-    modalApi.modalLoading(false);
+      modalApi.unlock();
+    }
+  },
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const { id, payCode } = modalApi.getData() as {
+      id?: number;
+      payCode?: string;
+    };
+    if (!id || !payCode) {
+      return;
+    }
+    modalApi.lock();
+    if (payCode.includes('alipay_')) {
+      formType.value = 'alipay';
+    } else if (payCode.includes('mock')) {
+      formType.value = 'mock';
+    } else if (payCode.includes('wallet')) {
+      formType.value = 'wallet';
+    } else if (payCode.includes('wx')) {
+      formType.value = 'wx';
     }
-}
 
-async function handleCancel() {
+    try {
-  modalApi.close();
+      formData.value = await getChannel(id, payCode);
-  await formApi.resetForm();
+      // 设置到 values
-}
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
 </script>
 <template>
-  <BasicModal :close-on-click-modal="false" :title="title" class="w-[40%]">
+  <Modal :close-on-click-modal="false" :title="title" class="w-[40%]">
-    <BasicForm>
+    <Form :schema="channelSchema(formType)">
       <template #appCertContent="slotProps">
         <Space style="width: 100%" direction="vertical">
           <Row>
@@ -158,6 +150,6 @@ async function handleCancel() {
           </Row>
         </Space>
       </template>
-    </BasicForm>
+    </Form>
-  </BasicModal>
+  </Modal>
 </template>

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

@@ -1,456 +0,0 @@
-import type { FormSchemaGetter } from '#/adapter/form';
-
-import { DICT_TYPE, getDictOptions } from '#/utils/dict';
-
-export const modalAliPaySchema: FormSchemaGetter = () => [
-  {
-    label: '商户编号',
-    fieldName: 'id',
-    component: 'Input',
-    dependencies: {
-      show: () => false,
-      triggerFields: [''],
-    },
-  },
-  {
-    label: '应用编号',
-    fieldName: 'appId',
-    component: 'Input',
-    dependencies: {
-      show: () => false,
-      triggerFields: [''],
-    },
-  },
-  {
-    label: '渠道编码',
-    fieldName: 'code',
-    component: 'Input',
-    dependencies: {
-      show: () => false,
-      triggerFields: [''],
-    },
-  },
-  {
-    label: '渠道费率',
-    fieldName: 'feeRate',
-    component: 'Input',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请输入渠道费率',
-    },
-  },
-  {
-    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: 1,
-  },
-  {
-    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: 0,
-          label: '公钥模式',
-        },
-        {
-          value: 1,
-          label: '证书模式',
-        },
-      ],
-    },
-  },
-  {
-    label: '应用私钥',
-    fieldName: 'config.privateKey',
-    component: 'Textarea',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请输入应用私钥',
-      rows: 8,
-    },
-    dependencies: {
-      show(values) {
-        return values.config.mode !== undefined;
-      },
-      triggerFields: ['config'],
-    },
-  },
-  {
-    label: '支付宝公钥',
-    fieldName: 'config.alipayPublicKey',
-    component: 'Textarea',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请输入支付宝公钥',
-      rows: 8,
-    },
-    dependencies: {
-      show(values) {
-        return values?.config?.mode === 0;
-      },
-      triggerFields: ['config.mode', 'mode', 'config'],
-    },
-  },
-  {
-    label: '商户公钥应用证书',
-    fieldName: 'config.appCertContent',
-    slotName: 'appCertContent',
-    component: 'Textarea',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请上传商户公钥应用证书',
-      rows: 8,
-    },
-    dependencies: {
-      show(values) {
-        return values?.config?.mode === 1;
-      },
-      triggerFields: ['config.mode', 'mode', 'config'],
-    },
-  },
-  {
-    label: '支付宝公钥证书',
-    fieldName: 'config.alipayPublicCertContent',
-    slotName: 'alipayPublicCertContent',
-    component: 'Textarea',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请上传支付宝公钥证书',
-      rows: 8,
-    },
-    dependencies: {
-      show(values) {
-        return values?.config?.mode === 1;
-      },
-      triggerFields: ['config.mode', 'mode', 'config'],
-    },
-  },
-  {
-    label: '根证书',
-    fieldName: 'config.rootCertContent',
-    slotName: 'rootCertContent',
-    component: 'Textarea',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请上传根证书',
-      rows: 8,
-    },
-    dependencies: {
-      show(values) {
-        return values?.config?.mode === 1;
-      },
-      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: 'remark',
-    component: 'Textarea',
-    componentProps: {
-      rows: 3,
-      placeholder: '请输入备注',
-    },
-  },
-];
-
-export const modalMockSchema: FormSchemaGetter = () => [
-  {
-    label: '商户编号',
-    fieldName: 'id',
-    component: 'Input',
-    dependencies: {
-      show: () => false,
-      triggerFields: [''],
-    },
-  },
-  {
-    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: 1,
-  },
-  {
-    label: '渠道编码',
-    fieldName: 'code',
-    component: 'Input',
-    dependencies: {
-      show: () => false,
-      triggerFields: [''],
-    },
-  },
-  {
-    label: '渠道费率',
-    fieldName: 'feeRate',
-    component: 'Input',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请输入渠道费率',
-    },
-    dependencies: {
-      show: () => false,
-      triggerFields: [''],
-    },
-  },
-  {
-    label: '备注',
-    fieldName: 'remark',
-    component: 'Textarea',
-    componentProps: {
-      rows: 3,
-      placeholder: '请输入备注',
-    },
-  },
-];
-
-export const modalWeixinSchema: FormSchemaGetter = () => [
-  {
-    label: '商户编号',
-    fieldName: 'id',
-    component: 'Input',
-    dependencies: {
-      show: () => false,
-      triggerFields: [''],
-    },
-  },
-  {
-    label: '应用编号',
-    fieldName: 'appId',
-    component: 'Input',
-    dependencies: {
-      show: () => false,
-      triggerFields: [''],
-    },
-  },
-  {
-    label: '渠道编码',
-    fieldName: 'code',
-    component: 'Input',
-    dependencies: {
-      show: () => false,
-      triggerFields: [''],
-    },
-  },
-  {
-    label: '渠道费率',
-    fieldName: 'feeRate',
-    component: 'Input',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请输入渠道费率',
-    },
-  },
-  {
-    label: '微信 APPID',
-    fieldName: 'config.appId',
-    component: 'Input',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请输入微信 APPID',
-    },
-  },
-  {
-    label: '商户号',
-    fieldName: 'config.mchId',
-    component: 'Input',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请输入商户号',
-    },
-  },
-  {
-    label: '渠道状态',
-    fieldName: 'status',
-    component: 'RadioGroup',
-    rules: 'required',
-    componentProps: {
-      options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
-    },
-    defaultValue: 1,
-  },
-  {
-    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',
-    slotName: 'keyContent',
-    component: 'Input',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请上传 apiclient_cert.p12 证书',
-    },
-    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',
-    slotName: 'privateKeyContent',
-    component: 'Input',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请上传 apiclient_key.pem 证书',
-    },
-    dependencies: {
-      show(values) {
-        return values?.config?.apiVersion === 'v3';
-      },
-      triggerFields: ['config.mode', 'mode', 'config'],
-    },
-  },
-  {
-    label: '证书序列号',
-    fieldName: 'config.certSerialNo',
-    component: 'Input',
-    rules: 'required',
-    componentProps: {
-      placeholder: '请输入证书序列号',
-    },
-    dependencies: {
-      show(values) {
-        return values?.config?.apiVersion === 'v3';
-      },
-      triggerFields: ['config.mode', 'mode', 'config'],
-    },
-  },
-  {
-    label: '备注',
-    fieldName: 'remark',
-    component: 'Textarea',
-    componentProps: {
-      rows: 3,
-      placeholder: '请输入备注',
-    },
-  },
-];

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

@@ -1,105 +0,0 @@
-<script lang="ts" setup>
-import { computed, ref } from 'vue';
-
-import { useVbenModal } from '@vben/common-ui';
-import { $t } from '@vben/locales';
-import { cloneDeep } from '@vben/utils';
-
-import { useVbenForm } from '#/adapter/form';
-import * as ChannelApi from '#/api/pay/channel';
-
-import { modalMockSchema } from './data';
-
-const emit = defineEmits<{ reload: [] }>();
-
-const isUpdate = ref(false);
-const title = computed(() => {
-  return isUpdate.value
-    ? $t('ui.actionTitle.edit', '应用')
-    : $t('ui.actionTitle.create', '应用');
-});
-
-const [BasicForm, formApi] = useVbenForm({
-  commonConfig: {
-    // 默认占满两列
-    formItemClass: 'col-span-2',
-    // 默认label宽度 px
-    labelWidth: 160,
-    // 通用配置项 会影响到所有表单项
-    componentProps: {
-      class: 'w-full',
-    },
-  },
-  schema: modalMockSchema(),
-  showDefaultActions: false,
-  wrapperClass: 'grid-cols-2',
-});
-
-const [BasicModal, modalApi] = useVbenModal({
-  fullscreenButton: false,
-  onCancel: handleCancel,
-  onConfirm: handleConfirm,
-  onOpenChange: async (isOpen) => {
-    if (!isOpen) {
-      return null;
-    }
-    modalApi.modalLoading(true);
-
-    const { id, payCode } = modalApi.getData() as {
-      id?: number;
-      payCode?: string;
-    };
-
-    if (id && payCode) {
-      let record = await ChannelApi.getChannel(id, payCode);
-      isUpdate.value = !!record;
-      if (isUpdate.value) {
-        record.config = JSON.parse(record.config);
-      } else {
-        record = {
-          feeRate: 0,
-          code: payCode,
-          appId: id,
-        } as ChannelApi.PayChannelApi.Channel;
-      }
-      await formApi.setValues(record);
-    }
-
-    modalApi.modalLoading(false);
-  },
-});
-
-async function handleConfirm() {
-  try {
-    modalApi.modalLoading(true);
-    const { valid } = await formApi.validate();
-    if (!valid) {
-      return;
-    }
-    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
-    const data = cloneDeep(
-      await formApi.getValues(),
-    ) as ChannelApi.PayChannelApi.Channel;
-    data.config = JSON.stringify(data.config || { name: 'mock-conf' });
-    await (isUpdate.value
-      ? ChannelApi.updateChannel(data)
-      : ChannelApi.createChannel(data));
-    emit('reload');
-    await handleCancel();
-  } catch (error) {
-    console.error(error);
-  } finally {
-    modalApi.modalLoading(false);
-  }
-}
-
-async function handleCancel() {
-  modalApi.close();
-  await formApi.resetForm();
-}
-</script>
-<template>
-  <BasicModal :close-on-click-modal="false" :title="title" class="w-[40%]">
-    <BasicForm />
-  </BasicModal>
-</template>

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

@@ -1,105 +0,0 @@
-<script lang="ts" setup>
-import { computed, ref } from 'vue';
-
-import { useVbenModal } from '@vben/common-ui';
-import { $t } from '@vben/locales';
-import { cloneDeep } from '@vben/utils';
-
-import { useVbenForm } from '#/adapter/form';
-import * as ChannelApi from '#/api/pay/channel';
-
-import { modalMockSchema } from './data';
-
-const emit = defineEmits<{ reload: [] }>();
-
-const isUpdate = ref(false);
-const title = computed(() => {
-  return isUpdate.value
-    ? $t('ui.actionTitle.edit', '应用')
-    : $t('ui.actionTitle.create', '应用');
-});
-
-const [BasicForm, formApi] = useVbenForm({
-  commonConfig: {
-    // 默认占满两列
-    formItemClass: 'col-span-2',
-    // 默认label宽度 px
-    labelWidth: 160,
-    // 通用配置项 会影响到所有表单项
-    componentProps: {
-      class: 'w-full',
-    },
-  },
-  schema: modalMockSchema(),
-  showDefaultActions: false,
-  wrapperClass: 'grid-cols-2',
-});
-
-const [BasicModal, modalApi] = useVbenModal({
-  fullscreenButton: false,
-  onCancel: handleCancel,
-  onConfirm: handleConfirm,
-  onOpenChange: async (isOpen) => {
-    if (!isOpen) {
-      return null;
-    }
-    modalApi.modalLoading(true);
-
-    const { id, payCode } = modalApi.getData() as {
-      id?: number;
-      payCode?: string;
-    };
-
-    if (id && payCode) {
-      let record = await ChannelApi.getChannel(id, payCode);
-      isUpdate.value = !!record;
-      if (isUpdate.value) {
-        record.config = JSON.parse(record.config);
-      } else {
-        record = {
-          feeRate: 0,
-          code: payCode,
-          appId: id,
-        } as ChannelApi.PayChannelApi.Channel;
-      }
-      await formApi.setValues(record);
-    }
-
-    modalApi.modalLoading(false);
-  },
-});
-
-async function handleConfirm() {
-  try {
-    modalApi.modalLoading(true);
-    const { valid } = await formApi.validate();
-    if (!valid) {
-      return;
-    }
-    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
-    const data = cloneDeep(
-      await formApi.getValues(),
-    ) as ChannelApi.PayChannelApi.Channel;
-    data.config = JSON.stringify(data.config || { name: 'mock-conf' });
-    await (isUpdate.value
-      ? ChannelApi.updateChannel(data)
-      : ChannelApi.createChannel(data));
-    emit('reload');
-    await handleCancel();
-  } catch (error) {
-    console.error(error);
-  } finally {
-    modalApi.modalLoading(false);
-  }
-}
-
-async function handleCancel() {
-  modalApi.close();
-  await formApi.resetForm();
-}
-</script>
-<template>
-  <BasicModal :close-on-click-modal="false" :title="title" class="w-[40%]">
-    <BasicForm />
-  </BasicModal>
-</template>

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

@@ -1,148 +0,0 @@
-<script lang="ts" setup>
-import { computed, ref } from 'vue';
-
-import { useVbenModal } from '@vben/common-ui';
-import { $t } from '@vben/locales';
-import { cloneDeep } from '@vben/utils';
-
-import { Row, Space, Textarea } from 'ant-design-vue';
-
-import { useVbenForm } from '#/adapter/form';
-import * as ChannelApi from '#/api/pay/channel';
-import { FileUpload } from '#/components/upload';
-
-import { modalWeixinSchema } from './data';
-
-const emit = defineEmits<{ reload: [] }>();
-
-const isUpdate = ref(false);
-const title = computed(() => {
-  return isUpdate.value
-    ? $t('ui.actionTitle.edit', '应用')
-    : $t('ui.actionTitle.create', '应用');
-});
-
-const [BasicForm, formApi] = useVbenForm({
-  commonConfig: {
-    // 默认占满两列
-    formItemClass: 'col-span-2',
-    // 默认label宽度 px
-    labelWidth: 160,
-    // 通用配置项 会影响到所有表单项
-    componentProps: {
-      class: 'w-full',
-    },
-  },
-  schema: modalWeixinSchema(),
-  showDefaultActions: false,
-  wrapperClass: 'grid-cols-2',
-});
-
-const [BasicModal, modalApi] = useVbenModal({
-  fullscreenButton: false,
-  onCancel: handleCancel,
-  onConfirm: handleConfirm,
-  onOpenChange: async (isOpen) => {
-    if (!isOpen) {
-      return null;
-    }
-    modalApi.modalLoading(true);
-
-    const { id, payCode } = modalApi.getData() as {
-      id?: number;
-      payCode?: string;
-    };
-
-    if (id && payCode) {
-      const record =
-        (await ChannelApi.getChannel(id, payCode)) ||
-        ({} as ChannelApi.PayChannelApi.Channel);
-      isUpdate.value = !!record;
-      record.code = payCode;
-      if (isUpdate.value) {
-        record.config = JSON.parse(record.config);
-      }
-      await formApi.setValues(record);
-    }
-
-    modalApi.modalLoading(false);
-  },
-});
-
-async function handleConfirm() {
-  try {
-    modalApi.modalLoading(true);
-    const { valid } = await formApi.validate();
-    if (!valid) {
-      return;
-    }
-    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
-    const data = cloneDeep(
-      await formApi.getValues(),
-    ) as ChannelApi.PayChannelApi.Channel;
-    data.config = JSON.stringify(data.config);
-    await (isUpdate.value
-      ? ChannelApi.updateChannel(data)
-      : ChannelApi.createChannel(data));
-    emit('reload');
-    await handleCancel();
-  } catch (error) {
-    console.error(error);
-  } finally {
-    modalApi.modalLoading(false);
-  }
-}
-
-async function handleCancel() {
-  modalApi.close();
-  await formApi.resetForm();
-}
-</script>
-<template>
-  <BasicModal :close-on-click-modal="false" :title="title" class="w-[40%]">
-    <BasicForm>
-      <template #keyContent="slotProps">
-        <Space style="width: 100%" direction="vertical">
-          <Row>
-            <Textarea
-              v-bind="slotProps"
-              :rows="8"
-              placeholder="请上传 apiclient_cert.p12 证书"
-            />
-          </Row>
-          <Row>
-            <FileUpload
-              :accept="['crt']"
-              @return-text="
-                (text: string) => {
-                  slotProps.setValue(text);
-                }
-              "
-            />
-          </Row>
-        </Space>
-      </template>
-      <template #privateKeyContent="slotProps">
-        <Space style="width: 100%" direction="vertical">
-          <Row>
-            <Textarea
-              v-bind="slotProps"
-              :rows="8"
-              placeholder="请上传 apiclient_key.pem 证书"
-            />
-          </Row>
-          <Row>
-            <FileUpload
-              :accept="['.crt']"
-              @return-text="
-                (text: string) => {
-                  slotProps.setValue(text);
-                }
-              "
-            />
-          </Row>
-        </Space>
-      </template>
-    </BasicForm>
-  </BasicModal>
-</template>

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

@@ -0,0 +1,530 @@
+import type { VbenFormSchema } from '#/adapter/form';
+
+import { DICT_TYPE, getDictOptions } from '#/utils/dict';
+
+export function channelSchema(formType: string): VbenFormSchema[] {
+  switch (formType) {
+    case 'alipay': {
+      return [
+        {
+          label: '商户编号',
+          fieldName: 'id',
+          component: 'Input',
+          dependencies: {
+            show: () => false,
+            triggerFields: [''],
+          },
+        },
+        {
+          label: '应用编号',
+          fieldName: 'appId',
+          component: 'Input',
+          dependencies: {
+            show: () => false,
+            triggerFields: [''],
+          },
+        },
+        {
+          label: '渠道编码',
+          fieldName: 'code',
+          component: 'Input',
+          dependencies: {
+            show: () => false,
+            triggerFields: [''],
+          },
+        },
+        {
+          label: '渠道费率',
+          fieldName: 'feeRate',
+          component: 'Input',
+          rules: 'required',
+          componentProps: {
+            placeholder: '请输入渠道费率',
+          },
+        },
+        {
+          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: 1,
+        },
+        {
+          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: 0,
+                label: '公钥模式',
+              },
+              {
+                value: 1,
+                label: '证书模式',
+              },
+            ],
+          },
+        },
+        {
+          label: '应用私钥',
+          fieldName: 'config.privateKey',
+          component: 'Textarea',
+          rules: 'required',
+          componentProps: {
+            placeholder: '请输入应用私钥',
+            rows: 8,
+          },
+          dependencies: {
+            show(values) {
+              return values.config.mode !== undefined;
+            },
+            triggerFields: ['config'],
+          },
+        },
+        {
+          label: '支付宝公钥',
+          fieldName: 'config.alipayPublicKey',
+          component: 'Textarea',
+          rules: 'required',
+          componentProps: {
+            placeholder: '请输入支付宝公钥',
+            rows: 8,
+          },
+          dependencies: {
+            show(values) {
+              return values?.config?.mode === 0;
+            },
+            triggerFields: ['config.mode', 'mode', 'config'],
+          },
+        },
+        {
+          label: '商户公钥应用证书',
+          fieldName: 'config.appCertContent',
+          slotName: 'appCertContent',
+          component: 'Textarea',
+          rules: 'required',
+          componentProps: {
+            placeholder: '请上传商户公钥应用证书',
+            rows: 8,
+          },
+          dependencies: {
+            show(values) {
+              return values?.config?.mode === 1;
+            },
+            triggerFields: ['config.mode', 'mode', 'config'],
+          },
+        },
+        {
+          label: '支付宝公钥证书',
+          fieldName: 'config.alipayPublicCertContent',
+          slotName: 'alipayPublicCertContent',
+          component: 'Textarea',
+          rules: 'required',
+          componentProps: {
+            placeholder: '请上传支付宝公钥证书',
+            rows: 8,
+          },
+          dependencies: {
+            show(values) {
+              return values?.config?.mode === 1;
+            },
+            triggerFields: ['config.mode', 'mode', 'config'],
+          },
+        },
+        {
+          label: '根证书',
+          fieldName: 'config.rootCertContent',
+          slotName: 'rootCertContent',
+          component: 'Textarea',
+          rules: 'required',
+          componentProps: {
+            placeholder: '请上传根证书',
+            rows: 8,
+          },
+          dependencies: {
+            show(values) {
+              return values?.config?.mode === 1;
+            },
+            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: 'remark',
+          component: 'Textarea',
+          componentProps: {
+            rows: 3,
+            placeholder: '请输入备注',
+          },
+        },
+      ];
+    }
+    case 'mock': {
+      return [
+        {
+          label: '商户编号',
+          fieldName: 'id',
+          component: 'Input',
+          dependencies: {
+            show: () => false,
+            triggerFields: [''],
+          },
+        },
+        {
+          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: 1,
+        },
+        {
+          label: '渠道编码',
+          fieldName: 'code',
+          component: 'Input',
+          dependencies: {
+            show: () => false,
+            triggerFields: [''],
+          },
+        },
+        {
+          label: '渠道费率',
+          fieldName: 'feeRate',
+          component: 'Input',
+          rules: 'required',
+          componentProps: {
+            placeholder: '请输入渠道费率',
+          },
+          dependencies: {
+            show: () => false,
+            triggerFields: [''],
+          },
+        },
+        {
+          label: '备注',
+          fieldName: 'remark',
+          component: 'Textarea',
+          componentProps: {
+            rows: 3,
+            placeholder: '请输入备注',
+          },
+        },
+      ];
+    }
+    case 'wallet': {
+      return [
+        {
+          label: '商户编号',
+          fieldName: 'id',
+          component: 'Input',
+          dependencies: {
+            show: () => false,
+            triggerFields: [''],
+          },
+        },
+        {
+          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: 1,
+        },
+        {
+          label: '渠道编码',
+          fieldName: 'code',
+          component: 'Input',
+          dependencies: {
+            show: () => false,
+            triggerFields: [''],
+          },
+        },
+        {
+          label: '渠道费率',
+          fieldName: 'feeRate',
+          component: 'Input',
+          rules: 'required',
+          componentProps: {
+            placeholder: '请输入渠道费率',
+          },
+          dependencies: {
+            show: () => false,
+            triggerFields: [''],
+          },
+        },
+        {
+          label: '备注',
+          fieldName: 'remark',
+          component: 'Textarea',
+          componentProps: {
+            rows: 3,
+            placeholder: '请输入备注',
+          },
+        },
+      ];
+    }
+    case 'wx': {
+      return [
+        {
+          label: '商户编号',
+          fieldName: 'id',
+          component: 'Input',
+          dependencies: {
+            show: () => false,
+            triggerFields: [''],
+          },
+        },
+        {
+          label: '应用编号',
+          fieldName: 'appId',
+          component: 'Input',
+          dependencies: {
+            show: () => false,
+            triggerFields: [''],
+          },
+        },
+        {
+          label: '渠道编码',
+          fieldName: 'code',
+          component: 'Input',
+          dependencies: {
+            show: () => false,
+            triggerFields: [''],
+          },
+        },
+        {
+          label: '渠道费率',
+          fieldName: 'feeRate',
+          component: 'Input',
+          rules: 'required',
+          componentProps: {
+            placeholder: '请输入渠道费率',
+          },
+        },
+        {
+          label: '微信 APPID',
+          fieldName: 'config.appId',
+          component: 'Input',
+          rules: 'required',
+          componentProps: {
+            placeholder: '请输入微信 APPID',
+          },
+        },
+        {
+          label: '商户号',
+          fieldName: 'config.mchId',
+          component: 'Input',
+          rules: 'required',
+          componentProps: {
+            placeholder: '请输入商户号',
+          },
+        },
+        {
+          label: '渠道状态',
+          fieldName: 'status',
+          component: 'RadioGroup',
+          rules: 'required',
+          componentProps: {
+            options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+          },
+          defaultValue: 1,
+        },
+        {
+          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',
+          slotName: 'keyContent',
+          component: 'Input',
+          rules: 'required',
+          componentProps: {
+            placeholder: '请上传 apiclient_cert.p12 证书',
+          },
+          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',
+          slotName: 'privateKeyContent',
+          component: 'Input',
+          rules: 'required',
+          componentProps: {
+            placeholder: '请上传 apiclient_key.pem 证书',
+          },
+          dependencies: {
+            show(values) {
+              return values?.config?.apiVersion === 'v3';
+            },
+            triggerFields: ['config.mode', 'mode', 'config'],
+          },
+        },
+        {
+          label: '证书序列号',
+          fieldName: 'config.certSerialNo',
+          component: 'Input',
+          rules: 'required',
+          componentProps: {
+            placeholder: '请输入证书序列号',
+          },
+          dependencies: {
+            show(values) {
+              return values?.config?.apiVersion === 'v3';
+            },
+            triggerFields: ['config.mode', 'mode', 'config'],
+          },
+        },
+        {
+          label: '备注',
+          fieldName: 'remark',
+          component: 'Textarea',
+          componentProps: {
+            rows: 3,
+            placeholder: '请输入备注',
+          },
+        },
+      ];
+    }
+    default: {
+      return [];
+    }
+  }
+}