aizuda-web-vue3/src/components/scWorkflow/nodes/addNode.vue

<template>
	<div class="add-node-btn-box">
		<div class="add-node-btn">
			<el-popover placement="right-start" :width="270" trigger="click" :hide-after="0" :show-after="0">
				<template #reference>
					<el-button v-if="!disabled" type="primary" icon="plus" circle></el-button>
				</template>
				<div class="add-node-popover-body">
					<ul>
						<li>
							<el-icon style="color: var(--el-color-warning)" @click="addType(1)"><user-filled /></el-icon>
							<p>审批节点</p>
						</li>
						<li>
							<el-icon style="color: var(--el-color-primary)" @click="addType(2)"><promotion /></el-icon>
							<p>抄送节点</p>
						</li>
						<li>
							<el-icon style="color: var(--el-color-success)" @click="addType(4)"><share /></el-icon>
							<p>条件分支</p>
						</li>
						<li>
							<el-icon style="color: var(--el-color-danger)" @click="addType(6)"><Clock /></el-icon>
							<p>延迟等待</p>
						</li>
						<li>
							<el-icon style="color: #2bb58b" @click="addType(7)"><SetUp /></el-icon>
							<p>触发器</p>
						</li>
						<li>
							<el-icon style="color: #646cff" @click="addType(8)"><share /></el-icon>
							<p>子流程</p>
						</li>
					</ul>
				</div>
			</el-popover>
		</div>
	</div>
</template>

<script>

export default {
	props: {
		modelValue: { type: Object, default: () => {} },
		disabled: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {}
	},
	mounted() {},
	methods: {
		addType(type) {
			let node = {}
			if (type === 1) {
				node = {
					nodeName: '审核人',
					type: 1, //节点类型
					setType: 1, //审核人类型
					nodeAssigneeList: [], //审核人成员 & 角色
					examineLevel: 1, //指定主管层级
					directorLevel: 1, //自定义连续主管审批层级
					selectMode: 1, //发起人自选类型
					termAuto: false, //审批期限超时自动审批
					remind: false, // 审批提醒
					term: 0, //审批期限
					termMode: 1, //审批期限超时后执行类型
					examineMode: 1, //多人审批时审批方式
					approveSelf: 0, //审批人与提交人为同一人时
					directorMode: 0, //连续主管审批方式
					childNode: this.modelValue,
					typeOfApprover: '1', // 审批类型 1:人工审批 2:自动通过 3:自动拒绝
					actionUrl: [] // 子表单, 到时候缓存后台需要的 'id:name'格式
				}
			} else if (type === 2) {
				node = {
					nodeName: '抄送人',
					type: 2,
					allowSelection: true,
					nodeAssigneeList: [],
					childNode: this.modelValue
				}
			} else if (type === 4) {
				node = {
					nodeName: '条件路由',
					type: 4,
					conditionNodes: [
						{
							nodeName: '条件1',
							type: 3,
							priorityLevel: 1,
							conditionMode: 1,
							conditionList: []
						},
						{
							nodeName: '条件2',
							type: 3,
							priorityLevel: 2,
							conditionMode: 1,
							conditionList: []
						}
					],
					childNode: this.modelValue
				}
			} else if (type === 6) {
				node = {
					nodeName: '延时处理',
					type: 6,
					delayType: '1', // 延时类型
					// 一小时后触发 {"time": "1:h"} 单位【 d 天 h 时 m 分 】 发起后一小时三十分后触发 {"time": "01:30:00"}
					extendConfig: {
						time: '1:m'
					},
					childNode: this.modelValue
				}
			} else if (type === 7) {
				node = {
					nodeName: '触发器',
					type: 7,
					delayType: '1', // 延时类型
					triggerType: '1', // 触发器类型： 立即执行('1') 延时执行('2')
					// 一小时后触发 {"time": "1:h"} 单位【 d 天 h 时 m 分 】 发起后一小时三十分后触发 {"time": "01:30:00"}
					extendConfig: {
						time: '', // 立即执行 time不用设置
						args: '',
						trigger: ''
					},
					childNode: this.modelValue
				}
			} else if (type === 8) {
				node = {
					nodeName: '子流程',
					type: 8,
					delayType: '1', // 延时类型
					triggerType: '1', // 触发器类型： 立即执行('1') 延时执行('2')
					// 一小时后触发 {"time": "1:h"} 单位【 d 天 h 时 m 分 】 发起后一小时三十分后触发 {"time": "01:30:00"}
					extendConfig: {
						time: '', // 立即执行 time不用设置
						args: '',
						trigger: ''
					},
					childNode: this.modelValue
				}
			}
			node.nodeKey = 'flk' + Date.now()
			this.$emit('update:modelValue', node)
		}
	}
}
</script>

<style></style>