feat: branch to jsx

src/components/scWorkflow/nodes/branch.vue

@@ -1,185 +1,34 @@
-<template>
-	<!--  `branch-wrap--${nodeConfig.local_status}`-->
-	<div class="branch-wrap" :class="[disabled ? 'branch-wrap--disabled' : '']">
-		<div class="branch-box-wrap">
-			<div class="branch-box">
-				<el-button class="add-branch" type="success" plain round @click="addTerm"> 添加条件 </el-button>
-				<div v-for="(item, index) in nodeConfig.conditionNodes" :key="index" class="col-box">
-					<div class="condition-node">
-						<div class="condition-node-box">
-							<div :class="['auto-judge', `auto-judge--${item.local_status}`]" @click="show(index)">
-								<!-- 不是第一个 也不是 最后一个-->
-								<div v-if="index != 0 && index != nodeConfig.conditionNodes.length - 1" class="sort-left" @click.stop="arrTransfer(index, -1)">
-									<el-icon><ArrowLeft /></el-icon>
-								</div>
-								<div class="title">
-									<span class="node-title" :class="[index === nodeConfig.conditionNodes.length - 1 ? 'last-child-title' : '']">{{
-										index === nodeConfig.conditionNodes.length - 1 ? '默认条件' : item.nodeName
-									}}</span>
-									<span class="priority-title">优先级{{ item.priorityLevel }}</span>
-									<el-icon v-if="index != nodeConfig.conditionNodes.length - 1" class="close" @click.stop="delTerm(index)">
-										<Close />
-									</el-icon>
-								</div>
-								<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倒数第二个没有 -->
-								<div
-									v-if="
-										!(nodeConfig.conditionNodes.length == 2 && (index === nodeConfig.conditionNodes.length - 1 || index === 0)) &&
-										!(
-											(nodeConfig.conditionNodes.length > 2 && index === nodeConfig.conditionNodes.length - 1) ||
-											index === nodeConfig.conditionNodes.length - 2
-										)
-									"
-									class="sort-right"
-									@click.stop="arrTransfer(index)"
-								>
-									<el-icon><ArrowRight /></el-icon>
-								</div>
-							</div>
-							<add-node v-model="item.childNode" :disabled="disabled"></add-node>
-						</div>
-					</div>
-					<slot v-if="item.childNode" :node="item"></slot>
-					<div v-if="index == 0" class="top-left-cover-line"></div>
-					<div v-if="index == 0" class="bottom-left-cover-line"></div>
-					<div v-if="index == nodeConfig.conditionNodes.length - 1" class="top-right-cover-line"></div>
-					<div v-if="index == nodeConfig.conditionNodes.length - 1" class="bottom-right-cover-line"></div>
-				</div>
-			</div>
-			<add-node v-model="nodeConfig.childNode" :disabled="disabled"></add-node>
-		</div>
-		<el-drawer v-model="drawer" title="条件设置" destroy-on-close append-to-body :size="600">
-			<template #header>
-				<div class="node-wrap-drawer__title">
-					<label v-if="!isEditTitle" @click="editTitle">
-						{{ 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
-						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>
-			<el-container>
-				<el-main style="padding: 0 0 20px 0">
-					<div class="top-tips">满足以下条件时进入当前分支</div>
-					<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">
-								<span>条件组 {{ conditionGroupIdx + 1 }}</span>
-								<div @click="deleteConditionGroup(conditionGroupIdx)">
-									<el-icon class="branch-delete-icon"><Delete /></el-icon>
-								</div>
-							</div>
-
-							<div class="main-content">
-								<!-- 单个条件 -->
-								<div class="condition-content-box cell-box">
-									<div v-if="false">描述</div>
-									<div>条件字段</div>
-									<div>运算符</div>
-									<div>值</div>
-								</div>
-								<div v-for="(condition, idx) in conditionGroup" :key="idx" class="condition-content">
-									<div class="condition-relation">
-										<span>{{ idx == 0 ? '当' : '且' }}</span>
-										<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-if="condition.type === 'custom'"
-												v-model="condition.label"
-												placeholder="自定义条件字段"
-												@input="getCurrentItemField(conditionGroupIdx, idx)"
-											/>
-											<el-select
-												v-if="condition.type === 'form'"
-												v-model="condition.field"
-												filterable
-												placeholder="表单条件字段"
-												@change="getCurrentItemLabel(conditionGroupIdx, idx)"
-											>
-												<el-option v-for="{ id, label, key } in expressionFormList" :key="id" :label="label" :value="key" />
-											</el-select>
-											<el-select v-model="condition.operator" placeholder="请选择表达式">
-												<el-option v-for="{ value, label } in operatorType" :key="label" :label="label" :value="value"></el-option>
-											</el-select>
-											<el-input v-model="condition.value" placeholder="值" />
-										</div>
-									</div>
-								</div>
-							</div>
-							<div class="sub-content">
-								<el-button link type="primary" icon="Plus" @click="addConditionList(conditionGroup, 'custom')"> 添加自定义条件 </el-button>
-								<el-button
-									v-if="expressionFormList.length"
-									link
-									type="primary"
-									icon="Plus"
-									style="margin-left: 8px"
-									@click="addConditionList(conditionGroup, 'form')"
-								>
-									添加表单条件
-								</el-button>
-							</div>
-						</div>
-					</template>
-					<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>
-					<el-button @click="drawer = false">取消</el-button>
-				</el-footer>
-			</el-container>
-		</el-drawer>
-	</div>
-</template>
-
-<script>
+<script lang="jsx">
 import addNode from './addNode.vue'
 import { operatorType } from './config'
 import useFlowStore from '@/store/modules/flow'
 import { Delete, Plus, ArrowLeft, Close, ArrowRight, Edit } from '@element-plus/icons-vue'
-import { mapState } from 'pinia'
+import {mapState, storeToRefs} from 'pinia'
 import { getNodeKey } from '@/utils/workflow'
 import { ElMessage } from 'element-plus'
 import { $log } from '@/utils'
+import { defineComponent, reactive, ref, computed, /*getCurrentInstance,*/ unref, watch, nextTick, shallowRef, onMounted} from 'vue'
+// const emit = defineEmits(['update:modelValue', 'update'])
 
-export default {
+export default defineComponent({
+	name: 'Branch',
+	emits: ['update:modelValue', 'update'],
 	components: {
 		addNode
 	},
 	props: {
-		modelValue: { type: Object, default: () => {} },
+		modelValue: {
+			type: Object, default: () => {}
+		},
 		disabled: {
 			type: Boolean,
 			default: false
 		}
 	},
-	data() {
-		return {
+	setup(props, ctx) {
+		const flowStore = useFlowStore()
+		const { processForm } = storeToRefs(flowStore)
+		const state = reactive({
 			operatorType,
 			nodeConfig: {},
 			drawer: false,
@@ -188,67 +37,55 @@ export default {
 			form: {},
 			expressionFormList: [],
 			local_formStructure: {}
-		}
-	},
-	computed: {
-		...mapState(useFlowStore, ['processForm']) //映射函数，取出processForm
-	},
-	watch: {
-		modelValue() {
-			this.nodeConfig = this.modelValue
-		},
-		processForm: {
-			handler(processForm) {
+		})
+		watch(() => props.modelValue, () => {
+				state.nodeConfig = props.modelValue
+			},
+			{immediate: true})
+		watch(processForm, (val) => {
 				// console.error(val, 'processForm  change...', typeof val)
-				const { formStructure } = JSON.parse(processForm) // 表单设计字段
-				this.local_formStructure = formStructure
+				const { formStructure } = JSON.parse(val) // 表单设计字段
+				state.local_formStructure = formStructure
 				// 使用 filter 方法找到 required 属性为 true 的对象
-				this.expressionFormList = (formStructure?.fields || []).filter(item => item.options && item.options.required === true)
-				$log(this.expressionFormList, '这里打印出符合条件的表单对象')
+				state.expressionFormList = (formStructure?.fields || []).filter(item => item.options && item.options.required === true)
+				$log(state.expressionFormList, '这里打印出符合条件的表单对象')
 			},
-			immediate: true
-		}
-	},
-	mounted() {
-		this.nodeConfig = this.modelValue
-	},
-	methods: {
-		show(index) {
-			if (this.disabled) return
-			if (index === this.nodeConfig.conditionNodes.length - 1) {
+			{immediate: true}
+		)
+
+		const show = (index) => {
+			if (state.disabled) return
+			if (index === state.nodeConfig.conditionNodes.length - 1) {
 				// 最后一个节点不能编辑
 				return
 			}
-			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() {
-			this.isEditTitle = true
-			this.$nextTick(() => {
-				this.$refs.nodeTitle.focus()
+			state.index = index
+			state.form = {}
+			state.form = JSON.parse(JSON.stringify(state.nodeConfig.conditionNodes[index]))
+			state.drawer = true
+		}
+		const editTitle = () => {
+			state.isEditTitle = true
+			nextTick(() => {
+				// state.$refs.nodeTitle.focus()
 			})
-		},
-		saveTitle() {
-			this.isEditTitle = false
-		},
-		save() {
-			if (!this.form.nodeKey) {
+		}
+		const saveTitle = () => {
+			state.isEditTitle = false
+		}
+		const save = () => {
+			if (!state.form.nodeKey) {
 				return ElMessage.error('请填写nodeKey')
 			}
-			this.nodeConfig.conditionNodes[this.index] = this.form
-			this.$emit('update:modelValue', this.nodeConfig)
-			this.drawer = false
-		},
-		addTerm() {
-			let len = this.nodeConfig.conditionNodes.length + 1
-			this.nodeConfig.conditionNodes.push({
+			state.nodeConfig.conditionNodes[state.index] = state.form
+
+			ctx.emit('update:modelValue', state.nodeConfig)
+			// this.$emit('update:modelValue', this.nodeConfig)
+			state.drawer = false
+		}
+		const addTerm = () => {
+			let len = state.nodeConfig.conditionNodes.length + 1
+			state.nodeConfig.conditionNodes.push({
 				nodeName: '条件' + len,
 				nodeKey: getNodeKey(),
 				type: 3,
@@ -256,35 +93,39 @@ export default {
 				conditionMode: 1,
 				conditionList: []
 			})
-		},
-		delTerm(index) {
-			this.nodeConfig.conditionNodes.splice(index, 1)
-			if (this.nodeConfig.conditionNodes.length == 1) {
-				if (this.nodeConfig.childNode) {
-					if (this.nodeConfig.conditionNodes[0].childNode) {
-						this.reData(this.nodeConfig.conditionNodes[0].childNode, this.nodeConfig.childNode)
+		}
+		const delTerm = (index, event) => {
+			event.stopPropagation()
+			state.nodeConfig.conditionNodes.splice(index, 1)
+			if (state.nodeConfig.conditionNodes.length == 1) {
+				if (state.nodeConfig.childNode) {
+					if (state.nodeConfig.conditionNodes[0].childNode) {
+						reData(state.nodeConfig.conditionNodes[0].childNode, state.nodeConfig.childNode)
 					} else {
-						this.nodeConfig.conditionNodes[0].childNode = this.nodeConfig.childNode
+						state.nodeConfig.conditionNodes[0].childNode = state.nodeConfig.childNode
 					}
 				}
-				this.$emit('update:modelValue', this.nodeConfig.conditionNodes[0].childNode)
+				ctx.emit('update:modelValue', state.nodeConfig.conditionNodes[0].childNode)
+				// this.$emit('update:modelValue', state.nodeConfig.conditionNodes[0].childNode)
 			}
-		},
-		reData(data, addData) {
+		}
+		const reData = (data, addData) => {
 			if (!data.childNode) {
 				data.childNode = addData
 			} else {
-				this.reData(data.childNode, addData)
+				reData(data.childNode, addData)
 			}
-		},
-		arrTransfer(index, type = 1) {
-			this.nodeConfig.conditionNodes[index] = this.nodeConfig.conditionNodes.splice(index + type, 1, this.nodeConfig.conditionNodes[index])[0]
-			this.nodeConfig.conditionNodes.map((item, index) => {
+		}
+		const arrTransfer = (index, type = 1, event) => {
+			event.stopPropagation();
+			state.nodeConfig.conditionNodes[index] = state.nodeConfig.conditionNodes.splice(index + type, 1, state.nodeConfig.conditionNodes[index])[0]
+			state.nodeConfig.conditionNodes.map((item, index) => {
 				item.priorityLevel = index + 1
 			})
-			this.$emit('update:modelValue', this.nodeConfig)
-		},
-		addConditionList(conditionList, type) {
+			ctx.emit('update:modelValue', state.nodeConfig)
+			// this.$emit('update:modelValue', this.nodeConfig)
+		}
+		const addConditionList = (conditionList, type) => {
 			conditionList.push({
 				label: '',
 				field: '',
@@ -292,27 +133,27 @@ export default {
 				value: '',
 				type
 			})
-		},
-		deleteConditionList(conditionList, index) {
+		}
+		const deleteConditionList = (conditionList, index) => {
 			conditionList.splice(index, 1)
-		},
-		addConditionGroup() {
-			this.addConditionList(this.form.conditionList[this.form.conditionList.push([]) - 1], 'custom')
-		},
-		deleteConditionGroup(index) {
-			this.form.conditionList.splice(index, 1)
-		},
-		toText(nodeConfig, index) {
+		}
+		const addConditionGroup = () => {
+			state.addConditionList(state.form.conditionList[state.form.conditionList.push([]) - 1], 'custom')
+		}
+		const deleteConditionGroup = (index) => {
+			state.form.conditionList.splice(index, 1)
+		}
+		const toText = (nodeConfig, index) => {
 			var { conditionList } = nodeConfig.conditionNodes[index]
 			if (conditionList && conditionList.length) {
 				const text = conditionList
 					.map(conditionGroup =>
 						conditionGroup
 							.map(item => {
-								const showOperator = this.operatorType.find(i => i.value === item.operator).label
+								const showOperator = state.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
+									if (!showLabel) showLabel = state.expressionFormList.find(i => i.key === item.field)?.label
 									return `${showLabel}${showOperator}${item.value}`
 								} else {
 									return `${item.label}${showOperator}${item.value}`
@@ -330,20 +171,99 @@ export default {
 					return ''
 				}
 			}
-		},
-		getCurrentItemLabel(conditionIdx, idx) {
-			const currentCondition = this.form.conditionList[conditionIdx]
+		}
+		const getCurrentItemLabel = (conditionIdx, idx) => {
+			const currentCondition = state.form.conditionList[conditionIdx]
 			const field = currentCondition[idx].field
-			const labelObj = this.expressionFormList.find(i => i.key === field)
+			const labelObj = state.expressionFormList.find(i => i.key === field)
 			currentCondition[idx].showLabel = labelObj.label
 			currentCondition[idx].label = field
-		},
-		getCurrentItemField(conditionIdx, idx) {
-			const currentCondition = this.form.conditionList[conditionIdx]
+		}
+		const getCurrentItemField = (conditionIdx, idx) => {
+			const currentCondition = state.form.conditionList[conditionIdx]
 			currentCondition[idx].field = currentCondition[idx].label
 		}
+
+		onMounted(() => {
+			// state.nodeConfig = props.modelValue
+		})
+		return () => {
+			const disabled = props.disabled
+			// `branch-wrap--${nodeConfig.local_status}`
+			return <div class={['branch-wrap', disabled ? 'branch-wrap--disabled' : '']}>
+				<div class="branch-box-wrap">
+					<div class="branch-box">
+						<el-button class="add-branch" type="success" plain round onClick={addTerm}> 添加条件</el-button>
+						{
+							state.nodeConfig.conditionNodes.map((item, index) => {
+								// const xx
+								const contentTxt = toText(state.nodeConfig, index) // todo...
+								const contentHtml = contentTxt ? <el-tooltip effect="dark" placement="top" v-slots={{content: () => <div v-html={contentTxt}/>}}>
+									<div class="text-overflow_ellipsis_line_2" v-html={contentTxt}/>
+								</el-tooltip> : <span v-else class="placeholder"> 请设置条件 </span>
+								return <div key={index} class="col-box">
+									<div class="condition-node">
+										<div class="condition-node-box">
+											<div class={['auto-judge', `auto-judge--${item.local_status}`]} onClick={show.bind(null, index)}>
+												{/!*不是第一个 也不是 最后一个*!/}
+												{
+													index != 0 && index != state.nodeConfig.conditionNodes.length - 1 &&
+													<div class="sort-left" onClick={arrTransfer.bind(null, index, -1)}>
+														<el-icon><ArrowLeft/></el-icon>
+													</div>
+												}
+												<div class="title">
+													<span class={['node-title', index === state.nodeConfig.conditionNodes.length - 1 ? 'last-child-title' : '']}>{
+														index === state.nodeConfig.conditionNodes.length - 1 ? '默认条件' : item.nodeName
+													}</span>
+													<span class="priority-title">优先级{item.priorityLevel}</span>
+													{
+														index != state.nodeConfig.conditionNodes.length - 1 && <el-icon class="close" onClick={delTerm.bind(null, index)}>
+															<Close/>
+														</el-icon>
+													}
+												</div>
+
+												<div class={['content', index === state.nodeConfig.conditionNodes.length - 1 ? 'last-child-title' : '']} style="width: 200px">
+													{contentHtml}
+												</div>
+												{/*最后一个没有，长度大于2倒数第二个没有*/}
+												{
+													!(state.nodeConfig.conditionNodes.length == 2 && (index === state.nodeConfig.conditionNodes.length - 1 || index === 0)) &&
+													!(
+														(state.nodeConfig.conditionNodes.length > 2 && index === state.nodeConfig.conditionNodes.length - 1) ||
+														index === state.nodeConfig.conditionNodes.length - 2
+													) && <div
+														class="sort-right"
+														onClick={arrTransfer.bind(null, index)}>
+														<el-icon><ArrowRight/></el-icon>
+													</div>
+												}
+											</div>
+											<add-node v-model={item.childNode} disabled={disabled}></add-node>
+										</div>
+									</div>
+									{item.childNode && ctx.slots?.default({node: item})}
+									{
+										index === 0 && (<><div class="top-left-cover-line"></div>
+											<div class="bottom-left-cover-line"></div></>)
+									}
+									{
+										index == state.nodeConfig.conditionNodes.length - 1 && (<><div class="top-right-cover-line"></div>
+											<div class="bottom-right-cover-line"></div></>)
+									}
+								</div>
+							})
+						}
+					</div>
+					<add-node v-model={state.nodeConfig.childNode} disabled={disabled}></add-node>
+				</div>
+				{/*todo... <el-drawer></el-drawer>*/
+				}
+			</div>
+		}
 	}
-}
+})
 </script>
 
 <style scoped lang="scss">