质控类型 维护

src/css/assertType.less

@@ -42,12 +42,12 @@
     .main-body{
         margin: 20px 0;
         padding: 0 35px;
-        min-width: 1090px;
+        // min-width: 1090px;
         /*width: 100%;*/
     }
     table{
         .table;
-        min-width: 1090px;
+        // min-width: 1090px;
         th,td{
             text-align: center;
         }

src/css/assertTypeDetail.less

@@ -13,14 +13,14 @@
     .main-body{
         margin: 20px 0;
         padding: 0 35px;
-        min-width: 1090px;
+        // min-width: 1090px;
         /*width: 100%;*/
     }
     .filterItem{
         position: relative;
         height: 40px;
         line-height: 40px;
-        margin: 0 20px 15px 0;
+        margin: 0 0px 15px 0;
         float: none !important;
         span{
             display: inline-block;
@@ -38,7 +38,7 @@
             border-radius:4px;
             border: 1px solid #E2E5EF;
             outline: none;
-            margin-right: 10px;
+            // margin-right: 10px;
             padding: 0 10px;
             box-sizing: border-box;
         }
@@ -90,47 +90,106 @@
     }
     .listTypeAll {
         margin-left: 80px; 
+        .caseEntryBlcok {
+            box-sizing: border-box;
+            border: 1px solid #E2E5EF;
+            border-radius: 4px;
+            margin: 0 0 10px 0;
+        }
         .caseEntryName {
             // height: 48px;
-            line-height: 48px;
+            line-height: 34px;
             background-color: #fff;
             cursor: pointer;
-            border-bottom: 1px solid #ebeef5;
+            padding: 0 10px;
+            position: relative;
+            // border-bottom: 1px solid #ebeef5;
+            img{
+                width: 10px;
+                position: absolute;
+                right: 10px;
+            }
         }
         .tabTitle,.tabInfo{
-            line-height: 40px;
+            line-height: 30px;
+            position: relative;
         }
         .caseEntryDetail{
             display: none;
+            padding: 10px 20px;
+            border-top: 1px solid #E2E5EF;
         }
         .opera,.qcItem,.qcUsed{
             display: inline-block;
             text-align: center;
         }
         .opera{
-            width: 15%;
+            width: 11%;
         }
         .qcItem{
-            width: 50%;
+            width: 76%;
         }
         .qcUsed{
-            width: 15%;
+            width: 13%;
         }
         .tabTitle{
-            background: #eee;
+            background: #EFF0F9;
+            font-size: 14px;
+            font-weight: 500;
         }
         .tabInfo{
             box-sizing: border-box;
-            border-bottom: 1px solid #eee;
+            border-left: 1px solid #E2E5EF;
+            border-right: 1px solid #E2E5EF;
+            border-bottom: 1px solid #E2E5EF;
+        }
+        .tabInfo{
+            .opera,.qcItem,.qcUsed{
+                box-sizing: border-box;
+            }
+            .qcItem{
+                border-left: 1px solid #E2E5EF;
+                border-right: 1px solid #E2E5EF;
+            }
+            .opera{
+                width: 11%;
+                position: absolute;
+                height: 100%;
+            }
+            .qcItem{
+                width: 76%;
+                position: relative;
+                left: 11%;
+            }
+            .qcUsed{
+                position: absolute;
+                left: 87%;
+                width: 13%;
+                height: 100%;
+            }
+        }
+        .tabInfo:nth-child(2n+1){
+            background:#F5F6FA;
         }
     }
 }
-.borderTop{
-    border-top: 1px solid #ebeef5;
-}
+// .borderTop{
+//     border-top: 1px solid #ebeef5;
+// }
 .iconCheck{
     width: 14px;
     cursor: pointer;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin: -7px 0 0 -7px;
+}
+.usedRes{
+    display: inline-block;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin: -15px 0 0 -7px;
 }
 .submitBox{
     text-align: right;

src/html/assertTypeDetail.html

@@ -26,7 +26,7 @@
                 </div>    -->
                 <div class="filterItem typeFilter">
                     <span class="explainL">质控类型：</span>
-                    <input class="patientNumInp" style="width: 148px;" type="text" placeholder="请输入质控类型">
+                    <input class="patientNumInp"  type="text" placeholder="请输入质控类型">
                 </div>
                 <div class=" clearfix">
                     <div class="qcItemTitle">质控条目：</div>

src/js/assertTypeDetail.js

@@ -5,6 +5,8 @@ const {api} = require('./api.js')
 const {post,getCookie,getUrlArgObjectNew,getUrlArgObject} = require('./utils.js')
 const iconCheck= require("./../images/icon_check.png")
 const iconUnCheck = require("./../images/icon_unchecked.png")
+const arrowUp = require("./../images/arrow_up22.png")
+const arrowDown = require("./../images/arrow_down22.png")
 
 let dataCopy,paramType,paramId,submitMsg="新增成功~"
 $(function(){
@@ -14,6 +16,8 @@ $(function(){
     getList(paramType)//获取条目列表
 
 })
+const filterBoxWidth = $('.filterBox').width()
+$('.patientNumInp').css('width', filterBoxWidth-82-15 +'px')
 function getList(type){
     console.log('type',type)
     if(!type){
@@ -64,13 +68,13 @@ function renderData(data){
     const dataKeys = Object.keys(dataCopy)
     let str = ""
     for(let i = 0; i < dataKeys.length; i++){
-        str += `<div class="caseEntryBlcok ${i===0 ? 'borderTop':''}"><div class="caseEntryName">${dataKeys[i]}</div>`
+        str += `<div class="caseEntryBlcok ${i===0 ? 'borderTop':''}"><div class="caseEntryName">${dataKeys[i]} <img class="arrow" src=${arrowDown}></div>`
         if(dataCopy[dataKeys[i]].length > 0){
             str += `<div class="caseEntryDetail"><div class="tabTitle"><span class="opera">操作</span><span class="qcItem">质控条目</span><span class="qcUsed">是否启用</span></div>`
         }
         for(let j = 0; j < dataCopy[dataKeys[i]].length; j++){
             const dataItem = dataCopy[dataKeys[i]][j]
-            str += `<div class="tabInfo"><span  data-pIndex=${dataKeys[i]} data-index=${j} class="opera">${dataItem.sel == '1' ? `<img  class="iconCheck" src=${iconCheck} />`:`<img class="iconCheck" src=${iconUnCheck} />`}</span><span class="qcItem">${dataItem.name}</span><span class="qcUsed">${dataItem.isUsed == '1' ? "是":"否"}</span></div>`
+            str += `<div class="tabInfo"><span  data-pIndex=${dataKeys[i]} data-index=${j} class="opera">${dataItem.sel == '1' ? `<img  class="iconCheck" src=${iconCheck} />`:`<img class="iconCheck" src=${iconUnCheck} />`}</span><span class="qcItem">${dataItem.name}</span><span class="qcUsed"><span class="usedRes">${dataItem.isUsed == '1' ? "是":"否"}</span></span></div>`
         }
         if(dataCopy[dataKeys[i]].length > 0){
             str += `</div>`
@@ -86,9 +90,11 @@ function bindBlockSlideToggle(){
  $('.caseEntryName').click(function(){
      const display =  $(this).parent().find('.caseEntryDetail').css("display");
      if(display === "none"){
+        $(this).find('img').attr('src', arrowUp)
         $('.caseEntryDetail').slideUp()
         $(this).parent().find('.caseEntryDetail').slideDown()
      } else{
+        $(this).find('img').attr('src', arrowDown)
         $('.caseEntryDetail').slideUp()
      }