iailab-plat-ui-vue3.git

dengzedong

5 天以前 f9b459a3fefd5fab0ee8e19268adb9d9eadab2a7

提交 \| 用户 \| 时间
3e359e	1	<template>
H	2	<div class="node-handler-wrapper">
	3	<div class="node-handler">
	4	<el-popover
	5	trigger="hover"
	6	v-model:visible="popoverShow"
	7	placement="right-start"
	8	width="auto"
	9	v-if="!readonly"
	10	>
	11	<div class="handler-item-wrapper">
	12	<div class="handler-item" @click="addNode(NodeType.USER_TASK_NODE)">
	13	<div class="approve handler-item-icon">
	14	<span class="iconfont icon-approve icon-size"></span>
	15	</div>
	16	<div class="handler-item-text">审批人</div>
	17	</div>
	18	<div class="handler-item" @click="addNode(NodeType.COPY_TASK_NODE)">
	19	<div class="handler-item-icon copy">
	20	<span class="iconfont icon-size icon-copy"></span>
	21	</div>
	22	<div class="handler-item-text">抄送</div>
	23	</div>
	24	<div class="handler-item" @click="addNode(NodeType.CONDITION_BRANCH_NODE)">
	25	<div class="handler-item-icon condition">
	26	<span class="iconfont icon-size icon-exclusive"></span>
	27	</div>
	28	<div class="handler-item-text">条件分支</div>
	29	</div>
	30	<div class="handler-item" @click="addNode(NodeType.PARALLEL_BRANCH_NODE)">
	31	<div class="handler-item-icon parallel">
	32	<span class="iconfont icon-size icon-parallel"></span>
	33	</div>
	34	<div class="handler-item-text">并行分支</div>
	35	</div>
	36	<div class="handler-item" @click="addNode(NodeType.INCLUSIVE_BRANCH_NODE)">
	37	<div class="handler-item-icon inclusive">
	38	<span class="iconfont icon-size icon-inclusive"></span>
	39	</div>
	40	<div class="handler-item-text">包容分支</div>
	41	</div>
	42	</div>
	43	<template #reference>
	44	<div class="add-icon"><Icon icon="ep:plus" /></div>
	45	</template>
	46	</el-popover>
	47	</div>
	48	</div>
	49	</template>
	50
	51	<script setup lang="ts">
	52	import {
	53	ApproveMethodType,
	54	AssignEmptyHandlerType,
	55	AssignStartUserHandlerType,
	56	NODE_DEFAULT_NAME,
	57	NodeType,
	58	RejectHandlerType,
	59	SimpleFlowNode
	60	} from './consts'
	61	import { generateUUID } from '@/utils'
	62
	63	defineOptions({
	64	name: 'NodeHandler'
	65	})
	66
	67	const message = useMessage() // 消息弹窗
	68
	69	const popoverShow = ref(false)
	70	const props = defineProps({
	71	childNode: {
	72	type: Object as () => SimpleFlowNode,
	73	default: null
	74	},
	75	currentNode: {
	76	type: Object as () => SimpleFlowNode,
	77	required: true
	78	}
	79	})
	80	const emits = defineEmits(['update:childNode'])
	81
	82	const readonly = inject<Boolean>('readonly') // 是否只读
	83
	84	const addNode = (type: number) => {
	85	// 校验：条件分支、包容分支后面，不允许直接添加并行分支
	86	if (
	87	type === NodeType.PARALLEL_BRANCH_NODE &&
	88	[NodeType.CONDITION_BRANCH_NODE, NodeType.INCLUSIVE_BRANCH_NODE].includes(
	89	props.currentNode?.type
	90	)
	91	) {
	92	message.error('条件分支、包容分支后面，不允许直接添加并行分支')
	93	return
	94	}
	95
	96	popoverShow.value = false
	97	if (type === NodeType.USER_TASK_NODE) {
	98	const id = 'Activity_' + generateUUID()
	99	const data: SimpleFlowNode = {
	100	id: id,
	101	name: NODE_DEFAULT_NAME.get(NodeType.USER_TASK_NODE) as string,
	102	showText: '',
	103	type: NodeType.USER_TASK_NODE,
	104	approveMethod: ApproveMethodType.SEQUENTIAL_APPROVE,
	105	// 超时处理
	106	rejectHandler: {
	107	type: RejectHandlerType.FINISH_PROCESS
	108	},
	109	timeoutHandler: {
	110	enable: false
	111	},
	112	assignEmptyHandler: {
	113	type: AssignEmptyHandlerType.APPROVE
	114	},
	115	assignStartUserHandlerType: AssignStartUserHandlerType.START_USER_AUDIT,
	116	childNode: props.childNode
	117	}
	118	emits('update:childNode', data)
	119	}
	120	if (type === NodeType.COPY_TASK_NODE) {
	121	const data: SimpleFlowNode = {
	122	id: 'Activity_' + generateUUID(),
	123	name: NODE_DEFAULT_NAME.get(NodeType.COPY_TASK_NODE) as string,
	124	showText: '',
	125	type: NodeType.COPY_TASK_NODE,
	126	childNode: props.childNode
	127	}
	128	emits('update:childNode', data)
	129	}
	130	if (type === NodeType.CONDITION_BRANCH_NODE) {
	131	const data: SimpleFlowNode = {
	132	name: '条件分支',
	133	type: NodeType.CONDITION_BRANCH_NODE,
	134	id: 'GateWay_' + generateUUID(),
	135	childNode: props.childNode,
	136	conditionNodes: [
	137	{
	138	id: 'Flow_' + generateUUID(),
	139	name: '条件1',
	140	showText: '',
	141	type: NodeType.CONDITION_NODE,
	142	childNode: undefined,
	143	conditionType: 1,
	144	defaultFlow: false
	145	},
	146	{
	147	id: 'Flow_' + generateUUID(),
	148	name: '其它情况',
	149	showText: '未满足其它条件时，将进入此分支',
	150	type: NodeType.CONDITION_NODE,
	151	childNode: undefined,
	152	conditionType: undefined,
	153	defaultFlow: true
	154	}
	155	]
	156	}
	157	emits('update:childNode', data)
	158	}
	159	if (type === NodeType.PARALLEL_BRANCH_NODE) {
	160	const data: SimpleFlowNode = {
	161	name: '并行分支',
	162	type: NodeType.PARALLEL_BRANCH_NODE,
	163	id: 'GateWay_' + generateUUID(),
	164	childNode: props.childNode,
	165	conditionNodes: [
	166	{
	167	id: 'Flow_' + generateUUID(),
	168	name: '并行1',
	169	showText: '无需配置条件同时执行',
	170	type: NodeType.CONDITION_NODE,
	171	childNode: undefined
	172	},
	173	{
	174	id: 'Flow_' + generateUUID(),
	175	name: '并行2',
	176	showText: '无需配置条件同时执行',
	177	type: NodeType.CONDITION_NODE,
	178	childNode: undefined
	179	}
	180	]
	181	}
	182	emits('update:childNode', data)
	183	}
	184	if (type === NodeType.INCLUSIVE_BRANCH_NODE) {
	185	const data: SimpleFlowNode = {
	186	name: '包容分支',
	187	type: NodeType.INCLUSIVE_BRANCH_NODE,
	188	id: 'GateWay_' + generateUUID(),
	189	childNode: props.childNode,
	190	conditionNodes: [
	191	{
	192	id: 'Flow_' + generateUUID(),
	193	name: '包容条件1',
	194	showText: '',
	195	type: NodeType.CONDITION_NODE,
	196	childNode: undefined,
	197	defaultFlow: false
	198	},
	199	{
	200	id: 'Flow_' + generateUUID(),
	201	name: '其它情况',
	202	showText: '未满足其它条件时，将进入此分支',
	203	type: NodeType.CONDITION_NODE,
	204	childNode: undefined,
	205	defaultFlow: true
	206	}
	207	]
	208	}
	209	emits('update:childNode', data)
	210	}
	211	}
	212	</script>
	213
	214	<style lang="scss" scoped></style>