From b48471f9d7ba5a23fd18506a1154807386e28f7e Mon Sep 17 00:00:00 2001 From: syruan <15555146157@163.com> Date: Tue, 23 Sep 2025 20:13:13 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BB=93=E7=AE=97=E8=A1=A8=E6=A0=BC=E6=BB=9A?= =?UTF-8?q?=E5=8A=A8=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../material/cost/component/applyDetail.vue | 710 ++++++++++++++---- .../cost/component/applyDetail.vue | 2 +- 2 files changed, 550 insertions(+), 162 deletions(-) diff --git a/src/views/material/cost/component/applyDetail.vue b/src/views/material/cost/component/applyDetail.vue index cf0c80ac..5282f665 100644 --- a/src/views/material/cost/component/applyDetail.vue +++ b/src/views/material/cost/component/applyDetail.vue @@ -116,17 +116,17 @@ -->
+ - @@ -136,43 +136,83 @@ +
结算费用
结算单位结算工程 {{ projectName }}
- - - 租赁费用明细 - - - 序号 - 设备名称 - 规格型号 - 计量单位 - 租赁单价 - 租赁数量 - 租赁日期 - 归还日期 - 租赁天数 - 租赁费用（元） - + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
租赁费用明细
序号设备名称规格型号计量单位租赁单价租赁数量租赁日期归还日期租赁天数租赁费用（元）
+
- - - {{ index + 1 }} - {{ item.typeName }} - {{ item.modelName }} - {{ item.mtUnitName }} - {{ item.leasePrice.toFixed(3) }} - - {{ item.num.toFixed(2) }} - - {{ item.startTime }} - {{ item.endTime }} - {{ Number(item.leaseDays).toFixed(2) }} - - {{ item.costs.toFixed(3) }} - - + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
{{ index + 1 }}{{ item.typeName }}{{ item.modelName }}{{ item.mtUnitName }}{{ item.leasePrice ? item.leasePrice.toFixed(3) : '0' }}{{ item.num.toFixed(2) }}{{ item.startTime }}{{ item.endTime }}{{ Number(item.leaseDays).toFixed(2) }}{{ item.costs ? item.costs.toFixed(3) : '0' }}
+
+
- + + @@ -234,40 +274,69 @@ -->
+ +
+ +
+
费用小计： {{ leaseCost }}
+ + + + + + + + + + + + + + + + + + + + + +
维修费用明细
序号设备名称规格型号计量单位维修数量是否收费维修费用（元）
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + +
{{ index + 1 }}{{ item.typeName }}{{ item.modelName }}{{ item.mtUnitName }}{{ item.num.toFixed(2) }}{{ item.partType }}{{ item.costs.toFixed(3) }}
+
+ + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -323,38 +392,65 @@ -->
+ +
+ +
+
维修费用明细
序号设备名称规格型号计量单位维修数量是否收费维修费用（元）
{{ index + 1 }}{{ item.typeName }}{{ item.modelName }}{{ item.mtUnitName }}{{ item.num.toFixed(2) }}{{ item.partType }}{{ item.costs.toFixed(3) }}
费用小计： {{ repairCost }}
+ + + + + + + + + + + + + + + + + + + +
丢失费用明细
序号设备名称规格型号计量单位丢失数量丢失费用（元）
+ + + +
+ + + + + + + + + + + + + + + + + + + +
{{ index + 1 }}{{ item.typeName }}{{ item.modelName }}{{ item.mtUnitName }}{{ item.num.toFixed(2) }}{{ item.costs.toFixed(3) }}
+
+ + + - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -415,40 +511,69 @@ -->
+ +
+ +
+
丢失费用明细
序号设备名称规格型号计量单位丢失数量丢失费用（元）
{{ index + 1 }}{{ item.typeName }}{{ item.modelName }}{{ item.mtUnitName }}{{ item.num.toFixed(2) }}{{ item.costs.toFixed(3) }}
费用小计： {{ loseCost }}
+ + + + + + + + + + + + + + + + + + + + + +
报废费用明细
序号设备名称规格型号计量单位报废数量是否收费报废费用（元）
+ + + +
+ + + + + + + + + + + + + + + + + + + + + +
{{ index + 1 }}{{ item.typeName }}{{ item.modelName }}{{ item.mtUnitName }}{{ item.num.toFixed(2) }}{{ item.partType }}{{ item.costs.toFixed(3) }}
+
+ + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -530,55 +655,90 @@ -->
+ +
+ +
+
报废费用明细
序号设备名称规格型号计量单位报废数量是否收费报废费用（元）
{{ index + 1 }}{{ item.typeName }}{{ item.modelName }}{{ item.mtUnitName }}{{ item.num.toFixed(2) }}{{ item.partType }}{{ item.costs.toFixed(3) }}
费用小计： {{ scrapCost }}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
减免费用明细
序号设备名称规格型号计量单位租赁单价减免数量减免开始日期减免结束日期减免天数减免原因减免费用（元）
+ + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{{ index + 1 }}{{ item.typeName }}{{ item.modeName }}{{ item.unitName }}{{ item.leasePrice }}{{ item.reduceNum }}{{ item.startTime }}{{ item.endTime }}{{ item.days }}{{ item.remark }}{{ item.leaseMoney.toFixed(3) }}
+
+ + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -977,6 +1137,234 @@ export default { width: 80px !important; margin-bottom: 10px; } + +/* 固定表头样式 */ +.table-container { + position: relative; + border: 1px solid #dfe6ec; + border-radius: 4px; + overflow: hidden; + margin-bottom: 0; +} + +.table-header { + position: relative; + z-index: 10; + background-color: #f8f8f9; + + .header-table { + width: 100%; + border-collapse: collapse; + text-align: center; + margin: 0; + table-layout: fixed; + + th { + background-color: #f8f8f9; + color: #303133; + font-weight: bold; + padding: 8px 6px; + border: 1px solid #dfe6ec; + position: sticky; + top: 0; + z-index: 11; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } +} + +.table-body { + max-height: 300px; + overflow-y: auto; + position: relative; + + .data-table { + width: 100%; + border-collapse: collapse; + text-align: center; + margin: 0; + table-layout: fixed; + + td { + padding: 8px 6px; + border: 1px solid #dfe6ec; + background-color: #fff; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + + /* 移除空值显示横线 */ + } + + /* 移除斑马线效果 */ + + tr:hover td { + background-color: #f5f7fa; + } + } +} + +/* 精确对齐表头和数据 */ +.table-container { + position: relative; + border: 1px solid #dfe6ec; + border-radius: 4px; + overflow: hidden; + margin-bottom: 0; +} + +.table-header { + position: relative; + z-index: 10; + background-color: #f8f8f9; + /* 精确计算滚动条宽度补偿 */ + margin-right: 8px; + + .header-table { + width: 100%; + border-collapse: collapse; + text-align: center; + margin: 0; + table-layout: fixed; + /* 移除边框以避免宽度计算问题 */ + border-right: none; + + th { + background-color: #f8f8f9; + color: #303133; + font-weight: bold; + padding: 8px 6px; + border: 1px solid #dfe6ec; + border-right: 1px solid #dfe6ec; + position: sticky; + top: 0; + z-index: 11; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + box-sizing: border-box; + } + + /* 最后一列保持边框 */ + th:last-child { + border-right: 1px solid #dfe6ec; + } + } +} + +.table-body { + max-height: 300px; + overflow-y: auto; + position: relative; + + .data-table { + width: 100%; + border-collapse: collapse; + text-align: center; + margin: 0; + table-layout: fixed; + + td { + padding: 8px 6px; + border: 1px solid #dfe6ec; + background-color: #fff; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + box-sizing: border-box; + + /* 移除空值显示横线 */ + } + + /* 移除斑马线效果 */ + + tr:hover td { + background-color: #f5f7fa; + } + } +} + +/* 确保滚动条稳定显示 */ +.table-body::-webkit-scrollbar { + width: 8px; + background: #f1f1f1; +} + +.table-body::-webkit-scrollbar-thumb { + background: #c1c1c1; + border-radius: 4px; + + &:hover { + background: #a8a8a8; + } +} + +.table-body::-webkit-scrollbar-track { + background: #f1f1f1; + border-radius: 4px; +} + +/* 进一步微调对齐 */ +.table-header { + /* 精确匹配滚动条宽度 */ + width: calc(100% - 8px); + + .header-table { + /* 确保占满容器宽度 */ + width: 100%; + min-width: 100%; + max-width: 100%; + } +} + +/* 数据区域宽度控制 */ +.table-body { + .data-table { + width: 100%; + min-width: 100%; + max-width: 100%; + } +} + +/* 确保所有表格单元格宽度一致 */ +th, td { + box-sizing: border-box; + word-break: break-word; + word-wrap: break-word; +} + +/* 滚动条美化 */ +.table-body::-webkit-scrollbar { + width: 8px; +} + +.table-body::-webkit-scrollbar-track { + background: #f1f1f1; + border-radius: 4px; +} + +.table-body::-webkit-scrollbar-thumb { + background: #c1c1c1; + border-radius: 4px; + + &:hover { + background: #a8a8a8; + } +} + +/* 表格响应式调整 */ +@media (max-width: 1200px) { + .table-container { + overflow-x: auto; + } + + .header-table, + .data-table { + min-width: 800px; + } +} .tabelAllTop { display: flex; border: 1px solid #dfe6ec; diff --git a/src/views/materialsStation/cost/component/applyDetail.vue b/src/views/materialsStation/cost/component/applyDetail.vue index 992a337a..9aaf8ffe 100644 --- a/src/views/materialsStation/cost/component/applyDetail.vue +++ b/src/views/materialsStation/cost/component/applyDetail.vue @@ -544,7 +544,7 @@ export default { } .tabelAll { display: flex; - border: 1px solid #dfe6ec; + border: 1px solid #ecedf3; width: 100%; border-bottom: 1px solid #dfe6ec; border-top: none;
减免费用明细
序号设备名称规格型号计量单位租赁单价减免数量减免开始日期减免结束日期减免天数减免原因减免费用（元）
{{ index + 1 }}{{ item.typeName }}{{ item.modeName }}{{ item.unitName }}{{ item.leasePrice }}{{ item.reduceNum }}{{ item.startTime }}{{ item.endTime }}{{ item.days }}{{ item.remark }}{{ item.leaseMoney.toFixed(3) }}
费用小计： {{ reducCost }}
合计： {{ costAll.toFixed(2) }}