zc

src/views/comprehensive/laboratoryManagement/subject/addSubject.vue

@@ -102,10 +102,109 @@
           <!--&gt;</el-option>-->
         <!--</el-select>-->
       <!--</el-form-item>-->
-      <div class="title-box">
-        <p class="left-title">安全信息牌</p>
+      <div class="title-button-box">
+        <div class="title-min-button-box" :class="checkButtonType == 1?'checkButtonBox':''">
+          <p @click="clickButtonType(1)">管控一体机</p>
+          <p></p>
+        </div>
+        <div class="title-min-button-box" :class="checkButtonType == 2?'checkButtonBox':''">
+          <p @click="clickButtonType(2)">安全信息牌</p>
+          <p></p>
+        </div>
+        <div class="title-null-div">
+          <p></p>
+          <p></p>
+        </div>
       </div>
-      <div class="bottom-form-box">
+      <!--管控一体机-->
+      <div class="bottom-form-box-one" v-if="checkButtonType == 1">
+        <div class="left-form-box">
+          <el-form-item label="实验室负责人" prop="adminId" class="form-item">
+            <el-select
+              style="width:500px;"
+              v-model="form.adminId"
+              filterable
+              remote
+              clearable
+              reserve-keyword
+              placeholder="请输入至少2个字符搜索相关人员"
+              :remote-method="userSelectList"
+              :loading="loading">
+              <el-option
+                v-for="item in optionsUser"
+                :key="item.userId"
+                :label="item.nickName"
+                :value="item.userId">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="安全警示标识" prop="safeSigns" class="form-item">
+            <el-select v-model="form.safeSigns" multiple  placeholder="请选择安全警示标识" style="width:500px;">
+              <el-option
+                v-for="dict in safetyWarning"
+                :key="dict.dictValue"
+                :label="dict.dictLabel"
+                :value="dict.dictValue"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="风控防控措施" prop="riskMeasure" class="form-item">
+            <el-select v-model="form.riskMeasure" multiple  placeholder="请选择风险防控措施" style="width:500px;">
+              <el-option
+                v-for="dict in riskMeasure"
+                :key="dict.dictValue"
+                :label="dict.dictLabel"
+                :value="dict.dictValue"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </div>
+        <div class="right-form-box">
+          <el-form-item label="安全责任人" prop="safeUserId" class="form-item">
+            <el-select
+              style="width:500px;"
+              v-model="form.safeUserId"
+              :multiple-limit="2"
+              multiple
+              filterable
+              remote
+              clearable
+              reserve-keyword
+              placeholder="请输入至少2个字符搜索相关人员"
+              :remote-method="userSelectListOne"
+              :loading="loading">
+              <el-option
+                v-for="item in optionsUserOne"
+                :key="item.userId"
+                :label="item.nickName"
+                :value="item.userId">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="主要危险类别" prop="hazardCategory" class="form-item">
+            <el-select v-model="form.hazardCategory" multiple  placeholder="请选择主要危险类别" style="width:500px;">
+              <el-option
+                v-for="dict in hazardCategory"
+                :key="dict.dictValue"
+                :label="dict.dictLabel"
+                :value="dict.dictValue"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="灭火要点" prop="outfire" class="form-item">
+            <el-select v-model="form.outfire" multiple  placeholder="请选择灭火要点" style="width:500px;">
+              <el-option
+                v-for="dict in extinguishingKeyPoints"
+                :key="dict.dictValue"
+                :label="dict.dictLabel"
+                :value="dict.dictValue"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </div>
+      </div>
+      <!--安全信息牌-->
+      <div class="bottom-form-box" v-if="checkButtonType == 2">
         <div class="top-form-box">
           <el-form-item label="实验室负责人" prop="adminId" class="form-item" label-width="180px">
             <el-select
@@ -249,6 +348,8 @@
 
           },
           labMoldList:[],
+          //一体机/电子信息牌状态切换
+          checkButtonType:1,
         }
       },
       created() {
@@ -259,9 +360,6 @@
         this.getListClasstypeAll();
         this.labMoldQueryOption();
 
-        if(!this.subjectData.id){
-          this.getClassifyBySubId();
-        }
         //安全标识字典
         this.getDicts("sys_safety_warning").then(response => {
           this.safetyWarning = response.data;
@@ -336,7 +434,7 @@
             this.$set(this.form, 'safeUserId', safeUserIdList);
           }
           //安全信息牌
-          if(this.subjectData.classifyList){
+          if(this.subjectData.classifyList[0]){
             //循环取安全信息牌信息
             let list=this.subjectData.classifyList
             for(let i=0;i<list.length;i++){
@@ -349,6 +447,8 @@
               }
             }
             this.safetyInfoList=list
+          }else{
+            this.getClassifyBySubId();
           }
           //根据学院获取楼栋
           listbuildings(this.form.deptId).then(response => {
@@ -365,6 +465,12 @@
         }
       },
       methods:{
+        //一体机/电子信息牌切换
+        clickButtonType(type){
+          if(type != this.checkButtonType){
+            this.$set(this,'checkButtonType',type);
+          }
+        },
         hardwareTypeFun(){
           if(this.hardwareTypeTow==1 && this.subjectData.hKCount>0){
             this.msgError("删除现有准入设备后，才能更改准入设备类型!");
@@ -550,6 +656,43 @@
     *{
       margin:0;
     }
+    .title-button-box{
+      display: flex;
+      padding:0 20px 30px 20px;
+      .title-min-button-box{
+        p:nth-child(1){
+          cursor: pointer;
+          text-align: center;
+          font-size:18px;
+          color:#999;
+          line-height:80px;
+          height:80px;
+          padding-right:40px;
+        }
+        p:nth-child(2){
+          height:1px;
+          background-color: #dedede;
+        }
+        .checkButtonBox{
+          color:#0045AF;
+        }
+      }
+      .checkButtonBox{
+        p:nth-child(1){
+          color:#0045AF!important;
+        }
+      }
+      .title-null-div{
+        flex:1;
+        p:nth-child(1){
+          height:80px;
+        }
+        p:nth-child(2){
+          height:1px;
+          background-color: #dedede;
+        }
+      }
+    }
     .title-box{
       display: flex;
       margin:0 20px 30px;
@@ -585,6 +728,22 @@
         margin-bottom:30px;
       }
     }
+    .bottom-form-box-one{
+      display: flex;
+      padding-left:20px;
+      .left-form-box{
+        width:650px;
+      }
+      .right-form-box{
+        width:650px;
+      }
+      .form-item{
+        display: inline-block;
+        overflow: hidden;
+        min-height:40px;
+        margin-bottom:30px;
+      }
+    }
     .rich-text{
       margin: 20px;
     }