refactor(wms): 将输入框替换为可编辑div并调整样式

- 将所有input元素替换为contenteditable的div元素
- 统一调整字体大小从16px到18px
- 调整表格行边框样式
- 修改每页显示数量从8改为7

klp-ui/src/views/wms/delivery/components/wayBill.vue

@@ -9,34 +9,34 @@
       <div class="waybill-header">
         <div class="header-left">
           <span class="label">收货单位：</span>
-          <input type="text" class="editable-input transparent-input" v-model="localWaybill.consigneeUnit" />
+          <div class="editable-input transparent-input" contenteditable>{{ localWaybill.consigneeUnit }}</div>
         </div>
         <div class="header-center">
-          <input type="text" class="editable-input date-input transparent-input" v-model="localWaybill.deliveryYear" />
+          <div class="editable-input date-input transparent-input" contenteditable>{{ localWaybill.deliveryYear }}</div>
           <span class="label date-label">年</span>
-          <input type="text" class="editable-input date-input transparent-input" v-model="localWaybill.deliveryMonth" />
+          <div class="editable-input date-input transparent-input" contenteditable>{{ localWaybill.deliveryMonth }}</div>
           <span class="label date-label">月</span>
-          <input type="text" class="editable-input date-input transparent-input" v-model="localWaybill.deliveryDay" />
+          <div class="editable-input date-input transparent-input" contenteditable>{{ localWaybill.deliveryDay }}</div>
           <span class="label date-label">日</span>
         </div>
         <div class="header-right">
           <span class="label">发货单位：</span>
-          <input type="text" class="editable-input transparent-input" v-model="localWaybill.senderUnit" />
+          <div class="editable-input transparent-input" contenteditable>{{ localWaybill.senderUnit }}</div>
         </div>
       </div>
 
       <div class="waybill-header">
         <div class="header-left">
           <span class="label">负责人：</span>
-          <input type="text" class="editable-input transparent-input" v-model="localWaybill.principal" />
+          <div class="editable-input transparent-input" contenteditable>{{ localWaybill.principal }}</div>
         </div>
         <div class="header-right">
           <span class="label">电话：</span>
-          <input type="text" class="editable-input transparent-input" v-model="localWaybill.principalPhone" />
+          <div class="editable-input transparent-input" contenteditable>{{ localWaybill.principalPhone }}</div>
         </div>
         <div class="header-center">
           <span class="label">车牌：</span>
-          <input type="text" class="editable-input transparent-input" v-model="localWaybill.licensePlate" />
+          <div class="editable-input transparent-input" contenteditable>{{ localWaybill.licensePlate }}</div>
         </div>
       </div>
 
@@ -70,21 +70,15 @@
           </tr>
           <!-- 明细数据 -->
           <tr v-for="(item, index) in displayWaybillDetails" :key="index">
-            <td><input type="text" class="table-input transparent-input" v-model="item.productName" /></td>
-            <td><input type="text" class="table-input transparent-input" v-model="item.edgeType" />
-            </td>
-            <td><input type="text" class="table-input transparent-input" v-model="item.packageType" />
-            </td>
-            <td><input type="text" class="table-input transparent-input" v-model="item.actualWarehouseName" />
-            </td>
-            <td><input type="text" class="table-input transparent-input" v-model="item.settlementType" />
-            </td>
-            <td><input type="text" class="table-input transparent-input" v-model="item.rawMaterialFactory" />
-            </td>
-            <td><input type="text" class="table-input transparent-input" v-model="item.coilNumber" /></td>
-            <td><input type="text" class="table-input transparent-input" v-model="item.specification" /></td>
-            <td><input type="text" class="table-input transparent-input" v-model="item.material" />
-            </td>
+            <td><div class="table-input transparent-input" contenteditable>{{ item.productName }}</div></td>
+            <td><div class="table-input transparent-input" contenteditable>{{ item.edgeType }}</div></td>
+            <td><div class="table-input transparent-input" contenteditable>{{ item.packageType }}</div></td>
+            <td><div class="table-input transparent-input" contenteditable>{{ item.actualWarehouseName }}</div></td>
+            <td><div class="table-input transparent-input" contenteditable>{{ item.settlementType }}</div></td>
+            <td><div class="table-input transparent-input" contenteditable>{{ item.rawMaterialFactory }}</div></td>
+            <td><div class="table-input transparent-input" contenteditable>{{ item.coilNumber }}</div></td>
+            <td><div class="table-input transparent-input" contenteditable>{{ item.specification }}</div></td>
+            <td><div class="table-input transparent-input" contenteditable>{{ item.material }}</div></td>
             <!-- <td><input type="number" class="table-input transparent-input" v-model.number="item.quantity"
                 placeholder="0" /></td> -->
             <td><input type="number" class="table-input transparent-input" v-model.number="item.weight"
@@ -106,7 +100,7 @@
 
       <div class="waybill-pickup-location">
         <!-- <div class="pickup-location-item inline"> -->
-        <span style="font-size: 16px; font-weight: bold;">取货地点：</span>
+        <span style="font-size: 18px; font-weight: bold;">取货地点：</span>
         <input type="text" class="editable-input full-input transparent-input" v-model="localWaybill.pickupLocation" />
         <!-- </div> -->
       </div>
@@ -115,19 +109,19 @@
       <div class="waybill-footer">
         <div class="footer-item inline">
           <span class="label">销售：</span>
-          <input type="text" class="editable-input signature-input transparent-input" />
+          <div class="editable-input signature-input transparent-input" contenteditable>{{ localWaybill.salesman }}</div>
         </div>
         <div class="footer-item inline">
           <span class="label">发货：</span>
-          <input type="text" class="editable-input signature-input transparent-input" />
+          <div class="editable-input signature-input transparent-input" contenteditable>{{ localWaybill.deliveryman }}</div>
         </div>
         <div class="footer-item inline">
           <span class="label">司机：</span>
-          <input type="text" class="editable-input signature-input transparent-input" />
+          <div class="editable-input signature-input transparent-input" contenteditable>{{ localWaybill.driver }}</div>
         </div>
         <div class="footer-item inline">
           <span class="label">磅房：</span>
-          <input type="text" class="editable-input signature-input transparent-input" />
+          <div class="editable-input signature-input transparent-input" contenteditable>{{ localWaybill.weightRoom }}</div>
         </div>
       </div>
       </div>
@@ -165,7 +159,7 @@ export default {
   data() {
     return {
       currentPage: 1,
-      perPage: 8,
+      perPage: 7,
       totalPages: 1,
       // 本地可编辑的发货单数据
       localWaybill: {
@@ -482,7 +476,7 @@ export default {
   font-weight: bold;
   display: inline-block;
   width: 100px;
-  font-size: 16px;
+  font-size: 18px;
   text-align: right;
   white-space: nowrap;
 }
@@ -496,11 +490,12 @@ export default {
   padding: 4px 8px;
   border: 1px solid #dcdfe6;
   border-radius: 4px;
-  font-size: 16px;
+  font-size: 18px;
   font-weight: bold;
   font-family: SimSun, serif;
   outline: none;
   transition: all 0.2s;
+  line-height: 18px;
   border-bottom: 1px dashed #dcdfe6;
 }
 
@@ -542,13 +537,17 @@ export default {
   line-height: 6mm;
   text-align: center;
   vertical-align: middle;
-  font-size: 16px;
+  font-size: 18px;
   font-weight: 900;
   padding: 0;
   overflow: hidden;
   white-space: nowrap;
 }
 
+.waybill-table tr {
+  border: 1px solid #000;
+}
+
 /* 表格列宽设置 */
 .waybill-table th:nth-child(1),
 .waybill-table td:nth-child(1) {
@@ -645,7 +644,7 @@ export default {
   outline: none;
   background: transparent;
   /* font-family: inherit; */
-  font-size: 16px;
+  font-size: 18px;
   line-height: 6mm;
   text-align: center;
   vertical-align: middle;
@@ -716,7 +715,7 @@ export default {
 /* 备注样式 */
 .waybill-remarks {
   margin-bottom: 30px;
-  font-size: 15px;
+  font-size: 18px;
   line-height: 1.5;
   /* font-weight: 600; */
   font-weight: bold;
@@ -733,21 +732,21 @@ export default {
   justify-content: space-between;
   align-items: center;
   margin-bottom: 20px;
-  font-size: 16px;
+  font-size: 18px;
 }
 
 .waybill-pickup-location {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 20px;
-  font-size: 16px;
+  margin-bottom: 10px;
+  font-size: 18px;
 }
 
 
 
 .waybill-pickup-location label {
-  font-size: 16px;
+  font-size: 18px;
   /* margin-right: 10px; */
   text-align: left !important;
   width: 40px;
@@ -768,7 +767,7 @@ export default {
 }
 
 .footer-item .label {
-  font-size: 16px;
+  font-size: 18px;
   margin-right: 10px;
   width: 40px;
 }