yudao
/
admin-vue3
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vue3.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

【功能完善】仿钉钉流程浏览功能完善

pull/582/head
jason 2024-10-29 21:24:03 +08:00
parent c9b12c8b39
commit 0284893b4a
8 changed files with 34 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
View File

@ -1,7 +1,10 @@
<template>
<div class="node-wrapper">
<div class="node-container">
<div class="node-box" :class="{ 'node-config-error': !currentNode.showText }">
<div
class="node-box"
:class="[{ 'node-config-error': !currentNode.showText }, `${useTaskStatusClass(currentNode?.activityStatus)}`]"
>
<div class="node-title-container">
<div class="node-title-icon copy-task"><span class="iconfont icon-copy"></span></div>
<input
@ -36,13 +39,17 @@
<!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
<NodeHandler v-if="currentNode" v-model:child-node="currentNode.childNode" />
</div>
<CopyTaskNodeConfig v-if="!readonly && currentNode" ref="nodeSetting" :flow-node="currentNode" />
<CopyTaskNodeConfig
v-if="!readonly && currentNode"
ref="nodeSetting"
:flow-node="currentNode"
/>
</div>
</template>
<script setup lang="ts">
import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from '../consts'
import NodeHandler from '../NodeHandler.vue'
import { useNodeName2, useWatchNode } from '../node'
import { useNodeName2, useWatchNode, useTaskStatusClass } from '../node'
import CopyTaskNodeConfig from '../nodes-config/CopyTaskNodeConfig.vue'
defineOptions({
name: 'CopyTaskNode'
@ -58,7 +65,7 @@ const emits = defineEmits<{
'update:flowNode': [node: SimpleFlowNode | undefined]
}>()
// 是否只读
const readonly = inject<Boolean>('readonly')
const readonly = inject<Boolean>('readonly')
// 监控节点的变化
const currentNode = useWatchNode(props)
// 节点名称编辑

4
src/components/SimpleProcessDesignerV2/src/nodes/EndEventNode.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="end-node-wrapper">
<div class="end-node-box" :class="taskStatusClass">
<div class="end-node-box" :class="`${useTaskStatusClass(currentNode?.activityStatus)}`">
<span class="node-fixed-name" title="结束">结束</span>
</div>
</div>
@ -20,8 +20,6 @@ const props = defineProps({
})
// 监控节点变化
const currentNode = useWatchNode(props)
// 节点任务状态样式
const taskStatusClass = useTaskStatusClass(currentNode.value?.activityStatus)
</script>
<style lang="scss" scoped></style>

7
src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="branch-node-wrapper">
<div class="branch-node-container">
<div v-if="readonly" class="branch-node-readonly" :class="taskStatusClass">
<span class="iconfont icon-exclusive icon-size"></span>
<div v-if="readonly" class="branch-node-readonly" :class="`${useTaskStatusClass(currentNode?.activityStatus)}`">
<span class="iconfont icon-exclusive icon-size condition"></span>
</div>
<el-button v-else class="branch-node-add" color="#67c23a" @click="addCondition" plain
>添加条件</el-button
@ -122,9 +122,6 @@ const emits = defineEmits<{
// 是否只读
const readonly = inject<Boolean>('readonly')
const currentNode = ref<SimpleFlowNode>(props.flowNode)
// 节点状态样式
const taskStatusClass = useTaskStatusClass(currentNode.value?.activityStatus)
watch(
() => props.flowNode,
(newValue) => {

7
src/components/SimpleProcessDesignerV2/src/nodes/InclusiveNode.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="branch-node-wrapper">
<div class="branch-node-container">
<div v-if="readonly" class="branch-node-readonly">
<span class="iconfont icon-inclusive icon-size"></span>
<div v-if="readonly" class="branch-node-readonly" :class="`${useTaskStatusClass(currentNode?.activityStatus)}`" >
<span class="iconfont icon-inclusive icon-size inclusive"></span>
</div>
<el-button v-else class="branch-node-add" color="#345da2" @click="addCondition" plain>添加条件</el-button>
<div
@ -20,7 +20,7 @@
</template>
<div class="node-wrapper">
<div class="node-container">
<div class="node-box" :class="{ 'node-config-error': !item.showText }">
<div class="node-box" :class="[{ 'node-config-error': !item.showText }, `${useTaskStatusClass(item.activityStatus)}`]">
<div class="branch-node-title-container">
<div v-if="showInputs[index]">
<input
@ -88,6 +88,7 @@
import NodeHandler from '../NodeHandler.vue'
import ProcessNodeTree from '../ProcessNodeTree.vue'
import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from '../consts'
import { useTaskStatusClass } from '../node'
import { getDefaultInclusiveConditionNodeName } from '../utils'
import { generateUUID } from '@/utils'
import ConditionNodeConfig from '../nodes-config/ConditionNodeConfig.vue'

8
src/components/SimpleProcessDesignerV2/src/nodes/ParallelNode.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="branch-node-wrapper">
<div class="branch-node-container">
<div v-if="readonly" class="branch-node-readonly">
<span class="iconfont icon-parallel icon-size"></span>
<div v-if="readonly" class="branch-node-readonly" :class="`${useTaskStatusClass(currentNode?.activityStatus)}`">
<span class="iconfont icon-parallel icon-size parallel"></span>
</div>
<el-button v-else class="branch-node-add" color="#626aef" @click="addCondition" plain>添加分支</el-button>
<div
@ -20,7 +20,7 @@
</template>
<div class="node-wrapper">
<div class="node-container">
<div class="node-box">
<div class="node-box" :class="`${useTaskStatusClass(item.activityStatus)}`">
<div class="branch-node-title-container">
<div v-if="showInputs[index]">
<input
@ -73,8 +73,8 @@
import NodeHandler from '../NodeHandler.vue'
import ProcessNodeTree from '../ProcessNodeTree.vue'
import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from '../consts'
import { useTaskStatusClass } from '../node'
import { generateUUID } from '@/utils'
const { proxy } = getCurrentInstance() as any
defineOptions({
name: 'ParallelNode'

4
src/components/SimpleProcessDesignerV2/src/nodes/StartUserNode.vue
View File

@ -3,7 +3,7 @@
<div class="node-container">
<div
class="node-box"
:class="[{ 'node-config-error': !currentNode.showText }, `${taskStatusClass}`]"
:class="[{ 'node-config-error': !currentNode.showText }, `${useTaskStatusClass(currentNode?.activityStatus)}`]"
>
<div class="node-title-container">
<div class="node-title-icon start-user"
@ -59,8 +59,6 @@ const emits = defineEmits<{
}>()
// 监控节点变化
const currentNode = useWatchNode(props)
// 节点任务状态样式
const taskStatusClass = useTaskStatusClass(currentNode.value?.activityStatus)
// 节点名称编辑
const { showInput, blurEvent, clickTitle } = useNodeName2(currentNode, NodeType.START_USER_NODE)

5
src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
View File

@ -3,7 +3,7 @@
<div class="node-container">
<div
class="node-box"
:class="[{ 'node-config-error': !currentNode.showText }, `${taskStatusClass}`]"
:class="[{ 'node-config-error': !currentNode.showText }, `${useTaskStatusClass(currentNode?.activityStatus)}`]"
>
<div class="node-title-container">
<div class="node-title-icon user-task"><span class="iconfont icon-approve"></span></div>
@ -69,8 +69,7 @@ const emits = defineEmits<{
const readonly = inject<Boolean>('readonly')
// 监控节点变化
const currentNode = useWatchNode(props)
// 节点状态样式
const taskStatusClass = useTaskStatusClass(currentNode.value?.activityStatus)
// 节点名称编辑
const { showInput, blurEvent, clickTitle } = useNodeName2(currentNode, NodeType.START_USER_NODE)
const nodeSetting = ref()

10
src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
View File

@ -1096,7 +1096,15 @@
.icon-size {
font-size: 22px;
color: #67c23a;
&.condition {
color: #67c23a;
}
&.parallel {
color: #626aef;
}
&.inclusive {
color: #345da2;
}
}
}