47 changed files with 4128 additions and 119 deletions
@ -0,0 +1,78 @@ |
|||
<template> |
|||
<el-breadcrumb class="app-breadcrumb" separator="/"> |
|||
<transition-group name="breadcrumb"> |
|||
<el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path"> |
|||
<span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span> |
|||
<a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a> |
|||
</el-breadcrumb-item> |
|||
</transition-group> |
|||
</el-breadcrumb> |
|||
</template> |
|||
|
|||
<script> |
|||
import pathToRegexp from 'path-to-regexp' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
levelList: null |
|||
} |
|||
}, |
|||
watch: { |
|||
$route() { |
|||
this.getBreadcrumb() |
|||
} |
|||
}, |
|||
created() { |
|||
this.getBreadcrumb() |
|||
}, |
|||
methods: { |
|||
getBreadcrumb() { |
|||
// only show routes with meta.title |
|||
let matched = this.$route.matched.filter(item => item.meta && item.meta.title) |
|||
const first = matched[0] |
|||
|
|||
// if (!this.isDashboard(first)) { |
|||
// matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched) |
|||
// } |
|||
|
|||
this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false) |
|||
}, |
|||
isDashboard(route) { |
|||
const name = route && route.name |
|||
if (!name) { |
|||
return false |
|||
} |
|||
return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase() |
|||
}, |
|||
pathCompile(path) { |
|||
// To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561 |
|||
const { params } = this.$route |
|||
var toPath = pathToRegexp.compile(path) |
|||
return toPath(params) |
|||
}, |
|||
handleLink(item) { |
|||
const { redirect, path } = item |
|||
if (redirect) { |
|||
this.$router.push(redirect) |
|||
return |
|||
} |
|||
this.$router.push(this.pathCompile(path)) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.app-breadcrumb.el-breadcrumb { |
|||
display: inline-block; |
|||
font-size: 14px; |
|||
line-height: 50px; |
|||
margin-left: 8px; |
|||
|
|||
.no-redirect { |
|||
color: #97a8be; |
|||
cursor: text; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,44 @@ |
|||
<template> |
|||
<div style="padding: 0 15px;" @click="toggleClick"> |
|||
<svg |
|||
:class="{'is-active':isActive}" |
|||
class="hamburger" |
|||
viewBox="0 0 1024 1024" |
|||
xmlns="http://www.w3.org/2000/svg" |
|||
width="64" |
|||
height="64" |
|||
> |
|||
<path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" /> |
|||
</svg> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'Hamburger', |
|||
props: { |
|||
isActive: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
methods: { |
|||
toggleClick() { |
|||
this.$emit('toggleClick') |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.hamburger { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
width: 20px; |
|||
height: 20px; |
|||
} |
|||
|
|||
.hamburger.is-active { |
|||
transform: rotate(180deg); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,62 @@ |
|||
<template> |
|||
<div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" /> |
|||
<svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners"> |
|||
<use :xlink:href="iconName" /> |
|||
</svg> |
|||
</template> |
|||
|
|||
<script> |
|||
// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage |
|||
import { isExternal } from '@/utils/validate' |
|||
|
|||
export default { |
|||
name: 'SvgIcon', |
|||
props: { |
|||
iconClass: { |
|||
type: String, |
|||
required: true |
|||
}, |
|||
className: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
computed: { |
|||
isExternal() { |
|||
return isExternal(this.iconClass) |
|||
}, |
|||
iconName() { |
|||
return `#icon-${this.iconClass}` |
|||
}, |
|||
svgClass() { |
|||
if (this.className) { |
|||
return 'svg-icon ' + this.className |
|||
} else { |
|||
return 'svg-icon' |
|||
} |
|||
}, |
|||
styleExternalIcon() { |
|||
return { |
|||
mask: `url(${this.iconClass}) no-repeat 50% 50%`, |
|||
'-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%` |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.svg-icon { |
|||
width: 1em; |
|||
height: 1em; |
|||
vertical-align: -0.15em; |
|||
fill: currentColor; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.svg-external-icon { |
|||
background-color: currentColor; |
|||
mask-size: cover!important; |
|||
display: inline-block; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,294 @@ |
|||
<template> |
|||
<div class="add-node-btn-box"> |
|||
<div class="add-node-btn"> |
|||
<el-popover placement="right-start" v-model="visible"> |
|||
<div class="add-node-popover-body"> |
|||
<a class="add-node-popover-item approver" @click="addType(1)"> |
|||
<div class="item-wrapper"> |
|||
<span class="iconfont"></span> |
|||
</div> |
|||
<p>审批人</p> |
|||
</a> |
|||
<a class="add-node-popover-item notifier" @click="addType(2)"> |
|||
<div class="item-wrapper"> |
|||
<span class="iconfont"></span> |
|||
</div> |
|||
<p>抄送人</p> |
|||
</a> |
|||
<a class="add-node-popover-item condition" @click="addType(4)"> |
|||
<div class="item-wrapper"> |
|||
<span class="iconfont"></span> |
|||
</div> |
|||
<p>条件分支</p> |
|||
</a> |
|||
</div> |
|||
<button class="btn" type="button" slot="reference"> |
|||
<span class="iconfont"></span> |
|||
</button> |
|||
</el-popover> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { v4 } from 'uuid' |
|||
export default { |
|||
props: ["nodeConfig","childNodeP","step"], |
|||
data() { |
|||
return { |
|||
visible: false |
|||
} |
|||
}, |
|||
methods: { |
|||
addType(type) { |
|||
|
|||
console.log("添加节点--2---》",type,this.childNodeP,this.nodeConfig) |
|||
|
|||
|
|||
const snowflake = v4().replaceAll('-','').toString(); |
|||
const timeUnix = new Date().getTime() |
|||
let fromNodeNumber = ""; |
|||
let gotoNodeNumber = ""; |
|||
|
|||
if(this.nodeConfig != null && this.nodeConfig.nodeNumber != null && this.nodeConfig.nodeNumber != ""){ |
|||
fromNodeNumber = this.nodeConfig.nodeNumber; |
|||
this.nodeConfig.gotoNode = [snowflake]; |
|||
} |
|||
if(this.childNodeP != null){ |
|||
if(this.childNodeP.nodeNumber != null && this.childNodeP.nodeNumber != ""){ |
|||
gotoNodeNumber = this.childNodeP.nodeNumber; |
|||
} |
|||
this.childNodeP.fromNode = snowflake; |
|||
if(this.childNodeP.childNode){ |
|||
if(this.childNodeP.childNode.nodeNumber != null && this.childNodeP.childNode.nodeNumber != ""){ |
|||
this.childNodeP.gotoNode = [this.childNodeP.childNode.nodeNumber]; |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
this.visible = false; |
|||
if (type != 4) { |
|||
var data; |
|||
if (type == 1) { |
|||
data = { |
|||
"nodeNumber":snowflake, |
|||
"nodeName": "审核人", |
|||
"error": true, |
|||
"type": 1, |
|||
"settype": 1, |
|||
"selectMode": 0, |
|||
"selectRange": 0, |
|||
"directorLevel": 1, |
|||
"examineMode": 1, |
|||
"noHanderAction": 1, |
|||
"examineEndDirectorLevel": 0, |
|||
"childNode": this.childNodeP, |
|||
"nodeUserList": [], |
|||
"fromNode": fromNodeNumber, |
|||
"gotoNode":[gotoNodeNumber], |
|||
"sendBackNode":"beginnode" |
|||
} |
|||
} else if (type == 2) { |
|||
data = { |
|||
"nodeNumber":snowflake, |
|||
"nodeName": "抄送人", |
|||
"type": 2, |
|||
"ccSelfSelectFlag": 1, |
|||
"childNode": this.childNodeP, |
|||
"nodeUserList": [], |
|||
"fromNode": fromNodeNumber, |
|||
"gotoNode":[gotoNodeNumber] |
|||
} |
|||
} |
|||
console.log("添加节点--1---》",data,this.childNodeP,this.nodeConfig) |
|||
this.$emit("update:childNodeP", data) |
|||
} else { |
|||
const snowflake1 = v4().replaceAll('-','').toString(); |
|||
const snowflake2 = v4().replaceAll('-','').toString(); |
|||
if(this.childNodeP){ |
|||
console.log("添加节点--3--》",this.childNodeP) |
|||
// if(this.childNodeP.length > 0){ |
|||
// this.childNodeP.forEach(item => { |
|||
// item.fromNode = snowflake1 |
|||
// console.log("添加节点--4--》",item) |
|||
// }); |
|||
// } |
|||
this.childNodeP.fromNode =snowflake1 |
|||
}; |
|||
let selectNode = { |
|||
"nodeNumber":snowflake, |
|||
"nodeName": "路由", |
|||
"type": 4, |
|||
"childNode": null, |
|||
"fromNode": fromNodeNumber, |
|||
"gotoNode":[snowflake1,snowflake2], |
|||
"conditionNodes": [{ |
|||
"nodeNumber":snowflake1, |
|||
"nodeName": "条件1", |
|||
"error": true, |
|||
"type": 3, |
|||
"priorityLevel": 1, |
|||
"conditionList": [], |
|||
"nodeUserList": [], |
|||
"fromNode": snowflake, |
|||
"gotoNode":gotoNodeNumber, |
|||
"childNode": this.childNodeP, |
|||
}, { |
|||
"nodeNumber":snowflake2, |
|||
"nodeName": "条件2", |
|||
"type": 3, |
|||
"priorityLevel": 2, |
|||
"conditionList": [], |
|||
"nodeUserList": [], |
|||
"fromNode": snowflake, |
|||
"gotoNode":[], |
|||
"childNode": null |
|||
}] |
|||
}; |
|||
console.log("添加节点--3---》",selectNode,this.childNodeP,this.nodeConfig) |
|||
this.$emit("update:childNodeP", selectNode) |
|||
|
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped lang="less"> |
|||
.add-node-btn-box { |
|||
width: 240px; |
|||
display: -webkit-inline-box; |
|||
display: -ms-inline-flexbox; |
|||
display: inline-flex; |
|||
-ms-flex-negative: 0; |
|||
flex-shrink: 0; |
|||
-webkit-box-flex: 1; |
|||
-ms-flex-positive: 1; |
|||
position: relative; |
|||
|
|||
&:before { |
|||
content: ""; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
z-index: -1; |
|||
margin: auto; |
|||
width: 2px; |
|||
height: 100%; |
|||
background-color: #cacaca |
|||
} |
|||
|
|||
.add-node-btn { |
|||
user-select: none; |
|||
width: 240px; |
|||
padding: 20px 0 32px; |
|||
display: flex; |
|||
-webkit-box-pack: center; |
|||
justify-content: center; |
|||
flex-shrink: 0; |
|||
-webkit-box-flex: 1; |
|||
flex-grow: 1; |
|||
|
|||
.btn { |
|||
outline: none; |
|||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1); |
|||
width: 30px; |
|||
height: 30px; |
|||
background: #3296fa; |
|||
border-radius: 50%; |
|||
position: relative; |
|||
border: none; |
|||
line-height: 30px; |
|||
-webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1); |
|||
transition: all .3s cubic-bezier(.645, .045, .355, 1); |
|||
|
|||
.iconfont { |
|||
color: #fff; |
|||
font-size: 16px |
|||
} |
|||
|
|||
&:hover { |
|||
transform: scale(1.3); |
|||
box-shadow: 0 13px 27px 0 rgba(0, 0, 0, .1) |
|||
} |
|||
|
|||
&:active { |
|||
transform: none; |
|||
background: #1e83e9; |
|||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
<style lang="less"> |
|||
.add-node-popover-body { |
|||
display: flex; |
|||
|
|||
.add-node-popover-item { |
|||
margin-right: 10px; |
|||
cursor: pointer; |
|||
text-align: center; |
|||
flex: 1; |
|||
color: #191f25 !important; |
|||
|
|||
.item-wrapper { |
|||
user-select: none; |
|||
display: inline-block; |
|||
width: 80px; |
|||
height: 80px; |
|||
margin-bottom: 5px; |
|||
background: #fff; |
|||
border: 1px solid #e2e2e2; |
|||
border-radius: 50%; |
|||
transition: all .3s cubic-bezier(.645, .045, .355, 1); |
|||
|
|||
.iconfont { |
|||
font-size: 35px; |
|||
line-height: 80px |
|||
} |
|||
} |
|||
|
|||
&.approver { |
|||
.item-wrapper { |
|||
color: #ff943e |
|||
} |
|||
} |
|||
|
|||
&.notifier { |
|||
.item-wrapper { |
|||
color: #3296fa |
|||
} |
|||
} |
|||
|
|||
&.condition { |
|||
.item-wrapper { |
|||
color: #15bc83 |
|||
} |
|||
} |
|||
|
|||
&:hover { |
|||
.item-wrapper { |
|||
background: #3296fa; |
|||
box-shadow: 0 10px 20px 0 rgba(50, 150, 250, .4) |
|||
} |
|||
|
|||
.iconfont { |
|||
color: #fff |
|||
} |
|||
} |
|||
|
|||
&:active { |
|||
.item-wrapper { |
|||
box-shadow: none; |
|||
background: #eaeaea |
|||
} |
|||
|
|||
.iconfont { |
|||
color: inherit |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,129 @@ |
|||
<template> |
|||
<el-dialog title="选择成员" :visible.sync="visibleDialog" width="600px" append-to-body class="promoter_person"> |
|||
<div class="person_body clear"> |
|||
|
|||
|
|||
|
|||
|
|||
<el-row> |
|||
<el-col :span="12"> |
|||
|
|||
<div class="person_tree l"> |
|||
<input type="text" placeholder="搜索成员" v-model="searchVal" @input="getDebounceData($event)"> |
|||
<p class="ellipsis tree_nav" v-if="!searchVal"> |
|||
<span @click="getDepartmentList(309)" class="ellipsis">全部</span> |
|||
<span v-for="(item,index) in departments.titleDepartments" class="ellipsis" |
|||
:key="index+'a'" @click="getDepartmentList(item.id)">{{item.departmentName}}</span> |
|||
</p> |
|||
<selectBox :list="list"/> |
|||
</div> |
|||
|
|||
</el-col> |
|||
<el-col :span="12"> |
|||
|
|||
<selectResult :total="total" @del="delList" :list="resList"/> |
|||
|
|||
</el-col> |
|||
</el-row> |
|||
|
|||
|
|||
|
|||
</div> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="$emit('update:visible',false)">取 消</el-button> |
|||
<el-button type="primary" @click="saveDialog">确 定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import selectBox from '../selectBox.vue'; |
|||
import selectResult from '../selectResult.vue'; |
|||
import mixins from './mixins' |
|||
export default { |
|||
components: { selectBox, selectResult }, |
|||
mixins: [mixins], |
|||
props: ['visible', 'data', 'isDepartment'], |
|||
watch: { |
|||
visible(val) { |
|||
this.visibleDialog = this.visible |
|||
if (val) { |
|||
this.getDepartmentList(); |
|||
this.searchVal = ""; |
|||
if(this.data !== null){ |
|||
this.checkedEmployessList = this.data.filter(item => item.type === 1).map(({ name, targetId }) => ({ |
|||
employeeName: name, |
|||
id: targetId |
|||
})); |
|||
this.checkedDepartmentList = this.data.filter(item => item.type === 3).map(({ name, targetId }) => ({ |
|||
departmentName: name, |
|||
id: targetId |
|||
})); |
|||
} |
|||
} |
|||
}, |
|||
visibleDialog(val) { |
|||
this.$emit('update:visible', val) |
|||
} |
|||
}, |
|||
computed: { |
|||
total() { |
|||
return this.checkedDepartmentList.length + this.checkedEmployessList.length |
|||
}, |
|||
list() { |
|||
return [{ |
|||
isDepartment: this.isDepartment, |
|||
type: 'department', |
|||
data: this.departments.childDepartments, |
|||
isActive: (item) => this.$func.toggleClass(this.checkedDepartmentList, item), |
|||
change: (item) => this.$func.toChecked(this.checkedDepartmentList, item), |
|||
next: (item) => this.getDepartmentList(item.id) |
|||
}, { |
|||
type: 'employee', |
|||
data: this.departments.employees, |
|||
isActive: (item) => this.$func.toggleClass(this.checkedEmployessList, item), |
|||
change: (item) => this.$func.toChecked(this.checkedEmployessList, item), |
|||
}] |
|||
}, |
|||
resList() { |
|||
let data = [{ |
|||
type: 'employee', |
|||
data: this.checkedEmployessList, |
|||
cancel: (item) => this.$func.removeEle(this.checkedEmployessList, item) |
|||
}] |
|||
if (this.isDepartment) { |
|||
data.unshift({ |
|||
type: 'department', |
|||
data: this.checkedDepartmentList, |
|||
cancel: (item) => this.$func.removeEle(this.checkedDepartmentList, item) |
|||
}) |
|||
} |
|||
return data |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
checkedDepartmentList: [], |
|||
checkedEmployessList: [], |
|||
} |
|||
}, |
|||
methods: { |
|||
saveDialog() { |
|||
let checkedList = [...this.checkedDepartmentList, ...this.checkedEmployessList].map(item => ({ |
|||
type: item.employeeName ? 1 : 3, |
|||
targetId: item.id, |
|||
name: item.employeeName || item.departmentName |
|||
})) |
|||
this.$emit('change', checkedList) |
|||
}, |
|||
delList() { |
|||
this.checkedDepartmentList = []; |
|||
this.checkedEmployessList = [] |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
@import "../../css/dialog.css"; |
|||
</style> |
|||
@ -0,0 +1,146 @@ |
|||
<template> |
|||
<el-dialog title="选择成员" :visible.sync="visibleDialog" width="600px" append-to-body class="promoter_person"> |
|||
<div class="person_body clear"> |
|||
<div class="person_tree l"> |
|||
<input type="text" placeholder="搜索成员" v-model="searchVal" @input="getDebounceData($event,activeName)"> |
|||
<el-tabs v-model="activeName" @tab-click="handleClick"> |
|||
<el-tab-pane label="组织架构" name="1"></el-tab-pane> |
|||
<el-tab-pane label="角色列表" name="2"></el-tab-pane> |
|||
</el-tabs> |
|||
<p class="ellipsis tree_nav" v-if="activeName==1&&!searchVal"> |
|||
<span @click="getDepartmentList(0)" class="ellipsis">天下</span> |
|||
<span v-for="(item,index) in departments.titleDepartments" class="ellipsis" |
|||
:key="index+'a'" @click="getDepartmentList(item.id)">{{item.departmentName}}</span> |
|||
</p> |
|||
<selectBox :list="list" style="height: 360px;"/> |
|||
</div> |
|||
<selectResult :total="total" @del="delList" :list="resList"/> |
|||
</div> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="$emit('update:visible',false)">取 消</el-button> |
|||
<el-button type="primary" @click="saveDialog">确 定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import selectBox from '../selectBox.vue'; |
|||
import selectResult from '../selectResult.vue'; |
|||
import mixins from './mixins' |
|||
export default { |
|||
components: { selectBox, selectResult }, |
|||
mixins: [mixins], |
|||
props: ['visible', 'data', 'isDepartment'], |
|||
watch: { |
|||
visible(val) { |
|||
this.visibleDialog = this.visible |
|||
if (val) { |
|||
this.activeName = "1"; |
|||
this.getDepartmentList(); |
|||
this.searchVal = ""; |
|||
if(this.data !== null) { |
|||
this.checkedEmployessList = this.data.filter(item => item.type === 1).map(({ name, targetId }) => ({ |
|||
employeeName: name, |
|||
id: targetId |
|||
})); |
|||
this.checkedRoleList = this.data.filter(item => item.type === 2).map(({ name, targetId }) => ({ |
|||
roleName: name, |
|||
roleId: targetId |
|||
})); |
|||
this.checkedDepartmentList = this.data.filter(item => item.type === 3).map(({ name, targetId }) => ({ |
|||
departmentName: name, |
|||
id: targetId |
|||
})); |
|||
} |
|||
} |
|||
}, |
|||
visibleDialog(val) { |
|||
this.$emit('update:visible', val) |
|||
} |
|||
}, |
|||
computed: { |
|||
total() { |
|||
return this.checkedEmployessList.length + this.checkedRoleList.length + this.checkedDepartmentList.length |
|||
}, |
|||
list() { |
|||
if (this.activeName === '2') { |
|||
return [{ |
|||
type: 'role', |
|||
not: false, |
|||
data: this.roles, |
|||
isActiveItem: (item) => this.$func.toggleClass(this.checkedRoleList, item, 'roleId'), |
|||
change: (item) => this.$func.toChecked(this.checkedRoleList, item, 'roleId') |
|||
}] |
|||
} else { |
|||
return [{ |
|||
isDepartment: this.isDepartment, |
|||
type: 'department', |
|||
data: this.departments.childDepartments, |
|||
isActive: (item) => this.$func.toggleClass(this.checkedDepartmentList, item), |
|||
change: (item) => this.$func.toChecked(this.checkedDepartmentList, item), |
|||
next: (item) => this.getDepartmentList(item.id) |
|||
}, { |
|||
type: 'employee', |
|||
data: this.departments.employees, |
|||
isActive: (item) => this.$func.toggleClass(this.checkedEmployessList, item), |
|||
change: (item) => this.$func.toChecked(this.checkedEmployessList, item), |
|||
}] |
|||
} |
|||
}, |
|||
resList() { |
|||
let data = [{ |
|||
type: 'role', |
|||
data: this.checkedRoleList, |
|||
cancel: (item) => this.$func.removeEle(this.checkedRoleList, item, 'roleId') |
|||
}, { |
|||
type: 'employee', |
|||
data: this.checkedEmployessList, |
|||
cancel: (item) => this.$func.removeEle(this.checkedEmployessList, item) |
|||
}] |
|||
if (this.isDepartment) { |
|||
data.splice(1, 0, { |
|||
type: 'department', |
|||
data: this.checkedDepartmentList, |
|||
cancel: (item) => this.$func.removeEle(this.checkedDepartmentList, item) |
|||
}) |
|||
} |
|||
return data |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
checkedRoleList: [], |
|||
checkedEmployessList: [], |
|||
checkedDepartmentList: [] |
|||
} |
|||
}, |
|||
methods: { |
|||
handleClick() { |
|||
this.searchVal = ""; |
|||
this.conditionRoleSearchName = ""; |
|||
if (this.activeName == 1) { |
|||
this.getDepartmentList(); |
|||
} else { |
|||
this.getRoleList(); |
|||
} |
|||
}, |
|||
saveDialog() { |
|||
let checkedList = [...this.checkedRoleList, ...this.checkedEmployessList, ...this.checkedDepartmentList].map(item => ({ |
|||
type: item.employeeName ? 1 : (item.roleName ? 2 : 3), |
|||
targetId: item.id || item.roleId, |
|||
name: item.employeeName || item.roleName || item.departmentName |
|||
})) |
|||
this.$emit('change', checkedList) |
|||
}, |
|||
delList() { |
|||
this.checkedEmployessList = []; |
|||
this.checkedRoleList = []; |
|||
this.checkedDepartmentList = [] |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
@import "../../css/dialog.css"; |
|||
</style> |
|||
@ -0,0 +1,72 @@ |
|||
<!-- |
|||
* @Date: 2022-08-04 16:29:35 |
|||
* @LastEditors: StavinLi |
|||
* @LastEditTime: 2022-09-21 11:16:58 |
|||
* @FilePath: /Workflow/src/components/dialog/errorDialog.vue |
|||
--> |
|||
<template> |
|||
<el-dialog title="提示" :visible.sync="visibleDialog"> |
|||
<div class="ant-confirm-body"> |
|||
<i class="anticon anticon-close-circle" style="color: #f00;"></i> |
|||
<span class="ant-confirm-title">当前无法发布</span> |
|||
<div class="ant-confirm-content"> |
|||
<div> |
|||
<p class="error-modal-desc">以下内容不完善,需进行修改</p> |
|||
<div class="error-modal-list"> |
|||
<div class="error-modal-item" v-for="(item,index) in list" :key="index"> |
|||
<div class="error-modal-item-label">流程设计</div> |
|||
<div class="error-modal-item-content">{{item.name}} 未选择{{item.type}}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="visibleDialog = false">我知道了</el-button> |
|||
<el-button type="primary" @click="visibleDialog = false">前往修改</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: ["list", "visible"], |
|||
data() { |
|||
return { |
|||
visibleDialog: false, |
|||
} |
|||
}, |
|||
watch: { |
|||
visible(val) { |
|||
this.visibleDialog = val |
|||
}, |
|||
visibleDialog(val) { |
|||
this.$emit('update:visible', val) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.ant-confirm-body .ant-confirm-title { |
|||
color: rgba(0, 0, 0, .85); |
|||
font-weight: 500; |
|||
font-size: 16px; |
|||
line-height: 1.4; |
|||
display: block; |
|||
overflow: hidden |
|||
} |
|||
|
|||
.ant-confirm-body .ant-confirm-content { |
|||
margin-left: 38px; |
|||
font-size: 14px; |
|||
color: rgba(0, 0, 0, .65); |
|||
margin-top: 8px |
|||
} |
|||
|
|||
.ant-confirm-body>.anticon { |
|||
font-size: 22px; |
|||
margin-right: 16px; |
|||
float: left |
|||
} |
|||
</style> |
|||
@ -0,0 +1,48 @@ |
|||
import { getRoles, getDepartments, getEmployees } from "@/api/workflowapi/workflowaip" |
|||
import { getOrgAndMan } from "@/api/workflowapi/workflowhraip" |
|||
export default { |
|||
data() { |
|||
return { |
|||
visibleDialog: false, |
|||
searchVal: "", |
|||
activeName: "1", |
|||
departments: {}, |
|||
roles: [], |
|||
} |
|||
}, |
|||
methods: { |
|||
async getRoleList() { |
|||
let { data: { list } } = await getRoles() |
|||
this.roles = list; |
|||
}, |
|||
async getDepartmentList(parentId = 309) { |
|||
let sendForm = { |
|||
id:parentId.toString() |
|||
} |
|||
let { data } = await getOrgAndMan(sendForm) |
|||
console.log("获取人员信息------->",data) |
|||
this.departments = data; |
|||
}, |
|||
getDebounceData(event, type = 1) { |
|||
this.$func.debounce(async function () { |
|||
if (event.target.value) { |
|||
let data = { |
|||
searchName: event.target.value, |
|||
pageNum: 1, |
|||
pageSize: 30 |
|||
} |
|||
if (type == 1) { |
|||
this.departments.childDepartments = []; |
|||
let res = await getEmployees(data) |
|||
this.departments.employees = res.data.list |
|||
} else { |
|||
let res = await getRoles(data) |
|||
this.roles = res.data.list |
|||
} |
|||
} else { |
|||
type == 1 ? await this.getDepartmentList() : await this.getRoleList(); |
|||
} |
|||
}.bind(this))() |
|||
}, |
|||
} |
|||
} |
|||
@ -0,0 +1,92 @@ |
|||
<!-- |
|||
* @Date: 2022-08-04 16:29:35 |
|||
* @LastEditors: StavinLi |
|||
* @LastEditTime: 2022-09-21 11:25:18 |
|||
* @FilePath: /Workflow/src/components/dialog/roleDialog.vue |
|||
--> |
|||
<template> |
|||
<el-dialog title="选择角色" :visible.sync="visibleDialog" width="600px" append-to-body class="promoter_person"> |
|||
<div class="person_body clear"> |
|||
<div class="person_tree l"> |
|||
<input type="text" placeholder="搜索角色" v-model="searchVal" @input="getDebounceData($event,2)"> |
|||
<selectBox :list="list" /> |
|||
</div> |
|||
<selectResult :total="total" @del="delList" :list="resList"/> |
|||
</div> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="$emit('update:visible',false)">取 消</el-button> |
|||
<el-button type="primary" @click="saveDialog">确 定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import selectBox from '../selectBox.vue'; |
|||
import selectResult from '../selectResult.vue'; |
|||
import mixins from './mixins' |
|||
export default { |
|||
components: { selectBox, selectResult }, |
|||
mixins: [mixins], |
|||
props: ['visible', 'data'], |
|||
watch: { |
|||
visible(val) { |
|||
this.visibleDialog = this.visible |
|||
if (val) { |
|||
this.getRoleList(); |
|||
this.searchVal = ""; |
|||
this.checkedRoleList = this.data.map(({ name, targetId }) => ({ |
|||
roleName: name, |
|||
roleId: targetId |
|||
})); |
|||
} |
|||
}, |
|||
visibleDialog(val) { |
|||
this.$emit('update:visible', val) |
|||
} |
|||
}, |
|||
computed: { |
|||
total() { |
|||
return this.checkedRoleList.length |
|||
}, |
|||
list() { |
|||
return [{ |
|||
type: 'role', |
|||
not: true, |
|||
data: this.roles, |
|||
isActive: (item) => this.$func.toggleClass(this.checkedRoleList, item, 'roleId'), |
|||
// eslint-disable-next-line vue/no-side-effects-in-computed-properties |
|||
change: (item) => this.checkedRoleList = [item] |
|||
}] |
|||
}, |
|||
resList() { |
|||
return [{ |
|||
type: 'role', |
|||
data: this.checkedRoleList, |
|||
cancel: (item) => this.$func.removeEle(this.checkedRoleList, item, 'roleId') |
|||
}] |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
checkedRoleList: [], |
|||
} |
|||
}, |
|||
methods: { |
|||
saveDialog() { |
|||
let checkedList = this.checkedRoleList.map(item => ({ |
|||
type: 2, |
|||
targetId: item.roleId, |
|||
name: item.roleName |
|||
})) |
|||
this.$emit('change', checkedList) |
|||
}, |
|||
delList() { |
|||
this.checkedRoleList = []; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
@import "../../css/dialog.css"; |
|||
</style> |
|||
@ -0,0 +1,306 @@ |
|||
<template> |
|||
<el-drawer :append-to-body="true" title="审批人设置" :visible.sync="approverDrawer" direction="rtl" class="set_promoter" size="550px" :before-close="saveApprover"> |
|||
<div class="demo-drawer__content"> |
|||
<div class="drawer_content"> |
|||
<div class="approver_content"> |
|||
<el-radio-group v-model="approverConfig.settype" class="clear" @change="changeType"> |
|||
<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-radio :label="8" v-if="nodeOptionalButton">指定审批节点自选</el-radio> |
|||
</el-radio-group> |
|||
<el-button type="primary" @click="addApprover" v-if="approverConfig.settype==1">添加/修改成员</el-button> |
|||
<p class="selected_list" v-if="approverConfig.settype==1"> |
|||
<span v-for="(item,index) in approverConfig.nodeUserList" :key="index">{{item.name}} |
|||
<img src="@/assets/images/add-close1.png" @click="$func.removeEle(approverConfig.nodeUserList,item,'targetId')"> |
|||
</span> |
|||
<a v-if="approverConfig.nodeUserList.length!=0" @click="approverConfig.nodeUserList=[]">清除</a> |
|||
</p> |
|||
</div> |
|||
<div class="approver_manager" v-if="approverConfig.settype==2"> |
|||
<p> |
|||
<span>发起人的:</span> |
|||
<select v-model="approverConfig.directorLevel"> |
|||
<option v-for="item in directorMaxLevel" :value="item" :key="item">{{item==1?'直接':'第'+item+'级'}}负责人</option> |
|||
</select> |
|||
</p> |
|||
<p class="tip">找不到负责人时,由上级负责人代审批</p> |
|||
</div> |
|||
<div class="approver_self" v-if="approverConfig.settype==5"> |
|||
<p>该审批节点设置“发起人自己”后,审批人默认为发起人</p> |
|||
</div> |
|||
<div class="approver_self_select" v-show="approverConfig.settype==4"> |
|||
<el-radio-group v-model="approverConfig.selectMode" style="width: 100%;"> |
|||
<el-radio :label="1">选一个人</el-radio> |
|||
<el-radio :label="2">选多个人</el-radio> |
|||
</el-radio-group> |
|||
<h3>选择范围</h3> |
|||
<el-radio-group v-model="approverConfig.selectRange" style="width: 100%;" @change="changeRange"> |
|||
<el-radio :label="1">全公司</el-radio> |
|||
<el-radio :label="2">指定成员</el-radio> |
|||
<el-radio :label="3">指定角色</el-radio> |
|||
</el-radio-group> |
|||
<el-button type="primary" size="mini" @click="addApprover" v-if="approverConfig.selectRange==2">添加/修改成员</el-button> |
|||
<el-button type="primary" size="mini" @click="addRoleApprover" v-if="approverConfig.selectRange==3">添加/修改角色</el-button> |
|||
<p class="selected_list" v-if="approverConfig.selectRange==2||approverConfig.selectRange==3"> |
|||
<span v-for="(item,index) in approverConfig.nodeUserList" :key="index">{{item.name}} |
|||
<img src="@/assets/images/add-close1.png" @click="$func.removeEle(approverConfig.nodeUserList,item,'targetId')"> |
|||
</span> |
|||
<a v-if="approverConfig.nodeUserList.length!=0&&approverConfig.selectRange!=1" @click="approverConfig.nodeUserList=[]">清除</a> |
|||
</p> |
|||
</div> |
|||
<div class="approver_manager" v-if="approverConfig.settype==7"> |
|||
<p>审批终点</p> |
|||
<p style="padding-bottom:20px"> |
|||
<span>发起人的:</span> |
|||
<select v-model="approverConfig.examineEndDirectorLevel"> |
|||
<option v-for="item in directorMaxLevel" :value="item" :key="item">{{item==1?'最高':'第'+item}}层级负责人</option> |
|||
</select> |
|||
</p> |
|||
</div> |
|||
<div class="approver_some" v-if="(approverConfig.settype==1&&approverConfig.nodeUserList.length>1)||approverConfig.settype==2||(approverConfig.settype==4&&approverConfig.selectMode==2)"> |
|||
<p>多人审批时采用的审批方式</p> |
|||
<el-radio-group v-model="approverConfig.examineMode" class="clear"> |
|||
<el-radio :label="1">依次审批</el-radio> |
|||
<br/> |
|||
<el-radio :label="2" v-if="approverConfig.settype!=2">会签(须所有审批人同意)</el-radio> |
|||
<br/> |
|||
<el-radio :label="3" v-if="approverConfig.settype!=2">非会签(有一个审批人同意即可)</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
<div class="approver_some" v-if="approverConfig.settype==2||approverConfig.settype==7"> |
|||
<p>审批人为空时</p> |
|||
<el-radio-group v-model="approverConfig.noHanderAction" class="clear"> |
|||
<el-radio :label="1">自动审批通过/不允许发起</el-radio> |
|||
<br/> |
|||
<el-radio :label="2">转交给审核管理员</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
<div class="approver_some" v-if="approverConfig.settype==8"> |
|||
<p>可选节点列表</p> |
|||
<el-radio-group v-model="approverConfig.customNode" class="clear"> |
|||
<el-radio v-for="item in nodeOptional" :label="item.nodeNumber" :key="item.nodeNumber" class="nodeGroupRadio">{{ item.nodeName }}(编号:{{ item.nodeNumber }})</el-radio> |
|||
|
|||
</el-radio-group> |
|||
</div> |
|||
<div class="approver_some"> |
|||
<p>退回设置</p> |
|||
<el-radio-group v-model="approverConfig.sendBackNode" class="clear"> |
|||
<el-radio label="beginnode" class="nodeGroupRadio">发起人</el-radio> |
|||
<el-radio v-for="item in nodeOptional" :label="item.nodeNumber" :key="item.nodeNumber" class="nodeGroupRadio">{{ item.nodeName }}(编号:{{ item.nodeNumber }})</el-radio> |
|||
|
|||
</el-radio-group> |
|||
</div> |
|||
</div> |
|||
<div class="demo-drawer__footer clear"> |
|||
<el-button type="primary" @click="saveApprover">确 定</el-button> |
|||
<el-button @click="closeDrawer">取 消</el-button> |
|||
</div> |
|||
<employees-dialog |
|||
:visible.sync="approverVisible" |
|||
:data.sync="checkedList" |
|||
@change="sureApprover" |
|||
/> |
|||
<role-dialog |
|||
:visible.sync="approverRoleVisible" |
|||
:data.sync="checkedRoleList" |
|||
@change="sureRoleApprover" |
|||
/> |
|||
</div> |
|||
</el-drawer> |
|||
</template> |
|||
<script> |
|||
import { judgeOptionalNode,getAllParentNode } from "@/api/systemaccredit/systemapi"; |
|||
import employeesDialog from '../dialog/employeesDialog.vue' |
|||
import roleDialog from '../dialog/roleDialog.vue' |
|||
import { mapState, mapMutations } from 'vuex' |
|||
export default { |
|||
components: { employeesDialog, roleDialog }, |
|||
props: ['directorMaxLevel','nodeConfig'], |
|||
data() { |
|||
return { |
|||
approverConfig: {}, |
|||
approverVisible: false, |
|||
approverRoleVisible: false, |
|||
approverEmplyessList: [], |
|||
checkedRoleList: [], |
|||
checkedList: [], |
|||
nodeNumber:0, |
|||
nodeVerify:[], |
|||
nodeAllVerify:[], |
|||
nodeOptional:[], |
|||
nodeOptionalButton:false, |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapState(['approverConfig1', 'approverDrawer']), |
|||
}, |
|||
watch: { |
|||
approverConfig1(val) { |
|||
this.approverConfig = val.value; |
|||
this.getAllFatchNode(val.value.fromNode,this.nodeAllVerify); |
|||
console.log("审批人设置------122------>",val,this.nodeAllVerify,this.nodeOptional) |
|||
// this.approverConfig.sendBackNode = "beginnode" |
|||
// this.$set(this.approverConfig,"sendBackNode","beginnode") |
|||
}, |
|||
|
|||
nodeConfig:{ |
|||
handler(val){ |
|||
console.log("节点变化---》",val) |
|||
this.nodeAllVerify=[] |
|||
this.getAllNodeCont(val) |
|||
|
|||
console.log("节点变化--123-1》",this.nodeVerify,this.nodeAllVerify) |
|||
}, |
|||
deep: true, |
|||
immediate: true |
|||
} |
|||
}, |
|||
methods: { |
|||
...mapMutations(['setApproverConfig', 'setApprover']), |
|||
changeRange() { |
|||
this.approverConfig.nodeUserList = []; |
|||
}, |
|||
changeType(val) { |
|||
this.approverConfig.nodeUserList = []; |
|||
this.approverConfig.examineMode = 1; |
|||
this.approverConfig.noHanderAction = 2; |
|||
if (val == 2) { |
|||
this.approverConfig.directorLevel = 1; |
|||
} else if (val == 4) { |
|||
this.approverConfig.selectMode = 1; |
|||
this.approverConfig.selectRange = 1; |
|||
} else if (val == 7) { |
|||
this.approverConfig.examineEndDirectorLevel = 1 |
|||
} |
|||
}, |
|||
addApprover() { |
|||
this.approverVisible = true; |
|||
this.checkedList = this.approverConfig.nodeUserList |
|||
}, |
|||
addRoleApprover() { |
|||
this.approverRoleVisible = true; |
|||
this.checkedRoleList = this.approverConfig.nodeUserList |
|||
}, |
|||
sureApprover(data) { |
|||
this.approverConfig.nodeUserList = data; |
|||
this.approverVisible = false; |
|||
}, |
|||
sureRoleApprover(data) { |
|||
this.approverConfig.nodeUserList = data; |
|||
this.approverRoleVisible = false; |
|||
}, |
|||
saveApprover() { |
|||
this.approverConfig.error = !this.$func.setApproverStr(this.approverConfig) |
|||
this.setApproverConfig({ |
|||
value: this.approverConfig, |
|||
flag: true, |
|||
id: this.approverConfig1.id |
|||
}) |
|||
console.log("确定条件--------->",this.approverConfig); |
|||
this.$emit("update:nodeConfig", this.approverConfig); |
|||
this.closeDrawer() |
|||
}, |
|||
closeDrawer() { |
|||
this.setApprover(false) |
|||
}, |
|||
//判断是否显示(指定审批节点自选)选项及可选节点 |
|||
async getAllNodeCont(val){ |
|||
const res = await judgeOptionalNode(val) |
|||
console.log("判断是否显示(指定审批节点自选)选项及可选节点",res) |
|||
if(res.code == 0){ |
|||
this.nodeAllVerify = res.data.allcont |
|||
} |
|||
}, |
|||
|
|||
//获取所有父级审批节点 |
|||
async getAllFatchNode(key,listcont){ |
|||
let sendData = { |
|||
id:key, |
|||
allcont:listcont |
|||
} |
|||
const res = await getAllParentNode(sendData); |
|||
console.log("获取所有父级审批节点",res) |
|||
if(res.code == 0){ |
|||
this.nodeOptional = res.data.allcont |
|||
if(res.data.total > 0){ |
|||
this.nodeOptionalButton = true |
|||
}else{ |
|||
this.nodeOptionalButton = false |
|||
} |
|||
} |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="less"> |
|||
.nodeGroupRadio{ |
|||
display: block; |
|||
width: 100%; |
|||
margin: 0px 0 0 10px; |
|||
} |
|||
.set_promoter { |
|||
.approver_content { |
|||
padding-bottom: 10px; |
|||
border-bottom: 1px solid #f2f2f2; |
|||
} |
|||
|
|||
.approver_self_select .el-button, |
|||
.approver_content .el-button { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.approver_content .el-radio, |
|||
.approver_some .el-radio, |
|||
.approver_self_select .el-radio { |
|||
width: 27%; |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.approver_manager p { |
|||
line-height: 32px; |
|||
} |
|||
|
|||
.approver_manager select { |
|||
width: 420px; |
|||
height: 32px; |
|||
background: rgba(255, 255, 255, 1); |
|||
border-radius: 4px; |
|||
border: 1px solid rgba(217, 217, 217, 1); |
|||
} |
|||
|
|||
.approver_manager p.tip { |
|||
margin: 10px 0 22px 0; |
|||
font-size: 12px; |
|||
line-height: 16px; |
|||
color: #f8642d; |
|||
} |
|||
|
|||
.approver_self { |
|||
padding: 28px 20px; |
|||
} |
|||
|
|||
.approver_self_select, |
|||
.approver_manager, |
|||
.approver_content, |
|||
.approver_some { |
|||
padding: 20px 20px 0; |
|||
} |
|||
|
|||
.approver_manager p:first-of-type, |
|||
.approver_some p { |
|||
line-height: 19px; |
|||
font-size: 14px; |
|||
margin-bottom: 14px; |
|||
} |
|||
|
|||
.approver_self_select h3 { |
|||
margin: 5px 0 20px; |
|||
font-size: 14px; |
|||
font-weight: bold; |
|||
line-height: 19px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,362 @@ |
|||
<template> |
|||
<el-drawer :append-to-body="true" title="条件设置" :visible.sync="conditionDrawer" direction="rtl" class="condition_copyer" size="550px" :before-close="saveCondition"> |
|||
<select v-model="conditionConfig.priorityLevel" class="priority_level"> |
|||
<option v-for="item in conditionsConfig.conditionNodes.length" :value="item" :key="item">优先级{{item}}</option> |
|||
</select> |
|||
<div class="demo-drawer__content"> |
|||
<div class="condition_content drawer_content"> |
|||
<p class="tip">当审批单同时满足以下条件时进入此流程</p> |
|||
<ul> |
|||
<li v-for="(item,index) in conditionConfig.conditionList" :key="index"> |
|||
<span class="ellipsis">{{item.type==1?'发起人':item.showName}}:</span> |
|||
<div v-if="item.type==1"> |
|||
<p :class="conditionConfig.nodeUserList.length > 0?'selected_list':''" @click.self="addConditionRole" style="cursor:text"> |
|||
<span v-for="(item1,index1) in conditionConfig.nodeUserList" :key="index1"> |
|||
{{item1.name}}<img src="@/assets/images/add-close1.png" @click="$func.removeEle(conditionConfig.nodeUserList,item1,'targetId')"> |
|||
</span> |
|||
<input type="text" placeholder="请选择具体人员/角色/部门" v-if="conditionConfig.nodeUserList.length == 0" @click="addConditionRole"> |
|||
</p> |
|||
</div> |
|||
<div v-else-if="item.columnType == 'String' && item.showType == 'checkBox'"> |
|||
<p class="check_box"> |
|||
<a :class="$func.toggleStrClass(item,item1.key)&&'active'" @click="toStrChecked(item,item1.key)" |
|||
v-for="(item1,index1) in JSON.parse(item.fixedDownBoxValue)" :key="index1">{{item1.value}}</a> |
|||
</p> |
|||
</div> |
|||
<div v-else> |
|||
<p> |
|||
<select v-model="item.optType" :style="'width:'+(item.optType==6?370:100)+'px'" @change="changeOptType(item)"> |
|||
<option value="1">小于</option> |
|||
<option value="2">大于</option> |
|||
<option value="3">小于等于</option> |
|||
<option value="4">等于</option> |
|||
<option value="5">大于等于</option> |
|||
<option value="6">介于两个数之间</option> |
|||
</select> |
|||
<input v-if="item.optType!=6" type="text" :placeholder="'请输入'+item.showName" v-enter-number="2" v-model="item.zdy1"> |
|||
</p> |
|||
<p v-if="item.optType==6"> |
|||
<input type="text" style="width:75px;" class="mr_10" v-enter-number="2" v-model="item.zdy1"> |
|||
<select style="width:60px;" v-model="item.opt1"> |
|||
<option value="<"><</option> |
|||
<option value="≤">≤</option> |
|||
</select> |
|||
<span class="ellipsis" style="display:inline-block;width:60px;vertical-align: text-bottom;">{{item.showName}}</span> |
|||
<select style="width:60px;" class="ml_10" v-model="item.opt2"> |
|||
<option value="<"><</option> |
|||
<option value="≤">≤</option> |
|||
</select> |
|||
<input type="text" style="width:75px;" v-enter-number="2" v-model="item.zdy2"> |
|||
</p> |
|||
</div> |
|||
<a v-if="item.type==1" @click="conditionConfig.nodeUserList= [];$func.removeEle(conditionConfig.conditionList,item,'columnId')">删除</a> |
|||
<a v-if="item.type==2" @click="$func.removeEle(conditionConfig.conditionList,item,'columnId')">删除</a> |
|||
</li> |
|||
</ul> |
|||
<el-button type="primary" @click="addCondition">添加条件</el-button> |
|||
<el-dialog title="选择条件" :visible.sync="conditionVisible" width="480px" append-to-body class="condition_list"> |
|||
<p>请选择用来区分审批流程的条件字段</p> |
|||
<p class="check_box"> |
|||
<a :class="$func.toggleClass(conditionList,{columnId:0},'columnId')&&'active'" @click="$func.toChecked(conditionList,{columnId:0},'columnId')">发起人</a> |
|||
<a v-for="(item,index) in conditions" :key="index" :class="$func.toggleClass(conditionList,item,'columnId')&&'active'" |
|||
@click="$func.toChecked(conditionList,item,'columnId')">{{item.showName}}</a> |
|||
</p> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="conditionVisible = false">取 消</el-button> |
|||
<el-button type="primary" @click="sureCondition">确 定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</div> |
|||
<employees-role-dialog |
|||
:visible.sync="conditionRoleVisible" |
|||
:data.sync="checkedList" |
|||
@change="sureConditionRole" |
|||
:isDepartment="true" |
|||
/> |
|||
<div class="demo-drawer__footer clear"> |
|||
<el-button type="primary" @click="saveCondition">确 定</el-button> |
|||
<el-button @click="setCondition(false)">取 消</el-button> |
|||
</div> |
|||
</div> |
|||
</el-drawer> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapState, mapMutations } from 'vuex' |
|||
import employeesRoleDialog from '../dialog/employeesRoleDialog.vue' |
|||
// import { getConditions } from '@/plugins/api.js' |
|||
import { getConditions } from "@/api/workflowapi/workflowaip" |
|||
export default { |
|||
components: { |
|||
employeesRoleDialog |
|||
}, |
|||
data() { |
|||
return { |
|||
conditionVisible: false, |
|||
conditionsConfig: { |
|||
conditionNodes: [], |
|||
}, |
|||
conditionConfig: {}, |
|||
PriorityLevel: "", |
|||
conditions: [], |
|||
conditionList: [], |
|||
checkedList: [], |
|||
conditionRoleVisible: false, |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapState(['tableId', 'conditionsConfig1', 'conditionDrawer']), |
|||
}, |
|||
watch: { |
|||
conditionsConfig1(val) { |
|||
this.conditionsConfig = val.value; |
|||
this.PriorityLevel = val.priorityLevel |
|||
this.conditionConfig = val.priorityLevel |
|||
? this.conditionsConfig.conditionNodes[val.priorityLevel - 1] |
|||
: { nodeUserList: [], conditionList: [] } |
|||
}, |
|||
}, |
|||
methods: { |
|||
...mapMutations(['setCondition', 'setConditionsConfig']), |
|||
changeOptType(item) { |
|||
if (item.optType == 1) { |
|||
item.zdy1 = 2; |
|||
} else { |
|||
item.zdy1 = 1; |
|||
item.zdy2 = 2; |
|||
} |
|||
}, |
|||
toStrChecked(item, key) { |
|||
let a = item.zdy1 ? item.zdy1.split(",") : [] |
|||
var isIncludes = this.$func.toggleStrClass(item, key); |
|||
if (!isIncludes) { |
|||
a.push(key) |
|||
item.zdy1 = a.toString() |
|||
} else { |
|||
this.removeStrEle(item, key); |
|||
} |
|||
}, |
|||
removeStrEle(item, key) { |
|||
let a = item.zdy1 ? item.zdy1.split(",") : [] |
|||
var includesIndex; |
|||
a.map((item, index) => { |
|||
if (item == key) { |
|||
includesIndex = index |
|||
} |
|||
}); |
|||
a.splice(includesIndex, 1); |
|||
item.zdy1 = a.toString() |
|||
}, |
|||
async addCondition() { |
|||
this.conditionList = []; |
|||
this.conditionVisible = true; |
|||
let { data } = await getConditions({ tableId: this.tableId }) |
|||
this.conditions = data; |
|||
if (this.conditionConfig.conditionList) { |
|||
for (var i = 0; i < this.conditionConfig.conditionList.length; i++) { |
|||
var { columnId } = this.conditionConfig.conditionList[i] |
|||
if (columnId == 0) { |
|||
this.conditionList.push({ columnId: 0 }) |
|||
} else { |
|||
this.conditionList.push(this.conditions.filter(item => item.columnId == columnId)[0]) |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
sureCondition() { |
|||
//1.弹窗有,外面无+ |
|||
//2.弹窗有,外面有不变 |
|||
for (var i = 0; i < this.conditionList.length; i++) { |
|||
var { columnId, showName, columnName, showType, columnType, fixedDownBoxValue } = this.conditionList[i]; |
|||
if (this.$func.toggleClass(this.conditionConfig.conditionList, this.conditionList[i], "columnId")) { |
|||
continue; |
|||
} |
|||
if (columnId == 0) { |
|||
this.conditionConfig.nodeUserList == []; |
|||
this.conditionConfig.conditionList.push({ |
|||
"type": 1, |
|||
columnId, |
|||
"showName": '发起人' |
|||
}); |
|||
} else { |
|||
if (columnType == "Double") { |
|||
this.conditionConfig.conditionList.push({ |
|||
showType, |
|||
columnId, |
|||
"type": 2, |
|||
showName, |
|||
"optType": "1", |
|||
"zdy1": "2", |
|||
"opt1": "<", |
|||
"zdy2": "", |
|||
"opt2": "<", |
|||
"columnDbname": columnName, |
|||
columnType, |
|||
}) |
|||
} else if (columnType == "String" && showType == "checkBox") { |
|||
this.conditionConfig.conditionList.push({ |
|||
showType, |
|||
columnId, |
|||
"type": 2, |
|||
showName, |
|||
"zdy1": "", |
|||
"columnDbname": columnName, |
|||
columnType, |
|||
fixedDownBoxValue |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
//3.弹窗无,外面有- |
|||
for (let i = this.conditionConfig.conditionList.length - 1; i >= 0; i--) { |
|||
if (!this.$func.toggleClass(this.conditionList, this.conditionConfig.conditionList[i], "columnId")) { |
|||
this.conditionConfig.conditionList.splice(i, 1); |
|||
} |
|||
} |
|||
this.conditionConfig.conditionList.sort(function (a, b) { return a.columnId - b.columnId; }); |
|||
this.conditionVisible = false; |
|||
}, |
|||
saveCondition() { |
|||
this.setCondition(false) |
|||
var a = this.conditionsConfig.conditionNodes.splice(this.PriorityLevel - 1, 1)//截取旧下标 |
|||
this.conditionsConfig.conditionNodes.splice(this.conditionConfig.priorityLevel - 1, 0, a[0])//填充新下标 |
|||
this.conditionsConfig.conditionNodes.map((item, index) => { |
|||
item.priorityLevel = index + 1 |
|||
}); |
|||
for (var i = 0; i < this.conditionsConfig.conditionNodes.length; i++) { |
|||
this.conditionsConfig.conditionNodes[i].error = this.$func.conditionStr(this.conditionsConfig, i) == "请设置条件" && i != this.conditionsConfig.conditionNodes.length - 1 |
|||
} |
|||
this.setConditionsConfig({ |
|||
value: this.conditionsConfig, |
|||
flag: true, |
|||
id: this.conditionsConfig1.id |
|||
}) |
|||
}, |
|||
addConditionRole() { |
|||
this.conditionRoleVisible = true; |
|||
this.checkedList = this.conditionConfig.nodeUserList |
|||
}, |
|||
sureConditionRole(data) { |
|||
this.conditionConfig.nodeUserList = data; |
|||
this.conditionRoleVisible = false; |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less"> |
|||
.condition_copyer { |
|||
.el-drawer__body { |
|||
.priority_level { |
|||
position: absolute; |
|||
top: 11px; |
|||
right: 30px; |
|||
width: 100px; |
|||
height: 32px; |
|||
background: rgba(255, 255, 255, 1); |
|||
border-radius: 4px; |
|||
border: 1px solid rgba(217, 217, 217, 1); |
|||
} |
|||
} |
|||
|
|||
.condition_content { |
|||
padding: 20px 20px 0; |
|||
|
|||
p.tip { |
|||
margin: 20px 0; |
|||
width: 510px; |
|||
text-indent: 17px; |
|||
line-height: 45px; |
|||
background: rgba(241, 249, 255, 1); |
|||
border: 1px solid rgba(64, 163, 247, 1); |
|||
color: #46a6fe; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
ul { |
|||
max-height: 500px; |
|||
overflow-y: scroll; |
|||
margin-bottom: 20px; |
|||
|
|||
li { |
|||
&>span { |
|||
float: left; |
|||
margin-right: 8px; |
|||
width: 70px; |
|||
line-height: 32px; |
|||
text-align: right; |
|||
} |
|||
|
|||
&>div { |
|||
display: inline-block; |
|||
width: 370px; |
|||
|
|||
&>p:not(:last-child) { |
|||
margin-bottom: 10px; |
|||
} |
|||
} |
|||
|
|||
&:not(:last-child)>div>p { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
&>a { |
|||
float: right; |
|||
margin-right: 10px; |
|||
margin-top: 7px; |
|||
} |
|||
|
|||
select, |
|||
input { |
|||
width: 100%; |
|||
height: 32px; |
|||
background: rgba(255, 255, 255, 1); |
|||
border-radius: 4px; |
|||
border: 1px solid rgba(217, 217, 217, 1); |
|||
} |
|||
|
|||
select+input { |
|||
width: 260px; |
|||
} |
|||
|
|||
select { |
|||
margin-right: 10px; |
|||
width: 100px; |
|||
} |
|||
|
|||
p.selected_list { |
|||
padding-left: 10px; |
|||
border-radius: 4px; |
|||
min-height: 32px; |
|||
border: 1px solid rgba(217, 217, 217, 1); |
|||
word-break: break-word; |
|||
} |
|||
|
|||
p.check_box { |
|||
line-height: 32px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.el-button { |
|||
margin-bottom: 20px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.condition_list { |
|||
.el-dialog__body { |
|||
padding: 16px 26px; |
|||
} |
|||
|
|||
p { |
|||
color: #666666; |
|||
margin-bottom: 10px; |
|||
|
|||
&>.check_box { |
|||
margin-bottom: 0; |
|||
line-height: 36px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,99 @@ |
|||
<!-- |
|||
* @Date: 2022-08-04 16:29:35 |
|||
* @LastEditors: StavinLi |
|||
* @LastEditTime: 2022-09-21 14:14:32 |
|||
* @FilePath: /Workflow/src/components/drawer/copyerDrawer.vue |
|||
--> |
|||
<template> |
|||
<el-drawer :append-to-body="true" title="抄送人设置" :visible.sync="copyerDrawer" direction="rtl" class="set_copyer" size="550px" :before-close="saveCopyer"> |
|||
<div class="demo-drawer__content"> |
|||
<div class="copyer_content drawer_content"> |
|||
<el-button type="primary" @click="addCopyer">添加成员</el-button> |
|||
<p class="selected_list"> |
|||
<span v-for="(item,index) in copyerConfig.nodeUserList" :key="index">{{item.name}} |
|||
<img src="@/assets/images/add-close1.png" @click="$func.removeEle(copyerConfig.nodeUserList,item,'targetId')"> |
|||
</span> |
|||
<a v-if="copyerConfig.nodeUserList&©erConfig.nodeUserList.length!=0" @click="copyerConfig.nodeUserList=[]">清除</a> |
|||
</p> |
|||
<el-checkbox-group v-model="ccSelfSelectFlag" class="clear"> |
|||
<el-checkbox :label="1">允许发起人自选抄送人</el-checkbox> |
|||
</el-checkbox-group> |
|||
</div> |
|||
<div class="demo-drawer__footer clear"> |
|||
<el-button type="primary" @click="saveCopyer">确 定</el-button> |
|||
<el-button @click="closeDrawer">取 消</el-button> |
|||
</div> |
|||
<employees-role-dialog |
|||
:visible.sync="copyerVisible" |
|||
:data.sync="checkedList" |
|||
@change="sureCopyer" |
|||
/> |
|||
</div> |
|||
</el-drawer> |
|||
</template> |
|||
<script> |
|||
import employeesRoleDialog from '../dialog/employeesRoleDialog.vue' |
|||
import { mapState, mapMutations } from 'vuex' |
|||
export default { |
|||
components: { |
|||
employeesRoleDialog |
|||
}, |
|||
data() { |
|||
return { |
|||
copyerConfig: {}, |
|||
ccSelfSelectFlag: [], |
|||
copyerVisible: false, |
|||
checkedList: [], |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapState(['copyerDrawer', 'copyerConfig1']), |
|||
}, |
|||
watch: { |
|||
copyerConfig1(val) { |
|||
this.copyerConfig = val.value; |
|||
this.ccSelfSelectFlag = this.copyerConfig.ccSelfSelectFlag == 0 ? [] : [this.copyerConfig.ccSelfSelectFlag] |
|||
} |
|||
}, |
|||
methods: { |
|||
...mapMutations(['setCopyerConfig', 'setCopyer']), |
|||
addCopyer() { |
|||
this.copyerVisible = true; |
|||
this.checkedList = this.copyerConfig.nodeUserList |
|||
}, |
|||
sureCopyer(data) { |
|||
this.copyerConfig.nodeUserList = data; |
|||
this.copyerVisible = false; |
|||
}, |
|||
saveCopyer() { |
|||
this.copyerConfig.ccSelfSelectFlag = this.ccSelfSelectFlag.length == 0 ? 0 : 1; |
|||
this.copyerConfig.error = !this.$func.copyerStr(this.copyerConfig); |
|||
this.setCopyerConfig({ |
|||
value: this.copyerConfig, |
|||
flag: true, |
|||
id: this.copyerConfig1.id |
|||
}) |
|||
this.closeDrawer(); |
|||
}, |
|||
closeDrawer() { |
|||
this.setCopyer(false) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less"> |
|||
.set_copyer { |
|||
.copyer_content { |
|||
padding: 20px 20px 0; |
|||
|
|||
.el-button { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.el-checkbox { |
|||
margin-bottom: 20px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,89 @@ |
|||
<!-- |
|||
* @Date: 2022-08-04 16:29:35 |
|||
* @LastEditors: StavinLi |
|||
* @LastEditTime: 2022-09-21 11:17:15 |
|||
* @FilePath: /Workflow/src/components/drawer/promoterDrawer.vue |
|||
--> |
|||
<template> |
|||
<el-drawer :append-to-body="true" title="发起人" :visible.sync="promoterDrawer" direction="rtl" class="set_promoter" size="550px" :before-close="savePromoter"> |
|||
<div class="demo-drawer__content"> |
|||
<div class="promoter_content drawer_content"> |
|||
<p>{{$func.arrToStr(flowPermission)?$func.arrToStr(flowPermission):'所有人'}}</p> |
|||
<el-button type="primary" @click="addPromoter">添加/修改发起人</el-button> |
|||
</div> |
|||
<div class="demo-drawer__footer clear"> |
|||
<el-button type="primary" @click="savePromoter">确 定</el-button> |
|||
<el-button @click="closeDrawer">取 消</el-button> |
|||
</div> |
|||
<employees-dialog |
|||
:isDepartment="true" |
|||
:visible.sync="promoterVisible" |
|||
:data.sync="checkedList" |
|||
@change="surePromoter" |
|||
/> |
|||
</div> |
|||
</el-drawer> |
|||
</template> |
|||
<script> |
|||
import employeesDialog from '../dialog/employeesDialog.vue' |
|||
import { mapState, mapMutations } from 'vuex' |
|||
export default { |
|||
components: { employeesDialog }, |
|||
data() { |
|||
return { |
|||
flowPermission: [], |
|||
promoterVisible: false, |
|||
checkedList: [], |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapState(['promoterDrawer', 'flowPermission1']), |
|||
}, |
|||
watch: { |
|||
flowPermission1(val) { |
|||
this.flowPermission = val.value |
|||
} |
|||
}, |
|||
methods: { |
|||
...mapMutations(['setPromoter', 'setFlowPermission']), |
|||
addPromoter() { |
|||
|
|||
this.checkedList = this.flowPermission |
|||
this.promoterVisible = true; |
|||
}, |
|||
surePromoter(data) { |
|||
this.flowPermission = data; |
|||
this.promoterVisible = false; |
|||
}, |
|||
savePromoter() { |
|||
this.setFlowPermission({ |
|||
value: this.flowPermission, |
|||
flag: true, |
|||
id: this.flowPermission1.id |
|||
}) |
|||
this.closeDrawer() |
|||
}, |
|||
closeDrawer() { |
|||
this.setPromoter(false) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="less" > |
|||
.set_promoter { |
|||
.promoter_content { |
|||
padding: 0 20px; |
|||
|
|||
.el-button { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
p { |
|||
padding: 18px 0; |
|||
font-size: 14px; |
|||
line-height: 20px; |
|||
color: #000000; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,304 @@ |
|||
<template> |
|||
<div> |
|||
<div class="node-wrap" v-if="nodeConfig.type<3"> |
|||
<div class="node-wrap-box" :class="(nodeConfig.type==0?'start-node ':'')+(isTried&&nodeConfig.error?'active error':'')"> |
|||
<div> |
|||
<div class="title" :style="`background: rgb(${bgColor});`"> |
|||
<span v-if="nodeConfig.type==0">{{nodeConfig.nodeName}}</span> |
|||
<template v-else> |
|||
<span class="iconfont">{{nodeConfig.type==1?'':''}}</span> |
|||
<input type="text" |
|||
v-if="isInput" |
|||
class="ant-input editable-title-input" |
|||
@blur="blurEvent()" |
|||
@focus="$event.currentTarget.select()" |
|||
v-focus |
|||
v-model="nodeConfig.nodeName" |
|||
:placeholder="defaultText" |
|||
> |
|||
<span v-else class="editable-title" @click="clickEvent()">{{nodeConfig.nodeName}}</span> |
|||
<i class="anticon anticon-close close" @click="delNode"></i> |
|||
</template> |
|||
</div> |
|||
<div class="content" @click="setPerson"> |
|||
<div class="text"> |
|||
<span class="placeholder" v-if="!showText">请选择{{defaultText}}</span> |
|||
{{showText}} |
|||
</div> |
|||
<i class="anticon anticon-right arrow"></i> |
|||
</div> |
|||
<div class="error_tip" v-if="isTried&&nodeConfig.error"> |
|||
<i class="anticon anticon-exclamation-circle"></i> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<addNode :childNodeP.sync="nodeConfig.childNode" :nodeConfig.sync="nodeConfig" :step="1"></addNode> |
|||
</div> |
|||
<div class="branch-wrap" v-if="nodeConfig.type==4"> |
|||
<div class="branch-box-wrap"> |
|||
<div class="branch-box"> |
|||
<button class="add-branch" @click="addTerm">添加条件</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" :class="isTried&&item.error?'error active':''"> |
|||
<div class="sort-left" v-if="index!=0" @click="arrTransfer(index,-1)"><</div> |
|||
<div class="title-wrapper"> |
|||
<input |
|||
v-if="isInputList[index]" |
|||
type="text" |
|||
class="ant-input editable-title-input" |
|||
@blur="blurEvent(index)" |
|||
@focus="$event.currentTarget.select()" |
|||
v-focus v-model="item.nodeName" |
|||
> |
|||
<span v-else class="editable-title" @click="clickEvent(index)">{{item.nodeName}}</span> |
|||
<span class="priority-title" @click="setPerson(item.priorityLevel)">优先级{{item.priorityLevel}}</span> |
|||
<i class="anticon anticon-close close" @click="delTerm(index)"></i> |
|||
</div> |
|||
<div class="sort-right" v-if="index!=nodeConfig.conditionNodes.length-1" @click="arrTransfer(index)">></div> |
|||
<div class="content" @click="setPerson(item.priorityLevel)">{{$func.conditionStr(nodeConfig,index)}}</div> |
|||
<div class="error_tip" v-if="isTried&&item.error"> |
|||
<i class="anticon anticon-exclamation-circle"></i> |
|||
</div> |
|||
</div> |
|||
<addNode :childNodeP.sync="item.childNode" :nodeConfig="item" :step="2"></addNode> |
|||
</div> |
|||
</div> |
|||
<nodeWrap v-if="item.childNode" :nodeConfig="item"></nodeWrap> |
|||
<template v-if="index==0"> |
|||
<div class="top-left-cover-line"></div> |
|||
<div class="bottom-left-cover-line"></div> |
|||
</template> |
|||
<template v-if="index==nodeConfig.conditionNodes.length-1"> |
|||
<div class="top-right-cover-line"></div> |
|||
<div class="bottom-right-cover-line"></div> |
|||
</template> |
|||
</div> |
|||
</div> |
|||
<addNode :childNodeP.sync="nodeConfig.childNode" :nodeConfig.="nodeConfig" :step="3"></addNode> |
|||
</div> |
|||
</div> |
|||
<nodeWrap v-if="nodeConfig.childNode" :nodeConfig="nodeConfig.childNode"></nodeWrap> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { v4 } from 'uuid' |
|||
import { mapState, mapMutations } from 'vuex' |
|||
export default { |
|||
props: ["nodeConfig", "flowPermission"], |
|||
data() { |
|||
return { |
|||
placeholderList: ["发起人", "审核人", "抄送人"], |
|||
isInputList: [], |
|||
isInput: false, |
|||
} |
|||
}, |
|||
mounted() { |
|||
if (this.nodeConfig.type == 1) { |
|||
this.nodeConfig.error = !this.$func.setApproverStr(this.nodeConfig) |
|||
} else if (this.nodeConfig.type == 2) { |
|||
this.nodeConfig.error = !this.$func.copyerStr(this.nodeConfig) |
|||
} else if (this.nodeConfig.type == 4) { |
|||
this.resetConditionNodesErr() |
|||
} |
|||
console.log("初始化节点数据--1---》",this.nodeConfig,this.nodeConfig.childNode) |
|||
}, |
|||
computed: { |
|||
...mapState(['isTried', 'flowPermission1', 'approverConfig1', 'copyerConfig1', 'conditionsConfig1']), |
|||
defaultText() { |
|||
return this.placeholderList[this.nodeConfig.type] |
|||
}, |
|||
showText() { |
|||
if (this.nodeConfig.type == 0) return this.$func.arrToStr(this.flowPermission) || '所有人' |
|||
if (this.nodeConfig.type == 1) return this.$func.setApproverStr(this.nodeConfig) |
|||
return this.$func.copyerStr(this.nodeConfig) |
|||
}, |
|||
bgColor() { |
|||
return ['87, 106, 149', '255, 148, 62', '50, 150, 250'][this.nodeConfig.type] |
|||
} |
|||
}, |
|||
watch: { |
|||
flowPermission1(data) { |
|||
if (data.flag && data.id === this._uid) { |
|||
this.$emit('update:flowPermission', data.value) |
|||
} |
|||
}, |
|||
approverConfig1(data) { |
|||
if (data.flag && data.id === this._uid) { |
|||
this.$emit('update:nodeConfig', data.value) |
|||
} |
|||
}, |
|||
copyerConfig1(data) { |
|||
if (data.flag && data.id === this._uid) { |
|||
this.$emit('update:nodeConfig', data.value) |
|||
} |
|||
}, |
|||
conditionsConfig1(data) { |
|||
if (data.flag && data.id === this._uid) { |
|||
this.$emit('update:nodeConfig', data.value) |
|||
} |
|||
}, |
|||
}, |
|||
methods: { |
|||
...mapMutations([ |
|||
'setPromoter', |
|||
'setApprover', |
|||
'setCopyer', |
|||
'setCondition', |
|||
'setFlowPermission', |
|||
'setApproverConfig', |
|||
'setCopyerConfig', |
|||
'setConditionsConfig' |
|||
]), |
|||
clickEvent(index) { |
|||
if (index || index === 0) { |
|||
this.$set(this.isInputList, index, true) |
|||
} else { |
|||
this.isInput = true; |
|||
} |
|||
}, |
|||
blurEvent(index) { |
|||
if (index || index === 0) { |
|||
this.$set(this.isInputList, index, false) |
|||
this.nodeConfig.conditionNodes[index].nodeName = this.nodeConfig.conditionNodes[index].nodeName || "条件" |
|||
} else { |
|||
this.isInput = false; |
|||
this.nodeConfig.nodeName = this.nodeConfig.nodeName || this.defaultText |
|||
} |
|||
}, |
|||
delNode() { |
|||
this.$emit("update:nodeConfig", this.nodeConfig.childNode); |
|||
}, |
|||
addTerm() { |
|||
const snowflake = v4().replaceAll('-','').toString(); |
|||
console.log("添加条件--->",this.nodeConfig) |
|||
let len = this.nodeConfig.conditionNodes.length + 1 |
|||
this.nodeConfig.gotoNode.push(snowflake); |
|||
this.nodeConfig.conditionNodes.push({ |
|||
"nodeNumber":snowflake, |
|||
"nodeName": "条件" + len, |
|||
"type": 3, |
|||
"priorityLevel": len, |
|||
"conditionList": [], |
|||
"nodeUserList": [], |
|||
"childNode": null, |
|||
"fromNode": this.nodeConfig.nodeNumber, |
|||
"gotoNode":[] |
|||
}); |
|||
this.resetConditionNodesErr() |
|||
this.$emit("update:nodeConfig", this.nodeConfig); |
|||
}, |
|||
delTerm(index) { |
|||
this.nodeConfig.conditionNodes.splice(index, 1) |
|||
this.nodeConfig.conditionNodes.map((item, index) => { |
|||
item.priorityLevel = index + 1 |
|||
item.nodeName = `条件${index + 1}` |
|||
}); |
|||
this.resetConditionNodesErr() |
|||
this.$emit("update:nodeConfig", this.nodeConfig); |
|||
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:nodeConfig", this.nodeConfig.conditionNodes[0].childNode); |
|||
} |
|||
}, |
|||
reData(data, addData) { |
|||
if (!data.childNode) { |
|||
data.childNode = addData |
|||
} else { |
|||
this.reData(data.childNode, addData) |
|||
} |
|||
}, |
|||
setPerson(priorityLevel) { |
|||
console.log("请选择------------>",priorityLevel) |
|||
var { type } = this.nodeConfig; |
|||
console.log("请选择-----1------->",type,this.nodeConfig) |
|||
if (type == 0) { |
|||
this.setPromoter(true) |
|||
this.setFlowPermission({ |
|||
value: this.flowPermission, |
|||
flag: false, |
|||
id: this._uid |
|||
}) |
|||
} else if (type == 1) { |
|||
this.setApprover(true) |
|||
this.setApproverConfig({ |
|||
value: { |
|||
...JSON.parse(JSON.stringify(this.nodeConfig)), |
|||
...{ settype: this.nodeConfig.settype ? this.nodeConfig.settype : 1 } |
|||
}, |
|||
flag: false, |
|||
id: this._uid |
|||
}) |
|||
} else if (type == 2) { |
|||
this.setCopyer(true) |
|||
this.setCopyerConfig({ |
|||
value: JSON.parse(JSON.stringify(this.nodeConfig)), |
|||
flag: false, |
|||
id: this._uid |
|||
}) |
|||
} else { |
|||
this.setCondition(true) |
|||
this.setConditionsConfig({ |
|||
value: JSON.parse(JSON.stringify(this.nodeConfig)), |
|||
priorityLevel, |
|||
flag: false, |
|||
id: this._uid |
|||
}) |
|||
} |
|||
}, |
|||
arrTransfer(index, type = 1) {//向左-1,向右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:nodeConfig", this.nodeConfig); |
|||
}, |
|||
resetConditionNodesErr() { |
|||
for (var i = 0; i < this.nodeConfig.conditionNodes.length; i++) { |
|||
this.nodeConfig.conditionNodes[i].error = this.$func.conditionStr(this.nodeConfig, i) == "请设置条件" && i != this.nodeConfig.conditionNodes.length - 1 |
|||
} |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
<style> |
|||
.error_tip { |
|||
position: absolute; |
|||
top: 0px; |
|||
right: 0px; |
|||
transform: translate(150%, 0px); |
|||
font-size: 24px; |
|||
} |
|||
|
|||
.promoter_person .el-dialog__body { |
|||
padding: 10px 20px 14px 20px; |
|||
} |
|||
|
|||
.selected_list { |
|||
margin-bottom: 20px; |
|||
line-height: 30px; |
|||
} |
|||
|
|||
.selected_list span { |
|||
margin-right: 10px; |
|||
padding: 3px 6px 3px 9px; |
|||
line-height: 12px; |
|||
white-space: nowrap; |
|||
border-radius: 2px; |
|||
border: 1px solid rgba(220, 220, 220, 1); |
|||
} |
|||
|
|||
.selected_list img { |
|||
margin-left: 5px; |
|||
width: 7px; |
|||
height: 7px; |
|||
cursor: pointer; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,151 @@ |
|||
<template> |
|||
<div> |
|||
<div> |
|||
<el-button size="small" @click="showDialog()">选择考核项目</el-button> |
|||
</div> |
|||
|
|||
<el-dialog title="提示" :visible.sync="dialogVisible" width="60%" :append-to-body="true"> |
|||
<div class="gva-search-box"> |
|||
<el-form ref="searchForm" :inline="true" :model="projectSearchInfo"> |
|||
<el-form-item label="考核项目名称"> |
|||
<el-input |
|||
placeholder="请输入名称" |
|||
v-model="projectSearchInfo.title" |
|||
clearable> |
|||
</el-input> |
|||
</el-form-item> |
|||
<!-- <el-form-item label="考核项目状态"> |
|||
<el-select v-model="projectSearchInfo.state" clearable placeholder="请选择状态"> |
|||
<el-option :value=1 label="正常">正常</el-option> |
|||
<el-option :value=2 label="禁止">禁止</el-option> |
|||
</el-select> |
|||
</el-form-item> --> |
|||
<el-form-item label="所属考核类别"> |
|||
<el-select v-model="projectSearchInfo.parentId" clearable placeholder="请选择状态"> |
|||
<el-option |
|||
v-for="item in dutyclasslist" |
|||
:key="item.outId" |
|||
:label="item.title" |
|||
:value="item.outId"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button> |
|||
<!-- <el-button size="mini" icon="el-icon-refresh" @click="onReset">重置</el-button> --> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
<div class="gva-table-box"> |
|||
<el-table :data="assessList"> |
|||
<!-- <el-table-column |
|||
type="selection" |
|||
width="55" |
|||
/> --> |
|||
<el-table-column align="left" label="所属考核类别" prop="parentTitle"/> |
|||
<el-table-column align="left" label="考核项目名称" prop="title"/> |
|||
<el-table-column align="left" label="考核项目说明" prop="content"/> |
|||
<el-table-column align="left" fixed="right" label="操作" width="200"> |
|||
<template #default="scope"> |
|||
<el-button type="primary" round @click="checked(scope.row)">选中</el-button> |
|||
|
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div class="gva-pagination"> |
|||
<el-pagination |
|||
:current-page="projectSearchInfo.page" |
|||
:page-size="projectSearchInfo.pageSize" |
|||
:page-sizes="[10, 30, 50, 100]" |
|||
:total="total" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
@current-change="handleCurrentChange" |
|||
@size-change="handleSizeChange" |
|||
/> |
|||
</div> |
|||
</div> |
|||
<!-- <span slot="footer" class="dialog-footer"> |
|||
<el-button @click="dialogVisible = false">取 消</el-button> |
|||
<el-button type="primary" @click="dialogVisible = false">确 定</el-button> |
|||
</span> --> |
|||
</el-dialog> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { |
|||
dutyclasslist |
|||
} from '@/api/duty/dimension' |
|||
import { |
|||
assessList, |
|||
} from '@/api/duty/project' |
|||
export default { |
|||
data() { |
|||
return { |
|||
projectTitle:'', |
|||
total:'', |
|||
searchList:{ |
|||
page:1, |
|||
pagesize:10000, |
|||
}, |
|||
dutyclasslist:{}, |
|||
projectSearchInfo:{ |
|||
page: 1, |
|||
pageSize: 10, |
|||
state:1, |
|||
}, |
|||
dialogVisible: false, |
|||
assessList:null, |
|||
} |
|||
}, |
|||
created () { |
|||
this.getProjectList(); |
|||
this.getDutyclasslist(); |
|||
}, |
|||
methods: { |
|||
// 条件搜索前端看此方法 |
|||
onSubmit() { |
|||
this.page = 1 |
|||
this.pageSize = 10 |
|||
|
|||
this.getProjectList() |
|||
}, |
|||
// pagesize改变 |
|||
handleSizeChange(val) { |
|||
this.projectSearchInfo.pageSize=val |
|||
}, |
|||
// 页码改变 |
|||
handleCurrentChange(val) { |
|||
this.projectSearchInfo.page=val |
|||
}, |
|||
// 获取考核类别列表 |
|||
async getDutyclasslist(){ |
|||
const res = await dutyclasslist(this.searchList) |
|||
this.dutyclasslist=res.data.list; |
|||
}, |
|||
// 点击按钮事件 |
|||
showDialog(){ |
|||
this.dialogVisible=true; |
|||
}, |
|||
// 获取考核项目列表 |
|||
async getProjectList(){ |
|||
const res = await assessList(this.projectSearchInfo) |
|||
this.assessList=res.data.list; |
|||
this.projectSearchInfo.page=res.data.page; |
|||
this.projectSearchInfo.pageSize=res.data.pageSize; |
|||
this.total=res.data.total; |
|||
}, |
|||
// 选中 |
|||
checked(row){ |
|||
this.projectTitle=row.title; |
|||
this.$emit('checkedInfo',row) |
|||
this.dialogVisible=false |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
|
|||
</style> |
|||
@ -0,0 +1,88 @@ |
|||
<!-- eslint-disable vue/no-template-key --> |
|||
<!-- |
|||
* @Date: 2022-08-26 17:18:14 |
|||
* @LastEditors: StavinLi |
|||
* @LastEditTime: 2022-09-21 11:17:23 |
|||
* @FilePath: /Workflow/src/components/selectBox.vue |
|||
--> |
|||
<template> |
|||
<ul class="select-box"> |
|||
<template v-for="elem in list"> |
|||
<template v-if="elem.type === 'role'"> |
|||
<li v-for="item in elem.data" :key="item.roleId" |
|||
class="check_box" |
|||
:class="{active: elem.isActive && elem.isActive(item), not: elem.not}" |
|||
@click="elem.change(item)"> |
|||
<a :title="item.description" :class="{active: elem.isActiveItem && elem.isActiveItem(item)}"> |
|||
<img src="@/assets/images/icon_role.png">{{item.roleName}} |
|||
</a> |
|||
</li> |
|||
</template> |
|||
<template v-if="elem.type === 'department'"> |
|||
<li v-for="item in elem.data" :key="item.id" class="check_box" :class="{not: !elem.isDepartment}"> |
|||
<a v-if="elem.isDepartment" |
|||
:class="elem.isActive(item) && 'active'" |
|||
@click="elem.change(item)"> |
|||
<img src="@/assets/images/icon_file.png">{{item.departmentName}}</a> |
|||
<a v-else><img src="@/assets/images/icon_file.png">{{item.departmentName}}</a> |
|||
<i @click="elem.next(item)">下级</i> |
|||
</li> |
|||
</template> |
|||
<template v-if="elem.type === 'employee'"> |
|||
<li v-for="item in elem.data" :key="item.id" class="check_box"> |
|||
<a :class="elem.isActive(item) && 'active'" |
|||
@click="elem.change(item)" |
|||
:title="item.departmentNames"> |
|||
<img v-if="item.icon!=''" :src="item.icon"> |
|||
<img v-else-if="(item.icon==''&&item.iconToBase64!='') " :src="item.iconToBase64"> |
|||
<img v-else src="@/assets/images/icon_people.png"> |
|||
{{item.employeeName}} |
|||
</a> |
|||
</li> |
|||
</template> |
|||
</template> |
|||
</ul> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
props: { |
|||
list: { |
|||
type: Array, |
|||
default: () => [] |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="less"> |
|||
.select-box { |
|||
height: 420px; |
|||
overflow-y: auto; |
|||
|
|||
li { |
|||
padding: 5px 0; |
|||
|
|||
i { |
|||
float: right; |
|||
padding-left: 24px; |
|||
padding-right: 10px; |
|||
color: #3195f8; |
|||
font-size: 12px; |
|||
cursor: pointer; |
|||
background: url(~@/assets/images/next_level_active.png) no-repeat 10px center; |
|||
border-left: 1px solid rgb(238, 238, 238); |
|||
} |
|||
|
|||
a.active+i { |
|||
color: rgb(197, 197, 197); |
|||
background-image: url(~@/assets/images/next_level.png); |
|||
pointer-events: none; |
|||
} |
|||
|
|||
img { |
|||
width: 14px; |
|||
vertical-align: middle; |
|||
margin-right: 5px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,103 @@ |
|||
<!-- eslint-disable vue/no-template-key --> |
|||
<!-- |
|||
* @Date: 2022-08-26 16:29:24 |
|||
* @LastEditors: StavinLi |
|||
* @LastEditTime: 2022-09-21 11:17:24 |
|||
* @FilePath: /Workflow/src/components/selectResult.vue |
|||
--> |
|||
<template> |
|||
<div class="select-result l"> |
|||
<p class="clear">已选({{total}}) |
|||
<a @click="$emit('del')">清空</a> |
|||
</p> |
|||
<ul> |
|||
<template v-for="({type, data, cancel}) in list"> |
|||
<template v-if="type === 'role'"> |
|||
<li v-for="item in data" :key="item.roleId"> |
|||
<img src="@/assets/images/icon_role.png"> |
|||
<span>{{item.roleName}}</span> |
|||
<img src="@/assets/images/cancel.png" @click="cancel(item)"> |
|||
</li> |
|||
</template> |
|||
<template v-if="type === 'department'"> |
|||
<li v-for="item in data" :key="item.id"> |
|||
<img src="@/assets/images/icon_file.png"> |
|||
<span>{{item.departmentName}}</span> |
|||
<img src="@/assets/images/cancel.png" @click="cancel(item)"> |
|||
</li> |
|||
</template> |
|||
<template v-if="type === 'employee'"> |
|||
<li v-for="item in data" :key="item.id"> |
|||
<!-- <img src="@/assets/images/icon_people.png"> --> |
|||
<img v-if="item.icon!=''" :src="item.icon"> |
|||
<img v-else-if="(item.icon==''&&item.iconToBase64!='') " :src="item.iconToBase64"> |
|||
<img v-else src="@/assets/images/icon_people.png"> |
|||
<span>{{item.employeeName}}</span> |
|||
<img src="@/assets/images/cancel.png" @click="cancel(item)"> |
|||
</li> |
|||
</template> |
|||
</template> |
|||
</ul> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
props: { |
|||
total: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
list: { |
|||
type: Array, |
|||
default: () => [{ type: 'role', data: [], cancel: function () { } }] |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less"> |
|||
.select-result { |
|||
width: 276px; |
|||
height: 100%; |
|||
font-size: 12px; |
|||
|
|||
ul { |
|||
height: 460px; |
|||
overflow-y: auto; |
|||
|
|||
li { |
|||
margin: 11px 26px 13px 19px; |
|||
line-height: 17px; |
|||
|
|||
span { |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
img { |
|||
&:first-of-type { |
|||
width: 14px; |
|||
vertical-align: middle; |
|||
margin-right: 5px; |
|||
} |
|||
|
|||
&:last-of-type { |
|||
float: right; |
|||
margin-top: 2px; |
|||
width: 14px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
p { |
|||
padding-left: 19px; |
|||
padding-right: 20px; |
|||
line-height: 37px; |
|||
border-bottom: 1px solid #f2f2f2; |
|||
|
|||
a { |
|||
float: right; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
Loading…
Reference in new issue