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

pull/115/head
jason 2025-05-26 16:44:20 +08:00
commit ef93c9824a
96 changed files with 5288 additions and 550 deletions

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

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:"

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[];

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,
},
);
}
/** 查询流程定义列表(简单列表) */

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

View File

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

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

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}`);
};
/** 退回 */

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

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;
}
/** 支付订单分页请求 */

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,

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) {

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

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',

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, '抄送');

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 : '未知错误'}`,
);
}
},
};

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

View File

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

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>

View File

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

View File

@ -1,5 +1,4 @@
<script lang="ts" setup>
// TODO @siyeeditor 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',

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>

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,

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

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 @siyegetLeaderName?: (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>

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',
},
];
}

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>

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>

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>

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>

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>

View File

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

File diff suppressed because it is too large Load Diff

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>

View File

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

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

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' },
//

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>

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>

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 @siyerow 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="">

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',
},

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 }">

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: '发起人',

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>

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

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>

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

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>

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;
}
// getValuesreadonly
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>

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;
}
// getValuesreadonly
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>

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

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;
}
// getValuesreadonly
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>

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;
}
// getValuesreadonly
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>

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;
}
// getValuesreadonly
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>

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

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>

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>

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

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,

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>

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

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({

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>

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` | - |

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: '商户公钥应用证书',
}
```
:::

View File

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

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

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

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": {

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: {

View File

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

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;
}
/**

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>

View File

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

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,

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

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

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">

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">

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"
>

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 (

View File

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

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

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

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:"
}
}

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

View File

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

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

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,

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',
},
},
],
},
// 面包屑导航

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);
// 使APIresume
loginRef.value
?.getFormApi()
formApi
?.getFieldComponentRef<InstanceType<typeof SliderCaptcha>>('captcha')
?.resume();
});

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>

View File

@ -134,7 +134,7 @@ function handleClick(
}
case 'componentRef': {
// focus
formApi.getFieldComponentRef<RefSelectProps>('fieldOptions')?.focus();
formApi.getFieldComponentRef<RefSelectProps>('fieldOptions')?.focus?.();
break;
}
case 'disabled': {

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'),

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

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