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

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

pull/115/head
jason 2025-05-26 16:44:20 +08:00
parent 11f32258e6 67af898baf
commit ef93c9824a
96 changed files with 5288 additions and 550 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
apps/backend-mock/api/demo/bigint.ts Normal file
View File

@ -0,0 +1,28 @@
export default eventHandler(async (event) => {
const userinfo = verifyAccessToken(event);
if (!userinfo) {
return unAuthorizedResponse(event);
}
const data = `
{
"code": 0,
"message": "success",
"data": [
{
"id": 123456789012345678901234567890123456789012345678901234567890,
"name": "John Doe",
"age": 30,
"email": "john-doe@demo.com"
},
{
"id": 987654321098765432109876543210987654321098765432109876543210,
"name": "Jane Smith",
"age": 25,
"email": "jane@demo.com"
}
]
}
`;
setHeader(event, 'Content-Type', 'application/json');
return data;
});

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>

83
apps/web-ele/src/adapter/form.ts
View File

@ -8,56 +8,55 @@ 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: {
modelPropNameMap: {
Upload: 'fileList',
CheckboxGroup: 'model-value',
async function initSetupVbenForm() {
setupVbenForm<ComponentType>({
config: {
modelPropNameMap: {
Upload: 'fileList',
CheckboxGroup: 'model-value',
},
},
},
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 };

5
apps/web-ele/src/bootstrap.ts
View File

@ -14,12 +14,17 @@ 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';
async function bootstrap(namespace: string) {
// 初始化组件适配器
await initComponentAdapter();
// 初始化表单组件
await initSetupVbenForm();
// // 设置弹窗的默认配置
// setDefaultModalProps({
// fullscreenButton: false,

3
apps/web-ele/src/views/infra/codegen/modules/preview-code.vue
View File

@ -273,9 +273,8 @@ const [Modal, modalApi] = useVbenModal({
<div
class="h-full rounded-md bg-gray-50 !p-0 text-gray-800 dark:bg-gray-800 dark:text-gray-200"
>
<!-- eslint-disable-next-line vue/no-v-html -->
<code
v-html="codeMap.get(activeKey)"
v-dompurify-html="codeMap.get(activeKey)"
class="code-highlight"
></code>
</div>

89
apps/web-naive/src/adapter/form.ts
View File

@ -8,58 +8,59 @@ 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: {
// naive-ui组件的空值为null,不能是undefined，否则重置表单时不生效
emptyStateValue: null,
baseModelPropName: 'value',
modelPropNameMap: {
Checkbox: 'checked',
Radio: 'checked',
Upload: 'fileList',
async function initSetupVbenForm() {
setupVbenForm<ComponentType>({
config: {
// naive-ui组件的空值为null,不能是undefined，否则重置表单时不生效
emptyStateValue: null,
baseModelPropName: 'value',
modelPropNameMap: {
Checkbox: 'checked',
Radio: '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.phone', [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.phone', [ctx.label]);
}
return true;
},
},
});
});
}
const useVbenForm = useForm<ComponentType>;
export { useVbenForm, z };
export { initSetupVbenForm, useVbenForm, z };
export type VbenFormSchema = FormSchema<ComponentType>;
export type { VbenFormProps };

6
apps/web-naive/src/bootstrap.ts
View File

@ -12,12 +12,16 @@ import { useTitle } from '@vueuse/core';
import { $t, setupI18n } from '#/locales';
import { initComponentAdapter } from './adapter/component';
import { initSetupVbenForm } from './adapter/form';
import App from './app.vue';
import { router } from './router';
async function bootstrap(namespace: string) {
// 初始化组件适配器
initComponentAdapter();
await initComponentAdapter();
// 初始化表单组件
await initSetupVbenForm();
// // 设置弹窗的默认配置
// setDefaultModalProps({

3
apps/web-naive/src/views/infra/codegen/modules/preview-code.vue
View File

@ -255,9 +255,8 @@ const [Modal, modalApi] = useVbenModal({
<div
class="h-full rounded-md bg-gray-50 !p-0 text-gray-800 dark:bg-gray-800 dark:text-gray-200"
>
<!-- eslint-disable-next-line vue/no-v-html -->
<code
v-html="codeMap.get(activeKey)"
v-dompurify-html="codeMap.get(activeKey)"
class="code-highlight"
></code>
</div>

8
docs/src/components/common-ui/vben-ellipsis-text.md
View File

@ -26,6 +26,12 @@ outline: deep
<DemoPreview dir="demos/vben-ellipsis-text/tooltip" />
## 自动显示 tooltip
通过`tooltip-when-ellipsis`设置，仅在文本长度超出导致省略号出现时才触发 tooltip。
<DemoPreview dir="demos/vben-ellipsis-text/auto-display" />
## API
### Props
@ -37,6 +43,8 @@ outline: deep
| maxWidth | 文本区域最大宽度 | `number \| string` | `'100%'` |
| placement | 提示浮层的位置 | `'bottom'\|'left'\|'right'\|'top'` | `'top'` |
| tooltip | 启用文本提示 | `boolean` | `true` |
| tooltipWhenEllipsis | 内容超出，自动启用文本提示 | `boolean` | `false` |
| ellipsisThreshold | 设置 tooltipWhenEllipsis 后才生效，文本截断检测的像素差异阈值，越大则判断越严格，如果碰见异常情况可以自己设置阈值 | `number` | `3` |
| tooltipBackgroundColor | 提示文本的背景颜色 | `string` | - |
| tooltipColor | 提示文本的颜色 | `string` | - |
| tooltipFontSize | 提示文本的大小 | `string` | - |

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

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

16
docs/src/demos/vben-ellipsis-text/auto-display/index.vue Normal file
View File

@ -0,0 +1,16 @@
<script lang="ts" setup>
import { EllipsisText } from '@vben/common-ui';
const text = `
Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。
`;
</script>
<template>
<EllipsisText :line="2" :tooltip-when-ellipsis="true">
{{ text }}
</EllipsisText>
<EllipsisText :line="3" :tooltip-when-ellipsis="true">
{{ text }}
</EllipsisText>
</template>

3
docs/src/en/guide/essentials/settings.md
View File

@ -238,6 +238,7 @@ const defaultPreferences: Preferences = {
},
logo: {
enable: true,
fit: 'contain',
source: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp',
},
navigation: {
@ -431,6 +432,8 @@ interface HeaderPreferences {
interface LogoPreferences {
/** Whether the logo is visible */
enable: boolean;
/** Logo image fitting method */
fit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
/** Logo URL */
source: string;
}

3
docs/src/guide/essentials/settings.md
View File

@ -237,6 +237,7 @@ const defaultPreferences: Preferences = {
},
logo: {
enable: true,
fit: 'contain',
source: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp',
},
navigation: {
@ -431,6 +432,8 @@ interface HeaderPreferences {
interface LogoPreferences {
/** logo是否可见 */
enable: boolean;
/** logo图片适应方式 */
fit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
/** logo地址 */
source: string;
}

1
packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap
View File

@ -61,6 +61,7 @@ exports[`defaultPreferences immutability test > should not modify the config obj
},
"logo": {
"enable": true,
"fit": "contain",
"source": "https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp",
},
"navigation": {

1
packages/@core/preferences/src/config.ts
View File

@ -62,6 +62,7 @@ const defaultPreferences: Preferences = {
logo: {
enable: true,
fit: 'contain',
source: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp',
},
navigation: {

2
packages/@core/preferences/src/types.ts
View File

@ -134,6 +134,8 @@ interface HeaderPreferences {
interface LogoPreferences {
/** logo是否可见 */
enable: boolean;
/** logo图片适应方式 */
fit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
/** logo地址 */
source: string;
}

23
packages/@core/ui-kit/form-ui/src/form-api.ts
View File

@ -11,7 +11,7 @@ import type { Recordable } from '@vben-core/typings';
import type { FormActions, FormSchema, VbenFormProps } from './types';
import { toRaw } from 'vue';
import { isRef, toRaw } from 'vue';
import { Store } from '@vben-core/shared/store';
import {
@ -100,9 +100,26 @@ export class FormApi {
getFieldComponentRef<T = ComponentPublicInstance>(
fieldName: string,
): T | undefined {
return this.componentRefMap.has(fieldName)
? (this.componentRefMap.get(fieldName) as T)
let target = this.componentRefMap.has(fieldName)
? (this.componentRefMap.get(fieldName) as ComponentPublicInstance)
: undefined;
if (
target &&
target.$.type.name === 'AsyncComponentWrapper' &&
target.$.subTree.ref
) {
if (Array.isArray(target.$.subTree.ref)) {
if (
target.$.subTree.ref.length > 0 &&
isRef(target.$.subTree.ref[0]?.r)
) {
target = target.$.subTree.ref[0]?.r.value as ComponentPublicInstance;
}
} else if (isRef(target.$.subTree.ref.r)) {
target = target.$.subTree.ref.r.value as ComponentPublicInstance;
}
}
return target as T;
}
/**

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

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

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

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

39
packages/@core/ui-kit/form-ui/src/use-form-context.ts
View File

@ -10,7 +10,7 @@ import { createContext } from '@vben-core/shadcn-ui';
import { isString, mergeWithArrayOverride, set } from '@vben-core/shared/utils';
import { useForm } from 'vee-validate';
import { object } from 'zod';
import { object, ZodIntersection, ZodNumber, ZodObject, ZodString } from 'zod';
import { getDefaultsForSchema } from 'zod-defaults';
type ExtendFormProps = VbenFormProps & { formApi: ExtendedFormApi };
@ -52,7 +52,12 @@ export function useFormInitial(
if (Reflect.has(item, 'defaultValue')) {
set(initialValues, item.fieldName, item.defaultValue);
} else if (item.rules && !isString(item.rules)) {
// 检查规则是否适合提取默认值
const customDefaultValue = getCustomDefaultValue(item.rules);
zodObject[item.fieldName] = item.rules;
if (customDefaultValue !== undefined) {
initialValues[item.fieldName] = customDefaultValue;
}
}
});
@ -64,6 +69,38 @@ export function useFormInitial(
}
return mergeWithArrayOverride(initialValues, zodDefaults);
}
// 自定义默认值提取逻辑
function getCustomDefaultValue(rule: any): any {
if (rule instanceof ZodString) {
return ''; // 默认为空字符串
} else if (rule instanceof ZodNumber) {
return null; // 默认为 null（避免显示 0）
} else if (rule instanceof ZodObject) {
// 递归提取嵌套对象的默认值
const defaultValues: Record<string, any> = {};
for (const [key, valueSchema] of Object.entries(rule.shape)) {
defaultValues[key] = getCustomDefaultValue(valueSchema);
}
return defaultValues;
} else if (rule instanceof ZodIntersection) {
// 对于交集类型，从schema 提取默认值
const leftDefaultValue = getCustomDefaultValue(rule._def.left);
const rightDefaultValue = getCustomDefaultValue(rule._def.right);
// 如果左右两边都能提取默认值，合并它们
if (
typeof leftDefaultValue === 'object' &&
typeof rightDefaultValue === 'object'
) {
return { ...leftDefaultValue, ...rightDefaultValue };
}
// 否则优先使用左边的默认值
return leftDefaultValue ?? rightDefaultValue;
} else {
return undefined; // 其他类型不提供默认值
}
}
return {
delegatedSlots,

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

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

14
packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue
View File

@ -5,6 +5,8 @@ import type {
AvatarRootProps,
} from 'radix-vue';
import type { CSSProperties } from 'vue';
import type { ClassType } from '@vben-core/typings';
import { computed } from 'vue';
@ -16,6 +18,7 @@ interface Props extends AvatarFallbackProps, AvatarImageProps, AvatarRootProps {
class?: ClassType;
dot?: boolean;
dotClass?: ClassType;
fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
size?: number;
}
@ -28,6 +31,15 @@ const props = withDefaults(defineProps<Props>(), {
as: 'button',
dot: false,
dotClass: 'bg-green-500',
fit: 'cover',
});
const imageStyle = computed<CSSProperties>(() => {
const { fit } = props;
if (fit) {
return { objectFit: fit };
}
return {};
});
const text = computed(() => {
@ -51,7 +63,7 @@ const rootStyle = computed(() => {
class="relative flex flex-shrink-0 items-center"
>
<Avatar :class="props.class" class="size-full">
<AvatarImage :alt="alt" :src="src" />
<AvatarImage :alt="alt" :src="src" :style="imageStyle" />
<AvatarFallback>{{ text }}</AvatarFallback>
</Avatar>
<span

6
packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue
View File

@ -6,6 +6,10 @@ interface Props {
* @zh_CN 是否收起文本
*/
collapsed?: boolean;
/**
* @zh_CN Logo 图片适应方式
*/
fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
/**
* @zh_CN Logo 跳转地址
*/
@ -38,6 +42,7 @@ withDefaults(defineProps<Props>(), {
logoSize: 32,
src: '',
theme: 'light',
fit: 'cover',
});
</script>
@ -53,6 +58,7 @@ withDefaults(defineProps<Props>(), {
:alt="text"
:src="src"
:size="logoSize"
:fit="fit"
class="relative rounded-none bg-transparent"
/>
<template v-if="!collapsed">

88
packages/effects/common-ui/src/components/ellipsis-text/ellipsis-text.vue
View File

@ -1,7 +1,14 @@
<script setup lang="ts">
import type { CSSProperties } from 'vue';
import { computed, ref, watchEffect } from 'vue';
import {
computed,
onBeforeUnmount,
onMounted,
onUpdated,
ref,
watchEffect,
} from 'vue';
import { VbenTooltip } from '@vben-core/shadcn-ui';
@ -33,6 +40,16 @@ interface Props {
* @default true
*/
tooltip?: boolean;
/**
* 是否只在文本被截断时显示提示框
* @default false
*/
tooltipWhenEllipsis?: boolean;
/**
* 文本截断检测的像素差异阈值，越大则判断越严格
* @default 3
*/
ellipsisThreshold?: number;
/**
* 提示框背景颜色，优先级高于 overlayStyle
*/
@ -62,12 +79,15 @@ const props = withDefaults(defineProps<Props>(), {
maxWidth: '100%',
placement: 'top',
tooltip: true,
tooltipWhenEllipsis: false,
ellipsisThreshold: 3,
tooltipBackgroundColor: '',
tooltipColor: '',
tooltipFontSize: 14,
tooltipMaxWidth: undefined,
tooltipOverlayStyle: () => ({ textAlign: 'justify' }),
});
const emit = defineEmits<{ expandChange: [boolean] }>();
const textMaxWidth = computed(() => {
@ -79,9 +99,67 @@ const textMaxWidth = computed(() => {
const ellipsis = ref();
const isExpand = ref(false);
const defaultTooltipMaxWidth = ref();
const isEllipsis = ref(false);
const { width: eleWidth } = useElementSize(ellipsis);
// 检测文本是否被截断
const checkEllipsis = () => {
if (!ellipsis.value || !props.tooltipWhenEllipsis) return;
const element = ellipsis.value;
const originalText = element.textContent || '';
const originalTrimmed = originalText.trim();
// 对于空文本直接返回 false
if (!originalTrimmed) {
isEllipsis.value = false;
return;
}
const widthDiff = element.scrollWidth - element.clientWidth;
const heightDiff = element.scrollHeight - element.clientHeight;
// 使用足够大的差异阈值确保只有真正被截断的文本才会显示 tooltip
isEllipsis.value =
props.line === 1
? widthDiff > props.ellipsisThreshold
: heightDiff > props.ellipsisThreshold;
};
// 使用 ResizeObserver 监听尺寸变化
let resizeObserver: null | ResizeObserver = null;
onMounted(() => {
if (typeof ResizeObserver !== 'undefined' && props.tooltipWhenEllipsis) {
resizeObserver = new ResizeObserver(() => {
checkEllipsis();
});
if (ellipsis.value) {
resizeObserver.observe(ellipsis.value);
}
}
// 初始检测
checkEllipsis();
});
// 使用onUpdated钩子检测内容变化
onUpdated(() => {
if (props.tooltipWhenEllipsis) {
checkEllipsis();
}
});
onBeforeUnmount(() => {
if (resizeObserver) {
resizeObserver.disconnect();
resizeObserver = null;
}
});
watchEffect(
() => {
if (props.tooltip && eleWidth.value) {
@ -91,9 +169,13 @@ watchEffect(
},
{ flush: 'post' },
);
function onExpand() {
isExpand.value = !isExpand.value;
emit('expandChange', isExpand.value);
if (props.tooltipWhenEllipsis) {
checkEllipsis();
}
}
function handleExpand() {
@ -110,7 +192,9 @@ function handleExpand() {
color: tooltipColor,
backgroundColor: tooltipBackgroundColor,
}"
:disabled="!props.tooltip || isExpand"
:disabled="
!props.tooltip || isExpand || (props.tooltipWhenEllipsis && !isEllipsis)
"
:side="placement"
>
<slot name="tooltip">

2
packages/effects/layouts/src/basic/layout.vue
View File

@ -234,6 +234,7 @@ const headerSlots = computed(() => {
<template #logo>
<VbenLogo
v-if="preferences.logo.enable"
:fit="preferences.logo.fit"
:class="logoClass"
:collapsed="logoCollapsed"
:src="preferences.logo.source"
@ -324,6 +325,7 @@ const headerSlots = computed(() => {
<template #side-extra-title>
<VbenLogo
v-if="preferences.logo.enable"
:fit="preferences.logo.fit"
:text="preferences.app.name"
:theme="theme"
>

3
packages/effects/layouts/src/widgets/check-updates/check-updates.vue
View File

@ -6,7 +6,7 @@ import { $t } from '@vben/locales';
import { useVbenModal } from '@vben-core/popup-ui';
interface Props {
// 轮训时间，分钟
// 轮询时间，分钟
checkUpdatesInterval?: number;
// 检查更新的地址
checkUpdateUrl?: string;
@ -46,6 +46,7 @@ async function getVersionTag() {
const response = await fetch(props.checkUpdateUrl, {
cache: 'no-cache',
method: 'HEAD',
redirect: 'manual',
});
return (

3
packages/locales/src/langs/zh-CN/ui.json
View File

@ -20,7 +20,8 @@
"detail": "详情{0}",
"view": "查看{0}",
"import": "导入",
"export": "导出"
"export": "导出",
"detail": "详情"
},
"actionMessage": {
"deleteConfirm": "确定删除 {0} 吗？",

2
packages/stores/src/modules/tabbar.ts
View File

@ -208,7 +208,7 @@ export const useTabbarStore = defineStore('core-tabbar', {
const keys: string[] = [];
for (const key of closeKeys) {
if (key !== tab.key) {
if (key !== getTabKeyFromTab(tab)) {
const closeTab = this.tabs.find(
(item) => getTabKeyFromTab(item) === key,
);

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

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

4
playground/package.json
View File

@ -48,8 +48,12 @@
"@vueuse/core": "catalog:",
"ant-design-vue": "catalog:",
"dayjs": "catalog:",
"json-bigint": "catalog:",
"pinia": "catalog:",
"vue": "catalog:",
"vue-router": "catalog:"
},
"devDependencies": {
"@types/json-bigint": "catalog:"
}
}

58
playground/src/adapter/form.ts
View File

@ -8,38 +8,40 @@ import type { ComponentType } from './component';
import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui';
import { $t } from '@vben/locales';
setupVbenForm<ComponentType>({
config: {
// ant design vue组件库默认都是 v-model:value
baseModelPropName: 'value',
// 一些组件是 v-model:checked 或者 v-model:fileList
modelPropNameMap: {
Checkbox: 'checked',
Radio: 'checked',
Switch: 'checked',
Upload: 'fileList',
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',
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;
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;
},
},
// 选择项目必填国际化适配
selectRequired: (value, _params, ctx) => {
if (value === undefined || value === null) {
return $t('ui.formRules.selectRequired', [ctx.label]);
}
return true;
},
},
});
});
}
const useVbenForm = useForm<ComponentType>;
export { useVbenForm, z };
export { initSetupVbenForm, useVbenForm, z };
export type VbenFormSchema = FormSchema<ComponentType>;
export type { VbenFormProps };

10
playground/src/api/examples/json-bigint.ts Normal file
View File

@ -0,0 +1,10 @@
import { requestClient } from '#/api/request';
/**
* 发起请求
*/
async function getBigIntData() {
return requestClient.get('/demo/bigint');
}
export { getBigIntData };

12
playground/src/api/request.ts
View File

@ -1,7 +1,7 @@
/**
* 该文件可自行根据业务逻辑进行调整
*/
import type { RequestClientOptions } from '@vben/request';
import type { AxiosResponseHeaders, RequestClientOptions } from '@vben/request';
import { useAppConfig } from '@vben/hooks';
import { preferences } from '@vben/preferences';
@ -12,8 +12,10 @@ import {
RequestClient,
} from '@vben/request';
import { useAccessStore } from '@vben/stores';
import { cloneDeep } from '@vben/utils';
import { message } from 'ant-design-vue';
import JSONBigInt from 'json-bigint';
import { useAuthStore } from '#/store';
@ -25,6 +27,14 @@ function createRequestClient(baseURL: string, options?: RequestClientOptions) {
const client = new RequestClient({
...options,
baseURL,
transformResponse: (data: any, header: AxiosResponseHeaders) => {
// storeAsString指示将BigInt存储为字符串，设为false则会存储为内置的BigInt类型
return header.getContentType()?.toString().includes('application/json')
? cloneDeep(
JSONBigInt({ storeAsString: true, strict: true }).parse(data),
)
: data;
},
});
/**

4
playground/src/bootstrap.ts
View File

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

10
playground/src/router/routes/modules/demos.ts
View File

@ -255,6 +255,16 @@ const routes: RouteRecordRaw[] = [
title: $t('demos.features.requestParamsSerializer'),
},
},
{
name: 'BigIntDemo',
path: '/demos/features/json-bigint',
component: () =>
import('#/views/demos/features/json-bigint/index.vue'),
meta: {
icon: 'lucide:grape',
title: 'JSON BigInt',
},
},
],
},
// 面包屑导航

7
playground/src/views/_core/authentication/login.vue
View File

@ -111,10 +111,11 @@ const loginRef =
async function onSubmit(params: Recordable<any>) {
authStore.authLogin(params).catch(() => {
// 登陆失败，刷新验证码的演示
const formApi = loginRef.value?.getFormApi();
// 重置验证码组件的值
formApi?.setFieldValue('captcha', false, false);
// 使用表单API获取验证码组件实例，并调用其resume方法来重置验证码
loginRef.value
?.getFormApi()
formApi
?.getFieldComponentRef<InstanceType<typeof SliderCaptcha>>('captcha')
?.resume();
});

39
playground/src/views/demos/features/json-bigint/index.vue Normal file
View File

@ -0,0 +1,39 @@
<script lang="ts" setup>
import { ref } from 'vue';
import { Page } from '@vben/common-ui';
import { Alert, Button, Card } from 'ant-design-vue';
import { getBigIntData } from '#/api/examples/json-bigint';
const response = ref('');
function fetchData() {
getBigIntData().then((res) => {
response.value = res;
});
}
</script>
<template>
<Page
title="JSON BigInt Support"
description="解析后端返回的长整数（long/bigInt）。代码位置：playground/src/api/request.ts中的transformResponse"
>
<Card>
<Alert>
<template #message>
有些后端接口返回的ID是长整数，但javascript原生的JSON解析是不支持超过2^53-1的长整数的。
这种情况可以建议后端返回数据前将长整数转换为字符串类型。如果后端不接受我们的建议😡……
<br />
下面的按钮点击后会发起请求，接口返回的JSON数据中的id字段是超出整数范围的数字，已自动将其解析为字符串
</template>
</Alert>
<Button class="mt-4" type="primary" @click="fetchData">发起请求</Button>
<div>
<pre>
{{ response }}
</pre>
</div>
</Card>
</Page>
</template>

2
playground/src/views/examples/form/api.vue
View File

@ -134,7 +134,7 @@ function handleClick(
}
case 'componentRef': {
// 获取下拉组件的实例，并调用它的focus方法
formApi.getFieldComponentRef<RefSelectProps>('fieldOptions')?.focus();
formApi.getFieldComponentRef<RefSelectProps>('fieldOptions')?.focus?.();
break;
}
case 'disabled': {

2
playground/src/views/system/menu/data.ts
View File

@ -11,7 +11,7 @@ export function getMenuTypeOptions() {
value: 'catalog',
},
{ color: 'default', label: $t('system.menu.typeMenu'), value: 'menu' },
{ color: 'error', label: $t('system.menu.typeButton'), value: 'action' },
{ color: 'error', label: $t('system.menu.typeButton'), value: 'button' },
{
color: 'success',
label: $t('system.menu.typeEmbedded'),

63
pnpm-lock.yaml
View File

@ -6,6 +6,9 @@ settings:
catalogs:
default:
'@ant-design/icons-vue':
specifier: ^7.0.1
version: 7.0.1
'@changesets/changelog-github':
specifier: ^0.5.1
version: 0.5.1
@ -99,6 +102,9 @@ catalogs:
'@types/html-minifier-terser':
specifier: ^7.0.2
version: 7.0.2
'@types/json-bigint':
specifier: ^1.0.4
version: 1.0.4
'@types/jsonwebtoken':
specifier: ^9.0.9
version: 9.0.9
@ -315,6 +321,9 @@ catalogs:
is-ci:
specifier: ^4.1.0
version: 4.1.0
json-bigint:
specifier: ^1.0.0
version: 1.0.0
jsonc-eslint-parser:
specifier: ^2.4.0
version: 2.4.0
@ -528,6 +537,9 @@ catalogs:
vue-tsc:
specifier: 2.2.10
version: 2.2.10
vue3-signature:
specifier: ^0.2.4
version: 0.2.4
vxe-pc-ui:
specifier: ^4.5.35
version: 4.6.8
@ -674,6 +686,9 @@ importers:
apps/web-antd:
dependencies:
'@ant-design/icons-vue':
specifier: 'catalog:'
version: 7.0.1(vue@3.5.13(typescript@5.8.3))
'@form-create/ant-design-vue':
specifier: 'catalog:'
version: 3.2.22(vue@3.5.13(typescript@5.8.3))
@ -758,6 +773,9 @@ importers:
vue-router:
specifier: 'catalog:'
version: 4.5.1(vue@3.5.13(typescript@5.8.3))
vue3-signature:
specifier: 'catalog:'
version: 0.2.4(vue@3.5.13(typescript@5.8.3))
devDependencies:
'@types/crypto-js':
specifier: 'catalog:'
@ -1978,6 +1996,9 @@ importers:
dayjs:
specifier: 'catalog:'
version: 1.11.13
json-bigint:
specifier: 'catalog:'
version: 1.0.0
pinia:
specifier: ^3.0.2
version: 3.0.2(typescript@5.8.3)(vue@3.5.13(typescript@5.8.3))
@ -1987,6 +2008,10 @@ importers:
vue-router:
specifier: 'catalog:'
version: 4.5.1(vue@3.5.13(typescript@5.8.3))
devDependencies:
'@types/json-bigint':
specifier: 'catalog:'
version: 1.0.4
scripts/turbo-run:
dependencies:
@ -4530,6 +4555,9 @@ packages:
'@types/html-minifier-terser@7.0.2':
resolution: {integrity: sha512-mm2HqV22l8lFQh4r2oSsOEVea+m0qqxEmwpc9kC1p/XzmjLWrReR9D/GRs8Pex2NX/imyEH9c5IU/7tMBQCHOA==}
'@types/json-bigint@1.0.4':
resolution: {integrity: sha512-ydHooXLbOmxBbubnA7Eh+RpBzuaIiQjh8WGJYQB50JFGFrdxW7JzVlyEV7fAXw0T2sqJ1ysTneJbiyNLqZRAag==}
'@types/json-schema@7.0.15':
resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
@ -5423,6 +5451,9 @@ packages:
resolution: {integrity: sha512-pbnl5XzGBdrFU/wT4jqmJVPn2B6UHPBOhzMQkY/SPUPB6QtUXtmBHBIwCbXJol93mOpGMnQyP/+BB19q04xj7g==}
engines: {node: '>=4'}
bignumber.js@9.3.0:
resolution: {integrity: sha512-EM7aMFTXbptt/wZdMlBv2t8IViwQL+h6SLHosp8Yf0dqJMTnY6iL32opnAB6kAdL0SZPuvcAzFr31o0c/R3/RA==}
binary-extensions@2.3.0:
resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
engines: {node: '>=8'}
@ -6220,6 +6251,9 @@ packages:
resolution: {integrity: sha512-WY/3TUME0x3KPYdRRxEJJvXRHV4PyPoUsxtZa78lwItwRQRHhd2U9xOscaT/YTf8uCXIAjeJOFBVEh/7FtD8Xg==}
engines: {node: '>=18'}
default-passive-events@2.0.0:
resolution: {integrity: sha512-eMtt76GpDVngZQ3ocgvRcNCklUMwID1PaNbCNxfpDXuiOXttSh0HzBbda1HU9SIUsDc02vb7g9+3I5tlqe/qMQ==}
define-data-property@1.1.4:
resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
engines: {node: '>= 0.4'}
@ -7843,6 +7877,9 @@ packages:
engines: {node: '>=6'}
hasBin: true
json-bigint@1.0.0:
resolution: {integrity: sha512-SiPv/8VpZuWbvLSMtTDU8hEfrZWg/mH/nV/b4o0CYbSxu1UIQPLdwKOCIyLQX+VIPO5vrLX3i8qtqFyhdPSUSQ==}
json-buffer@3.0.1:
resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
@ -10018,6 +10055,9 @@ packages:
resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
engines: {node: '>=14'}
signature_pad@3.0.0-beta.4:
resolution: {integrity: sha512-cOf2NhVuTiuNqe2X/ycEmizvCDXk0DoemhsEpnkcGnA4kS5iJYTCqZ9As7tFBbsch45Q1EdX61833+6sjJ8rrw==}
simple-swizzle@0.2.2:
resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
@ -11163,6 +11203,11 @@ packages:
peerDependencies:
vue: ^3.5.13
vue3-signature@0.2.4:
resolution: {integrity: sha512-XFwwFVK9OG3F085pKIq2SlNVqx32WdFH+TXbGEWc5FfEKpx8oMmZuAwZZ50K/pH2FgmJSE8IRwU9DDhrLpd6iA==}
peerDependencies:
vue: ^3.5.13
vue@3.5.13:
resolution: {integrity: sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==}
peerDependencies:
@ -14428,6 +14473,8 @@ snapshots:
'@types/html-minifier-terser@7.0.2': {}
'@types/json-bigint@1.0.4': {}
'@types/json-schema@7.0.15': {}
'@types/jsonwebtoken@9.0.9':
@ -15483,6 +15530,8 @@ snapshots:
dependencies:
is-windows: 1.0.2
bignumber.js@9.3.0: {}
binary-extensions@2.3.0: {}
bindings@1.5.0:
@ -16351,6 +16400,8 @@ snapshots:
bundle-name: 4.1.0
default-browser-id: 5.0.0
default-passive-events@2.0.0: {}
define-data-property@1.1.4:
dependencies:
es-define-property: 1.0.1
@ -18178,6 +18229,10 @@ snapshots:
jsesc@3.1.0: {}
json-bigint@1.0.0:
dependencies:
bignumber.js: 9.3.0
json-buffer@3.0.1: {}
json-parse-even-better-errors@2.3.1: {}
@ -20470,6 +20525,8 @@ snapshots:
signal-exit@4.1.0: {}
signature_pad@3.0.0-beta.4: {}
simple-swizzle@0.2.2:
dependencies:
is-arrayish: 0.3.2
@ -21801,6 +21858,12 @@ snapshots:
is-plain-object: 3.0.1
vue: 3.5.13(typescript@5.8.3)
vue3-signature@0.2.4(vue@3.5.13(typescript@5.8.3)):
dependencies:
default-passive-events: 2.0.0
signature_pad: 3.0.0-beta.4
vue: 3.5.13(typescript@5.8.3)
vue@3.5.13(typescript@5.8.3):
dependencies:
'@vue/compiler-dom': 3.5.13

4
pnpm-workspace.yaml
View File

@ -40,11 +40,13 @@ catalog:
'@tanstack/vue-store': ^0.7.0
'@tinymce/tinymce-vue': ^6.1.0
'@form-create/ant-design-vue': ^3.2.22
'@ant-design/icons-vue': ^7.0.1
'@form-create/antd-designer': ^3.2.11
'@form-create/naive-ui': ^3.2.22
'@types/archiver': ^6.0.3
'@types/eslint': ^9.6.1
'@types/html-minifier-terser': ^7.0.2
'@types/json-bigint': ^1.0.4
'@types/jsonwebtoken': ^9.0.9
'@types/lodash.clonedeep': ^4.5.9
'@types/lodash.get': ^4.4.9
@ -119,6 +121,7 @@ catalog:
happy-dom: ^17.4.6
html-minifier-terser: ^7.2.0
is-ci: ^4.1.0
json-bigint: ^1.0.0
jsonc-eslint-parser: ^2.4.0
jsonwebtoken: ^9.0.2
lefthook: ^1.11.12
@ -198,3 +201,4 @@ catalog:
zod: ^3.24.3
zod-defaults: ^0.1.3
highlight.js: ^11.11.1
vue3-signature: ^0.2.4