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 12:19:04 +08:00
parent 8ab311b46f
commit 61e06cce09
14 changed files with 1130 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/web-antd/package.json
View File

@ -26,6 +26,7 @@
"#/*": "./src/*"
},
"dependencies": {
"@ant-design/icons-vue": "^7.0.1",
"@form-create/ant-design-vue": "catalog:",
"@form-create/antd-designer": "catalog:",
"@tinymce/tinymce-vue": "catalog:",

1
apps/web-antd/src/adapter/form.ts
View File

@ -68,3 +68,4 @@ export { useVbenForm, z };
export type VbenFormSchema = FormSchema<ComponentType>;
export type { VbenFormProps };
export type FormSchemaGetter = () => VbenFormSchema[];

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

223
apps/web-antd/src/views/pay/app/data.ts Normal file
View File

@ -0,0 +1,223 @@
import type { FormSchemaGetter } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
export const querySchema: FormSchemaGetter = () => [
{
component: 'Input',
fieldName: 'name',
label: '应用名',
componentProps: {
placeholder: '请输入应用名',
},
},
{
component: 'Select',
fieldName: 'status',
label: '开启状态',
componentProps: {
placeholder: '请选择开启状态',
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
},
},
{
component: 'RangePicker',
fieldName: 'createTime',
label: '创建时间',
componentProps: {
placeholder: ['开始日期', '结束日期'],
},
},
];
export const columns: VxeGridProps['columns'] = [
{ type: 'checkbox', width: 60 },
{
title: '应用标识',
field: 'appKey',
},
{
title: '应用名',
field: 'name',
},
{
title: '开启状态',
field: 'status',
slots: {
default: 'status',
},
},
{
title: '支付宝配置',
children: [
{
title: 'APP 支付',
slots: {
default: 'alipayAppConfig',
},
},
{
title: 'PC 网站支付',
slots: {
default: 'alipayPCConfig',
},
},
{
title: 'WAP 网站支付',
slots: {
default: 'alipayWAPConfig',
},
},
{
title: '扫码支付',
slots: {
default: 'alipayQrConfig',
},
},
{
title: '条码支付',
slots: {
default: 'alipayBarConfig',
},
},
],
},
{
title: '微信配置',
children: [
{
title: '小程序支付',
slots: {
default: 'wxLiteConfig',
},
},
{
title: 'JSAPI 支付',
slots: {
default: 'wxPubConfig',
},
},
{
title: 'APP 支付',
slots: {
default: 'wxAppConfig',
},
},
{
title: 'Native 支付',
slots: {
default: 'wxNativeConfig',
},
},
{
title: 'WAP 网站支付',
slots: {
default: 'wxWapConfig',
},
},
{
title: '条码支付',
slots: {
default: 'wxBarConfig',
},
},
],
},
{
title: '钱包支付配置',
field: 'walletConfig',
slots: {
default: 'walletConfig',
},
},
{
title: '模拟支付配置',
field: 'mockConfig',
slots: {
default: 'mockConfig',
},
},
{
field: 'action',
fixed: 'right',
slots: { default: 'action' },
title: '操作',
width: 250,
},
];
export const modalSchema: FormSchemaGetter = () => [
{
label: '应用编号',
fieldName: 'id',
component: 'Input',
dependencies: {
show: () => false,
triggerFields: [''],
},
},
{
label: '应用名',
fieldName: 'name',
component: 'Input',
rules: 'required',
componentProps: {
placeholder: '请输入应用名',
},
},
{
label: '应用标识',
fieldName: 'appKey',
component: 'Input',
rules: 'required',
componentProps: {
placeholder: '请输入应用标识',
},
},
{
label: '开启状态',
fieldName: 'status',
component: 'RadioGroup',
rules: 'required',
componentProps: {
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
},
},
{
label: '支付结果的回调地址',
fieldName: 'orderNotifyUrl',
component: 'Input',
rules: 'required',
componentProps: {
placeholder: '请输入支付结果的回调地址',
},
},
{
label: '退款结果的回调地址',
fieldName: 'refundNotifyUrl',
component: 'Input',
rules: 'required',
componentProps: {
placeholder: '请输入支付结果的回调地址',
},
},
{
label: '转账结果的回调地址',
fieldName: 'transferNotifyUrl',
component: 'Input',
rules: 'required',
componentProps: {
placeholder: '请输入转账结果的回调地址',
},
},
{
label: '备注',
fieldName: 'remark',
component: 'Textarea',
componentProps: {
rows: 3,
placeholder: '请输入备注',
},
},
];

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

@ -1,31 +1,419 @@
<script lang="ts" setup>
import { Page } from '@vben/common-ui';
import type { VbenFormProps } from '@vben/common-ui';
import { Button } from 'ant-design-vue';
import type { VxeGridProps } from '#/adapter/vxe-table';
import { h, reactive } from 'vue';
import { Page, useVbenModal } from '@vben/common-ui';
import { getVxePopupContainer } from '@vben/utils';
import { CheckOutlined, CloseOutlined } from '@ant-design/icons-vue';
import { Button, Popconfirm, Space, Switch } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import * as PayApi from '#/api/pay/app';
import { DocAlert } from '#/components/doc-alert';
import { PayChannelEnum } from '#/utils/constants';
import { columns, querySchema } from './data';
import appFrom from './modules/app-form.vue';
import aliPayFrom from './modules/channel/AlipayChannelForm.vue';
const formOptions: VbenFormProps = {
commonConfig: {
labelWidth: 100,
componentProps: {
allowClear: true,
},
},
schema: querySchema(),
wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
// 处理区间选择器RangePicker时间格式 将一个字段映射为两个字段 搜索/导出会用到
// 不需要直接删除
// fieldMappingTime: [
// [
// 'createTime',
// ['params[beginTime]', 'params[endTime]'],
// ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
// ],
// ],
};
const gridOptions: VxeGridProps = {
checkboxConfig: {
// 高亮
highlight: true,
// 翻页时保留选中状态
reserve: true,
// 点击行选中
// trigger: 'row',
},
columns,
height: 'auto',
keepSource: true,
pagerConfig: {},
proxyConfig: {
ajax: {
query: async ({ page }, formValues = {}) => {
return await PayApi.getAppPage({
pageNum: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
},
},
},
rowConfig: {
keyField: 'id',
},
// 表格全局唯一表示 保存列配置需要用到
id: 'system-notifyMessage-index',
};
const [BasicTable, tableApi] = useVbenVxeGrid({
formOptions,
gridOptions,
});
const [AppModal, modalApi] = useVbenModal({
connectedComponent: appFrom,
});
const [AliPayModal, modalAliPayApi] = useVbenModal({
connectedComponent: aliPayFrom,
});
const handleAdd = () => {
modalApi.setData({});
modalApi.open();
};
const handleEdit = (row: Required<PayApi.PayAppApi.App>) => {
modalApi.setData({ id: row.id });
modalApi.open();
};
const handleDelete = async (row: Required<PayApi.PayAppApi.App>) => {
await PayApi.deleteApp(row.id);
tableApi.query();
};
/**
* 根据渠道编码判断渠道列表中是否存在
*
* @param channels 渠道列表
* @param channelCode 渠道编码
*/
const isChannelExists = (channels: string[], channelCode: string) => {
if (!channels) {
return false;
}
return channels.includes(channelCode);
};
const channelParam = reactive({
appId: 0, // 应用 ID
payCode: '', // 渠道编码
});
const openChannelForm = async (row: PayApi.PayAppApi.App, payCode: string) => {
channelParam.appId = row.id || 0;
channelParam.payCode = payCode;
if (payCode.indexOf('alipay_') === 0) {
modalAliPayApi.setData({ id: row.id, payCode });
modalAliPayApi.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>
<template>
<Page>
<Page :auto-content-height="true">
<DocAlert title="支付功能开启" url="https://doc.iocoder.cn/pay/build/" />
<Button
danger
type="link"
target="_blank"
href="https://github.com/yudaocode/yudao-ui-admin-vue3"
>
该功能支持 Vue3 + element-plus 版本！
</Button>
<br />
<Button
type="link"
target="_blank"
href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/pay/app/index"
>
可参考
https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/pay/app/index
代码，pull request 贡献给我们！
</Button>
<BasicTable>
<template #toolbar-tools>
<Space>
<a-button
type="primary"
v-access:code="['pay:app:create']"
@click="handleAdd"
>
{{ $t('ui.actionTitle.create', ['应用']) }}
</a-button>
</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>
</template>
<template #status="{ row }">
<Switch
v-model:checked="row.status"
:checked-value="0"
:un-checked-value="1"
/>
</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)"
/>
</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)"
/>
</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)"
/>
</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)"
/>
</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)"
/>
</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)"
/>
</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)"
/>
</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)"
/>
</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)"
/>
</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)"
/>
</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)"
/>
</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)"
/>
</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)"
/>
</template>
</BasicTable>
<AppModal @reload="tableApi.query()" />
<AliPayModal @reload="tableApi.query()" />
</Page>
</template>

90
apps/web-antd/src/views/pay/app/modules/app-form.vue Normal file
View File

@ -0,0 +1,90 @@
<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 PayApi from '#/api/pay/app';
import { modalSchema } 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: modalSchema(),
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 } = modalApi.getData() as {
id?: number;
};
isUpdate.value = !!id;
if (isUpdate.value && id) {
const record = await PayApi.getApp(id);
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 PayApi.PayAppApi.App;
await (isUpdate.value ? PayApi.updateApp(data) : PayApi.createApp(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>

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

@ -0,0 +1,139 @@
<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 PayApi from '#/api/pay/app';
import { FileUpload } from '#/components/upload';
import { modalAliPaySchema } 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: modalAliPaySchema(),
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 } = modalApi.getData() as {
id?: number;
};
isUpdate.value = !!id;
if (isUpdate.value && id) {
const record = await PayApi.getApp(id);
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 PayApi.PayAppApi.App;
await (isUpdate.value ? PayApi.updateApp(data) : PayApi.createApp(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 #appCertContent="slotProps">
<Space style="width: 100%" direction="vertical">
<Row>
<Textarea
v-bind="slotProps"
:rows="8"
placeholder="请上传商户公钥应用证书"
/>
</Row>
<Row>
<FileUpload
:accept="['crt']"
@get-text="
(text: string) => {
slotProps.setValue(text);
}
"
/>
</Row>
</Space>
</template>
<template #alipayPublicCertContent="slotProps">
<Space style="width: 100%" direction="vertical">
<Row>
<Textarea
v-bind="slotProps"
:rows="8"
placeholder="请上传支付宝公钥证书"
/>
</Row>
<Row>
<FileUpload :accept="['.crt']" />
</Row>
</Space>
</template>
<template #rootCertContent="slotProps">
<Space style="width: 100%" direction="vertical">
<Row>
<Textarea v-bind="slotProps" :rows="8" placeholder="请上传根证书" />
</Row>
<Row>
<FileUpload :accept="['.crt']" />
</Row>
</Space>
</template>
</BasicForm>
</BasicModal>
</template>

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

@ -0,0 +1,204 @@
import type { FormSchemaGetter } from '#/adapter/form';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
export const modalAliPaySchema: FormSchemaGetter = () => [
{
label: '应用编号',
fieldName: 'id',
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: 'status',
component: 'RadioGroup',
rules: 'required',
componentProps: {
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
},
},
{
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: 0,
label: '公钥模式',
},
{
value: 1,
label: '证书模式',
},
],
},
},
{
label: '应用私钥',
fieldName: 'config.privateKey',
component: 'Textarea',
rules: 'required',
componentProps: {
placeholder: '请输入应用私钥',
rows: 8,
},
dependencies: {
show(values) {
return values.config.mode !== undefined;
},
triggerFields: ['config'],
},
},
{
label: '支付宝公钥',
fieldName: 'config.alipayPublicKey',
component: 'Textarea',
rules: 'required',
componentProps: {
placeholder: '请输入支付宝公钥',
rows: 8,
},
dependencies: {
show(values) {
return values?.config?.mode === 0;
},
triggerFields: ['config.mode', 'mode', 'config'],
},
},
{
label: '商户公钥应用证书',
fieldName: 'config.appCertContent',
slotName: 'appCertContent',
component: 'Textarea',
rules: 'required',
componentProps: {
placeholder: '请上传商户公钥应用证书',
rows: 8,
},
dependencies: {
show(values) {
return values?.config?.mode === 1;
},
triggerFields: ['config.mode', 'mode', 'config'],
},
},
{
label: '支付宝公钥证书',
fieldName: 'config.alipayPublicCertContent',
slotName: 'alipayPublicCertContent',
component: 'Textarea',
rules: 'required',
componentProps: {
placeholder: '请上传支付宝公钥证书',
rows: 8,
},
dependencies: {
show(values) {
return values?.config?.mode === 1;
},
triggerFields: ['config.mode', 'mode', 'config'],
},
},
{
label: '根证书',
fieldName: 'config.rootCertContent',
slotName: 'rootCertContent',
component: 'Textarea',
rules: 'required',
componentProps: {
placeholder: '请上传根证书',
rows: 8,
},
dependencies: {
show(values) {
return values?.config?.mode === 1;
},
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: 'remark',
component: 'Textarea',
componentProps: {
rows: 3,
placeholder: '请输入备注',
},
},
];

12
docs/src/components/common-ui/vben-form.md
View File

@ -557,4 +557,16 @@ import { z } from '#/adapter/form';
除了以上内置插槽之外，`schema`属性中每个字段的`fieldName`都可以作为插槽名称，这些字段插槽的优先级高于`component`定义的组件。也就是说，当提供了与`fieldName`同名的插槽时，这些插槽的内容将会作为这些字段的组件，此时`component`的值将会被忽略。
如果需要使用自定义的插槽名而不是使用`fieldName`，可以在schema中添加`slotName`属性。当提供了`slotName`属性时，将优先使用`slotName`作为插槽名。
```ts
// 使用自定义插槽名的例子
{
component: 'Textarea',
fieldName: 'config.appCertContent',
slotName: 'appCertSlot',
label: '商户公钥应用证书',
}
```
:::

6
packages/@core/ui-kit/form-ui/src/form-render/form.vue
View File

@ -155,7 +155,11 @@ const computedSchema = computed(
:rules="cSchema.rules"
>
<template #default="slotProps">
<slot v-bind="slotProps" :name="cSchema.fieldName"> </slot>
<slot
v-bind="slotProps"
:name="cSchema.slotName || cSchema.fieldName"
>
</slot>
</template>
</FormField>
</template>

2
packages/@core/ui-kit/form-ui/src/types.ts
View File

@ -263,6 +263,8 @@ export interface FormSchema<
renderComponentContent?: RenderComponentContentType;
/** 字段规则 */
rules?: FormSchemaRuleType;
/** 自定义插槽名，如果不指定则使用fieldName */
slotName?: string;
/** 后缀 */
suffix?: CustomRenderType;
}

8
packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts
View File

@ -124,6 +124,14 @@ export class ModalApi {
return this.setState({ submitting: isLocked });
}
modalLoading(loading: boolean) {
this.store.setState((prev) => ({
...prev,
confirmLoading: loading,
loading,
}));
}
/**
* 取消操作
*/

28
packages/utils/src/helpers/get-popup-container.ts
View File

@ -8,3 +8,31 @@ export function getPopupContainer(node?: HTMLElement): HTMLElement {
node?.closest('form') ?? (node?.parentNode as HTMLElement) ?? document.body
);
}
/**
* VxeTable专用弹窗层
* 解决问题: https://gitee.com/dapppp/ruoyi-plus-vben5/issues/IB1DM3
* 单表格用法跟上面getPopupContainer一样
* 一个页面(body下)有多个表格元素 必须先指定ID & ID参数传入该函数
* <BasicTable id="xxx" />
* getVxePopupContainer="(node) => getVxePopupContainer(node, 'xxx')"
* @param _node 触发的元素
* @param id 表格唯一id 当页面(该窗口)有>=两个表格 必须提供ID
* @returns 挂载节点
*/
export function getVxePopupContainer(
_node?: HTMLElement,
id?: string,
): HTMLElement {
let selector = 'div.vxe-table--body-wrapper.body--wrapper';
if (id) {
selector = `div#${id} ${selector}`;
}
// 挂载到vxe-table的滚动区域
const vxeTableContainerNode = document.querySelector(selector);
if (!vxeTableContainerNode) {
console.warn('无法找到vxe-table元素, 将会挂载到body.');
return document.body;
}
return vxeTableContainerNode as HTMLElement;
}

3
pnpm-lock.yaml
View File

@ -677,6 +677,9 @@ importers:
apps/web-antd:
dependencies:
'@ant-design/icons-vue':
specifier: ^7.0.1
version: 7.0.1(vue@3.5.13(typescript@5.8.3))
'@form-create/ant-design-vue':
specifier: 'catalog:'
version: 3.2.22(vue@3.5.13(typescript@5.8.3))