heyang

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

@@ -86,7 +86,7 @@
         />
       </el-form-item>
       <el-form-item label="准入设备"  class="form-item">
-        <el-select v-model="form.hardwareType" placeholder="请选择整改类型" style="width:230px;" @change="hardwareTypeFun()">
+        <el-select v-model="form.hardwareType" placeholder="请选择整改类型" style="width:320px;" @change="hardwareTypeFun()" >
           <el-option label="无"  :value="0" />
           <el-option label="海康智能门禁" :value="1" />
           <el-option label="电子信息牌" :value="2" />

src/views/safetyInfo/index.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="accessAuthorization">
+    <!--安全信息类目-->
+    <safetyInfoCategory v-if="pageType == 1"></safetyInfoCategory>
+    <!--安全信息配置-->
+    <safetyInfoConfig v-if="pageType == 2"></safetyInfoConfig>
+  </div>
+</template>
+<script>
+import safetyInfoCategory from "./safetyInfoCategory.vue";
+import safetyInfoConfig from "./safetyInfoConfig.vue";
+
+export default {
+  name: "index",
+  components: {
+    safetyInfoCategory,
+    safetyInfoConfig,
+  },
+  data() {
+    return {
+      pageType: 1,
+    }
+  },
+  created() {
+
+  },
+  mounted() {
+
+  },
+  methods: {
+    //选项卡切换
+    titleClick(type) {
+      if (this.pageType != type) {
+        this.pageType = type
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.accessAuthorization {
+  flex: 1;
+  display: flex !important;
+  flex-direction: column;
+  overflow: hidden;
+  * {
+    margin: 0;
+    font-weight: 500;
+  }
+}
+</style>

src/views/safetyInfo/safetyInfoCategory/safetyInfoCategory.vue

@@ -1,8 +1,18 @@
 <!--安全信息类目-->
 <template>
   <div class="app-container approval_handle">
+    <div class="title-box">
+      <div>
+        <p class="top-p-color">安全类目</p>
+        <p class="bottom-p-color"></p>
+      </div>
+      <div @click="titleClick(2)">
+        <p>信息配置</p>
+        <p></p>
+      </div>
+    </div>
     <div class="approval_handle-page" v-if="pageType == 1">
-      <el-form :model="queryParams" ref="queryForm" style="margin-top:20px;" :inline="true">
+      <el-form :model="queryParams" ref="queryForm" :inline="true">
         <el-form-item label="关键字" prop="name">
           <el-input
             v-model="queryParams.searchValue"
@@ -182,6 +192,9 @@ export default {
 
   },
   methods: {
+      titleClick(type){
+        this.$parent.titleClick(type);
+      },
       closeDialog(){
         this.$refs['form'].clearValidate()
         this.open=false
@@ -287,14 +300,47 @@ export default {
   .approval_handle {
     display: flex!important;
     flex-direction: column;
+    .title-box{
+      display: flex;
+      border-bottom:1px solid #E0E0E0;
+      margin-bottom:20px;
+      div{
+        height:80px;
+        margin-right:20px;
+        cursor: pointer;
+        p:nth-child(1){
+          font-size:18px;
+          text-align: center;
+          padding:0 20px;
+          margin-top:26px;
+        }
+        p:nth-child(2){
+          width:40px;
+          height:4px;
+          border-radius:40px;
+          margin:12px auto;
+        }
+        .top-p-color{
+          color: #0045AF;
+        }
+        .bottom-p-color{
+          background: #0045AF;
+        }
+      }
+      .buttonTitleColorA{
+        color:#0045AF;
+      }
+      .buttonTitleColorB{
+        color:#999999;
+      }
+    }
     .approval_handle-page{
       flex:1;
       display: flex!important;
       flex-direction: column;
-      box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
+     // box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
       padding:20px 20px 20px!important;
       border-radius:10px;
-
       .button-box{
         width:200px;
         display: flex;

src/views/safetyInfo/safetyInfoConfig/safetyInfoConfig.vue

@@ -1,69 +1,85 @@
-<!--安全信息类目-->
+<!--安全信息配置-->
 <template>
   <div class="app-container approval_handle">
-    <div class="tab-title">
-      <div class="tab-title-l">
-        <template>
-          <el-tabs v-model="activeName" @tab-click="handleTabClick">
-            <el-tab-pane :label="item.classifyName" :name="item.id+''" v-for="item in tabsList"></el-tab-pane>
-          </el-tabs>
-        </template>
+    <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>
-      <el-button
-        v-hasPermi="['laboratory:classifyDet:add']"
-        type="primary"
-        plain
-        icon="el-icon-plus"
-        size="mini"
-        @click="handleClick('','','add')"
-      >新增</el-button>
     </div>
-    <div class="approval_handle-page" v-if="pageType == 1">
-      <el-table border v-loading="loading" :data="tableData">
-        <el-table-column label="序号" align="left" prop="sort"  width="50"/>
-        <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="category-switch captcha-img"
-              :active-value="2"
-              :inactive-value="1"
-              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="createBy"/>
-        <el-table-column label="添加时间" align="left" prop="createTime"/>
-        <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="120">
-          <template slot-scope="scope">
-            <div class="button-box">
-              <p class="table-min-button"
-                 v-hasPermi="['laboratory:classifyDet:edit']"
-                 @click="handleClick('',scope.row,'edit')"
-              >编辑</p>
-              <p class="table-min-button"
-                 v-hasPermi="['laboratory:classifyDet:remove']"
-                 @click="handleClick('',scope.row,'delete')"
-              >删除</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.pageNum"
-        :limit.sync="queryParams.pageSize"
-        @pagination="getList"
-      />
+    <div class="config_main">
+      <div class="config_main_l">
+        <div class="config_main_l_title">
+          <img  src="@/assets/ZDimages/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.classifyName}}</div>
+      </div>
+      <p class="config_main_border"></p>
+      <div class="approval_handle-page">
+        <p>
+          <el-button
+            style="float: right;margin-bottom: 20px"
+            v-hasPermi="['laboratory:classifyDet:add']"
+            type="primary"
+            plain
+            icon="el-icon-plus"
+            size="mini"
+            @click="handleClick('','','add')"
+          >新增</el-button>
+        </p>
+
+        <el-table border v-loading="loading" :data="tableData">
+          <el-table-column label="序号" align="left" prop="sort"  width="50"/>
+          <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="category-switch captcha-img"
+                :active-value="2"
+                :inactive-value="1"
+                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="createBy"/>
+          <el-table-column label="添加时间" align="left" prop="createTime"/>
+          <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="120">
+            <template slot-scope="scope">
+              <div class="button-box">
+                <p class="table-min-button"
+                   v-hasPermi="['laboratory:classifyDet:edit']"
+                   @click="handleClick('',scope.row,'edit')"
+                >编辑</p>
+                <p class="table-min-button"
+                   v-hasPermi="['laboratory:classifyDet:remove']"
+                   @click="handleClick('',scope.row,'delete')"
+                >删除</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.pageNum"
+                    :limit.sync="queryParams.pageSize"
+                    @pagination="getList"
+        />
+      </div>
     </div>
-    <safety-Info-Config v-if="pageType == 2"></safety-Info-Config>
+
+
     <!-- 添加或修改安全分级对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :before-close="closeDialog">
       <el-form ref="form" :model="form" :rules="rules" label-width="80px" >
@@ -159,6 +175,7 @@ export default {
         isCollective:'',
 
       },
+      currentIndex:0,
       // 表单校验
       rules: {
         infoName: [
@@ -176,12 +193,16 @@ export default {
 
   },
   methods: {
+      titleClick(type){
+        this.$parent.titleClick(type);
+      },
       closeDialog(){
         this.$refs['form'].clearValidate()
         this.open=false
       },
-      handleTabClick(tab){
-        this.queryParams.infoClassifyId=tab.name;
+      handleTabClick(item,index){
+        this.currentIndex = index
+        this.queryParams.infoClassifyId=item.id;
         this.getList()
       },
       handleClick(index,row,doType){
@@ -359,49 +380,99 @@ export default {
   .approval_handle {
     display: flex!important;
     flex-direction: column;
-    flex-direction: column;
-    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
-    border-radius:10px;
-    padding-top: 20px !important;
-    .approval_handle-page{
-      padding:20px 20px 20px!important;
-      flex:1;
-      display: flex!important;
-      flex-direction: column;
-      .button-box{
-        width:200px;
+    background: #ffffff;
+    border-radius: 10px;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    padding: 0;
+    margin: 5px 20px 20px 10px;
+    box-shadow: 0 0 8px 1px rgb(0 0 0 / 10%);
+    .title-box{
+      display: flex;
+      border-bottom:1px solid #E0E0E0;
+      margin-bottom:20px;
+      div{
+        height:80px;
+        margin-right:20px;
+        cursor: pointer;
+        p:nth-child(1){
+          font-size:18px;
+          text-align: center;
+          padding:0 20px;
+          margin-top:26px;
+        }
+        p:nth-child(2){
+          width:40px;
+          height:4px;
+          border-radius:40px;
+          margin:12px auto;
+        }
+        .top-p-color{
+          color: #0045AF;
+        }
+        .bottom-p-color{
+          background: #0045AF;
+        }
+      }
+      .buttonTitleColorA{
+        color:#0045AF;
+      }
+      .buttonTitleColorB{
+        color:#999999;
+      }
+    }
+    .config_main{
+        flex:1;
         display: flex;
+        overflow: hidden;
+       .config_main_l{
+         flex: 1;
+         padding-left: 42px;
+         padding-top: 20px;
+         .config_main_l_title{
+           font-size: 16px;
+           font-weight: 400;
+           color: #0183FA;
+           >img{
+             width: 16px;
+             height: 13px;
+             margin-right: 12px;
+           }
+         }
+         .config_main_l_li{
+           font-size: 14px;
+           font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+           font-weight: 400;
+           color: #333333;
+           line-height: 68px;
+           cursor: pointer;
+         }
+         .active{
+           color: #0183FA;
+         }
+       }
+       .config_main_border{
+         border-right: 1px dashed #A2A2A2;
+         margin: 20px 35px 36px 0;
+       }
+      /*表格*/
+      .approval_handle-page{
+        display: flex!important;
+        flex-direction: column;
+        width: 1264px;
+        padding:0px 20px 20px!important;
+        .button-box{
+          width:200px;
+          display: flex;
+        }
       }
     }
 
+
   }
 
 </style>
 <style  lang="scss">
-
-.tab-title{
-  display: flex;
-  justify-content: space-between;
-  padding-bottom: 20px;
-  box-sizing: border-box;
-  border-bottom: 1px solid #E0E0E0;
-  padding: 0 20px;
-  .tab-title-l{
-    flex: 1;
-    overflow-x: auto;
-    .el-tabs__nav-wrap::after{
-      background-color: #fff !important;
-    }
-  }
-  .el-tabs__nav-next{
-    font-size: 14px;
-    line-height: 40px;
-  }
-  .el-tabs__nav-prev{
-    font-size: 14px;
-    line-height: 40px;
-  }
-}
 .category-switch .el-switch__label {
   position: absolute;
   display: none;