Skip to content

phsl / admin

Go to a project
Commit 32d2eb11 by jason
Options

仿钉钉设计流程：增加并行分支

parent 556cac81
Showing with 300 additions and 95 deletions
src/components/SimpleProcessDesigner/src/addNode.vue
......@@ -6,7 +6,7 @@
<div class="add-node-popover-body">
<a class="add-node-popover-item approver" @click="addType(1)">
<div class="item-wrapper">
<span class="iconfont"></span>
<span class="iconfont icon-approve"></span>
</div>
<p>审批人</p>
</a>
......@@ -26,20 +26,26 @@
-->
<a class="add-node-popover-item notifier" @click="addType(2)">
<div class="item-wrapper">
<span class="iconfont"></span>
<span class="iconfont icon-copy"></span>
</div>
<p>抄送人</p>
</a>
<a class="add-node-popover-item condition" @click="addType(4)">
<div class="item-wrapper">
<span class="iconfont"></span>
<span class="iconfont icon-exclusive"></span>
</div>
<p>条件分支</p>
</a>
<a class="add-node-popover-item condition" @click="addType(5)">
<div class="item-wrapper">
<span class="iconfont icon-parallel"></span>
</div>
<p>并行分支</p>
</a>
</div>
<template #reference>
<button class="btn" type="button">
<span class="iconfont"></span>
<button class="btn" type="button" v-if="showAddButton">
<span><Icon icon="ep:plus" class="addIcon" :size="14" /></span>
</button>
</template>
</el-popover>
......@@ -47,66 +53,60 @@
</div>
</template>
<script lang="ts" setup>
import { NodeType } from './consts'
import { ref } from 'vue'
import { generateUUID } from '@/utils'
let props = defineProps({
childNodeP: {
type: Object,
default: () => ({})
},
showAddButton:{
type:Boolean,
default:true
}
})
let emits = defineEmits(['update:childNodeP'])
let visible = ref(false)
const addType = (type) => {
const addType = (type: number) => {
visible.value = false
if (type != 4) {
var data
if (type == 1) {
// data = {
// name: '审核人',
// error: true,
// type: 1,
// settype: 1,
// selectMode: 0,
// selectRange: 0,
// directorLevel: 1,
// examineMode: 1,
// noHanderAction: 1,
// examineEndDirectorLevel: 0,
// childNode: props.childNodeP,
// nodeUserList: []
// }
data = {
name: '审核人',
error: true,
type: 1,
// 审批节点配置
attributes : {
approveMethod : undefined,
candidateStrategy: undefined,
candidateParam: undefined
},
childNode: props.childNodeP
}
} else if (type == 2) {
data = {
name: '抄送人',
type: 2,
error: true,
// 抄送节点配置
attributes : {
candidateStrategy: undefined,
candidateParam: undefined
},
childNode: props.childNodeP
}
// 审核节点
if (type === NodeType.APPROVE_USER_NODE) {
const data = {
name: '审核人',
error: true,
type: 1,
// 审批节点配置
attributes: {
approveMethod: undefined,
candidateStrategy: undefined,
candidateParam: undefined
},
childNode: props.childNodeP
}
emits('update:childNodeP', data)
}
// 抄送节点
if (type === NodeType.CC_USER_NODE) {
const data = {
name: '抄送人',
type: 2,
error: true,
// 抄送节点配置
attributes: {
candidateStrategy: undefined,
candidateParam: undefined
},
childNode: props.childNodeP
}
emits('update:childNodeP', data)
} else {
emits('update:childNodeP', {
name: '路由',
}
// 条件分支
if (type === NodeType.EXCLUSIVE_NODE) {
const data = {
name: '条件分支',
type: 4,
id : 'GateWay_'+ generateUUID(),
id: 'GateWay_' + generateUUID(),
childNode: props.childNodeP,
conditionNodes: [
{
......@@ -125,8 +125,92 @@ const addType = (type) => {
childNode: null
}
]
})
}
emits('update:childNodeP', data)
}
// 并行分支 fork
if (type === NodeType.PARALLEL_NODE_FORK) {
const data = {
name: '并行分支_FORK',
type: 5,
id: 'GateWay_' + generateUUID(),
conditionNodes: [
{
name: '并行1',
error: true,
type: 3,
childNode: null
},
{
name: '并行2',
type: 3,
childNode: null
}
],
childNode: {
id: 'GateWay_' + generateUUID(),
name: '并行分支_JOIN',
type: 6,
error: true,
childNode: props.childNodeP,
}
}
emits('update:childNodeP', data)
}
// if (type != 4) {
// var data
// if (type == 1) {
// data = {
// name: '审核人',
// error: true,
// type: 1,
// // 审批节点配置
// attributes : {
// approveMethod : undefined,
// candidateStrategy: undefined,
// candidateParam: undefined
// },
// childNode: props.childNodeP
// }
// } else if (type == 2) {
// data = {
// name: '抄送人',
// type: 2,
// error: true,
// // 抄送节点配置
// attributes : {
// candidateStrategy: undefined,
// candidateParam: undefined
// },
// childNode: props.childNodeP
// }
// }
// emits('update:childNodeP', data)
// } else {
// emits('update:childNodeP', {
// name: '路由',
// type: 4,
// id : 'GateWay_'+ generateUUID(),
// childNode: props.childNodeP,
// conditionNodes: [
// {
// name: '条件1',
// error: true,
// type: 3,
// priorityLevel: 1,
// conditionList: [],
// childNode: null
// },
// {
// name: '其它情况',
// type: 3,
// priorityLevel: 2,
// conditionList: [],
// childNode: null
// }
// ]
// })
// }
}
</script>
<style scoped lang="scss">
......@@ -173,9 +257,9 @@ const addType = (type) => {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
.iconfont {
font-size: 16px;
.addIcon {
line-height: 30px;
color: #fff;
}
......
src/components/SimpleProcessDesigner/src/consts.ts
......@@ -18,9 +18,17 @@ export enum NodeType {
*/
CONDITION_NODE = 3,
/**
* 路由节点
* 条件分支节点
*/
ROUTER_NODE = 4
EXCLUSIVE_NODE = 4,
/**
* 并行分支分叉节点
*/
PARALLEL_NODE_FORK = 5,
/**
* 并行分支聚合
*/
PARALLEL_NODE_JOIN = 6
}
export const NODE_BG_COLOR = new Map()
......
src/components/SimpleProcessDesigner/src/util.ts
......@@ -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']
export const bgColors = ['87, 106, 149', '255, 148, 62', '50, 150, 250','50, 150, 250','248, 107, 248','244, 118, 118']
export const placeholderList = ['发起人', '审核人', '抄送人']
export const setTypes = [
{ value: 1, label: '指定成员' },
......
src/components/SimpleProcessDesigner/theme/workflow.css
......@@ -37,7 +37,7 @@
font-family: anticon!important
}
.anticon-close:before {
content: "\E633"
content: "\E633"
}
.anticon-right:before {
content: "\E61F"
......@@ -486,7 +486,7 @@ html {
height: 100%
}
@font-face {
/* @font-face {
font-family: IconFont;
src: url("//at.alicdn.com/t/font_135284_ph2thxxbzgf.eot");
src: url("//at.alicdn.com/t/font_135284_ph2thxxbzgf.eot?#iefix") format("embedded-opentype"), url("//at.alicdn.com/t/font_135284_ph2thxxbzgf.woff") format("woff"), url("//at.alicdn.com/t/font_135284_ph2thxxbzgf.ttf") format("truetype"), url("//at.alicdn.com/t/font_135284_ph2thxxbzgf.svg#IconFont") format("svg")
......@@ -499,6 +499,45 @@ html {
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: .2px;
-moz-osx-font-smoothing: grayscale
} */
@font-face {
font-family: "iconfont"; /* Project id 4495938 */
src: url('iconfont.woff2?t=1712392083512') format('woff2'),
url('iconfont.woff?t=1712392083512') format('woff'),
url('iconfont.ttf?t=1712392083512') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-Inclusive:before {
content: "\e602";
}
.icon-copy:before {
content: "\e7eb";
}
.icon-handle:before {
content: "\e61c";
}
.icon-exclusive:before {
content: "\e717";
}
.icon-approve:before {
content: "\e715";
}
.icon-parallel:before {
content: "\e688";
}
.fd-nav {
......
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