DeXun/klp-oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 将所有input元素替换为contenteditable的div元素
- 统一调整字体大小从16px到18px
- 调整表格行边框样式
- 修改每页显示数量从8改为7
This commit is contained in:
砂糖
2026-02-02 17:23:21 +08:00
parent a6002710f2
commit ab78df57a9
1 changed files with 38 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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