质控类型维护新增

src/css/assertTypeDetail.less

@@ -84,13 +84,68 @@
         width: 160px;
         max-height: 400px;
     }
+    .qcItemTitle{
+        float: left;
+        line-height: 40px;
+    }
     .listTypeAll {
-        li {
-            height: 48px;
+        margin-left: 80px; 
+        .caseEntryName {
+            // height: 48px;
             line-height: 48px;
             background-color: #fff;
             cursor: pointer;
             border-bottom: 1px solid #ebeef5;
         }
+        .tabTitle,.tabInfo{
+            line-height: 40px;
+        }
+        .caseEntryDetail{
+            display: none;
+        }
+        .opera,.qcItem,.qcUsed{
+            display: inline-block;
+            text-align: center;
+        }
+        .opera{
+            width: 15%;
+        }
+        .qcItem{
+            width: 50%;
+        }
+        .qcUsed{
+            width: 15%;
+        }
+        .tabTitle{
+            background: #eee;
+        }
+        .tabInfo{
+            box-sizing: border-box;
+            border-bottom: 1px solid #eee;
+        }
     }
+}
+.borderTop{
+    border-top: 1px solid #ebeef5;
+}
+.iconCheck{
+    width: 14px;
+    cursor: pointer;
+}
+.submitBox{
+    text-align: right;
+}
+.submit{
+    display: inline-block;
+    width:60px;
+    height:32px;
+    background:@activeColor;
+    border-radius:4px;
+    color: #fff;
+    text-align: center;
+    line-height: 32px;
+    position: relative;
+    top: 2px;
+    cursor: pointer;
+    margin: 0 20px 22px 0;
 }

src/html/assertTypeDetail.html

@@ -28,19 +28,19 @@
                     <span class="explainL">质控类型：</span>
                     <input class="patientNumInp" style="width: 148px;" type="text" placeholder="请输入质控类型">
                 </div>
-                <div class="filterItem typeFilter">
-                    <div class="">质控条目：</div>
-                    <ul class="listTypeAll">
-                        <li>
+                <div class=" clearfix">
+                    <div class="qcItemTitle">质控条目：</div>
+                    <div class="listTypeAll">
+                        <!-- <div>
                             <span>病案首页</span><i></i>
-                        </li>
-                    </ul>
+                        </div> -->
+                    </div>
                 </div>
                 <!-- <span class="filter">查询</span>
                 <span class="addTypeAssert"><a href="assertTypeDetail.html">添加质控类型</a></span> -->
             </div>
-
-            <div class="pagination"></div>
+            <div class="submitBox"><span class="submit">确定</span></div>
+            <!-- <div class="pagination"></div> -->
         </div>
     </div>
 </body>

src/js/assertTypeDetail.js

@@ -3,8 +3,10 @@ require("../css/assertTypeDetail.less");
 require('./modal.js');
 const {api} = require('./api.js')
 const {post,getCookie,getUrlArgObjectNew} = require('./utils.js')
+const iconCheck= require("./../images/icon_check.png")
+const iconUnCheck = require("./../images/icon_unchecked.png")
 
-
+let dataCopy
 $(function(){
     getList()//获取条目列表
 
@@ -26,10 +28,90 @@ function getList(){
 }
 
 function renderData(data){
-    const dataKeys = Object.keys(data)
+    dataCopy = data
+    const dataKeys = Object.keys(dataCopy)
     let str = ""
     for(let i = 0; i < dataKeys.length; i++){
-        str += `<li><span>${dataKeys[i]}</span></li>`
+        str += `<div class="caseEntryBlcok ${i===0 ? 'borderTop':''}"><div class="caseEntryName">${dataKeys[i]}</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>`
+        }
+        if(dataCopy[dataKeys[i]].length > 0){
+            str += `</div>`
+        }
+        str += `</div>`
     }
+  
     $('.listTypeAll').html(str)
-}
+    bindBlockSlideToggle()
+    bindCheck()
+}
+function bindBlockSlideToggle(){
+ $('.caseEntryName').click(function(){
+     const display =  $(this).parent().find('.caseEntryDetail').css("display");
+     if(display === "none"){
+        $('.caseEntryDetail').slideUp()
+        $(this).parent().find('.caseEntryDetail').slideDown()
+     } else{
+        $('.caseEntryDetail').slideUp()
+     }
+    
+ })
+}
+
+function bindCheck(){
+    $('.iconCheck').click(function(){
+        const checked =  $(this).attr('src') == iconCheck;
+        const index = $(this).parent().attr('data-index')
+        const pIndex = $(this).parent().attr('data-pIndex')
+        if(checked){
+            dataCopy[pIndex][index].sel = 0
+            $(this).attr('src',iconUnCheck)
+        } else{
+            dataCopy[pIndex][index].sel = 1
+            $(this).attr('src',iconCheck)
+        }
+    })
+}
+
+$('.submit').click(function(){
+    const qcName = $('.patientNumInp').val().trim();
+    if(!qcName){
+        $.alerModal({"message":"质控类型不能为空~",type:"tip",time:'1000',isFather: true, fatherWrapper: $("#mainBox", parent.document)});
+        return
+    }
+    let qcTypeCasesEntryVOList = []
+    const dataKeys = Object.keys(dataCopy)
+    for(let i = 0; i < dataKeys.length; i++){
+        for(let j = 0; j < dataCopy[dataKeys[i]].length; j++){
+            const dataItem = dataCopy[dataKeys[i]][j]
+            if(dataItem.sel == '1'){
+                qcTypeCasesEntryVOList.push({
+                    caseEntryId: dataItem.id
+                })
+            }
+        }
+      
+    }
+
+    const param = {
+        id:"",
+        name: qcName,
+        qcTypeCasesEntryVOList
+    }
+   
+    post(api.saveOrUpdate,param).then(res =>{
+        let result = res.data
+        if(result.code == '0'){
+            $(parent.document).find("#contentIframe").attr("src","./assertType.html")
+        }else{
+            $.alerModal({"message":res.data.msg,type:"tip",time:'1000',isFather: true, fatherWrapper: $("#mainBox", parent.document)});
+        }
+    }).catch((e) =>{
+    
+    })
+})