优化界面

快乐的昕的电脑

2025-10-31 aac7f9ece13837c085769f886f7d0a17a9e037b9

 components/WorkOrderPrint.vue

@@ -1,8 +1,15 @@
<template>
   <view class="page wide-layout" :class="{'has-overlay': (isShowUserSelect || isShow || barcodeIsShow)}">
      <view class="status-section">
         <!-- 报工记录表部分，在标题行添加刷新按钮 -->
         <view class="report-table-wrapper">
            <view class="report-title">报工记录表</view>
            <view class="report-header">
               <view class="report-title">报工记录表</view>
               <view class="header-buttons">
                  <button class="refresh-btn-header" @click="refresh">刷新</button>
                  <button v-if="isGeneratingBarcode" class="reset-btn-header" @click="resetGenerateState">重置</button>
               </view>
            </view>
            <div class="table-scroll">
               <table class="report-table">
                  <thead>
@@ -29,11 +36,11 @@
                        <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>
                        <td>{{ order.initCjNum }}</td><!--初始采集数-->
                        <td>{{ order.currentCjNum }}</td><!--报工时采集数-->
                        <td>{{ order.currentCjNum - order.initCjNum }}</td><!--报工数（计算）-->
                        <td>{{ realTimeDefectiveCount }}</td><!--不良数-->
                        <td>{{ realTimeOkCount }}</td><!--良品数（计算）-->
                     </tr>
                     <!-- 历史报工记录行 -->
                     <tr v-for="(r, idx) in reportingHistory" :key="idx">
@@ -57,9 +64,9 @@
            </div>
         </view>

         <!-- 下面原有内容保持不变 -->
         <!-- 移除了原来的状态行中的按钮组 -->
         <view class="status-row">
            <view class="status-box">
            <!--<view class="status-box">
               <text>机台面板数：</text>
               <input v-model="productionCount" class="highlight" disabled />
            </view>
@@ -80,14 +87,22 @@
            <view class="status-box result-box">
               <text>已生产数：</text>
               <input v-model="calculatedTotalProduction" class="highlight" 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>

         <view class="flex-row gap-lg">
            <!-- 当前报工人部分移到左边 -->
            <view class="current-user-section fill-width">
               <text>当前报工人：</text>
               <text class="current-user-name">{{ staffDisplay || '未选择' }}</text>
               <button class="select-user-btn" @click="isShowUserSelect = true">选人</button>
            </view>

            <!-- 不良数量部分移到右边 -->
            <view class="print-section flex-grow">
               <view class="barcode-info">
                  <view class="user-select">
@@ -98,12 +113,6 @@
                     <button class="details-btn" @click="confirmCustomAmount">确认提交</button>
                  </view>
               </view>
            </view>

            <view class="current-user-section fill-width">
               <text>当前报工人：</text>
               <text class="current-user-name">{{ staffDisplay || '未选择' }}</text>
               <button class="select-user-btn" @click="isShowUserSelect = true">选人</button>
            </view>
         </view>

@@ -144,11 +153,11 @@
            </view>
         </view>

         <view class="bottom-section">
         <!-- 禁用按钮：‘保存并生效'、‘取消’ -->
         <!--<view class="bottom-section">
            <button class="save-btn" @click="save">保存并生效</button>
            <button class="cancel-btn" @click="cancel">取消</button>
         </view>

         </view>-->
         <!-- 保留旧弹窗 -->
         <view v-if="isShow" class="overlay">
            <view class="popup">
@@ -215,30 +224,42 @@
            reportingHistory: []
         }
      },
        computed: {
            calculatedCurrentCount() { return (this.productionCount || 0) - (this.initialValue || 0); },
            calculatedTotalProduction() { return (this.kgQty || 0); }, // 若需恢复旧逻辑可用 (this.kgQty||0)+this.calculatedCurrentCount
            calculatedDefectiveCount() { return this.calculatedTotalProduction - (this.sQuantity || 0); },
            planQtyDisplay() { return this.order.planQty || this.order.planQuantity || this.order.daa008 || 0; },
            staffDisplay() {
                if (!this.staffNo) return '';
                const segs = this.staffNo.split(':');
                return segs.length > 1 ? `${segs[0]} ${segs[1]}` : this.staffNo;
            },
            filteredUsers() {
                if (!this.userSearch) return this.users;
                const kw = this.userSearch.trim().toLowerCase();
                return this.users.filter(u => u.toLowerCase().includes(kw));
            }
        },
        created() {
            this.initializeData();
            this.fetchData(true);
            this.init();
            this.getXS0101();
            this.updateNowTime();
            // 秒级刷新；如不需动态跳秒可改为 60000
            this.nowTimeTimer = setInterval(this.updateNowTime, 1000);
      computed: {
         //良品数实时计算
         realTimeDefectiveCount() {
            // 优先用输入框的值，否则用接口数据
            const val = Number(this.customAmount);
            if (!isNaN(val) && this.customAmount !== '') return val;
            return this.calculatedDefectiveCount;
         },
         realTimeOkCount() {
            // 良品数 = 报工数（计算） - 不良数
            const total = (this.order.currentCjNum || 0) - (this.order.initCjNum || 0);
            return total - this.realTimeDefectiveCount;
         },
         calculatedCurrentCount() { return (this.productionCount || 0) - (this.initialValue || 0); },
         calculatedTotalProduction() { return (this.kgQty || 0); }, // 若需恢复旧逻辑可用 (this.kgQty||0)+this.calculatedCurrentCount
         calculatedDefectiveCount() { return this.calculatedTotalProduction - (this.sQuantity || 0); },
         planQtyDisplay() { return this.order.planQty || this.order.planQuantity || this.order.daa008 || 0; },
         staffDisplay() {
            if (!this.staffNo) return '';
            const segs = this.staffNo.split(':');
            return segs.length > 1 ? `${segs[0]} ${segs[1]}` : this.staffNo;
         },
         filteredUsers() {
            if (!this.userSearch) return this.users;
            const kw = this.userSearch.trim().toLowerCase();
            return this.users.filter(u => u.toLowerCase().includes(kw));
         }
      },
      created() {
         this.initializeData();
         this.fetchData(true);
         this.init();
         this.getXS0101();
         this.updateNowTime();
         // 秒级刷新；如不需动态跳秒可改为 60000
         this.nowTimeTimer = setInterval(this.updateNowTime, 1000);
      },
      beforeDestroy() { if (this.nowTimeTimer) clearInterval(this.nowTimeTimer); },
      methods: {
@@ -248,28 +269,28 @@
            return segs.length > 1 ? `${segs[0]} ${segs[1]}` : u;
         },
         selectUser(u) { this.staffNo = u; this.isShowUserSelect = false; this.userSearch = ''; },
            /* 修改：增加秒 */
            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())}:${p(d.getSeconds())}`;
            },
            initializeData() {
                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.$showMessage("已重置条码生成状态");
            },
            refresh() {
                this.$sendPostRequest({
                    url: "http://192.168.0.94:9095/Numerical/RefreshDev",
                    data: { machineNo: this.order.machineNo },
                    contentType: "application/json"
                }).then(r => { r.code == 200 ? this.fetchData(true) : this.$showMessage("同步失败"); });
            },
         /* 修改：增加秒 */
         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())}:${p(d.getSeconds())}`;
         },
         initializeData() {
            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.$showMessage("已重置条码生成状态");
         },
         refresh() {
            this.$sendPostRequest({
               url: "http://192.168.0.94:9095/Numerical/RefreshDevBycl",
               data: { machineNo: this.order.machineNo },
               contentType: "application/json"
            }).then(r => { r.code == 200 ? this.fetchData(true) : this.$showMessage("同步失败"); });
         },
         onDaa003Change(v) {
            let o = this.lineList[this.DAA003List.indexOf(v)];
            this.orderId = o.id; this.orderNo = o.daa001;
@@ -292,34 +313,34 @@
            }
         },
         /* 新增：获取历史报工记录 */
            /* 修改：规范历史时间到秒 */
            getReportingHistory() {
                if (!this.orderNo) { this.reportingHistory = []; return; }
                const fmtSec = v => {
                    if (!v) return '';
                    // 兼容后端可能返回的不同格式
                    const d = new Date(typeof v === 'string' ? v.replace(/-/g, '/') : v);
                    if (isNaN(d.getTime())) return v; // 无法解析则原样返回
                    const p = n => n.toString().padStart(2, '0');
                    return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`;
                };
                this.$post({
                    url: "/Womdaa/GetByBillNoBG",
                    data: { billNo: this.orderNo, machineNo: this.machineNo || null }
         /* 修改：规范历史时间到秒 */
         getReportingHistory() {
            if (!this.orderNo) { this.reportingHistory = []; return; }
            const fmtSec = v => {
               if (!v) return '';
               // 兼容后端可能返回的不同格式
               const d = new Date(typeof v === 'string' ? v.replace(/-/g, '/') : v);
               if (isNaN(d.getTime())) return v; // 无法解析则原样返回
               const p = n => n.toString().padStart(2, '0');
               return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`;
            };
            this.$post({
               url: "/Womdaa/GetByBillNoBG",
               data: { billNo: this.orderNo, machineNo: this.machineNo || null }
            }).then(res => {
               const list = res?.data?.tbBillList || res?.data || [];
               this.reportingHistory = list.map(r => {
                  // 依据你数据库字段做映射（下面字段名按常见命名举例，需要按实际改）
                  return {
                            bgDate: r.bgDate || '', // 报工时间
                            staff: (r.staffNo ? (r.staffNo + ' ' + (r.staffName || '')) : (r.staffName || '')),//报工人
                            orderNo: r.billNo,//工单号
                            machineNo: r.machineNo ,//机台号
                            initialValue: r.csQty ?? 0,//初始采集数
                            productionCount: r.cjQty ?? 0,//报工时采集数
                            totalProduction: (r.cjQty - r.csQty) ?? 0,//报工数（计算）
                            BfQty: r.bfQty,//不良数
                            OkQty: r.okQty//良品数（计算）
                     bgDate: r.bgDate || '', // 报工时间
                     staff: (r.staffNo ? (r.staffNo + ' ' + (r.staffName || '')) : (r.staffName || '')),//报工人
                     orderNo: r.billNo,//工单号
                     machineNo: r.machineNo,//机台号
                     initialValue: r.csQty ?? 0,//初始采集数
                     productionCount: r.cjQty ?? 0,//报工时采集数
                     totalProduction: (r.cjQty - r.csQty) ?? 0,//报工数（计算）
                     BfQty: r.bfQty,//不良数
                     OkQty: r.okQty//良品数（计算）
                  }
               });
            }).catch(() => { this.reportingHistory = []; });
@@ -329,6 +350,7 @@
            this.user = this.user === u ? null : u;
            this.staffNo = this.user;
         },
         //选择报工人
         confirmCustomAmount() {
            if (!this.customAmount || isNaN(Number(this.customAmount))) { this.$showMessage('请输入有效的数量'); return; }
            if (!this.staffNo) { this.$showMessage('请选择报工人'); return; }
@@ -340,7 +362,9 @@
                  orderNo: this.orderNo,
                  orderId: this.orderId,
                  bf: amount,
                  staffNo: staffNo
                  staffNo: staffNo,
                  initCjNum: this.order.initCjNum,        // 初始采集数
                  currentCjNum: this.order.currentCjNum   // 报工时采集数
               }
            }).then(res => {
               if (res.status == 1) { this.$showMessage(res.message); return; }
@@ -456,6 +480,49 @@
      color: #777;
      font-size: 14px;
   }

   /* 新增：标题行样式 */
   .report-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
   }

   .header-buttons {
      display: flex;
      align-items: center;
      gap: 12px;
   }

   .refresh-btn-header {
      background: #00A2E9;
      color: #fff;
      border: none;
      font-size: 16px;
      border-radius: 8px;
      padding: 8px 20px;
      transition: background 0.15s;
   }

      .refresh-btn-header:hover {
         background: #0086c0;
      }

   .reset-btn-header {
      background: #ff6b6b;
      color: #fff;
      border: none;
      font-size: 14px;
      border-radius: 8px;
      padding: 8px 16px;
      transition: background 0.15s;
   }

      .reset-btn-header:hover {
         background: #e94d4d;
      }

   /* 其余样式保持不变 */

   .page {
@@ -490,7 +557,7 @@
      font-size: 24px;
      font-weight: 600;
      text-align: center;
      margin: 0 0 8px;
      margin: 0;
   }

   .report-table {
@@ -915,5 +982,15 @@
      .reason-btn {
         font-size: 12px;
      }

      .refresh-btn-header {
         font-size: 14px;
         padding: 6px 16px;
      }

      .reset-btn-header {
         font-size: 12px;
         padding: 6px 12px;
      }
   }
</style>