条目数据维护

src/css/index.less

@@ -213,6 +213,74 @@
     cursor: pointer;
   }
 }
+.itemMsgBox{
+  .itemMsgContent{
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    width: 500px;
+    height:468px;
+    margin: -234px 0 0 -250px;
+    background: #fff;
+    border-radius:4px;
+  }
+  .itemMsgTitle{
+    position: relative;
+    height: 40px;
+    padding: 0 0 0 20px;
+    line-height: 40px;
+    border-bottom: 1px solid #E2E5EF;
+    font-size: 14px;
+    color: #1E1E1E;
+  }
+  .iconClose{
+    width: 40px;
+    position: absolute;
+    right: 0;
+  }
+  .itemMsgContentBox{
+    margin: 20px 0 0 0;
+  }
+  .itemMsgInfoBox{
+    line-height: 40px;
+    margin: 0 0 10px 0;
+  }
+  .itemInfoRight{
+    display: inline-block;
+    width: 300px;
+    input{
+      width: 280px;
+      box-sizing: border-box;
+      border:  1px solid #E2E5EF;
+      height: 40px;
+      line-height: 40px;
+      border-radius: 2px;
+      padding: 0 10px;
+    }
+  }
+  .itemMsgLab{
+    display: inline-block;
+    width: 150px;
+    text-align: right;
+    color: #777;
+  }
+  .confirmEditBox{
+    position: relative;
+    text-align: center;
+    top: 30px;
+  }
+  .confirmEdit{
+    display: inline-block;
+    color: #fff;
+    width:80px;
+    height:36px;
+    line-height: 36px;
+    text-align: center;
+    background:rgba(90,142,238,1);
+    border-radius:4px;
+    cursor: pointer;
+  }
+}
 .mask {
   position: fixed;
   width: 100%;

src/css/itemManager.less

@@ -21,7 +21,7 @@ table{
     th,td{
         height: 40px;
         box-sizing: border-box;
-        padding: 0 30px;
+        padding: 0 10px;
         border:1px solid #E2E5EF;
         border-collapse: collapse;
     }
@@ -63,8 +63,12 @@ table{
         cursor: pointer;
     }
 }
+.switchImg{
+    width: 30px;
+}
 .selectModuleType,.moduleItemInp,.selectUsed, .selectReject{
     display: inline-block;
+    position: relative;
     width:160px;
     padding: 0 10px;
     height:40px;
@@ -73,6 +77,12 @@ table{
     box-sizing: border-box;
     cursor: pointer;
 }
+.arrow{
+    position: absolute;
+    width: 10px;
+    top: 16px;
+    right: 10px;
+}
 .moduleItemInp{
     cursor: default;
     outline: none;
@@ -101,7 +111,8 @@ table{
     line-height: 36px;
 }
 .editItem{
-   color: #5A8EEE
+   color: #5A8EEE;
+   cursor: pointer;
 }
 
 .ellipsis{
@@ -109,15 +120,28 @@ table{
     text-overflow:ellipsis;
     white-space: nowrap;
 }
-
+.textCenter{
+    text-align: center;
+}
+.totalSum{
+    font-size:12px;
+    line-height:17px;
+    color: #777777;
+    margin-right: 20px;
+}
 
 .pagination{
-    margin: 35px 0 0 0;
+    margin: 35px 0 0 0  ;
     text-align: right;
 }
 .activePage{
     color: #5A8EEE;
 }
+.pageNum,.prePage,.nextPage{
+    cursor: pointer;
+}
 .pageNum, .more{
+    display: inline-block;
+    width: 20px;
     margin: 0 20px 0 0;
 }

src/html/index.html

@@ -30,7 +30,7 @@
               <a class="setting" id="userName" href="javascript:void(0);">***</a>
               <ul class="userAction">
                   <li id="changeWord">修改密码</li>
-                  <li><a class="login-out" href="./login.html">退出</a></li>
+                  <li><a class="login-out" href="./login.html">退出id</a></li>
               </ul>
           </div>
       </div>
@@ -38,7 +38,7 @@
           <div class="menu fl">
               <ul></ul>
               <div class="copy-right">©杭州朗通信息技术有限公司</div></div>
-          <div class="main">
+          <div class="main" id="mainBox">
               <iframe src="./console.html" frameborder="0" id="contentIframe"></iframe>
           </div>
       </div>

src/html/itemManager.html

@@ -16,7 +16,7 @@
             <div class="filterBox">
                 <span class="filterItem typeFilter">
                     <span>类别名称：</span>
-                    <span class="selectModuleType">全部</span>
+                    <span class="selectModuleType">全部 </span>
                     <ul class="moduleTypeList filterDropList"></ul>
                 </span>
                 <span class="filterItem">
@@ -52,9 +52,9 @@
                     <th class="moduleItemName">质控条目名称</th>
                     <th class="moduleTipsMsg">提示信息</th>
                     <th class="moduleScore">分值</th>
-                    <th class="moduleReject">单项否决等级</th>
+                    <th class="moduleReject">单项否决</th>
                     <th class="moduleUsed">启用</th>
-                    <th class="moduleOpera">操作</th>
+                    <th class="moduleOpera" style="width: 65px;">操作</th>
                 </thead>
                 <tbody>
     

src/js/itemManager.js

@@ -3,9 +3,16 @@ require("../css/itemManager.less");
 require('./../resource/jquery-ui/jquery-ui.min.js');
 const {api} = require('./api.js')
 const {post} = require('./utils.js')
-const switchIconOpen = require("./../images/icon4.png")
-const switchIconClose = require("./../images/icon5.png")
+const switchIconOpen = require("./../images/btn_open.png")
+const switchIconClose = require("./../images/btn_close.png")
+const iconDown= require("./../images/arrow_down.png")
+const iconUp = require("./../images/arrow_up.png")
+const arrowLeft= require("./../images/arrow_left.png")
+const arrowRight = require("./../images/arrow_right.png")
 let casesId="", name="", isReject ="", isUsed =""
+$(".selectModuleType").append(`<img class="arrow" src=${iconDown} alt="下拉">`)
+$(".selectReject").append(`<img class="arrow" src=${iconDown} alt="下拉">`)
+$(".selectUsed").append(`<img class="arrow" src=${iconDown} alt="下拉">`)
 
 //获取表格数据
 function getTabData(activePage){
@@ -44,11 +51,15 @@ $('.selectModuleType').on("click", function(e){
     e.stopPropagation()
     $(".rejectList ").css("display","none")
     $(".usedList ").css("display", "none")
+    $(".selectReject .arrow").attr("src",iconDown)
+    $(".selectUsed .arrow").attr("src",iconDown)
     const showList =  $(".moduleTypeList ").css("display")
     if(showList == "none" ||!showList){
         $(".moduleTypeList ").css("display","block")
+        $(".selectModuleType .arrow").attr("src",iconUp)
     }else{
         $(".moduleTypeList ").css("display", "none")
+        $(".selectModuleType .arrow").attr("src",iconDown)
     }
 })
     
@@ -56,22 +67,30 @@ $('.selectReject').on("click", function(e){
     e.stopPropagation()
     $(".moduleTypeList ").css("display", "none")
     $(".usedList ").css("display", "none")
+    $(".selectModuleType .arrow").attr("src",iconDown)
+    $(".selectUsed .arrow").attr("src",iconDown)
     const showList =  $(".rejectList ").css("display")
     if(showList == "none" ||!showList){
         $(".rejectList ").css("display","block")
+        $(".selectUsed .arrow").attr("src",iconUp)
     }else{
         $(".rejectList ").css("display", "none")
+        $(".selectUsed .arrow").attr("src",iconDown)
     }
 })
 $('.selectUsed').on("click", function(e){
     e.stopPropagation()
     $(".moduleTypeList ").css("display", "none")
     $(".rejectList ").css("display","none")
+    $(".selectModuleType .arrow").attr("src",iconDown)
+    $(".selectReject .arrow").attr("src",iconDown)
     const showList =  $(".usedList ").css("display")
     if(showList == "none" ||!showList){
         $(".usedList ").css("display","block")
+        $(".selectUsed .arrow").attr("src",iconUp)
     }else{
         $(".usedList ").css("display", "none")
+        $(".selectUsed .arrow").attr("src",iconDown)
     }
 })
 bindRejectSelect()
@@ -84,13 +103,13 @@ function renderTab(data,activePage){
         const item = data[i]
         str += `
             <tr data-id=${item.id} data-index=${i}>
-                <td>${(activePage-1)*10 + i+1}</td>
+                <td  class="textCenter">${(activePage-1)*10 + i+1}</td>
                 <td>${item.casesName}</td>
                 <td>${item.name}</td>
                 <td>${item.msg}</td>
-                <td>${item.score}</td>
-                <td>${item.isReject == '1' ? `<img src=${switchIconOpen} />`:`<img src=${switchIconClose} />`}</td>
-                <td>${item.isUsed == '1' ? `<img src=${switchIconOpen} />`:`<img src=${switchIconClose} />`}</td>
+                <td  class="textCenter">${item.score}</td>
+                <td  class="textCenter">${item.isReject == '1' ? `<img class="switchImg" src=${switchIconOpen} />`:`<img class="switchImg" src=${switchIconClose} />`}</td>
+                <td class="textCenter">${item.isUsed == '1' ? `<img class="switchImg" src=${switchIconOpen} />`:`<img class="switchImg" src=${switchIconClose} />`}</td>
                 <td class="editItem">修改</td>
             </tr>
         `
@@ -111,40 +130,50 @@ function editItem(item,activePage){
     const itemCpoy = JSON.parse(JSON.stringify(item))
     $('.pop-box').remove()
     $('.container').append('<div class="pop-box"></div>')
+    console.log('item',item)
     const str = `
         <div class="itemMsgBox">
             <div class="mask"></div>
-            <div><span>提示信息:</span> <input class="itemTipMsg" value=${itemCpoy.msg} /></div>
-            <div><span>分值:</span> <input class="itemScore"  type="number" value=${itemCpoy.score} /></div>
-            <div><span>单项否决</span><span class="itemReject">${itemCpoy.isReject}</span></div>
-            <div><span>启用</span><span class="itemUsed">${itemCpoy.isUsed}</span></div>
-            <div class="confirmEdit">确定</div>
+            <div class="itemMsgContent">
+                <p class="itemMsgTitle">修改 <img class="iconClose" src=${require('./../images/icon_close_default.png')} alt="关闭" /></p>
+                <div class="itemMsgContentBox">
+                    <div class="itemMsgInfoBox"><span class="itemMsgLab">模块类别：</span> <span class="itemInfoRight">${itemCpoy.casesName}</span></div>
+                    <div class="itemMsgInfoBox"><span class="itemMsgLab">质控条目名称：</span> <span class="itemInfoRight"> ${itemCpoy.name}</span></div>
+                    <div class="itemMsgInfoBox"><span class="itemMsgLab">提示信息：</span> <span class="itemInfoRight"> <input class="itemTipMsg" value=${itemCpoy.msg} /></span></div>
+                    <div class="itemMsgInfoBox"><span class="itemMsgLab">分值：</span> <span class="itemInfoRight"> <input class="itemScore"  type="number" value=${itemCpoy.score} /></span></div>
+                    <div class="itemMsgInfoBox"><span class="itemMsgLab">单项否决：</span><span class="itemInfoRight itemReject">${itemCpoy.isReject}</span></div>
+                    <div class="itemMsgInfoBox"><span class="itemMsgLab">启用：</span><span class=" temInfoRight itemUsed">${itemCpoy.isUsed}</span></div>
+                </div>
+                
+                <div class="confirmEditBox"><span class="confirmEdit">保存</span></div>
+            </div>
         </div>
        
     `
-    $('.pop-box').html(str)
-    $(".itemTipMsg").on("input", function(e){
+    $("#mainBox", parent.document).append(str)
+    $("#mainBox .itemMsgBox .itemTipMsg", parent.document).on("input", function(e){
         const val = $(this).val()
+        console.log('val', val)
         itemCpoy.msg = val
     })
-    $(".itemScore").on("input", function(e){
+    $("#mainBox .itemMsgBox .itemScore", parent.document).on("input", function(e){
         const val = $(this).val()
         itemCpoy.score = val
     })
-    $(".itemReject").on("click", function(e){
+    $("#mainBox .itemMsgBox .itemReject", parent.document).on("click", function(e){
         itemCpoy.isReject = itemCpoy.isReject == 1 ? 0 : 1
-        $('.pop-box').remove()
+        $('#mainBox .itemMsgBox', parent.document).remove()
         editItem(itemCpoy,activePage)
     })
-    $(".itemUsed").on("click", function(e){
+    $("#mainBox .itemMsgBox .itemUsed", parent.document).on("click", function(e){
         itemCpoy.isUsed = itemCpoy.isUsed == 1 ? 0 : 1
-        $('.pop-box').remove()
+        $('#mainBox .itemMsgBox', parent.document).remove()
         editItem(itemCpoy,activePage)
     })
     
-    $(".confirmEdit").on("click", function(){
+    $("#mainBox .itemMsgBox .confirmEdit", parent.document).on("click", function(){
         saveEdit(itemCpoy,activePage)
-        $('.pop-box').remove()
+        $('#mainBox .itemMsgBox', parent.document).remove()
     })
    
     
@@ -228,7 +257,7 @@ function bindUsedSelect(){
 
 //分页渲染
 function renderPagination(totalPage,activePage,totalNum){
-    let str = `<span class="totalNum">共${totalPage}页/${totalNum}条数据</span><span class="prePage">前一页</span>`
+    let str = `<span class="totalSum">共${totalPage}页/${totalNum}条数据</span><span class="prePage"><img class="arrowPage" src=${arrowLeft}/></span>`
     if(totalPage <= 6){
         for(let i = 1; i <= totalPage; i++){
             str += `<span class="pageNum ${'page'+i}" data-page=${i}>${i}</span>`
@@ -259,7 +288,7 @@ function renderPagination(totalPage,activePage,totalNum){
         }
        
     }
-    str += `<span class="nextPage">后一页</span>`
+    str += `<span class="nextPage"><img class="arrowPage" src=${arrowRight}/></span>`
     $('.pagination').html(str)
     $('.page' + activePage).addClass('activePage')
     $(".pageNum").on("click", function(e){
@@ -290,4 +319,7 @@ $(document).on("click", function(){
     $(".moduleTypeList ").css("display", "none")
     $(".rejectList ").css("display","none")
     $(".usedList ").css("display", "none")
+    $(".selectModuleType .arrow").attr("src",iconDown)
+    $(".selectReject .arrow").attr("src",iconDown)
+    $(".selectUsed .arrow").attr("src",iconDown)
 })