更多ruoyi-nbcio功能请看演示系统

gitee源代码地址

前后端代码： https://gitee.com/nbacheng/ruoyi-nbcio

演示地址：RuoYi-Nbcio后台管理系统

这个部门主要是修改审批人的指定用户选择，这里就要采用ruoyi的用户体系。

这里主要是修改PropPanel.vue文件的内容修改

1、对于指定用户的选择修改如下：

<div v-else class="option-box"><div class="element-drawer__button"><el-button size="mini" type="primary" icon="el-icon-plus" @click="onSelectUsers()">添加用户</el-button></div><el-tag v-for="userText in selectedUser.text" :key="userText" effect="plain">{{userText}}</el-tag></div>

2、增加用户选择窗口

<!-- 候选用户弹窗 --><el-dialog title="候选用户" :visible.sync="userOpen" width="60%" append-to-body><el-row type="flex" :gutter="20"><!--部门数据--><el-col :span="7"><el-card shadow="never" style="height: 100%"><div slot="header"><span>部门列表</span></div><div class="head-container"><el-inputv-model="deptName"placeholder="请输入部门名称"clearablesize="small"prefix-icon="el-icon-search"style="margin-bottom: 20px"/><el-tree:data="deptOptions":props="deptProps":expand-on-click-node="false":filter-node-method="filterNode"ref="tree"default-expand-all@node-click="handleNodeClick"/></div></el-card></el-col><el-col :span="17"><el-table ref="multipleTable" height="600" :data="userTableList" border @selection-change="handleSelectionChange"><el-table-column type="selection" width="50" align="center" /><el-table-column label="用户名" align="center" prop="nickName" /><el-table-column label="部门" align="center" prop="dept.deptName" /></el-table><pagination:total="userTotal":page.sync="queryParams.pageNum":limit.sync="queryParams.pageSize"@pagination="getUserList"/></el-col></el-row><div slot="footer" class="dialog-footer"><el-button type="primary" @click="handleTaskUserComplete">确 定</el-button><el-button @click="userOpen = false">取 消</el-button></div></el-dialog>

3、增加相应的变量

selectedUser: {ids: [],text: []},userOpen: false,deptName: undefined,deptOptions: [],deptProps: {children: "children",label: "label"},deptTempOptions: [],userTableList: [],userTotal: 0,selectedUserDate: [],roleOptions: [],roleIds: [],deptTreeData: [],deptIds: [],// 查询参数queryParams: {deptId: undefined},

4、增加相应的方法如下：

    onSelectUsers() {this.selectedUserDate = []this.$refs.multipleTable?.clearSelection();this.getDeptOptions();this.userOpen = true;},/*** 清空选项数据*/clearOptionsData() {this.selectedUser.ids = [];this.selectedUser.text = [];this.roleIds = [];this.deptIds = [];},/** 查询用户列表 */getUserList() {listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {this.userTableList = response.rows;this.userTotal = response.total;});},/*** 查询部门下拉树结构*/getDeptOptions() {return new Promise((resolve, reject) => {if (!this.deptOptions || this.deptOptions.length <= 0) {deptTreeSelect().then(response => {this.deptTempOptions = response.data;this.deptOptions = response.data;resolve()})} else {reject()}});},/*** 查询部门下拉树结构（含部门前缀）*/getDeptTreeData() {function refactorTree(data) {return data.map(node => {let treeData = { id: `DEPT${node.id}`, label: node.label, parentId: node.parentId, weight: node.weight };if (node.children && node.children.length > 0) {treeData.children = refactorTree(node.children);}return treeData;});}return new Promise((resolve, reject) => {if (!this.deptTreeData || this.deptTreeData.length <= 0) {this.getDeptOptions().then(() => {this.deptTreeData = refactorTree(this.deptOptions);resolve()}).catch(() => {reject()})} else {resolve()}})},/*** 查询部门下拉树结构*/getRoleOptions() {if (!this.roleOptions || this.roleOptions.length <= 0) {listRole().then(response => this.roleOptions = response.rows);}},/** 查询用户列表 */getUserList() {listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {this.userTableList = response.rows;this.userTotal = response.total;});},// 筛选节点filterNode(value, data) {if (!value) return true;return data.label.indexOf(value) !== -1;},// 节点单击事件handleNodeClick(data) {this.queryParams.deptId = data.id;this.getUserList();},// 多选框选中数据handleSelectionChange(selection) {this.selectedUserDate = selection;},handleTaskUserComplete() {if (!this.selectedUserDate || this.selectedUserDate.length <= 0) {this.$modal.msgError('请选择用户');return;}console.log("handleTaskUserComplete this.selectedUserDate",this.selectedUserDate);this.orgCollection.user = this.selectedUserDate;this.approverForm.text = this.selectedUserDate.map(k => k.nickName).join() || null;this.selectedUser.text = this.selectedUserDate.map(k => k.nickName) || [];this.userOpen = false;},

5、效果图