From 720cbbe9e5fbf76968355eda83b643e4ec95f03c Mon Sep 17 00:00:00 2001
From: 快乐的昕的电脑 <快乐的昕的电脑@DESKTOP-C2BQPQU>
Date: 星期二, 23 十二月 2025 14:41:22 +0800
Subject: [PATCH] 优化界面
---
pages/moldRecord.vue | 96 ++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 88 insertions(+), 8 deletions(-)
diff --git a/pages/moldRecord.vue b/pages/moldRecord.vue
index 5672f93..3e40bcb 100644
--- a/pages/moldRecord.vue
+++ b/pages/moldRecord.vue
@@ -4,10 +4,13 @@
<!-- 鎿嶄綔鎸夐挳 -->
<view class="button-row">
<button class="save-btn" @click="handleRefresh" :disabled="loadingForm || submitting">鍒锋柊</button>
+ <button class="expand-btn" @click="toggleExpand">
+ {{ isExpanded ? '鏀惰捣' : '灞曞紑' }}
+ </button>
</view>
<!-- 鍒�鍏蜂娇鐢ㄨ褰曡〃鏍� -->
- <view class="table-section">
+ <view class="table-section" :class="{'expanded': isExpanded}">
<table class="styled-table">
<thead>
<tr>
@@ -26,7 +29,7 @@
</tr>
</thead>
<tbody>
- <tr v-for="(item, idx) in toolRecords" :key="item.id" :class="{'row-odd': idx % 2 === 0}">
+ <tr v-for="(item, idx) in visibleRecords" :key="item.id" :class="{'row-odd': idx % 2 === 0}">
<td>{{ item.no }}</td>
<td class="left">{{ item.name }}</td>
<td>{{ item.upTime }}</td>
@@ -90,6 +93,11 @@
<tr v-if="!toolRecords.length">
<td colspan="12">鏆傛棤鏁版嵁</td>
</tr>
+ <tr v-if="hasMoreRecords && !isExpanded">
+ <td colspan="12" class="more-records-tip">
+ <span>杩樻湁 {{ remainingRecords }} 鏉¤褰曪紝鐐瑰嚮"灞曞紑"鎸夐挳鏌ョ湅鍏ㄩ儴</span>
+ </td>
+ </tr>
</tbody>
</table>
</view>
@@ -110,9 +118,40 @@
loadingForm: false,
submitting: false,
workOrderCurrentCjNum: null, // 宸ュ崟褰撳墠鏁伴噰
+ isExpanded: false, // 鏄惁灞曞紑琛ㄦ牸
+ defaultVisibleRows: 3, // 榛樿鏄剧ず鐨勮鏁帮紙涓�鍗婇珮搴︼級
};
},
+ computed: {
+ // 璁＄畻榛樿鏄剧ず澶氬皯琛岋紙鎬昏鏁扮殑涓�鍗婏級
+ defaultRows() {
+ const total = this.toolRecords.length;
+ if (total <= 3) return total; // 濡傛灉鎬昏鏁板皬浜庣瓑浜�3锛屽叏閮ㄦ樉绀�
+ return Math.max(3, Math.floor(total / 2)); // 鏈�灏戞樉绀�3琛岋紝鏈�澶氭樉绀轰竴鍗�
+ },
+ // 褰撳墠鍙鐨勮褰�
+ visibleRecords() {
+ if (this.isExpanded) {
+ return this.toolRecords;
+ } else {
+ return this.toolRecords.slice(0, this.defaultRows);
+ }
+ },
+ // 鏄惁杩樻湁鏇村璁板綍
+ hasMoreRecords() {
+ return this.toolRecords.length > this.defaultRows;
+ },
+ // 鍓╀綑璁板綍鏁�
+ remainingRecords() {
+ return this.toolRecords.length - this.defaultRows;
+ }
+ },
methods: {
+ // 鍒囨崲灞曞紑/鏀惰捣
+ toggleExpand() {
+ this.isExpanded = !this.isExpanded;
+ },
+
// 鍒锋柊鎸夐挳澶勭悊鏂规硶
async handleRefresh() {
if (this.machineNo && this.workOrderNo) {
@@ -274,7 +313,7 @@
}
const date = new Date(dateTimeStr);
if (!isNaN(date.getTime())) {
- return `${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${String(date.getMinutes()).padStart(2, '0')}`;
+ return `${date.getMonth() + 1}-${d.getDate()} ${date.getHours()}:${String(date.getMinutes()).padStart(2, '0')}`;
}
const match = String(dateTimeStr).match(/(\d{1,4}[-\/]\d{1,2}[-\/]\d{1,2}).*?(\d{1,2}:\d{2})/);
if (match) return `${match[1].replace(/-/g, '/').replace(/^\d{4}\//, (m) => m)} ${match[2]}`;
@@ -315,8 +354,8 @@
margin: 2vh 0;
}
- .save-btn, .cancel-btn {
- width: 28%;
+ .save-btn, .cancel-btn, .expand-btn {
+ width: 20%;
padding: 1.5vh;
background-color: #00A2E9;
color: white;
@@ -328,6 +367,18 @@
font-weight: 500;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
+
+ .expand-btn {
+ background-color: #52c41a;
+ }
+
+ .expand-btn:hover {
+ background-color: #73d13d;
+ }
+
+ .expand-btn:active {
+ background-color: #389e0d;
+ }
.cancel-btn {
background-color: #f5f5f5;
@@ -342,7 +393,7 @@
background-color: #096dd9;
}
- .save-btn:disabled, .cancel-btn:disabled {
+ .save-btn:disabled, .cancel-btn:disabled, .expand-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
@@ -353,7 +404,17 @@
margin: 1vh 0;
overflow-x: auto;
width: 100%;
+ max-height: 300px; /* 榛樿楂樺害锛屽ぇ绾︽樉绀�3-4琛� */
+ overflow-y: hidden;
+ transition: max-height 0.3s ease;
+ border: 1px solid #f0f0f0;
+ border-radius: 8px;
}
+
+ .table-section.expanded {
+ max-height: 800px; /* 灞曞紑鏃剁殑楂樺害锛屽彲浠ユ樉绀烘洿澶氳 */
+ overflow-y: auto;
+ }
table.styled-table {
max-width: 1800px;
@@ -375,6 +436,9 @@
font-weight: bold;
text-align: center;
font-size: 22px;
+ position: sticky;
+ top: 0;
+ z-index: 10;
}
table.styled-table tbody td {
@@ -430,10 +494,26 @@
font-weight: bold;
}
+ .more-records-tip {
+ text-align: center;
+ color: #666;
+ font-size: 18px;
+ padding: 20px !important;
+ background-color: #f9f9f9;
+ }
+
+ .more-records-tip span {
+ display: inline-block;
+ padding: 5px 15px;
+ background-color: #f0f0f0;
+ border-radius: 4px;
+ border: 1px dashed #ccc;
+ }
+
/* 鍝嶅簲寮忚皟鏁� */
@media (max-width: 1200px) {
- .save-btn, .cancel-btn {
- width: 40%;
+ .save-btn, .cancel-btn, .expand-btn {
+ width: 30%;
}
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3