v3-lab-web/src/views/safetyCheck/components/subDialog.vue

<!--待检查实验室-->
<template>
  <el-dialog class="inspectionPlan-dialog-box"
             :close-on-click-modal="false"
             title="待检查实验室" :visible.sync="addDialogType" v-if="addDialogType"
             @close="addDialogOff" width="1430px" append-to-body>
    <div class="inspectionPlan-dialog-sub-box">
      <div v-if="!lookInfoType" class="left-max-box">
        <div class="dept-table-title-box">
          <p>待选实验室</p>
          <p>{{subNumLeft}}/{{subTotalLeft}}</p>
        </div>
        <div class="dept-table-max-box">
          <el-form :model="subQueryParamsLeft" class="form-box" ref="queryForm" :inline="true" label-width="50px">
            <el-form-item label="" prop="deptId" v-if="schoolCollegeType == 'school'">
              <el-select v-model="subQueryParamsLeft.deptId" clearable placeholder="学院" style="width: 144px">
                <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="buildId" v-if="schoolCollegeType == 'school'">
              <el-select v-model="subQueryParamsLeft.buildId" clearable placeholder="楼栋" style="width: 144px">
                <el-option
                  v-for="item in buildSelectList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="typeId">
              <el-select v-model="subQueryParamsLeft.typeId" clearable placeholder="分类" style="width: 144px">
                <el-option
                  v-for="item in classTypeList"
                  :key="item.typeId"
                  :label="item.subType"
                  :value="item.typeId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="levelId">
              <el-select v-model="subQueryParamsLeft.levelId" clearable placeholder="分级" style="width: 144px">
                <el-option
                  v-for="item in classifiedList"
                  :key="item.levelId"
                  :label="item.titleName"
                  :value="item.levelId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="hazardType">
              <el-select v-model="subQueryParamsLeft.hazardType" clearable placeholder="危险源标签" style="width: 144px">
                <el-option
                  v-for="item in hazardTypeList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="searchValue" class="form-index">
              <el-input
                maxLength="30"
                v-model="subQueryParamsLeft.searchValue"
                placeholder="实验室/房间号"
                clearable
                style="width: 313px">
              </el-input>
            </el-form-item>
            <p class="page-inquire-common-style-button" @click="subHandleQueryLeft" style="width:60px;">搜索</p>
            <p class="page-reset-common-style-button" @click="subResetQueryLeft" style="width:60px;margin-right:0;">重置</p>
          </el-form>
          <el-table class="table-box table-null-img-20" ref="leftSubTable" border :data="subTableListLeft" @selection-change="subChangeLeft" :row-key="getSubRowKeys">
            <el-table-column type="selection" width="50" :reserve-selection="true" align="center"/>
            <el-table-column label="实验室" align="center" prop="subName" show-overflow-tooltip>
              <template slot-scope="scope">{{scope.row.roomNum?scope.row.subName+'-'+scope.row.roomNum:scope.row.subName}}</template>
            </el-table-column>
            <el-table-column label="分级分类" align="center" prop="deptName" show-overflow-tooltip width="150">
              <template slot-scope="scope">
                <span>{{scope.row.classTypeNames}}</span>
                <span>-</span>
                <span :style="'color:'+scope.row.classLevelColor+';'">{{scope.row.classLevelName}}</span>
              </template>
            </el-table-column>
            <el-table-column label="学院" align="center" prop="deptName" show-overflow-tooltip width="150"/>
          </el-table>
          <pagination layout="total, prev, pager, next, jumper"
                      v-show="subTotalLeft>0"
                      :total="subTotalLeft"
                      :page.sync="subQueryParamsLeft.page"
                      :limit.sync="subQueryParamsLeft.pageSize"
                      @pagination="subGetListLeft"/>
        </div>
      </div>
      <div v-if="!lookInfoType" class="center-box">
        <p class="el-icon-arrow-left" @click="subArrowButton(1)">到左边</p>
        <p class="el-icon-arrow-right" @click="subArrowButton(2)">到右边</p>
      </div>
      <div class="right-max-box">
        <div class="dept-table-title-box" v-if="!lookInfoType">
          <p>已选实验室</p>
          <p v-if="!lookInfoType">{{subNumRight}}/{{subTotalRight}}</p>
          <p v-if="lookInfoType">{{subTotalRight}}</p>
        </div>
        <div class="dept-table-max-box">
          <el-form :model="subQueryParamsRight" class="form-box" ref="queryForm" :inline="true" label-width="50px">
            <el-form-item label="" prop="deptId" v-if="schoolCollegeType == 'school'">
              <el-select v-model="subQueryParamsRight.deptId" clearable placeholder="学院" :style="!lookInfoType?'width:144px':'width:180px'">
                <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="buildId" v-if="schoolCollegeType == 'school'">
              <el-select v-model="subQueryParamsRight.buildId" clearable placeholder="楼栋" :style="!lookInfoType?'width:144px':'width:180px'">
                <el-option
                  v-for="item in buildSelectList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="typeId">
              <el-select v-model="subQueryParamsRight.typeId" clearable placeholder="分类" :style="!lookInfoType?'width:144px':'width:140px'">
                <el-option
                  v-for="item in classTypeList"
                  :key="item.typeId"
                  :label="item.subType"
                  :value="item.typeId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="levelId">
              <el-select v-model="subQueryParamsRight.levelId" clearable placeholder="分级" :style="!lookInfoType?'width:144px':'width:140px'">
                <el-option
                  v-for="item in classifiedList"
                  :key="item.levelId"
                  :label="item.titleName"
                  :value="item.levelId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="hazardType">
              <el-select v-model="subQueryParamsRight.hazardType" clearable placeholder="危险源标签" :style="!lookInfoType?'width:144px':'width:140px'">
                <el-option
                  v-for="item in hazardTypeList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="searchValue" class="form-index">
              <el-input
                maxLength="30"
                v-model="subQueryParamsRight.searchValue"
                placeholder="实验室/房间号"
                clearable
                :style="!lookInfoType?'width:313px':'width:180px'">
              </el-input>
            </el-form-item>
            <p class="page-inquire-common-style-button" @click="subHandleQueryRight" style="width:60px;">搜索</p>
            <p class="page-reset-common-style-button" @click="subResetQueryRight" style="width:60px;margin-right:0;">重置</p>
          </el-form>
          <el-table class="table-box table-null-img-20" ref="rightSubTable" border :data="subTableListRight" @selection-change="subChangeRight" :row-key="getSubRowKeys">
            <el-table-column v-if="!lookInfoType" type="selection" width="50" :reserve-selection="true" align="center"/>
            <el-table-column label="实验室" align="center" prop="subName" show-overflow-tooltip>
              <template slot-scope="scope">{{scope.row.roomNum?scope.row.subName+'-'+scope.row.roomNum:scope.row.subName}}</template>
            </el-table-column>
            <el-table-column label="分级分类" align="center" prop="classTypeNames" show-overflow-tooltip width="150" v-if="!lookInfoType">
              <template slot-scope="scope">
                <span>{{scope.row.classTypeNames}}</span>
                <span>-</span>
                <span :style="'color:'+scope.row.classLevelColor+';'">{{scope.row.classLevelName}}</span>
              </template>
            </el-table-column>
            <el-table-column label="学院" align="center" prop="deptName" show-overflow-tooltip width="150" v-if="!lookInfoType"/>
            <el-table-column label="学院" align="center" prop="deptName" show-overflow-tooltip width="250" v-if="lookInfoType"/>
            <el-table-column label="楼栋" align="center" prop="buildName" show-overflow-tooltip width="200" v-if="lookInfoType"/>
            <el-table-column label="分类" align="center" prop="classTypeNames" show-overflow-tooltip width="150" v-if="lookInfoType"/>
            <el-table-column label="分级" align="center" prop="classLevelName" show-overflow-tooltip width="150" v-if="lookInfoType">
              <template slot-scope="scope">
                <span :style="'color:'+scope.row.classLevelColor+';'">{{scope.row.classLevelName}}</span>
              </template>
            </el-table-column>
            <el-table-column label="负责人" align="center" prop="deptName" show-overflow-tooltip width="220" v-if="lookInfoType"/>
          </el-table>
          <pagination layout="total, prev, pager, next, jumper"
                      v-show="subTotalRight>0"
                      :total="subTotalRight"
                      :page.sync="subQueryParamsRight.page"
                      :limit.sync="subQueryParamsRight.pageSize"
                      @pagination="subGetListRight"/>
        </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" v-if="!lookInfoType">取消</p>
      <p class="dialog-footer-button-primary" @click="addUserButton" v-if="!lookInfoType">确定</p>
      <p class="dialog-footer-button-primary" @click="addDialogOff" v-if="lookInfoType">确认</p>
      <p class="dialog-footer-button-null"></p>
    </div>
  </el-dialog>
</template>

<script>  import {
  laboratorySubRelInfoConditionSubjectInfo,
} from '@/api/safetyCheck/indexDemoOne'
  import {
  getDeptDropList,
  systemBuildingGetOptList,
  laboratoryTypeConfigGetList,
  laboratoryLevelConfigGetLevelTitleList,
  laboratorySubRelInfoGetHazardTypeList,
} from "@/api/commonality/permission";
  export default {
    name: 'subDialog',
    props:{
      subCheckData:{},
      schoolCollegeType:null
    },
    data(){
      return{
        addDialogType:true,
        lookInfoType:false,
        deptSelectList:[],
        buildSelectList:[],
        classTypeList:[],
        classifiedList:[],
        hazardTypeList:[],
        subQueryParamsLeft:{
          page:1,
          pageSize:20,
          typeId:"",
          levelId:"",
          deptId:"",
          searchValue:"",
          filtType:1
        },
        subTableListLeft:[],
        subTotalLeft:0,
        subNumLeft:0,
        subIdsLeft:[],
        subQueryParamsRight:{
          page:1,
          pageSize:20,
          typeId:"",
          levelId:"",
          deptId:"",
          searchValue:"",
          filtType:2
        },
        subTableListRight:[],
        subTotalRight:0,
        subNumRight:0,
        subIdsRight:[],
        dialogTableSubDataList:[],
      }
    },
    created(){

    },
    mounted(){
      this.$set(this,'dialogTableSubDataList',this.subCheckData.subIds);
      this.$set(this,'lookInfoType',this.subCheckData.showType);
      //下拉框查询
      this.getDeptDropList();
      this.systemBuildingGetOptList();
      this.laboratoryTypeConfigGetList();
      this.laboratoryLevelConfigGetLevelTitleList();
      this.laboratorySubRelInfoGetHazardTypeList();
      this.subResetQueryLeft();
      this.subResetQueryRight();
    },
    methods:{
      //弹窗关闭
      addDialogOff(){
        this.$parent.subCheckButton(4)
      },
      //确定按钮
      addUserButton(){
        let self = this;
        if(!this.dialogTableSubDataList[0]){
          this.msgError('请勾选实验室')
          return
        }
        //实验室选择页面确定
        // let list = [];
        let ids = [];
        for(let o=0;o<self.dialogTableSubDataList.length;o++){
          ids.push(self.dialogTableSubDataList[o])
          // let obj = {
          //   subId:self.dialogTableSubDataList[o].subId,
          //   subjectName:self.dialogTableSubDataList[o].subjectName,
          //   typeId:self.dialogTableSubDataList[o].typeId,
          //   levelId:self.dialogTableSubDataList[o].levelId,
          //   collegeName:self.dialogTableSubDataList[o].collegeName,
          // };
          // list.push(obj)
        }
        // console.log('list',list)
        this.$parent.subCheckButton(3,ids);
      },
      //查询
      subHandleQueryLeft(){
        this.$set(this.subQueryParamsLeft,'page',1);
        this.subGetListLeft();
      },
      //重置
      subResetQueryLeft(){
        this.$set(this,'subQueryParamsLeft',{
          page:1,
          pageSize:20,
          typeId:"",
          levelId:"",
          deptId:"",
          searchValue:"",
          filtType:1
        });
        this.subHandleQueryLeft();
      },
      //查询接口
      subGetListLeft(){
        let self = this;
        let leftObj = JSON.parse(JSON.stringify(this.subQueryParamsLeft));
        leftObj.selectedSubIds = [];
        for(let i=0;i<self.dialogTableSubDataList.length;i++){
          leftObj.selectedSubIds.push(self.dialogTableSubDataList[i]);
        }
        laboratorySubRelInfoConditionSubjectInfo(leftObj).then(response => {
          this.subTotalLeft = response.data.total;
          this.subTableListLeft = response.data.records;
        });
      },
      //查询
      subHandleQueryRight(){
        this.$set(this.subQueryParamsRight,'page',1);
        this.subGetListRight();
      },
      //重置
      subResetQueryRight(){
        this.$set(this,'subQueryParamsRight',{
          page:1,
          pageSize:20,
          typeId:"",
          levelId:"",
          deptId:"",
          searchValue:"",
          filtType:2
        });
        this.subHandleQueryRight();
      },
      //查询接口
      subGetListRight(){
        let self = this;
        let rightObj = JSON.parse(JSON.stringify(this.subQueryParamsRight));
        rightObj.subIds = [];
        for(let i=0;i<self.dialogTableSubDataList.length;i++){
          rightObj.subIds.push(self.dialogTableSubDataList[i]);
        }
        laboratorySubRelInfoConditionSubjectInfo(rightObj).then(response => {
          this.subTotalRight = response.data.total;
          this.subTableListRight = response.data.records;
        });
      },
      //实验室穿梭按钮
      subArrowButton(type){
        if(type == 1){
          if(this.$refs.rightSubTable.selection[0]){
            let list = JSON.parse(JSON.stringify(this.dialogTableSubDataList));
            let subIdsRight = JSON.parse(JSON.stringify(this.$refs.rightSubTable.selection))
            for(let i=0;i<subIdsRight.length;i++){
              for(let s=0;s<list.length;s++){
                if(subIdsRight[i].subId == list[s]){
                  list.splice(s,1);
                  s--
                }
              }
            }
            this.$set(this,'dialogTableSubDataList',list);
            this.$refs.rightSubTable.clearSelection();
            this.subHandleQueryLeft();
            this.subHandleQueryRight();
          }else{
            this.msgError('请先勾选右侧列表')
          }
        }else if(type == 2){
          if(this.$refs.leftSubTable.selection[0]){
            let list = JSON.parse(JSON.stringify(this.dialogTableSubDataList));
            let subIdsLeft = JSON.parse(JSON.stringify(this.$refs.leftSubTable.selection))
            for(let i=0;i<subIdsLeft.length;i++){
              // let obj = {
              //   subId:subIdsLeft[i].subId,
              //   subjectName:subIdsLeft[i].subName,
              //   typeId:subIdsLeft[i].typeId,
              //   levelId:subIdsLeft[i].levelId,
              //   collegeName:subIdsLeft[i].deptName,
              // }
              // list.push(obj);
              list.push(subIdsLeft[i].subId);
            }
            this.$set(this,'dialogTableSubDataList',list);
            this.$refs.leftSubTable.clearSelection();
            this.subHandleQueryLeft();
            this.subHandleQueryRight();
          }else{
            this.msgError('请先勾选左侧列表')
          }
        }
      },
      /*===记录勾选数据===
        需要再el-table 添加  :row-key="getRowKeys"
        需要在selection 添加 :reserve-selection="true"
      */
      getSubRowKeys(row) {
        return row.subId
      },
      subChangeLeft(selection){
        this.subNumLeft = selection.length;
        this.subIdsLeft = selection.map(item => item.subId);
      },
      subChangeRight(selection){
        this.subNumRight = selection.length;
        this.subIdsRight = selection.map(item => item.subId);
      },
      //学院下拉列表
      getDeptDropList(){
        getDeptDropList({level:2,deptType:1}).then(response => {
          this.$set(this,'deptSelectList',response.data);
        });
      },
      //楼栋下拉列表
      systemBuildingGetOptList(){
        systemBuildingGetOptList({type:2}).then(response => {
          this.$set(this,'buildSelectList',response.data);
        });
      },
      //分类下拉列表
      laboratoryTypeConfigGetList(){
        laboratoryTypeConfigGetList({}).then(response => {
          this.$set(this,'classTypeList',response.data);
        });
      },
      //分级下拉列表
      laboratoryLevelConfigGetLevelTitleList(){
        laboratoryLevelConfigGetLevelTitleList({}).then(response => {
          this.$set(this,'classifiedList',response.data);
        });
      },
      //危险源下拉列表
      laboratorySubRelInfoGetHazardTypeList(){
        laboratorySubRelInfoGetHazardTypeList().then(response => {
          this.$set(this,'hazardTypeList',response.data);
        });
      },
    },
  }
</script>

<style scoped lang="scss">
  .inspectionPlan-dialog-box{
    .el-dialog__body{
      padding:20px 0 20px 30px;
    }
    .inspectionPlan-dialog-sub-box{
      display: flex;
      overflow: hidden;
      height:520px;
      .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:520px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        flex:1;
      }
      .right-max-box{
        height:520px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        flex:1;
      }
      .center-box{
        width:70px;
        p{
          display: block;
          width:60px;
          height:30px;
          line-height:30px;
          text-align: center;
          background: #fff;
          color:#0183FA;
          border-radius:4px;
          border:1px solid #0183FA;
          cursor: pointer;
          font-size:12px;
        }
        p:nth-child(1){
          margin:260px 5px 0;
        }
        p:nth-child(2){
          margin:14px 5px 0;
        }
        p:hover{
          background: #0183FA;
          color:#fff;
          border:1px solid #0183FA;
        }
      }
    }
  }
</style>