界面优化

快乐的昕的电脑

2025-10-10 d2ebc34a320c648c615fa836a449c1421838619b

界面优化

 components/machine.vue

@@ -1,38 +1,12 @@
<template>
    <view class="page">

        <!-- 右上角刷新按钮 -->
        <view class="top-right">
            <button class="refresh-btn" @click="refresh">刷新</button>
        </view>
        <!-- 中间状态部分，上下结构 -->
        <!--
        <view class="middle-section">
            <view class="item" style="height: 100px;">
                <h4>说明:调机开始时间需要手动确认</h4>
            </view>
            <view class="item" v-if="!maStartTime">
                <button class="btn-blue" @click="setMaStartTime">调机开始（=换模完成）</button>
                <input class="txt-inp" v-model="maStartTime" placeholder="点击按钮带出时间" disabled="true" />
            </view>
            <view class="item" v-else>
                <button class="btn-disabled">调机开始（=换模完成）</button>
                <input class="txt-inp" v-model="maStartTime" placeholder="点击按钮带出时间" disabled="true" />
            </view>
            <view class="item" v-if="!maShoutTime">
                <button @click="stateCheck(1)" class="btn-blue">送检呼叫（点击按钮|清零机台面板数）</button>
                <input class="txt-inp" v-model="maShoutTime" placeholder="点击按钮带出时间" disabled="true" />
            </view>
            <view class="item" v-else>
                <button class="btn-disabled">送检呼叫（点击按钮|清零机台面板数）</button>
                <input class="txt-inp" v-model="maShoutTime" placeholder="点击按钮带出时间" disabled="true" />
            </view>
            <view class="item">
                <button class="btn-disabled">调机完成（=检验通过）</button>
                <input class="txt-inp" v-model="maEndTime" placeholder="首次首检确认通过写入" disabled="true" />
            </view>
        </view>
        -->
        <!-- 中间状态部分，上下结构 -->

        <!-- 中间状态部分，上下结构，包含调机流程的三个步骤 -->
        <view class="middle-section">
            <view class="item" style="height: 100px;">
                <h4>说明:调机开始时间需要手动确认</h4>
@@ -41,35 +15,39 @@
                <!-- 调机开始按钮，maStartTime有值时禁用 -->
                <button :class="maStartTime ? 'btn-disabled' : 'btn-blue'"
                        :disabled="!!maStartTime"
                        @click="!maStartTime && setMaStartTime">
                        @click="handleMaStartTime">
                    调机开始（=换模完成）
                </button>
                <!-- 显示调机开始时间 -->
                <input class="txt-inp" v-model="maStartTime" placeholder="点击按钮带出时间" disabled="true" />
            </view>
            <view class="item">
                <!-- 送检呼叫按钮，maShoutTime有值时禁用 -->
                <button :class="maShoutTime ? 'btn-disabled' : 'btn-blue'"
                        :disabled="!!maShoutTime"
                        @click="!maShoutTime && stateCheck(1)">
                        @click="handleMaShoutTime">
                    送检呼叫（点击按钮|清零机台面板数）
                </button>
                <!-- 显示送检呼叫时间 -->
                <input class="txt-inp" v-model="maShoutTime" placeholder="点击按钮带出时间" disabled="true" />
            </view>
            <view class="item">
                <!-- 调机完成按钮，maEndTime有值时禁用 -->
                <button :class="maEndTime ? 'btn-disabled' : 'btn-blue'"
                        :disabled="!!maEndTime"
                        @click="!maEndTime && setMaEndTime">
                        @click="handleMaEndTime">
                    调机完成（=检验通过）
                </button>
                <!-- 显示调机完成时间 -->
                <input class="txt-inp" v-model="maEndTime" placeholder="首次首检确认通过写入" disabled="true" />
            </view>
        </view>

        <!-- 底部保存/取消按钮 -->
        <view class="bottom-section">
            <!-- 只有调机完成未填写时才可保存 -->
            <button class="save-btn" v-if="!maEndTime" @click="save">保存并生效</button>
            <!-- <button class="save-btn" @click="save">保存并生效</button> -->
            <!-- 已完成时保存按钮禁用 -->
            <button class="btn-disabled" v-else>保存并生效</button>
            <button class="cancel-btn" @click="cancel">取消</button>
        </view>
@@ -80,79 +58,70 @@
<script>
    export default {
        props: {
            orderNo: String,
            orderId: Number,
            machineNo: String
            orderNo: String,    // 工单号
            orderId: Number,    // 工单ID
            machineNo: String   // 机台号
        },
        data() {
            return {
                maShoutTime: '',
                maStartTime: '',
                maEndTime: '',
                statusForm: {},
                flag: -1,
                maShoutTime: '',   // 送检呼叫时间
                maStartTime: '',   // 调机开始时间
                maEndTime: '',     // 调机完成时间
                statusForm: {},    // 工单状态表单数据
                flag: -1,          // 操作标记
            }
        },
        created() {

            // let machine = uni.getStorageSync('machine');
            // let orderId = uni.getStorageSync('orderId');
            // let orderNo = uni.getStorageSync('orderNo');

            // if (orderId) {
            //     this.orderId = orderId;
            // } else {
            //     if (!this.orderId) {
            //         this.orderId = uni.getStorageSync('id');
            //     }

            // }

            // if (orderNo) {
            //     this.orderNo = orderNo;
            // } else {
            //     if (!this.orderNo) {
            //         this.orderNo = uni.getStorageSync('daa001');
            //     }
            // }

            // if (machine) {
            //     this.machineNo = machine;
            // } else {
            //     if (!this.machineNo) {
            //         this.machineNo = uni.getStorageSync('machineNo');
            //     }
            // }

            // 组件创建时自动加载工单数据
            if (!this.orderId && !this.orderNo) {
                return;
            }

            this.findByOrderId();
        },
        methods: {
            // 处理调机开始按钮点击
            handleMaStartTime() {
                if (!this.maStartTime) {
                    this.setMaStartTime();
                }
            },
            // 处理送检呼叫按钮点击
            handleMaShoutTime() {
                if (!this.maShoutTime) {
                    this.stateCheck(1);
                }
            },
            // 处理调机完成按钮点击
            handleMaEndTime() {
                if (!this.maEndTime) {
                    this.setMaEndTime();
                }
            },
            // 设置调机开始时间为当前时间
            setMaStartTime() {
                this.maStartTime = this.$getDate('yyyy-mm-dd hh24:mi:ss');
            },
            // 设置调机完成时间为当前时间
            setMaEndTime() {
                console.log('调机完成按钮被点击');
                this.maEndTime = this.$getDate('yyyy-mm-dd hh24:mi:ss');
            },
            refresh() {
                this.findByOrderId(); // This will reload the data for the current order
                console.log('调机完成按钮被点击');
                this.maEndTime = this.$getDate('yyyy-mm-dd hh24:mi:ss');
            },
            // 刷新工单数据
            refresh() {
                this.findByOrderId();
            },
            // 保存并生效，将时间等信息提交到后端
            save() {
                if (!this.statusForm.id) {
                    this.$showMessage("id为空，不允许推送");
                    return;
                }

                this.$post({
                    url: "/MesOrderSta/ChangeMachineTime",
                    data: {
                        maStartTime: this.maStartTime, // 新增调机时间
                        maStartTime: this.maStartTime,
                        maShoutTime: this.maShoutTime,
                        maEndTime: this.maEndTime, // 新增调机完成时间
                        maEndTime: this.maEndTime,
                        id: this.statusForm.id,
                        orderId: this.orderId,
                        machineNo: this.machineNo,
@@ -168,11 +137,13 @@
                    }
                })
            },
            // 取消操作，恢复为上次保存的数据
            cancel() {
                this.maShoutTime = this.statusForm.maShoutTime;
                this.maStartTime = this.statusForm.maStartTime;
                this.maEndTime = this.statusForm.maEndTime;
            },
            // 送检呼叫，item=1时设置送检呼叫时间
            stateCheck(item) {
                switch (item) {
                    case 0:
@@ -185,6 +156,7 @@
                }
                this.flag = item;
            },
            // 根据工单号/ID获取工单状态数据
            findByOrderId() {
                this.$post({
                    url: "/MesOrderSta/FindByOrderNo",
@@ -204,7 +176,7 @@
</script>

<style scoped>
    /* 页面撑满窗体 */
    /* 页面整体布局 */
    .page {
        padding: 2vh;
        display: flex;
@@ -214,6 +186,7 @@
        height: 100%;
    }

    /* 右上角刷新按钮 */
    .top-right {
        position: absolute;
        top: 10px;
@@ -230,44 +203,38 @@
        border-radius: 5px;
    }


    label {
        margin-right: 1vw;
        font-size: 1.6vw;
        /* Larger font for labels */
    }

    input {
        padding: 1vh;
        font-size: 1.5vw;
        /* Larger font size for inputs */
        border: 1px solid #ccc;
        width: 100%;
        /* Full width for inputs */
        margin-top: 1vh;
        box-sizing: border-box;
    }

    /* 中间状态部分，上下布局 */
    /* 中间状态部分布局 */
    .middle-section {
        display: flex;
        flex-direction: column;
        margin-bottom: 4vh;
    }

    .item {
        display: flex;
        flex-direction: column; /* 原来是 row */
        align-items: flex-start;
        margin-bottom: 2vh;
    }
    .item {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        margin-bottom: 2vh;
    }

    button {
        width: 100%;
        /* Full-width buttons */
        padding: 1.5vh;
        font-size: 1.5vw;
        /* Larger font size for buttons */
        border: none;
        text-align: center;
    }
@@ -288,10 +255,9 @@
        font-size: 14px;
        border: 1px solid #ccc;
        width: 100%;
        /* 输入框撑满宽度 */
    }

    /* 底部保存/取消按钮 */
    /* 底部保存/取消按钮布局 */
    .bottom-section {
        display: flex;
        justify-content: space-between;
@@ -301,12 +267,10 @@
    .save-btn,
    .cancel-btn {
        width: 48%;
        /* Half-width buttons */
        padding: 1.5vh;
        background-color: #00A2E9;
        color: white;
        font-size: 1.6vw;
        /* Larger font size for save/cancel buttons */
        border: none;
        text-align: center;
    }
@@ -315,9 +279,7 @@
        height: 8vh;
        padding: 1vh;
        font-size: 1.5vw;
        /* Increased font size for input fields in middle section */
        width: 100%;
        /* Full width for middle section inputs */
        box-sizing: border-box;
    }
</style>