优化界面

快乐的昕的电脑

16 小时以前 720cbbe9e5fbf76968355eda83b643e4ec95f03c

 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>