<template>
|
<div>
|
<el-form label-width="80px" size="small">
|
<el-form-item label="异步">
|
<el-switch v-model="bpmnFormData.async" active-text="是" inactive-text="否" @change="updateElementTask('async')"/>
|
</el-form-item>
|
<el-form-item label="用户类型">
|
<el-select v-model="bpmnFormData.userType" placeholder="用户类型" @change="updateUserType">
|
<el-option
|
v-for="item in userTypeOption"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="指定人员" v-if="bpmnFormData.userType === 'assignee'">
|
<single-user ref="singleUser" :select-user="delegationUserSelect && delegationUserSelect.length > 0 ? delegationUserSelect[0].userId : null" :show="singleUserShow" @close="closeSingleUser" @submit="getSingleUserSelect" :key="singleUserKey"/>
|
<div v-if="expSelect">
|
<el-tag class="select-tag" :key="expSelect.id + 'kfc'" type="info" closable @close="removeExp">{{expSelect.expression}}</el-tag>
|
</div>
|
<div v-else>
|
<el-tag class="select-tag" v-for="user in delegationUserSelect" :key="user.userId + 'abc'" type="info" closable @close="removeSingleUser(user)">{{user.nickName}}</el-tag>
|
</div>
|
<el-button-group class="ml-4" style="margin-top: 4px">
|
<!--指定人员-->
|
<el-tooltip class="box-item" effect="dark" content="指定人员" :disabled="typeButDisable" placement="bottom">
|
<el-button size="mini" type="primary" icon="el-icon-user" :disabled="typeButDisable" @click="editSingleUser"/>
|
</el-tooltip>
|
<!--选择表达式-->
|
<el-tooltip class="box-item" effect="dark" content="选择表达式" :disabled="expButDisable" placement="bottom">
|
<el-button size="mini" type="warning" icon="el-icon-postcard" :disabled="expButDisable" @click="editExp"/>
|
</el-tooltip>
|
</el-button-group>
|
</el-form-item>
|
|
<el-form-item label="候选人员" v-else-if="bpmnFormData.userType === 'candidateUsers'">
|
<mult-user ref="multUser" :select-user="delegationUserSelect" :show="multUserShow" @close="closeMultUser" @submit="getMultUserSelect" :key="multUserKey"/>
|
<div v-if="expSelect">
|
<el-tag class="select-tag" :key="expSelect.id + 'kfc'" type="info" closable @close="removeExp">{{expSelect.expression}}</el-tag>
|
</div>
|
<div v-else>
|
<el-tag class="select-tag" v-for="user in delegationUserSelect" :key="user.userId + 'qwe'" type="info" closable @close="removeMultUser(user)">{{user.nickName}}</el-tag>
|
</div>
|
<el-button-group class="ml-4" style="margin-top: 4px">
|
<!--候选人员-->
|
<el-tooltip class="box-item" effect="dark" content="候选人员" :disabled="typeButDisable" placement="bottom">
|
<el-button size="mini" type="primary" icon="el-icon-user" :disabled="typeButDisable" @click="editMultUser"/>
|
</el-tooltip>
|
<!--选择表达式-->
|
<el-tooltip class="box-item" effect="dark" content="选择表达式" :disabled="expButDisable" placement="bottom">
|
<el-button size="mini" type="warning" icon="el-icon-postcard" :disabled="expButDisable" @click="editExp"/>
|
</el-tooltip>
|
</el-button-group>
|
</el-form-item>
|
|
<el-form-item label="候选角色" v-else-if="bpmnFormData.userType === 'candidateGroups'">
|
<my-role ref="role" :select-values="delegationRoleSelect" :show="roleShow" @close="closeRole" @submit="getRoleSelect" :key="roleKey"/>
|
<div v-if="expSelect">
|
<el-tag class="select-tag" :key="expSelect.id + 'kfc'" type="info" closable @close="removeExp">{{expSelect.expression}}</el-tag>
|
</div>
|
<div v-else>
|
<el-tag class="select-tag" v-for="role in delegationRoleSelect" :key="role.roleId + 'rty'" type="info" closable @close="removeRole(role)">{{role.roleName}}</el-tag>
|
</div>
|
<el-button-group class="ml-4" style="margin-top: 4px">
|
<!--候选角色-->
|
<el-tooltip class="box-item" effect="dark" content="候选角色" :disabled="typeButDisable" placement="bottom">
|
<el-button size="mini" type="primary" icon="el-icon-user" :disabled="typeButDisable" @click="editRole"/>
|
</el-tooltip>
|
<!--选择表达式-->
|
<el-tooltip class="box-item" effect="dark" content="选择表达式" :disabled="expButDisable" placement="bottom">
|
<el-button size="mini" type="warning" icon="el-icon-postcard" :disabled="expButDisable" @click="editExp"/>
|
</el-tooltip>
|
</el-button-group>
|
</el-form-item>
|
|
<el-form-item label="候选部门" v-else>
|
<MyDept ref="dept" :checkeds="delegationDeptSelect" :show="deptShow" @close="closeDept" @submit="getDeptSelect" :key="deptKey"/>
|
<div v-if="expSelect">
|
<el-tag class="select-tag" :key="expSelect.id + 'kfc'" type="info" closable @close="removeExp">{{expSelect.expression}}</el-tag>
|
</div>
|
<div v-else>
|
<el-tag class="select-tag" v-for="dept in delegationDeptSelect" :key="dept.id + 'zxc'" type="info" closable @close="removeDept(dept)">{{dept.label}}</el-tag>
|
</div>
|
<el-button-group class="ml-4" style="margin-top: 4px">
|
<!--候选部门-->
|
<el-tooltip class="box-item" effect="dark" content="候选部门" :disabled="typeButDisable" placement="bottom">
|
<el-button size="mini" type="primary" icon="el-icon-user" :disabled="typeButDisable" @click="editDept"/>
|
</el-tooltip>
|
<!--选择表达式-->
|
<el-tooltip class="box-item" effect="dark" content="选择表达式" :disabled="expButDisable" placement="bottom">
|
<el-button size="mini" type="warning" icon="el-icon-postcard" :disabled="expButDisable" @click="editExp"/>
|
</el-tooltip>
|
</el-button-group>
|
</el-form-item>
|
|
<el-form-item label="优先级">
|
<el-input v-model="bpmnFormData.priority" @change="updateElementTask('priority')"/>
|
</el-form-item>
|
<el-form-item label="到期时间">
|
<el-input v-model="bpmnFormData.dueDate" @change="updateElementTask('dueDate')"/>
|
</el-form-item>
|
</el-form>
|
|
<!--选择表达式-->
|
<el-dialog
|
title="选择表达式"
|
:visible.sync="expVisible"
|
width="60%"
|
:close-on-press-escape="false"
|
:destroy-on-close="true"
|
@close="closeExp"
|
>
|
<flow-exp :selectValues="expSelect" @handleSingleExpSelect="getExpSelect"></flow-exp>
|
<div slot="footer" class="dialog-footer">
|
<el-button size="small" type="primary" @click="checkExpComplete">确 定</el-button>
|
</div>
|
</el-dialog>
|
|
|
</div>
|
</template>
|
|
<script>
|
import FlowExp from '@/components/flow/Expression'
|
import {StrUtil} from '@/utils/StrUtil'
|
import MyDept from '@/components/flow/Dept/MyDept'
|
import SingleUser from '@/components/flow/User/SingleUser'
|
import MultUser from '@/components/flow/User/MultUser'
|
import MyRole from '@/components/flow/Role/MyRole'
|
|
|
export default {
|
name: "TaskConfPanel",
|
components: {
|
FlowExp,
|
MyRole,
|
MyDept,
|
SingleUser,
|
MultUser,
|
},
|
/** 组件传值 */
|
props : {
|
id: {
|
type: String,
|
required: true
|
},
|
},
|
data() {
|
return {
|
typeButDisable: false, // 用户类型选择按钮是否禁用
|
expButDisable: false, // 用户类型选择按钮是否禁用
|
roleKey: 'role',
|
deptKey: 'dept',
|
multUserKey: 0,
|
singleUserKey: 'single',
|
roleShow: false, // 角色组显示
|
delegationRoleSelect: [], // 选中角色
|
multUserShow: false, // 用户组显示
|
singleUserShow: false, // 指定用户显示
|
delegationUserSelect: [], // 选中的用户
|
deptShow: false, // 部门组显示
|
delegationDeptSelect: [], // 选中部门
|
expSelect: null, // 选中表达式
|
num: 0, // 用于触发用户选择更新
|
expVisible: false,
|
isIndeterminate: true,
|
checkType: 'single', // 选类
|
userType: '',
|
userTypeOption: [
|
{label: '指定人员', value: 'assignee'},
|
{label: '候选人员', value: 'candidateUsers'},
|
{label: '候选角色', value: 'candidateGroups'},
|
{label: '候选部门', value: 'candidateDeptGroups'},
|
],
|
checkAll: false,
|
bpmnFormData: {
|
userType: "candidateDeptGroups",
|
assignee: "",
|
candidateUsers: "",
|
candidateGroups: "",
|
dueDate: "",
|
priority: "",
|
dataType: "",
|
expId: "",
|
},
|
// 数据回显
|
selectData: {
|
assignee: null,
|
candidateUsers: null,
|
candidateGroups: [], // 角色
|
candidateDeptGroups: [], // 部门
|
exp: null,
|
},
|
otherExtensionList:[],
|
}
|
},
|
|
/** 传值监听 */
|
watch: {
|
id: {
|
handler(newVal) {
|
if (StrUtil.isNotBlank(newVal)) {
|
this.resetTaskForm();
|
}
|
},
|
immediate: true, // 立即生效
|
},
|
},
|
created() {
|
|
},
|
methods: {
|
removeExp() {
|
this.getExpSelect(null)
|
},
|
removeDept(dept) {
|
let index = this.delegationDeptSelect.indexOf(dept);
|
if (index !== -1) {
|
this.delegationDeptSelect.splice(index, 1);
|
}
|
this.getDeptSelect(this.delegationDeptSelect)
|
},
|
removeRole(role) {
|
let index = this.delegationRoleSelect.indexOf(role);
|
if (index !== -1) {
|
this.delegationRoleSelect.splice(index, 1);
|
}
|
this.getRoleSelect(this.delegationRoleSelect)
|
},
|
removeMultUser(user) {
|
let index = this.delegationUserSelect.indexOf(user);
|
if (index !== -1) {
|
this.delegationUserSelect.splice(index, 1);
|
}
|
this.getMultUserSelect(this.delegationUserSelect)
|
},
|
removeSingleUser(user) {
|
// 因为只能选一个用户，所以删了就没了
|
this.getSingleUserSelect(null)
|
},
|
editDept() {
|
this.$nextTick(() => {
|
this.deptKey += '1'
|
this.$refs.dept.setCheckList(this.delegationDeptSelect)
|
})
|
this.deptShow = true
|
},
|
editSingleUser() {
|
if (this.delegationUserSelect && this.delegationUserSelect.length > 0) {
|
this.singleUserKey += '1'
|
this.$nextTick(() => {
|
this.$refs.singleUser.setChecked(this.delegationUserSelect[0])
|
})
|
}
|
this.singleUserShow = true
|
},
|
editRole() {
|
if (this.delegationRoleSelect && this.delegationRoleSelect.length > 0) {
|
this.roleKey += '1'
|
this.$nextTick(() => {
|
this.$refs.role.setChecked(this.delegationRoleSelect)
|
})
|
}
|
this.roleShow = true
|
},
|
editMultUser() {
|
if (this.delegationUserSelect && this.delegationUserSelect.length > 0) {
|
this.multUserKey += '1'
|
this.$nextTick(() => {
|
this.$refs.multUser.setChecked(this.delegationUserSelect)
|
})
|
}
|
this.multUserShow = true
|
},
|
editExp() {
|
this.expVisible = true;
|
},
|
getDeptSelect(deptList) {
|
if (deptList && deptList.length > 0) {
|
this.deleteFlowAttar();
|
this.updateCustomElement('dataType', 'fixed');
|
this.updateCustomElement("candidateGroups", deptList.map(item => item.id).join(","));
|
this.delegationDeptSelect = deptList
|
this.expButDisable = true
|
} else {
|
this.delegationDeptSelect = []
|
this.expButDisable = false
|
}
|
this.deptShow = false
|
this.deptKey += '1'
|
},
|
getMultUserSelect(userList) {
|
if (userList && userList.length > 0) {
|
this.deleteFlowAttar();
|
this.updateCustomElement('dataType', 'fixed');
|
this.updateCustomElement(this.bpmnFormData.userType, userList.map(item => item.userId).join(","));
|
this.delegationUserSelect = userList
|
this.expButDisable = true
|
} else {
|
this.delegationUserSelect = []
|
this.expButDisable = false
|
}
|
this.multUserShow = false
|
this.multUserKey += 1;
|
},
|
getRoleSelect(roleList) {
|
if (roleList && roleList.length > 0) {
|
this.deleteFlowAttar();
|
this.updateCustomElement('dataType', 'fixed');
|
// userType = candidateGroups
|
this.updateCustomElement(this.bpmnFormData.userType, roleList.map(item => item.roleId).join(","));
|
this.delegationRoleSelect = roleList
|
this.expButDisable = true
|
} else {
|
this.delegationRoleSelect = []
|
this.expButDisable = false
|
}
|
this.roleShow = false
|
this.roleKey += '1'
|
},
|
getSingleUserSelect(user) {
|
if (user) {
|
this.deleteFlowAttar();
|
this.updateCustomElement('dataType', 'fixed');
|
this.updateCustomElement(this.bpmnFormData.userType, user.userId);
|
this.delegationUserSelect = [user]
|
this.expButDisable = true
|
} else {
|
this.delegationUserSelect = []
|
this.expButDisable = false
|
this.deleteFlowAttar();
|
}
|
this.singleUserShow = false
|
this.singleUserKey += '1'
|
},
|
getExpSelect(selection) {
|
console.log(selection, "选中的表达式")
|
if (selection) {
|
this.expSelect = selection
|
this.deleteFlowAttar();
|
this.bpmnFormData[this.bpmnFormData.userType] = selection.name;
|
this.updateCustomElement('dataType', selection.dataType);
|
this.updateCustomElement('expId', selection.id.toString());
|
const userType = this.bpmnFormData.userType === "candidateDeptGroups" ? "candidateGroups" : this.bpmnFormData.userType
|
this.updateCustomElement(userType, selection.expression);
|
this.handleSelectData("exp", selection.id);
|
this.typeButDisable = true
|
} else {
|
this.expSelect = null
|
this.typeButDisable = false
|
this.deleteFlowAttar();
|
}
|
},
|
closeExp() {
|
this.expVisible = false
|
},
|
closeDept() {
|
this.deptShow = false
|
this.deptKey += '1'
|
},
|
closeSingleUser() {
|
this.singleUserShow = false
|
this.singleUserKey += '1'
|
},
|
closeRole() {
|
this.roleShow = false
|
this.roleKey += '1'
|
},
|
closeMultUser() {
|
this.multUserShow = false
|
this.multUserKey += 1;
|
},
|
|
// 初始化表单
|
resetTaskForm() {
|
// 初始化设为空值
|
this.bpmnFormData = {
|
userType: "candidateDeptGroups",
|
assignee: "",
|
candidateUsers: "",
|
candidateGroups: "",
|
dueDate: "",
|
priority: "",
|
dataType: "",
|
expId: "",
|
}
|
this.selectData = {
|
assignee: null,
|
candidateUsers: null,
|
candidateGroups: null,
|
exp: null,
|
}
|
// 流程节点信息上取值
|
for (let key in this.bpmnFormData) {
|
const value = this.modelerStore.element?.businessObject[key] || this.bpmnFormData[key];
|
this.$set(this.bpmnFormData, key, value);
|
}
|
console.log(this.bpmnFormData, "初始化数据")
|
// 人员、角色、部门信息回显
|
this.checkValuesEcho(this.bpmnFormData);
|
},
|
|
// 更新节点信息
|
updateElementTask(key) {
|
const taskAttr = Object.create(null);
|
taskAttr[key] = this.bpmnFormData[key] || "";
|
this.modelerStore.modeling.updateProperties(this.modelerStore.element, taskAttr);
|
},
|
|
// 更新自定义流程节点/参数信息
|
updateCustomElement(key, value) {
|
const taskAttr = Object.create(null);
|
taskAttr[key] = value;
|
this.modelerStore.modeling.updateProperties(this.modelerStore.element, taskAttr);
|
},
|
|
// 更新人员类型
|
updateUserType(val) {
|
console.log(val, "人员类型")
|
// 删除xml中已选择数据类型节点
|
this.deleteFlowAttar();
|
// 清除已选人员数据
|
if (val === "candidateDeptGroups") {
|
val = "candidateGroups"
|
this.delegationDeptSelect = [] // 部门
|
} else if (val === "candidateGroups") {
|
this.delegationRoleSelect = [] // 角色
|
} else if (val === "assignee" || val === "candidateUsers") {
|
this.delegationUserSelect = [] // 指定用户/候选用户
|
}
|
this.expSelect = null // 表达式重置为空
|
this.selectData = {
|
assignee: null,
|
candidateUsers: null,
|
candidateGroups: null,
|
exp: null,
|
}
|
this.typeButDisable = false
|
this.expButDisable = false
|
// 写入userType节点信息到xml
|
this.updateCustomElement('userType', val);
|
},
|
|
// 设计器右侧表单数据回显
|
checkValuesEcho(formData) {
|
if (formData.expId) {
|
console.log("456")
|
this.getExpList(formData.expId);
|
this.typeButDisable = true
|
this.expButDisable = false
|
} else {
|
this.typeButDisable = false
|
this.expSelect = null
|
}
|
if ("candidateGroups" === formData.userType || "candidateDeptGroups" === formData.userType) {
|
this.getRoleOrDeptReview(formData.candidateGroups)
|
} else {
|
this.getUserList(formData[formData.userType], formData.userType);
|
}
|
},
|
|
// 获取表达式信息
|
getExpList(expId) {
|
this.expSelect = this.modelerStore.expList?.find(item => item.id.toString() === expId);
|
},
|
|
// 获取人员信息
|
getUserList(val, key) {
|
if (StrUtil.isNotBlank(val)) {
|
this.expButDisable = true
|
this.typeButDisable = false
|
if ('assignee' === key) {
|
const uList = this.modelerStore.userList.filter(item => item.userId == val);
|
this.delegationUserSelect = uList
|
} else {
|
const newArr = this.modelerStore.userList?.filter(i => val.split(',').includes(i.userId.toString()))
|
this.delegationUserSelect = newArr
|
}
|
} else {
|
this.expButDisable = false
|
this.delegationUserSelect = []
|
}
|
},
|
|
// 获取角色信息
|
getRoleOrDeptReview(ids) {
|
this.delegationDeptSelect = []
|
this.delegationRoleSelect = []
|
if (StrUtil.isNotBlank(ids)) {
|
this.expButDisable = true
|
this.typeButDisable = false
|
// 根据id筛选出是角色还是部门
|
const roleAndDeptIds = ids.split(",");
|
console.log("woc", roleAndDeptIds)
|
const deptIds = roleAndDeptIds.filter(item => item.includes("dept") || item === '${data_launch}');
|
const roleIds = roleAndDeptIds.filter(item => !item.includes("dept") && item !== '${data_launch}');
|
|
if (roleIds && roleIds.length > 0) { // 角色
|
const targetRoleList = this.modelerStore.roleList?.filter(i => roleIds.includes(i.roleId.toString()))
|
this.delegationRoleSelect = targetRoleList;
|
this.bpmnFormData.userType = "candidateGroups"
|
}
|
if (deptIds && deptIds.length > 0){ // 部门
|
const targetDeptList = this.modelerStore.deptList?.filter(i => deptIds.includes(i.id))
|
this.delegationDeptSelect = targetDeptList
|
this.bpmnFormData.userType = "candidateDeptGroups"
|
}
|
} else {
|
this.expButDisable = false
|
this.delegationDeptSelect = []
|
this.delegationRoleSelect = []
|
}
|
},
|
|
// ------ 流程审批人员信息弹出框 start---------
|
|
|
// 处理人员回显
|
handleSelectData(key, value) {
|
for (let oldKey in this.selectData) {
|
if (key !== oldKey) {
|
this.$set(this.selectData, oldKey, null);
|
} else {
|
this.$set(this.selectData, oldKey, value);
|
}
|
}
|
},
|
|
/*表达式选中赋值*/
|
checkExpComplete() {
|
this.expVisible = false;
|
},
|
|
// 删除节点
|
deleteFlowAttar() {
|
delete this.modelerStore.element.businessObject[`dataType`]
|
delete this.modelerStore.element.businessObject[`expId`]
|
delete this.modelerStore.element.businessObject[`assignee`]
|
delete this.modelerStore.element.businessObject[`candidateUsers`]
|
delete this.modelerStore.element.businessObject[`candidateGroups`]
|
},
|
|
}
|
}
|
</script>
|
<style scoped>
|
.select-tag {
|
margin-right: 3px;
|
}
|
</style>
|
