评分详情接口对接，样式

src/css/index.less

@@ -1,11 +1,5 @@
 @import './reset.less';
 
-@headerHt:50px;
-@menuLiHt:40px;
-@menuWt:300px;
-@activeColor:#5A8EEE;
-@activeBg:#EEF4FF;
-
 .container{
   height: 100%;
 }
@@ -126,7 +120,7 @@
   }
 }
 .main{
-  margin-left:215px;
+  margin-left:@menuWt+20px;
   height: 100%;
   iframe{
     width: 100%;

src/css/qcScore.less

@@ -0,0 +1,123 @@
+@import './reset.less';
+.main-part{
+  height: 100%;
+}
+.patient-info{
+  height: 50px;
+  line-height: 50px;
+  text-indent: 50px;
+  span{
+    margin-right: 40px;
+  }
+}
+.sub-menu{
+  width: @menuWt;
+  height: 100%;
+  float: left;
+  .active{
+    color: @activeColor;
+    background: @activeBg;
+    border-right: 3px @activeColor solid;
+  }
+  .slide-up{
+    color: @activeColor;
+  }
+  .list-1{
+    position: relative;
+    &:after{
+      content: " ";
+      display: inline-block;
+      position: absolute;
+      left: 270px;
+      top:18px;
+      width: 10px;
+      height: 6px;
+      background: url("../images/icon_down.png") no-repeat;
+    }
+    &.slide-up:after{
+      transform: rotate(180deg);
+      -webkit-transform: rotate(180deg);
+    }
+    ul{
+      display: none;
+      li.page{
+        text-indent: 30px;
+      }
+    }
+  }
+  li{
+    line-height: @menuLiHt;
+    text-indent: 15px;
+    cursor: pointer;
+  }
+}
+.tab-container{
+  margin-left: 310px;
+  height: 100%;
+  .content-box{
+    width:70%;
+    height: 100%;
+    position: relative;
+  }
+  .content-item{
+    display: none;
+    height: 100%;
+    .title{
+      position: absolute;
+      top: 0;
+      width: 100%;
+      color: #333333;
+      font-size: 16px;
+      font-weight: bold;
+      height: 44px;
+      line-height: 44px;
+      border-bottom:1px #E2E5EF solid;
+      text-indent: 20px;
+    }
+    .container{
+      margin-top: 45px;
+      padding-top: 20px;
+      height: 100%;
+      overflow-y: auto;
+    }
+  }
+  .operation{
+    width:28%;
+    margin-right: 10px;
+    .flaw-title{
+      color: #333333;
+      font-weight: bold;
+      height: 44px;
+      line-height: 44px;
+      border-bottom:1px #E2E5EF solid;
+      margin-bottom: 20px;
+      span{
+        font-size: 16px;
+        margin-left: 20px;
+      }
+      a{
+        float: right;
+        width: 66px;
+        height: 28px;
+        margin: 10px 20px 0 0;
+        line-height: 28px;
+        text-align: center;
+        border-radius:4px;
+        color: @activeColor;
+        font-weight: normal;
+        border:1px @activeColor solid;
+      }
+    }
+    .flaw-item{
+      margin: 0 20px 10px 30px ;
+      border-bottom:1px #E2E5EF solid;
+      padding-bottom: 10px;
+      .title{
+        margin-bottom: 10px;
+      }
+    }
+  }
+  .oper{
+    float: right;
+  }
+}

src/css/reset.less

@@ -89,3 +89,82 @@ textarea {
 .fr{
   float: right;
 }
+
+
+@headerHt:50px;   /*logo栏高度*/
+@menuLiHt:40px;   /*菜单项高度*/
+@menuWt:300px;   /*菜单宽度*/
+@activeColor:#5A8EEE;   /*菜单项选中颜色*/
+@activeBg:#EEF4FF;   /*菜单项选中背景*/
+@borderColor:#E2E5EF; /**边框颜色**/
+@warnColor:#FF4D4F;  /**重点红色**/
+
+/****弹窗样式*****/
+.modal{
+  position: fixed;
+  top:0;
+  left: 0;
+  display: none;
+  width: 100%;
+  height: 100%;
+  .cover{
+    width: 100%;
+    height: 100%;
+    background: #000;
+    opacity: .5;
+  }
+  .modal-box{
+    position: absolute;
+    top:50%;
+    left: 50%;
+    width: 400px;
+    height: 255px;
+    margin-top:-125px;
+    margin-left: -200px;
+    background: #fff;
+    border-radius:4px;
+  }
+  .modal-header{
+    height: 40px;
+    line-height: 40px;
+    padding: 0 15px;
+    border-bottom: 1px #E2E5EF solid;
+    a{
+      float: right;
+      font-size: 18px;
+      color: #8C8C8C;
+    }
+  }
+  .modal-body{
+    padding:15px;
+  }
+  .modal-footer{
+    position: absolute;
+    bottom: 20px;
+    width: 100%;
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+    a{
+      width:80px;
+      height:36px;
+      color: #fff;
+      background:@activeColor;
+      border-radius:4px;
+      padding:7px 26px;
+      &.cancel{
+        background: #fff;
+        border:1px @activeColor solid;
+        color:@activeColor;
+        margin-left: 20px;
+      }
+  }
+  }
+}
+
+.red{
+  color: @warnColor;
+}
+.blue{
+  color:@activeColor;
+}

src/html/qcScore.html

@@ -5,20 +5,85 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>质控评分</title>
+    <script type="text/html" id="subMenuTmpl">
+        {{if sonMode.length}}
+        <li class="list-1">${name}
+            {{else}}
+        <li class="page" code="${name}">${name}
+            {{/if}}
+            <ul>
+                {{each sonMode}}
+                <li class="page" code="${name}">${name}</li>
+                {{/each}}
+            </ul>
+        </li>
+    </script>
     <script type="text/html" id="infoTmpl">
-        <span>${number}</span>
-        <span>${name}</span>
-        <span>${sex}</span>
-        <span>${birthday}</span>
-        <span>${deptName}</span>
-        <span>${level}</span>
-        <span>${score}</span>
+        <span>住院号：${fileCode}</span>
+        <span>姓名：${name}</span>
+        <span>性别：${sex}</span>
+        <span>出生日期：${birthday.substr(0,10)}</span>
+        <span>科室：${behDeptName}</span>
+        <span>评级：${level}</span>
+        <span>评分：${scoreRes}</span>
+    </script>
+    <script type="text/html" id="contentTmpl">
+        <div class="content-item" code="${title}">
+            <h2 class="title">${title}</h2>
+            <div class="container">
+                {{each(i,val) info}}
+                {{each(k,text) val}}
+                <div class="cont">
+                    <b>${k}:</b>${text}
+                </div>
+                {{/each}}
+                {{/each}}
+            </div>
+        </div>
+    </script>
+    <script type="text/html" id="flawTmpl">
+        <div class="flaw-item">
+            <div class="title">${msg}</div>
+            <div class="opers" code="${casesEntryId}">
+                <span class="red">-${score}</span>
+                <div class="oper">
+                    <a class="edit-flaw blue" code="${id}" href="javascript:void(0);">修改</a>
+                    <a class="del-flaw red" code="${id}" href="javascript:void(0);">删除</a>
+                </div>
+            </div>
+        </div>
     </script>
 </head>
 <body>
-    <div class="patient-info"></div>
-    <div class="main-part">
-
+    <div class="patient-info" id="patientInfo"></div>
+    <div class="main-part clearfix">
+        <div class="sub-menu"><ul id="subMenu"></ul></div>
+        <div class="tab-container clearfix">
+            <div class="content-box fl" id="contentInfo"></div>
+            <div class="operation fr" id="flaws">
+                <div class="flaw-title">
+                    <span>缺陷详情</span>
+                    <a href="javascript:void(0);">+ 新增</a>
+                </div>
+                <div class="flaw-box"></div>
+            </div>
+        </div>
+    </div>
+    <div class="modal" id="delModal">
+        <div class="cover"></div>
+        <div class="modal-box">
+            <div class="modal-header clearfix">
+                <span class="title">提示</span>
+                <a class="close" href="javascript:void(0);">×</a>
+            </div>
+            <div class="modal-body">
+                <p>确定要删除该评分记录吗？</p>
+            </div>
+            <div class="modal-footer">
+                <a class="confirm" href="javascript:void(0);">确定</a>
+                <a class="close cancel" href="javascript:void(0);">取消</a>
+            </div>
+        </div>
     </div>
 </body>
 </html>

src/js/qcScore.js

@@ -0,0 +1,94 @@
+require("../css/qcScore.less");
+const $ = require('jquery');
+require('jquery-templates');
+const {api,post,getUrlArgObject} = require('./utils.js');
+
+$(function(){
+  getSubMenu();
+  initScoreItem();
+  getRecordDetail();
+});
+
+function initMenu(data){
+  //菜单数据填充
+  $("#subMenuTmpl").tmpl(data).appendTo("#subMenu");
+  //菜单收起展开
+  $(".list-1").on("click",function(){
+    $(".list-1 .slide-up").removeClass('slide-up');
+    $(this).toggleClass('slide-up');
+    $(this).find("ul").slideToggle();
+  });
+  $(".list-1 li").on("click",function(e){
+    e.stopPropagation();
+  });
+  //右侧内容切换
+  $(".page").on("click",function(){
+    //选中样式
+    $(".sub-menu .active").removeClass('active');
+    $(this).addClass("active");
+    //显示对应内容
+    $(".content-item").hide();
+    $(".content-item[code="+$(this).attr("code")+"]").show();
+  });
+}
+
+function getSubMenu(){
+  post(api.getSubMenu).then(function(res){
+    if(res.data.code==='0'){
+      const data = res.data.data;
+      initMenu(data);
+      $(".sub-menu li:first-child.page").addClass("active");
+    }
+  });
+};
+
+//获取病例明细
+function getRecordDetail(){
+  const id=getUrlArgObject("id");
+  post(api.getRecordDetail,{'behospitalCode':id}).then(function(res){
+    if(res.data.code==='0'){
+      const data = res.data.data;
+      const {beHospital,result,msg} = data;
+      const info=Object.assign(beHospital,result);
+      const activeTab=$(".sub-menu .page.active").attr("code");
+      initPatientInfo(info);
+      initContent(result.pageData,activeTab);
+      initScoreItem(msg);
+    }
+  });
+}
+
+//填充患者信息
+function initPatientInfo(data){
+  $("#infoTmpl").tmpl(data).appendTo("#patientInfo");
+}
+//显示病例模块明细
+function initContent(data){
+  const obj = JSON.parse(data);
+  let i=0;
+  for(let k in obj){
+    $("#contentTmpl").tmpl({title:k,info:obj[k],code:i}).appendTo("#contentInfo");
+    i++;
+  }
+  //console.log(obj)
+}
+
+//评分项数据填充
+function initScoreItem(data){
+  //$("#flawTmpl").tmpl(data).appendTo("#flaws");
+  for(let k in data){
+    $("#flawTmpl").tmpl(data[k]).appendTo("#flaws .flaw-box");
+  }
+  $(".flaw-item .oper a").click(function () {
+    $("#delModal").show();
+  })
+}
+
+function delScore(id){
+  post(api.getRecordDetail,{'id':id}).then(function(res){
+    if(res.data.code==='0'){
+      const data = res.data.data;
+
+    }
+  });
+}

webpack.config.js

@@ -108,7 +108,7 @@ module.exports = {
       title: 'qcScore.html',
       template: path.resolve(__dirname, 'src/html', 'qcScore.html'),
       filename: 'qcScore.html',
-      chunks: ['index', 'vendor', 'common','qcScore'],
+      chunks: [ 'qcScore','vendor', 'common'],
       hash: true, //防止缓存
       inject: true,
       minify: {