FE-V2-PC/src/views/emergencyManagement/plan/associationPage.vue

<template>
    <div class="associationPage">
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="40px">
        <el-form-item label="关键字" prop="searchValue" label-width="60px">
          <el-input
            maxlength="10"
            v-model="queryParams.searchValue"
            placeholder="请输入实验室名称/负责人"
            style="width:190px;"
          />
        </el-form-item>
        <el-form-item label="学院" prop="type">
          <el-select v-model="queryParams.deptId" placeholder="请选择学院" style="width:150px;">
            <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="type">
          <el-select v-model="queryParams.moldId" placeholder="请选择类型" style="width:150px;">
            <el-option
              v-for="dict in labMoldList"
              :key="dict.id"
              :label="dict.moldName"
              :value="dict.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="安全分类" prop="typeId" label-width="70px">
          <el-select v-model="queryParams.typeId" placeholder="请选择安全分类" style="width:150px;">
            <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" label-width="70px">
          <el-select v-model="queryParams.level" placeholder="请选择安全分级" style="width:150px;">
            <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 style="float: right;">
          <p class="reset-button-one" @click="backPage"><i class="el-icon-arrow-left"></i>返回</p>
        </el-form-item>
        <el-form-item style="float: right;">
          <el-button
            style="float: left;width:150px;"
            type="primary"
            plain
            @click="associationButton"
          >新增关联实验室</el-button>
        </el-form-item>
        <el-form-item>
          <p class="inquire-button-one" @click="onSearch">查询</p>
          <p class="reset-button-one" @click="resetForm">重置</p>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" border :data="tableData">
        <el-table-column label="预案名称" align="left" prop="name" />
        <el-table-column label="学院" align="left" prop="deptName" width="200"/>
        <el-table-column label="类型" align="left" prop="moldName" width="150"/>
        <el-table-column label="安全分类" align="left" prop="typeName" width="150"/>
        <el-table-column label="安全分级" align="left" prop="levelName" width="150"/>
        <el-table-column label="实验室负责人" align="left" prop="adminName" width="150"/>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160">
          <template slot-scope="scope">
            <div class="button-box">
              <p class="table-min-button"
                 @click="delClick(scope.row)">删除</p>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        layout="total, prev, pager, next, sizes, jumper"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getListPlan"
      />
      <!--关联实验室-->
      <el-dialog title='关联实验室'  @close="handleLabClose" v-if="dialogVisible" :visible.sync="dialogVisible" width="80%">
        <el-form :model="dialogForm" ref="queryForm" :inline="true">
          <el-form-item label="实验室名称" prop="name">
            <el-input
              style="width:160px;"
              v-model="dialogForm.name"
              placeholder="请输入实验室名称"
              clearable
              size="small"
            />
          </el-form-item>
          <el-form-item label="学院" prop="type" >
            <el-select v-model="dialogForm.deptId" placeholder="请选择学院" clearable
                       style="width:160px;">
              <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" class="form-item">
            <el-select v-model="dialogForm.typeId" placeholder="请选择安全分类" clearable
                       style="width:160px;">
              <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" class="form-item">
            <el-select v-model="dialogForm.level" placeholder="请选择安全分级" clearable
                       style="width:160px;">
              <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 label="实验室负责人" prop="name" >
            <el-input
              style="width:160px;"
              v-model="dialogForm.adminName"
              placeholder="请输入实验室负责人"
              clearable
              size="small"
            />
          </el-form-item>
          <el-form-item>
            <p class="inquire-button-one" style="margin-left:20px;" @click="onSearch2">查询</p>
            <p class="reset-button-one" @click="resetForm2">重置</p>
          </el-form-item>
        </el-form>
        <div class="btn_list">
          <i class="el-icon-warning"></i>
          <i>已选择 {{labRiskPlanjoinsubList.length}} 项</i>
          <i @click="toggleSelection(dialogTable)">全选本页</i>
          <i @click="submitFormAll">选择全部</i>
          <i></i>
          <i @click="toggleSelection()">清除选项</i>
          <div class="bottom-button-box">
            <p @click="handleClick">取消</p>
            <p @click="submitForm">确定</p>
            <!--<el-button class="color_99" @click="handleClick('','','back')">取消</el-button>-->
            <!--<el-button class="color_ff back_one" @click="submitForm">确定</el-button>-->
          </div>
        </div>
        <el-table ref="multipleTable" border :data="dialogTable" highlight-current-row @selection-change="handleSelectionChange" :row-key="getRowKeys" style="height:500px;cursor: pointer;">
          <el-table-column
            :reserve-selection="true"
            type="selection"
            align="center"
            width="55">
          </el-table-column>
          <el-table-column label="实验室" show-overflow-tooltip align="left" prop="name"/>
          <el-table-column label="学院" align="left" prop="deptName" />
          <el-table-column label="安全分类" align="left" prop="typeName" />
          <el-table-column label="安全分级" align="left" prop="levelName" >
            <template slot-scope="scope">
              <span :style="'color:'+scope.row.fiedColor+';'">{{scope.row.levelName}}</span>
            </template>
          </el-table-column>
          <el-table-column label="实验室负责人" align="left" prop="adminName" />
        </el-table>
        <pagination
          v-show="total2>0"
          :total="total2"
          :page.sync="dialogForm.pageNum"
          :limit.sync="dialogForm.pageSize"
          @pagination="getList"
        />
      </el-dialog>
    </div>
</template>

<script>
  import {
    addPlan,
    updatePlan,
    listPlan,
    getUserRoleBySub,
    getLabRiskPlanRepeat,
    getLabRiskPlanJoinSub,
    riskPlanJoinSub,
    delPlan,
    getUserRoleBySubOperation,
    getUserRoleBySubBindRisk,
    removeByPlanJoinSub,
  } from "@/api/laboratory/plan";
  import {listDepartments} from "@/api/system/dept";
  import {listClassifiedAll} from "@/api/laboratory/classified";
  import {listClasstypeAll} from "@/api/laboratory/classtype";
  import { queryOption } from "@/api/laboratory/labMold";
  export default {
    name: "associationPage",
    props:{
      associationData:{},
    },
    data() {
      return {
        loading:true,
        deptOptions:[],
        typeList:[],
        levelList:[],
        total:0,
        queryParams:{
          pageNum:1,
          pageSize:20,
        },
        tableData:[],
        //实验室弹框
        dialogVisible:false,
        dialogSub:{},//关联实验室提交对象
        dialogTable:[],
        total2:0,
        dialogForm:{
          pageNum: 1,
          pageSize:20,
          name: null,
          deptId: null,
          typeId: null,
          level: null,
          adminName: null,
        },
        labRiskPlanjoinsubList:[],//选中实验室
        //实验室类型
        labMoldList:[],
      }
    },
    mounted(){
      this.getListPlan();
      this.getDeptListTow();
      this.getListClassifiedAll();
      this.getListClasstypeAll();
      this.getUserRoleBySubOperation();
      this.queryOption();
    },
    methods:{
      queryOption(){
        queryOption({}).then(response=>{
          if(response.code==200){
            this.labMoldList=response.data
          }
        })
      },
      /** 查询学院列表 */
      getDeptListTow() {
        listDepartments().then(response => {
          // this.deptOptionsTwo = response.data;
          this.$set(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;
          }
        });
      },
      /** 查询实验室根据实验室管理员用户权限是否有操作权限 */
      getUserRoleBySubOperation(){
        getUserRoleBySubOperation({}).then(response => {

          if(response.code==200){
            this.labShow= response.data  //返回true是实验室管理员，false不是实验室管理员
            this.joinSubOper=response.data;
          }
        });
      },
      associationButton(){
        let  _this = this;
        //关联实验室
        this.dialogSub.id = _this.associationData.row.id;
        this.dialogVisible = true;
        this.checkedLabList=[];
        console.log('有相同的实验室',_this.associationData.row.labRiskPlanjoinsubList)
        //根据列表返回的实验室信息循环匹配相同实验室信息
        setTimeout(function(){
          let newList = [];
          _this.tableData.forEach(function (item2,index){
            _this.$refs.multipleTable.toggleRowSelection(item2,true);
            newList.push(item2)
          })
          _this.$set(_this,'checkedLabList',newList)
          console.log('newList',newList)
          _this.getList();
        },100);
      },
      /** 查询实验室列表 */
      getList() {
        let _this=this;
        getUserRoleBySub(this.dialogForm).then(response => {
          this.dialogTable = response.rows;
          this.total2 = response.total;
          // for(let i=0;i<_this.checkedLabList.length;i++){
          //   _this.$refs.multipleTable.toggleRowSelection(_this.checkedLabList[i],true)
          //   console.log("123")
          // }
        });
      },
      //选中实验室
      handleSelectionChange(val){
        let _this=this;
        _this.labRiskPlanjoinsubList=[];
        console.log("val",val);
        let newList = [];
        val.forEach(function (item,index){
          newList.push({'subjectId':item.id})
        })
        this.$set(this,'labRiskPlanjoinsubList',newList)

      },
      /*===记录勾选数据===
        需要再el-table 添加  :row-key="getRowKeys"
        需要在selection 添加 :reserve-selection="true"
      */
      getRowKeys(row) {
        return row.subjectId
      },
      //查询
      onSearch2() {
        this.dialogForm.pageNo = 1;
        this.getList();
      },
      //重置
      resetForm2() {
        this.dialogForm.name = '';
        this.dialogForm.deptId = '';
        this.dialogForm.typeId = '';
        this.dialogForm.level = '';
        this.dialogForm.adminName = '';
        this.onSearch2();
      },
      //全部实验室关联
      submitFormAll(){
        let _this=this;
        _this.dialogSub.labRiskPlanjoinsubList=_this.labRiskPlanjoinsubList
        _this.dialogSub.joinSubOper=this.joinSubOper;
        let obj1 = JSON.parse(JSON.stringify(_this.dialogSub))
        obj1.allSelect = true;
        getLabRiskPlanJoinSub(obj1).then(response => {
          if(response.code = 200){
            if(response.data.repeat==true){//：如果为true，就是有重复的，如果为false，就表示没有重复的
              this.$confirm(response.data.tipsStr, '提示', {
                distinguishCancelAndClose:true,
                confirmButtonText: '是',
                cancelButtonText: '否',
                type: 'warning'
              }).then(() => {//确定
                _this.dialogSub.yesOrNo=true;//是否覆盖提交，true是，false否
                let obj2 = JSON.parse(JSON.stringify(this.dialogSub))
                obj2.allSelect = true;
                riskPlanJoinSub(obj2).then(response => {
                  if(response.code = 200){
                    this.getListPlan();
                    this.msgSuccess("修改成功");
                    this.dialogVisible = false;
                  }
                });
              }).catch(action => {
                if(action === 'cancel'){
                  _this.dialogSub.yesOrNo=false;//是否覆盖提交，true是，false否
                  let obj3 = JSON.parse(JSON.stringify(this.dialogSub))
                  obj3.allSelect = true;
                  riskPlanJoinSub(obj3).then(response => {
                    if(response.code = 200){
                      this.getListPlan();
                      this.msgSuccess("修改成功");
                      this.dialogVisible = false;
                    }
                  });
                }
              });
            }else if(response.data.repeat==false){//：如果为true，就是有重复的，如果为false，就表示没有重复的
              _this.dialogSub.yesOrNo=false;//是否覆盖提交，true是，false否
              let obj4 = JSON.parse(JSON.stringify(this.dialogSub))
              obj4.allSelect = true;
              riskPlanJoinSub(obj4).then(response => {
                if(response.code = 200){
                  this.getListPlan();
                  this.msgSuccess("修改成功");
                  this.dialogVisible = false;
                }
              });
            }
          }
        });
      },
      /** 关联实验室 */
      submitForm() {
        let _this=this;
        _this.dialogSub.labRiskPlanjoinsubList=_this.labRiskPlanjoinsubList
        _this.dialogSub.joinSubOper=this.joinSubOper;
        let obj1 = JSON.parse(JSON.stringify(_this.dialogSub))
        obj1.allSelect = false;
        getLabRiskPlanJoinSub(obj1).then(response => {
          if(response.code = 200){
            if(response.data.repeat==true){//：如果为true，就是有重复的，如果为false，就表示没有重复的
              this.$confirm(response.data.tipsStr, '提示', {
                distinguishCancelAndClose:true,
                confirmButtonText: '是',
                cancelButtonText: '否',
                type: 'warning'
              }).then(() => {//确定
                _this.dialogSub.yesOrNo=true;//是否覆盖提交，true是，false否
                let obj2 = JSON.parse(JSON.stringify(this.dialogSub))
                obj2.allSelect = false;
                riskPlanJoinSub(obj2).then(response => {
                  if(response.code = 200){
                    this.msgSuccess("修改成功");
                    this.getListPlan();
                    this.dialogVisible = false;
                  }
                });
              }).catch(action => {
                if(action === 'cancel'){
                  _this.dialogSub.yesOrNo=false;//是否覆盖提交，true是，false否
                  let obj3 = JSON.parse(JSON.stringify(this.dialogSub))
                  obj3.allSelect = false;
                  riskPlanJoinSub(obj3).then(response => {
                    if(response.code = 200){
                      this.msgSuccess("修改成功");
                      this.getListPlan();
                      this.dialogVisible = false;
                    }
                  });
                }
              });
            }else if(response.data.repeat==false){//：如果为true，就是有重复的，如果为false，就表示没有重复的
              _this.dialogSub.yesOrNo=false;//是否覆盖提交，true是，false否
              let obj4 = JSON.parse(JSON.stringify(this.dialogSub))
              obj4.allSelect = false;
              riskPlanJoinSub(obj4).then(response => {
                if(response.code = 200){
                  this.msgSuccess("修改成功");
                  this.getListPlan();
                  this.dialogVisible = false;
                }
              });
            }
          }
        });
      },
      handleClick() {
        this.dialogVisible=false;
        this.getListPlan();
        this.$forceUpdate();
      },
      //取消选中
      toggleSelection(rows) {
        console.log(rows)
        if (rows) {
          this.$refs.multipleTable.clearSelection();
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      //监听实验室弹窗关闭
      handleLabClose(){
        this.getListPlan();
        this.dialogForm.pageNum = 1;
        this.$refs.multipleTable.clearSelection()
        // if(this.checkedLabList){
        //   console.log('实验室信息回显')
        //   this.$nextTick(() => {
        //     this.checkedLabList.forEach(row => {
        //       this.$refs.multipleTable.toggleRowSelection(row);
        //     });
        //   })
        // }
      },
      backPage(){
        this.$parent.handleClose();

      },
      getListPlan(){
        //?pageNum=1&pageSize = 20&pageNo=1&riskId=25
        let obj = JSON.parse(JSON.stringify(this.queryParams));
        obj.pageNo = '';
        obj.riskId = this.associationData.row.id;
        getUserRoleBySubBindRisk(obj).then(response => {
          this.tableData = response.rows;
          this.loading = false;
        })
      },
      //删除
      delClick(item){
        let self = this;
        this.$confirm('是否确认删除?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          let obj = {
            riskPlanId:self.associationData.row.id,
            subjectId:item.subjectId
          };
          removeByPlanJoinSub(obj).then(response => {
            self.getListPlan();
            self.msgSuccess("删除成功");
          })
        }).then(() => {
        }).catch(() => {});
      },
      //查询
      onSearch() {
        this.queryParams.pageNum = 1;
        this.getListPlan();
      },
      //重置
      resetForm() {
        this.dateRange=[];
        this.queryParams.searchValue = '';
        this.queryParams.deptId = '';
        this.queryParams.moldId = '';
        this.queryParams.typeId = '';
        this.queryParams.level = '';
        this.onSearch();
      },
    }
  }
</script>

<style scoped lang="scss">
  .associationPage{
    flex:1;
    display: flex;
    flex-direction: column;

    .btn_list{
      width: 100%;
      height: 40px;
      background: rgba(1,131,250,0.1);
      border-radius: 6px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 32px;
      >i{
        font-style: normal;
        display: inline-block;
        cursor: pointer;
      }
      >i:nth-of-type(1){
        font-size: 20px;
        color: #0045AF;
        margin: 0 16px 0 14px;
      }
      >i:nth-of-type(2){
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #999999;
        line-height: 16px;
      }
      >i:nth-of-type(3){
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #0045AF;
        line-height: 16px;
        margin: 0 28px 0 46px;
      }
      >i:nth-of-type(4){
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #0045AF;
        line-height: 16px;
        margin: 0 28px 0 46px;
      }
      >i:nth-of-type(5){
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #0045AF;
        line-height: 16px;
      }
      >i:nth-of-type(6){
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #FFA312;
        line-height: 16px;
        margin: 0 40px 0 28px;
      }
      .bottom-button-box{
        display: flex;
        width:220px;
        p{
          font-size:14px;
          height:30px;
          width:100px;
          line-height:30px;
          text-align: center;
          border-radius:4px;
          cursor: pointer;
        }
        p:nth-child(1){
          border:1px solid #E0E0E0;
          margin-right:20px;
          color: #666;
        }
        p:nth-child(2){
          background: #0183FA;
          border:1px solid #0183FA;
          color:#fff;
        }
      }
    }
  }
</style>