基于若依的ruoyi-nbcio-plus里抄送人多页选择人员的bug修复

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

gitee源代码地址

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

演示地址：RuoYi-Nbcio后台管理系统 http://218.75.87.38:9666/

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

gitee源代码地址

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

前端代码：https://gitee.com/nbacheng/nbcio-vue.git

在线演示（包括H5） ： http://218.75.87.38:9888

1、在审批的时候抄送人选择多页情况下，会出现不同页面的选择人员无法同时选择，会丢失的现象出现。

2、主要还是分页选择后数据刷新丢失引起的，所以还是采用el-table官方的推荐方式进行处理

3、具体抄送人员页面跳转如下，主要把el-tag的close先关闭，否则会出现问题：

<el-row><el-col :span="20" :offset="2"><el-form ref="taskFormRef" :model="taskForm" :rules="rules" label-width="120px"><el-form-item label="审批意见" prop="comment"><el-input type="textarea" :rows="5" v-model="taskForm.comment" placeholder="请输入 审批意见" /></el-form-item><el-form-item label="抄送人" prop="copyUserIds"><el-tag :key="index" v-for="(item, index) in copyUser" :disable-transitions="false" @close="handleClose('copy', item)">{{ item.nickName }}</el-tag><el-button class="button-new-tag" type="primary" icon="el-icon-plus" circle @click="onSelectCopyUsers" /></el-form-item><el-form-item label="指定审批人" prop="copyUserIds"><el-tag :key="index" v-for="(item, index) in nextUser" :disable-transitions="false" @close="handleClose('next', item)">{{ item.nickName }}</el-tag><el-button class="button-new-tag" type="primary" icon="el-icon-plus" circle @click="onSelectNextUsers" /></el-form-item></el-form></el-col></el-row>

4、选择人员的对话框调整如下：

<el-dialog :title="userSelectDialog.title" v-model="userSelectDialog.visible" width="60%" append-to-body><el-row type="flex" :gutter="20"><!--部门数据--><el-col :span="5"><el-card shadow="never" style="height: 100%"><template #header><span>部门列表</span></template><div><el-input v-model="deptName" placeholder="请输入部门名称" prefix-icon="Search" clearable /><el-tree:data="deptOptions":props="{label: 'label', children: 'children'}":expand-on-click-node="false":filter-node-method="filterNode"ref="deptTreeRef"default-expand-all@node-click="handleNodeClick"/></div></el-card></el-col><el-col :span="18"><el-tableref="userTableRef":key="userSelectType"height="400"v-loading="userLoading":data="userList"highlight-current-row:row-key="getRowKeys"@selection-change="handleSelectionChange"><el-table-column v-if="userSelectType === 'copy' || userSelectType === 'next' || userSelectType === 'addSign'":reserve-selection="true" width="55" type="selection" /><!--<el-table-column v-else width="30"><template #default="scope"><el-radio :label="scope.row.userId" v-model="currentUserId">{{''}}</el-radio></template></el-table-column>--><el-table-column label="用户名称" align="center" prop="userName" /><el-table-column label="用户昵称" align="center" prop="nickName" /><el-table-column label="手机" align="center" prop="phonenumber" /></el-table><pagination :total="userTotal" v-model:page="queryUserParams.pageNum" v-model:limit="queryUserParams.pageSize" @pagination="getList" /></el-col></el-row><template #footer><el-button @click="userSelectDialog.visible = false">取 消</el-button><el-button type="primary" @click="submitUserData">确 定</el-button></template></el-dialog>

      主要调整了增加:row-key="getRowKeys"和:reserve-selection="true"，保证分页数据的保留，同时去掉其它不需要的

5、getRowKeys如下：

function getRowKeys(row) {return row.userId  // 指定table id}

6、同时getList去掉之前的选择人员机制，如下：

/** 查询用户列表 */const getList = async () => {userLoading.value = true;const res = await selectUser(proxy?.addDateRange(queryUserParams.value, dateRange.value));userList.value = res.rows;userTotal.value = res.total;//toggleSelection(userMultipleSelection.value);userLoading.value = false;}

7、效果图如下：