New file |
| | |
| | | <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.$refs.dept.setCheckList(this.delegationDeptSelect) |
| | | }) |
| | | this.deptShow = true |
| | | }, |
| | | editSingleUser() { |
| | | if (this.delegationUserSelect && this.delegationUserSelect.length > 0) { |
| | | this.$nextTick(() => { |
| | | this.$refs.singleUser.setChecked(this.delegationUserSelect[0]) |
| | | }) |
| | | } |
| | | this.singleUserShow = true |
| | | }, |
| | | editRole() { |
| | | if (this.delegationRoleSelect && this.delegationRoleSelect.length > 0) { |
| | | 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) { |
| | | 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(","); |
| | | const deptIds = roleAndDeptIds.filter(item => item.includes("dept")); |
| | | const roleIds = roleAndDeptIds.filter(item => !item.includes("dept")); |
| | | |
| | | 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> |