优化界面

快乐的昕的电脑

2025-10-31 31ab39a665b9d44a1465b0c86715f8d076fb9b8e

 components/mold.vue

@@ -2,28 +2,40 @@
    <view class="page">
        <!-- 刀具选择区 -->
        <view class="top-section-grid">
            <view class="form-cell">
                <label class="form-label">刀具编号：</label>
                <input class="input" v-model="selectedToolNo" placeholder="请通过刀具目录选择" disabled />
                <button class="btn-blue" @click="openToolDialog" :disabled="loadingTools">刀具目录</button>
            <!-- 第一行 -->
            <view class="form-row">
                <view class="form-cell">
                    <label class="form-label">刀具编号：</label>
                    <input class="input small-font" v-model="selectedToolNo" placeholder="请通过刀具目录选择" disabled />
                    <button class="btn-blue" @click="openToolDialog" :disabled="loadingTools">刀具目录</button>
                </view>
                <view class="form-cell">
                    <label class="form-label">设置使用上限：</label>
                    <input class="input small-font" type="number" v-model="useLimitInput" placeholder="每次换刀后手填" :disabled="!selectedToolNo || loadingForm" />
                </view>
                <!-- 新增：寿命比预警值输入框 -->
                <view class="form-cell">
                    <label class="form-label">寿命比预警值：</label>
                    <view class="input-with-unit">
                        <input class="input small-font"
                               v-model="lifeWarnInput"
                               placeholder="如0.9或90"
                               :disabled="!selectedToolNo || loadingForm" />
                        <span class="unit-text">%</span>
                    </view>
                </view>
            </view>
            <view class="form-cell">
                <label class="form-label">设置使用上限：</label>
                <input class="input" type="number" v-model="useLimitInput" placeholder="每次换刀后手填" :disabled="!selectedToolNo || loadingForm" />
            </view>
            <!-- 新增：寿命比预警值输入框 -->
            <view class="form-cell">
                <label class="form-label">寿命比预警值：</label>
                <input class="input"
                       v-model="lifeWarnInput"
                       placeholder="如0.9或90或90%"
                       :disabled="!selectedToolNo || loadingForm" />
            </view>
            <view class="form-cell">
                <label class="form-label">刀具名称：</label>
                <input class="input" v-model="toolName" placeholder="刀具带出" disabled />
                <label class="form-label" style="margin-left: 16px;">规格型号：</label>
                <input class="input" v-model="toolModel" placeholder="刀具带出" disabled />

            <!-- 第二行 -->
            <view class="form-row">
                <view class="form-cell">
                    <label class="form-label">刀具名称：</label>
                    <input class="input small-font" v-model="toolName" placeholder="刀具带出" disabled />
                </view>
                <view class="form-cell">
                    <label class="form-label">规格型号：</label>
                    <input class="input small-font" v-model="toolModel" placeholder="刀具带出" disabled />
                </view>
            </view>
        </view>

@@ -143,7 +155,7 @@
                // 自动保存相关
                autoSaveTimer: null,
                isDirty: false, // 表单是否有未保存变更
                autoSaveIntervalMs: 60 * 1000, // 默认 1 分钟
                autoSaveIntervalMs: 5 * 60 * 1000, // 默认 5 分钟
                autoSaveEnabled: true,
                autoSaveActionName: 'handleUpTool' // 自动触发的方法名，可改为自定义保存方法
            };
@@ -303,7 +315,7 @@
                if (tool.lifeWarn !== undefined && tool.lifeWarn !== null) {
                    // 格式化为百分比字符串
                    const warn = Number(tool.lifeWarn);
                    this.lifeWarnInput = warn <= 1 ? `${(warn * 100).toFixed(0)}%` : `${warn.toFixed(0)}%`;
                    this.lifeWarnInput = warn <= 1 ? (warn * 100).toFixed(0) : warn.toFixed(0);
                } else {
                    this.lifeWarnInput = '';
                }
@@ -570,7 +582,7 @@
                        // 新增：自动填充寿命比预警值
                        if (order.modlLifeWorning !== undefined && order.modlLifeWorning !== null) {
                            const warn = Number(order.modlLifeWorning);
                            this.lifeWarnInput = warn <= 1 ? `${(warn * 100).toFixed(0)}%` : `${warn.toFixed(0)}%`;
                            this.lifeWarnInput = warn <= 1 ? (warn * 100).toFixed(0) : warn.toFixed(0);
                        } else {
                            this.lifeWarnInput = '';
                        }
@@ -634,15 +646,30 @@
    /* 原样保持，未改动样式，只插入了一个输入框 */
    .top-section-grid {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        gap: 32px;
        align-items: center;
        gap: 16px;
        margin-bottom: 2vh;
        width: 95vw;
        max-width: 1600px;
        margin-left: auto;
        margin-right: auto;
    }

    /* 新增：表单行样式 */
    .form-row {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        gap: 32px;
        margin-bottom: 16px;
        width: 100%;
    }

        .form-row:last-child {
            margin-bottom: 0;
        }

    .form-cell {
        display: flex;
@@ -663,6 +690,11 @@
        border-radius: 6px;
        background: #f8f8f8;
    }

        /* 新增：小字体样式 */
        .input.small-font {
            font-size: 1vw; /* 调小字体 */
        }

    .form-select {
        width: 12vw;
@@ -929,4 +961,21 @@
    .tool-desc {
        margin-top: 2vh;
    }

    /* 新增：带单位的输入框样式 */
    .input-with-unit {
        display: flex;
        align-items: center;
    }

        .input-with-unit .input {
            width: 10vw;
            margin-right: 8px;
        }

    .unit-text {
        color: #666;
        font-size: 0.9vw;
        white-space: nowrap;
    }
</style>