FE-V2-PC/src/views/safetyCheck/schoolInspection/inspectionGroup/addDialog.vue

<template>
  <el-dialog class="inspectionGroup-dialog-box"
             :close-on-click-modal="false"
             :title="addDialogTitle" :visible.sync="addDialogType" v-if="addDialogType"
             @close="addDialogAllOff" width="1303px" append-to-body>
    <div class="add-max-box" v-if="addDialogBoxType == 1">
      <el-form ref="addDialogForm" :model="dialogForm" :rules="rules" label-width="100px" class="add-form-box">
        <el-form-item label="是否启用:" prop="enable">
          <el-switch
            v-if="!lookInfoType"
            @click.native="changeIsNeedCaptcha(dialogForm.enable)"
            class="switch captcha-img"
            :active-value="1"
            :inactive-value="0"
            active-color="#0183FA"
            inactive-color="#999"
            v-model="dialogForm.enable"
            active-text="启用"
            inactive-text="停用"
          ></el-switch>
          <p v-if="lookInfoType" :class="dialogForm.enable==1?'switchFontColor':''" style="line-height:40px;">{{dialogForm.enable==1?'启用':'停用'}}</p>
        </el-form-item>
        <el-form-item label="巡查组名称:" prop="groupName">
          <el-input :disabled="lookInfoType" v-model="dialogForm.groupName" placeholder="请输入巡查组名称" maxLength="20" style="width:450px;"/>
        </el-form-item>
        <el-form-item label="巡查层级:" prop="checkLevel">
          <el-select :disabled="lookInfoType" v-model="dialogForm.checkLevel" placeholder="请选择巡查层级" style="width:450px;">
            <el-option
              v-for="item in dialogRangeOptions"
              :key="item.key"
              :label="item.label"
              :value="item.key">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="dialog-table-box">
        <div class="dialog-table-title-box">
          <img src="@/assets/ZDimages/safetyCheck/icon_xyxc_cy.png">
          <p class="dialog-table-title-p">巡查成员</p>
          <p v-if="!lookInfoType" class="inquire-button-one dialog-table-title-button" @click="dialogClickType(2)">+ 添加</p>
          <p v-if="lookInfoType" class="dialog-table-title-text">{{dialogTableList[0]?dialogTableList.length+'人':'0人'}}</p>
        </div>
        <el-table border :data="dialogTableList">
          <el-table-column label="序号" align="center"  type="index" width="140"/>
          <el-table-column label="姓名" align="center" prop="name" show-overflow-tooltip/>
          <el-table-column label="工号" align="center" prop="jobNum" show-overflow-tooltip/>
          <el-table-column label="所在部门" align="center" prop="deptName" show-overflow-tooltip/>
          <el-table-column label="是否启用" align="center" prop="enable" width="150">
            <template slot-scope="scope">
              <el-switch
                v-if="!lookInfoType"
                @click.native="changeIsNeedCaptcha(scope.row.deptName)"
                class="switch captcha-img"
                :active-value="1"
                :inactive-value="0"
                active-color="#0183FA"
                inactive-color="#999"
                v-model="scope.row.enable"
                active-text="启用"
                inactive-text="停用"
              ></el-switch>
              <p v-if="lookInfoType" :class="scope.row.enable==1?'switchFontColor':''">{{scope.row.enable==1?'启用':'停用'}}</p>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" prop="deptName" width="150" v-if="!lookInfoType">
            <template slot-scope="scope">
              <div class="table-button-box">
                <p class="table-button-null"></p>
                <p class="table-button-p" @click="delTable(scope.row)">删除</p>
                <p class="table-button-null"></p>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="inspectionPlan-dialog-user-box" v-show="addDialogBoxType == 2">
      <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 label="" prop="searchValue" class="form-index">
            <el-input
              maxLength="20"
              v-model="userQueryParamsLeft.searchValue"
              placeholder="搜索姓名/工号"
              clearable
              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="reset-button-one" @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="nickName" show-overflow-tooltip/>
          <el-table-column label="工号" align="center" prop="userName" 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.pageNum"
                    :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 deptSelectList"
                  :key="item.deptId"
                  :label="item.deptName"
                  :value="item.deptId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="searchValue" class="form-index">
              <el-input
                maxLength="20"
                v-model="userQueryParamsRight.searchValue"
                placeholder="搜索姓名/工号"
                clearable
                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="reset-button-one" @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="nickName" show-overflow-tooltip/>
            <el-table-column label="工号" align="center" prop="userName" 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.pageNum"
                      :limit.sync="userQueryParamsRight.pageSize"
                      @pagination="userGetListRight"/>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer dialog-footer-box" style="display: flex">
      <p class="dialog-footer-button-null"></p>
      <p class="dialog-footer-button-info" @click="addDialogOff">{{addDialogBoxType==1?'取消':'返回'}}</p>
      <p class="dialog-footer-button-primary" v-if="!lookInfoType" @click="addUserButton">确定</p>
      <p class="dialog-footer-button-null"></p>
    </div>

  </el-dialog>
</template>

<script>
  import { listDepartments } from "@/api/system/dept";
  import { checkGroupFind,findUserList,checkGroupAdd,checkGroupUpdate } from '@/api/safetyCheck/index'
  export default {
    name: 'addDialog',
    props:{
      addDialogData:{},
    },
    data(){
      return{
        addDialogTitle:"",
        addDialogType:true,
        addDialogBoxType:1,
        lookInfoType:false,
        dialogForm:{
          enable:1,
          groupName:"",
          checkLevel:"",
        },
        //层级
        dialogRangeOptions:[{key:1,label:"校级"},{key:2,label:"院级"}],
        //院系
        deptSelectList:[],
        //选中巡查人员列表
        dialogTableList:[],
        //选中页面人员列表数据
        dialogTableDataList:[],
        //弹窗内容状态
        userQueryParamsLeft:{
          pageNum: 1,
          pageSize: 20,
          deptId:"",
          searchValue:"",
          filtType:1
        },
        userTableListLeft:[],
        userTotalLeft:0,
        userNumLeft:0,
        userIdsLeft:[],
        userQueryParamsRight:{
          pageNum: 1,
          pageSize: 20,
          deptId:"",
          searchValue:"",
          filtType:2
        },
        userTableListRight:[],
        userTotalRight:0,
        userNumRight:0,
        userIdsRight:[],
        // 表单校验
        rules: {
          enable: [
            { required: true, message: "请选择是否启用", trigger: "change" },
          ],
          groupName: [
            { required: true, message: "请输入巡查组名称", trigger: "change" },
            { required: true, message: "请输入巡查组名称", validator: this.spaceJudgment, trigger: "change" },
          ],
          checkLevel: [
            { required: true, message: "请选择巡查层级", trigger: "change" },
          ],
        },
      }
    },
    created(){
      this.$set(this,'addDialogTitle',this.addDialogData.title);
      this.$set(this,'lookInfoType',this.addDialogData.lookInfoType);
      if(this.addDialogData.addType){
        //新增
      }else{
        //详情-编辑
        this.checkGroupFind();
      }
    },
    mounted(){
      this.listDepartments();
    },
    methods:{
      //获取详情
      checkGroupFind(){
        checkGroupFind({id:this.addDialogData.id,selectEnable:0}).then(response => {
          this.$set(this.dialogForm,'id',response.data.id?response.data.id:'');
          this.$set(this.dialogForm,'enable',response.data.enable);
          this.$set(this.dialogForm,'groupName',response.data.groupName);
          this.$set(this.dialogForm,'checkLevel',response.data.checkLevel);
          this.$set(this,'dialogTableList',response.data.checkGroupMemberList);
        });
      },
      //弹窗关闭
      addDialogAllOff(){
        this.$parent.addDialogOpen(4)
      },
      addDialogOff(){
        if(this.addDialogBoxType == 1){
          this.$parent.addDialogOpen(4)
        }else{
          this.dialogClickType(1);
        }
      },
      //添加人员
      addUserButton(){
        let self = this;
        if(this.addDialogBoxType == 1){
          this.$refs["addDialogForm"].validate(valid => {
            if (valid) {
              if(!this.dialogTableList[0]){
                this.msgError('请添加至少一名巡查成员')
                return
              }
              if(this.dialogForm.id){
                //编辑
                let obj = this.dialogForm;
                obj.checkGroupMemberList = this.dialogTableList
                checkGroupUpdate(obj).then(response => {
                  this.msgSuccess(response.msg);
                  this.$parent.addDialogOpen(5)
                })
              }else{
                //新增
                let obj = this.dialogForm;
                obj.checkGroupMemberList = this.dialogTableList
                checkGroupAdd(obj).then(response => {
                  this.msgSuccess(response.msg);
                  this.$parent.addDialogOpen(5)
                })
              }
            }
          })
        }else{
          let list = [];
          let newObj = {};
          for(let o=0;o<self.dialogTableDataList.length;o++){
            let num = 0;
            for(let i=0;i<self.dialogTableList.length;i++){
              if(self.dialogTableList[i].userId == self.dialogTableDataList[o].userId){
                num++
                newObj = JSON.parse(JSON.stringify(self.dialogTableList[i]))
              }
            }
            if(num == 0){
              let obj = {
                userId:self.dialogTableDataList[o].userId,
                name:self.dialogTableDataList[o].name,
                jobNum:self.dialogTableDataList[o].jobNum,
                deptName:self.dialogTableDataList[o].deptName,
                deptId:self.dialogTableDataList[o].deptId,
                userType:self.dialogTableDataList[o].userType,
                enable:1,
              };
              list.push(obj)
            }else{
              let obj = {
                userId:self.dialogTableDataList[o].userId,
                name:self.dialogTableDataList[o].name,
                jobNum:self.dialogTableDataList[o].jobNum,
                deptName:self.dialogTableDataList[o].deptName,
                deptId:self.dialogTableDataList[o].deptId,
                userType:self.dialogTableDataList[o].userType,
                enable:newObj.enable,
              };
              list.push(obj)
            }
          }
          this.$set(this,'dialogTableList',list);
          this.dialogClickType(1);
        }
      },
      //弹窗状态切换
      dialogClickType(type){
        let self = this;
        if(type == 2){
          this.$set(self,'dialogTableDataList',JSON.parse(JSON.stringify(this.dialogTableList)));
          this.userResetQueryLeft();
          this.userResetQueryRight();
          this.$set(this,'addDialogBoxType',type);
        }else{
          this.$set(this,'addDialogBoxType',type);
        }
      },
      //删除弹窗列表
      delTable(row){
        let self = this;
        for(let i=0;i<self.dialogTableList.length;i++){
          if(row.userId == self.dialogTableList[i].userId){
            this.dialogTableList.splice(i,1)
          }
        }
      },
      /*===================================人员选择相关===================================*/
      //查询
      userHandleQueryLeft(){
        this.$set(this.userQueryParamsLeft,'pageNum',1);
        this.$set(this,'userNumLeft',0);
        this.$set(this,'userIdsLeft',[]);
        this.$refs.leftUserTable.clearSelection();
        this.userGetListLeft();
      },
      //重置
      userResetQueryLeft(){
        this.$set(this,'userQueryParamsLeft',{
          pageNum: 1,
          pageSize: 20,
          deptId:"",
          searchValue:"",
          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.total;
          this.userTableListLeft = response.rows;
        });
      },
      //查询
      userHandleQueryRight(){
        this.$set(this.userQueryParamsRight,'pageNum',1);
        this.$set(this,'userNumRight',0);
        this.$set(this,'userIdsRight',[]);
        this.$refs.rightUserTable.clearSelection();
        this.userGetListRight();
      },
      //重置
      userResetQueryRight(){
        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.userIds = [];
        for(let i=0;i<self.dialogTableDataList.length;i++){
          rightObj.userIds.push(self.dialogTableDataList[i].userId);
        }
        findUserList(rightObj).then(response => {
          this.userTotalRight = response.total;
          this.userTableListRight = response.rows;
        });
      },
      //穿梭按钮
      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.$refs.leftUserTable.selection[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,
              }
              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
      },
      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);
      },
      changeIsNeedCaptcha(data){
        if(this.lookInfoType){
          return
        }
        data = data == 1?0:1;
        this.$forceUpdate()
      },
      //获取学院列表
      listDepartments(){
        listDepartments().then(response => {
          this.deptSelectList = response.data;
        });
      },
    }
  }
</script>

<style lang="scss">
  .inspectionGroup-dialog-box{
    .el-dialog__body{
      padding:20px 30px 20px 30px;
    }
    .is-disabled{
      background-color: #f5f5f5;
      color: #333;
      border-color: #f5f5f5;
      cursor:auto;
      border-radius: 4px;
      .el-input__icon{
        display: none;
      }
      .el-input__inner{
        background-color: #f5f5f5;
        color: #333;
        border-color: #f5f5f5;
        cursor:auto!important;
        border-radius: 4px;
      }
      .el-range-input{
        background-color: #f5f5f5;
        color: #333;
        border-color: #f5f5f5;
        cursor:auto;
        border-radius: 4px;
      }
      .el-textarea__inner{
        background-color: #f5f5f5;
        color: #333;
        border-color: #f5f5f5;
        cursor:auto;
        border-radius: 4px;
      }
    }
    .switchFontColor{
      color:#0183FA;
    }
    .add-max-box{
      display: flex;
      flex-direction: column;
      overflow: hidden;
      height:610px;
      .add-form-box{
        .switch .el-switch__label {
          position: absolute;
          display: none;
          color: #fff !important;
        }
        .switch .el-switch__label--right {
          z-index: 1;
        }
        .switch .el-switch__label--right span{
          margin-left: 10px;
          margin-top: 8px;
        }
        .switch .el-switch__label--left {
          z-index: 1;
        }
        .switch .el-switch__label--left span{
          margin-top: 8px;
          margin-left: 30px;
        }
        .switch .el-switch__label.is-active {
          display: block;
        }
        .el-switch__core:after{
          width:20px;
          height:20px;
          top:4px;
          margin-left: 4px;
        }
        .el-switch.is-checked .el-switch__core::after{
          width:20px;
          height:20px;
          top:4px;
          margin-left: -24px;

        }
        .switch.el-switch .el-switch__core,
        .el-switch .el-switch__label {
          width: 70px !important;
          height:30px !important;
          border-radius: 50px 50px 50px 50px;
          margin: 0;
        }
      }
      .dialog-table-box{
        margin-top:20px;
        display: flex;
        flex-direction: column;
        flex:1;
        overflow: hidden;
        .dialog-table-title-box{
          display: flex;
          border:1px solid #e0e0e0;
          border-bottom:none;
          img{
            width:14px;
            height:14px;
            margin:18px 12px 18px 12px;
          }
          .dialog-table-title-p{
            line-height:50px;
            flex:1;
            font-size:16px;
          }
          .dialog-table-title-button{
            width:70px;
            height:30px;
            line-height:28px;
            margin:10px 26px;
          }
          .dialog-table-title-text{
            height:30px;
            line-height:28px;
            margin:10px 26px;
          }
        }
        .switch .el-switch__label {
          position: absolute;
          display: none;
        }
        .switch .el-switch__label--right {
          z-index: 1;
          color: #fff !important;
        }
        .switch .el-switch__label--right span{
          margin-left: 10px;
        }
        .switch .el-switch__label--left {
          z-index: 1;
          color: #fff !important;
        }
        .switch .el-switch__label--left span{
          margin-left: 24px;
        }
        .switch .el-switch__label.is-active {
          display: block;
        }
        .switch.el-switch .el-switch__core,
        .el-switch .el-switch__label {
          width: 60px !important;
          margin: 0;
        }
      }
    }
    .inspectionPlan-dialog-user-box{
      display: flex;
      overflow: hidden;
      height:610px;
      .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:588px;
      }
      .right-max-box{
        height:610px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        width:588px;
        flex:1;
      }
      .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;
        }
      }
    }
  }
</style>