v3-lab-web/src/views/safetyEducationExam/trainingCourse/addDialog.vue

<template>
  <!--添加/编辑弹窗-->
  <el-dialog append-to-body class="trainingCourseAddDialog" :title='dialogTitle' @close="dialogClose"
             :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false"
             :visible.sync="dialogType" v-if="dialogType" width="1373px">
    <!--提交界面-->
    <el-form class="add-dialog-form-box" ref="dialogForm" v-show="!dialogUserType" :model="dialogForm" :rules="rules" label-width="120px">
      <el-form-item label="课程名称：" prop="courseName">
        <el-input v-model="dialogForm.courseName" placeholder="请输入课程名称"
                  maxLength="30" style="width:800px;"/>
      </el-form-item>
      <div class="dialogFormFlex">
        <el-form-item label="主讲老师：" prop="lecturerId">
          <el-select
            @change="lecturerIdChange"
            style="width:300px;"
            v-model="dialogForm.lecturerId"
            filterable
            remote
            reserve-keyword
            placeholder="请输入姓名"
            :remote-method="getMainTeacher"
            :loading="loading">
            <el-option
              v-for="item in mainTeacherOptions"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="辅导老师：" prop="tutorId" label-width="200px">
          <el-select
            style="width:300px;"
            v-model="dialogForm.tutorId"
            multiple
            filterable
            remote
            reserve-keyword
            collapse-tags
            :multiple-limit="3"
            placeholder="请输入姓名"
            :remote-method="getSecondaryTeacher"
            :loading="loading">
            <el-option
              v-for="item in secondaryTeacherOptions"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上课人员：" prop="userIds" label-width="200px">
          <p style="line-height:40px;color:#0183FA;cursor: pointer;width:300px;" @click="addUserButton">
            已选择 ({{dialogForm.userIds?dialogForm.userIds.length:0}}人)
          </p>
        </el-form-item>
      </div>
      <div class="dialogFormFlex">
        <el-form-item label="上课场所：" prop="placeId">
          <el-select v-model="dialogForm.placeId"
                     @change="deptChange"
                     style="width:300px;" placeholder="请选择学院">
            <el-option
              v-for="item in deptOptions"
              :key="item.deptId"
              :label="item.deptName"
              :value="item.deptId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="dialogForm.selectType==1?'实验室：':'上课场所：'" prop="subId" label-width="200px">
          <el-select
            style="width:300px;"
            @change="subChange"
            v-if="dialogForm.selectType == 1"
            v-model="dialogForm.subId"
            filterable
            remote
            reserve-keyword
            placeholder="请选择实验室"
            :remote-method="getSubList"
            :loading="loading">
            <el-option
              v-for="item in subOptions"
              :key="item.subId"
              :label="item.subName"
              :value="item.subId">
            </el-option>
          </el-select>
          <el-input v-model="dialogForm.position" v-if="dialogForm.selectType == 2"
                    placeholder="请输入上课场所" maxLength="20" style="width:300px;"/>
        </el-form-item>
        <p class="page-add-common-style-button"
           style="margin-left:20px;width:140px;border-radius:4px;" @click="subTypeClick">
          {{dialogForm.selectType==1?'手动输入上课场所':(dialogForm.selectType==2?'选择学校':'')}}
        </p>
      </div>
      <div class="dialogFormFlex">
        <el-form-item label="上课时间：" prop="courseTime">
          <el-time-picker
            class="trainingCourse-el-time-picker"
            :popper-append-to-body="true"
            is-range
            style="width:300px;"
            format="HH:mm"
            value-format="HH:mm"
            v-model="dialogForm.courseTime"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="上课日期：" prop="courseDate" label-width="200px"  v-if="!dialogForm.id">
          <el-date-picker
            style="width:300px;"
            value-format="yyyy-MM-dd"
            v-model="dialogForm.courseDate"
            type="daterange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="上课日期：" prop="courseDate" label-width="200px"  v-if="dialogForm.id">
          <el-date-picker
            style="width:300px;"
            value-format="yyyy-MM-dd"
            v-model="dialogForm.courseDate"
            type="date"
            :picker-options="pickerOptions"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </div>
      <el-form-item label="课程内容：" prop="content">
        <el-input type="textarea" v-model="dialogForm.content" resize="none" show-word-limit
                  :autosize="{ minRows: 10, maxRows: 10}" maxLength="100" placeholder="请输入处理描述"
                  style="width:1122px;"/>
      </el-form-item>
    </el-form>
    <!--人员选择界面-->
    <div class="inspectionPlan-dialog-user-box" v-show="dialogUserType">
      <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 deptOptions"
                  :key="item.deptId"
                  :label="item.deptName"
                  :value="item.deptId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="keyword" class="form-index">
              <el-input
                maxLength="20"
                v-model="userQueryParamsLeft.keyword"
                placeholder="搜索姓名/工号"
                clearable
                @clear="userHandleQueryLeft"
                style="width: 240px">
                <p class="el-icon-search" slot="append" @click="userHandleQueryLeft"></p>
              </el-input>
            </el-form-item>
            <el-form-item style="margin-right:0;">
              <p class="page-reset-common-style-button" @click="userResetQueryLeft" style="width:60px;">重置</p>
            </el-form-item>
          </el-form>
          <el-table ref="leftUserTable" border :data="userTableListLeft" @selection-change="userChangeLeft" :row-key="getRowKeys">
            <el-table-column 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="account" show-overflow-tooltip width="150"/>
            <el-table-column label="所在部门" align="center" prop="deptName" show-overflow-tooltip width="168"/>
          </el-table>
          <pagination layout="total, prev, pager, next, jumper"
                      v-show="userTotalLeft>0"
                      :total="userTotalLeft"
                      :pager-count="5"
                      :page.sync="userQueryParamsLeft.page"
                      :limit.sync="userQueryParamsLeft.pageSize"
                      @pagination="userGetListLeft"/>
        </div>
      </div>
      <div class="center-box">
        <p class="el-icon-arrow-left" @click="userArrowButton(1)"></p>
        <p 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 deptOptions"
                  :key="item.deptId"
                  :label="item.deptName"
                  :value="item.deptId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="keyword" class="form-index">
              <el-input
                maxLength="20"
                v-model="userQueryParamsRight.keyword"
                placeholder="搜索姓名/工号"
                clearable
                @clear="userHandleQueryRight"
                style="width: 240px">
                <p class="el-icon-search" slot="append" @click="userHandleQueryRight"></p>
              </el-input>
            </el-form-item>
            <el-form-item style="margin-right:0;">
              <p class="page-reset-common-style-button" @click="userResetQueryRight" style="width:60px;">重置</p>
            </el-form-item>
          </el-form>
          <el-table ref="rightUserTable" border :data="userTableListRight" @selection-change="userChangeRight" :row-key="getRowKeys">
            <el-table-column 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="account" show-overflow-tooltip width="150"/>
            <el-table-column label="所在部门" align="center" prop="deptName" show-overflow-tooltip width="168"/>
          </el-table>
          <pagination layout="total, prev, pager, next, jumper"
                      v-show="userTotalRight>0"
                      :total="userTotalRight"
                      :pager-count="5"
                      :page.sync="userQueryParamsRight.page"
                      :limit.sync="userQueryParamsRight.pageSize"
                      @pagination="userGetListRight"/>
        </div>
      </div>
    </div>
    <!--公共操作按钮-->
    <div slot="footer" class="dialog-footer dialog-footer-box">
      <p class="dialog-footer-button-null"></p >
      <p class="dialog-footer-button-info" @click="dialogClose">取消</p >
      <p class="dialog-footer-button-primary" @click="dialogSubmit">确定</p >
      <p class="dialog-footer-button-null"></p >
    </div>
  </el-dialog>
</template>

<script>
import {
  findUserList,
  selectUser,
  systemSubjectGetlist,
  securitycourseEdit,
  examSecuritycourseAdd
} from "@/api/safetyEducationExam/index";
  import {getDeptDropList,} from "@/api/commonality/permission";
  export default {
    name: 'trainingCourseAddDialog',
    props:{
      addDialogData:{},
    },
    data(){
      const timeRules = (rule, value, callback) => {
        if(value[0] == value[1]){
          callback(new Error("开始与结束时间不能相同"));
        }else{
          callback();
        }
      };
      return{
        // 设置只能选择当前日期及之后的日期
        pickerOptions: {
          disabledDate(time) {
            const times = new Date(new Date().toLocaleDateString()).getTime() + 30 * 8.64e7 - 1
            return time.getTime() < Date.now() - 8.64e7 || time.getTime() > times  // 如果没有后面的-8.64e7就是不可以选择今天的
          }
        },
        // 遮罩层
        loading: false,
        //弹窗数据
        dialogType:true,
        dialogUserType:false,
        dialogTitle:"",
        dialogForm:{
          courseName:"",
          lecturerId:"",
          lecturerName:"",
          tutorId:"",
          userIds:[],
          placeId:"",
          place:"",
          subId:"",
          position:"",
          selectType:1,
          content:"",
          courseTime:["00:00","00:00"],
          courseDate:[],
        },
        //验证
        rules: {
          phone: [
            { required: true, message: "请输入联系方式", trigger: "blur" },
            { required: true, message: "请输入联系方式", validator: this.spaceJudgment, trigger: "blur" },
            { pattern:/^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(16[0-9])|(17[0,3,5-8])|(18[0-9])|(147))+\d{8}$/, message: "请输入正确的联系方式", trigger: "blur" }
          ],
          courseName: [
            { required: true, message: "请输入课程名称", trigger: "blur" },
            { required: true, message: "请输入课程名称", validator: this.spaceJudgment, trigger: "blur" }
          ],
          lecturerId: [
            { required: true, message: "请选择主讲老师", trigger: "blur" },
          ],
          tutorId: [
            { required: true, message: "请选择辅导老师", trigger: "blur" },
          ],
          userIds: [
            { required: true, message: "请选择上课人员", trigger: "blur" },
          ],
          placeId: [
            { required: true, message: "请选择上课场所", trigger: "blur" },
          ],
          courseTime: [
            { required: true, message: "请选择上课时间", trigger: "blur" },
            { required: true, message: "开始与结束时间不能相同", validator: timeRules, trigger: "blur" },
          ],
          courseDate: [
            { required: true, message: "请选择上课日期", trigger: "blur" },
          ],
        },
        //主要老师
        mainTeacherOptions:[],
        //辅助老师
        secondaryTeacherOptions:[],
        secondaryTeacherOptionsArr:[],

        //院系列表
        deptOptions:[],
        //实验室列表
        subOptions:[],
        /**********人员选择数据**********/
        userQueryParamsLeft:{
          page: 1,
          pageSize: 20,
          userType:2,
          deptId:null,
          keyword:null,
          filtType:1
        },
        userTableListLeft:[],
        userTotalLeft:0,
        userNumLeft:0,
        userIdsLeft:[],
        userQueryParamsRight:{
          page: 1,
          pageSize: 20,
          userType:2,
          deptId:null,
          keyword:null,
          filtType:2
        },
        userTableListRight:[],
        userTotalRight:0,
        userNumRight:0,
        userIdsRight:[],
        //选择人员交互数据
        dialogTableDataList:[],
      }
    },
    created(){

    },
    mounted(){
      this.initialize();
    },
    methods:{
      //初始化
      initialize(){
        let self = this;
        this.$set(this,'dialogTitle',this.addDialogData.id?'编辑':'添加');
        if(this.addDialogData.id){
          //编辑数据
          let obj = {
            id:this.addDialogData.id,
            courseName:this.addDialogData.courseName,
            lecturerId:this.addDialogData.lecturerId,
            lecturerName:this.addDialogData.lecturerName,
            tutorId:'',
            tutorName:'',
            placeId:this.addDialogData.placeId,
            place:this.addDialogData.place,
            content:this.addDialogData.content,
            courseTime:[this.addDialogData.coStartTime,this.addDialogData.coEndTime],
            courseDate:this.addDialogData.coStartDate,
            userIds:[],
          };
          //处理主要老师列表
          let mainTeacherList = [{userId:this.addDialogData.lecturerId,userName:this.addDialogData.lecturerName}];
          this.$set(this,'mainTeacherOptions',mainTeacherList);
          //处理辅助老师列表
          if(this.addDialogData.tutorName){
            let list=this.addDialogData.tutorName.split(',');
            let tutorIdList=[];
            let tutorNameList=[];
            let secondaryTeacherList = [];
            list.forEach(function(item){
              tutorIdList.push(item.split('@')[0])
              tutorNameList.push(item.split('@')[1])
              secondaryTeacherList.push({userId:item.split('@')[0],userName:item.split('@')[1]})
            })
            obj.tutorId = JSON.parse(JSON.stringify(tutorIdList));
            obj.tutorName = JSON.parse(JSON.stringify(tutorNameList));
            this.$set(this,'secondaryTeacherOptions',secondaryTeacherList);
          }
          //处理实验室数据&手动输入场地
          if(this.addDialogData.subId && this.addDialogData.subId!=-1){
            obj.subId = this.addDialogData.subId;
            obj.position = "";
            obj.selectType = 1;
            //处理实验室列表
            let subList = [{name:this.addDialogData.subName,id:this.addDialogData.subId}]
            this.$set(this,'subOptions',subList);
          }else{
            if(this.addDialogData.position){
              obj.subId = "";
              obj.position = this.addDialogData.position;
              obj.selectType = 2;
            }else{
              obj.subId = "";
              obj.position = "";
              obj.selectType = 1;
            }
          }
          //处理学生数据
          for(let i=0;i<self.addDialogData.userIds.length;i++){
            obj.userIds.push({userId:self.addDialogData.userIds[i]})
          }
          //根据当前选择院系获取实验室列表
          this.getSubList('',this.addDialogData.placeId)
          this.$set(this,'dialogForm',obj);
        }
        this.getDeptList();
      },
      //提交按钮
      dialogSubmit(){
        let self = this;
        if(this.dialogUserType){
          //选择人员页面
          if(!this.dialogTableDataList[0]){
            this.msgError('请选择人员')
            return
          }
          let userList = JSON.parse(JSON.stringify(this.dialogTableDataList))
          this.$set(this.dialogForm,'userIds',userList)
          this.$set(this,'dialogUserType',false)
        }else{
          //提交页面
          this.$refs["dialogForm"].validate(valid => {
            if (valid) {
              if(this.dialogForm.id){
                //编辑
                let obj = {
                  id:this.dialogForm.id,
                  courseName:this.dialogForm.courseName,
                  lecturerId:this.dialogForm.lecturerId,
                  lecturerName:this.dialogForm.lecturerName,
                  tutorIds:this.dialogForm.tutorId+'',
                  userList:[],
                  placeId:this.dialogForm.placeId,
                  place:this.dialogForm.place,
                  position:"",
                  coStartTime:this.dialogForm.courseTime[0],
                  coEndTime:this.dialogForm.courseTime[1],
                  courseDate:[this.dialogForm.courseDate,this.dialogForm.courseDate],
                  content:this.dialogForm.content,
                  peopleCount:this.dialogForm.userIds.length,
                }
                if(this.dialogForm.selectType == 1){
                  obj.subId = this.dialogForm.subId;
                  obj.subName=this.dialogForm.subName;
                  obj.subRoom=this.dialogForm.subRoom;
                }else{
                  obj.position = this.dialogForm.position;
                }
                //处理学生数据
                for(let i=0;i<self.dialogForm.userIds.length;i++){
                  if(self.dialogForm.userIds[i].jobNum){
                    obj.userList.push({'userId':self.dialogForm.userIds[i].userId,'userName':self.dialogForm.userIds[i].jobNum,'userImg':self.dialogForm.userIds[i].avatar,})
                  }else{
                    for(let t=0;t<self.addDialogData.userList.length;t++){
                      if(self.dialogForm.userIds[i].userId==self.addDialogData.userList[t].userId){
                        obj.userList.push(self.addDialogData.userList[t])
                      }
                    }
                  }
                }
                securitycourseEdit(obj).then(response => {
                  this.msgSuccess(response.msg)
                  this.$parent.controlsButton(6)
                });
              }else{
                //提交
                let obj = {
                  courseName:this.dialogForm.courseName,
                  lecturerId:this.dialogForm.lecturerId,
                  lecturerName:this.dialogForm.lecturerName,
                  tutorIds:this.dialogForm.tutorId+'',
                  userList:[],
                  placeId:this.dialogForm.placeId,
                  place:this.dialogForm.place,
                  position:"",
                  coStartTime:this.dialogForm.courseTime[0],
                  coEndTime:this.dialogForm.courseTime[1],
                  courseDate:this.dialogForm.courseDate,
                  content:this.dialogForm.content,
                  peopleCount:this.dialogForm.userIds.length,

                }
                if(this.dialogForm.selectType == 1){
                  obj.subId = this.dialogForm.subId;
                  obj.subName=this.dialogForm.subName;
                  obj.subRoom=this.dialogForm.subRoom;
                }else{
                  obj.position = this.dialogForm.position;
                }
                for(let i=0;i<self.dialogForm.userIds.length;i++){
                  obj.userList.push({'userId':self.dialogForm.userIds[i].userId,'userName':self.dialogForm.userIds[i].jobNum,'userImg':self.dialogForm.userIds[i].avatar,})
                }
                //根据id获取辅导老师姓名
                // let tutorNamelist=[]
                // for(let i=0;i<this.dialogForm.tutorId.length;i++){
                //   for(let t=0;t<this.secondaryTeacherOptionsArr.length;t++){
                //       if(this.dialogForm.tutorId[i]==this.secondaryTeacherOptionsArr[t].userId){
                //         tutorNamelist.push(this.secondaryTeacherOptionsArr[t].userName)
                //       }
                //   }
                // }
                // obj.tutorName=tutorNamelist+'';
                examSecuritycourseAdd(obj).then(response => {
                  this.msgSuccess(response.msg)
                  this.$parent.controlsButton(6)
                });
              }

            }
          })
        }
      },
      //取消按钮
      dialogClose(){
        if(this.dialogUserType){
          //选择人员页面
          this.$set(this,'dialogTitle',this.addDialogData.id?'编辑':'添加');
          this.$set(this,'dialogUserType',false);
        }else{
          //提交页面
          this.$parent.controlsButton(5)
        }
      },
      //主要老师选中
      lecturerIdChange(val){
        let self = this;
        for(let i=0;i<self.mainTeacherOptions.length;i++){
          if(self.mainTeacherOptions[i].userId == val){
            this.$set(this.dialogForm,'lecturerName',self.mainTeacherOptions[i].userName);
          }
        }
      },
      //主要老师搜索
      getMainTeacher(query){
        if(query.length > 1){
          this.loading = true;
          selectUser({userType:1,userName:query}).then(response => {
            this.$set(this,'mainTeacherOptions',response.data)
            this.loading = false;
          });
        }
      },
      //辅助老师搜错
      getSecondaryTeacher(query){
        if(query.length > 1){
          this.loading = true;
          selectUser({userType:1,userName:query}).then(response => {
            this.$set(this,'secondaryTeacherOptions',response.data)
            this.secondaryTeacherOptionsArr=this.secondaryTeacherOptionsArr.concat(response.data)
            this.loading = false;
          });
        }
      },
      //选择院系
      deptChange(val){
        let self = this;
        for(let i=0;i<self.deptOptions.length;i++){
          if(self.deptOptions[i].deptId == val){
            this.$set(this.dialogForm,'place',self.deptOptions[i].deptName);
          }
        }
        this.$set(this.dialogForm,'subId','');
        this.getSubList('')
      },
      //选择实验室
      subChange(val){
        let self = this;
        for(let i=0;i<self.subOptions.length;i++){
          if(self.subOptions[i].subId == val){
            this.$set(this.dialogForm,'subName',self.subOptions[i].subName);
            this.$set(this.dialogForm,'subRoom',self.subOptions[i].room);
          }
        }
      },
      //获取院系列表
      getDeptList(){
        getDeptDropList({deptType:1}).then(response => {
          this.$set(this,'deptOptions',response.data);
        });
      },
      //获取实验室列表
      getSubList(val,deptId){
        if(val == '' && deptId){
          systemSubjectGetlist({deptId:deptId,name:val}).then(response => {
            this.$set(this,'subOptions',response.data);
          });
        }else if(this.dialogForm.placeId && (val == '' || val.length > 1)){
          systemSubjectGetlist({deptId:this.dialogForm.placeId,name:val}).then(response => {
            this.$set(this,'subOptions',response.data);
          });
        }
      },
      //实验室切换
      subTypeClick(){
        this.$set(this.dialogForm,'subId','');
        this.$set(this.dialogForm,'selectType',this.dialogForm.selectType==1?2:1);
      },
      //开启人员选择
      addUserButton(){
        let userList = JSON.parse(JSON.stringify(this.dialogForm.userIds))
        this.$set(this,'dialogTableDataList',userList)
        this.$set(this,'dialogTitle','选择人员');
        this.$set(this,'dialogUserType',true);
        this.userHandleQueryLeft();
        this.userHandleQueryRight();
      },
      /*===================================人员选择相关===================================*/
      //查询
      userHandleQueryLeft(){
        this.$set(this.userQueryParamsLeft,'page',1);
        this.$set(this,'userNumLeft',0);
        this.$set(this,'userIdsLeft',[]);
        this.$refs.leftUserTable.clearSelection();
        this.userGetListLeft();
      },
      //重置
      userResetQueryLeft(){
        this.$set(this,'userQueryParamsLeft',{
          page: 1,
          pageSize: 20,
          deptId:"",
          keyword:"",
          userType:2,
          filtType:1
        });
        this.userHandleQueryLeft();
      },
      //查询接口
      userGetListLeft(){
        let self = this;
        let leftObj = JSON.parse(JSON.stringify(this.userQueryParamsLeft));
        leftObj.selectedUserIds = [];
        for(let i=0;i<self.dialogTableDataList.length;i++){
          leftObj.selectedUserIds.push(self.dialogTableDataList[i].userId);
        }
        findUserList(leftObj).then(response => {
          this.userTotalLeft = response.data.total;
          this.userTableListLeft = response.data.records;
        });
      },
      //查询
      userHandleQueryRight(){
        this.$set(this.userQueryParamsRight,'page',1);
        this.$set(this,'userNumRight',0);
        this.$set(this,'userIdsRight',[]);
        this.$refs.rightUserTable.clearSelection();
        this.userGetListRight();
      },
      //重置
      userResetQueryRight(){
        this.$set(this,'userQueryParamsRight',{
          page: 1,
          pageSize: 20,
          deptId:"",
          keyword:"",
          userType:2,
          filtType:2
        });
        this.userHandleQueryRight();
      },
      //查询接口
      userGetListRight(){
        let self = this;
        let rightObj = JSON.parse(JSON.stringify(this.userQueryParamsRight));
        rightObj.userIds = [];
        for(let i=0;i<self.dialogTableDataList.length;i++){
          rightObj.userIds.push(self.dialogTableDataList[i].userId);
        }
        findUserList(rightObj).then(response => {
          this.userTotalRight = response.data.total;
          this.userTableListRight = response.data.records;
        });
      },
      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);
      },
      //人员穿梭按钮
      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){
                  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.userIdsLeft[0]){
            let list = JSON.parse(JSON.stringify(this.dialogTableDataList));
            let userIdsLeft = JSON.parse(JSON.stringify(this.$refs.leftUserTable.selection))
            for(let i=0;i<userIdsLeft.length;i++){
              let obj = {
                userId:userIdsLeft[i].userId,
                name:userIdsLeft[i].nickName,
                jobNum:userIdsLeft[i].userName,
                deptName:userIdsLeft[i].deptName,
                deptId:userIdsLeft[i].deptId,
                userType:userIdsLeft[i].userType,
                avatar:userIdsLeft[i].avatar,
              }
              list.push(obj);
            }
            if(list.length>50){
              this.msgError('巡查成员最多50人')
              return
            }
            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.userId
      },
    },
  }
</script>

<style scoped lang="scss">
  .trainingCourseAddDialog{
    .add-dialog-form-box{
      height: 610px;
    }
    .dialogFormFlex{
      display:flex;
    }
    .inspectionPlan-dialog-user-box{
      display: flex;
      overflow: hidden;
      height:610px;
      .el-table__empty-text{
        background-size: 30%!important;
      }
      .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:610px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        width:632px;
      }
      .right-max-box{
        height:610px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        width:632px;
      }
      .center-box{
        width:68px;
        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 19px 0;
        }
        p:nth-child(2){
          margin:14px 19px 0;
        }
        p:hover{
          color:#fff;
          background: #0183fa;
        }
      }
      .el-icon-search{
        cursor: pointer;
      }
      ::v-deep .el-input-group__append{
        padding:0;
        p{
          text-align: center;
          line-height: 34px;
          width:50px;
          height:34px;
          font-size:16px;
        }
      }
    }
    .dialog-footer{
      display: flex;
      .dialog-footer-null-p{
        flex:1;
      }
    }
  }
</style>