Merge remote-tracking branch 'yudao/dev' into dev
commit
ef93c9824a
|
@ -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;
|
||||
});
|
|
@ -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:"
|
||||
|
|
|
@ -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[];
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
/** 查询流程定义列表(简单列表) */
|
||||
|
|
|
@ -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}`);
|
||||
}
|
||||
|
||||
|
|
|
@ -14,6 +14,7 @@ export namespace BpmModelApi {
|
|||
/** 流程定义 VO */
|
||||
export interface ProcessDefinitionVO {
|
||||
id: string;
|
||||
key?: string;
|
||||
version: number;
|
||||
deploymentTime: number;
|
||||
suspensionState: number;
|
||||
|
|
|
@ -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 },
|
||||
);
|
||||
|
|
|
@ -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}`);
|
||||
};
|
||||
|
||||
/** 退回 */
|
||||
|
|
|
@ -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 },
|
||||
});
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
/** 支付订单分页请求 */
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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)),
|
||||
};
|
||||
};
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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, '抄送');
|
||||
|
|
|
@ -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 : '未知错误'}`,
|
||||
);
|
||||
}
|
||||
},
|
||||
};
|
|
@ -34,7 +34,7 @@ export const decodeFields = (fields: string[]) => {
|
|||
export const setConfAndFields = (
|
||||
designerRef: object,
|
||||
conf: string,
|
||||
fields: string,
|
||||
fields: string | string[],
|
||||
) => {
|
||||
// @ts-ignore designerRef.value is dynamically added by form-create-designer
|
||||
designerRef.value.setOption(JSON.parse(conf));
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
export * from './constants';
|
||||
export * from './dict';
|
||||
export * from './download';
|
||||
export * from './formatTime';
|
||||
export * from './formCreate';
|
||||
export * from './rangePickerProps';
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -105,7 +105,7 @@ export function useGridColumns<T = BpmFormApi.FormVO>(
|
|||
{
|
||||
field: 'operation',
|
||||
title: '操作',
|
||||
minWidth: 150,
|
||||
minWidth: 200,
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
cellRender: {
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
<script lang="ts" setup>
|
||||
// TODO @siye:editor 要不要放到独立的目录?form/designer ?
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
|
||||
import { Page, useVbenModal } from '@vben/common-ui';
|
||||
|
@ -12,19 +11,15 @@ import { getFormDetail } from '#/api/bpm/form';
|
|||
import { useFormCreateDesigner } from '#/components/form-create';
|
||||
import { router } from '#/router';
|
||||
import { setConfAndFields } from '#/utils';
|
||||
|
||||
import Form from './modules/form.vue';
|
||||
import Form from '#/views/bpm/form/modules/form.vue';
|
||||
|
||||
defineOptions({ name: 'BpmFormEditor' });
|
||||
|
||||
// TODO @siye:这里有 lint 告警
|
||||
const props = defineProps<Props>();
|
||||
|
||||
interface Props {
|
||||
copyId?: number;
|
||||
id?: number;
|
||||
const props = defineProps<{
|
||||
copyId?: number | string;
|
||||
id?: number | string;
|
||||
type: 'copy' | 'create' | 'edit';
|
||||
}
|
||||
}>();
|
||||
|
||||
// 流程表单详情
|
||||
const flowFormConfig = ref();
|
||||
|
@ -85,7 +80,7 @@ const currentFormId = computed(() => {
|
|||
});
|
||||
|
||||
// 加载表单配置
|
||||
async function loadFormConfig(id: number) {
|
||||
async function loadFormConfig(id: number | string) {
|
||||
try {
|
||||
const formDetail = await getFormDetail(id);
|
||||
flowFormConfig.value = formDetail;
|
||||
|
@ -107,10 +102,11 @@ async function initializeDesigner() {
|
|||
}
|
||||
|
||||
if (id) {
|
||||
await loadFormConfig(id);
|
||||
await loadFormConfig(Number(id));
|
||||
}
|
||||
}
|
||||
|
||||
// 保存表单
|
||||
function handleSave() {
|
||||
formModalApi
|
||||
.setData({
|
||||
|
@ -121,7 +117,7 @@ function handleSave() {
|
|||
.open();
|
||||
}
|
||||
|
||||
// TODO @siye:一些必要的注释,稍微写写哈。保持风格的一致性;
|
||||
// 返回列表页
|
||||
function onBack() {
|
||||
router.push({
|
||||
path: '/bpm/manager/form',
|
|
@ -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>
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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);
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
|
@ -16,6 +16,7 @@ import { Button, message } from 'ant-design-vue';
|
|||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { deleteUserGroup, getUserGroupPage } from '#/api/bpm/userGroup';
|
||||
import { getSimpleUserList } from '#/api/system/user';
|
||||
import { DocAlert } from '#/components/doc-alert';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
import { useGridColumns, useGridFormSchema } from './data';
|
||||
|
@ -30,7 +31,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
|
|||
schema: useGridFormSchema(),
|
||||
},
|
||||
gridOptions: {
|
||||
columns: useGridColumns(onActionClick),
|
||||
columns: useGridColumns(onActionClick, getMemberNames),
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
proxyConfig: {
|
||||
|
@ -42,21 +43,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
|
|||
...formValues,
|
||||
});
|
||||
},
|
||||
querySuccess: (params) => {
|
||||
// TODO @siye:getLeaderName?: (userId: number) => string | undefined, 参考这个哈。
|
||||
const { list } = params.response;
|
||||
const userMap = new Map(
|
||||
userList.value.map((user) => [user.id, user.nickname]),
|
||||
);
|
||||
list.forEach(
|
||||
(item: BpmUserGroupApi.UserGroupVO & { nicknames?: string }) => {
|
||||
item.nicknames = item.userIds
|
||||
.map((userId) => userMap.get(userId))
|
||||
.filter(Boolean)
|
||||
.join('、');
|
||||
},
|
||||
);
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
|
@ -69,6 +55,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
|
|||
} as VxeTableGridOptions<BpmUserGroupApi.UserGroupVO>,
|
||||
});
|
||||
|
||||
/** 获取分组成员姓名 */
|
||||
function getMemberNames(userIds: number[]) {
|
||||
const userMap = new Map(
|
||||
userList.value.map((user) => [user.id, user.nickname]),
|
||||
);
|
||||
return userIds
|
||||
.map((userId) => userMap.get(userId))
|
||||
.filter(Boolean)
|
||||
.join('、');
|
||||
}
|
||||
|
||||
/** 表格操作按钮的回调函数 */
|
||||
function onActionClick({
|
||||
code,
|
||||
|
@ -128,6 +125,10 @@ onMounted(async () => {
|
|||
|
||||
<template>
|
||||
<Page auto-content-height>
|
||||
<template #doc>
|
||||
<DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
|
||||
</template>
|
||||
|
||||
<FormModal @success="onRefresh" />
|
||||
<Grid table-title="用户分组">
|
||||
<template #toolbar-tools>
|
||||
|
|
|
@ -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',
|
||||
},
|
||||
];
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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" /> 发起
|
||||
<IconifyIcon icon="icon-park-outline:check" />
|
||||
发起
|
||||
</Button>
|
||||
<Button plain type="default" @click="handleCancel">
|
||||
<IconifyIcon icon="mdi:close" /> 取消
|
||||
<IconifyIcon icon="icon-park-outline:close" />
|
||||
取消
|
||||
</Button>
|
||||
</Space>
|
||||
</template>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
|
@ -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>
|
|
@ -0,0 +1,9 @@
|
|||
<script setup lang="ts">
|
||||
defineOptions({ name: 'ProcessInstanceSimpleViewer' });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<h1>Simple BPM Viewer</h1>
|
||||
</div>
|
||||
</template>
|
|
@ -0,0 +1,222 @@
|
|||
<script setup lang="ts">
|
||||
import type { formCreate } from '@form-create/antd-designer';
|
||||
|
||||
import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
|
||||
|
||||
import type { BpmTaskApi } from '#/api/bpm/task';
|
||||
|
||||
import { nextTick, onMounted, ref, shallowRef } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import { Button } from 'ant-design-vue';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { getTaskListByProcessInstanceId } from '#/api/bpm/task';
|
||||
import { DICT_TYPE, formatPast2, setConfAndFields2 } from '#/utils';
|
||||
|
||||
defineOptions({
|
||||
name: 'BpmProcessInstanceTaskList',
|
||||
});
|
||||
|
||||
const props = defineProps<{
|
||||
id: string;
|
||||
loading: boolean;
|
||||
}>();
|
||||
|
||||
// 使用shallowRef减少不必要的深度响应
|
||||
const columns = shallowRef([
|
||||
{
|
||||
field: 'name',
|
||||
title: '审批节点',
|
||||
minWidth: 150,
|
||||
},
|
||||
{
|
||||
field: 'approver',
|
||||
title: '审批人',
|
||||
slots: {
|
||||
default: ({ row }: { row: BpmTaskApi.TaskManagerVO }) => {
|
||||
return row.assigneeUser?.nickname || row.ownerUser?.nickname;
|
||||
},
|
||||
},
|
||||
minWidth: 180,
|
||||
},
|
||||
{
|
||||
field: 'createTime',
|
||||
title: '开始时间',
|
||||
formatter: 'formatDateTime',
|
||||
minWidth: 180,
|
||||
},
|
||||
{
|
||||
field: 'endTime',
|
||||
title: '结束时间',
|
||||
formatter: 'formatDateTime',
|
||||
minWidth: 180,
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
title: '审批状态',
|
||||
minWidth: 150,
|
||||
cellRender: {
|
||||
name: 'CellDict',
|
||||
props: { type: DICT_TYPE.BPM_TASK_STATUS },
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'reason',
|
||||
title: '审批建议',
|
||||
slots: {
|
||||
default: 'slot-reason',
|
||||
},
|
||||
minWidth: 200,
|
||||
},
|
||||
{
|
||||
field: 'durationInMillis',
|
||||
title: '耗时',
|
||||
minWidth: 180,
|
||||
slots: {
|
||||
default: ({ row }: { row: BpmTaskApi.TaskManagerVO }) => {
|
||||
return formatPast2(row.durationInMillis);
|
||||
},
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
// Grid配置和API
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
gridOptions: {
|
||||
columns: columns.value,
|
||||
keepSource: true,
|
||||
showFooter: true,
|
||||
border: true,
|
||||
height: 'auto',
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async () => {
|
||||
return await getTaskListByProcessInstanceId(props.id);
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
pagerConfig: {
|
||||
enabled: false,
|
||||
},
|
||||
toolbarConfig: {
|
||||
enabled: false,
|
||||
},
|
||||
cellConfig: {
|
||||
height: 60,
|
||||
},
|
||||
} as VxeTableGridOptions<BpmTaskApi.TaskVO>,
|
||||
});
|
||||
|
||||
/**
|
||||
* 刷新表格数据
|
||||
*/
|
||||
const refresh = (): void => {
|
||||
gridApi.query();
|
||||
};
|
||||
|
||||
// 表单相关
|
||||
interface TaskForm {
|
||||
rule: any[];
|
||||
option: Record<string, any>;
|
||||
value: Record<string, any>;
|
||||
}
|
||||
|
||||
// 定义表单组件引用类型
|
||||
|
||||
// 使用明确的类型定义
|
||||
const formRef = ref<formCreate>();
|
||||
const taskForm = ref<TaskForm>({
|
||||
rule: [],
|
||||
option: {},
|
||||
value: {},
|
||||
});
|
||||
|
||||
/**
|
||||
* 显示表单详情
|
||||
* @param row 任务数据
|
||||
*/
|
||||
async function showFormDetail(row: BpmTaskApi.TaskManagerVO): Promise<void> {
|
||||
// 设置表单配置和表单字段
|
||||
taskForm.value = {
|
||||
rule: [],
|
||||
option: {},
|
||||
value: row,
|
||||
};
|
||||
|
||||
setConfAndFields2(
|
||||
taskForm,
|
||||
row.formConf,
|
||||
row.formFields || [],
|
||||
row.formVariables || {},
|
||||
);
|
||||
|
||||
// 打开弹窗
|
||||
modalApi.open();
|
||||
|
||||
// 等待表单渲染
|
||||
await nextTick();
|
||||
|
||||
// 获取表单API实例
|
||||
const formApi = formRef.value?.fapi;
|
||||
if (!formApi) return;
|
||||
|
||||
// 设置表单不可编辑
|
||||
formApi.btn.show(false);
|
||||
formApi.resetBtn.show(false);
|
||||
formApi.disabled(true);
|
||||
}
|
||||
|
||||
// 表单查看模态框
|
||||
const [Modal, modalApi] = useVbenModal({
|
||||
title: '查看表单',
|
||||
footer: false,
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
refresh();
|
||||
});
|
||||
|
||||
// 暴露刷新方法给父组件
|
||||
defineExpose({
|
||||
refresh,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex h-full flex-col">
|
||||
<Grid>
|
||||
<template #slot-reason="{ row }">
|
||||
<div class="flex flex-wrap items-center justify-center">
|
||||
<span v-if="row.reason">{{ row.reason }}</span>
|
||||
<span v-else>-</span>
|
||||
|
||||
<Button
|
||||
v-if="row.formId > 0"
|
||||
type="primary"
|
||||
@click="showFormDetail(row)"`
|
||||
size="small"
|
||||
ghost
|
||||
class="ml-1"
|
||||
>
|
||||
<IconifyIcon icon="ep:document" />
|
||||
<span class="!ml-[2px] text-[12px]">查看表单</span>
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
</Grid>
|
||||
<Modal class="w-[800px]">
|
||||
<form-create
|
||||
ref="formRef"
|
||||
v-model="taskForm.value"
|
||||
:option="taskForm.option"
|
||||
:rule="taskForm.rule"
|
||||
/>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
|
@ -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' },
|
||||
// 审批通过
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -45,14 +45,14 @@ const [Grid, gridApi] = useVbenVxeGrid({
|
|||
cellConfig: {
|
||||
height: 64,
|
||||
},
|
||||
} as VxeTableGridOptions<BpmProcessInstanceApi.ProcessInstanceVO>,
|
||||
} as VxeTableGridOptions<BpmProcessInstanceApi.CopyVO>,
|
||||
});
|
||||
|
||||
/** 表格操作按钮的回调函数 */
|
||||
function onActionClick({
|
||||
code,
|
||||
row,
|
||||
}: OnActionClickParams<BpmProcessInstanceApi.ProcessInstanceVO>) {
|
||||
}: OnActionClickParams<BpmProcessInstanceApi.CopyVO>) {
|
||||
switch (code) {
|
||||
case 'detail': {
|
||||
onDetail(row);
|
||||
|
@ -61,9 +61,8 @@ function onActionClick({
|
|||
}
|
||||
}
|
||||
|
||||
/** 办理任务 */
|
||||
function onDetail(row: BpmProcessInstanceApi.ProcessInstanceVO) {
|
||||
// TODO @siye:row 的类型是不是不对哈?需要改成 copyvo 么?
|
||||
/** 任务详情 */
|
||||
function onDetail(row: BpmProcessInstanceApi.CopyVO) {
|
||||
const query = {
|
||||
id: row.processInstanceId,
|
||||
...(row.activityId && { activityId: row.activityId }),
|
||||
|
@ -82,11 +81,12 @@ function onRefresh() {
|
|||
|
||||
<template>
|
||||
<Page auto-content-height>
|
||||
<!-- TODO @siye:应该用 <template #doc>,这样高度可以被用进去哈 -->
|
||||
<DocAlert
|
||||
title="审批转办、委派、抄送"
|
||||
url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
|
||||
/>
|
||||
<template #doc>
|
||||
<DocAlert
|
||||
title="审批转办、委派、抄送"
|
||||
url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<FormModal @success="onRefresh" />
|
||||
<Grid table-title="抄送任务">
|
||||
|
|
|
@ -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',
|
||||
},
|
||||
|
|
|
@ -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 }">
|
||||
|
|
|
@ -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: '发起人',
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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}`,
|
||||
),
|
||||
);
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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: '请输入备注',
|
||||
},
|
||||
},
|
||||
];
|
|
@ -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>
|
||||
|
|
|
@ -0,0 +1,90 @@
|
|||
<script lang="ts" setup>
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
import { $t } from '@vben/locales';
|
||||
import { cloneDeep } from '@vben/utils';
|
||||
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
import * as PayApi from '#/api/pay/app';
|
||||
|
||||
import { modalSchema } from '../data';
|
||||
|
||||
const emit = defineEmits<{ reload: [] }>();
|
||||
|
||||
const isUpdate = ref(false);
|
||||
const title = computed(() => {
|
||||
return isUpdate.value
|
||||
? $t('ui.actionTitle.edit', '应用')
|
||||
: $t('ui.actionTitle.create', '应用');
|
||||
});
|
||||
|
||||
const [BasicForm, formApi] = useVbenForm({
|
||||
commonConfig: {
|
||||
// 默认占满两列
|
||||
formItemClass: 'col-span-2',
|
||||
// 默认label宽度 px
|
||||
labelWidth: 160,
|
||||
// 通用配置项 会影响到所有表单项
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
},
|
||||
},
|
||||
schema: modalSchema(),
|
||||
showDefaultActions: false,
|
||||
wrapperClass: 'grid-cols-2',
|
||||
});
|
||||
|
||||
const [BasicModal, modalApi] = useVbenModal({
|
||||
fullscreenButton: false,
|
||||
onCancel: handleCancel,
|
||||
onConfirm: handleConfirm,
|
||||
onOpenChange: async (isOpen) => {
|
||||
if (!isOpen) {
|
||||
return null;
|
||||
}
|
||||
modalApi.modalLoading(true);
|
||||
|
||||
const { id } = modalApi.getData() as {
|
||||
id?: number;
|
||||
};
|
||||
isUpdate.value = !!id;
|
||||
|
||||
if (isUpdate.value && id) {
|
||||
const record = await PayApi.getApp(id);
|
||||
await formApi.setValues(record);
|
||||
}
|
||||
|
||||
modalApi.modalLoading(false);
|
||||
},
|
||||
});
|
||||
|
||||
async function handleConfirm() {
|
||||
try {
|
||||
modalApi.modalLoading(true);
|
||||
const { valid } = await formApi.validate();
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
// getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
|
||||
const data = cloneDeep(await formApi.getValues()) as PayApi.PayAppApi.App;
|
||||
await (isUpdate.value ? PayApi.updateApp(data) : PayApi.createApp(data));
|
||||
emit('reload');
|
||||
await handleCancel();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
modalApi.modalLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleCancel() {
|
||||
modalApi.close();
|
||||
await formApi.resetForm();
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<BasicModal :close-on-click-modal="false" :title="title" class="w-[40%]">
|
||||
<BasicForm />
|
||||
</BasicModal>
|
||||
</template>
|
|
@ -0,0 +1,163 @@
|
|||
<script lang="ts" setup>
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
import { $t } from '@vben/locales';
|
||||
import { cloneDeep } from '@vben/utils';
|
||||
|
||||
import { Row, Space, Textarea } from 'ant-design-vue';
|
||||
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
import * as ChannelApi from '#/api/pay/channel';
|
||||
import { FileUpload } from '#/components/upload';
|
||||
|
||||
import { modalAliPaySchema } from './data';
|
||||
|
||||
const emit = defineEmits<{ reload: [] }>();
|
||||
|
||||
const isUpdate = ref(false);
|
||||
const title = computed(() => {
|
||||
return isUpdate.value
|
||||
? $t('ui.actionTitle.edit', '应用')
|
||||
: $t('ui.actionTitle.create', '应用');
|
||||
});
|
||||
|
||||
const [BasicForm, formApi] = useVbenForm({
|
||||
commonConfig: {
|
||||
// 默认占满两列
|
||||
formItemClass: 'col-span-2',
|
||||
// 默认label宽度 px
|
||||
labelWidth: 160,
|
||||
// 通用配置项 会影响到所有表单项
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
},
|
||||
},
|
||||
schema: modalAliPaySchema(),
|
||||
showDefaultActions: false,
|
||||
wrapperClass: 'grid-cols-2',
|
||||
});
|
||||
|
||||
const [BasicModal, modalApi] = useVbenModal({
|
||||
fullscreenButton: false,
|
||||
onCancel: handleCancel,
|
||||
onConfirm: handleConfirm,
|
||||
onOpenChange: async (isOpen) => {
|
||||
if (!isOpen) {
|
||||
return null;
|
||||
}
|
||||
modalApi.modalLoading(true);
|
||||
|
||||
const { id, payCode } = modalApi.getData() as {
|
||||
id?: number;
|
||||
payCode?: string;
|
||||
};
|
||||
|
||||
if (id && payCode) {
|
||||
const record = await ChannelApi.getChannel(id, payCode);
|
||||
isUpdate.value = !!record;
|
||||
record.code = payCode;
|
||||
if (isUpdate.value) {
|
||||
record.config = JSON.parse(record.config);
|
||||
await formApi.setValues(record);
|
||||
}
|
||||
}
|
||||
|
||||
modalApi.modalLoading(false);
|
||||
},
|
||||
});
|
||||
|
||||
async function handleConfirm() {
|
||||
try {
|
||||
modalApi.modalLoading(true);
|
||||
const { valid } = await formApi.validate();
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
// getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
|
||||
const data = cloneDeep(
|
||||
await formApi.getValues(),
|
||||
) as ChannelApi.PayChannelApi.Channel;
|
||||
data.config = JSON.stringify(data.config);
|
||||
await (isUpdate.value
|
||||
? ChannelApi.updateChannel(data)
|
||||
: ChannelApi.createChannel(data));
|
||||
emit('reload');
|
||||
await handleCancel();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
modalApi.modalLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleCancel() {
|
||||
modalApi.close();
|
||||
await formApi.resetForm();
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<BasicModal :close-on-click-modal="false" :title="title" class="w-[40%]">
|
||||
<BasicForm>
|
||||
<template #appCertContent="slotProps">
|
||||
<Space style="width: 100%" direction="vertical">
|
||||
<Row>
|
||||
<Textarea
|
||||
v-bind="slotProps"
|
||||
:rows="8"
|
||||
placeholder="请上传商户公钥应用证书"
|
||||
/>
|
||||
</Row>
|
||||
<Row>
|
||||
<FileUpload
|
||||
:accept="['crt']"
|
||||
@return-text="
|
||||
(text: string) => {
|
||||
slotProps.setValue(text);
|
||||
}
|
||||
"
|
||||
/>
|
||||
</Row>
|
||||
</Space>
|
||||
</template>
|
||||
<template #alipayPublicCertContent="slotProps">
|
||||
<Space style="width: 100%" direction="vertical">
|
||||
<Row>
|
||||
<Textarea
|
||||
v-bind="slotProps"
|
||||
:rows="8"
|
||||
placeholder="请上传支付宝公钥证书"
|
||||
/>
|
||||
</Row>
|
||||
<Row>
|
||||
<FileUpload
|
||||
:accept="['.crt']"
|
||||
@return-text="
|
||||
(text: string) => {
|
||||
slotProps.setValue(text);
|
||||
}
|
||||
"
|
||||
/>
|
||||
</Row>
|
||||
</Space>
|
||||
</template>
|
||||
<template #rootCertContent="slotProps">
|
||||
<Space style="width: 100%" direction="vertical">
|
||||
<Row>
|
||||
<Textarea v-bind="slotProps" :rows="8" placeholder="请上传根证书" />
|
||||
</Row>
|
||||
<Row>
|
||||
<FileUpload
|
||||
:accept="['.crt']"
|
||||
@return-text="
|
||||
(text: string) => {
|
||||
slotProps.setValue(text);
|
||||
}
|
||||
"
|
||||
/>
|
||||
</Row>
|
||||
</Space>
|
||||
</template>
|
||||
</BasicForm>
|
||||
</BasicModal>
|
||||
</template>
|
|
@ -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: '请输入备注',
|
||||
},
|
||||
},
|
||||
];
|
|
@ -0,0 +1,105 @@
|
|||
<script lang="ts" setup>
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
import { $t } from '@vben/locales';
|
||||
import { cloneDeep } from '@vben/utils';
|
||||
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
import * as ChannelApi from '#/api/pay/channel';
|
||||
|
||||
import { modalMockSchema } from './data';
|
||||
|
||||
const emit = defineEmits<{ reload: [] }>();
|
||||
|
||||
const isUpdate = ref(false);
|
||||
const title = computed(() => {
|
||||
return isUpdate.value
|
||||
? $t('ui.actionTitle.edit', '应用')
|
||||
: $t('ui.actionTitle.create', '应用');
|
||||
});
|
||||
|
||||
const [BasicForm, formApi] = useVbenForm({
|
||||
commonConfig: {
|
||||
// 默认占满两列
|
||||
formItemClass: 'col-span-2',
|
||||
// 默认label宽度 px
|
||||
labelWidth: 160,
|
||||
// 通用配置项 会影响到所有表单项
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
},
|
||||
},
|
||||
schema: modalMockSchema(),
|
||||
showDefaultActions: false,
|
||||
wrapperClass: 'grid-cols-2',
|
||||
});
|
||||
|
||||
const [BasicModal, modalApi] = useVbenModal({
|
||||
fullscreenButton: false,
|
||||
onCancel: handleCancel,
|
||||
onConfirm: handleConfirm,
|
||||
onOpenChange: async (isOpen) => {
|
||||
if (!isOpen) {
|
||||
return null;
|
||||
}
|
||||
modalApi.modalLoading(true);
|
||||
|
||||
const { id, payCode } = modalApi.getData() as {
|
||||
id?: number;
|
||||
payCode?: string;
|
||||
};
|
||||
|
||||
if (id && payCode) {
|
||||
let record = await ChannelApi.getChannel(id, payCode);
|
||||
isUpdate.value = !!record;
|
||||
if (isUpdate.value) {
|
||||
record.config = JSON.parse(record.config);
|
||||
} else {
|
||||
record = {
|
||||
feeRate: 0,
|
||||
code: payCode,
|
||||
appId: id,
|
||||
} as ChannelApi.PayChannelApi.Channel;
|
||||
}
|
||||
await formApi.setValues(record);
|
||||
}
|
||||
|
||||
modalApi.modalLoading(false);
|
||||
},
|
||||
});
|
||||
|
||||
async function handleConfirm() {
|
||||
try {
|
||||
modalApi.modalLoading(true);
|
||||
const { valid } = await formApi.validate();
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
// getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
|
||||
const data = cloneDeep(
|
||||
await formApi.getValues(),
|
||||
) as ChannelApi.PayChannelApi.Channel;
|
||||
data.config = JSON.stringify(data.config || { name: 'mock-conf' });
|
||||
await (isUpdate.value
|
||||
? ChannelApi.updateChannel(data)
|
||||
: ChannelApi.createChannel(data));
|
||||
emit('reload');
|
||||
await handleCancel();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
modalApi.modalLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleCancel() {
|
||||
modalApi.close();
|
||||
await formApi.resetForm();
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<BasicModal :close-on-click-modal="false" :title="title" class="w-[40%]">
|
||||
<BasicForm />
|
||||
</BasicModal>
|
||||
</template>
|
|
@ -0,0 +1,105 @@
|
|||
<script lang="ts" setup>
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
import { $t } from '@vben/locales';
|
||||
import { cloneDeep } from '@vben/utils';
|
||||
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
import * as ChannelApi from '#/api/pay/channel';
|
||||
|
||||
import { modalMockSchema } from './data';
|
||||
|
||||
const emit = defineEmits<{ reload: [] }>();
|
||||
|
||||
const isUpdate = ref(false);
|
||||
const title = computed(() => {
|
||||
return isUpdate.value
|
||||
? $t('ui.actionTitle.edit', '应用')
|
||||
: $t('ui.actionTitle.create', '应用');
|
||||
});
|
||||
|
||||
const [BasicForm, formApi] = useVbenForm({
|
||||
commonConfig: {
|
||||
// 默认占满两列
|
||||
formItemClass: 'col-span-2',
|
||||
// 默认label宽度 px
|
||||
labelWidth: 160,
|
||||
// 通用配置项 会影响到所有表单项
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
},
|
||||
},
|
||||
schema: modalMockSchema(),
|
||||
showDefaultActions: false,
|
||||
wrapperClass: 'grid-cols-2',
|
||||
});
|
||||
|
||||
const [BasicModal, modalApi] = useVbenModal({
|
||||
fullscreenButton: false,
|
||||
onCancel: handleCancel,
|
||||
onConfirm: handleConfirm,
|
||||
onOpenChange: async (isOpen) => {
|
||||
if (!isOpen) {
|
||||
return null;
|
||||
}
|
||||
modalApi.modalLoading(true);
|
||||
|
||||
const { id, payCode } = modalApi.getData() as {
|
||||
id?: number;
|
||||
payCode?: string;
|
||||
};
|
||||
|
||||
if (id && payCode) {
|
||||
let record = await ChannelApi.getChannel(id, payCode);
|
||||
isUpdate.value = !!record;
|
||||
if (isUpdate.value) {
|
||||
record.config = JSON.parse(record.config);
|
||||
} else {
|
||||
record = {
|
||||
feeRate: 0,
|
||||
code: payCode,
|
||||
appId: id,
|
||||
} as ChannelApi.PayChannelApi.Channel;
|
||||
}
|
||||
await formApi.setValues(record);
|
||||
}
|
||||
|
||||
modalApi.modalLoading(false);
|
||||
},
|
||||
});
|
||||
|
||||
async function handleConfirm() {
|
||||
try {
|
||||
modalApi.modalLoading(true);
|
||||
const { valid } = await formApi.validate();
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
// getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
|
||||
const data = cloneDeep(
|
||||
await formApi.getValues(),
|
||||
) as ChannelApi.PayChannelApi.Channel;
|
||||
data.config = JSON.stringify(data.config || { name: 'mock-conf' });
|
||||
await (isUpdate.value
|
||||
? ChannelApi.updateChannel(data)
|
||||
: ChannelApi.createChannel(data));
|
||||
emit('reload');
|
||||
await handleCancel();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
modalApi.modalLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleCancel() {
|
||||
modalApi.close();
|
||||
await formApi.resetForm();
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<BasicModal :close-on-click-modal="false" :title="title" class="w-[40%]">
|
||||
<BasicForm />
|
||||
</BasicModal>
|
||||
</template>
|
|
@ -0,0 +1,148 @@
|
|||
<script lang="ts" setup>
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
import { $t } from '@vben/locales';
|
||||
import { cloneDeep } from '@vben/utils';
|
||||
|
||||
import { Row, Space, Textarea } from 'ant-design-vue';
|
||||
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
import * as ChannelApi from '#/api/pay/channel';
|
||||
import { FileUpload } from '#/components/upload';
|
||||
|
||||
import { modalWeixinSchema } from './data';
|
||||
|
||||
const emit = defineEmits<{ reload: [] }>();
|
||||
|
||||
const isUpdate = ref(false);
|
||||
const title = computed(() => {
|
||||
return isUpdate.value
|
||||
? $t('ui.actionTitle.edit', '应用')
|
||||
: $t('ui.actionTitle.create', '应用');
|
||||
});
|
||||
|
||||
const [BasicForm, formApi] = useVbenForm({
|
||||
commonConfig: {
|
||||
// 默认占满两列
|
||||
formItemClass: 'col-span-2',
|
||||
// 默认label宽度 px
|
||||
labelWidth: 160,
|
||||
// 通用配置项 会影响到所有表单项
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
},
|
||||
},
|
||||
schema: modalWeixinSchema(),
|
||||
showDefaultActions: false,
|
||||
wrapperClass: 'grid-cols-2',
|
||||
});
|
||||
|
||||
const [BasicModal, modalApi] = useVbenModal({
|
||||
fullscreenButton: false,
|
||||
onCancel: handleCancel,
|
||||
onConfirm: handleConfirm,
|
||||
onOpenChange: async (isOpen) => {
|
||||
if (!isOpen) {
|
||||
return null;
|
||||
}
|
||||
modalApi.modalLoading(true);
|
||||
|
||||
const { id, payCode } = modalApi.getData() as {
|
||||
id?: number;
|
||||
payCode?: string;
|
||||
};
|
||||
|
||||
if (id && payCode) {
|
||||
const record =
|
||||
(await ChannelApi.getChannel(id, payCode)) ||
|
||||
({} as ChannelApi.PayChannelApi.Channel);
|
||||
isUpdate.value = !!record;
|
||||
record.code = payCode;
|
||||
if (isUpdate.value) {
|
||||
record.config = JSON.parse(record.config);
|
||||
}
|
||||
await formApi.setValues(record);
|
||||
}
|
||||
|
||||
modalApi.modalLoading(false);
|
||||
},
|
||||
});
|
||||
|
||||
async function handleConfirm() {
|
||||
try {
|
||||
modalApi.modalLoading(true);
|
||||
const { valid } = await formApi.validate();
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
// getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
|
||||
const data = cloneDeep(
|
||||
await formApi.getValues(),
|
||||
) as ChannelApi.PayChannelApi.Channel;
|
||||
data.config = JSON.stringify(data.config);
|
||||
await (isUpdate.value
|
||||
? ChannelApi.updateChannel(data)
|
||||
: ChannelApi.createChannel(data));
|
||||
emit('reload');
|
||||
await handleCancel();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
modalApi.modalLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleCancel() {
|
||||
modalApi.close();
|
||||
await formApi.resetForm();
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<BasicModal :close-on-click-modal="false" :title="title" class="w-[40%]">
|
||||
<BasicForm>
|
||||
<template #keyContent="slotProps">
|
||||
<Space style="width: 100%" direction="vertical">
|
||||
<Row>
|
||||
<Textarea
|
||||
v-bind="slotProps"
|
||||
:rows="8"
|
||||
placeholder="请上传 apiclient_cert.p12 证书"
|
||||
/>
|
||||
</Row>
|
||||
<Row>
|
||||
<FileUpload
|
||||
:accept="['crt']"
|
||||
@return-text="
|
||||
(text: string) => {
|
||||
slotProps.setValue(text);
|
||||
}
|
||||
"
|
||||
/>
|
||||
</Row>
|
||||
</Space>
|
||||
</template>
|
||||
<template #privateKeyContent="slotProps">
|
||||
<Space style="width: 100%" direction="vertical">
|
||||
<Row>
|
||||
<Textarea
|
||||
v-bind="slotProps"
|
||||
:rows="8"
|
||||
placeholder="请上传 apiclient_key.pem 证书"
|
||||
/>
|
||||
</Row>
|
||||
<Row>
|
||||
<FileUpload
|
||||
:accept="['.crt']"
|
||||
@return-text="
|
||||
(text: string) => {
|
||||
slotProps.setValue(text);
|
||||
}
|
||||
"
|
||||
/>
|
||||
</Row>
|
||||
</Space>
|
||||
</template>
|
||||
</BasicForm>
|
||||
</BasicModal>
|
||||
</template>
|
|
@ -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,
|
||||
},
|
||||
];
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
|
@ -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 };
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 };
|
||||
|
|
|
@ -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({
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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` | - |
|
||||
|
|
|
@ -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: '商户公钥应用证书',
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
|
|
|
@ -0,0 +1,16 @@
|
|||
<script lang="ts" setup>
|
||||
import { EllipsisText } from '@vben/common-ui';
|
||||
|
||||
const text = `
|
||||
Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案,目标是为开发中大型项目提供开箱即用的解决方案。
|
||||
`;
|
||||
</script>
|
||||
<template>
|
||||
<EllipsisText :line="2" :tooltip-when-ellipsis="true">
|
||||
{{ text }}
|
||||
</EllipsisText>
|
||||
|
||||
<EllipsisText :line="3" :tooltip-when-ellipsis="true">
|
||||
{{ text }}
|
||||
</EllipsisText>
|
||||
</template>
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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": {
|
||||
|
|
|
@ -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: {
|
||||
|
|
|
@ -134,6 +134,8 @@ interface HeaderPreferences {
|
|||
interface LogoPreferences {
|
||||
/** logo是否可见 */
|
||||
enable: boolean;
|
||||
/** logo图片适应方式 */
|
||||
fit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
|
||||
/** logo地址 */
|
||||
source: string;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -263,6 +263,8 @@ export interface FormSchema<
|
|||
renderComponentContent?: RenderComponentContentType;
|
||||
/** 字段规则 */
|
||||
rules?: FormSchemaRuleType;
|
||||
/** 自定义插槽名,如果不指定则使用fieldName */
|
||||
slotName?: string;
|
||||
/** 后缀 */
|
||||
suffix?: CustomRenderType;
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -124,6 +124,14 @@ export class ModalApi {
|
|||
return this.setState({ submitting: isLocked });
|
||||
}
|
||||
|
||||
modalLoading(loading: boolean) {
|
||||
this.store.setState((prev) => ({
|
||||
...prev,
|
||||
confirmLoading: loading,
|
||||
loading,
|
||||
}));
|
||||
}
|
||||
|
||||
/**
|
||||
* 取消操作
|
||||
*/
|
||||
|
|
|
@ -5,6 +5,8 @@ import type {
|
|||
AvatarRootProps,
|
||||
} from 'radix-vue';
|
||||
|
||||
import type { CSSProperties } from 'vue';
|
||||
|
||||
import type { ClassType } from '@vben-core/typings';
|
||||
|
||||
import { computed } from 'vue';
|
||||
|
@ -16,6 +18,7 @@ interface Props extends AvatarFallbackProps, AvatarImageProps, AvatarRootProps {
|
|||
class?: ClassType;
|
||||
dot?: boolean;
|
||||
dotClass?: ClassType;
|
||||
fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
|
||||
size?: number;
|
||||
}
|
||||
|
||||
|
@ -28,6 +31,15 @@ const props = withDefaults(defineProps<Props>(), {
|
|||
as: 'button',
|
||||
dot: false,
|
||||
dotClass: 'bg-green-500',
|
||||
fit: 'cover',
|
||||
});
|
||||
|
||||
const imageStyle = computed<CSSProperties>(() => {
|
||||
const { fit } = props;
|
||||
if (fit) {
|
||||
return { objectFit: fit };
|
||||
}
|
||||
return {};
|
||||
});
|
||||
|
||||
const text = computed(() => {
|
||||
|
@ -51,7 +63,7 @@ const rootStyle = computed(() => {
|
|||
class="relative flex flex-shrink-0 items-center"
|
||||
>
|
||||
<Avatar :class="props.class" class="size-full">
|
||||
<AvatarImage :alt="alt" :src="src" />
|
||||
<AvatarImage :alt="alt" :src="src" :style="imageStyle" />
|
||||
<AvatarFallback>{{ text }}</AvatarFallback>
|
||||
</Avatar>
|
||||
<span
|
||||
|
|
|
@ -6,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">
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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"
|
||||
>
|
||||
|
|
|
@ -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 (
|
||||
|
|
|
@ -20,7 +20,8 @@
|
|||
"detail": "详情{0}",
|
||||
"view": "查看{0}",
|
||||
"import": "导入",
|
||||
"export": "导出"
|
||||
"export": "导出",
|
||||
"detail": "详情"
|
||||
},
|
||||
"actionMessage": {
|
||||
"deleteConfirm": "确定删除 {0} 吗?",
|
||||
|
|
|
@ -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,
|
||||
);
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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:"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 };
|
||||
|
|
|
@ -0,0 +1,10 @@
|
|||
import { requestClient } from '#/api/request';
|
||||
|
||||
/**
|
||||
* 发起请求
|
||||
*/
|
||||
async function getBigIntData() {
|
||||
return requestClient.get('/demo/bigint');
|
||||
}
|
||||
|
||||
export { getBigIntData };
|
|
@ -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;
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
// 面包屑导航
|
||||
|
|
|
@ -111,10 +111,11 @@ const loginRef =
|
|||
async function onSubmit(params: Recordable<any>) {
|
||||
authStore.authLogin(params).catch(() => {
|
||||
// 登陆失败,刷新验证码的演示
|
||||
|
||||
const formApi = loginRef.value?.getFormApi();
|
||||
// 重置验证码组件的值
|
||||
formApi?.setFieldValue('captcha', false, false);
|
||||
// 使用表单API获取验证码组件实例,并调用其resume方法来重置验证码
|
||||
loginRef.value
|
||||
?.getFormApi()
|
||||
formApi
|
||||
?.getFieldComponentRef<InstanceType<typeof SliderCaptcha>>('captcha')
|
||||
?.resume();
|
||||
});
|
||||
|
|
|
@ -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>
|
|
@ -134,7 +134,7 @@ function handleClick(
|
|||
}
|
||||
case 'componentRef': {
|
||||
// 获取下拉组件的实例,并调用它的focus方法
|
||||
formApi.getFieldComponentRef<RefSelectProps>('fieldOptions')?.focus();
|
||||
formApi.getFieldComponentRef<RefSelectProps>('fieldOptions')?.focus?.();
|
||||
break;
|
||||
}
|
||||
case 'disabled': {
|
||||
|
|
|
@ -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'),
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue