FE-V2-PC/src/views/comprehensive/laboratoryManagement/timingExhaustAir/index.vue

<!--定时排风-->
<template>
    <div class="app-container timingExhaustAir">
      <div class="timingExhaustAirPage" v-if="pageType == 1">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
          <el-form-item label="关键字" prop="searchValue" >
            <el-input
              maxlength="10"
              v-model="queryParams.searchValue"
              placeholder="任务名称/实验室/房间号"
              clearable
            />
          </el-form-item>
          <el-form-item label="学院" prop="deptId">
            <el-select v-model="queryParams.deptId" placeholder="请选择" clearable >
              <el-option
                v-for="dict in deptOptions"
                :key="dict.deptId"
                :label="dict.deptName"
                :value="dict.deptId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <p class="inquire-button-one" @click="handleQuery">查询</p>
            <p class="reset-button-one" @click="resetQuery">重置</p>
          </el-form-item>
          <el-form-item style="float: right;margin-right:0;">
            <el-col :span="1.5">
              <p class="inquire-button-one" style="width:80px;margin:0;"
                 @click="goPage(2)"
              ><i class="el-icon-plus"></i> 新增</p>
            </el-col>
          </el-form-item>
        </el-form>
        <el-table v-loading="loading" border :data="dataList">
          <el-table-column label="序号"  width="100" align="left"  type="index"/>
          <el-table-column label="定时排风任务" align="left" prop="taskName" show-overflow-tooltip/>
          <el-table-column label="是否启用" align="left" prop="exhaustType" width="200" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-switch
                class="switch"
                @click.native="changeIsNeedCaptcha(scope.row)"
                v-model="scope.row.exhaustType"
                :active-value="1"
                :inactive-value="0"
                active-color="#0183FA"
                inactive-color="#E0E0E0"
                active-text="启用"
                inactive-text="停用"
                disabled
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="编辑时间" align="left" prop="updateTime" width="300" show-overflow-tooltip/>
          <el-table-column label="操作人" align="left" prop="updateBy" width="200" show-overflow-tooltip/>
          <el-table-column label="操作" align="left" prop="createTime" width="300" show-overflow-tooltip>
            <template slot-scope="scope">
              <div class="button-box">
                <p class="table-min-button" style="margin-left:20px!important;" @click="correlationButton(scope.row.id)">关联实验室</p>
                <p class="table-min-button" style="margin-left:20px!important;" @click="goPage(3,scope.row.id)">编辑</p>
                <p class="table-min-button" style="margin-left:20px!important;" @click="delExhaust(scope.row.id)">删除</p>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
      <add-page v-if="pageType == 2" :propsData="propsData"></add-page>
      <el-dialog title="关联实验室" :visible.sync="exhaustPageType" v-if="exhaustPageType"
                 width="1470px" append-to-body id="exhaust-correlation-dialog-box">
        <p class="exhaust-title-p">任务执行时间</p>
        <div class="time-max-box">
          <div class="for-time-box" v-for="(item,index) in correlationData.exhaustPeriodVoList" :key="index">
            <p class="for-title-p">{{item.beginTime}}~{{item.endTime}}</p>
            <div class="for-time-min-box" :class="item.timedType==3?'for-time-min-box-one':''">
              <p class="for-time-text-one" v-show="item.timedType==1">周一至周五</p>
              <p class="for-time-text-one" v-show="item.timedType==2">周一至周日</p>
              <p class="for-time-text-tow" v-show="item.timedType==3" v-for="(minItem,minIndex) in item.customTime" :key="minIndex">{{minItem==1?'周一':(minItem==2?'周二':(minItem==3?'周三':(minItem==4?'周四':(minItem==5?'周五':(minItem==6?'周六':minItem==7?'周末':'')))))}}{{minIndex!=item.customTime.length-1?'、':''}}</p>
            </div>
          </div>
        </div>
        <div class="exhaust-sub-max-box">
          <div class="left-sub-max-box">
            <div class="left-sub-max-title">
              <p>待选实验室</p>
              <p>{{leftIds.length?leftIds.length:0}}/{{leftTotal}}</p>
            </div>
            <div class="left-form-max-box">
              <el-form :model="leftQueryParams" :inline="true" v-show="leftShowSearch"
                       ref="queryForm" style="display: flex">
                <el-form-item label="关键字" prop="searchValue" >
                  <el-input
                    style="width:150px;"
                    maxlength="10"
                    v-model="leftQueryParams.searchValue"
                    placeholder="实验室"
                    clearable
                  />
                </el-form-item>
                <el-form-item label="学院" prop="deptId">
                  <el-select v-model="leftQueryParams.deptId" placeholder="请选择" clearable
                             style="width:130px;">
                    <el-option
                      v-for="dict in deptOptions"
                      :key="dict.deptId"
                      :label="dict.deptName"
                      :value="dict.deptId"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="安全分类" prop="typeId">
                  <el-select v-model="leftQueryParams.typeId" placeholder="请选择" clearable
                             style="width:100px;">
                    <el-option
                      v-for="dict in typeList"
                      :key="dict.id"
                      :label="dict.typeName"
                      :value="dict.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="安全分级" prop="level">
                  <el-select v-model="leftQueryParams.level" placeholder="请选择" clearable
                             style="width:100px;">
                    <el-option
                      v-for="dict in levelList"
                      :key="dict.id"
                      :label="dict.classifiedName"
                      :value="dict.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <p class="inquire-button-one" @click="leftHandleQuery">查询</p>
                  <p class="reset-button-one" @click="leftResetQuery">重置</p>
                </el-form-item>
              </el-form>
              <el-table ref="leftTable" v-loading="leftLoading" border :data="leftDataList" @selection-change="handleSelectionChangeLeft" :row-key="getRowKeysLeft">
                <el-table-column type="selection" width="59" align="left" :reserve-selection="true"/>
                <el-table-column label="实验室" align="left" prop="name" show-overflow-tooltip/>
                <el-table-column label="安全分类" align="left" prop="createBy" width="100" show-overflow-tooltip/>
                <el-table-column label="安全分级" align="left" prop="createTime" width="100" show-overflow-tooltip/>
                <el-table-column label="实验室位置" align="left" prop="createTime" width="358" show-overflow-tooltip/>
              </el-table>
              <pagination
                v-show="leftTotal>0"
                :total="leftTotal"
                :page.sync="leftQueryParams.pageNum"
                :limit.sync="leftQueryParams.pageSize"
                @pagination="getLabExhaustNoJoinSub"
              />
              <p style="height:20px;" v-show="leftTotal==0"></p>
            </div>
          </div>
          <div class="button-sub-max-box">
            <img class="top-img" v-show="!rightIds.length" src="@/assets/ZDimages/icon_wxz_zuo.png">
            <img class="top-img" v-show="rightIds.length" @click="rightDataMoveLeft" src="@/assets/ZDimages/icon_yxz_zuo.png">
            <img class="bottom-img" v-show="!leftIds.length" src="@/assets/ZDimages/icon_wxz_yuo.png">
            <img class="bottom-img" v-show="leftIds.length" @click="leftDataMoveRight" src="@/assets/ZDimages/icon_yxz_yuo.png">
          </div>
          <div class="right-sub-max-box">
            <div class="right-sub-max-title">
              <p>已选择实验室</p>
              <p>{{rightIds.length?rightIds.length:0}}/{{rightTotal}}</p>
            </div>
            <div class="right-form-max-box">
              <el-form :model="rightQueryParams" :inline="true" v-show="rightShowSearch"
                       ref="queryForm" style="display: flex">
                <el-form-item label="" prop="searchValue" >
                  <el-input placeholder="请输入实验室名称" style="width:288px;" v-model="rightQueryParams.searchValue" class="input-with-select">
                    <el-button slot="append" icon="el-icon-search" @click="rightResetQuery"
                               style="background:rgba(0,0,0,0);"></el-button>
                  </el-input>
                </el-form-item>
              </el-form>
              <el-table ref="rightTable" v-loading="rightLoading" border :data="rightDataList" @selection-change="handleSelectionChangeRight" :row-key="getRowKeysRight">
                <el-table-column type="selection" width="80" align="left" :reserve-selection="true"/>
                <el-table-column label="实验室" align="left" prop="name" show-overflow-tooltip/>
              </el-table>
            </div>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <div class="exhaust-button-box">
            <p></p>
            <p @click="cancel">取消</p>
            <p @click="joinsubButton">确定</p>
            <p></p>
          </div>
        </div>
      </el-dialog>
    </div>
</template>

<script>
  import { delExhaust,exhaustList,operateExhaust,getExhaustInfo,getLabExhaustNoJoinSub,getLabExhaustJoinSub,joinsub } from "@/api/laboratory/exhaustTime";
  import { listClassifiedAll } from "@/api/laboratory/classified";
  import { listClasstypeAll } from "@/api/laboratory/classtype";
  import { listDepartments } from "@/api/system/dept";
  import addPage from "./addPage.vue";
  export default {
    name: 'index',
    components: {
      addPage
    },
    data() {
      return {
        //关联实验室也页面状态
        exhaustPageType:false,
        //页面状态
        pageType:1,
        showSearch:true,
        loading:false,
        total:0,
        queryParams:{
          pageNum: 1,
          pageSize:20,
          searchValue:"",
          deptId:"",
        },
        //列表数据
        dataList:[],
        //学院数据
        deptOptions:[],
        //分类数据
        typeList:[],
        //分级数据
        levelList:[],
        propsData:{},
        //关联数据
        correlationData:{},
        //左列表数据
        leftShowSearch:true,
        leftLoading:false,
        leftTotal:0,
        leftQueryParams:{
          pageNum: 1,
          pageSize:10,
          searchValue:"",
          deptId:"",
          typeId:"",
          level:"",
        },
        leftDataList:[],
        leftSelectedNum:0,
        leftIds:[],
        leftMultiple:true,
        //右列表数据
        rightShowSearch:true,
        rightLoading:false,
        rightQueryParams:{
          searchValue:"",
        },
        rightDataList:[],
        rightTotal:0,
        rightSelectedNum:0,
        rightIds:[],
        rightMultiple:true,
        //删减减数据
        addList:[],
        reduceList:[],
        //原始数据
        primitiveList:[]
      }
    },
    created() {
      this.listDepartments();
      this.getListClassifiedAll();
      this.getListClasstypeAll();
      this.getList();
    },
    mounted() {

    },
    methods: {
      //关联数据提交
      joinsubButton(){
        let self = this;
        let obj = {
          delSubIds:[],
          joinsubList:[],
        };
        for(let i=0;i<self.rightDataList.length;i++){
          let minObj = {
            timedExhaustId:self.correlationData.id,
            subId:self.rightDataList[i].id
          }
          obj.joinsubList.push(minObj)
        }
        for(let o=0;o<self.primitiveList.length;o++){
          let num = 0;
          for(let i=0;i<self.rightDataList.length;i++){
            if (self.rightDataList[i].id == self.primitiveList[o].id){
              num ++
            }
          }
          if(num == 0){
            obj.delSubIds.push(self.primitiveList[o].id)
          }
        }
        joinsub(obj).then( response => {
          self.msgSuccess(response.msg);
          self.$set(self,'exhaustPageType',false);
        });
      },
      //左侧数据移动到右
      leftDataMoveRight(){
        let self = this;
        if(this.leftIds[0]){
          for(let i=0;i<self.leftIds.length;i++){
            let num = 0;
            for(let o=0;o<self.addList.length;o++){
              if(self.leftIds[i] == self.addList[o]){
                num++
              }
            }
            if(num == 0){
              self.addList.push(self.leftIds[i])
            }
            for(let o=0;o<self.reduceList.length;o++){
              if(self.leftIds[i] == self.reduceList[o]){
                self.reduceList.splice(o,1);
              }
            }
            for(let x=0;x<self.leftDataList.length;x++){
              if(self.leftIds[i] == self.leftDataList[x].id){
                let age = 0;
                for(let o=0;o<self.rightDataList.length;o++){
                  if(self.leftIds[i] == self.rightDataList[o].id){
                    age++
                  }
                }
                if(age == 0){
                  self.rightDataList.push(self.leftDataList[x])
                }
              }
            }
          }
        }
        this.$refs.leftTable.clearSelection()
        this.getLabExhaustNoJoinSub();
      },
      //右侧数据移动到左
      rightDataMoveLeft(){
        let self = this;
        if(this.rightIds[0]){
          for(let i=0;i<self.rightIds.length;i++){
            let num = 0;
            for(let o=0;o<self.reduceList.length;o++){
              if(self.rightIds[i] == self.reduceList[o]){
                num++
              }
            }
            if(num == 0){
              self.reduceList.push(self.rightIds[i])
            }
            for(let o=0;o<self.rightDataList.length;o++){
              if(self.rightDataList[o].id == self.rightIds[i]){
                self.rightDataList.splice(o,1);
              }
            }
            for(let o=0;o<self.addList.length;o++){
              if(self.rightIds[i] == self.addList[o]){
                self.addList.splice(o,1);
              }
            }
          }
          this.$refs.rightTable.clearSelection()
          this.getLabExhaustNoJoinSub();
        }
      },
      //关联实验室
      correlationButton(id){
        this.$set(this,'leftSelectedNum',0);
        this.$set(this,'leftIds',[]);
        this.$set(this,'leftMultiple',true);
        this.$set(this,'rightSelectedNum',0);
        this.$set(this,'rightIds',[]);
        this.$set(this,'rightMultiple',true);
        this.$set(this,'addList',[]);
        this.$set(this,'reduceList',[]);
        this.$set(this,'primitiveList',[]);
        this.leftResetQuery();
        this.rightResetQuery();
        getExhaustInfo(id).then( response => {
          for(let i=0;i<response.data.exhaustPeriodVoList.length;i++){
            if(response.data.exhaustPeriodVoList[i].customTime){
              response.data.exhaustPeriodVoList[i].customTime = response.data.exhaustPeriodVoList[i].customTime.split(',');
            }
          }
          this.$set(this,'correlationData',response.data);
          this.$set(this,'exhaustPageType',true);
        });
      },
      //页面状态切换
      goPage(type,id){
        let self = this;
        if(this.pageType != type){
          if(type == 1){
            this.pageType = 1;
          }else if(type == 2){
            this.$set(this,'propsData',{});
            this.pageType = 2;
          }else if(type == 3){
            getExhaustInfo(id).then( response => {
              for(let i=0;i<response.data.exhaustPeriodVoList.length;i++){
                if(response.data.exhaustPeriodVoList[i].customTime){
                  response.data.exhaustPeriodVoList[i].customTime = response.data.exhaustPeriodVoList[i].customTime.split(',');
                }
              }
              this.$set(this,'propsData',response.data);
              this.pageType = 2;
            });
          }else if(type == 4){
            this.pageType = 1;
            this.resetQuery();
            this.$confirm('是否立即关联实验室，也可以稍后在列表中关联实验室.', "警告", {
              confirmButtonText: "关联",
              cancelButtonText: "取消",
              type: "warning"
            }).then(function() {
              self.correlationButton(id);
            }).then(() => {
            }).catch(() => {});
          }
        }
      },
      //删除任务
      delExhaust(id){
        let self = this;
        this.$confirm('确认删除该任务?', "警告", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          delExhaust(id).then( response => {
            self.msgSuccess(response.msg);
            self.getList();
          })
        }).then(() => {
        }).catch(() => {});
      },
      //启用停用方法
      changeIsNeedCaptcha(item){
        let self = this;
        let obj = {
          id:item.id,
          exhaustType:item.exhaustType==1?0:1
        }
        this.$confirm('确认'+item.exhaustType==1?'停用?':'启用?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          operateExhaust(obj).then( response => {
            self.msgSuccess(response.msg);
            self.getList();
          });
        }).then(() => {
        }).catch(() => {});
      },
      //获取列表数据
      getList(){
        this.loading = true;
        exhaustList(this.queryParams).then( response => {
          this.dataList =  response.rows;
          this.total =  response.total;
          this.loading = false;
        });
      },
      //查询
      handleQuery(){
        this.queryParams.pageNum = 1;
        this.getList();
      },
      //重置
      resetQuery(){
        this.$set(this,'queryParams',{
          pageNum:1,
          pageSize:20,
          searchValue:"",
          deptId:"",
        });
        this.handleQuery();
      },
      //左查询
      leftHandleQuery(){
        this.leftQueryParams.pageNum = 1;
        this.getLabExhaustNoJoinSub();
      },
      //左重置
      leftResetQuery(){
        this.$set(this,'leftQueryParams',{
          pageNum: 1,
          pageSize:10,
          searchValue:"",
          deptId:"",
          typeId:"",
          level:"",
        });
        this.leftHandleQuery();
      },
      //左获取列表数据
      getLabExhaustNoJoinSub(){
        this.leftLoading = true;
        let obj = JSON.parse(JSON.stringify(this.leftQueryParams));
        obj.noSubIds = JSON.parse(JSON.stringify(this.addList));
        obj.subIds = JSON.parse(JSON.stringify(this.reduceList));
        getLabExhaustNoJoinSub(obj).then( response => {
          this.leftDataList =  response.rows;
          this.leftTotal =  response.total;
          this.$set(this,'rightTotal',this.rightDataList.length);
          this.leftLoading = false;
          this.$forceUpdate();
        });
      },
      //左多选框选中数据
      handleSelectionChangeLeft(selection) {
        this.leftSelectedNum = selection.length;
        this.leftIds = selection.map(item => item.id)
        this.leftMultiple = !selection.length
      },
      getRowKeysLeft(row) {
        return row.id
      },
      //右侧获取列表数据
      rightResetQuery(){
        this.rightLoading = true;
        getLabExhaustJoinSub(this.rightQueryParams).then( response => {
          this.rightDataList =  JSON.parse(JSON.stringify(response.data.list));
          this.primitiveList =  JSON.parse(JSON.stringify(response.data.list));
          this.rightTotal =  response.data.total;
          this.rightLoading = false;
        });
      },
      //右多选框选中数据
      handleSelectionChangeRight(selection) {
        this.rightSelectedNum = selection.length;
        this.rightIds = selection.map(item => item.id)
        this.rightMultiple = !selection.length
      },
      getRowKeysRight(row) {
        return row.id
      },
      //关闭窗口
      cancel(){
        this.$set(this,'exhaustPageType',false);
      },
      //获取学院列表
      listDepartments(){
        listDepartments().then(response => {
          this.deptOptions = response.data;
        });
      },
      //获取分级
      getListClassifiedAll(){
        listClassifiedAll().then(response=>{
          if(response.code==200){
            this.levelList = response.data
          }
        })
      },
      //获取分类
      getListClasstypeAll(){
        listClasstypeAll().then(response=>{
          if(response.code==200){
            this.typeList = response.data;
          }
        });
      },
    }
  }
</script>

<style scoped lang="scss">
  .timingExhaustAir{
    flex:1;
    display: flex;
    flex-direction: column;
    .timingExhaustAirPage{
      flex:1;
      display: flex;
      flex-direction: column;
      padding:20px 20px 10px 20px!important;
      .button-box{
        display: flex;
      }
    }
  }
</style>
<style lang="scss">
  #exhaust-correlation-dialog-box{
    .el-form-item{
      display: flex;
      margin-right:10px;
    }
    .el-dialog__body{
      padding:0 55px;
    }
    .el-input-group__append{
      border:none;
      background: #fff!important;
    }
    .el-input-group--append .el-input__inner{
      border:none;
    }
    .el-form-item__content .el-input-group{
      border:1px solid #DCDFE6;
      border-radius:4px;
    }
    .exhaust-title-p{
      color:#0045AF;
      font-size:18px;
      line-height:60px;
    }
    .time-max-box{
      display: flex;
      .for-time-box{
        width:170px;
        height:140px;
        margin-right:11px;
        .for-title-p{
          width:170px;
          height:40px;
          line-height:40px;
          color:#0183FA;
          background: rgba(1,131,250,0.1);
          text-align: center;
          font-size:16px;
        }
        .for-time-min-box{
          width:170px;
          height:100px;
          color:#333;
          border: 1px solid #E0E0E0;
          font-size:14px;
          .for-time-text-one{
            text-align: center;
            line-height:100px;
          }
          .for-time-text-tow{
            display: inline-block;
            line-height:25px;
          }
        }
        .for-time-min-box-one{
          padding:10px 15px 10px 25px;
        }
      }
    }
    .exhaust-sub-max-box{
      margin:41px 0 28px;
      padding-top:41px;
      border-top:1px dashed #D8D8D8;
      display: flex;
      .left-sub-max-box{
        width:957px;
        height:440px;
        .el-table__empty-text{
          font-size:0;
          color:rgba(0,0,0,0);
          width:100%;
          height:100%;
          background: url("../../../../assets/ZDimages/null-data-1.png") no-repeat 50% 50%;
          background-size: 18%;
        }
        .left-sub-max-title{
          display: flex;
          background: rgba(1,131,250,0.1);
          color:#0183FA;
          line-height:40px;
          font-size:16px;
          p:nth-child(1){
            margin-left:29px;
            flex:1;
          }
          p:nth-child(2){
            margin-right:22px;
          }
        }
        .left-form-max-box{
          display: flex;
          flex-direction: column;
          width:957px;
          height:400px;
          border:1px solid #E0E0E0;
          padding:20px 20px 0 20px;
        }
      }
      .button-sub-max-box{
        width:74px;
        .top-img{
          cursor: pointer;
          display: block;
          margin-top:201px;
          width:30px;
          height:30px;
          margin-left:22px;
        }
        .bottom-img{
          cursor: pointer;
          display: block;
          margin-top:14px;
          width:30px;
          height:30px;
          margin-left:22px;
        }
      }
      .right-sub-max-box{
        height:440px;
        width:330px;
        .el-table__empty-text{
          font-size:0;
          color:rgba(0,0,0,0);
          width:100%;
          height:100%;
          background: url("../../../../assets/ZDimages/null-data-1.png") no-repeat 50% 50%;
          background-size: 55%;
        }
        .right-sub-max-title{
          display: flex;
          background: rgba(1,131,250,0.1);
          color:#0183FA;
          line-height:40px;
          font-size:16px;
          p:nth-child(1){
            margin-left:29px;
            flex:1;
          }
          p:nth-child(2){
            margin-right:22px;
          }
        }
        .right-form-max-box{
          display: flex;
          flex-direction: column;
          width:330px;
          height:400px;
          border:1px solid #E0E0E0;
          padding:20px;
        }
      }
    }
    .exhaust-button-box{
      display: flex;
      p:nth-child(1){
        flex:1;
      }
      p:nth-child(2){
        width:70px;
        height:30px;
        line-height:30px;
        margin-right:13px;
        font-size:12px;
        color:#999999;
        background: #E0E0E0;
        border-radius:6px;
        text-align: center;
        cursor: pointer;
      }
      p:nth-child(3){
        width:70px;
        height:30px;
        line-height:30px;
        font-size:12px;
        color:#ffffff;
        background: #0045AF;
        border-radius:6px;
        text-align: center;
        cursor: pointer;
      }
      p:nth-child(4){
        flex:1;
      }

    }
  }
</style>