提交

web-admin/src/components/business/qc-task-view-dialog/index.vue

@@ -28,6 +28,49 @@
       </div>
     </template>
     <template #append>
+      <div
+        v-if="viewDetail?.taskType !== 'dsfjc'"
+        class="view-section qc-task-view-material-usages"
+      >
+        <h3>物料使用</h3>
+        <el-table
+          v-if="viewMaterialUsages.length"
+          :data="viewMaterialUsages"
+          stripe
+          class="list-table inner-table qc-task-view-material-table"
+        >
+          <el-table-column
+            type="index"
+            label="序号"
+            width="56"
+            align="center"
+            header-align="center"
+            :index="(index) => index + 1"
+          />
+          <el-table-column
+            prop="materialName"
+            label="物料名称"
+            min-width="160"
+            align="center"
+            header-align="center"
+          />
+          <el-table-column label="规格型号" min-width="120" align="center" header-align="center">
+            <template #default="{ row }">{{ row.specModel || '—' }}</template>
+          </el-table-column>
+          <el-table-column label="用量" min-width="100" align="center" header-align="center">
+            <template #default="{ row }">
+              {{ row.qty != null && row.qty !== '' ? row.qty : '—' }}
+            </template>
+          </el-table-column>
+          <el-table-column label="单位" width="72" align="center" header-align="center">
+            <template #default="{ row }">{{ row.unit || '—' }}</template>
+          </el-table-column>
+          <el-table-column label="备注" min-width="140" align="center" header-align="center">
+            <template #default="{ row }">{{ row.remark || '—' }}</template>
+          </el-table-column>
+        </el-table>
+        <p v-else class="view-material-empty">暂无物料使用记录</p>
+      </div>
       <div
         v-if="viewDetail?.attachmentFiles?.length"
         class="view-section qc-task-view-attachments"
@@ -50,7 +93,12 @@
   import SystemViewDialog from '@/components/business/system-view-dialog/index.vue'
   import type { ViewSection } from '@/components/business/system-view-dialog/index.vue'
   import { fetchQcTaskDetail, type QcTaskDetail } from '@/api/qc-task'
-  import { fetchQcTaskResults } from '@/api/qc-task-result'
+  import {
+    fetchQcTaskResults,
+    fetchQcTaskMaterialUsages,
+    type QcTaskMaterialUsageItem
+  } from '@/api/qc-task-result'
+  import { fetchQcMaterialOptions, type QcMaterialOption } from '@/api/qc-material'
   import {
     taskTypeLabel,
     taskStatusLabel,
@@ -77,15 +125,60 @@
     set: (val) => emit('update:visible', val)
   })
 
+  type ViewMaterialUsageRow = {
+    materialId: string
+    materialName: string
+    specModel: string
+    unit: string
+    qty: number | undefined
+    remark: string
+  }
+
   const loading = ref(false)
   const viewDetail = ref<QcTaskDetail | null>(null)
+  const viewMaterialUsages = ref<ViewMaterialUsageRow[]>([])
   const minioBaseUrl = (import.meta.env.VITE_MINIO_BASE_URL || '').replace(/\/$/, '')
 
+  function materialRowsFromApi(items: QcTaskMaterialUsageItem[]): ViewMaterialUsageRow[] {
+    const merged = new Map<string, ViewMaterialUsageRow>()
+    for (const u of items || []) {
+      const mid = (u.materialId || '').trim()
+      if (!mid) continue
+      const qtyRaw = Math.abs(Number(u.changeQty) || 0)
+      const prev = merged.get(mid)
+      if (prev) {
+        prev.qty = (Number(prev.qty) || 0) + qtyRaw
+      } else {
+        merged.set(mid, {
+          materialId: mid,
+          materialName: u.materialName || '',
+          specModel: '',
+          unit: '',
+          qty: qtyRaw > 0 ? qtyRaw : undefined,
+          remark: u.remark || ''
+        })
+      }
+    }
+    return Array.from(merged.values())
+  }
+
+  function enrichMaterialUsageRows(rows: ViewMaterialUsageRow[], options: QcMaterialOption[]) {
+    for (const row of rows) {
+      const opt = options.find((o) => o.id === row.materialId)
+      if (opt) {
+        row.materialName = opt.materialName || row.materialName
+        row.specModel = opt.specModel || ''
+        row.unit = opt.unit || ''
+      }
+    }
+  }
+
   watch(
     () => [props.visible, props.taskId] as const,
     async ([vis, id]) => {
       if (!vis || !id) {
         viewDetail.value = null
+        viewMaterialUsages.value = []
         return
       }
       loading.value = true
@@ -97,9 +190,24 @@
         } catch {
           ;(detail as QcTaskDetail).results = []
         }
+        viewMaterialUsages.value = []
+        if (detail.taskType !== 'dsfjc') {
+          try {
+            const [savedUsages, opts] = await Promise.all([
+              fetchQcTaskMaterialUsages(id).catch(() => [] as QcTaskMaterialUsageItem[]),
+              fetchQcMaterialOptions().catch(() => [] as QcMaterialOption[])
+            ])
+            const rows = materialRowsFromApi(savedUsages || [])
+            enrichMaterialUsageRows(rows, opts || [])
+            viewMaterialUsages.value = rows
+          } catch {
+            viewMaterialUsages.value = []
+          }
+        }
         viewDetail.value = detail
       } catch {
         viewDetail.value = null
+        viewMaterialUsages.value = []
       } finally {
         loading.value = false
       }
@@ -286,6 +394,7 @@
     }
   }
 
+  .qc-task-view-material-usages,
   .qc-task-view-attachments {
     padding: 12px 18px;
     border-bottom: none;
@@ -300,4 +409,25 @@
       line-height: 1;
     }
   }
+
+  .qc-task-view-material-table {
+    width: 100%;
+
+    :deep(.el-table__header .cell),
+    :deep(.el-table__body .cell) {
+      font-size: 12px;
+      line-height: 1.4;
+    }
+
+    :deep(.el-table__header th.el-table__cell),
+    :deep(.el-table__body td.el-table__cell) {
+      padding: 6px 0;
+    }
+  }
+
+  .view-material-empty {
+    margin: 0;
+    font-size: 12px;
+    color: #64748b;
+  }
 </style>