FE-V2-PC/src/views/comprehensive/message/addContent/userList.vue

<!--分级管控/人员列表-->
<template>
  <div class="userList" v-if="userOpen">
    <el-dialog title="选择用户" :visible.sync="userOpen" width="1500px" append-to-body>
      <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="nickName" label-width="80px">
            <el-input
              style="width:160px;"
              maxlength="10"
              v-model="queryParams.nickName"
              placeholder="请输入姓名"
              clearable
              size="small"
            />
          </el-form-item>
          <el-form-item label="身份" prop="position" label-width="50px">
            <el-select style="width:160px;" 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="deptName" label-width="80px">
            <el-select style="width:160px;" 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 { listDepartments } from "@/api/system/dept";
  import { optionselect } from "@/api/laboratory/gradeManage";
  import { listUser } from "@/api/permissionRequired";
  import { listClassifiedAll } from "@/api/laboratory/classified";
  import { listClasstypeAll } from "@/api/laboratory/classtype";
  export default {
    name: "userList",
    props:{

    },
    data() {
      return {
        userOpen:false,
        loading:false,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        queryParams:{
          pageNum:1,
          pageSize:20,
          nickName:null,
          position:null,
          userName:null,
          phonenumber:null,
          deptName:null,
        },
        userList:[],
        //已选中数量
        selectedNum:0,
        //已选中
        ids:[],
        idData:[],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        //分类数据
        typeList:[],
        //分级数据
        levelList:[]
      }
    },
    created(){

    },
    mounted(){
      // this.getListClasstypeAll();
      // this.getListClassifiedAll();
      this.listDepartments();
      this.optionselect();
      this.getList();
    },
    methods:{
      //确定按钮
      okButton(){
        if(!this.ids[0]){
          this.msgError("请勾选人员")
          return
        }
        this.$parent.takeUserData(this.ids,this.idData);
      },
      show(data){
        let self = this;
        this.userOpen = !this.userOpen;
        if(data){
          this.queryParams.pageNum = 1;
          setTimeout(function(){
            for(let i=0;i<data.length;i++){
              self.$refs.multipleTable.toggleRowSelection(data[i],true)
            }
            self.getList();
          },100);
        }
        // if(type == 1){
        //   this.userOpen = true;
        // }else if(type == 2){
        //   this.userOpen = false;
        // }
      },
      //获取学院
      listDepartments(){
        listDepartments().then(response => {
          this.deptList = response.data;
        });
      },
      //获取身份
      optionselect(){
        optionselect().then(response => {
          this.typeList = response.data;
        });
      },
      //获取数据列表
      getList(){
        this.loading = true;
        listUser(this.queryParams).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.handleQuery();
      },
      /*===记录勾选数据===
        需要再el-table 添加  :row-key="getRowKeys"
        需要在selection 添加 :reserve-selection="true"
      */
      getRowKeys(row) {
        return row.userId
      },
      //选择本页
      selectPage(){
        console.log(this.$refs.multipleTable)
        this.$refs.multipleTable.toggleAllSelection()
        // console.log(this.$refs.multipleTable.selection)
      },
      //清除选择
      clearSelection(){
        this.$refs.multipleTable.clearSelection()
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        console.log("selection",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){
            console.log(response)
            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>