aiotagro/admin-vben
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'yudao/dev' into dev

Browse Source
This commit is contained in:
jason
2025-05-26 16:44:20 +08:00
parent 11f32258e6 67af898baf
commit ef93c9824a
96 changed files with 5288 additions and 550 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -26,6 +26,7 @@
"#/*": "./src/*"
},
"dependencies": {
"@ant-design/icons-vue": "catalog:",
"@form-create/ant-design-vue": "catalog:",
"@form-create/antd-designer": "catalog:",
"@tinymce/tinymce-vue": "catalog:",
@@ -53,7 +54,8 @@
"pinia": "catalog:",
"vue": "catalog:",
"vue-dompurify-html": "catalog:",
"vue-router": "catalog:"
"vue-router": "catalog:",
"vue3-signature": "catalog:"
},
"devDependencies": {
"@types/crypto-js": "catalog:"

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

@@ -8,63 +8,64 @@ import type { ComponentType } from './component';
import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui';
import { $t } from '@vben/locales';
/** 手机号正则表达式（中国） */
const MOBILE_REGEX = /(?:0|86|\+86)?1[3-9]\d{9}/;
setupVbenForm<ComponentType>({
config: {
// ant design vue组件库默认都是 v-model:value
baseModelPropName: 'value',
async function initSetupVbenForm() {
setupVbenForm<ComponentType>({
config: {
// ant design vue组件库默认都是 v-model:value
baseModelPropName: 'value',
// 一些组件是 v-model:checked 或者 v-model:fileList
modelPropNameMap: {
Checkbox: 'checked',
Radio: 'checked',
RichTextarea: 'modelValue',
Switch: 'checked',
Upload: 'fileList',
// 一些组件是 v-model:checked 或者 v-model:fileList
modelPropNameMap: {
Checkbox: 'checked',
Radio: 'checked',
Switch: 'checked',
Upload: 'fileList',
},
},
},
defineRules: {
// 输入项目必填国际化适配
required: (value, _params, ctx) => {
if (value === undefined || value === null || value.length === 0) {
return $t('ui.formRules.required', [ctx.label]);
}
return true;
},
// 选择项目必填国际化适配
selectRequired: (value, _params, ctx) => {
if (value === undefined || value === null) {
return $t('ui.formRules.selectRequired', [ctx.label]);
}
return true;
},
// 手机号非必填
mobile: (value, _params, ctx) => {
if (value === undefined || value === null || value.length === 0) {
defineRules: {
// 输入项目必填国际化适配
required: (value, _params, ctx) => {
if (value === undefined || value === null || value.length === 0) {
return $t('ui.formRules.required', [ctx.label]);
}
return true;
} else if (!MOBILE_REGEX.test(value)) {
return $t('ui.formRules.mobile', [ctx.label]);
}
return true;
},
// 选择项目必填国际化适配
selectRequired: (value, _params, ctx) => {
if (value === undefined || value === null) {
return $t('ui.formRules.selectRequired', [ctx.label]);
}
return true;
},
// 手机号非必填
mobile: (value, _params, ctx) => {
if (value === undefined || value === null || value.length === 0) {
return true;
} else if (!MOBILE_REGEX.test(value)) {
return $t('ui.formRules.mobile', [ctx.label]);
}
return true;
},
// 手机号必填
mobileRequired: (value, _params, ctx) => {
if (value === undefined || value === null || value.length === 0) {
return $t('ui.formRules.required', [ctx.label]);
}
if (!MOBILE_REGEX.test(value)) {
return $t('ui.formRules.mobile', [ctx.label]);
}
return true;
},
},
// 手机号必填
mobileRequired: (value, _params, ctx) => {
if (value === undefined || value === null || value.length === 0) {
return $t('ui.formRules.required', [ctx.label]);
}
if (!MOBILE_REGEX.test(value)) {
return $t('ui.formRules.mobile', [ctx.label]);
}
return true;
},
},
});
});
}
const useVbenForm = useForm<ComponentType>;
export { useVbenForm, z };
export { initSetupVbenForm, useVbenForm, z };
export type VbenFormSchema = FormSchema<ComponentType>;
export type { VbenFormProps };
export type FormSchemaGetter = () => VbenFormSchema[];

12
apps/web-antd/src/api/bpm/definition/index.ts
View File

@@ -4,6 +4,7 @@ import { requestClient } from '#/api/request';
/** 流程定义 */
export namespace BpmProcessDefinitionApi {
// 流程定义
export interface ProcessDefinitionVO {
id: string;
version: number;
@@ -36,11 +37,12 @@ export async function getProcessDefinitionPage(params: PageParam) {
/** 查询流程定义列表 */
export async function getProcessDefinitionList(params: any) {
return requestClient.get<
PageResult<BpmProcessDefinitionApi.ProcessDefinitionVO>
>('/bpm/process-definition/list', {
params,
});
return requestClient.get<BpmProcessDefinitionApi.ProcessDefinitionVO[]>(
'/bpm/process-definition/list',
{
params,
},
);
}
/** 查询流程定义列表（简单列表） */

6
apps/web-antd/src/api/bpm/form/index.ts
View File

@@ -3,7 +3,7 @@ import type { PageParam, PageResult } from '@vben/request';
import { requestClient } from '#/api/request';
export namespace BpmFormApi {
// TODO @siye：注释加一个。。嘿嘿
// 流程表单
export interface FormVO {
id?: number | undefined;
name: string;
@@ -11,7 +11,7 @@ export namespace BpmFormApi {
fields: string[];
status: number;
remark: string;
createTime: string;
createTime: number;
}
}
@@ -23,7 +23,7 @@ export async function getFormPage(params: PageParam) {
}
/** 获取表单详情 */
export async function getFormDetail(id: number) {
export async function getFormDetail(id: number | string) {
return requestClient.get<BpmFormApi.FormVO>(`/bpm/form/get?id=${id}`);
}

1
apps/web-antd/src/api/bpm/model/index.ts
View File

@@ -14,6 +14,7 @@ export namespace BpmModelApi {
/** 流程定义 VO */
export interface ProcessDefinitionVO {
id: string;
key?: string;
version: number;
deploymentTime: number;
suspensionState: number;

30
apps/web-antd/src/api/bpm/processInstance/index.ts
View File

@@ -1,5 +1,7 @@
import type { PageParam, PageResult } from '@vben/request';
import type { BpmTaskApi } from '../task';
import type { BpmModelApi } from '#/api/bpm/model';
import type { BpmCandidateStrategyEnum, BpmNodeTypeEnum } from '#/utils';
@@ -40,6 +42,7 @@ export namespace BpmProcessInstanceApi {
tasks: ApprovalTaskInfo[];
};
// 流程实例
export type ProcessInstanceVO = {
businessKey: string;
category: string;
@@ -59,12 +62,33 @@ export namespace BpmProcessInstanceApi {
tasks?: BpmProcessInstanceApi.Task[];
};
// 审批详情
export type ApprovalDetail = {
activityNodes: BpmProcessInstanceApi.ApprovalNodeInfo[];
formFieldsPermission: any;
processDefinition: BpmModelApi.ProcessDefinitionVO;
processInstance: BpmProcessInstanceApi.ProcessInstanceVO;
status: number;
todoTask: BpmTaskApi.TaskVO;
};
// 抄送流程实例 VO
export type CopyVO = {
activityId: string;
activityName: string;
createTime: number;
createUser: User;
id: number;
processInstanceId: string;
processInstanceName: string;
processInstanceStartTime: number;
reason: string;
startUser: User;
summary: {
key: string;
value: string;
}[];
taskId: string;
};
}
@@ -85,9 +109,7 @@ export async function getProcessInstanceManagerPage(params: PageParam) {
}
/** 新增流程实例 */
export async function createProcessInstance(
data: BpmProcessInstanceApi.ProcessInstanceVO,
) {
export async function createProcessInstance(data: any) {
return requestClient.post<BpmProcessInstanceApi.ProcessInstanceVO>(
'/bpm/process-instance/create',
data,
@@ -152,7 +174,7 @@ export async function getApprovalDetail(params: any) {
/** 获取下一个执行的流程节点 */
export async function getNextApprovalNodes(params: any) {
return requestClient.get<BpmProcessInstanceApi.ProcessInstanceVO>(
return requestClient.get<BpmProcessInstanceApi.ApprovalNodeInfo[]>(
`/bpm/process-instance/get-next-approval-nodes`,
{ params },
);

40
apps/web-antd/src/api/bpm/task/index.ts
View File

@@ -1,5 +1,7 @@
import type { PageParam, PageResult } from '@vben/request';
import type { BpmProcessInstanceApi } from '../processInstance';
import { requestClient } from '#/api/request';
export namespace BpmTaskApi {
@@ -11,7 +13,33 @@ export namespace BpmTaskApi {
status: number; // 监听器状态
event: string; // 监听事件
valueType: string; // 监听器值类型
value: string; // 监听器值
}
// 流程任务 VO
export interface TaskManagerVO {
id: string; // 编号
name: string; // 任务名称
createTime: number; // 创建时间
endTime: number; // 结束时间
durationInMillis: number; // 持续时间
status: number; // 状态
reason: string; // 原因
ownerUser: any; // 负责人
assigneeUser: any; // 处理人
taskDefinitionKey: string; // 任务定义key
processInstanceId: string; // 流程实例id
processInstance: BpmProcessInstanceApi.ProcessInstanceVO; // 流程实例
parentTaskId: any; // 父任务id
children: any; // 子任务
formId: any; // 表单id
formName: any; // 表单名称
formConf: any; // 表单配置
formFields: any; // 表单字段
formVariables: any; // 表单变量
buttonsSetting: any; // 按钮设置
signEnable: any; // 签名设置
reasonRequire: any; // 原因设置
nodeType: any; // 节点类型
}
}
@@ -54,13 +82,15 @@ export const rejectTask = async (data: any) => {
};
/** 根据流程实例 ID 查询任务列表 */
export const getTaskListByProcessInstanceId = async (data: any) => {
return await requestClient.get('/bpm/task/list-by-process-instance-id', data);
export const getTaskListByProcessInstanceId = async (id: string) => {
return await requestClient.get(
`/bpm/task/list-by-process-instance-id?processInstanceId=${id}`,
);
};
/** 获取所有可退回的节点 */
export const getTaskListByReturn = async (data: any) => {
return await requestClient.get('/bpm/task/list-by-return', data);
export const getTaskListByReturn = async (id: string) => {
return await requestClient.get(`/bpm/task/list-by-return?id=${id}`);
};
/** 退回 */

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

7
apps/web-antd/src/api/pay/order/index.ts
View File

@@ -6,8 +6,13 @@ export namespace PayOrderApi {
/** 支付订单信息 */
export interface Order {
id: number;
no: string;
price: number;
channelFeePrice: number;
refundPrice: number;
merchantId: number;
appId: number;
appName: string;
channelId: number;
channelCode: string;
merchantOrderId: string;
@@ -29,7 +34,9 @@ export namespace PayOrderApi {
refundAmount: number;
channelUserId: string;
channelOrderNo: string;
channelNotifyData: string;
createTime: Date;
updateTime: Date;
}
/** 支付订单分页请求 */

4
apps/web-antd/src/bootstrap.ts
View File

@@ -14,6 +14,7 @@ import { $t, setupI18n } from '#/locales';
import { setupFormCreate } from '#/plugins/form-create';
import { initComponentAdapter } from './adapter/component';
import { initSetupVbenForm } from './adapter/form';
import App from './app.vue';
import { router } from './router';
@@ -21,6 +22,9 @@ async function bootstrap(namespace: string) {
// 初始化组件适配器
await initComponentAdapter();
// 初始化表单组件
await initSetupVbenForm();
// // 设置弹窗的默认配置
// setDefaultModalProps({
// fullscreenButton: false,

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

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

18
apps/web-antd/src/components/user-select-modal/user-select-modal.vue
View File

@@ -30,6 +30,7 @@ interface DeptTreeNode {
key: string;
title: string;
children?: DeptTreeNode[];
name: string;
}
defineOptions({ name: 'UserSelectModal' });
@@ -107,22 +108,26 @@ const transferDataSource = computed(() => {
const filteredDeptTree = computed(() => {
if (!deptSearchKeys.value) return deptTree.value;
const filterNode = (node: any): any => {
const title = node?.title?.toLowerCase();
const filterNode = (node: any, depth = 0): any => {
// 添加深度限制，防止过深的递归导致爆栈
if (depth > 100) return null;
// 按部门名称搜索
const name = node?.name?.toLowerCase();
const search = deptSearchKeys.value.toLowerCase();
// 如果当前节点匹配
if (title.includes(search)) {
// 如果当前节点匹配，直接返回节点，不处理子节点
if (name?.includes(search)) {
return {
...node,
children: node.children?.map((child: any) => filterNode(child)),
children: node.children,
};
}
// 如果当前节点不匹配，检查子节点
if (node.children) {
const filteredChildren = node.children
.map((child: any) => filterNode(child))
.map((child: any) => filterNode(child, depth + 1))
.filter(Boolean);
if (filteredChildren.length > 0) {
@@ -397,6 +402,7 @@ const processDeptNode = (node: any): DeptTreeNode => {
return {
key: String(node.id),
title: `${node.name} (${node.id})`,
name: node.name,
children: node.children?.map((child: any) => processDeptNode(child)),
};
};

2
apps/web-antd/src/router/routes/modules/bpm.ts
View File

@@ -49,7 +49,7 @@ const routes: RouteRecordRaw[] = [
{
path: '/bpm/manager/form/edit',
name: 'BpmFormEditor',
component: () => import('#/views/bpm/form/editor.vue'),
component: () => import('#/views/bpm/form/designer/index.vue'),
meta: {
title: '编辑流程表单',
activePath: '/bpm/manager/form',

106
apps/web-antd/src/utils/constants.ts
View File

@@ -441,30 +441,6 @@ export const ErpBizType = {
// ========== BPM 模块 ==========
export const BpmModelType = {
BPMN: 10, // BPMN 设计器
SIMPLE: 20, // 简易设计器
};
export const BpmModelFormType = {
NORMAL: 10, // 流程表单
CUSTOM: 20, // 业务表单
};
export const BpmProcessInstanceStatus = {
NOT_START: -1, // 未开始
RUNNING: 1, // 审批中
APPROVE: 2, // 审批通过
REJECT: 3, // 审批不通过
CANCEL: 4, // 已取消
};
export const BpmAutoApproveType = {
NONE: 0, // 不自动通过
APPROVE_ALL: 1, // 仅审批一次，后续重复的审批节点均自动通过
APPROVE_SEQUENT: 2, // 仅针对连续审批的节点自动通过
};
// 候选人策略枚举 （ 用于审批节点。抄送节点 )
export enum BpmCandidateStrategyEnum {
/**
@@ -594,6 +570,40 @@ export enum BpmNodeTypeEnum {
USER_TASK_NODE = 11,
}
/**
* 流程任务操作按钮
*/
export enum BpmTaskOperationButtonTypeEnum {
/**
* 加签
*/
ADD_SIGN = 5,
/**
* 通过
*/
APPROVE = 1,
/**
* 抄送
*/
COPY = 7,
/**
* 委派
*/
DELEGATE = 4,
/**
* 拒绝
*/
REJECT = 2,
/**
* 退回
*/
RETURN = 6,
/**
* 转办
*/
TRANSFER = 3,
}
/**
* 任务状态枚举
*/
@@ -667,3 +677,51 @@ export enum BpmFieldPermissionType {
*/
WRITE = '2',
}
/**
* 流程模型类型
*/
export const BpmModelType = {
BPMN: 10, // BPMN 设计器
SIMPLE: 20, // 简易设计器
};
/**
* 流程模型表单类型
*/
export const BpmModelFormType = {
NORMAL: 10, // 流程表单
CUSTOM: 20, // 业务表单
};
/**
* 流程实例状态
*/
export const BpmProcessInstanceStatus = {
NOT_START: -1, // 未开始
RUNNING: 1, // 审批中
APPROVE: 2, // 审批通过
REJECT: 3, // 审批不通过
CANCEL: 4, // 已取消
};
/**
* 自动审批类型
*/
export const BpmAutoApproveType = {
NONE: 0, // 不自动通过
APPROVE_ALL: 1, // 仅审批一次，后续重复的审批节点均自动通过
APPROVE_SEQUENT: 2, // 仅针对连续审批的节点自动通过
};
/**
* 审批操作按钮名称
*/
export const OPERATION_BUTTON_NAME = new Map<number, string>();
OPERATION_BUTTON_NAME.set(BpmTaskOperationButtonTypeEnum.APPROVE, '通过');
OPERATION_BUTTON_NAME.set(BpmTaskOperationButtonTypeEnum.REJECT, '拒绝');
OPERATION_BUTTON_NAME.set(BpmTaskOperationButtonTypeEnum.TRANSFER, '转办');
OPERATION_BUTTON_NAME.set(BpmTaskOperationButtonTypeEnum.DELEGATE, '委派');
OPERATION_BUTTON_NAME.set(BpmTaskOperationButtonTypeEnum.ADD_SIGN, '加签');
OPERATION_BUTTON_NAME.set(BpmTaskOperationButtonTypeEnum.RETURN, '退回');
OPERATION_BUTTON_NAME.set(BpmTaskOperationButtonTypeEnum.COPY, '抄送');

214
apps/web-antd/src/utils/download.ts Normal file
View File

@@ -0,0 +1,214 @@
/**
* 下载工具模块
* 提供多种文件格式的下载功能
*/
/**
* 图片下载配置接口
*/
interface ImageDownloadOptions {
/** 图片 URL */
url: string;
/** 指定画布宽度 */
canvasWidth?: number;
/** 指定画布高度 */
canvasHeight?: number;
/** 将图片绘制在画布上时带上图片的宽高值，默认为 true */
drawWithImageSize?: boolean;
}
/**
* 基础文件下载函数
* @param data - 文件数据 Blob
* @param fileName - 文件名
* @param mimeType - MIME 类型
*/
export const download0 = (data: Blob, fileName: string, mimeType: string) => {
try {
// 创建 blob
const blob = new Blob([data], { type: mimeType });
// 创建 href 超链接，点击进行下载
window.URL = window.URL || window.webkitURL;
const href = URL.createObjectURL(blob);
const downA = document.createElement('a');
downA.href = href;
downA.download = fileName;
downA.click();
// 销毁超链接
window.URL.revokeObjectURL(href);
} catch (error) {
console.error('文件下载失败:', error);
throw new Error(
`文件下载失败: ${error instanceof Error ? error.message : '未知错误'}`,
);
}
};
/**
* 触发文件下载的通用方法
* @param url - 下载链接
* @param fileName - 文件名
*/
const triggerDownload = (url: string, fileName: string) => {
const a = document.createElement('a');
a.href = url;
a.download = fileName;
a.click();
};
export const download = {
/**
* 下载 Excel 文件
* @param data - 文件数据 Blob
* @param fileName - 文件名
*/
excel: (data: Blob, fileName: string) => {
download0(data, fileName, 'application/vnd.ms-excel');
},
/**
* 下载 Word 文件
* @param data - 文件数据 Blob
* @param fileName - 文件名
*/
word: (data: Blob, fileName: string) => {
download0(data, fileName, 'application/msword');
},
/**
* 下载 Zip 文件
* @param data - 文件数据 Blob
* @param fileName - 文件名
*/
zip: (data: Blob, fileName: string) => {
download0(data, fileName, 'application/zip');
},
/**
* 下载 HTML 文件
* @param data - 文件数据 Blob
* @param fileName - 文件名
*/
html: (data: Blob, fileName: string) => {
download0(data, fileName, 'text/html');
},
/**
* 下载 Markdown 文件
* @param data - 文件数据 Blob
* @param fileName - 文件名
*/
markdown: (data: Blob, fileName: string) => {
download0(data, fileName, 'text/markdown');
},
/**
* 下载 JSON 文件
* @param data - 文件数据 Blob
* @param fileName - 文件名
*/
json: (data: Blob, fileName: string) => {
download0(data, fileName, 'application/json');
},
/**
* 下载图片（允许跨域）
* @param options - 图片下载配置
*/
image: (options: ImageDownloadOptions) => {
const {
url,
canvasWidth,
canvasHeight,
drawWithImageSize = true,
} = options;
const image = new Image();
// image.setAttribute('crossOrigin', 'anonymous')
image.src = url;
image.addEventListener('load', () => {
try {
const canvas = document.createElement('canvas');
canvas.width = canvasWidth || image.width;
canvas.height = canvasHeight || image.height;
const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
ctx?.clearRect(0, 0, canvas.width, canvas.height);
if (drawWithImageSize) {
ctx.drawImage(image, 0, 0, image.width, image.height);
} else {
ctx.drawImage(image, 0, 0);
}
const dataUrl = canvas.toDataURL('image/png');
triggerDownload(dataUrl, 'image.png');
} catch (error) {
console.error('图片下载失败:', error);
throw new Error(
`图片下载失败: ${error instanceof Error ? error.message : '未知错误'}`,
);
}
});
image.addEventListener('error', () => {
throw new Error('图片加载失败');
});
},
/**
* 将 Base64 字符串转换为文件对象
* @param base64 - Base64 字符串
* @param fileName - 文件名
* @returns File 对象
*/
base64ToFile: (base64: string, fileName: string): File => {
// 输入验证
if (!base64 || typeof base64 !== 'string') {
throw new Error('base64 参数必须是非空字符串');
}
// 将 base64 按照逗号进行分割，将前缀与后续内容分隔开
const data = base64.split(',');
if (data.length !== 2 || !data[0] || !data[1]) {
throw new Error('无效的 base64 格式');
}
// 利用正则表达式从前缀中获取类型信息（image/png、image/jpeg、image/webp等）
const typeMatch = data[0].match(/:(.*?);/);
if (!typeMatch || !typeMatch[1]) {
throw new Error('无法解析 base64 类型信息');
}
const type = typeMatch[1];
// 从类型信息中获取具体的文件格式后缀（png、jpeg、webp）
const typeParts = type.split('/');
if (typeParts.length !== 2 || !typeParts[1]) {
throw new Error('无效的 MIME 类型格式');
}
const suffix = typeParts[1];
try {
// 使用 atob() 对 base64 数据进行解码，结果是一个文件数据流以字符串的格式输出
const bstr = window.atob(data[1]);
// 获取解码结果字符串的长度
const n = bstr.length;
// 根据解码结果字符串的长度创建一个等长的整型数字数组
const u8arr = new Uint8Array(n);
// 优化的 Uint8Array 填充逻辑
for (let i = 0; i < n; i++) {
// 使用 charCodeAt() 获取字符对应的字节值（Base64 解码后的字符串是字节级别的）
// eslint-disable-next-line unicorn/prefer-code-point
u8arr[i] = bstr.charCodeAt(i);
}
// 返回 File 文件对象
return new File([u8arr], `${fileName}.${suffix}`, { type });
} catch (error) {
throw new Error(
`Base64 解码失败: ${error instanceof Error ? error.message : '未知错误'}`,
);
}
},
};

2
apps/web-antd/src/utils/formCreate.ts
View File

@@ -34,7 +34,7 @@ export const decodeFields = (fields: string[]) => {
export const setConfAndFields = (
designerRef: object,
conf: string,
fields: string,
fields: string | string[],
) => {
// @ts-ignore designerRef.value is dynamically added by form-create-designer
designerRef.value.setOption(JSON.parse(conf));

1
apps/web-antd/src/utils/index.ts
View File

@@ -1,5 +1,6 @@
export * from './constants';
export * from './dict';
export * from './download';
export * from './formatTime';
export * from './formCreate';
export * from './rangePickerProps';

6
apps/web-antd/src/views/bpm/category/index.vue
View File

@@ -6,11 +6,13 @@ import type {
import type { BpmCategoryApi } from '#/api/bpm/category';
import { Page, useVbenModal } from '@vben/common-ui';
import { Plus } from '@vben/icons';
import { Button, message } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteCategory, getCategoryPage } from '#/api/bpm/category';
import { DocAlert } from '#/components/doc-alert';
import { $t } from '#/locales';
import { useGridColumns, useGridFormSchema } from './data';
@@ -100,6 +102,10 @@ async function onDelete(row: BpmCategoryApi.CategoryVO) {
<template>
<Page auto-content-height>
<template #doc>
<DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
</template>
<FormModal @success="onRefresh" />
<Grid table-title="流程分类">
<template #toolbar-tools>

2
apps/web-antd/src/views/bpm/form/data.ts
View File

@@ -105,7 +105,7 @@ export function useGridColumns<T = BpmFormApi.FormVO>(
{
field: 'operation',
title: '操作',
minWidth: 150,
minWidth: 200,
align: 'center',
fixed: 'right',
cellRender: {

22
apps/web-antd/src/views/bpm/form/editor.vue → apps/web-antd/src/views/bpm/form/designer/index.vue
View File

@@ -1,5 +1,4 @@
<script lang="ts" setup>
// TODO @siye：editor 要不要放到独立的目录？form/designer ？
import { computed, onMounted, ref } from 'vue';
import { Page, useVbenModal } from '@vben/common-ui';
@@ -12,19 +11,15 @@ import { getFormDetail } from '#/api/bpm/form';
import { useFormCreateDesigner } from '#/components/form-create';
import { router } from '#/router';
import { setConfAndFields } from '#/utils';
import Form from './modules/form.vue';
import Form from '#/views/bpm/form/modules/form.vue';
defineOptions({ name: 'BpmFormEditor' });
// TODO @siye：这里有 lint 告警
const props = defineProps<Props>();
interface Props {
copyId?: number;
id?: number;
const props = defineProps<{
copyId?: number | string;
id?: number | string;
type: 'copy' | 'create' | 'edit';
}
}>();
// 流程表单详情
const flowFormConfig = ref();
@@ -85,7 +80,7 @@ const currentFormId = computed(() => {
});
// 加载表单配置
async function loadFormConfig(id: number) {
async function loadFormConfig(id: number | string) {
try {
const formDetail = await getFormDetail(id);
flowFormConfig.value = formDetail;
@@ -107,10 +102,11 @@ async function initializeDesigner() {
}
if (id) {
await loadFormConfig(id);
await loadFormConfig(Number(id));
}
}
// 保存表单
function handleSave() {
formModalApi
.setData({
@@ -121,7 +117,7 @@ function handleSave() {
.open();
}
// TODO @siye：一些必要的注释，稍微写写哈。保持风格的一致性；
// 返回列表页
function onBack() {
router.push({
path: '/bpm/manager/form',

37
apps/web-antd/src/views/bpm/form/index.vue
View File

@@ -12,6 +12,7 @@ import { Page, useVbenModal } from '@vben/common-ui';
import { Plus } from '@vben/icons';
import { $t } from '@vben/locales';
import FormCreate from '@form-create/ant-design-vue';
import { Button, message } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
@@ -119,7 +120,6 @@ async function onDetail(row: BpmFormApi.FormVO) {
/** 编辑 */
function onEdit(row: BpmFormApi.FormVO) {
console.warn(row);
router.push({
name: 'BpmFormEditor',
query: {
@@ -165,11 +165,12 @@ watch(
<template>
<Page auto-content-height>
<DocAlert
title="审批接入（流程表单）"
url="https://doc.iocoder.cn/bpm/use-bpm-form/"
/>
<FormModal @success="onRefresh" />
<template #doc>
<DocAlert
title="审批接入（流程表单）"
url="https://doc.iocoder.cn/bpm/use-bpm-form/"
/>
</template>
<Grid table-title="流程表单">
<template #toolbar-tools>
<Button type="primary" @click="onCreate">
@@ -177,28 +178,6 @@ watch(
{{ $t('ui.actionTitle.create', ['流程表单']) }}
</Button>
</template>
<!-- 摘要 -->
<!-- TODO @siye：这个是不是不应该有呀？ -->
<template #slot-summary="{ row }">
<div
class="flex flex-col py-2"
v-if="
row.processInstance.summary &&
row.processInstance.summary.length > 0
"
>
<div
v-for="(item, index) in row.processInstance.summary"
:key="index"
>
<span class="text-gray-500">
{{ item.key }} : {{ item.value }}
</span>
</div>
</div>
<div v-else>-</div>
</template>
</Grid>
<DetailModal
@@ -209,7 +188,7 @@ watch(
}"
>
<div class="mx-4">
<form-create :option="formConfig.option" :rule="formConfig.rule" />
<FormCreate :option="formConfig.option" :rule="formConfig.rule" />
</div>
</DetailModal>
</Page>

24
apps/web-antd/src/views/bpm/form/modules/form.vue
View File

@@ -39,28 +39,29 @@ const [Form, formApi] = useVbenForm({
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
// TODO @siye：建议和别的模块，也稍微加点类似的注释哈。= = 阅读总是会有点层次感；
// 表单验证
const { valid } = await formApi.validate();
if (!valid) return;
// 锁定模态框
modalApi.lock();
try {
// 获取表单数据
const data = (await formApi.getValues()) as BpmFormApi.FormVO;
// 编码表单配置和表单字段
data.conf = encodeConf(designerComponent);
data.fields = encodeFields(designerComponent);
// TODO @siye：这个是不是不用抽方法呀，直接写逻辑就完事啦。
const saveForm = async () => {
if (!formData.value?.id) {
return createForm(data);
}
return editorAction.value === 'copy'
// 保存表单数据
if (formData.value?.id) {
await (editorAction.value === 'copy'
? createForm(data)
: updateForm(data);
};
: updateForm(data));
} else {
await createForm(data);
}
await saveForm();
await modalApi.close();
emit('success');
message.success($t('ui.actionMessage.operationSuccess'));
@@ -76,14 +77,15 @@ const [Modal, modalApi] = useVbenModal({
return;
}
// TODO @siye：建议和别的模块，也稍微加点类似的注释哈。= = 阅读总是会有点层次感；
const data = modalApi.getData<any>();
if (!data) return;
// 设置表单设计器组件
designerComponent.value = data.designer;
formData.value = data.formConfig;
editorAction.value = data.action;
// 如果是复制，表单名称后缀添加 _copy ，id 置空
if (editorAction.value === 'copy' && formData.value) {
formData.value = {
...formData.value,

5
apps/web-antd/src/views/bpm/group/data.ts
View File

@@ -101,6 +101,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
/** 列表的字段 */
export function useGridColumns<T = BpmCategoryApi.CategoryVO>(
onActionClick: OnActionClickFn<T>,
getMemberNames: (userIds: number[]) => string,
): VxeTableGridOptions['columns'] {
return [
{
@@ -122,8 +123,8 @@ export function useGridColumns<T = BpmCategoryApi.CategoryVO>(
field: 'userIds',
title: '成员',
minWidth: 200,
slots: {
default: 'userIds-cell',
formatter: (row) => {
return getMemberNames(row.cellValue);
},
},
{

33
apps/web-antd/src/views/bpm/group/index.vue
View File

@@ -16,6 +16,7 @@ import { Button, message } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteUserGroup, getUserGroupPage } from '#/api/bpm/userGroup';
import { getSimpleUserList } from '#/api/system/user';
import { DocAlert } from '#/components/doc-alert';
import { $t } from '#/locales';
import { useGridColumns, useGridFormSchema } from './data';
@@ -30,7 +31,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
schema: useGridFormSchema(),
},
gridOptions: {
columns: useGridColumns(onActionClick),
columns: useGridColumns(onActionClick, getMemberNames),
height: 'auto',
keepSource: true,
proxyConfig: {
@@ -42,21 +43,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
...formValues,
});
},
querySuccess: (params) => {
// TODO @siye：getLeaderName?: (userId: number) => string | undefined, 参考这个哈。
const { list } = params.response;
const userMap = new Map(
userList.value.map((user) => [user.id, user.nickname]),
);
list.forEach(
(item: BpmUserGroupApi.UserGroupVO & { nicknames?: string }) => {
item.nicknames = item.userIds
.map((userId) => userMap.get(userId))
.filter(Boolean)
.join('、');
},
);
},
},
},
rowConfig: {
@@ -69,6 +55,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
} as VxeTableGridOptions<BpmUserGroupApi.UserGroupVO>,
});
/** 获取分组成员姓名 */
function getMemberNames(userIds: number[]) {
const userMap = new Map(
userList.value.map((user) => [user.id, user.nickname]),
);
return userIds
.map((userId) => userMap.get(userId))
.filter(Boolean)
.join('、');
}
/** 表格操作按钮的回调函数 */
function onActionClick({
code,
@@ -128,6 +125,10 @@ onMounted(async () => {
<template>
<Page auto-content-height>
<template #doc>
<DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
</template>
<FormModal @success="onRefresh" />
<Grid table-title="用户分组">
<template #toolbar-tools>

35
apps/web-antd/src/views/bpm/oa/leave/data.ts
View File

@@ -1,9 +1,15 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { BpmCategoryApi } from '#/api/bpm/category';
import type { DescriptionItemSchema } from '#/components/description';
import { h } from 'vue';
import { useAccess } from '@vben/access';
import dayjs from 'dayjs';
import { DictTag } from '#/components/dict-tag';
import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
const { hasAccessByCodes } = useAccess();
@@ -198,3 +204,32 @@ export function useGridColumns<T = BpmCategoryApi.CategoryVO>(
},
];
}
/** 详情 */
export function useDetailFormSchema(): DescriptionItemSchema[] {
return [
{
label: '请假类型',
field: 'type',
content: (data) =>
h(DictTag, {
type: DICT_TYPE.BPM_OA_LEAVE_TYPE,
value: data?.type,
}),
},
{
label: '开始时间',
field: 'startTime',
content: (data) => dayjs(data?.startTime).format('YYYY-MM-DD HH:mm:ss'),
},
{
label: '结束时间',
field: 'endTime',
content: (data) => dayjs(data?.endTime).format('YYYY-MM-DD HH:mm:ss'),
},
{
label: '原因',
field: 'reason',
},
];
}

57
apps/web-antd/src/views/bpm/oa/leave/detail.vue
View File

@@ -1,11 +1,54 @@
<script lang="ts" setup>
import { Page } from '@vben/common-ui';
<script setup lang="ts">
import type { BpmOALeaveApi } from '#/api/bpm/oa/leave';
import { computed, onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { getLeave } from '#/api/bpm/oa/leave';
import { ContentWrap } from '#/components/content-wrap';
import { Description } from '#/components/description';
import { useDetailFormSchema } from './data';
const props = defineProps<{
id: string;
}>();
const datailLoading = ref(false);
const detailData = ref<BpmOALeaveApi.LeaveVO>();
const { query } = useRoute();
const queryId = computed(() => query.id as string);
const getDetailData = async () => {
try {
datailLoading.value = true;
detailData.value = await getLeave(Number(props.id || queryId.value));
} finally {
datailLoading.value = false;
}
};
onMounted(() => {
getDetailData();
});
</script>
<template>
<Page>
<div>
<h1>请假详情</h1>
</div>
</Page>
<ContentWrap class="m-2">
<Description
:data="detailData"
:schema="useDetailFormSchema()"
:component-props="{
column: 1,
bordered: true,
size: 'small',
}"
/>
</ContentWrap>
</template>
<style lang="scss" scoped>
:deep(.ant-descriptions-item-label) {
width: 150px;
}
</style>

8
apps/web-antd/src/views/bpm/processExpression/index.vue
View File

@@ -106,8 +106,12 @@ async function onDelete(row: BpmProcessExpressionApi.ProcessExpressionVO) {
<template>
<Page auto-content-height>
<DocAlert title="流程表达式" url="https://doc.iocoder.cn/bpm/expression/" />
<template #doc>
<DocAlert
title="流程表达式"
url="https://doc.iocoder.cn/bpm/expression/"
/>
</template>
<FormModal @success="onRefresh" />
<Grid table-title="流程表达式">
<template #toolbar-tools>

39
apps/web-antd/src/views/bpm/processInstance/create/index.vue
View File

@@ -1,4 +1,5 @@
<script lang="ts" setup>
import type { BpmCategoryApi } from '#/api/bpm/category';
import type { BpmProcessDefinitionApi } from '#/api/bpm/definition';
import { computed, nextTick, onMounted, ref } from 'vue';
@@ -33,7 +34,9 @@ const processInstanceId: any = route.query.processInstanceId; // 流程实例编
const loading = ref(true); // 加载中
const categoryList: any = ref([]); // 分类的列表
const activeCategory = ref(''); // 当前选中的分类
const processDefinitionList = ref([]); // 流程定义的列表
const processDefinitionList = ref<
BpmProcessDefinitionApi.ProcessDefinitionVO[]
>([]); // 流程定义的列表
// 实现 groupBy 功能
const groupBy = (array: any[], key: string) => {
@@ -107,8 +110,12 @@ const handleGetProcessDefinitionList = async () => {
}
};
/** 用于存储搜索过滤后的流程定义 */
const filteredProcessDefinitionList = ref<
BpmProcessDefinitionApi.ProcessDefinitionVO[]
>([]);
/** 搜索流程 */
const filteredProcessDefinitionList = ref([]); // 用于存储搜索过滤后的流程定义
const handleQuery = () => {
if (searchName.value.trim()) {
// 如果有搜索关键字，进行过滤
@@ -150,10 +157,15 @@ const processDefinitionGroup: any = computed(() => {
const grouped = groupBy(filteredProcessDefinitionList.value, 'category');
// 按照 categoryList 的顺序重新组织数据
const orderedGroup = {};
categoryList.value.forEach((category: any) => {
const orderedGroup: Record<
string,
BpmProcessDefinitionApi.ProcessDefinitionVO[]
> = {};
categoryList.value.forEach((category: BpmCategoryApi.CategoryVO) => {
if (grouped[category.code]) {
orderedGroup[category.code] = grouped[category.code];
orderedGroup[category.code] = grouped[
category.code
] as BpmProcessDefinitionApi.ProcessDefinitionVO[];
}
});
return orderedGroup;
@@ -191,7 +203,7 @@ const availableCategories = computed(() => {
const availableCategoryCodes = Object.keys(processDefinitionGroup.value);
// 过滤出有流程的分类
return categoryList.value.filter((category: CategoryVO) =>
return categoryList.value.filter((category: BpmCategoryApi.CategoryVO) =>
availableCategoryCodes.includes(category.code),
);
});
@@ -229,11 +241,7 @@ onMounted(() => {
allow-clear
@input="handleQuery"
@clear="handleQuery"
>
<template #prefix>
<IconifyIcon icon="mdi:search-web" />
</template>
</InputSearch>
/>
</div>
</template>
@@ -289,15 +297,6 @@ onMounted(() => {
</Tooltip>
</span>
</div>
<!-- TODO: 发起流程按钮 -->
<!-- <template #actions>
<div class="flex justify-end px-4">
<Button type="link" @click="handleSelect(definition)">
发起流程
</Button>
</div>
</template> -->
</Card>
</Col>
</Row>

35
apps/web-antd/src/views/bpm/processInstance/create/modules/form.vue
View File

@@ -20,13 +20,14 @@ import {
BpmCandidateStrategyEnum,
BpmFieldPermissionType,
BpmModelFormType,
BpmModelType,
BpmNodeIdEnum,
BpmNodeTypeEnum,
decodeFields,
setConfAndFields2,
} from '#/utils';
import ProcessInstanceSimpleViewer from '#/views/bpm/processInstance/detail/modules/simple-bpm-viewer.vue';
import ProcessInstanceTimeline from '#/views/bpm/processInstance/detail/modules/time-line.vue';
// 类型定义
interface ProcessFormData {
rule: any[];
@@ -80,8 +81,8 @@ const detailForm = ref<ProcessFormData>({
const fApi = ref<ApiAttrs>();
const startUserSelectTasks = ref<UserTask[]>([]);
const startUserSelectAssignees = ref<Record<number, string[]>>({});
const tempStartUserSelectAssignees = ref<Record<number, string[]>>({});
const startUserSelectAssignees = ref<Record<string, string[]>>({});
const tempStartUserSelectAssignees = ref<Record<string, string[]>>({});
const bpmnXML = ref<string | undefined>(undefined);
const simpleJson = ref<string | undefined>(undefined);
const timelineRef = ref<any>();
@@ -273,9 +274,7 @@ const handleCancel = () => {
/** 选择发起人 */
const selectUserConfirm = (activityId: string, userList: any[]) => {
if (!activityId || !Array.isArray(userList)) return;
startUserSelectAssignees.value[Number(activityId)] = userList.map(
(item) => item.id,
);
startUserSelectAssignees.value[activityId] = userList.map((item) => item.id);
};
defineExpose({ initProcessInfo });
@@ -284,12 +283,11 @@ defineExpose({ initProcessInfo });
<template>
<Card
:title="getTitle"
class="h-full overflow-hidden"
:body-style="{
padding: '12px',
height: '100%',
display: 'flex',
flexDirection: 'column',
paddingBottom: '62px', // 预留 actions 区域高度
height: 'calc(100% - 112px)',
paddingTop: '12px',
overflowY: 'auto',
}"
>
<template #extra>
@@ -334,18 +332,25 @@ defineExpose({ initProcessInfo });
</Tabs.TabPane>
<Tabs.TabPane tab="流程图" key="flow" class="flex flex-1 overflow-hidden">
<div>待开发</div>
<div class="w-full">
<ProcessInstanceSimpleViewer
:simple-json="simpleJson"
v-if="selectProcessDefinition.modelType === BpmModelType.SIMPLE"
/>
</div>
</Tabs.TabPane>
</Tabs>
<template #actions>
<template v-if="activeTab === 'form'">
<Space wrap class="flex h-[50px] w-full justify-center">
<Space wrap class="flex w-full justify-center">
<Button plain type="primary" @click="submitForm">
<IconifyIcon icon="mdi:check" />&nbsp; 发起
<IconifyIcon icon="icon-park-outline:check" />
发起
</Button>
<Button plain type="default" @click="handleCancel">
<IconifyIcon icon="mdi:close" />&nbsp; 取消
<IconifyIcon icon="icon-park-outline:close" />
取消
</Button>
</Space>
</template>

152
apps/web-antd/src/views/bpm/processInstance/detail/index.vue
View File

@@ -2,21 +2,12 @@
import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
import type { SystemUserApi } from '#/api/system/user';
import { nextTick, onMounted, ref } from 'vue';
import { nextTick, onMounted, ref, shallowRef, watch } from 'vue';
import { Page } from '@vben/common-ui';
import { formatDateTime } from '@vben/utils';
import {
Avatar,
Button,
Card,
Col,
message,
Row,
TabPane,
Tabs,
} from 'ant-design-vue';
import { Avatar, Card, Col, message, Row, TabPane, Tabs } from 'ant-design-vue';
import {
getApprovalDetail as getApprovalDetailApi,
@@ -39,6 +30,10 @@ import {
SvgBpmRunningIcon,
} from '#/views/bpm/processInstance/detail/modules/icons';
import ProcessInstanceBpmnViewer from './modules/bpm-viewer.vue';
import ProcessInstanceOperationButton from './modules/operation-button.vue';
import ProcessInstanceSimpleViewer from './modules/simple-bpm-viewer.vue';
import BpmProcessInstanceTaskList from './modules/task-list.vue';
import ProcessInstanceTimeline from './modules/time-line.vue';
defineOptions({ name: 'BpmProcessInstanceDetail' });
@@ -71,7 +66,7 @@ const processInstanceLoading = ref(false); // 流程实例的加载中
const processInstance = ref<BpmProcessInstanceApi.ProcessInstanceVO>(); // 流程实例
const processDefinition = ref<any>({}); // 流程定义
const processModelView = ref<any>({}); // 流程模型视图
// const operationButtonRef = ref(); // 操作按钮组件 ref
const operationButtonRef = ref(); // 操作按钮组件 ref
const auditIconsMap: {
[key: string]:
| typeof SvgBpmApproveIcon
@@ -99,7 +94,7 @@ const detailForm = ref({
const writableFields: Array<string> = []; // 表单可以编辑的字段
/** 加载流程实例 */
const BusinessFormComponent = ref<any>(null); // 异步组件
const BusinessFormComponent = shallowRef<any>(null); // 异步组件
/** 获取详情 */
async function getDetail() {
@@ -161,6 +156,7 @@ async function getApprovalDetail() {
});
} else {
// 注意：data.processDefinition.formCustomViewPath 是组件的全路径，例如说：/crm/contract/detail/index.vue
BusinessFormComponent.value = registerComponent(
data?.processDefinition?.formCustomViewPath || '',
);
@@ -168,6 +164,9 @@ async function getApprovalDetail() {
// 获取审批节点，显示 Timeline 的数据
activityNodes.value = data.activityNodes;
// 获取待办任务显示操作按钮
operationButtonRef.value?.loadTodoTask(data.todoTask);
} catch {
message.error('获取审批详情失败！');
} finally {
@@ -221,6 +220,20 @@ const setFieldPermission = (field: string, permission: string) => {
/** 当前的Tab */
const activeTab = ref('form');
const taskListRef = ref();
// 监听 Tab 切换，当切换到 "record" 标签时刷新任务列表
watch(
() => activeTab.value,
(newVal) => {
if (newVal === 'record') {
// 如果切换到流转记录标签，刷新任务列表
nextTick(() => {
taskListRef.value?.refresh();
});
}
},
);
/** 初始化 */
const userOptions = ref<SystemUserApi.User[]>([]); // 用户列表
@@ -234,9 +247,7 @@ onMounted(async () => {
<template>
<Page auto-content-height>
<Card
class="h-full"
:body-style="{
height: 'calc(100% - 140px)',
overflowY: 'auto',
paddingTop: '12px',
}"
@@ -291,18 +302,25 @@ onMounted(async () => {
</div>
<!-- 流程操作 -->
<div class="flex-1">
<Tabs v-model:active-key="activeTab" class="mt-0">
<TabPane tab="审批详情" key="form">
<Row :gutter="[48, 24]">
<Col :xs="24" :sm="24" :md="18" :lg="18" :xl="16">
<div class="process-tabs-container flex flex-1 flex-col">
<Tabs v-model:active-key="activeTab" class="mt-0 h-full">
<TabPane tab="审批详情" key="form" class="tab-pane-content">
<Row :gutter="[48, 24]" class="h-full">
<Col
:xs="24"
:sm="24"
:md="18"
:lg="18"
:xl="16"
class="h-full"
>
<!-- 流程表单 -->
<div
v-if="
processDefinition?.formType === BpmModelFormType.NORMAL
"
class="h-full"
>
<!-- v-model="detailForm.value" -->
<form-create
v-model="detailForm.value"
v-model:api="fApi"
@@ -315,40 +333,110 @@ onMounted(async () => {
v-if="
processDefinition?.formType === BpmModelFormType.CUSTOM
"
class="h-full"
>
<BusinessFormComponent :id="processInstance?.businessKey" />
</div>
</Col>
<Col :xs="24" :sm="24" :md="6" :lg="6" :xl="8">
<div class="mt-2">
<Col :xs="24" :sm="24" :md="6" :lg="6" :xl="8" class="h-full">
<div class="mt-4 h-full">
<ProcessInstanceTimeline :activity-nodes="activityNodes" />
</div>
</Col>
</Row>
</TabPane>
<TabPane tab="流程图" key="diagram">
<div>待开发</div>
<TabPane tab="流程图" key="diagram" class="tab-pane-content">
<div class="h-full">
<ProcessInstanceSimpleViewer
v-show="
processDefinition.modelType &&
processDefinition.modelType === BpmModelType.SIMPLE
"
:loading="processInstanceLoading"
:model-view="processModelView"
/>
<ProcessInstanceBpmnViewer
v-show="
processDefinition.modelType &&
processDefinition.modelType === BpmModelType.BPMN
"
:loading="processInstanceLoading"
:model-view="processModelView"
/>
</div>
</TabPane>
<TabPane tab="流转记录" key="record">
<div>待开发</div>
<TabPane tab="流转记录" key="record" class="tab-pane-content">
<div class="h-full">
<BpmProcessInstanceTaskList
ref="taskListRef"
:loading="processInstanceLoading"
:id="id"
/>
</div>
</TabPane>
<!-- TODO 待开发 -->
<TabPane tab="流转评论" key="comment" v-if="false">
<div>待开发</div>
<TabPane
tab="流转评论"
key="comment"
v-if="false"
class="tab-pane-content"
>
<div class="h-full">待开发</div>
</TabPane>
</Tabs>
</div>
</div>
<template #actions>
<div class="flex justify-start gap-x-2 p-4">
<Button type="primary">驳回</Button>
<Button type="primary">同意</Button>
<div class="px-4">
<ProcessInstanceOperationButton
ref="operationButtonRef"
:process-instance="processInstance"
:process-definition="processDefinition"
:user-options="userOptions"
:normal-form="detailForm"
:normal-form-api="fApi"
:writable-fields="writableFields"
@success="getDetail"
/>
</div>
</template>
</Card>
</Page>
</template>
<style lang="scss" scoped>
.ant-tabs-content {
height: 100%;
}
.process-tabs-container {
display: flex;
flex-direction: column;
height: 100%;
}
:deep(.ant-tabs) {
display: flex;
flex-direction: column;
height: 100%;
}
:deep(.ant-tabs-content) {
flex: 1;
overflow-y: auto;
}
:deep(.ant-tabs-tabpane) {
height: 100%;
}
.tab-pane-content {
height: calc(100vh - 420px);
padding-right: 12px;
overflow: hidden auto;
}
</style>

9
apps/web-antd/src/views/bpm/processInstance/detail/modules/bpm-viewer.vue Normal file
View File

@@ -0,0 +1,9 @@
<script setup lang="ts">
defineOptions({ name: 'ProcessInstanceBpmnViewer' });
</script>
<template>
<div>
<h1>BPMN Viewer</h1>
</div>
</template>

1392
apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue Normal file
View File

File diff suppressed because it is too large Load Diff

88
apps/web-antd/src/views/bpm/processInstance/detail/modules/signature.vue Normal file
View File

@@ -0,0 +1,88 @@
<script lang="ts" setup>
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
import { Button, message, Space, Tooltip } from 'ant-design-vue';
import Vue3Signature from 'vue3-signature';
import { uploadFile } from '#/api/infra/file';
import { download } from '#/utils';
defineOptions({
name: 'BpmProcessInstanceSignature',
});
const emits = defineEmits(['success']);
const [Modal, modalApi] = useVbenModal({
title: '流程签名',
onOpenChange(visible) {
if (!visible) {
modalApi.close();
}
},
onConfirm: () => {
submit();
},
});
const signature = ref<InstanceType<typeof Vue3Signature>>();
const open = async () => {
modalApi.open();
};
defineExpose({ open });
const submit = async () => {
message.success({
content: '签名上传中请稍等。。。',
});
const signFileUrl = await uploadFile({
file: download.base64ToFile(
signature?.value?.save('image/jpeg') || '',
'签名',
),
});
emits('success', signFileUrl);
modalApi.close();
};
</script>
<template>
<Modal class="h-[500px] w-[900px]">
<div class="mb-2 flex justify-end">
<Space>
<Tooltip title="撤销上一步操作">
<Button @click="signature?.undo()">
<template #icon>
<IconifyIcon icon="mi:undo" class="mb-[4px] size-[16px]" />
</template>
撤销
</Button>
</Tooltip>
<Tooltip title="清空画布">
<Button @click="signature?.clear()">
<template #icon>
<IconifyIcon
icon="mdi:delete-outline"
class="mb-[4px] size-[16px]"
/>
</template>
<span>清除</span>
</Button>
</Tooltip>
</Space>
</div>
<Vue3Signature
class="mx-auto border-[1px] border-solid border-gray-300"
ref="signature"
w="874px"
h="324px"
/>
</Modal>
</template>

9
apps/web-antd/src/views/bpm/processInstance/detail/modules/simple-bpm-viewer.vue Normal file
View File

@@ -0,0 +1,9 @@
<script setup lang="ts">
defineOptions({ name: 'ProcessInstanceSimpleViewer' });
</script>
<template>
<div>
<h1>Simple BPM Viewer</h1>
</div>
</template>

222
apps/web-antd/src/views/bpm/processInstance/detail/modules/task-list.vue Normal file
View File

@@ -0,0 +1,222 @@
<script setup lang="ts">
import type { formCreate } from '@form-create/antd-designer';
import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
import type { BpmTaskApi } from '#/api/bpm/task';
import { nextTick, onMounted, ref, shallowRef } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
import { Button } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getTaskListByProcessInstanceId } from '#/api/bpm/task';
import { DICT_TYPE, formatPast2, setConfAndFields2 } from '#/utils';
defineOptions({
name: 'BpmProcessInstanceTaskList',
});
const props = defineProps<{
id: string;
loading: boolean;
}>();
// 使用shallowRef减少不必要的深度响应
const columns = shallowRef([
{
field: 'name',
title: '审批节点',
minWidth: 150,
},
{
field: 'approver',
title: '审批人',
slots: {
default: ({ row }: { row: BpmTaskApi.TaskManagerVO }) => {
return row.assigneeUser?.nickname || row.ownerUser?.nickname;
},
},
minWidth: 180,
},
{
field: 'createTime',
title: '开始时间',
formatter: 'formatDateTime',
minWidth: 180,
},
{
field: 'endTime',
title: '结束时间',
formatter: 'formatDateTime',
minWidth: 180,
},
{
field: 'status',
title: '审批状态',
minWidth: 150,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.BPM_TASK_STATUS },
},
},
{
field: 'reason',
title: '审批建议',
slots: {
default: 'slot-reason',
},
minWidth: 200,
},
{
field: 'durationInMillis',
title: '耗时',
minWidth: 180,
slots: {
default: ({ row }: { row: BpmTaskApi.TaskManagerVO }) => {
return formatPast2(row.durationInMillis);
},
},
},
]);
// Grid配置和API
const [Grid, gridApi] = useVbenVxeGrid({
gridOptions: {
columns: columns.value,
keepSource: true,
showFooter: true,
border: true,
height: 'auto',
proxyConfig: {
ajax: {
query: async () => {
return await getTaskListByProcessInstanceId(props.id);
},
},
},
rowConfig: {
keyField: 'id',
},
pagerConfig: {
enabled: false,
},
toolbarConfig: {
enabled: false,
},
cellConfig: {
height: 60,
},
} as VxeTableGridOptions<BpmTaskApi.TaskVO>,
});
/**
* 刷新表格数据
*/
const refresh = (): void => {
gridApi.query();
};
// 表单相关
interface TaskForm {
rule: any[];
option: Record<string, any>;
value: Record<string, any>;
}
// 定义表单组件引用类型
// 使用明确的类型定义
const formRef = ref<formCreate>();
const taskForm = ref<TaskForm>({
rule: [],
option: {},
value: {},
});
/**
* 显示表单详情
* @param row 任务数据
*/
async function showFormDetail(row: BpmTaskApi.TaskManagerVO): Promise<void> {
// 设置表单配置和表单字段
taskForm.value = {
rule: [],
option: {},
value: row,
};
setConfAndFields2(
taskForm,
row.formConf,
row.formFields || [],
row.formVariables || {},
);
// 打开弹窗
modalApi.open();
// 等待表单渲染
await nextTick();
// 获取表单API实例
const formApi = formRef.value?.fapi;
if (!formApi) return;
// 设置表单不可编辑
formApi.btn.show(false);
formApi.resetBtn.show(false);
formApi.disabled(true);
}
// 表单查看模态框
const [Modal, modalApi] = useVbenModal({
title: '查看表单',
footer: false,
});
onMounted(() => {
refresh();
});
// 暴露刷新方法给父组件
defineExpose({
refresh,
});
</script>
<template>
<div class="flex h-full flex-col">
<Grid>
<template #slot-reason="{ row }">
<div class="flex flex-wrap items-center justify-center">
<span v-if="row.reason">{{ row.reason }}</span>
<span v-else>-</span>
<Button
v-if="row.formId > 0"
type="primary"
@click="showFormDetail(row)"`
size="small"
ghost
class="ml-1"
>
<IconifyIcon icon="ep:document" />
<span class="!ml-[2px] text-[12px]">查看表单</span>
</Button>
</div>
</template>
</Grid>
<Modal class="w-[800px]">
<form-create
ref="formRef"
v-model="taskForm.value"
:option="taskForm.option"
:rule="taskForm.rule"
/>
</Modal>
</div>
</template>

2
apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue
View File

@@ -43,7 +43,7 @@ const statusIconMap: Record<
// 审批未开始
'-1': { color: '#909398', icon: 'mdi:clock-outline' },
// 待审批
'0': { color: '#00b32a', icon: 'mdi:loading' },
'0': { color: '#ff943e', icon: 'mdi:loading', animation: 'animate-spin' },
// 审批中
'1': { color: '#448ef7', icon: 'mdi:loading', animation: 'animate-spin' },
// 审批通过

9
apps/web-antd/src/views/bpm/processInstance/manager/index.vue
View File

@@ -105,7 +105,9 @@ function onCancel(row: BpmProcessInstanceApi.ProcessInstanceVO) {
content: '请输入取消原因',
title: '取消流程',
modelPropName: 'value',
});
})
.then(() => {})
.catch(() => {});
}
/** 查看流程实例 */
@@ -125,9 +127,10 @@ function onRefresh() {
<template>
<Page auto-content-height>
<DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm" />
<template #doc>
<DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm" />
</template>
<FormModal @success="onRefresh" />
<Grid table-title="流程实例" />
</Page>
</template>

10
apps/web-antd/src/views/bpm/processListener/index.vue
View File

@@ -108,10 +108,12 @@ async function onDelete(row: BpmProcessListenerApi.ProcessListenerVO) {
<template>
<Page auto-content-height>
<DocAlert
title="执行监听器、任务监听器"
url="https://doc.iocoder.cn/bpm/listener/"
/>
<template #doc>
<DocAlert
title="执行监听器、任务监听器"
url="https://doc.iocoder.cn/bpm/listener/"
/>
</template>
<FormModal @success="onRefresh" />
<Grid table-title="流程监听器">
<template #toolbar-tools>

20
apps/web-antd/src/views/bpm/task/copy/index.vue
View File

@@ -45,14 +45,14 @@ const [Grid, gridApi] = useVbenVxeGrid({
cellConfig: {
height: 64,
},
} as VxeTableGridOptions<BpmProcessInstanceApi.ProcessInstanceVO>,
} as VxeTableGridOptions<BpmProcessInstanceApi.CopyVO>,
});
/** 表格操作按钮的回调函数 */
function onActionClick({
code,
row,
}: OnActionClickParams<BpmProcessInstanceApi.ProcessInstanceVO>) {
}: OnActionClickParams<BpmProcessInstanceApi.CopyVO>) {
switch (code) {
case 'detail': {
onDetail(row);
@@ -61,9 +61,8 @@ function onActionClick({
}
}
/** 办理任务 */
function onDetail(row: BpmProcessInstanceApi.ProcessInstanceVO) {
// TODO @siye：row 的类型是不是不对哈？需要改成 copyvo 么？
/** 任务详情 */
function onDetail(row: BpmProcessInstanceApi.CopyVO) {
const query = {
id: row.processInstanceId,
...(row.activityId && { activityId: row.activityId }),
@@ -82,11 +81,12 @@ function onRefresh() {
<template>
<Page auto-content-height>
<!-- TODO @siye：应该用 <template #doc>，这样高度可以被用进去哈 -->
<DocAlert
title="审批转办、委派、抄送"
url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
/>
<template #doc>
<DocAlert
title="审批转办、委派、抄送"
url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
/>
</template>
<FormModal @success="onRefresh" />
<Grid table-title="抄送任务">

13
apps/web-antd/src/views/bpm/task/done/data.ts
View File

@@ -2,8 +2,6 @@ import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { BpmTaskApi } from '#/api/bpm/task';
import { useAccess } from '@vben/access';
import { getCategorySimpleList } from '#/api/bpm/category';
import {
DICT_TYPE,
@@ -12,18 +10,15 @@ import {
getRangePickerDefaultProps,
} from '#/utils';
// TODO @siye：这个要去掉么？没用到
const { hasAccessByCodes } = useAccess();
/** 列表的搜索表单 */
export function useGridFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'name',
label: '流程名称',
label: '任务名称',
component: 'Input',
componentProps: {
placeholder: '请输入流程名称',
placeholder: '请输入任务名称',
allowClear: true,
},
},
@@ -79,8 +74,8 @@ export function useGridColumns<T = BpmTaskApi.TaskVO>(
): VxeTableGridOptions['columns'] {
return [
{
field: 'name',
title: '流程名称',
field: 'processInstance.name',
title: '流程',
minWidth: 200,
fixed: 'left',
},

23
apps/web-antd/src/views/bpm/task/done/index.vue
View File

@@ -78,18 +78,19 @@ function onRefresh() {
<template>
<Page auto-content-height>
<DocAlert
title="审批通过、不通过、驳回"
url="https://doc.iocoder.cn/bpm/task-todo-done/"
/>
<DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
<DocAlert
title="审批转办、委派、抄送"
url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
/>
<DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
<template #doc>
<DocAlert
title="审批通过、不通过、驳回"
url="https://doc.iocoder.cn/bpm/task-todo-done/"
/>
<DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
<DocAlert
title="审批转办、委派、抄送"
url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
/>
<DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
</template>
<FormModal @success="onRefresh" />
<Grid table-title="已办任务">
<!-- 摘要 -->
<template #slot-summary="{ row }">

12
apps/web-antd/src/views/bpm/task/manager/data.ts
View File

@@ -33,19 +33,11 @@ export function useGridColumns<T = BpmTaskApi.TaskVO>(
): VxeTableGridOptions['columns'] {
return [
{
field: 'name',
title: '流程名称',
field: 'processInstance.name',
title: '流程',
minWidth: 200,
fixed: 'left',
},
{
field: 'processInstance.summary',
title: '摘要',
minWidth: 200,
slots: {
default: 'slot-summary',
},
},
{
field: 'processInstance.startUser.nickname',
title: '发起人',

47
apps/web-antd/src/views/bpm/task/manager/index.vue
View File

@@ -16,7 +16,7 @@ import { useGridColumns, useGridFormSchema } from './data';
defineOptions({ name: 'BpmManagerTask' });
const [Grid, gridApi] = useVbenVxeGrid({
const [Grid] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema(),
},
@@ -45,11 +45,14 @@ const [Grid, gridApi] = useVbenVxeGrid({
cellConfig: {
height: 64,
},
} as VxeTableGridOptions<BpmTaskApi.TaskVO>,
} as VxeTableGridOptions<BpmTaskApi.TaskManagerVO>,
});
/** 表格操作按钮的回调函数 */
function onActionClick({ code, row }: OnActionClickParams<BpmTaskApi.TaskVO>) {
function onActionClick({
code,
row,
}: OnActionClickParams<BpmTaskApi.TaskManagerVO>) {
switch (code) {
case 'history': {
onHistory(row);
@@ -59,50 +62,22 @@ function onActionClick({ code, row }: OnActionClickParams<BpmTaskApi.TaskVO>) {
}
/** 查看历史 */
function onHistory(row: BpmTaskApi.TaskVO) {
function onHistory(row: BpmTaskApi.TaskManagerVO) {
console.warn(row);
router.push({
name: 'BpmProcessInstanceDetail',
query: {
// TODO @siye：数据类型，会爆红哈；
id: row.processInstance.id,
},
});
}
/** 刷新表格 */
function onRefresh() {
gridApi.query();
}
</script>
<template>
<Page auto-content-height>
<DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
<FormModal @success="onRefresh" />
<Grid table-title="流程任务">
<!-- 摘要 -->
<!-- TODO siye：这个要不要，也放到 data.ts 处理掉？ -->
<template #slot-summary="{ row }">
<div
class="flex flex-col py-2"
v-if="
row.processInstance.summary &&
row.processInstance.summary.length > 0
"
>
<div
v-for="(item, index) in row.processInstance.summary"
:key="index"
>
<span class="text-gray-500">
{{ item.key }} : {{ item.value }}
</span>
</div>
</div>
<div v-else>-</div>
</template>
</Grid>
<template #doc>
<DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
</template>
<Grid table-title="流程任务" />
</Page>
</template>

33
apps/web-antd/src/views/bpm/task/todo/data.ts
View File

@@ -2,6 +2,8 @@ import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { BpmTaskApi } from '#/api/bpm/task';
import { h } from 'vue';
import { useAccess } from '@vben/access';
import { getCategorySimpleList } from '#/api/bpm/category';
@@ -14,10 +16,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'name',
label: '流程名称',
label: '任务名称',
component: 'Input',
componentProps: {
placeholder: '请输入流程名称',
placeholder: '请输入任务名称',
allowClear: true,
},
},
@@ -72,8 +74,8 @@ export function useGridColumns<T = BpmTaskApi.TaskVO>(
): VxeTableGridOptions['columns'] {
return [
{
field: 'name',
title: '流程名称',
field: 'processInstance.name',
title: '流程',
minWidth: 200,
fixed: 'left',
},
@@ -82,7 +84,28 @@ export function useGridColumns<T = BpmTaskApi.TaskVO>(
title: '摘要',
minWidth: 200,
slots: {
default: 'slot-summary',
default: ({ row }) => {
const summary = row?.processInstance?.summary;
if (!summary || summary.length === 0) {
return '-';
}
return summary.map((item: any) => {
return h(
'div',
{
key: item.key,
},
h(
'span',
{
class: 'text-gray-500',
},
`${item.key} : ${item.value}`,
),
);
});
},
},
},
{

48
apps/web-antd/src/views/bpm/task/todo/index.vue
View File

@@ -78,40 +78,18 @@ function onRefresh() {
<template>
<Page auto-content-height>
<DocAlert
title="审批通过、不通过、驳回"
url="https://doc.iocoder.cn/bpm/task-todo-done/"
/>
<DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
<DocAlert
title="审批转办、委派、抄送"
url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
/>
<DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
<FormModal @success="onRefresh" />
<Grid table-title="待办任务">
<!-- 摘要 -->
<!-- TODO siye：这个要不要，也放到 data.ts 处理掉？ -->
<template #slot-summary="{ row }">
<div
class="flex flex-col py-2"
v-if="
row.processInstance.summary &&
row.processInstance.summary.length > 0
"
>
<div
v-for="(item, index) in row.processInstance.summary"
:key="index"
>
<span class="text-gray-500">
{{ item.key }} : {{ item.value }}
</span>
</div>
</div>
<div v-else>-</div>
</template>
</Grid>
<template #doc>
<DocAlert
title="审批通过、不通过、驳回"
url="https://doc.iocoder.cn/bpm/task-todo-done/"
/>
<DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
<DocAlert
title="审批转办、委派、抄送"
url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
/>
<DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
</template>
<Grid table-title="待办任务" />
</Page>
</template>

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: '操作',
minWidth: 160,
},
];
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: '请输入备注',
},
},
];

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

@@ -1,31 +1,498 @@
<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/alipay-channel-form.vue';
import mockFrom from './modules/channel/mock-channel-form.vue';
import walletFrom from './modules/channel/wallet-channel-form.vue';
import weixinFrom from './modules/channel/weixin-channel-form.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: 'pay-app-index',
};
const [BasicTable, tableApi] = useVbenVxeGrid({
formOptions,
gridOptions,
});
const [AppModal, modalApi] = useVbenModal({
connectedComponent: appFrom,
});
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();
};
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();
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();
}
};
</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 }">
<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
v-model:checked="row.status"
:checked-value="0"
:un-checked-value="1"
/>
</template>
<template #alipayAppConfig="{ row }">
<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 }">
<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 }">
<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 }">
<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 }">
<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 }">
<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 }">
<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 }">
<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 }">
<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 }">
<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 }">
<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 }">
<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 }">
<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>

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>

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

@@ -0,0 +1,163 @@
<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 { 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, payCode } = modalApi.getData() as {
id?: number;
payCode?: string;
};
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);
},
});
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 #appCertContent="slotProps">
<Space style="width: 100%" direction="vertical">
<Row>
<Textarea
v-bind="slotProps"
:rows="8"
placeholder="请上传商户公钥应用证书"
/>
</Row>
<Row>
<FileUpload
:accept="['crt']"
@return-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']"
@return-text="
(text: string) => {
slotProps.setValue(text);
}
"
/>
</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']"
@return-text="
(text: string) => {
slotProps.setValue(text);
}
"
/>
</Row>
</Space>
</template>
</BasicForm>
</BasicModal>
</template>

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

@@ -0,0 +1,456 @@
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: '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: 'status',
component: 'RadioGroup',
rules: 'required',
componentProps: {
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
},
defaultValue: 1,
},
{
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: '请输入备注',
},
},
];
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: '请输入备注',
},
},
];

105
apps/web-antd/src/views/pay/app/modules/channel/mock-channel-form.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/wallet-channel-form.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/weixin-channel-form.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>

144
apps/web-antd/src/views/pay/order/data.ts Normal file
View File

@@ -0,0 +1,144 @@
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: 'appId',
label: '应用编号',
componentProps: {
placeholder: '请输入应用编号',
},
},
{
component: 'Select',
fieldName: 'channelCode',
label: '支付渠道',
componentProps: {
placeholder: '请选择开启状态',
options: getDictOptions(DICT_TYPE.PAY_CHANNEL_CODE, 'string'),
},
},
{
component: 'Input',
fieldName: 'merchantOrderId',
label: '商户单号',
componentProps: {
placeholder: '请输入商户单号',
},
},
{
component: 'Input',
fieldName: 'no',
label: '支付单号',
componentProps: {
placeholder: '请输入支付单号',
},
},
{
component: 'Input',
fieldName: 'channelOrderNo',
label: '渠道单号',
componentProps: {
placeholder: '请输入渠道单号',
},
},
{
component: 'Select',
fieldName: 'status',
label: '支付状态',
componentProps: {
placeholder: '请选择支付状态',
options: getDictOptions(DICT_TYPE.PAY_ORDER_STATUS, 'number'),
},
},
{
component: 'RangePicker',
fieldName: 'createTime',
label: '创建时间',
componentProps: {
placeholder: ['开始日期', '结束日期'],
},
},
];
export const columns: VxeGridProps['columns'] = [
{ type: 'checkbox', width: 60 },
{
title: '编号',
field: 'id',
},
{
title: '支付金额',
field: 'price',
slots: {
default: ({ row }) => {
return `￥${(row.price || 0 / 100).toFixed(2)}`;
},
},
},
{
title: '退款金额',
field: 'refundPrice',
slots: {
default: ({ row }) => {
return `￥${(row.refundPrice || 0 / 100).toFixed(2)}`;
},
},
},
{
title: '手续金额',
field: 'channelFeePrice',
slots: {
default: ({ row }) => {
return `￥${(row.channelFeePrice || 0 / 100).toFixed(2)}`;
},
},
},
{
title: '订单号',
field: 'no',
slots: {
default: 'no',
},
},
{
title: '支付状态',
field: 'status',
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.PAY_ORDER_STATUS },
},
},
{
title: '支付渠道',
field: 'channelCode',
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.PAY_CHANNEL_CODE },
},
},
{
title: '支付时间',
field: 'successTime',
minWidth: 180,
formatter: 'formatDateTime',
},
{
title: '支付应用',
field: 'appName',
},
{
title: '商品标题',
field: 'subject',
},
{
field: 'action',
fixed: 'right',
slots: { default: 'action' },
title: '操作',
minWidth: 80,
},
];

124
apps/web-antd/src/views/pay/order/index.vue
View File

@@ -1,13 +1,89 @@
<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 { Page, useVbenModal } from '@vben/common-ui';
import { Tag } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import * as OrderApi from '#/api/pay/order';
import { DocAlert } from '#/components/doc-alert';
import { columns, querySchema } from './data';
import detailFrom from './modules/order-detail.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 OrderApi.getOrderPage({
pageNum: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
},
},
},
rowConfig: {
keyField: 'id',
},
// 表格全局唯一表示 保存列配置需要用到
id: 'pay-order-index',
};
const [BasicTable] = useVbenVxeGrid({
formOptions,
gridOptions,
});
const [DetailModal, modalDetailApi] = useVbenModal({
connectedComponent: detailFrom,
});
const openDetail = (id: number) => {
modalDetailApi.setData({
id,
});
modalDetailApi.open();
};
</script>
<template>
<Page>
<Page :auto-content-height="true">
<DocAlert
title="支付宝支付接入"
url="https://doc.iocoder.cn/pay/alipay-pay-demo/"
@@ -20,23 +96,29 @@ import { DocAlert } from '#/components/doc-alert';
title="微信小程序支付接入"
url="https://doc.iocoder.cn/pay/wx-lite-pay-demo/"
/>
<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/order/index"
>
可参考
https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/pay/order/index
代码，pull request 贡献给我们！
</Button>
<BasicTable>
<template #action="{ row }">
<a-button
type="link"
v-access:code="['pay:order:query']"
@click="openDetail(row.id)"
>
{{ $t('ui.actionTitle.detail') }}
</a-button>
</template>
<template #no="{ row }">
<p class="order-font">
<Tag size="small" color="blue"> 商户</Tag> {{ row.merchantOrderId }}
</p>
<p class="order-font" v-if="row.no">
<Tag size="small" color="orange">支付</Tag> {{ row.no }}
</p>
<p class="order-font" v-if="row.channelOrderNo">
<Tag size="small" color="green">渠道</Tag>
{{ row.channelOrderNo }}
</p>
</template>
</BasicTable>
<DetailModal />
</Page>
</template>

125
apps/web-antd/src/views/pay/order/modules/order-detail.vue Normal file
View File

@@ -0,0 +1,125 @@
<script setup lang="ts">
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { formatDateTime } from '@vben/utils';
import { Descriptions, Divider, Tag } from 'ant-design-vue';
import * as OrderApi from '#/api/pay/order';
import { DictTag } from '#/components/dict-tag';
import { DICT_TYPE } from '#/utils/dict';
const detailData = ref<OrderApi.PayOrderApi.Order>();
const [BasicModal, modalApi] = useVbenModal({
fullscreenButton: false,
showCancelButton: false,
showConfirmButton: false,
onOpenChange: async (isOpen) => {
if (!isOpen) {
return null;
}
modalApi.modalLoading(true);
const { id } = modalApi.getData() as {
id: number;
};
detailData.value = await OrderApi.getOrderDetail(id);
modalApi.modalLoading(false);
},
});
</script>
<template>
<BasicModal :close-on-click-modal="false" title="订单详情" class="w-[700px]">
<Descriptions :column="2">
<Descriptions.Item label="商户单号">
{{ detailData?.merchantOrderId }}
</Descriptions.Item>
<Descriptions.Item label="支付单号">
{{ detailData?.no }}
</Descriptions.Item>
<Descriptions.Item label="应用编号">
{{ detailData?.appId }}
</Descriptions.Item>
<Descriptions.Item label="应用名称">
{{ detailData?.appName }}
</Descriptions.Item>
<Descriptions.Item label="支付状态">
<DictTag
size="small"
:type="DICT_TYPE.PAY_ORDER_STATUS"
:value="detailData?.status"
/>
</Descriptions.Item>
<Descriptions.Item label="支付金额">
<Tag color="green" size="small">
￥{{ (detailData?.price || 0 / 100.0).toFixed(2) }}
</Tag>
</Descriptions.Item>
<Descriptions.Item label="手续费">
<Tag color="orange" size="small">
￥{{ (detailData?.channelFeePrice || 0 / 100.0).toFixed(2) }}
</Tag>
</Descriptions.Item>
<Descriptions.Item label="手续费比例">
{{ (detailData?.channelFeeRate || 0 / 100.0).toFixed(2) }}%
</Descriptions.Item>
<Descriptions.Item label="支付时间">
{{ formatDateTime(detailData?.successTime) }}
</Descriptions.Item>
<Descriptions.Item label="失效时间">
{{ formatDateTime(detailData?.expireTime) }}
</Descriptions.Item>
<Descriptions.Item label="创建时间">
{{ formatDateTime(detailData?.createTime) }}
</Descriptions.Item>
<Descriptions.Item label="更新时间">
{{ formatDateTime(detailData?.updateTime) }}
</Descriptions.Item>
</Descriptions>
<Divider />
<Descriptions :column="2">
<Descriptions.Item label="商品标题">
{{ detailData?.subject }}
</Descriptions.Item>
<Descriptions.Item label="商品描述">
{{ detailData?.body }}
</Descriptions.Item>
<Descriptions.Item label="支付渠道">
<DictTag
size="small"
:type="DICT_TYPE.PAY_CHANNEL_CODE"
:value="detailData?.channelCode"
/>
</Descriptions.Item>
<Descriptions.Item label="支付 IP">
{{ detailData?.userIp }}
</Descriptions.Item>
<Descriptions.Item label="渠道单号">
<Tag size="small" color="green" v-if="detailData?.channelOrderNo">
{{ detailData?.channelOrderNo }}
</Tag>
</Descriptions.Item>
<Descriptions.Item label="渠道用户">
{{ detailData?.channelUserId }}
</Descriptions.Item>
<Descriptions.Item label="退款金额" :span="2">
<Tag size="small" color="red">
￥{{ (detailData?.refundPrice || 0 / 100.0).toFixed(2) }}
</Tag>
</Descriptions.Item>
<Descriptions.Item label="通知 URL">
{{ detailData?.notifyUrl }}
</Descriptions.Item>
</Descriptions>
<Divider />
<Descriptions :column="1">
<Descriptions.Item label="支付通道异步回调内容">
{{ detailData?.channelNotifyData }}
</Descriptions.Item>
</Descriptions>
</BasicModal>
</template>