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="position" label-width="50px">
            <el-select style="width:200px;" v-model="queryParams.position" placeholder="请选择身份" clearable>
              <el-option v-for="dict in typeList" :key="dict.postId" :label="dict.postName" :value="dict.postId"></el-option>
            </el-select>
          </el-form-item>
          <!--<el-form-item label="工号/学号" prop="userName" label-width="80px">-->
            <!--<el-input-->
              <!--style="width:160px;"-->
              <!--maxlength="20"-->
              <!--v-model="queryParams.userName"-->
              <!--placeholder="请输入工号/学号"-->
              <!--clearable-->
              <!--size="small"-->
            <!--/>-->
          <!--</el-form-item>-->
          <!--<el-form-item label="联系方式" prop="phonenumber" label-width="80px">-->
            <!--<el-input-->
              <!--style="width:160px;"-->
              <!--maxlength="11"-->
              <!--v-model="queryParams.phonenumber"-->
              <!--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="inquire-button-one" @click="handleQuery">查询</p>
            <p class="reset-button-one" @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 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.pageNum"
          :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 {
    filterDept,optionselect,
    listUser,listClassifiedAll,
    listClasstypeAll
  } from "@/api/hierarchicalControl/indexDemo";
  export default {
    name: "userList",
    data() {
      return {
        userOpen:false,
        loading:false,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        queryParams:{
          pageNum:1,
          pageSize:20,
          searchValue:"",
          position:"",
          deptId:"",
        },
        userList:[],
        //已选中数量
        selectedNum:0,
        //已选中
        ids:[],
        idData:[],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        //分类数据
        typeList:[],
        //分级数据
        levelList:[],
        addUserList:[],
      }
    },
    created(){

    },
    mounted(){
      // this.getListClasstypeAll();
      this.getListClassifiedAll();
      this.filterDept();
      this.optionselect();
    },
    methods:{
      //确定按钮
      okButton(){
        if(!this.ids[0]){
          this.msgError("请勾选人员")
          return
        }
        this.$parent.takeUserData(this.ids,this.idData);
      },
      show(data){
        let self = this;
        this.resetQuery();
        // this.getListClasstypeAll();
        this.getListClassifiedAll();
        this.filterDept();
        this.optionselect();
        this.userOpen = !this.userOpen;
        if(data){
          this.addUserList = data;
          // this.queryParams.pageNum = 1;
          // setTimeout(function(){
          //   for(let i=0;i<data.length;i++){
          //     self.$refs.multipleTable.toggleRowSelection(data[i],true)
          //   }
          //   self.getList();
          // },300);
        }
        self.getList();
        // if(type == 1){
        //   this.userOpen = true;
        // }else if(type == 2){
        //   this.userOpen = false;
        // }
      },
      //获取学院
      filterDept(){
        filterDept().then(response => {
          this.deptList = response.data;
        });
      },
      //获取身份
      optionselect(){
        optionselect().then(response => {
          this.typeList = response.data;
        });
      },
      //获取数据列表
      getList(){
        this.loading = true;
        let obj = JSON.parse(JSON.stringify(this.queryParams));
        obj.ids = this.addUserList+'';
        obj.include = true;
        listUser(obj).then(response => {
          this.userList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        // this.resetForm("queryForm");
        this.queryParams.searchValue = "";
        this.queryParams.position = "";
        this.queryParams.deptId = "";
        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
      },
      //查询安全分级
      getListClassifiedAll(){
        listClassifiedAll().then(response=>{
          if(response.code==200){
            this.levelList=response.data
          }
        })
      },
      //查询安全分类
      getListClasstypeAll(){
        listClasstypeAll().then(response=>{
          if(response.code==200){
            this.typeList=response.data;
          }
        });
      },
    }
  }
</script>

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