feat(condition): 编辑器支持表达式判断——判断方式切换 + 出口条件就地编辑 + 表达式调试
- ConditionNode 增 judgeMode/conditions(SERVICE 缺省,旧定义天然兼容);DefEdgeJson/DefNodeJson 透传 condition/judgeMode - convert.ts 双向透传:CONDITION 分支首边带 condition,序列化顺序=分支顺序(求值优先级保序) - ConditionDrawer 判断方式 Radio(服务/表达式);ConditionBox 表达式模式分支头部条件输入(序号即优先级) - validate.ts 镜像校验:表达式模式每出口条件必填(语法由后端发布期拦) - Routers 页加「表达式调试」Modal(/admin/router/eval,与线上同一求值核心) - addBranch/removeBranch 同步维护 conditions 占位
This commit is contained in:
@@ -1,7 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
// 条件分支容器(2026-09-24):紫系区分并行橙;与 ParallelBox 的本质差异——无 JOIN 语义,
|
||||
// 分支按出口名互斥选路(运行时调判断服务),分支尾隐式汇合到容器后继。
|
||||
// 分支头部的出口名 Input 即 contentJson 里 CONDITION 命名出边的 name(判断接口 outlets 契约)。
|
||||
// 分支按出口名互斥选路(运行时调判断服务/表达式求值),分支尾隐式汇合到容器后继。
|
||||
// 分支头部的出口名 Input 即 contentJson 里 CONDITION 命名出边的 name(判断接口 outlets 契约);
|
||||
// EXPRESSION 模式(2026-10-10)下分支头部再就地编辑出边 condition,序号即求值优先级。
|
||||
import { computed, inject } from "vue";
|
||||
import { BRANCH_LABELS, EDITOR_CTX, MAX_BRANCHES, MIN_BRANCHES, ConditionNode } from "../model";
|
||||
import NodeList from "./NodeList.vue";
|
||||
@@ -14,8 +15,10 @@ const issues = computed(() => ctx.issueOf(props.node.uid));
|
||||
const hasError = computed(() => issues.value.some((i) => i.level === "error"));
|
||||
const canRemoveBranch = computed(() => props.node.branches.length > MIN_BRANCHES);
|
||||
const canAddBranch = computed(() => props.node.branches.length < MAX_BRANCHES);
|
||||
const expression = computed(() => props.node.judgeMode === "EXPRESSION");
|
||||
|
||||
const routerLabel = computed(() => {
|
||||
if (expression.value) return "表达式判断(按分支顺序取首个为真)";
|
||||
if (!props.node.routerKey) return "判断服务:未选择";
|
||||
const r = ctx.routers.find((x) => x.routerKey === props.node.routerKey);
|
||||
return r ? `判断服务:${r.name}(${props.node.routerKey})` : `判断服务:${props.node.routerKey}`;
|
||||
@@ -25,19 +28,28 @@ const routerLabel = computed(() => {
|
||||
function renameOutlet(i: number, v: string): void {
|
||||
props.node.outlets[i] = v;
|
||||
}
|
||||
|
||||
/** 出口条件就地编辑(EXPRESSION 模式;与 outlets 下标一一对应) */
|
||||
function editCondition(i: number, v: string): void {
|
||||
props.node.conditions = props.node.conditions || [];
|
||||
while (props.node.conditions.length <= i) props.node.conditions.push("");
|
||||
props.node.conditions[i] = v;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="condition-box" :class="{ error: hasError }">
|
||||
<div class="cb-title" @click="ctx.openNode(node.uid)">
|
||||
条件分支(按出口互斥选路)
|
||||
<span class="cb-hint">(点击标题配置判断服务)</span>
|
||||
<span class="cb-hint">(点击标题配置{{ expression ? "表达式" : "判断服务" }})</span>
|
||||
</div>
|
||||
<div class="cb-router">{{ routerLabel }}</div>
|
||||
<div class="cb-cols">
|
||||
<div v-for="(branch, i) in node.branches" :key="i" class="cb-col">
|
||||
<div class="cb-col-head">
|
||||
<span class="cb-col-no">{{ BRANCH_LABELS[i] || i + 1 }}</span>
|
||||
<span class="cb-col-no" :title="expression ? '表达式求值优先级' : undefined">
|
||||
{{ BRANCH_LABELS[i] || i + 1 }}
|
||||
</span>
|
||||
<input
|
||||
class="cb-outlet"
|
||||
:value="node.outlets[i]"
|
||||
@@ -57,6 +69,14 @@ function renameOutlet(i: number, v: string): void {
|
||||
<span class="cb-col-del" title="删除分支">×</span>
|
||||
</Poptip>
|
||||
</div>
|
||||
<input
|
||||
v-if="expression"
|
||||
class="cb-cond"
|
||||
:value="(node.conditions || [])[i] || ''"
|
||||
placeholder="条件表达式,如 amount > 1000"
|
||||
maxlength="200"
|
||||
@input="editCondition(i, ($event.target as HTMLInputElement).value)"
|
||||
/>
|
||||
<NodeList :items="branch" :container="`${node.uid}:${i}`" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -142,6 +162,25 @@ function renameOutlet(i: number, v: string): void {
|
||||
outline: none;
|
||||
border-color: #9254de;
|
||||
}
|
||||
.cb-cond {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border: 1px dashed #d3b8f9;
|
||||
border-radius: 6px;
|
||||
padding: 2px 8px;
|
||||
font-size: 12px;
|
||||
color: #5b3fa8;
|
||||
font-family: Consolas, Monaco, monospace;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.cb-cond:focus {
|
||||
outline: none;
|
||||
border-color: #9254de;
|
||||
border-style: solid;
|
||||
}
|
||||
.cb-cond::placeholder {
|
||||
color: #c5b3e8;
|
||||
}
|
||||
.cb-col-del {
|
||||
flex: none;
|
||||
cursor: pointer;
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
// 条件分支配置抽屉(2026-09-24):结构与 NotifyDrawer 同源(本地表单 + 确定回写)。
|
||||
// 只管节点名与判断服务(flw_router 下拉);出口命名/分支编排 ConditionBox 就地做。
|
||||
// 管节点名与判断方式(2026-10-10 二选一:服务/表达式);出口命名/条件表达式/分支编排 ConditionBox 就地做。
|
||||
import { computed, inject, reactive, watch } from "vue";
|
||||
import { Message } from "view-ui-plus";
|
||||
import { ConditionNode, EDITOR_CTX } from "../model";
|
||||
import { ConditionNode, EDITOR_CTX, JudgeMode } from "../model";
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: boolean;
|
||||
@@ -21,6 +21,7 @@ const ctx = inject(EDITOR_CTX)!;
|
||||
const form = reactive({
|
||||
name: "",
|
||||
routerKey: "",
|
||||
judgeMode: "SERVICE" as JudgeMode,
|
||||
});
|
||||
|
||||
function syncFromNode(): void {
|
||||
@@ -28,6 +29,7 @@ function syncFromNode(): void {
|
||||
if (!n) return;
|
||||
form.name = n.name;
|
||||
form.routerKey = n.routerKey || "";
|
||||
form.judgeMode = n.judgeMode === "EXPRESSION" ? "EXPRESSION" : "SERVICE";
|
||||
}
|
||||
|
||||
watch(
|
||||
@@ -56,6 +58,16 @@ const routerHint = computed(() => {
|
||||
return `调用 ${r.serviceKey}${r.path};返回出口名即分支走向`;
|
||||
});
|
||||
|
||||
/** 切换判断方式:表达式模式下 conditions 补齐占位(与 outlets 同位) */
|
||||
function switchJudgeMode(mode: JudgeMode): void {
|
||||
form.judgeMode = mode;
|
||||
const n = props.node;
|
||||
if (n && mode === "EXPRESSION") {
|
||||
n.conditions = n.conditions || [];
|
||||
while (n.conditions.length < n.outlets.length) n.conditions.push("");
|
||||
}
|
||||
}
|
||||
|
||||
function onOk(): void {
|
||||
const n = props.node;
|
||||
if (!n) {
|
||||
@@ -66,12 +78,17 @@ function onOk(): void {
|
||||
Message.warning("节点名称不能为空");
|
||||
return;
|
||||
}
|
||||
if (!form.routerKey) {
|
||||
if (form.judgeMode === "SERVICE" && !form.routerKey) {
|
||||
Message.warning("请选择判断服务(未配置的判断服务运行到该节点会挂起)");
|
||||
return;
|
||||
}
|
||||
n.name = form.name.trim();
|
||||
n.routerKey = form.routerKey;
|
||||
n.routerKey = form.judgeMode === "SERVICE" ? form.routerKey : "";
|
||||
n.judgeMode = form.judgeMode;
|
||||
if (form.judgeMode === "EXPRESSION") {
|
||||
n.conditions = n.conditions || [];
|
||||
while (n.conditions.length < n.outlets.length) n.conditions.push("");
|
||||
}
|
||||
emit("update:modelValue", false);
|
||||
}
|
||||
|
||||
@@ -96,6 +113,17 @@ function onRemove(): void {
|
||||
</div>
|
||||
|
||||
<div class="fld">
|
||||
<label>判断方式</label>
|
||||
<RadioGroup :model-value="form.judgeMode" @on-change="switchJudgeMode">
|
||||
<Radio label="SERVICE">服务(外部判断接口)</Radio>
|
||||
<Radio label="EXPRESSION">表达式</Radio>
|
||||
</RadioGroup>
|
||||
<div class="hint">
|
||||
简单条件用表达式在编辑器内闭环;复杂判断(查库/调外部系统)沿用注册的判断服务
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="form.judgeMode === 'SERVICE'" class="fld">
|
||||
<label>判断服务</label>
|
||||
<Select v-model="form.routerKey" filterable placeholder="请选择判断服务(flw_router 注册)">
|
||||
<Option v-for="o in routerOptions" :key="o.value" :value="o.value" :label="o.label" />
|
||||
@@ -108,6 +136,15 @@ function onRemove(): void {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="fld">
|
||||
<label>表达式说明</label>
|
||||
<div class="hint">
|
||||
每个出口在分支列头部就地填写 AviatorScript 条件(如 amount > 1000);按分支顺序取
|
||||
首个为真的出口。变量=表单字段 + 内置(schId/bizType/bizId/submitterId/instanceId 等)。
|
||||
变量未提供或条件全不为真时流程挂起(不配默认出口),可在"条件路由"页调试表达式
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fld">
|
||||
<label>出口与分支</label>
|
||||
<div class="hint">
|
||||
|
||||
Reference in New Issue
Block a user