界面修改

快乐的昕的电脑

2025-10-15 a3298d4e03b929a1fb9e00f3211baa577338b9c8

 components/WorkOrderPrint.vue

@@ -1,21 +1,45 @@
<template>
   <view class="page">
   <!-- 根元素增加动态类，弹窗出现时附加 has-overlay，用于控制底层交互与层级 -->
   <view class="page" :class="{'has-overlay': (isShowUserSelect || isShow || barcodeIsShow)}">
      <view class="status-section">
         <!-- 头部 -->
         <view class="header-container">
            <view class="header-title">
               <text>生产数据统计</text>
            </view>
            <view class="header-right">
               <view class="version-info-top">
                  <text>v1.0.6</text>
               </view>
               <button class="refresh-btn" @click="refresh">刷新</button>
               <button v-if="isGeneratingBarcode" class="reset-btn" @click="resetGenerateState">重置</button>
            </view>
         <!-- 报工记录表 -->
         <view class="report-table-wrapper">
            <view class="report-title">报工记录表</view>
            <table class="report-table">
               <thead>
                  <tr>
                     <th>时间</th>
                     <th>报工人</th>
                     <th>工单号</th>
                     <th>产品名称</th>
                     <th>计划生产数</th>
                     <th>机台号</th>
                     <th>初始采集数</th>
                     <th>报工时采集数</th>
                     <th>报工数（计算）</th>
                     <th>不良数</th>
                     <th>良品数（计算）</th>
                  </tr>
               </thead>
               <tbody>
                  <tr>
                     <td>{{ nowTime }}</td>
                     <td>{{ staffName || '-' }}</td>
                     <td>{{ orderNo || '-' }}</td>
                     <td>{{ order.daa003 || '-' }}</td>
                     <td>{{ planQtyDisplay }}</td>
                     <td>{{ machineNo || '-' }}</td>
                     <td>{{ initialValue }}</td>
                     <td>{{ productionCount }}</td>
                     <td>{{ calculatedTotalProduction }}</td>
                     <td>{{ calculatedDefectiveCount }}</td>
                     <td>{{ sQuantity }}</td>
                  </tr>
               </tbody>
            </table>
         </view>

         <!-- 第一行：保留 -->
         <!-- 统计行 -->
         <view class="status-row">
            <view class="status-box">
               <text>机台面板数：</text>
@@ -39,54 +63,18 @@
               <text>已生产数：</text>
               <input v-model="calculatedTotalProduction" class="highlight" disabled />
            </view>
         </view>

         <!-- 删除：第二行(手报不良数/未打印条码数) 已按需求去掉 -->
         <!-- <view class="status-row">...</view> -->
         <!-- 基础信息 -->
         <view>
            <view style="display:flex;flex-direction:column;">
               <view class="form-row">
                  <view class="form-item">
                     <label>产品编码:</label>
                     <input class="inp" type="text" v-model="order.daa002" disabled />
                  </view>
                  <view class="form-item">
                     <label>产品名称:</label>
                     <superwei-combox :candidates="DAA003List" v-model="order.daa003"
                                  @select="onDaa003Change" class="inp"></superwei-combox>
                  </view>
                  <view class="form-item">
                     <label>产品规格:</label>
                     <input class="inp" type="text" v-model="order.daa004" disabled />
                  </view>
               </view>
               <view class="form-row">
                  <view class="form-item">
                     <label>图&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号:</label>
                     <input class="inp" type="text" v-model="order.engineeringNo" disabled />
                  </view>
                  <view class="form-item">
                     <label>材&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;质:</label>
                     <input class="inp" type="text" v-model="order.material" disabled />
                  </view>
                  <view class="form-item">
                     <label>颜&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;色:</label>
                     <input class="inp" type="text" v-model="order.colorName" disabled />
                  </view>
               </view>
            <view class="btn-group">
               <button class="refresh-btn-inline" @click="refresh">刷新</button>
               <button v-if="isGeneratingBarcode" class="reset-btn-inline" @click="resetGenerateState">重置</button>
            </view>
         </view>

         <!-- 删除：打印条码区域 -->
         <!-- (原 打印条码张数 / 每张条码数量 / 打印按钮 / 明细按钮 ) -->
         <!-- 保留：不良数量输入 -->
         <view class="print-section" style="margin-top:20px;">
         <!-- 不良数量 -->
         <view class="print-section" style="margin-top:10px;">
            <view class="barcode-info">
               <view class="user-select">
                  <text style="display:inline-block;float:left;margin-left:-11px;">不良数量：</text>
                  <input v-model="customAmount" class="inp"
                        style="width:55%;height:70px;border:3px solid #808080;font-size:40px;text-align:center;margin-top:5px;"
                  <text>不良数量：</text>
                  <input v-model="customAmount" class="inp bad-input"
                        placeholder="请输入数量" />
               </view>
               <view class="user-select" style="margin-left:30px;">
@@ -95,25 +83,40 @@
            </view>
         </view>

         <!-- 报工人选择（替换原不良备注按钮区） -->
         <view>
            <view class="reason-section" style="margin-bottom:-16px">
               <text>报工人：</text>
               <view class="reason-buttons" style="font-size:23px;">
                  <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>

         <!-- 底部按钮（仍保留，save 已重写，仅校验是否选人） -->
         <!-- 底部按钮 -->
         <view class="bottom-section">
            <button class="save-btn" @click="save">保存并生效</button>
            <button class="cancel-btn" @click="cancel">取消</button>
         </view>

         <!-- (保留原弹窗与条码明细弹窗的 DOM ，如彻底不用可后续删除) -->
         <!-- 弹窗保留 -->
         <view v-if="isShow" class="overlay">
            <view class="popup">
               <view class="bottom-section1">
@@ -140,23 +143,13 @@
                     <uni-th align="center" style="font-size:40px;">报工数量</uni-th>
                  </uni-tr>
                  <uni-tr v-for="(item,index) in reportingList" :key="index">
                     <uni-td align="center">
                        <input type="text" v-model="item.bgDate" style="width:26vh;" />
                     </uni-td>
                     <uni-td align="center">
                        <input v-model="item.itemNoCade" style="width:40vh;" />
                     </uni-td>
                     <uni-td align="center">
                        <input v-model="item.staffName" />
                     </uni-td>
                     <uni-td align="center">
                        <input v-model="item.okQty" />
                     </uni-td>
                     <uni-td align="center"><input type="text" v-model="item.bgDate" style="width:26vh;" /></uni-td>
                     <uni-td align="center"><input v-model="item.itemNoCade" style="width:40vh;" /></uni-td>
                     <uni-td align="center"><input v-model="item.staffName" /></uni-td>
                     <uni-td align="center"><input v-model="item.okQty" /></uni-td>
                  </uni-tr>
               </uni-table>
               <view>
                  <button class="clean-btn" type="warn" @click="barcodeIsShow=false">关闭</button>
               </view>
               <view><button class="clean-btn" type="warn" @click="barcodeIsShow=false">关闭</button></view>
            </view>
         </view>
      </view>
@@ -167,99 +160,62 @@
   import { printTemplate3 } from "../utils/printTemplate";

   export default {
      props: {
         orderNo: String,
         orderId: Number,
         machineNo: String
      },
      props: { orderNo: String, orderId: Number, machineNo: String },
      data() {
         return {
            isShowUserSelect: false,
            currentUser: '',
            barcodeAmount: '',
            users: [],
            userForm: [],
            staff: [],
            user: {},
            // 删除不良原因相关数据
            productionCount: 0,
            printedCount: 0,
            defectiveCount: 0,
            order: {},
            icount: 1,
            bqty: 0,
            sQuantity: 0,
            kgQty: 0,
            initialValue: 0,
            qqty: 0,
            ngStaid: 0,
            bufferData: '',
            dataToPrint: [],
            isLoading: false,
            but: false,
            DAA003List: [],
            lineList: [],
            isShow: false,
            barcodeIsShow: false,
            barcodeList: [],
            staffNo: '',
            printStr: '',
            printMac: '',
            bluetoothSocket: {},
            device: '',
            uuid: '',
            printNum: 1,
            reportingList: [],
            printLoading: false,
            customAmount: '',
            isGeneratingBarcode: false,
            lastGenerateTime: 0,
            generateRequestId: null
         };
      },
      computed: {
         calculatedCurrentCount() {
            const production = this.productionCount || 0;
            const initial = this.initialValue || 0;
            return production - initial;
         },
         calculatedTotalProduction() {
            const kgQty = this.kgQty || 0;
            const currentCount = this.calculatedCurrentCount;
            return kgQty + currentCount;
         },
         calculatedDefectiveCount() {
            const totalProduction = this.calculatedTotalProduction;
            const goodCount = this.sQuantity || 0;
            return totalProduction - goodCount;
            users: [], userForm: [], staff: [], user: {},
            productionCount: 0, printedCount: 0, defectiveCount: 0, order: {},
            icount: 1, bqty: 0, sQuantity: 0, kgQty: 0, initialValue: 0, qqty: 0,
            ngStaid: 0, bufferData: '', dataToPrint: [], isLoading: false, but: false,
            DAA003List: [], lineList: [], isShow: false, barcodeIsShow: false, barcodeList: [],
            staffNo: '', printStr: '', printMac: '', bluetoothSocket: {}, device: '', uuid: '',
            printNum: 1, reportingList: [], printLoading: false, customAmount: '',
            isGeneratingBarcode: false, lastGenerateTime: 0, generateRequestId: null,
            nowTimeTimer: null, nowTime: ''
         }
      },
      mounted() { },
      computed: {
         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; },
         // 新增：解析姓名
         staffName() {
            if (!this.staffNo) return '';
            const parts = this.staffNo.split(':');
            return parts.length > 1 ? parts[1] : this.staffNo;
         }
      },
      created() {
         this.initializeData();
         this.fetchData(true);
         this.init();
         // 直接加载人员供选择
         this.getXS0101();
         this.updateNowTime();
         this.nowTimeTimer = setInterval(this.updateNowTime, 60000);
      },
      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())}`;
         },
         initializeData() {
            this.productionCount = 0;
            this.printedCount = 0;
            this.defectiveCount = 0;
            this.icount = 1;
            this.bqty = 0;
            this.sQuantity = 0;
            this.kgQty = 0;
            this.initialValue = 0;
            this.qqty = 0;
            this.isGeneratingBarcode = false;
            this.lastGenerateTime = 0;
            this.generateRequestId = null;
            this.productionCount = this.printedCount = this.defectiveCount = 0;
            this.icount = 1; this.bqty = 0; this.sQuantity = 0; this.kgQty = 0;
            this.initialValue = 0; this.qqty = 0;
            this.isGeneratingBarcode = false; this.lastGenerateTime = 0; this.generateRequestId = null;
         },
         resetGenerateState() {
            this.isGeneratingBarcode = false;
            this.generateRequestId = null;
            this.lastGenerateTime = 0;
            this.isGeneratingBarcode = false; this.generateRequestId = null; this.lastGenerateTime = 0;
            this.$showMessage("已重置条码生成状态");
         },
         refresh() {
@@ -267,22 +223,14 @@
               url: "http://192.168.0.94:9095/Numerical/RefreshDev",
               data: { machineNo: this.order.machineNo },
               contentType: "application/json"
            }).then(res1 => {
               if (res1.code == 200) {
                  this.fetchData(true);
               } else {
                  this.$showMessage("同步失败");
               }
            });
            }).then(r => { r.code == 200 ? this.fetchData(true) : this.$showMessage("同步失败"); });
         },
         onDaa003Change(event) {
            let orde = this.lineList[this.DAA003List.indexOf(event)];
            this.orderId = orde.id;
            this.orderNo = orde.daa001;
         onDaa003Change(v) {
            let o = this.lineList[this.DAA003List.indexOf(v)];
            this.orderId = o.id; this.orderNo = o.daa001;
            uni.setStorageSync('machine', this.machineNo);
            uni.setStorageSync('orderId', this.orderId);
            uni.setStorageSync('orderNo', this.orderNo);
            uni.setStorageSync('engineeringNo', this.order.engineeringNo);
            this.fetchData(false);
         },
         fetchData(flag) {
@@ -290,109 +238,80 @@
            this.getOrderById();
            this.getWomdaaPrintById();
            if (flag) {
               this.$post({
                  url: "/Womdaa/GetWomdaasByShow",
                  data: { machineNo: this.machineNo }
               }).then(res => {
                  this.lineList = res.data.tbBillList;
                  this.DAA003List = res.data.tbBillList.map(item => item.daa003);
               });
               this.$post({ url: "/Womdaa/GetWomdaasByShow", data: { machineNo: this.machineNo } })
                  .then(res => {
                     this.lineList = res.data.tbBillList;
                     this.DAA003List = res.data.tbBillList.map(i => i.daa003);
                  });
            }
         },
         toggleUser(user) {
            if (!user) return;
            this.user = this.user === user ? null : user;
         toggleUser(u) {
            if (!u) return;
            this.user = this.user === u ? null : u;
            this.staffNo = this.user;
         },
         confirmCustomAmount() {
            if (!this.customAmount || isNaN(Number(this.customAmount))) {
               this.$showMessage('请输入有效的数量');
               return;
               this.$showMessage('请输入有效的数量'); return;
            }
            let amount = Number(this.customAmount);
            this.$post({
               url: "/MesInvItemBarcodes/AddBFToBarcodes",
               data: {
                  orderNo: this.orderNo,
                  orderId: this.orderId,
                  bf: amount
               }
               data: { orderNo: this.orderNo, orderId: this.orderId, bf: amount }
            }).then(res => {
               if (res.status == 1) {
                  this.$showMessage(res.message);
                  return;
               }
               if (res.status == 1) { this.$showMessage(res.message); return; }
               this.$showMessage('报废数量填写成功');
               this.fetchData(true);
               this.customAmount = '';
            }).catch(() => {
               this.$showMessage('报废数量填写失败，请重试');
            });
            }).catch(() => this.$showMessage('报废数量填写失败，请重试'));
         },
         // 保存按钮现在仅校验报工人（可根据业务改成提交接口）
         save() {
            if (!this.staffNo) {
               this.$showMessage('请选择报工人');
               return;
            }
            if (!this.staffNo) { this.$showMessage('请选择报工人'); return; }
            uni.showToast({ title: '保存成功', icon: 'success' });
         },
         cancel() {
            uni.showToast({ title: '取消操作', icon: 'none' });
         },
         cancel() { uni.showToast({ title: '取消操作', icon: 'none' }); },
         getOrderById() {
            this.$post({
               url: "/Womdaa/GetWomdaaById",
               data: { orderId: this.orderId, orderNo: this.orderNo }
            }).then(res => {
               this.order = res.data.tbBillList;
               this.printedCount = res.data.tbBillList.bgqty;
               this.defectiveCount = res.data.tbBillList.blQty;
               this.productionCount = this.order.todayOutput || 0;
               this.defectiveCount = this.defectiveCount || 0;
               this.printedCount = this.printedCount || 0;
            });
            this.$post({ url: "/Womdaa/GetWomdaaById", data: { orderId: this.orderId, orderNo: this.orderNo } })
               .then(res => {
                  this.order = res.data.tbBillList;
                  this.printedCount = res.data.tbBillList.bgqty || 0;
                  this.defectiveCount = res.data.tbBillList.blQty || 0;
                  this.productionCount = this.order.todayOutput || 0;
               });
         },
         getXS0101() {
            this.$post({ url: "/MesStaff/GetAllXS0101" }).then(res => {
               this.staff = res.data.tbBillList;
               this.users = this.staff.map(s => s.staffNo + ":" + s.staffName);
            });
            this.$post({ url: "/MesStaff/GetAllXS0101" })
               .then(res => {
                  this.staff = res.data.tbBillList;
                  this.users = this.staff.map(s => s.staffNo + ":" + s.staffName);
               });
         },
         getWomdaaPrintById() {
            this.$post({
               url: "/Womdaa/GetWomdaaPrintById",
               data: { orderId: this.orderId }
            }).then(res => {
               if (!res || !res.data || !res.data.tbBillList) return;
               const data = res.data.tbBillList;
               this.bqty = data.bqty;
               this.icount = 1;
               this.sQuantity = data.sQuantity || 0;
               this.initialValue = data.initialValue || 0;
               this.kgQty = data.kgQty || 0;
               this.barcodeAmount = data.qqty || 0;
               if (this.bqty === 0) this.Completed();
            }).catch(() => { });
            this.$post({ url: "/Womdaa/GetWomdaaPrintById", data: { orderId: this.orderId } })
               .then(res => {
                  if (!res?.data?.tbBillList) return;
                  const d = res.data.tbBillList;
                  this.bqty = d.bqty;
                  this.icount = 1;
                  this.sQuantity = d.sQuantity || 0;
                  this.initialValue = d.initialValue || 0;
                  this.kgQty = d.kgQty || 0;
                  this.barcodeAmount = d.qqty || 0;
                  if (this.bqty === 0) this.Completed();
               }).catch(() => { });
         },
         Completed() {
            this.$post({
               url: "/MesOrderSta/Completed",
               data: { orderId: this.orderId, orderNo: this.orderNo }
            });
            this.$post({ url: "/MesOrderSta/Completed", data: { orderId: this.orderId, orderNo: this.orderNo } });
         },
         // 以下打印相关函数仍保留（若完全不用可继续删除）
         init() {
            try {
               const androidVersion = this.getAndroidVersion();
               if (androidVersion >= 12) this.initForAndroid12Plus(); else this.initForAndroidLegacy();
               const v = this.getAndroidVersion();
               v >= 12 ? this.initForAndroid12Plus() : this.initForAndroidLegacy();
            } catch (e) { console.error(e); }
         },
         getAndroidVersion() {
            try {
               var Build = plus.android.importClass("android.os.Build");
               return Build.VERSION.SDK_INT;
            } catch { return 30; }
            try { var Build = plus.android.importClass("android.os.Build"); return Build.VERSION.SDK_INT; }
            catch { return 30; }
         },
         initForAndroid12Plus() {
            try {
@@ -401,18 +320,16 @@
               var Context = plus.android.importClass("android.content.Context");
               var UUID = plus.android.importClass("java.util.UUID");
               this.uuid = UUID.fromString("00001101-0000-1000-8000-00805F9B34FB");
               var bluetoothManager = main.getSystemService(Context.BLUETOOTH_SERVICE);
               var bluetoothAdapter = bluetoothManager.getAdapter();
               if (bluetoothAdapter && bluetoothAdapter.isDiscovering()) bluetoothAdapter.cancelDiscovery();
               var mgr = main.getSystemService(Context.BLUETOOTH_SERVICE);
               var adp = mgr.getAdapter();
               if (adp && adp.isDiscovering()) adp.cancelDiscovery();
               this.printMac = uni.getStorageSync('printMac');
               var address_mac = this.printMac ? this.printMac : "DC:1D:30:91:06:52";
               if (bluetoothAdapter) {
                  this.device = bluetoothAdapter.getRemoteDevice(address_mac);
               var mac = this.printMac || "DC:1D:30:91:06:52";
               if (adp) {
                  this.device = adp.getRemoteDevice(mac);
                  plus.android.importClass(this.device);
               }
            } catch (e) {
               this.initForAndroidLegacy();
            }
            } catch (e) { this.initForAndroidLegacy(); }
         },
         initForAndroidLegacy() {
            try {
@@ -422,9 +339,9 @@
               var BAdapter = BluetoothAdapter.getDefaultAdapter();
               if (BAdapter) BAdapter.cancelDiscovery();
               this.printMac = uni.getStorageSync('printMac');
               var address_mac = this.printMac ? this.printMac : "DC:1D:30:91:06:52";
               var mac = this.printMac || "DC:1D:30:91:06:52";
               if (BAdapter) {
                  this.device = BAdapter.getRemoteDevice(address_mac);
                  this.device = BAdapter.getRemoteDevice(mac);
                  plus.android.importClass(this.device);
                  this.bluetoothSocket = this.device.createInsecureRfcommSocketToServiceRecord(this.uuid);
                  plus.android.importClass(this.bluetoothSocket);
@@ -435,79 +352,92 @@
            this.isShow = false;
            this.isGeneratingBarcode = false;
            this.generateRequestId = null;
            this.bufferData = '';
            this.dataToPrint = [];
            this.staffNo = null;
            this.user = '';
            this.barcodeAmount = '';
            this.icount = 1;
            this.staff = null;
            this.bufferData = ''; this.dataToPrint = [];
            this.staffNo = null; this.user = ''; this.barcodeAmount = ''; this.icount = 1; this.staff = null;
         }
      }
   };
   }
</script>

<style scoped>
   /* 样式保持原有，大块删除区域不再需要额外样式 */
   .page {
      padding: 2vh;
      padding: 1.2vh 1.5vw;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-sizing: border-box;
   }

   .refresh-btn {
      float: right;
      background-color: #00A2E9;
      color: #fff;
      border: none;
      font-size: 32px;
      border-radius: 15px;
      margin-top: -32px;
      margin-bottom: 49px;
      padding: 0 25px;
      .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;
   }

   .report-title {
      font-size: 22px;
      font-weight: 600;
      text-align: center;
      margin: 0 0 6px;
   }

   .report-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
      background: #fff;
   }

      .report-table th, .report-table td {
         border: 1px solid #555;
         padding: 4px 6px;
         text-align: center;
         white-space: nowrap;
      }

   .status-section {
      display: flex;
      flex-direction: column;
      margin-bottom: 3vh;
      padding-top: 14px;
   }

   .status-row {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      align-items: center;
      margin-bottom: 20px;
      background-color: #f9f9f9;
      padding: 15px;
      border-radius: 8px;
      gap: 4px;
      background: #f9f9f9;
      padding: 8px 10px;
      border-radius: 6px;
      box-shadow: 0 1px 3px rgba(0,0,0,.05);
      margin-bottom: 6px;
   }

   .status-box {
      display: flex;
      align-items: center;
      padding: 0 10px;
   }

   .result-box {
      background-color: #f0f8ff;
      padding: 5px 15px;
      border-radius: 6px;
      background: #f0f8ff;
      padding: 2px 10px;
      border-radius: 4px;
      border-left: 4px solid #007aff;
   }

   input.highlight {
      width: 10vw;
      font-weight: 700;
      width: 7.5vw;
      min-width: 90px;
      font-weight: 600;
      border: none;
      background-color: #fff;
      background: #fff;
      text-align: center;
      font-size: 1.5vw;
      padding: 8px;
      font-size: 16px;
      padding: 4px 0;
      border-radius: 4px;
      box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
   }
@@ -516,125 +446,116 @@
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 36px;
      font-size: 26px;
      font-weight: bold;
      margin: 0 15px;
      color: #007aff;
      width: 40px;
      height: 40px;
      margin: 0 4px;
   }

   .header-container {
   .btn-group {
      margin-left: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding: 10px 15px;
      background-color: #f2f2f2;
      border-radius: 10px;
      box-shadow: 0 2px 5px rgba(0,0,0,.1);
      gap: 10px;
   }

   .header-title {
      font-size: 24px;
      font-weight: bold;
      color: #333;
   .refresh-btn-inline {
      background: #00A2E9;
      color: #fff;
      border: none;
      font-size: 18px;
      border-radius: 8px;
      padding: 6px 26px;
   }

   .version-info-top {
      font-size: 13px;
      color: #666;
      margin-right: 10px;
   }

   .inp {
      width: 65%;
      padding: 1vh;
      margin-top: -13px;
      font-size: 1.3vw;
      border: 1px solid #808080;
      border-radius: .5vw;
      box-sizing: border-box;
   }

   .form-row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 3vh;
      flex-wrap: nowrap;
   }

   .form-item {
      width: 30%;
   .reset-btn-inline {
      background: #ff6b6b;
      color: #fff;
      border: none;
      font-size: 16px;
      border-radius: 8px;
      padding: 6px 14px;
   }

   .print-section {
      padding: 1vh;
      border-radius: 1vw;
      margin-bottom: 2vh;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      padding: 4px 0 10px;
      margin-bottom: 8px;
   }

   .barcode-info {
      display: flex;
      align-items: flex-start;
      gap: 2vw;
      gap: 20px;
   }

   .inp {
      padding: 6px;
      font-size: 14px;
      border: 1px solid #808080;
      border-radius: 6px;
      box-sizing: border-box;
   }

   .bad-input {
      width: 55%;
      height: 60px;
      border: 3px solid #808080;
      font-size: 32px;
      text-align: center;
      margin-top: 5px;
   }

   .details-btn {
      display: inline-block;
      padding: 1.5vh;
      background-color: #00a2e9;
      padding: 10px 26px;
      background: #00a2e9;
      color: #fff;
      font-size: 1.5vw;
      font-size: 18px;
      border: none;
      cursor: pointer;
      border-radius: 1vw;
      border-radius: 10px;
   }

   .reason-section {
      margin-bottom: 3vh;
      margin: 10px 0 12px;
   }

   .reason-buttons {
      display: grid;
      grid-template-columns: repeat(5,1fr);
      gap: 1vw;
      gap: 10px;
   }

   .reason-btn {
      padding: .5vh;
      background-color: #808080;
      padding: 8px 4px;
      background: #808080;
      color: #fff;
      font-size: 1.3vw;
      font-size: 14px;
      border: none;
      border-radius: .5vw;
      border-radius: 6px;
      cursor: pointer;
   }

      .reason-btn.selected {
         background-color: #FFD700;
         background: #FFD700;
         color: #000;
      }

   .bottom-section {
      display: flex;
      justify-content: space-between;
      margin-top: 2vh;
      margin-top: 12px;
      position: relative;
      z-index: 10;
   }

   .save-btn, .cancel-btn {
      width: 48%;
      padding: 1.5vh;
      background-color: #00A2E9;
      padding: 14px 0;
      background: #00A2E9;
      color: #fff;
      font-size: 1.5vw;
      font-size: 18px;
      border: none;
      text-align: center;
      cursor: pointer;
      border-radius: .5vw;
      border-radius: 8px;
   }

   .overlay {
@@ -643,14 +564,15 @@
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,.5);
      background: rgba(0,0,0,.5);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1000;
   }

   .popup {
      background-color: #fff;
      background: #fff;
      padding: 2vh;
      border: 1px solid #ccc;
      box-shadow: 0 0 10px rgba(0,0,0,.1);
@@ -660,6 +582,7 @@
      max-height: 80vh;
      overflow-y: auto;
      border-radius: 8px;
      z-index: 1001;
   }

   .clean-btn {
@@ -671,7 +594,7 @@
      text-align: center;
      cursor: pointer;
      border-radius: .5vw;
      background-color: #007aff;
      background: #007aff;
   }

   .table1 {
@@ -679,13 +602,87 @@
      border-spacing: 3px;
   }

   .reset-btn {
      background-color: #ff6b6b;
   .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;
      font-size: 18px;
      border-radius: 6px;
      padding: 8px 15px;
      margin-left: 10px;
      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;
      }

      .reason-btn {
         font-size: 12px;
      }
   }
</style>