feat: branch drawer to jsx

src/components/scWorkflow/nodes/branch.vue

@@ -190,6 +190,31 @@ export default defineComponent({
 		return () => {
 			const disabled = props.disabled
 			// `branch-wrap--${nodeConfig.local_status}`
+			const drawerSlots = {
+				header() {
+					return <div class="node-wrap-drawer__title">
+						{
+							!state.isEditTitle ? <label onClick={editTitle}>
+								{state.form.nodeName}
+								<el-icon class="node-wrap-drawer__title-edit"><Edit/></el-icon>
+								{/*<div @click="rmConditionGroup(conditionGroup)"> </div>*/}
+							</label> : <el-input
+								ref="nodeTitle"
+								v-model={state.form.nodeName}
+								clearable
+								class="w-40"
+								onBlur={saveTitle}
+								onKeyup={(event) => {
+									if (event.key === 'Enter') {
+										saveTitle()
+									}
+								}}
+							/>
+						}
+						<el-input v-model={state.form.nodeKey} clearable class="w-40 pl-1.5" placeholder="请填写nodeKey"></el-input>
+					</div>
+				}
+			}
 			return <div class={['branch-wrap', disabled ? 'branch-wrap--disabled' : '']}>
 				<div class="branch-box-wrap">
 					<div class="branch-box">
@@ -245,12 +270,16 @@ export default defineComponent({
 									</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 === 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></>)
+										index == state.nodeConfig.conditionNodes.length - 1 && (<>
+											<div class="top-right-cover-line"></div>
+											<div class="bottom-right-cover-line"></div>
+										</>)
 									}
 								</div>
 							})
@@ -258,8 +287,112 @@ export default defineComponent({
 					</div>
 					<add-node v-model={state.nodeConfig.childNode} disabled={disabled}></add-node>
 				</div>
-				{/*todo... <el-drawer></el-drawer>*/
-				}
+				<el-drawer v-model={state.drawer} title="条件设置" destroy-on-close append-to-body size={600} v-slots={drawerSlots}>
+					<el-container>
+						<el-main style="padding: 0 0 20px 0">
+							<div class="top-tips">满足以下条件时进入当前分支</div>
+							{
+								state.form.conditionList.map((conditionGroup, conditionGroupIdx) => {
+									return <>
+									{
+										conditionGroupIdx != 0 && <div class="or-branch-link-tip">或满足</div>
+									}
+									<div class="condition-group-editor">
+										<div class="header">
+											<span>条件组 {conditionGroupIdx + 1}</span>
+											<div onClick={deleteConditionGroup.bind(null, 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>
+											{
+												conditionGroup.map((condition, idx) => {
+													return <div key={idx} class="condition-content">
+														<div class="condition-relation">
+															<span>{idx === 0 ? '当' : '且'}</span>
+															{
+																conditionGroup.length > 1 && <div onClick={deleteConditionList.bind(null, conditionGroup, idx)}>
+																	<el-icon className="branch-delete-icon"><Delete/></el-icon>
+																</div>
+															}
+														</div>
+														<div class="condition-content">
+															<div class="condition-content-box">
+																{
+																	condition.type === 'custom' && <el-input
+																		v-model={condition.label}
+																		placeholder="自定义条件字段"
+																		onInput={getCurrentItemField.bind(null, conditionGroupIdx, idx)}
+																	/>
+																}
+																{
+																	condition.type === 'form' && <el-select
+																		v-model={condition.field}
+																		filterable
+																		placeholder="表单条件字段"
+																		onChange={getCurrentItemLabel.bind(null, conditionGroupIdx, idx)}
+																	>
+																		{
+																			state.expressionFormList.map(({id, label, key}) => {
+																				return <el-option key={id} label={label} value={key}/>
+																			})
+																		}
+																	</el-select>
+																}
+																<el-select v-model={condition.operator} placeholder="请选择表达式">
+																	{
+																		operatorType.map(({label, value}) => {
+																			return <el-option key={value} label={label} value={value}/>
+																		})
+																	}
+																</el-select>
+																<el-input v-model={condition.value} placeholder="值"/>
+															</div>
+														</div>
+													</div>
+												})
+											}
+										</div>
+										<div class="sub-content">
+											<el-button link type="primary" icon="Plus" onClick={addConditionList.bind(null, conditionGroup, 'custom')}> 添加自定义条件
+											</el-button>
+											{
+												!!state.expressionFormList.length && <el-button
+													link
+													type="primary"
+													icon="Plus"
+													style="margin-left: 8px"
+													onClick={addConditionList.bind(null, conditionGroup, 'form')}
+												>
+													添加表单条件
+												</el-button>
+											}
+										</div>
+									</div>
+									</>
+								})
+							}
+							<el-button style="width: 100%" type="info" icon="Plus" text bg
+							onClick={addConditionGroup}> 添加条件组
+						</el-button>
+					</el-main>
+						<el-footer>
+							<el-button type="primary"
+												 onClick={save}> 保存
+							</el-button>
+							<el-button
+									onClick={() => state.drawer = false}>取消
+								</el-button>
+							</el-footer>
+					</el-container>
+				</el-drawer>
 			</div>
 		}
 	}