基于若依的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-table
            ref="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、效果图如下:


最近更新

  1. TCP协议是安全的吗?

    2024-06-14 01:38:02       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-06-14 01:38:02       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-06-14 01:38:02       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-06-14 01:38:02       18 阅读

热门阅读

  1. GaussDB系统视图归纳总结及常用运维SQL

    2024-06-14 01:38:02       9 阅读
  2. 开源项目-MES制造执行系统

    2024-06-14 01:38:02       9 阅读
  3. 58.强制类型转换

    2024-06-14 01:38:02       9 阅读
  4. 【Python入门与进阶】Python中变量的输出方式

    2024-06-14 01:38:02       9 阅读
  5. WHAT - React 学习系列(二)

    2024-06-14 01:38:02       11 阅读
  6. Oracle数据库面试题-10

    2024-06-14 01:38:02       7 阅读
  7. Perl语言基础概念、基本语法

    2024-06-14 01:38:02       9 阅读
  8. 13、架构-流量治理之流量控制

    2024-06-14 01:38:02       6 阅读
  9. Linux系统 DM8安装 达梦数据库

    2024-06-14 01:38:02       8 阅读
  10. Vue 2

    2024-06-14 01:38:02       5 阅读