odjbin/mosr-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix : 修复工作流流程新增bug

Browse Source
This commit is contained in:
odjbin
2024-03-25 17:08:48 +08:00
parent 5f867b1e0d
commit 1c93a97d58
17 changed files with 183 additions and 11441 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/views/workflow/process/ProcessEdit.vue
View File

@@ -74,7 +74,8 @@ const visible = ref(false)
const timer = ref(null)
const validComponents = ref(['processSetting', 'formDesign', 'processDesign'])
// const activeSelect = ref('formDesign')
const activeSelect = ref('processSetting')
// const activeSelect = ref('processSetting')
const activeSelect = ref('processDesign')
const validVisible = ref(false)
const validStep = ref(0)
const validResult = ref({})

3
src/views/workflow/process/ProcessSetting.vue
View File

@@ -7,7 +7,6 @@
import {useProcessStore} from '@/stores/processStore.js'
import {computed, defineExpose} from "vue";
const processStore = useProcessStore()
console.log(processStore.getDesign)
const processData = computed(() => {
return processStore.getDesign()
@@ -27,4 +26,4 @@ defineExpose({
<style scoped>
</style>
</style>

18
src/views/workflow/process/ProcessTree.vue
View File

@@ -11,6 +11,7 @@ import MergeNode from './nodes/MergeNode.vue'
import DelayNode from './nodes/DelayNode.vue'
import AddBranchNode from './nodes/AddBranchNode.vue'
import { debounce } from 'lodash'
import {defineExpose, h, render, ref} from 'vue'
import DefaultProps from "./DefaultNodeProps"
import {ElMessage, ElMessageBox} from 'element-plus'
@@ -47,7 +48,6 @@ const init = () => {
// 初始化map集合,以便数据整理
const initMapping = (node) => {
console.log("初始化数据", node)
node.forEach(nodeItem => {
processStore.nodeMap.set(nodeItem.id, nodeItem)
processStore.parentMap.set(nodeItem.parentId, nodeItem)
@@ -290,7 +290,7 @@ const selectNode = (node) => {
}
//处理节点插入逻辑
const insertNode = (type, parentNode) => {
const insertNode =debounce( (type, parentNode) => {
//插入新节点
let id = getRandomId();
updateParentId(id, parentNode.id)
@@ -321,9 +321,8 @@ const insertNode = (type, parentNode) => {
default:
break;
}
console.log('开始刷新')
init()
}
},1000)
/**
* 更新父id
* @param newId
@@ -700,8 +699,9 @@ defineExpose({
//background: #f5f6f6;
flex-direction: column;
align-items: center;
border-top: 2px solid #cccccc;
border-bottom: 2px solid #cccccc;
border-top: 2px solid #000000;
border-bottom: 2px solid #000000;
&:before {
content: "";
@@ -711,7 +711,7 @@ defineExpose({
margin: auto;
width: 2px;
height: 100%;
background-color: #CACACA;
background-color: #000000;
}
.line-top-left, .line-top-right, .line-bot-left, .line-bot-right {
@@ -745,7 +745,9 @@ defineExpose({
.add-branch-btn {
position: absolute;
width: 80px;
.el-button {
border-color: #000000;
}
.add-branch-btn-el {
z-index: 999;
position: absolute;

21
src/views/workflow/process/common/InsertButton.vue
View File

@@ -1,5 +1,5 @@
<template>
<el-popover :visible="visible" placement="bottom-start" title="添加流程节点" width="350">
<el-popover :visible="visible" placement="bottom-start" title="添加流程节点" width="306">
<div class="node-select">
<div @click="addApprovalNode">
<el-icon style="color:rgb(255, 148, 62);">
@@ -39,18 +39,29 @@
</div>
</div>
<template #reference>
<el-button :icon="Plus" slot="reference" type="primary" @click="visible = !visible" size="small" circle></el-button>
<!-- <el-button :icon="Plus" slot="reference" type="primary" @click="visible = !visible" size="small"-->
<!-- circle></el-button>-->
<el-icon @click="visible = !visible" color="#fff" style="background-color:#2E7CF0;border-radius: 50%;cursor: pointer" ><Plus /></el-icon>
</template>
</el-popover>
</template>
<script setup>
import {Plus } from '@element-plus/icons-vue'
import {Plus, Clock, SetUp, Operation, Share, Promotion, Coordinate} from '@element-plus/icons-vue'
const emit = defineEmits(['insertNode'])
const visible = ref(false)
onMounted(() => {
document.addEventListener('click', nullBlockClick)
})
/**
* 点击空白处, 清除选项选中状态
*/
const nullBlockClick = (e) => {
if(!(e.target.tagName==='svg'||e.target.tagName==='path')){
disVisible()
}
}
const addApprovalNode = () => {
emit('insertNode', "APPROVAL")
disVisible()

2
src/views/workflow/process/nodes/ApprovalNode.vue
View File

@@ -46,7 +46,7 @@ const assignedUser = computed(() => {
const headerBgc = computed(() => {
if (props.mode === 'design' || props.mode === 'view') {
return '#ff943e'
return '#F0A32E'
} else {
return props.config.props.headerBgc
}

2
src/views/workflow/process/nodes/CcNode.vue
View File

@@ -27,7 +27,7 @@ import {Promotion} from '@element-plus/icons-vue'
const headerBgc = computed(() => {
if (props.mode === 'design' || props.mode === 'view') {
return '#3296fa'
return '#2EC2F0'
} else {
return props.config.props.headerBgc
}

2
src/views/workflow/process/nodes/DelayNode.vue
View File

@@ -29,7 +29,7 @@ const errorInfo = ref('')
const headerBgc = computed(() => {
if (props.mode === 'design' || props.mode === 'view') {
return '#f25643'
return '#F05D2E'
} else {
return props.config.props.headerBgc
}

108
src/views/workflow/process/nodes/Node.vue
View File

@@ -1,53 +1,56 @@
<template>
<div :class="{'node': true, 'root': isRoot || !show, 'node-error-state': showError}">
<div v-if="show" @click="emit('selected')" :class="{'node-body': true, 'error': showError}">
<div class="node-body-header" :style="{'background-color': headerBgc}">
<el-icon v-if="headerIcon" size="15">
<component :is="headerIcon"/>
</el-icon>
<ellipsis class="name" hover-tip :content="title"/>
<el-icon v-if="!isRoot && designState" size="15" style="float:right;" @click="emit('delNode')">
<Close/>
</el-icon>
</div>
<div class="node-body-content">
<el-icon v-if="leftIcon">
<component :is="leftIcon"/>
</el-icon>
<template v-if="selectUser.show && mode === 'view'">
<div class="avatar_button">
<avatar-ellipsis :row="3" v-if="userInfo.length > 0" :user-info="userInfo"/>
<el-button type="primary" :icon="Plus" circle/>
</div>
</template>
<template v-else-if="showAvatar">
<span class="placeholder" v-if="userInfo.length === 0">{{ placeholder }}</span>
<avatar-ellipsis :row="3" :user-info="userInfo" v-else/>
</template>
<template v-else>
<span class="placeholder" v-if="(content || '').trim() === ''">{{ placeholder }}</span>
<ellipsis :row="3" :content="content" v-else/>
</template>
</div>
<div class="node-error" v-if="showError">
<el-tooltip effect="dark" :content="errorInfo" placement="top-start">
<el-icon><Warning /></el-icon>
</el-tooltip>
</div>
<div class="node-body-header" :style="{'background-color': headerBgc}">
<el-icon v-if="headerIcon" size="15">
<component :is="headerIcon"/>
</el-icon>
<ellipsis class="name" hover-tip :content="title"/>
<el-icon v-if="!isRoot && designState" size="15" style="float:right;" @click="emit('delNode')">
<Close/>
</el-icon>
</div>
<div class="node-body-content">
<el-icon v-if="leftIcon">
<component :is="leftIcon"/>
</el-icon>
<template v-if="selectUser.show && mode === 'view'">
<div class="avatar_button">
<avatar-ellipsis :row="3" v-if="userInfo.length > 0" :user-info="userInfo"/>
<el-button type="primary" :icon="Plus" circle/>
</div>
</template>
<template v-else-if="showAvatar">
<span class="placeholder" v-if="userInfo.length === 0">{{ placeholder }}</span>
<avatar-ellipsis :row="3" :user-info="userInfo" v-else/>
</template>
<template v-else>
<span class="placeholder" v-if="(content || '').trim() === ''">{{ placeholder }}</span>
<ellipsis :row="3" :content="content" v-else/>
</template>
</div>
<div class="node-error" v-if="showError">
<el-tooltip effect="dark" :content="errorInfo" placement="top-start">
<el-icon>
<Warning/>
</el-icon>
</el-tooltip>
</div>
</div>
<div class="node-footer">
<div v-if="merge" class="branch-merge">
<img data-v-1e7b1da5=""
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAABXlJREFUeF7tmm2IVGUUx3/nLkQUqxmkpAVhSPUllZX8EEGhvVgZQWCU6wcpsqi2mXtnoaBwoqLCufeO9oJYUJQiFZWlZPQCfYiIXkylstTyS1oWWeYWCe6cuLsz7t3r3Ll3du6907oz35bnPM9z/r895zznmWeECf6RCa6fDoBOBExwAp0UmOAB0CmCnRTopECbCZi2nivK1CMD7FpXlH+ydqctKZBz9QyjwkqFG4HzfKK/0gpvl/ulmBWIzAHkVmlRDFY2EihwwLFkRhYQxgzAtHW2CpcBc4CpOsg26eK7yVPYVFwu/9ZzPufq2VLhQBxhAk85lvSF2Y5l/3prjQlAvqR3IjwJTKqz6DeGssQuyLfBsbyjz6PcFgeAZyOwzLFk/QnrjHH/RACYtj6ncHuUCDWYXs7Lz367XEn3inB+1NzauMLGsiW3+u1b2b9lAH22LuiCD2IJED5yTbmiZpt3dAbKT7Hmjhjtdi25oPZnK/uH7dtUCpi2vqVwQ1wRWuHhWkW3StpTEb6IO3fIThhwTemuzWll/0QA5G39FTgrtghhs2vKELA7inra6d38HXvusOEnriWXHo+iFvZvGUDfap3VdYzdzQgIHmd5W7cBc2Ovoax1C3KXZ5/E/i3VgCQciNMD+J1Ug55yXjxo7QfgOdFKCvjyeL/C9MgoEBa5przrt0ti/+C+mRVB/8amrWsU7m2Ql/c5lqwJjre9CDZ1DMFnriXzw0SatvZW4FqBW6o2vwGvCGxyLPmw3rym9g8cwy0XQV8Ix2qEgH0C1ziWNCyceVu1uvZrriVLGqVGsainHO7mRyDynlCvEWupCI7Kxcat6BFg+OwW9ohyfSMIcQF44v/sZovAlRH1I7QVTwyAt1Cjy8hfh9hYvepGQogDoI74HYbSXzHwusTYl7FEAURVcdPWN+NAiAJQTzzCda4p+6N8iDPe1CkQZ8FAtY+E0AhA2uKHszTlT1QkhAHIQnwmAKr1IjQS6gHISnxmABpBCALIUnymAMIgKHxf6wMmH6E3cNTtSLLgZXoKNOgAR6UDyqyq7esKk3znfOriM48AXzc5AmGE1EFgWvXPTMS3DcAJ6TA6XDIT31YAoRCEc5JqcuKc8Kn3AVFO+E4BryvJVHzbI8BzwAdgi2vJ4ihgSY//nyIg8jqctPi2RYBp61wV5qsyR2BFVdhBhBe0wtdisNU15VAagoNrZh4BOVsfFcVCODVUoLBn6E2hIBvShpApgLyt3nvhRXFFCWxwLOmNaz8Wu8wA5G31ntQWNOukwD2OJc80Oy+ufSYAciVdJsJLcZ0K2nV1MbuUk51jnd9oXuoACmW9eHCQj49/T+j3RtiJslPgFxXmoVxe11nhPdeUq8clANPWPoXVQef9D6e1saEHVINHUBYF7Q1lnl2QL5OGkHoE5G19GRhVyBQ+L1tyST0xoa/Iygq3IOvGI4BdwIWjHBeecE15IExM3tYfgJmBOetcU2o9Q2IcsoiAw8Gf0qhyU7kgb4QCcPRTlNGvSspmtzD81J7kJ30AJX0fYeHo2seLjiXLG0TA78CZ/nGFB8uWPJakeG+t9AE4+jjK/XGLWtgTusBix5It4w5ArqRLRTjhl14IW40KD/kre66ki0R4p57IrgozS/2yb9wByDvqhbKX07Xv/oIavMfOP6pFb0pdgcqrbkFuTlp8JingbRIaBfEUHUOYltbtMPUaUNNo2rpeYWk8zSNWqvSmeSvMDIAnybT1boWnY0I4aigL7YJ4bXRqn0wBeCqG7gYVVqFcFapKWXt0gP5nizKQmvLqwpkDqAkaanmhB4MelOkI27XCDjHY7pqyN23htfXbBiArgVH7dABEETrZxzsRcLL/h6P0/Qc1qphfvB2K3wAAAABJRU5ErkJggg=="
alt="">
<svg-icon name="fenzhi" :class-name="'fen-icon'"/>
<!-- <img data-v-1e7b1da5=""-->
<!-- src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAABXlJREFUeF7tmm2IVGUUx3/nLkQUqxmkpAVhSPUllZX8EEGhvVgZQWCU6wcpsqi2mXtnoaBwoqLCufeO9oJYUJQiFZWlZPQCfYiIXkylstTyS1oWWeYWCe6cuLsz7t3r3Ll3du6907oz35bnPM9z/r895zznmWeECf6RCa6fDoBOBExwAp0UmOAB0CmCnRTopECbCZi2nivK1CMD7FpXlH+ydqctKZBz9QyjwkqFG4HzfKK/0gpvl/ulmBWIzAHkVmlRDFY2EihwwLFkRhYQxgzAtHW2CpcBc4CpOsg26eK7yVPYVFwu/9ZzPufq2VLhQBxhAk85lvSF2Y5l/3prjQlAvqR3IjwJTKqz6DeGssQuyLfBsbyjz6PcFgeAZyOwzLFk/QnrjHH/RACYtj6ncHuUCDWYXs7Lz367XEn3inB+1NzauMLGsiW3+u1b2b9lAH22LuiCD2IJED5yTbmiZpt3dAbKT7Hmjhjtdi25oPZnK/uH7dtUCpi2vqVwQ1wRWuHhWkW3StpTEb6IO3fIThhwTemuzWll/0QA5G39FTgrtghhs2vKELA7inra6d38HXvusOEnriWXHo+iFvZvGUDfap3VdYzdzQgIHmd5W7cBc2Ovoax1C3KXZ5/E/i3VgCQciNMD+J1Ug55yXjxo7QfgOdFKCvjyeL/C9MgoEBa5przrt0ti/+C+mRVB/8amrWsU7m2Ql/c5lqwJjre9CDZ1DMFnriXzw0SatvZW4FqBW6o2vwGvCGxyLPmw3rym9g8cwy0XQV8Ix2qEgH0C1ziWNCyceVu1uvZrriVLGqVGsainHO7mRyDynlCvEWupCI7Kxcat6BFg+OwW9ohyfSMIcQF44v/sZovAlRH1I7QVTwyAt1Cjy8hfh9hYvepGQogDoI74HYbSXzHwusTYl7FEAURVcdPWN+NAiAJQTzzCda4p+6N8iDPe1CkQZ8FAtY+E0AhA2uKHszTlT1QkhAHIQnwmAKr1IjQS6gHISnxmABpBCALIUnymAMIgKHxf6wMmH6E3cNTtSLLgZXoKNOgAR6UDyqyq7esKk3znfOriM48AXzc5AmGE1EFgWvXPTMS3DcAJ6TA6XDIT31YAoRCEc5JqcuKc8Kn3AVFO+E4BryvJVHzbI8BzwAdgi2vJ4ihgSY//nyIg8jqctPi2RYBp61wV5qsyR2BFVdhBhBe0wtdisNU15VAagoNrZh4BOVsfFcVCODVUoLBn6E2hIBvShpApgLyt3nvhRXFFCWxwLOmNaz8Wu8wA5G31ntQWNOukwD2OJc80Oy+ufSYAciVdJsJLcZ0K2nV1MbuUk51jnd9oXuoACmW9eHCQj49/T+j3RtiJslPgFxXmoVxe11nhPdeUq8clANPWPoXVQef9D6e1saEHVINHUBYF7Q1lnl2QL5OGkHoE5G19GRhVyBQ+L1tyST0xoa/Iygq3IOvGI4BdwIWjHBeecE15IExM3tYfgJmBOetcU2o9Q2IcsoiAw8Gf0qhyU7kgb4QCcPRTlNGvSspmtzD81J7kJ30AJX0fYeHo2seLjiXLG0TA78CZ/nGFB8uWPJakeG+t9AE4+jjK/XGLWtgTusBix5It4w5ArqRLRTjhl14IW40KD/kre66ki0R4p57IrgozS/2yb9wByDvqhbKX07Xv/oIavMfOP6pFb0pdgcqrbkFuTlp8JingbRIaBfEUHUOYltbtMPUaUNNo2rpeYWk8zSNWqvSmeSvMDIAnybT1boWnY0I4aigL7YJ4bXRqn0wBeCqG7gYVVqFcFapKWXt0gP5nizKQmvLqwpkDqAkaanmhB4MelOkI27XCDjHY7pqyN23htfXbBiArgVH7dABEETrZxzsRcLL/h6P0/Qc1qphfvB2K3wAAAABJRU5ErkJggg=="-->
<!-- alt="">-->
</div>
<div class="btn">
<insert-button v-if="designState" @insertNode="type => emit('insertNode', type)"/>
</div>
</div>
<!-- <user-picker v-if="selectUser.show" title="请选择系统用户" :multiple="selectUser.multiple" ref="userPicker"-->
<!-- :selected="_userInfo"-->
<!-- @ok="selectedUser"/>-->
<!-- <user-picker v-if="selectUser.show" title="请选择系统用户" :multiple="selectUser.multiple" ref="userPicker"-->
<!-- :selected="_userInfo"-->
<!-- @ok="selectedUser"/>-->
</div>
</template>
@@ -55,18 +58,19 @@
import InsertButton from '../common/InsertButton.vue'
import Ellipsis from '../common/Ellipsis.vue'
import AvatarEllipsis from '../common/AvatarEllipsis.vue'
import {defineProps,defineEmits} from "vue";
import SvgIcon from '@/components/svgIcon/index.vue'
import {Close, Warning, Plus} from '@element-plus/icons-vue'
const emit = defineEmits(['insertNode'])
import {Close,Warning,Plus} from '@element-plus/icons-vue'
const props = defineProps({
//是否为根节点
isRoot: {
type: Boolean,
default: false
},
nodeId:{
type:String,
default:()=>{
nodeId: {
type: String,
default: () => {
return "";
}
},
@@ -144,7 +148,7 @@ const props = defineProps({
}
})
const designState = computed(()=>{
const designState = computed(() => {
return props.mode === 'design'
})
@@ -165,7 +169,7 @@ const init = () => {
// }
}
init()
// init()
</script>
<style lang="scss" scoped>
@@ -185,15 +189,15 @@ init()
&:before {
content: '';
position: absolute;
top: -12px;
top: -9px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 0;
border-style: solid;
border-width: 8px 6px 4px;
border-color: #CACACA transparent transparent;
background: #F5F5F7;
border-color: #000000 transparent transparent;
background: #ffffff;
}
.node-body {
@@ -216,6 +220,7 @@ init()
}
.node-body-header {
text-align: center;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
padding: 5px 15px;
@@ -227,8 +232,8 @@ init()
}
.name {
height: 14px;
width: 150px;
//height: 14px;
//width: 150px;
display: inline-block
}
}
@@ -243,6 +248,7 @@ init()
display: flex;
//flex: 1;
flex-wrap: wrap;
button {
margin-top: 3px;
height: 40px;

12
src/views/workflow/process/nodes/RootNode.vue
View File

@@ -1,13 +1,13 @@
<template>
<node title="发起人" :is-root="true" :mode="mode" :content="content" show-avatar :user-info="config.props.assignedUser"
@selected="emit('selected')" @insertNode="type => emit('insertNode', type)"
placeholder="所有人" :header-bgc="config.props.headerBgc" :header-icon="UserFilled"/>
placeholder="所有人" :header-bgc="headerBgc" :header-icon="UserFilled"/>
</template>
<script setup>
import Node from './Node.vue'
import {UserFilled} from '@element-plus/icons-vue'
import {defineExpose, defineProps} from "vue";
import {computed, defineExpose, defineProps} from "vue";
const emit = defineEmits(['insertNode','selected'])
const props = defineProps({
@@ -34,6 +34,14 @@ const content = computed(() => {
}
})
const headerBgc = computed(() => {
if (props.mode === 'design' || props.mode === 'view') {
return '#2E7CF0'
} else {
return props.config.props.headerBgc
}
})
const validate = () => {
console.log("调用成功")

11
src/views/workflow/process/nodes/TriggerNode.vue
View File

@@ -31,12 +31,11 @@ const preview = computed(() => {
})
const headerBgc = computed(() => {
return '#47bc82'
// if (preview || !viewer) {
// return '#ff943e'
// } else {
// return props.config.props.headerBgc
// }
if (props.mode === 'design' || props.mode === 'view') {
return '#BE2EF0'
} else {
return props.config.props.headerBgc
}
})
const content = computed(() => {
return '请设置触发器'