v3-lab-web/src/views/hierarchicalControl/gradeManage/userList.vue

<!--分级管控/人员列表-->
<template>
  <div class="userList" v-if="userOpen">
    <el-dialog title="选择用户" :visible.sync="userOpen" width="1500px" append-to-body :close-on-click-modal="false">
      <div class="gradeManage-userList" style="height:626px;display: flex;flex-direction: column">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
          <el-form-item label="关键字" prop="searchValue" label-width="80px">
            <el-input
              style="width:200px;"
              maxlength="10"
              v-model="queryParams.searchValue"
              placeholder="请输入名称/联系方式"
              clearable
              size="small"
            />
          </el-form-item>
          <el-form-item label="学院" prop="deptId" label-width="50px">
            <el-select style="width:200px;" v-model="queryParams.deptId" placeholder="请选择学院" clearable>
              <el-option
                v-for="dict in deptList"
                :key="dict.deptId"
                :label="dict.deptName"
                :value="dict.deptId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <p class="page-reset-common-style-button" style="margin-right:10px;" @click="handleQuery">查询</p>
            <p class="page-inquire-common-style-button" @click="resetQuery">重置</p>
          </el-form-item>
        </el-form>
        <div class="sheet-expand-box" style="height:40px;display:flex;background:rgba(1,131,250,0.1);border-radius: 5px;margin-bottom:18px;font-size:14px;">
          <i class="el-icon-warning" style="color:#0045AF;margin:10px 16px 0 14px;height:20px;width:20px;font-size:20px;display: block;"></i>
          <p class="color_99" style="margin:0;width:132px;font-size:14px;height:40px;line-height:40px;">已选择 {{selectedNum}} 项</p>
          <p class="color_one cursor_hover" style="margin:0;width:60px;font-size:14px;height:40px;line-height:40px;margin-right:20px;" @click="selectPage">全选本页</p>
          <p class="color_warn cursor_hover" style="margin:0;width:60px;font-size:14px;height:40px;line-height:40px;margin-right:20px;" @click="clearSelection">清除选项</p>
        </div>
        <el-table class="table-box" v-loading="loading" border :data="userList" @selection-change="handleSelectionChange" ref="multipleTable" :row-key="getRowKeys">
          <el-table-column type="selection" width="55" :reserve-selection="true" align="center" />
          <el-table-column label="姓名" align="left" prop="nickName" />
          <el-table-column label="身份" align="left" prop="positionName" />
          <el-table-column label="工号/学号" align="left" prop="userName" />
          <el-table-column label="联系方式" align="left" prop="phonenumber" />
          <el-table-column label="学院" align="left" prop="dept.deptName" />
        </el-table>
        <pagination :page-sizes="[20, 30, 40, 50]"
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.page"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
        <div style="margin-top:30px;padding-top:20px;display: flex;border-top:1px solid #dedede">
          <p style="flex:1;"></p>
          <p style="margin-right:20px;" class="reset-button-one" @click="show(2)">取消</p>
          <p class="inquire-button-one" @click="okButton">确定</p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getDeptDropList,
    systemUserDropDateAuthList,
  } from '@/api/commonality/permission'
  export default {
    name: "userList",
    data() {
      return {
        userOpen:false,
        loading:false,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        queryParams:{
          page:1,
          pageSize:20,
          searchValue:"",
          deptId:null,
        },
        userList:[],
        //已选中数量
        selectedNum:0,
        //已选中
        ids:[],
        idData:[],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        //分类数据
        typeList:[],
        //分级数据
        levelList:[],
        addUserList:[],
        deptList:[],
      }
    },
    created(){

    },
    mounted(){
      this.getDeptDropList();
    },
    methods:{
      //确定按钮
      okButton(){
        if(!this.ids[0]){
          this.msgError("请勾选人员")
          return
        }
        this.$parent.takeUserData(this.ids,this.idData);
      },
      show(data){
        let self = this;
        this.resetQuery();
        this.getDeptDropList();
        this.userOpen = !this.userOpen;
        if(data){
          this.addUserList = data;
        }
        self.getList();
      },
      //获取学院
      getDeptDropList(){
        getDeptDropList({level: 2, deptType: 1 }).then(response => {
          this.$set(this,'deptList',response.data);
        });
      },
      //获取数据列表
      getList(){
        this.$set(this,'loading',true);
        let obj = JSON.parse(JSON.stringify(this.queryParams));
        obj.ids = this.addUserList[0]?this.addUserList+'':null;
        obj.include = true;
        systemUserDropDateAuthList(obj).then(response => {
          this.$set(this,'dataList',response.data.records);
          this.$set(this,'total',response.data.total);
          this.$set(this,'loading',false);
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.page = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        // this.resetForm("queryForm");
        this.queryParams.searchValue = "";
        this.queryParams.deptId = null;
        this.handleQuery();
      },
      /*===记录勾选数据===
        需要再el-table 添加  :row-key="getRowKeys"
        需要在selection 添加 :reserve-selection="true"
      */
      getRowKeys(row) {
        return row.userId
      },
      //选择本页
      selectPage(){
        this.$refs.multipleTable.toggleAllSelection()
      },
      //清除选择
      clearSelection(){
        this.$refs.multipleTable.clearSelection()
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.selectedNum = selection.length;
        this.ids = selection.map(item => item.userId);
        this.idData = selection.map(item => item);
        this.single = selection.length!==1
        this.multiple = !selection.length
      },
    }
  }
</script>

<style lang="scss" scoped>
  .userList{
    height:700px;
    display: flex!important;
    flex-direction: column;
  }
</style>