heyang

src/views/integratedManagement/laboratoryManagement/safetyInfoCategory/addSafetyInfoConfig.vue

@@ -0,0 +1,429 @@
+<!--新增信息配置-->
+<template>
+  <div class="page-container notice-addPage">
+    <div class="page-top-title-box">
+      <p class="page-top-title-name-p">{{form.id?'编辑':'新增'}}</p>
+      <p class="page-top-title-out-p" @click="backPage">返回</p>
+      <p class="page-top-title-add-p" @click="submitForm">提交</p>
+    </div>
+    <div class="content-box">
+      <el-form ref="form" :model="form" :rules="rules" label-width="120px" >
+        <el-form-item label="信息名称:" prop="infoName">
+          <el-input v-model="form.infoName" maxlength="100" placeholder="请输入名称" style="width:600px;"/>
+        </el-form-item>
+        <el-form-item label="信息类目:"  prop="brandId" class="form-item">
+          <el-select placeholder="请选择类目" v-model="form.brandId" style="width:600px;" @change="categoryClick()">
+            <el-option
+              v-for="dict in categoryList"
+              :key="dict.brandId"
+              :label="dict.brandName"
+              :value="dict.brandId"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="信息类型:">
+          <el-input v-model="form.infoType==1?'文字':'图片'"   placeholder="" disabled style="width:600px;"/>
+        </el-form-item>
+        <el-form-item label="信息内容:" prop="infoContent" v-if="form.infoType==1">
+          <el-input type="textarea" v-model="form.infoContent"  maxlength="200" placeholder="请输入内容" style="width:600px;"/>
+        </el-form-item>
+        <el-form-item label="信息内容:" prop="infoContent" v-if="form.infoType==2">
+          <el-upload
+            class="certificate-avatar-uploader"
+            :action="uploadImgUrl"
+            :show-file-list="false"
+            :on-success="handleAvatarSuccess"
+            :headers="headers"
+            :before-upload="beforeAvatarUpload">
+            <div style="display: flex;">
+              <img v-if="form.infoContent" :src="form.infoContent" style="width: 80px;height: 80px;margin-right: 10px">
+              <i v-if="!form.infoContent" class="el-icon-plus avatar-uploader-icon"></i>
+            </div>
+          </el-upload>
+        </el-form-item>
+        <P v-if="form.infoType==2" style="margin-left: 120px">图片最大上传630*78，建议尺寸58*78</P>
+        <el-form-item label="危险源:">
+          <p class="danger-tip">实验室危险源满足以下分类配置，会在信息牌中自动显示此安全信息。</p>
+        </el-form-item>
+        <div class="danger-table">
+          <el-table class="table-box" v-loading="loading" border :data="form.listHazardModel"  ref="table-box">
+            <el-table-column label="序号" type="index" align="center" width="50"/>
+            <el-table-column label="危险源主分类"  align="left" prop="hazardName" show-overflow-tooltip/>
+            <el-table-column label="危险源子分类"  align="left" prop="hazardCodeName" show-overflow-tooltip/>
+            <el-table-column label="操作" width="120" align="left">
+              <template slot-scope="scope">
+                <div class="table-button-box">
+                  <p class="table-button-null"></p>
+                  <p class="table-button-p"
+                   @click="delHazard(scope.row)"
+                  >删除</p>
+                  <p class="table-button-null"></p>
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <div class="danger-add" @click="dangerAdd">+ 新增危险源</div>
+      </el-form>
+    </div>
+    <el-dialog title="新增危险源分类" :visible.sync="dialogVisible" width="970px" append-to-body>
+      <div class="classify-name"><i>*</i>选择危险源分类:</div>
+      <div class="classify">
+        <div class="classify-li" v-for="(item,index) in conditionList">
+          <div class="classify-li-l">{{item.hazardName}}</div>
+          <div class="classify-li-r">
+            <p><el-checkbox v-model="item.checkAll" @change="handleCheckAllChange($event,item)">{{item.allName}}</el-checkbox></p>
+            <p>
+              <el-checkbox-group v-model="item.checkedCities" @change="handleCheckedCitiesChange($event,item)">
+                <el-checkbox v-for="item2 in item.dictItemModels" :label="item2.label" :key="item2.value">{{item2.label}}</el-checkbox>
+              </el-checkbox-group>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer dialog-footer-box">
+        <p class="dialog-footer-button-null"></p>
+        <p class="dialog-footer-button-info" @click="cancel">取消</p>
+        <p class="dialog-footer-button-primary" @click="conditionSubmitForm">保存</p>
+        <p class="dialog-footer-button-null"></p>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  laboratoryBrandDetailAdd, laboratoryBrandDetailGetDetailHazardConfig,
+  laboratoryBrandDetailUpdate,
+  laboratoryInfoBrandList
+} from '@/api/integratedManagement'
+  import { getToken } from '@/utils/auth'
+  export default {
+    name: 'addPage',
+    props:{
+      propsData:{},
+    },
+    data(){
+      return{
+        uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
+        loading:false,
+        headers: {
+          Authorization: getToken()
+        },
+        tabsList:[],
+        categoryList:[],
+        infoType:null,
+        form: {
+          brandId:'',
+          infoName:'',
+          infoType:'',
+          infoContent:'',
+          isCollective:'',
+          listHazardModel:[],
+        },
+        dataList:[],
+        dialogVisible:false,
+        conditionList:[],
+
+        // 表单校验
+        rules: {
+          infoName: [
+            { required: true, message: "请输入名称", trigger: "blur" },
+          ],
+          brandId: [
+            { required: true, message: "请选择类目", trigger: "blur" },
+          ],
+          infoContent: [
+            { required: true, message: "请添加信息内容", trigger: "blur" },
+          ],
+        }
+      }
+    },
+    created(){
+      this.form = this.propsData;
+
+    },
+    mounted(){
+      this.getCategoryList();
+      this.laboratoryBrandDetailGetDetailHazardConfig();
+    },
+    methods:{
+      dangerAdd(){
+        this.dialogVisible=true;
+      },
+      //全选按钮
+      handleCheckAllChange(val,item) {
+        let name=[];
+        for (let i=0;i<item.dictItemModels.length;i++){
+          name.push(item.dictItemModels[i].label)
+        }
+        item.checkedCities = val ? name : [];
+      },
+      //单个选择按钮
+      handleCheckedCitiesChange(value,item) {
+        let checkedCount = value.length;
+        item.checkAll = checkedCount === item.dictItemModels.length;
+      },
+      // 取消按钮
+      cancel() {
+        this.dialogVisible = false;
+      },
+      categoryClick(){
+        let self=this;
+        this.form.infoContent='';
+        this.categoryList.forEach(function(item) {
+          if(item.brandId==self.form.brandId){
+            self.$set(self.form,'infoType',item.brandType);
+          }
+        })
+
+      },
+      //获取危险源列表
+      laboratoryBrandDetailGetDetailHazardConfig(){
+        let self=this;
+        laboratoryBrandDetailGetDetailHazardConfig({dictCode:'lab_dangerous_source'}).then( response => {
+
+          if (this.propsData.detailId){//编辑
+            response.data.forEach(function(item){
+              item.allName='全选';
+              item.checkAll=false;
+              item.checkedCities=[];
+            })
+
+            response.data.forEach(function(item){
+              let list=[];
+              //详情返回的数组
+              self.form.listHazardModel.forEach(function(item2) {
+                let hazardCodeName=item2.hazardCodeName.split(',')
+                if (item.hazardKey==item2.hazardKey){
+                  if (item.dictItemModels.length ==hazardCodeName.length){
+                    item.checkAll=true;
+                  }
+                  item.checkedCities=hazardCodeName;
+                }
+              })
+
+            })
+          }else{//新增
+            response.data.forEach(function(item){
+              item.allName='全选';
+              item.checkAll=false;
+              item.checkedCities=['1'];
+            })
+          }
+          this.$set(this,'conditionList',response.data)
+
+        });
+      },
+      //删除危险源
+      delHazard(row){
+        this.form.listHazardModel = this.form.listHazardModel.filter(item => item !== row);
+      },
+      //危险源保存
+      conditionSubmitForm(){
+        //分类认定条件数据筛选
+        let list=[];
+        this.conditionList.forEach(function(item) {
+          let list2=[];
+          let list3=[];
+          if (item.checkedCities.length>0){
+            item.dictItemModels.forEach(function(item2) {
+              item.checkedCities.forEach(function(item3) {
+                if (item3==item2.label){
+                  list2.push(item2.value)
+                  list3.push(item2.label)
+                }
+              })
+            })
+            list.push({hazardKey:item.hazardKey,hazardName:item.hazardName,hazardCode:list2.join(','),hazardCodeName:list3.join(',')})
+          }
+        })
+        if(!list[0]){
+          this.msgError('请勾选危险源分类')
+          return
+        }
+        this.$set(this.form, 'listHazardModel',list)
+        this.$set(this, 'dialogVisible',false)
+
+
+      },
+      //查询信息类目列表
+      getCategoryList(){
+        let obj={
+          page: 1,
+          pageSize:100,
+          isShow:1,
+        }
+        laboratoryInfoBrandList(obj).then( response => {
+          this.$set(this,'tabsList',response.data.records);
+          this.$set(this,'categoryList',response.data.records);
+          this.$set(this,'infoType',response.data.records[0]?response.data.records[0].brandType+'':'');
+
+        });
+      },
+      // 返回按钮
+      backPage(){
+        this.$parent.handleClick('','','back');
+      },
+      /** 提交按钮 */
+      submitForm() {
+        this.$refs["form"].validate(valid => {
+          if (valid) {
+            if (this.form.detailId) {
+              laboratoryBrandDetailUpdate(this.form).then( response => {
+                this.msgSuccess(response.message);
+                this.open = false;
+                this.$parent.handleClick('','','back');
+              });
+            } else {
+              laboratoryBrandDetailAdd(this.form).then( response => {
+                this.msgSuccess(response.message);
+                this.open = false;
+                this.$parent.handleClick('','','back');
+              });
+            }
+          }
+        });
+      },
+      //上传
+      handleAvatarSuccess(res, file) {
+        this.form.infoContent = res.data.url;
+        this.$forceUpdate()
+      },
+      beforeAvatarUpload(file) {
+        return new Promise((resolve, reject) => {
+          if (file.type == 'image/png') {
+            let reader = new FileReader()
+            reader.readAsDataURL(file) // 必须用file.raw
+            reader.onload = e => { // 让页面中的img标签的src指向读取的路径
+              let img = e.target.result;
+              const image = new Image()
+              image.src=img
+              image.onload = _=>{
+                if(image.width <= 630 && image.height <= 78){
+                  resolve()
+                }else{
+                  this.msgError('尺寸限制为最大630*78px，支持PNG格式')
+                  reject();
+                }
+              }
+            }
+          }else{
+            this.msgError('请上传PNG格式');
+            reject();
+          }
+        })
+      },
+
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+  .notice-addPage{
+    .content-box{
+      flex:1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      padding:20px;
+    }
+    .danger-tip{
+      font-weight: 400;
+      font-size: 16px;
+      color: #FF0000;
+      line-height: 24px;
+      text-align: left;
+      margin-top: 8px;
+    }
+    .danger-table{
+      width: 600px;
+      margin-left: 120px;
+    }
+    .danger-add{
+      width: 500px;
+      height: 40px;
+      border-radius: 4px 4px 4px 4px;
+      border: 1px dashed #0183FA;
+      margin-left: 170px;
+      font-weight: 400;
+      font-size: 14px;
+      color: #0183FA;
+      line-height: 40px;
+      text-align: center;
+      margin-top: 20px;
+      cursor: pointer;
+    }
+    .certificate-avatar-uploader{
+      i{
+        width:80px;
+        height:80px;
+        line-height:80px;
+        text-align: center;
+        border:1px solid #e0e0e0;
+        border-radius:4px;
+      }
+      img{
+        width:240px;
+        height:240px;
+      }
+    }
+
+  }
+  .classify-name{
+    margin-bottom: 20px;
+    margin-left: 34px;
+    >i{
+      color: #ff4949;
+      margin-right: 4px;
+    }
+    color: #333;
+    font-size: 14px;
+    font-weight: 500;
+  }
+  .classify{
+    width: 820px;
+    height: 236px;
+    overflow-y: auto;
+    margin-left: 38px;
+    .classify-li{
+      min-height: 80px;
+      display: flex;
+      justify-content: flex-start;
+      border: 1px solid #E0E0E0;
+      border-top: 0;
+      .classify-li-l{
+        width: 150px;
+        min-height: 80px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-right: 1px solid #E0E0E0;
+        background: #F5F5F5;
+      }
+      .classify-li-r{
+        .el-checkbox{
+          margin:4px 30px 4px 0;
+        }
+        flex: 1;
+        >p{
+          display: flex;
+          align-items: center;
+          padding-left: 14px;
+          box-sizing: border-box;
+        }
+        >p:nth-of-type(1){
+          min-height: 40px;
+          border-bottom:1px solid #E0E0E0;
+          background: #F5F5F5;
+        }
+        >p:nth-of-type(2){
+          min-height: 40px;
+        }
+      }
+    }
+    .classify-li:first-child{
+      border-top: 1px solid #E0E0E0;
+    }
+  }
+</style>

src/views/integratedManagement/laboratoryManagement/safetyInfoCategory/safetyInfoConfig.vue

@@ -1,162 +1,125 @@
 <!--安全信息配置-->
 <template>
   <div class="safetyInfoConfig">
-    <div class="title-box">
-      <div @click="titleClick(1)">
-        <p>安全类目</p>
-        <p></p>
-      </div>
-      <div @click="titleClick(2)">
-        <p>信息配置</p>
-        <p class="bottom-p-color"></p>
-      </div>
-    </div>
-    <div class="config_main">
-      <div class="config_main_l scrollbar-box">
-        <div class="config_main_l_title">
-          <img  src="@/assets/ZDimages/integratedManagement/icon_xxpz_aqxxlm.png">
-          安全信息类目
+    <div v-if="pageType==1">
+      <div class="title-box">
+        <div @click="titleClick(1)">
+          <p>安全类目</p>
+          <p></p>
         </div>
-        <div :class='currentIndex==index?"active":""' class="config_main_l_li"
-             v-for="(item,index) in tabsList" :key="index" @click="handleTabClick(item,index)">
-          {{item.brandName}}
+        <div @click="titleClick(2)">
+          <p>信息配置</p>
+          <p class="bottom-p-color"></p>
         </div>
       </div>
-      <p class="config_main_border"></p>
-      <div class="approval_handle-page">
-        <div>
-          <p class="page-submit-common-style-button"
-             style="float: right;margin-bottom:20px;"
-             @click="handleClick('','','add')"
-             v-hasPermiRouter="['lab:infoBrand:add']"
-          >新增</p>
+      <div class="config_main">
+        <div class="config_main_l scrollbar-box">
+          <div class="config_main_l_title">
+            <img  src="@/assets/ZDimages/integratedManagement/icon_xxpz_aqxxlm.png">
+            安全信息类目
+          </div>
+          <div :class='currentIndex==index?"active":""' class="config_main_l_li"
+               v-for="(item,index) in tabsList" :key="index" @click="handleTabClick(item,index)">
+            {{item.brandName}}
+          </div>
+        </div>
+        <p class="config_main_border"></p>
+        <div class="approval_handle-page">
+          <div>
+            <p class="page-submit-common-style-button"
+               style="float: right;margin-bottom:20px;"
+               @click="handleClick('','','add')"
+               v-hasPermiRouter="['lab:infoBrand:add']"
+            >新增</p>
+          </div>
+          <el-table class="table-box" border v-loading="loading" :data="tableData">
+            <el-table-column label="排序" align="left" class-name="small-padding fixed-width" width="80">
+              <template slot-scope="scope">
+                <el-input
+                  onkeyup="value=value.replace(/[^\d]/g,'')"
+                  class="serial"
+                  v-model="scope.row.orderNum"
+                  @change="categorySort(scope.row)"
+                  maxLength="3"
+                  placeholder="序号">
+                </el-input>
+              </template>
+            </el-table-column>
+            <el-table-column label="信息名称" align="left" prop="infoName"/>
+            <el-table-column label="公共信息" align="left">
+              <template slot-scope="scope">
+                <el-switch
+                  @click.native="categoryShow(scope.row)"
+                  class="switch captcha-img"
+                  :active-value="true"
+                  :inactive-value="false"
+                  active-color="#FF9900"
+                  inactive-color="#999"
+                  v-model="scope.row.isCollective"
+                  active-text="是"
+                  inactive-text="否"
+                  disabled
+                ></el-switch>
+              </template>
+            </el-table-column>
+            <el-table-column label="危险源" align="left" prop="createName"/>
+            <el-table-column label="添加人" align="left" prop="createName"/>
+            <el-table-column label="添加时间" align="left" prop="createTime">
+              <template slot-scope="scope">
+                <span>{{ parseTime(scope.row.createTime,"{y}-{m}-{d} {h}:{i}") }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="120" v-if="tableButtonType">
+              <template slot-scope="scope">
+                <div class="table-button-box">
+                  <p class="table-button-null"></p>
+                  <p class="table-button-p"
+                     v-hasPermiRouter="['lab:infoBrand:edit']"
+                     @click="handleClick('',scope.row,'edit')"
+                  >编辑</p>
+                  <p class="table-button-p"
+                     v-hasPermiRouter="['lab:infoBrand:del']"
+                     @click="handleClick('',scope.row,'delete')"
+                  >删除</p>
+                  <p class="table-button-null"></p>
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+          <pagination :page-sizes="[20, 30, 40, 50]"
+                      :total="total"
+                      layout="total, prev, pager, next, sizes, jumper"
+                      :page.sync="queryParams.page"
+                      :limit.sync="queryParams.pageSize"
+                      @pagination="getList"
+          />
         </div>
-        <el-table class="table-box" border v-loading="loading" :data="tableData">
-          <el-table-column label="排序" align="left" class-name="small-padding fixed-width" width="80">
-            <template slot-scope="scope">
-              <el-input
-                onkeyup="value=value.replace(/[^\d]/g,'')"
-                class="serial"
-                v-model="scope.row.orderNum"
-                @change="categorySort(scope.row)"
-                maxLength="3"
-                placeholder="序号">
-              </el-input>
-            </template>
-          </el-table-column>
-          <el-table-column label="信息名称" align="left" prop="infoName"/>
-          <el-table-column label="公共信息" align="left">
-            <template slot-scope="scope">
-              <el-switch
-                @click.native="categoryShow(scope.row)"
-                class="switch captcha-img"
-                :active-value="true"
-                :inactive-value="false"
-                active-color="#FF9900"
-                inactive-color="#999"
-                v-model="scope.row.isCollective"
-                active-text="是"
-                inactive-text="否"
-                disabled
-              ></el-switch>
-            </template>
-          </el-table-column>
-          <el-table-column label="添加人" align="left" prop="createName"/>
-          <el-table-column label="添加时间" align="left" prop="createTime">
-            <template slot-scope="scope">
-              <span>{{ parseTime(scope.row.createTime,"{y}-{m}-{d} {h}:{i}") }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="120" v-if="tableButtonType">
-            <template slot-scope="scope">
-              <div class="table-button-box">
-                <p class="table-button-null"></p>
-                <p class="table-button-p"
-                   v-hasPermiRouter="['lab:infoBrand:edit']"
-                   @click="handleClick('',scope.row,'edit')"
-                >编辑</p>
-                <p class="table-button-p"
-                   v-hasPermiRouter="['lab:infoBrand:del']"
-                   @click="handleClick('',scope.row,'delete')"
-                >删除</p>
-                <p class="table-button-null"></p>
-              </div>
-            </template>
-          </el-table-column>
-        </el-table>
-        <pagination :page-sizes="[20, 30, 40, 50]"
-                    :total="total"
-                    layout="total, prev, pager, next, sizes, jumper"
-                    :page.sync="queryParams.page"
-                    :limit.sync="queryParams.pageSize"
-                    @pagination="getList"
-        />
       </div>
     </div>
-
-
-    <!-- 添加或修改安全分级对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :before-close="closeDialog" :close-on-click-modal="false">
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px" >
-        <el-form-item label="信息名称" prop="infoName">
-          <el-input v-model="form.infoName" maxlength="100" placeholder="请输入名称" style="width:320px;"/>
-        </el-form-item>
-        <el-form-item label="信息类目"  prop="brandId" class="form-item">
-          <el-select placeholder="请选择类目" v-model="form.brandId" style="width:320px;" @change="categoryClick()">
-            <el-option
-              v-for="dict in categoryList"
-              :key="dict.brandId"
-              :label="dict.brandName"
-              :value="dict.brandId"
-            ></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="信息类型">
-          <el-input v-model="form.infoType==1?'文字':'图片'"   placeholder="" disabled style="width:320px;"/>
-        </el-form-item>
-        <el-form-item label="信息内容" prop="infoContent" v-if="form.infoType==1">
-          <el-input type="textarea" v-model="form.infoContent"  maxlength="200" placeholder="请输入内容" style="width:320px;"/>
-        </el-form-item>
-        <el-form-item label="信息内容" prop="infoContent" v-if="form.infoType==2">
-          <el-upload
-            class="certificate-avatar-uploader"
-            :action="uploadImgUrl"
-            :show-file-list="false"
-            :on-success="handleAvatarSuccess"
-            :headers="headers"
-            :before-upload="beforeAvatarUpload">
-            <div style="display: flex;">
-              <img v-if="form.infoContent" :src="form.infoContent" style="width: 80px;height: 80px;margin-right: 10px">
-              <i v-if="!form.infoContent" class="el-icon-plus avatar-uploader-icon"></i>
-            </div>
-          </el-upload>
-        </el-form-item>
-        <P v-if="form.infoType==2" style="margin-left: 80px">图片最大上传630*78，建议尺寸58*78</P>
-      </el-form>
-      <div slot="footer" class="dialog-footer dialog-footer-box">
-        <p class="dialog-footer-button-null"></p>
-        <p class="dialog-footer-button-info" @click="cancel">取消</p>
-        <p class="dialog-footer-button-primary" @click="submitForm">提交</p>
-        <p class="dialog-footer-button-null"></p>
-      </div>
-    </el-dialog>
+    <add-safety-info-config :propsData="propsData" v-if="pageType==2"></add-safety-info-config>
   </div>
 </template>
 
 <script>
+import addSafetyInfoConfig from "./addSafetyInfoConfig";
 import { getToken } from "@/utils/auth";
-import { laboratoryInfoBrandList , laboratoryBrandDetailAdd, laboratoryBrandDetailList, laboratoryBrandDetailUpdate, laboratoryBrandDetailDelete } from '@/api/integratedManagement/index'
+import {
+  laboratoryInfoBrandList,
+  laboratoryBrandDetailAdd,
+  laboratoryBrandDetailList,
+  laboratoryBrandDetailUpdate,
+  laboratoryBrandDetailDelete,
+  laboratoryBrandDetailDetail, laboratoryClassTypeUpdate
+} from '@/api/integratedManagement/index'
 export default {
   name: "Approval",
+  components: {
+    addSafetyInfoConfig,
+  },
   data() {
     return {
       tableButtonType:this.hasPermiDom(['lab:infoBrand:edit','lab:infoBrand:del',]),
       uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
-      activeName: '',
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
       //页面状态
       pageType:1,
       loading:false,
@@ -175,28 +138,13 @@ export default {
       pageData2:{},
       tabsList:[],
       categoryList:[],
+      //组件传参
+      propsData:{},
       // 表单参数
       infoType:null,
-      form: {
-        brandId:'',
-        infoName:'',
-        infoType:'',
-        infoContent:'',
-        isCollective:'',
-      },
+
       currentIndex:0,
-      // 表单校验
-      rules: {
-        infoName: [
-          { required: true, message: "请输入名称", trigger: "blur" },
-        ],
-        brandId: [
-          { required: true, message: "请选择类目", trigger: "blur" },
-        ],
-        infoContent: [
-          { required: true, message: "请添加信息内容", trigger: "blur" },
-        ],
-      }
+
     };
 
 
@@ -205,11 +153,6 @@ export default {
       titleClick(type){
         this.$parent.titleClick(type);
       },
-
-      closeDialog(){
-        this.$refs['form'].clearValidate()
-        this.open=false
-      },
       handleTabClick(item,index){
         this.currentIndex = index
         this.queryParams.brandId=item.brandId;
@@ -219,28 +162,34 @@ export default {
       handleClick(index,row,doType){
         let self=this;
         if(doType=='add'){//添加
-          this.title='新增安全信息';
-          this.$set(this,'form',{
+          let obj={
             brandId:this.queryParams.brandId,
             infoType:this.infoType,
-            infoName:'',
-            infoContent:'',
-          });
-          this.open = true;
+            listHazardModel:[],
+          }
+          this.$set(this,'propsData',obj)
+          this.$set(this,'pageType',2)
         }else if(doType=='edit'){//编辑
-          this.title='编辑安全信息';
-          this.$set(this,'form',{
-            detailId:row.detailId,
-            brandId:row.brandId,
-            infoName:row.infoName,
-            infoType:row.infoType,
-            infoContent:row.infoContent,
-            isCollective:row.isCollective,
-            orderNum:row.orderNum,
+
+          laboratoryBrandDetailDetail({detailId:row.detailId}).then( response => {
+             if (response.code==200){
+               let obj={
+                 detailId:response.data.detailId,
+                 brandId:response.data.brandId,
+                 infoName:response.data.infoName,
+                 infoType:response.data.infoType,
+                 infoContent:response.data.infoContent,
+                 isCollective:response.data.isCollective,
+                 orderNum:response.data.orderNum,
+                 listHazardModel:response.data.listHazardModel,
+               }
+               this.$set(this,'propsData',obj)
+               this.$set(this,'pageType',2)
+             }
           });
-          this.open = true;
+
         }else if(doType=='deploy'){//信息牌配置
-          self.pageType=2;
+          //self.pageType=2;
         }else if(doType=='delete'){//删除
           this.$confirm('确认要删除吗?', "警告", {
             confirmButtonText: "确定",
@@ -254,7 +203,8 @@ export default {
             });
           }).catch(function() {});
         }else if(doType=='back'){//返回
-          self.pageType=1;
+          this.$set(this,'pageType',1)
+          self.getList();
         }
       },
       categorySort(row){
@@ -322,55 +272,6 @@ export default {
         this.$refs['form'].clearValidate()
         this.open = false;
       },
-      /** 提交按钮 */
-      submitForm() {
-        this.$refs["form"].validate(valid => {
-          if (valid) {
-            if (this.form.detailId) {
-              laboratoryBrandDetailUpdate(this.form).then( response => {
-                this.msgSuccess(response.message);
-                this.open = false;
-                this.getList();
-              });
-            } else {
-              laboratoryBrandDetailAdd(this.form).then( response => {
-                this.msgSuccess(response.message);
-                this.open = false;
-                this.getList();
-              });
-            }
-          }
-        });
-      },
-      //上传
-      handleAvatarSuccess(res, file) {
-        this.form.infoContent = res.data.url;
-        this.$forceUpdate()
-      },
-      beforeAvatarUpload(file) {
-        return new Promise((resolve, reject) => {
-          if (file.type == 'image/png') {
-            let reader = new FileReader()
-            reader.readAsDataURL(file) // 必须用file.raw
-            reader.onload = e => { // 让页面中的img标签的src指向读取的路径
-              let img = e.target.result;
-              const image = new Image()
-              image.src=img
-              image.onload = _=>{
-                if(image.width <= 630 && image.height <= 78){
-                  resolve()
-                }else{
-                  this.msgError('尺寸限制为最大630*78px，支持PNG格式')
-                  reject();
-                }
-              }
-            }
-          }else{
-            this.msgError('请上传PNG格式');
-            reject();
-          }
-        })
-      },
       //查询信息类目列表
       getCategoryList(){
         let obj={

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

@@ -40,28 +40,44 @@
             ></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="安全分类"  prop="typeId" class="form-item" v-if="!form.dynamicLeveling">
-          <el-select v-model="form.typeId" multiple collapse-tags placeholder="请选择安全分类" style="width: 320px">
-            <el-option
-              v-for="dict in typeList"
-              :key="dict.typeId"
-              :label="dict.typeName"
-              :value="dict.typeId">
-            </el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="安全分级"  prop="levelId" class="form-item" v-if="!form.dynamicLeveling">
-          <el-select v-model="form.levelId" placeholder="请选择安全分级"
-                     :disabled="form.dynamicLeveling" clearable style="width:320px;">
-            <el-option
-              v-for="dict in levelList"
-              :key="dict.levelId"
-              :label="dict.levelName"
-              :value="dict.levelId"
-            ></el-option>
-          </el-select>
+        <div style="display: inline-block;">
+          <el-form-item label="安全分级"  prop="levelId" class="form-item" v-if="!form.dynamicLeveling">
+            <el-input
+              disabled
+              style="width:220px;"
+              v-model="form.titleName"
+              placeholder="请选择安全分级"
+              clearable
+              size="small"
+            />
+          </el-form-item>
+          <p class="page-reset-common-style-button" @click="LevelClick()" style="margin-left:12px;margin-bottom:20px;width:90px;">分级配置</p>
+        </div>
+        <div style="display: inline-block;">
+          <el-form-item label="安全分类"  prop="typeId" class="form-item" v-if="!form.dynamicLeveling">
+            <el-input
+              disabled
+              style="width:220px;"
+              v-model="form.subType"
+              placeholder="请选择安全分类"
+              clearable
+              size="small"
+            />
+          </el-form-item>
+          <p class="page-reset-common-style-button" @click="classifyClick()" style="margin-left:12px;margin-bottom:20px;width:90px;">分类配置</p>
+        </div>
+        <el-form-item label="实验室面积" prop="subArea" class="form-item">
+          <el-input
+            style="width:320px;"
+            v-model="form.subArea"
+            placeholder="请输入面积"
+            oninput="value=value.replace(/[^0-9.]/g,'')"
+            maxlength="4"
+            size="small">
+            <template slot="append">M²</template>
+          </el-input>
         </el-form-item>
-        <el-form-item label="动态评级" class="form-item" style="width:440px;">
+<!--        <el-form-item label="动态评级" class="form-item" style="width:440px;">
           <div class="tableListPaginationSwitch">
             <el-switch
               class="switch captcha-img"
@@ -74,7 +90,7 @@
             <i class="el-icon-warning tip-img"></i>
             <i class="tip-content">如需人工评定，请关闭动态评级</i>
           </div>
-        </el-form-item>
+        </el-form-item>-->
         <el-form-item label="楼栋"  prop="buildId" class="form-item">
           <el-select v-model="form.buildId" placeholder="请选择楼栋"
                      @change="changeBuild" style="width:320px;">
@@ -107,17 +123,7 @@
             ></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="实验室面积" prop="subArea" class="form-item">
-          <el-input
-            style="width:320px;"
-            v-model="form.subArea"
-            placeholder="请输入面积"
-            oninput="value=value.replace(/[^0-9.]/g,'')"
-            maxlength="4"
-            size="small">
-            <template slot="append">M²</template>
-          </el-input>
-        </el-form-item>
+
         <el-form-item label="准入设备"  class="form-item">
           <el-select v-model="form.hardwareType" placeholder="请选择整改类型" style="width:320px;" @change="hardwareTypeFun()" >
             <el-option label="无"  :value="0" />
@@ -296,16 +302,81 @@
         </div>
       </el-form>
     </div>
+    <el-dialog title="分级配置" :visible.sync="dialogLevelVisible" width="970px" append-to-body>
+      <div class="tabs">
+        <div class="tabs-li" v-for="(item,index) in tabsList" @click="tabsClick(index)" :class="tabsIndex==index?'color-B':'color-A'">{{item}}</div>
+      </div>
+
+      <div class="level" style="height: 500px;overflow-y: auto;">
+        <!-- 分类依据-->
+        <div class="level-box" v-for="(item,index) in levelBasisList" :key="index" v-if="tabsIndex==0">
+          <div class="level-title" :style="'background:'+item.color">{{item.name}}</div>
+          <div class="level-thead">
+            <i>选择</i>
+            <i>序号</i>
+            <i>内容</i>
+          </div>
+          <div class="level-li" v-for="(item2,index2) in item.list" :key="index2">
+            <i><el-checkbox v-model="item2.selected"></el-checkbox></i>
+            <i>{{index2+1}}</i>
+            <i>{{item2.content}}</i>
+          </div>
+          <div class="level-li2">{{item.remark}}</div>
+        </div>
+        <!-- 风险评价-->
+        <div class="level-box" v-for="(item,index) in levelEvaluateList" :key="index" v-if="tabsIndex==1">
+          <div class="level-title">{{item.name}}</div>
+          <div class="level-thead">
+            <i>选择</i>
+            <i>序号</i>
+            <i>内容</i>
+          </div>
+          <div class="level-li" v-for="(item2,index2) in item.list" :key="index2">
+            <i><el-checkbox v-model="item2.selected"></el-checkbox></i>
+            <i>{{index2+1}}</i>
+            <i>{{item2.content}}</i>
+          </div>
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer dialog-footer-box">
+        <p class="dialog-footer-button-null"></p>
+        <p class="dialog-footer-button-primary" @click="levelSubmitForm">确认</p>
+        <p class="dialog-footer-button-null"></p>
+      </div>
+    </el-dialog>
+    <el-dialog title="分类配置" :visible.sync="dialogClassifyVisible" width="970px" append-to-body>
+      <div class="classify">
+        <div class="classify-thead">
+          <i>选择</i>
+          <i>实验室分类</i>
+          <i>分类参考依据</i>
+        </div>
+        <div class="classify-li" v-for="(item,index) in classifyList">
+          <i @click="radioClick(item,index)"><el-radio v-model="item.selected" :label="true" ><span></span></el-radio></i>
+          <i>{{item.subType}}</i>
+          <i>{{item.typeBasis}}</i>
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer dialog-footer-box">
+        <p class="dialog-footer-button-null"></p>
+        <p class="dialog-footer-button-primary" @click="classifySubmitForm">确认</p>
+        <p class="dialog-footer-button-null"></p>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import {
   getDeptDropList, systemBuildingGetOptList, laboratoryClassMoldGetList,
-  laboratoryClassLevelGetList, laboratoryClassTypeGetList, systemRoomInfoGetList,
-  systemUserSelectUser, systemUserDropAuthList
+   systemRoomInfoGetList,systemUserDropAuthList
 } from '@/api/commonality/permission'
-    import { laboratoryInfoBrandGetClassifyBySubId,laboratorySubRelInfoAdd,laboratorySubRelInfoUpdate,laboratorySubRelInfoGetDetailInfo } from "@/api/integratedManagement/index";
+import {
+  laboratoryInfoBrandGetClassifyBySubId, laboratoryLevelConfigGetCalculateByData, laboratoryLevelConfigGetList,
+  laboratorySubRelInfoAdd,
+  laboratorySubRelInfoUpdate, laboratoryTypeConfigGetList
+} from '@/api/integratedManagement/index'
+import { chemicalMsdsEdit } from '@/api/chemicalManage'
     export default {
       name: "addSubject",
       props:{
@@ -314,8 +385,6 @@ import {
       data() {
         return {
           loading:false,
-          levelList:[],
-          typeList:[],
           deptOptions:[],
           buildings:[],
           floors:[],
@@ -379,6 +448,14 @@ import {
           labMoldList:[],
           //一体机/电子信息牌状态切换
           checkButtonType:1,
+          tabsList:['分级依据','风险评级'],
+          tabsIndex:0,
+          dialogLevelVisible:false,
+          dialogClassifyVisible:false,
+          levelBasisList:[],
+          levelEvaluateList:[],
+          classifyList:[],
+
         }
       },
       created() {
@@ -393,12 +470,10 @@ import {
           this.$set(this.form,'subId',this.subjectData.subId)
           this.$set(this.form,'subName',this.subjectData.subName)
           this.$set(this.form,'moldId',this.subjectData.moldId)
-          if(this.subjectData.typeId){
-            this.$set(this.form,'typeId',this.subjectData.typeId.split(','))
-          }else{
-            this.$set(this.form,'typeId',[])
-          }
+          this.$set(this.form,'typeId',this.subjectData.typeId)
+          this.$set(this.form,'subType',this.subjectData.typeName)
           this.$set(this.form,'levelId',this.subjectData.levelId)
+          this.$set(this.form,'titleName',this.subjectData.levelName)
           this.$set(this.form,'deptId',this.subjectData.deptId)
           this.$set(this.form,'buildId',this.subjectData.buildId)
           this.$set(this.form,'floorId',this.subjectData.floorId)
@@ -470,16 +545,27 @@ import {
         }
       },
       methods:{
+        LevelClick(){
+          this.$set(this,'dialogLevelVisible',true);
+        },
+        classifyClick(){
+          this.$set(this,'dialogClassifyVisible',true);
+        },
+        tabsClick(index){
+          this.tabsIndex=index;
+        },
+        radioClick(row,index){
+          this.classifyList.forEach(function(item) {
+            item.selected=false;
+          })
+          this.classifyList[index].selected=true;
+        },
         //初始化数据查询
         getInitializeData(){
           //学院
           this.getDeptDropList();
           //楼栋
           this.systemBuildingGetOptList(2);
-          //分类
-          this.laboratoryClassTypeGetList();
-          //分级
-          this.laboratoryClassLevelGetList();
           //类型
           this.laboratoryClassMoldGetList();
           //安全标识字典
@@ -498,6 +584,11 @@ import {
           this.getDicts("sys_extinguishing_key_points").then(response => {
             this.$set(this,'extinguishingKeyPoints',response.data);
           });
+          //分级配置列表
+          this.laboratoryLevelConfigGetList();
+          this.laboratoryLevelConfigGetListTow();
+          //分类配置列表
+          this.laboratoryTypeConfigGetList();
         },
         //查询学院下拉列表
         getDeptDropList(){
@@ -521,18 +612,6 @@ import {
             this.$set(this,'rooms',response.data);
           });
         },
-        //查询安全分类下拉列表
-        laboratoryClassTypeGetList(){
-          laboratoryClassTypeGetList({}).then(response => {
-            this.$set(this,'typeList',response.data);
-          });
-        },
-        //查询安全分级列表
-        laboratoryClassLevelGetList(){
-          laboratoryClassLevelGetList({}).then(response => {
-            this.$set(this,'levelList',response.data);
-          });
-        },
         //查询实验室类型下拉列表
         laboratoryClassMoldGetList(){
           laboratoryClassMoldGetList({}).then(response => {
@@ -557,7 +636,6 @@ import {
           }
         },
         upData(){
-          console.log(this.form)
           let self = this;
           this.$set(this.form,'details',this.$refs.UEditor.text);
           this.$refs["form"].validate(valid => {
@@ -582,9 +660,6 @@ import {
                 if(self.form.safeUserId) {
                   self.form.safeUserId = self.form.safeUserId.join() ;
                 }
-                if(self.form.typeId) {
-                  self.form.typeId = self.form.typeId.join() ;
-                }
                 //循环取安全信息牌信息
 
                 let list=[]
@@ -601,6 +676,7 @@ import {
                 if(self.form.infoId){
                   self.laboratorySubRelInfoUpdate();
                 }else{
+
                   self.laboratorySubRelInfoAdd();
                 }
               }).then(() => {}).catch(() => {});
@@ -626,6 +702,87 @@ import {
         backPage(){
           this.$parent.clickPage(1,'');
         },
+        //分级配置列表
+        laboratoryLevelConfigGetList(){
+          let obj={
+            levelType:'1', //1分级依据 2风险评价
+          }
+          laboratoryLevelConfigGetList(obj).then(response => {
+            if (this.subjectData.levelRecord){
+              let list = this.subjectData.levelRecord.split(',');
+              response.data.forEach(function(item) {
+                item.list.forEach(function(item2) {
+                  item2.selected=false;
+                  list.forEach(function(item3) {
+                    if (item2.configId==item3){
+                      item2.selected=true;
+                    }
+                  })
+                })
+              })
+            }else{
+              response.data.forEach(function(item) {
+                item.list.forEach(function(item2) {
+                  item2.selected=false;
+                })
+              })
+            }
+
+            this.$set(this, 'levelBasisList',response.data)
+          });
+        },
+        //分级配置列表
+        laboratoryLevelConfigGetListTow(){
+          let obj={
+            levelType:'2', //1分级依据 2风险评价
+          }
+          laboratoryLevelConfigGetList(obj).then(response => {
+              if (this.subjectData.levelRecord){
+                let list = this.subjectData.levelRecord.split(',');
+                response.data.forEach(function(item) {
+                  item.list.forEach(function(item2) {
+                    item2.selected=false;
+                    list.forEach(function(item3) {
+                      if (item2.configId==item3){
+                        item2.selected=true;
+                      }
+                    })
+                  })
+                })
+              }else{
+                response.data.forEach(function(item) {
+                  item.list.forEach(function(item2) {
+                    item2.selected=false;
+                  })
+                })
+              }
+
+            this.$set(this, 'levelEvaluateList',response.data)
+          });
+        },
+        //分类配置列表
+        laboratoryTypeConfigGetList(){
+          let self=this;
+          laboratoryTypeConfigGetList().then(response => {
+            if (this.subjectData.typeId){
+              response.data.forEach(function(item) {
+                item.selected=false;
+              })
+              response.data.forEach(function(item) {
+                if (item.typeId==self.subjectData.typeId){
+                  item.selected=true;
+                }
+              })
+            }else{
+              response.data.forEach(function(item) {
+                item.selected=false;
+              })
+            }
+
+            this.$set(this, 'classifyList',response.data)
+          });
+        },
+
         /** 查询楼栋列表  */
         getBuildings(id) {
           if(id) {
@@ -677,6 +834,47 @@ import {
             this.$set(this,'optionsUserOne',[]);
           }
         },
+        //分级确定
+        levelSubmitForm(){
+          let self=this;
+          let list=[]
+          let listId=[]
+          this.levelBasisList.forEach(function(item) {
+            item.list.forEach(function(item2) {
+              if (item2.selected){
+                list.push(item2)
+                listId.push(item2.configId)
+              }
+            })
+          })
+          this.levelEvaluateList.forEach(function(item) {
+            item.list.forEach(function(item2) {
+              if (item2.selected){
+                list.push(item2)
+                listId.push(item2.configId)
+              }
+            })
+          })
+          this.$set(this.form, 'levelRecord',listId.join(','))
+          laboratoryLevelConfigGetCalculateByData(list).then( response => {
+              this.$set(this.form, 'levelId',response.data.levelId)
+              this.$set(this.form, 'titleName',response.data.titleName)
+              this.$set(this, 'dialogLevelVisible',false)
+
+          });
+        },
+        //分类确定
+        classifySubmitForm(){
+          let self=this;
+          this.classifyList.forEach(function(item) {
+            if (item.selected){
+              self.$set(self.form, 'typeId',item.typeId)
+              self.$set(self.form, 'subType',item.subType)
+              self.$set(self, 'dialogClassifyVisible',false)
+            }
+          })
+
+        },
       }
     }
 </script>
@@ -790,6 +988,187 @@ import {
       }
     }
   }
+  .tabs{
+    display: flex;
+    justify-content: flex-start;
+    margin-left: 42px;
+    .tabs-li{
+      font-weight: 400;
+      font-size: 16px;
+      color: #333333;
+      padding-bottom: 20px;
+      box-sizing: border-box;
+      margin-right: 40px;
+      cursor: pointer;
+    }
+    .color-A{
+      color: #333333;
+    }
+    .color-B{
+      color: #043581;
+      border-bottom: 4px solid #043581;
+    }
+  }
+  .level{
+    border: 1px solid #E0E0E0;
+    width: 820px;
+    margin-left: 40px;
+    .level-box{
+      .level-title{
+        background: #E0E0E0;
+        font-weight: 400;
+        font-size: 16px;
+        color: #FFFFFF;
+        line-height: 40px;
+        height: 40px;
+        padding-left: 14px;
+
+      }
+      .level-thead{
+        background: #F5F5F5;
+        border-bottom: 1px solid #E0E0E0;
+        height: 40px;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        >i{
+          font-style: normal;
+          display: inline-block;
+          text-align: center;
+          font-weight: 400;
+          font-size: 16px;
+          line-height: 40px;
+          color: #333333;
+        }
+        >i:nth-of-type(1){
+          width: 50px;
+          border-right: 1px solid #E0E0E0;
+        }
+        >i:nth-of-type(2){
+          width: 132px;
+          border-right: 1px solid #E0E0E0;
+        }
+        >i:nth-of-type(3){
+          width: 636px;
+        }
+      }
+      .level-li{
+        display: flex;
+        justify-content: flex-start;
+        height: auto;
+        border-bottom: 1px solid #E0E0E0;
+        >i{
+          font-style: normal;
+          text-align: center;
+          font-weight: 400;
+          font-size: 16px;
+          color: #333333;
+          height: auto;
+          padding:8px 16px;
+          box-sizing: border-box;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+        >i:nth-of-type(1){
+          width: 50px;
+          border-right: 1px solid #E0E0E0;
+        }
+        >i:nth-of-type(2){
+          width: 132px;
+
+          border-right: 1px solid #E0E0E0;
+        }
+        >i:nth-of-type(3){
+          width: 636px;
+          text-align: left;
+        }
+      }
+      .level-li:nth-child(2n){
+        background: #F5F5F5;
+      }
+      .level-li:last-child{
+        border:none;
+      }
+      .level-li2{
+        font-weight: 400;
+        font-size: 14px;
+        color: #333333;
+        line-height: 40px;
+        text-align: center;
+      }
+    }
+
+  }
+  .classify{
+    border: 1px solid #E0E0E0;
+    width: 820px;
+    margin-left: 40px;
+    .classify-thead{
+      background: #F5F5F5;
+      border-bottom: 1px solid #E0E0E0;
+      height: 40px;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      >i{
+        font-style: normal;
+        display: inline-block;
+        text-align: center;
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 40px;
+        color: #333333;
+      }
+      >i:nth-of-type(1){
+        width: 50px;
+        border-right: 1px solid #E0E0E0;
+      }
+      >i:nth-of-type(2){
+        width: 132px;
+        border-right: 1px solid #E0E0E0;
+      }
+      >i:nth-of-type(3){
+        width: 636px;
+      }
+    }
+    .classify-li{
+      display: flex;
+      justify-content: flex-start;
+      height: auto;
+      border-bottom: 1px solid #E0E0E0;
+      >i{
+        font-style: normal;
+        text-align: center;
+        font-weight: 400;
+        font-size: 16px;
+        color: #333333;
+        height: auto;
+        padding:8px 16px;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+      }
+      >i:nth-of-type(1){
+        width: 50px;
+        border-right: 1px solid #E0E0E0;
+      }
+      >i:nth-of-type(2){
+        width: 132px;
+        border-right: 1px solid #E0E0E0;
+      }
+      >i:nth-of-type(3){
+        width: 636px;
+        text-align: left;
+      }
+    }
+    .classify-li:nth-child(2n+1){
+      background: #F5F5F5;
+    }
+    .classify-li:last-child{
+      border:none;
+    }
+  }
   ::v-deep .tableListPaginationSwitch{
     height: 40px;
     display: flex;