FE-V2-PC/src/views/safetyCheck/checkConfiguration/configDialog.vue

<template>
  <el-dialog class="configDialog"
             :title="configDialogData.staffType==1?'检查人员配置':'整改人员配置'" :visible.sync="configDialogType" v-if="configDialogType"
             @close="addDialogAllOff" width="1373px" append-to-body>
    <div class="configDialog-box" v-if="configPageType == 1">
      <div class="configDialog-content-box">
        <div class="configDialog-content-min-box">
          <p class="configDialog-content-min-title">实验室检查人员配置：</p>
          <div class="configDialog-content-min-checkbox">
            <el-checkbox-group v-model="checkDataList" @change="checkboxChange" :disabled="!editType">
              <el-checkbox style="width:170px;margin-right:70px;"
                           v-for="item in checkList" :value="item.key" :label="item.key" :key="item.key">{{item.label}}</el-checkbox>
            </el-checkbox-group>
          </div>
          <p v-if="checkType" class="configDialog-content-min-button" @click="configUserButton(2)">配置</p>
          <div class="configDialog-content-min-text-box">
            <p></p>
            <p></p>
            <p>实验室白名单内的老师</p>
            <p v-if="checkType">拥有实验室安全准入资格的学生</p>
          </div>
        </div>
      </div>
      <div class="dialog-footer-box" v-hasPermi="['check:set:edit']">
        <p class="dialog-footer-button-null"></p>
        <p class="dialog-footer-button-info" @click="addDialogOff">取消</p>
        <p class="dialog-footer-button-primary" @click="upDataButton">确定</p>
        <p class="dialog-footer-button-null"></p>
      </div>
    </div>
    <div class="configDialog-user-box" v-if="configPageType == 2">
      <div class="configDialog-user-content-box">
        <div class="left-max-box">
          <div class="dept-table-title-box">
            <p>待选人员</p>
            <p>{{userNumLeft}}/{{userTotalLeft}}</p>
          </div>
          <div class="dept-table-max-box">
            <el-form :model="userQueryParamsLeft" class="form-box" ref="queryForm" :inline="true" label-width="50px">
              <el-form-item label="" prop="deptId">
                <el-select v-model="userQueryParamsLeft.deptId" clearable placeholder="选择部门" style="width: 110px">
                  <el-option
                    v-for="item in deptSelectList"
                    :key="item.deptId"
                    :label="item.deptName"
                    :value="item.deptId">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-date-picker
                  :clearable="false"
                  v-model="leftDateRange"
                  size="small"
                  style="width: 180px"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="" prop="searchValue" class="form-index" style="margin-right:0;">
                <el-input
                  maxLength="30"
                  v-model="userQueryParamsLeft.searchValue"
                  placeholder="姓名/手机号/实验室"
                  style="width: 178px">
                  <p class="el-icon-search" slot="append" @click="userHandleQueryLeft"></p>
                </el-input>
              </el-form-item>
              <el-form-item style="margin-right:0;margin-left: 10px;">
                <p class="inquire-button-one" @click="userResetQueryLeft" style="width:60px;margin-right:0;">重置</p>
              </el-form-item>
            </el-form>
            <el-table ref="leftUserTable" border :data="userTableListLeft" @selection-change="userChangeLeft" :row-key="getRowKeys">
              <el-table-column v-if="editType" type="selection" width="50" :reserve-selection="true" align="center"/>
              <el-table-column label="姓名" align="center" prop="userName" show-overflow-tooltip/>
              <el-table-column label="学号" align="center" prop="userNumber" show-overflow-tooltip width="80"/>
              <el-table-column label="手机号" align="center" prop="phonenumber" show-overflow-tooltip width="100"/>
              <el-table-column label="实验室" align="center" prop="subjectName" show-overflow-tooltip width="80"/>
              <el-table-column label="准入有效期" align="center" prop="deptName" show-overflow-tooltip width="200">
                <template slot-scope="scope">{{scope.row.validBeginTime}} 至 {{scope.row.validEndTime}}</template>
              </el-table-column>
            </el-table>
            <pagination :page-sizes="[20, 30, 40, 50]"
                        v-show="userTotalLeft>0"
                        :total="userTotalLeft"
                        :page.sync="userQueryParamsLeft.pageNum"
                        :limit.sync="userQueryParamsLeft.pageSize"
                        @pagination="userGetListLeft"/>
          </div>
        </div>
        <div class="center-box">
          <p v-if="editType" class="el-icon-arrow-left" @click="userArrowButton(1)"></p>
          <p v-if="editType" class="el-icon-arrow-right" @click="userArrowButton(2)"></p>
        </div>
        <div class="right-max-box">
          <div class="dept-table-title-box">
            <p>已选成员</p>
            <p>{{userNumRight}}/{{userTotalRight}}</p>
          </div>
          <div class="dept-table-max-box">
            <el-form :model="userQueryParamsRight" class="form-box" ref="queryForm" :inline="true" label-width="50px">
              <el-form-item label="" prop="deptId">
                <el-select v-model="userQueryParamsRight.deptId" clearable placeholder="选择部门" style="width: 110px">
                  <el-option
                    v-for="item in deptSelectList"
                    :key="item.deptId"
                    :label="item.deptName"
                    :value="item.deptId">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-date-picker
                  :clearable="false"
                  v-model="rightDateRange"
                  size="small"
                  style="width: 180px"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="" prop="searchValue" class="form-index" style="margin-right:0;">
                <el-input
                  maxLength="30"
                  v-model="userQueryParamsRight.searchValue"
                  placeholder="姓名/手机号/实验室"
                  style="width: 178px">
                  <p class="el-icon-search" slot="append" @click="userHandleQueryRight"></p>
                </el-input>
              </el-form-item>
              <el-form-item style="margin-right:0;margin-left: 10px;">
                <p class="inquire-button-one" @click="userResetQueryRight" style="width:60px;margin-right:0;">重置</p>
              </el-form-item>
            </el-form>
            <el-table ref="rightUserTable" border :data="userTableListRight" @selection-change="userChangeRight" :row-key="getRowKeys">
              <el-table-column v-if="editType" type="selection" width="50" :reserve-selection="true" align="center"/>
              <el-table-column label="姓名" align="center" prop="userName" show-overflow-tooltip/>
              <el-table-column label="学号" align="center" prop="userNumber" show-overflow-tooltip width="80"/>
              <el-table-column label="手机号" align="center" prop="phonenumber" show-overflow-tooltip width="100"/>
              <el-table-column label="实验室" align="center" prop="subjectName" show-overflow-tooltip width="80"/>
              <el-table-column label="准入有效期" align="center" prop="deptName" show-overflow-tooltip width="200">
                <template slot-scope="scope">{{scope.row.validBeginTime}} 至 {{scope.row.validEndTime}}</template>
              </el-table-column>
            </el-table>
            <pagination :page-sizes="[20, 30, 40, 50]"
                        v-show="userTotalRight>0"
                        :total="userTotalRight"
                        :page.sync="userQueryParamsRight.pageNum"
                        :limit.sync="userQueryParamsRight.pageSize"
                        @pagination="userGetListRight"/>
          </div>
        </div>
      </div>
      <div class="dialog-footer-box" v-hasPermi="['check:set:edit']">
        <p class="dialog-footer-button-null"></p>
        <p class="dialog-footer-button-info" @click="addDialogOff">返回</p>
        <p class="dialog-footer-button-primary" @click="addUserButton">确定</p>
        <p class="dialog-footer-button-null"></p>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  import { listDepartments } from "@/api/system/dept";
  import { checkSet,checkSetAdd,checkStaffUserList } from '@/api/safetyCheck/index'
  export default {
    name: 'configDialog',
    props:{
      configDialogData:{},
    },
    data(){
      return{
        editType:this.hasPermiDom(['check:set:edit']),
        configDialogType:true,
        configPageType:1,
        checkDataList:[],
        checkList:[
          {
            key:"2",
            label:"实验室负责人",
          },
          {
            key:"1",
            label:"实验室安全责任人",
          },
          {
            key:"3",
            label:"老师",
          },
          {
            key:"4",
            label:"学生",
          },
        ],
        checkType:false,
        /*===================================人员选择相关===================================*/
        deptSelectList:[],
        userQueryParamsLeft:{
          pageNum:1,
          pageSize:20,
          searchValue:"",
          deptId:"",
          filtType:1
        },
        userTableListLeft:[],
        userTotalLeft:0,
        userNumLeft:0,
        userIdsLeft:[],
        userQueryParamsRight:{
          pageNum:1,
          pageSize:20,
          deptId:"",
          searchValue:"",
          filtType:2
        },
        userTableListRight:[],
        userTotalRight:0,
        userNumRight:0,
        userIdsRight:[],
        leftDateRange:[],
        rightDateRange:[],
        //选中巡查人员列表
        dialogTableList:[],
        //选中页面人员列表数据
        dialogTableDataList:[],
      }
    },
    created(){

    },
    mounted(){
      this.checkSet();
      this.listDepartments();
    },
    methods:{
      //提交
      upDataButton(){
        let self = this;
        let obj = {
          staffType:this.configDialogData.staffType,
          setSubjectLead:false,
          setSubjectSafety:false,
          setTeacher:false,
          setStudent:false,
        };
        for(let i=0;i<self.checkDataList.length;i++){
          if(self.checkDataList[i] == '2'){
            obj.setSubjectLead = true;
          }else if(self.checkDataList[i] == '1'){
            obj.setSubjectSafety = true;
          }else if(self.checkDataList[i] == '3'){
            obj.setTeacher = true;
          }else if(self.checkDataList[i] == '4'){
            obj.setStudent = true;
          }
        }
        obj.sysUserVoList = obj.setStudent?this.dialogTableList:[]
        if(obj.setStudent){
          if(!obj.sysUserVoList[0]){
            this.msgError('并未勾选任何学生')
            return
          }
        }
        checkSetAdd(obj).then(response => {
          this.msgSuccess(response.msg);
          this.$parent.configButton(3)
        })
      },
      //获取配置
      checkSet(){
        checkSet({staffType:this.configDialogData.staffType}).then(response => {
          let list = [];
          if(response.data.setSubjectLead){
            //实验室负责人
            list.push('2');
          }
          if(response.data.setSubjectSafety){
            //实验室安全责任人
            list.push('1');
          }
          if(response.data.setTeacher){
            //全部老师
            list.push('3');
          }
          if(response.data.setStudent){
            //全部学生
            list.push('4');
            this.$set(this,'checkType',true);
          }
          this.$set(this,'checkDataList',list);
          this.$set(this,'dialogTableList',response.data.userStuList);
        });
      },
      //人员选择
      configUserButton(type){
        let self = this;
        if(this.configPageType != type){
          if(type == 2){
            this.$set(self,'dialogTableDataList',JSON.parse(JSON.stringify(this.dialogTableList)));
            this.userResetQueryLeft();
            this.userResetQueryRight();
            this.$set(this,'configPageType',type);
          }else{
            checkStaffUserList.then(response => {
              this.dialogTableList = response.data;
            });
            this.$set(this,'configPageType',type);
          }
        }
      },
      //选择器
      checkboxChange(val){
        if(val[0]){
          let num = 0;
          for(let i=0;i<val.length;i++){
            if(val[i] == '4'){
              num++
            }
          }
          this.$set(this,'checkType',num != 0?true:false);
        }else{
          this.$set(this,'checkType',false);
        }
      },
      //窗口关闭
      addDialogAllOff(){
        this.$parent.configButton(2)
      },
      addDialogOff(){
        if(this.configPageType == 1){
          this.$parent.configButton(2)
        }else{
          this.$set(this,'configPageType',1);
        }
      },
      addUserButton(){
        this.$set(this,'dialogTableList',this.dialogTableDataList);
        this.$set(this,'configPageType',1);
      },
      /*===================================人员选择相关===================================*/
      //查询
      userHandleQueryLeft(){
        this.$set(this.userQueryParamsLeft,'pageNum',1);
        this.$set(this,'userNumLeft',0);
        this.$set(this,'userIdsLeft',[]);
        if (this.$refs.leftUserTable){
          this.$refs.leftUserTable.clearSelection();
        }
        this.userGetListLeft();
      },
      //重置
      userResetQueryLeft(){
        this.$set(this,'leftDateRange',[])
        this.$set(this,'userQueryParamsLeft',{
          pageNum:1,
          pageSize:20,
          searchValue:"",
          deptId:"",
          filtType:1
        });
        this.userHandleQueryLeft();
      },
      //查询接口
      userGetListLeft(){
        let self = this;
        let leftObj = JSON.parse(JSON.stringify(this.userQueryParamsLeft));
        leftObj.filtCheckUserIdList = [];
        for(let i=0;i<self.dialogTableDataList.length;i++){
          let obj = {
            userId:self.dialogTableDataList[i].userId,
            subjectId:self.dialogTableDataList[i].subId
          }
          leftObj.filtCheckUserIdList.push(obj)
        }
        if(this.leftDateRange[0]){
          leftObj.beginTime = this.leftDateRange[0]
        }else{
          leftObj.beginTime = ""
        }
        if(this.leftDateRange[1]){
          leftObj.endTime = this.leftDateRange[1]
        }else{
          leftObj.endTime = ""
        }
        checkStaffUserList(leftObj).then(response => {
          this.userTotalLeft = response.data.total;
          this.userTableListLeft = response.data.records;
        });
      },
      //查询
      userHandleQueryRight(){
        this.$set(this.userQueryParamsRight,'pageNum',1);
        this.$set(this,'userNumRight',0);
        this.$set(this,'userIdsRight',[]);
        if(this.$refs.rightUserTable){
          this.$refs.rightUserTable.clearSelection();
        }
        this.userGetListRight();
      },
      //重置
      userResetQueryRight(){
        this.$set(this,'rightDateRange',[])
        this.$set(this,'userQueryParamsRight',{
          pageNum:1,
          pageSize:20,
          deptId:"",
          searchValue:"",
          filtType:2
        });
        this.userHandleQueryRight();
      },
      //查询接口
      userGetListRight(){
        let self = this;
        let rightObj = JSON.parse(JSON.stringify(this.userQueryParamsRight));
        rightObj.notFiltCheckUserIdList = [];
        for(let i=0;i<self.dialogTableDataList.length;i++){
          let obj = {
            userId:self.dialogTableDataList[i].userId,
            subjectId:self.dialogTableDataList[i].subId
          }
          rightObj.notFiltCheckUserIdList.push(obj)
        }

        if(this.rightDateRange[0]){
          rightObj.beginTime = this.rightDateRange[0]
        }else{
          rightObj.beginTime = ""
        }
        if(this.rightDateRange[1]){
          rightObj.endTime = this.rightDateRange[1]
        }else{
          rightObj.endTime = ""
        }
        checkStaffUserList(rightObj).then(response => {
          this.userTotalRight = response.data.total;
          this.userTableListRight = response.data.records;
        });
      },
      //穿梭按钮
      userArrowButton(type){
        let self = this;
        if(type == 1){
          //右至左
          if(this.$refs.rightUserTable.selection[0]){
            let list = JSON.parse(JSON.stringify(this.dialogTableDataList));
            let userIdsRight = JSON.parse(JSON.stringify(this.$refs.rightUserTable.selection))
            for(let i=0;i<userIdsRight.length;i++){
              for(let s=0;s<list.length;s++){
                if(userIdsRight[i].userId == list[s].userId && userIdsRight[i].subjectId == list[s].subId){
                  list.splice(s,1);
                  s--
                }
              }
            }
            this.$set(this,'dialogTableDataList',list);
            this.$refs.rightUserTable.clearSelection();
            this.userHandleQueryLeft();
            this.userHandleQueryRight();
          }else{
            this.msgError('请先勾选右侧列表')
          }
        }else if(type == 2){
          //左至右
          if(this.$refs.leftUserTable.selection[0]){
            let list = JSON.parse(JSON.stringify(this.dialogTableDataList));
            let userIdsLeft = JSON.parse(JSON.stringify(this.$refs.leftUserTable.selection))
            console.log('userIdsLeft',userIdsLeft)
            for(let i=0;i<userIdsLeft.length;i++){
              let obj = {
                subId:userIdsLeft[i].subjectId,
                subName:userIdsLeft[i].subjectName,
                subRom:userIdsLeft[i].roomNum,
                deptId:userIdsLeft[i].deptId,
                deptName:userIdsLeft[i].deptName,
                userId:userIdsLeft[i].userId,
                nickName:userIdsLeft[i].userName,
                userNumber:userIdsLeft[i].userNumber,
                phonenumber:userIdsLeft[i].phonenumber,
                validBeginTime:userIdsLeft[i].validBeginTime,
                validEndTime:userIdsLeft[i].validEndTime,
              }
              list.push(obj);
            }
            this.$set(this,'dialogTableDataList',list);
            this.$refs.leftUserTable.clearSelection();
            this.userHandleQueryLeft();
            this.userHandleQueryRight();
          }else{
            this.msgError('请先勾选左侧列表')
          }
        }
      },
      /*===记录勾选数据===
        需要再el-table 添加  :row-key="getRowKeys"
        需要在selection 添加 :reserve-selection="true"
      */
      getRowKeys(row) {
        return row.id
      },
      userChangeLeft(selection){
        this.userNumLeft = selection.length;
        this.userIdsLeft = selection.map(item => item.userId);
      },
      userChangeRight(selection){
        this.userNumRight = selection.length;
        this.userIdsRight = selection.map(item => item.userId);
      },
      //获取学院列表
      listDepartments(){
        listDepartments().then(response => {
          this.deptSelectList = response.data;
        });
      },
    }
  }
</script>

<style scoped lang="scss">
  .configDialog{
    overflow: hidden;
    .configDialog-box{
      height:600px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .configDialog-content-box{
        flex:1;
        padding:0 70px;
        .configDialog-content-min-box{
          height:160px;
          border-radius:4px;
          border: 1px solid #F5F5F5;
          padding:0 30px;
          position: relative;
          .configDialog-content-min-title{
            margin-top:19px;
            margin-bottom:32px;
            line-height:20px;
            font-size:14px;
            color:#333;
          }
          .configDialog-content-min-checkbox{

          }
          .configDialog-content-min-button{
            position: absolute;
            top:65px;
            right:205px;
            background-color: #0045AF;
            width:70px;
            height:30px;
            line-height:30px;
            text-align: center;
            color:#fff;
            border-radius:4px;
            cursor: pointer;
          }
          .configDialog-content-min-text-box{
            display: flex;
            margin-top:15px;
            p{
              width:240px;
              color:#999999;
            }
          }
        }
      }
      .dialog-footer-box{
        display: flex;
      }
    }
    .configDialog-user-box{
      height:600px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .configDialog-user-content-box{
        flex:1;
        display: flex;
        overflow: hidden;
        .dept-table-title-box{
          display: flex;
          padding:0 20px;
          background: rgba(1,131,250,0.1);
          p{
            flex:1;
            color:#0183FA;
            font-size:16px;
            line-height:40px;
          }
          p:nth-child(1){
            text-align: left;
          }
          p:nth-child(2){
            text-align: right;
          }
        }
        .dept-table-max-box{
          border: 1px solid #e0e0e0;
          flex:1;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          padding:20px;
          .form-index{
            .el-input__inner{
              border-right:none;
              padding-right:0;
            }
            .el-input-group__append{
              background: #fff;
              cursor: pointer;
              padding:0 10px;
            }
          }
          input{
            border: 1px solid #DCDFE6;
          }
        }
        .left-max-box{
          height:550px;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          width:639px;
        }
        .right-max-box{
          height:550px;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          width:639px;
        }
        .center-box{
          width:60px;
          p{
            display: block;
            border-radius:50%;
            width:30px;
            height:30px;
            line-height:30px;
            text-align: center;
            background: rgba(245,245,245,1);
            color:rgba(62,62,62,1);
            cursor: pointer;
            font-size:16px;
          }
          p:nth-child(1){
            margin:270px 16px 0;
          }
          p:nth-child(2){
            margin:14px 16px 0;
          }
          p:hover{
            color:#fff;
            background: #0183fa;
          }
        }
        ::v-deep .el-range-editor--small .el-range__icon{
          display: none;
        }
        ::v-deep .el-range-editor--small .el-range__close-icon{
          display: none;
        }
        ::v-deep .el-date-editor .el-range-input{
          width:45%;
        }
        ::v-deep .el-range-editor--small .el-range-separator{
          line-height:30px;
        }
        ::v-deep .el-input-group__append, .el-input-group__prepend{
          background-color: #fff;
        }
        .form-index{
          ::v-deep .el-input--medium .el-input__inner{
            border:1px solid #DCDFE6;
            border-right:none;
            padding-right:0;
          }
          ::v-deep .el-input-group__append{
            padding:0 10px;
            cursor: pointer;
          }
        }
      }
      .dialog-footer-box{
        display: flex;
      }
    }
    ::v-deep .el-dialog__body{
      padding: 30px 20px!important;
    }
  }
</style>