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

This commit is contained in:
YunaiV
2025-10-05 18:56:39 +08:00
parent 7bdfa99042
commit e6e0621c20
2 changed files with 132 additions and 472 deletions

View File

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

View File

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