feat: 更新支付渠道相关功能，修改渠道获取参数类型，重命名事件，新增渠道表单组件

apps/web-antd/src/api/pay/channel/index.ts

@@ -27,7 +27,7 @@ export function getChannelPage(params: PageParam) {
 }
 
 /** 查询支付渠道详情 */
-export function getChannel(appId: string, code: string) {
+export function getChannel(appId: number, code: string) {
   return requestClient.get<PayChannelApi.Channel>('/pay/channel/get', {
     params: { appId, code },
   });

apps/web-antd/src/components/upload/file-upload.vue

@@ -55,7 +55,7 @@ const props = withDefaults(
     showDescription: false,
   },
 );
-const emit = defineEmits(['change', 'update:value', 'delete', 'getText']);
+const emit = defineEmits(['change', 'update:value', 'delete', 'returnText']);
 const { accept, helpText, maxNumber, maxSize } = toRefs(props);
 const isInnerOperate = ref<boolean>(false);
 const { getStringAccept } = useUploadType({
@@ -124,7 +124,7 @@ const handleRemove = async (file: UploadFile) => {
 const beforeUpload = async (file: File) => {
   // 使用现代的Blob.text()方法替代FileReader
   const fileContent = await file.text();
-  emit('getText', fileContent);
+  emit('returnText', fileContent);
 
   const { maxSize, accept } = props;
   const isAct = checkFileType(file, accept);

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

@@ -143,7 +143,7 @@ export const columns: VxeGridProps['columns'] = [
     fixed: 'right',
     slots: { default: 'action' },
     title: '操作',
-    width: 250,
+    minWidth: 160,
   },
 ];
 

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

@@ -19,6 +19,9 @@ import { PayChannelEnum } from '#/utils/constants';
 import { columns, querySchema } from './data';
 import appFrom from './modules/app-form.vue';
 import aliPayFrom from './modules/channel/AlipayChannelForm.vue';
+import mockFrom from './modules/channel/MockChannelForm.vue';
+import walletFrom from './modules/channel/WalletChannelForm.vue';
+import weixinFrom from './modules/channel/WeixinChannelForm.vue';
 
 const formOptions: VbenFormProps = {
   commonConfig: {
@@ -84,6 +87,18 @@ const [AliPayModal, modalAliPayApi] = useVbenModal({
   connectedComponent: aliPayFrom,
 });
 
+const [MockModal, modalMockApi] = useVbenModal({
+  connectedComponent: mockFrom,
+});
+
+const [WalletModal, modalWalletApi] = useVbenModal({
+  connectedComponent: walletFrom,
+});
+
+const [WeixinModal, modalWeixinApi] = useVbenModal({
+  connectedComponent: weixinFrom,
+});
+
 const handleAdd = () => {
   modalApi.setData({});
   modalApi.open();
@@ -123,17 +138,22 @@ const openChannelForm = async (row: PayApi.PayAppApi.App, payCode: string) => {
   if (payCode.indexOf('alipay_') === 0) {
     modalAliPayApi.setData({ id: row.id, payCode });
     modalAliPayApi.open();
+    return;
+  }
+  if (payCode.indexOf('wx_') === 0) {
+    modalWeixinApi.setData({ id: row.id, payCode });
+    modalWeixinApi.open();
+    return;
+  }
+  if (payCode.indexOf('mock') === 0) {
+    modalMockApi.setData({ id: row.id, payCode });
+    modalMockApi.open();
+    return;
+  }
+  if (payCode.indexOf('wallet') === 0) {
+    modalWalletApi.setData({ id: row.id, payCode });
+    modalWalletApi.open();
   }
-  // if (payCode.indexOf('wx_') === 0) {
-  //   weixinFormRef.value.open(row.id, payCode);
-  //   return;
-  // }
-  // if (payCode.indexOf('mock') === 0) {
-  //   mockFormRef.value.open(row.id, payCode);
-  // }
-  // if (payCode.indexOf('wallet') === 0) {
-  //   mockFormRef.value.open(row.id, payCode);
-  // }
 };
 </script>
 
@@ -153,13 +173,14 @@ const openChannelForm = async (row: PayApi.PayAppApi.App, payCode: string) => {
         </Space>
       </template>
       <template #action="{ row }">
-        <a-button
+        <Space>
+          <Button
             v-access:code="['pay:app:update']"
             type="link"
             @click.stop="handleEdit(row)"
           >
             {{ $t('ui.actionTitle.edit') }}
-        </a-button>
+          </Button>
           <Popconfirm
             :get-popup-container="getVxePopupContainer"
             placement="left"
@@ -167,10 +188,11 @@ const openChannelForm = async (row: PayApi.PayAppApi.App, payCode: string) => {
             title="确认删除？"
             @confirm="handleDelete(row)"
           >
-          <a-button type="link" danger>
+            <Button type="link" danger>
               {{ $t('ui.actionTitle.delete') }}
-          </a-button>
+            </Button>
           </Popconfirm>
+        </Space>
       </template>
       <template #status="{ row }">
         <Switch
@@ -180,7 +202,9 @@ const openChannelForm = async (row: PayApi.PayAppApi.App, payCode: string) => {
         />
       </template>
       <template #alipayAppConfig="{ row }">
+        <div>
           <Button
+            size="small"
             v-if="
               isChannelExists(row.channelCodes, PayChannelEnum.ALIPAY_APP.code)
             "
@@ -191,15 +215,19 @@ const openChannelForm = async (row: PayApi.PayAppApi.App, payCode: string) => {
           />
           <Button
             v-else
+            size="small"
             type="primary"
             danger
             :icon="h(CloseOutlined)"
             shape="circle"
             @click="openChannelForm(row, PayChannelEnum.ALIPAY_APP.code)"
           />
+        </div>
       </template>
       <template #alipayPCConfig="{ row }">
+        <div>
           <Button
+            size="small"
             v-if="
               isChannelExists(row.channelCodes, PayChannelEnum.ALIPAY_PC.code)
             "
@@ -209,6 +237,7 @@ const openChannelForm = async (row: PayApi.PayAppApi.App, payCode: string) => {
             @click="openChannelForm(row, PayChannelEnum.ALIPAY_PC.code)"
           />
           <Button
+            size="small"
             v-else
             type="primary"
             danger
@@ -216,9 +245,12 @@ const openChannelForm = async (row: PayApi.PayAppApi.App, payCode: string) => {
             shape="circle"
             @click="openChannelForm(row, PayChannelEnum.ALIPAY_PC.code)"
           />
+        </div>
       </template>
       <template #alipayWAPConfig="{ row }">
+        <div>
           <Button
+            size="small"
             v-if="
               isChannelExists(row.channelCodes, PayChannelEnum.ALIPAY_WAP.code)
             "
@@ -228,6 +260,7 @@ const openChannelForm = async (row: PayApi.PayAppApi.App, payCode: string) => {
             @click="openChannelForm(row, PayChannelEnum.ALIPAY_WAP.code)"
           />
           <Button
+            size="small"
             v-else
             type="primary"
             danger
@@ -235,9 +268,12 @@ const openChannelForm = async (row: PayApi.PayAppApi.App, payCode: string) => {
             shape="circle"
             @click="openChannelForm(row, PayChannelEnum.ALIPAY_WAP.code)"
           />
+        </div>
       </template>
       <template #alipayQrConfig="{ row }">
+        <div>
           <Button
+            size="small"
             v-if="
               isChannelExists(row.channelCodes, PayChannelEnum.ALIPAY_QR.code)
             "
@@ -247,6 +283,7 @@ const openChannelForm = async (row: PayApi.PayAppApi.App, payCode: string) => {
             @click="openChannelForm(row, PayChannelEnum.ALIPAY_QR.code)"
           />
           <Button
+            size="small"
             v-else
             type="primary"
             danger
@@ -254,9 +291,12 @@ const openChannelForm = async (row: PayApi.PayAppApi.App, payCode: string) => {
             shape="circle"
             @click="openChannelForm(row, PayChannelEnum.ALIPAY_QR.code)"
           />
+        </div>
       </template>
       <template #alipayBarConfig="{ row }">
+        <div>
           <Button
+            size="small"
             v-if="
               isChannelExists(row.channelCodes, PayChannelEnum.ALIPAY_BAR.code)
             "
@@ -266,6 +306,7 @@ const openChannelForm = async (row: PayApi.PayAppApi.App, payCode: string) => {
             @click="openChannelForm(row, PayChannelEnum.ALIPAY_BAR.code)"
           />
           <Button
+            size="small"
             v-else
             type="primary"
             danger
@@ -273,16 +314,22 @@ const openChannelForm = async (row: PayApi.PayAppApi.App, payCode: string) => {
             shape="circle"
             @click="openChannelForm(row, PayChannelEnum.ALIPAY_BAR.code)"
           />
+        </div>
       </template>
       <template #wxLiteConfig="{ row }">
+        <div>
           <Button
-          v-if="isChannelExists(row.channelCodes, PayChannelEnum.WX_LITE.code)"
+            size="small"
+            v-if="
+              isChannelExists(row.channelCodes, PayChannelEnum.WX_LITE.code)
+            "
             type="primary"
             :icon="h(CheckOutlined)"
             shape="circle"
             @click="openChannelForm(row, PayChannelEnum.WX_LITE.code)"
           />
           <Button
+            size="small"
             v-else
             type="primary"
             danger
@@ -290,9 +337,12 @@ const openChannelForm = async (row: PayApi.PayAppApi.App, payCode: string) => {
             shape="circle"
             @click="openChannelForm(row, PayChannelEnum.WX_LITE.code)"
           />
+        </div>
       </template>
       <template #wxPubConfig="{ row }">
+        <div>
           <Button
+            size="small"
             v-if="isChannelExists(row.channelCodes, PayChannelEnum.WX_PUB.code)"
             type="primary"
             :icon="h(CheckOutlined)"
@@ -300,6 +350,7 @@ const openChannelForm = async (row: PayApi.PayAppApi.App, payCode: string) => {
             @click="openChannelForm(row, PayChannelEnum.WX_PUB.code)"
           />
           <Button
+            size="small"
             v-else
             type="primary"
             danger
@@ -307,9 +358,12 @@ const openChannelForm = async (row: PayApi.PayAppApi.App, payCode: string) => {
             shape="circle"
             @click="openChannelForm(row, PayChannelEnum.WX_PUB.code)"
           />
+        </div>
       </template>
       <template #wxAppConfig="{ row }">
+        <div>
           <Button
+            size="small"
             v-if="isChannelExists(row.channelCodes, PayChannelEnum.WX_APP.code)"
             type="primary"
             :icon="h(CheckOutlined)"
@@ -317,6 +371,7 @@ const openChannelForm = async (row: PayApi.PayAppApi.App, payCode: string) => {
             @click="openChannelForm(row, PayChannelEnum.WX_APP.code)"
           />
           <Button
+            size="small"
             v-else
             type="primary"
             danger
@@ -324,9 +379,12 @@ const openChannelForm = async (row: PayApi.PayAppApi.App, payCode: string) => {
             shape="circle"
             @click="openChannelForm(row, PayChannelEnum.WX_APP.code)"
           />
+        </div>
       </template>
       <template #wxNativeConfig="{ row }">
+        <div>
           <Button
+            size="small"
             v-if="
               isChannelExists(row.channelCodes, PayChannelEnum.WX_NATIVE.code)
             "
@@ -336,6 +394,7 @@ const openChannelForm = async (row: PayApi.PayAppApi.App, payCode: string) => {
             @click="openChannelForm(row, PayChannelEnum.WX_NATIVE.code)"
           />
           <Button
+            size="small"
             v-else
             type="primary"
             danger
@@ -343,9 +402,12 @@ const openChannelForm = async (row: PayApi.PayAppApi.App, payCode: string) => {
             shape="circle"
             @click="openChannelForm(row, PayChannelEnum.WX_NATIVE.code)"
           />
+        </div>
       </template>
       <template #wxWapConfig="{ row }">
+        <div>
           <Button
+            size="small"
             v-if="isChannelExists(row.channelCodes, PayChannelEnum.WX_WAP.code)"
             type="primary"
             :icon="h(CheckOutlined)"
@@ -353,6 +415,7 @@ const openChannelForm = async (row: PayApi.PayAppApi.App, payCode: string) => {
             @click="openChannelForm(row, PayChannelEnum.WX_WAP.code)"
           />
           <Button
+            size="small"
             v-else
             type="primary"
             danger
@@ -360,9 +423,12 @@ const openChannelForm = async (row: PayApi.PayAppApi.App, payCode: string) => {
             shape="circle"
             @click="openChannelForm(row, PayChannelEnum.WX_WAP.code)"
           />
+        </div>
       </template>
       <template #wxBarConfig="{ row }">
+        <div>
           <Button
+            size="small"
             v-if="isChannelExists(row.channelCodes, PayChannelEnum.WX_BAR.code)"
             type="primary"
             :icon="h(CheckOutlined)"
@@ -370,6 +436,7 @@ const openChannelForm = async (row: PayApi.PayAppApi.App, payCode: string) => {
             @click="openChannelForm(row, PayChannelEnum.WX_BAR.code)"
           />
           <Button
+            size="small"
             v-else
             type="primary"
             danger
@@ -377,9 +444,12 @@ const openChannelForm = async (row: PayApi.PayAppApi.App, payCode: string) => {
             shape="circle"
             @click="openChannelForm(row, PayChannelEnum.WX_BAR.code)"
           />
+        </div>
       </template>
       <template #walletConfig="{ row }">
+        <div>
           <Button
+            size="small"
             v-if="isChannelExists(row.channelCodes, PayChannelEnum.WALLET.code)"
             type="primary"
             :icon="h(CheckOutlined)"
@@ -387,6 +457,7 @@ const openChannelForm = async (row: PayApi.PayAppApi.App, payCode: string) => {
             @click="openChannelForm(row, PayChannelEnum.WALLET.code)"
           />
           <Button
+            size="small"
             v-else
             type="primary"
             danger
@@ -394,9 +465,12 @@ const openChannelForm = async (row: PayApi.PayAppApi.App, payCode: string) => {
             shape="circle"
             @click="openChannelForm(row, PayChannelEnum.WALLET.code)"
           />
+        </div>
       </template>
       <template #mockConfig="{ row }">
+        <div>
           <Button
+            size="small"
             v-if="isChannelExists(row.channelCodes, PayChannelEnum.MOCK.code)"
             type="primary"
             :icon="h(CheckOutlined)"
@@ -404,6 +478,7 @@ const openChannelForm = async (row: PayApi.PayAppApi.App, payCode: string) => {
             @click="openChannelForm(row, PayChannelEnum.MOCK.code)"
           />
           <Button
+            size="small"
             v-else
             type="primary"
             danger
@@ -411,9 +486,13 @@ const openChannelForm = async (row: PayApi.PayAppApi.App, payCode: string) => {
             shape="circle"
             @click="openChannelForm(row, PayChannelEnum.MOCK.code)"
           />
+        </div>
       </template>
     </BasicTable>
     <AppModal @reload="tableApi.query()" />
     <AliPayModal @reload="tableApi.query()" />
+    <MockModal @reload="tableApi.query()" />
+    <WalletModal @reload="tableApi.query()" />
+    <WeixinModal @reload="tableApi.query()" />
   </Page>
 </template>

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

@@ -8,7 +8,7 @@ import { cloneDeep } from '@vben/utils';
 import { Row, Space, Textarea } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
-import * as PayApi from '#/api/pay/app';
+import * as ChannelApi from '#/api/pay/channel';
 import { FileUpload } from '#/components/upload';
 
 import { modalAliPaySchema } from './data';
@@ -48,15 +48,20 @@ const [BasicModal, modalApi] = useVbenModal({
     }
     modalApi.modalLoading(true);
 
-    const { id } = modalApi.getData() as {
+    const { id, payCode } = modalApi.getData() as {
-      id?: number;
+      id?: string;
+      payCode?: string;
     };
-    isUpdate.value = !!id;
 
-    if (isUpdate.value && id) {
+    if (id && payCode) {
-      const record = await PayApi.getApp(id);
+      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);
   },
@@ -70,8 +75,13 @@ async function handleConfirm() {
       return;
     }
     // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
-    const data = cloneDeep(await formApi.getValues()) as PayApi.PayAppApi.App;
+    const data = cloneDeep(
-    await (isUpdate.value ? PayApi.updateApp(data) : PayApi.createApp(data));
+      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) {
@@ -101,7 +111,7 @@ async function handleCancel() {
           <Row>
             <FileUpload
               :accept="['crt']"
-              @get-text="
+              @return-text="
                 (text: string) => {
                   slotProps.setValue(text);
                 }
@@ -120,7 +130,14 @@ async function handleCancel() {
             />
           </Row>
           <Row>
-            <FileUpload :accept="['.crt']" />
+            <FileUpload
+              :accept="['.crt']"
+              @return-text="
+                (text: string) => {
+                  slotProps.setValue(text);
+                }
+              "
+            />
           </Row>
         </Space>
       </template>
@@ -130,7 +147,14 @@ async function handleCancel() {
             <Textarea v-bind="slotProps" :rows="8" placeholder="请上传根证书" />
           </Row>
           <Row>
-            <FileUpload :accept="['.crt']" />
+            <FileUpload
+              :accept="['.crt']"
+              @return-text="
+                (text: string) => {
+                  slotProps.setValue(text);
+                }
+              "
+            />
           </Row>
         </Space>
       </template>

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

@@ -0,0 +1,105 @@
+<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/WalletChannelForm.vue

@@ -0,0 +1,105 @@
+<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/WeixinChannelForm.vue

@@ -0,0 +1,148 @@
+<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/channel/data.ts

@@ -4,7 +4,7 @@ import { DICT_TYPE, getDictOptions } from '#/utils/dict';
 
 export const modalAliPaySchema: FormSchemaGetter = () => [
   {
-    label: '应用编号',
+    label: '商户编号',
     fieldName: 'id',
     component: 'Input',
     dependencies: {
@@ -12,6 +12,24 @@ export const modalAliPaySchema: FormSchemaGetter = () => [
       triggerFields: [''],
     },
   },
+  {
+    label: '应用编号',
+    fieldName: 'appId',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '渠道编码',
+    fieldName: 'code',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
   {
     label: '渠道费率',
     fieldName: 'feeRate',
@@ -38,6 +56,7 @@ export const modalAliPaySchema: FormSchemaGetter = () => [
     componentProps: {
       options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
     },
+    defaultValue: 1,
   },
   {
     label: '网关地址',
@@ -202,3 +221,236 @@ export const modalAliPaySchema: FormSchemaGetter = () => [
     },
   },
 ];
+
+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: '请输入备注',
+    },
+  },
+];