zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完善审批工作流设计器 

完善审批工作流设计器
This commit is contained in:
sc 2021-10-21 17:01:35 +08:00
parent feeb7f67d8
commit 8318e4e06c
9 changed files with 811 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

178
src/components/scWorkflow/index.vue
View File

@ -1,131 +1,141 @@
<!--
* @Descripttion: 仿钉钉流程设计器
* @version: 1.0
* @version: 1.1
* @Author: sakuya
* @Date: 2021年9月14日08:38:35
* @LastEditors:
* @LastEditTime:
* @LastEditors: sakuya
* @LastEditTime: 2021年10月28日23:07:06
-->
<template>
<div class="sc-workflow-design">
<div class="box-scale">
<node-wrap v-model="nodeConfig"></node-wrap>
<node-wrap v-if="nodeConfig" v-model="nodeConfig"></node-wrap>
<div class="end-node">
<div class="end-node-circle"></div>
<div class="end-node-text">流程结束</div>
</div>
</div>
<use-select v-if="selectVisible" ref="useselect" @closed="selectVisible=false"></use-select>
</div>
</template>
<script>
import nodeWrap from './nodeWrap'
import useSelect from './select'
export default {
provide(){
return {
select: this.selectHandle
}
},
props: {
modelValue: { type: Object, default: () => {} }
},
components: {
nodeWrap
nodeWrap,
useSelect
},
data() {
return {
nodeConfig: this.modelValue
nodeConfig: this.modelValue,
selectVisible: false
}
},
watch:{
modelValue(val){
this.nodeConfig = val
}
},
mounted() {
},
methods: {
selectHandle(type, data){
this.selectVisible = true
this.$nextTick(() => {
this.$refs.useselect.open(type, data)
})
}
}
}
</script>
<style lang="scss">
.sc-workflow-design {width: 100%;}
.sc-workflow-design .box-scale {display: inline-block;position: relative;width: 100%;padding: 54.5px 0px;align-items: flex-start;justify-content: center;flex-wrap: wrap;min-width: min-content;}
.box-scale {display: inline-block;position: relative;width: 100%;padding: 54.5px 0px;align-items: flex-start;justify-content: center;flex-wrap: wrap;min-width: min-content;}
.node-wrap {display: inline-flex;width: 100%;flex-flow: column wrap;justify-content: flex-start;align-items: center;padding: 0px 50px;position: relative;z-index: 1;}
.node-wrap-box {display: inline-flex;flex-direction: column;position: relative;width: 220px;min-height: 72px;flex-shrink: 0;background: rgb(255, 255, 255);border-radius: 4px;cursor: pointer;box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);}
.node-wrap-box::before {content: "";position: absolute;top: -12px;left: 50%;transform: translateX(-50%);width: 0px;border-style: solid;border-width: 8px 6px 4px;border-color: rgb(202, 202, 202) transparent transparent;background: #f6f8f9;}
.node-wrap-box.start-node:before {content: none}
.node-wrap-box .title {height:24px;line-height: 24px;color: #fff;padding-left: 16px;padding-right: 30px;border-radius: 4px 4px 0 0;position: relative;}
.node-wrap-box .title .icon {margin-right: 5px;}
.node-wrap-box .title .close {font-size: 15px;position: absolute;top:50%;transform: translateY(-50%);right:10px;display: none;}
.node-wrap-box .content {position: relative;padding: 15px;}
.node-wrap-box .content .placeholder {color: #999;}
.node-wrap-box:hover .close {display: block;}
.add-node-btn-box {width: 240px;display: inline-flex;flex-shrink: 0;position: relative;z-index: 1;}
.add-node-btn-box:before {content: "";position: absolute;top: 0px;left: 0px;right: 0px;bottom: 0px;z-index: -1;margin: auto;width: 2px;height: 100%;background-color: rgb(202, 202, 202);}
.add-node-btn {user-select: none;width: 240px;padding: 20px 0px 32px;display: flex;justify-content: center;flex-shrink: 0;flex-grow: 1;}
.add-node-btn span {}
.add-branch {justify-content: center;padding: 0px 10px;position: absolute;top: -16px;left: 50%;transform: translateX(-50%);transform-origin: center center;z-index: 1;display: inline-flex;align-items: center;}
.branch-wrap {display: inline-flex;width: 100%;}
.branch-box-wrap {display: flex;flex-flow: column wrap;align-items: center;min-height: 270px;width: 100%;flex-shrink: 0;}
.col-box {display: inline-flex;flex-direction: column;align-items: center;position: relative;background: #f6f8f9;}
.branch-box {display: flex;overflow: visible;min-height: 180px;height: auto;border-bottom: 2px solid #ccc;border-top: 2px solid #ccc;position: relative;margin-top: 15px;}
.branch-box .col-box::before {content: "";position: absolute;top: 0px;left: 0px;right: 0px;bottom: 0px;z-index: 0;margin: auto;width: 2px;height: 100%;background-color: rgb(202, 202, 202);}
.condition-node {display: inline-flex;flex-direction: column;min-height: 220px;}
.condition-node-box {padding-top: 30px;padding-right: 50px;padding-left: 50px;justify-content: center;align-items: center;flex-grow: 1;position: relative;display: inline-flex;flex-direction: column;}
.condition-node-box::before {content: "";position: absolute;top: 0px;left: 0px;right: 0px;bottom: 0px;margin: auto;width: 2px;height: 100%;background-color: rgb(202, 202, 202);}
.auto-judge {position: relative;width: 220px;min-height: 72px;background: rgb(255, 255, 255);border-radius: 4px;padding: 15px 15px;cursor: pointer;box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);}
.auto-judge::before {content: "";position: absolute;top: -12px;left: 50%;transform: translateX(-50%);width: 0px;border-style: solid;border-width: 8px 6px 4px;border-color: rgb(202, 202, 202) transparent transparent;background: rgb(245, 245, 247);}
.auto-judge .title {line-height: 16px;}
.auto-judge .title .node-title {color: #15BC83;}
.auto-judge .title .close {font-size: 15px;position: absolute;top:15px;right:15px;color: #999;display: none;}
.auto-judge .title .priority-title {position: absolute;top:15px;right:15px;color: #999;}
.auto-judge .content {position: relative;padding-top: 15px;}
.auto-judge .content .placeholder {color: #999;}
.auto-judge:hover {
.close {display: block;}
.priority-title {display: none;}
.sc-workflow-design {
.node-wrap {display: inline-flex;width: 100%;flex-flow: column wrap;justify-content: flex-start;align-items: center;padding: 0px 50px;position: relative;z-index: 1;}
.node-wrap-box {display: inline-flex;flex-direction: column;position: relative;width: 220px;min-height: 72px;flex-shrink: 0;background: rgb(255, 255, 255);border-radius: 4px;cursor: pointer;box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);}
.node-wrap-box::before {content: "";position: absolute;top: -12px;left: 50%;transform: translateX(-50%);width: 0px;border-style: solid;border-width: 8px 6px 4px;border-color: rgb(202, 202, 202) transparent transparent;background: #f6f8f9;}
.node-wrap-box.start-node:before {content: none}
.node-wrap-box .title {height:24px;line-height: 24px;color: #fff;padding-left: 16px;padding-right: 30px;border-radius: 4px 4px 0 0;position: relative;}
.node-wrap-box .title .icon {margin-right: 5px;}
.node-wrap-box .title .close {font-size: 15px;position: absolute;top:50%;transform: translateY(-50%);right:10px;display: none;}
.node-wrap-box .content {position: relative;padding: 15px;}
.node-wrap-box .content .placeholder {color: #999;}
.node-wrap-box:hover .close {display: block;}
.add-node-btn-box {width: 240px;display: inline-flex;flex-shrink: 0;position: relative;z-index: 1;}
.add-node-btn-box:before {content: "";position: absolute;top: 0px;left: 0px;right: 0px;bottom: 0px;z-index: -1;margin: auto;width: 2px;height: 100%;background-color: rgb(202, 202, 202);}
.add-node-btn {user-select: none;width: 240px;padding: 20px 0px 32px;display: flex;justify-content: center;flex-shrink: 0;flex-grow: 1;}
.add-node-btn span {}
.add-branch {justify-content: center;padding: 0px 10px;position: absolute;top: -16px;left: 50%;transform: translateX(-50%);transform-origin: center center;z-index: 1;display: inline-flex;align-items: center;}
.branch-wrap {display: inline-flex;width: 100%;}
.branch-box-wrap {display: flex;flex-flow: column wrap;align-items: center;min-height: 270px;width: 100%;flex-shrink: 0;}
.col-box {display: inline-flex;flex-direction: column;align-items: center;position: relative;background: #f6f8f9;}
.branch-box {display: flex;overflow: visible;min-height: 180px;height: auto;border-bottom: 2px solid #ccc;border-top: 2px solid #ccc;position: relative;margin-top: 15px;}
.branch-box .col-box::before {content: "";position: absolute;top: 0px;left: 0px;right: 0px;bottom: 0px;z-index: 0;margin: auto;width: 2px;height: 100%;background-color: rgb(202, 202, 202);}
.condition-node {display: inline-flex;flex-direction: column;min-height: 220px;}
.condition-node-box {padding-top: 30px;padding-right: 50px;padding-left: 50px;justify-content: center;align-items: center;flex-grow: 1;position: relative;display: inline-flex;flex-direction: column;}
.condition-node-box::before {content: "";position: absolute;top: 0px;left: 0px;right: 0px;bottom: 0px;margin: auto;width: 2px;height: 100%;background-color: rgb(202, 202, 202);}
.auto-judge {position: relative;width: 220px;min-height: 72px;background: rgb(255, 255, 255);border-radius: 4px;padding: 15px 15px;cursor: pointer;box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);}
.auto-judge::before {content: "";position: absolute;top: -12px;left: 50%;transform: translateX(-50%);width: 0px;border-style: solid;border-width: 8px 6px 4px;border-color: rgb(202, 202, 202) transparent transparent;background: rgb(245, 245, 247);}
.auto-judge .title {line-height: 16px;}
.auto-judge .title .node-title {color: #15BC83;}
.auto-judge .title .close {font-size: 15px;position: absolute;top:15px;right:15px;color: #999;display: none;}
.auto-judge .title .priority-title {position: absolute;top:15px;right:15px;color: #999;}
.auto-judge .content {position: relative;padding-top: 15px;}
.auto-judge .content .placeholder {color: #999;}
.auto-judge:hover {
.close {display: block;}
.priority-title {display: none;}
}
.top-left-cover-line, .top-right-cover-line {position: absolute;height: 3px;width: 50%;background-color: #f6f8f9;top: -2px;}
.bottom-left-cover-line, .bottom-right-cover-line {position: absolute;height: 3px;width: 50%;background-color: #f6f8f9;bottom: -2px;}
.top-left-cover-line {left: -1px;}
.top-right-cover-line {right: -1px;}
.bottom-left-cover-line {left: -1px;}
.bottom-right-cover-line {right: -1px;}
.end-node {border-radius: 50%;font-size: 14px;color: rgba(25,31,37,.4);text-align: left;}
.end-node-circle {width: 10px;height: 10px;margin: auto;border-radius: 50%;background: #dbdcdc;}
.end-node-text {margin-top: 5px;text-align: center;}
.auto-judge:hover {
.sort-left {display: flex;}
.sort-right {display: flex;}
}
.auto-judge .sort-left {position: absolute;top: 0;bottom: 0;z-index: 1;left: 0;display: none;justify-content: center;align-items: center;flex-direction: column;}
.auto-judge .sort-right {position: absolute;top: 0;bottom: 0;z-index: 1;right: 0;display: none;justify-content: center;align-items: center;flex-direction: column;}
.auto-judge .sort-left:hover, .auto-judge .sort-right:hover {background: #eee;}
.auto-judge:after {pointer-events: none;content: "";position: absolute;top:0;bottom:0;left:0;right:0;z-index: 2;border-radius: 4px;transition: all .1s;}
.auto-judge:hover:after {border: 1px solid #3296fa;box-shadow: 0 0 6px 0 rgba(50,150,250,.3);}
.node-wrap-box:after {pointer-events: none;content: "";position: absolute;top:0;bottom:0;left:0;right:0;z-index: 2;border-radius: 4px;transition: all .1s;}
.node-wrap-box:hover:after {border: 1px solid #3296fa;box-shadow: 0 0 6px 0 rgba(50,150,250,.3);}
}
.top-left-cover-line, .top-right-cover-line {position: absolute;height: 3px;width: 50%;background-color: #f6f8f9;top: -2px;}
.bottom-left-cover-line, .bottom-right-cover-line {position: absolute;height: 3px;width: 50%;background-color: #f6f8f9;bottom: -2px;}
.tags-list {margin-top: 15px;}
.add-node-popover-body {}
.add-node-popover-body li {display: inline-block;width: 80px;text-align: center;padding:10px 0;}
.add-node-popover-body li i {border: 1px solid var(--el-border-color-light);width:40px;height:40px;border-radius: 50%;text-align: center;line-height: 38px;font-size: 18px;cursor: pointer;}
.add-node-popover-body li i:hover {border: 1px solid #3296fa;background: #3296fa;color: #fff!important;}
.add-node-popover-body li p {font-size: 12px;margin-top: 5px;}
.node-wrap-drawer__title {padding-right:40px;}
.node-wrap-drawer__title label {cursor: pointer;}
.node-wrap-drawer__title label:hover {border-bottom: 1px dashed #409eff;}
.node-wrap-drawer__title .node-wrap-drawer__title-edit {color: #409eff;margin-left: 10px;}
.top-left-cover-line {left: -1px;}
.top-right-cover-line {right: -1px;}
.bottom-left-cover-line {left: -1px;}
.bottom-right-cover-line {right: -1px;}
.end-node {border-radius: 50%;font-size: 14px;color: rgba(25,31,37,.4);text-align: left;}
.end-node-circle {width: 10px;height: 10px;margin: auto;border-radius: 50%;background: #dbdcdc;}
.end-node-text {margin-top: 5px;text-align: center;}
.auto-judge:hover {
.sort-left {display: flex;}
.sort-right {display: flex;}
}
.auto-judge .sort-left {position: absolute;top: 0;bottom: 0;z-index: 1;left: 0;display: none;justify-content: center;align-items: center;flex-direction: column;}
.auto-judge .sort-right {position: absolute;top: 0;bottom: 0;z-index: 1;right: 0;display: none;justify-content: center;align-items: center;flex-direction: column;}
.auto-judge .sort-left:hover, .auto-judge .sort-right:hover {background: #eee;}
.auto-judge:after {pointer-events: none;content: "";position: absolute;top:0;bottom:0;left:0;right:0;z-index: 2;border-radius: 4px;transition: all .1s;}
.auto-judge:hover:after {border: 1px solid #3296fa;box-shadow: 0 0 6px 0 rgba(50,150,250,.3);}
.node-wrap-box:after {pointer-events: none;content: "";position: absolute;top:0;bottom:0;left:0;right:0;z-index: 2;border-radius: 4px;transition: all .1s;}
.node-wrap-box:hover:after {border: 1px solid #3296fa;box-shadow: 0 0 6px 0 rgba(50,150,250,.3);}
[data-theme='dark'] {
[data-theme='dark'] .sc-workflow-design {
.node-wrap-box,.auto-judge {background: #2b2b2b;}
.col-box {background: #222225;}
.top-left-cover-line,

42
src/components/scWorkflow/nodes/addNode.vue
View File

@ -1,14 +1,25 @@
<template>
<div class="add-node-btn-box">
<div class="add-node-btn">
<el-popover placement="right-start" :width="300" v-model:visible="visible" :hide-after="0" :show-after="0">
<el-popover placement="right-start" :width="270" v-model:visible="visible" :hide-after="0" :show-after="0">
<template #reference>
<el-button type="primary" icon="el-icon-plus" circle></el-button>
</template>
<div class="add-node-popover-body">
<el-button icon="el-icon-user-solid" type="primary" circle plain @click="addType(1)"></el-button>
<el-button icon="el-icon-s-promotion" type="primary" circle plain @click="addType(2)"></el-button>
<el-button icon="el-icon-share" type="primary" circle plain @click="addType(4)"></el-button>
<ul>
<li>
<i class="el-icon-user-solid" style="color: #ff943e;" @click="addType(1)"></i>
<p>审批节点</p>
</li>
<li>
<i class="el-icon-s-promotion" style="color: #3296fa;" @click="addType(2)"></i>
<p>抄送节点</p>
</li>
<li>
<i class="el-icon-share" style="color: #15BC83;" @click="addType(4)"></i>
<p>条件分支</p>
</li>
</ul>
</div>
</el-popover>
</div>
@ -34,13 +45,26 @@
if (type == 1) {
node = {
nodeName: "审核人",
type: 1,
type: 1, //节点类型
setType: 1, //审核人类型
nodeUserList: [], //审核人成员
nodeRoleList: [], //审核角色
examineLevel: 1, //指定主管层级
directorLevel: 1, //自定义连续主管审批层级
selectMode: 1, //发起人自选类型
termAuto: false, //审批期限超时自动审批
term: 0, //审批期限
termMode: 1, //审批期限超时后执行类型
examineMode: 1, //多人审批时审批方式
directorMode: 0, //连续主管审批方式
childNode: this.modelValue
}
}else if(type == 2){
node = {
nodeName: "抄送人",
type: 2,
userSelectFlag: true,
nodeUserList: [],
childNode: this.modelValue
}
@ -52,12 +76,16 @@
{
nodeName: "条件1",
type: 3,
priorityLevel: 1
priorityLevel: 1,
conditionMode: 1,
conditionList: []
},
{
nodeName: "条件2",
type: 3,
priorityLevel: 2
priorityLevel: 2,
conditionMode: 1,
conditionList: []
}
],
childNode: this.modelValue

128
src/components/scWorkflow/nodes/approver.vue
View File

@ -8,28 +8,88 @@
</div>
<div class="content">
<span v-if="toText(nodeConfig)">{{ toText(nodeConfig) }}</span>
<span v-else class="placeholder">请选择人员</span>
<span v-else class="placeholder">请选择</span>
</div>
</div>
<add-node v-model="nodeConfig.childNode"></add-node>
<el-drawer title="审批人设置" v-model="drawer" destroy-on-close append-to-body>
<el-drawer title="审批人设置" v-model="drawer" destroy-on-close append-to-body :size="500">
<template #title>
<div class="node-wrap-drawer__title">
<label @click="editTitle" v-if="!isEditTitle">{{form.nodeName}}<i class="node-wrap-drawer__title-edit el-icon-edit-outline"></i></label>
<el-input v-if="isEditTitle" ref="nodeTitle" v-model="form.nodeName" clearable @blur="saveTitle" @keyup.enter="saveTitle"></el-input>
</div>
</template>
<el-container>
<el-main style="padding:0 20px 20px 20px">
<el-form label-position="top">
<el-form-item label="">
<el-input v-model="form.nodeName"></el-input>
</el-form-item>
<el-divider></el-divider>
<el-form-item label="审批人员类型">
<el-radio-group v-model="form.settype" class="clear">
<el-radio :label="1">指定成员</el-radio>
<el-radio :label="2">主管</el-radio>
<el-radio :label="4">发起人自选</el-radio>
<el-radio :label="5">发起人自己</el-radio>
<el-radio :label="7">连续多级主管</el-radio>
<el-select v-model="form.setType">
<el-option :value="1" label="指定成员"></el-option>
<el-option :value="2" label="主管"></el-option>
<el-option :value="3" label="角色"></el-option>
<el-option :value="4" label="发起人自选"></el-option>
<el-option :value="5" label="发起人自己"></el-option>
<el-option :value="7" label="连续多级主管"></el-option>
</el-select>
</el-form-item>
<el-form-item v-if="form.setType==1" label="选择成员">
<el-button type="primary" icon="el-icon-plus" round @click="selectHandle(1, form.nodeUserList)">选择人员</el-button>
<div class="tags-list">
<el-tag v-for="(user, index) in form.nodeUserList" :key="user.id" closable @close="delUser(index)">{{user.name}}</el-tag>
</div>
</el-form-item>
<el-form-item v-if="form.setType==2" label="指定主管">
发起人的第 <el-input-number v-model="form.examineLevel" :min="1" size="mini"/> 级主管
</el-form-item>
<el-form-item v-if="form.setType==3" label="选择角色">
<el-button type="primary" icon="el-icon-plus" round @click="selectHandle(2, form.nodeRoleList)">选择角色</el-button>
<div class="tags-list">
<el-tag v-for="(role, index) in form.nodeRoleList" :key="role.id" type="info" closable @close="delRole(index)">{{role.name}}</el-tag>
</div>
</el-form-item>
<el-form-item v-if="form.setType==4" label="发起人自选">
<el-radio-group v-model="form.selectMode">
<el-radio :label="1">自选一个人</el-radio>
<el-radio :label="2">自选多个人</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="form.setType==7" label="连续主管审批终点">
<el-radio-group v-model="form.directorMode">
<el-radio :label="0">直到最上层主管</el-radio>
<el-radio :label="1">自定义审批终点</el-radio>
</el-radio-group>
<p v-if="form.directorMode==1">直到发起人的第 <el-input-number v-model="form.directorLevel" :min="1" size="mini"/> 级主管</p>
</el-form-item>
<el-divider></el-divider>
<el-form-item label="">
<el-checkbox v-model="form.termAuto" label="超时自动审批"></el-checkbox>
</el-form-item>
<template v-if="form.termAuto">
<el-form-item label="审批期限（为 0 则不生效）">
<el-input-number v-model="form.term" :min="0" size="mini"/> 小时
</el-form-item>
<el-form-item label="审批期限超时后执行">
<el-radio-group v-model="form.termMode">
<el-radio :label="0">自动通过</el-radio>
<el-radio :label="1">自动拒绝</el-radio>
</el-radio-group>
</el-form-item>
</template>
<el-divider></el-divider>
<el-form-item label="多人审批时审批方式">
<el-radio-group v-model="form.examineMode">
<p><el-radio :label="1">按顺序依次审批</el-radio></p>
<p><el-radio :label="2">会签 (可同时审批，每个人必须审批通过)</el-radio></p>
<p><el-radio :label="3">或签 (有一人审批通过即可)</el-radio></p>
</el-radio-group>
</el-form-item>
</el-form>
</el-main>
<el-footer>
@ -45,6 +105,7 @@
import addNode from './addNode'
export default {
inject: ['select'],
props: {
modelValue: { type: Object, default: () => {} }
},
@ -55,6 +116,7 @@
return {
nodeConfig: {},
drawer: false,
isEditTitle: false,
form: {}
}
},
@ -69,9 +131,18 @@
methods: {
show(){
this.form = {}
this.form = {...this.nodeConfig}
this.form = JSON.parse(JSON.stringify(this.nodeConfig))
this.drawer = true
},
editTitle(){
this.isEditTitle = true
this.$nextTick(()=>{
this.$refs.nodeTitle.focus()
})
},
saveTitle(){
this.isEditTitle = false
},
save(){
this.$emit("update:modelValue", this.form)
this.drawer = false
@ -79,21 +150,37 @@
delNode(){
this.$emit("update:modelValue", this.nodeConfig.childNode)
},
delUser(index){
this.form.nodeUserList.splice(index, 1)
},
delRole(index){
this.form.nodeRoleList.splice(index, 1)
},
selectHandle(type, data){
this.select(type, data)
},
toText(nodeConfig){
if(nodeConfig.settype == 1){
if(nodeConfig.setType == 1){
if (nodeConfig.nodeUserList && nodeConfig.nodeUserList.length>0) {
const users = nodeConfig.nodeUserList.map(item=>item.name).join(" 或 ")
const users = nodeConfig.nodeUserList.map(item=>item.name).join("、")
return users
}else{
return false
}
}else if (nodeConfig.settype == 2) {
return "直接主管"
}else if (nodeConfig.settype == 4) {
}else if (nodeConfig.setType == 2) {
return nodeConfig.examineLevel == 1 ? '直接主管' : `发起人的第${nodeConfig.examineLevel}级主管`
}else if (nodeConfig.setType == 3) {
if (nodeConfig.nodeRoleList && nodeConfig.nodeRoleList.length>0) {
const roles = nodeConfig.nodeRoleList.map(item=>item.name).join("、")
return '角色-' + roles
}else{
return false
}
}else if (nodeConfig.setType == 4) {
return "发起人自选"
}else if (nodeConfig.settype == 5) {
}else if (nodeConfig.setType == 5) {
return "发起人自己"
}else if (nodeConfig.settype == 7) {
}else if (nodeConfig.setType == 7) {
return "连续多级主管"
}
}
@ -102,4 +189,5 @@
</script>
<style>
</style>

89
src/components/scWorkflow/nodes/branch.vue
View File

@ -31,19 +31,62 @@
</div>
<add-node v-model="nodeConfig.childNode"></add-node>
</div>
<el-drawer title="条件设置" v-model="drawer" destroy-on-close append-to-body>
<el-drawer title="条件设置" v-model="drawer" destroy-on-close append-to-body :size="600">
<template #title>
<div class="node-wrap-drawer__title">
<label @click="editTitle" v-if="!isEditTitle">{{form.nodeName}}<i class="node-wrap-drawer__title-edit el-icon-edit-outline"></i></label>
<el-input v-if="isEditTitle" ref="nodeTitle" v-model="form.nodeName" clearable @blur="saveTitle" @keyup.enter="saveTitle"></el-input>
</div>
</template>
<el-container>
<el-main style="padding:0 20px 20px 20px">
<el-form label-position="top">
<el-form-item label="">
<el-input v-model="form.nodeName"></el-input>
<el-form-item label="条件关系">
<el-radio-group v-model="form.conditionMode">
<el-radio :label="1">且</el-radio>
<el-radio :label="2">或</el-radio>
</el-radio-group>
</el-form-item>
<el-divider></el-divider>
<el-form-item label="条件">
{{ nodeConfig.conditionNodes[index].conditionList }}
<el-form-item>
<el-table :data="form.conditionList">
<el-table-column prop="label" label="描述">
<template #default="scope">
<el-input v-model="scope.row.label" placeholder="描述"></el-input>
</template>
</el-table-column>
<el-table-column prop="field" label="条件字段" width="130">
<template #default="scope">
<el-input v-model="scope.row.field" placeholder="条件字段"></el-input>
</template>
</el-table-column>
<el-table-column prop="operator" label="运算符" width="130">
<template #default="scope">
<el-select v-model="scope.row.operator" placeholder="Select">
<el-option label="等于" value="="></el-option>
<el-option label="不等于" value="!="></el-option>
<el-option label="大于" value=">"></el-option>
<el-option label="大于等于" value=">="></el-option>
<el-option label="小于" value="<"></el-option>
<el-option label="小于等于" value="<="></el-option>
<el-option label="包含" value="include"></el-option>
<el-option label="不包含" value="notinclude"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column prop="value" label="值" width="100">
<template #default="scope">
<el-input v-model="scope.row.value" placeholder="值"></el-input>
</template>
</el-table-column>
<el-table-column prop="value" label="移除" width="50">
<template #default="scope">
<el-button size="mini" type="text" @click="deleteConditionList(scope.$index)">移除</el-button>
</template>
</el-table-column>
</el-table>
</el-form-item>
<el-divider></el-divider>
<p><el-button type="primary">增加条件</el-button></p>
<p><el-button type="primary" icon="el-icon-plus" round @click="addConditionList">增加条件</el-button></p>
</el-form>
</el-main>
<el-footer>
@ -69,6 +112,7 @@
return {
nodeConfig: {},
drawer: false,
isEditTitle: false,
index: 0,
form: {}
}
@ -85,9 +129,18 @@
show(index){
this.index = index
this.form = {}
this.form = {...this.nodeConfig.conditionNodes[index]}
this.form = JSON.parse(JSON.stringify(this.nodeConfig.conditionNodes[index]))
this.drawer = true
},
editTitle(){
this.isEditTitle = true
this.$nextTick(()=>{
this.$refs.nodeTitle.focus()
})
},
saveTitle(){
this.isEditTitle = false
},
save(){
this.nodeConfig.conditionNodes[this.index] = this.form
this.$emit("update:modelValue", this.nodeConfig)
@ -98,7 +151,9 @@
this.nodeConfig.conditionNodes.push({
nodeName: "条件" + len,
type: 3,
priorityLevel: len
priorityLevel: len,
conditionMode: 1,
conditionList: []
})
},
delTerm(index){
@ -128,11 +183,25 @@
})
this.$emit("update:modelValue", this.nodeConfig)
},
addConditionList(){
this.form.conditionList.push({
label: '',
field: '',
operator: '=',
value: ''
})
},
deleteConditionList(index){
this.form.conditionList.splice(index, 1)
},
toText(nodeConfig, index){
var { conditionList } = nodeConfig.conditionNodes[index]
if (conditionList && conditionList.length > 0) {
if (conditionList && conditionList.length == 1) {
const text = conditionList.map(item => `${item.label}${item.operator}${item.value}`).join(" 和 ")
return text
}else if(conditionList && conditionList.length > 1){
const conditionModeText = nodeConfig.conditionNodes[index].conditionMode==1?'且行':'或行'
return conditionList.length + "个条件，" + conditionModeText
}else{
if(index == nodeConfig.conditionNodes.length - 1){
return "其他条件进入此流程"

47
src/components/scWorkflow/nodes/promoter.vue
View File

@ -5,16 +5,28 @@
<i class="icon el-icon-user-solid"></i>
<span>{{ nodeConfig.nodeName }}</span>
</div>
<div class="content">所有人</div>
<div class="content">
<span>{{ toText(nodeConfig) }}</span>
</div>
</div>
<add-node v-model="nodeConfig.childNode"></add-node>
<el-drawer title="发起人" v-model="drawer" destroy-on-close append-to-body>
<el-drawer title="发起人" v-model="drawer" destroy-on-close append-to-body :size="500">
<template #title>
<div class="node-wrap-drawer__title">
<label @click="editTitle" v-if="!isEditTitle">{{form.nodeName}}<i class="node-wrap-drawer__title-edit el-icon-edit-outline"></i></label>
<el-input v-if="isEditTitle" ref="nodeTitle" v-model="form.nodeName" clearable @blur="saveTitle" @keyup.enter="saveTitle"></el-input>
</div>
</template>
<el-container>
<el-main style="padding:0 20px 20px 20px">
<el-form label-position="top">
<el-form-item label="">
<el-input v-model="form.nodeName"></el-input>
<el-form-item label="谁可以发起此审批">
<el-button type="primary" icon="el-icon-plus" round @click="selectHandle(2, form.nodeRoleList)">选择角色</el-button>
<div class="tags-list">
<el-tag v-for="(role, index) in form.nodeRoleList" :key="role.id" type="info" closable @close="delRole(index)">{{role.name}}</el-tag>
</div>
</el-form-item>
<el-alert v-if="form.nodeRoleList.length==0" title="不指定则默认所有人都可发起此审批" type="info" :closable="false"/>
</el-form>
</el-main>
<el-footer>
@ -30,6 +42,7 @@
import addNode from './addNode'
export default {
inject: ['select'],
props: {
modelValue: { type: Object, default: () => {} }
},
@ -40,6 +53,7 @@
return {
nodeConfig: {},
drawer: false,
isEditTitle: false,
form: {}
}
},
@ -54,12 +68,35 @@
methods: {
show(){
this.form = {}
this.form = {...this.nodeConfig}
this.form = JSON.parse(JSON.stringify(this.nodeConfig))
this.isEditTitle = false
this.drawer = true
},
editTitle(){
this.isEditTitle = true
this.$nextTick(()=>{
this.$refs.nodeTitle.focus()
})
},
saveTitle(){
this.isEditTitle = false
},
selectHandle(type, data){
this.select(type, data)
},
delRole(index){
this.form.nodeRoleList.splice(index, 1)
},
save(){
this.$emit("update:modelValue", this.form)
this.drawer = false
},
toText(nodeConfig){
if(nodeConfig.nodeRoleList && nodeConfig.nodeRoleList.length > 0){
return nodeConfig.nodeRoleList.map(item=>item.name).join("、")
}else{
return "所有人"
}
}
}
}

41
src/components/scWorkflow/nodes/send.vue
View File

@ -12,16 +12,24 @@
</div>
</div>
<add-node v-model="nodeConfig.childNode"></add-node>
<el-drawer title="审批人设置" v-model="drawer" destroy-on-close append-to-body>
<el-drawer title="抄送人设置" v-model="drawer" destroy-on-close append-to-body :size="500">
<template #title>
<div class="node-wrap-drawer__title">
<label @click="editTitle" v-if="!isEditTitle">{{form.nodeName}}<i class="node-wrap-drawer__title-edit el-icon-edit-outline"></i></label>
<el-input v-if="isEditTitle" ref="nodeTitle" v-model="form.nodeName" clearable @blur="saveTitle" @keyup.enter="saveTitle"></el-input>
</div>
</template>
<el-container>
<el-main style="padding:0 20px 20px 20px">
<el-form label-position="top">
<el-form-item label="">
<el-input v-model="form.nodeName"></el-input>
<el-form-item label="选择要抄送的人员">
<el-button type="primary" icon="el-icon-plus" round @click="selectHandle(1, form.nodeUserList)">选择人员</el-button>
<div class="tags-list">
<el-tag v-for="(user, index) in form.nodeUserList" :key="user.id" closable @close="delUser(index)">{{user.name}}</el-tag>
</div>
</el-form-item>
<el-divider></el-divider>
<el-form-item label="">
<el-checkbox v-model="form.ccSelfSelectFlag" label="允许发起人自选"></el-checkbox>
<el-checkbox v-model="form.userSelectFlag" label="允许发起人自选抄送人"></el-checkbox>
</el-form-item>
</el-form>
</el-main>
@ -38,6 +46,7 @@
import addNode from './addNode'
export default {
inject: ['select'],
props: {
modelValue: { type: Object, default: () => {} }
},
@ -48,6 +57,7 @@
return {
nodeConfig: {},
drawer: false,
isEditTitle: false,
form: {}
}
},
@ -62,9 +72,18 @@
methods: {
show(){
this.form = {}
this.form = {...this.nodeConfig}
this.form = JSON.parse(JSON.stringify(this.nodeConfig))
this.drawer = true
},
editTitle(){
this.isEditTitle = true
this.$nextTick(()=>{
this.$refs.nodeTitle.focus()
})
},
saveTitle(){
this.isEditTitle = false
},
save(){
this.$emit("update:modelValue", this.form)
this.drawer = false
@ -72,12 +91,18 @@
delNode(){
this.$emit("update:modelValue", this.nodeConfig.childNode)
},
delUser(index){
this.form.nodeUserList.splice(index, 1)
},
selectHandle(type, data){
this.select(type, data)
},
toText(nodeConfig){
if (nodeConfig.nodeUserList && nodeConfig.nodeUserList.length>0) {
const users = nodeConfig.nodeUserList.map(item=>item.name).join(" 或 ")
const users = nodeConfig.nodeUserList.map(item=>item.name).join("、")
return users
}else{
if(nodeConfig.ccSelfSelectFlag){
if(nodeConfig.userSelectFlag){
return "发起人自选"
}else{
return false

269
src/components/scWorkflow/select.vue Normal file
View File

@ -0,0 +1,269 @@
<template>
<el-dialog v-model="dialogVisible" :title="titleMap[type-1]" :width="type==1?680:460" destroy-on-close append-to-body @closed="$emit('closed')">
<template v-if="type==1">
<div class="sc-user-select">
<div class="sc-user-select__left">
<div class="sc-user-select__search">
<el-input v-model="keyword" prefix-icon="el-icon-search" placeholder="搜索成员">
<template #append>
<el-button icon="el-icon-search" @click="search"></el-button>
</template>
</el-input>
</div>
<div class="sc-user-select__select">
<div class="sc-user-select__tree" v-loading="showGrouploading">
<el-scrollbar>
<el-tree class="menu" ref="groupTree" :data="group" :node-key="groupProps.key" :props="groupProps" highlight-current :expand-on-click-node="false" :current-node-key="groupId" @node-click="groupClick"/>
</el-scrollbar>
</div>
<div class="sc-user-select__user" v-loading="showUserloading">
<div class="sc-user-select__user__list">
<el-scrollbar ref="userScrollbar">
<el-tree class="menu" ref="userTree" :data="user" :node-key="userProps.key" :props="userProps" :default-checked-keys="selectedIds" show-checkbox check-on-click-node @check-change="userClick"></el-tree>
</el-scrollbar>
</div>
<footer>
<el-pagination background layout="prev,next" small :total="total" :page-size="pageSize" v-model:currentPage="currentPage" @current-change="paginationChange"></el-pagination>
</footer>
</div>
</div>
</div>
<div class="sc-user-select__toicon"><i class="el-icon-right"></i></div>
<div class="sc-user-select__selected">
<header>已选 ({{selected.length}})</header>
<ul>
<el-scrollbar>
<li v-for="(item, index) in selected" :key="item.id">
<span class="name">
<el-avatar size="small">{{item.name.substring(0,1)}}</el-avatar>
<label>{{item.name}}</label>
</span>
<span class="delete">
<el-button type="text" icon="el-icon-delete" circle size="mini" @click="deleteSelected(index)"></el-button>
</span>
</li>
</el-scrollbar>
</ul>
</div>
</div>
</template>
<template v-if="type==2">
<div class="sc-user-select sc-user-select-role">
<div class="sc-user-select__left">
<div class="sc-user-select__select">
<div class="sc-user-select__tree" v-loading="showGrouploading">
<el-scrollbar>
<el-tree class="menu" ref="groupTree" :data="role" :node-key="roleProps.key" :props="roleProps" show-checkbox check-strictly check-on-click-node :expand-on-click-node="false" :default-checked-keys="selectedIds" @check-change="roleClick"/>
</el-scrollbar>
</div>
</div>
</div>
<div class="sc-user-select__toicon"><i class="el-icon-right"></i></div>
<div class="sc-user-select__selected">
<header>已选 ({{selected.length}})</header>
<ul>
<el-scrollbar>
<li v-for="(item, index) in selected" :key="item.id">
<span class="name">
<label>{{item.name}}</label>
</span>
<span class="delete">
<el-button type="text" icon="el-icon-delete" circle size="mini" @click="deleteSelected(index)"></el-button>
</span>
</li>
</el-scrollbar>
</ul>
</div>
</div>
</template>
<template #footer>
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="save">确 认</el-button>
</template>
</el-dialog>
</template>
<script>
import config from "@/config/workflow";
export default {
props: {
modelValue: { type: Boolean, default: false }
},
data() {
return {
groupProps: config.group.props,
userProps: config.user.props,
roleProps: config.role.props,
titleMap: ['人员选择', '角色选择'],
dialogVisible: false,
showGrouploading: false,
showUserloading: false,
keyword: '',
groupId: '',
pageSize: config.user.pageSize,
total: 0,
currentPage: 1,
group: [],
user: [],
role: [],
type: 1,
selected: [],
value: []
}
},
computed: {
selectedIds(){
return this.selected.map(t => t.id)
}
},
mounted() {
},
methods: {
//打开赋值
open(type, data){
this.type = type
this.value = data||[]
this.selected = JSON.parse(JSON.stringify(data||[]))
this.dialogVisible = true
if(this.type==1){
this.getGroup()
this.getUser()
}else if(this.type==2){
this.getRole()
}
},
//获取组织
async getGroup(){
this.showGrouploading = true;
var res = await config.group.apiObj.get();
this.showGrouploading = false;
var allNode = {[config.group.props.key]: '', [config.group.props.label]: '所有'}
res.data.unshift(allNode);
this.group = config.group.parseData(res).rows
},
//获取用户
async getUser(){
this.showUserloading = true;
var params = {
[config.user.request.keyword]: this.keyword || null,
[config.user.request.groupId]: this.groupId || null,
[config.user.request.page]: this.currentPage,
[config.user.request.pageSize]: this.pageSize
}
var res = await config.user.apiObj.get(params);
this.showUserloading = false;
this.user = config.user.parseData(res).rows;
this.total = config.user.parseData(res).total || 0;
this.$refs.userScrollbar.setScrollTop(0)
},
//获取角色
async getRole(){
this.showGrouploading = true;
var res = await config.role.apiObj.get();
this.showGrouploading = false;
this.role = config.role.parseData(res).rows
},
//组织点击
groupClick(data){
this.keyword = ''
this.currentPage = 1
this.groupId = data[config.group.props.key]
this.getUser()
},
//用户点击
userClick(data, checked){
if(checked){
this.selected.push({
id: data[config.user.props.key],
name: data[config.user.props.label]
})
}else{
this.selected = this.selected.filter(item => item.id != data[config.user.props.key])
}
},
//用户分页点击
paginationChange(){
this.getUser()
},
//用户搜索
search(){
this.groupId = ''
this.$refs.groupTree.setCurrentKey(this.groupId)
this.currentPage = 1
this.getUser()
},
//删除已选
deleteSelected(index){
this.selected.splice(index,1);
if(this.type==1){
this.$refs.userTree.setCheckedKeys(this.selectedIds)
}else if(this.type==2){
this.$refs.groupTree.setCheckedKeys(this.selectedIds)
}
},
//角色点击
roleClick(data, checked){
if(checked){
this.selected.push({
id: data[config.role.props.key],
name: data[config.role.props.label]
})
}else{
this.selected = this.selected.filter(item => item.id != data[config.role.props.key])
}
},
//提交保存
save(){
this.value.splice(0,this.value.length);
this.selected.map(item => {
this.value.push(item)
})
this.dialogVisible = false
}
}
}
</script>
<style scoped>
.sc-user-select {display: flex;}
.sc-user-select__left {width: 400px;}
.sc-user-select__right {flex: 1;}
.sc-user-select__search {padding-bottom:10px;}
.sc-user-select__select {display: flex;border: 1px solid var(--el-border-color-light);background: var(--el-color-white);}
.sc-user-select__tree {width: 200px;height:300px;border-right: 1px solid var(--el-border-color-light);}
.sc-user-select__user {width: 200px;height:300px;display: flex;flex-direction: column;}
.sc-user-select__user__list {flex: 1;overflow: auto;}
.sc-user-select__user footer {height:36px;padding-top:5px;border-top: 1px solid var(--el-border-color-light);}
.sc-user-select__toicon {display: flex;justify-content: center;align-items: center;margin:0 10px;}
.sc-user-select__toicon i {background: #ccc;width: 20px;height: 20px;text-align: center;line-height: 20px;border-radius:50%;color: #fff;}
.sc-user-select__selected {height:345px;width: 200px;border: 1px solid var(--el-border-color-light);background: var(--el-color-white);}
.sc-user-select__selected header {height:43px;line-height: 43px;border-bottom: 1px solid var(--el-border-color-light);padding:0 15px;font-size: 12px;}
.sc-user-select__selected ul {height:300px;overflow: auto;}
.sc-user-select__selected li {display: flex;align-items: center;justify-content: space-between;padding:5px 5px 5px 15px;height:38px;}
.sc-user-select__selected li .name {display: flex;align-items: center;}
.sc-user-select__selected li .name .el-avatar {background: #409eff;margin-right: 10px;}
.sc-user-select__selected li .name label {}
.sc-user-select__selected li .delete {display: none;}
.sc-user-select__selected li:hover {background: var(--el-color-primary-light-9);}
.sc-user-select__selected li:hover .delete {display: inline-block;}
.sc-user-select-role .sc-user-select__left {width: 200px;}
.sc-user-select-role .sc-user-select__tree {border: none;height: 343px;}
.sc-user-select-role .sc-user-select__selected {}
[data-theme='dark'] .sc-user-select__selected li:hover {background: rgba(0, 0, 0, 0.2);}
[data-theme='dark'] .sc-user-select__toicon i {background: #383838;}
</style>

69
src/config/workflow.js Normal file
View File

@ -0,0 +1,69 @@
import API from "@/api";
//审批工作流人员/组织选择器配置
export default {
//配置接口正常返回代码
successCode: 200,
//配置组织
group: {
//请求接口对象
apiObj: API.system.role.list,
//接受数据字段映射
parseData: function (res) {
return {
rows: res.data,
msg: res.message,
code: res.code
}
},
//显示数据字段映射
props: {
key: 'id',
label: 'label',
children: 'children'
}
},
//配置用户
user: {
apiObj: API.demo.page,
pageSize: 20,
parseData: function (res) {
return {
rows: res.data.rows,
total: res.data.total,
msg: res.message,
code: res.code
}
},
props: {
key: 'id',
label: 'user',
},
request: {
page: 'page',
pageSize: 'pageSize',
groupId: 'groupId',
keyword: 'keyword'
}
},
//配置角色
role: {
//请求接口对象
apiObj: API.system.role.list,
//接受数据字段映射
parseData: function (res) {
return {
rows: res.data,
msg: res.message,
code: res.code
}
},
//显示数据字段映射
props: {
key: 'id',
label: 'label',
children: 'children'
}
}
}

140
src/views/vab/workflow.vue
View File

@ -1,8 +1,15 @@
<template>
<el-main>
<el-alert title="仿钉钉审批工作流. 现预览阶段, 功能有限后期将不断迭代, 一般工作流设计器都是满足不了业务需求的,建议拷贝一份组件自行根据业务扩展开发" type="warning" style="margin-bottom:20px;"></el-alert>
<sc-workflow v-model="data.nodeConfig"></sc-workflow>
</el-main>
<el-container>
<el-header>
<el-page-header :content="data.name"></el-page-header>
<div class="do">
<el-button type="primary" @click="exportJson">export JSON</el-button>
</div>
</el-header>
<el-main>
<sc-workflow v-model="data.nodeConfig"></sc-workflow>
</el-main>
</el-container>
</template>
<script>
@ -16,60 +23,76 @@
data() {
return {
data: {
id: 1,
name: "合同审批",
nodeConfig: {
nodeName: "发起人",
type: 0, // 0 发起人 1审批 2抄送 3条件 4路由
childNode: {
nodeName: "审核人",
type: 1,
settype: 1, // 审批人设置 1指定成员 2主管 4发起人自选 5发起人自己 7连续多级主管
nodeUserList: [
{
id: 1,
name: "Sakuya"
"id": 1,
"name": "请假审批",
"nodeConfig": {
"nodeName": "发起人",
"type": 0,
"nodeRoleList": [],
"childNode": {
"nodeName": "条件路由",
"type": 4,
"conditionNodes": [{
"nodeName": "长期",
"type": 3,
"priorityLevel": 1,
"conditionMode": 1,
"conditionList": [{
"label": "请假天数",
"field": "day",
"operator": ">",
"value": "7"
}],
"childNode": {
"nodeName": "领导审批",
"type": 1,
"setType": 1,
"nodeUserList": [{
"id": "360000197302144442",
"name": "何敏"
}],
"nodeRoleList": [],
"examineLevel": 1,
"directorLevel": 1,
"selectMode": 1,
"termAuto": false,
"term": 0,
"termMode": 1,
"examineMode": 1,
"directorMode": 0
}
},
{
id: 2,
name: "Lolowan"
"nodeName": "短期",
"type": 3,
"priorityLevel": 2,
"conditionMode": 1,
"conditionList": [],
"childNode": {
"nodeName": "直接主管审批",
"type": 1,
"setType": 2,
"nodeUserList": [],
"nodeRoleList": [],
"examineLevel": 1,
"directorLevel": 1,
"selectMode": 1,
"termAuto": false,
"term": 0,
"termMode": 1,
"examineMode": 1,
"directorMode": 0
}
}
],
childNode: {
nodeName: "路由",
type: 4,
conditionNodes: [
{
nodeName: "条件1",
type: 3,
priorityLevel: 1,
conditionList: [
{
label: "上级审核状态",
field: "promoter",
operator: "=",
value: '保留'
}
],
childNode: {
nodeName: "条件审核",
type: 1,
settype: 2
}
},
{
nodeName: "条件2",
type: 3,
priorityLevel: 2,
conditionList: []
}
],
childNode: {
nodeName: "抄送人",
type: 2,
ccSelfSelectFlag: true,
nodeUserList: []
}
"childNode": {
"nodeName": "抄送人",
"type": 2,
"userSelectFlag": true,
"nodeUserList": [{
"id": "220000200908305857",
"name": "何秀英"
}]
}
}
}
@ -80,11 +103,12 @@
},
methods: {
exportJson() {
this.$message("返回值请查看F12控制台console.log()")
console.log(this.data)
}
}
}
</script>
<style>
</style>
<style></style>