feat: 多条件流程设计 展示问题 功能

src/components/scWorkflow/nodes/branch.vue

@@ -21,12 +21,13 @@
 										<Close />
 									</el-icon>
 								</div>
-								<div
-									class="content"
-									:class="[index === nodeConfig.conditionNodes.length - 1 ? 'last-child-title' : '']"
-									style="width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis"
-								>
-									<span v-if="toText(nodeConfig, index)" :title="toText(nodeConfig, index)">{{ toText(nodeConfig, index) }}</span>
+								<div class="content" :class="[index === nodeConfig.conditionNodes.length - 1 ? 'last-child-title' : '']" style="width: 200px">
+									<el-tooltip v-if="toText(nodeConfig, index)" effect="dark" placement="top">
+										<div class="text-overflow_ellipsis_line_2" v-html="toText(nodeConfig, index)" />
+										<template #content>
+											<div v-html="toText(nodeConfig, index)" />
+										</template>
+									</el-tooltip>
 									<span v-else class="placeholder"> 请设置条件 </span>
 								</div>
 								<!-- 最后一个没有，长度大于2倒数第二个没有 -->
@@ -65,7 +66,15 @@
 						<!--							-->
 						<!--						</div>-->
 					</label>
-					<el-input v-if="isEditTitle" ref="nodeTitle" v-model="form.nodeName" clearable @blur="saveTitle" @keyup.enter="saveTitle" class="w-40"></el-input>
+					<el-input
+						v-if="isEditTitle"
+						ref="nodeTitle"
+						v-model="form.nodeName"
+						clearable
+						class="w-40"
+						@blur="saveTitle"
+						@keyup.enter="saveTitle"
+					></el-input>
 					<el-input v-model="form.nodeKey" clearable class="w-40 pl-1.5" placeholder="请填写nodeKey"></el-input>
 				</div>
 			</template>
@@ -123,12 +132,12 @@
 								</div>
 							</div>
 							<div class="sub-content">
-								<el-button link type="primary" :icon="Plus" @click="addConditionList(conditionGroup, 'custom')"> 添加自定义条件 </el-button>
+								<el-button link type="primary" icon="Plus" @click="addConditionList(conditionGroup, 'custom')"> 添加自定义条件 </el-button>
 								<el-button
 									v-if="expressionFormList.length"
 									link
 									type="primary"
-									:icon="Plus"
+									icon="Plus"
 									style="margin-left: 8px"
 									@click="addConditionList(conditionGroup, 'form')"
 								>
@@ -137,7 +146,7 @@
 							</div>
 						</div>
 					</template>
-					<el-button style="width: 100%" type="info" :icon="Plus" text bg @click="addConditionGroup"> 添加条件组 </el-button>
+					<el-button style="width: 100%" type="info" icon="Plus" text bg @click="addConditionGroup"> 添加条件组 </el-button>
 				</el-main>
 				<el-footer>
 					<el-button type="primary" @click="save"> 保存 </el-button>
@@ -155,7 +164,8 @@ import useFlowStore from '@/store/modules/flow'
 import { Delete, Plus, ArrowLeft, Close, ArrowRight, Edit } from '@element-plus/icons-vue'
 import { mapState } from 'pinia'
 import { getNodeKey } from '@/utils/workflow'
-import {ElMessage} from "element-plus";
+import { ElMessage } from 'element-plus'
+import { $log } from '@/utils'
 
 export default {
 	components: {
@@ -176,18 +186,27 @@ export default {
 			isEditTitle: false,
 			index: 0,
 			form: {},
-			expressionFormList: []
+			expressionFormList: [],
+			local_formStructure: {}
 		}
 	},
 	computed: {
-		Plus() {
-			return Plus
-		},
 		...mapState(useFlowStore, ['processForm']) //映射函数，取出processForm
 	},
 	watch: {
 		modelValue() {
 			this.nodeConfig = this.modelValue
+		},
+		processForm: {
+			handler(processForm) {
+				// console.error(val, 'processForm  change...', typeof val)
+				const { formStructure } = JSON.parse(processForm) // 表单设计字段
+				this.local_formStructure = formStructure
+				// 使用 filter 方法找到 required 属性为 true 的对象
+				this.expressionFormList = (formStructure?.fields || []).filter(item => item.options && item.options.required === true)
+				$log(this.expressionFormList, '这里打印出符合条件的表单对象')
+			},
+			immediate: true
 		}
 	},
 	mounted() {
@@ -203,11 +222,11 @@ export default {
 			this.index = index
 			this.form = {}
 			this.form = JSON.parse(JSON.stringify(this.nodeConfig.conditionNodes[index]))
-			const { formStructure } = JSON.parse(this.processForm) // 表单设计字段
-			// 使用 filter 方法找到 required 属性为 true 的对象
-			const requiredList = (formStructure?.fields || []).filter(item => item.options && item.options.required === true)
-			console.log(`%c 这里打印出符合条件的表单对象-=== ${JSON.stringify(requiredList)}`, 'background: orange; color: #fff')
-			this.expressionFormList = requiredList || []
+			// const { formStructure } = JSON.parse(this.processForm) // 表单设计字段
+			// // 使用 filter 方法找到 required 属性为 true 的对象
+			// const requiredList = (formStructure?.fields || []).filter(item => item.options && item.options.required === true)
+			// console.log(`%c 这里打印出符合条件的表单对象-=== ${JSON.stringify(requiredList)}`, 'background: orange; color: #fff')
+			// this.expressionFormList = requiredList || []
 			this.drawer = true
 		},
 		editTitle() {
@@ -285,27 +304,30 @@ export default {
 		},
 		toText(nodeConfig, index) {
 			var { conditionList } = nodeConfig.conditionNodes[index]
-			if (conditionList && conditionList.length == 1) {
-				const text = conditionList.map(conditionGroup =>
-					conditionGroup
-						.map(item => {
-							const showOperator = this.operatorType.find(i => i.value === item.operator).label
-							if (item.type === 'form') {
-								return `${item.showLabel}${showOperator}${item.value}`
-							} else {
-								return `${item.label}${showOperator}${item.value}`
-							}
-						})
-						.join(' 和 ')
-				)
+			if (conditionList && conditionList.length) {
+				const text = conditionList
+					.map(conditionGroup =>
+						conditionGroup
+							.map(item => {
+								const showOperator = this.operatorType.find(i => i.value === item.operator).label
+								if (item.type === 'form') {
+									let showLabel = item.showLabel
+									if (!showLabel) showLabel = this.expressionFormList.find(i => i.key === item.field)?.label
+									return `${showLabel}${showOperator}${item.value}`
+								} else {
+									return `${item.label}${showOperator}${item.value}`
+								}
+							})
+							.join(' <span style="color: var(--el-color-warning)">且</span> ')
+					)
+					.join('<br/> <span style="color: var(--el-color-success)">或</span> <br/>')
+				// console.error(text, 'text')
 				return text
-			} else if (conditionList && conditionList.length > 1) {
-				return conditionList.length + '个条件，或满足'
 			} else {
-				if (index == nodeConfig.conditionNodes.length - 1) {
+				if (index === nodeConfig.conditionNodes.length - 1) {
 					return '未满足时其他条件时，将进入默认流程'
 				} else {
-					return false
+					return ''
 				}
 			}
 		},