From e8193a0aa0340bca1bcee4790deb7e8de4586735 Mon Sep 17 00:00:00 2001 From: jason <2667446@qq.com> Date: Tue, 30 Apr 2024 00:10:17 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BB=BF=E9=92=89=E9=92=89=E6=B5=81=E7=A8=8B?= =?UTF-8?q?=E8=AE=BE=E8=AE=A1=E5=99=A8-=20=E5=AE=8C=E5=96=84=E6=9D=A1?= =?UTF-8?q?=E4=BB=B6=E5=88=86=E6=94=AF=E8=8A=82=E7=82=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/NodeHandler.vue | 4 +- .../SimpleProcessDesignerV2/src/consts.ts | 3 +- .../src/nodes-config/ConditionNodeConfig.vue | 18 ++-- .../src/nodes/CopyTaskNode.vue | 2 +- .../src/nodes/ExclusiveNode.vue | 84 +++++++++++-------- .../src/nodes/UserTaskNode.vue | 2 +- .../theme/simple-process-designer.scss | 62 +++++++++++++- 7 files changed, 123 insertions(+), 52 deletions(-) diff --git a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue index b885b1c4..73183b14 100644 --- a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue +++ b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue @@ -100,7 +100,7 @@ const addNode = (type: number) => { childNode: undefined, attributes: { conditionType: 1, - defaultCondition: false + defaultFlow: false } }, { @@ -111,7 +111,7 @@ const addNode = (type: number) => { childNode: undefined, attributes: { conditionType: undefined, - defaultCondition: true + defaultFlow: true } } ] diff --git a/src/components/SimpleProcessDesignerV2/src/consts.ts b/src/components/SimpleProcessDesignerV2/src/consts.ts index 2648d820..69afb993 100644 --- a/src/components/SimpleProcessDesignerV2/src/consts.ts +++ b/src/components/SimpleProcessDesignerV2/src/consts.ts @@ -115,6 +115,5 @@ export const APPROVE_METHODS: DictDataVO [] = [ ] export const CONDITION_CONFIG_TYPES: DictDataVO [] = [ - { label: '条件规则', value: 1 }, - { label: '条件表达式', value: 2 } + { label: '自定义条件表达式', value: 1 } ] diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue index 23e3cc6c..c449af1b 100644 --- a/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue +++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue @@ -13,10 +13,10 @@
-
其它条件不满足进入此分支（该分支不可编辑和删除）
+
其它条件不满足进入此分支（该分支不可编辑和删除）
- + @@ -44,13 +44,13 @@ style="width: 100%" /> - 待实现 - + -->
@@ -93,17 +93,17 @@ const closeDrawer = () => { } // 保存配置 const saveConfig = () => { - if (!currentNode.value.attributes.defaultCondition) { + if (!currentNode.value.attributes.defaultFlow) { currentNode.value.showText = getShowText(); } settingVisible.value = false } const getShowText = () : string => { let showText =''; + // if (currentNode.value.attributes.conditionType === 1) { + // showText = '待实现' + // } if (currentNode.value.attributes.conditionType === 1) { - showText = '待实现' - } - if (currentNode.value.attributes.conditionType === 2) { if (currentNode.value.attributes.conditionExpression) { showText = `表达式：${currentNode.value.attributes.conditionExpression}` } diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue index cac1482f..3c64aa44 100644 --- a/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue +++ b/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue @@ -28,7 +28,7 @@
-
+
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue index 8e5275f9..3a8f330a 100644 --- a/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue +++ b/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue @@ -2,11 +2,7 @@
添加条件
-
+
-
+
+type="text" class="input-max-width editable-title-input" @blur="blurEvent(index)" + v-mountedFocus v-model="item.name" />
{{ item.name }}
优先级{{ index + 1 }}
-
-
+
+
{{ item.showText }}
-
+
{{ NODE_DEFAULT_TEXT.get(NodeType.CONDITION_NODE) }}
-
-
+
+ +
+
+
+ +
+ +
+
@@ -49,7 +54,7 @@
- +
@@ -74,14 +79,14 @@ const props = defineProps({ }) // 定义事件，更新父组件 const emits = defineEmits<{ - 'update:modelValue': [node : SimpleFlowNode | undefined] + 'update:modelValue': [node: SimpleFlowNode | undefined] }>() const currentNode = ref(props.flowNode) // const conditionNodes = computed(() => currentNode.value.conditionNodes); -watch(() => props.flowNode, (newValue) => { - currentNode.value = newValue; +watch(() => props.flowNode, (newValue) => { + currentNode.value = newValue; }); // TODO 测试后续去掉 // watch(() => conditionNodes, (newValue) => { @@ -90,17 +95,17 @@ watch(() => props.flowNode, (newValue) => { const showInputs = ref([]) // 失去焦点 -const blurEvent = (index:number) => { +const blurEvent = (index: number) => { showInputs.value[index] = false - const conditionNode = currentNode.value.conditionNodes?.at(index) as SimpleFlowNode; - conditionNode.name = conditionNode.name || '条件' + index + const conditionNode = currentNode.value.conditionNodes?.at(index) as SimpleFlowNode; + conditionNode.name = conditionNode.name || '条件' + index } // 点击条件名称 -const clickEvent = (index:number) => { +const clickEvent = (index: number) => { showInputs.value[index] = true } -const conditionNodeConfig = (nodeId:string) => { +const conditionNodeConfig = (nodeId: string) => { console.log('nodeId', nodeId); console.log("proxy.$refs", proxy.$refs); // TODO 测试后续去掉 @@ -109,29 +114,31 @@ const conditionNodeConfig = (nodeId:string) => { conditionNode.open() } +// 新增条件 const addCondition = () => { - const conditionNodes = currentNode.value.conditionNodes; + const conditionNodes = currentNode.value.conditionNodes; if (conditionNodes) { const len = conditionNodes.length let lastIndex = len - 1 const conditionData: SimpleFlowNode = { - id: generateUUID(), - name: '条件'+len, - showText : '', + id: 'Flow_' + generateUUID(), + name: '条件' + len, + showText: '', type: NodeType.CONDITION_NODE, childNode: undefined, conditionNodes: [], attributes: { conditionType: 1, - defaultCondition: false + defaultFlow: false } } conditionNodes.splice(lastIndex, 0, conditionData) } } -const deleteCondition = (index:number) => { - const conditionNodes = currentNode.value.conditionNodes; +// 删除条件 +const deleteCondition = (index: number) => { + const conditionNodes = currentNode.value.conditionNodes; if (conditionNodes) { conditionNodes.splice(index, 1) if (conditionNodes.length == 1) { @@ -142,6 +149,17 @@ const deleteCondition = (index:number) => { } } +// 移动节点 +const moveNode = (index: number, to: number) => { + // -1 ：向左 1： 向右 + if (currentNode.value.conditionNodes) { + currentNode.value.conditionNodes[index] = currentNode.value.conditionNodes.splice(index + to, + 1, currentNode.value.conditionNodes[index])[0] + } + +} + + diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue index a77012d5..4cba510a 100644 --- a/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue +++ b/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue @@ -28,7 +28,7 @@
-
+
diff --git a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss index 3522fa9d..6cceb074 100644 --- a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss +++ b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss @@ -95,6 +95,10 @@ .node-toolbar { opacity: 1; } + + .branch-node-move { + display: flex; + } } // 普通节点标题 @@ -181,24 +185,74 @@ } } + //条件节点内容 + .branch-node-content { + display: flex; + min-height: 32px; + padding: 4px 8px; + margin-top: 4px; + line-height: 32px; + align-items: center; + color: #111f2c; + border-radius: 4px; + + .branch-node-text { + overflow: hidden; + font-size: 14px; + line-height: 24px; + text-overflow: ellipsis; + word-break: break-all; + -webkit-line-clamp: 2; /* 这将限制文本显示为两行 */ + -webkit-box-orient: vertical; + } + } + + // 节点操作 ：删除 .node-toolbar { opacity: 0; position: absolute; - top: -5px; - right: -8px; + top: -25px; + right: 0px; display: flex; .toolbar-icon { text-align: center; vertical-align: middle; - color: #6d6c6e; + color: #000; } } + + // 条件节点左右移动 + .branch-node-move { + position: absolute; + width: 10px; + cursor: pointer; + display: none; + align-items: center; + height: 100%; + justify-content: center; + } + + .move-node-left { + left: -2px; + top: 0px; + background: rgba(126, 134, 142, .08); + border-top-left-radius: 8px; + border-bottom-left-radius: 8px; + } + + .move-node-right { + right: -2px; + top: 0px; + background: rgba(126,134,142,.08); + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } } .node-config-error { - border-color: #ff5219; + border-color: #ff5219 !important; } // 普通节点包装 .node-wrapper {