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