smart-flow/yudao-ui-admin-vben
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
YunaiV
2025-10-05 16:51:59 +08:00
parent 98d7ed663f
commit 7bdfa99042
8 changed files with 663 additions and 662 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web-antd/src/api/pay/app/index.ts
View File

@@ -60,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);
}

5
apps/web-antd/src/components/upload/input-upload.vue
View File

@@ -1,5 +1,4 @@
<script setup lang="ts">
// TODO @xingyu：这个组件，只有 pay 在用，和现有的 file-upload 和 image-upload 有点不一致。是不是可以考虑移除，只在 pay 那搞个复用的组件；
import type { InputProps, TextAreaProps } from 'ant-design-vue';
import type { FileUploadProps } from './typing';
@@ -61,8 +60,8 @@ const fileUploadProps = computed(() => {
<template>
<Row>
<Col :span="18">
<Input v-if="inputType === 'input'" v-bind="inputProps" />
<Textarea v-else :row="4" v-bind="textareaProps" />
<Input readonly v-if="inputType === 'input'" v-bind="inputProps" />
<Textarea readonly v-else :row="4" v-bind="textareaProps" />
</Col>
<Col :span="6">
<FileUpload

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

@@ -2,39 +2,50 @@ import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { PayAppApi } from '#/api/pay/app';
import { h } from 'vue';
import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { z } from '#/adapter/form';
import { InputUpload } from '#/components/upload';
import { getRangePickerDefaultProps } from '#/utils';
/** 列表的搜索表单 */
export function useGridFormSchema(): VbenFormSchema[] {
return [
{
component: 'Input',
fieldName: 'name',
label: '应用名',
component: 'Input',
componentProps: {
placeholder: '请输入应用名',
allowClear: true,
},
},
{
component: 'Select',
fieldName: 'status',
label: '开启状态',
component: 'Select',
componentProps: {
placeholder: '请选择开启状态',
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
allowClear: true,
},
},
{
component: 'RangePicker',
fieldName: 'createTime',
label: '创建时间',
component: 'RangePicker',
componentProps: {
placeholder: ['开始日期', '结束日期'],
...getRangePickerDefaultProps(),
clearable: true,
},
},
];
}
/** 列表的字段 */
export function useGridColumns<T = PayAppApi.App>(
onStatusChange?: (
newStatus: number,
@@ -42,19 +53,21 @@ export function useGridColumns<T = PayAppApi.App>(
) => PromiseLike<boolean | undefined>,
): VxeTableGridOptions['columns'] {
return [
{ type: 'checkbox', width: 60 },
{
title: '应用标识',
field: 'appKey',
title: '应用标识',
minWidth: 40,
},
{
title: '应用名',
field: 'name',
title: '应用名',
minWidth: 40,
},
{
field: 'status',
title: '状态',
align: 'center',
minWidth: 40,
cellRender: {
attrs: { beforeChange: onStatusChange },
name: 'CellSwitch',
@@ -68,31 +81,32 @@ export function useGridColumns<T = PayAppApi.App>(
title: '支付宝配置',
children: [
{
title: 'APP 支付',
title: 'APP',
slots: {
default: 'alipayAppConfig',
},
},
{
title: 'PC 网站支付',
title: 'PC 网站',
slots: {
default: 'alipayPCConfig',
},
},
{
title: 'WAP 网站支付',
title: 'WAP 网站',
slots: {
default: 'alipayWAPConfig',
},
minWidth: 10,
},
{
title: '扫码支付',
title: '扫码',
slots: {
default: 'alipayQrConfig',
},
},
{
title: '条码支付',
title: '条码',
slots: {
default: 'alipayBarConfig',
},
@@ -103,37 +117,38 @@ export function useGridColumns<T = PayAppApi.App>(
title: '微信配置',
children: [
{
title: '小程序支付',
title: '小程序',
slots: {
default: 'wxLiteConfig',
},
},
{
title: 'JSAPI 支付',
title: 'JSAPI',
slots: {
default: 'wxPubConfig',
},
},
{
title: 'APP 支付',
title: 'APP',
slots: {
default: 'wxAppConfig',
},
},
{
title: 'Native 支付',
title: 'Native',
slots: {
default: 'wxNativeConfig',
},
},
{
title: 'WAP 网站支付',
title: 'WAP 网站',
slots: {
default: 'wxWapConfig',
},
minWidth: 10,
},
{
title: '条码支付',
title: '条码',
slots: {
default: 'wxBarConfig',
},
@@ -156,28 +171,27 @@ export function useGridColumns<T = PayAppApi.App>(
},
{
title: '操作',
width: 130,
width: 140,
fixed: 'right',
slots: { default: 'actions' },
},
];
}
/** 新增/修改的表单 */
export function useFormSchema(): VbenFormSchema[] {
/** 应用新增/修改的表单 */
export function useAppFormSchema(): VbenFormSchema[] {
return [
{
label: '应用编号',
fieldName: 'id',
component: 'Input',
dependencies: {
show: () => false,
triggerFields: [''],
show: () => false,
},
},
{
label: '应用名',
fieldName: 'name',
label: '应用名',
component: 'Input',
rules: 'required',
componentProps: {
@@ -185,8 +199,8 @@ export function useFormSchema(): VbenFormSchema[] {
},
},
{
label: '应用标识',
fieldName: 'appKey',
label: '应用标识',
component: 'Input',
rules: 'required',
componentProps: {
@@ -194,17 +208,19 @@ export function useFormSchema(): VbenFormSchema[] {
},
},
{
label: '开启状态',
fieldName: 'status',
label: '开启状态',
component: 'RadioGroup',
rules: 'required',
rules: z.number().default(CommonStatusEnum.ENABLE),
componentProps: {
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
buttonStyle: 'solid',
optionType: 'button',
},
},
{
label: '支付结果的回调地址',
fieldName: 'orderNotifyUrl',
label: '支付结果的回调地址',
component: 'Input',
rules: 'required',
componentProps: {
@@ -212,26 +228,25 @@ export function useFormSchema(): VbenFormSchema[] {
},
},
{
label: '退款结果的回调地址',
fieldName: 'refundNotifyUrl',
label: '退款结果的回调地址',
component: 'Input',
rules: 'required',
componentProps: {
placeholder: '请输入支付结果的回调地址',
placeholder: '请输入退款结果的回调地址',
},
},
{
label: '转账结果的回调地址',
fieldName: 'transferNotifyUrl',
label: '转账结果的回调地址',
component: 'Input',
rules: 'required',
componentProps: {
placeholder: '请输入转账结果的回调地址',
},
},
{
label: '备注',
fieldName: 'remark',
label: '备注',
component: 'Textarea',
componentProps: {
rows: 3,
@@ -240,3 +255,514 @@ export function useFormSchema(): VbenFormSchema[] {
},
];
}
/** 渠道新增/修改的表单 */
export function useChannelFormSchema(formType: string = ''): VbenFormSchema[] {
// TODO @AI：id、appId、feeRate、code、备注，这几个整合起来（放最前面）。然后差异化的去 push
// TODO @AI：radiogroup 都改成 buttonStyle、optionType
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,
},
{
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 [
{
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,
},
{
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 [];
}
}

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

@@ -8,52 +8,59 @@ import { CommonStatusEnum, PayChannelEnum } from '@vben/constants';
import { message } from 'ant-design-vue';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { changeAppStatus, deleteApp, getAppPage } from '#/api/pay/app';
import { deleteApp, getAppPage, updateAppStatus } from '#/api/pay/app';
import { $t } from '#/locales';
import { useGridColumns, useGridFormSchema } from './data';
import appFrom from './modules/app-form.vue';
import channelFrom from './modules/channel-form.vue';
import AppForm from './modules/app-form.vue';
import ChannelForm from './modules/channel-form.vue';
/** 刷新表格 */
function onRefresh() {
function handleRefresh() {
gridApi.query();
}
const [AppFormModal, appFormModalApi] = useVbenModal({
connectedComponent: appFrom,
connectedComponent: AppForm,
destroyOnClose: true,
});
const [ChannelFormModal, channelFormModalApi] = useVbenModal({
connectedComponent: channelFrom,
connectedComponent: ChannelForm,
destroyOnClose: true,
});
/** 创建应用 */
function handleCreate() {
appFormModalApi.setData(null).open();
}
/** 编辑应用 */
function handleEdit(row: PayAppApi.App) {
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) {
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting', [row.name]),
duration: 0,
});
try {
await deleteApp(row.id as number);
message.success({
content: $t('ui.actionMessage.deleteSuccess', [row.name]),
});
onRefresh();
await deleteApp(row.id!);
message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
handleRefresh();
} finally {
hideLoading();
}
}
/** 更新状态 */
/** 更新应用状态 */
async function handleStatusChange(
newStatus: number,
row: PayAppApi.App,
@@ -65,8 +72,8 @@ async function handleStatusChange(
})
.then(async () => {
// 更新状态
const res = await changeAppStatus({
id: row.id as number,
const res = await updateAppStatus({
id: row.id!,
status: newStatus,
});
if (res) {
@@ -83,21 +90,9 @@ async function handleStatusChange(
});
}
/**
* 根据渠道编码判断渠道列表中是否存在
*
* @param channels 渠道列表
* @param channelCode 渠道编码
*/
/** 根据渠道编码判断渠道列表中是否存在 */
function isChannelExists(channels: string[], channelCode: string) {
if (!channels) {
return false;
}
return channels.includes(channelCode);
}
async function openChannelForm(row: PayAppApi.App, payCode: string) {
channelFormModalApi.setData({ id: row.id, payCode }).open();
return channels?.includes(channelCode);
}
const [Grid, gridApi] = useVbenVxeGrid({
@@ -121,6 +116,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
rowConfig: {
keyField: 'id',
isHover: true,
},
toolbarConfig: {
refresh: true,
@@ -136,10 +132,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
<DocAlert title="支付功能开启" url="https://doc.iocoder.cn/pay/build/" />
</template>
<AppFormModal @success="onRefresh" />
<ChannelFormModal @success="onRefresh" />
<AppFormModal @success="handleRefresh" />
<ChannelFormModal @success="handleRefresh" />
<Grid>
<Grid table-title="应用列表">
<template #toolbar-tools>
<TableAction
:actions="[
@@ -177,6 +173,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
]"
/>
</template>
<!-- TODO @AI：有没办法简化 -->
<template #alipayAppConfig="{ row }">
<TableAction
:actions="[
@@ -194,7 +191,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
PayChannelEnum.ALIPAY_APP.code,
),
shape: 'circle',
onClick: openChannelForm.bind(
onClick: handleChannelForm.bind(
null,
row,
PayChannelEnum.ALIPAY_APP.code,
@@ -220,7 +217,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
PayChannelEnum.ALIPAY_PC.code,
),
shape: 'circle',
onClick: openChannelForm.bind(
onClick: handleChannelForm.bind(
null,
row,
PayChannelEnum.ALIPAY_PC.code,
@@ -246,7 +243,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
PayChannelEnum.ALIPAY_WAP.code,
),
shape: 'circle',
onClick: openChannelForm.bind(
onClick: handleChannelForm.bind(
null,
row,
PayChannelEnum.ALIPAY_WAP.code,
@@ -272,7 +269,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
PayChannelEnum.ALIPAY_QR.code,
),
shape: 'circle',
onClick: openChannelForm.bind(
onClick: handleChannelForm.bind(
null,
row,
PayChannelEnum.ALIPAY_QR.code,
@@ -298,7 +295,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
PayChannelEnum.ALIPAY_BAR.code,
),
shape: 'circle',
onClick: openChannelForm.bind(
onClick: handleChannelForm.bind(
null,
row,
PayChannelEnum.ALIPAY_BAR.code,
@@ -324,7 +321,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
PayChannelEnum.WX_LITE.code,
),
shape: 'circle',
onClick: openChannelForm.bind(
onClick: handleChannelForm.bind(
null,
row,
PayChannelEnum.WX_LITE.code,
@@ -350,7 +347,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
PayChannelEnum.WX_PUB.code,
),
shape: 'circle',
onClick: openChannelForm.bind(
onClick: handleChannelForm.bind(
null,
row,
PayChannelEnum.WX_PUB.code,
@@ -376,7 +373,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
PayChannelEnum.WX_APP.code,
),
shape: 'circle',
onClick: openChannelForm.bind(
onClick: handleChannelForm.bind(
null,
row,
PayChannelEnum.WX_APP.code,
@@ -402,7 +399,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
PayChannelEnum.WX_NATIVE.code,
),
shape: 'circle',
onClick: openChannelForm.bind(
onClick: handleChannelForm.bind(
null,
row,
PayChannelEnum.WX_NATIVE.code,
@@ -428,7 +425,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
PayChannelEnum.WX_WAP.code,
),
shape: 'circle',
onClick: openChannelForm.bind(
onClick: handleChannelForm.bind(
null,
row,
PayChannelEnum.WX_WAP.code,
@@ -454,7 +451,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
PayChannelEnum.WX_BAR.code,
),
shape: 'circle',
onClick: openChannelForm.bind(
onClick: handleChannelForm.bind(
null,
row,
PayChannelEnum.WX_BAR.code,
@@ -480,7 +477,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
PayChannelEnum.WALLET.code,
),
shape: 'circle',
onClick: openChannelForm.bind(
onClick: handleChannelForm.bind(
null,
row,
PayChannelEnum.WALLET.code,
@@ -503,7 +500,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
PayChannelEnum.MOCK.code,
),
shape: 'circle',
onClick: openChannelForm.bind(
onClick: handleChannelForm.bind(
null,
row,
PayChannelEnum.MOCK.code,

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

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

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

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

492
apps/web-antd/src/views/pay/app/modules/data.ts
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 [];
}
}

1
apps/web-ele/src/components/upload/input-upload.vue
View File

@@ -1,5 +1,4 @@
<script setup lang="ts">
// TODO @xingyu：这个组件，只有 pay 在用，和现有的 file-upload 和 image-upload 有点不一致。是不是可以考虑移除，只在 pay 那搞个复用的组件；
import type { InputProps } from 'element-plus';
import type { FileUploadProps } from './typing';