界面修改

快乐的昕的电脑

2025-10-15 a3298d4e03b929a1fb9e00f3211baa577338b9c8

 components/WorkOrderPrint.vue

@@ -1,5 +1,6 @@
<template>
   <view class="page">
   <!-- 根元素增加动态类，弹窗出现时附加 has-overlay，用于控制底层交互与层级 -->
   <view class="page" :class="{'has-overlay': (isShowUserSelect || isShow || barcodeIsShow)}">
      <view class="status-section">
         <!-- 报工记录表 -->
         <view class="report-table-wrapper">
@@ -23,7 +24,7 @@
               <tbody>
                  <tr>
                     <td>{{ nowTime }}</td>
                     <td>{{ staffNo || '-' }}</td>
                     <td>{{ staffName || '-' }}</td>
                     <td>{{ orderNo || '-' }}</td>
                     <td>{{ order.daa003 || '-' }}</td>
                     <td>{{ planQtyDisplay }}</td>
@@ -68,7 +69,6 @@
            </view>
         </view>

         <!-- 已移除: 产品编码 / 产品名称 / 产品规格 输入区域 -->
         <!-- 不良数量 -->
         <view class="print-section" style="margin-top:10px;">
            <view class="barcode-info">
@@ -84,13 +84,28 @@
         </view>

         <!-- 报工人选择 -->
         <view>
            <view class="reason-section" style="margin-bottom:-10px">
               <text>报工人：</text>
               <view class="reason-buttons">
                  <button v-for="(u,index) in users" :key="index"
                        :class="{'reason-btn':true,'selected': staffNo===u}"
                        @click="toggleUser(u)" v-text="u"></button>
         <view class="current-user-section">
            <text>当前报工人：</text>
            <text class="current-user-name">{{ staffName || '未选择' }}</text>
            <button class="select-user-btn" @click="isShowUserSelect = true">选人</button>
         </view>

         <!-- 选人弹窗 -->
         <view v-if="isShowUserSelect" class="overlay">
            <view class="popup user-select-popup">
               <view class="user-list-scroll">
                  <view class="user-list-grid">
                     <button v-for="(u, index) in users"
                           :key="index"
                           class="user-list-btn"
                           :class="{'selected': u === staffNo}"
                           @click="selectUser(u)">
                        {{ u.split(':')[1] }}
                     </button>
                  </view>
               </view>
               <view class="user-popup-footer">
                  <button class="clean-btn" style="width: 60%;" @click="isShowUserSelect = false">关闭</button>
               </view>
            </view>
         </view>
@@ -148,6 +163,7 @@
      props: { orderNo: String, orderId: Number, machineNo: String },
      data() {
         return {
            isShowUserSelect: false,
            currentUser: '',
            barcodeAmount: '',
            users: [], userForm: [], staff: [], user: {},
@@ -165,7 +181,13 @@
         calculatedCurrentCount() { return (this.productionCount || 0) - (this.initialValue || 0); },
         calculatedTotalProduction() { return (this.kgQty || 0) + this.calculatedCurrentCount; },
         calculatedDefectiveCount() { return this.calculatedTotalProduction - (this.sQuantity || 0); },
         planQtyDisplay() { return this.order.planQty || this.order.planQuantity || this.order.daa007 || this.order.daa010 || 0; }
         planQtyDisplay() { return this.order.planQty || this.order.planQuantity || this.order.daa007 || this.order.daa010 || 0; },
         // 新增：解析姓名
         staffName() {
            if (!this.staffNo) return '';
            const parts = this.staffNo.split(':');
            return parts.length > 1 ? parts[1] : this.staffNo;
         }
      },
      created() {
         this.initializeData();
@@ -177,6 +199,11 @@
      },
      beforeDestroy() { if (this.nowTimeTimer) clearInterval(this.nowTimeTimer); },
      methods: {
         // 选择人员
         selectUser(u) {
            this.staffNo = u;
            this.isShowUserSelect = false;
         },
         updateNowTime() {
            const d = new Date(), p = n => n.toString().padStart(2, '0');
            this.nowTime = `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`;
@@ -339,6 +366,14 @@
      flex-direction: column;
      box-sizing: border-box;
   }

      .page.has-overlay .status-section > :not(.overlay) {
         pointer-events: none;
      }

      .page.has-overlay .status-section > .overlay {
         pointer-events: auto;
      }

   .report-table-wrapper {
      margin-bottom: 8px;
@@ -509,6 +544,8 @@
      display: flex;
      justify-content: space-between;
      margin-top: 12px;
      position: relative;
      z-index: 10;
   }

   .save-btn, .cancel-btn {
@@ -531,6 +568,7 @@
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1000;
   }

   .popup {
@@ -544,6 +582,7 @@
      max-height: 80vh;
      overflow-y: auto;
      border-radius: 8px;
      z-index: 1001;
   }

   .clean-btn {
@@ -563,6 +602,80 @@
      border-spacing: 3px;
   }

   .current-user-section {
      display: flex;
      align-items: center;
      margin: 16px 0;
      font-size: 18px;
      border: 1.5px solid #f00;
      border-radius: 8px;
      padding: 12px 18px;
      background: #fff;
      width: fit-content;
      gap: 10px;
   }

   .current-user-name {
      font-weight: bold;
      font-size: 20px;
      margin: 0 10px;
   }

   .select-user-btn {
      padding: 4px 18px;
      background: #eee;
      border: 1px solid #aaa;
      border-radius: 6px;
      font-size: 16px;
      margin-left: 8px;
   }

   .user-select-popup {
      width: 480px;
      max-width: 96vw;
      max-height: 80vh;
      padding: 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
   }

   .user-list-scroll {
      flex: 1 1 auto;
      overflow-y: auto;
      padding: 32px 24px 0 24px;
   }

   .user-list-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px 18px;
      margin-bottom: 0;
   }

   .user-popup-footer {
      flex-shrink: 0;
      padding: 18px 24px 24px 24px;
      background: #fff;
      text-align: center;
   }

   .user-list-btn {
      padding: 18px 0;
      font-size: 20px;
      background: #00a2e9;
      color: #fff;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      width: 100%;
      box-sizing: border-box;
   }

      .user-list-btn.selected {
         background: #ff9500;
      }

   @media (max-width:1400px) {
      input.highlight {
         font-size: 14px;