From 7ecc0fca61e76f732082495c7b9c9cc2c96dc752 Mon Sep 17 00:00:00 2001
From: fengyuan_yang <1976974459@qq.com>
Date: Wed, 29 Oct 2025 13:49:06 +0800
Subject: [PATCH] =?UTF-8?q?2025-10-29=20=E8=BF=87=E7=AB=99=E9=87=87?=
 =?UTF-8?q?=E9=9B=86=E5=88=9B=E5=BB=BA=E5=88=86=E5=8D=B7=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/yieldReport/com_separate_roll.vue | 277 +++++++++++++++++-
 1 file changed, 262 insertions(+), 15 deletions(-)

diff --git a/src/views/modules/yieldReport/com_separate_roll.vue b/src/views/modules/yieldReport/com_separate_roll.vue
index 1d33729..f0c3852 100644
--- a/src/views/modules/yieldReport/com_separate_roll.vue
+++ b/src/views/modules/yieldReport/com_separate_roll.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="customer-css">
-    <el-dialog :title="titleCon" v-drag v-bind="$attrs" v-on="$listeners" width="550px" style="height: 680px;" class="customer-dialog">
+    <el-dialog :title="titleCon" v-drag v-bind="$attrs" v-on="$listeners" width="700px" style="height: 680px;" class="customer-dialog">
       <el-form :inline="true" label-position="top" style="height: auto;">
         <!-- 时间和固定载具 -->
         <el-row style="margin-top: -10px;">
@@ -46,10 +46,11 @@
             :data="rowDataList"
             border
             style="width: 100%; margin-top: 10px;"
-            max-height="350">
+            max-height="350"
+            :span-method="objectSpanMethod">
             <el-table-column prop="rowNumber" label="NO." width="50" align="center">
             </el-table-column>
-            <el-table-column label="良品数" width="150" align="center">
+            <el-table-column label="良品数" width="80" align="center">
               <template slot-scope="scope">
                 <el-input-number
                   :controls="false" :step="0"
@@ -61,25 +62,60 @@
                 </el-input-number>
               </template>
             </el-table-column>
-            <el-table-column label="不良数" width="150" align="center">
+            <el-table-column label="面损" width="80" align="center">
               <template slot-scope="scope">
                 <el-input-number
                   :controls="false" :step="0"
-                  v-model="scope.row.defectQty"
+                  v-model="scope.row.surfaceLossQty"
                   @change="handleQtyChange(scope.row)"
-                  style="width: 100%"
-                  class="defect-qty-input"
-                  :style="{'color': '#f56c6c', 'font-weight': 'bold'}">
+                  style="width: 100%">
+                </el-input-number>
+              </template>
+            </el-table-column>
+            <el-table-column label="性能不良" width="80" align="center">
+              <template slot-scope="scope">
+                <el-input-number
+                  :controls="false" :step="0"
+                  v-model="scope.row.poorPerformanceQty"
+                  @change="handleQtyChange(scope.row)"
+                  style="width: 100%">
                 </el-input-number>
               </template>
             </el-table-column>
-            <el-table-column label="总数" align="center">
+            <el-table-column label="不良数" width="80" align="right">
               <template slot-scope="scope">
-                <div class="total-display">
+                <div class="defect-display" :style="{'color': '#f56c6c', 'font-weight': 'bold', 'text-align': 'right', 'padding-right': '10px'}">
+                  {{ scope.row.defectQty }}
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="良率" width="80" align="center">
+              <template slot-scope="scope">
+                <div class="yield-display" :style="{'color': '#409eff', 'font-weight': 'bold'}">
+                  {{ scope.row.yieldRate }}
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="总数" width="80" align="right">
+              <template slot-scope="scope">
+                <div class="total-display" :style="{'text-align': 'right', 'padding-right': '10px'}">
                   {{ scope.row.totalQty }}
                 </div>
               </template>
             </el-table-column>
+            <el-table-column label="备注" align="center" class-name="remark-column">
+              <template slot-scope="scope">
+                <div class="remark-wrapper">
+                  <el-input
+                    type="textarea"
+                    v-model="scope.row.remark"
+                    resize="none"
+                    :autosize="false"
+                    class="remark-textarea">
+                  </el-input>
+                </div>
+              </template>
+            </el-table-column>
           </el-table>
         </div>
       </el-form>
@@ -400,8 +436,12 @@ export default {
         this.rowDataList.push({
           rowNumber: i,
           goodQty: 0,
+          surfaceLossQty: 0,
+          poorPerformanceQty: 0,
           defectQty: 0,
-          totalQty: 0
+          yieldRate: '0.00%',
+          totalQty: 0,
+          remark: ''
         })
       }
     },
@@ -414,9 +454,21 @@ export default {
       this.initRowDataList()
     },
 
-    // 数量变化时自动计算总数
+    // 数量变化时自动计算不良数、良率和总数
     handleQtyChange(row) {
-      row.totalQty = (row.goodQty || 0) + (row.defectQty || 0)
+      // 计算不良数 = 面损 + 性能不良
+      row.defectQty = (row.surfaceLossQty || 0) + (row.poorPerformanceQty || 0)
+
+      // 计算总数 = 良品数 + 不良数
+      row.totalQty = (row.goodQty || 0) + row.defectQty
+
+      // 计算良率 = 良品数 / 总数 * 100%
+      if (row.totalQty > 0) {
+        const yieldValue = ((row.goodQty || 0) / row.totalQty * 100).toFixed(2)
+        row.yieldRate = yieldValue + '%'
+      } else {
+        row.yieldRate = '0.00%'
+      }
     },
 
     // 验证排数据
@@ -453,6 +505,88 @@ export default {
       return true
     },
 
+    // 表格合并行方法（备注列根据卷数合并）
+    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+      // 只对备注列进行合并（最后一列）
+      if (column.label === '备注') {
+        // 计算每卷的排数
+        const rowsPerRoll = Math.floor(this.pageData.rowCount / this.pageData.rollCount)
+        const remainingRows = this.pageData.rowCount % this.pageData.rollCount
+
+        // 计算当前行属于第几卷
+        let currentRollIndex = 0
+        let accumulatedRows = 0
+
+        for (let i = 0; i < this.pageData.rollCount; i++) {
+          const currentRollRows = rowsPerRoll + (i < remainingRows ? 1 : 0)
+          if (rowIndex < accumulatedRows + currentRollRows) {
+            currentRollIndex = i
+            break
+          }
+          accumulatedRows += currentRollRows
+        }
+
+        // 计算当前卷的排数
+        const currentRollRows = rowsPerRoll + (currentRollIndex < remainingRows ? 1 : 0)
+
+        // 如果是当前卷的第一行，显示合并的单元格
+        if (rowIndex === accumulatedRows) {
+          return {
+            rowspan: currentRollRows,
+            colspan: 1
+          }
+        } else {
+          // 其他行不显示
+          return {
+            rowspan: 0,
+            colspan: 0
+          }
+        }
+      }
+    },
+
+    // 计算备注wrapper的样式（使用padding-top实现垂直居中）
+    getRemarkWrapperStyle(rowIndex) {
+      if (this.pageData.rowCount <= 0 || this.pageData.rollCount <= 0) {
+        return {}
+      }
+
+      // 计算每卷的排数
+      const rowsPerRoll = Math.floor(this.pageData.rowCount / this.pageData.rollCount)
+      const remainingRows = this.pageData.rowCount % this.pageData.rollCount
+
+      // 计算当前行属于第几卷
+      let currentRollIndex = 0
+      let accumulatedRows = 0
+
+      for (let i = 0; i < this.pageData.rollCount; i++) {
+        const currentRollRows = rowsPerRoll + (i < remainingRows ? 1 : 0)
+        if (rowIndex < accumulatedRows + currentRollRows) {
+          currentRollIndex = i
+          break
+        }
+        accumulatedRows += currentRollRows
+      }
+
+      // 计算当前卷的排数
+      const currentRollRows = rowsPerRoll + (currentRollIndex < remainingRows ? 1 : 0)
+
+      // 每行高度约为32px
+      const rowHeight = 32
+      const totalHeight = currentRollRows * rowHeight
+      
+      // textarea的实际高度约为24px（单行）
+      const textareaHeight = 24
+      
+      // 计算需要的padding-top来实现垂直居中
+      const paddingTop = (totalHeight - textareaHeight) / 2
+
+      // 返回样式对象
+      return {
+        paddingTop: paddingTop + 'px'
+      }
+    },
+
     // ===================== 分卷优化方法结束 =====================
 
     // 查询固定载具列表
@@ -580,15 +714,27 @@ export default {
           let totalDefectQty = 0
           const rollRows = []
 
+          // 获取当前卷的备注（第一排的备注）
+          let rollRemark = ''
+
           for (let i = 0; i < currentRollRows; i++) {
             const row = this.rowDataList[currentRowIndex + i]
             totalGoodQty += row.goodQty || 0
             totalDefectQty += row.defectQty || 0
+
+            // 第一排的备注作为整卷的备注
+            if (i === 0) {
+              rollRemark = row.remark || ''
+            }
+
             rollRows.push({
               rowNumber: row.rowNumber,
               goodQty: row.goodQty || 0,
+              surfaceLossQty: row.surfaceLossQty || 0,
+              poorPerformanceQty: row.poorPerformanceQty || 0,
               defectQty: row.defectQty || 0,
-              totalQty: row.totalQty || 0
+              totalQty: row.totalQty || 0,
+              remark: row.remark || ''
             })
           }
 
@@ -598,7 +744,8 @@ export default {
             rollQty: totalGoodQty,  // 该卷的良品总数
             rollNums: 1,            // 固定为1
             totalDefectQty: totalDefectQty,  // 该卷的不良总数
-            rollRows: rollRows      // 该卷包含的排数据
+            rollRows: rollRows,     // 该卷包含的排数据
+            remark: rollRemark      // 该卷的备注
           }
 
           // 调用后端创建单个卷
@@ -742,6 +889,71 @@ export default {
   font-size: 12px;
 }
 
+/* 备注列单元格样式 - 使用绝对定位填满 */
+.customer-dialog >>> .el-table td:last-child {
+  padding: 0 !important;
+  position: relative !important;
+}
+
+.customer-dialog /deep/ .el-table td:last-child {
+  padding: 0 !important;
+  position: relative !important;
+}
+
+/* 备注包装器 - 绝对定位填满单元格 */
+.customer-dialog >>> .remark-wrapper {
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+}
+
+.customer-dialog /deep/ .remark-wrapper {
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+}
+
+/* 备注textarea */
+.customer-dialog >>> .remark-textarea {
+  width: 100% !important;
+  height: 100% !important;
+}
+
+.customer-dialog >>> .remark-textarea .el-textarea__inner {
+  border: none !important;
+  padding: 8px 10px !important;
+  border-radius: 0 !important;
+  resize: none !important;
+  width: 100% !important;
+  height: 100% !important;
+  box-sizing: border-box !important;
+  overflow-y: auto !important;
+}
+
+.customer-dialog /deep/ .remark-textarea {
+  width: 100% !important;
+  height: 100% !important;
+}
+
+.customer-dialog /deep/ .remark-textarea .el-textarea__inner {
+  border: none !important;
+  padding: 8px 10px !important;
+  border-radius: 0 !important;
+  resize: none !important;
+  width: 100% !important;
+  height: 100% !important;
+  box-sizing: border-box !important;
+  overflow-y: auto !important;
+}
+
 </style>
 
 <style lang="scss">
@@ -757,4 +969,39 @@ export default {
   color: #f56c6c !important;
   font-size: 16px !important;
 }
+
+/* 备注列样式 - 只针对创建分卷对话框 */
+.customer-css .el-table td:last-child {
+  padding: 0 !important;
+  position: relative !important;
+}
+
+/* 备注包装器 - 填满整个单元格 */
+.customer-css .remark-wrapper {
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+}
+
+/* 备注textarea容器 */
+.customer-css .remark-textarea {
+  width: 100% !important;
+  height: 100% !important;
+}
+
+.customer-css .remark-textarea .el-textarea__inner {
+  border: none !important;
+  padding: 8px 10px !important;
+  border-radius: 0 !important;
+  resize: none !important;
+  width: 100% !important;
+  height: 100% !important;
+  box-sizing: border-box !important;
+  overflow-y: auto !important;
+}
+
 </style>