xingyu
28
apps/backend-mock/api/demo/bigint.ts
Normal file
28
apps/backend-mock/api/demo/bigint.ts
Normal file
@@ -0,0 +1,28 @@
|
||||
export default eventHandler(async (event) => {
|
||||
const userinfo = verifyAccessToken(event);
|
||||
if (!userinfo) {
|
||||
return unAuthorizedResponse(event);
|
||||
}
|
||||
const data = `
|
||||
{
|
||||
"code": 0,
|
||||
"message": "success",
|
||||
"data": [
|
||||
{
|
||||
"id": 123456789012345678901234567890123456789012345678901234567890,
|
||||
"name": "John Doe",
|
||||
"age": 30,
|
||||
"email": "john-doe@demo.com"
|
||||
},
|
||||
{
|
||||
"id": 987654321098765432109876543210987654321098765432109876543210,
|
||||
"name": "Jane Smith",
|
||||
"age": 25,
|
||||
"email": "jane@demo.com"
|
||||
}
|
||||
]
|
||||
}
|
||||
`;
|
||||
setHeader(event, 'Content-Type', 'application/json');
|
||||
return data;
|
||||
});
|
||||
@@ -26,7 +26,6 @@
|
||||
"#/*": "./src/*"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ant-design/icons-vue": "catalog:",
|
||||
"@form-create/ant-design-vue": "catalog:",
|
||||
"@form-create/antd-designer": "catalog:",
|
||||
"@tinymce/tinymce-vue": "catalog:",
|
||||
@@ -54,7 +53,8 @@
|
||||
"pinia": "catalog:",
|
||||
"vue": "catalog:",
|
||||
"vue-dompurify-html": "catalog:",
|
||||
"vue-router": "catalog:"
|
||||
"vue-router": "catalog:",
|
||||
"vue3-signature": "catalog:"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/crypto-js": "catalog:"
|
||||
|
||||
@@ -11,61 +11,61 @@ 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[];
|
||||
|
||||
@@ -268,7 +268,7 @@ setupVbenVxeTable({
|
||||
// 这里可以自行扩展 vxe-table 的全局配置，比如自定义格式化
|
||||
// vxeUI.formats.add
|
||||
// add by 星语：数量格式化，例如说：金额
|
||||
vxeUI.formats.add('formatAmount', {
|
||||
vxeUI.formats.add('formatNumber', {
|
||||
cellFormatMethod({ cellValue }, digits = 2) {
|
||||
if (cellValue === null || cellValue === undefined) {
|
||||
return '';
|
||||
|
||||
@@ -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}`);
|
||||
};
|
||||
|
||||
/** 退回 */
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -4,7 +4,7 @@ import type { DataNode } from 'ant-design-vue/es/tree';
|
||||
|
||||
import type { SystemDeptApi } from '#/api/system/dept';
|
||||
|
||||
import { defineProps, ref } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
import { handleTree } from '@vben/utils';
|
||||
|
||||
@@ -0,0 +1,284 @@
|
||||
<script setup lang="ts">
|
||||
import type { Ref } from 'vue';
|
||||
|
||||
import type { SimpleFlowNode } from '../../consts';
|
||||
|
||||
import type { SystemDeptApi } from '#/api/system/dept';
|
||||
import type { SystemUserApi } from '#/api/system/user';
|
||||
|
||||
import { inject, ref } from 'vue';
|
||||
|
||||
import { useVbenDrawer } from '@vben/common-ui';
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import {
|
||||
Divider,
|
||||
Input,
|
||||
Radio,
|
||||
RadioGroup,
|
||||
TabPane,
|
||||
Tabs,
|
||||
Tooltip,
|
||||
TypographyText,
|
||||
} from 'ant-design-vue';
|
||||
|
||||
import { BpmModelFormType } from '#/utils';
|
||||
|
||||
import {
|
||||
FieldPermissionType,
|
||||
NodeType,
|
||||
START_USER_BUTTON_SETTING,
|
||||
} from '../../consts';
|
||||
import {
|
||||
useFormFieldsPermission,
|
||||
useNodeName,
|
||||
useWatchNode,
|
||||
} from '../../helpers';
|
||||
|
||||
defineOptions({ name: 'StartUserNodeConfig' });
|
||||
const props = defineProps({
|
||||
flowNode: {
|
||||
type: Object as () => SimpleFlowNode,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
// 可发起流程的用户编号
|
||||
const startUserIds = inject<Ref<any[]>>('startUserIds');
|
||||
// 可发起流程的部门编号
|
||||
const startDeptIds = inject<Ref<any[]>>('startDeptIds');
|
||||
// 用户列表
|
||||
const userOptions = inject<Ref<SystemUserApi.User[]>>('userList');
|
||||
// 部门列表
|
||||
const deptOptions = inject<Ref<SystemDeptApi.Dept[]>>('deptList');
|
||||
// 当前节点
|
||||
const currentNode = useWatchNode(props);
|
||||
// 节点名称
|
||||
const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
|
||||
NodeType.COPY_TASK_NODE,
|
||||
);
|
||||
// 激活的 Tab 标签页
|
||||
const activeTabName = ref('user');
|
||||
// 表单字段权限配置
|
||||
const { formType, fieldsPermissionConfig, getNodeConfigFormFields } =
|
||||
useFormFieldsPermission(FieldPermissionType.WRITE);
|
||||
const getUserNicknames = (userIds: number[]): string => {
|
||||
if (!userIds || userIds.length === 0) {
|
||||
return '';
|
||||
}
|
||||
const nicknames: string[] = [];
|
||||
userIds.forEach((userId) => {
|
||||
const found = userOptions?.value.find((item) => item.id === userId);
|
||||
if (found && found.nickname) {
|
||||
nicknames.push(found.nickname);
|
||||
}
|
||||
});
|
||||
return nicknames.join(',');
|
||||
};
|
||||
|
||||
const getDeptNames = (deptIds: number[]): string => {
|
||||
if (!deptIds || deptIds.length === 0) {
|
||||
return '';
|
||||
}
|
||||
const deptNames: string[] = [];
|
||||
deptIds.forEach((deptId) => {
|
||||
const found = deptOptions?.value.find((item) => item.id === deptId);
|
||||
if (found && found.name) {
|
||||
deptNames.push(found.name);
|
||||
}
|
||||
});
|
||||
return deptNames.join(',');
|
||||
};
|
||||
|
||||
// 使用 VbenDrawer
|
||||
const [Drawer, drawerApi] = useVbenDrawer({
|
||||
header: false,
|
||||
closable: false,
|
||||
onCancel() {
|
||||
drawerApi.close();
|
||||
},
|
||||
onConfirm() {
|
||||
saveConfig();
|
||||
},
|
||||
});
|
||||
|
||||
// 保存配置
|
||||
const saveConfig = async () => {
|
||||
activeTabName.value = 'user';
|
||||
currentNode.value.name = nodeName.value!;
|
||||
currentNode.value.showText = '已设置';
|
||||
// 设置表单权限
|
||||
currentNode.value.fieldsPermission = fieldsPermissionConfig.value;
|
||||
// 设置发起人的按钮权限
|
||||
currentNode.value.buttonsSetting = START_USER_BUTTON_SETTING;
|
||||
drawerApi.close();
|
||||
return true;
|
||||
};
|
||||
|
||||
// 显示发起人节点配置，由父组件传过来
|
||||
const showStartUserNodeConfig = (node: SimpleFlowNode) => {
|
||||
nodeName.value = node.name;
|
||||
// 表单字段权限
|
||||
getNodeConfigFormFields(node.fieldsPermission);
|
||||
drawerApi.open();
|
||||
};
|
||||
|
||||
/** 批量更新权限 */
|
||||
const updatePermission = (type: string) => {
|
||||
fieldsPermissionConfig.value.forEach((field) => {
|
||||
if (type === 'READ') {
|
||||
field.permission = FieldPermissionType.READ;
|
||||
} else if (type === 'WRITE') {
|
||||
field.permission = FieldPermissionType.WRITE;
|
||||
} else {
|
||||
field.permission = FieldPermissionType.NONE;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 暴露方法给父组件
|
||||
*/
|
||||
defineExpose({ showStartUserNodeConfig });
|
||||
</script>
|
||||
<template>
|
||||
<Drawer>
|
||||
<div class="config-header">
|
||||
<!-- TODO v-mountedFocus 自动聚集 需要迁移一下 -->
|
||||
<Input
|
||||
v-if="showInput"
|
||||
type="text"
|
||||
class="config-editable-input"
|
||||
@blur="blurEvent()"
|
||||
v-model:value="nodeName"
|
||||
:placeholder="nodeName"
|
||||
/>
|
||||
<div v-else class="node-name">
|
||||
{{ nodeName }}
|
||||
<IconifyIcon
|
||||
class="ml-1"
|
||||
icon="ep:edit-pen"
|
||||
:size="16"
|
||||
@click="clickIcon()"
|
||||
/>
|
||||
</div>
|
||||
<Divider />
|
||||
</div>
|
||||
|
||||
<Tabs v-model:active-key="activeTabName" type="card">
|
||||
<TabPane tab="权限" key="user">
|
||||
<TypographyText
|
||||
v-if="
|
||||
(!startUserIds || startUserIds.length === 0) &&
|
||||
(!startDeptIds || startDeptIds.length === 0)
|
||||
"
|
||||
>
|
||||
全部成员可以发起流程
|
||||
</TypographyText>
|
||||
<div v-else-if="startUserIds && startUserIds.length > 0">
|
||||
<TypographyText v-if="startUserIds.length === 1">
|
||||
{{ getUserNicknames(startUserIds) }} 可发起流程
|
||||
</TypographyText>
|
||||
<TypographyText v-else>
|
||||
<Tooltip
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
placement="top"
|
||||
:content="getUserNicknames(startUserIds)"
|
||||
>
|
||||
{{ getUserNicknames(startUserIds.slice(0, 2)) }} 等
|
||||
{{ startUserIds.length }} 人可发起流程
|
||||
</Tooltip>
|
||||
</TypographyText>
|
||||
</div>
|
||||
<div v-else-if="startDeptIds && startDeptIds.length > 0">
|
||||
<TypographyText v-if="startDeptIds.length === 1">
|
||||
{{ getDeptNames(startDeptIds) }} 可发起流程
|
||||
</TypographyText>
|
||||
<TypographyText v-else>
|
||||
<Tooltip
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
placement="top"
|
||||
:content="getDeptNames(startDeptIds)"
|
||||
>
|
||||
{{ getDeptNames(startDeptIds.slice(0, 2)) }} 等
|
||||
{{ startDeptIds.length }} 个部门可发起流程
|
||||
</Tooltip>
|
||||
</TypographyText>
|
||||
</div>
|
||||
</TabPane>
|
||||
<TabPane
|
||||
tab="表单字段权限"
|
||||
key="fields"
|
||||
v-if="formType === BpmModelFormType.NORMAL"
|
||||
>
|
||||
<div class="field-setting-pane">
|
||||
<div class="field-setting-desc">字段权限</div>
|
||||
<div class="field-permit-title">
|
||||
<div class="setting-title-label first-title">字段名称</div>
|
||||
<div class="other-titles">
|
||||
<span
|
||||
class="setting-title-label cursor-pointer"
|
||||
@click="updatePermission('READ')"
|
||||
>
|
||||
只读
|
||||
</span>
|
||||
<span
|
||||
class="setting-title-label cursor-pointer"
|
||||
@click="updatePermission('WRITE')"
|
||||
>
|
||||
可编辑
|
||||
</span>
|
||||
<span
|
||||
class="setting-title-label cursor-pointer"
|
||||
@click="updatePermission('NONE')"
|
||||
>
|
||||
隐藏
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="field-setting-item"
|
||||
v-for="(item, index) in fieldsPermissionConfig"
|
||||
:key="index"
|
||||
>
|
||||
<div class="field-setting-item-label">{{ item.title }}</div>
|
||||
<RadioGroup
|
||||
class="field-setting-item-group"
|
||||
v-model:value="item.permission"
|
||||
>
|
||||
<div class="item-radio-wrap">
|
||||
<Radio
|
||||
:value="FieldPermissionType.READ"
|
||||
size="large"
|
||||
:label="FieldPermissionType.READ"
|
||||
>
|
||||
<span></span>
|
||||
</Radio>
|
||||
</div>
|
||||
<div class="item-radio-wrap">
|
||||
<Radio
|
||||
:value="FieldPermissionType.WRITE"
|
||||
size="large"
|
||||
:label="FieldPermissionType.WRITE"
|
||||
>
|
||||
<span></span>
|
||||
</Radio>
|
||||
</div>
|
||||
<div class="item-radio-wrap">
|
||||
<Radio
|
||||
:value="FieldPermissionType.NONE"
|
||||
size="large"
|
||||
:label="FieldPermissionType.NONE"
|
||||
>
|
||||
<span></span>
|
||||
</Radio>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
</div>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
</Drawer>
|
||||
</template>
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,47 @@
|
||||
<script setup lang="ts">
|
||||
import type { Ref } from 'vue';
|
||||
|
||||
import type { SimpleFlowNode } from '../../consts';
|
||||
|
||||
import { inject, ref } from 'vue';
|
||||
|
||||
import { useTaskStatusClass, useWatchNode } from '../../helpers';
|
||||
|
||||
defineOptions({ name: 'EndEventNode' });
|
||||
const props = defineProps({
|
||||
flowNode: {
|
||||
type: Object as () => SimpleFlowNode,
|
||||
default: () => null,
|
||||
},
|
||||
});
|
||||
// 监控节点变化
|
||||
const currentNode = useWatchNode(props);
|
||||
// 是否只读
|
||||
const readonly = inject<Boolean>('readonly');
|
||||
const processInstance = inject<Ref<any>>('processInstance', ref({}));
|
||||
|
||||
const processInstanceInfos = ref<any[]>([]); // 流程的审批信息
|
||||
|
||||
const nodeClick = () => {
|
||||
if (readonly && processInstance && processInstance.value) {
|
||||
console.warn(
|
||||
'TODO 只读模式，弹窗显示审批信息',
|
||||
processInstance.value,
|
||||
processInstanceInfos.value,
|
||||
);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<div class="end-node-wrapper">
|
||||
<div
|
||||
class="end-node-box cursor-pointer"
|
||||
:class="`${useTaskStatusClass(currentNode?.activityStatus)}`"
|
||||
@click="nodeClick"
|
||||
>
|
||||
<span class="node-fixed-name" title="结束">结束</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- TODO 审批信息 -->
|
||||
</template>
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,338 @@
|
||||
<script setup lang="ts">
|
||||
import type { SimpleFlowNode } from '../../consts';
|
||||
|
||||
import { inject, ref } from 'vue';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
import { cloneDeep, buildShortUUID as generateUUID } from '@vben/utils';
|
||||
|
||||
import { message, Popover } from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
ApproveMethodType,
|
||||
AssignEmptyHandlerType,
|
||||
AssignStartUserHandlerType,
|
||||
ConditionType,
|
||||
DEFAULT_CONDITION_GROUP_VALUE,
|
||||
NODE_DEFAULT_NAME,
|
||||
NodeType,
|
||||
RejectHandlerType,
|
||||
} from '../../consts';
|
||||
|
||||
defineOptions({
|
||||
name: 'NodeHandler',
|
||||
});
|
||||
|
||||
const props = defineProps({
|
||||
childNode: {
|
||||
type: Object as () => SimpleFlowNode,
|
||||
default: null,
|
||||
},
|
||||
currentNode: {
|
||||
type: Object as () => SimpleFlowNode,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
const emits = defineEmits(['update:childNode']);
|
||||
const popoverShow = ref(false);
|
||||
const readonly = inject<Boolean>('readonly'); // 是否只读
|
||||
|
||||
const addNode = (type: number) => {
|
||||
// 校验：条件分支、包容分支后面，不允许直接添加并行分支
|
||||
if (
|
||||
type === NodeType.PARALLEL_BRANCH_NODE &&
|
||||
[NodeType.CONDITION_BRANCH_NODE, NodeType.INCLUSIVE_BRANCH_NODE].includes(
|
||||
props.currentNode?.type,
|
||||
)
|
||||
) {
|
||||
message.error('条件分支、包容分支后面，不允许直接添加并行分支');
|
||||
return;
|
||||
}
|
||||
|
||||
popoverShow.value = false;
|
||||
if (type === NodeType.USER_TASK_NODE || type === NodeType.TRANSACTOR_NODE) {
|
||||
const id = `Activity_${generateUUID()}`;
|
||||
const data: SimpleFlowNode = {
|
||||
id,
|
||||
name: NODE_DEFAULT_NAME.get(type) as string,
|
||||
showText: '',
|
||||
type,
|
||||
approveMethod: ApproveMethodType.SEQUENTIAL_APPROVE,
|
||||
// 超时处理
|
||||
rejectHandler: {
|
||||
type: RejectHandlerType.FINISH_PROCESS,
|
||||
},
|
||||
timeoutHandler: {
|
||||
enable: false,
|
||||
},
|
||||
assignEmptyHandler: {
|
||||
type: AssignEmptyHandlerType.APPROVE,
|
||||
},
|
||||
assignStartUserHandlerType: AssignStartUserHandlerType.START_USER_AUDIT,
|
||||
childNode: props.childNode,
|
||||
taskCreateListener: {
|
||||
enable: false,
|
||||
},
|
||||
taskAssignListener: {
|
||||
enable: false,
|
||||
},
|
||||
taskCompleteListener: {
|
||||
enable: false,
|
||||
},
|
||||
};
|
||||
emits('update:childNode', data);
|
||||
}
|
||||
if (type === NodeType.COPY_TASK_NODE) {
|
||||
const data: SimpleFlowNode = {
|
||||
id: `Activity_${generateUUID()}`,
|
||||
name: NODE_DEFAULT_NAME.get(NodeType.COPY_TASK_NODE) as string,
|
||||
showText: '',
|
||||
type: NodeType.COPY_TASK_NODE,
|
||||
childNode: props.childNode,
|
||||
};
|
||||
emits('update:childNode', data);
|
||||
}
|
||||
if (type === NodeType.CONDITION_BRANCH_NODE) {
|
||||
const data: SimpleFlowNode = {
|
||||
name: '条件分支',
|
||||
type: NodeType.CONDITION_BRANCH_NODE,
|
||||
id: `GateWay_${generateUUID()}`,
|
||||
childNode: props.childNode,
|
||||
conditionNodes: [
|
||||
{
|
||||
id: `Flow_${generateUUID()}`,
|
||||
name: '条件1',
|
||||
showText: '',
|
||||
type: NodeType.CONDITION_NODE,
|
||||
childNode: undefined,
|
||||
conditionSetting: {
|
||||
defaultFlow: false,
|
||||
conditionType: ConditionType.RULE,
|
||||
conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
|
||||
},
|
||||
},
|
||||
{
|
||||
id: `Flow_${generateUUID()}`,
|
||||
name: '其它情况',
|
||||
showText: '未满足其它条件时，将进入此分支',
|
||||
type: NodeType.CONDITION_NODE,
|
||||
childNode: undefined,
|
||||
conditionSetting: {
|
||||
defaultFlow: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
emits('update:childNode', data);
|
||||
}
|
||||
if (type === NodeType.PARALLEL_BRANCH_NODE) {
|
||||
const data: SimpleFlowNode = {
|
||||
name: '并行分支',
|
||||
type: NodeType.PARALLEL_BRANCH_NODE,
|
||||
id: `GateWay_${generateUUID()}`,
|
||||
childNode: props.childNode,
|
||||
conditionNodes: [
|
||||
{
|
||||
id: `Flow_${generateUUID()}`,
|
||||
name: '并行1',
|
||||
showText: '无需配置条件同时执行',
|
||||
type: NodeType.CONDITION_NODE,
|
||||
childNode: undefined,
|
||||
},
|
||||
{
|
||||
id: `Flow_${generateUUID()}`,
|
||||
name: '并行2',
|
||||
showText: '无需配置条件同时执行',
|
||||
type: NodeType.CONDITION_NODE,
|
||||
childNode: undefined,
|
||||
},
|
||||
],
|
||||
};
|
||||
emits('update:childNode', data);
|
||||
}
|
||||
if (type === NodeType.INCLUSIVE_BRANCH_NODE) {
|
||||
const data: SimpleFlowNode = {
|
||||
name: '包容分支',
|
||||
type: NodeType.INCLUSIVE_BRANCH_NODE,
|
||||
id: `GateWay_${generateUUID()}`,
|
||||
childNode: props.childNode,
|
||||
conditionNodes: [
|
||||
{
|
||||
id: `Flow_${generateUUID()}`,
|
||||
name: '包容条件1',
|
||||
showText: '',
|
||||
type: NodeType.CONDITION_NODE,
|
||||
childNode: undefined,
|
||||
conditionSetting: {
|
||||
defaultFlow: false,
|
||||
conditionType: ConditionType.RULE,
|
||||
conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
|
||||
},
|
||||
},
|
||||
{
|
||||
id: `Flow_${generateUUID()}`,
|
||||
name: '其它情况',
|
||||
showText: '未满足其它条件时，将进入此分支',
|
||||
type: NodeType.CONDITION_NODE,
|
||||
childNode: undefined,
|
||||
conditionSetting: {
|
||||
defaultFlow: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
emits('update:childNode', data);
|
||||
}
|
||||
if (type === NodeType.DELAY_TIMER_NODE) {
|
||||
const data: SimpleFlowNode = {
|
||||
id: `Activity_${generateUUID()}`,
|
||||
name: NODE_DEFAULT_NAME.get(NodeType.DELAY_TIMER_NODE) as string,
|
||||
showText: '',
|
||||
type: NodeType.DELAY_TIMER_NODE,
|
||||
childNode: props.childNode,
|
||||
};
|
||||
emits('update:childNode', data);
|
||||
}
|
||||
if (type === NodeType.ROUTER_BRANCH_NODE) {
|
||||
const data: SimpleFlowNode = {
|
||||
id: `GateWay_${generateUUID()}`,
|
||||
name: NODE_DEFAULT_NAME.get(NodeType.ROUTER_BRANCH_NODE) as string,
|
||||
showText: '',
|
||||
type: NodeType.ROUTER_BRANCH_NODE,
|
||||
childNode: props.childNode,
|
||||
};
|
||||
emits('update:childNode', data);
|
||||
}
|
||||
if (type === NodeType.TRIGGER_NODE) {
|
||||
const data: SimpleFlowNode = {
|
||||
id: `Activity_${generateUUID()}`,
|
||||
name: NODE_DEFAULT_NAME.get(NodeType.TRIGGER_NODE) as string,
|
||||
showText: '',
|
||||
type: NodeType.TRIGGER_NODE,
|
||||
childNode: props.childNode,
|
||||
};
|
||||
emits('update:childNode', data);
|
||||
}
|
||||
if (type === NodeType.CHILD_PROCESS_NODE) {
|
||||
const data: SimpleFlowNode = {
|
||||
id: `Activity_${generateUUID()}`,
|
||||
name: NODE_DEFAULT_NAME.get(NodeType.CHILD_PROCESS_NODE) as string,
|
||||
showText: '',
|
||||
type: NodeType.CHILD_PROCESS_NODE,
|
||||
childNode: props.childNode,
|
||||
childProcessSetting: {
|
||||
calledProcessDefinitionKey: '',
|
||||
calledProcessDefinitionName: '',
|
||||
async: false,
|
||||
skipStartUserNode: false,
|
||||
startUserSetting: {
|
||||
type: 1,
|
||||
},
|
||||
timeoutSetting: {
|
||||
enable: false,
|
||||
},
|
||||
multiInstanceSetting: {
|
||||
enable: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
emits('update:childNode', data);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<div class="node-handler-wrapper">
|
||||
<div class="node-handler">
|
||||
<Popover trigger="hover" placement="right" width="auto" v-if="!readonly">
|
||||
<template #content>
|
||||
<div class="handler-item-wrapper">
|
||||
<div class="handler-item" @click="addNode(NodeType.USER_TASK_NODE)">
|
||||
<div class="approve handler-item-icon">
|
||||
<span class="iconfont icon-approve icon-size"></span>
|
||||
</div>
|
||||
<div class="handler-item-text">审批人</div>
|
||||
</div>
|
||||
<div
|
||||
class="handler-item"
|
||||
@click="addNode(NodeType.TRANSACTOR_NODE)"
|
||||
>
|
||||
<div class="transactor handler-item-icon">
|
||||
<span class="iconfont icon-transactor icon-size"></span>
|
||||
</div>
|
||||
<div class="handler-item-text">办理人</div>
|
||||
</div>
|
||||
<div class="handler-item" @click="addNode(NodeType.COPY_TASK_NODE)">
|
||||
<div class="handler-item-icon copy">
|
||||
<span class="iconfont icon-size icon-copy"></span>
|
||||
</div>
|
||||
<div class="handler-item-text">抄送</div>
|
||||
</div>
|
||||
<div
|
||||
class="handler-item"
|
||||
@click="addNode(NodeType.CONDITION_BRANCH_NODE)"
|
||||
>
|
||||
<div class="handler-item-icon condition">
|
||||
<span class="iconfont icon-size icon-exclusive"></span>
|
||||
</div>
|
||||
<div class="handler-item-text">条件分支</div>
|
||||
</div>
|
||||
<div
|
||||
class="handler-item"
|
||||
@click="addNode(NodeType.PARALLEL_BRANCH_NODE)"
|
||||
>
|
||||
<div class="handler-item-icon parallel">
|
||||
<span class="iconfont icon-size icon-parallel"></span>
|
||||
</div>
|
||||
<div class="handler-item-text">并行分支</div>
|
||||
</div>
|
||||
<div
|
||||
class="handler-item"
|
||||
@click="addNode(NodeType.INCLUSIVE_BRANCH_NODE)"
|
||||
>
|
||||
<div class="handler-item-icon inclusive">
|
||||
<span class="iconfont icon-size icon-inclusive"></span>
|
||||
</div>
|
||||
<div class="handler-item-text">包容分支</div>
|
||||
</div>
|
||||
<div
|
||||
class="handler-item"
|
||||
@click="addNode(NodeType.DELAY_TIMER_NODE)"
|
||||
>
|
||||
<div class="handler-item-icon delay">
|
||||
<span class="iconfont icon-size icon-delay"></span>
|
||||
</div>
|
||||
<div class="handler-item-text">延迟器</div>
|
||||
</div>
|
||||
<div
|
||||
class="handler-item"
|
||||
@click="addNode(NodeType.ROUTER_BRANCH_NODE)"
|
||||
>
|
||||
<div class="handler-item-icon router">
|
||||
<span class="iconfont icon-size icon-router"></span>
|
||||
</div>
|
||||
<div class="handler-item-text">路由分支</div>
|
||||
</div>
|
||||
<div class="handler-item" @click="addNode(NodeType.TRIGGER_NODE)">
|
||||
<div class="handler-item-icon trigger">
|
||||
<span class="iconfont icon-size icon-trigger"></span>
|
||||
</div>
|
||||
<div class="handler-item-text">触发器</div>
|
||||
</div>
|
||||
<div
|
||||
class="handler-item"
|
||||
@click="addNode(NodeType.CHILD_PROCESS_NODE)"
|
||||
>
|
||||
<div class="handler-item-icon child-process">
|
||||
<span class="iconfont icon-size icon-child-process"></span>
|
||||
</div>
|
||||
<div class="handler-item-text">子流程</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="add-icon"><IconifyIcon icon="ep:plus" /></div>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,119 @@
|
||||
<script setup lang="ts">
|
||||
import type { Ref } from 'vue';
|
||||
|
||||
import type { SimpleFlowNode } from '../../consts';
|
||||
|
||||
import { inject, ref } from 'vue';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import { Input } from 'ant-design-vue';
|
||||
|
||||
import { NODE_DEFAULT_TEXT, NodeType } from '../../consts';
|
||||
import { useNodeName2, useTaskStatusClass, useWatchNode } from '../../helpers';
|
||||
import StartUserNodeConfig from '../nodes-config/start-user-node-config.vue';
|
||||
import NodeHandler from './node-handler.vue';
|
||||
|
||||
defineOptions({ name: 'StartUserNode' });
|
||||
const props = defineProps({
|
||||
flowNode: {
|
||||
type: Object as () => SimpleFlowNode,
|
||||
default: () => null,
|
||||
},
|
||||
});
|
||||
// 定义事件，更新父组件。
|
||||
// eslint-disable-next-line unused-imports/no-unused-vars, no-unused-vars
|
||||
const emits = defineEmits<{
|
||||
'update:modelValue': [node: SimpleFlowNode | undefined];
|
||||
}>();
|
||||
const readonly = inject<Boolean>('readonly'); // 是否只读
|
||||
const tasks = inject<Ref<any[]>>('tasks', ref([]));
|
||||
// 监控节点变化
|
||||
const currentNode = useWatchNode(props);
|
||||
// 节点名称编辑
|
||||
const { showInput, blurEvent, clickTitle } = useNodeName2(
|
||||
currentNode,
|
||||
NodeType.START_USER_NODE,
|
||||
);
|
||||
|
||||
const nodeSetting = ref();
|
||||
|
||||
// 任务的弹窗显示，用于只读模式
|
||||
const selectTasks = ref<any[] | undefined>([]); // 选中的任务数组
|
||||
|
||||
const nodeClick = () => {
|
||||
if (readonly) {
|
||||
// 只读模式，弹窗显示任务信息
|
||||
if (tasks && tasks.value) {
|
||||
console.warn(
|
||||
'TODO 只读模式，弹窗显示任务信息',
|
||||
tasks.value,
|
||||
selectTasks.value,
|
||||
);
|
||||
}
|
||||
} else {
|
||||
console.warn(
|
||||
'TODO 编辑模式，打开节点配置、把当前节点传递给配置组件',
|
||||
nodeSetting.value,
|
||||
);
|
||||
nodeSetting.value.showStartUserNodeConfig(currentNode.value);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<div class="node-wrapper">
|
||||
<div class="node-container">
|
||||
<div
|
||||
class="node-box"
|
||||
:class="[
|
||||
{ 'node-config-error': !currentNode.showText },
|
||||
`${useTaskStatusClass(currentNode?.activityStatus)}`,
|
||||
]"
|
||||
>
|
||||
<div class="node-title-container">
|
||||
<div class="node-title-icon start-user">
|
||||
<span class="iconfont icon-start-user"></span>
|
||||
</div>
|
||||
<Input
|
||||
v-if="!readonly && showInput"
|
||||
type="text"
|
||||
class="editable-title-input"
|
||||
@blur="blurEvent()"
|
||||
v-model:value="currentNode.name"
|
||||
:placeholder="currentNode.name"
|
||||
/>
|
||||
<div v-else class="node-title" @click="clickTitle">
|
||||
{{ currentNode.name }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="node-content" @click="nodeClick">
|
||||
<div
|
||||
class="node-text"
|
||||
:title="currentNode.showText"
|
||||
v-if="currentNode.showText"
|
||||
>
|
||||
{{ currentNode.showText }}
|
||||
</div>
|
||||
<div class="node-text" v-else>
|
||||
{{ NODE_DEFAULT_TEXT.get(NodeType.START_USER_NODE) }}
|
||||
</div>
|
||||
<IconifyIcon icon="ep:arrow-right-bold" v-if="!readonly" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
|
||||
<NodeHandler
|
||||
v-if="currentNode"
|
||||
v-model:child-node="currentNode.childNode"
|
||||
:current-node="currentNode"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<StartUserNodeConfig
|
||||
v-if="!readonly && currentNode"
|
||||
ref="nodeSetting"
|
||||
:flow-node="currentNode"
|
||||
/>
|
||||
<!-- 审批记录 TODO -->
|
||||
</template>
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,147 @@
|
||||
<script setup lang="ts">
|
||||
import type { SimpleFlowNode } from '../consts';
|
||||
|
||||
import { NodeType } from '../consts';
|
||||
import { useWatchNode } from '../helpers';
|
||||
import EndEventNode from './nodes/end-event-node.vue';
|
||||
import StartUserNode from './nodes/start-user-node.vue';
|
||||
|
||||
defineOptions({ name: 'ProcessNodeTree' });
|
||||
const props = defineProps({
|
||||
parentNode: {
|
||||
type: Object as () => SimpleFlowNode,
|
||||
default: () => null,
|
||||
},
|
||||
flowNode: {
|
||||
type: Object as () => SimpleFlowNode,
|
||||
default: () => null,
|
||||
},
|
||||
});
|
||||
const emits = defineEmits<{
|
||||
recursiveFindParentNode: [
|
||||
nodeList: SimpleFlowNode[],
|
||||
curentNode: SimpleFlowNode,
|
||||
nodeType: number,
|
||||
];
|
||||
'update:flowNode': [node: SimpleFlowNode | undefined];
|
||||
}>();
|
||||
|
||||
const currentNode = useWatchNode(props);
|
||||
|
||||
// 用于删除节点
|
||||
// eslint-disable-next-line unused-imports/no-unused-vars, no-unused-vars
|
||||
const handleModelValueUpdate = (updateValue: any) => {
|
||||
emits('update:flowNode', updateValue);
|
||||
};
|
||||
|
||||
// eslint-disable-next-line unused-imports/no-unused-vars, no-unused-vars
|
||||
const triggerFromParentNode = (
|
||||
nodeList: SimpleFlowNode[],
|
||||
nodeType: number,
|
||||
) => {
|
||||
emits('recursiveFindParentNode', nodeList, props.parentNode, nodeType);
|
||||
};
|
||||
|
||||
// 递归从父节点中查询匹配的节点
|
||||
const recursiveFindParentNode = (
|
||||
nodeList: SimpleFlowNode[],
|
||||
findNode: SimpleFlowNode,
|
||||
nodeType: number,
|
||||
) => {
|
||||
if (!findNode) {
|
||||
return;
|
||||
}
|
||||
if (findNode.type === NodeType.START_USER_NODE) {
|
||||
nodeList.push(findNode);
|
||||
return;
|
||||
}
|
||||
|
||||
if (findNode.type === nodeType) {
|
||||
nodeList.push(findNode);
|
||||
}
|
||||
emits('recursiveFindParentNode', nodeList, props.parentNode, nodeType);
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<!-- 发起人节点 -->
|
||||
<StartUserNode
|
||||
v-if="currentNode && currentNode.type === NodeType.START_USER_NODE"
|
||||
:flow-node="currentNode"
|
||||
/>
|
||||
<!-- 审批节点 -->
|
||||
<!-- <UserTaskNode
|
||||
v-if="
|
||||
currentNode &&
|
||||
(currentNode.type === NodeType.USER_TASK_NODE ||
|
||||
currentNode.type === NodeType.TRANSACTOR_NODE)
|
||||
"
|
||||
:flow-node="currentNode"
|
||||
@update:flow-node="handleModelValueUpdate"
|
||||
@find:parent-node="findFromParentNode"
|
||||
/> -->
|
||||
<!-- 抄送节点 -->
|
||||
<!-- <CopyTaskNode
|
||||
v-if="currentNode && currentNode.type === NodeType.COPY_TASK_NODE"
|
||||
:flow-node="currentNode"
|
||||
@update:flow-node="handleModelValueUpdate"
|
||||
/> -->
|
||||
<!-- 条件节点 -->
|
||||
<!-- <ExclusiveNode
|
||||
v-if="currentNode && currentNode.type === NodeType.CONDITION_BRANCH_NODE"
|
||||
:flow-node="currentNode"
|
||||
@update:model-value="handleModelValueUpdate"
|
||||
@find:parent-node="findFromParentNode"
|
||||
/> -->
|
||||
<!-- 并行节点 -->
|
||||
<!-- <ParallelNode
|
||||
v-if="currentNode && currentNode.type === NodeType.PARALLEL_BRANCH_NODE"
|
||||
:flow-node="currentNode"
|
||||
@update:model-value="handleModelValueUpdate"
|
||||
@find:parent-node="findFromParentNode"
|
||||
/> -->
|
||||
<!-- 包容分支节点 -->
|
||||
<!-- <InclusiveNode
|
||||
v-if="currentNode && currentNode.type === NodeType.INCLUSIVE_BRANCH_NODE"
|
||||
:flow-node="currentNode"
|
||||
@update:model-value="handleModelValueUpdate"
|
||||
@find:parent-node="findFromParentNode"
|
||||
/> -->
|
||||
<!-- 延迟器节点 -->
|
||||
<!-- <DelayTimerNode
|
||||
v-if="currentNode && currentNode.type === NodeType.DELAY_TIMER_NODE"
|
||||
:flow-node="currentNode"
|
||||
@update:flow-node="handleModelValueUpdate"
|
||||
/> -->
|
||||
<!-- 路由分支节点 -->
|
||||
<!-- <RouterNode
|
||||
v-if="currentNode && currentNode.type === NodeType.ROUTER_BRANCH_NODE"
|
||||
:flow-node="currentNode"
|
||||
@update:flow-node="handleModelValueUpdate"
|
||||
/> -->
|
||||
<!-- 触发器节点 -->
|
||||
<!-- <TriggerNode
|
||||
v-if="currentNode && currentNode.type === NodeType.TRIGGER_NODE"
|
||||
:flow-node="currentNode"
|
||||
@update:flow-node="handleModelValueUpdate"
|
||||
/> -->
|
||||
<!-- 子流程节点 -->
|
||||
<!-- <ChildProcessNode
|
||||
v-if="currentNode && currentNode.type === NodeType.CHILD_PROCESS_NODE"
|
||||
:flow-node="currentNode"
|
||||
@update:flow-node="handleModelValueUpdate"
|
||||
/> -->
|
||||
<!-- 递归显示孩子节点 -->
|
||||
<ProcessNodeTree
|
||||
v-if="currentNode && currentNode.childNode"
|
||||
v-model:flow-node="currentNode.childNode"
|
||||
:parent-node="currentNode"
|
||||
@recursive-find-parent-node="recursiveFindParentNode"
|
||||
/>
|
||||
|
||||
<!-- 结束节点 -->
|
||||
<EndEventNode
|
||||
v-if="currentNode && currentNode.type === NodeType.END_EVENT_NODE"
|
||||
:flow-node="currentNode"
|
||||
/>
|
||||
</template>
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,257 @@
|
||||
<script setup lang="ts">
|
||||
import type { Ref } from 'vue';
|
||||
|
||||
import type { SimpleFlowNode } from '../consts';
|
||||
|
||||
import type { BpmUserGroupApi } from '#/api/bpm/userGroup';
|
||||
import type { SystemDeptApi } from '#/api/system/dept';
|
||||
import type { SystemPostApi } from '#/api/system/post';
|
||||
import type { SystemRoleApi } from '#/api/system/role';
|
||||
import type { SystemUserApi } from '#/api/system/user';
|
||||
|
||||
import { inject, onMounted, provide, ref, watch } from 'vue';
|
||||
|
||||
import { handleTree } from '@vben/utils';
|
||||
|
||||
import { Button, Modal } from 'ant-design-vue';
|
||||
|
||||
import { getFormDetail } from '#/api/bpm/form';
|
||||
import { getUserGroupSimpleList } from '#/api/bpm/userGroup';
|
||||
import { getSimpleDeptList } from '#/api/system/dept';
|
||||
import { getSimplePostList } from '#/api/system/post';
|
||||
import { getSimpleRoleList } from '#/api/system/role';
|
||||
import { getSimpleUserList } from '#/api/system/user';
|
||||
import { BpmModelFormType } from '#/utils/constants';
|
||||
|
||||
import { NODE_DEFAULT_TEXT, NodeId, NodeType } from '../consts';
|
||||
import SimpleProcessModel from './simple-process-model.vue';
|
||||
|
||||
defineOptions({
|
||||
name: 'SimpleProcessDesigner',
|
||||
});
|
||||
|
||||
const props = defineProps({
|
||||
modelName: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: undefined,
|
||||
},
|
||||
// 流程表单 ID
|
||||
modelFormId: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: undefined,
|
||||
},
|
||||
// 表单类型
|
||||
modelFormType: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: BpmModelFormType.NORMAL,
|
||||
},
|
||||
// 可发起流程的人员编号
|
||||
startUserIds: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: undefined,
|
||||
},
|
||||
// 可发起流程的部门编号
|
||||
startDeptIds: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: undefined,
|
||||
},
|
||||
});
|
||||
// 保存成功事件
|
||||
const emits = defineEmits(['success']);
|
||||
const processData = inject('processData') as Ref;
|
||||
const loading = ref(false);
|
||||
const formFields = ref<string[]>([]);
|
||||
const formType = ref(props.modelFormType);
|
||||
|
||||
// 监听 modelFormType 变化
|
||||
watch(
|
||||
() => props.modelFormType,
|
||||
(newVal) => {
|
||||
formType.value = newVal;
|
||||
},
|
||||
);
|
||||
|
||||
// 监听 modelFormId 变化
|
||||
watch(
|
||||
() => props.modelFormId,
|
||||
async (newVal) => {
|
||||
if (newVal) {
|
||||
const form = await getFormDetail(newVal);
|
||||
formFields.value = form?.fields;
|
||||
} else {
|
||||
// 如果 modelFormId 为空，清空表单字段
|
||||
formFields.value = [];
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
const roleOptions = ref<SystemRoleApi.Role[]>([]); // 角色列表
|
||||
const postOptions = ref<SystemPostApi.Post[]>([]); // 岗位列表
|
||||
const userOptions = ref<SystemUserApi.User[]>([]); // 用户列表
|
||||
const deptOptions = ref<SystemDeptApi.Dept[]>([]); // 部门列表
|
||||
const deptTreeOptions = ref();
|
||||
const userGroupOptions = ref<BpmUserGroupApi.UserGroupVO[]>([]); // 用户组列表
|
||||
|
||||
provide('formFields', formFields);
|
||||
provide('formType', formType);
|
||||
provide('roleList', roleOptions);
|
||||
provide('postList', postOptions);
|
||||
provide('userList', userOptions);
|
||||
provide('deptList', deptOptions);
|
||||
provide('userGroupList', userGroupOptions);
|
||||
provide('deptTree', deptTreeOptions);
|
||||
provide('startUserIds', props.startUserIds);
|
||||
provide('startDeptIds', props.startDeptIds);
|
||||
provide('tasks', []);
|
||||
provide('processInstance', {});
|
||||
const processNodeTree = ref<SimpleFlowNode | undefined>();
|
||||
provide('processNodeTree', processNodeTree);
|
||||
const errorDialogVisible = ref(false);
|
||||
const errorNodes: SimpleFlowNode[] = [];
|
||||
|
||||
// 添加更新模型的方法
|
||||
const updateModel = () => {
|
||||
if (!processNodeTree.value) {
|
||||
processNodeTree.value = {
|
||||
name: '发起人',
|
||||
type: NodeType.START_USER_NODE,
|
||||
id: NodeId.START_USER_NODE_ID,
|
||||
childNode: {
|
||||
id: NodeId.END_EVENT_NODE_ID,
|
||||
name: '结束',
|
||||
type: NodeType.END_EVENT_NODE,
|
||||
},
|
||||
};
|
||||
// 初始化时也触发一次保存
|
||||
saveSimpleFlowModel(processNodeTree.value);
|
||||
}
|
||||
};
|
||||
|
||||
const saveSimpleFlowModel = async (
|
||||
simpleModelNode: SimpleFlowNode | undefined,
|
||||
) => {
|
||||
if (!simpleModelNode) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
processData.value = simpleModelNode;
|
||||
emits('success', simpleModelNode);
|
||||
} catch (error) {
|
||||
console.error('保存失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 校验节点设置。 暂时以 showText 为空 未节点错误配置
|
||||
*/
|
||||
// eslint-disable-next-line unused-imports/no-unused-vars, no-unused-vars
|
||||
const validateNode = (
|
||||
node: SimpleFlowNode | undefined,
|
||||
errorNodes: SimpleFlowNode[],
|
||||
) => {
|
||||
if (node) {
|
||||
const { type, showText, conditionNodes } = node;
|
||||
if (type === NodeType.END_EVENT_NODE) {
|
||||
return;
|
||||
}
|
||||
if (type === NodeType.START_USER_NODE) {
|
||||
// 发起人节点暂时不用校验，直接校验孩子节点
|
||||
validateNode(node.childNode, errorNodes);
|
||||
}
|
||||
|
||||
if (
|
||||
type === NodeType.USER_TASK_NODE ||
|
||||
type === NodeType.COPY_TASK_NODE ||
|
||||
type === NodeType.CONDITION_NODE
|
||||
) {
|
||||
if (!showText) {
|
||||
errorNodes.push(node);
|
||||
}
|
||||
validateNode(node.childNode, errorNodes);
|
||||
}
|
||||
|
||||
if (
|
||||
type === NodeType.CONDITION_BRANCH_NODE ||
|
||||
type === NodeType.PARALLEL_BRANCH_NODE ||
|
||||
type === NodeType.INCLUSIVE_BRANCH_NODE
|
||||
) {
|
||||
// 分支节点
|
||||
// 1. 先校验各个分支
|
||||
conditionNodes?.forEach((item) => {
|
||||
validateNode(item, errorNodes);
|
||||
});
|
||||
// 2. 校验孩子节点
|
||||
validateNode(node.childNode, errorNodes);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
loading.value = true;
|
||||
// 获得角色列表
|
||||
roleOptions.value = await getSimpleRoleList();
|
||||
// 获得岗位列表
|
||||
postOptions.value = await getSimplePostList();
|
||||
// 获得用户列表
|
||||
userOptions.value = await getSimpleUserList();
|
||||
// 获得部门列表
|
||||
const deptList = await getSimpleDeptList();
|
||||
deptOptions.value = deptList;
|
||||
// 转换成树形结构
|
||||
deptTreeOptions.value = handleTree(deptList);
|
||||
// 获取用户组列表
|
||||
userGroupOptions.value = await getUserGroupSimpleList();
|
||||
// 加载流程数据
|
||||
if (processData.value) {
|
||||
processNodeTree.value = processData?.value;
|
||||
} else {
|
||||
updateModel();
|
||||
}
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
});
|
||||
|
||||
const simpleProcessModelRef = ref();
|
||||
|
||||
defineExpose({});
|
||||
</script>
|
||||
<template>
|
||||
<div v-loading="loading">
|
||||
<SimpleProcessModel
|
||||
ref="simpleProcessModelRef"
|
||||
v-if="processNodeTree"
|
||||
:flow-node="processNodeTree"
|
||||
:readonly="false"
|
||||
@save="saveSimpleFlowModel"
|
||||
/>
|
||||
<Modal
|
||||
v-model="errorDialogVisible"
|
||||
title="保存失败"
|
||||
width="400"
|
||||
:fullscreen="false"
|
||||
>
|
||||
<div class="mb-2">以下节点内容不完善，请修改后保存</div>
|
||||
<div
|
||||
class="b-rounded-1 line-height-normal mb-3 bg-gray-100 p-2"
|
||||
v-for="(item, index) in errorNodes"
|
||||
:key="index"
|
||||
>
|
||||
{{ item.name }} : {{ NODE_DEFAULT_TEXT.get(item.type) }}
|
||||
</div>
|
||||
<template #footer>
|
||||
<Button type="primary" @click="errorDialogVisible = false">
|
||||
知道了
|
||||
</Button>
|
||||
</template>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,270 @@
|
||||
<script setup lang="ts">
|
||||
import type { SimpleFlowNode } from '../consts';
|
||||
|
||||
import { onMounted, provide, ref } from 'vue';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
import { downloadFileFromBlob, isString } from '@vben/utils';
|
||||
|
||||
import { Button, ButtonGroup, Modal, Row } from 'ant-design-vue';
|
||||
|
||||
import { NODE_DEFAULT_TEXT, NodeType } from '../consts';
|
||||
import { useWatchNode } from '../helpers';
|
||||
import ProcessNodeTree from './process-node-tree.vue';
|
||||
|
||||
defineOptions({
|
||||
name: 'SimpleProcessModel',
|
||||
});
|
||||
|
||||
const props = defineProps({
|
||||
flowNode: {
|
||||
type: Object as () => SimpleFlowNode,
|
||||
required: true,
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true,
|
||||
},
|
||||
});
|
||||
|
||||
const emits = defineEmits<{
|
||||
save: [node: SimpleFlowNode | undefined];
|
||||
}>();
|
||||
|
||||
const processNodeTree = useWatchNode(props);
|
||||
|
||||
provide('readonly', props.readonly);
|
||||
|
||||
// TODO 可优化：拖拽有点卡顿
|
||||
/** 拖拽、放大缩小等操作 */
|
||||
const scaleValue = ref(100);
|
||||
const MAX_SCALE_VALUE = 200;
|
||||
const MIN_SCALE_VALUE = 50;
|
||||
const isDragging = ref(false);
|
||||
const startX = ref(0);
|
||||
const startY = ref(0);
|
||||
const currentX = ref(0);
|
||||
const currentY = ref(0);
|
||||
const initialX = ref(0);
|
||||
const initialY = ref(0);
|
||||
|
||||
const setGrabCursor = () => {
|
||||
document.body.style.cursor = 'grab';
|
||||
};
|
||||
|
||||
const resetCursor = () => {
|
||||
document.body.style.cursor = 'default';
|
||||
};
|
||||
|
||||
const startDrag = (e: MouseEvent) => {
|
||||
isDragging.value = true;
|
||||
startX.value = e.clientX - currentX.value;
|
||||
startY.value = e.clientY - currentY.value;
|
||||
setGrabCursor(); // 设置小手光标
|
||||
};
|
||||
|
||||
const onDrag = (e: MouseEvent) => {
|
||||
if (!isDragging.value) return;
|
||||
e.preventDefault(); // 禁用文本选择
|
||||
|
||||
// 使用 requestAnimationFrame 优化性能
|
||||
requestAnimationFrame(() => {
|
||||
currentX.value = e.clientX - startX.value;
|
||||
currentY.value = e.clientY - startY.value;
|
||||
});
|
||||
};
|
||||
|
||||
const stopDrag = () => {
|
||||
isDragging.value = false;
|
||||
resetCursor(); // 重置光标
|
||||
};
|
||||
|
||||
const zoomIn = () => {
|
||||
if (scaleValue.value === MAX_SCALE_VALUE) {
|
||||
return;
|
||||
}
|
||||
scaleValue.value += 10;
|
||||
};
|
||||
|
||||
const zoomOut = () => {
|
||||
if (scaleValue.value === MIN_SCALE_VALUE) {
|
||||
return;
|
||||
}
|
||||
scaleValue.value -= 10;
|
||||
};
|
||||
|
||||
const processReZoom = () => {
|
||||
scaleValue.value = 100;
|
||||
};
|
||||
|
||||
const resetPosition = () => {
|
||||
currentX.value = initialX.value;
|
||||
currentY.value = initialY.value;
|
||||
};
|
||||
|
||||
/** 校验节点设置 */
|
||||
const errorDialogVisible = ref(false);
|
||||
let errorNodes: SimpleFlowNode[] = [];
|
||||
|
||||
const validateNode = (
|
||||
node: SimpleFlowNode | undefined,
|
||||
errorNodes: SimpleFlowNode[],
|
||||
) => {
|
||||
if (node) {
|
||||
const { type, showText, conditionNodes } = node;
|
||||
if (type === NodeType.END_EVENT_NODE) {
|
||||
return;
|
||||
}
|
||||
if (type === NodeType.START_USER_NODE) {
|
||||
// 发起人节点暂时不用校验，直接校验孩子节点
|
||||
validateNode(node.childNode, errorNodes);
|
||||
}
|
||||
|
||||
if (
|
||||
type === NodeType.USER_TASK_NODE ||
|
||||
type === NodeType.COPY_TASK_NODE ||
|
||||
type === NodeType.CONDITION_NODE
|
||||
) {
|
||||
if (!showText) {
|
||||
errorNodes.push(node);
|
||||
}
|
||||
validateNode(node.childNode, errorNodes);
|
||||
}
|
||||
|
||||
if (
|
||||
type === NodeType.CONDITION_BRANCH_NODE ||
|
||||
type === NodeType.PARALLEL_BRANCH_NODE ||
|
||||
type === NodeType.INCLUSIVE_BRANCH_NODE
|
||||
) {
|
||||
// 分支节点
|
||||
// 1. 先校验各个分支
|
||||
conditionNodes?.forEach((item) => {
|
||||
validateNode(item, errorNodes);
|
||||
});
|
||||
// 2. 校验孩子节点
|
||||
validateNode(node.childNode, errorNodes);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/** 获取当前流程数据 */
|
||||
const getCurrentFlowData = async () => {
|
||||
try {
|
||||
errorNodes = [];
|
||||
validateNode(processNodeTree.value, errorNodes);
|
||||
if (errorNodes.length > 0) {
|
||||
errorDialogVisible.value = true;
|
||||
return undefined;
|
||||
}
|
||||
return processNodeTree.value;
|
||||
} catch (error) {
|
||||
console.error('获取流程数据失败:', error);
|
||||
return undefined;
|
||||
}
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
getCurrentFlowData,
|
||||
});
|
||||
|
||||
/** 导出 JSON */
|
||||
const exportJson = () => {
|
||||
downloadFileFromBlob({
|
||||
fileName: 'model.json',
|
||||
source: new Blob([JSON.stringify(processNodeTree.value)]),
|
||||
});
|
||||
};
|
||||
|
||||
/** 导入 JSON */
|
||||
const refFile = ref();
|
||||
const importJson = () => {
|
||||
refFile.value.click();
|
||||
};
|
||||
const importLocalFile = () => {
|
||||
const file = refFile.value.files[0];
|
||||
file.text().then((result: any) => {
|
||||
if (isString(result)) {
|
||||
processNodeTree.value = JSON.parse(result);
|
||||
emits('save', processNodeTree.value);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 在组件初始化时记录初始位置
|
||||
onMounted(() => {
|
||||
initialX.value = currentX.value;
|
||||
initialY.value = currentY.value;
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="simple-process-model-container">
|
||||
<div class="absolute right-[0px] top-[0px] bg-[#fff]">
|
||||
<Row type="flex" justify="end">
|
||||
<ButtonGroup key="scale-control">
|
||||
<Button v-if="!readonly" @click="exportJson">
|
||||
<IconifyIcon icon="ep:download" /> 导出
|
||||
</Button>
|
||||
<Button v-if="!readonly" @click="importJson">
|
||||
<IconifyIcon icon="ep:upload" />导入
|
||||
</Button>
|
||||
<!-- 用于打开本地文件-->
|
||||
<input
|
||||
v-if="!readonly"
|
||||
type="file"
|
||||
id="files"
|
||||
ref="refFile"
|
||||
style="display: none"
|
||||
accept=".json"
|
||||
@change="importLocalFile"
|
||||
/>
|
||||
<Button @click="processReZoom()">
|
||||
<IconifyIcon icon="tabler:relation-one-to-one" />
|
||||
</Button>
|
||||
<Button :plain="true" @click="zoomOut()">
|
||||
<IconifyIcon icon="tabler:zoom-out" />
|
||||
</Button>
|
||||
<Button class="w-80px"> {{ scaleValue }}% </Button>
|
||||
<Button :plain="true" @click="zoomIn()">
|
||||
<IconifyIcon icon="tabler:zoom-in" />
|
||||
</Button>
|
||||
<Button @click="resetPosition">重置</Button>
|
||||
</ButtonGroup>
|
||||
</Row>
|
||||
</div>
|
||||
<div
|
||||
class="simple-process-model"
|
||||
:style="`transform: translate(${currentX}px, ${currentY}px) scale(${scaleValue / 100});`"
|
||||
@mousedown="startDrag"
|
||||
@mousemove="onDrag"
|
||||
@mouseup="stopDrag"
|
||||
@mouseleave="stopDrag"
|
||||
@mouseenter="setGrabCursor"
|
||||
>
|
||||
<ProcessNodeTree
|
||||
v-if="processNodeTree"
|
||||
v-model:flow-node="processNodeTree"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- TODO 这个好像暂时没有用到。保存失败弹窗 -->
|
||||
<Modal
|
||||
v-model:open="errorDialogVisible"
|
||||
title="保存失败"
|
||||
width="400"
|
||||
:fullscreen="false"
|
||||
>
|
||||
<div class="mb-2">以下节点内容不完善，请修改后保存</div>
|
||||
<div
|
||||
class="b-rounded-1 line-height-normal mb-3 bg-gray-100 p-2"
|
||||
v-for="(item, index) in errorNodes"
|
||||
:key="index"
|
||||
>
|
||||
{{ item.name }} : {{ NODE_DEFAULT_TEXT.get(item.type) }}
|
||||
</div>
|
||||
<template #footer>
|
||||
<Button type="primary" @click="errorDialogVisible = false">知道了</Button>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
<style lang="scss" scoped></style>
|
||||
1010
apps/web-antd/src/components/simple-process-design/consts.ts
Normal file
1010
apps/web-antd/src/components/simple-process-design/consts.ts
Normal file
File diff suppressed because it is too large
Load Diff
739
apps/web-antd/src/components/simple-process-design/helpers.ts
Normal file
739
apps/web-antd/src/components/simple-process-design/helpers.ts
Normal file
@@ -0,0 +1,739 @@
|
||||
import type { Ref } from 'vue';
|
||||
|
||||
import type {
|
||||
ConditionGroup,
|
||||
HttpRequestParam,
|
||||
SimpleFlowNode,
|
||||
} from './consts';
|
||||
|
||||
import type { BpmUserGroupApi } from '#/api/bpm/userGroup';
|
||||
import type { SystemDeptApi } from '#/api/system/dept';
|
||||
import type { SystemPostApi } from '#/api/system/post';
|
||||
import type { SystemRoleApi } from '#/api/system/role';
|
||||
import type { SystemUserApi } from '#/api/system/user';
|
||||
|
||||
import { inject, ref, toRaw, unref, watch } from 'vue';
|
||||
|
||||
import {
|
||||
ApproveMethodType,
|
||||
AssignEmptyHandlerType,
|
||||
AssignStartUserHandlerType,
|
||||
CandidateStrategy,
|
||||
COMPARISON_OPERATORS,
|
||||
ConditionType,
|
||||
FieldPermissionType,
|
||||
NODE_DEFAULT_NAME,
|
||||
NodeType,
|
||||
ProcessVariableEnum,
|
||||
RejectHandlerType,
|
||||
TaskStatusEnum,
|
||||
} from './consts';
|
||||
|
||||
export function useWatchNode(props: {
|
||||
flowNode: SimpleFlowNode;
|
||||
}): Ref<SimpleFlowNode> {
|
||||
const node = ref<SimpleFlowNode>(props.flowNode);
|
||||
watch(
|
||||
() => props.flowNode,
|
||||
(newValue) => {
|
||||
node.value = newValue;
|
||||
},
|
||||
);
|
||||
return node;
|
||||
}
|
||||
|
||||
// 解析 formCreate 所有表单字段, 并返回
|
||||
const parseFormCreateFields = (formFields?: string[]) => {
|
||||
const result: Array<Record<string, any>> = [];
|
||||
if (formFields) {
|
||||
formFields.forEach((fieldStr: string) => {
|
||||
parseFormFields(JSON.parse(fieldStr), result);
|
||||
});
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
/**
|
||||
* 解析表单组件的 field, title 等字段（递归，如果组件包含子组件）
|
||||
*
|
||||
* @param rule 组件的生成规则 https://www.form-create.com/v3/guide/rule
|
||||
* @param fields 解析后表单组件字段
|
||||
* @param parentTitle 如果是子表单，子表单的标题，默认为空
|
||||
*/
|
||||
export const parseFormFields = (
|
||||
rule: Record<string, any>,
|
||||
fields: Array<Record<string, any>> = [],
|
||||
parentTitle: string = '',
|
||||
) => {
|
||||
const { type, field, $required, title: tempTitle, children } = rule;
|
||||
if (field && tempTitle) {
|
||||
let title = tempTitle;
|
||||
if (parentTitle) {
|
||||
title = `${parentTitle}.${tempTitle}`;
|
||||
}
|
||||
let required = false;
|
||||
if ($required) {
|
||||
required = true;
|
||||
}
|
||||
fields.push({
|
||||
field,
|
||||
title,
|
||||
type,
|
||||
required,
|
||||
});
|
||||
// TODO 子表单 需要处理子表单字段
|
||||
// if (type === 'group' && rule.props?.rule && Array.isArray(rule.props.rule)) {
|
||||
// // 解析子表单的字段
|
||||
// rule.props.rule.forEach((item) => {
|
||||
// parseFields(item, fieldsPermission, title)
|
||||
// })
|
||||
// }
|
||||
}
|
||||
if (children && Array.isArray(children)) {
|
||||
children.forEach((rule) => {
|
||||
parseFormFields(rule, fields);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @description 表单数据权限配置，用于发起人节点 、审批节点、抄送节点
|
||||
*/
|
||||
export function useFormFieldsPermission(
|
||||
defaultPermission: FieldPermissionType,
|
||||
) {
|
||||
// 字段权限配置. 需要有 field, title, permissioin 属性
|
||||
const fieldsPermissionConfig = ref<Array<Record<string, any>>>([]);
|
||||
|
||||
const formType = inject<Ref<number | undefined>>('formType', ref()); // 表单类型
|
||||
|
||||
const formFields = inject<Ref<string[]>>('formFields', ref([])); // 流程表单字段
|
||||
|
||||
const getNodeConfigFormFields = (
|
||||
nodeFormFields?: Array<Record<string, string>>,
|
||||
) => {
|
||||
nodeFormFields = toRaw(nodeFormFields);
|
||||
fieldsPermissionConfig.value =
|
||||
!nodeFormFields || nodeFormFields.length === 0
|
||||
? getDefaultFieldsPermission(unref(formFields))
|
||||
: mergeFieldsPermission(nodeFormFields, unref(formFields));
|
||||
};
|
||||
// 合并已经设置的表单字段权限，当前流程表单字段 (可能新增，或删除了字段)
|
||||
const mergeFieldsPermission = (
|
||||
formFieldsPermisson: Array<Record<string, string>>,
|
||||
formFields?: string[],
|
||||
) => {
|
||||
let mergedFieldsPermission: Array<Record<string, any>> = [];
|
||||
if (formFields) {
|
||||
mergedFieldsPermission = parseFormCreateFields(formFields).map((item) => {
|
||||
const found = formFieldsPermisson.find(
|
||||
(fieldPermission) => fieldPermission.field === item.field,
|
||||
);
|
||||
return {
|
||||
field: item.field,
|
||||
title: item.title,
|
||||
permission: found ? found.permission : defaultPermission,
|
||||
};
|
||||
});
|
||||
}
|
||||
return mergedFieldsPermission;
|
||||
};
|
||||
|
||||
// 默认的表单权限： 获取表单的所有字段，设置字段默认权限为只读
|
||||
const getDefaultFieldsPermission = (formFields?: string[]) => {
|
||||
let defaultFieldsPermission: Array<Record<string, any>> = [];
|
||||
if (formFields) {
|
||||
defaultFieldsPermission = parseFormCreateFields(formFields).map(
|
||||
(item) => {
|
||||
return {
|
||||
field: item.field,
|
||||
title: item.title,
|
||||
permission: defaultPermission,
|
||||
};
|
||||
},
|
||||
);
|
||||
}
|
||||
return defaultFieldsPermission;
|
||||
};
|
||||
|
||||
// 获取表单的所有字段，作为下拉框选项
|
||||
const formFieldOptions = parseFormCreateFields(unref(formFields));
|
||||
|
||||
return {
|
||||
formType,
|
||||
fieldsPermissionConfig,
|
||||
formFieldOptions,
|
||||
getNodeConfigFormFields,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 获取流程表单的字段
|
||||
*/
|
||||
export function useFormFields() {
|
||||
const formFields = inject<Ref<string[]>>('formFields', ref([])); // 流程表单字段
|
||||
return parseFormCreateFields(unref(formFields));
|
||||
}
|
||||
|
||||
// TODO @芋艿：后续需要把各种类似 useFormFieldsPermission 的逻辑，抽成一个通用方法。
|
||||
/**
|
||||
* @description 获取流程表单的字段和发起人字段
|
||||
*/
|
||||
export function useFormFieldsAndStartUser() {
|
||||
const injectFormFields = inject<Ref<string[]>>('formFields', ref([])); // 流程表单字段
|
||||
const formFields = parseFormCreateFields(unref(injectFormFields));
|
||||
// 添加发起人
|
||||
formFields.unshift({
|
||||
field: ProcessVariableEnum.START_USER_ID,
|
||||
title: '发起人',
|
||||
required: true,
|
||||
});
|
||||
return formFields;
|
||||
}
|
||||
|
||||
export type UserTaskFormType = {
|
||||
approveMethod: ApproveMethodType;
|
||||
approveRatio?: number;
|
||||
assignEmptyHandlerType?: AssignEmptyHandlerType;
|
||||
assignEmptyHandlerUserIds?: number[];
|
||||
assignStartUserHandlerType?: AssignStartUserHandlerType;
|
||||
buttonsSetting: any[];
|
||||
candidateStrategy: CandidateStrategy;
|
||||
deptIds?: number[]; // 部门
|
||||
deptLevel?: number; // 部门层级
|
||||
expression?: string; // 流程表达式
|
||||
formDept?: string; // 表单内部门字段
|
||||
formUser?: string; // 表单内用户字段
|
||||
maxRemindCount?: number;
|
||||
postIds?: number[]; // 岗位
|
||||
reasonRequire: boolean;
|
||||
rejectHandlerType?: RejectHandlerType;
|
||||
returnNodeId?: string;
|
||||
roleIds?: number[]; // 角色
|
||||
signEnable: boolean;
|
||||
taskAssignListener?: {
|
||||
body: HttpRequestParam[];
|
||||
header: HttpRequestParam[];
|
||||
};
|
||||
taskAssignListenerEnable?: boolean;
|
||||
taskAssignListenerPath?: string;
|
||||
taskCompleteListener?: {
|
||||
body: HttpRequestParam[];
|
||||
header: HttpRequestParam[];
|
||||
};
|
||||
taskCompleteListenerEnable?: boolean;
|
||||
taskCompleteListenerPath?: string;
|
||||
taskCreateListener?: {
|
||||
body: HttpRequestParam[];
|
||||
header: HttpRequestParam[];
|
||||
};
|
||||
taskCreateListenerEnable?: boolean;
|
||||
taskCreateListenerPath?: string;
|
||||
timeDuration?: number;
|
||||
timeoutHandlerEnable?: boolean;
|
||||
timeoutHandlerType?: number;
|
||||
userGroups?: number[]; // 用户组
|
||||
userIds?: number[]; // 用户
|
||||
};
|
||||
|
||||
export type CopyTaskFormType = {
|
||||
candidateStrategy: CandidateStrategy;
|
||||
deptIds?: number[]; // 部门
|
||||
deptLevel?: number; // 部门层级
|
||||
expression?: string; // 流程表达式
|
||||
formDept?: string; // 表单内部门字段
|
||||
formUser?: string; // 表单内用户字段
|
||||
postIds?: number[]; // 岗位
|
||||
roleIds?: number[]; // 角色
|
||||
userGroups?: number[]; // 用户组
|
||||
userIds?: number[]; // 用户
|
||||
};
|
||||
|
||||
/**
|
||||
* @description 节点表单数据。 用于审批节点、抄送节点
|
||||
*/
|
||||
export function useNodeForm(nodeType: NodeType) {
|
||||
const roleOptions = inject<Ref<SystemRoleApi.Role[]>>('roleList', ref([])); // 角色列表
|
||||
const postOptions = inject<Ref<SystemPostApi.Post[]>>('postList', ref([])); // 岗位列表
|
||||
const userOptions = inject<Ref<SystemUserApi.User[]>>('userList', ref([])); // 用户列表
|
||||
const deptOptions = inject<Ref<SystemDeptApi.Dept[]>>('deptList', ref([])); // 部门列表
|
||||
const userGroupOptions = inject<Ref<BpmUserGroupApi.UserGroupVO[]>>(
|
||||
'userGroupList',
|
||||
ref([]),
|
||||
); // 用户组列表
|
||||
const deptTreeOptions = inject<Ref<SystemDeptApi.Dept[]>>(
|
||||
'deptTree',
|
||||
ref([]),
|
||||
); // 部门树
|
||||
const formFields = inject<Ref<string[]>>('formFields', ref([])); // 流程表单字段
|
||||
const configForm = ref<any | CopyTaskFormType | UserTaskFormType>();
|
||||
|
||||
// eslint-disable-next-line unicorn/prefer-ternary
|
||||
if (
|
||||
nodeType === NodeType.USER_TASK_NODE ||
|
||||
nodeType === NodeType.TRANSACTOR_NODE
|
||||
) {
|
||||
configForm.value = {
|
||||
candidateStrategy: CandidateStrategy.USER,
|
||||
approveMethod: ApproveMethodType.SEQUENTIAL_APPROVE,
|
||||
approveRatio: 100,
|
||||
rejectHandlerType: RejectHandlerType.FINISH_PROCESS,
|
||||
assignStartUserHandlerType: AssignStartUserHandlerType.START_USER_AUDIT,
|
||||
returnNodeId: '',
|
||||
timeoutHandlerEnable: false,
|
||||
timeoutHandlerType: 1,
|
||||
timeDuration: 6, // 默认 6小时
|
||||
maxRemindCount: 1, // 默认 提醒 1次
|
||||
buttonsSetting: [],
|
||||
};
|
||||
} else {
|
||||
configForm.value = {
|
||||
candidateStrategy: CandidateStrategy.USER,
|
||||
};
|
||||
}
|
||||
|
||||
const getShowText = (): string => {
|
||||
let showText = '';
|
||||
// 指定成员
|
||||
if (
|
||||
configForm.value?.candidateStrategy === CandidateStrategy.USER &&
|
||||
configForm.value?.userIds?.length > 0
|
||||
) {
|
||||
const candidateNames: string[] = [];
|
||||
userOptions?.value.forEach((item: any) => {
|
||||
if (configForm.value?.userIds?.includes(item.id)) {
|
||||
candidateNames.push(item.nickname);
|
||||
}
|
||||
});
|
||||
showText = `指定成员：${candidateNames.join(',')}`;
|
||||
}
|
||||
// 指定角色
|
||||
if (
|
||||
configForm.value?.candidateStrategy === CandidateStrategy.ROLE &&
|
||||
configForm.value.roleIds?.length > 0
|
||||
) {
|
||||
const candidateNames: string[] = [];
|
||||
roleOptions?.value.forEach((item: any) => {
|
||||
if (configForm.value?.roleIds?.includes(item.id)) {
|
||||
candidateNames.push(item.name);
|
||||
}
|
||||
});
|
||||
showText = `指定角色：${candidateNames.join(',')}`;
|
||||
}
|
||||
// 指定部门
|
||||
if (
|
||||
(configForm.value?.candidateStrategy === CandidateStrategy.DEPT_MEMBER ||
|
||||
configForm.value?.candidateStrategy === CandidateStrategy.DEPT_LEADER ||
|
||||
configForm.value?.candidateStrategy ===
|
||||
CandidateStrategy.MULTI_LEVEL_DEPT_LEADER) &&
|
||||
configForm.value?.deptIds?.length > 0
|
||||
) {
|
||||
const candidateNames: string[] = [];
|
||||
deptOptions?.value.forEach((item) => {
|
||||
if (configForm.value?.deptIds?.includes(item.id)) {
|
||||
candidateNames.push(item.name);
|
||||
}
|
||||
});
|
||||
if (
|
||||
configForm.value.candidateStrategy === CandidateStrategy.DEPT_MEMBER
|
||||
) {
|
||||
showText = `部门成员：${candidateNames.join(',')}`;
|
||||
} else if (
|
||||
configForm.value.candidateStrategy === CandidateStrategy.DEPT_LEADER
|
||||
) {
|
||||
showText = `部门的负责人：${candidateNames.join(',')}`;
|
||||
} else {
|
||||
showText = `多级部门的负责人：${candidateNames.join(',')}`;
|
||||
}
|
||||
}
|
||||
|
||||
// 指定岗位
|
||||
if (
|
||||
configForm.value?.candidateStrategy === CandidateStrategy.POST &&
|
||||
configForm.value.postIds?.length > 0
|
||||
) {
|
||||
const candidateNames: string[] = [];
|
||||
postOptions?.value.forEach((item) => {
|
||||
if (configForm.value?.postIds?.includes(item.id)) {
|
||||
candidateNames.push(item.name);
|
||||
}
|
||||
});
|
||||
showText = `指定岗位: ${candidateNames.join(',')}`;
|
||||
}
|
||||
// 指定用户组
|
||||
if (
|
||||
configForm.value?.candidateStrategy === CandidateStrategy.USER_GROUP &&
|
||||
configForm.value?.userGroups?.length > 0
|
||||
) {
|
||||
const candidateNames: string[] = [];
|
||||
userGroupOptions?.value.forEach((item) => {
|
||||
if (configForm.value?.userGroups?.includes(item.id)) {
|
||||
candidateNames.push(item.name);
|
||||
}
|
||||
});
|
||||
showText = `指定用户组: ${candidateNames.join(',')}`;
|
||||
}
|
||||
|
||||
// 表单内用户字段
|
||||
if (configForm.value?.candidateStrategy === CandidateStrategy.FORM_USER) {
|
||||
const formFieldOptions = parseFormCreateFields(unref(formFields));
|
||||
const item = formFieldOptions.find(
|
||||
(item) => item.field === configForm.value?.formUser,
|
||||
);
|
||||
showText = `表单用户：${item?.title}`;
|
||||
}
|
||||
|
||||
// 表单内部门负责人
|
||||
if (
|
||||
configForm.value?.candidateStrategy === CandidateStrategy.FORM_DEPT_LEADER
|
||||
) {
|
||||
showText = `表单内部门负责人`;
|
||||
}
|
||||
|
||||
// 审批人自选
|
||||
if (
|
||||
configForm.value?.candidateStrategy ===
|
||||
CandidateStrategy.APPROVE_USER_SELECT
|
||||
) {
|
||||
showText = `审批人自选`;
|
||||
}
|
||||
|
||||
// 发起人自选
|
||||
if (
|
||||
configForm.value?.candidateStrategy ===
|
||||
CandidateStrategy.START_USER_SELECT
|
||||
) {
|
||||
showText = `发起人自选`;
|
||||
}
|
||||
// 发起人自己
|
||||
if (configForm.value?.candidateStrategy === CandidateStrategy.START_USER) {
|
||||
showText = `发起人自己`;
|
||||
}
|
||||
// 发起人的部门负责人
|
||||
if (
|
||||
configForm.value?.candidateStrategy ===
|
||||
CandidateStrategy.START_USER_DEPT_LEADER
|
||||
) {
|
||||
showText = `发起人的部门负责人`;
|
||||
}
|
||||
// 发起人的部门负责人
|
||||
if (
|
||||
configForm.value?.candidateStrategy ===
|
||||
CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER
|
||||
) {
|
||||
showText = `发起人连续部门负责人`;
|
||||
}
|
||||
// 流程表达式
|
||||
if (configForm.value?.candidateStrategy === CandidateStrategy.EXPRESSION) {
|
||||
showText = `流程表达式：${configForm.value.expression}`;
|
||||
}
|
||||
return showText;
|
||||
};
|
||||
|
||||
/**
|
||||
* 处理候选人参数的赋值
|
||||
*/
|
||||
const handleCandidateParam = () => {
|
||||
let candidateParam: string | undefined;
|
||||
if (!configForm.value) {
|
||||
return candidateParam;
|
||||
}
|
||||
switch (configForm.value.candidateStrategy) {
|
||||
case CandidateStrategy.DEPT_LEADER:
|
||||
case CandidateStrategy.DEPT_MEMBER: {
|
||||
candidateParam = configForm.value.deptIds?.join(',');
|
||||
break;
|
||||
}
|
||||
case CandidateStrategy.EXPRESSION: {
|
||||
candidateParam = configForm.value.expression;
|
||||
break;
|
||||
}
|
||||
// 表单内部门的负责人
|
||||
case CandidateStrategy.FORM_DEPT_LEADER: {
|
||||
// 候选人参数格式: | 分隔 。左边为表单内部门字段。 右边为部门层级
|
||||
const deptFieldOnForm = configForm.value.formDept;
|
||||
candidateParam = deptFieldOnForm?.concat(
|
||||
`|${configForm.value.deptLevel}`,
|
||||
);
|
||||
break;
|
||||
}
|
||||
case CandidateStrategy.FORM_USER: {
|
||||
candidateParam = configForm.value?.formUser;
|
||||
break;
|
||||
}
|
||||
// 指定连续多级部门的负责人
|
||||
case CandidateStrategy.MULTI_LEVEL_DEPT_LEADER: {
|
||||
// 候选人参数格式: | 分隔 。左边为部门（多个部门用 , 分隔）。 右边为部门层级
|
||||
const deptIds = configForm.value.deptIds?.join(',');
|
||||
candidateParam = deptIds?.concat(`|${configForm.value.deptLevel}`);
|
||||
break;
|
||||
}
|
||||
case CandidateStrategy.POST: {
|
||||
candidateParam = configForm.value.postIds?.join(',');
|
||||
break;
|
||||
}
|
||||
case CandidateStrategy.ROLE: {
|
||||
candidateParam = configForm.value.roleIds?.join(',');
|
||||
break;
|
||||
}
|
||||
// 发起人部门负责人
|
||||
case CandidateStrategy.START_USER_DEPT_LEADER:
|
||||
case CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER: {
|
||||
candidateParam = `${configForm.value.deptLevel}`;
|
||||
break;
|
||||
}
|
||||
case CandidateStrategy.USER: {
|
||||
candidateParam = configForm.value.userIds?.join(',');
|
||||
break;
|
||||
}
|
||||
case CandidateStrategy.USER_GROUP: {
|
||||
candidateParam = configForm.value.userGroups?.join(',');
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
break;
|
||||
}
|
||||
}
|
||||
return candidateParam;
|
||||
};
|
||||
/**
|
||||
* 解析候选人参数
|
||||
*/
|
||||
const parseCandidateParam = (
|
||||
candidateStrategy: CandidateStrategy,
|
||||
candidateParam: string | undefined,
|
||||
) => {
|
||||
if (!configForm.value || !candidateParam) {
|
||||
return;
|
||||
}
|
||||
switch (candidateStrategy) {
|
||||
case CandidateStrategy.DEPT_LEADER:
|
||||
case CandidateStrategy.DEPT_MEMBER: {
|
||||
configForm.value.deptIds = candidateParam
|
||||
.split(',')
|
||||
.map((item) => +item);
|
||||
break;
|
||||
}
|
||||
case CandidateStrategy.EXPRESSION: {
|
||||
configForm.value.expression = candidateParam;
|
||||
break;
|
||||
}
|
||||
// 表单内的部门负责人
|
||||
case CandidateStrategy.FORM_DEPT_LEADER: {
|
||||
// 候选人参数格式: | 分隔 。左边为表单内的部门字段。 右边为部门层级
|
||||
const paramArray = candidateParam.split('|');
|
||||
if (paramArray.length > 1) {
|
||||
configForm.value.formDept = paramArray[0];
|
||||
if (paramArray[1]) configForm.value.deptLevel = +paramArray[1];
|
||||
}
|
||||
break;
|
||||
}
|
||||
case CandidateStrategy.FORM_USER: {
|
||||
configForm.value.formUser = candidateParam;
|
||||
break;
|
||||
}
|
||||
// 指定连续多级部门的负责人
|
||||
case CandidateStrategy.MULTI_LEVEL_DEPT_LEADER: {
|
||||
// 候选人参数格式: | 分隔 。左边为部门（多个部门用 , 分隔）。 右边为部门层级
|
||||
const paramArray = candidateParam.split('|') as string[];
|
||||
if (paramArray.length > 1) {
|
||||
configForm.value.deptIds = paramArray[0]
|
||||
?.split(',')
|
||||
.map((item) => +item);
|
||||
if (paramArray[1]) configForm.value.deptLevel = +paramArray[1];
|
||||
}
|
||||
break;
|
||||
}
|
||||
case CandidateStrategy.POST: {
|
||||
configForm.value.postIds = candidateParam
|
||||
.split(',')
|
||||
.map((item) => +item);
|
||||
break;
|
||||
}
|
||||
case CandidateStrategy.ROLE: {
|
||||
configForm.value.roleIds = candidateParam
|
||||
.split(',')
|
||||
.map((item) => +item);
|
||||
break;
|
||||
}
|
||||
// 发起人部门负责人
|
||||
case CandidateStrategy.START_USER_DEPT_LEADER:
|
||||
case CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER: {
|
||||
configForm.value.deptLevel = +candidateParam;
|
||||
break;
|
||||
}
|
||||
case CandidateStrategy.USER: {
|
||||
configForm.value.userIds = candidateParam
|
||||
.split(',')
|
||||
.map((item) => +item);
|
||||
break;
|
||||
}
|
||||
case CandidateStrategy.USER_GROUP: {
|
||||
configForm.value.userGroups = candidateParam
|
||||
.split(',')
|
||||
.map((item) => +item);
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
return {
|
||||
configForm,
|
||||
roleOptions,
|
||||
postOptions,
|
||||
userOptions,
|
||||
userGroupOptions,
|
||||
deptTreeOptions,
|
||||
handleCandidateParam,
|
||||
parseCandidateParam,
|
||||
getShowText,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 抽屉配置
|
||||
*/
|
||||
export function useDrawer() {
|
||||
// 抽屉配置是否可见
|
||||
const settingVisible = ref(false);
|
||||
// 关闭配置抽屉
|
||||
const closeDrawer = () => {
|
||||
settingVisible.value = false;
|
||||
};
|
||||
// 打开配置抽屉
|
||||
const openDrawer = () => {
|
||||
settingVisible.value = true;
|
||||
};
|
||||
return {
|
||||
settingVisible,
|
||||
closeDrawer,
|
||||
openDrawer,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 节点名称配置
|
||||
*/
|
||||
export function useNodeName(nodeType: NodeType) {
|
||||
// 节点名称
|
||||
const nodeName = ref<string>();
|
||||
// 节点名称输入框
|
||||
const showInput = ref(false);
|
||||
// 点击节点名称编辑图标
|
||||
const clickIcon = () => {
|
||||
showInput.value = true;
|
||||
};
|
||||
// 节点名称输入框失去焦点
|
||||
const blurEvent = () => {
|
||||
showInput.value = false;
|
||||
nodeName.value =
|
||||
nodeName.value || (NODE_DEFAULT_NAME.get(nodeType) as string);
|
||||
};
|
||||
return {
|
||||
nodeName,
|
||||
showInput,
|
||||
clickIcon,
|
||||
blurEvent,
|
||||
};
|
||||
}
|
||||
|
||||
export function useNodeName2(node: Ref<SimpleFlowNode>, nodeType: NodeType) {
|
||||
// 显示节点名称输入框
|
||||
const showInput = ref(false);
|
||||
// 节点名称输入框失去焦点
|
||||
const blurEvent = () => {
|
||||
showInput.value = false;
|
||||
node.value.name =
|
||||
node.value.name || (NODE_DEFAULT_NAME.get(nodeType) as string);
|
||||
};
|
||||
// 点击节点标题进行输入
|
||||
const clickTitle = () => {
|
||||
showInput.value = true;
|
||||
};
|
||||
return {
|
||||
showInput,
|
||||
clickTitle,
|
||||
blurEvent,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 根据节点任务状态，获取节点任务状态样式
|
||||
*/
|
||||
export function useTaskStatusClass(
|
||||
taskStatus: TaskStatusEnum | undefined,
|
||||
): string {
|
||||
if (!taskStatus) {
|
||||
return '';
|
||||
}
|
||||
if (taskStatus === TaskStatusEnum.APPROVE) {
|
||||
return 'status-pass';
|
||||
}
|
||||
if (taskStatus === TaskStatusEnum.RUNNING) {
|
||||
return 'status-running';
|
||||
}
|
||||
if (taskStatus === TaskStatusEnum.REJECT) {
|
||||
return 'status-reject';
|
||||
}
|
||||
if (taskStatus === TaskStatusEnum.CANCEL) {
|
||||
return 'status-cancel';
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
/** 条件组件文字展示 */
|
||||
export function getConditionShowText(
|
||||
conditionType: ConditionType | undefined,
|
||||
conditionExpression: string | undefined,
|
||||
conditionGroups: ConditionGroup | undefined,
|
||||
fieldOptions: Array<Record<string, any>>,
|
||||
) {
|
||||
let showText: string | undefined;
|
||||
if (conditionType === ConditionType.EXPRESSION && conditionExpression) {
|
||||
showText = `表达式：${conditionExpression}`;
|
||||
}
|
||||
if (conditionType === ConditionType.RULE) {
|
||||
// 条件组是否为与关系
|
||||
const groupAnd = conditionGroups?.and;
|
||||
let warningMessage: string | undefined;
|
||||
const conditionGroup = conditionGroups?.conditions.map((item) => {
|
||||
return `(${item.rules
|
||||
.map((rule) => {
|
||||
if (rule.leftSide && rule.rightSide) {
|
||||
return `${getFormFieldTitle(
|
||||
fieldOptions,
|
||||
rule.leftSide,
|
||||
)} ${getOpName(rule.opCode)} ${rule.rightSide}`;
|
||||
} else {
|
||||
// 有一条规则不完善。提示错误
|
||||
warningMessage = '请完善条件规则';
|
||||
return '';
|
||||
}
|
||||
})
|
||||
.join(item.and ? ' 且 ' : ' 或 ')} ) `;
|
||||
});
|
||||
showText = warningMessage
|
||||
? ''
|
||||
: conditionGroup?.join(groupAnd ? ' 且 ' : ' 或 ');
|
||||
}
|
||||
return showText;
|
||||
}
|
||||
|
||||
/** 获取表单字段名称*/
|
||||
const getFormFieldTitle = (
|
||||
fieldOptions: Array<Record<string, any>>,
|
||||
field: string,
|
||||
) => {
|
||||
const item = fieldOptions.find((item) => item.field === field);
|
||||
return item?.title;
|
||||
};
|
||||
|
||||
/** 获取操作符名称 */
|
||||
const getOpName = (opCode: string): string | undefined => {
|
||||
const opName = COMPARISON_OPERATORS.find(
|
||||
(item: any) => item.value === opCode,
|
||||
);
|
||||
return opName?.label;
|
||||
};
|
||||
@@ -0,0 +1,3 @@
|
||||
import './styles/simple-process-designer.scss';
|
||||
|
||||
export { default as SimpleProcessDesigner } from './components/simple-process-designer.vue';
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,830 @@
|
||||
// TODO 整个样式是不是要重新优化一下
|
||||
// iconfont 样式
|
||||
@font-face {
|
||||
font-family: iconfont; /* Project id 4495938 */
|
||||
src:
|
||||
url('iconfont.woff2?t=1737639517142') format('woff2'),
|
||||
url('iconfont.woff?t=1737639517142') format('woff'),
|
||||
url('iconfont.ttf?t=1737639517142') format('truetype');
|
||||
}
|
||||
// 配置节点头部
|
||||
.config-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.node-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 24px;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.divide-line {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
margin-top: 16px;
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.config-editable-input {
|
||||
max-width: 510px;
|
||||
height: 24px;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
border-color: #40a9ff;
|
||||
box-shadow: 0 0 0 2px rgb(24 144 255 / 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 表单字段权限
|
||||
.field-setting-pane {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 14px;
|
||||
|
||||
.field-setting-desc {
|
||||
padding-right: 8px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.field-permit-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 45px;
|
||||
padding-left: 12px;
|
||||
line-height: 45px;
|
||||
background-color: #f8fafc0a;
|
||||
border: 1px solid #1f38581a;
|
||||
|
||||
.first-title {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.other-titles {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.setting-title-label {
|
||||
display: inline-block;
|
||||
width: 110px;
|
||||
padding: 5px 0;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.field-setting-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 38px;
|
||||
padding-left: 12px;
|
||||
border: 1px solid #1f38581a;
|
||||
border-top: 0;
|
||||
|
||||
.field-setting-item-label {
|
||||
display: inline-block;
|
||||
width: 110px;
|
||||
min-height: 16px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.field-setting-item-group {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.item-radio-wrap {
|
||||
display: inline-block;
|
||||
width: 110px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 节点连线气泡卡片样式
|
||||
.handler-item-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 320px;
|
||||
cursor: pointer;
|
||||
|
||||
.handler-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.handler-item-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
background: #fff;
|
||||
border: 1px solid #e2e2e2;
|
||||
border-radius: 50%;
|
||||
|
||||
&:hover {
|
||||
background: #e2e2e2;
|
||||
box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
|
||||
}
|
||||
|
||||
.icon-size {
|
||||
font-size: 25px;
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.approve {
|
||||
color: #ff943e;
|
||||
}
|
||||
|
||||
.copy {
|
||||
color: #3296fa;
|
||||
}
|
||||
|
||||
.condition {
|
||||
color: #67c23a;
|
||||
}
|
||||
|
||||
.parallel {
|
||||
color: #626aef;
|
||||
}
|
||||
|
||||
.inclusive {
|
||||
color: #345da2;
|
||||
}
|
||||
|
||||
.delay {
|
||||
color: #e47470;
|
||||
}
|
||||
|
||||
.trigger {
|
||||
color: #3373d2;
|
||||
}
|
||||
|
||||
.router {
|
||||
color: #ca3a31;
|
||||
}
|
||||
|
||||
.transactor {
|
||||
color: #309;
|
||||
}
|
||||
|
||||
.child-process {
|
||||
color: #963;
|
||||
}
|
||||
|
||||
.async-child-process {
|
||||
color: #066;
|
||||
}
|
||||
|
||||
.handler-item-text {
|
||||
width: 80px;
|
||||
margin-top: 4px;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
// Simple 流程模型样式
|
||||
.simple-process-model-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 32px;
|
||||
overflow-x: auto;
|
||||
background-color: #fafafa;
|
||||
|
||||
.simple-process-model {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: fit-content;
|
||||
background: url('./svg/simple-process-bg.svg') 0 0 repeat;
|
||||
transform: scale(1);
|
||||
transform-origin: 50% 0 0;
|
||||
transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
// 节点容器 定义节点宽度
|
||||
.node-container {
|
||||
width: 200px;
|
||||
}
|
||||
// 节点
|
||||
.node-box {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 70px;
|
||||
padding: 5px 10px 8px;
|
||||
cursor: pointer;
|
||||
background-color: #fff;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 4px 0 rgb(10 30 65 / 16%);
|
||||
transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
|
||||
&.status-pass {
|
||||
background-color: #a9da90;
|
||||
border-color: #67c23a;
|
||||
}
|
||||
|
||||
&.status-pass:hover {
|
||||
border-color: #67c23a;
|
||||
}
|
||||
|
||||
&.status-running {
|
||||
background-color: #e7f0fe;
|
||||
border-color: #5a9cf8;
|
||||
}
|
||||
|
||||
&.status-running:hover {
|
||||
border-color: #5a9cf8;
|
||||
}
|
||||
|
||||
&.status-reject {
|
||||
background-color: #f6e5e5;
|
||||
border-color: #e47470;
|
||||
}
|
||||
|
||||
&.status-reject:hover {
|
||||
border-color: #e47470;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: #0089ff;
|
||||
|
||||
.node-toolbar {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.branch-node-move {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
// 普通节点标题
|
||||
.node-title-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px 4px 0 0;
|
||||
|
||||
.node-title-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&.user-task {
|
||||
color: #ff943e;
|
||||
}
|
||||
|
||||
&.copy-task {
|
||||
color: #3296fa;
|
||||
}
|
||||
|
||||
&.start-user {
|
||||
color: #676565;
|
||||
}
|
||||
|
||||
&.delay-node {
|
||||
color: #e47470;
|
||||
}
|
||||
|
||||
&.trigger-node {
|
||||
color: #3373d2;
|
||||
}
|
||||
|
||||
&.router-node {
|
||||
color: #ca3a31;
|
||||
}
|
||||
|
||||
&.transactor-task {
|
||||
color: #309;
|
||||
}
|
||||
|
||||
&.child-process {
|
||||
color: #963;
|
||||
}
|
||||
|
||||
&.async-child-process {
|
||||
color: #066;
|
||||
}
|
||||
}
|
||||
|
||||
.node-title {
|
||||
margin-left: 4px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 18px;
|
||||
color: #1f1f1f;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
border-bottom: 1px dashed #f60;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 条件节点标题
|
||||
.branch-node-title-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 4px 0;
|
||||
cursor: pointer;
|
||||
border-radius: 4px 4px 0 0;
|
||||
|
||||
.input-max-width {
|
||||
max-width: 115px !important;
|
||||
}
|
||||
|
||||
.branch-title {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #f60;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
border-bottom: 1px dashed #000;
|
||||
}
|
||||
}
|
||||
|
||||
.branch-priority {
|
||||
min-width: 50px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.node-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 32px;
|
||||
padding: 4px 8px;
|
||||
margin-top: 4px;
|
||||
line-height: 32px;
|
||||
color: #111f2c;
|
||||
background: rgb(0 0 0 / 3%);
|
||||
border-radius: 4px;
|
||||
|
||||
.node-text {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 2; /* 这将限制文本显示为两行 */
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
word-break: break-all;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
|
||||
//条件节点内容
|
||||
.branch-node-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 32px;
|
||||
padding: 4px 0;
|
||||
margin-top: 4px;
|
||||
line-height: 32px;
|
||||
color: #111f2c;
|
||||
border-radius: 4px;
|
||||
|
||||
.branch-node-text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 2; /* 这将限制文本显示为两行 */
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
word-break: break-all;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
|
||||
// 节点操作 ：删除
|
||||
.node-toolbar {
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
right: 0;
|
||||
display: flex;
|
||||
opacity: 0;
|
||||
|
||||
.toolbar-icon {
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
// 条件节点左右移动
|
||||
.branch-node-move {
|
||||
position: absolute;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 10px;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.move-node-left {
|
||||
top: 0;
|
||||
left: -2px;
|
||||
background: rgb(126 134 142 / 8%);
|
||||
border-top-left-radius: 8px;
|
||||
border-bottom-left-radius: 8px;
|
||||
}
|
||||
|
||||
.move-node-right {
|
||||
top: 0;
|
||||
right: -2px;
|
||||
background: rgb(126 134 142 / 8%);
|
||||
border-top-right-radius: 6px;
|
||||
border-bottom-right-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.node-config-error {
|
||||
border-color: #ff5219 !important;
|
||||
}
|
||||
// 普通节点包装
|
||||
.node-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
// 节点连线处理
|
||||
.node-handler-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 70px;
|
||||
user-select: none;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 0;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
content: '';
|
||||
background-color: #dedede;
|
||||
}
|
||||
|
||||
.node-handler {
|
||||
.add-icon {
|
||||
position: relative;
|
||||
top: -5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
background-color: #0089ff;
|
||||
border-radius: 50%;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.node-handler-arrow {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
display: flex;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
// 条件节点包装
|
||||
.branch-node-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 16px;
|
||||
|
||||
.branch-node-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
min-width: fit-content;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
content: '';
|
||||
background-color: #fafafa;
|
||||
transform: translate(-50%);
|
||||
}
|
||||
|
||||
.branch-node-add {
|
||||
position: absolute;
|
||||
top: -18px;
|
||||
left: 50%;
|
||||
z-index: 1;
|
||||
height: 36px;
|
||||
padding: 0 10px;
|
||||
font-size: 12px;
|
||||
line-height: 36px;
|
||||
border: 2px solid #dedede;
|
||||
border-radius: 18px;
|
||||
transform: translateX(-50%);
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
.branch-node-readonly {
|
||||
position: absolute;
|
||||
top: -18px;
|
||||
left: 50%;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background-color: #fff;
|
||||
border: 2px solid #dedede;
|
||||
border-radius: 50%;
|
||||
transform: translateX(-50%);
|
||||
transform-origin: center center;
|
||||
|
||||
&.status-pass {
|
||||
background-color: #e9f4e2;
|
||||
border-color: #6bb63c;
|
||||
}
|
||||
|
||||
&.status-pass:hover {
|
||||
border-color: #6bb63c;
|
||||
}
|
||||
|
||||
.icon-size {
|
||||
font-size: 22px;
|
||||
|
||||
&.condition {
|
||||
color: #67c23a;
|
||||
}
|
||||
|
||||
&.parallel {
|
||||
color: #626aef;
|
||||
}
|
||||
|
||||
&.inclusive {
|
||||
color: #345da2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.branch-node-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-width: 280px;
|
||||
padding: 40px 40px 0;
|
||||
background: transparent;
|
||||
border-top: 2px solid #dedede;
|
||||
border-bottom: 2px solid #dedede;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
content: '';
|
||||
background-color: #dedede;
|
||||
}
|
||||
}
|
||||
// 覆盖条件节点第一个节点左上角的线
|
||||
.branch-line-first-top {
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
left: -1px;
|
||||
width: 50%;
|
||||
height: 7px;
|
||||
content: '';
|
||||
background-color: #fafafa;
|
||||
}
|
||||
// 覆盖条件节点第一个节点左下角的线
|
||||
.branch-line-first-bottom {
|
||||
position: absolute;
|
||||
bottom: -5px;
|
||||
left: -1px;
|
||||
width: 50%;
|
||||
height: 7px;
|
||||
content: '';
|
||||
background-color: #fafafa;
|
||||
}
|
||||
// 覆盖条件节点最后一个节点右上角的线
|
||||
.branch-line-last-top {
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
right: -1px;
|
||||
width: 50%;
|
||||
height: 7px;
|
||||
content: '';
|
||||
background-color: #fafafa;
|
||||
}
|
||||
// 覆盖条件节点最后一个节点右下角的线
|
||||
.branch-line-last-bottom {
|
||||
position: absolute;
|
||||
right: -1px;
|
||||
bottom: -5px;
|
||||
width: 50%;
|
||||
height: 7px;
|
||||
content: '';
|
||||
background-color: #fafafa;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.node-fixed-name {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
padding: 0 4px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
// 开始节点包装
|
||||
.start-node-wrapper {
|
||||
position: relative;
|
||||
margin-top: 16px;
|
||||
|
||||
.start-node-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.start-node-box {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 90px;
|
||||
height: 36px;
|
||||
padding: 3px 4px;
|
||||
color: #212121;
|
||||
cursor: pointer;
|
||||
background: #fafafa;
|
||||
border-radius: 30px;
|
||||
box-shadow: 0 1px 5px 0 rgb(10 30 65 / 8%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 结束节点包装
|
||||
.end-node-wrapper {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.end-node-box {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 80px;
|
||||
height: 36px;
|
||||
color: #212121;
|
||||
border: 2px solid #fafafa;
|
||||
border-radius: 30px;
|
||||
box-shadow: 0 1px 5px 0 rgb(10 30 65 / 8%);
|
||||
|
||||
&.status-pass {
|
||||
background-color: #a9da90;
|
||||
border-color: #6bb63c;
|
||||
}
|
||||
|
||||
&.status-pass:hover {
|
||||
border-color: #6bb63c;
|
||||
}
|
||||
|
||||
&.status-reject {
|
||||
background-color: #f6e5e5;
|
||||
border-color: #e47470;
|
||||
}
|
||||
|
||||
&.status-reject:hover {
|
||||
border-color: #e47470;
|
||||
}
|
||||
|
||||
&.status-cancel {
|
||||
background-color: #eaeaeb;
|
||||
border-color: #919398;
|
||||
}
|
||||
|
||||
&.status-cancel:hover {
|
||||
border-color: #919398;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 可编辑的 title 输入框
|
||||
.editable-title-input {
|
||||
max-width: 145px;
|
||||
height: 20px;
|
||||
margin-left: 4px;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
border-color: #40a9ff;
|
||||
box-shadow: 0 0 0 2px rgb(24 144 255 / 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: iconfont !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-trigger::before {
|
||||
content: '\e6d3';
|
||||
}
|
||||
|
||||
.icon-router::before {
|
||||
content: '\e6b2';
|
||||
}
|
||||
|
||||
.icon-delay::before {
|
||||
content: '\e600';
|
||||
}
|
||||
|
||||
.icon-start-user::before {
|
||||
content: '\e679';
|
||||
}
|
||||
|
||||
.icon-inclusive::before {
|
||||
content: '\e602';
|
||||
}
|
||||
|
||||
.icon-copy::before {
|
||||
content: '\e7eb';
|
||||
}
|
||||
|
||||
.icon-transactor::before {
|
||||
content: '\e61c';
|
||||
}
|
||||
|
||||
.icon-exclusive::before {
|
||||
content: '\e717';
|
||||
}
|
||||
|
||||
.icon-approve::before {
|
||||
content: '\e715';
|
||||
}
|
||||
|
||||
.icon-parallel::before {
|
||||
content: '\e688';
|
||||
}
|
||||
|
||||
.icon-async-child-process::before {
|
||||
content: '\e6f2';
|
||||
}
|
||||
|
||||
.icon-child-process::before {
|
||||
content: '\e6c1';
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<svg width="22" height="22" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="#FAFAFA" d="M0 0h22v22H0z"/><circle fill="#919BAE" cx="1" cy="1" r="1"/></g></svg>
|
||||
|
After Width: | Height: | Size: 192 B |
@@ -2,7 +2,7 @@
|
||||
import type { UploadFile, UploadProps } from 'ant-design-vue';
|
||||
import type { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
|
||||
|
||||
import type { AxiosResponse } from '@vben/request';
|
||||
import type { FileUploadProps } from './typing';
|
||||
|
||||
import type { AxiosProgressEvent } from '#/api/infra/file';
|
||||
|
||||
@@ -20,44 +20,19 @@ import { useUpload, useUploadType } from './use-upload';
|
||||
|
||||
defineOptions({ name: 'FileUpload', inheritAttrs: false });
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 根据后缀，或者其他
|
||||
accept?: string[];
|
||||
api?: (
|
||||
file: File,
|
||||
onUploadProgress?: AxiosProgressEvent,
|
||||
) => Promise<AxiosResponse<any>>;
|
||||
// 上传的目录
|
||||
directory?: string;
|
||||
disabled?: boolean;
|
||||
helpText?: string;
|
||||
// 最大数量的文件，Infinity不限制
|
||||
maxNumber?: number;
|
||||
// 文件最大多少MB
|
||||
maxSize?: number;
|
||||
// 是否支持多选
|
||||
multiple?: boolean;
|
||||
// support xxx.xxx.xx
|
||||
resultField?: string;
|
||||
// 是否显示下面的描述
|
||||
showDescription?: boolean;
|
||||
value?: string | string[];
|
||||
}>(),
|
||||
{
|
||||
value: () => [],
|
||||
directory: undefined,
|
||||
disabled: false,
|
||||
helpText: '',
|
||||
maxSize: 2,
|
||||
maxNumber: 1,
|
||||
accept: () => [],
|
||||
multiple: false,
|
||||
api: undefined,
|
||||
resultField: '',
|
||||
showDescription: false,
|
||||
},
|
||||
);
|
||||
const props = withDefaults(defineProps<FileUploadProps>(), {
|
||||
value: () => [],
|
||||
directory: undefined,
|
||||
disabled: false,
|
||||
helpText: '',
|
||||
maxSize: 2,
|
||||
maxNumber: 1,
|
||||
accept: () => [],
|
||||
multiple: false,
|
||||
api: undefined,
|
||||
resultField: '',
|
||||
showDescription: false,
|
||||
});
|
||||
const emit = defineEmits(['change', 'update:value', 'delete', 'returnText']);
|
||||
const { accept, helpText, maxNumber, maxSize } = toRefs(props);
|
||||
const isInnerOperate = ref<boolean>(false);
|
||||
@@ -112,7 +87,7 @@ watch(
|
||||
},
|
||||
);
|
||||
|
||||
const handleRemove = async (file: UploadFile) => {
|
||||
async function handleRemove(file: UploadFile) {
|
||||
if (fileList.value) {
|
||||
const index = fileList.value.findIndex((item) => item.uid === file.uid);
|
||||
index !== -1 && fileList.value.splice(index, 1);
|
||||
@@ -122,9 +97,9 @@ const handleRemove = async (file: UploadFile) => {
|
||||
emit('change', value);
|
||||
emit('delete', file);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const beforeUpload = async (file: File) => {
|
||||
async function beforeUpload(file: File) {
|
||||
// 使用现代的Blob.text()方法替代FileReader
|
||||
const fileContent = await file.text();
|
||||
emit('returnText', fileContent);
|
||||
@@ -145,7 +120,7 @@ const beforeUpload = async (file: File) => {
|
||||
setTimeout(() => (isLtMsg.value = true), 1000);
|
||||
}
|
||||
return (isAct && !isLt) || Upload.LIST_IGNORE;
|
||||
};
|
||||
}
|
||||
|
||||
async function customRequest(info: UploadRequestOption<any>) {
|
||||
let { api } = props;
|
||||
|
||||
@@ -1,3 +1,8 @@
|
||||
/**
|
||||
* 默认图片类型
|
||||
*/
|
||||
export const defaultImageAccepts = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
|
||||
|
||||
export function checkFileType(file: File, accepts: string[]) {
|
||||
if (!accepts || accepts.length === 0) {
|
||||
return true;
|
||||
@@ -7,11 +12,6 @@ export function checkFileType(file: File, accepts: string[]) {
|
||||
return reg.test(file.name);
|
||||
}
|
||||
|
||||
/**
|
||||
* 默认图片类型
|
||||
*/
|
||||
export const defaultImageAccepts = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
|
||||
|
||||
export function checkImgType(
|
||||
file: File,
|
||||
accepts: string[] = defaultImageAccepts,
|
||||
|
||||
@@ -2,9 +2,7 @@
|
||||
import type { UploadFile, UploadProps } from 'ant-design-vue';
|
||||
import type { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
|
||||
|
||||
import type { AxiosResponse } from '@vben/request';
|
||||
|
||||
import type { UploadListType } from './typing';
|
||||
import type { FileUploadProps } from './typing';
|
||||
|
||||
import type { AxiosProgressEvent } from '#/api/infra/file';
|
||||
|
||||
@@ -22,46 +20,20 @@ import { useUpload, useUploadType } from './use-upload';
|
||||
|
||||
defineOptions({ name: 'ImageUpload', inheritAttrs: false });
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 根据后缀，或者其他
|
||||
accept?: string[];
|
||||
api?: (
|
||||
file: File,
|
||||
onUploadProgress?: AxiosProgressEvent,
|
||||
) => Promise<AxiosResponse<any>>;
|
||||
// 上传的目录
|
||||
directory?: string;
|
||||
disabled?: boolean;
|
||||
helpText?: string;
|
||||
listType?: UploadListType;
|
||||
// 最大数量的文件，Infinity不限制
|
||||
maxNumber?: number;
|
||||
// 文件最大多少MB
|
||||
maxSize?: number;
|
||||
// 是否支持多选
|
||||
multiple?: boolean;
|
||||
// support xxx.xxx.xx
|
||||
resultField?: string;
|
||||
// 是否显示下面的描述
|
||||
showDescription?: boolean;
|
||||
value?: string | string[];
|
||||
}>(),
|
||||
{
|
||||
value: () => [],
|
||||
directory: undefined,
|
||||
disabled: false,
|
||||
listType: 'picture-card',
|
||||
helpText: '',
|
||||
maxSize: 2,
|
||||
maxNumber: 1,
|
||||
accept: () => defaultImageAccepts,
|
||||
multiple: false,
|
||||
api: undefined,
|
||||
resultField: '',
|
||||
showDescription: true,
|
||||
},
|
||||
);
|
||||
const props = withDefaults(defineProps<FileUploadProps>(), {
|
||||
value: () => [],
|
||||
directory: undefined,
|
||||
disabled: false,
|
||||
listType: 'picture-card',
|
||||
helpText: '',
|
||||
maxSize: 2,
|
||||
maxNumber: 1,
|
||||
accept: () => defaultImageAccepts,
|
||||
multiple: false,
|
||||
api: undefined,
|
||||
resultField: '',
|
||||
showDescription: true,
|
||||
});
|
||||
const emit = defineEmits(['change', 'update:value', 'delete']);
|
||||
const { accept, helpText, maxNumber, maxSize } = toRefs(props);
|
||||
const isInnerOperate = ref<boolean>(false);
|
||||
@@ -130,7 +102,7 @@ function getBase64<T extends ArrayBuffer | null | string>(file: File) {
|
||||
});
|
||||
}
|
||||
|
||||
const handlePreview = async (file: UploadFile) => {
|
||||
async function handlePreview(file: UploadFile) {
|
||||
if (!file.url && !file.preview) {
|
||||
file.preview = await getBase64<string>(file.originFileObj!);
|
||||
}
|
||||
@@ -141,9 +113,9 @@ const handlePreview = async (file: UploadFile) => {
|
||||
previewImage.value.slice(
|
||||
Math.max(0, previewImage.value.lastIndexOf('/') + 1),
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
const handleRemove = async (file: UploadFile) => {
|
||||
async function handleRemove(file: UploadFile) {
|
||||
if (fileList.value) {
|
||||
const index = fileList.value.findIndex((item) => item.uid === file.uid);
|
||||
index !== -1 && fileList.value.splice(index, 1);
|
||||
@@ -153,14 +125,14 @@ const handleRemove = async (file: UploadFile) => {
|
||||
emit('change', value);
|
||||
emit('delete', file);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const handleCancel = () => {
|
||||
function handleCancel() {
|
||||
previewOpen.value = false;
|
||||
previewTitle.value = '';
|
||||
};
|
||||
}
|
||||
|
||||
const beforeUpload = async (file: File) => {
|
||||
async function beforeUpload(file: File) {
|
||||
const { maxSize, accept } = props;
|
||||
const isAct = checkImgType(file, accept);
|
||||
if (!isAct) {
|
||||
@@ -177,7 +149,7 @@ const beforeUpload = async (file: File) => {
|
||||
setTimeout(() => (isLtMsg.value = true), 1000);
|
||||
}
|
||||
return (isAct && !isLt) || Upload.LIST_IGNORE;
|
||||
};
|
||||
}
|
||||
|
||||
async function customRequest(info: UploadRequestOption<any>) {
|
||||
let { api } = props;
|
||||
|
||||
@@ -1,2 +1,3 @@
|
||||
export { default as FileUpload } from './file-upload.vue';
|
||||
export { default as ImageUpload } from './image-upload.vue';
|
||||
export { default as InputUpload } from './input-upload.vue';
|
||||
|
||||
63
apps/web-antd/src/components/upload/input-upload.vue
Normal file
63
apps/web-antd/src/components/upload/input-upload.vue
Normal file
@@ -0,0 +1,63 @@
|
||||
<script setup lang="ts">
|
||||
import type { InputProps, TextAreaProps } from 'ant-design-vue';
|
||||
|
||||
import type { FileUploadProps } from './typing';
|
||||
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import { Col, Input, Row, Textarea } from 'ant-design-vue';
|
||||
|
||||
import FileUpload from './file-upload.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
fileUploadProps?: FileUploadProps;
|
||||
inputProps?: InputProps;
|
||||
inputType?: 'input' | 'textarea';
|
||||
textareaProps?: TextAreaProps;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits(['change', 'update:value']);
|
||||
|
||||
const value = ref('');
|
||||
|
||||
function handleReturnText(text: string) {
|
||||
value.value = text;
|
||||
emit('change', value.value);
|
||||
emit('update:value', value.value);
|
||||
}
|
||||
|
||||
const inputProps = computed(() => {
|
||||
return {
|
||||
...props.inputProps,
|
||||
value: value.value,
|
||||
};
|
||||
});
|
||||
|
||||
const textareaProps = computed(() => {
|
||||
return {
|
||||
...props.textareaProps,
|
||||
value: value.value,
|
||||
};
|
||||
});
|
||||
|
||||
const fileUploadProps = computed(() => {
|
||||
return {
|
||||
...props.fileUploadProps,
|
||||
};
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<Row>
|
||||
<Col :span="18">
|
||||
<Input v-if="inputType === 'input'" v-bind="inputProps" />
|
||||
<Textarea v-else :row="4" v-bind="textareaProps" />
|
||||
</Col>
|
||||
<Col :span="6">
|
||||
<FileUpload
|
||||
class="ml-4"
|
||||
v-bind="fileUploadProps"
|
||||
@return-text="handleReturnText"
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</template>
|
||||
@@ -1,3 +1,7 @@
|
||||
import type { AxiosResponse } from '@vben/request';
|
||||
|
||||
import type { AxiosProgressEvent } from '#/api/infra/file';
|
||||
|
||||
export enum UploadResultStatus {
|
||||
DONE = 'done',
|
||||
ERROR = 'error',
|
||||
@@ -6,3 +10,28 @@ export enum UploadResultStatus {
|
||||
}
|
||||
|
||||
export type UploadListType = 'picture' | 'picture-card' | 'text';
|
||||
|
||||
export interface FileUploadProps {
|
||||
// 根据后缀，或者其他
|
||||
accept?: string[];
|
||||
api?: (
|
||||
file: File,
|
||||
onUploadProgress?: AxiosProgressEvent,
|
||||
) => Promise<AxiosResponse<any>>;
|
||||
// 上传的目录
|
||||
directory?: string;
|
||||
disabled?: boolean;
|
||||
helpText?: string;
|
||||
listType?: UploadListType;
|
||||
// 最大数量的文件，Infinity不限制
|
||||
maxNumber?: number;
|
||||
// 文件最大多少MB
|
||||
maxSize?: number;
|
||||
// 是否支持多选
|
||||
multiple?: boolean;
|
||||
// support xxx.xxx.xx
|
||||
resultField?: string;
|
||||
// 是否显示下面的描述
|
||||
showDescription?: boolean;
|
||||
value?: string | string[];
|
||||
}
|
||||
|
||||
@@ -80,17 +80,17 @@ export function useUploadType({
|
||||
}
|
||||
|
||||
// TODO @芋艿：目前保持和 admin-vue3 一致，后续可能重构
|
||||
export const useUpload = (directory?: string) => {
|
||||
export function useUpload(directory?: string) {
|
||||
// 后端上传地址
|
||||
const uploadUrl = getUploadUrl();
|
||||
// 是否使用前端直连上传
|
||||
const isClientUpload =
|
||||
UPLOAD_TYPE.CLIENT === import.meta.env.VITE_UPLOAD_TYPE;
|
||||
// 重写ElUpload上传方法
|
||||
const httpRequest = async (
|
||||
async function httpRequest(
|
||||
file: File,
|
||||
onUploadProgress?: AxiosProgressEvent,
|
||||
) => {
|
||||
) {
|
||||
// 模式一：前端上传
|
||||
if (isClientUpload) {
|
||||
// 1.1 生成文件名称
|
||||
@@ -114,20 +114,20 @@ export const useUpload = (directory?: string) => {
|
||||
// 模式二：后端上传
|
||||
return uploadFile({ file, directory }, onUploadProgress);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
uploadUrl,
|
||||
httpRequest,
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 获得上传 URL
|
||||
*/
|
||||
export const getUploadUrl = (): string => {
|
||||
export function getUploadUrl(): string {
|
||||
return `${apiURL}/infra/file/upload`;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建文件信息
|
||||
@@ -135,7 +135,10 @@ export const getUploadUrl = (): string => {
|
||||
* @param vo 文件预签名信息
|
||||
* @param file 文件
|
||||
*/
|
||||
function createFile0(vo: InfraFileApi.FilePresignedUrlRespVO, file: File) {
|
||||
function createFile0(
|
||||
vo: InfraFileApi.FilePresignedUrlRespVO,
|
||||
file: File,
|
||||
): InfraFileApi.File {
|
||||
const fileVO = {
|
||||
configId: vo.configId,
|
||||
url: vo.url,
|
||||
|
||||
@@ -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, '抄送');
|
||||
|
||||
214
apps/web-antd/src/utils/download.ts
Normal file
214
apps/web-antd/src/utils/download.ts
Normal file
@@ -0,0 +1,214 @@
|
||||
/**
|
||||
* 下载工具模块
|
||||
* 提供多种文件格式的下载功能
|
||||
*/
|
||||
|
||||
/**
|
||||
* 图片下载配置接口
|
||||
*/
|
||||
interface ImageDownloadOptions {
|
||||
/** 图片 URL */
|
||||
url: string;
|
||||
/** 指定画布宽度 */
|
||||
canvasWidth?: number;
|
||||
/** 指定画布高度 */
|
||||
canvasHeight?: number;
|
||||
/** 将图片绘制在画布上时带上图片的宽高值，默认为 true */
|
||||
drawWithImageSize?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* 基础文件下载函数
|
||||
* @param data - 文件数据 Blob
|
||||
* @param fileName - 文件名
|
||||
* @param mimeType - MIME 类型
|
||||
*/
|
||||
export const download0 = (data: Blob, fileName: string, mimeType: string) => {
|
||||
try {
|
||||
// 创建 blob
|
||||
const blob = new Blob([data], { type: mimeType });
|
||||
// 创建 href 超链接，点击进行下载
|
||||
window.URL = window.URL || window.webkitURL;
|
||||
const href = URL.createObjectURL(blob);
|
||||
const downA = document.createElement('a');
|
||||
downA.href = href;
|
||||
downA.download = fileName;
|
||||
downA.click();
|
||||
// 销毁超链接
|
||||
window.URL.revokeObjectURL(href);
|
||||
} catch (error) {
|
||||
console.error('文件下载失败:', error);
|
||||
throw new Error(
|
||||
`文件下载失败: ${error instanceof Error ? error.message : '未知错误'}`,
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 触发文件下载的通用方法
|
||||
* @param url - 下载链接
|
||||
* @param fileName - 文件名
|
||||
*/
|
||||
const triggerDownload = (url: string, fileName: string) => {
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = fileName;
|
||||
a.click();
|
||||
};
|
||||
|
||||
export const download = {
|
||||
/**
|
||||
* 下载 Excel 文件
|
||||
* @param data - 文件数据 Blob
|
||||
* @param fileName - 文件名
|
||||
*/
|
||||
excel: (data: Blob, fileName: string) => {
|
||||
download0(data, fileName, 'application/vnd.ms-excel');
|
||||
},
|
||||
|
||||
/**
|
||||
* 下载 Word 文件
|
||||
* @param data - 文件数据 Blob
|
||||
* @param fileName - 文件名
|
||||
*/
|
||||
word: (data: Blob, fileName: string) => {
|
||||
download0(data, fileName, 'application/msword');
|
||||
},
|
||||
|
||||
/**
|
||||
* 下载 Zip 文件
|
||||
* @param data - 文件数据 Blob
|
||||
* @param fileName - 文件名
|
||||
*/
|
||||
zip: (data: Blob, fileName: string) => {
|
||||
download0(data, fileName, 'application/zip');
|
||||
},
|
||||
|
||||
/**
|
||||
* 下载 HTML 文件
|
||||
* @param data - 文件数据 Blob
|
||||
* @param fileName - 文件名
|
||||
*/
|
||||
html: (data: Blob, fileName: string) => {
|
||||
download0(data, fileName, 'text/html');
|
||||
},
|
||||
|
||||
/**
|
||||
* 下载 Markdown 文件
|
||||
* @param data - 文件数据 Blob
|
||||
* @param fileName - 文件名
|
||||
*/
|
||||
markdown: (data: Blob, fileName: string) => {
|
||||
download0(data, fileName, 'text/markdown');
|
||||
},
|
||||
|
||||
/**
|
||||
* 下载 JSON 文件
|
||||
* @param data - 文件数据 Blob
|
||||
* @param fileName - 文件名
|
||||
*/
|
||||
json: (data: Blob, fileName: string) => {
|
||||
download0(data, fileName, 'application/json');
|
||||
},
|
||||
|
||||
/**
|
||||
* 下载图片（允许跨域）
|
||||
* @param options - 图片下载配置
|
||||
*/
|
||||
image: (options: ImageDownloadOptions) => {
|
||||
const {
|
||||
url,
|
||||
canvasWidth,
|
||||
canvasHeight,
|
||||
drawWithImageSize = true,
|
||||
} = options;
|
||||
|
||||
const image = new Image();
|
||||
// image.setAttribute('crossOrigin', 'anonymous')
|
||||
image.src = url;
|
||||
image.addEventListener('load', () => {
|
||||
try {
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = canvasWidth || image.width;
|
||||
canvas.height = canvasHeight || image.height;
|
||||
const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
|
||||
ctx?.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
if (drawWithImageSize) {
|
||||
ctx.drawImage(image, 0, 0, image.width, image.height);
|
||||
} else {
|
||||
ctx.drawImage(image, 0, 0);
|
||||
}
|
||||
|
||||
const dataUrl = canvas.toDataURL('image/png');
|
||||
triggerDownload(dataUrl, 'image.png');
|
||||
} catch (error) {
|
||||
console.error('图片下载失败:', error);
|
||||
throw new Error(
|
||||
`图片下载失败: ${error instanceof Error ? error.message : '未知错误'}`,
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
image.addEventListener('error', () => {
|
||||
throw new Error('图片加载失败');
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 将 Base64 字符串转换为文件对象
|
||||
* @param base64 - Base64 字符串
|
||||
* @param fileName - 文件名
|
||||
* @returns File 对象
|
||||
*/
|
||||
base64ToFile: (base64: string, fileName: string): File => {
|
||||
// 输入验证
|
||||
if (!base64 || typeof base64 !== 'string') {
|
||||
throw new Error('base64 参数必须是非空字符串');
|
||||
}
|
||||
|
||||
// 将 base64 按照逗号进行分割，将前缀与后续内容分隔开
|
||||
const data = base64.split(',');
|
||||
if (data.length !== 2 || !data[0] || !data[1]) {
|
||||
throw new Error('无效的 base64 格式');
|
||||
}
|
||||
|
||||
// 利用正则表达式从前缀中获取类型信息（image/png、image/jpeg、image/webp等）
|
||||
const typeMatch = data[0].match(/:(.*?);/);
|
||||
if (!typeMatch || !typeMatch[1]) {
|
||||
throw new Error('无法解析 base64 类型信息');
|
||||
}
|
||||
const type = typeMatch[1];
|
||||
|
||||
// 从类型信息中获取具体的文件格式后缀（png、jpeg、webp）
|
||||
const typeParts = type.split('/');
|
||||
if (typeParts.length !== 2 || !typeParts[1]) {
|
||||
throw new Error('无效的 MIME 类型格式');
|
||||
}
|
||||
const suffix = typeParts[1];
|
||||
|
||||
try {
|
||||
// 使用 atob() 对 base64 数据进行解码，结果是一个文件数据流以字符串的格式输出
|
||||
const bstr = window.atob(data[1]);
|
||||
|
||||
// 获取解码结果字符串的长度
|
||||
const n = bstr.length;
|
||||
// 根据解码结果字符串的长度创建一个等长的整型数字数组
|
||||
const u8arr = new Uint8Array(n);
|
||||
|
||||
// 优化的 Uint8Array 填充逻辑
|
||||
for (let i = 0; i < n; i++) {
|
||||
// 使用 charCodeAt() 获取字符对应的字节值（Base64 解码后的字符串是字节级别的）
|
||||
// eslint-disable-next-line unicorn/prefer-code-point
|
||||
u8arr[i] = bstr.charCodeAt(i);
|
||||
}
|
||||
|
||||
// 返回 File 文件对象
|
||||
return new File([u8arr], `${fileName}.${suffix}`, { type });
|
||||
} catch (error) {
|
||||
throw new Error(
|
||||
`Base64 解码失败: ${error instanceof Error ? error.message : '未知错误'}`,
|
||||
);
|
||||
}
|
||||
},
|
||||
};
|
||||
@@ -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>
|
||||
|
||||
@@ -26,30 +26,14 @@ import {
|
||||
} from '#/api/bpm/model';
|
||||
import { getSimpleDeptList } from '#/api/system/dept';
|
||||
import { getSimpleUserList } from '#/api/system/user';
|
||||
import { BpmAutoApproveType, BpmModelFormType, BpmModelType } from '#/utils';
|
||||
|
||||
import BasicInfo from './modules/basic-info.vue';
|
||||
import FormDesign from './modules/form-design.vue';
|
||||
import ProcessDesign from './modules/process-design.vue';
|
||||
|
||||
defineOptions({ name: 'BpmModelCreate' });
|
||||
|
||||
// TODO 这个常量是不是所有 apps 都可以使用， 放 @utils/constant.ts 不能共享， @芋艿 这些常量放哪里合适！
|
||||
// TODO @jason：/Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/utils/constants.ts；先不多个 apps 共享哈；
|
||||
const BpmModelType = {
|
||||
BPMN: 10, // BPMN 设计器
|
||||
SIMPLE: 20, // 简易设计器
|
||||
};
|
||||
|
||||
const BpmModelFormType = {
|
||||
NORMAL: 10, // 流程表单
|
||||
CUSTOM: 20, // 业务表单
|
||||
};
|
||||
|
||||
const BpmAutoApproveType = {
|
||||
NONE: 0, // 不自动通过
|
||||
APPROVE_ALL: 1, // 仅审批一次，后续重复的审批节点均自动通过
|
||||
APPROVE_SEQUENT: 2, // 仅针对连续审批的节点自动通过
|
||||
};
|
||||
|
||||
// 流程定义类型
|
||||
type BpmProcessDefinitionType = Omit<
|
||||
BpmProcessDefinitionApi.ProcessDefinitionVO,
|
||||
@@ -69,6 +53,8 @@ const userStore = useUserStore();
|
||||
const basicInfoRef = ref<InstanceType<typeof BasicInfo>>();
|
||||
// 表单设计组件引用
|
||||
const formDesignRef = ref<InstanceType<typeof FormDesign>>();
|
||||
// 流程设计组件引用
|
||||
const processDesignRef = ref<InstanceType<typeof ProcessDesign>>();
|
||||
|
||||
/** 步骤校验函数 */
|
||||
const validateBasic = async () => {
|
||||
@@ -82,7 +68,7 @@ const validateForm = async () => {
|
||||
|
||||
/** 流程设计校验 */
|
||||
const validateProcess = async () => {
|
||||
// TODO
|
||||
await processDesignRef.value?.validate();
|
||||
};
|
||||
|
||||
const currentStep = ref(-1); // 步骤控制。-1 用于，一开始全部不展示等当前页面数据初始化完成
|
||||
@@ -102,7 +88,7 @@ const formData: any = ref({
|
||||
category: undefined,
|
||||
icon: undefined,
|
||||
description: '',
|
||||
type: BpmModelType.BPMN,
|
||||
type: BpmModelType.SIMPLE,
|
||||
formType: BpmModelFormType.NORMAL,
|
||||
formId: '',
|
||||
formCustomCreatePath: '',
|
||||
@@ -190,7 +176,7 @@ const initData = async () => {
|
||||
} else {
|
||||
// 情况三：新增场景
|
||||
formData.value.startUserType = 0; // 全体
|
||||
formData.value.managerUserIds.push(userStore.userInfo?.userId);
|
||||
formData.value.managerUserIds.push(userStore.userInfo?.id);
|
||||
}
|
||||
|
||||
// 获取表单列表
|
||||
@@ -352,6 +338,7 @@ const handleDeploy = async () => {
|
||||
/** 步骤切换处理 */
|
||||
const handleStepClick = async (index: number) => {
|
||||
try {
|
||||
console.warn('handleStepClick', index);
|
||||
if (index !== 0) {
|
||||
await validateBasic();
|
||||
}
|
||||
@@ -401,7 +388,7 @@ onBeforeUnmount(() => {
|
||||
// 清理所有的引用
|
||||
basicInfoRef.value = undefined;
|
||||
formDesignRef.value = undefined;
|
||||
// processDesignRef.value = null;
|
||||
processDesignRef.value = undefined;
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -486,7 +473,7 @@ onBeforeUnmount(() => {
|
||||
/>
|
||||
</div>
|
||||
<!-- 第二步：表单设计 -->
|
||||
<div v-show="currentStep === 1" class="mx-auto w-4/6">
|
||||
<div v-if="currentStep === 1" class="mx-auto w-4/6">
|
||||
<FormDesign
|
||||
v-model="formData"
|
||||
:form-list="formList"
|
||||
@@ -494,10 +481,15 @@ onBeforeUnmount(() => {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 第三步：流程设计 TODO -->
|
||||
<!-- 第三步：流程设计 -->
|
||||
<ProcessDesign
|
||||
v-if="currentStep === 2"
|
||||
v-model="formData"
|
||||
ref="processDesignRef"
|
||||
/>
|
||||
|
||||
<!-- 第四步：更多设置 TODO -->
|
||||
<div v-show="currentStep === 3" class="mx-auto w-4/6"></div>
|
||||
<div v-if="currentStep === 3" class="mx-auto w-4/6"></div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
@@ -65,7 +65,6 @@ const rules: Record<string, Rule[]> = {
|
||||
category: [{ required: true, message: '流程分类不能为空', trigger: 'blur' }],
|
||||
type: [{ required: true, message: '流程类型不能为空', trigger: 'blur' }],
|
||||
visible: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }],
|
||||
// TODO 这个的校验好像没有起作用
|
||||
managerUserIds: [
|
||||
{ required: true, message: '流程管理员不能为空', trigger: 'blur' },
|
||||
],
|
||||
@@ -282,10 +281,12 @@ defineExpose({ validate });
|
||||
</Form.Item>
|
||||
<Form.Item label="流程类型" name="type" class="mb-5">
|
||||
<Radio.Group v-model:value="modelData.type">
|
||||
<!-- TODO BPMN 流程类型需要整合，暂时禁用 -->
|
||||
<Radio
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.BPM_MODEL_TYPE)"
|
||||
:key="dict.value"
|
||||
:value="dict.value"
|
||||
:disabled="dict.value === 10"
|
||||
>
|
||||
{{ dict.label }}
|
||||
</Radio>
|
||||
|
||||
@@ -0,0 +1,67 @@
|
||||
<script lang="ts" setup>
|
||||
import type { Ref } from 'vue';
|
||||
|
||||
import { computed, inject, nextTick } from 'vue';
|
||||
|
||||
import { BpmModelType } from '#/utils';
|
||||
|
||||
// TODO BPM 流程模型设计器 BpmModelEditor 待整合
|
||||
import SimpleModelDesign from './simple-model-design.vue';
|
||||
|
||||
// 创建本地数据副本
|
||||
const modelData = defineModel<any>();
|
||||
|
||||
const processData = inject('processData') as Ref;
|
||||
|
||||
/** 表单校验 */
|
||||
const validate = async () => {
|
||||
// 获取最新的流程数据
|
||||
if (!processData.value) {
|
||||
throw new Error('请设计流程');
|
||||
}
|
||||
return true;
|
||||
};
|
||||
/** 处理设计器保存成功 */
|
||||
const handleDesignSuccess = async (data?: any) => {
|
||||
if (data) {
|
||||
// 创建新的对象以触发响应式更新
|
||||
const newModelData = {
|
||||
...modelData.value,
|
||||
bpmnXml: modelData.value.type === BpmModelType.BPMN ? data : null,
|
||||
simpleModel: modelData.value.type === BpmModelType.BPMN ? null : data,
|
||||
};
|
||||
// 使用emit更新父组件的数据
|
||||
await nextTick();
|
||||
// 更新表单的模型数据部分
|
||||
modelData.value = newModelData;
|
||||
}
|
||||
};
|
||||
|
||||
/** 是否显示设计器 */
|
||||
const showDesigner = computed(() => {
|
||||
return Boolean(modelData.value?.key && modelData.value?.name);
|
||||
});
|
||||
defineExpose({
|
||||
validate,
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="h-full">
|
||||
<!-- BPMN设计器 -->
|
||||
<template v-if="modelData.type === BpmModelType.BPMN">
|
||||
<!-- TODO BPMN 流程设计器 -->
|
||||
</template>
|
||||
<!-- Simple设计器 -->
|
||||
<template v-else>
|
||||
<SimpleModelDesign
|
||||
v-if="showDesigner"
|
||||
:model-name="modelData.name"
|
||||
:model-form-id="modelData.formId"
|
||||
:model-form-type="modelData.formType"
|
||||
:start-user-ids="modelData.startUserIds"
|
||||
:start-dept-ids="modelData.startDeptIds"
|
||||
@success="handleDesignSuccess"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,40 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
|
||||
import ContentWrap from '#/components/content-wrap/content-wrap.vue';
|
||||
import { SimpleProcessDesigner } from '#/components/simple-process-design';
|
||||
|
||||
defineOptions({ name: 'SimpleModelDesign' });
|
||||
|
||||
defineProps<{
|
||||
modelFormId?: number;
|
||||
modelFormType?: number;
|
||||
modelName?: string;
|
||||
startDeptIds?: number[];
|
||||
startUserIds?: number[];
|
||||
}>();
|
||||
|
||||
const emit = defineEmits(['success']);
|
||||
const designerRef = ref();
|
||||
|
||||
// 修改成功回调
|
||||
const handleSuccess = (data?: any) => {
|
||||
if (data) {
|
||||
emit('success', data);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<ContentWrap :body-style="{ padding: '20px 16px' }">
|
||||
<SimpleProcessDesigner
|
||||
:model-form-id="modelFormId"
|
||||
:model-name="modelName"
|
||||
:model-form-type="modelFormType"
|
||||
@success="handleSuccess"
|
||||
:start-user-ids="startUserIds"
|
||||
:start-dept-ids="startDeptIds"
|
||||
ref="designerRef"
|
||||
/>
|
||||
</ContentWrap>
|
||||
</template>
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -162,7 +162,7 @@ const handleCategorySortSubmit = async () => {
|
||||
|
||||
<template>
|
||||
<Page auto-content-height>
|
||||
<!-- TODO @jaosn：没头像的图标，展示文字头像哈 -->
|
||||
<!-- TODO @jaosn：没头像的图标，展示文字头像哈 @芋艿 好像已经展示了文字头像。是模型列表中吗? -->
|
||||
<!-- 流程分类表单弹窗 -->
|
||||
<CategoryFormModal @success="getList" />
|
||||
<Card
|
||||
|
||||
@@ -54,35 +54,39 @@ const columns = [
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
align: 'left' as const,
|
||||
minWidth: 250,
|
||||
ellipsis: true,
|
||||
width: 250,
|
||||
},
|
||||
{
|
||||
title: '可见范围',
|
||||
dataIndex: 'startUserIds',
|
||||
key: 'startUserIds',
|
||||
align: 'center' as const,
|
||||
minWidth: 150,
|
||||
ellipsis: true,
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '流程类型',
|
||||
dataIndex: 'type',
|
||||
key: 'type',
|
||||
align: 'center' as const,
|
||||
minWidth: 120,
|
||||
ellipsis: true,
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '表单信息',
|
||||
dataIndex: 'formType',
|
||||
key: 'formType',
|
||||
align: 'center' as const,
|
||||
minWidth: 150,
|
||||
ellipsis: true,
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '最后发布',
|
||||
dataIndex: 'deploymentTime',
|
||||
key: 'deploymentTime',
|
||||
align: 'center' as const,
|
||||
minWidth: 250,
|
||||
width: 250,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
@@ -316,6 +320,7 @@ const handleRenameSuccess = () => {
|
||||
:columns="columns"
|
||||
:pagination="false"
|
||||
:custom-row="customRow"
|
||||
:scroll="{ x: '100%' }"
|
||||
row-key="id"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -307,7 +307,7 @@ export function useContractColumns<T = CrmContractApi.Contract>(
|
||||
field: 'price',
|
||||
title: '合同金额（元）',
|
||||
minWidth: 120,
|
||||
formatter: 'formatAmount',
|
||||
formatter: 'formatNumber',
|
||||
},
|
||||
{
|
||||
field: 'orderDate',
|
||||
@@ -349,13 +349,13 @@ export function useContractColumns<T = CrmContractApi.Contract>(
|
||||
field: 'totalReceivablePrice',
|
||||
title: '已回款金额（元）',
|
||||
minWidth: 140,
|
||||
formatter: 'formatAmount',
|
||||
formatter: 'formatNumber',
|
||||
},
|
||||
{
|
||||
field: 'noReceivablePrice',
|
||||
title: '未回款金额（元）',
|
||||
minWidth: 120,
|
||||
formatter: 'formatAmount',
|
||||
formatter: 'formatNumber',
|
||||
},
|
||||
{
|
||||
field: 'contactLastTime',
|
||||
@@ -670,7 +670,7 @@ export function useReceivableAuditColumns<T = CrmReceivableApi.Receivable>(
|
||||
field: 'price',
|
||||
title: '回款金额(元)',
|
||||
minWidth: 140,
|
||||
formatter: 'formatAmount',
|
||||
formatter: 'formatNumber',
|
||||
},
|
||||
{
|
||||
field: 'returnType',
|
||||
@@ -690,7 +690,7 @@ export function useReceivableAuditColumns<T = CrmReceivableApi.Receivable>(
|
||||
field: 'contract.totalPrice',
|
||||
title: '合同金额（元）',
|
||||
minWidth: 140,
|
||||
formatter: 'formatAmount',
|
||||
formatter: 'formatNumber',
|
||||
},
|
||||
{
|
||||
field: 'ownerUserName',
|
||||
@@ -801,7 +801,7 @@ export function useReceivablePlanRemindColumns<T = CrmReceivableApi.Receivable>(
|
||||
field: 'price',
|
||||
title: '计划回款金额（元）',
|
||||
minWidth: 120,
|
||||
formatter: 'formatAmount',
|
||||
formatter: 'formatNumber',
|
||||
},
|
||||
{
|
||||
field: 'returnTime',
|
||||
@@ -844,7 +844,7 @@ export function useReceivablePlanRemindColumns<T = CrmReceivableApi.Receivable>(
|
||||
field: 'receivable.price',
|
||||
title: '实际回款金额（元）',
|
||||
minWidth: 160,
|
||||
formatter: 'formatAmount',
|
||||
formatter: 'formatNumber',
|
||||
},
|
||||
{
|
||||
field: 'receivable.returnTime',
|
||||
|
||||
@@ -118,7 +118,7 @@ export function useGridColumns<T = CrmBusinessApi.Business>(
|
||||
field: 'totalPrice',
|
||||
title: '商机金额（元）',
|
||||
minWidth: 140,
|
||||
formatter: 'formatAmount',
|
||||
formatter: 'formatNumber',
|
||||
},
|
||||
{
|
||||
field: 'dealTime',
|
||||
|
||||
@@ -1,223 +1,242 @@
|
||||
import type { FormSchemaGetter } from '#/adapter/form';
|
||||
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||
import type { VbenFormSchema } from '#/adapter/form';
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { PayAppApi } from '#/api/pay/app';
|
||||
|
||||
import { CommonStatusEnum } from '#/utils/constants';
|
||||
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
|
||||
|
||||
export const querySchema: FormSchemaGetter = () => [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'name',
|
||||
label: '应用名',
|
||||
componentProps: {
|
||||
placeholder: '请输入应用名',
|
||||
export function useGridFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'name',
|
||||
label: '应用名',
|
||||
componentProps: {
|
||||
placeholder: '请输入应用名',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
fieldName: 'status',
|
||||
label: '开启状态',
|
||||
componentProps: {
|
||||
placeholder: '请选择开启状态',
|
||||
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
|
||||
{
|
||||
component: 'Select',
|
||||
fieldName: 'status',
|
||||
label: '开启状态',
|
||||
componentProps: {
|
||||
placeholder: '请选择开启状态',
|
||||
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'RangePicker',
|
||||
fieldName: 'createTime',
|
||||
label: '创建时间',
|
||||
componentProps: {
|
||||
placeholder: ['开始日期', '结束日期'],
|
||||
{
|
||||
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',
|
||||
export function useGridColumns<T = PayAppApi.App>(
|
||||
onStatusChange?: (
|
||||
newStatus: number,
|
||||
row: T,
|
||||
) => PromiseLike<boolean | undefined>,
|
||||
): VxeTableGridOptions['columns'] {
|
||||
return [
|
||||
{ type: 'checkbox', width: 60 },
|
||||
{
|
||||
title: '应用标识',
|
||||
field: 'appKey',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '支付宝配置',
|
||||
children: [
|
||||
{
|
||||
title: 'APP 支付',
|
||||
slots: {
|
||||
default: 'alipayAppConfig',
|
||||
{
|
||||
title: '应用名',
|
||||
field: 'name',
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
title: '状态',
|
||||
minWidth: 100,
|
||||
align: 'center',
|
||||
cellRender: {
|
||||
attrs: { beforeChange: onStatusChange },
|
||||
name: 'CellSwitch',
|
||||
props: {
|
||||
checkedValue: CommonStatusEnum.ENABLE,
|
||||
unCheckedValue: CommonStatusEnum.DISABLE,
|
||||
},
|
||||
},
|
||||
{
|
||||
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',
|
||||
{
|
||||
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',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'action',
|
||||
fixed: 'right',
|
||||
slots: { default: 'action' },
|
||||
title: '操作',
|
||||
minWidth: 160,
|
||||
},
|
||||
];
|
||||
|
||||
export const modalSchema: FormSchemaGetter = () => [
|
||||
{
|
||||
label: '应用编号',
|
||||
fieldName: 'id',
|
||||
component: 'Input',
|
||||
dependencies: {
|
||||
show: () => false,
|
||||
triggerFields: [''],
|
||||
{
|
||||
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',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '应用名',
|
||||
fieldName: 'name',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
componentProps: {
|
||||
placeholder: '请输入应用名',
|
||||
{
|
||||
title: '钱包支付配置',
|
||||
field: 'walletConfig',
|
||||
slots: {
|
||||
default: 'walletConfig',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '应用标识',
|
||||
fieldName: 'appKey',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
componentProps: {
|
||||
placeholder: '请输入应用标识',
|
||||
{
|
||||
title: '模拟支付配置',
|
||||
field: 'mockConfig',
|
||||
slots: {
|
||||
default: 'mockConfig',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '开启状态',
|
||||
fieldName: 'status',
|
||||
component: 'RadioGroup',
|
||||
rules: 'required',
|
||||
componentProps: {
|
||||
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
|
||||
{
|
||||
title: '操作',
|
||||
width: 130,
|
||||
fixed: 'right',
|
||||
slots: { default: 'actions' },
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '支付结果的回调地址',
|
||||
fieldName: 'orderNotifyUrl',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
componentProps: {
|
||||
placeholder: '请输入支付结果的回调地址',
|
||||
];
|
||||
}
|
||||
/** 新增/修改的表单 */
|
||||
export function useFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
label: '应用编号',
|
||||
fieldName: 'id',
|
||||
component: 'Input',
|
||||
dependencies: {
|
||||
show: () => false,
|
||||
triggerFields: [''],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '退款结果的回调地址',
|
||||
fieldName: 'refundNotifyUrl',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
componentProps: {
|
||||
placeholder: '请输入支付结果的回调地址',
|
||||
{
|
||||
label: '应用名',
|
||||
fieldName: 'name',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
componentProps: {
|
||||
placeholder: '请输入应用名',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '转账结果的回调地址',
|
||||
fieldName: 'transferNotifyUrl',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
componentProps: {
|
||||
placeholder: '请输入转账结果的回调地址',
|
||||
{
|
||||
label: '应用标识',
|
||||
fieldName: 'appKey',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
componentProps: {
|
||||
placeholder: '请输入应用标识',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '备注',
|
||||
fieldName: 'remark',
|
||||
component: 'Textarea',
|
||||
componentProps: {
|
||||
rows: 3,
|
||||
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: '请输入备注',
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,90 +1,83 @@
|
||||
<script lang="ts" setup>
|
||||
import type { PayAppApi } from '#/api/pay/app';
|
||||
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
import { $t } from '@vben/locales';
|
||||
import { cloneDeep } from '@vben/utils';
|
||||
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
import * as PayApi from '#/api/pay/app';
|
||||
import { createApp, getApp, updateApp } from '#/api/pay/app';
|
||||
|
||||
import { modalSchema } from '../data';
|
||||
import { useFormSchema } from '../data';
|
||||
|
||||
const emit = defineEmits<{ reload: [] }>();
|
||||
|
||||
const isUpdate = ref(false);
|
||||
const emit = defineEmits(['success']);
|
||||
const formData = ref<PayAppApi.App>();
|
||||
const title = computed(() => {
|
||||
return isUpdate.value
|
||||
return formData.value?.id
|
||||
? $t('ui.actionTitle.edit', '应用')
|
||||
: $t('ui.actionTitle.create', '应用');
|
||||
});
|
||||
|
||||
const [BasicForm, formApi] = useVbenForm({
|
||||
const [Form, formApi] = useVbenForm({
|
||||
commonConfig: {
|
||||
// 默认占满两列
|
||||
formItemClass: 'col-span-2',
|
||||
// 默认label宽度 px
|
||||
labelWidth: 160,
|
||||
// 通用配置项 会影响到所有表单项
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
},
|
||||
formItemClass: 'col-span-2',
|
||||
labelWidth: 160,
|
||||
},
|
||||
schema: modalSchema(),
|
||||
layout: 'horizontal',
|
||||
schema: useFormSchema(),
|
||||
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 [Modal, modalApi] = useVbenModal({
|
||||
async onConfirm() {
|
||||
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();
|
||||
}
|
||||
modalApi.lock();
|
||||
// 提交表单
|
||||
const data = (await formApi.getValues()) as PayAppApi.App;
|
||||
try {
|
||||
await (formData.value?.id ? updateApp(data) : createApp(data));
|
||||
// 关闭并提示
|
||||
await modalApi.close();
|
||||
emit('success');
|
||||
message.success($t('ui.actionMessage.operationSuccess'));
|
||||
} finally {
|
||||
modalApi.unlock();
|
||||
}
|
||||
},
|
||||
onOpenChange: async (isOpen) => {
|
||||
if (!isOpen) {
|
||||
formData.value = undefined;
|
||||
return;
|
||||
}
|
||||
// 加载数据
|
||||
const { id } = modalApi.getData() as {
|
||||
id?: number;
|
||||
};
|
||||
if (!id) {
|
||||
return;
|
||||
}
|
||||
modalApi.lock();
|
||||
try {
|
||||
formData.value = await getApp(id);
|
||||
// 设置到 values
|
||||
await formApi.setValues(formData.value);
|
||||
} finally {
|
||||
modalApi.unlock();
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<BasicModal :close-on-click-modal="false" :title="title" class="w-[40%]">
|
||||
<BasicForm />
|
||||
</BasicModal>
|
||||
<Modal :close-on-click-modal="false" :title="title" class="w-[40%]">
|
||||
<Form />
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
@@ -1,104 +1,96 @@
|
||||
<script lang="ts" setup>
|
||||
import type { PayChannelApi } from '#/api/pay/channel';
|
||||
|
||||
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 { message, Row, Space, Textarea } from 'ant-design-vue';
|
||||
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
import * as ChannelApi from '#/api/pay/channel';
|
||||
import { createChannel, getChannel, updateChannel } from '#/api/pay/channel';
|
||||
import { FileUpload } from '#/components/upload';
|
||||
|
||||
import { modalAliPaySchema } from './data';
|
||||
import { channelSchema } from './data';
|
||||
|
||||
const emit = defineEmits<{ reload: [] }>();
|
||||
|
||||
const isUpdate = ref(false);
|
||||
const emit = defineEmits(['success']);
|
||||
const formData = ref<PayChannelApi.Channel>();
|
||||
const formType = ref<string>('');
|
||||
const title = computed(() => {
|
||||
return isUpdate.value
|
||||
return formData.value?.id
|
||||
? $t('ui.actionTitle.edit', '应用')
|
||||
: $t('ui.actionTitle.create', '应用');
|
||||
});
|
||||
|
||||
const [BasicForm, formApi] = useVbenForm({
|
||||
const [Form, formApi] = useVbenForm({
|
||||
commonConfig: {
|
||||
// 默认占满两列
|
||||
formItemClass: 'col-span-2',
|
||||
// 默认label宽度 px
|
||||
labelWidth: 160,
|
||||
// 通用配置项 会影响到所有表单项
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
},
|
||||
formItemClass: 'col-span-2',
|
||||
labelWidth: 160,
|
||||
},
|
||||
schema: modalAliPaySchema(),
|
||||
layout: 'horizontal',
|
||||
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 [Modal, modalApi] = useVbenModal({
|
||||
async onConfirm() {
|
||||
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);
|
||||
}
|
||||
}
|
||||
modalApi.lock();
|
||||
// 提交表单
|
||||
const data = (await formApi.getValues()) as PayChannelApi.Channel;
|
||||
try {
|
||||
await (formData.value?.id ? updateChannel(data) : createChannel(data));
|
||||
// 关闭并提示
|
||||
await modalApi.close();
|
||||
emit('success');
|
||||
message.success($t('ui.actionMessage.operationSuccess'));
|
||||
} finally {
|
||||
modalApi.unlock();
|
||||
}
|
||||
},
|
||||
onOpenChange: async (isOpen) => {
|
||||
if (!isOpen) {
|
||||
formData.value = undefined;
|
||||
return;
|
||||
}
|
||||
// 加载数据
|
||||
const { id, payCode } = modalApi.getData() as {
|
||||
id?: number;
|
||||
payCode?: string;
|
||||
};
|
||||
if (!id || !payCode) {
|
||||
return;
|
||||
}
|
||||
modalApi.lock();
|
||||
if (payCode.includes('alipay_')) {
|
||||
formType.value = 'alipay';
|
||||
} else if (payCode.includes('mock')) {
|
||||
formType.value = 'mock';
|
||||
} else if (payCode.includes('wallet')) {
|
||||
formType.value = 'wallet';
|
||||
} else if (payCode.includes('wx')) {
|
||||
formType.value = 'wx';
|
||||
}
|
||||
|
||||
async function handleCancel() {
|
||||
modalApi.close();
|
||||
await formApi.resetForm();
|
||||
}
|
||||
try {
|
||||
formData.value = await getChannel(id, payCode);
|
||||
// 设置到 values
|
||||
await formApi.setValues(formData.value);
|
||||
} finally {
|
||||
modalApi.unlock();
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<BasicModal :close-on-click-modal="false" :title="title" class="w-[40%]">
|
||||
<BasicForm>
|
||||
<Modal :close-on-click-modal="false" :title="title" class="w-[40%]">
|
||||
<Form :schema="channelSchema(formType)">
|
||||
<template #appCertContent="slotProps">
|
||||
<Space style="width: 100%" direction="vertical">
|
||||
<Row>
|
||||
@@ -158,6 +150,6 @@ async function handleCancel() {
|
||||
</Row>
|
||||
</Space>
|
||||
</template>
|
||||
</BasicForm>
|
||||
</BasicModal>
|
||||
</Form>
|
||||
</Modal>
|
||||
</template>
|
||||
@@ -1,456 +0,0 @@
|
||||
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: '请输入备注',
|
||||
},
|
||||
},
|
||||
];
|
||||
@@ -1,105 +0,0 @@
|
||||
<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>
|
||||
@@ -1,105 +0,0 @@
|
||||
<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>
|
||||
@@ -1,148 +0,0 @@
|
||||
<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>
|
||||
546
apps/web-antd/src/views/pay/app/modules/data.ts
Normal file
546
apps/web-antd/src/views/pay/app/modules/data.ts
Normal file
@@ -0,0 +1,546 @@
|
||||
import type { VbenFormSchema } from '#/adapter/form';
|
||||
|
||||
import { h } from 'vue';
|
||||
|
||||
import { InputUpload } from '#/components/upload';
|
||||
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
|
||||
|
||||
export function channelSchema(formType: string): VbenFormSchema[] {
|
||||
switch (formType) {
|
||||
case 'alipay': {
|
||||
return [
|
||||
{
|
||||
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',
|
||||
component: h(InputUpload, {
|
||||
inputType: 'textarea',
|
||||
textareaProps: { rows: 8, placeholder: '请上传商户公钥应用证书' },
|
||||
fileUploadProps: {
|
||||
accept: ['crt'],
|
||||
},
|
||||
}),
|
||||
rules: 'required',
|
||||
dependencies: {
|
||||
show(values) {
|
||||
return values?.config?.mode === 1;
|
||||
},
|
||||
triggerFields: ['config.mode', 'mode', 'config'],
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '支付宝公钥证书',
|
||||
fieldName: 'config.alipayPublicCertContent',
|
||||
component: h(InputUpload, {
|
||||
inputType: 'textarea',
|
||||
textareaProps: { rows: 8, placeholder: '请上传支付宝公钥证书' },
|
||||
fileUploadProps: {
|
||||
accept: ['crt'],
|
||||
},
|
||||
}),
|
||||
rules: 'required',
|
||||
dependencies: {
|
||||
show(values) {
|
||||
return values?.config?.mode === 1;
|
||||
},
|
||||
triggerFields: ['config.mode', 'mode', 'config'],
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '根证书',
|
||||
fieldName: 'config.rootCertContent',
|
||||
component: h(InputUpload, {
|
||||
inputType: 'textarea',
|
||||
textareaProps: { rows: 8, placeholder: '请上传根证书' },
|
||||
fileUploadProps: {
|
||||
accept: ['crt'],
|
||||
},
|
||||
}),
|
||||
rules: 'required',
|
||||
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: '请输入备注',
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
case 'mock': {
|
||||
return [
|
||||
{
|
||||
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: '请输入备注',
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
case 'wallet': {
|
||||
return [
|
||||
{
|
||||
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: '请输入备注',
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
case 'wx': {
|
||||
return [
|
||||
{
|
||||
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',
|
||||
component: h(InputUpload, {
|
||||
inputType: 'textarea',
|
||||
textareaProps: {
|
||||
rows: 8,
|
||||
placeholder: '请上传 apiclient_cert.p12 证书',
|
||||
},
|
||||
fileUploadProps: {
|
||||
accept: ['p12 '],
|
||||
},
|
||||
}),
|
||||
rules: 'required',
|
||||
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',
|
||||
component: h(InputUpload, {
|
||||
inputType: 'textarea',
|
||||
textareaProps: {
|
||||
rows: 8,
|
||||
placeholder: '请上传 apiclient_key.pem 证书',
|
||||
},
|
||||
fileUploadProps: {
|
||||
accept: ['pem'],
|
||||
},
|
||||
}),
|
||||
rules: 'required',
|
||||
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: '请输入备注',
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
default: {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,13 +1,9 @@
|
||||
import type { VbenFormSchema } from '#/adapter/form';
|
||||
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
|
||||
import { useAccess } from '@vben/access';
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
|
||||
import { getAppList } from '#/api/pay/app';
|
||||
import { DICT_TYPE, getDictOptions } from '#/utils';
|
||||
|
||||
const { hasAccessByCodes } = useAccess();
|
||||
|
||||
/** 列表的搜索表单 */
|
||||
export function useGridFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
@@ -69,9 +65,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
|
||||
}
|
||||
|
||||
/** 列表的字段 */
|
||||
export function useGridColumns<T = any>(
|
||||
onActionClick: OnActionClickFn<T>,
|
||||
): VxeTableGridOptions['columns'] {
|
||||
export function useGridColumns(): VxeTableGridOptions['columns'] {
|
||||
return [
|
||||
{
|
||||
field: 'id',
|
||||
@@ -136,23 +130,10 @@ export function useGridColumns<T = any>(
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'operation',
|
||||
title: '操作',
|
||||
minWidth: 100,
|
||||
align: 'center',
|
||||
width: 80,
|
||||
fixed: 'right',
|
||||
cellRender: {
|
||||
attrs: {
|
||||
onClick: onActionClick,
|
||||
},
|
||||
name: 'CellOperation',
|
||||
options: [
|
||||
{
|
||||
code: 'detail',
|
||||
show: hasAccessByCodes(['pay:notify:query']),
|
||||
},
|
||||
],
|
||||
},
|
||||
slots: { default: 'actions' },
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
@@ -1,19 +1,16 @@
|
||||
<script lang="ts" setup>
|
||||
import type {
|
||||
OnActionClickParams,
|
||||
VxeTableGridOptions,
|
||||
} from '#/adapter/vxe-table';
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
|
||||
import { Page, useVbenModal } from '@vben/common-ui';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import * as PayNotifyApi from '#/api/pay/notify';
|
||||
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { getNotifyTaskPage } from '#/api/pay/notify';
|
||||
import { DocAlert } from '#/components/doc-alert';
|
||||
|
||||
import { useGridColumns, useGridFormSchema } from './data';
|
||||
import Detail from './modules/detail.vue';
|
||||
|
||||
const [NotifyDetailModal, notifyDetailModalApi] = useVbenModal({
|
||||
const [DetailModal, detailModalApi] = useVbenModal({
|
||||
connectedComponent: Detail,
|
||||
destroyOnClose: true,
|
||||
});
|
||||
@@ -24,18 +21,8 @@ function onRefresh() {
|
||||
}
|
||||
|
||||
/** 查看详情 */
|
||||
function onDetail(row: any) {
|
||||
notifyDetailModalApi.setData(row).open();
|
||||
}
|
||||
|
||||
/** 表格操作按钮的回调函数 */
|
||||
function onActionClick({ code, row }: OnActionClickParams<any>) {
|
||||
switch (code) {
|
||||
case 'detail': {
|
||||
onDetail(row);
|
||||
break;
|
||||
}
|
||||
}
|
||||
function handleDetail(row: any) {
|
||||
detailModalApi.setData(row).open();
|
||||
}
|
||||
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
@@ -43,13 +30,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
|
||||
schema: useGridFormSchema(),
|
||||
},
|
||||
gridOptions: {
|
||||
columns: useGridColumns(onActionClick),
|
||||
columns: useGridColumns(),
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues) => {
|
||||
return await PayNotifyApi.getNotifyTaskPage({
|
||||
return await getNotifyTaskPage({
|
||||
pageNo: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
...formValues,
|
||||
@@ -72,7 +59,21 @@ const [Grid, gridApi] = useVbenVxeGrid({
|
||||
<template #doc>
|
||||
<DocAlert title="支付功能开启" url="https://doc.iocoder.cn/pay/build/" />
|
||||
</template>
|
||||
<NotifyDetailModal @success="onRefresh" />
|
||||
<Grid table-title="支付通知列表" />
|
||||
<DetailModal @success="onRefresh" />
|
||||
<Grid table-title="支付通知列表">
|
||||
<template #actions="{ row }">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: $t('common.detail'),
|
||||
type: 'link',
|
||||
icon: ACTION_ICON.VIEW,
|
||||
auth: ['pay:notify:query'],
|
||||
onClick: handleDetail.bind(null, row),
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</Grid>
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
@@ -33,13 +33,6 @@ const [Modal, modalApi] = useVbenModal({
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
/** 打开弹窗 */
|
||||
const open = (id: number) => {
|
||||
modalApi.setData({ id }).open();
|
||||
};
|
||||
|
||||
defineExpose({ open });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@@ -1,144 +1,137 @@
|
||||
import type { FormSchemaGetter } from '#/adapter/form';
|
||||
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||
import type { VbenFormSchema } from '#/adapter/form';
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
|
||||
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
|
||||
import { DICT_TYPE, getDictOptions } from '#/utils';
|
||||
|
||||
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)}`;
|
||||
/** 列表的搜索表单 */
|
||||
export function useGridFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'appId',
|
||||
label: '应用编号',
|
||||
componentProps: {
|
||||
placeholder: '请输入应用编号',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '退款金额',
|
||||
field: 'refundPrice',
|
||||
slots: {
|
||||
default: ({ row }) => {
|
||||
return `￥${(row.refundPrice || 0 / 100).toFixed(2)}`;
|
||||
{
|
||||
component: 'Select',
|
||||
fieldName: 'channelCode',
|
||||
label: '支付渠道',
|
||||
componentProps: {
|
||||
placeholder: '请选择开启状态',
|
||||
options: getDictOptions(DICT_TYPE.PAY_CHANNEL_CODE, 'string'),
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '手续金额',
|
||||
field: 'channelFeePrice',
|
||||
slots: {
|
||||
default: ({ row }) => {
|
||||
return `￥${(row.channelFeePrice || 0 / 100).toFixed(2)}`;
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'merchantOrderId',
|
||||
label: '商户单号',
|
||||
componentProps: {
|
||||
placeholder: '请输入商户单号',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '订单号',
|
||||
field: 'no',
|
||||
slots: {
|
||||
default: 'no',
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'no',
|
||||
label: '支付单号',
|
||||
componentProps: {
|
||||
placeholder: '请输入支付单号',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '支付状态',
|
||||
field: 'status',
|
||||
cellRender: {
|
||||
name: 'CellDict',
|
||||
props: { type: DICT_TYPE.PAY_ORDER_STATUS },
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'channelOrderNo',
|
||||
label: '渠道单号',
|
||||
componentProps: {
|
||||
placeholder: '请输入渠道单号',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '支付渠道',
|
||||
field: 'channelCode',
|
||||
cellRender: {
|
||||
name: 'CellDict',
|
||||
props: { type: DICT_TYPE.PAY_CHANNEL_CODE },
|
||||
{
|
||||
component: 'Select',
|
||||
fieldName: 'status',
|
||||
label: '支付状态',
|
||||
componentProps: {
|
||||
placeholder: '请选择支付状态',
|
||||
options: getDictOptions(DICT_TYPE.PAY_ORDER_STATUS, 'number'),
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '支付时间',
|
||||
field: 'successTime',
|
||||
minWidth: 180,
|
||||
formatter: 'formatDateTime',
|
||||
},
|
||||
{
|
||||
title: '支付应用',
|
||||
field: 'appName',
|
||||
},
|
||||
{
|
||||
title: '商品标题',
|
||||
field: 'subject',
|
||||
},
|
||||
{
|
||||
field: 'action',
|
||||
fixed: 'right',
|
||||
slots: { default: 'action' },
|
||||
title: '操作',
|
||||
minWidth: 80,
|
||||
},
|
||||
];
|
||||
{
|
||||
component: 'RangePicker',
|
||||
fieldName: 'createTime',
|
||||
label: '创建时间',
|
||||
componentProps: {
|
||||
placeholder: ['开始日期', '结束日期'],
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/** 列表的字段 */
|
||||
export function useGridColumns(): VxeTableGridOptions['columns'] {
|
||||
return [
|
||||
{ type: 'checkbox', width: 60 },
|
||||
{
|
||||
title: '编号',
|
||||
field: 'id',
|
||||
},
|
||||
{
|
||||
title: '支付金额',
|
||||
field: 'price',
|
||||
formatter: 'formatNumber',
|
||||
},
|
||||
{
|
||||
title: '退款金额',
|
||||
field: 'refundPrice',
|
||||
formatter: 'formatNumber',
|
||||
},
|
||||
{
|
||||
title: '手续金额',
|
||||
field: 'channelFeePrice',
|
||||
formatter: 'formatNumber',
|
||||
},
|
||||
{
|
||||
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',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: 80,
|
||||
fixed: 'right',
|
||||
slots: { default: 'actions' },
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
@@ -1,110 +1,93 @@
|
||||
<script lang="ts" setup>
|
||||
import type { VbenFormProps } from '@vben/common-ui';
|
||||
|
||||
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { PayOrderApi } from '#/api/pay/order';
|
||||
|
||||
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 { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { getOrderPage } from '#/api/pay/order';
|
||||
import { DocAlert } from '#/components/doc-alert';
|
||||
|
||||
import { columns, querySchema } from './data';
|
||||
import detailFrom from './modules/order-detail.vue';
|
||||
import { useGridColumns, useGridFormSchema } from './data';
|
||||
import Detail from './modules/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 [DetailModal, detailModalApi] = useVbenModal({
|
||||
connectedComponent: Detail,
|
||||
destroyOnClose: true,
|
||||
});
|
||||
|
||||
const gridOptions: VxeGridProps = {
|
||||
checkboxConfig: {
|
||||
// 高亮
|
||||
highlight: true,
|
||||
// 翻页时保留选中状态
|
||||
reserve: true,
|
||||
// 点击行选中
|
||||
// trigger: 'row',
|
||||
/** 刷新表格 */
|
||||
function onRefresh() {
|
||||
gridApi.query();
|
||||
}
|
||||
|
||||
/** 查看详情 */
|
||||
function handleDetail(row: PayOrderApi.Order) {
|
||||
detailModalApi.setData(row).open();
|
||||
}
|
||||
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
formOptions: {
|
||||
schema: useGridFormSchema(),
|
||||
},
|
||||
columns,
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
pagerConfig: {},
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues = {}) => {
|
||||
return await OrderApi.getOrderPage({
|
||||
pageNum: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
...formValues,
|
||||
});
|
||||
gridOptions: {
|
||||
columns: useGridColumns(),
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues) => {
|
||||
return await getOrderPage({
|
||||
pageNo: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
// 表格全局唯一表示 保存列配置需要用到
|
||||
id: 'pay-order-index',
|
||||
};
|
||||
|
||||
const [BasicTable] = useVbenVxeGrid({
|
||||
formOptions,
|
||||
gridOptions,
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
toolbarConfig: {
|
||||
refresh: { code: 'query' },
|
||||
search: true,
|
||||
},
|
||||
} as VxeTableGridOptions<PayOrderApi.Order>,
|
||||
});
|
||||
|
||||
const [DetailModal, modalDetailApi] = useVbenModal({
|
||||
connectedComponent: detailFrom,
|
||||
});
|
||||
|
||||
const openDetail = (id: number) => {
|
||||
modalDetailApi.setData({
|
||||
id,
|
||||
});
|
||||
modalDetailApi.open();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page :auto-content-height="true">
|
||||
<DocAlert
|
||||
title="支付宝支付接入"
|
||||
url="https://doc.iocoder.cn/pay/alipay-pay-demo/"
|
||||
/>
|
||||
<DocAlert
|
||||
title="微信公众号支付接入"
|
||||
url="https://doc.iocoder.cn/pay/wx-pub-pay-demo/"
|
||||
/>
|
||||
<DocAlert
|
||||
title="微信小程序支付接入"
|
||||
url="https://doc.iocoder.cn/pay/wx-lite-pay-demo/"
|
||||
/>
|
||||
<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 #doc>
|
||||
<DocAlert
|
||||
title="支付宝支付接入"
|
||||
url="https://doc.iocoder.cn/pay/alipay-pay-demo/"
|
||||
/>
|
||||
<DocAlert
|
||||
title="微信公众号支付接入"
|
||||
url="https://doc.iocoder.cn/pay/wx-pub-pay-demo/"
|
||||
/>
|
||||
<DocAlert
|
||||
title="微信小程序支付接入"
|
||||
url="https://doc.iocoder.cn/pay/wx-lite-pay-demo/"
|
||||
/>
|
||||
</template>
|
||||
<DetailModal @success="onRefresh" />
|
||||
<Grid table-title="支付订单列表">
|
||||
<template #actions="{ row }">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: $t('common.detail'),
|
||||
type: 'link',
|
||||
icon: ACTION_ICON.VIEW,
|
||||
auth: ['pay:order:query'],
|
||||
onClick: handleDetail.bind(null, row),
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
<template #no="{ row }">
|
||||
<p class="order-font">
|
||||
@@ -118,7 +101,6 @@ const openDetail = (id: number) => {
|
||||
{{ row.channelOrderNo }}
|
||||
</p>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<DetailModal />
|
||||
</Grid>
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import type { PayOrderApi } from '#/api/pay/order';
|
||||
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
@@ -6,34 +8,39 @@ import { formatDateTime } from '@vben/utils';
|
||||
|
||||
import { Descriptions, Divider, Tag } from 'ant-design-vue';
|
||||
|
||||
import * as OrderApi from '#/api/pay/order';
|
||||
import { getOrder } from '#/api/pay/order';
|
||||
import { DictTag } from '#/components/dict-tag';
|
||||
import { DICT_TYPE } from '#/utils/dict';
|
||||
|
||||
const detailData = ref<OrderApi.PayOrderApi.Order>();
|
||||
const detailData = ref<PayOrderApi.Order>();
|
||||
|
||||
const [BasicModal, modalApi] = useVbenModal({
|
||||
fullscreenButton: false,
|
||||
showCancelButton: false,
|
||||
showConfirmButton: false,
|
||||
const [Modal, modalApi] = useVbenModal({
|
||||
onOpenChange: async (isOpen) => {
|
||||
if (!isOpen) {
|
||||
return null;
|
||||
detailData.value = undefined;
|
||||
return;
|
||||
}
|
||||
// 加载数据
|
||||
const data = modalApi.getData<PayOrderApi.Order>();
|
||||
if (!data || !data.id) {
|
||||
return;
|
||||
}
|
||||
modalApi.lock();
|
||||
try {
|
||||
detailData.value = await getOrder(data.id);
|
||||
} finally {
|
||||
modalApi.unlock();
|
||||
}
|
||||
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]">
|
||||
<Modal
|
||||
title="订单详情"
|
||||
class="w-1/2"
|
||||
:show-cancel-button="false"
|
||||
:show-confirm-button="false"
|
||||
>
|
||||
<Descriptions :column="2">
|
||||
<Descriptions.Item label="商户单号">
|
||||
{{ detailData?.merchantOrderId }}
|
||||
@@ -121,5 +128,5 @@ const [BasicModal, modalApi] = useVbenModal({
|
||||
{{ detailData?.channelNotifyData }}
|
||||
</Descriptions.Item>
|
||||
</Descriptions>
|
||||
</BasicModal>
|
||||
</Modal>
|
||||
</template>
|
||||
@@ -1,14 +1,9 @@
|
||||
import type { VbenFormSchema } from '#/adapter/form';
|
||||
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { PayRefundApi } from '#/api/pay/refund';
|
||||
|
||||
import { useAccess } from '@vben/access';
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
|
||||
import { getAppList } from '#/api/pay/app';
|
||||
import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '#/utils';
|
||||
|
||||
const { hasAccessByCodes } = useAccess();
|
||||
|
||||
/** 列表的搜索表单 */
|
||||
export function useGridFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
@@ -80,9 +75,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
|
||||
}
|
||||
|
||||
/** 列表的字段 */
|
||||
export function useGridColumns<T = PayRefundApi.Refund>(
|
||||
onActionClick: OnActionClickFn<T>,
|
||||
): VxeTableGridOptions['columns'] {
|
||||
export function useGridColumns(): VxeTableGridOptions['columns'] {
|
||||
return [
|
||||
{
|
||||
field: 'id',
|
||||
@@ -155,23 +148,10 @@ export function useGridColumns<T = PayRefundApi.Refund>(
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'operation',
|
||||
title: '操作',
|
||||
minWidth: 100,
|
||||
align: 'center',
|
||||
width: 80,
|
||||
fixed: 'right',
|
||||
cellRender: {
|
||||
attrs: {
|
||||
onClick: onActionClick,
|
||||
},
|
||||
name: 'CellOperation',
|
||||
options: [
|
||||
{
|
||||
code: 'detail',
|
||||
show: hasAccessByCodes(['pay:refund:query']),
|
||||
},
|
||||
],
|
||||
},
|
||||
slots: { default: 'actions' },
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
@@ -1,16 +1,10 @@
|
||||
<script lang="ts" setup>
|
||||
import type {
|
||||
OnActionClickParams,
|
||||
VxeTableGridOptions,
|
||||
} from '#/adapter/vxe-table';
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
|
||||
import { Page, useVbenModal } from '@vben/common-ui';
|
||||
import { Download } from '@vben/icons';
|
||||
import { downloadFileFromBlobPart } from '@vben/utils';
|
||||
|
||||
import { Button } from 'ant-design-vue';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import * as RefundApi from '#/api/pay/refund';
|
||||
import { DocAlert } from '#/components/doc-alert';
|
||||
import { $t } from '#/locales';
|
||||
@@ -29,32 +23,22 @@ function onRefresh() {
|
||||
}
|
||||
|
||||
/** 导出表格 */
|
||||
async function onExport() {
|
||||
async function handleExport() {
|
||||
const data = await RefundApi.exportRefund(await gridApi.formApi.getValues());
|
||||
downloadFileFromBlobPart({ fileName: '支付退款.xls', source: data });
|
||||
}
|
||||
|
||||
/** 查看详情 */
|
||||
function onDetail(row: any) {
|
||||
function handleDetail(row: any) {
|
||||
refundDetailModalApi.setData(row).open();
|
||||
}
|
||||
|
||||
/** 表格操作按钮的回调函数 */
|
||||
function onActionClick({ code, row }: OnActionClickParams<any>) {
|
||||
switch (code) {
|
||||
case 'detail': {
|
||||
onDetail(row);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
formOptions: {
|
||||
schema: useGridFormSchema(),
|
||||
},
|
||||
gridOptions: {
|
||||
columns: useGridColumns(onActionClick),
|
||||
columns: useGridColumns(),
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
proxyConfig: {
|
||||
@@ -89,15 +73,30 @@ const [Grid, gridApi] = useVbenVxeGrid({
|
||||
<RefundDetailModal @success="onRefresh" />
|
||||
<Grid table-title="支付退款列表">
|
||||
<template #toolbar-tools>
|
||||
<Button
|
||||
type="primary"
|
||||
class="ml-2"
|
||||
@click="onExport"
|
||||
v-access:code="['pay:refund:export']"
|
||||
>
|
||||
<Download class="size-5" />
|
||||
{{ $t('ui.actionTitle.export') }}
|
||||
</Button>
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: $t('ui.actionTitle.export'),
|
||||
type: 'primary',
|
||||
icon: ACTION_ICON.DOWNLOAD,
|
||||
auth: ['pay:refund:query'],
|
||||
onClick: handleExport,
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
<template #actions="{ row }">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: $t('common.detail'),
|
||||
type: 'link',
|
||||
icon: ACTION_ICON.VIEW,
|
||||
auth: ['pay:refund:query'],
|
||||
onClick: handleDetail.bind(null, row),
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</Grid>
|
||||
</Page>
|
||||
|
||||
@@ -33,13 +33,6 @@ const [Modal, modalApi] = useVbenModal({
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
/** 打开弹窗 */
|
||||
const open = (id: number) => {
|
||||
modalApi.setData({ id }).open();
|
||||
};
|
||||
|
||||
defineExpose({ open });
|
||||
</script>
|
||||
|
||||
<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 };
|
||||
|
||||
@@ -263,7 +263,7 @@ setupVbenVxeTable({
|
||||
});
|
||||
|
||||
// 添加数量格式化，例如金额
|
||||
vxeUI.formats.add('formatAmount', {
|
||||
vxeUI.formats.add('formatNumber', {
|
||||
cellFormatMethod({ cellValue }, digits = 2) {
|
||||
if (cellValue === null || cellValue === undefined) {
|
||||
return '';
|
||||
|
||||
@@ -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 };
|
||||
|
||||
@@ -277,7 +277,7 @@ setupVbenVxeTable({
|
||||
// 这里可以自行扩展 vxe-table 的全局配置，比如自定义格式化
|
||||
// vxeUI.formats.add
|
||||
// add by 星语：数量格式化，例如说：金额
|
||||
vxeUI.formats.add('formatAmount', {
|
||||
vxeUI.formats.add('formatNumber', {
|
||||
cellFormatMethod({ cellValue }, digits = 2) {
|
||||
if (cellValue === null || cellValue === undefined) {
|
||||
return '';
|
||||
|
||||
@@ -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({
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user