From 87bf944a61068a47f56cd2f27b585c70437ef1f7 Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期五, 20 三月 2026 09:54:04 +0800
Subject: [PATCH] fix: 生产详情样式优化
---
src/views/productionManagement/productionOrder/Detail/index.vue | 152 ++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 138 insertions(+), 14 deletions(-)
diff --git a/src/views/productionManagement/productionOrder/Detail/index.vue b/src/views/productionManagement/productionOrder/Detail/index.vue
index 6872fea..ae30acd 100644
--- a/src/views/productionManagement/productionOrder/Detail/index.vue
+++ b/src/views/productionManagement/productionOrder/Detail/index.vue
@@ -36,13 +36,21 @@
<div
class="step-title"
:class="{ selected: idx === selectedIndex }"
- @click="selectProcess(idx)"
+ @click.stop="selectProcess(idx)"
>
{{ `${idx + 1}. ${p.processName || "-"}` }}
</div>
</template>
<template #description>
- <div class="step-panel" :class="{ 'step-panel-active': idx === active }">
+ <div
+ class="step-panel"
+ :class="{
+ 'step-panel-selected': idx === selectedIndex,
+ 'step-panel-current': idx === active,
+ }"
+ @click="selectProcess(idx)"
+ >
+ <span v-if="idx === active" class="step-current-badge">鐢熶骇涓�</span>
<div v-if="p.status !== 'wait'" class="current-progress">
<div class="current-progress-head">
<span class="current-progress-title">宸ュ簭杩涘害</span>
@@ -100,7 +108,7 @@
</div>
<div v-if="!selectedProcess" class="right-empty">
- 鐐瑰嚮宸︿晶鏌愪釜宸ュ簭锛屽彸渚у睍绀鸿宸ュ簭鐨勬姤宸ユ槑缁嗐��
+ 鏆傛棤宸ュ簭鏁版嵁銆�
</div>
<div v-else class="right-content">
@@ -110,20 +118,43 @@
<el-table-column label="鎶ュ伐浜哄憳" prop="reportUser" min-width="120" show-overflow-tooltip />
<el-table-column label="鎶ュ伐鏃堕棿" prop="reportTime" min-width="160" show-overflow-tooltip />
<el-table-column label="浜у嚭鏁伴噺" prop="outputQty" min-width="110" />
+ <el-table-column label="鍚堟牸鏁伴噺" prop="qualifiedQty" min-width="110" />
<el-table-column label="涓嶈壇鏁伴噺" prop="badQty" min-width="110" />
<el-table-column label="澶囨敞" prop="remark" min-width="160" show-overflow-tooltip />
+ <el-table-column label="鎿嶄綔" width="150" fixed="right">
+ <template #default="{ row }">
+ <el-button type="primary" link @click="viewReportRecord(row)">
+ 鐢熶骇璁板綍
+ </el-button>
+ </template>
+ </el-table-column>
</el-table>
</div>
</div>
</div>
</div>
</el-card>
+ <el-dialog
+ v-model="reportRecordDialogVisible"
+ title="鎶ュ伐鐢熶骇璁板綍"
+ width="680px"
+ destroy-on-close
+ >
+ <div class="report-record-placeholder">
+ <div>鎶ュ伐鍗曞彿锛歿{ currentReportRow?.reportNo || "-" }}</div>
+ <div>宸ュ簭锛歿{ selectedProcess?.processName || "-" }}</div>
+ <div class="placeholder-tip">寮规鍐呭寰呭畾锛堝悗缁ˉ鍏呰缁嗙敓浜ц褰曪級銆�</div>
+ </div>
+ <template #footer>
+ <el-button @click="reportRecordDialogVisible = false">鍏抽棴</el-button>
+ </template>
+ </el-dialog>
</div>
</template>
<script setup>
-import { computed, ref } from "vue";
-import { useRoute, useRouter } from "vue-router";
+import { computed, ref, watch } from "vue";
+import { useRoute } from "vue-router";
const route = useRoute();
@@ -175,15 +206,31 @@
},
]);
-const selectedIndex = ref(null);
+// 榛樿閫変腑绗竴閬撳簭锛堟帴鍙ｆ暟鎹氨缁悗浠嶅彲浠� 0 寮�濮嬶級
+const selectedIndex = ref(0);
const selectProcess = (idx) => {
selectedIndex.value = idx;
};
+watch(
+ () => (processes.value || []).length,
+ (len) => {
+ if (!len) return;
+ if (selectedIndex.value >= len) selectedIndex.value = len - 1;
+ if (selectedIndex.value < 0) selectedIndex.value = 0;
+ }
+);
+
const selectedProcess = computed(() => {
- if (selectedIndex.value === null || selectedIndex.value === undefined) return null;
- return (processes.value || [])[selectedIndex.value] || null;
+ const list = processes.value || [];
+ if (!list.length) return null;
+ const raw = selectedIndex.value;
+ const idx =
+ raw === null || raw === undefined
+ ? 0
+ : Math.min(Math.max(0, raw), list.length - 1);
+ return list[idx] || null;
});
// 妯℃嫙鎶ュ伐淇℃伅锛堝悗缁敤鎺ュ彛鏇挎崲锛�
@@ -191,7 +238,7 @@
const p = selectedProcess.value;
if (!p) return [];
const code = p.processCode || "GX";
- return [
+ const reports = [
{
reportNo: `${code}-BG-0001`,
reportUser: "寮犱笁",
@@ -217,7 +264,20 @@
remark: "鏀跺熬",
},
];
+ return reports.map((item) => ({
+ ...item,
+ qualifiedQty: Math.max(0, Number(item.outputQty ?? 0) - Number(item.badQty ?? 0)),
+ }));
});
+
+const viewReportRecord = (row) => {
+ if (!row?.reportNo) return;
+ currentReportRow.value = row;
+ reportRecordDialogVisible.value = true;
+};
+
+const reportRecordDialogVisible = ref(false);
+const currentReportRow = ref(null);
const clampPercentage = (val) => {
const n = Number(val);
@@ -331,13 +391,15 @@
align-items: center;
padding: 2px 6px;
border-radius: 6px;
- transition: background-color 0.15s ease;
+ transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
&:hover {
background: #f5f7fa;
+ transform: translateX(2px);
}
&.selected {
- background: rgba(64, 158, 255, 0.12);
+ background: rgba(64, 158, 255, 0.18);
color: #409eff;
+ font-weight: 700;
}
}
@@ -375,6 +437,8 @@
}
.step-panel {
+ position: relative;
+ cursor: pointer;
background: #f6f8fb;
border: 1px solid #ebeef5;
border-radius: 10px;
@@ -382,11 +446,60 @@
width: 100%;
max-width: none;
box-sizing: border-box;
+ transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease,
+ background 0.25s ease;
+ &:hover {
+ border-color: #c6e2ff;
+ box-shadow: 0 4px 14px rgba(64, 158, 255, 0.12);
+ transform: translateY(-1px);
+ }
}
- .step-panel-active {
+
+ /* 琚�変腑锛氭部鐢ㄥ師銆岄珮浜�嶈涔夊苟鍔犲懠鍚稿姩鐢� */
+ .step-panel-selected {
background: #ecf5ff;
- border-color: #79bbff;
- box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.15);
+ border-color: #409eff;
+ animation: step-panel-selected-pulse 2.2s ease-in-out infinite;
+ &:hover {
+ transform: translateY(-1px);
+ }
+ }
+
+ @keyframes step-panel-selected-pulse {
+ 0%,
+ 100% {
+ box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.22);
+ }
+ 50% {
+ box-shadow: 0 0 0 6px rgba(64, 158, 255, 0.12);
+ }
+ }
+
+ /* 褰撳墠鐢熶骇涓殑宸ュ簭锛氭鑹蹭富棰橈紝涓庨�変腑鍖哄垎锛涜嫢鍚屾椂閫変腑鍒欎互閫変腑涓轰富锛屼粎淇濈暀瑙掓爣 */
+ .step-panel-current:not(.step-panel-selected) {
+ background: #fdf6ec;
+ border-color: #e6a23c;
+ border-left: 4px solid #e6a23c;
+ padding-left: 9px;
+ &:hover {
+ box-shadow: 0 4px 14px rgba(230, 162, 60, 0.18);
+ }
+ }
+
+ .step-current-badge {
+ position: absolute;
+ top: 8px;
+ right: 10px;
+ z-index: 1;
+ font-size: 11px;
+ font-weight: 600;
+ color: #b88230;
+ background: rgba(230, 162, 60, 0.18);
+ border: 1px solid rgba(230, 162, 60, 0.45);
+ border-radius: 4px;
+ padding: 2px 8px;
+ line-height: 1.2;
+ pointer-events: none;
}
.right-panel {
@@ -448,6 +561,17 @@
}
}
+ .report-record-placeholder {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ min-height: 120px;
+ color: #303133;
+ .placeholder-tip {
+ color: #909399;
+ }
+ }
+
.step-meta {
display: flex;
gap: 16px;
--
Gitblit v1.9.3