构建框架
This commit is contained in:
龙运模
@@ -0,0 +1,154 @@
|
||||
<!--
|
||||
* @Descripttion: 仿钉钉流程设计器
|
||||
* @version: 1.3
|
||||
* @Author: sakuya
|
||||
* @Date: 2021年9月14日08:38:35
|
||||
* @LastEditors: sakuya
|
||||
* @LastEditTime: 2022年5月14日19:43:46
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="sc-workflow-design">
|
||||
<div class="box-scale">
|
||||
<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,
|
||||
useSelect
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
nodeConfig: this.modelValue,
|
||||
selectVisible: false
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
modelValue(val){
|
||||
this.nodeConfig = val
|
||||
},
|
||||
nodeConfig(val){
|
||||
this.$emit("update:modelValue", 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;}
|
||||
|
||||
.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;display: flex;align-items: center;}
|
||||
.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);}
|
||||
}
|
||||
|
||||
.tags-list {margin-top: 15px;width: 100%;}
|
||||
.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;vertical-align: middle;}
|
||||
|
||||
.dark .sc-workflow-design {
|
||||
.node-wrap-box,.auto-judge {background: #2b2b2b;}
|
||||
.col-box {background: var(--el-bg-color);}
|
||||
.top-left-cover-line,
|
||||
.top-right-cover-line,
|
||||
.bottom-left-cover-line,
|
||||
.bottom-right-cover-line {background-color: var(--el-bg-color);}
|
||||
.node-wrap-box::before,.auto-judge::before {background-color: var(--el-bg-color);}
|
||||
.branch-box .add-branch {background: var(--el-bg-color);}
|
||||
.end-node .end-node-text {color: #d0d0d0;}
|
||||
.auto-judge .sort-left:hover, .auto-judge .sort-right:hover {background: var(--el-bg-color);}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<promoter v-if="nodeConfig.type==0" v-model="nodeConfig"></promoter>
|
||||
|
||||
<approver v-if="nodeConfig.type==1" v-model="nodeConfig"></approver>
|
||||
|
||||
<send v-if="nodeConfig.type==2" v-model="nodeConfig"></send>
|
||||
|
||||
<branch v-if="nodeConfig.type==4" v-model="nodeConfig">
|
||||
<template v-slot="slot">
|
||||
<node-wrap v-if="slot.node" v-model="slot.node.childNode"></node-wrap>
|
||||
</template>
|
||||
</branch>
|
||||
|
||||
<node-wrap v-if="nodeConfig.childNode" v-model="nodeConfig.childNode"></node-wrap>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import approver from './nodes/approver'
|
||||
import promoter from './nodes/promoter'
|
||||
import branch from './nodes/branch'
|
||||
import send from './nodes/send'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
modelValue: { type: Object, default: () => {} }
|
||||
},
|
||||
components: {
|
||||
approver,
|
||||
promoter,
|
||||
branch,
|
||||
send
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
nodeConfig: {},
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
modelValue(val){
|
||||
this.nodeConfig = val
|
||||
},
|
||||
nodeConfig(val){
|
||||
this.$emit("update:modelValue", val)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.nodeConfig = this.modelValue
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<div class="add-node-btn-box">
|
||||
<div class="add-node-btn">
|
||||
<el-popover placement="right-start" :width="270" trigger="click" :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">
|
||||
<ul>
|
||||
<li>
|
||||
<el-icon style="color: #ff943e;" @click="addType(1)"><el-icon-user-filled /></el-icon>
|
||||
<p>审批节点</p>
|
||||
</li>
|
||||
<li>
|
||||
<el-icon style="color: #3296fa;" @click="addType(2)"><el-icon-promotion /></el-icon>
|
||||
<p>抄送节点</p>
|
||||
</li>
|
||||
<li>
|
||||
<el-icon style="color: #15BC83;" @click="addType(4)"><el-icon-share /></el-icon>
|
||||
<p>条件分支</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
modelValue: { type: Object, default: () => {} }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
addType(type){
|
||||
var node = {}
|
||||
if (type == 1) {
|
||||
node = {
|
||||
nodeName: "审核人",
|
||||
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
|
||||
}
|
||||
|
||||
}else if(type == 4){
|
||||
node = {
|
||||
nodeName: "条件路由",
|
||||
type: 4,
|
||||
conditionNodes: [
|
||||
{
|
||||
nodeName: "条件1",
|
||||
type: 3,
|
||||
priorityLevel: 1,
|
||||
conditionMode: 1,
|
||||
conditionList: []
|
||||
},
|
||||
{
|
||||
nodeName: "条件2",
|
||||
type: 3,
|
||||
priorityLevel: 2,
|
||||
conditionMode: 1,
|
||||
conditionList: []
|
||||
}
|
||||
],
|
||||
childNode: this.modelValue
|
||||
}
|
||||
|
||||
}
|
||||
this.$emit("update:modelValue", node)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<div class="node-wrap">
|
||||
<div class="node-wrap-box" @click="show">
|
||||
<div class="title" style="background: #ff943e;">
|
||||
<el-icon class="icon"><el-icon-user-filled /></el-icon>
|
||||
<span>{{ nodeConfig.nodeName }}</span>
|
||||
<el-icon class="close" @click.stop="delNode()"><el-icon-close /></el-icon>
|
||||
</div>
|
||||
<div class="content">
|
||||
<span v-if="toText(nodeConfig)">{{ toText(nodeConfig) }}</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 :size="500">
|
||||
<template #header>
|
||||
<div class="node-wrap-drawer__title">
|
||||
<label @click="editTitle" v-if="!isEditTitle">{{form.nodeName}}<el-icon class="node-wrap-drawer__title-edit"><el-icon-edit /></el-icon></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-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"/> 级主管
|
||||
</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"/> 级主管</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"/> 小时
|
||||
</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 style="width: 100%;"><el-radio :label="1">按顺序依次审批</el-radio></p>
|
||||
<p style="width: 100%;"><el-radio :label="2">会签 (可同时审批，每个人必须审批通过)</el-radio></p>
|
||||
<p style="width: 100%;"><el-radio :label="3">或签 (有一人审批通过即可)</el-radio></p>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-main>
|
||||
<el-footer>
|
||||
<el-button type="primary" @click="save">保存</el-button>
|
||||
<el-button @click="drawer=false">取消</el-button>
|
||||
</el-footer>
|
||||
</el-container>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import addNode from './addNode'
|
||||
|
||||
export default {
|
||||
inject: ['select'],
|
||||
props: {
|
||||
modelValue: { type: Object, default: () => {} }
|
||||
},
|
||||
components: {
|
||||
addNode
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
nodeConfig: {},
|
||||
drawer: false,
|
||||
isEditTitle: false,
|
||||
form: {}
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
modelValue(){
|
||||
this.nodeConfig = this.modelValue
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.nodeConfig = this.modelValue
|
||||
},
|
||||
methods: {
|
||||
show(){
|
||||
this.form = {}
|
||||
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
|
||||
},
|
||||
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.nodeUserList && nodeConfig.nodeUserList.length>0) {
|
||||
const users = nodeConfig.nodeUserList.map(item=>item.name).join("、")
|
||||
return users
|
||||
}else{
|
||||
return false
|
||||
}
|
||||
}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) {
|
||||
return "发起人自己"
|
||||
}else if (nodeConfig.setType == 7) {
|
||||
return "连续多级主管"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,222 @@
|
||||
<template>
|
||||
<div class="branch-wrap">
|
||||
<div class="branch-box-wrap">
|
||||
<div class="branch-box">
|
||||
<el-button class="add-branch" type="success" plain round @click="addTerm">添加条件</el-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="auto-judge" @click="show(index)">
|
||||
<div class="sort-left" v-if="index!=0" @click.stop="arrTransfer(index,-1)">
|
||||
<el-icon><el-icon-arrow-left /></el-icon>
|
||||
</div>
|
||||
<div class="title">
|
||||
<span class="node-title">{{ item.nodeName }}</span>
|
||||
<span class="priority-title">优先级{{item.priorityLevel}}</span>
|
||||
<el-icon class="close" @click.stop="delTerm(index)"><el-icon-close /></el-icon>
|
||||
</div>
|
||||
<div class="content">
|
||||
<span v-if="toText(nodeConfig, index)">{{ toText(nodeConfig, index) }}</span>
|
||||
<span v-else class="placeholder">请设置条件</span>
|
||||
</div>
|
||||
<div class="sort-right" v-if="index!=nodeConfig.conditionNodes.length-1" @click.stop="arrTransfer(index)">
|
||||
<el-icon><el-icon-arrow-right /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<add-node v-model="item.childNode"></add-node>
|
||||
</div>
|
||||
</div>
|
||||
<slot v-if="item.childNode" :node="item"></slot>
|
||||
<div class="top-left-cover-line" v-if="index==0"></div>
|
||||
<div class="bottom-left-cover-line" v-if="index==0"></div>
|
||||
<div class="top-right-cover-line" v-if="index==nodeConfig.conditionNodes.length-1"></div>
|
||||
<div class="bottom-right-cover-line" v-if="index==nodeConfig.conditionNodes.length-1"></div>
|
||||
</div>
|
||||
</div>
|
||||
<add-node v-model="nodeConfig.childNode"></add-node>
|
||||
</div>
|
||||
<el-drawer title="条件设置" v-model="drawer" destroy-on-close append-to-body :size="600">
|
||||
<template #header>
|
||||
<div class="node-wrap-drawer__title">
|
||||
<label @click="editTitle" v-if="!isEditTitle">{{form.nodeName}}<el-icon class="node-wrap-drawer__title-edit"><el-icon-edit /></el-icon></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-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>
|
||||
<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="55">
|
||||
<template #default="scope">
|
||||
<el-link type="danger" :underline="false" @click="deleteConditionList(scope.$index)">移除</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form-item>
|
||||
<p><el-button type="primary" icon="el-icon-plus" round @click="addConditionList">增加条件</el-button></p>
|
||||
</el-form>
|
||||
</el-main>
|
||||
<el-footer>
|
||||
<el-button type="primary" @click="save">保存</el-button>
|
||||
<el-button @click="drawer=false">取消</el-button>
|
||||
</el-footer>
|
||||
</el-container>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import addNode from './addNode'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
modelValue: { type: Object, default: () => {} }
|
||||
},
|
||||
components: {
|
||||
addNode
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
nodeConfig: {},
|
||||
drawer: false,
|
||||
isEditTitle: false,
|
||||
index: 0,
|
||||
form: {}
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
modelValue(){
|
||||
this.nodeConfig = this.modelValue
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.nodeConfig = this.modelValue
|
||||
},
|
||||
methods: {
|
||||
show(index){
|
||||
this.index = index
|
||||
this.form = {}
|
||||
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)
|
||||
this.drawer = false
|
||||
},
|
||||
addTerm(){
|
||||
let len = this.nodeConfig.conditionNodes.length + 1
|
||||
this.nodeConfig.conditionNodes.push({
|
||||
nodeName: "条件" + len,
|
||||
type: 3,
|
||||
priorityLevel: len,
|
||||
conditionMode: 1,
|
||||
conditionList: []
|
||||
})
|
||||
},
|
||||
delTerm(index){
|
||||
this.nodeConfig.conditionNodes.splice(index, 1)
|
||||
if (this.nodeConfig.conditionNodes.length == 1) {
|
||||
if (this.nodeConfig.childNode) {
|
||||
if (this.nodeConfig.conditionNodes[0].childNode) {
|
||||
this.reData(this.nodeConfig.conditionNodes[0].childNode, this.nodeConfig.childNode)
|
||||
}else{
|
||||
this.nodeConfig.conditionNodes[0].childNode = this.nodeConfig.childNode
|
||||
}
|
||||
}
|
||||
this.$emit("update:modelValue", this.nodeConfig.conditionNodes[0].childNode);
|
||||
}
|
||||
},
|
||||
reData(data, addData) {
|
||||
if (!data.childNode) {
|
||||
data.childNode = addData
|
||||
} else {
|
||||
this.reData(data.childNode, addData)
|
||||
}
|
||||
},
|
||||
arrTransfer(index, type = 1){
|
||||
this.nodeConfig.conditionNodes[index] = this.nodeConfig.conditionNodes.splice(index + type, 1, this.nodeConfig.conditionNodes[index])[0]
|
||||
this.nodeConfig.conditionNodes.map((item, index) => {
|
||||
item.priorityLevel = index + 1
|
||||
})
|
||||
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 == 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 "其他条件进入此流程"
|
||||
}else{
|
||||
return false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<div class="node-wrap">
|
||||
<div class="node-wrap-box start-node" @click="show">
|
||||
<div class="title" style="background: #576a95;">
|
||||
<el-icon class="icon"><el-icon-user-filled /></el-icon>
|
||||
<span>{{ nodeConfig.nodeName }}</span>
|
||||
</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 :size="500">
|
||||
<template #header>
|
||||
<div class="node-wrap-drawer__title">
|
||||
<label @click="editTitle" v-if="!isEditTitle">{{form.nodeName}}<el-icon class="node-wrap-drawer__title-edit"><el-icon-edit /></el-icon></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-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>
|
||||
<el-button type="primary" @click="save">保存</el-button>
|
||||
<el-button @click="drawer=false">取消</el-button>
|
||||
</el-footer>
|
||||
</el-container>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import addNode from './addNode'
|
||||
|
||||
export default {
|
||||
inject: ['select'],
|
||||
props: {
|
||||
modelValue: { type: Object, default: () => {} }
|
||||
},
|
||||
components: {
|
||||
addNode
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
nodeConfig: {},
|
||||
drawer: false,
|
||||
isEditTitle: false,
|
||||
form: {}
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
modelValue(){
|
||||
this.nodeConfig = this.modelValue
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.nodeConfig = this.modelValue
|
||||
},
|
||||
methods: {
|
||||
show(){
|
||||
this.form = {}
|
||||
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 "所有人"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<div class="node-wrap">
|
||||
<div class="node-wrap-box" @click="show">
|
||||
<div class="title" style="background: #3296fa;">
|
||||
<el-icon class="icon"><el-icon-promotion /></el-icon>
|
||||
<span>{{ nodeConfig.nodeName }}</span>
|
||||
<el-icon class="close" @click.stop="delNode()"><el-icon-close /></el-icon>
|
||||
</div>
|
||||
<div class="content">
|
||||
<span v-if="toText(nodeConfig)">{{ toText(nodeConfig) }}</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 :size="500">
|
||||
<template #header>
|
||||
<div class="node-wrap-drawer__title">
|
||||
<label @click="editTitle" v-if="!isEditTitle">{{form.nodeName}}<el-icon class="node-wrap-drawer__title-edit"><el-icon-edit /></el-icon></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-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 label="">
|
||||
<el-checkbox v-model="form.userSelectFlag" label="允许发起人自选抄送人"></el-checkbox>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-main>
|
||||
<el-footer>
|
||||
<el-button type="primary" @click="save">保存</el-button>
|
||||
<el-button @click="drawer=false">取消</el-button>
|
||||
</el-footer>
|
||||
</el-container>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import addNode from './addNode'
|
||||
|
||||
export default {
|
||||
inject: ['select'],
|
||||
props: {
|
||||
modelValue: { type: Object, default: () => {} }
|
||||
},
|
||||
components: {
|
||||
addNode
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
nodeConfig: {},
|
||||
drawer: false,
|
||||
isEditTitle: false,
|
||||
form: {}
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
modelValue(){
|
||||
this.nodeConfig = this.modelValue
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.nodeConfig = this.modelValue
|
||||
},
|
||||
methods: {
|
||||
show(){
|
||||
this.form = {}
|
||||
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
|
||||
},
|
||||
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("、")
|
||||
return users
|
||||
}else{
|
||||
if(nodeConfig.userSelectFlag){
|
||||
return "发起人自选"
|
||||
}else{
|
||||
return false
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -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"><el-icon><el-icon-arrow-right /></el-icon></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="danger" icon="el-icon-delete" circle size="small" @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"><el-icon><el-icon-arrow-right /></el-icon></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="danger" icon="el-icon-delete" circle size="small" @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 {display: flex;justify-content: center;align-items: center;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>
|
||||
Reference in New Issue
Block a user