feat: 表单表达式

src/components/scWorkflow/nodes/approver.vue

@@ -238,7 +238,7 @@ export default {
 				})
 				return { label: item.label, id: item.id, opera: opera }
 			})
-			console.log(operateTable, '====operateTable====')
+			console.log(`%c 这里打印出表单设计中的值=== ${operateTable}`, 'background: orange; color: #fff')
 			this.form.extendConfig = { formConfig: operateTable }
 			this.drawer = true
 		},

src/components/scWorkflow/nodes/branch.vue

@@ -41,10 +41,10 @@
 			<template #header>
 				<div class="node-wrap-drawer__title">
 					<label v-if="!isEditTitle" @click="editTitle">
-						{{ form.nodeName }}
-						<div @click="rmConditionGroup(conditionGroup)">
-							<el-icon class="node-wrap-drawer__title-edit"><Edit /></el-icon>
-						</div>
+						{{ form.nodeName }}<el-icon class="node-wrap-drawer__title-edit"><Edit /></el-icon>
+						<!--						<div @click="rmConditionGroup(conditionGroup)">-->
+						<!--							-->
+						<!--						</div>-->
 					</label>
 					<el-input v-if="isEditTitle" ref="nodeTitle" v-model="form.nodeName" clearable @blur="saveTitle" @keyup.enter="saveTitle"></el-input>
 				</div>
@@ -52,7 +52,7 @@
 			<el-container>
 				<el-main style="padding: 0 0 20px 0">
 					<div class="top-tips">满足以下条件时进入当前分支</div>
-					<template v-for="(conditionGroup, conditionGroupIdx) in form.conditionList">
+					<template v-for="(conditionGroup, conditionGroupIdx) in form.conditionList" :key="conditionGroupIdx">
 						<div v-if="conditionGroupIdx != 0" class="or-branch-link-tip">或满足</div>
 						<div class="condition-group-editor">
 							<div class="header">
@@ -70,18 +70,26 @@
 									<div>运算符</div>
 									<div>值</div>
 								</div>
-								<div v-for="(condition, idx) in conditionGroup" class="condition-content">
+								<div v-for="(condition, idx) in conditionGroup" :key="idx" class="condition-content">
 									<div class="condition-relation">
 										<span>{{ idx == 0 ? '当' : '且' }}</span>
-										<div @click="deleteConditionList(conditionGroup, idx)" v-if="conditionGroup.length > 1">
+										<div v-if="conditionGroup.length > 1" @click="deleteConditionList(conditionGroup, idx)">
 											<el-icon class="branch-delete-icon"><Delete /></el-icon>
 										</div>
 									</div>
 									<div class="condition-content">
 										<div class="condition-content-box">
 											<el-input v-model="condition.label" placeholder="描述" />
-											<el-input v-model="condition.field" placeholder="条件字段" />
-											<el-select v-model="condition.operator" placeholder="Select">
+											<el-select v-model="condition.field" filterable placeholder="条件字段">
+												<el-option
+													v-for="{ id, label, key } in expressionFormList"
+													:key="id"
+													:label="label"
+													:value="key"
+													:disabled="snDisabled(id)"
+												/>
+											</el-select>
+											<el-select v-model="condition.operator" placeholder="请选择表达式">
 												<el-option label="等于" value="=="></el-option>
 												<el-option label="不等于" value="!="></el-option>
 												<el-option label="大于" value=">"></el-option>
@@ -114,7 +122,9 @@
 
 <script>
 import addNode from './addNode.vue'
+import useFlowStore from '@/store/modules/flow'
 import { Delete, Plus, ArrowLeft, Close, ArrowRight, Edit } from '@element-plus/icons-vue'
+import { mapState } from 'pinia'
 
 export default {
 	components: {
@@ -129,13 +139,21 @@ export default {
 			drawer: false,
 			isEditTitle: false,
 			index: 0,
-			form: {}
+			form: {},
+			expressionFormList: []
 		}
 	},
 	computed: {
 		Plus() {
 			return Plus
-		}
+		},
+		snDisabled() {
+			return function (id) {
+				const obj = this.expressionFormList.find(ele => ele.id === id)
+				return obj ? true : false
+			}
+		},
+		...mapState(useFlowStore, ['processForm']) //映射函数，取出processForm
 	},
 	watch: {
 		modelValue() {
@@ -150,6 +168,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 || []
 			this.drawer = true
 		},
 		editTitle() {