From 2c7a7d3eaf692fdfd04a30b42da2d94848cdc89a Mon Sep 17 00:00:00 2001
From: 快乐的昕的电脑 <快乐的昕的电脑@DESKTOP-C2BQPQU>
Date: 星期三, 24 十二月 2025 16:25:50 +0800
Subject: [PATCH] 界面样式优化
---
pages/moldRecord.vue | 368 ++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 308 insertions(+), 60 deletions(-)
diff --git a/pages/moldRecord.vue b/pages/moldRecord.vue
index 5672f93..176ee81 100644
--- a/pages/moldRecord.vue
+++ b/pages/moldRecord.vue
@@ -1,13 +1,18 @@
<template>
<view class="page">
-
<!-- 鎿嶄綔鎸夐挳 -->
<view class="button-row">
- <button class="save-btn" @click="handleRefresh" :disabled="loadingForm || submitting">鍒锋柊</button>
+ <button class="save-btn" @click="handleRefresh" :disabled="loadingForm || submitting || loadingInspection">鍒锋柊</button>
</view>
<!-- 鍒�鍏蜂娇鐢ㄨ褰曡〃鏍� -->
- <view class="table-section">
+ <view class="table-section" :class="{'expanded': toolExpanded}">
+ <view class="table-header">
+ <h3>涓婁笅鍒�璁板綍</h3>
+ <button class="expand-btn" @click="toggleExpand('tool')">
+ {{ toolExpanded ? '鏀惰捣' : '灞曞紑' }}
+ </button>
+ </view>
<table class="styled-table">
<thead>
<tr>
@@ -26,16 +31,14 @@
</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 visibleToolRecords" :key="item.id" :class="{'row-odd': idx % 2 === 0}">
<td>{{ item.no }}</td>
<td class="left">{{ item.name }}</td>
<td>{{ item.upTime }}</td>
<td class="num">{{ item.upCount != null ? item.upCount : '' }}</td>
<td>{{ item.downTime }}</td>
- <!-- 鍙湁绗竴琛屾樉绀� currentCjNum锛屽叾瀹冭鏄剧ず downCount -->
<td class="num">
<template v-if="idx === 0">
- <!-- 绗竴琛岋細涓嬫満鏃朵笉瀹炴椂鏄剧ず currentCjNum锛屾樉绀� downCount -->
<template v-if="!item.downTime">
{{ item.currentCjNum != null ? item.currentCjNum : '' }}
</template>
@@ -47,10 +50,8 @@
{{ item.downCount != null ? item.downCount : '' }}
</template>
</td>
- <!--浣跨敤娆℃暟-->
<td class="num">
<template v-if="idx === 0">
- <!-- 绗竴琛屽疄鏃惰绠椾娇鐢ㄦ鏁帮紝鑻ヤ负涓嬫満鍒欎笉瀹炴椂鏄剧ず -->
<template v-if="!item.downTime">
{{item.currentCjNum != null && item.upCount != null ? (Number(item.currentCjNum) - Number(item.upCount)) : (item.useCount != null ? item.useCount : '') }}
</template>
@@ -63,10 +64,8 @@
</template>
</td>
<td class="num">{{ item.useLimit != null ? item.useLimit : '' }}</td>
- <!--瀵垮懡姣�%-->
<td class="num">
<template v-if="idx === 0">
- <!-- 绗竴琛屽疄鏃惰绠楀鍛芥瘮%锛岃嫢涓轰笅鏈哄垯涓嶅疄鏃舵樉绀� -->
<template v-if="!item.downTime">
{{item.currentCjNum != null && item.upCount != null && item.useLimit != null && Number(item.useLimit) > 0 ? Math.round((Number(item.currentCjNum) - Number(item.upCount)) / Number(item.useLimit) * 100) + '%' : (item.lifePercent != null ? item.lifePercent : '') }}
</template>
@@ -90,6 +89,60 @@
<tr v-if="!toolRecords.length">
<td colspan="12">鏆傛棤鏁版嵁</td>
</tr>
+ <tr v-if="hasMoreToolRecords && !toolExpanded">
+ <td colspan="12" class="more-records-tip">
+ <span>杩樻湁 {{ remainingToolRecords }} 鏉¤褰曪紝鐐瑰嚮</span>
+ <button class="inline-expand-btn" @click="toggleExpand('tool')">灞曞紑</button>
+ <span>鎸夐挳鏌ョ湅鍏ㄩ儴</span>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </view>
+
+ <!-- 宸ュ崟棣栨璁板綍琛ㄦ牸 -->
+ <view class="table-section" :class="{'expanded': inspectionExpanded}">
+ <view class="table-header">
+ <h3>宸ュ崟棣栨璁板綍</h3>
+ <button class="expand-btn" @click="toggleExpand('inspection')">
+ {{ inspectionExpanded ? '鏀惰捣' : '灞曞紑' }}
+ </button>
+ </view>
+ <table class="styled-table">
+ <thead>
+ <tr>
+ <th style="width:10%">妫�楠屽崟鍙�</th>
+ <th style="width:10%">妫�楠屼汉鍛�</th>
+ <th style="width:10%">妫�楠屾棩鏈�</th>
+ <th style="width:10%">鏈哄彴缂栧彿</th>
+ <th style="width:10%">鎻愪氦鏍囪瘑</th>
+ <th style="width:10%">妫�楠岀粨鏋�</th>
+ <th style="width:10%">浣滃簾鏍囪瘑</th>
+ <th style="width:10%">澶囨敞</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr v-for="(item, idx) in visibleInspectionRecords" :key="item.id || idx" :class="{'row-odd': idx % 2 === 0}">
+ <!-- 淇敼涓哄皬椹煎嘲鏍煎紡 -->
+ <td>{{ item.releaseNo || '' }}</td>
+ <td>{{ item.fcheckBy || '' }}</td>
+ <td>{{ formatDate(item.fcheckDate) }}</td>
+ <td>{{ item.lineNo || '' }}</td>
+ <td>{{ item.fsubmit == 1 ? '宸叉彁浜�' : '鏈彁浜�' }}</td>
+ <td>{{ item.fcancel == 'Y' ? '浣滃簾' : '鏈綔搴�' }}</td>
+ <td>{{ item.fsecondResu || '' }}</td>
+ <td class="left">{{ item.remeke || '' }}</td>
+ </tr>
+ <tr v-if="!inspectionRecords.length">
+ <td colspan="10">鏆傛棤棣栨璁板綍</td>
+ </tr>
+ <tr v-if="hasMoreInspectionRecords && !inspectionExpanded">
+ <td colspan="10" class="more-records-tip">
+ <span>杩樻湁 {{ remainingInspectionRecords }} 鏉¤褰曪紝鐐瑰嚮</span>
+ <button class="inline-expand-btn" @click="toggleExpand('inspection')">灞曞紑</button>
+ <span>鎸夐挳鏌ョ湅鍏ㄩ儴</span>
+ </td>
+ </tr>
</tbody>
</table>
</view>
@@ -100,24 +153,82 @@
export default {
data() {
return {
- machineNo: '',//鏈哄彴缂栫爜
- workOrderNo: '',//宸ュ崟鍙�
+ machineNo: '',
+ workOrderNo: '',
selectedToolNo: '',
toolName: '',
useLimitInput: '',
- lifeWarnInput: '', // 瀵垮懡姣旈璀﹀�煎師濮嬭緭鍏�
+ lifeWarnInput: '',
toolRecords: [],
+ inspectionRecords: [], // 棣栨璁板綍
loadingForm: false,
+ loadingInspection: false, // 棣栨璁板綍鍔犺浇鐘舵��
submitting: false,
- workOrderCurrentCjNum: null, // 宸ュ崟褰撳墠鏁伴噰
+ workOrderCurrentCjNum: null,
+ toolExpanded: false, // 鍒�鍏疯〃鏍煎睍寮�鐘舵��
+ inspectionExpanded: false, // 棣栨琛ㄦ牸灞曞紑鐘舵��
+ defaultVisibleRows: 3, // 榛樿鏄剧ず鐨勮鏁�
};
},
+ computed: {
+ // 鍒�鍏疯〃鏍肩浉鍏宠绠�
+ defaultToolRows() {
+ const total = this.toolRecords.length;
+ if (total <= 3) return total;
+ return Math.max(3, Math.floor(total / 2));
+ },
+ visibleToolRecords() {
+ if (this.toolExpanded) {
+ return this.toolRecords;
+ } else {
+ return this.toolRecords.slice(0, this.defaultToolRows);
+ }
+ },
+ hasMoreToolRecords() {
+ return this.toolRecords.length > this.defaultToolRows;
+ },
+ remainingToolRecords() {
+ return this.toolRecords.length - this.defaultToolRows;
+ },
+
+ // 棣栨琛ㄦ牸鐩稿叧璁＄畻
+ defaultInspectionRows() {
+ const total = this.inspectionRecords.length;
+ if (total <= 2) return total; // 棣栨琛ㄦ牸榛樿鏄剧ず2琛�
+ return Math.max(2, Math.floor(total / 2));
+ },
+ visibleInspectionRecords() {
+ if (this.inspectionExpanded) {
+ return this.inspectionRecords;
+ } else {
+ return this.inspectionRecords.slice(0, this.defaultInspectionRows);
+ }
+ },
+ hasMoreInspectionRecords() {
+ return this.inspectionRecords.length > this.defaultInspectionRows;
+ },
+ remainingInspectionRecords() {
+ return this.inspectionRecords.length - this.defaultInspectionRows;
+ }
+ },
methods: {
+ // 鍒囨崲琛ㄦ牸灞曞紑鐘舵��
+ toggleExpand(tableType) {
+ if (tableType === 'tool') {
+ this.toolExpanded = !this.toolExpanded;
+ } else if (tableType === 'inspection') {
+ this.inspectionExpanded = !this.inspectionExpanded;
+ }
+ },
+
// 鍒锋柊鎸夐挳澶勭悊鏂规硶
async handleRefresh() {
if (this.machineNo && this.workOrderNo) {
- await this.fetchFormData();
- await this.fetchDefaultToolFromWorkOrder();
+ await Promise.all([
+ this.fetchFormData(),
+ this.fetchDefaultToolFromWorkOrder(),
+ this.fetchInspectionRecords()
+ ]);
// 鍒锋柊鍚庤祴鍊肩涓�琛� currentCjNum
if (this.toolRecords.length > 0) {
this.$set(this.toolRecords[0], 'currentCjNum', this.workOrderCurrentCjNum);
@@ -126,7 +237,56 @@
this.$showMessage('鍒锋柊瀹屾垚');
},
- // 鑷姩甯﹀嚭宸ュ崟鍒�鍏蜂俊鎭紝骞惰幏鍙栧伐鍗曟渶鏂伴噰闆嗘暟
+ // 鑾峰彇宸ュ崟棣栨璁板綍
+ async fetchInspectionRecords() {
+ if (!this.workOrderNo) {
+ console.warn('宸ュ崟鍙蜂负绌猴紝璺宠繃鑾峰彇棣栨璁板綍');
+ return;
+ }
+ this.loadingInspection = true;
+ try {
+ const res = await this.$post({
+ url: '/MesCutterLedger/GetInspectionRecords',
+ data: JSON.stringify({
+ aufnr: this.workOrderNo,
+ ftype: '棣栨'
+ }),
+ headers: { 'Content-Type': 'application/json' }
+ });
+
+ if (res.status === 0) {
+ // 鏍规嵁瀹為檯鎺ュ彛杩斿洖缁撴瀯璋冩暣
+ const list = Array.isArray(res.data) ? res.data
+ : (res.data && res.data.tbBillList) ? res.data.tbBillList
+ : (res.data && res.data.data) ? res.data.data
+ : [];
+ this.inspectionRecords = list || [];
+ } else {
+ this.$showMessage(res.message || '鑾峰彇棣栨璁板綍澶辫触');
+ this.inspectionRecords = [];
+ }
+ } catch (error) {
+ console.error('鑾峰彇棣栨璁板綍閿欒:', error);
+ this.$showMessage('鑾峰彇棣栨璁板綍澶辫触锛岃妫�鏌ョ綉缁滆繛鎺�');
+ this.inspectionRecords = [];
+ } finally {
+ this.loadingInspection = false;
+ }
+ },
+
+ // 鏍煎紡鍖栨棩鏈�
+ formatDate(dateStr) {
+ if (!dateStr) return '';
+ try {
+ const date = new Date(dateStr);
+ if (isNaN(date.getTime())) return String(dateStr);
+ return `${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${String(date.getMinutes()).padStart(2, '0')}`;
+ } catch {
+ return String(dateStr);
+ }
+ },
+
+ // 鍏朵粬宸叉湁鏂规硶淇濇寔涓嶅彉...
async fetchDefaultToolFromWorkOrder() {
if (!this.machineNo) return;
try {
@@ -139,9 +299,7 @@
const order = res.data.tbBillList[0];
this.selectedToolNo = order.cutterId || order.cutteR_ID || '';
this.toolName = order.cutterName || order.cutteR_NAME || '';
- // 鑾峰彇宸ュ崟鏈�鏂伴噰闆嗘暟
this.workOrderCurrentCjNum = order.CurrentCjNum ?? order.currentCjNum ?? null;
- // 鑷姩濉厖瀵垮懡姣旈璀﹀��
if (order.modlLifeWorning !== undefined && order.modlLifeWorning !== null) {
const warn = Number(order.modlLifeWorning);
this.lifeWarnInput = warn <= 1 ? (warn * 100).toFixed(0) : warn.toFixed(0);
@@ -183,6 +341,7 @@
: (res.data && res.data.data) ? res.data.data
: [];
+ // 鏁版嵁澶勭悊閫昏緫淇濇寔涓嶅彉...
const getField = (obj, ...keys) => {
for (const k of keys) if (obj?.[k] !== undefined && obj?.[k] !== null) return obj[k];
return null;
@@ -240,7 +399,6 @@
};
});
- // 鎸変笂鍒�鏃堕棿闄嶅簭鎺掑簭锛堣秺鏅氱殑瓒婁笂闈級
mapped.sort((a, b) => {
const parse = s => {
if (!s) return 0;
@@ -291,13 +449,13 @@
if (this.machineNo && this.workOrderNo) {
this.fetchFormData().then(async () => {
await this.fetchDefaultToolFromWorkOrder();
- // 杩涘叆椤甸潰鏃惰祴鍊肩涓�琛� currentCjNum
+ await this.fetchInspectionRecords();
if (this.toolRecords.length > 0) {
this.$set(this.toolRecords[0], 'currentCjNum', this.workOrderCurrentCjNum);
}
});
} else {
- console.warn('鏈哄彴鍙锋垨宸ュ崟鍙蜂负绌猴紝鏃犳硶鑾峰彇琛ㄥ崟鏁版嵁');
+ console.warn('鏈哄彴鍙锋垨宸ュ崟鍙蜂负绌猴紝鏃犳硶鑾峰彇鏁版嵁');
}
}
};
@@ -305,18 +463,20 @@
<style scoped>
.page {
- padding: 20px;
+ padding: 8px 12px; /* 鍑忓皯涓婁笅鍐呰竟璺� */
+ display: flex;
+ flex-direction: column;
+ gap: 8px; /* 鍑忓皯涓や釜琛ㄦ牸涔嬮棿鐨勯棿璺� */
}
.button-row {
display: flex;
justify-content: center;
- gap: 32px;
- margin: 2vh 0;
+ margin: 0.5vh 0; /* 鍑忓皯涓婁笅杈硅窛 */
}
- .save-btn, .cancel-btn {
- width: 28%;
+ .save-btn {
+ width: 20%;
padding: 1.5vh;
background-color: #00A2E9;
color: white;
@@ -329,42 +489,77 @@
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
- .cancel-btn {
- background-color: #f5f5f5;
- color: #333;
- }
+ .save-btn:hover {
+ background-color: #40a9ff;
+ }
- .save-btn:hover {
- background-color: #40a9ff;
- }
+ .save-btn:active {
+ background-color: #096dd9;
+ }
- .save-btn:active {
- background-color: #096dd9;
- }
+ .save-btn:disabled {
+ opacity: 0.6;
+ cursor: not-allowed;
+ }
- .save-btn:disabled, .cancel-btn:disabled {
- opacity: 0.6;
- cursor: not-allowed;
- }
-
+ /* 琛ㄦ牸瀹瑰櫒鏍峰紡 */
.table-section {
display: flex;
- justify-content: center;
- margin: 1vh 0;
- overflow-x: auto;
+ flex-direction: column;
+ margin: 0;
+ overflow: auto; /* 缁熶竴婊氬姩鏉� */
width: 100%;
+ border: 1px solid #f0f0f0;
+ border-radius: 8px;
+ background: #fff;
+ max-height: 220px; /* 榛樿楂樺害 */
+ transition: max-height 0.3s ease;
}
+ .table-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 12px 16px;
+ background: #fafafa;
+ border-bottom: 1px solid #e8e8e8;
+ }
+
+ .table-header h3 {
+ margin: 0;
+ font-size: 24px;
+ color: #333;
+ font-weight: 600;
+ }
+
+ .expand-btn {
+ padding: 8px 20px;
+ background-color: #52c41a;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ font-size: 20px;
+ cursor: pointer;
+ transition: all 0.3s;
+ }
+
+ .expand-btn:hover {
+ background-color: #73d13d;
+ }
+
+ .expand-btn:active {
+ background-color: #389e0d;
+ }
+
+ /* 琛ㄦ牸鏍峰紡 */
table.styled-table {
max-width: 1800px;
width: 98vw;
- margin: 0 auto;
+ margin: 0;
border-collapse: separate;
border-spacing: 0;
border: 2px solid #bfbfbf;
background: #fff;
- border-radius: 12px;
- overflow: hidden;
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
@@ -375,6 +570,9 @@
font-weight: bold;
text-align: center;
font-size: 22px;
+ position: sticky; /* 琛ㄥご缃《 */
+ top: 0;
+ z-index: 10;
}
table.styled-table tbody td {
@@ -385,13 +583,15 @@
font-size: 22px;
}
- .table-section table th:first-child, .table-section table td:first-child {
- border-left: 2px solid #bfbfbf;
+ /* 灞曞紑鐘舵�� - 鍙敼鍙樺鍣ㄩ珮搴� */
+ .table-section.expanded {
+ max-height: 450px; /* 灞曞紑鏃剁殑瀹瑰櫒楂樺害 */
}
- .table-section table th:last-child, .table-section table td:last-child {
- border-right: 2px solid #bfbfbf;
- }
+ table.styled-table tbody .left {
+ text-align: left;
+ padding-left: 8px;
+ }
.row-odd {
background: #fff;
@@ -405,11 +605,6 @@
text-align: center;
padding-right: 0;
font-variant-numeric: tabular-nums;
- }
-
- .left {
- text-align: left;
- padding-left: 8px;
}
.warn-cell {
@@ -430,10 +625,63 @@
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;
+ font-size: 20px;
+ color: #666;
+ }
+
+ /* 琛屽唴灞曞紑鎸夐挳鏍峰紡 - 钃濊壊 */
+ .inline-expand-btn {
+ display: inline-block;
+ padding: 2px 12px; /* 鍑忓皬鍐呰竟璺�,涓庢枃瀛楅珮搴︿竴鑷� */
+ margin: 0 6px;
+ background-color: #00A2E9; /* 钃濊壊 */
+ color: white;
+ border: none;
+ border-radius: 3px;
+ font-size: 20px; /* 涓庢彁绀烘枃瀛楀ぇ灏忎竴鑷� */
+ font-weight: 500;
+ cursor: pointer;
+ transition: all 0.3s;
+ box-shadow: 0 2px 4px rgba(0, 162, 233, 0.2);
+ vertical-align: baseline; /* 涓庢枃瀛楀熀绾垮榻� */
+ line-height: 1.2; /* 鎺у埗琛岄珮 */
+ }
+
+ .inline-expand-btn:hover {
+ background-color: #40a9ff; /* 鎮仠鏃跺彉娣� */
+ box-shadow: 0 4px 8px rgba(0, 162, 233, 0.3);
+ transform: translateY(-1px);
+ }
+
+ .inline-expand-btn:active {
+ background-color: #096dd9; /* 鐐瑰嚮鏃跺彉娣� */
+ transform: translateY(0);
+ }
+
/* 鍝嶅簲寮忚皟鏁� */
@media (max-width: 1200px) {
- .save-btn, .cancel-btn {
- width: 40%;
+ .save-btn {
+ width: 30%;
+ }
+
+ .table-header {
+ flex-direction: column;
+ gap: 8px;
+ align-items: flex-start;
+ }
+
+ .expand-btn {
+ align-self: flex-end;
}
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3