Skip to content

Commit 0284893

Browse files
cooling-jasoncooling-jason
committed
【功能完善】仿钉钉流程浏览功能完善
1 parent c9b12c8 commit 0284893

File tree

8 files changed

+34
-26
lines changed

8 files changed

+34
-26
lines changed

‎src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
<template>
22
<div class="node-wrapper">
33
<div class="node-container">
4-
<div class="node-box" :class="{ 'node-config-error': !currentNode.showText }">
4+
<div
5+
class="node-box"
6+
:class="[{ 'node-config-error': !currentNode.showText }, `${useTaskStatusClass(currentNode?.activityStatus)}`]"
7+
>
58
<div class="node-title-container">
69
<div class="node-title-icon copy-task"><span class="iconfont icon-copy"></span></div>
710
<input
@@ -36,13 +39,17 @@
3639
<!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
3740
<NodeHandler v-if="currentNode" v-model:child-node="currentNode.childNode" />
3841
</div>
39-
<CopyTaskNodeConfig v-if="!readonly && currentNode" ref="nodeSetting" :flow-node="currentNode" />
42+
<CopyTaskNodeConfig
43+
v-if="!readonly && currentNode"
44+
ref="nodeSetting"
45+
:flow-node="currentNode"
46+
/>
4047
</div>
4148
</template>
4249
<script setup lang="ts">
4350
import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from '../consts'
4451
import NodeHandler from '../NodeHandler.vue'
45-
import { useNodeName2, useWatchNode } from '../node'
52+
import { useNodeName2, useWatchNode, useTaskStatusClass } from '../node'
4653
import CopyTaskNodeConfig from '../nodes-config/CopyTaskNodeConfig.vue'
4754
defineOptions({
4855
name: 'CopyTaskNode'
@@ -58,7 +65,7 @@ const emits = defineEmits<{
5865
'update:flowNode': [node: SimpleFlowNode | undefined]
5966
}>()
6067
// 是否只读
61-
const readonly = inject<Boolean>('readonly')
68+
const readonly = inject<Boolean>('readonly')
6269
// 监控节点的变化
6370
const currentNode = useWatchNode(props)
6471
// 节点名称编辑

‎src/components/SimpleProcessDesignerV2/src/nodes/EndEventNode.vue

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div class="end-node-wrapper">
3-
<div class="end-node-box" :class="taskStatusClass">
3+
<div class="end-node-box" :class="`${useTaskStatusClass(currentNode?.activityStatus)}`">
44
<span class="node-fixed-name" title="结束">结束</span>
55
</div>
66
</div>
@@ -20,8 +20,6 @@ const props = defineProps({
2020
})
2121
// 监控节点变化
2222
const currentNode = useWatchNode(props)
23-
// 节点任务状态样式
24-
const taskStatusClass = useTaskStatusClass(currentNode.value?.activityStatus)
2523
2624
</script>
2725
<style lang="scss" scoped></style>

‎src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<template>
22
<div class="branch-node-wrapper">
33
<div class="branch-node-container">
4-
<div v-if="readonly" class="branch-node-readonly" :class="taskStatusClass">
5-
<span class="iconfont icon-exclusive icon-size"></span>
4+
<div v-if="readonly" class="branch-node-readonly" :class="`${useTaskStatusClass(currentNode?.activityStatus)}`">
5+
<span class="iconfont icon-exclusive icon-size condition"></span>
66
</div>
77
<el-button v-else class="branch-node-add" color="#67c23a" @click="addCondition" plain
88
>添加条件</el-button
@@ -122,9 +122,6 @@ const emits = defineEmits<{
122122
// 是否只读
123123
const readonly = inject<Boolean>('readonly')
124124
const currentNode = ref<SimpleFlowNode>(props.flowNode)
125-
// 节点状态样式
126-
const taskStatusClass = useTaskStatusClass(currentNode.value?.activityStatus)
127-
128125
watch(
129126
() => props.flowNode,
130127
(newValue) => {

‎src/components/SimpleProcessDesignerV2/src/nodes/InclusiveNode.vue

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<template>
22
<div class="branch-node-wrapper">
33
<div class="branch-node-container">
4-
<div v-if="readonly" class="branch-node-readonly">
5-
<span class="iconfont icon-inclusive icon-size"></span>
4+
<div v-if="readonly" class="branch-node-readonly" :class="`${useTaskStatusClass(currentNode?.activityStatus)}`" >
5+
<span class="iconfont icon-inclusive icon-size inclusive"></span>
66
</div>
77
<el-button v-else class="branch-node-add" color="#345da2" @click="addCondition" plain>添加条件</el-button>
88
<div
@@ -20,7 +20,7 @@
2020
</template>
2121
<div class="node-wrapper">
2222
<div class="node-container">
23-
<div class="node-box" :class="{ 'node-config-error': !item.showText }">
23+
<div class="node-box" :class="[{ 'node-config-error': !item.showText }, `${useTaskStatusClass(item.activityStatus)}`]">
2424
<div class="branch-node-title-container">
2525
<div v-if="showInputs[index]">
2626
<input
@@ -88,6 +88,7 @@
8888
import NodeHandler from '../NodeHandler.vue'
8989
import ProcessNodeTree from '../ProcessNodeTree.vue'
9090
import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from '../consts'
91+
import { useTaskStatusClass } from '../node'
9192
import { getDefaultInclusiveConditionNodeName } from '../utils'
9293
import { generateUUID } from '@/utils'
9394
import ConditionNodeConfig from '../nodes-config/ConditionNodeConfig.vue'

‎src/components/SimpleProcessDesignerV2/src/nodes/ParallelNode.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<template>
22
<div class="branch-node-wrapper">
33
<div class="branch-node-container">
4-
<div v-if="readonly" class="branch-node-readonly">
5-
<span class="iconfont icon-parallel icon-size"></span>
4+
<div v-if="readonly" class="branch-node-readonly" :class="`${useTaskStatusClass(currentNode?.activityStatus)}`">
5+
<span class="iconfont icon-parallel icon-size parallel"></span>
66
</div>
77
<el-button v-else class="branch-node-add" color="#626aef" @click="addCondition" plain>添加分支</el-button>
88
<div
@@ -20,7 +20,7 @@
2020
</template>
2121
<div class="node-wrapper">
2222
<div class="node-container">
23-
<div class="node-box">
23+
<div class="node-box" :class="`${useTaskStatusClass(item.activityStatus)}`">
2424
<div class="branch-node-title-container">
2525
<div v-if="showInputs[index]">
2626
<input
@@ -73,8 +73,8 @@
7373
import NodeHandler from '../NodeHandler.vue'
7474
import ProcessNodeTree from '../ProcessNodeTree.vue'
7575
import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from '../consts'
76+
import { useTaskStatusClass } from '../node'
7677
import { generateUUID } from '@/utils'
77-
7878
const { proxy } = getCurrentInstance() as any
7979
defineOptions({
8080
name: 'ParallelNode'

‎src/components/SimpleProcessDesignerV2/src/nodes/StartUserNode.vue

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<div class="node-container">
44
<div
55
class="node-box"
6-
:class="[{ 'node-config-error': !currentNode.showText }, `${taskStatusClass}`]"
6+
:class="[{ 'node-config-error': !currentNode.showText }, `${useTaskStatusClass(currentNode?.activityStatus)}`]"
77
>
88
<div class="node-title-container">
99
<div class="node-title-icon start-user"
@@ -59,8 +59,6 @@ const emits = defineEmits<{
5959
}>()
6060
// 监控节点变化
6161
const currentNode = useWatchNode(props)
62-
// 节点任务状态样式
63-
const taskStatusClass = useTaskStatusClass(currentNode.value?.activityStatus)
6462
// 节点名称编辑
6563
const { showInput, blurEvent, clickTitle } = useNodeName2(currentNode, NodeType.START_USER_NODE)
6664

‎src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<div class="node-container">
44
<div
55
class="node-box"
6-
:class="[{ 'node-config-error': !currentNode.showText }, `${taskStatusClass}`]"
6+
:class="[{ 'node-config-error': !currentNode.showText }, `${useTaskStatusClass(currentNode?.activityStatus)}`]"
77
>
88
<div class="node-title-container">
99
<div class="node-title-icon user-task"><span class="iconfont icon-approve"></span></div>
@@ -69,8 +69,7 @@ const emits = defineEmits<{
6969
const readonly = inject<Boolean>('readonly')
7070
// 监控节点变化
7171
const currentNode = useWatchNode(props)
72-
// 节点状态样式
73-
const taskStatusClass = useTaskStatusClass(currentNode.value?.activityStatus)
72+
7473
// 节点名称编辑
7574
const { showInput, blurEvent, clickTitle } = useNodeName2(currentNode, NodeType.START_USER_NODE)
7675
const nodeSetting = ref()

‎src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1096,7 +1096,15 @@
10961096

10971097
.icon-size {
10981098
font-size: 22px;
1099-
color: #67c23a;
1099+
&.condition {
1100+
color: #67c23a;
1101+
}
1102+
&.parallel {
1103+
color: #626aef;
1104+
}
1105+
&.inclusive {
1106+
color: #345da2;
1107+
}
11001108
}
11011109
}
11021110

0 commit comments

Comments
 (0)