feat: 延时处理 - 固定时间时分秒回显 30%

src/components/scWorkflow/nodeWrap.vue

@@ -16,7 +16,7 @@
 	</branch>
 
 	<!-- 延时处理 -->
-	<delay-process v-if="nodeConfig.type == 5" v-model="nodeConfig" :disabled="disabled"></delay-process>
+	<delay-process v-if="nodeConfig.type == 6" v-model="nodeConfig" :disabled="disabled"></delay-process>
 
 	<node-wrap v-if="nodeConfig.childNode" v-model="nodeConfig.childNode" :disabled="disabled"></node-wrap>
 </template>

src/components/scWorkflow/nodes/addNode.vue

@@ -20,11 +20,11 @@
 							<p>条件分支</p>
 						</li>
 						<li>
-							<el-icon style="color: var(--el-color-danger)" @click="addType(5)"><Clock /></el-icon>
+							<el-icon style="color: var(--el-color-danger)" @click="addType(6)"><Clock /></el-icon>
 							<p>延迟等待</p>
 						</li>
 						<li>
-							<el-icon style="color: var(--el-color-success)" @click="addType(6)"><SetUp /></el-icon>
+							<el-icon style="color: var(--el-color-success)" @click="addType(7)"><SetUp /></el-icon>
 							<p>触发器</p>
 						</li>
 					</ul>
@@ -98,14 +98,15 @@ export default {
 					],
 					childNode: this.modelValue
 				}
-			} else if (type == 5) {
+			} else if (type == 6) {
 				node = {
 					nodeName: '延时处理',
-					type: 5,
-					delayType: '1',
-					automaticComputed: '', // 自动计算
-					fixedDuration: 0, // 固定时长
-					fixedDurationType: '3' // 固定时长
+					type: 6,
+					delayType: '1', // 延时类型
+					// 一小时后触发 {"time": "1:h"} 单位【 d 天 h 时 m 分 】 发起后一小时三十分后触发 {"time": "01:30:00"}
+					extendConfig: {
+						time: '0:m'
+					}
 				}
 			}
 			this.$emit('update:modelValue', node)

src/components/scWorkflow/nodes/delayProcess.vue

@@ -20,7 +20,7 @@
 			</div>
 			<div class="content" @click="show">
 				<span v-if="toText(nodeConfig)">{{ toText(nodeConfig) }}</span>
-				<span v-else class="placeholder">请选择人员</span>
+				<span v-else class="placeholder">请选择延时处理规则</span>
 			</div>
 		</div>
 		<!-- 节点显示 end -->
@@ -43,25 +43,23 @@
 				<el-main>
 					<el-form label-position="top">
 						<el-form-item label="延时方式">
-							<el-radio-group v-model="delayType">
+							<el-radio-group v-model="form.delayType">
 								<el-radio-button v-for="v of delayProcessSelfOptions" :key="v.value" :label="v.value">{{ v.label }}</el-radio-button>
 							</el-radio-group>
 						</el-form-item>
 
-						<el-form-item v-if="delayType === '1'" label="">
-							<el-input v-model="fixedDuration" style="max-width: 300px" placeholder="" class="input-with-select">
+						<el-form-item v-if="form.delayType === '1'">
+							<el-input v-model="fixedDuration" style="max-width: 300px" type="number" class="input-with-select">
 								<template #append>
-									<el-select v-model="fixedDurationType" style="width: 115px">
-										<el-option label="天" value="1" />
-										<el-option label="小时" value="2" />
-										<el-option label="分钟" value="3" />
+									<el-select v-model="fixedDurationType" style="width: 115px" @change="getLabelValue">
+										<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
 									</el-select>
 								</template> </el-input
 							><span>后进入下一步</span>
 						</el-form-item>
 
-						<el-form-item v-if="delayType === '2'" label="">
-							<el-time-picker v-model="automaticComputed" placeholder="时间点" />
+						<el-form-item v-if="form.delayType === '2'">
+							<el-time-picker v-model="automaticComputed" placeholder="时间点" value-format="HH:mm:ss" />
 							<span>后进入下一步</span>
 						</el-form-item>
 					</el-form>
@@ -93,11 +91,10 @@ export default {
 	},
 	data() {
 		return {
-			// 延时类型
-			delayType: '1',
 			// 固定时长 start
 			fixedDuration: 0,
-			fixedDurationType: '3',
+			fixedDurationType: 'm',
+			selectedLabel: '分钟',
 			// 固定时长 end
 
 			// 自动计算 start
@@ -107,7 +104,12 @@ export default {
 			nodeConfig: {},
 			drawer: false,
 			isEditTitle: false,
-			form: {}
+			form: {},
+			options: [
+				{ label: '天', value: 'd' },
+				{ label: '小时', value: 'h' },
+				{ label: '分钟', value: 'm' }
+			]
 		}
 	},
 	watch: {
@@ -119,10 +121,33 @@ export default {
 		this.nodeConfig = this.modelValue
 	},
 	methods: {
+		getLabelValue() {
+			// 通过遍历options数组，找到与selectedValue相等的那个对象
+			const findItem = this.options.find(item => item.value === this.fixedDurationType)
+			// 如果找到了对应的对象，就把它的label值赋给selectedLabel
+			if (findItem) {
+				this.selectedLabel = findItem.label
+			} else {
+				this.selectedLabel = ''
+			}
+		},
 		show() {
 			if (this.disabled) return
 			this.form = {}
 			this.form = JSON.parse(JSON.stringify(this.nodeConfig))
+			console.log(this.form)
+			// automaticComputed: '', // 自动计算
+			// 	fixedDuration: 0, // 固定时长
+			// 	fixedDurationType: '3' // 固定时长
+			const extendConfig = this.nodeConfig.extendConfig.time.split(':')
+			if (extendConfig.length === 2) {
+				this.fixedDuration = extendConfig[0]
+				this.fixedDurationType = extendConfig[1]
+			}
+
+			if (extendConfig.length === 3) {
+				this.automaticComputed = extendConfig
+			}
 			this.drawer = true
 		},
 		editTitle(refName) {
@@ -138,28 +163,22 @@ export default {
 			this.isEditTitle = false
 		},
 		save() {
+			this.form.extendConfig = {
+				time: this.form.delayType === '1' ? `${this.fixedDuration}:${this.fixedDurationType}` : `${this.automaticComputed}`
+			}
 			this.$emit('update:modelValue', this.form)
 			this.drawer = false
 		},
 		delNode() {
 			this.$emit('update:modelValue', this.nodeConfig.childNode)
 		},
-		delUser(index) {
-			this.form.nodeAssigneeList.splice(index, 1)
-		},
-		selectHandle(type, data) {
-			this.select(type, data)
-		},
 		toText(nodeConfig) {
-			if (nodeConfig.nodeAssigneeList && nodeConfig.nodeAssigneeList.length > 0) {
-				const users = nodeConfig.nodeAssigneeList.map(item => item.name).join('、')
-				return users
+			if (nodeConfig.delayType === '1') {
+				return `等待${this.fixedDuration}${this.selectedLabel}`
+			} else if (nodeConfig.delayType === '2') {
+				return `至当天${this.automaticComputed}`
 			} else {
-				if (nodeConfig.allowSelection) {
-					return '发起人自选'
-				} else {
-					return false
-				}
+				return false
 			}
 		}
 	}