Skip to content

phsl / admin

Go to a project
Commit 11b7cf32 by jason
Options

仿钉钉设计流程：增加包容分支

parent 32d2eb11
Showing with 126 additions and 30 deletions
src/components/SimpleProcessDesigner/src/addNode.vue
......@@ -42,6 +42,12 @@
</div>
<p>并行分支</p>
</a>
<a class="add-node-popover-item condition" @click="addType(7)">
<div class="item-wrapper">
<span class="iconfont icon-Inclusive"></span>
</div>
<p>包容分支</p>
</a>
</div>
<template #reference>
<button class="btn" type="button" v-if="showAddButton">
......@@ -110,7 +116,7 @@ const addType = (type: number) => {
childNode: props.childNodeP,
conditionNodes: [
{
name: '条件1',
name: '分支1',
error: true,
type: 3,
priorityLevel: 1,
......@@ -157,6 +163,35 @@ const addType = (type: number) => {
}
emits('update:childNodeP', data)
}
// 包容分支 fork
if (type === NodeType.INCLUSIVE_NODE_FORK) {
const data = {
name: '包容分支_FORK',
type: 7,
id: 'GateWay_' + generateUUID(),
conditionNodes: [
{
name: '分支1',
error: true,
type: 3,
childNode: null
},
{
name: '其它情况',
type: 3,
childNode: null
}
],
childNode: {
id: 'GateWay_' + generateUUID(),
name: '包容分支_JOIN',
type: 8,
error: true,
childNode: props.childNodeP,
}
}
emits('update:childNodeP', data)
}
// if (type != 4) {
// var data
// if (type == 1) {
......
src/components/SimpleProcessDesigner/src/consts.ts
......@@ -28,7 +28,15 @@ export enum NodeType {
/**
* 并行分支聚合
*/
PARALLEL_NODE_JOIN = 6
PARALLEL_NODE_JOIN = 6,
/**
* 包容分支分叉节点
*/
INCLUSIVE_NODE_FORK = 7,
/**
* 包容分支聚合节点
*/
INCLUSIVE_NODE_JOIN = 8
}
export const NODE_BG_COLOR = new Map()
......@@ -48,8 +56,8 @@ export type WorkFlowNode = {
id: string,
type: NodeType,
name: string,
attributes: Object | undefined,
attributes: any,
// 操作人
childNode?: WorkFlowNode | undefined,
conditionNodes: WorkFlowNode[] | undefined
conditionNodes: WorkFlowNode[]
}
\ No newline at end of file
src/components/SimpleProcessDesigner/src/nodeWrap.vue
......@@ -71,8 +71,8 @@
> -->
<i
class="anticon anticon-close close"
@click="delTerm(index)"
v-if="index != nodeConfig.conditionNodes?.length - 1"
@click="delTerm(nodeConfig.type,index)"
v-if="nodeConfig.conditionNodes && index != nodeConfig.conditionNodes?.length - 1"
></i>
</div>
<div class="auto-judge" :class="isTried && item.error ? 'error active' : ''">
......@@ -145,6 +145,55 @@
<div class="top-left-cover-line"></div>
<div class="bottom-left-cover-line"></div>
</template>
<template v-if="index === nodeConfig.conditionNodes.length - 1">
<div class="top-right-cover-line"></div>
<div class="bottom-right-cover-line"></div>
</template>
</div>
</div>
<addNode v-model:childNodeP="nodeConfig.childNode" :show-add-button="false" />
</div>
</div>
<div class="branch-wrap" v-if="nodeConfig.type == 7">
<div class="branch-box-wrap">
<div class="branch-box">
<button class="add-branch" @click="addTerm(nodeConfig.type)">添加分支</button>
<div class="col-box" v-for="(item, index) in nodeConfig.conditionNodes" :key="index">
<div class="condition-node">
<div class="condition-node-box">
<div class="title-wrapper" :style="`background: rgb(${bgColors[nodeConfig.type]});`">
<input
v-if="isInputList[index]"
type="text"
class="ant-input editable-title-input"
@blur="blurEvent(index)"
@focus="$event.currentTarget?.select()"
v-mountedFoucs
v-model="item.name"
/>
<span v-else class="editable-title" @click="clickEvent(index)">
{{ item.name }}
</span>
<i
class="anticon anticon-close close"
@click="delTerm(nodeConfig.type,index)"
v-if="index != nodeConfig.conditionNodes?.length - 1"
></i>
</div>
<div class="auto-judge" :class="isTried && item.error ? 'error active' : ''">
<div class="content">{{ conditionStr(nodeConfig, index) }}</div>
<div class="error_tip" v-if="isTried && item.error">
<i class="anticon anticon-exclamation-circle"></i>
</div>
</div>
<addNode v-model:childNodeP="item.childNode" />
</div>
</div>
<nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" />
<template v-if="index == 0">
<div class="top-left-cover-line"></div>
<div class="bottom-left-cover-line"></div>
</template>
<template v-if="index == nodeConfig.conditionNodes.length - 1">
<div class="top-right-cover-line"></div>
<div class="bottom-right-cover-line"></div>
......@@ -154,7 +203,7 @@
<addNode v-model:childNodeP="nodeConfig.childNode" :show-add-button="false" />
</div>
</div>
<div class="node-wrap" v-if="nodeConfig.type === 6">
<div class="node-wrap" v-if="nodeConfig.type === NodeType.PARALLEL_NODE_JOIN || nodeConfig.type === NodeType.INCLUSIVE_NODE_JOIN">
<div class="node-wrap-box">
<div class="content">
<div class="text">聚合</div>
......@@ -178,7 +227,7 @@ import {
import { WorkFlowNode, NodeType } from './consts'
import { useWorkFlowStoreWithOut } from '@/store/modules/simpleWorkflow'
let _uid = getCurrentInstance().uid
import { generateUUID } from '@/utils'
let props = defineProps({
nodeConfig: {
type: Object as () => WorkFlowNode,
......@@ -293,18 +342,21 @@ const delNode = () => {
const addTerm = (type:number) => {
const len = props.nodeConfig.conditionNodes.length
let lastIndex = props.nodeConfig.conditionNodes.length - 1
let nodeName = '条件' + len
let nodeName = '分支' + len
if(type === NodeType.PARALLEL_NODE_FORK) {
nodeName = '并行' + (len+1);
lastIndex = props.nodeConfig.conditionNodes.length;
}
// eslint-disable-next-line vue/no-mutating-props
props.nodeConfig.conditionNodes.splice(lastIndex, 0, {
const conditionData = {
id: 'SequenceFlow'+ generateUUID(),
name: nodeName,
type: 3,
conditionList: [],
childNode: null
})
type: NodeType.CONDITION_NODE,
childNode: undefined,
conditionNodes:[],
attributes : undefined
};
// eslint-disable-next-line vue/no-mutating-props
props.nodeConfig.conditionNodes.splice(lastIndex, 0, conditionData)
resetConditionNodesErr()
emits('update:nodeConfig', props.nodeConfig)
}
......@@ -320,7 +372,7 @@ const delTerm = (nodeType: number, index: number) => {
props.nodeConfig.conditionNodes.map((item, index) => {
// item.priorityLevel = index + 1
if (index !== props.nodeConfig.conditionNodes.length - 1) {
item.name = `条件${index + 1}`
item.name = `分支${index + 1}`
}
})
}
......@@ -328,7 +380,7 @@ const delTerm = (nodeType: number, index: number) => {
resetConditionNodesErr()
emits('update:nodeConfig', props.nodeConfig)
if (props.nodeConfig.conditionNodes.length == 1) {
if (nodeType === NodeType.PARALLEL_NODE_FORK) {
if (nodeType === NodeType.PARALLEL_NODE_FORK || nodeType === NodeType.INCLUSIVE_NODE_FORK) {
const joinNode = props.nodeConfig.childNode;
if (joinNode?.childNode) {
if (props.nodeConfig.conditionNodes[0].childNode) {
......
src/components/SimpleProcessDesigner/src/util.ts
......@@ -164,18 +164,18 @@ export const conditionStr = (nodeConfig, index) => {
// }
}
export const dealStr = (str: string, obj) => {
const arr = []
const list = str.split(',')
for (const elem in obj) {
list.map((item) => {
if (item == elem) {
arr.push(obj[elem].value)
}
})
}
return arr.join('或')
}
// export const dealStr = (str: string, obj) => {
// const arr = []
// const list = str.split(',')
// for (const elem in obj) {
// list.map((item) => {
// if (item == elem) {
// arr.push(obj[elem].value)
// }
// })
// }
// return arr.join('或')
// }
export const removeEle = (arr, elem, key = 'id') => {
let includesIndex
......@@ -187,7 +187,7 @@ export const removeEle = (arr, elem, key = 'id') => {
arr.splice(includesIndex, 1)
}
export const bgColors = ['87, 106, 149', '255, 148, 62', '50, 150, 250','50, 150, 250','248, 107, 248','244, 118, 118']
export const bgColors = ['87, 106, 149', '255, 148, 62', '50, 150, 250','50, 150, 250','248, 107, 248','244, 118, 118','23, 148, 46','23, 148, 46']
export const placeholderList = ['发起人', '审核人', '抄送人']
export const setTypes = [
{ value: 1, label: '指定成员' },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment