From 23fdfa68682eef52fee5a8d257c002cdd375a563 Mon Sep 17 00:00:00 2001 From: xiangpei <xiangpei@timesnew.cn> Date: 星期四, 02 一月 2025 13:46:45 +0800 Subject: [PATCH] 转办:候选用户、候选角色实现 --- src/views/flowable/task/myProcess/send/index.vue | 161 ++++++++++++++++++++++++++++++++++++++++++++--------- 1 files changed, 133 insertions(+), 28 deletions(-) diff --git a/src/views/flowable/task/myProcess/send/index.vue b/src/views/flowable/task/myProcess/send/index.vue index e55ed89..a6dc3b9 100644 --- a/src/views/flowable/task/myProcess/send/index.vue +++ b/src/views/flowable/task/myProcess/send/index.vue @@ -84,23 +84,45 @@ <el-form-item label="鐢ㄦ埛绫诲瀷" prop="peopleType"> <el-select v-model="delegationForm.peopleType" @change="peopleTypeChange" placeholder="璇烽�夋嫨鐢ㄦ埛绫诲瀷"> <el-option label="鎸囧畾浜哄憳" value="FIX_USER"></el-option> - <el-option label="鍊欓�夌敤鎴�" disabled value="USER"></el-option> + <el-option label="鍊欓�夌敤鎴�" value="USER"></el-option> <el-option label="鍊欓�夐儴闂�" value="DEPT"></el-option> - <el-option label="鍊欓�夎鑹�" disabled value="ROLE"></el-option> + <el-option label="鍊欓�夎鑹�" value="ROLE"></el-option> </el-select> </el-form-item> <el-form-item v-if="delegationForm.peopleType === 'DEPT'" label="鍊欓�夐儴闂�" prop="targetId"> - <Dept ref="dept" :checkeds="delegationDeptSelect" :show="deptShow" @close="closeDept" @submit="getDeptSelect"/> + <MyDept ref="dept" :checkeds="delegationDeptSelect" :show="deptShow" @close="closeDept" @submit="getDeptSelect"/> <div style="display: flex;align-items: center"> - <div>{{deptNames}}</div> - <el-button style="margin-left: 8px" type="text" @click="editDept">缂栬緫</el-button> + <div> + <el-tag v-for="dept in delegationDeptSelect" :key="dept.id + 'zxc'" type="info" closable @close="removeDept(dept)">{{dept.label}}</el-tag> + </div> + <el-button style="margin-left: 8px" type="text" @click="editDept">閫夋嫨</el-button> </div> </el-form-item> <el-form-item v-if="delegationForm.peopleType === 'FIX_USER'" label="鎸囧畾鐢ㄦ埛" prop="targetId"> - <single-user ref="singleUser" :select-user="delegationForm.targetId" :show="singleUserShow" @close="closeUser" @submit="getSingleUserSelect"/> + <single-user ref="singleUser" :select-user="delegationForm.targetId" :show="singleUserShow" @close="closeSingleUser" @submit="getSingleUserSelect"/> <div style="display: flex;align-items: center"> - <div>{{delegationUserSelect.map(item => item.nickName).join(',')}}</div> - <el-button style="margin-left: 8px" type="text" @click="editUser">缂栬緫</el-button> + <div> + <el-tag v-for="user in delegationUserSelect" :key="user.userId + 'abc'" type="info" closable @close="removeSingleUser(user)">{{user.nickName}}</el-tag> + </div> + <el-button style="margin-left: 8px" type="text" @click="editSingleUser">閫夋嫨</el-button> + </div> + </el-form-item> + <el-form-item v-if="delegationForm.peopleType === 'USER'" label="鍊欓�夌敤鎴�" prop="targetId"> + <mult-user ref="multUser" :select-user="delegationUserSelect" :show="multUserShow" @close="closeMultUser" @submit="getMultUserSelect"/> + <div style="display: flex;align-items: center"> + <div> + <el-tag v-for="user in delegationUserSelect" :key="user.userId + 'qwe'" type="info" closable @close="removeMultUser(user)">{{user.nickName}}</el-tag> + </div> + <el-button style="margin-left: 8px" type="text" @click="editMultUser">閫夋嫨</el-button> + </div> + </el-form-item> + <el-form-item v-if="delegationForm.peopleType === 'ROLE'" label="鍊欓�夎鑹�" prop="targetId"> + <my-role ref="role" :select-values="delegationRoleSelect" :show="roleShow" @close="closeRole" @submit="getRoleSelect"/> + <div style="display: flex;align-items: center"> + <div> + <el-tag v-for="role in delegationRoleSelect" :key="role.roleId + 'rty'" type="info" closable @close="removeRole(role)">{{role.roleName}}</el-tag> + </div> + <el-button style="margin-left: 8px" type="text" @click="editRole">閫夋嫨</el-button> </div> </el-form-item> </el-form> @@ -116,13 +138,13 @@ <script> import {definitionStart, flowXmlAndNode} from "@/api/flowable/definition"; import BpmnViewer from '@/components/Process/viewer'; -import Dept from '@/components/flow/Dept' +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' import {completeSubmitFormTask} from "@/api/flowable/process"; import { flowTaskForm } from "@/api/flowable/todo"; import {getNextFlowNodeByStart} from "@/api/flowable/todo"; -import FlowUser from '@/components/flow/User' -import FlowRole from '@/components/flow/Role' import {rejectTask} from "@/api/flowable/process"; import {taskDelegation} from "@/api/projectProcess/projectProcess"; @@ -130,18 +152,20 @@ name: "Record", components: { BpmnViewer, - FlowUser, - FlowRole, - Dept, + MyRole, + MyDept, SingleUser, + MultUser, }, props: {}, data() { return { + roleShow: false, // 瑙掕壊缁勬樉绀� + delegationRoleSelect: [], // 閫変腑瑙掕壊 + multUserShow: false, // 鐢ㄦ埛缁勬樉绀� singleUserShow: false, // 鎸囧畾鐢ㄦ埛鏄剧ず delegationUserSelect: [], // 閫変腑鐨勭敤鎴� - deptShow: false, // 閮ㄩ棬鏄剧ず - deptNames: '', // 閫変腑鐨勯儴闂ㄥ悕绉� + deptShow: false, // 閮ㄩ棬缁勬樉绀� delegationDeptSelect: [], // 閫変腑閮ㄩ棬 delegationFormRules: { peopleType: [ @@ -204,10 +228,45 @@ this.getFlowFormData(this.taskId); }, methods: { + removeDept(dept) { + let index = this.delegationDeptSelect.indexOf(dept); + if (index !== -1) { + this.delegationDeptSelect.splice(index, 1); + } + this.delegationForm.targetId = this.delegationDeptSelect.map(item => item.id).join(",") + }, + removeRole(role) { + let index = this.delegationRoleSelect.indexOf(role); + if (index !== -1) { + this.delegationRoleSelect.splice(index, 1); + } + this.delegationForm.targetId = this.delegationRoleSelect.map(item => item.roleId).join(",") + }, + removeMultUser(user) { + let index = this.delegationUserSelect.indexOf(user); + if (index !== -1) { + this.delegationUserSelect.splice(index, 1); + } + this.delegationForm.targetId = this.delegationUserSelect.map(item => item.userId).join(",") + }, + removeSingleUser(user) { + // 鍥犱负鍙兘閫変竴涓敤鎴凤紝鎵�浠ュ垹浜嗗氨娌′簡 + this.delegationUserSelect = [] + this.delegationForm.targetId = '' + }, + getTips() { + if (this.delegationForm.peopleType === 'USER' || this.delegationForm.peopleType === 'FIX_USER') { + return this.delegationUserSelect.map(item => item.nickName).join("銆�") + } else if (this.delegationForm.peopleType === 'DEPT') { + return this.delegationDeptSelect.map(item => item.label).join("銆�") + } else if (this.delegationForm.peopleType === 'ROLE') { + return this.delegationRoleSelect.map(item => item.roleName).join("銆�") + } + }, delegation() { this.$refs['delegationForm'].validate((valid) => { if (valid) { - this.$confirm(`纭畾瑕佸皢姝や换鍔′氦鐢便��${this.deptNames}銆戝鐞嗗悧?`, '鎻愮ず', { + this.$confirm(`纭畾瑕佸皢姝や换鍔′氦鐢便��${this.getTips()}銆戝鐞嗗悧?`, '鎻愮ず', { confirmButtonText: '纭畾', cancelButtonText: '鍙栨秷', type: 'warning' @@ -236,6 +295,10 @@ this.deptShow = true } else if (val === 'FIX_USER') { this.singleUserShow = true + } else if (val === 'USER') { + this.multUserShow = true + } else if (val === 'ROLE') { + this.roleShow = true } }, editDept() { @@ -244,20 +307,56 @@ }) this.deptShow = true }, - editUser() { - this.$nextTick(() => { - this.$refs.singleUser.setChecked(this.delegationForm.targetId) - }) + editSingleUser() { + if (this.delegationUserSelect && this.delegationUserSelect.length > 0) { + this.$nextTick(() => { + this.$refs.singleUser.setChecked(this.delegationUserSelect[0]) + }) + } this.singleUserShow = true }, - getDeptSelect(list, names) { - console.log(list, names) - if (list) { - this.delegationForm.targetId = list - this.delegationDeptSelect = list.split(",") - this.deptNames = names + editRole() { + if (this.delegationRoleSelect && this.delegationRoleSelect.length > 0) { + this.$nextTick(() => { + this.$refs.role.setChecked(this.delegationRoleSelect) + }) + } + this.roleShow = true + }, + editMultUser() { + if (this.delegationForm.targetId) { + this.$nextTick(() => { + this.$refs.multUser.setChecked(this.delegationUserSelect) + }) + } + this.multUserShow = true + }, + getDeptSelect(deptList) { + if (deptList && deptList.length > 0) { + this.delegationForm.targetId = deptList.map(item => item.id).join(",") + this.delegationDeptSelect = deptList } this.deptShow = false + }, + getMultUserSelect(userList) { + if (userList && userList.length > 0) { + this.delegationForm.targetId = userList.map(item => item.userId).join(",") + this.delegationUserSelect = userList + } else { + this.delegationForm.targetId = '' + this.delegationUserSelect = [] + } + this.multUserShow = false + }, + getRoleSelect(roleList) { + if (roleList && roleList.length > 0) { + this.delegationForm.targetId = roleList.map(item => item.roleId).join(",") + this.delegationRoleSelect = roleList + } else { + this.delegationForm.targetId = '' + this.delegationRoleSelect = [] + } + this.roleShow = false }, getSingleUserSelect(user) { if (user) { @@ -272,9 +371,15 @@ closeDept() { this.deptShow = false }, - closeUser() { + closeSingleUser() { this.singleUserShow = false }, + closeRole() { + this.roleShow = false + }, + closeMultUser() { + this.multUserShow = false + }, openDelegation(taskName) { this.delegationForm.taskName = taskName this.delegationForm.taskId = this.taskId -- Gitblit v1.8.0