@ -0,0 +1,157 @@ |
|||||
|
function All() { } |
||||
|
All.prototype = { |
||||
|
timer: "", |
||||
|
debounce(fn, delay = 500) { |
||||
|
var _this = this; |
||||
|
return function (arg) { |
||||
|
//获取函数的作用域和变量
|
||||
|
let that = this; |
||||
|
let args = arg; |
||||
|
clearTimeout(_this.timer) // 清除定时器
|
||||
|
_this.timer = setTimeout(function () { |
||||
|
fn.call(that, args) |
||||
|
}, delay) |
||||
|
} |
||||
|
}, |
||||
|
setCookie(val) { //cookie设置[{key:value}]、获取key、清除['key1','key2']
|
||||
|
for (var i = 0, len = val.length; i < len; i++) { |
||||
|
for (var key in val[i]) { |
||||
|
document.cookie = key + '=' + encodeURIComponent(val[i][key]) + "; path=/"; |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
getCookie(name) { |
||||
|
var strCookie = document.cookie; |
||||
|
var arrCookie = strCookie.split("; "); |
||||
|
for (var i = 0, len = arrCookie.length; i < len; i++) { |
||||
|
var arr = arrCookie[i].split("="); |
||||
|
if (name == arr[0]) { |
||||
|
return decodeURIComponent(arr[1]); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
clearCookie(name) { |
||||
|
var myDate = new Date(); |
||||
|
myDate.setTime(-1000); //设置时间
|
||||
|
for (var i = 0, len = name.length; i < len; i++) { |
||||
|
document.cookie = "" + name[i] + "=''; path=/; expires=" + myDate.toGMTString(); |
||||
|
} |
||||
|
}, |
||||
|
arrToStr(arr) { |
||||
|
if (arr) { |
||||
|
return arr.map(item => item.name).toString() |
||||
|
} |
||||
|
}, |
||||
|
toggleClass(arr, elem, key = 'id') { |
||||
|
return arr.some(item => item[key] == elem[key]); |
||||
|
}, |
||||
|
toChecked(arr, elem, key = 'id') { |
||||
|
var isIncludes = this.toggleClass(arr, elem, key); |
||||
|
!isIncludes ? arr.push(elem) : this.removeEle(arr, elem, key); |
||||
|
}, |
||||
|
removeEle(arr, elem, key = 'id') { |
||||
|
var includesIndex; |
||||
|
arr.map((item, index) => { |
||||
|
if (item[key] == elem[key]) { |
||||
|
includesIndex = index |
||||
|
} |
||||
|
}); |
||||
|
arr.splice(includesIndex, 1); |
||||
|
}, |
||||
|
setApproverStr(nodeConfig) { |
||||
|
if (nodeConfig.settype == 1) { |
||||
|
if (nodeConfig.nodeUserList.length == 1) { |
||||
|
return nodeConfig.nodeUserList[0].name |
||||
|
} else if (nodeConfig.nodeUserList.length > 1) { |
||||
|
if (nodeConfig.examineMode == 1) { |
||||
|
return this.arrToStr(nodeConfig.nodeUserList) |
||||
|
} else if (nodeConfig.examineMode == 2) { |
||||
|
return nodeConfig.nodeUserList.length + "人会签" |
||||
|
} |
||||
|
} |
||||
|
} else if (nodeConfig.settype == 2) { |
||||
|
let level = nodeConfig.directorLevel == 1 ? '直接主管' : '第' + nodeConfig.directorLevel + '级主管' |
||||
|
if (nodeConfig.examineMode == 1) { |
||||
|
return level |
||||
|
} else if (nodeConfig.examineMode == 2) { |
||||
|
return level + "会签" |
||||
|
} |
||||
|
} else if (nodeConfig.settype == 4) { |
||||
|
if (nodeConfig.selectRange == 1) { |
||||
|
return "发起人自选" |
||||
|
} else { |
||||
|
if (nodeConfig.nodeUserList.length > 0) { |
||||
|
if (nodeConfig.selectRange == 2) { |
||||
|
return "发起人自选" |
||||
|
} else { |
||||
|
return '发起人从' + nodeConfig.nodeUserList[0].name + '中自选' |
||||
|
} |
||||
|
} else { |
||||
|
return ""; |
||||
|
} |
||||
|
} |
||||
|
} else if (nodeConfig.settype == 5) { |
||||
|
return "发起人自己" |
||||
|
} else if (nodeConfig.settype == 7) { |
||||
|
return '从直接主管到通讯录中级别最高的第' + nodeConfig.examineEndDirectorLevel + '个层级主管' |
||||
|
} |
||||
|
}, |
||||
|
dealStr(str, obj) { |
||||
|
let arr = []; |
||||
|
let list = str.split(","); |
||||
|
for (var elem in obj) { |
||||
|
list.map(item => { |
||||
|
if (item == elem) { |
||||
|
arr.push(obj[elem].value) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
return arr.join("或") |
||||
|
}, |
||||
|
conditionStr(nodeConfig, index) { |
||||
|
var { conditionList, nodeUserList } = nodeConfig.conditionNodes[index]; |
||||
|
if (conditionList.length == 0) { |
||||
|
return (index == nodeConfig.conditionNodes.length - 1) && nodeConfig.conditionNodes[0].conditionList.length != 0 ? '其他条件进入此流程' : '请设置条件' |
||||
|
} else { |
||||
|
let str = "" |
||||
|
for (var i = 0; i < conditionList.length; i++) { |
||||
|
var { columnId, columnType, showType, showName, optType, zdy1, opt1, zdy2, opt2, fixedDownBoxValue } = conditionList[i]; |
||||
|
if (columnId == 0) { |
||||
|
if (nodeUserList.length != 0) { |
||||
|
str += '发起人属于:' |
||||
|
str += nodeUserList.map(item => item.name).join("或") + " 并且 " |
||||
|
} |
||||
|
} |
||||
|
if (columnType == "String" && showType == "checkBox") { |
||||
|
if (zdy1) { |
||||
|
str += showName + '属于:' + this.dealStr(zdy1, JSON.parse(fixedDownBoxValue)) + " 并且 " |
||||
|
} |
||||
|
} |
||||
|
if (columnType == "Double") { |
||||
|
if (optType != 6 && zdy1) { |
||||
|
var optTypeStr = ["", "<", ">", "≤", "=", "≥"][optType] |
||||
|
str += `${showName} ${optTypeStr} ${zdy1} 并且 ` |
||||
|
} else if (optType == 6 && zdy1 && zdy2) { |
||||
|
str += `${zdy1} ${opt1} ${showName} ${opt2} ${zdy2} 并且 ` |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
return str ? str.substring(0, str.length - 4) : '请设置条件' |
||||
|
} |
||||
|
}, |
||||
|
copyerStr(nodeConfig) { |
||||
|
if (nodeConfig.nodeUserList.length != 0) { |
||||
|
return this.arrToStr(nodeConfig.nodeUserList) |
||||
|
} else { |
||||
|
if (nodeConfig.ccSelfSelectFlag == 1) { |
||||
|
return "发起人自选" |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
toggleStrClass(item, key) { |
||||
|
let a = item.zdy1 ? item.zdy1.split(",") : [] |
||||
|
return a.some(item => item == key); |
||||
|
}, |
||||
|
} |
||||
|
|
||||
|
export default new All(); |
||||
@ -0,0 +1,58 @@ |
|||||
|
import request from '@/utils/requestFile' |
||||
|
|
||||
|
//获取流程数值
|
||||
|
export const getShiyanData = (data) => { |
||||
|
return request({ |
||||
|
url: '/workflowapi/shiyan_data', |
||||
|
method: 'post', |
||||
|
data: data |
||||
|
}) |
||||
|
} |
||||
|
/** |
||||
|
* 获取角色 |
||||
|
* @param {*} data |
||||
|
* @returns |
||||
|
*/ |
||||
|
export const getRoles = (data) => { |
||||
|
return request({ |
||||
|
url: '/workflowapi/shiyan_data', |
||||
|
method: 'post', |
||||
|
data: data |
||||
|
}) |
||||
|
} |
||||
|
/** |
||||
|
* 获取部门 |
||||
|
* @param {*} data |
||||
|
* @returns |
||||
|
*/ |
||||
|
export const getDepartments = (data) => { |
||||
|
return request({ |
||||
|
url: '/workflowapi/shiyan_data', |
||||
|
method: 'post', |
||||
|
data: data |
||||
|
}) |
||||
|
} |
||||
|
/** |
||||
|
* 获取职员 |
||||
|
* @param {*} data |
||||
|
* @returns |
||||
|
*/ |
||||
|
export const getEmployees = (data) => { |
||||
|
return request({ |
||||
|
url: '/workflowapi/shiyan_data', |
||||
|
method: 'post', |
||||
|
data: data |
||||
|
}) |
||||
|
} |
||||
|
/** |
||||
|
* 获取条件字段 |
||||
|
* @param {*} data |
||||
|
* @returns |
||||
|
*/ |
||||
|
export const getConditions = (data) => { |
||||
|
return request({ |
||||
|
url: '/workflowapi/shiyan_data', |
||||
|
method: 'post', |
||||
|
data: data |
||||
|
}) |
||||
|
} |
||||
@ -0,0 +1,10 @@ |
|||||
|
import request from '@/utils/request1' |
||||
|
|
||||
|
//获取组织及成员
|
||||
|
export const getOrgAndMan = (data) => { |
||||
|
return request({ |
||||
|
url: '/org/basis_org_obtain_sonorg_and_man', |
||||
|
method: 'post', |
||||
|
data: data |
||||
|
}) |
||||
|
} |
||||
|
After Width: | Height: | Size: 466 B |
|
After Width: | Height: | Size: 223 B |
|
After Width: | Height: | Size: 549 B |
|
After Width: | Height: | Size: 325 B |
|
After Width: | Height: | Size: 209 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 81 KiB |
|
After Width: | Height: | Size: 245 B |
|
After Width: | Height: | Size: 266 B |
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,235 @@ |
|||||
|
<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> |
||||
|
export default { |
||||
|
props: ["childNodeP"], |
||||
|
data() { |
||||
|
return { |
||||
|
visible: false |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
addType(type) { |
||||
|
this.visible = false; |
||||
|
if (type != 4) { |
||||
|
var data; |
||||
|
if (type == 1) { |
||||
|
data = { |
||||
|
"nodeName": "审核人", |
||||
|
"error": true, |
||||
|
"type": 1, |
||||
|
"settype": 1, |
||||
|
"selectMode": 0, |
||||
|
"selectRange": 0, |
||||
|
"directorLevel": 1, |
||||
|
"examineMode": 1, |
||||
|
"noHanderAction": 1, |
||||
|
"examineEndDirectorLevel": 0, |
||||
|
"childNode": this.childNodeP, |
||||
|
"nodeUserList": [] |
||||
|
} |
||||
|
} else if (type == 2) { |
||||
|
data = { |
||||
|
"nodeName": "抄送人", |
||||
|
"type": 2, |
||||
|
"ccSelfSelectFlag": 1, |
||||
|
"childNode": this.childNodeP, |
||||
|
"nodeUserList": [] |
||||
|
} |
||||
|
} |
||||
|
this.$emit("update:childNodeP", data) |
||||
|
} else { |
||||
|
this.$emit("update:childNodeP", { |
||||
|
"nodeName": "路由", |
||||
|
"type": 4, |
||||
|
"childNode": null, |
||||
|
"conditionNodes": [{ |
||||
|
"nodeName": "条件1", |
||||
|
"error": true, |
||||
|
"type": 3, |
||||
|
"priorityLevel": 1, |
||||
|
"conditionList": [], |
||||
|
"nodeUserList": [], |
||||
|
"childNode": this.childNodeP, |
||||
|
}, { |
||||
|
"nodeName": "条件2", |
||||
|
"type": 3, |
||||
|
"priorityLevel": 2, |
||||
|
"conditionList": [], |
||||
|
"nodeUserList": [], |
||||
|
"childNode": null |
||||
|
}] |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</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,234 @@ |
|||||
|
<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-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> |
||||
|
</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> |
||||
|
<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 employeesDialog from '../dialog/employeesDialog.vue' |
||||
|
import roleDialog from '../dialog/roleDialog.vue' |
||||
|
import { mapState, mapMutations } from 'vuex' |
||||
|
export default { |
||||
|
components: { employeesDialog, roleDialog }, |
||||
|
props: ['directorMaxLevel'], |
||||
|
data() { |
||||
|
return { |
||||
|
approverConfig: {}, |
||||
|
approverVisible: false, |
||||
|
approverRoleVisible: false, |
||||
|
approverEmplyessList: [], |
||||
|
checkedRoleList: [], |
||||
|
checkedList: [] |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapState(['approverConfig1', 'approverDrawer']), |
||||
|
}, |
||||
|
watch: { |
||||
|
approverConfig1(val) { |
||||
|
this.approverConfig = val.value; |
||||
|
} |
||||
|
}, |
||||
|
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 |
||||
|
}) |
||||
|
this.$emit("update:nodeConfig", this.approverConfig); |
||||
|
this.closeDrawer() |
||||
|
}, |
||||
|
closeDrawer() { |
||||
|
this.setApprover(false) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="less"> |
||||
|
.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,296 @@ |
|||||
|
<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"></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"></addNode> |
||||
|
</div> |
||||
|
</div> |
||||
|
<nodeWrap v-if="item.childNode" :nodeConfig.sync="item.childNode"></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"></addNode> |
||||
|
</div> |
||||
|
</div> |
||||
|
<nodeWrap v-if="nodeConfig.childNode" :nodeConfig.sync="nodeConfig.childNode"></nodeWrap> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
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() |
||||
|
} |
||||
|
}, |
||||
|
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() { |
||||
|
let len = this.nodeConfig.conditionNodes.length + 1 |
||||
|
this.nodeConfig.conditionNodes.push({ |
||||
|
"nodeName": "条件" + len, |
||||
|
"type": 3, |
||||
|
"priorityLevel": len, |
||||
|
"conditionList": [], |
||||
|
"nodeUserList": [], |
||||
|
"childNode": null |
||||
|
}); |
||||
|
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,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,100 @@ |
|||||
|
<!-- 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"> |
||||
|
<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> |
||||
@ -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> |
||||
@ -0,0 +1,42 @@ |
|||||
|
<template> |
||||
|
<div class="tabs_box"> |
||||
|
<el-tabs v-model="activeName" @tab-click="handleClick"> |
||||
|
<el-tab-pane label="部门指标" name="departmentpage"> |
||||
|
<departmentpage v-if="activeName=='departmentpage'"></departmentpage> <!--部门指标引用页面--> |
||||
|
</el-tab-pane> |
||||
|
<el-tab-pane label="岗位指标" name="postpage"> |
||||
|
<postpage v-if="activeName=='postpage'"></postpage> <!--岗位指标引用页面--> |
||||
|
</el-tab-pane> |
||||
|
</el-tabs> |
||||
|
</div> |
||||
|
|
||||
|
</template> |
||||
|
<script> |
||||
|
import departmentpage from "@/views/basicCont/targettabslayout/departmentpage.vue"; |
||||
|
import postpage from "@/views/basicCont/targettabslayout/postpage.vue"; |
||||
|
export default { |
||||
|
components: { |
||||
|
departmentpage, |
||||
|
postpage |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
activeName: 'departmentpage', |
||||
|
} |
||||
|
}, |
||||
|
created(){ |
||||
|
|
||||
|
}, |
||||
|
methods:{ |
||||
|
handleClick(tab, event,name) { |
||||
|
// console.log(tab,"------------------->" ,event,"------------------->" ,this.activeName); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style> |
||||
|
.tabs_box{ |
||||
|
padding: 10px 25px; |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,175 @@ |
|||||
|
<template> |
||||
|
<el-dialog :close-on-click-modal="false" :visible.sync="boxIsShow" :before-close="closeBox" title="编辑栏目" custom-class="dialogBox" append-to-body width="50%" top="15vh"> |
||||
|
<el-form ref="edittableForm" :model="editTableInfo" :rules="editPostTaRules" label-width="120px" > |
||||
|
<el-form-item label="栏目名称" prop="title"> |
||||
|
<el-input type="textarea" v-model="editTableInfo.title" autocomplete="off" placeholder="请输入栏目名称" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="岗位/提报人"> |
||||
|
<el-table |
||||
|
ref="setPostManTableEdit" |
||||
|
:data="targetOrgList" |
||||
|
style="width: 100%" |
||||
|
@selection-change="handTableOrgReportChange"> |
||||
|
|
||||
|
<el-table-column |
||||
|
label="已关联" |
||||
|
type="selection" |
||||
|
width="55"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="date" |
||||
|
label="关联岗位" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-input v-model="scope.row.name"></el-input> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="name" |
||||
|
label="提报人" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-cascader |
||||
|
filterable |
||||
|
clearable |
||||
|
v-model="scope.row.keylist" |
||||
|
:options="scope.row.child" |
||||
|
:show-all-levels="false" |
||||
|
:props="userTaProps" |
||||
|
collapse-tags |
||||
|
> |
||||
|
<template slot-scope="{ node, data }"> |
||||
|
<span>{{ data.name }}</span> |
||||
|
<span v-if="node.isLeaf"> ({{ data.number }}) </span> |
||||
|
</template> |
||||
|
</el-cascader> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
</el-table> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<template #footer> |
||||
|
<div class="dialog-footer"> |
||||
|
<el-button size="small" @click="closeBox">取 消</el-button> |
||||
|
<el-button size="small" type="primary" @click="sendEditTableInfo" :loading="butTdLoading">确 定</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
<script> |
||||
|
import { getNewTargetDepartPostMan,getNewTableDepartMan,editNewsonTargetCont } from "@/api/systemaccredit/systemapi"; |
||||
|
export default { |
||||
|
props:['editTableBox','tarid','tid','getTargetPostDetailsList'], |
||||
|
data() { |
||||
|
return { |
||||
|
butTdLoading:false, |
||||
|
boxIsShow:this.editTableBox, |
||||
|
tgid:this.tarid, |
||||
|
id:this.tid, |
||||
|
editTableInfo:{}, //栏目内容 |
||||
|
editPostTaRules:{}, //验证规则 |
||||
|
targetOrgList:[], //指标关联列表 |
||||
|
transitionOrgReport:[], // |
||||
|
// 选择员工配置项 |
||||
|
userTaProps: { |
||||
|
value: "id", |
||||
|
label: "name", |
||||
|
children: "govlist", |
||||
|
emitPath:false, |
||||
|
multiple: true |
||||
|
}, |
||||
|
} |
||||
|
}, |
||||
|
created(){ |
||||
|
|
||||
|
}, |
||||
|
watch:{ |
||||
|
|
||||
|
tarid(){ |
||||
|
this.tgid = this.tarid |
||||
|
}, |
||||
|
tid(){ |
||||
|
|
||||
|
this.id = this.tid; |
||||
|
this.editTableInfo.id=this.tid; |
||||
|
this.getTableCont(); |
||||
|
}, |
||||
|
editTableBox(){ |
||||
|
this.boxIsShow = this.editTableBox |
||||
|
this.getTableCont(); |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
methods:{ |
||||
|
//关闭 |
||||
|
closeBox(){ |
||||
|
this.boxIsShow = false; |
||||
|
this.targetOrgList = []; |
||||
|
this.transitionOrgReport = []; |
||||
|
this.$emit('closeEditTableBox'); |
||||
|
}, |
||||
|
//获取栏目相关数据 |
||||
|
async getTableCont(){ |
||||
|
//指标相关 |
||||
|
let sendData = { |
||||
|
id:this.tgid |
||||
|
} |
||||
|
const res = await getNewTargetDepartPostMan(sendData) |
||||
|
if(res.code ==0){ |
||||
|
this.targetOrgList = res.data.organdpostlist |
||||
|
} |
||||
|
//栏目 |
||||
|
let sendDataTable = { |
||||
|
id:this.id |
||||
|
} |
||||
|
let tableOrgReport = new Array |
||||
|
const resing = await getNewTableDepartMan(sendDataTable) |
||||
|
if(resing.code ==0){ |
||||
|
this.$set(this.editTableInfo,'title',resing.data.name) |
||||
|
tableOrgReport = resing.data.organdpostlist |
||||
|
} |
||||
|
if(tableOrgReport != null && tableOrgReport.length > 0){ |
||||
|
this.targetOrgList.forEach((item,indx) =>{ |
||||
|
|
||||
|
tableOrgReport.forEach(items=>{ |
||||
|
if(item.id == items.id && item.orgid == items.orgid){ |
||||
|
// console.log("色织关联人---------0--------->",item,indx) |
||||
|
item.keylist = items.keylist |
||||
|
this.$nextTick(() => { |
||||
|
this.$refs.setPostManTableEdit.toggleRowSelection(item, true) |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
}) |
||||
|
}else{ |
||||
|
this.$nextTick(() => { |
||||
|
for (let i = 0; i < this.targetOrgList.length; i++) { |
||||
|
this.$refs.setPostManTableEdit.toggleRowSelection(this.targetOrgList[i], true) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
//关联回调 |
||||
|
handTableOrgReportChange(val){ |
||||
|
this.transitionOrgReport = val; |
||||
|
}, |
||||
|
//提交数据 |
||||
|
async sendEditTableInfo(){ |
||||
|
this.boxIsShow = true; |
||||
|
this.editTableInfo.repostlist=this.transitionOrgReport; |
||||
|
console.log("提交数据---------0--------->",this.editTableInfo,this.transitionOrgReport) |
||||
|
const res = await editNewsonTargetCont(this.editTableInfo) |
||||
|
if(res.code == 0){ |
||||
|
this.$emit('getTargetPostDetailsList'); |
||||
|
this.closeBox() |
||||
|
} |
||||
|
this.boxIsShow = false; |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,565 @@ |
|||||
|
<template> |
||||
|
<el-dialog :close-on-click-modal="false" :visible.sync="tableAddDetailsBoxes" :before-close="closeTableAddBox" title="新增指标细则" custom-class="dialogBox" append-to-body width="80%" top="15vh"> |
||||
|
<el-row> |
||||
|
<el-col :span="24"> |
||||
|
<el-button |
||||
|
icon="el-icon-circle-plus-outline" |
||||
|
type="primary" |
||||
|
@click="addTablePostDetailsCont()" |
||||
|
>添加细则</el-button> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-table ref="detailsPostTablees" :data="addDetailsInfoList" style="width: 100%" empty-text=""> |
||||
|
<el-table-column |
||||
|
fixed |
||||
|
label="考核内容" |
||||
|
width="150"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-input |
||||
|
type="textarea" |
||||
|
autosize |
||||
|
placeholder="请输入考核内容" |
||||
|
v-model="scope.row.title"> |
||||
|
</el-input> |
||||
|
</template> |
||||
|
|
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
align="center" |
||||
|
label="操作属性" |
||||
|
width="110"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-select v-model="scope.row.punishtype" placeholder="请选择"> |
||||
|
<el-option label="分数" :value=1></el-option> |
||||
|
<el-option label="现金" :value=2></el-option> |
||||
|
<el-option label="分数和现金" :value=3></el-option> |
||||
|
</el-select> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
label="考核标准" |
||||
|
width="150"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-input |
||||
|
autosize |
||||
|
placeholder="请输入考核标准" |
||||
|
v-model="scope.row.standard"> |
||||
|
</el-input> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
align="center" |
||||
|
label="单位" |
||||
|
width="80"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-input |
||||
|
autosize |
||||
|
placeholder="单位" |
||||
|
v-model="scope.row.unit"> |
||||
|
</el-input> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
label="现金标准" |
||||
|
width="150"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-input |
||||
|
autosize |
||||
|
placeholder="请输入现金标准" |
||||
|
v-model="scope.row.cashstandard"> |
||||
|
</el-input> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
align="center" |
||||
|
label="操作类型" |
||||
|
width="130"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-select v-model="scope.row.types" placeholder="请选择"> |
||||
|
<el-option label="扣除" :value=1></el-option> |
||||
|
<el-option label="增加" :value=2></el-option> |
||||
|
<el-option label="现场确认扣除/增加" :value=3></el-option> |
||||
|
</el-select> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
align="center" |
||||
|
label="检查方式" |
||||
|
width="140"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-select multiple v-model="scope.row.inspemethod" placeholder="请选择"> |
||||
|
<el-option label="现场检查" :value=1></el-option> |
||||
|
<el-option label="资料审查" :value=2></el-option> |
||||
|
<el-option label="事件触发" :value=3></el-option> |
||||
|
</el-select> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
align="center" |
||||
|
label="检查周期" |
||||
|
width="110"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-select v-model="scope.row.cycle" placeholder="请选择"> |
||||
|
<el-option |
||||
|
v-for="item in optionsclye" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
align="center" |
||||
|
label="检查频次" |
||||
|
width="120"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-input-number v-model="scope.row.frequency" :min="1" :max="12" label="检查频次" controls-position="right" style="width:100px"></el-input-number> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
label="检查依据" |
||||
|
width="180"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-input |
||||
|
type="textarea" |
||||
|
autosize |
||||
|
placeholder="请输入检查依据" |
||||
|
v-model="scope.row.evidence"> |
||||
|
</el-input> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="remarks" |
||||
|
label="备注说明" |
||||
|
width="180"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-input |
||||
|
type="textarea" |
||||
|
autosize |
||||
|
placeholder="请输入备注说明" |
||||
|
v-model="scope.row.remarks"> |
||||
|
</el-input> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="postandexport" |
||||
|
align="center" |
||||
|
fixed="right" |
||||
|
label="设置岗位及提报人" |
||||
|
width="140"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button type="primary" icon="el-icon-s-tools" size="small" @click="setTablePostAndReport(scope)">设置</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
fixed="right" |
||||
|
align="center" |
||||
|
label="操作" |
||||
|
width="100"> |
||||
|
<template #default="scope"> |
||||
|
<el-button |
||||
|
icon="el-icon-delete" |
||||
|
size="mini" |
||||
|
type="danger" |
||||
|
@click="deleteRulesTableList(scope)" |
||||
|
>删除</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
|
||||
|
<template #footer> |
||||
|
<div class="dialog-footer"> |
||||
|
<el-button size="small" @click="closeTableAddBox">取 消</el-button> |
||||
|
<el-button size="small" type="primary" @click="addTableDetails" :loading="butLoadings">确 定</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<!--设置岗位及提报人--> |
||||
|
<el-dialog :close-on-click-modal="false" :visible.sync="setDialogPostManBox" :before-close="closeSetPostAndReportBoxes" title="设置岗位及提报人" custom-class="dialogBox" append-to-body width="50%" top="25vh"> |
||||
|
|
||||
|
<el-table |
||||
|
ref="setPostManTables" |
||||
|
:data="orgPostList" |
||||
|
style="width: 100%" |
||||
|
@selection-change="handleSelectionChangees"> |
||||
|
|
||||
|
<el-table-column |
||||
|
label="已关联" |
||||
|
type="selection" |
||||
|
width="55"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="date" |
||||
|
label="关联岗位" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-input v-model="scope.row.name"></el-input> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="name" |
||||
|
label="提报人" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-cascader |
||||
|
filterable |
||||
|
clearable |
||||
|
v-model="scope.row.keylist" |
||||
|
:options="scope.row.child" |
||||
|
:show-all-levels="false" |
||||
|
:props="userProps" |
||||
|
collapse-tags |
||||
|
> |
||||
|
<template slot-scope="{ node, data }"> |
||||
|
<span>{{ data.name }}</span> |
||||
|
<span v-if="node.isLeaf"> ({{ data.number }}) </span> |
||||
|
</template> |
||||
|
</el-cascader> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
</el-table> |
||||
|
<template #footer> |
||||
|
<div class="dialog-footer"> |
||||
|
<el-row> |
||||
|
<el-col :span="3"><el-button type="warning" size="small" @click="clearAllSetTable">全部取消</el-button></el-col> |
||||
|
<el-col :span="21"> |
||||
|
<el-button size="small" @click="closeSetPostAndReportBoxes">取 消</el-button> |
||||
|
<el-button size="small" type="primary" @click="setIsTruePostManEs" :loading="butLoadings">确 定</el-button> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
|
||||
|
|
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
<script> |
||||
|
import { getNewTargetDepartPostMan,addTableDetailsList } from "@/api/systemaccredit/systemapi"; |
||||
|
export default { |
||||
|
props:['tableAddDetailsBox','tableToTargetid','tableToid','targetPostMakList','targetunit'], |
||||
|
data() { |
||||
|
return { |
||||
|
butLoadings:false, //按钮是否加载Loading |
||||
|
tableAddDetailsBoxes:this.tableAddDetailsBox, |
||||
|
targetId:this.tableToTargetid, |
||||
|
tableId:this.tableToid, |
||||
|
orgPostList:this.targetPostMakList, |
||||
|
addDetailsInfoList:[], //细则列表 |
||||
|
// 选择员工配置项 |
||||
|
userProps: { |
||||
|
value: "id", |
||||
|
label: "name", |
||||
|
children: "govlist", |
||||
|
emitPath:false, |
||||
|
multiple: true |
||||
|
}, |
||||
|
//统计周期 |
||||
|
optionsclye: [ |
||||
|
{ |
||||
|
value: 4, |
||||
|
label: '月' |
||||
|
}, { |
||||
|
value: 5, |
||||
|
label: '季度' |
||||
|
}, { |
||||
|
value: 6, |
||||
|
label: '年' |
||||
|
} |
||||
|
], |
||||
|
setDialogPostManBox:false, |
||||
|
multipleSelectiontable:[], //选中的列表 |
||||
|
listIndex:"", //表单编号 |
||||
|
} |
||||
|
}, |
||||
|
created(){ |
||||
|
|
||||
|
}, |
||||
|
watch:{ |
||||
|
tableAddDetailsBox(){ |
||||
|
this.tableAddDetailsBoxes = this.tableAddDetailsBox |
||||
|
}, |
||||
|
tableToTargetid(){ |
||||
|
this.targetId = this.tableToTargetid |
||||
|
}, |
||||
|
tableToid(){ |
||||
|
this.tableId = this.tableToid |
||||
|
this.addTablePostDetailsCont() |
||||
|
}, |
||||
|
targetPostMakList:{ |
||||
|
handler(newVal){ |
||||
|
// console.log("newVal"); |
||||
|
// console.log("newVal------------>",newVal); |
||||
|
// this.orgPostList = this.targetPostMakList |
||||
|
// console.log("newVal-----222------->",this.targetPostMakList); |
||||
|
}, |
||||
|
deep: true |
||||
|
}, |
||||
|
|
||||
|
}, |
||||
|
methods:{ |
||||
|
//处理细则列表 |
||||
|
addTablePostDetailsCont(){ |
||||
|
let detailsInfo = { |
||||
|
title:"", //考核内容 |
||||
|
punishtype:1, //1:分数;2:现金;3:分数加现金 |
||||
|
standard:"", //考核标准 |
||||
|
unit:this.targetunit, |
||||
|
cashstandard:"", //现金考核标准 |
||||
|
types:1, //操作种类1:加分;2:减分;3:加减分 |
||||
|
inspemethod:[1], //检查方式 |
||||
|
cycle:4, //周期 |
||||
|
frequency:"", //检查频次 |
||||
|
evidence:"", //客观证据 |
||||
|
remarks:"", //备注说明 |
||||
|
postandexport:[], //相关岗位及提报人 |
||||
|
|
||||
|
} |
||||
|
this.addDetailsInfoList.push(detailsInfo); |
||||
|
}, |
||||
|
//关闭 |
||||
|
closeTableAddBox(){ |
||||
|
this.tableAddDetailsBoxes = false; |
||||
|
// this.$refs.setPostManTables.clearSelection(); |
||||
|
this.$emit('closeTableAddBox'); |
||||
|
this.addDetailsInfoList = []; |
||||
|
}, |
||||
|
//色织关联人 |
||||
|
async setTablePostAndReport(val){ |
||||
|
this.setDialogPostManBox = true; |
||||
|
this.listIndex = val.$index |
||||
|
// this.getOrgPostLists() |
||||
|
let sendData = { |
||||
|
id:this.targetId.toString() |
||||
|
} |
||||
|
const res = await getNewTargetDepartPostMan(sendData) |
||||
|
this.orgPostList =res.data.organdpostlist |
||||
|
if(val.row.postandexport != null && val.row.postandexport.length > 0){ |
||||
|
// val.row.postandexport.forEach(item=>{ |
||||
|
// this.$refs.setPostManTables.toggleRowSelection(item, true); |
||||
|
// }) |
||||
|
this.orgPostList.forEach((item,indx) =>{ |
||||
|
|
||||
|
val.row.postandexport.forEach(items=>{ |
||||
|
if(item.id == items.id && item.orgid == items.orgid){ |
||||
|
console.log("色织关联人---------0--------->",item,indx) |
||||
|
item.keylist = items.keylist |
||||
|
this.$nextTick(() => { |
||||
|
this.$refs.setPostManTables.toggleRowSelection(item, true) |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
}) |
||||
|
}else{ |
||||
|
this.$nextTick(() => { |
||||
|
for (let i = 0; i < this.orgPostList.length; i++) { |
||||
|
this.$refs.setPostManTables.toggleRowSelection(this.orgPostList[i], true) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
console.log("色织关联人---------1--------->",this.listIndex) |
||||
|
console.log("色织关联人---------2--------->",val.row.postandexport) |
||||
|
console.log("色织关联人---------3--------->",this.orgPostList) |
||||
|
console.log("色织关联人---------4--------->",val.row) |
||||
|
}, |
||||
|
//在列表中删除细则 |
||||
|
deleteRulesTableList(row){ |
||||
|
if(this.addDetailsInfoList.length - 1 > 0){ |
||||
|
this.addDetailsInfoList.splice(row.$index,1); |
||||
|
}else{ |
||||
|
this.$alert('<strong>至少要有一条细则内容!</strong>!</strong>', '温馨提示!', { |
||||
|
confirmButtonText: '确定', |
||||
|
type: 'warning', |
||||
|
center: true, |
||||
|
dangerouslyUseHTMLString: true |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
//关闭设置提报人弹窗 |
||||
|
closeSetPostAndReportBoxes(){ |
||||
|
this.setDialogPostManBox = false; |
||||
|
this.butLoadings= false; |
||||
|
this.clearAllSetTable(); |
||||
|
this.multipleSelectiontable = []; |
||||
|
}, |
||||
|
//确定提报人 |
||||
|
setIsTruePostManEs(){ |
||||
|
if(this.multipleSelectiontable != null && this.multipleSelectiontable.length >0){ |
||||
|
let isShouw = true; |
||||
|
this.multipleSelectiontable.forEach(item=>{ |
||||
|
if(item.keylist == null || item.keylist.length < 1){ |
||||
|
this.$alert('<strong>请检查您选中的岗位,存在未选择提报人的选项!!</strong>!</strong>', '温馨提示!', { |
||||
|
confirmButtonText: '确定', |
||||
|
type: 'warning', |
||||
|
center: true, |
||||
|
dangerouslyUseHTMLString: true |
||||
|
}) |
||||
|
isShouw = false; |
||||
|
return false; |
||||
|
} |
||||
|
}) |
||||
|
if(!isShouw){ |
||||
|
return false; |
||||
|
} |
||||
|
}else{ |
||||
|
this.$alert('<strong>至少要关联一个岗位!</strong>!</strong>!</strong>', '温馨提示!', { |
||||
|
confirmButtonText: '确定', |
||||
|
type: 'warning', |
||||
|
center: true, |
||||
|
dangerouslyUseHTMLString: true |
||||
|
}) |
||||
|
return false; |
||||
|
} |
||||
|
// this.$refs.setPostManTable |
||||
|
// console.log("选中内容--111111---->",this.multipleSelectiontable,this.addDetailsInfoList[this.listIndex]) |
||||
|
this.addDetailsInfoList[this.listIndex].postandexport = this.multipleSelectiontable |
||||
|
// console.log("选中内容--22222---->",this.multipleSelectiontable,this.addDetailsInfoList) |
||||
|
this.closeSetPostAndReportBoxes() |
||||
|
}, |
||||
|
//获取选中的数据 |
||||
|
handleSelectionChangees(val){ |
||||
|
this.multipleSelectiontable = val; |
||||
|
}, |
||||
|
//全部取消 |
||||
|
clearAllSetTable(){ |
||||
|
this.$refs.setPostManTables.clearSelection(); |
||||
|
}, |
||||
|
//提交添加数据 |
||||
|
async addTableDetails(){ |
||||
|
console.log("提交添加数据---->",this.addDetailsInfoList) |
||||
|
this.butLoadings= true |
||||
|
if(this.addDetailsInfoList == null || this.addDetailsInfoList.length <1){ |
||||
|
this.$alert('<strong>请您至少添加一条考核细则内容!</strong>', '温馨提示!', { |
||||
|
confirmButtonText: '确定', |
||||
|
type: 'warning', |
||||
|
center: true, |
||||
|
dangerouslyUseHTMLString: true |
||||
|
}) |
||||
|
this.butLoadings= false |
||||
|
return false; |
||||
|
} |
||||
|
let nextWriterIsTrue = true; |
||||
|
this.addDetailsInfoList.forEach(item=>{ |
||||
|
if(item.title == null || item.title == ""){ |
||||
|
nextWriterIsTrue = false; |
||||
|
// console.log("1----------------->") |
||||
|
} |
||||
|
switch (item.punishtype){ |
||||
|
case 2: |
||||
|
if(item.cashstandard == null || item.cashstandard == ""){ |
||||
|
nextWriterIsTrue = false; |
||||
|
// console.log("5-----1------------>") |
||||
|
} |
||||
|
break; |
||||
|
case 3: |
||||
|
if(item.standard == null || item.standard == ""){ |
||||
|
nextWriterIsTrue = false; |
||||
|
// console.log("5-----3------------>") |
||||
|
} |
||||
|
if(item.cashstandard == null || item.cashstandard == ""){ |
||||
|
nextWriterIsTrue = false; |
||||
|
// console.log("5-----2------------>") |
||||
|
} |
||||
|
break; |
||||
|
default: |
||||
|
if(item.standard == null || item.standard == ""){ |
||||
|
nextWriterIsTrue = false; |
||||
|
// console.log("5-----4------------>") |
||||
|
} |
||||
|
break; |
||||
|
} |
||||
|
|
||||
|
if(item.unit == null || item.unit == ""){ |
||||
|
nextWriterIsTrue = false; |
||||
|
// console.log("2----------------->") |
||||
|
} |
||||
|
if(item.types == null || item.types == "" || item.types == 0){ |
||||
|
nextWriterIsTrue = false; |
||||
|
// console.log("3----------------->") |
||||
|
} |
||||
|
if(item.inspemethod == null || item.inspemethod.length <1){ |
||||
|
nextWriterIsTrue = false; |
||||
|
// console.log("4----------------->") |
||||
|
}else{ |
||||
|
item.inspemethod = item.inspemethod.map(String) |
||||
|
} |
||||
|
// if(item.postandexport == null || item.postandexport.length < 1){ |
||||
|
// nextWriterIsTrue = false; |
||||
|
// // console.log("5----------------->") |
||||
|
// } |
||||
|
|
||||
|
}); |
||||
|
if(!nextWriterIsTrue){ |
||||
|
this.$alert('<strong>至少一条考核细则内容填写不符合规范!请检查并补充完成后,重新提交!</strong>', '温馨提示!', { |
||||
|
confirmButtonText: '确定', |
||||
|
type: 'warning', |
||||
|
center: true, |
||||
|
dangerouslyUseHTMLString: true |
||||
|
}) |
||||
|
this.butLoadings= false |
||||
|
return false; |
||||
|
} |
||||
|
let sendData = { |
||||
|
targetid:this.targetId.toString(), |
||||
|
tableid:this.tableId.toString(), |
||||
|
detailslist:this.addDetailsInfoList |
||||
|
} |
||||
|
|
||||
|
const res = await addTableDetailsList(sendData) |
||||
|
console.log("提交添加数据--1-->",sendData,res) |
||||
|
if(res.code == 0){ |
||||
|
this.$message({ |
||||
|
showClose: true, |
||||
|
message: res.msg, |
||||
|
type: 'success' |
||||
|
}); |
||||
|
// this.getTargetPostDetailsList(); |
||||
|
this.$emit('getTargetPostDetailsList'); |
||||
|
this.closeTableAddBox(); |
||||
|
this.butLoadings= false |
||||
|
}else{ |
||||
|
this.butLoadings= false |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
//获取岗位与相关行政组织 |
||||
|
async getOrgPostLists(){ |
||||
|
let sendData = { |
||||
|
id:this.targetId.toString() |
||||
|
} |
||||
|
const res = await getNewTargetDepartPostMan(sendData) |
||||
|
if(res.code ==0){ |
||||
|
this.orgPostList = res.data.organdpostlist |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style> |
||||
|
|
||||
|
</style> |
||||
@ -1,89 +1,183 @@ |
|||||
<template> |
<template> |
||||
<el-main > |
<div> |
||||
<workflow |
<div class="fd-nav-content"> |
||||
:data="data" |
|
||||
@ok="ok" |
<section class="dingflow-design"> |
||||
/> |
<div class="box-scale" id="box-scale" :style="'transform: scale('+nowVal/100+'); transform-origin: 50% 0px 0px;'"> |
||||
</el-main> |
<nodeWrap :nodeConfig.sync="nodeConfig" :flowPermission.sync="flowPermission"></nodeWrap> |
||||
|
<div class="end-node"> |
||||
|
<div class="end-node-circle"></div> |
||||
|
<div class="end-node-text">流程结束</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<promoterDrawer /> |
||||
|
<approverDrawer :directorMaxLevel="directorMaxLevel"/> |
||||
|
|
||||
|
</div> |
||||
</template> |
</template> |
||||
<script> |
<script> |
||||
import workflow from 'workflow-ui/src/components/Generator' |
|
||||
import 'workflow-ui/lib/workflow-ui.css' |
//流程组件 |
||||
|
import { getShiyanData } from "@/api/workflowapi/workflowaip" |
||||
|
import promoterDrawer from "@/components/drawer/promoterDrawer" |
||||
|
import approverDrawer from '@/components/drawer/approverDrawer' |
||||
|
|
||||
|
|
||||
|
import { mapMutations } from 'vuex' |
||||
|
|
||||
export default { |
export default { |
||||
components: { |
components: { |
||||
workflow |
promoterDrawer, |
||||
|
approverDrawer |
||||
}, |
}, |
||||
data() { |
data() { |
||||
return { |
return { |
||||
data:{}, |
nowVal:100, |
||||
title: '请假', |
nodeConfig: {}, |
||||
node: { |
flowPermission: [], |
||||
name: '发起人', |
processConfig: {}, |
||||
type: 'start', |
directorMaxLevel: 0, |
||||
nodeId: 'sid-startevent', |
workFlowDef: {}, |
||||
childNode: {} |
|
||||
} |
|
||||
|
|
||||
} |
} |
||||
}, |
}, |
||||
created(){ |
created(){ |
||||
|
this.getInitData() |
||||
}, |
|
||||
computed:{ |
|
||||
// selectedNode(){ |
|
||||
// return this.$store.state.selectedNode |
|
||||
// } |
|
||||
}, |
}, |
||||
methods:{ |
methods:{ |
||||
ok (data) { |
...mapMutations(['setTableId', 'setIsTried','setPromoter']), |
||||
console.log("ok------>",data) |
//获取初始化数据 |
||||
}, |
async getInitData(){ |
||||
toReturn() { |
const res = await getShiyanData() |
||||
//window.location.href = "" |
console.log("获取初始化数据---->",res) |
||||
}, |
this.processConfig = res.data; |
||||
async saveData() { |
let { nodeConfig, flowPermission, directorMaxLevel, workFlowDef, tableId } = res.data; |
||||
console.log("发布流程") |
this.nodeConfig = nodeConfig; |
||||
}, |
this.flowPermission = flowPermission; |
||||
validate(){ |
this.directorMaxLevel = directorMaxLevel; |
||||
return this.$refs["process-tree"].validateProcess() |
this.workFlowDef = workFlowDef; |
||||
|
this.setTableId(tableId) |
||||
|
|
||||
}, |
}, |
||||
nodeSelected(node){ |
|
||||
console.log('配置节点', node) |
|
||||
this.showConfig = true |
|
||||
} |
|
||||
} |
} |
||||
} |
} |
||||
</script> |
</script> |
||||
<style scoped> |
<style> |
||||
|
#app { |
||||
|
font-family: "Avenir", Helvetica, Arial, sans-serif; |
||||
|
-webkit-font-smoothing: antialiased; |
||||
|
-moz-osx-font-smoothing: grayscale; |
||||
|
color: #333333; |
||||
|
|
||||
</style> |
|
||||
<style lang="less" scoped> |
|
||||
.design { |
|
||||
margin-top: 100px; |
|
||||
display: flex; |
|
||||
transform-origin: 50% 0px 0px; |
|
||||
} |
} |
||||
|
|
||||
.scale { |
|
||||
z-index: 999; |
|
||||
position: fixed; |
|
||||
top: 80px; |
|
||||
right: 40px; |
|
||||
|
|
||||
span { |
|
||||
margin: 0 10px; |
.clear:before, |
||||
font-size: 15px; |
.clear:after { |
||||
color: #7a7a7a; |
content: " "; |
||||
width: 50px; |
display: table; |
||||
} |
} |
||||
|
|
||||
|
.clear:after { |
||||
|
clear: both; |
||||
|
} |
||||
|
|
||||
|
.ellipsis { |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
.l { |
||||
|
float: left; |
||||
} |
} |
||||
|
|
||||
.node-config-content{ |
input { |
||||
padding: 0 20px 20px; |
text-indent: 10px; |
||||
} |
} |
||||
|
|
||||
/deep/ .el-drawer__body{ |
select { |
||||
overflow-y: auto; |
text-indent: 8px; |
||||
|
} |
||||
|
|
||||
|
.ml_10 { |
||||
|
margin-left: 10px; |
||||
|
} |
||||
|
|
||||
|
.mr_10 { |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
|
||||
|
.radio_box a, |
||||
|
.check_box a { |
||||
|
font-size: 12px; |
||||
|
position: relative; |
||||
|
padding-left: 20px; |
||||
|
margin-right: 30px; |
||||
|
cursor: pointer; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.check_box.not a:hover { |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.check_box.not a::before, |
||||
|
.check_box.not a:hover::before { |
||||
|
border: none; |
||||
|
} |
||||
|
|
||||
|
.check_box.not.active { |
||||
|
background: #f3f3f3; |
||||
|
} |
||||
|
|
||||
|
.radio_box a:hover::before, |
||||
|
.check_box a:hover::before { |
||||
|
border: 1px solid #46a6fe; |
||||
|
} |
||||
|
|
||||
|
.radio_box a::before, |
||||
|
.check_box a::before { |
||||
|
position: absolute; |
||||
|
width: 14px; |
||||
|
height: 14px; |
||||
|
border: 1px solid #dcdfe6; |
||||
|
border-radius: 2px; |
||||
|
left: 0; |
||||
|
top: 1px; |
||||
|
content: ""; |
||||
|
} |
||||
|
|
||||
|
.radio_box a::before { |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
|
||||
|
.check-dot.active::after, |
||||
|
.radio_box a.active::after, |
||||
|
.check_box a.active::after { |
||||
|
position: absolute; |
||||
|
width: 10px; |
||||
|
height: 10px; |
||||
|
border-radius: 50%; |
||||
|
top: 3px; |
||||
|
left: 3px; |
||||
|
content: ""; |
||||
|
} |
||||
|
|
||||
|
.radio_box a.active::after { |
||||
|
background: #46a6fe; |
||||
|
} |
||||
|
|
||||
|
.check_box a.active::after { |
||||
|
background: url(~@/assets/images/check_box.png) no-repeat center; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.error-modal-list { |
||||
|
width: 455px; |
||||
} |
} |
||||
</style> |
</style> |
||||
@ -0,0 +1,89 @@ |
|||||
|
<template> |
||||
|
<el-main > |
||||
|
<workflow |
||||
|
:data="data" |
||||
|
@ok="ok" |
||||
|
/> |
||||
|
</el-main> |
||||
|
</template> |
||||
|
<script> |
||||
|
import workflow from 'workflow-ui/src/components/Generator' |
||||
|
import 'workflow-ui/lib/workflow-ui.css' |
||||
|
|
||||
|
export default { |
||||
|
components: { |
||||
|
workflow |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
// data:{}, |
||||
|
title: '请假', |
||||
|
data: { |
||||
|
name: '发起人', |
||||
|
type: 'start', |
||||
|
nodeId: 'sid-startevent', |
||||
|
childNode: {} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
created(){ |
||||
|
|
||||
|
}, |
||||
|
computed:{ |
||||
|
selectedNode(){ |
||||
|
return this.$store.state.selectedNode |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
ok (data) { |
||||
|
console.log("ok------>",data) |
||||
|
}, |
||||
|
toReturn() { |
||||
|
//window.location.href = "" |
||||
|
}, |
||||
|
async saveData() { |
||||
|
console.log("发布流程") |
||||
|
}, |
||||
|
validate(){ |
||||
|
return this.$refs["process-tree"].validateProcess() |
||||
|
}, |
||||
|
nodeSelected(node){ |
||||
|
console.log('配置节点', node) |
||||
|
this.showConfig = true |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
|
||||
|
</style> |
||||
|
<style lang="less" scoped> |
||||
|
.design { |
||||
|
margin-top: 100px; |
||||
|
display: flex; |
||||
|
transform-origin: 50% 0px 0px; |
||||
|
} |
||||
|
|
||||
|
.scale { |
||||
|
z-index: 999; |
||||
|
position: fixed; |
||||
|
top: 80px; |
||||
|
right: 40px; |
||||
|
|
||||
|
span { |
||||
|
margin: 0 10px; |
||||
|
font-size: 15px; |
||||
|
color: #7a7a7a; |
||||
|
width: 50px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.node-config-content{ |
||||
|
padding: 0 20px 20px; |
||||
|
} |
||||
|
|
||||
|
/deep/ .el-drawer__body{ |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
</style> |
||||