smart-flow/yudao-ui-admin-vben
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

review：bpm 方法统一使用 function，代码样式

Browse Source
This commit is contained in:
xingyu4j
2025-06-03 10:11:26 +08:00
parent 29d37eb86c
commit 01713ff22d
30 changed files with 377 additions and 313 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
apps/web-antd/src/components/simple-process-design/components/nodes-config/condition-node-config.vue
View File

@@ -20,6 +20,7 @@ import Condition from './modules/condition.vue';
defineOptions({ defineOptions({
name: 'ConditionNodeConfig', name: 'ConditionNodeConfig',
}); });
const props = defineProps({ const props = defineProps({
conditionNode: { conditionNode: {
type: Object as () => SimpleFlowNode, type: Object as () => SimpleFlowNode,
@@ -58,7 +59,7 @@ const conditionRef = ref();
const fieldOptions = useFormFieldsAndStartUser(); // 流程表单字段和发起人字段 const fieldOptions = useFormFieldsAndStartUser(); // 流程表单字段和发起人字段
/** 保存配置 */ /** 保存配置 */
const saveConfig = async () => { async function saveConfig() {
if (!currentNode.value.conditionSetting?.defaultFlow) { if (!currentNode.value.conditionSetting?.defaultFlow) {
// 校验表单 // 校验表单
const valid = await conditionRef.value.validate(); const valid = await conditionRef.value.validate();
@@ -89,14 +90,14 @@ const saveConfig = async () => {
} }
drawerApi.close(); drawerApi.close();
return true; return true;
}; }
const [Drawer, drawerApi] = useVbenDrawer({ const [Drawer, drawerApi] = useVbenDrawer({
title: currentNode.value.name, title: currentNode.value.name,
onConfirm: saveConfig, onConfirm: saveConfig,
}); });
const open = () => { function open() {
// 使用三元表达式代替 if-else，解决 linter 警告 // 使用三元表达式代替 if-else，解决 linter 警告
condition.value = currentNode.value.conditionSetting condition.value = currentNode.value.conditionSetting
? cloneDeep(currentNode.value.conditionSetting) ? cloneDeep(currentNode.value.conditionSetting)
@@ -121,7 +122,7 @@ const open = () => {
}; };
drawerApi.open(); drawerApi.open();
}; }
watch( watch(
() => props.conditionNode, () => props.conditionNode,
@@ -130,11 +131,12 @@ watch(
}, },
); );
const clickIcon = () => { function clickIcon() {
showInput.value = true; showInput.value = true;
}; }
// 输入框失去焦点 // 输入框失去焦点
const blurEvent = () => { function blurEvent() {
showInput.value = false; showInput.value = false;
currentNode.value.name = currentNode.value.name =
currentNode.value.name || currentNode.value.name ||
@@ -142,7 +144,7 @@ const blurEvent = () => {
props.nodeIndex, props.nodeIndex,
currentNode.value?.conditionSetting?.defaultFlow, currentNode.value?.conditionSetting?.defaultFlow,
); );
}; }
defineExpose({ open }); // 提供 open 方法，用于打开弹窗 defineExpose({ open }); // 提供 open 方法，用于打开弹窗
</script> </script>

31
apps/web-antd/src/components/simple-process-design/components/nodes-config/copy-task-node-config.vue
View File

@@ -44,12 +44,14 @@ import {
} from '../../helpers'; } from '../../helpers';
defineOptions({ name: 'CopyTaskNodeConfig' }); defineOptions({ name: 'CopyTaskNodeConfig' });
const props = defineProps({ const props = defineProps({
flowNode: { flowNode: {
type: Object as () => SimpleFlowNode, type: Object as () => SimpleFlowNode,
required: true, required: true,
}, },
}); });
const deptLevelLabel = computed(() => { const deptLevelLabel = computed(() => {
let label = '部门负责人来源'; let label = '部门负责人来源';
label = label =
@@ -59,6 +61,7 @@ const deptLevelLabel = computed(() => {
: `${label}(发起人部门向上)`; : `${label}(发起人部门向上)`;
return label; return label;
}); });
// 抽屉配置 // 抽屉配置
const [Drawer, drawerApi] = useVbenDrawer({ const [Drawer, drawerApi] = useVbenDrawer({
header: true, header: true,
@@ -68,14 +71,18 @@ const [Drawer, drawerApi] = useVbenDrawer({
saveConfig(); saveConfig();
}, },
}); });
// 当前节点 // 当前节点
const currentNode = useWatchNode(props); const currentNode = useWatchNode(props);
// 节点名称 // 节点名称
const { nodeName, showInput, clickIcon, blurEvent } = useNodeName( const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
NodeType.COPY_TASK_NODE, NodeType.COPY_TASK_NODE,
); );
// 激活的 Tab 标签页 // 激活的 Tab 标签页
const activeTabName = ref('user'); const activeTabName = ref('user');
// 表单字段权限配置 // 表单字段权限配置
const { const {
formType, formType,
@@ -83,16 +90,20 @@ const {
formFieldOptions, formFieldOptions,
getNodeConfigFormFields, getNodeConfigFormFields,
} = useFormFieldsPermission(FieldPermissionType.READ); } = useFormFieldsPermission(FieldPermissionType.READ);
// 表单内用户字段选项, 必须是必填和用户选择器 // 表单内用户字段选项, 必须是必填和用户选择器
const userFieldOnFormOptions = computed(() => { const userFieldOnFormOptions = computed(() => {
return formFieldOptions.filter((item) => item.type === 'UserSelect'); return formFieldOptions.filter((item) => item.type === 'UserSelect');
}); });
// 表单内部门字段选项, 必须是必填和部门选择器 // 表单内部门字段选项, 必须是必填和部门选择器
const deptFieldOnFormOptions = computed(() => { const deptFieldOnFormOptions = computed(() => {
return formFieldOptions.filter((item) => item.type === 'DeptSelect'); return formFieldOptions.filter((item) => item.type === 'DeptSelect');
}); });
// 抄送人表单配置 // 抄送人表单配置
const formRef = ref(); // 表单 Ref const formRef = ref(); // 表单 Ref
// 表单校验规则 // 表单校验规则
const formRules: Record<string, Rule[]> = reactive({ const formRules: Record<string, Rule[]> = reactive({
candidateStrategy: [ candidateStrategy: [
@@ -127,6 +138,7 @@ const {
handleCandidateParam, handleCandidateParam,
parseCandidateParam, parseCandidateParam,
} = useNodeForm(NodeType.COPY_TASK_NODE); } = useNodeForm(NodeType.COPY_TASK_NODE);
const configForm = tempConfigForm as Ref<CopyTaskFormType>; const configForm = tempConfigForm as Ref<CopyTaskFormType>;
// 抄送人策略， 去掉发起人自选 和 发起人自己 // 抄送人策略， 去掉发起人自选 和 发起人自己
const copyUserStrategies = computed(() => { const copyUserStrategies = computed(() => {
@@ -134,8 +146,9 @@ const copyUserStrategies = computed(() => {
(item) => item.value !== CandidateStrategy.START_USER, (item) => item.value !== CandidateStrategy.START_USER,
); );
}); });
// 改变抄送人设置策略 // 改变抄送人设置策略
const changeCandidateStrategy = () => { function changeCandidateStrategy() {
configForm.value.userIds = []; configForm.value.userIds = [];
configForm.value.deptIds = []; configForm.value.deptIds = [];
configForm.value.roleIds = []; configForm.value.roleIds = [];
@@ -144,9 +157,10 @@ const changeCandidateStrategy = () => {
configForm.value.deptLevel = 1; configForm.value.deptLevel = 1;
configForm.value.formUser = ''; configForm.value.formUser = '';
configForm.value.formDept = ''; configForm.value.formDept = '';
}; }
// 保存配置 // 保存配置
const saveConfig = async () => { async function saveConfig() {
activeTabName.value = 'user'; activeTabName.value = 'user';
if (!formRef.value) return false; if (!formRef.value) return false;
const valid = await formRef.value.validate(); const valid = await formRef.value.validate();
@@ -160,9 +174,10 @@ const saveConfig = async () => {
currentNode.value.fieldsPermission = fieldsPermissionConfig.value; currentNode.value.fieldsPermission = fieldsPermissionConfig.value;
drawerApi.close(); drawerApi.close();
return true; return true;
}; }
// 显示抄送节点配置， 由父组件传过来 // 显示抄送节点配置， 由父组件传过来
const showCopyTaskNodeConfig = (node: SimpleFlowNode) => { function showCopyTaskNodeConfig(node: SimpleFlowNode) {
nodeName.value = node.name; nodeName.value = node.name;
// 抄送人设置 // 抄送人设置
configForm.value.candidateStrategy = node.candidateStrategy!; configForm.value.candidateStrategy = node.candidateStrategy!;
@@ -171,10 +186,10 @@ const showCopyTaskNodeConfig = (node: SimpleFlowNode) => {
getNodeConfigFormFields(node.fieldsPermission); getNodeConfigFormFields(node.fieldsPermission);
drawerApi.open(); drawerApi.open();
}; }
/** 批量更新权限 */ /** 批量更新权限 */
const updatePermission = (type: string) => { function updatePermission(type: string) {
fieldsPermissionConfig.value.forEach((field) => { fieldsPermissionConfig.value.forEach((field) => {
if (type === 'READ') { if (type === 'READ') {
field.permission = FieldPermissionType.READ; field.permission = FieldPermissionType.READ;
@@ -184,7 +199,7 @@ const updatePermission = (type: string) => {
field.permission = FieldPermissionType.NONE; field.permission = FieldPermissionType.NONE;
} }
}); });
}; }
// 在组件初始化时对表单字段进行处理 // 在组件初始化时对表单字段进行处理
onMounted(() => { onMounted(() => {

20
apps/web-antd/src/components/simple-process-design/components/nodes-config/delay-timer-node-config.vue
View File

@@ -33,6 +33,7 @@ import { useNodeName, useWatchNode } from '../../helpers';
import { convertTimeUnit } from './utils'; import { convertTimeUnit } from './utils';
defineOptions({ name: 'DelayTimerNodeConfig' }); defineOptions({ name: 'DelayTimerNodeConfig' });
const props = defineProps({ const props = defineProps({
flowNode: { flowNode: {
type: Object as () => SimpleFlowNode, type: Object as () => SimpleFlowNode,
@@ -48,6 +49,7 @@ const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
); );
// 抄送人表单配置 // 抄送人表单配置
const formRef = ref(); // 表单 Ref const formRef = ref(); // 表单 Ref
// 表单校验规则 // 表单校验规则
const formRules: Record<string, Rule[]> = reactive({ const formRules: Record<string, Rule[]> = reactive({
delayType: [ delayType: [
@@ -60,6 +62,7 @@ const formRules: Record<string, Rule[]> = reactive({
{ required: true, message: '延迟时间不能为空', trigger: 'change' }, { required: true, message: '延迟时间不能为空', trigger: 'change' },
], ],
}); });
// 配置表单数据 // 配置表单数据
const configForm = ref({ const configForm = ref({
delayType: DelayTypeEnum.FIXED_TIME_DURATION, delayType: DelayTypeEnum.FIXED_TIME_DURATION,
@@ -69,7 +72,7 @@ const configForm = ref({
}); });
// 获取显示文本 // 获取显示文本
const getShowText = (): string => { function getShowText(): string {
let showText = ''; let showText = '';
if (configForm.value.delayType === DelayTypeEnum.FIXED_TIME_DURATION) { if (configForm.value.delayType === DelayTypeEnum.FIXED_TIME_DURATION) {
showText = `延迟${configForm.value.timeDuration}${TIME_UNIT_TYPES?.find((item) => item.value === configForm.value.timeUnit)?.label}`; showText = `延迟${configForm.value.timeDuration}${TIME_UNIT_TYPES?.find((item) => item.value === configForm.value.timeUnit)?.label}`;
@@ -78,10 +81,10 @@ const getShowText = (): string => {
showText = `延迟至${configForm.value.dateTime.replace('T', ' ')}`; showText = `延迟至${configForm.value.dateTime.replace('T', ' ')}`;
} }
return showText; return showText;
}; }
// 获取ISO时间格式 // 获取ISO时间格式
const getIsoTimeDuration = () => { function getIsoTimeDuration() {
let strTimeDuration = 'PT'; let strTimeDuration = 'PT';
if (configForm.value.timeUnit === TimeUnitType.MINUTE) { if (configForm.value.timeUnit === TimeUnitType.MINUTE) {
strTimeDuration += `${configForm.value.timeDuration}M`; strTimeDuration += `${configForm.value.timeDuration}M`;
@@ -93,10 +96,10 @@ const getIsoTimeDuration = () => {
strTimeDuration += `${configForm.value.timeDuration}D`; strTimeDuration += `${configForm.value.timeDuration}D`;
} }
return strTimeDuration; return strTimeDuration;
}; }
// 保存配置 // 保存配置
const saveConfig = async () => { async function saveConfig() {
if (!formRef.value) return false; if (!formRef.value) return false;
const valid = await formRef.value.validate(); const valid = await formRef.value.validate();
if (!valid) return false; if (!valid) return false;
@@ -118,7 +121,7 @@ const saveConfig = async () => {
} }
drawerApi.close(); drawerApi.close();
return true; return true;
}; }
const [Drawer, drawerApi] = useVbenDrawer({ const [Drawer, drawerApi] = useVbenDrawer({
title: nodeName.value, title: nodeName.value,
@@ -126,7 +129,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
}); });
// 显示延迟器节点配置，由父组件调用 // 显示延迟器节点配置，由父组件调用
const openDrawer = (node: SimpleFlowNode) => { function openDrawer(node: SimpleFlowNode) {
nodeName.value = node.name; nodeName.value = node.name;
if (node.delaySetting) { if (node.delaySetting) {
configForm.value.delayType = node.delaySetting.delayType; configForm.value.delayType = node.delaySetting.delayType;
@@ -144,7 +147,7 @@ const openDrawer = (node: SimpleFlowNode) => {
} }
} }
drawerApi.open(); drawerApi.open();
}; }
defineExpose({ openDrawer }); // 暴露方法给父组件 defineExpose({ openDrawer }); // 暴露方法给父组件
</script> </script>
@@ -242,4 +245,3 @@ defineExpose({ openDrawer }); // 暴露方法给父组件
</div> </div>
</Drawer> </Drawer>
</template> </template>
<style lang="scss" scoped></style>

9
apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/condition-dialog.vue
View File

@@ -50,15 +50,16 @@ const [Modal, modalApi] = useVbenModal({
}, },
}); });
const open = (conditionObj: any | undefined) => { // TODO: jason open 在 useVbenModal 中 onOpenChange 方法
function open(conditionObj: any | undefined) {
if (conditionObj) { if (conditionObj) {
conditionData.value.conditionType = conditionObj.conditionType; conditionData.value.conditionType = conditionObj.conditionType;
conditionData.value.conditionExpression = conditionObj.conditionExpression; conditionData.value.conditionExpression = conditionObj.conditionExpression;
conditionData.value.conditionGroups = conditionObj.conditionGroups; conditionData.value.conditionGroups = conditionObj.conditionGroups;
} }
modalApi.open(); modalApi.open();
}; }
// TODO: jason 不需要暴露expose，直接使用modalApi.setData(formSetting).open()
defineExpose({ open }); defineExpose({ open });
</script> </script>
<template> <template>
@@ -66,5 +67,3 @@ defineExpose({ open });
<Condition ref="conditionRef" v-model="conditionData" /> <Condition ref="conditionRef" v-model="conditionData" />
</Modal> </Modal>
</template> </template>
<style lang="scss" scoped></style>

29
apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/condition.vue
View File

@@ -38,13 +38,16 @@ import { useFormFieldsAndStartUser } from '../../../helpers';
defineOptions({ defineOptions({
name: 'Condition', name: 'Condition',
}); });
const props = defineProps({ const props = defineProps({
modelValue: { modelValue: {
type: Object, type: Object,
required: true, required: true,
}, },
}); });
const emit = defineEmits(['update:modelValue']); const emit = defineEmits(['update:modelValue']);
const condition = computed({ const condition = computed({
get() { get() {
return props.modelValue; return props.modelValue;
@@ -81,35 +84,37 @@ const formRules: Record<string, Rule[]> = reactive({
}, },
], ],
}); });
const formRef = ref(); // 表单 Ref const formRef = ref(); // 表单 Ref
/** 切换条件配置方式 */ /** 切换条件配置方式 */
const changeConditionType = () => { function changeConditionType() {
if ( if (
condition.value.conditionType === ConditionType.RULE && condition.value.conditionType === ConditionType.RULE &&
!condition.value.conditionGroups !condition.value.conditionGroups
) { ) {
condition.value.conditionGroups = cloneDeep(DEFAULT_CONDITION_GROUP_VALUE); condition.value.conditionGroups = cloneDeep(DEFAULT_CONDITION_GROUP_VALUE);
} }
}; }
const deleteConditionGroup = (conditions: any, index: number) => {
function deleteConditionGroup(conditions: any, index: number) {
conditions.splice(index, 1); conditions.splice(index, 1);
}; }
const deleteConditionRule = (condition: any, index: number) => { function deleteConditionRule(condition: any, index: number) {
condition.rules.splice(index, 1); condition.rules.splice(index, 1);
}; }
const addConditionRule = (condition: any, index: number) => { function addConditionRule(condition: any, index: number) {
const rule = { const rule = {
opCode: '==', opCode: '==',
leftSide: undefined, leftSide: undefined,
rightSide: '', rightSide: '',
}; };
condition.rules.splice(index + 1, 0, rule); condition.rules.splice(index + 1, 0, rule);
}; }
const addConditionGroup = (conditions: any) => { function addConditionGroup(conditions: any) {
const condition = { const condition = {
and: true, and: true,
rules: [ rules: [
@@ -121,12 +126,12 @@ const addConditionGroup = (conditions: any) => {
], ],
}; };
conditions.push(condition); conditions.push(condition);
}; }
const validate = async () => { async function validate() {
if (!formRef.value) return false; if (!formRef.value) return false;
return await formRef.value.validate(); return await formRef.value.validate();
}; }
defineExpose({ validate }); defineExpose({ validate });
</script> </script>

9
apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/http-request-param-setting.vue
View File

@@ -42,18 +42,18 @@ const props = defineProps({
const formFieldOptions = useFormFieldsAndStartUser(); const formFieldOptions = useFormFieldsAndStartUser();
/** 添加请求配置项 */ /** 添加请求配置项 */
const addHttpRequestParam = (arr: HttpRequestParam[]) => { function addHttpRequestParam(arr: HttpRequestParam[]) {
arr.push({ arr.push({
key: '', key: '',
type: BpmHttpRequestParamTypeEnum.FIXED_VALUE, type: BpmHttpRequestParamTypeEnum.FIXED_VALUE,
value: '', value: '',
}); });
}; }
/** 删除请求配置项 */ /** 删除请求配置项 */
const deleteHttpRequestParam = (arr: HttpRequestParam[], index: number) => { function deleteHttpRequestParam(arr: HttpRequestParam[], index: number) {
arr.splice(index, 1); arr.splice(index, 1);
}; }
</script> </script>
<template> <template>
<FormItem <FormItem
@@ -225,4 +225,3 @@ const deleteHttpRequestParam = (arr: HttpRequestParam[], index: number) => {
</Button> </Button>
</FormItem> </FormItem>
</template> </template>
<style lang="scss" scoped></style>

14
apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/http-request-setting.vue
View File

@@ -33,8 +33,11 @@ const props = defineProps({
required: true, required: true,
}, },
}); });
const emits = defineEmits(['update:setting']); const emits = defineEmits(['update:setting']);
const { setting } = toRefs(props); const { setting } = toRefs(props);
watch( watch(
() => setting, () => setting,
(val) => { (val) => {
@@ -46,20 +49,20 @@ watch(
const formFields = useFormFields(); const formFields = useFormFields();
/** 添加 HTTP 请求返回值设置项 */ /** 添加 HTTP 请求返回值设置项 */
const addHttpResponseSetting = (responseSetting: Record<string, string>[]) => { function addHttpResponseSetting(responseSetting: Record<string, string>[]) {
responseSetting.push({ responseSetting.push({
key: '', key: '',
value: '', value: '',
}); });
}; }
/** 删除 HTTP 请求返回值设置项 */ /** 删除 HTTP 请求返回值设置项 */
const deleteHttpResponseSetting = ( function deleteHttpResponseSetting(
responseSetting: Record<string, string>[], responseSetting: Record<string, string>[],
index: number, index: number,
) => { ) {
responseSetting.splice(index, 1); responseSetting.splice(index, 1);
}; }
</script> </script>
<template> <template>
<FormItem> <FormItem>
@@ -171,4 +174,3 @@ const deleteHttpResponseSetting = (
</FormItem> </FormItem>
</div> </div>
</template> </template>
<style lang="scss" scoped></style>

8
apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/user-task-listener.vue
View File

@@ -23,8 +23,11 @@ const props = defineProps({
required: true, required: true,
}, },
}); });
const emit = defineEmits(['update:modelValue']); const emit = defineEmits(['update:modelValue']);
const listenerFormRef = ref(); const listenerFormRef = ref();
const configForm = computed({ const configForm = computed({
get() { get() {
return props.modelValue; return props.modelValue;
@@ -33,6 +36,7 @@ const configForm = computed({
emit('update:modelValue', newValue); emit('update:modelValue', newValue);
}, },
}); });
const taskListener = ref([ const taskListener = ref([
{ {
name: '创建任务', name: '创建任务',
@@ -48,10 +52,10 @@ const taskListener = ref([
}, },
]); ]);
const validate = async () => { async function validate() {
if (!listenerFormRef.value) return false; if (!listenerFormRef.value) return false;
return await listenerFormRef.value.validate(); return await listenerFormRef.value.validate();
}; }
defineExpose({ validate }); defineExpose({ validate });
</script> </script>

30
apps/web-antd/src/components/simple-process-design/components/nodes-config/router-node-config.vue
View File

@@ -26,12 +26,14 @@ import { useNodeName, useWatchNode } from '../../helpers';
import Condition from './modules/condition.vue'; import Condition from './modules/condition.vue';
defineOptions({ name: 'RouterNodeConfig' }); defineOptions({ name: 'RouterNodeConfig' });
const props = defineProps({ const props = defineProps({
flowNode: { flowNode: {
type: Object as () => SimpleFlowNode, type: Object as () => SimpleFlowNode,
required: true, required: true,
}, },
}); });
const processNodeTree = inject<Ref<SimpleFlowNode>>('processNodeTree'); const processNodeTree = inject<Ref<SimpleFlowNode>>('processNodeTree');
/** 当前节点 */ /** 当前节点 */
@@ -46,7 +48,7 @@ const conditionRef = ref<any[]>([]);
const formRef = ref(); const formRef = ref();
/** 校验节点配置 */ /** 校验节点配置 */
const validateConfig = async () => { async function validateConfig() {
// 校验路由分支选择 // 校验路由分支选择
const routeIdValid = await formRef.value.validate().catch(() => false); const routeIdValid = await formRef.value.validate().catch(() => false);
if (!routeIdValid) { if (!routeIdValid) {
@@ -68,10 +70,10 @@ const validateConfig = async () => {
if (!showText) return false; if (!showText) return false;
return true; return true;
}; }
/** 保存配置 */ /** 保存配置 */
const saveConfig = async () => { async function saveConfig() {
// 校验配置 // 校验配置
if (!(await validateConfig())) { if (!(await validateConfig())) {
return false; return false;
@@ -82,7 +84,7 @@ const saveConfig = async () => {
currentNode.value.routerGroups = routerGroups.value; currentNode.value.routerGroups = routerGroups.value;
drawerApi.close(); drawerApi.close();
return true; return true;
}; }
const [Drawer, drawerApi] = useVbenDrawer({ const [Drawer, drawerApi] = useVbenDrawer({
title: nodeName.value, title: nodeName.value,
@@ -90,7 +92,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
}); });
/** 打开路由节点配置抽屉，由父组件调用 */ /** 打开路由节点配置抽屉，由父组件调用 */
const openDrawer = (node: SimpleFlowNode) => { function openDrawer(node: SimpleFlowNode) {
nodeOptions.value = []; nodeOptions.value = [];
getRouterNode(processNodeTree?.value); getRouterNode(processNodeTree?.value);
routerGroups.value = []; routerGroups.value = [];
@@ -99,10 +101,10 @@ const openDrawer = (node: SimpleFlowNode) => {
routerGroups.value = node.routerGroups; routerGroups.value = node.routerGroups;
} }
drawerApi.open(); drawerApi.open();
}; }
/** 获取显示文本 */ /** 获取显示文本 */
const getShowText = () => { function getShowText() {
if ( if (
!routerGroups.value || !routerGroups.value ||
!Array.isArray(routerGroups.value) || !Array.isArray(routerGroups.value) ||
@@ -135,10 +137,10 @@ const getShowText = () => {
} }
} }
return `${routerGroups.value.length}条路由分支`; return `${routerGroups.value.length}条路由分支`;
}; }
/** 添加路由分支 */ /** 添加路由分支 */
const addRouterGroup = () => { function addRouterGroup() {
routerGroups.value.push({ routerGroups.value.push({
nodeId: undefined, nodeId: undefined,
conditionType: ConditionType.RULE, conditionType: ConditionType.RULE,
@@ -159,15 +161,15 @@ const addRouterGroup = () => {
], ],
}, },
}); });
}; }
/** 删除路由分支 */ /** 删除路由分支 */
const deleteRouterGroup = (index: number) => { function deleteRouterGroup(index: number) {
routerGroups.value.splice(index, 1); routerGroups.value.splice(index, 1);
}; }
/** 递归获取所有节点 */ /** 递归获取所有节点 */
const getRouterNode = (node: any) => { function getRouterNode(node: any) {
// TODO 最好还需要满足以下要求 // TODO 最好还需要满足以下要求
// 并行分支、包容分支内部节点不能跳转到外部节点 // 并行分支、包容分支内部节点不能跳转到外部节点
// 条件分支节点可以向上跳转到外部节点 // 条件分支节点可以向上跳转到外部节点
@@ -192,7 +194,7 @@ const getRouterNode = (node: any) => {
} }
node = node.childNode; node = node.childNode;
} }
}; }
defineExpose({ openDrawer }); // 暴露方法给父组件 defineExpose({ openDrawer }); // 暴露方法给父组件
</script> </script>

25
apps/web-antd/src/components/simple-process-design/components/nodes-config/start-user-node-config.vue
View File

@@ -37,12 +37,14 @@ import {
} from '../../helpers'; } from '../../helpers';
defineOptions({ name: 'StartUserNodeConfig' }); defineOptions({ name: 'StartUserNodeConfig' });
const props = defineProps({ const props = defineProps({
flowNode: { flowNode: {
type: Object as () => SimpleFlowNode, type: Object as () => SimpleFlowNode,
required: true, required: true,
}, },
}); });
// 可发起流程的用户编号 // 可发起流程的用户编号
const startUserIds = inject<Ref<any[]>>('startUserIds'); const startUserIds = inject<Ref<any[]>>('startUserIds');
// 可发起流程的部门编号 // 可发起流程的部门编号
@@ -59,10 +61,12 @@ const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
); );
// 激活的 Tab 标签页 // 激活的 Tab 标签页
const activeTabName = ref('user'); const activeTabName = ref('user');
// 表单字段权限配置 // 表单字段权限配置
const { formType, fieldsPermissionConfig, getNodeConfigFormFields } = const { formType, fieldsPermissionConfig, getNodeConfigFormFields } =
useFormFieldsPermission(FieldPermissionType.WRITE); useFormFieldsPermission(FieldPermissionType.WRITE);
const getUserNicknames = (userIds: number[]): string => {
function getUserNicknames(userIds: number[]): string {
if (!userIds || userIds.length === 0) { if (!userIds || userIds.length === 0) {
return ''; return '';
} }
@@ -74,9 +78,9 @@ const getUserNicknames = (userIds: number[]): string => {
} }
}); });
return nicknames.join(','); return nicknames.join(',');
}; }
const getDeptNames = (deptIds: number[]): string => { function getDeptNames(deptIds: number[]): string {
if (!deptIds || deptIds.length === 0) { if (!deptIds || deptIds.length === 0) {
return ''; return '';
} }
@@ -88,7 +92,7 @@ const getDeptNames = (deptIds: number[]): string => {
} }
}); });
return deptNames.join(','); return deptNames.join(',');
}; }
// 使用 VbenDrawer // 使用 VbenDrawer
const [Drawer, drawerApi] = useVbenDrawer({ const [Drawer, drawerApi] = useVbenDrawer({
@@ -103,7 +107,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
}); });
// 保存配置 // 保存配置
const saveConfig = async () => { async function saveConfig() {
activeTabName.value = 'user'; activeTabName.value = 'user';
currentNode.value.name = nodeName.value!; currentNode.value.name = nodeName.value!;
currentNode.value.showText = '已设置'; currentNode.value.showText = '已设置';
@@ -113,18 +117,18 @@ const saveConfig = async () => {
currentNode.value.buttonsSetting = START_USER_BUTTON_SETTING; currentNode.value.buttonsSetting = START_USER_BUTTON_SETTING;
drawerApi.setState({ isOpen: false }); drawerApi.setState({ isOpen: false });
return true; return true;
}; }
// 显示发起人节点配置，由父组件传过来 // 显示发起人节点配置，由父组件传过来
const showStartUserNodeConfig = (node: SimpleFlowNode) => { function showStartUserNodeConfig(node: SimpleFlowNode) {
nodeName.value = node.name; nodeName.value = node.name;
// 表单字段权限 // 表单字段权限
getNodeConfigFormFields(node.fieldsPermission); getNodeConfigFormFields(node.fieldsPermission);
drawerApi.open(); drawerApi.open();
}; }
/** 批量更新权限 */ /** 批量更新权限 */
const updatePermission = (type: string) => { function updatePermission(type: string) {
fieldsPermissionConfig.value.forEach((field) => { fieldsPermissionConfig.value.forEach((field) => {
if (type === 'READ') { if (type === 'READ') {
field.permission = FieldPermissionType.READ; field.permission = FieldPermissionType.READ;
@@ -134,7 +138,7 @@ const updatePermission = (type: string) => {
field.permission = FieldPermissionType.NONE; field.permission = FieldPermissionType.NONE;
} }
}); });
}; }
/** /**
* 暴露方法给父组件 * 暴露方法给父组件
@@ -289,4 +293,3 @@ defineExpose({ showStartUserNodeConfig });
</Tabs> </Tabs>
</Drawer> </Drawer>
</template> </template>
<style lang="scss" scoped></style>

72
apps/web-antd/src/components/simple-process-design/components/nodes-config/trigger-node-config.vue
View File

@@ -76,6 +76,7 @@ const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
); );
// 触发器表单配置 // 触发器表单配置
const formRef = ref(); // 表单 Ref const formRef = ref(); // 表单 Ref
// 表单校验规则 // 表单校验规则
const formRules: Record<string, Rule[]> = reactive({ const formRules: Record<string, Rule[]> = reactive({
type: [{ required: true, message: '触发器类型不能为空', trigger: 'change' }], type: [{ required: true, message: '触发器类型不能为空', trigger: 'change' }],
@@ -83,6 +84,7 @@ const formRules: Record<string, Rule[]> = reactive({
{ required: true, message: '请求地址不能为空', trigger: 'blur' }, { required: true, message: '请求地址不能为空', trigger: 'blur' },
], ],
}); });
// 触发器配置表单数据 // 触发器配置表单数据
const configForm = ref<TriggerSetting>({ const configForm = ref<TriggerSetting>({
type: TriggerTypeEnum.HTTP_REQUEST, type: TriggerTypeEnum.HTTP_REQUEST,
@@ -115,7 +117,7 @@ const optionalUpdateFormFields = computed(() => {
let originalSetting: TriggerSetting | undefined; let originalSetting: TriggerSetting | undefined;
/** 触发器类型改变了 */ /** 触发器类型改变了 */
const changeTriggerType = () => { function changeTriggerType() {
if (configForm.value.type === TriggerTypeEnum.HTTP_REQUEST) { if (configForm.value.type === TriggerTypeEnum.HTTP_REQUEST) {
configForm.value.httpRequestSetting = configForm.value.httpRequestSetting =
originalSetting?.type === TriggerTypeEnum.HTTP_REQUEST && originalSetting?.type === TriggerTypeEnum.HTTP_REQUEST &&
@@ -176,44 +178,48 @@ const changeTriggerType = () => {
]; ];
configForm.value.httpRequestSetting = undefined; configForm.value.httpRequestSetting = undefined;
} }
}; }
/** 添加新的修改表单设置 */ /** 添加新的修改表单设置 */
const addFormSetting = () => { function addFormSetting() {
configForm.value.formSettings!.push({ configForm.value.formSettings!.push({
conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE), conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
updateFormFields: {}, updateFormFields: {},
deleteFields: [], deleteFields: [],
}); });
}; }
/** 删除修改表单设置 */ /** 删除修改表单设置 */
const deleteFormSetting = (index: number) => { function deleteFormSetting(index: number) {
configForm.value.formSettings!.splice(index, 1); configForm.value.formSettings!.splice(index, 1);
}; }
/** 添加条件配置 */ /** 添加条件配置 */
const addFormSettingCondition = ( function addFormSettingCondition(
index: number, index: number,
formSetting: FormTriggerSetting, formSetting: FormTriggerSetting,
) => { ) {
const conditionDialog = proxy.$refs[`condition-${index}`][0]; const conditionDialog = proxy.$refs[`condition-${index}`][0];
// TODO: jason Modal 使用 useVbenModal 初始化，弹出使用modalApi.setData(formSetting).open()
conditionDialog.open(formSetting); conditionDialog.open(formSetting);
}; }
/** 删除条件配置 */ /** 删除条件配置 */
const deleteFormSettingCondition = (formSetting: FormTriggerSetting) => { function deleteFormSettingCondition(formSetting: FormTriggerSetting) {
formSetting.conditionType = undefined; formSetting.conditionType = undefined;
}; }
/** 打开条件配置弹窗 */ /** 打开条件配置弹窗 */
const openFormSettingCondition = ( function openFormSettingCondition(
index: number, index: number,
formSetting: FormTriggerSetting, formSetting: FormTriggerSetting,
) => { ) {
const conditionDialog = proxy.$refs[`condition-${index}`][0]; const conditionDialog = proxy.$refs[`condition-${index}`][0];
conditionDialog.open(formSetting); conditionDialog.open(formSetting);
}; }
/** 处理条件配置保存 */ /** 处理条件配置保存 */
const handleConditionUpdate = (index: number, condition: any) => { function handleConditionUpdate(index: number, condition: any) {
if (configForm.value.formSettings![index]) { if (configForm.value.formSettings![index]) {
configForm.value.formSettings![index].conditionType = configForm.value.formSettings![index].conditionType =
condition.conditionType; condition.conditionType;
@@ -222,50 +228,48 @@ const handleConditionUpdate = (index: number, condition: any) => {
configForm.value.formSettings![index].conditionGroups = configForm.value.formSettings![index].conditionGroups =
condition.conditionGroups; condition.conditionGroups;
} }
}; }
// 包含发起人字段的表单字段 // 包含发起人字段的表单字段
const includeStartUserFormFields = useFormFieldsAndStartUser(); const includeStartUserFormFields = useFormFieldsAndStartUser();
/** 条件配置展示 */ /** 条件配置展示 */
const showConditionText = (formSetting: FormTriggerSetting) => { function showConditionText(formSetting: FormTriggerSetting) {
return getConditionShowText( return getConditionShowText(
formSetting.conditionType, formSetting.conditionType,
formSetting.conditionExpression, formSetting.conditionExpression,
formSetting.conditionGroups, formSetting.conditionGroups,
includeStartUserFormFields, includeStartUserFormFields,
); );
}; }
/** 添加修改字段设置项 */ /** 添加修改字段设置项 */
const addFormFieldSetting = (formSetting: FormTriggerSetting) => { function addFormFieldSetting(formSetting: FormTriggerSetting) {
if (!formSetting) return; if (!formSetting) return;
if (!formSetting.updateFormFields) { if (!formSetting.updateFormFields) {
formSetting.updateFormFields = {}; formSetting.updateFormFields = {};
} }
formSetting.updateFormFields[''] = undefined; formSetting.updateFormFields[''] = undefined;
}; }
/** 更新字段 KEY */ /** 更新字段 KEY */
const updateFormFieldKey = ( function updateFormFieldKey(
formSetting: FormTriggerSetting, formSetting: FormTriggerSetting,
oldKey: string, oldKey: string,
newKey: SelectValue, newKey: SelectValue,
) => { ) {
if (!formSetting?.updateFormFields || !newKey) return; if (!formSetting?.updateFormFields || !newKey) return;
const value = formSetting.updateFormFields[oldKey]; const value = formSetting.updateFormFields[oldKey];
delete formSetting.updateFormFields[oldKey]; delete formSetting.updateFormFields[oldKey];
formSetting.updateFormFields[String(newKey)] = value; formSetting.updateFormFields[String(newKey)] = value;
}; }
/** 删除修改字段设置项 */ /** 删除修改字段设置项 */
const deleteFormFieldSetting = ( function deleteFormFieldSetting(formSetting: FormTriggerSetting, key: string) {
formSetting: FormTriggerSetting,
key: string,
) => {
if (!formSetting?.updateFormFields) return; if (!formSetting?.updateFormFields) return;
delete formSetting.updateFormFields[key]; delete formSetting.updateFormFields[key];
}; }
/** 保存配置 */ /** 保存配置 */
const saveConfig = async () => { async function saveConfig() {
if (!formRef.value) return false; if (!formRef.value) return false;
const valid = await formRef.value.validate(); const valid = await formRef.value.validate();
if (!valid) return false; if (!valid) return false;
@@ -302,10 +306,10 @@ const saveConfig = async () => {
currentNode.value.triggerSetting = configForm.value; currentNode.value.triggerSetting = configForm.value;
drawerApi.close(); drawerApi.close();
return true; return true;
}; }
/** 获取节点展示内容 */ /** 获取节点展示内容 */
const getShowText = (): string => { function getShowText(): string {
let showText = ''; let showText = '';
switch (configForm.value.type) { switch (configForm.value.type) {
case TriggerTypeEnum.FORM_DELETE: { case TriggerTypeEnum.FORM_DELETE: {
@@ -342,10 +346,10 @@ const getShowText = (): string => {
// No default // No default
} }
return showText; return showText;
}; }
/** 显示触发器节点配置， 由父组件传过来 */ /** 显示触发器节点配置， 由父组件传过来 */
const showTriggerNodeConfig = (node: SimpleFlowNode) => { function showTriggerNodeConfig(node: SimpleFlowNode) {
nodeName.value = node.name; nodeName.value = node.name;
originalSetting = node.triggerSetting originalSetting = node.triggerSetting
? cloneDeep(node.triggerSetting) ? cloneDeep(node.triggerSetting)
@@ -369,7 +373,7 @@ const showTriggerNodeConfig = (node: SimpleFlowNode) => {
}; };
} }
drawerApi.open(); drawerApi.open();
}; }
// 暴露方法给父组件 // 暴露方法给父组件
defineExpose({ showTriggerNodeConfig }); defineExpose({ showTriggerNodeConfig });

37
apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue
View File

@@ -70,15 +70,18 @@ import UserTaskListener from './modules/user-task-listener.vue';
import { convertTimeUnit, getApproveTypeText } from './utils'; import { convertTimeUnit, getApproveTypeText } from './utils';
defineOptions({ name: 'UserTaskNodeConfig' }); defineOptions({ name: 'UserTaskNodeConfig' });
const props = defineProps({ const props = defineProps({
flowNode: { flowNode: {
type: Object as () => SimpleFlowNode, type: Object as () => SimpleFlowNode,
required: true, required: true,
}, },
}); });
const emits = defineEmits<{ const emits = defineEmits<{
findReturnTaskNodes: [nodeList: SimpleFlowNode[]]; findReturnTaskNodes: [nodeList: SimpleFlowNode[]];
}>(); }>();
const deptLevelLabel = computed(() => { const deptLevelLabel = computed(() => {
let label = '部门负责人来源'; let label = '部门负责人来源';
if ( if (
@@ -95,6 +98,7 @@ const deptLevelLabel = computed(() => {
} }
return label; return label;
}); });
// 监控节点的变化 // 监控节点的变化
const currentNode = useWatchNode(props); const currentNode = useWatchNode(props);
// 抽屉配置 // 抽屉配置
@@ -106,12 +110,15 @@ const [Drawer, drawerApi] = useVbenDrawer({
saveConfig(); saveConfig();
}, },
}); });
// 节点名称配置 // 节点名称配置
const { nodeName, showInput, clickIcon, blurEvent } = useNodeName( const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
NodeType.USER_TASK_NODE, NodeType.USER_TASK_NODE,
); );
// 激活的 Tab 标签页 // 激活的 Tab 标签页
const activeTabName = ref('user'); const activeTabName = ref('user');
// 表单字段权限设置 // 表单字段权限设置
const { const {
formType, formType,
@@ -119,10 +126,12 @@ const {
formFieldOptions, formFieldOptions,
getNodeConfigFormFields, getNodeConfigFormFields,
} = useFormFieldsPermission(FieldPermissionType.READ); } = useFormFieldsPermission(FieldPermissionType.READ);
// 表单内用户字段选项, 必须是必填和用户选择器 // 表单内用户字段选项, 必须是必填和用户选择器
const userFieldOnFormOptions = computed(() => { const userFieldOnFormOptions = computed(() => {
return formFieldOptions.filter((item) => item.type === 'UserSelect'); return formFieldOptions.filter((item) => item.type === 'UserSelect');
}); });
// 表单内部门字段选项, 必须是必填和部门选择器 // 表单内部门字段选项, 必须是必填和部门选择器
const deptFieldOnFormOptions = computed(() => { const deptFieldOnFormOptions = computed(() => {
return formFieldOptions.filter((item) => item.type === 'DeptSelect'); return formFieldOptions.filter((item) => item.type === 'DeptSelect');
@@ -135,7 +144,9 @@ const {
changeBtnDisplayName, changeBtnDisplayName,
btnDisplayNameBlurEvent, btnDisplayNameBlurEvent,
} = useButtonsSetting(); } = useButtonsSetting();
const approveType = ref(ApproveType.USER); const approveType = ref(ApproveType.USER);
// 审批人表单设置 // 审批人表单设置
const formRef = ref(); // 表单 Ref const formRef = ref(); // 表单 Ref
// 表单校验规则 // 表单校验规则
@@ -197,7 +208,7 @@ const {
const configForm = tempConfigForm as Ref<UserTaskFormType>; const configForm = tempConfigForm as Ref<UserTaskFormType>;
// 改变审批人设置策略 // 改变审批人设置策略
const changeCandidateStrategy = () => { function changeCandidateStrategy() {
configForm.value.userIds = []; configForm.value.userIds = [];
configForm.value.deptIds = []; configForm.value.deptIds = [];
configForm.value.roleIds = []; configForm.value.roleIds = [];
@@ -207,16 +218,16 @@ const changeCandidateStrategy = () => {
configForm.value.formUser = ''; configForm.value.formUser = '';
configForm.value.formDept = ''; configForm.value.formDept = '';
configForm.value.approveMethod = ApproveMethodType.SEQUENTIAL_APPROVE; configForm.value.approveMethod = ApproveMethodType.SEQUENTIAL_APPROVE;
}; }
/** 审批方式改变 */ /** 审批方式改变 */
const approveMethodChanged = () => { function approveMethodChanged() {
configForm.value.rejectHandlerType = RejectHandlerType.FINISH_PROCESS; configForm.value.rejectHandlerType = RejectHandlerType.FINISH_PROCESS;
if (configForm.value.approveMethod === ApproveMethodType.APPROVE_BY_RATIO) { if (configForm.value.approveMethod === ApproveMethodType.APPROVE_BY_RATIO) {
configForm.value.approveRatio = 100; configForm.value.approveRatio = 100;
} }
formRef.value.clearValidate('approveRatio'); formRef.value.clearValidate('approveRatio');
}; }
// 审批拒绝 可退回的节点 // 审批拒绝 可退回的节点
const returnTaskList = ref<SimpleFlowNode[]>([]); const returnTaskList = ref<SimpleFlowNode[]>([]);
// 审批人超时未处理设置 // 审批人超时未处理设置
@@ -238,7 +249,7 @@ const nodeTypeName = computed(() => {
}); });
/** 校验节点配置 */ /** 校验节点配置 */
const validateConfig = async () => { async function validateConfig() {
if (!formRef.value) return false; if (!formRef.value) return false;
if (!userTaskListenerRef.value) return false; if (!userTaskListenerRef.value) return false;
@@ -262,9 +273,10 @@ const validateConfig = async () => {
if (!showText) return false; if (!showText) return false;
return true; return true;
}; }
/** 保存配置 */ /** 保存配置 */
const saveConfig = async () => { async function saveConfig() {
// 如果不是人工审批，不执行校验，直接返回 // 如果不是人工审批，不执行校验，直接返回
if (approveType.value !== ApproveType.USER) { if (approveType.value !== ApproveType.USER) {
currentNode.value.name = nodeName.value!; currentNode.value.name = nodeName.value!;
@@ -347,10 +359,10 @@ const saveConfig = async () => {
currentNode.value.showText = getShowText(); currentNode.value.showText = getShowText();
drawerApi.close(); drawerApi.close();
return true; return true;
}; }
/** 显示审批节点配置， 由父组件传过来 */ /** 显示审批节点配置， 由父组件传过来 */
const showUserTaskNodeConfig = (node: SimpleFlowNode) => { function showUserTaskNodeConfig(node: SimpleFlowNode) {
nodeName.value = node.name; nodeName.value = node.name;
// 1 审批类型 // 1 审批类型
approveType.value = approveType.value =
@@ -429,7 +441,7 @@ const showUserTaskNodeConfig = (node: SimpleFlowNode) => {
configForm.value.reasonRequire = node?.reasonRequire ?? false; configForm.value.reasonRequire = node?.reasonRequire ?? false;
drawerApi.open(); drawerApi.open();
}; }
defineExpose({ showUserTaskNodeConfig }); // 暴露方法给父组件 defineExpose({ showUserTaskNodeConfig }); // 暴露方法给父组件
@@ -541,7 +553,7 @@ function useTimeoutHandler() {
} }
/** 批量更新权限 */ /** 批量更新权限 */
const updatePermission = (type: string) => { function updatePermission(type: string) {
fieldsPermissionConfig.value.forEach((field) => { fieldsPermissionConfig.value.forEach((field) => {
if (type === 'READ') { if (type === 'READ') {
field.permission = FieldPermissionType.READ; field.permission = FieldPermissionType.READ;
@@ -551,7 +563,8 @@ const updatePermission = (type: string) => {
field.permission = FieldPermissionType.NONE; field.permission = FieldPermissionType.NONE;
} }
}); });
}; }
// 在组件初始化时记录初始位置 // 在组件初始化时记录初始位置
onMounted(() => { onMounted(() => {
// 固定添加发起人ID字段 // 固定添加发起人ID字段

20
apps/web-antd/src/components/simple-process-design/components/nodes-config/utils.ts
View File

@@ -1,29 +1,29 @@
import { APPROVE_TYPE, ApproveType, TimeUnitType } from '../../consts'; import { APPROVE_TYPE, ApproveType, TimeUnitType } from '../../consts';
/** 获取条件节点默认的名称 */ /** 获取条件节点默认的名称 */
export const getDefaultConditionNodeName = ( export function getDefaultConditionNodeName(
index: number, index: number,
defaultFlow: boolean | undefined, defaultFlow: boolean | undefined,
): string => { ): string {
if (defaultFlow) { if (defaultFlow) {
return '其它情况'; return '其它情况';
} }
return `条件${index + 1}`; return `条件${index + 1}`;
}; }
/** 获取包容分支条件节点默认的名称 */ /** 获取包容分支条件节点默认的名称 */
export const getDefaultInclusiveConditionNodeName = ( export function getDefaultInclusiveConditionNodeName(
index: number, index: number,
defaultFlow: boolean | undefined, defaultFlow: boolean | undefined,
): string => { ): string {
if (defaultFlow) { if (defaultFlow) {
return '其它情况'; return '其它情况';
} }
return `包容条件${index + 1}`; return `包容条件${index + 1}`;
}; }
/** 转换时间单位字符串为枚举值 */ /** 转换时间单位字符串为枚举值 */
export const convertTimeUnit = (strTimeUnit: string) => { export function convertTimeUnit(strTimeUnit: string) {
if (strTimeUnit === 'M') { if (strTimeUnit === 'M') {
return TimeUnitType.MINUTE; return TimeUnitType.MINUTE;
} }
@@ -34,10 +34,10 @@ export const convertTimeUnit = (strTimeUnit: string) => {
return TimeUnitType.DAY; return TimeUnitType.DAY;
} }
return TimeUnitType.HOUR; return TimeUnitType.HOUR;
}; }
/** 根据审批类型获取对应的文本描述 */ /** 根据审批类型获取对应的文本描述 */
export const getApproveTypeText = (approveType: ApproveType): string => { export function getApproveTypeText(approveType: ApproveType): string {
let approveTypeText = ''; let approveTypeText = '';
APPROVE_TYPE.forEach((item) => { APPROVE_TYPE.forEach((item) => {
if (item.value === approveType) { if (item.value === approveType) {
@@ -45,4 +45,4 @@ export const getApproveTypeText = (approveType: ApproveType): string => {
} }
}); });
return approveTypeText; return approveTypeText;
}; }

9
apps/web-antd/src/components/simple-process-design/components/nodes/copy-task-node.vue
View File

@@ -37,18 +37,18 @@ const { showInput, blurEvent, clickTitle } = useNodeName2(
const nodeSetting = ref(); const nodeSetting = ref();
// 打开节点配置 // 打开节点配置
const openNodeConfig = () => { function openNodeConfig() {
if (readonly) { if (readonly) {
return; return;
} }
nodeSetting.value.showCopyTaskNodeConfig(currentNode.value); nodeSetting.value.showCopyTaskNodeConfig(currentNode.value);
nodeSetting.value.openDrawer(); nodeSetting.value.openDrawer();
}; }
// 删除节点。更新当前节点为孩子节点 // 删除节点。更新当前节点为孩子节点
const deleteNode = () => { function deleteNode() {
emits('update:flowNode', currentNode.value.childNode); emits('update:flowNode', currentNode.value.childNode);
}; }
</script> </script>
<template> <template>
<div class="node-wrapper"> <div class="node-wrapper">
@@ -115,4 +115,3 @@ const deleteNode = () => {
/> />
</div> </div>
</template> </template>
<style lang="scss" scoped></style>

9
apps/web-antd/src/components/simple-process-design/components/nodes/delay-timer-node.vue
View File

@@ -35,17 +35,17 @@ const { showInput, blurEvent, clickTitle } = useNodeName2(
const nodeSetting = ref(); const nodeSetting = ref();
// 打开节点配置 // 打开节点配置
const openNodeConfig = () => { function openNodeConfig() {
if (readonly) { if (readonly) {
return; return;
} }
nodeSetting.value.openDrawer(currentNode.value); nodeSetting.value.openDrawer(currentNode.value);
}; }
// 删除节点。更新当前节点为孩子节点 // 删除节点。更新当前节点为孩子节点
const deleteNode = () => { function deleteNode() {
emits('update:flowNode', currentNode.value.childNode); emits('update:flowNode', currentNode.value.childNode);
}; }
</script> </script>
<template> <template>
<div class="node-wrapper"> <div class="node-wrapper">
@@ -112,4 +112,3 @@ const deleteNode = () => {
/> />
</div> </div>
</template> </template>
<style lang="scss" scoped></style>

5
apps/web-antd/src/components/simple-process-design/components/nodes/end-event-node.vue
View File

@@ -22,7 +22,7 @@ const processInstance = inject<Ref<any>>('processInstance', ref({}));
const processInstanceInfos = ref<any[]>([]); // 流程的审批信息 const processInstanceInfos = ref<any[]>([]); // 流程的审批信息
const nodeClick = () => { function nodeClick() {
if (readonly && processInstance && processInstance.value) { if (readonly && processInstance && processInstance.value) {
console.warn( console.warn(
'TODO 只读模式，弹窗显示审批信息', 'TODO 只读模式，弹窗显示审批信息',
@@ -30,7 +30,7 @@ const nodeClick = () => {
processInstanceInfos.value, processInstanceInfos.value,
); );
} }
}; }
</script> </script>
<template> <template>
<div class="end-node-wrapper"> <div class="end-node-wrapper">
@@ -44,4 +44,3 @@ const nodeClick = () => {
</div> </div>
<!-- TODO 审批信息 --> <!-- TODO 审批信息 -->
</template> </template>
<style lang="scss" scoped></style>

37
apps/web-antd/src/components/simple-process-design/components/nodes/exclusive-node.vue
View File

@@ -20,12 +20,14 @@ import ProcessNodeTree from '../process-node-tree.vue';
import NodeHandler from './node-handler.vue'; import NodeHandler from './node-handler.vue';
defineOptions({ name: 'ExclusiveNode' }); defineOptions({ name: 'ExclusiveNode' });
const props = defineProps({ const props = defineProps({
flowNode: { flowNode: {
type: Object as () => SimpleFlowNode, type: Object as () => SimpleFlowNode,
required: true, required: true,
}, },
}); });
// 定义事件，更新父组件 // 定义事件，更新父组件
const emits = defineEmits<{ const emits = defineEmits<{
findParentNode: [nodeList: SimpleFlowNode[], nodeType: number]; findParentNode: [nodeList: SimpleFlowNode[], nodeType: number];
@@ -36,10 +38,12 @@ const emits = defineEmits<{
]; ];
'update:modelValue': [node: SimpleFlowNode | undefined]; 'update:modelValue': [node: SimpleFlowNode | undefined];
}>(); }>();
const { proxy } = getCurrentInstance() as any; const { proxy } = getCurrentInstance() as any;
// 是否只读 // 是否只读
const readonly = inject<Boolean>('readonly'); const readonly = inject<Boolean>('readonly');
const currentNode = ref<SimpleFlowNode>(props.flowNode); const currentNode = ref<SimpleFlowNode>(props.flowNode);
watch( watch(
() => props.flowNode, () => props.flowNode,
(newValue) => { (newValue) => {
@@ -48,8 +52,9 @@ watch(
); );
const showInputs = ref<boolean[]>([]); const showInputs = ref<boolean[]>([]);
// 失去焦点 // 失去焦点
const blurEvent = (index: number) => { function blurEvent(index: number) {
showInputs.value[index] = false; showInputs.value[index] = false;
const conditionNode = currentNode.value.conditionNodes?.at( const conditionNode = currentNode.value.conditionNodes?.at(
index, index,
@@ -60,23 +65,23 @@ const blurEvent = (index: number) => {
index, index,
conditionNode.conditionSetting?.defaultFlow, conditionNode.conditionSetting?.defaultFlow,
); );
}; }
// 点击条件名称 // 点击条件名称
const clickEvent = (index: number) => { function clickEvent(index: number) {
showInputs.value[index] = true; showInputs.value[index] = true;
}; }
const conditionNodeConfig = (nodeId: string) => { function conditionNodeConfig(nodeId: string) {
if (readonly) { if (readonly) {
return; return;
} }
const conditionNode = proxy.$refs[nodeId][0]; const conditionNode = proxy.$refs[nodeId][0];
conditionNode.open(); conditionNode.open();
}; }
// 新增条件 // 新增条件
const addCondition = () => { function addCondition() {
const conditionNodes = currentNode.value.conditionNodes; const conditionNodes = currentNode.value.conditionNodes;
if (conditionNodes) { if (conditionNodes) {
const len = conditionNodes.length; const len = conditionNodes.length;
@@ -96,10 +101,10 @@ const addCondition = () => {
}; };
conditionNodes.splice(lastIndex, 0, conditionData); conditionNodes.splice(lastIndex, 0, conditionData);
} }
}; }
// 删除条件 // 删除条件
const deleteCondition = (index: number) => { function deleteCondition(index: number) {
const conditionNodes = currentNode.value.conditionNodes; const conditionNodes = currentNode.value.conditionNodes;
if (conditionNodes) { if (conditionNodes) {
conditionNodes.splice(index, 1); conditionNodes.splice(index, 1);
@@ -109,10 +114,10 @@ const deleteCondition = (index: number) => {
emits('update:modelValue', childNode); emits('update:modelValue', childNode);
} }
} }
}; }
// 移动节点 // 移动节点
const moveNode = (index: number, to: number) => { function moveNode(index: number, to: number) {
// -1 ：向左 1： 向右 // -1 ：向左 1： 向右
if ( if (
currentNode.value.conditionNodes && currentNode.value.conditionNodes &&
@@ -125,13 +130,14 @@ const moveNode = (index: number, to: number) => {
currentNode.value.conditionNodes[index], currentNode.value.conditionNodes[index],
)[0] as SimpleFlowNode; )[0] as SimpleFlowNode;
} }
}; }
// 递归从父节点中查询匹配的节点 // 递归从父节点中查询匹配的节点
const recursiveFindParentNode = ( function recursiveFindParentNode(
nodeList: SimpleFlowNode[], nodeList: SimpleFlowNode[],
node: SimpleFlowNode, node: SimpleFlowNode,
nodeType: number, nodeType: number,
) => { ) {
if (!node || node.type === NodeType.START_USER_NODE) { if (!node || node.type === NodeType.START_USER_NODE) {
return; return;
} }
@@ -140,7 +146,7 @@ const recursiveFindParentNode = (
} }
// 条件节点 (NodeType.CONDITION_NODE) 比较特殊。需要调用其父节点条件分支节点（NodeType.EXCLUSIVE_NODE) 继续查找 // 条件节点 (NodeType.CONDITION_NODE) 比较特殊。需要调用其父节点条件分支节点（NodeType.EXCLUSIVE_NODE) 继续查找
emits('findParentNode', nodeList, nodeType); emits('findParentNode', nodeList, nodeType);
}; }
</script> </script>
<template> <template>
<div class="branch-node-wrapper"> <div class="branch-node-wrapper">
@@ -274,4 +280,3 @@ const recursiveFindParentNode = (
/> />
</div> </div>
</template> </template>
<style lang="scss" scoped></style>

35
apps/web-antd/src/components/simple-process-design/components/nodes/inclusive-node.vue
View File

@@ -25,12 +25,14 @@ import NodeHandler from './node-handler.vue';
defineOptions({ defineOptions({
name: 'InclusiveNode', name: 'InclusiveNode',
}); });
const props = defineProps({ const props = defineProps({
flowNode: { flowNode: {
type: Object as () => SimpleFlowNode, type: Object as () => SimpleFlowNode,
required: true, required: true,
}, },
}); });
// 定义事件，更新父组件 // 定义事件，更新父组件
const emits = defineEmits<{ const emits = defineEmits<{
findParentNode: [nodeList: SimpleFlowNode[], nodeType: number]; findParentNode: [nodeList: SimpleFlowNode[], nodeType: number];
@@ -41,6 +43,7 @@ const emits = defineEmits<{
]; ];
'update:modelValue': [node: SimpleFlowNode | undefined]; 'update:modelValue': [node: SimpleFlowNode | undefined];
}>(); }>();
const { proxy } = getCurrentInstance() as any; const { proxy } = getCurrentInstance() as any;
// 是否只读 // 是否只读
const readonly = inject<Boolean>('readonly'); const readonly = inject<Boolean>('readonly');
@@ -56,7 +59,7 @@ watch(
const showInputs = ref<boolean[]>([]); const showInputs = ref<boolean[]>([]);
// 失去焦点 // 失去焦点
const blurEvent = (index: number) => { function blurEvent(index: number) {
showInputs.value[index] = false; showInputs.value[index] = false;
const conditionNode = currentNode.value.conditionNodes?.at( const conditionNode = currentNode.value.conditionNodes?.at(
index, index,
@@ -67,23 +70,23 @@ const blurEvent = (index: number) => {
index, index,
conditionNode.conditionSetting?.defaultFlow, conditionNode.conditionSetting?.defaultFlow,
); );
}; }
// 点击条件名称 // 点击条件名称
const clickEvent = (index: number) => { function clickEvent(index: number) {
showInputs.value[index] = true; showInputs.value[index] = true;
}; }
const conditionNodeConfig = (nodeId: string) => { function conditionNodeConfig(nodeId: string) {
if (readonly) { if (readonly) {
return; return;
} }
const conditionNode = proxy.$refs[nodeId][0]; const conditionNode = proxy.$refs[nodeId][0];
conditionNode.open(); conditionNode.open();
}; }
// 新增条件 // 新增条件
const addCondition = () => { function addCondition() {
const conditionNodes = currentNode.value.conditionNodes; const conditionNodes = currentNode.value.conditionNodes;
if (conditionNodes) { if (conditionNodes) {
const len = conditionNodes.length; const len = conditionNodes.length;
@@ -103,10 +106,10 @@ const addCondition = () => {
}; };
conditionNodes.splice(lastIndex, 0, conditionData); conditionNodes.splice(lastIndex, 0, conditionData);
} }
}; }
// 删除条件 // 删除条件
const deleteCondition = (index: number) => { function deleteCondition(index: number) {
const conditionNodes = currentNode.value.conditionNodes; const conditionNodes = currentNode.value.conditionNodes;
if (conditionNodes) { if (conditionNodes) {
conditionNodes.splice(index, 1); conditionNodes.splice(index, 1);
@@ -116,10 +119,10 @@ const deleteCondition = (index: number) => {
emits('update:modelValue', childNode); emits('update:modelValue', childNode);
} }
} }
}; }
// 移动节点 // 移动节点
const moveNode = (index: number, to: number) => { function moveNode(index: number, to: number) {
// -1 ：向左 1： 向右 // -1 ：向左 1： 向右
if ( if (
currentNode.value.conditionNodes && currentNode.value.conditionNodes &&
@@ -132,13 +135,14 @@ const moveNode = (index: number, to: number) => {
currentNode.value.conditionNodes[index], currentNode.value.conditionNodes[index],
)[0] as SimpleFlowNode; )[0] as SimpleFlowNode;
} }
}; }
// 递归从父节点中查询匹配的节点 // 递归从父节点中查询匹配的节点
const recursiveFindParentNode = ( function recursiveFindParentNode(
nodeList: SimpleFlowNode[], nodeList: SimpleFlowNode[],
node: SimpleFlowNode, node: SimpleFlowNode,
nodeType: number, nodeType: number,
) => { ) {
if (!node || node.type === NodeType.START_USER_NODE) { if (!node || node.type === NodeType.START_USER_NODE) {
return; return;
} }
@@ -147,7 +151,7 @@ const recursiveFindParentNode = (
} }
// 条件节点 (NodeType.CONDITION_NODE) 比较特殊。需要调用其父节点条件分支节点（NodeType.INCLUSIVE_BRANCH_NODE) 继续查找 // 条件节点 (NodeType.CONDITION_NODE) 比较特殊。需要调用其父节点条件分支节点（NodeType.INCLUSIVE_BRANCH_NODE) 继续查找
emits('findParentNode', nodeList, nodeType); emits('findParentNode', nodeList, nodeType);
}; }
</script> </script>
<template> <template>
<div class="branch-node-wrapper"> <div class="branch-node-wrapper">
@@ -279,4 +283,3 @@ const recursiveFindParentNode = (
/> />
</div> </div>
</template> </template>
<style lang="scss" scoped></style>

7
apps/web-antd/src/components/simple-process-design/components/nodes/node-handler.vue
View File

@@ -33,11 +33,12 @@ const props = defineProps({
required: true, required: true,
}, },
}); });
const emits = defineEmits(['update:childNode']); const emits = defineEmits(['update:childNode']);
const popoverShow = ref(false); const popoverShow = ref(false);
const readonly = inject<Boolean>('readonly'); // 是否只读 const readonly = inject<Boolean>('readonly'); // 是否只读
const addNode = (type: number) => { function addNode(type: number) {
// 校验：条件分支、包容分支后面，不允许直接添加并行分支 // 校验：条件分支、包容分支后面，不允许直接添加并行分支
if ( if (
type === NodeType.PARALLEL_BRANCH_NODE && type === NodeType.PARALLEL_BRANCH_NODE &&
@@ -238,7 +239,7 @@ const addNode = (type: number) => {
}; };
emits('update:childNode', data); emits('update:childNode', data);
} }
}; }
</script> </script>
<template> <template>
<div class="node-handler-wrapper"> <div class="node-handler-wrapper">
@@ -334,5 +335,3 @@ const addNode = (type: number) => {
</div> </div>
</div> </div>
</template> </template>
<style lang="scss" scoped></style>

26
apps/web-antd/src/components/simple-process-design/components/nodes/parallel-node.vue
View File

@@ -14,12 +14,14 @@ import ProcessNodeTree from '../process-node-tree.vue';
import NodeHandler from './node-handler.vue'; import NodeHandler from './node-handler.vue';
defineOptions({ name: 'ParallelNode' }); defineOptions({ name: 'ParallelNode' });
const props = defineProps({ const props = defineProps({
flowNode: { flowNode: {
type: Object as () => SimpleFlowNode, type: Object as () => SimpleFlowNode,
required: true, required: true,
}, },
}); });
// 定义事件，更新父组件 // 定义事件，更新父组件
const emits = defineEmits<{ const emits = defineEmits<{
findParnetNode: [nodeList: SimpleFlowNode[], nodeType: number]; findParnetNode: [nodeList: SimpleFlowNode[], nodeType: number];
@@ -30,6 +32,7 @@ const emits = defineEmits<{
]; ];
'update:modelValue': [node: SimpleFlowNode | undefined]; 'update:modelValue': [node: SimpleFlowNode | undefined];
}>(); }>();
const currentNode = ref<SimpleFlowNode>(props.flowNode); const currentNode = ref<SimpleFlowNode>(props.flowNode);
// 是否只读 // 是否只读
const readonly = inject<Boolean>('readonly'); const readonly = inject<Boolean>('readonly');
@@ -42,22 +45,23 @@ watch(
); );
const showInputs = ref<boolean[]>([]); const showInputs = ref<boolean[]>([]);
// 失去焦点 // 失去焦点
const blurEvent = (index: number) => { function blurEvent(index: number) {
showInputs.value[index] = false; showInputs.value[index] = false;
const conditionNode = currentNode.value.conditionNodes?.at( const conditionNode = currentNode.value.conditionNodes?.at(
index, index,
) as SimpleFlowNode; ) as SimpleFlowNode;
conditionNode.name = conditionNode.name || `并行${index + 1}`; conditionNode.name = conditionNode.name || `并行${index + 1}`;
}; }
// 点击条件名称 // 点击条件名称
const clickEvent = (index: number) => { function clickEvent(index: number) {
showInputs.value[index] = true; showInputs.value[index] = true;
}; }
// 新增条件 // 新增条件
const addCondition = () => { function addCondition() {
const conditionNodes = currentNode.value.conditionNodes; const conditionNodes = currentNode.value.conditionNodes;
if (conditionNodes) { if (conditionNodes) {
const len = conditionNodes.length; const len = conditionNodes.length;
@@ -72,10 +76,10 @@ const addCondition = () => {
}; };
conditionNodes.splice(lastIndex, 0, conditionData); conditionNodes.splice(lastIndex, 0, conditionData);
} }
}; }
// 删除条件 // 删除条件
const deleteCondition = (index: number) => { function deleteCondition(index: number) {
const conditionNodes = currentNode.value.conditionNodes; const conditionNodes = currentNode.value.conditionNodes;
if (conditionNodes) { if (conditionNodes) {
conditionNodes.splice(index, 1); conditionNodes.splice(index, 1);
@@ -85,14 +89,14 @@ const deleteCondition = (index: number) => {
emits('update:modelValue', childNode); emits('update:modelValue', childNode);
} }
} }
}; }
// 递归从父节点中查询匹配的节点 // 递归从父节点中查询匹配的节点
const recursiveFindParentNode = ( function recursiveFindParentNode(
nodeList: SimpleFlowNode[], nodeList: SimpleFlowNode[],
node: SimpleFlowNode, node: SimpleFlowNode,
nodeType: number, nodeType: number,
) => { ) {
if (!node || node.type === NodeType.START_USER_NODE) { if (!node || node.type === NodeType.START_USER_NODE) {
return; return;
} }
@@ -101,7 +105,7 @@ const recursiveFindParentNode = (
} }
// 条件节点 (NodeType.CONDITION_NODE) 比较特殊。需要调用其父节点并行节点（NodeType.PARALLEL_NODE) 继续查找 // 条件节点 (NodeType.CONDITION_NODE) 比较特殊。需要调用其父节点并行节点（NodeType.PARALLEL_NODE) 继续查找
emits('findParnetNode', nodeList, nodeType); emits('findParnetNode', nodeList, nodeType);
}; }
</script> </script>
<template> <template>
<div class="branch-node-wrapper"> <div class="branch-node-wrapper">

11
apps/web-antd/src/components/simple-process-design/components/nodes/router-node.vue
View File

@@ -20,10 +20,12 @@ const props = defineProps({
required: true, required: true,
}, },
}); });
// 定义事件，更新父组件 // 定义事件，更新父组件
const emits = defineEmits<{ const emits = defineEmits<{
'update:flowNode': [node: SimpleFlowNode | undefined]; 'update:flowNode': [node: SimpleFlowNode | undefined];
}>(); }>();
// 是否只读 // 是否只读
const readonly = inject<Boolean>('readonly'); const readonly = inject<Boolean>('readonly');
// 监控节点的变化 // 监控节点的变化
@@ -36,17 +38,17 @@ const { showInput, blurEvent, clickTitle } = useNodeName2(
const nodeSetting = ref(); const nodeSetting = ref();
// 打开节点配置 // 打开节点配置
const openNodeConfig = () => { function openNodeConfig() {
if (readonly) { if (readonly) {
return; return;
} }
nodeSetting.value.openDrawer(currentNode.value); nodeSetting.value.openDrawer(currentNode.value);
}; }
// 删除节点。更新当前节点为孩子节点 // 删除节点。更新当前节点为孩子节点
const deleteNode = () => { function deleteNode() {
emits('update:flowNode', currentNode.value.childNode); emits('update:flowNode', currentNode.value.childNode);
}; }
</script> </script>
<template> <template>
<div class="node-wrapper"> <div class="node-wrapper">
@@ -112,4 +114,3 @@ const deleteNode = () => {
/> />
</div> </div>
</template> </template>
<style lang="scss" scoped></style>

12
apps/web-antd/src/components/simple-process-design/components/nodes/start-user-node.vue
View File

@@ -15,17 +15,20 @@ import StartUserNodeConfig from '../nodes-config/start-user-node-config.vue';
import NodeHandler from './node-handler.vue'; import NodeHandler from './node-handler.vue';
defineOptions({ name: 'StartUserNode' }); defineOptions({ name: 'StartUserNode' });
const props = defineProps({ const props = defineProps({
flowNode: { flowNode: {
type: Object as () => SimpleFlowNode, type: Object as () => SimpleFlowNode,
default: () => null, default: () => null,
}, },
}); });
// 定义事件，更新父组件。 // 定义事件，更新父组件。
// eslint-disable-next-line unused-imports/no-unused-vars, no-unused-vars // const emits = defineEmits<{
const emits = defineEmits<{ defineEmits<{
'update:modelValue': [node: SimpleFlowNode | undefined]; 'update:modelValue': [node: SimpleFlowNode | undefined];
}>(); }>();
const readonly = inject<Boolean>('readonly'); // 是否只读 const readonly = inject<Boolean>('readonly'); // 是否只读
const tasks = inject<Ref<any[]>>('tasks', ref([])); const tasks = inject<Ref<any[]>>('tasks', ref([]));
// 监控节点变化 // 监控节点变化
@@ -41,7 +44,7 @@ const nodeSetting = ref();
// 任务的弹窗显示，用于只读模式 // 任务的弹窗显示，用于只读模式
const selectTasks = ref<any[] | undefined>([]); // 选中的任务数组 const selectTasks = ref<any[] | undefined>([]); // 选中的任务数组
const nodeClick = () => { function nodeClick() {
if (readonly) { if (readonly) {
// 只读模式，弹窗显示任务信息 // 只读模式，弹窗显示任务信息
if (tasks && tasks.value) { if (tasks && tasks.value) {
@@ -58,7 +61,7 @@ const nodeClick = () => {
); );
nodeSetting.value.showStartUserNodeConfig(currentNode.value); nodeSetting.value.showStartUserNodeConfig(currentNode.value);
} }
}; }
</script> </script>
<template> <template>
<div class="node-wrapper"> <div class="node-wrapper">
@@ -116,4 +119,3 @@ const nodeClick = () => {
/> />
<!-- 审批记录 TODO --> <!-- 审批记录 TODO -->
</template> </template>
<style lang="scss" scoped></style>

11
apps/web-antd/src/components/simple-process-design/components/nodes/trigger-node.vue
View File

@@ -22,10 +22,12 @@ const props = defineProps({
required: true, required: true,
}, },
}); });
// 定义事件，更新父组件 // 定义事件，更新父组件
const emits = defineEmits<{ const emits = defineEmits<{
'update:flowNode': [node: SimpleFlowNode | undefined]; 'update:flowNode': [node: SimpleFlowNode | undefined];
}>(); }>();
// 是否只读 // 是否只读
const readonly = inject<Boolean>('readonly'); const readonly = inject<Boolean>('readonly');
// 监控节点的变化 // 监控节点的变化
@@ -38,17 +40,17 @@ const { showInput, blurEvent, clickTitle } = useNodeName2(
const nodeSetting = ref(); const nodeSetting = ref();
// 打开节点配置 // 打开节点配置
const openNodeConfig = () => { function openNodeConfig() {
if (readonly) { if (readonly) {
return; return;
} }
nodeSetting.value.showTriggerNodeConfig(currentNode.value); nodeSetting.value.showTriggerNodeConfig(currentNode.value);
}; }
// 删除节点。更新当前节点为孩子节点 // 删除节点。更新当前节点为孩子节点
const deleteNode = () => { function deleteNode() {
emits('update:flowNode', currentNode.value.childNode); emits('update:flowNode', currentNode.value.childNode);
}; }
</script> </script>
<template> <template>
<div class="node-wrapper"> <div class="node-wrapper">
@@ -115,4 +117,3 @@ const deleteNode = () => {
/> />
</div> </div>
</template> </template>
<style lang="scss" scoped></style>

16
apps/web-antd/src/components/simple-process-design/components/nodes/user-task-node.vue
View File

@@ -22,6 +22,7 @@ const props = defineProps({
required: true, required: true,
}, },
}); });
const emits = defineEmits<{ const emits = defineEmits<{
findParentNode: [nodeList: SimpleFlowNode[], nodeType: NodeType]; findParentNode: [nodeList: SimpleFlowNode[], nodeType: NodeType];
'update:flowNode': [node: SimpleFlowNode | undefined]; 'update:flowNode': [node: SimpleFlowNode | undefined];
@@ -39,7 +40,7 @@ const { showInput, blurEvent, clickTitle } = useNodeName2(
); );
const nodeSetting = ref(); const nodeSetting = ref();
const nodeClick = () => { function nodeClick() {
if (readonly) { if (readonly) {
if (tasks && tasks.value) { if (tasks && tasks.value) {
// 只读模式，弹窗显示任务信息 TODO 待实现 // 只读模式，弹窗显示任务信息 TODO 待实现
@@ -49,18 +50,18 @@ const nodeClick = () => {
// 编辑模式，打开节点配置、把当前节点传递给配置组件 // 编辑模式，打开节点配置、把当前节点传递给配置组件
nodeSetting.value.showUserTaskNodeConfig(currentNode.value); nodeSetting.value.showUserTaskNodeConfig(currentNode.value);
} }
}; }
const deleteNode = () => { function deleteNode() {
emits('update:flowNode', currentNode.value.childNode); emits('update:flowNode', currentNode.value.childNode);
}; }
// 查找可以驳回用户节点 // 查找可以驳回用户节点
const findReturnTaskNodes = ( function findReturnTaskNodes(
matchNodeList: SimpleFlowNode[], // 匹配的节点 matchNodeList: SimpleFlowNode[], // 匹配的节点
) => { ) {
// 从父节点查找 // 从父节点查找
emits('findParentNode', matchNodeList, NodeType.USER_TASK_NODE); emits('findParentNode', matchNodeList, NodeType.USER_TASK_NODE);
}; }
// const selectTasks = ref<any[] | undefined>([]); // 选中的任务数组 // const selectTasks = ref<any[] | undefined>([]); // 选中的任务数组
</script> </script>
@@ -135,4 +136,3 @@ const findReturnTaskNodes = (
/> />
<!-- TODO 审批记录 --> <!-- TODO 审批记录 -->
</template> </template>
<style lang="scss" scoped></style>

9
apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
View File

@@ -15,6 +15,7 @@ import TriggerNode from './nodes/trigger-node.vue';
import UserTaskNode from './nodes/user-task-node.vue'; import UserTaskNode from './nodes/user-task-node.vue';
defineOptions({ name: 'ProcessNodeTree' }); defineOptions({ name: 'ProcessNodeTree' });
const props = defineProps({ const props = defineProps({
parentNode: { parentNode: {
type: Object as () => SimpleFlowNode, type: Object as () => SimpleFlowNode,
@@ -25,6 +26,7 @@ const props = defineProps({
default: () => null, default: () => null,
}, },
}); });
const emits = defineEmits<{ const emits = defineEmits<{
recursiveFindParentNode: [ recursiveFindParentNode: [
nodeList: SimpleFlowNode[], nodeList: SimpleFlowNode[],
@@ -47,11 +49,11 @@ const findParentNode = (nodeList: SimpleFlowNode[], nodeType: number) => {
}; };
// 递归从父节点中查询匹配的节点 // 递归从父节点中查询匹配的节点
const recursiveFindParentNode = ( function recursiveFindParentNode(
nodeList: SimpleFlowNode[], nodeList: SimpleFlowNode[],
findNode: SimpleFlowNode, findNode: SimpleFlowNode,
nodeType: number, nodeType: number,
) => { ) {
if (!findNode) { if (!findNode) {
return; return;
} }
@@ -64,7 +66,7 @@ const recursiveFindParentNode = (
nodeList.push(findNode); nodeList.push(findNode);
} }
emits('recursiveFindParentNode', nodeList, props.parentNode, nodeType); emits('recursiveFindParentNode', nodeList, props.parentNode, nodeType);
}; }
</script> </script>
<template> <template>
<!-- 发起人节点 --> <!-- 发起人节点 -->
@@ -148,4 +150,3 @@ const recursiveFindParentNode = (
:flow-node="currentNode" :flow-node="currentNode"
/> />
</template> </template>
<style lang="scss" scoped></style>

32
apps/web-antd/src/components/simple-process-design/components/simple-process-designer.vue
View File

@@ -116,7 +116,7 @@ const errorDialogVisible = ref(false);
const errorNodes: SimpleFlowNode[] = []; const errorNodes: SimpleFlowNode[] = [];
// 添加更新模型的方法 // 添加更新模型的方法
const updateModel = () => { function updateModel() {
if (!processNodeTree.value) { if (!processNodeTree.value) {
processNodeTree.value = { processNodeTree.value = {
name: '发起人', name: '发起人',
@@ -131,11 +131,11 @@ const updateModel = () => {
// 初始化时也触发一次保存 // 初始化时也触发一次保存
saveSimpleFlowModel(processNodeTree.value); saveSimpleFlowModel(processNodeTree.value);
} }
}; }
const saveSimpleFlowModel = async ( async function saveSimpleFlowModel(
simpleModelNode: SimpleFlowNode | undefined, simpleModelNode: SimpleFlowNode | undefined,
) => { ) {
if (!simpleModelNode) { if (!simpleModelNode) {
return; return;
} }
@@ -146,16 +146,15 @@ const saveSimpleFlowModel = async (
} catch (error) { } catch (error) {
console.error('保存失败:', error); console.error('保存失败:', error);
} }
}; }
/** /**
* 校验节点设置。 暂时以 showText 为空 未节点错误配置 * 校验节点设置。 暂时以 showText 为空 未节点错误配置
*/ */
// eslint-disable-next-line unused-imports/no-unused-vars, no-unused-vars function validateNode(
const validateNode = (
node: SimpleFlowNode | undefined, node: SimpleFlowNode | undefined,
errorNodes: SimpleFlowNode[], errorNodes: SimpleFlowNode[],
) => { ) {
if (node) { if (node) {
const { type, showText, conditionNodes } = node; const { type, showText, conditionNodes } = node;
if (type === NodeType.END_EVENT_NODE) { if (type === NodeType.END_EVENT_NODE) {
@@ -163,7 +162,7 @@ const validateNode = (
} }
if (type === NodeType.START_USER_NODE) { if (type === NodeType.START_USER_NODE) {
// 发起人节点暂时不用校验，直接校验孩子节点 // 发起人节点暂时不用校验，直接校验孩子节点
validateNode(node.childNode, errorNodes); useValidateNode(node.childNode, errorNodes);
} }
if ( if (
@@ -174,7 +173,7 @@ const validateNode = (
if (!showText) { if (!showText) {
errorNodes.push(node); errorNodes.push(node);
} }
validateNode(node.childNode, errorNodes); useValidateNode(node.childNode, errorNodes);
} }
if ( if (
@@ -185,13 +184,20 @@ const validateNode = (
// 分支节点 // 分支节点
// 1. 先校验各个分支 // 1. 先校验各个分支
conditionNodes?.forEach((item) => { conditionNodes?.forEach((item) => {
validateNode(item, errorNodes); useValidateNode(item, errorNodes);
}); });
// 2. 校验孩子节点 // 2. 校验孩子节点
validateNode(node.childNode, errorNodes); useValidateNode(node.childNode, errorNodes);
} }
} }
}; }
function useValidateNode(
node: SimpleFlowNode | undefined,
errorNodes: SimpleFlowNode[],
) {
validateNode(node, errorNodes);
}
onMounted(async () => { onMounted(async () => {
try { try {

59
apps/web-antd/src/components/simple-process-design/components/simple-process-model.vue
View File

@@ -49,22 +49,22 @@ const currentY = ref(0);
const initialX = ref(0); const initialX = ref(0);
const initialY = ref(0); const initialY = ref(0);
const setGrabCursor = () => { function setGrabCursor() {
document.body.style.cursor = 'grab'; document.body.style.cursor = 'grab';
}; }
const resetCursor = () => { function resetCursor() {
document.body.style.cursor = 'default'; document.body.style.cursor = 'default';
}; }
const startDrag = (e: MouseEvent) => { function startDrag(e: MouseEvent) {
isDragging.value = true; isDragging.value = true;
startX.value = e.clientX - currentX.value; startX.value = e.clientX - currentX.value;
startY.value = e.clientY - currentY.value; startY.value = e.clientY - currentY.value;
setGrabCursor(); // 设置小手光标 setGrabCursor(); // 设置小手光标
}; }
const onDrag = (e: MouseEvent) => { function onDrag(e: MouseEvent) {
if (!isDragging.value) return; if (!isDragging.value) return;
e.preventDefault(); // 禁用文本选择 e.preventDefault(); // 禁用文本选择
@@ -73,44 +73,44 @@ const onDrag = (e: MouseEvent) => {
currentX.value = e.clientX - startX.value; currentX.value = e.clientX - startX.value;
currentY.value = e.clientY - startY.value; currentY.value = e.clientY - startY.value;
}); });
}; }
const stopDrag = () => { function stopDrag() {
isDragging.value = false; isDragging.value = false;
resetCursor(); // 重置光标 resetCursor(); // 重置光标
}; }
const zoomIn = () => { function zoomIn() {
if (scaleValue.value === MAX_SCALE_VALUE) { if (scaleValue.value === MAX_SCALE_VALUE) {
return; return;
} }
scaleValue.value += 10; scaleValue.value += 10;
}; }
const zoomOut = () => { function zoomOut() {
if (scaleValue.value === MIN_SCALE_VALUE) { if (scaleValue.value === MIN_SCALE_VALUE) {
return; return;
} }
scaleValue.value -= 10; scaleValue.value -= 10;
}; }
const processReZoom = () => { function processReZoom() {
scaleValue.value = 100; scaleValue.value = 100;
}; }
const resetPosition = () => { function resetPosition() {
currentX.value = initialX.value; currentX.value = initialX.value;
currentY.value = initialY.value; currentY.value = initialY.value;
}; }
/** 校验节点设置 */ /** 校验节点设置 */
const errorDialogVisible = ref(false); const errorDialogVisible = ref(false);
let errorNodes: SimpleFlowNode[] = []; let errorNodes: SimpleFlowNode[] = [];
const validateNode = ( function validateNode(
node: SimpleFlowNode | undefined, node: SimpleFlowNode | undefined,
errorNodes: SimpleFlowNode[], errorNodes: SimpleFlowNode[],
) => { ) {
if (node) { if (node) {
const { type, showText, conditionNodes } = node; const { type, showText, conditionNodes } = node;
if (type === NodeType.END_EVENT_NODE) { if (type === NodeType.END_EVENT_NODE) {
@@ -146,10 +146,10 @@ const validateNode = (
validateNode(node.childNode, errorNodes); validateNode(node.childNode, errorNodes);
} }
} }
}; }
/** 获取当前流程数据 */ /** 获取当前流程数据 */
const getCurrentFlowData = async () => { async function getCurrentFlowData() {
try { try {
errorNodes = []; errorNodes = [];
validateNode(processNodeTree.value, errorNodes); validateNode(processNodeTree.value, errorNodes);
@@ -162,26 +162,26 @@ const getCurrentFlowData = async () => {
console.error('获取流程数据失败:', error); console.error('获取流程数据失败:', error);
return undefined; return undefined;
} }
}; }
defineExpose({ defineExpose({
getCurrentFlowData, getCurrentFlowData,
}); });
/** 导出 JSON */ /** 导出 JSON */
const exportJson = () => { function exportJson() {
downloadFileFromBlob({ downloadFileFromBlob({
fileName: 'model.json', fileName: 'model.json',
source: new Blob([JSON.stringify(processNodeTree.value)]), source: new Blob([JSON.stringify(processNodeTree.value)]),
}); });
}; }
/** 导入 JSON */ /** 导入 JSON */
const refFile = ref(); const refFile = ref();
const importJson = () => { function importJson() {
refFile.value.click(); refFile.value.click();
}; }
const importLocalFile = () => { function importLocalFile() {
const file = refFile.value.files[0]; const file = refFile.value.files[0];
file.text().then((result: any) => { file.text().then((result: any) => {
if (isString(result)) { if (isString(result)) {
@@ -189,7 +189,7 @@ const importLocalFile = () => {
emits('save', processNodeTree.value); emits('save', processNodeTree.value);
} }
}); });
}; }
// 在组件初始化时记录初始位置 // 在组件初始化时记录初始位置
onMounted(() => { onMounted(() => {
@@ -267,4 +267,3 @@ onMounted(() => {
</template> </template>
</Modal> </Modal>
</template> </template>
<style lang="scss" scoped></style>

88
apps/web-antd/src/components/simple-process-design/helpers.ts
View File

@@ -43,7 +43,7 @@ export function useWatchNode(props: {
} }
// 解析 formCreate 所有表单字段, 并返回 // 解析 formCreate 所有表单字段, 并返回
const parseFormCreateFields = (formFields?: string[]) => { function parseFormCreateFields(formFields?: string[]) {
const result: Array<Record<string, any>> = []; const result: Array<Record<string, any>> = [];
if (formFields) { if (formFields) {
formFields.forEach((fieldStr: string) => { formFields.forEach((fieldStr: string) => {
@@ -51,7 +51,7 @@ const parseFormCreateFields = (formFields?: string[]) => {
}); });
} }
return result; return result;
}; }
/** /**
* 解析表单组件的 field, title 等字段（递归，如果组件包含子组件） * 解析表单组件的 field, title 等字段（递归，如果组件包含子组件）
@@ -109,20 +109,20 @@ export function useFormFieldsPermission(
const formFields = inject<Ref<string[]>>('formFields', ref([])); // 流程表单字段 const formFields = inject<Ref<string[]>>('formFields', ref([])); // 流程表单字段
const getNodeConfigFormFields = ( function getNodeConfigFormFields(
nodeFormFields?: Array<Record<string, string>>, nodeFormFields?: Array<Record<string, string>>,
) => { ) {
nodeFormFields = toRaw(nodeFormFields); nodeFormFields = toRaw(nodeFormFields);
fieldsPermissionConfig.value = fieldsPermissionConfig.value =
!nodeFormFields || nodeFormFields.length === 0 !nodeFormFields || nodeFormFields.length === 0
? getDefaultFieldsPermission(unref(formFields)) ? getDefaultFieldsPermission(unref(formFields))
: mergeFieldsPermission(nodeFormFields, unref(formFields)); : mergeFieldsPermission(nodeFormFields, unref(formFields));
}; }
// 合并已经设置的表单字段权限，当前流程表单字段 (可能新增，或删除了字段) // 合并已经设置的表单字段权限，当前流程表单字段 (可能新增，或删除了字段)
const mergeFieldsPermission = ( function mergeFieldsPermission(
formFieldsPermisson: Array<Record<string, string>>, formFieldsPermisson: Array<Record<string, string>>,
formFields?: string[], formFields?: string[],
) => { ) {
let mergedFieldsPermission: Array<Record<string, any>> = []; let mergedFieldsPermission: Array<Record<string, any>> = [];
if (formFields) { if (formFields) {
mergedFieldsPermission = parseFormCreateFields(formFields).map((item) => { mergedFieldsPermission = parseFormCreateFields(formFields).map((item) => {
@@ -137,10 +137,10 @@ export function useFormFieldsPermission(
}); });
} }
return mergedFieldsPermission; return mergedFieldsPermission;
}; }
// 默认的表单权限： 获取表单的所有字段，设置字段默认权限为只读 // 默认的表单权限： 获取表单的所有字段，设置字段默认权限为只读
const getDefaultFieldsPermission = (formFields?: string[]) => { function getDefaultFieldsPermission(formFields?: string[]) {
let defaultFieldsPermission: Array<Record<string, any>> = []; let defaultFieldsPermission: Array<Record<string, any>> = [];
if (formFields) { if (formFields) {
defaultFieldsPermission = parseFormCreateFields(formFields).map( defaultFieldsPermission = parseFormCreateFields(formFields).map(
@@ -154,7 +154,7 @@ export function useFormFieldsPermission(
); );
} }
return defaultFieldsPermission; return defaultFieldsPermission;
}; }
// 获取表单的所有字段，作为下拉框选项 // 获取表单的所有字段，作为下拉框选项
const formFieldOptions = parseFormCreateFields(unref(formFields)); const formFieldOptions = parseFormCreateFields(unref(formFields));
@@ -268,7 +268,6 @@ export function useNodeForm(nodeType: NodeType) {
const formFields = inject<Ref<string[]>>('formFields', ref([])); // 流程表单字段 const formFields = inject<Ref<string[]>>('formFields', ref([])); // 流程表单字段
const configForm = ref<any | CopyTaskFormType | UserTaskFormType>(); const configForm = ref<any | CopyTaskFormType | UserTaskFormType>();
// eslint-disable-next-line unicorn/prefer-ternary
if ( if (
nodeType === NodeType.USER_TASK_NODE || nodeType === NodeType.USER_TASK_NODE ||
nodeType === NodeType.TRANSACTOR_NODE nodeType === NodeType.TRANSACTOR_NODE
@@ -286,13 +285,12 @@ export function useNodeForm(nodeType: NodeType) {
maxRemindCount: 1, // 默认 提醒 1次 maxRemindCount: 1, // 默认 提醒 1次
buttonsSetting: [], buttonsSetting: [],
}; };
} else {
configForm.value = {
candidateStrategy: CandidateStrategy.USER,
};
} }
configForm.value = {
candidateStrategy: CandidateStrategy.USER,
};
const getShowText = (): string => { function getShowText(): string {
let showText = ''; let showText = '';
// 指定成员 // 指定成员
if ( if (
@@ -428,12 +426,12 @@ export function useNodeForm(nodeType: NodeType) {
showText = `流程表达式：${configForm.value.expression}`; showText = `流程表达式：${configForm.value.expression}`;
} }
return showText; return showText;
}; }
/** /**
* 处理候选人参数的赋值 * 处理候选人参数的赋值
*/ */
const handleCandidateParam = () => { function handleCandidateParam() {
let candidateParam: string | undefined; let candidateParam: string | undefined;
if (!configForm.value) { if (!configForm.value) {
return candidateParam; return candidateParam;
@@ -495,14 +493,14 @@ export function useNodeForm(nodeType: NodeType) {
} }
} }
return candidateParam; return candidateParam;
}; }
/** /**
* 解析候选人参数 * 解析候选人参数
*/ */
const parseCandidateParam = ( function parseCandidateParam(
candidateStrategy: CandidateStrategy, candidateStrategy: CandidateStrategy,
candidateParam: string | undefined, candidateParam: string | undefined,
) => { ) {
if (!configForm.value || !candidateParam) { if (!configForm.value || !candidateParam) {
return; return;
} }
@@ -578,7 +576,7 @@ export function useNodeForm(nodeType: NodeType) {
break; break;
} }
} }
}; }
return { return {
configForm, configForm,
roleOptions, roleOptions,
@@ -599,13 +597,13 @@ export function useDrawer() {
// 抽屉配置是否可见 // 抽屉配置是否可见
const settingVisible = ref(false); const settingVisible = ref(false);
// 关闭配置抽屉 // 关闭配置抽屉
const closeDrawer = () => { function closeDrawer() {
settingVisible.value = false; settingVisible.value = false;
}; }
// 打开配置抽屉 // 打开配置抽屉
const openDrawer = () => { function openDrawer() {
settingVisible.value = true; settingVisible.value = true;
}; }
return { return {
settingVisible, settingVisible,
closeDrawer, closeDrawer,
@@ -622,15 +620,15 @@ export function useNodeName(nodeType: NodeType) {
// 节点名称输入框 // 节点名称输入框
const showInput = ref(false); const showInput = ref(false);
// 点击节点名称编辑图标 // 点击节点名称编辑图标
const clickIcon = () => { function clickIcon() {
showInput.value = true; showInput.value = true;
}; }
// 节点名称输入框失去焦点 // 节点名称输入框失去焦点
const blurEvent = () => { function blurEvent() {
showInput.value = false; showInput.value = false;
nodeName.value = nodeName.value =
nodeName.value || (NODE_DEFAULT_NAME.get(nodeType) as string); nodeName.value || (NODE_DEFAULT_NAME.get(nodeType) as string);
}; }
return { return {
nodeName, nodeName,
showInput, showInput,
@@ -643,15 +641,15 @@ export function useNodeName2(node: Ref<SimpleFlowNode>, nodeType: NodeType) {
// 显示节点名称输入框 // 显示节点名称输入框
const showInput = ref(false); const showInput = ref(false);
// 节点名称输入框失去焦点 // 节点名称输入框失去焦点
const blurEvent = () => { function blurEvent() {
showInput.value = false; showInput.value = false;
node.value.name = node.value.name =
node.value.name || (NODE_DEFAULT_NAME.get(nodeType) as string); node.value.name || (NODE_DEFAULT_NAME.get(nodeType) as string);
}; }
// 点击节点标题进行输入 // 点击节点标题进行输入
const clickTitle = () => { function clickTitle() {
showInput.value = true; showInput.value = true;
}; }
return { return {
showInput, showInput,
clickTitle, clickTitle,
@@ -722,40 +720,40 @@ export function getConditionShowText(
} }
/** 获取表单字段名称*/ /** 获取表单字段名称*/
const getFormFieldTitle = ( function getFormFieldTitle(
fieldOptions: Array<Record<string, any>>, fieldOptions: Array<Record<string, any>>,
field: string, field: string,
) => { ) {
const item = fieldOptions.find((item) => item.field === field); const item = fieldOptions.find((item) => item.field === field);
return item?.title; return item?.title;
}; }
/** 获取操作符名称 */ /** 获取操作符名称 */
const getOpName = (opCode: string): string | undefined => { function getOpName(opCode: string): string | undefined {
const opName = COMPARISON_OPERATORS.find( const opName = COMPARISON_OPERATORS.find(
(item: any) => item.value === opCode, (item: any) => item.value === opCode,
); );
return opName?.label; return opName?.label;
}; }
/** 获取条件节点默认的名称 */ /** 获取条件节点默认的名称 */
export const getDefaultConditionNodeName = ( export function getDefaultConditionNodeName(
index: number, index: number,
defaultFlow: boolean | undefined, defaultFlow: boolean | undefined,
): string => { ): string {
if (defaultFlow) { if (defaultFlow) {
return '其它情况'; return '其它情况';
} }
return `条件${index + 1}`; return `条件${index + 1}`;
}; }
/** 获取包容分支条件节点默认的名称 */ /** 获取包容分支条件节点默认的名称 */
export const getDefaultInclusiveConditionNodeName = ( export function getDefaultInclusiveConditionNodeName(
index: number, index: number,
defaultFlow: boolean | undefined, defaultFlow: boolean | undefined,
): string => { ): string {
if (defaultFlow) { if (defaultFlow) {
return '其它情况'; return '其它情况';
} }
return `包容条件${index + 1}`; return `包容条件${index + 1}`;
}; }

1
apps/web-antd/src/views/bpm/model/form/modules/simple-model-design.vue
View File

@@ -37,4 +37,3 @@ const handleSuccess = (data?: any) => {
/> />
</ContentWrap> </ContentWrap>
</template> </template>
<style lang="scss" scoped></style>

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

@@ -1389,4 +1389,3 @@ defineExpose({ loadTodoTask });
<!-- 签名弹窗 --> <!-- 签名弹窗 -->
<Signature ref="signRef" @success="handleSignFinish" /> <Signature ref="signRef" @success="handleSignFinish" />
</template> </template>
<style lang="scss" scoped></style>