From eba215b1965ed5c352572d9dc16b8cf12468131f Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期四, 09 七月 2020 15:11:54 +0800
Subject: [PATCH] #

---
 src/main/webapp/views/pdaCe/index.html |  160 +++++++++++++++++++++++++++++++++++++++++------------
 1 files changed, 123 insertions(+), 37 deletions(-)

diff --git a/src/main/webapp/views/pdaCe/index.html b/src/main/webapp/views/pdaCe/index.html
index 0cc5fa4..81d7f1e 100644
--- a/src/main/webapp/views/pdaCe/index.html
+++ b/src/main/webapp/views/pdaCe/index.html
@@ -12,36 +12,44 @@
         }
 
         .mat-msg {
-            overflow: auto;
+            overflow-y: scroll;
             margin-top: 10px;
             height: 115px;
             background-color: #fff;
             border-radius: 5px;
             border: 1px solid #c2c2c2;
         }
-        /* 鍫嗗灈鏈虹姸鎬佷俊鎭〃 */
         #mat-msg-table {
             font-size: 12px;
             border-collapse: collapse;
             margin: 0 auto;
             text-align: center;
         }
-        #mat-msg-table td, #mat-msg-table th {
-            border: 1px solid #f1f1f1;
-            color: #666;
-            height: 15px;
-            line-height: 15px;
+        #tthead {
+            padding-top: 4px;
+            background-color: #ececec;
+            height: 18px;
         }
-        #mat-msg-table thead th {
-            background-color: #fff;
-            width: 400px;
-            font-weight: normal;
+        #tthead span {
+            border-right: 1px solid #b3b3b3;
+            float: left;
+            width: 24%;
         }
-        #mat-msg-table tr:nth-child(odd) {
-            background: #fff;
+        #ttbody {
+            padding-top: 4px;
         }
-        #mat-msg-table tr:nth-child(even) {
-            background: #fff;
+        #ttbody div {
+            content: "";
+            clear: both;
+            display: table;
+        }
+        #ttbody span {
+            border-right: 1px solid #b3b3b3;
+            float: left;
+            width: 22%;
+            overflow:hidden;
+            white-space:nowrap;
+            text-overflow:ellipsis;
         }
 
         #btn-con {
@@ -64,6 +72,41 @@
             white-space:nowrap;
             text-overflow:ellipsis;
         }
+
+        /* 璇︽儏 */
+        .form-box {
+            margin-top: 10px;
+            padding: 15px 0 10px 0;
+            text-align: center;
+            border: 1px solid #BBBBBB;
+        }
+
+        .form-item {
+            margin-bottom: 5px;
+        }
+        .form-box span {
+        }
+        .form-box input {
+            overflow:hidden;
+            white-space:nowrap;
+            text-overflow:ellipsis;
+        }
+        .form-count button {
+            width: 25px;
+            height: 20px;
+        }
+        .form-count input {
+            margin: 0 7px;
+            width: 40px;
+        }
+        .form-btn-con {
+            margin-top: 10px;
+        }
+        .form-btn-con button {
+            padding: 4px 0;
+            height: 25px;
+            margin: 0 15px;
+        }
     </style>
 </head>
 <body>
@@ -76,20 +119,17 @@
     <input type="text" id="matnr" onkeyup="find(this)" autocomplete="off">
 </div>
 
-<!-- 鍫嗗灈鏈虹姸鎬� -->
 <div class="mat-msg" id="mat-msg-id">
-    <table id="mat-msg-table">
-        <thead id="tthead">
-        <tr>
-            <th>缂栫爜</th>
-            <th>鍚嶇О</th>
-            <th>鍗曚綅</th>
-            <th>鏁伴噺</th>
-        </tr>
-        </thead>
-        <tbody id="ttbody">
-        </tbody>
-    </table>
+    <div id="mat-msg-table">
+        <div id="tthead">
+            <span>缂栫爜</span>
+            <span>鍚嶇О</span>
+            <span>鍗曚綅</span>
+            <span>鏁伴噺</span>
+        </div>
+        <div id="ttbody">
+        </div>
+    </div>
 </div>
 
 <div id="btn-con">
@@ -97,9 +137,30 @@
     <button >缁勬墭</button>
     <span id="tips"></span>
 </div>
+
+<!-- 璇︽儏 -->
+<div class="form-box" id="mat-detail">
+    <div class="form-item">
+        <span>鍚嶇О</span>
+        <input id="matName" type="text" disabled="disabled" style="background-color: #ececec;color: #000">
+    </div>
+    <div class="form-item">
+        <span>鍗曚綅</span>
+        <input id="str1" type="text" disabled="disabled" style="background-color: #ececec;color: #000; text-align: center;">
+    </div>
+    <div class="form-item form-count">
+        <span style="margin-right: 10px">鏁伴噺</span>
+        <button onclick="reduce()">-</button><input id="count" type="number" style="text-align: center"><button onclick="add()">+</button>
+    </div>
+    <div class="form-item form-btn-con">
+        <button id="confirm" onclick="confirm()">鎻愬彇</button>
+        <button id="cancel" onclick="cancel()" style="background-color: #fff">鍙栨秷</button>
+    </div>
+</div>
+
+
 </body>
 <script>
-    // initCrnMsgTable()
     var matMsgTableBlankRows = 0;   // 绌虹櫧琛屾暟
     var code = document.getElementById("code")
     var matnr = document.getElementById("matnr")
@@ -109,6 +170,14 @@
     var ttbody = document.getElementById("ttbody");
     var btnCon = document.getElementById("btn-con");
     var tipDom = document.getElementById("tips");
+
+    var matetail = document.getElementById("mat-detail");
+    var matName = document.getElementById("matName");
+    var str1 = document.getElementById("str1");
+    var count = document.getElementById("count");
+
+    matetail.style.display = 'none';
+    var initMatCount = 1;
 
     // 鏌ヨ鐗╂祦
     function find(el) {
@@ -121,11 +190,18 @@
         }, function (res) {
             if (res.code === 200) {
                 if (res.data != null) {
+                    // 鏍峰紡
                     matMsg.style.display = 'none';
                     btnCon.style.display = 'none';
+                    matetail.style.display = 'block';
+                    // 濉厖鏁版嵁
+                    matName.value = res.data.matName;
+                    str1.value = res.data.str1;
+                    count.value = initMatCount;
                 } else {
                     matMsg.style.display = 'block';
                     btnCon.style.display = 'block';
+                    matetail.style.display = 'none';
                 }
             } else {
                 alert(res.msg);
@@ -139,7 +215,7 @@
     function initCrnMsgTable(row) {
         var line;
         if (row === undefined){
-            var one = tthead.offsetHeight;
+            var one = 15;
             var total = matMsg.offsetHeight;
             var count = total / one;
             count = parseInt(count) - 1;
@@ -148,16 +224,16 @@
         } else {
             line = row;
         }
+
         var html = "";
         for (var i = 0; i < line; i ++){
-            html += " <tr>\n" +
-                "       <td>1</td>\n" +
-                "       <td>2</td>\n" +
-                "       <td>3</td>\n" +
-                "       <td>4</td>\n" +
-                "     </tr>\n";
+            html += " <div>\n" +
+                "       <span></span>\n" +
+                "       <span></span>\n" +
+                "       <span></span>\n" +
+                "       <span></span>\n" +
+                "     </div>\n";
         }
-        alert(html)
         ttbody.innerHTML = html;
     }
 
@@ -181,6 +257,16 @@
         }
     }
 
+    function add() {
+        count.value = Number(count.value) + 1;
+    }
+    function reduce() {
+        if (count.value <= initMatCount) {
+            return;
+        }
+        count.value = count.value - 1;
+    }
+
     function httpRequest(paramObj,fun,errFun) {
         var xmlhttp = null;
         /*鍒涘缓XMLHttpRequest瀵硅薄锛�

--
Gitblit v1.9.1