FE-V2-PC/src/views/comprehensive/personnel/teacher/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="searchValue" label-width="80px">
            <el-input
              style="width:160px;"
              maxlength="10"
              v-model="queryParams.searchValue"
              placeholder="请输入关键字"
              clearable
              size="small"
            />
          </el-form-item>
          <el-form-item label="在职状态" prop="nature" label-width="80px">
            <el-select
              v-model="queryParams.nature"
              placeholder="请选择"
              clearable
              style="width:160px;"
            >
              <el-option
                key="0"
                label="在职"
                value="0"/>
              <el-option
                key="1"
                label="离职"
                value="1"/>
            </el-select>
          </el-form-item>
          <el-form-item label="学院" prop="deptId" label-width="80px">
            <el-cascader
              :show-all-levels="false"
              v-model="queryParams.deptId"
              :options="deptOptions"
              :props="{ checkStrictly: true, value: 'id', label: 'label',emitPath:false  }"></el-cascader>
          </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>
        <el-table v-loading="loading" border 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="序号"  width="50" align="center"  type="index"/>
          <el-table-column label="姓名" align="left" prop="nickName" />
          <el-table-column label="工号" align="left" prop="userName" />
          <el-table-column label="部门" align="left" prop="deptName" />
          <el-table-column label="职位" align="left" prop="positionName" />
          <el-table-column label="账号状态" align="left" prop="status">
            <template slot-scope="scope">
              <span :class="scope.row.status == 0?'color_14AE10':'color_FF4E00'">{{scope.row.status == 0?"已启用":"已停用"}}</span>
            </template>
          </el-table-column>
        </el-table>
        <div style="display: flex;width:1460px;margin-top:7px;">
          <!--<p style="flex:4;"></p>-->
          <p style="text-align: left;margin:0;line-height:32px;margin-right:20px;color:#999;">
            <i class="el-icon-warning" style="color:#0183FA;"></i>
            已选择 {{selectedNum}} 项
          </p>
          <div style="flex:5;">
            <pagination :page-sizes="[20, 30, 40, 50]"
              v-show="total>0"
              :total="total"
              style="margin:0;"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            />
          </div>
        </div>
        <div style="margin-top:7px;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>
          <p style="flex:1;"></p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { listDepartments } from "@/api/system/dept";
  import { optionselect } from "@/api/laboratory/gradeManage";
  import { listUser } from "@/api/system/user_teacher";
  import { listClassifiedAll } from "@/api/laboratory/classified";
  import { listClasstypeAll } from "@/api/laboratory/classtype";
  import { treeselect } from "@/api/system/dept";
  export default {
    name: "userList",
    props:{

    },
    data() {
      return {
        userOpen:false,
        loading:false,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        queryParams:{
          pageNum:1,
          pageSize:20,
          searchValue:null,
          nature:null,
          deptId:null,
        },
        userList:[],
        //已选中数量
        selectedNum:0,
        //已选中
        ids:[],
        idData:[],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        //分类数据
        typeList:[],
        //分级数据
        levelList:[],
        //状态列表
        workClass:[],
        // 部门树选项
        deptOptions: [],
      }
    },
    created(){
    },
    mounted(){
      this.getDicts("work_class").then(response => {
        this.workClass = response.data;
      });
      this.getListClasstypeAll();
      this.getListClassifiedAll();
      this.listDepartments();
      this.optionselect();
      this.getList();
      this.getTreeselect();
    },
    methods:{
      deptAddSelect(){},
      /** 查询部门下拉树结构 */
      getTreeselect() {
        treeselect().then(response => {
          this.deptOptions = response.data;
          console.log("this.deptOptions",this.deptOptions)
        });
      },
      //确定按钮
      okButton(){
        if(!this.ids[0]){
          this.msgError("请勾选人员")
          return
        }
        this.$parent.takeUserData(this.ids,this.idData);
      },
      show(data){
        this.queryParams = {
          pageNum:1,
          pageSize:20,
          searchValue:null,
          nature:null,
          deptId:null,
        };
        this.getList();
        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);
        }
      },
      //获取学院
      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>