feat:【ele】【pay 支付】pay/app 代码优化 3/4(对齐 ele 和 antd)

This commit is contained in:
YunaiV
2025-10-05 20:13:32 +08:00
parent b2e2fe7ccb
commit 22b0496428
9 changed files with 673 additions and 957 deletions

View File

@@ -16,7 +16,7 @@ export namespace PayAppApi {
merchantId: number; merchantId: number;
merchantName: string; merchantName: string;
createTime?: Date; createTime?: Date;
channelCodes: string[]; channelCodes?: string[];
} }
/** 更新状态请求 */ /** 更新状态请求 */

View File

@@ -17,8 +17,8 @@ const emit = defineEmits(['success']);
const formData = ref<PayAppApi.App>(); const formData = ref<PayAppApi.App>();
const title = computed(() => { const title = computed(() => {
return formData.value?.id return formData.value?.id
? $t('ui.actionTitle.edit', '应用') ? $t('ui.actionTitle.edit', ['应用'])
: $t('ui.actionTitle.create', '应用'); : $t('ui.actionTitle.create', ['应用']);
}); });
const [Form, formApi] = useVbenForm({ const [Form, formApi] = useVbenForm({
@@ -77,7 +77,7 @@ const [Modal, modalApi] = useVbenModal({
}); });
</script> </script>
<template> <template>
<Modal :close-on-click-modal="false" :title="title" class="w-2/5"> <Modal :title="title" class="w-2/5">
<Form /> <Form />
</Modal> </Modal>
</template> </template>

View File

@@ -18,8 +18,8 @@ const emit = defineEmits(['success']);
const formData = ref<any>(); const formData = ref<any>();
const title = computed(() => { const title = computed(() => {
return formData.value?.id === 0 return formData.value?.id === 0
? $t('ui.actionTitle.create', '应用') ? $t('ui.actionTitle.create', ['渠道'])
: $t('ui.actionTitle.edit', '应用'); : $t('ui.actionTitle.edit', ['渠道']);
}); });
const [Form, formApi] = useVbenForm({ const [Form, formApi] = useVbenForm({
@@ -54,7 +54,7 @@ const [Modal, modalApi] = useVbenModal({
modalApi.unlock(); modalApi.unlock();
} }
}, },
onOpenChange: async (isOpen) => { async onOpenChange(isOpen: boolean) {
if (!isOpen) { if (!isOpen) {
formData.value = undefined; formData.value = undefined;
return; return;

View File

@@ -16,6 +16,7 @@ export namespace PayAppApi {
merchantId: number; merchantId: number;
merchantName: string; merchantName: string;
createTime?: Date; createTime?: Date;
channelCodes?: string[];
} }
/** 更新状态请求 */ /** 更新状态请求 */
@@ -59,7 +60,7 @@ export function updateApp(data: PayAppApi.App) {
} }
/** 修改支付应用状态 */ /** 修改支付应用状态 */
export function changeAppStatus(data: PayAppApi.UpdateStatusReq) { export function updateAppStatus(data: PayAppApi.UpdateStatusReq) {
return requestClient.put('/pay/app/update-status', data); return requestClient.put('/pay/app/update-status', data);
} }

View File

@@ -2,39 +2,50 @@ import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table'; import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { PayAppApi } from '#/api/pay/app'; import type { PayAppApi } from '#/api/pay/app';
import { h } from 'vue';
import { CommonStatusEnum, DICT_TYPE } from '@vben/constants'; import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks'; import { getDictOptions } from '@vben/hooks';
import { z } from '#/adapter/form';
import { InputUpload } from '#/components/upload';
import { getRangePickerDefaultProps } from '#/utils';
/** 列表的搜索表单 */
export function useGridFormSchema(): VbenFormSchema[] { export function useGridFormSchema(): VbenFormSchema[] {
return [ return [
{ {
component: 'Input',
fieldName: 'name', fieldName: 'name',
label: '应用名', label: '应用名',
component: 'Input',
componentProps: { componentProps: {
placeholder: '请输入应用名', placeholder: '请输入应用名',
clearable: true,
}, },
}, },
{ {
component: 'Select',
fieldName: 'status', fieldName: 'status',
label: '开启状态', label: '开启状态',
component: 'Select',
componentProps: { componentProps: {
placeholder: '请选择开启状态', placeholder: '请选择开启状态',
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'), options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
clearable: true,
}, },
}, },
{ {
component: 'RangePicker',
fieldName: 'createTime', fieldName: 'createTime',
label: '创建时间', label: '创建时间',
component: 'RangePicker',
componentProps: { componentProps: {
placeholder: ['开始日期', '结束日期'], ...getRangePickerDefaultProps(),
clearable: true,
}, },
}, },
]; ];
} }
/** 列表的字段 */
export function useGridColumns<T = PayAppApi.App>( export function useGridColumns<T = PayAppApi.App>(
onStatusChange?: ( onStatusChange?: (
newStatus: number, newStatus: number,
@@ -42,26 +53,27 @@ export function useGridColumns<T = PayAppApi.App>(
) => PromiseLike<boolean | undefined>, ) => PromiseLike<boolean | undefined>,
): VxeTableGridOptions['columns'] { ): VxeTableGridOptions['columns'] {
return [ return [
{ type: 'checkbox', width: 60 },
{ {
title: '应用标识',
field: 'appKey', field: 'appKey',
title: '应用标识',
minWidth: 40,
}, },
{ {
title: '应用名',
field: 'name', field: 'name',
title: '应用名',
minWidth: 40,
}, },
{ {
field: 'status', field: 'status',
title: '状态', title: '状态',
align: 'center', align: 'center',
minWidth: 40,
cellRender: { cellRender: {
attrs: { beforeChange: onStatusChange }, attrs: { beforeChange: onStatusChange },
name: 'CellSwitch', name: 'CellSwitch',
props: { props: {
checkedValue: CommonStatusEnum.ENABLE, activeValue: CommonStatusEnum.ENABLE,
unCheckedValue: CommonStatusEnum.DISABLE, inactiveValue: CommonStatusEnum.DISABLE,
inlinePrompt: true,
}, },
}, },
}, },
@@ -69,31 +81,32 @@ export function useGridColumns<T = PayAppApi.App>(
title: '支付宝配置', title: '支付宝配置',
children: [ children: [
{ {
title: 'APP 支付', title: 'APP',
slots: { slots: {
default: 'alipayAppConfig', default: 'alipayAppConfig',
}, },
}, },
{ {
title: 'PC 网站支付', title: 'PC 网站',
slots: { slots: {
default: 'alipayPCConfig', default: 'alipayPCConfig',
}, },
}, },
{ {
title: 'WAP 网站支付', title: 'WAP 网站',
slots: { slots: {
default: 'alipayWAPConfig', default: 'alipayWAPConfig',
}, },
minWidth: 10,
}, },
{ {
title: '扫码支付', title: '扫码',
slots: { slots: {
default: 'alipayQrConfig', default: 'alipayQrConfig',
}, },
}, },
{ {
title: '条码支付', title: '条码',
slots: { slots: {
default: 'alipayBarConfig', default: 'alipayBarConfig',
}, },
@@ -104,37 +117,38 @@ export function useGridColumns<T = PayAppApi.App>(
title: '微信配置', title: '微信配置',
children: [ children: [
{ {
title: '小程序支付', title: '小程序',
slots: { slots: {
default: 'wxLiteConfig', default: 'wxLiteConfig',
}, },
}, },
{ {
title: 'JSAPI 支付', title: 'JSAPI',
slots: { slots: {
default: 'wxPubConfig', default: 'wxPubConfig',
}, },
}, },
{ {
title: 'APP 支付', title: 'APP',
slots: { slots: {
default: 'wxAppConfig', default: 'wxAppConfig',
}, },
}, },
{ {
title: 'Native 支付', title: 'Native',
slots: { slots: {
default: 'wxNativeConfig', default: 'wxNativeConfig',
}, },
}, },
{ {
title: 'WAP 网站支付', title: 'WAP 网站',
slots: { slots: {
default: 'wxWapConfig', default: 'wxWapConfig',
}, },
minWidth: 10,
}, },
{ {
title: '条码支付', title: '条码',
slots: { slots: {
default: 'wxBarConfig', default: 'wxBarConfig',
}, },
@@ -157,28 +171,27 @@ export function useGridColumns<T = PayAppApi.App>(
}, },
{ {
title: '操作', title: '操作',
width: 130, width: 140,
fixed: 'right', fixed: 'right',
slots: { default: 'actions' }, slots: { default: 'actions' },
}, },
]; ];
} }
/** 新增/修改的表单 */ /** 应用新增/修改的表单 */
export function useFormSchema(): VbenFormSchema[] { export function useAppFormSchema(): VbenFormSchema[] {
return [ return [
{ {
label: '应用编号',
fieldName: 'id', fieldName: 'id',
component: 'Input', component: 'Input',
dependencies: { dependencies: {
show: () => false,
triggerFields: [''], triggerFields: [''],
show: () => false,
}, },
}, },
{ {
label: '应用名',
fieldName: 'name', fieldName: 'name',
label: '应用名',
component: 'Input', component: 'Input',
rules: 'required', rules: 'required',
componentProps: { componentProps: {
@@ -186,8 +199,8 @@ export function useFormSchema(): VbenFormSchema[] {
}, },
}, },
{ {
label: '应用标识',
fieldName: 'appKey', fieldName: 'appKey',
label: '应用标识',
component: 'Input', component: 'Input',
rules: 'required', rules: 'required',
componentProps: { componentProps: {
@@ -195,17 +208,17 @@ export function useFormSchema(): VbenFormSchema[] {
}, },
}, },
{ {
label: '开启状态',
fieldName: 'status', fieldName: 'status',
label: '开启状态',
component: 'RadioGroup', component: 'RadioGroup',
rules: 'required', rules: z.number().default(CommonStatusEnum.ENABLE),
componentProps: { componentProps: {
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'), options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
}, },
}, },
{ {
label: '支付结果的回调地址',
fieldName: 'orderNotifyUrl', fieldName: 'orderNotifyUrl',
label: '支付结果的回调地址',
component: 'Input', component: 'Input',
rules: 'required', rules: 'required',
componentProps: { componentProps: {
@@ -213,26 +226,25 @@ export function useFormSchema(): VbenFormSchema[] {
}, },
}, },
{ {
label: '退款结果的回调地址',
fieldName: 'refundNotifyUrl', fieldName: 'refundNotifyUrl',
label: '退款结果的回调地址',
component: 'Input', component: 'Input',
rules: 'required', rules: 'required',
componentProps: { componentProps: {
placeholder: '请输入支付结果的回调地址', placeholder: '请输入退款结果的回调地址',
}, },
}, },
{ {
label: '转账结果的回调地址',
fieldName: 'transferNotifyUrl', fieldName: 'transferNotifyUrl',
label: '转账结果的回调地址',
component: 'Input', component: 'Input',
rules: 'required',
componentProps: { componentProps: {
placeholder: '请输入转账结果的回调地址', placeholder: '请输入转账结果的回调地址',
}, },
}, },
{ {
label: '备注',
fieldName: 'remark', fieldName: 'remark',
label: '备注',
component: 'Textarea', component: 'Textarea',
componentProps: { componentProps: {
rows: 3, rows: 3,
@@ -241,3 +253,487 @@ export function useFormSchema(): VbenFormSchema[] {
}, },
]; ];
} }
export function useChannelFormSchema(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: 3,
},
},
{
label: '支付宝公钥',
fieldName: 'config.alipayPublicKey',
component: 'Textarea',
rules: 'required',
componentProps: {
placeholder: '请输入支付宝公钥',
rows: 3,
},
dependencies: {
show(values) {
return values?.config?.mode === 1;
},
triggerFields: ['config.mode', 'mode', 'config'],
},
},
{
label: '商户公钥应用证书',
fieldName: 'config.appCertContent',
component: h(InputUpload, {
inputType: 'textarea',
textareaProps: { rows: 3, 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: 3, 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: 3, 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: 3,
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: 3,
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: 3,
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 [];
}
}

View File

@@ -1,6 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table'; import type { ActionItem, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { PayAppApi } from '#/api/pay/app/index'; import type { PayAppApi } from '#/api/pay/app';
import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui'; import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { CommonStatusEnum, PayChannelEnum } from '@vben/constants'; import { CommonStatusEnum, PayChannelEnum } from '@vben/constants';
@@ -8,50 +8,58 @@ import { CommonStatusEnum, PayChannelEnum } from '@vben/constants';
import { ElLoading, ElMessage } from 'element-plus'; import { ElLoading, ElMessage } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table'; import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { changeAppStatus, deleteApp, getAppPage } from '#/api/pay/app/index'; import { deleteApp, getAppPage, updateAppStatus } from '#/api/pay/app';
import { $t } from '#/locales'; import { $t } from '#/locales';
import { useGridColumns, useGridFormSchema } from './data'; import { useGridColumns, useGridFormSchema } from './data';
import appFrom from './modules/app-form.vue'; import AppForm from './modules/app-form.vue';
import channelFrom from './modules/channel-form.vue'; import ChannelForm from './modules/channel-form.vue';
/** 刷新表格 */ /** 刷新表格 */
function onRefresh() { function handleRefresh() {
gridApi.query(); gridApi.query();
} }
const [AppFormModal, appFormModalApi] = useVbenModal({ const [AppFormModal, appFormModalApi] = useVbenModal({
connectedComponent: appFrom, connectedComponent: AppForm,
destroyOnClose: true, destroyOnClose: true,
}); });
const [ChannelFormModal, channelFormModalApi] = useVbenModal({ const [ChannelFormModal, channelFormModalApi] = useVbenModal({
connectedComponent: channelFrom, connectedComponent: ChannelForm,
destroyOnClose: true, destroyOnClose: true,
}); });
/** 创建应用 */
function handleCreate() { function handleCreate() {
appFormModalApi.setData(null).open(); appFormModalApi.setData(null).open();
} }
/** 编辑应用 */
function handleEdit(row: PayAppApi.App) { function handleEdit(row: PayAppApi.App) {
appFormModalApi.setData({ id: row.id }).open(); appFormModalApi.setData({ id: row.id }).open();
} }
/** 创建/编辑渠道 */
async function handleChannelForm(row: PayAppApi.App, payCode: string) {
channelFormModalApi.setData({ appId: row.id, code: payCode }).open();
}
/** 删除应用 */
async function handleDelete(row: PayAppApi.App) { async function handleDelete(row: PayAppApi.App) {
const loadingInstance = ElLoading.service({ const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.name]), text: $t('ui.actionMessage.deleting', [row.name]),
}); });
try { try {
await deleteApp(row.id as number); await deleteApp(row.id!);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name])); ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh(); handleRefresh();
} finally { } finally {
loadingInstance.close(); loadingInstance.close();
} }
} }
/** 更新状态 */ /** 更新应用状态 */
async function handleStatusChange( async function handleStatusChange(
newStatus: number, newStatus: number,
row: PayAppApi.App, row: PayAppApi.App,
@@ -63,8 +71,8 @@ async function handleStatusChange(
}) })
.then(async () => { .then(async () => {
// 更新状态 // 更新状态
const res = await changeAppStatus({ const res = await updateAppStatus({
id: row.id as number, id: row.id!,
status: newStatus, status: newStatus,
}); });
if (res) { if (res) {
@@ -81,21 +89,20 @@ async function handleStatusChange(
}); });
} }
/** /** 生成渠道配置按钮 */
* 根据渠道编码判断渠道列表中是否存在 function createChannelConfigAction(
* row: PayAppApi.App,
* @param channels 渠道列表 channelCode: string,
* @param channelCode 渠道编码 ): ActionItem[] {
*/ const exists = row.channelCodes?.includes(channelCode);
function isChannelExists(channels: string[], channelCode: string) { return [
if (!channels) { {
return false; type: exists ? 'primary' : 'danger',
} size: 'small',
return channels.includes(channelCode); icon: exists ? 'lucide:check' : 'lucide:x',
} onClick: handleChannelForm.bind(null, row, channelCode),
},
async function openChannelForm(row: PayAppApi.App, payCode: string) { ];
channelFormModalApi.setData({ id: row.id, payCode }).open();
} }
const [Grid, gridApi] = useVbenVxeGrid({ const [Grid, gridApi] = useVbenVxeGrid({
@@ -119,6 +126,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
}, },
rowConfig: { rowConfig: {
keyField: 'id', keyField: 'id',
isHover: true,
}, },
toolbarConfig: { toolbarConfig: {
refresh: true, refresh: true,
@@ -134,10 +142,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
<DocAlert title="支付功能开启" url="https://doc.iocoder.cn/pay/build/" /> <DocAlert title="支付功能开启" url="https://doc.iocoder.cn/pay/build/" />
</template> </template>
<AppFormModal @success="onRefresh" /> <AppFormModal @success="handleRefresh" />
<ChannelFormModal @success="onRefresh" /> <ChannelFormModal @success="handleRefresh" />
<Grid> <Grid table-title="应用列表">
<template #toolbar-tools> <template #toolbar-tools>
<TableAction <TableAction
:actions="[ :actions="[
@@ -156,16 +164,16 @@ const [Grid, gridApi] = useVbenVxeGrid({
:actions="[ :actions="[
{ {
label: $t('common.edit'), label: $t('common.edit'),
link: true,
type: 'primary', type: 'primary',
link: true,
icon: ACTION_ICON.EDIT, icon: ACTION_ICON.EDIT,
auth: ['pay:app:update'], auth: ['pay:app:update'],
onClick: handleEdit.bind(null, row), onClick: handleEdit.bind(null, row),
}, },
{ {
label: $t('common.delete'), label: $t('common.delete'),
link: true,
type: 'danger', type: 'danger',
link: true,
icon: ACTION_ICON.DELETE, icon: ACTION_ICON.DELETE,
auth: ['pay:app:delete'], auth: ['pay:app:delete'],
popConfirm: { popConfirm: {
@@ -177,349 +185,80 @@ const [Grid, gridApi] = useVbenVxeGrid({
/> />
</template> </template>
<template #alipayAppConfig="{ row }"> <template #alipayAppConfig="{ row }">
<!-- TODO @xingyuchannelCodes 爆红 -->
<TableAction <TableAction
:actions="[ :actions="
{ createChannelConfigAction(row, PayChannelEnum.ALIPAY_APP.code)
size: 'small', "
icon: isChannelExists(
row.channelCodes,
PayChannelEnum.ALIPAY_APP.code,
)
? 'lucide:check'
: 'lucide:x',
type: !isChannelExists(
row.channelCodes,
PayChannelEnum.ALIPAY_APP.code,
)
? 'danger'
: 'primary',
circle: true,
onClick: openChannelForm.bind(
null,
row,
PayChannelEnum.ALIPAY_APP.code,
),
},
]"
/> />
</template> </template>
<template #alipayPCConfig="{ row }"> <template #alipayPCConfig="{ row }">
<TableAction <TableAction
:actions="[ :actions="
{ createChannelConfigAction(row, PayChannelEnum.ALIPAY_PC.code)
size: 'small', "
icon: isChannelExists(
row.channelCodes,
PayChannelEnum.ALIPAY_PC.code,
)
? 'lucide:check'
: 'lucide:x',
type: !isChannelExists(
row.channelCodes,
PayChannelEnum.ALIPAY_APP.code,
)
? 'danger'
: 'primary',
circle: true,
onClick: openChannelForm.bind(
null,
row,
PayChannelEnum.ALIPAY_PC.code,
),
},
]"
/> />
</template> </template>
<template #alipayWAPConfig="{ row }"> <template #alipayWAPConfig="{ row }">
<TableAction <TableAction
:actions="[ :actions="
{ createChannelConfigAction(row, PayChannelEnum.ALIPAY_WAP.code)
size: 'small', "
icon: isChannelExists(
row.channelCodes,
PayChannelEnum.ALIPAY_WAP.code,
)
? 'lucide:check'
: 'lucide:x',
type: !isChannelExists(
row.channelCodes,
PayChannelEnum.ALIPAY_APP.code,
)
? 'danger'
: 'primary',
circle: true,
onClick: openChannelForm.bind(
null,
row,
PayChannelEnum.ALIPAY_WAP.code,
),
},
]"
/> />
</template> </template>
<template #alipayQrConfig="{ row }"> <template #alipayQrConfig="{ row }">
<TableAction <TableAction
:actions="[ :actions="
{ createChannelConfigAction(row, PayChannelEnum.ALIPAY_QR.code)
size: 'small', "
icon: isChannelExists(
row.channelCodes,
PayChannelEnum.ALIPAY_QR.code,
)
? 'lucide:check'
: 'lucide:x',
type: !isChannelExists(
row.channelCodes,
PayChannelEnum.ALIPAY_APP.code,
)
? 'danger'
: 'primary',
circle: true,
onClick: openChannelForm.bind(
null,
row,
PayChannelEnum.ALIPAY_QR.code,
),
},
]"
/> />
</template> </template>
<template #alipayBarConfig="{ row }"> <template #alipayBarConfig="{ row }">
<TableAction <TableAction
:actions="[ :actions="
{ createChannelConfigAction(row, PayChannelEnum.ALIPAY_BAR.code)
size: 'small', "
icon: isChannelExists(
row.channelCodes,
PayChannelEnum.ALIPAY_BAR.code,
)
? 'lucide:check'
: 'lucide:x',
type: !isChannelExists(
row.channelCodes,
PayChannelEnum.ALIPAY_APP.code,
)
? 'danger'
: 'primary',
circle: true,
onClick: openChannelForm.bind(
null,
row,
PayChannelEnum.ALIPAY_BAR.code,
),
},
]"
/> />
</template> </template>
<template #wxLiteConfig="{ row }"> <template #wxLiteConfig="{ row }">
<TableAction <TableAction
:actions="[ :actions="createChannelConfigAction(row, PayChannelEnum.WX_LITE.code)"
{
size: 'small',
icon: isChannelExists(
row.channelCodes,
PayChannelEnum.WX_LITE.code,
)
? 'lucide:check'
: 'lucide:x',
type: !isChannelExists(
row.channelCodes,
PayChannelEnum.WX_LITE.code,
)
? 'danger'
: 'primary',
circle: true,
onClick: openChannelForm.bind(
null,
row,
PayChannelEnum.WX_LITE.code,
),
},
]"
/> />
</template> </template>
<template #wxPubConfig="{ row }"> <template #wxPubConfig="{ row }">
<TableAction <TableAction
:actions="[ :actions="createChannelConfigAction(row, PayChannelEnum.WX_PUB.code)"
{
size: 'small',
icon: isChannelExists(
row.channelCodes,
PayChannelEnum.WX_PUB.code,
)
? 'lucide:check'
: 'lucide:x',
type: !isChannelExists(
row.channelCodes,
PayChannelEnum.WX_PUB.code,
)
? 'danger'
: 'primary',
circle: true,
onClick: openChannelForm.bind(
null,
row,
PayChannelEnum.WX_PUB.code,
),
},
]"
/> />
</template> </template>
<template #wxAppConfig="{ row }"> <template #wxAppConfig="{ row }">
<TableAction <TableAction
:actions="[ :actions="createChannelConfigAction(row, PayChannelEnum.WX_APP.code)"
{
size: 'small',
icon: isChannelExists(
row.channelCodes,
PayChannelEnum.WX_APP.code,
)
? 'lucide:check'
: 'lucide:x',
type: !isChannelExists(
row.channelCodes,
PayChannelEnum.WX_APP.code,
)
? 'danger'
: 'primary',
circle: true,
onClick: openChannelForm.bind(
null,
row,
PayChannelEnum.WX_APP.code,
),
},
]"
/> />
</template> </template>
<template #wxNativeConfig="{ row }"> <template #wxNativeConfig="{ row }">
<TableAction <TableAction
:actions="[ :actions="
{ createChannelConfigAction(row, PayChannelEnum.WX_NATIVE.code)
size: 'small', "
icon: isChannelExists(
row.channelCodes,
PayChannelEnum.WX_NATIVE.code,
)
? 'lucide:check'
: 'lucide:x',
type: !isChannelExists(
row.channelCodes,
PayChannelEnum.WX_NATIVE.code,
)
? 'danger'
: 'primary',
circle: true,
onClick: openChannelForm.bind(
null,
row,
PayChannelEnum.WX_NATIVE.code,
),
},
]"
/> />
</template> </template>
<template #wxWapConfig="{ row }"> <template #wxWapConfig="{ row }">
<TableAction <TableAction
:actions="[ :actions="createChannelConfigAction(row, PayChannelEnum.WX_WAP.code)"
{
size: 'small',
icon: isChannelExists(
row.channelCodes,
PayChannelEnum.WX_WAP.code,
)
? 'lucide:check'
: 'lucide:x',
type: !isChannelExists(
row.channelCodes,
PayChannelEnum.WX_WAP.code,
)
? 'danger'
: 'primary',
circle: true,
onClick: openChannelForm.bind(
null,
row,
PayChannelEnum.WX_WAP.code,
),
},
]"
/> />
</template> </template>
<template #wxBarConfig="{ row }"> <template #wxBarConfig="{ row }">
<TableAction <TableAction
:actions="[ :actions="createChannelConfigAction(row, PayChannelEnum.WX_BAR.code)"
{
size: 'small',
icon: isChannelExists(
row.channelCodes,
PayChannelEnum.WX_BAR.code,
)
? 'lucide:check'
: 'lucide:x',
type: !isChannelExists(
row.channelCodes,
PayChannelEnum.WX_BAR.code,
)
? 'danger'
: 'primary',
circle: true,
onClick: openChannelForm.bind(
null,
row,
PayChannelEnum.WX_BAR.code,
),
},
]"
/> />
</template> </template>
<template #walletConfig="{ row }"> <template #walletConfig="{ row }">
<TableAction <TableAction
:actions="[ :actions="createChannelConfigAction(row, PayChannelEnum.WALLET.code)"
{
size: 'small',
icon: isChannelExists(
row.channelCodes,
PayChannelEnum.WALLET.code,
)
? 'lucide:check'
: 'lucide:x',
type: !isChannelExists(
row.channelCodes,
PayChannelEnum.WALLET.code,
)
? 'danger'
: 'primary',
circle: true,
onClick: openChannelForm.bind(
null,
row,
PayChannelEnum.WALLET.code,
),
},
]"
/> />
</template> </template>
<template #mockConfig="{ row }"> <template #mockConfig="{ row }">
<TableAction <TableAction
:actions="[ :actions="createChannelConfigAction(row, PayChannelEnum.MOCK.code)"
{
size: 'small',
icon: isChannelExists(row.channelCodes, PayChannelEnum.MOCK.code)
? 'lucide:check'
: 'lucide:x',
type: !isChannelExists(row.channelCodes, PayChannelEnum.MOCK.code)
? 'danger'
: 'primary',
circle: true,
onClick: openChannelForm.bind(
null,
row,
PayChannelEnum.MOCK.code,
),
},
]"
/> />
</template> </template>
</Grid> </Grid>

View File

@@ -11,14 +11,14 @@ import { ElMessage } from 'element-plus';
import { useVbenForm } from '#/adapter/form'; import { useVbenForm } from '#/adapter/form';
import { createApp, getApp, updateApp } from '#/api/pay/app'; import { createApp, getApp, updateApp } from '#/api/pay/app';
import { useFormSchema } from '../data'; import { useAppFormSchema } from '../data';
const emit = defineEmits(['success']); const emit = defineEmits(['success']);
const formData = ref<PayAppApi.App>(); const formData = ref<PayAppApi.App>();
const title = computed(() => { const title = computed(() => {
return formData.value?.id return formData.value?.id
? $t('ui.actionTitle.edit', '应用') ? $t('ui.actionTitle.edit', ['应用'])
: $t('ui.actionTitle.create', '应用'); : $t('ui.actionTitle.create', ['应用']);
}); });
const [Form, formApi] = useVbenForm({ const [Form, formApi] = useVbenForm({
@@ -30,7 +30,7 @@ const [Form, formApi] = useVbenForm({
labelWidth: 160, labelWidth: 160,
}, },
layout: 'horizontal', layout: 'horizontal',
schema: useFormSchema(), schema: useAppFormSchema(),
showDefaultActions: false, showDefaultActions: false,
}); });
@@ -53,7 +53,7 @@ const [Modal, modalApi] = useVbenModal({
modalApi.unlock(); modalApi.unlock();
} }
}, },
onOpenChange: async (isOpen) => { async onOpenChange(isOpen: boolean) {
if (!isOpen) { if (!isOpen) {
formData.value = undefined; formData.value = undefined;
return; return;
@@ -77,7 +77,7 @@ const [Modal, modalApi] = useVbenModal({
}); });
</script> </script>
<template> <template>
<Modal :close-on-click-modal="false" :title="title" class="w-2/5"> <Modal :title="title" class="w-2/5">
<Form /> <Form />
</Modal> </Modal>
</template> </template>

View File

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

View File

@@ -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 [];
}
}