Browse Source

模块数据维护

zhangxc 5 years ago
parent
commit
bd10b6ba3c
5 changed files with 148 additions and 38 deletions
  1. 55 0
      src/css/index.less
  2. 41 5
      src/css/moduleManager.less
  3. 1 1
      src/html/index.html
  4. 23 15
      src/html/moduleManager.html
  5. 28 17
      src/js/moduleManager.js

+ 55 - 0
src/css/index.less

@@ -158,4 +158,59 @@
       color: #FF4D4F;
     }
   }
+}
+.moduleMsgBox{
+  .moduleMsgContent{
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    width: 400px;
+    height:208px;
+    margin: -104px 0 0 -200px;
+    background: #fff;
+    border-radius:4px;
+  }
+  .moduleMsgTitle{
+    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;
+  }
+  .moduleMsgInfo{
+    text-align: center;
+    position: relative;
+    top: 30px;
+  }
+  .moduleMsgBtn{
+    position: relative;
+    text-align: center;
+    top: 81px;
+  }
+  .saveModuleEdit{
+    display: inline-block;
+    color: #fff;
+    width:80px;
+    height:36px;
+    line-height: 36px;
+    text-align: center;
+    background:rgba(90,142,238,1);
+    border-radius:4px;
+  }
+}
+.mask {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  background: #000;
+  opacity: 0.5;
+  left: 0;
+  top: 0;
 }

+ 41 - 5
src/css/moduleManager.less

@@ -1,14 +1,27 @@
+.container{
+    width: 100%;
+}
 h2{
-    padding: 11px 20px;
+    padding: 11px 10px;
     font-size: 16px;
     font-weight: 600;
     border-bottom: 1px solid #E2E5EF;
 }
+.main-body{
+    margin: 20px 40px;
+}
+.totalSumBox{
+    margin: 0 0 20px 0;
+    text-align: right;
+    .totalSum{
+        color: red;
+    }
+}
 table{
-    width: 1080px;
+    width: 100%;
     border:1px solid #E2E5EF;
     border-collapse: collapse;/*关键代码*/
-    margin: 40px 0 0 20px;
+  
     thead{
         background: #EFF0F9;
        
@@ -25,6 +38,29 @@ table{
     }
     
 }
-#dialog-message{
-    display: none;
+.moduleScore, .totalSum{
+    text-align: center;
+    input{
+        text-align: center  ;
+    }
+}
+.saveModuleBox{
+    margin: 20px 0 0 0;
+}
+.saveModule{
+    display: inline-block;
+    float: right;
+    background: #5A8EEE;
+    color:#fff;
+    padding: 9px 16px;
+    border-radius: 5px;
+}
+.mask {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    background: #000;
+    opacity: 0.5;
+    left: 0;
+    top: 0;
 }

+ 1 - 1
src/html/index.html

@@ -38,7 +38,7 @@
       </div>
       <div class="main-body clearfix">
           <div class="menu fl"></div>
-          <div class="main">
+          <div class="main" id="mainBox">
               <iframe src="./console.html" frameborder="0" id="contentIframe"></iframe>
           </div>
       </div>

+ 23 - 15
src/html/moduleManager.html

@@ -12,23 +12,31 @@
 <body>
     <div class="container">
        <h2>模块数据维护</h2>
-        <table>
-            <thead>
-                <th class="moduleNumber">序号</th>
-                <th class="moduleName">模块名称</th>
-                <th class="moduleScore">分数</th>
-            </thead>
-            <tbody>
+       <div class="main-body">
+           <p class="totalSumBox">当前分数合计:<span class="totalSum"></span></p>
+            <table>
+                <thead>
+                    <th class="moduleNumber">序号</th>
+                    <th class="moduleName">模块名称</th>
+                    <th class="moduleScore">分数</th>
+                </thead>
+                <tbody>
 
-            </tbody>
-        </table>
-        <div class="saveModule">保存</div>
-        <div id="dialog-message" title="下载完成">
-            <p>
-              总分不是100分,是否继续
-            </p>
-          </div>
+                </tbody>
+            </table>
+            <div class="saveModuleBox">
+                <span class="saveModule">保存</span>
+            </div>
+            
+       </div>
     </div>
+    <!-- <div class="msgBox">
+        <div class="mask"></div>
+        <p>总分不是100分,是否继续</p>
+        <div>
+            <span>保存</span>
+        </div>
+    </div> -->
 </body>
 
 </html>

+ 28 - 17
src/js/moduleManager.js

@@ -4,6 +4,7 @@ require('./../resource/layui/layui.js');
 require('./../resource/jquery-ui/jquery-ui.min.js');
 require('./../resource/jquery-ui/jquery-ui.min.css');
 require('./../resource/layui/css/layui.css');
+
 // const  layui = require('layui-src');
 const {api} = require('./api.js')
 const {post} = require('./utils.js')
@@ -58,17 +59,18 @@ function renderTab(){
         str += `
         <tr>
             <td class="moduleNumber">${i+1}</td>
-            <td>${data[i].name}</td>
-            <td> <input type="number"  data-index=${i} value=${data[i].score} /></td>
+            <td class="moduleName">${data[i].name}</td>
+            <td class="moduleScore"> <input type="number"  data-index=${i} value=${data[i].score} /></td>
         </tr>
         `
     }
-    str += `
-    <tr>
-        <td>总分</td>
-        <td class="totalSum"></td>
-    </tr>
-    `
+    // str += `
+    // <tr>
+    //     <td class="moduleNumber"></td>
+    //     <td class="moduleName">总分</td>
+    //     <td class="totalSum"></td>
+    // </tr>
+    // `
     $('table tbody').html(str)
     bindInput()
     getTotalSum()
@@ -94,20 +96,29 @@ function bindInput(){
         getTotalSum(data)
     })
 }
+let msgBox =`<div class="moduleMsgBox">
+        <div class="mask"></div>
+        <div class="moduleMsgContent">
+            <p class="moduleMsgTitle">提示 <img class="iconClose" src=${require('./../images/icon_close_default.png')} alt="关闭" /></p>
+            <p class="moduleMsgInfo">总分不是100分,是否继续</p>
+            <div class="moduleMsgBtn">
+                <span class="saveModuleEdit">保存</span>
+            </div>
+        </div>
+    </div>`
 
 $('.saveModule').on("click", function(){
     console.log('data', data)
     const sum =  $('.totalSum').html()
     if(sum != 100){
-        $( "#dialog-message" ).dialog({
-            modal: true,
-            buttons: {
-              "确定": function() {
-                $( this ).dialog( "close" );
-                saveModify()
-              }
-            }
-        });
+        $("#mainBox", parent.document).append(msgBox)
+        $("#mainBox .moduleMsgBox .iconClose", parent.document).on("click", function(e){
+            $("#mainBox .moduleMsgBox", parent.document).remove()
+        })
+        $("#mainBox .moduleMsgBox .saveModuleEdit", parent.document).on("click", function(e){
+            saveModify()
+            $("#mainBox .moduleMsgBox", parent.document).remove()
+        })
     }else{
         saveModify()
     }