From 7a05edc6c2afecc1774fa98bd4090696522383d8 Mon Sep 17 00:00:00 2001
From: fengyuan_yang <1976974459@qq.com>
Date: Thu, 26 Mar 2026 11:02:16 +0800
Subject: [PATCH] =?UTF-8?q?2026-03-26=20=E6=9C=BA=E5=8F=B0=E5=B7=A5?=
 =?UTF-8?q?=E4=BD=9C=E5=8F=B0=E3=80=90=E7=BB=93=E6=9D=9F=E5=8D=B7=E3=80=91?=
 =?UTF-8?q?=E5=AF=B9=E8=AF=9D=E6=A1=86=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/yieldReport/com_finish_roll.vue   | 591 +++++++++++-------
 1 file changed, 366 insertions(+), 225 deletions(-)

diff --git a/src/views/modules/yieldReport/com_finish_roll.vue b/src/views/modules/yieldReport/com_finish_roll.vue
index 4e2d628..ecbb8f2 100644
--- a/src/views/modules/yieldReport/com_finish_roll.vue
+++ b/src/views/modules/yieldReport/com_finish_roll.vue
@@ -1,195 +1,295 @@
 <template>
-  <div class="customer-css">
-    <el-dialog :title="titleCon" v-drag v-bind="$attrs" v-on="$listeners" width="920px" style="height: 680px;" class="customer-dialog">
-      <el-form :inline="true" label-position="top" style="height: 495px;" label-width="80px">
-        <!-- 菜单信息 -->
-        <el-row>
-          <el-col :span="24">
-            <el-form-item :label=labels.currentTime>
-              <el-date-picker disabled="disabled" style="width: 145px;"
-                              v-model="pageData.reportedTime"
-                              format="yyyy-MM-dd HH:mm:ss"
-                              value-format="yyyy-MM-dd HH:mm:ss"
-                              placeholder="">
-              </el-date-picker>
-            </el-form-item>
-            <el-form-item class="customer-button">
-              <el-button class="customer-bun-min" type="primary" @click="refreshPageData" style="margin-left: 10px; margin-bottom: 5px;">
-              {{buttons.refreshButton}}</el-button>
-            </el-form-item>
-            <el-form-item class="customer-button">
-              <el-button  class="customer-bun-min" :disabled="buttonTags.finishRollFlag" type="primary" @click="finishRollBun" style="margin-left: 10px; margin-bottom: 5px;">
-              {{buttons.finishRoll}}</el-button>
-            </el-form-item>
-            <el-form-item class="customer-button">
-              <el-button  class="customer-bun-min" type="primary" @click="closeDialog" style="margin-left: 10px; margin-bottom: 5px;">
-              {{buttons.closeButton}}</el-button>
-            </el-form-item>
-            <el-form-item label=" ">
-              <el-button type="primary" @click="openAttendanceModal" style="margin-left: 10px">考勤修改</el-button>
-            </el-form-item>
-<!--            <el-button v-if="showDefault" @click="saveMultiLanguage()" type="primary">多语言设置</el-button>-->
+  <div class="customer-css produce-report">
+    <el-dialog :title="titleCon" v-drag v-bind="$attrs" v-on="$listeners" width="1050px" custom-class="machine-workbench-dialog">
+      <div class="dialog-content-container" style="height: 680px; overflow-y: auto; overflow-x: hidden;">
+        <!-- 顶部操作栏 -->
+        <div class="top-action-bar" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding: 0 5px;">
+          <div class="time-display" style="display: flex; align-items: center; gap: 10px;">
+            <span class="time-label" style="font-weight: 600; color: #303133;">{{labels.currentTime}}</span>
+            <el-date-picker disabled="disabled" style="width: 180px;"
+                            v-model="pageData.reportedTime"
+                            format="yyyy-MM-dd HH:mm:ss"
+                            value-format="yyyy-MM-dd HH:mm:ss">
+            </el-date-picker>
+          </div>
+          <div class="action-buttons" style="display: flex; gap: 10px;">
+            <el-button size="small" type="primary" icon="el-icon-refresh" @click="refreshPageData">{{buttons.refreshButton}}</el-button>
+            <el-button size="small" type="success" icon="el-icon-check" :disabled="buttonTags.finishRollFlag" @click="finishRollBun">{{buttons.finishRoll}}</el-button>
+            <el-button size="small" type="info" icon="el-icon-close" @click="closeDialog">{{buttons.closeButton}}</el-button>
+            <el-button size="small" type="warning" icon="el-icon-user" @click="openAttendanceModal">考勤修改</el-button>
+          </div>
+        </div>
+
+        <el-row :gutter="15">
+          <!-- 左侧：卷数量统计 & 卷生产时间统计 -->
+          <el-col :span="10">
+            <!-- 卷数量统计 -->
+            <div class="info-card">
+              <div class="card-title">
+                <i class="el-icon-pie-chart"></i>
+                <span>{{labels.rollQtySum}}</span>
+              </div>
+              <div class="card-content" style="padding-top: 10px;">
+                <el-row :gutter="10" class="info-row">
+                  <el-col :span="24" style="margin-bottom: 8px;">
+                    <el-checkbox disabled="disabled" true-label="Y" false-label="N" v-model="pageData.reportedFlag">{{labels.whetherReport}}</el-checkbox>
+                  </el-col>
+                  <el-col :span="12">
+                    <div class="info-item-modern">
+                      <label>{{labels.approvedQty}}</label>
+                      <el-input v-if="this.preItemNo<=0" v-model="pageData.approvedQty" @blur="checkValidApprovedQty" type="number" size="small" class="highlight-input"></el-input>
+                      <el-input v-if="this.preItemNo>0" disabled v-model="pageData.approvedQty" @blur="checkValidApprovedQty" type="number" size="small" class="highlight-input"></el-input>
+                    </div>
+                  </el-col>
+                  <el-col :span="12">
+                    <div class="info-item-modern">
+                      <label>{{labels.defectedQty}}</label>
+                      <el-input v-model="pageData.defectedQty" :disabled="showNumFlag" class="highlight-input" readonly="readonly" size="small"></el-input>
+                    </div>
+                  </el-col>
+                  <el-col :span="12" style="margin-top: 8px;">
+                    <div class="info-item-modern">
+                      <label>{{labels.totalQty}}</label>
+                      <el-input v-model="pageData.totalQty" class="highlight-input" readonly="readonly" size="small"></el-input>
+                    </div>
+                  </el-col>
+                  <el-col :span="12" style="margin-top: 8px;">
+                    <div class="info-item-modern">
+                      <label>{{labels.otherRollQty}}</label>
+                      <el-input v-model="pageData.otherRollQty" class="highlight-input" readonly="readonly" size="small"></el-input>
+                    </div>
+                  </el-col>
+                </el-row>
+              </div>
+            </div>
+
+            <!-- 卷生产时间统计 -->
+            <div class="info-card" style="margin-top: 15px;">
+              <div class="card-title">
+                <i class="el-icon-time"></i>
+                <span>{{labels.rollTimeSum}}</span>
+              </div>
+              <div class="card-content" style="padding-top: 10px;">
+                <el-row :gutter="10" class="info-row">
+                  <el-col :span="8">
+                    <div class="info-item-modern">
+                      <label>{{labels.totalTuningTime}}</label>
+                      <el-input v-model="pageData.totalSetupTime" class="highlight-input" readonly="readonly" size="small"></el-input>
+                    </div>
+                  </el-col>
+                  <el-col :span="8">
+                    <div class="info-item-modern">
+                      <label>{{labels.totalTuningDownTime}}</label>
+                      <el-input v-model="pageData.totalDowntimeTimeSetup" class="highlight-input" readonly="readonly" size="small"></el-input>
+                    </div>
+                  </el-col>
+                  <el-col :span="8">
+                    <div class="info-item-modern">
+                      <label>{{labels.totalPureTuningTime}}</label>
+                      <el-input v-model="pageData.totalPureSetupTime" class="highlight-input" readonly="readonly" size="small"></el-input>
+                    </div>
+                  </el-col>
+                </el-row>
+                <el-row :gutter="10" class="info-row" style="margin-top: 8px;">
+                  <el-col :span="8">
+                    <div class="info-item-modern">
+                      <label>{{labels.totalProdTime}}</label>
+                      <el-input v-model="pageData.totalProdTime" class="highlight-input" readonly="readonly" size="small"></el-input>
+                    </div>
+                  </el-col>
+                  <el-col :span="8">
+                    <div class="info-item-modern">
+                      <label>{{labels.totalProdDownTime}}</label>
+                      <el-input v-model="pageData.totalDowntimeTimeProd" class="highlight-input" readonly="readonly" size="small"></el-input>
+                    </div>
+                  </el-col>
+                  <el-col :span="8">
+                    <div class="info-item-modern">
+                      <label>{{labels.totalPureProdTime}}</label>
+                      <el-input v-model="pageData.totalPureProdTime" class="highlight-input" readonly="readonly" size="small"></el-input>
+                    </div>
+                  </el-col>
+                </el-row>
+                <el-row :gutter="10" class="info-row" style="margin-top: 8px;">
+                  <el-col :span="8">
+                    <div class="info-item-modern">
+                      <label>{{labels.totalManufTime}}</label>
+                      <el-input v-model="pageData.totalManufactureTime" class="highlight-input" readonly="readonly" size="small"></el-input>
+                    </div>
+                  </el-col>
+                  <el-col :span="8">
+                    <div class="info-item-modern">
+                      <label>{{labels.totalManufDownTime}}</label>
+                      <el-input v-model="pageData.totalManufactureDowntimeTime" class="highlight-input" readonly="readonly" size="small"></el-input>
+                    </div>
+                  </el-col>
+                  <el-col :span="8">
+                    <div class="info-item-modern">
+                      <label>{{labels.totalPureManufTime}}</label>
+                      <el-input v-model="pageData.totalPureManufactureTime" class="highlight-input" readonly="readonly" size="small"></el-input>
+                    </div>
+                  </el-col>
+                </el-row>
+              </div>
+            </div>
           </el-col>
-        </el-row>
-        <!--  卷数量统计 班次信息  -->
-        <el-form>
-          <fieldset class="customer-fieldset" style="width: 495px;">
-            <legend>{{labels.rollQtySum}}</legend>
-            <el-form-item class="customer-item">
-              <el-checkbox disabled="disabled" style="margin-top: 15px;" true-label="Y" false-label="N"
-                           v-model="pageData.reportedFlag">{{labels.whetherReport}}</el-checkbox>
-            </el-form-item>
-            <el-form-item class="customer-item" :label=labels.approvedQty style="margin-top: -10px;">
-              <!--<el-input v-model="pageData.approvedQty" type="number"  @blur="checkValidApprovedQty"-->
-              <el-input v-if="this.preItemNo<=0" v-model="pageData.approvedQty" @blur="checkValidApprovedQty" type="number" style="width: 80px;" ></el-input>
-              <el-input v-if="this.preItemNo>0"  disabled class="customer-input-color-red"  v-model="pageData.approvedQty" @blur="checkValidApprovedQty" type="number" style="width: 80px;" ></el-input>
-            </el-form-item>
-            <el-form-item class="customer-item" :label=labels.defectedQty style="margin-top: -10px;">
-              <el-input v-model="pageData.defectedQty" :disabled="showNumFlag" class="customer-input-color-red" readonly="readonly" style="width: 80px;"></el-input>
-            </el-form-item>
-            <el-form-item class="customer-item" :label=labels.totalQty style="margin-top: -10px;">
-              <el-input v-model="pageData.totalQty" class="customer-input-color-red" readonly="readonly" style="width: 80px;"></el-input>
-            </el-form-item>
-            <el-form-item class="customer-item" :label=labels.otherRollQty style="margin-top: -10px;">
-              <el-input v-model="pageData.otherRollQty" class="customer-input-color-red" readonly="readonly" style="width: 80px;"></el-input>
-            </el-form-item>
-          </fieldset>
-          <!-- 操作员信息和班次信息 -->
-          <fieldset class="customer-fieldset"
-                    style="margin-left: 500px; margin-top: -70px; width: 400px;">
-            <legend>{{labels.operatorScheduleInfo}}</legend>
-            <el-form-item class="customer-item" :label=labels.operatorId>
-              <el-input v-model="operatorData.operatorId" disabled="disabled" style="width: 80px;" ></el-input>
-            </el-form-item>
-            <el-form-item class="customer-item" :label=labels.operatorName>
-              <el-input v-model="operatorData.operatorName" class="customer-input-color-red" readonly="readonly" style="width: 80px;"></el-input>
-            </el-form-item>
-            <el-form-item class="customer-item" :label=labels.scheduledDate>
-              <el-input v-model="pageData.scheduledDate" disabled="disabled" style="width: 80px;" ></el-input>
-            </el-form-item>
-            <el-form-item class="customer-item" :label=labels.shiftNo>
-              <el-input v-model="pageData.shiftDesc" class="customer-input-color-red" readonly="readonly" style="width: 80px;"></el-input>
-            </el-form-item>
-            <el-button type="info" :disabled="buttonTags.selectShiftFlag" plain @click="selectSchduleShiftModal"
-                       style="margin-left: -10px; margin-top: 10px; height: 20px; padding: 3px 3px;">
-              <icon-svg name="ellipsis" style="height: 10px; width: 10px;" ></icon-svg>
-            </el-button>
-
-          </fieldset>
-        </el-form>
-        <!-- 卷生产时间统计产量报告 -->
-        <el-form style="margin-top: 5px;">
-            <fieldset class="customer-fieldset" style="width: 320px; margin-top: 0px;">
-              <legend>{{labels.rollTimeSum}}</legend>
-              <!-- 调机时间 -->
-              <el-row style="margin-top: 0px;">
-                <el-col :span="24">
-                  <el-form-item  :label=labels.totalTuningTime >
-                    <el-input v-model="pageData.totalSetupTime" class="customer-input-color-red" readonly="readonly" style="width: 80px;" ></el-input>
-                  </el-form-item>
-                  <el-form-item  :label=labels.totalTuningDownTime >
-                    <el-input v-model="pageData.totalDowntimeTimeSetup" class="customer-input-color-red" readonly="readonly" style="width: 100px;"></el-input>
-                  </el-form-item>
-                  <el-form-item  :label=labels.totalPureTuningTime >
-                    <el-input v-model="pageData.totalPureSetupTime" class="customer-input-color-red" readonly="readonly" style="width: 80px;"></el-input>
-                  </el-form-item>
-                </el-col>
-              </el-row>
-              <!-- 生产时间 -->
-              <el-row>
-                <el-col :span="24">
-                  <el-form-item  :label=labels.totalProdTime>
-                    <el-input v-model="pageData.totalProdTime" class="customer-input-color-red" readonly="readonly" style="width: 80px;"></el-input>
-                  </el-form-item>
-                  <el-form-item  :label=labels.totalProdDownTime>
-                    <el-input v-model="pageData.totalDowntimeTimeProd" class="customer-input-color-red" readonly="readonly" style="width: 100px;"></el-input>
-                  </el-form-item>
-                  <el-form-item  :label=labels.totalPureProdTime >
-                    <el-input v-model="pageData.totalPureProdTime" class="customer-input-color-red" readonly="readonly" style="width: 80px;"></el-input>
-                  </el-form-item>
-                </el-col>
-              </el-row>
-              <!-- 制造时间 -->
-              <el-row>
-                <el-col :span="24">
-                  <el-form-item  :label=labels.totalManufTime>
-                    <el-input v-model="pageData.totalManufactureTime" class="customer-input-color-red" readonly="readonly" style="width: 80px;"></el-input>
-                  </el-form-item>
-                  <el-form-item  :label=labels.totalManufDownTime>
-                    <el-input v-model="pageData.totalManufactureDowntimeTime" class="customer-input-color-red" readonly="readonly" style="width: 100px;"></el-input>
-                  </el-form-item>
-                  <el-form-item  :label=labels.totalPureManufTime>
-                    <el-input v-model="pageData.totalPureManufactureTime" class="customer-input-color-red" readonly="readonly" style="width: 80px;"></el-input>
-                  </el-form-item>
-                </el-col>
-              </el-row>
-            </fieldset>
+
+          <!-- 右侧：人员排程班次信息 & 产量报告 -->
+          <el-col :span="14">
+            <!-- 人员排程班次信息 -->
+            <div class="info-card">
+              <div class="card-title">
+                <i class="el-icon-user-solid"></i>
+                <span>{{labels.operatorScheduleInfo}}</span>
+              </div>
+              <div class="card-content" style="padding-top: 10px;">
+                <el-row :gutter="10" class="info-row">
+                  <el-col :span="6">
+                    <div class="info-item-modern">
+                      <label>{{labels.operatorId}}</label>
+                      <el-input v-model="operatorData.operatorId" disabled="disabled" size="small"></el-input>
+                    </div>
+                  </el-col>
+                  <el-col :span="6">
+                    <div class="info-item-modern">
+                      <label>{{labels.operatorName}}</label>
+                      <el-input v-model="operatorData.operatorName" class="highlight-input" readonly="readonly" size="small"></el-input>
+                    </div>
+                  </el-col>
+                  <el-col :span="6">
+                    <div class="info-item-modern">
+                      <label>{{labels.scheduledDate}}</label>
+                      <el-input v-model="pageData.scheduledDate" disabled="disabled" size="small"></el-input>
+                    </div>
+                  </el-col>
+                  <el-col :span="6">
+                    <div class="info-item-modern">
+                      <label>{{labels.shiftNo}}</label>
+                      <div style="display: flex; gap: 5px;">
+                        <el-input v-model="pageData.shiftDesc" class="highlight-input" readonly="readonly" size="small"></el-input>
+                        <el-button type="info" :disabled="buttonTags.selectShiftFlag" plain @click="selectSchduleShiftModal" size="small" style="padding: 0 8px;">
+                          <i class="el-icon-more"></i>
+                        </el-button>
+                      </div>
+                    </div>
+                  </el-col>
+                </el-row>
+              </div>
+            </div>
+
             <!-- 产量报告 -->
-            <fieldset class="customer-fieldset" style="margin-left: 325px; margin-top: -165px; width: 575px;">
-              <legend>{{ labels.produceReport }}</legend>
-              <!-- 开工时间 -->
-              <el-row>
-                <el-col :span="24">
-                  <el-form-item  :label=labels.startTime>
-                    <el-input v-model="pageData.eventTime" disabled="disabled" style="width: 130px;"></el-input>
-                  </el-form-item>
-                  <el-form-item  :label=labels.finishTime>
-                    <el-input v-model="pageData.tillTime" disabled="disabled" style="width: 130px;"></el-input>
-                  </el-form-item>
-                  <el-form-item  :label=labels.prodTime >
-                    <el-input v-model="pageData.sfdcProdTime" class="customer-input-color-red" readonly="readonly" style="width: 80px;"></el-input>
-                  </el-form-item>
-                  <el-form-item  :label=labels.tuningTime>
-                    <el-input v-model="pageData.sfdcSetupTime" class="customer-input-color-red" readonly="readonly" style="width: 80px;"></el-input>
-                  </el-form-item>
-                  <el-form-item  :label=labels.manufTime>
-                    <el-input v-model="pageData.sfdcManufactureTime" class="customer-input-color-red" readonly="readonly" style="width: 80px;"></el-input>
-                  </el-form-item>
-                </el-col>
-              </el-row>
-              <!-- 合格数量 -->
-              <el-row>
-                <el-col :span="24">
-                  <el-form-item  :label=labels.sfdcApprovedQty>
-                    <el-input v-model="pageData.sfdcApprovedQty" class="customer-input-color-red" readonly="readonly" style="width: 130px;"></el-input>
-                  </el-form-item>
-                  <el-form-item  :label=labels.sfdcDefectedQty>
-                    <el-input v-model="pageData.defectedQty" class="customer-input-color-red" readonly="readonly" style="width: 130px;"></el-input>
-                  </el-form-item>
-                  <el-form-item  :label=labels.sfdcReportedQty >
-                    <el-input v-model="pageData.sfdcReportedQty" class="customer-input-color-red" readonly="readonly" style="width: 80px;"></el-input>
-                  </el-form-item>
-                  <el-form-item  :label=labels.tuningDown>
-                    <el-input v-model="pageData.sfdcSetupDownTime" style="width: 80px;"></el-input>
-                  </el-form-item>
-                  <el-form-item  :label=labels.manufTuning >
-                    <el-input v-model="pageData.sfdcProdSetupTime" style="width: 80px;"></el-input>
-                  </el-form-item>
-                </el-col>
-              </el-row>
-              <!-- 备注 -->
-              <el-row>
-                <el-col :span="24">
-                  <el-form-item  :label=labels.remark>
-                    <el-input v-model="pageData.remark"  style="width: 430px;"></el-input>
-                  </el-form-item>
-                  <el-form-item  :label=labels.downTime>
-                    <el-input v-model="pageData.sfdcDownTime" style="width: 80px;"></el-input>
-                  </el-form-item>
-                </el-col>
-              </el-row>
-            </fieldset>
-        </el-form>
+            <div class="info-card" style="margin-top: 15px;">
+              <div class="card-title">
+                <i class="el-icon-s-data"></i>
+                <span>{{ labels.produceReport }}</span>
+              </div>
+              <div class="card-content" style="padding-top: 5px;">
+                <el-row :gutter="10" class="info-row">
+                  <el-col :span="8">
+                    <div class="info-item-modern">
+                      <label>{{labels.startTime}}</label>
+                      <el-input v-model="pageData.eventTime" disabled="disabled" size="small"></el-input>
+                    </div>
+                  </el-col>
+                  <el-col :span="8">
+                    <div class="info-item-modern">
+                      <label>{{labels.finishTime}}</label>
+                      <el-input v-model="pageData.tillTime" disabled="disabled" size="small"></el-input>
+                    </div>
+                  </el-col>
+                  <el-col :span="8">
+                    <div class="info-item-modern">
+                      <label>{{labels.prodTime}}</label>
+                      <el-input v-model="pageData.sfdcProdTime" class="highlight-input" readonly="readonly" size="small"></el-input>
+                    </div>
+                  </el-col>
+                </el-row>
+                <el-row :gutter="10" class="info-row" style="margin-top: 3px">
+                  <el-col :span="8">
+                    <div class="info-item-modern">
+                      <label>{{labels.tuningTime}}</label>
+                      <el-input v-model="pageData.sfdcSetupTime" class="highlight-input" readonly="readonly" size="small"></el-input>
+                    </div>
+                  </el-col>
+                  <el-col :span="8">
+                    <div class="info-item-modern">
+                      <label>{{labels.manufTime}}</label>
+                      <el-input v-model="pageData.sfdcManufactureTime" class="highlight-input" readonly="readonly" size="small"></el-input>
+                    </div>
+                  </el-col>
+                  <el-col :span="8">
+                    <div class="info-item-modern">
+                      <label>{{labels.sfdcApprovedQty}}</label>
+                      <el-input v-model="pageData.sfdcApprovedQty" class="highlight-input" readonly="readonly" size="small"></el-input>
+                    </div>
+                  </el-col>
+                </el-row>
+                <el-row :gutter="10" class="info-row" style="margin-top: 3px">
+                  <el-col :span="8">
+                    <div class="info-item-modern">
+                      <label>{{labels.sfdcDefectedQty}}</label>
+                      <el-input v-model="pageData.defectedQty" class="highlight-input" readonly="readonly" size="small"></el-input>
+                    </div>
+                  </el-col>
+                  <el-col :span="8">
+                    <div class="info-item-modern">
+                      <label>{{labels.sfdcReportedQty}}</label>
+                      <el-input v-model="pageData.sfdcReportedQty" class="highlight-input" readonly="readonly" size="small"></el-input>
+                    </div>
+                  </el-col>
+                  <el-col :span="8">
+                    <div class="info-item-modern">
+                      <label>{{labels.tuningDown}}</label>
+                      <el-input v-model="pageData.sfdcSetupDownTime" size="small"></el-input>
+                    </div>
+                  </el-col>
+                </el-row>
+                <el-row :gutter="10" class="info-row" style="margin-top: 3px">
+                  <el-col :span="8">
+                    <div class="info-item-modern">
+                      <label>{{labels.manufTuning}}</label>
+                      <el-input v-model="pageData.sfdcProdSetupTime" size="small"></el-input>
+                    </div>
+                  </el-col>
+                  <el-col :span="8">
+                    <div class="info-item-modern">
+                      <label>{{labels.downTime}}</label>
+                      <el-input v-model="pageData.sfdcDownTime" size="small"></el-input>
+                    </div>
+                  </el-col>
+                  <el-col :span="8">
+                    <div class="info-item-modern">
+                      <label>{{labels.remark}}</label>
+                      <el-input v-model="pageData.remark" size="small"></el-input>
+                    </div>
+                  </el-col>
+                </el-row>
+                <el-row :gutter="10" class="info-row" style="margin-top: 3px">
+                  <el-col :span="24">
+                    <div class="info-item-modern">
+                      <label>{{labels.remark}}</label>
+                      <el-input v-model="pageData.remark" size="small"></el-input>
+                    </div>
+                  </el-col>
+                </el-row>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+
         <!-- 主材料 -->
-        <el-form>
-          <fieldset class="customer-fieldset" style="width: 898px; min-width: 0;">
-            <legend>{{labels.primaryMaterial}}</legend>
+        <div class="info-card" style="margin-top: 15px;">
+          <div class="card-title">
+            <i class="el-icon-box"></i>
+            <span>{{labels.primaryMaterial}}</span>
+          </div>
+          <div class="card-content" style="padding-top: 10px;">
             <el-table
-              height="180"
+              height="250"
               :data="sfdcMaterialList"
               border
               v-loading="dataListLoading"
-              style="width: 100%; margin-top: -5px;">
+              style="width: 100%; border-radius: 4px;">
               <el-table-column
                 v-for="(item,index) in columnMaterialArray" :key="index"
                 :sortable="item.columnSortable"
@@ -201,9 +301,8 @@
                 :min-width="item.columnWidth"
                 :label="item.columnLabel">
                 <template slot-scope="scope">
-                  <!--<el-input type="number" class="table-input" align="right" @blur="checkValidQty(scope.row)"-->
                   <el-input type="number" class="table-input" align="right" v-if="item.columnHidden"
-                            v-model="scope.row[item.columnProp]"></el-input>
+                            v-model="scope.row[item.columnProp]" size="small"></el-input>
                   <span v-else>{{scope.row[item.columnProp]}}</span>
                   <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]"
                                                      style="width: 100px; height: 80px"/></span>
@@ -216,15 +315,13 @@
                 width="80"
                 label="操作">
                 <template slot-scope="scope">
-                  <el-link style="cursor: pointer" @click="editMaterialRow(scope.row)">编辑</el-link>
+                  <el-link type="primary" style="font-size: 13px;" @click="editMaterialRow(scope.row)">编辑</el-link>
                 </template>
               </el-table-column>
             </el-table>
-          </fieldset>
-        </el-form>
-      </el-form>
-
-
+          </div>
+        </div>
+      </div>
     </el-dialog>
 
     <!-- 编辑材料行对话框 -->
@@ -610,7 +707,7 @@ export default {
           columnProp: "sAPBOMItemNo",
           headerAlign: "center",
           align: "center",
-          columnLabel: "SAP BOM序号",
+          columnLabel: "BOM序号",
           columnWidth: 100,
           columnHidden: false,
           columnImage: false,
@@ -1521,52 +1618,97 @@ export default {
 </script>
 
 <style scoped lang="scss">
-/*调节页面button和input的上下间距*/
-.customer-css .customer-button{
-  margin-top: 25px;
+/* ==================== 机台工作台对话框现代化样式 ==================== */
+.machine-workbench-dialog /deep/ .el-dialog__header {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 20px 24px;
+  border-radius: 8px 8px 0 0;
 }
 
-/*调节样式*/
-.customer-item{
-  margin-top: -10px;
+.machine-workbench-dialog /deep/ .el-dialog__title {
+  color: #ffffff;
+  font-size: 18px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
 }
-/*fieldset下table的样式*/
-.customer-fieldset /deep/ .el-table__header th.is-leaf{
-  line-height: 16px;
+
+.machine-workbench-dialog /deep/ .el-dialog__headerbtn .el-dialog__close {
+  color: #ffffff;
+  font-size: 20px;
+}
+
+.machine-workbench-dialog /deep/ .el-dialog__body {
+  padding: 16px;
+  background: #f5f7fa;
 }
 
-/deep/ .customer-tab .el-tabs__content{
-  padding: 0px !important;
+/* 订单信息卡片 */
+.info-card {
+  background: #ffffff;
+  border-radius: 8px;
+  padding: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  border: 1px solid #e8eaed;
+  transition: all 0.3s ease;
 }
 
-/*table中input*/
-div.table-input /deep/ input.el-input__inner{
-  text-align: right;
+.info-card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  border-color: #d0d4d9;
 }
 
-/*当前按钮的通用样式*/
-.customer-css .customer-bun-mid{
-  width: 65px;
-  text-align: center;
+.card-title {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0px;
+  padding-bottom: 2px;
+  border-bottom: 2px solid #e8eaed;
+  font-size: 14px;
+  font-weight: 600;
+  color: #303133;
 }
 
-.customer-css .customer-bun-min{
-  width: 50px;
-  text-align: center;
+.card-title i {
+  font-size: 18px;
+  margin-right: 8px;
+  color: #667eea;
 }
 
-.customer-css .customer-bun-max{
-  width: 80px;
-  text-align: center;
+.info-row {
+  margin-bottom: 0px !important;
 }
-/*当前按钮的通用样式*/
-.customer-css .el-button--medium {
-  padding: 5px 5px;
+
+.info-row:last-child {
+  margin-bottom: 0 !important;
 }
 
-/*统一的input内容颜色样式*/
-.customer-input-color-red /deep/ .el-input__inner {
-  color: red;
+.info-item-modern {
+  margin-bottom: 0;
+}
+
+.info-item-modern label {
+  display: block;
+  margin-bottom: 0px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #606266;
+}
+
+.info-item-modern /deep/ .el-input--small .el-input__inner {
+  border-radius: 4px;
+  background-color: #f5f7fa;
+  border: 1px solid #e4e7ed;
+  color: #606266;
+}
+
+.info-item-modern /deep/ .el-checkbox {
+  font-weight: 500;
+  color: #606266;
+}
+
+.highlight-input /deep/ .el-input__inner {
+  color: #f56c6c !important;
+  font-weight: 600;
 }
 
 /* 编辑材料对话框样式 - 参考合并卷 */
@@ -1579,7 +1721,7 @@ div.table-input /deep/ input.el-input__inner{
     .el-dialog__header {
       background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
       padding: 15px 20px;
-      
+
       .el-dialog__title {
         color: white;
         font-weight: 600;
@@ -1743,5 +1885,4 @@ div.table-input /deep/ input.el-input__inner{
     }
   }
 }
-
 </style>