From d69bd8276ecaf9e8315391289d00cfc23677ef1a Mon Sep 17 00:00:00 2001
From: yyb <995253665@qq.com>
Date: 星期一, 23 三月 2026 11:44:31 +0800
Subject: [PATCH] 生产成本核算的明细样式优化
---
src/views/costAccounting/productionCostAccounting/index.vue | 168 +++++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 153 insertions(+), 15 deletions(-)
diff --git a/src/views/costAccounting/productionCostAccounting/index.vue b/src/views/costAccounting/productionCostAccounting/index.vue
index 78ca6c5..8fc60c2 100644
--- a/src/views/costAccounting/productionCostAccounting/index.vue
+++ b/src/views/costAccounting/productionCostAccounting/index.vue
@@ -211,21 +211,45 @@
<el-drawer
v-model="detailVisible"
- title="鐢熶骇鎴愭湰鎷嗗垎鏄庣粏"
- size="560px"
+ :with-header="false"
+ class="detail-drawer"
+ size="760px"
+ :close-on-click-modal="true"
+ :close-on-press-escape="true"
destroy-on-close
>
<div v-if="detailRow" class="drawer-head">
- <div><b>{{ timeColumnLabel }}锛�</b>{{ detailRow.timeLabel }}</div>
- <div><b>浜у搧绫诲埆锛�</b>{{ detailRow.category }}</div>
- <div><b>鐢熶骇璁㈠崟锛�</b>{{ detailRow.orderNo }}</div>
+ <div class="meta-item">
+ <span class="meta-label">{{ timeColumnLabel }}</span>
+ <span class="meta-value">{{ detailRow.timeLabel }}</span>
+ </div>
+ <div class="meta-item">
+ <span class="meta-label">浜у搧绫诲埆</span>
+ <span class="meta-value">{{ detailRow.category }}</span>
+ </div>
+ <div class="meta-item">
+ <span class="meta-label">鐢熶骇璁㈠崟</span>
+ <span class="meta-value">{{ detailRow.orderNo }}</span>
+ </div>
</div>
<el-table :data="detailMaterials" class="lux-table" stripe>
<el-table-column prop="materialName" label="鐗╂枡鍚嶇О" min-width="120" />
- <el-table-column prop="materialType" label="绫诲瀷" width="80" />
- <el-table-column prop="quantity" label="鎶曞叆閲�" align="right">
+ <el-table-column prop="materialType" label="绫诲瀷" width="94">
<template #default="scope">
- {{ formatNumber(scope.row.quantity, 2) }} {{ scope.row.unit }}
+ <span
+ class="material-type-tag"
+ :class="scope.row.materialType === '鍘熸枡' ? 'is-raw' : 'is-aux'"
+ >
+ {{ scope.row.materialType }}
+ </span>
+ </template>
+ </el-table-column>
+ <el-table-column prop="quantity" label="鎶曞叆閲�" align="right" min-width="140">
+ <template #default="scope">
+ <span class="quantity-cell">
+ <span class="quantity-value">{{ formatNumber(scope.row.quantity, 2) }}</span>
+ <span class="quantity-unit">{{ scope.row.unit }}</span>
+ </span>
</template>
</el-table-column>
<el-table-column prop="unitPrice" label="鍗曚环(鍏�)" align="right">
@@ -233,16 +257,25 @@
{{ formatNumber(scope.row.unitPrice, 2) }}
</template>
</el-table-column>
- <el-table-column prop="cost" label="鎴愭湰(鍏�)" align="right">
+ <el-table-column prop="cost" label="鎴愭湰(鍏�)" align="right" min-width="132">
<template #default="scope">
- <span class="cost-value">楼{{ formatMoney(scope.row.cost) }}</span>
+ <span class="cost-value no-wrap-money">楼{{ formatMoney(scope.row.cost) }}</span>
</template>
</el-table-column>
</el-table>
<div class="drawer-foot">
- <span>鍘熸枡锛毬{ formatMoney(detailRawCost) }}</span>
- <span>杈呮枡锛毬{ formatMoney(detailAuxCost) }}</span>
- <span class="strong">鍚堣锛毬{ formatMoney(detailTotalCost) }}</span>
+ <div class="foot-item">
+ <span class="foot-label">鍘熸枡</span>
+ <span class="foot-value no-wrap-money">楼{{ formatMoney(detailRawCost) }}</span>
+ </div>
+ <div class="foot-item">
+ <span class="foot-label">杈呮枡</span>
+ <span class="foot-value no-wrap-money">楼{{ formatMoney(detailAuxCost) }}</span>
+ </div>
+ <div class="foot-item total">
+ <span class="foot-label">鍚堣</span>
+ <span class="foot-value no-wrap-money">楼{{ formatMoney(detailTotalCost) }}</span>
+ </div>
</div>
</el-drawer>
</div>
@@ -709,19 +742,115 @@
color: var(--lux-danger);
}
+.no-wrap-money {
+ display: inline-block;
+ white-space: nowrap;
+}
+
.drawer-head {
display: grid;
- gap: 8px;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: 10px;
margin-bottom: 12px;
+}
+
+.meta-item {
+ padding: 10px 12px;
+ border-radius: 10px;
+ border: 1px solid var(--lux-border);
+ background: rgba(15, 23, 42, 0.03);
+ display: grid;
+ gap: 4px;
+}
+
+.meta-label {
+ font-size: 12px;
+ color: var(--lux-subtle);
+}
+
+.meta-value {
color: var(--lux-text);
+ font-size: 16px;
+ font-weight: 700;
+}
+
+.material-type-tag {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 46px;
+ height: 24px;
+ padding: 0 8px;
+ border-radius: 999px;
+ font-size: 12px;
+ font-weight: 700;
+}
+
+.material-type-tag.is-raw {
+ color: #15803d;
+ background: rgba(22, 163, 74, 0.12);
+}
+
+.material-type-tag.is-aux {
+ color: #b45309;
+ background: rgba(245, 158, 11, 0.16);
+}
+
+.quantity-value {
+ font-weight: 700;
+ color: var(--lux-text);
+ margin-right: 6px;
+}
+
+.quantity-cell {
+ display: inline-flex;
+ align-items: baseline;
+ white-space: nowrap;
+}
+
+.quantity-unit {
+ color: var(--lux-subtle);
}
.drawer-foot {
display: flex;
justify-content: flex-end;
- gap: 18px;
+ gap: 12px;
margin-top: 12px;
+ padding-top: 12px;
+ border-top: 1px dashed var(--lux-border);
+}
+
+.foot-item {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ padding: 7px 16px;
+ border-radius: 999px;
+ border: 1px solid var(--lux-border);
+ background: #fff;
+}
+
+.foot-label {
+ color: var(--lux-subtle);
+ font-size: 14px;
+}
+
+.foot-value {
color: var(--lux-text);
+ font-weight: 700;
+ font-size: 16px;
+}
+
+.foot-item.total {
+ border-color: rgba(47, 111, 237, 0.26);
+ background: rgba(47, 111, 237, 0.08);
+}
+
+.foot-item.total .foot-value {
+ color: #1e3a8a;
+ font-size: 18px;
+ font-weight: 800;
}
.pagination-container {
@@ -763,5 +892,14 @@
.filter-layout {
flex-direction: column;
}
+
+ .drawer-head {
+ grid-template-columns: 1fr;
+ }
+
+ .drawer-foot {
+ justify-content: flex-start;
+ flex-wrap: wrap;
+ }
}
</style>
--
Gitblit v1.9.3