yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

pull/88/head
痴货 2025-05-05 16:29:59 +08:00
parent 61e06cce09
commit d0870beb40
9 changed files with 965 additions and 252 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

4
apps/web-antd/src/components/upload/file-upload.vue
View File

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

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

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

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

@ -19,6 +19,9 @@ import { PayChannelEnum } from '#/utils/constants';
import { columns, querySchema } from './data';
import appFrom from './modules/app-form.vue';
import aliPayFrom from './modules/channel/AlipayChannelForm.vue';
import mockFrom from './modules/channel/MockChannelForm.vue';
import walletFrom from './modules/channel/WalletChannelForm.vue';
import weixinFrom from './modules/channel/WeixinChannelForm.vue';
const formOptions: VbenFormProps = {
commonConfig: {
@ -84,6 +87,18 @@ const [AliPayModal, modalAliPayApi] = useVbenModal({
connectedComponent: aliPayFrom,
});
const [MockModal, modalMockApi] = useVbenModal({
connectedComponent: mockFrom,
});
const [WalletModal, modalWalletApi] = useVbenModal({
connectedComponent: walletFrom,
});
const [WeixinModal, modalWeixinApi] = useVbenModal({
connectedComponent: weixinFrom,
});
const handleAdd = () => {
modalApi.setData({});
modalApi.open();
@ -123,17 +138,22 @@ const openChannelForm = async (row: PayApi.PayAppApi.App, payCode: string) => {
if (payCode.indexOf('alipay_') === 0) {
modalAliPayApi.setData({ id: row.id, payCode });
modalAliPayApi.open();
return;
}
if (payCode.indexOf('wx_') === 0) {
modalWeixinApi.setData({ id: row.id, payCode });
modalWeixinApi.open();
return;
}
if (payCode.indexOf('mock') === 0) {
modalMockApi.setData({ id: row.id, payCode });
modalMockApi.open();
return;
}
if (payCode.indexOf('wallet') === 0) {
modalWalletApi.setData({ id: row.id, payCode });
modalWalletApi.open();
}
// if (payCode.indexOf('wx_') === 0) {
// weixinFormRef.value.open(row.id, payCode);
// return;
// }
// if (payCode.indexOf('mock') === 0) {
// mockFormRef.value.open(row.id, payCode);
// }
// if (payCode.indexOf('wallet') === 0) {
// mockFormRef.value.open(row.id, payCode);
// }
};
</script>
@ -153,24 +173,26 @@ const openChannelForm = async (row: PayApi.PayAppApi.App, payCode: string) => {
</Space>
</template>
<template #action="{ row }">
<a-button
v-access:code="['pay:app:update']"
type="link"
@click.stop="handleEdit(row)"
>
{{ $t('ui.actionTitle.edit') }}
</a-button>
<Popconfirm
:get-popup-container="getVxePopupContainer"
placement="left"
v-access:code="['pay:app:delete']"
title="确认删除？"
@confirm="handleDelete(row)"
>
<a-button type="link" danger>
{{ $t('ui.actionTitle.delete') }}
</a-button>
</Popconfirm>
<Space>
<Button
v-access:code="['pay:app:update']"
type="link"
@click.stop="handleEdit(row)"
>
{{ $t('ui.actionTitle.edit') }}
</Button>
<Popconfirm
:get-popup-container="getVxePopupContainer"
placement="left"
v-access:code="['pay:app:delete']"
title="确认删除？"
@confirm="handleDelete(row)"
>
<Button type="link" danger>
{{ $t('ui.actionTitle.delete') }}
</Button>
</Popconfirm>
</Space>
</template>
<template #status="{ row }">
<Switch
@ -180,240 +202,297 @@ const openChannelForm = async (row: PayApi.PayAppApi.App, payCode: string) => {
/>
</template>
<template #alipayAppConfig="{ row }">
<Button
v-if="
isChannelExists(row.channelCodes, PayChannelEnum.ALIPAY_APP.code)
"
type="primary"
:icon="h(CheckOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.ALIPAY_APP.code)"
/>
<Button
v-else
type="primary"
danger
:icon="h(CloseOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.ALIPAY_APP.code)"
/>
<div>
<Button
size="small"
v-if="
isChannelExists(row.channelCodes, PayChannelEnum.ALIPAY_APP.code)
"
type="primary"
:icon="h(CheckOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.ALIPAY_APP.code)"
/>
<Button
v-else
size="small"
type="primary"
danger
:icon="h(CloseOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.ALIPAY_APP.code)"
/>
</div>
</template>
<template #alipayPCConfig="{ row }">
<Button
v-if="
isChannelExists(row.channelCodes, PayChannelEnum.ALIPAY_PC.code)
"
type="primary"
:icon="h(CheckOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.ALIPAY_PC.code)"
/>
<Button
v-else
type="primary"
danger
:icon="h(CloseOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.ALIPAY_PC.code)"
/>
<div>
<Button
size="small"
v-if="
isChannelExists(row.channelCodes, PayChannelEnum.ALIPAY_PC.code)
"
type="primary"
:icon="h(CheckOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.ALIPAY_PC.code)"
/>
<Button
size="small"
v-else
type="primary"
danger
:icon="h(CloseOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.ALIPAY_PC.code)"
/>
</div>
</template>
<template #alipayWAPConfig="{ row }">
<Button
v-if="
isChannelExists(row.channelCodes, PayChannelEnum.ALIPAY_WAP.code)
"
type="primary"
:icon="h(CheckOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.ALIPAY_WAP.code)"
/>
<Button
v-else
type="primary"
danger
:icon="h(CloseOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.ALIPAY_WAP.code)"
/>
<div>
<Button
size="small"
v-if="
isChannelExists(row.channelCodes, PayChannelEnum.ALIPAY_WAP.code)
"
type="primary"
:icon="h(CheckOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.ALIPAY_WAP.code)"
/>
<Button
size="small"
v-else
type="primary"
danger
:icon="h(CloseOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.ALIPAY_WAP.code)"
/>
</div>
</template>
<template #alipayQrConfig="{ row }">
<Button
v-if="
isChannelExists(row.channelCodes, PayChannelEnum.ALIPAY_QR.code)
"
type="primary"
:icon="h(CheckOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.ALIPAY_QR.code)"
/>
<Button
v-else
type="primary"
danger
:icon="h(CloseOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.ALIPAY_QR.code)"
/>
<div>
<Button
size="small"
v-if="
isChannelExists(row.channelCodes, PayChannelEnum.ALIPAY_QR.code)
"
type="primary"
:icon="h(CheckOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.ALIPAY_QR.code)"
/>
<Button
size="small"
v-else
type="primary"
danger
:icon="h(CloseOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.ALIPAY_QR.code)"
/>
</div>
</template>
<template #alipayBarConfig="{ row }">
<Button
v-if="
isChannelExists(row.channelCodes, PayChannelEnum.ALIPAY_BAR.code)
"
type="primary"
:icon="h(CheckOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.ALIPAY_BAR.code)"
/>
<Button
v-else
type="primary"
danger
:icon="h(CloseOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.ALIPAY_BAR.code)"
/>
<div>
<Button
size="small"
v-if="
isChannelExists(row.channelCodes, PayChannelEnum.ALIPAY_BAR.code)
"
type="primary"
:icon="h(CheckOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.ALIPAY_BAR.code)"
/>
<Button
size="small"
v-else
type="primary"
danger
:icon="h(CloseOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.ALIPAY_BAR.code)"
/>
</div>
</template>
<template #wxLiteConfig="{ row }">
<Button
v-if="isChannelExists(row.channelCodes, PayChannelEnum.WX_LITE.code)"
type="primary"
:icon="h(CheckOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.WX_LITE.code)"
/>
<Button
v-else
type="primary"
danger
:icon="h(CloseOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.WX_LITE.code)"
/>
<div>
<Button
size="small"
v-if="
isChannelExists(row.channelCodes, PayChannelEnum.WX_LITE.code)
"
type="primary"
:icon="h(CheckOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.WX_LITE.code)"
/>
<Button
size="small"
v-else
type="primary"
danger
:icon="h(CloseOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.WX_LITE.code)"
/>
</div>
</template>
<template #wxPubConfig="{ row }">
<Button
v-if="isChannelExists(row.channelCodes, PayChannelEnum.WX_PUB.code)"
type="primary"
:icon="h(CheckOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.WX_PUB.code)"
/>
<Button
v-else
type="primary"
danger
:icon="h(CloseOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.WX_PUB.code)"
/>
<div>
<Button
size="small"
v-if="isChannelExists(row.channelCodes, PayChannelEnum.WX_PUB.code)"
type="primary"
:icon="h(CheckOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.WX_PUB.code)"
/>
<Button
size="small"
v-else
type="primary"
danger
:icon="h(CloseOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.WX_PUB.code)"
/>
</div>
</template>
<template #wxAppConfig="{ row }">
<Button
v-if="isChannelExists(row.channelCodes, PayChannelEnum.WX_APP.code)"
type="primary"
:icon="h(CheckOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.WX_APP.code)"
/>
<Button
v-else
type="primary"
danger
:icon="h(CloseOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.WX_APP.code)"
/>
<div>
<Button
size="small"
v-if="isChannelExists(row.channelCodes, PayChannelEnum.WX_APP.code)"
type="primary"
:icon="h(CheckOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.WX_APP.code)"
/>
<Button
size="small"
v-else
type="primary"
danger
:icon="h(CloseOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.WX_APP.code)"
/>
</div>
</template>
<template #wxNativeConfig="{ row }">
<Button
v-if="
isChannelExists(row.channelCodes, PayChannelEnum.WX_NATIVE.code)
"
type="primary"
:icon="h(CheckOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.WX_NATIVE.code)"
/>
<Button
v-else
type="primary"
danger
:icon="h(CloseOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.WX_NATIVE.code)"
/>
<div>
<Button
size="small"
v-if="
isChannelExists(row.channelCodes, PayChannelEnum.WX_NATIVE.code)
"
type="primary"
:icon="h(CheckOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.WX_NATIVE.code)"
/>
<Button
size="small"
v-else
type="primary"
danger
:icon="h(CloseOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.WX_NATIVE.code)"
/>
</div>
</template>
<template #wxWapConfig="{ row }">
<Button
v-if="isChannelExists(row.channelCodes, PayChannelEnum.WX_WAP.code)"
type="primary"
:icon="h(CheckOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.WX_WAP.code)"
/>
<Button
v-else
type="primary"
danger
:icon="h(CloseOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.WX_WAP.code)"
/>
<div>
<Button
size="small"
v-if="isChannelExists(row.channelCodes, PayChannelEnum.WX_WAP.code)"
type="primary"
:icon="h(CheckOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.WX_WAP.code)"
/>
<Button
size="small"
v-else
type="primary"
danger
:icon="h(CloseOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.WX_WAP.code)"
/>
</div>
</template>
<template #wxBarConfig="{ row }">
<Button
v-if="isChannelExists(row.channelCodes, PayChannelEnum.WX_BAR.code)"
type="primary"
:icon="h(CheckOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.WX_BAR.code)"
/>
<Button
v-else
type="primary"
danger
:icon="h(CloseOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.WX_BAR.code)"
/>
<div>
<Button
size="small"
v-if="isChannelExists(row.channelCodes, PayChannelEnum.WX_BAR.code)"
type="primary"
:icon="h(CheckOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.WX_BAR.code)"
/>
<Button
size="small"
v-else
type="primary"
danger
:icon="h(CloseOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.WX_BAR.code)"
/>
</div>
</template>
<template #walletConfig="{ row }">
<Button
v-if="isChannelExists(row.channelCodes, PayChannelEnum.WALLET.code)"
type="primary"
:icon="h(CheckOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.WALLET.code)"
/>
<Button
v-else
type="primary"
danger
:icon="h(CloseOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.WALLET.code)"
/>
<div>
<Button
size="small"
v-if="isChannelExists(row.channelCodes, PayChannelEnum.WALLET.code)"
type="primary"
:icon="h(CheckOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.WALLET.code)"
/>
<Button
size="small"
v-else
type="primary"
danger
:icon="h(CloseOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.WALLET.code)"
/>
</div>
</template>
<template #mockConfig="{ row }">
<Button
v-if="isChannelExists(row.channelCodes, PayChannelEnum.MOCK.code)"
type="primary"
:icon="h(CheckOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.MOCK.code)"
/>
<Button
v-else
type="primary"
danger
:icon="h(CloseOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.MOCK.code)"
/>
<div>
<Button
size="small"
v-if="isChannelExists(row.channelCodes, PayChannelEnum.MOCK.code)"
type="primary"
:icon="h(CheckOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.MOCK.code)"
/>
<Button
size="small"
v-else
type="primary"
danger
:icon="h(CloseOutlined)"
shape="circle"
@click="openChannelForm(row, PayChannelEnum.MOCK.code)"
/>
</div>
</template>
</BasicTable>
<AppModal @reload="tableApi.query()" />
<AliPayModal @reload="tableApi.query()" />
<MockModal @reload="tableApi.query()" />
<WalletModal @reload="tableApi.query()" />
<WeixinModal @reload="tableApi.query()" />
</Page>
</template>

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

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

105
apps/web-antd/src/views/pay/app/modules/channel/MockChannelForm.vue Normal file
View File

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

105
apps/web-antd/src/views/pay/app/modules/channel/WalletChannelForm.vue Normal file
View File

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

148
apps/web-antd/src/views/pay/app/modules/channel/WeixinChannelForm.vue Normal file
View File

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

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

@ -4,7 +4,7 @@ import { DICT_TYPE, getDictOptions } from '#/utils/dict';
export const modalAliPaySchema: FormSchemaGetter = () => [
{
label: '应用编号',
label: '商户编号',
fieldName: 'id',
component: 'Input',
dependencies: {
@ -12,6 +12,24 @@ export const modalAliPaySchema: FormSchemaGetter = () => [
triggerFields: [''],
},
},
{
label: '应用编号',
fieldName: 'appId',
component: 'Input',
dependencies: {
show: () => false,
triggerFields: [''],
},
},
{
label: '渠道编码',
fieldName: 'code',
component: 'Input',
dependencies: {
show: () => false,
triggerFields: [''],
},
},
{
label: '渠道费率',
fieldName: 'feeRate',
@ -38,6 +56,7 @@ export const modalAliPaySchema: FormSchemaGetter = () => [
componentProps: {
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
},
defaultValue: 1,
},
{
label: '网关地址',
@ -202,3 +221,236 @@ export const modalAliPaySchema: FormSchemaGetter = () => [
},
},
];
export const modalMockSchema: FormSchemaGetter = () => [
{
label: '商户编号',
fieldName: 'id',
component: 'Input',
dependencies: {
show: () => false,
triggerFields: [''],
},
},
{
label: '应用编号',
fieldName: 'appId',
component: 'Input',
dependencies: {
show: () => false,
triggerFields: [''],
},
},
{
label: '渠道状态',
fieldName: 'status',
component: 'RadioGroup',
rules: 'required',
componentProps: {
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
},
defaultValue: 1,
},
{
label: '渠道编码',
fieldName: 'code',
component: 'Input',
dependencies: {
show: () => false,
triggerFields: [''],
},
},
{
label: '渠道费率',
fieldName: 'feeRate',
component: 'Input',
rules: 'required',
componentProps: {
placeholder: '请输入渠道费率',
},
dependencies: {
show: () => false,
triggerFields: [''],
},
},
{
label: '备注',
fieldName: 'remark',
component: 'Textarea',
componentProps: {
rows: 3,
placeholder: '请输入备注',
},
},
];
export const modalWeixinSchema: FormSchemaGetter = () => [
{
label: '商户编号',
fieldName: 'id',
component: 'Input',
dependencies: {
show: () => false,
triggerFields: [''],
},
},
{
label: '应用编号',
fieldName: 'appId',
component: 'Input',
dependencies: {
show: () => false,
triggerFields: [''],
},
},
{
label: '渠道编码',
fieldName: 'code',
component: 'Input',
dependencies: {
show: () => false,
triggerFields: [''],
},
},
{
label: '渠道费率',
fieldName: 'feeRate',
component: 'Input',
rules: 'required',
componentProps: {
placeholder: '请输入渠道费率',
},
},
{
label: '微信 APPID',
fieldName: 'config.appId',
component: 'Input',
rules: 'required',
componentProps: {
placeholder: '请输入微信 APPID',
},
},
{
label: '商户号',
fieldName: 'config.mchId',
component: 'Input',
rules: 'required',
componentProps: {
placeholder: '请输入商户号',
},
},
{
label: '渠道状态',
fieldName: 'status',
component: 'RadioGroup',
rules: 'required',
componentProps: {
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
},
defaultValue: 1,
},
{
label: 'API 版本',
fieldName: 'config.apiVersion',
component: 'RadioGroup',
rules: 'required',
componentProps: {
options: [
{
label: 'v2',
value: 'v2',
},
{
label: 'v3',
value: 'v3',
},
],
},
},
{
label: '商户密钥',
fieldName: 'config.mchKey',
component: 'Input',
rules: 'required',
componentProps: {
placeholder: '请输入商户密钥',
},
dependencies: {
show(values) {
return values?.config?.apiVersion === 'v2';
},
triggerFields: ['config.mode', 'mode', 'config'],
},
},
{
label: 'apiclient_cert.p12 证书',
fieldName: 'config.keyContent',
slotName: 'keyContent',
component: 'Input',
rules: 'required',
componentProps: {
placeholder: '请上传 apiclient_cert.p12 证书',
},
dependencies: {
show(values) {
return values?.config?.apiVersion === 'v2';
},
triggerFields: ['config.mode', 'mode', 'config'],
},
},
{
label: 'API V3 密钥',
fieldName: 'config.apiV3Key',
component: 'Input',
rules: 'required',
componentProps: {
placeholder: '请输入 API V3 密钥',
},
dependencies: {
show(values) {
return values?.config?.apiVersion === 'v3';
},
triggerFields: ['config.mode', 'mode', 'config'],
},
},
{
label: 'apiclient_key.pem 证书',
fieldName: 'config.privateKeyContent',
slotName: 'privateKeyContent',
component: 'Input',
rules: 'required',
componentProps: {
placeholder: '请上传 apiclient_key.pem 证书',
},
dependencies: {
show(values) {
return values?.config?.apiVersion === 'v3';
},
triggerFields: ['config.mode', 'mode', 'config'],
},
},
{
label: '证书序列号',
fieldName: 'config.certSerialNo',
component: 'Input',
rules: 'required',
componentProps: {
placeholder: '请输入证书序列号',
},
dependencies: {
show(values) {
return values?.config?.apiVersion === 'v3';
},
triggerFields: ['config.mode', 'mode', 'config'],
},
},
{
label: '备注',
fieldName: 'remark',
component: 'Textarea',
componentProps: {
rows: 3,
placeholder: '请输入备注',
},
},
];