修改包装报工的数据问题

src/views/produce/components/jobBooking/components/batchPackagingGrouping.vue

@@ -185,10 +185,27 @@
                     <span>{{ row.packageQuantity }}{{ row.packingUnit }}</span>
                   </template>
 
-                  <template v-slot:packageDisposition="{ row, $index }">
-                    <el-tag v-if="row.extInfo.packageDisposition">{{
-                      row.extInfo.packageDisposition
-                    }}</el-tag>
+                  <template v-slot:packageDisposition="{ row }">
+                    <el-tag
+                      v-if="
+                        formatPackageDispositionText(
+                          row.extInfo && row.extInfo.packageDisposition
+                        )
+                      "
+                      class="package-disposition-tag"
+                      size="small"
+                      :title="
+                        formatPackageDispositionText(
+                          row.extInfo && row.extInfo.packageDisposition
+                        )
+                      "
+                    >
+                      {{
+                        formatPackageDispositionText(
+                          row.extInfo && row.extInfo.packageDisposition
+                        )
+                      }}
+                    </el-tag>
                   </template>
                 </ele-pro-table>
 
@@ -386,8 +403,15 @@
                 <span>{{ row.packageQuantity }}{{ row.packingUnit }}</span>
               </template>
 
-              <template v-slot:packageDisposition="{ row, $index }">
-                <el-tag>{{ packageDispositionData }}</el-tag>
+              <template v-slot:packageDisposition>
+                <el-tag
+                  v-if="formatPackageDispositionText(packageDispositionData)"
+                  class="package-disposition-tag"
+                  size="small"
+                  :title="formatPackageDispositionText(packageDispositionData)"
+                >
+                  {{ formatPackageDispositionText(packageDispositionData) }}
+                </el-tag>
               </template>
             </ele-pro-table>
           </div>
@@ -1059,6 +1083,77 @@
         return (num.toString().split('.')[1] || '').length;
       },
 
+      getManualUnpackReportData() {
+        const list = Array.isArray(this.newDataList) ? this.newDataList : [];
+        const confirmedList = list.filter((item) => item && item.confirm == 1);
+
+        if (!confirmedList.length) {
+          return {
+            list,
+            totalQuantity: this.formedNumLast
+          };
+        }
+
+        return {
+          list: confirmedList,
+          totalQuantity: this.sumFeedQuantity(confirmedList)
+        };
+      },
+
+      sumFeedQuantity(list) {
+        return list.reduce((acc, item) => {
+          const quantity = Number(item && item.feedQuantity);
+
+          return Number.isNaN(quantity) ? acc : this.add(acc, quantity);
+        }, 0);
+      },
+
+      formatPackageDispositionText(value) {
+        return String(value || '')
+          .split('/')
+          .map((item) => item.trim())
+          .filter(Boolean)
+          .join('/');
+      },
+
+      buildPackageDispositionText() {
+        return [
+          this.buildPackageDispositionPart(
+            this.formedNumLast,
+            this.packageUnit
+          ),
+          this.buildPackageDispositionPart(
+            this.packageCell,
+            this.conversionUnit
+          ),
+          this.buildPackageDispositionPart(
+            this.packageOneCell,
+            this.conversionOneUnit
+          ),
+          this.buildPackageDispositionPart(
+            this.packageTwoCell,
+            this.conversionTwoUnit
+          )
+        ]
+          .filter(Boolean)
+          .join('/');
+      },
+
+      buildPackageDispositionPart(quantity, unit) {
+        const quantityText = this.normalizePackageDispositionValue(quantity);
+        const unitText = this.normalizePackageDispositionValue(unit);
+
+        if (!quantityText && !unitText) {
+          return '';
+        }
+
+        return `${quantityText}${unitText}`;
+      },
+
+      normalizePackageDispositionValue(value) {
+        return value === 0 || value ? String(value).trim() : '';
+      },
+
       checkUnpack() {
         this.$confirm('此操作将进行拆包, 是否继续?', '提示', {
           confirmButtonText: '确定',
@@ -1134,13 +1229,15 @@
       handleSplit1(v) {
         console.log(v, 99655);
 
+        const manualUnpackReport = this.getManualUnpackReportData();
+
         if (this.splitList.length) {
           this.$message.error('产品已分包');
 
           return false;
         }
 
-        if (!this.formedNumLast) {
+        if (!manualUnpackReport.totalQuantity) {
           this.$message.error('包装总数数量不能为空');
 
           return false;
@@ -1158,14 +1255,15 @@
           return false;
         }
 
-        this.packageCell = this.formedNumLast;
+        this.formedNumLast = manualUnpackReport.totalQuantity;
+        this.packageCell = manualUnpackReport.totalQuantity;
         this.packageUnit = v.packageUnit;
 
         let param = {
           workOrderId: this.workOrderId, //工单id
           taskId: this.taskId,
           tier: '',
-          totalQuantity: this.formedNumLast, //总数量
+          totalQuantity: manualUnpackReport.totalQuantity, //总数量
           quantity: String(v.packageCell).trim(), //数量
           unit: v.packageUnit, //单位
           minimumUnit: this.minimumUnit, //最小包装单位
@@ -1175,7 +1273,7 @@
           outsideUnit: this.outsideUnit, //外包装单位
           packageUnit: v.conversionUnit,
           isNewUnpack: this.isNewUnpack,
-          semiProductList: this.newDataList
+          semiProductList: manualUnpackReport.list
         };
 
         getPackingList(param).then((res) => {
@@ -1245,7 +1343,7 @@
                 : '';
             }
           });
-          this.packageDispositionData = `${this.formedNumLast}${this.packageUnit}/${this.packageCell}${this.conversionUnit}/${this.packageOneCell}${this.conversionOneUnit}/${this.packageTwoCell}${this.conversionTwoUnit}`;
+          this.packageDispositionData = this.buildPackageDispositionText();
           this.newDispositionList.forEach((item, index) => {
             if (item.splitList.length != 0) {
               item.splitList[0].extInfo.packageDisposition =
@@ -1337,7 +1435,7 @@
                     : '';
                 }
               });
-              this.packageDispositionData = `${this.formedNumLast}${this.packageUnit}/${this.packageCell}${this.conversionUnit}/${this.packageOneCell}${this.conversionOneUnit}/${this.packageTwoCell}${this.conversionTwoUnit}`;
+              this.packageDispositionData = this.buildPackageDispositionText();
 
               this.DispositionList.forEach((item, index) => {
                 if (item.splitList.length != 0) {
@@ -1719,6 +1817,18 @@
     width: 200px;
   }
 
+  .package-disposition-tag {
+    display: inline-block;
+    max-width: 100%;
+    height: 24px;
+    line-height: 22px;
+    padding: 0 8px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle;
+  }
+
   .title_box {
     margin-top: 20rpx;
 

src/views/produce/components/picking/newWokePopup.vue

@@ -3,7 +3,7 @@
     <!-- 内容区 -->
     <div class="page-body">
       <ele-pro-table
-        height="calc(80vh - 160px)"
+        height="calc(80vh - 230px)"
         ref="fileTable"
         :columns="jobColumns1"
         :datasource="workList"

src/views/produce/components/qualityInspection/components/selfInspectionRequest.vue

@@ -10,17 +10,19 @@
     custom-class="ele-dialog-form"
     width="90vw"
   > -->
-  <div class="report-page" v-if="visible">
+  <div class="report-page self-request-page" v-if="visible">
     <el-form
+      class="request-form"
       ref="form"
       :model="form"
       :rules="rules"
       label-position="right"
       label-width="110px"
     >
-      <headerTitle style="margin-top: 15px" title="请托信息" />
-      <el-row :gutter="10" class="basic">
-        <el-col :lg="8" :md="12" :sm="12" :xl="8" :xs="12">
+      <section class="request-section request-basic-section">
+        <headerTitle class="request-section-title" title="请托信息" size="17px" />
+        <el-row :gutter="20" class="basic request-basic-grid">
+          <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24">
           <el-form-item label="请托单号：">
             <el-input
               v-model="form.order"
@@ -30,13 +32,13 @@
           </el-form-item>
         </el-col>
 
-        <el-col :lg="8" :md="12" :sm="12" :xl="8" :xs="12">
+          <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24">
           <el-form-item label="请托名称：" prop="name">
             <el-input v-model="form.name"></el-input>
           </el-form-item>
         </el-col>
 
-        <el-col :lg="8" :md="12" :sm="12" :xl="8" :xs="12">
+          <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24">
           <el-form-item label="执行部门：" prop="beEntrustedDeptId">
             <deptSelect
               ref="deptSelect"
@@ -46,7 +48,7 @@
           </el-form-item>
         </el-col>
 
-        <el-col :lg="8" :md="12" :sm="12" :xl="8" :xs="12">
+          <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24">
           <el-form-item label="执行人员：">
             <el-select
               style="width: 100%"
@@ -66,7 +68,7 @@
           </el-form-item>
         </el-col>
 
-        <el-col :lg="8" :md="12" :sm="12" :xl="8" :xs="12">
+          <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24">
           <el-form-item label="要求完成日期:" prop="endDate">
             <el-date-picker
               style="width: 100%"
@@ -80,7 +82,7 @@
           </el-form-item>
         </el-col>
 
-        <el-col :lg="8" :md="12" :sm="12" :xl="8" :xs="12">
+          <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24">
           <el-form-item label="紧急程度：" prop="priority">
             <el-select
               style="width: 100%"
@@ -98,117 +100,131 @@
             </el-select>
           </el-form-item>
         </el-col>
-      </el-row>
-
-      <headerTitle style="margin-top: 15px" title="检查项信息" />
-      <ele-pro-table
-        ref="table"
-        row-key="id"
-        :columns="columns"
-        :datasource="list"
-        cache-key="mes-selfInspectionRequest-20251201"
-        :need-page="false"
-        :fit="false"
-        @refresh="getData"
-        :selection.sync="selection"
-        style="width: 100%"
-      >
-        <template v-slot:toolbar>
-          <el-button
-            type="primary"
-            @click="addInspection"
-            v-if="
-              ((list.length == 0 && clientEnvironmentId != 9) ||
-                clientEnvironmentId == 9) &&
-              $hasPermission('mes:firstarticledualinspectionitem:choose')
-            "
-            >选择质检方案</el-button
+        </el-row>
+      </section>
+
+      <section class="request-section request-table-section">
+        <headerTitle class="request-section-title" title="检查项信息" size="17px" />
+        <div class="request-table-wrap">
+          <ele-pro-table
+            ref="table"
+            row-key="id"
+            :columns="columns"
+            :datasource="list"
+            cache-key="mes-selfInspectionRequest-20251201"
+            :need-page="false"
+            :fit="false"
+            @refresh="getData"
+            :selection.sync="selection"
+            height="calc(80vh - 450px)"
+            style="width: 100%"
           >
-        </template>
-
-        <template v-slot:status="{ row }">
-          <el-tag v-if="row.status == 0">待自检</el-tag>
-          <el-tag v-if="row.status == 1">请托中</el-tag>
-          <el-tag v-if="row.status == 2">待专检</el-tag>
-          <el-tag v-if="row.status == 3">已完成</el-tag>
-        </template>
-
-        <template v-slot:toolList="{ row }">
-          <div v-if="row.toolList && row.toolList.length != 0">
-            <div v-for="item in row.toolList" :key="item.name">
-              {{ item.name }}
-            </div>
-          </div>
-        </template>
-
-        <template v-slot:havePleaseEntrust="{ row }">
-          <el-tag v-if="row.havePleaseEntrust == 1">是</el-tag>
-          <el-tag v-else>否</el-tag>
-        </template>
-
-        <template v-slot:defaultValue="{ row }">
-          <div
-            style="width: 100%; display: flex; align-items: center; gap: 8px"
-          >
-            <div style="width: 20%; min-width: 90px; flex-shrink: 0">
-              <DictSelection
-                clearable
-                dictName="数学字符"
-                value-name="dictValue"
-                :disabled="!isAdd"
-                v-model="row.symbol"
-                style="width: 100%"
-              ></DictSelection>
-            </div>
-            <!-- 上下限 -->
-            <div
-              v-if="row.textType == 3"
-              style="
-                display: flex;
-                align-items: center;
-                gap: 8px;
-                flex: 1;
-                min-width: 0;
-              "
-            >
-              <el-input
-                style="flex: 1; min-width: 0"
-                v-model="row.minValue"
-                :disabled="!isAdd"
-              ></el-input>
-              <span>-</span>
-
-              <el-input
-                style="flex: 1; min-width: 0"
-                v-model="row.maxValue"
-                :disabled="!isAdd"
-              ></el-input>
-            </div>
-
-            <div v-else style="flex: 1; min-width: 0">
-              <el-input
-                v-model="row.defaultValue"
-                placeholder="请输入"
-                :disabled="!isAdd"
-              >
-              </el-input>
-            </div>
-
-            <div style="width: 20%; min-width: 90px; flex-shrink: 0">
-              <DictSelection
-                dictName="工艺参数单位"
-                value-name="dictValue"
-                clearable
-                filterable
-                :disabled="!isAdd"
-                v-model="row.unitName"
-                style="width: 100%"
+            <template v-slot:toolbar>
+              <el-button
+                type="primary"
+                @click="addInspection"
+                v-if="
+                  ((list.length == 0 && clientEnvironmentId != 9) ||
+                    clientEnvironmentId == 9) &&
+                  $hasPermission('mes:firstarticledualinspectionitem:choose')
+                "
+                >选择质检方案</el-button
               >
-              </DictSelection>
-            </div>
-          </div>
-        </template>
-      </ele-pro-table>
+            </template>
+
+            <template v-slot:status="{ row }">
+              <el-tag v-if="row.status == 0">待自检</el-tag>
+              <el-tag v-if="row.status == 1">请托中</el-tag>
+              <el-tag v-if="row.status == 2">待专检</el-tag>
+              <el-tag v-if="row.status == 3">已完成</el-tag>
+            </template>
+
+            <template v-slot:toolList="{ row }">
+              <div v-if="row.toolList && row.toolList.length != 0">
+                <div v-for="item in row.toolList" :key="item.name">
+                  {{ item.name }}
+                </div>
+              </div>
+            </template>
+
+            <template v-slot:havePleaseEntrust="{ row }">
+              <el-tag v-if="row.havePleaseEntrust == 1">是</el-tag>
+              <el-tag v-else>否</el-tag>
+            </template>
+
+            <template v-slot:defaultValue="{ row }">
+              <div class="request-param-cell">
+                <div class="request-param-symbol">
+                  <DictSelection
+                    clearable
+                    dictName="数学字符"
+                    value-name="dictValue"
+                    :disabled="!isAdd"
+                    v-model="row.symbol"
+                    style="width: 100%"
+                  ></DictSelection>
+                </div>
+                <!-- 上下限 -->
+                <div v-if="row.textType == 3" class="request-param-range">
+                  <el-input
+                    v-model="row.minValue"
+                    :disabled="!isAdd"
+                  ></el-input>
+                  <span class="request-param-separator">-</span>
+
+                  <el-input
+                    v-model="row.maxValue"
+                    :disabled="!isAdd"
+                  ></el-input>
+                </div>
+
+                <div
+                  v-else-if="row.textType == 8"
+                  class="request-param-tolerance"
+                >
+                  <el-input
+                    v-model="row.defaultValue"
+                    :disabled="!isAdd"
+                  ></el-input>
+                  <span class="request-param-separator">(</span>
+                  <el-input
+                    v-model="row.minValue"
+                    :disabled="!isAdd"
+                  ></el-input>
+                  <span class="request-param-separator">/</span>
+                  <el-input
+                    v-model="row.maxValue"
+                    :disabled="!isAdd"
+                  ></el-input>
+                  <span class="request-param-separator">)</span>
+                </div>
+
+                <div v-else class="request-param-value">
+                  <el-input
+                    v-model="row.defaultValue"
+                    placeholder="请输入"
+                    :disabled="!isAdd"
+                  >
+                  </el-input>
+                </div>
+
+                <div class="request-param-unit">
+                  <DictSelection
+                    dictName="工艺参数单位"
+                    value-name="dictValue"
+                    clearable
+                    filterable
+                    :disabled="!isAdd"
+                    v-model="row.unitName"
+                    style="width: 100%"
+                  >
+                  </DictSelection>
+                </div>
+              </div>
+            </template>
+          </ele-pro-table>
+        </div>
+      </section>
     </el-form>
 
     <!-- <span slot="footer" class="dialog-footer">
@@ -319,21 +335,21 @@
             label: '质检名称',
             showOverflowTooltip: true,
             align: 'center',
-            minWidth: 110
+            minWidth: 150
           },
           {
             prop: 'defaultValue',
             slot: 'defaultValue',
             align: 'center',
             label: '工艺参数',
-            minWidth: 380
+            minWidth: 560
           },
           {
             prop: 'toolList',
             slot: 'toolList',
             align: 'center',
             label: '工具名称',
-            minWidth: 150
+            minWidth: 180
           },
           {
             prop: 'havePleaseEntrust',
@@ -495,18 +511,203 @@
     display: flex;
     flex-direction: column;
     min-height: 0;
+    background: #f5f7fa;
   }
 
   .report-page .el-form {
     flex: 1;
-    overflow: auto;
     min-height: 0;
   }
 
+  .request-form {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 12px;
+    overflow: hidden;
+  }
+
+  .request-section {
+    background: #fff;
+    border: 1px solid #e7ebf0;
+    border-radius: 6px;
+    overflow: hidden;
+  }
+
+  .request-basic-section {
+    flex-shrink: 0;
+  }
+
+  .request-table-section {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .request-basic-grid {
+    padding: 16px 24px 2px;
+  }
+
+  .request-table-wrap {
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  .request-section-title {
+    margin: 0;
+    background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
+    border-bottom: 1px solid #e9edf3;
+  }
+
+  .request-section-title ::v-deep .title {
+    height: 46px;
+    align-items: center;
+    margin-bottom: 0;
+    padding: 0 18px;
+  }
+
+  .request-section-title ::v-deep .title .left {
+    align-items: center;
+  }
+
+  .request-section-title ::v-deep .box {
+    width: 4px;
+    height: 16px;
+    margin-right: 10px;
+    border-radius: 2px;
+  }
+
+  .request-section-title ::v-deep span {
+    color: #0f5132;
+    font-weight: 600;
+    line-height: 1;
+  }
+
+  .request-section-title ::v-deep > .ele-bg-primary {
+    display: none;
+  }
+
+  .self-request-page ::v-deep .el-form-item {
+    margin-bottom: 14px;
+  }
+
+  .self-request-page ::v-deep .el-form-item__label {
+    color: #4b5563;
+    font-weight: 500;
+  }
+
+  .self-request-page ::v-deep .el-input__inner {
+    height: 36px;
+    border-radius: 4px;
+  }
+
+  .self-request-page ::v-deep .el-date-editor .el-input__inner {
+    padding-left: 34px;
+  }
+
+  .self-request-page ::v-deep .ele-pro-table-toolbar {
+    min-height: 44px;
+    padding: 7px 12px;
+    border-bottom: 1px solid #edf0f5;
+    background: #fbfcfd;
+  }
+
+  .self-request-page ::v-deep .el-table {
+    color: #334155;
+    border-color: #edf0f5;
+  }
+
+  .self-request-page ::v-deep .el-table th.el-table__cell {
+    height: 42px;
+    background: #f7f9fb;
+    color: #1f2937;
+    font-weight: 600;
+  }
+
+  .self-request-page ::v-deep .el-table--medium .el-table__cell {
+    padding: 7px 0;
+  }
+
+  .self-request-page ::v-deep .el-table__body-wrapper {
+    overflow-x: auto;
+  }
+
+  .self-request-page ::v-deep .el-table td.el-table__cell {
+    border-bottom-color: #edf0f5;
+  }
+
+  .self-request-page ::v-deep .el-table__body tr:hover > td {
+    background: #f4fbf7;
+  }
+
+  .request-param-cell {
+    width: 100%;
+    min-width: 520px;
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    gap: 8px;
+    white-space: nowrap;
+  }
+
+  .request-param-symbol,
+  .request-param-unit {
+    width: 112px;
+    flex-shrink: 0;
+  }
+
+  .request-param-range,
+  .request-param-tolerance,
+  .request-param-value {
+    flex: 1;
+    min-width: 190px;
+  }
+
+  .request-param-range {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .request-param-tolerance {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .request-param-range ::v-deep .el-input {
+    flex: 1;
+    min-width: 90px;
+  }
+
+  .request-param-tolerance ::v-deep .el-input {
+    flex: 1;
+    min-width: 58px;
+  }
+
+  .request-param-separator {
+    color: #64748b;
+  }
+
+  .request-param-cell ::v-deep .el-input__inner {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   .dialog-footer {
-    padding: 10px 0;
-    border-top: 1px solid #eee;
+    flex-shrink: 0;
+    padding: 10px 14px;
+    border-top: 1px solid #e7ebf0;
     text-align: right;
     background: #fff;
+    box-shadow: 0 -4px 12px rgba(23, 35, 61, 0.04);
+  }
+
+  .dialog-footer .el-button {
+    min-width: 72px;
+    border-radius: 4px;
   }
 </style>

src/views/produce/components/qualityInspection/index.vue

@@ -9,10 +9,10 @@
     :close-on-click-modal="false"
     :close-on-press-escape="false"
   >
-    <div class="two-layout">
-      <el-row :gutter="10" class="full-row">
+    <div class="two-layout quality-inspection-layout">
+      <el-row :gutter="16" class="full-row">
         <el-col :span="12" class="full-col">
-          <div class="pane">
+          <div class="pane pane-left">
             <div class="pane-title">首件两检</div>
             <div
               v-show="leftMode === 'list'"
@@ -26,9 +26,9 @@
                 :datasource="list"
                 cache-key="mes-ruleRecordsList-20260208-1"
                 autoAmendPage
-                :need-page="false"
+                :need-page="true"
                 @refresh="getData"
-                height="calc(80vh - 160px)"
+                height="calc(80vh - 230px)"
               >
                 <template v-slot:selfCheck="{ row }">
                   <el-button
@@ -100,10 +100,12 @@
         </el-col>
 
         <el-col :span="12" class="full-col">
-          <div class="pane">
+          <div class="pane pane-right">
             <div class="pane-title">工艺文件</div>
 
-            <wokePopup ref="wokePopupRef"></wokePopup>
+            <div class="file-pane-body">
+              <wokePopup ref="wokePopupRef"></wokePopup>
+            </div>
           </div>
         </el-col>
       </el-row>
@@ -363,48 +365,127 @@
     height: 80vh;
     display: flex;
     flex-direction: column;
+    padding: 6px 12px 14px;
+    background: #f5f7fa;
   }
 
   .full-row {
     flex: 1;
     height: 100%;
+    min-height: 0;
   }
 
   .full-col {
     height: 100%;
+    min-height: 0;
   }
 
   .pane {
     height: 100%;
     background: #fff;
-    border-radius: 4px;
-    padding: 10px;
-
+    border: 1px solid #e6ebf1;
+    border-radius: 6px;
+    box-shadow: 0 6px 18px rgba(23, 35, 61, 0.06);
     display: flex;
     flex-direction: column;
     min-height: 0;
+    overflow: hidden;
   }
 
-  // .step-list {
-  //   height: 60vh;
-  //   display: flex;
-  //   flex-direction: column;
-  // }
-
-  /* 表格父级 */
-  .table-wrapper {
+  .fill-box,
+  .file-pane-body {
     flex: 1;
     min-height: 0;
-    display: flex;
+    overflow: hidden;
   }
 
   .pane-title {
-    font-size: 16px;
-    font-weight: 600;
-    color: #03541c;
-    padding-bottom: 10px;
-    margin-bottom: 10px;
-    border-bottom: 1px solid #ebeef5;
+    position: relative;
     flex-shrink: 0;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    padding: 0 18px 0 32px;
+    margin: 0;
+    border-bottom: 1px solid #e9edf3;
+    background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
+    color: #0f5132;
+    font-size: 15px;
+    font-weight: 600;
+    line-height: 1;
+  }
+
+  .pane-title::before {
+    content: '';
+    position: absolute;
+    left: 18px;
+    top: 50%;
+    width: 4px;
+    height: 16px;
+    border-radius: 2px;
+    background: #16a34a;
+    transform: translateY(-50%);
+  }
+
+  .quality-inspection-layout ::v-deep .ele-pro-table,
+  .quality-inspection-layout ::v-deep .right-page,
+  .quality-inspection-layout ::v-deep .page-body {
+    height: 100%;
+  }
+
+  .quality-inspection-layout ::v-deep .ele-pro-table {
+    background: #fff;
+  }
+
+  .quality-inspection-layout ::v-deep .ele-pro-table-toolbar {
+    min-height: 42px;
+    padding: 6px 12px;
+    border-bottom: 1px solid #edf0f5;
+    background: #fbfcfd;
+  }
+
+  .quality-inspection-layout ::v-deep .el-table {
+    color: #4b5563;
+    border-color: #edf0f5;
+  }
+
+  .quality-inspection-layout ::v-deep .el-table th.el-table__cell {
+    height: 40px;
+    background: #f7f9fb;
+    color: #1f2937;
+    font-weight: 600;
+  }
+
+  .quality-inspection-layout ::v-deep .el-table--medium .el-table__cell {
+    padding: 7px 0;
+  }
+
+  .quality-inspection-layout ::v-deep .el-table td.el-table__cell {
+    border-bottom-color: #edf0f5;
+  }
+
+  .quality-inspection-layout ::v-deep .el-table__body tr:hover > td {
+    background: #f4fbf7;
+  }
+
+  .quality-inspection-layout ::v-deep .el-button--medium {
+    padding: 8px 12px;
+    border-radius: 4px;
+  }
+
+  .quality-inspection-layout ::v-deep .el-button + .el-button {
+    margin-left: 6px;
+  }
+
+  .quality-inspection-layout ::v-deep .el-tag {
+    border-radius: 4px;
+  }
+
+  .quality-inspection-layout ::v-deep .el-pagination {
+    padding: 14px 0 4px;
+  }
+
+  .quality-inspection-layout ::v-deep .el-table__fixed-right {
+    box-shadow: -4px 0 10px rgba(31, 41, 55, 0.08);
   }
 </style>