Browse Source

refactor(npcIqc): 优化页面高度计算逻辑并统一样式设置

- 在logisticsManagement.vue中提取高度计算逻辑到变量calculatedHeight,提高代码可读性
- 为npcIqcList.vue中的详情内容包装器添加动态高度样式绑定
- 统一三个页面的高度计算公式为(window.innerHeight - 20) / 2保持一致性
- 在npcIqcList.vue的.detail-content-wrapper样式中添加height: 100%属性
- 移除poOrder_search.vue中关于模仿其他页面的注释,保持代码风格统一
master
qiankanghui 2 weeks ago
parent
commit
21c12f1a6d
  1. 6
      src/views/modules/npcIqc/logisticsManagement.vue
  2. 11
      src/views/modules/npcIqc/npcIqcList.vue
  3. 5
      src/views/modules/order/poOrder_search.vue

6
src/views/modules/npcIqc/logisticsManagement.vue

@ -171,8 +171,10 @@ export default {
},
mounted () {
this.$nextTick(() => {
this.height = (window.innerHeight - 220) / 2
this.detailHeight = (window.innerHeight - 220) / 2
//
const calculatedHeight = (window.innerHeight - 220) / 2
this.height = calculatedHeight
this.detailHeight = calculatedHeight
this.getMainData()
})
},

11
src/views/modules/npcIqc/npcIqcList.vue

@ -115,7 +115,7 @@
<!-- 详情页签 -->
<el-tabs v-model="activeTab" :style="{marginTop: '10px', width: '100%'}" @tab-click="handleTabClick" class="customer-tab" type="border-card">
<el-tab-pane label="详情" name="detail" class="detail-tab-pane">
<div class="detail-content-wrapper">
<div class="detail-content-wrapper" :style="{height: detailHeight + 'px'}">
<npc-iqc-detail :detail-data="currentRow" />
</div>
</el-tab-pane>
@ -236,10 +236,10 @@ export default {
},
mounted () {
this.$nextTick(() => {
//
const availableHeight = window.innerHeight - 280
this.tableHeight = availableHeight * 0.4
this.detailHeight = availableHeight * 0.6
//
const calculatedHeight = (window.innerHeight - 220) / 2
this.tableHeight = calculatedHeight
this.detailHeight = calculatedHeight
this.getMainData()
})
},
@ -592,6 +592,7 @@ export default {
overflow-y: auto;
overflow-x: hidden;
padding: 10px;
height: 100%;
}
/* 分页插件紧凑化 */

5
src/views/modules/order/poOrder_search.vue

@ -465,8 +465,9 @@ export default {
},
mounted() {
this.$nextTick(() => {
// 仿 supplierList.vue
this.height = (window.innerHeight - 220) / 2
//
const calculatedHeight = (window.innerHeight - 220) / 2
this.height = calculatedHeight
})
},
methods: {

Loading…
Cancel
Save