质检明细添加物料信息

src/views/biz/qualityTesting/index.vue

@@ -180,8 +180,16 @@
 
     <!--质检单详情面板-->
     <n-modal v-model:show="detailVisible" preset="card" :title="detailTitle" style="width: 800px">
-      <n-card title="主表信息" hoverable style="margin-bottom: 12px" >
-        <n-descriptions :column="2" bordered>
+      <n-card hoverable style="margin-bottom: 12px" >
+        <template #header>
+          <div style="display:flex;justify-content:space-between;align-items:center;width:100%">
+            <span>主表信息</span>
+            <n-button text @click="infoIsCollapse = !infoIsCollapse">
+              <n-icon :component="infoIsCollapse ? ArrowDownOutline : ArrowUpOutline" />
+            </n-button>
+          </div>
+        </template>
+        <n-descriptions :column="3" bordered v-show="!infoIsCollapse">
           <n-descriptions-item
               v-for="item in mappedInfoList"
               :key="item.key"
@@ -191,13 +199,24 @@
           </n-descriptions-item>
         </n-descriptions>
       </n-card>
-      <n-card title="明细列表" hoverable style="margin-bottom: 12px">
+      <n-card hoverable style="margin-bottom: 12px">
+         <template #header>
+          <div style="display:flex;justify-content:space-between;align-items:center;width:100%">
+            <span>明细列表</span>
+            <n-button text @click="detailIsCollapse = !detailIsCollapse">
+              <n-icon :component="detailIsCollapse ? ArrowDownOutline : ArrowUpOutline" />
+            </n-button>
+          </div>
+        </template>
         <n-data-table
+             v-show="!detailIsCollapse"
             :columns="detailColumns"
             :data="detailTableData"
             :loading="loading"
             :row-key="(row) => row.id"
-            :scroll-x="1200"
+            :scroll-x="700"
+            max-height="320"
+            :pagination="{ pageSize:4 }"
         />
       </n-card>
 <!--      <n-card title="追溯码" hoverable>-->
@@ -320,9 +339,10 @@ import {
   NButton, NSpace, NIcon, NUpload,NTag, useMessage, useDialog, type DataTableColumns, type UploadCustomRequestOptions,
   NDropdown
 } from 'naive-ui'
+import { } from '@vicons/ionicons5'
 import {
   SearchOutline, RefreshOutline, AddOutline, TrashOutline, CreateOutline, CloudUploadOutline, DownloadOutline,
-  EllipsisHorizontalOutline
+  EllipsisHorizontalOutline, ArrowDownOutline, ArrowUpOutline
 } from '@vicons/ionicons5'
 import { qualityTestingApi, type QualityTesting } from '@/api/qualityTesting'
 import {assingReworkApi} from '@/api/assingRework'
@@ -365,6 +385,9 @@ const importModalVisible = ref(false)
 const detailVisible = ref(false)
 const detailTitle = ref('')
 
+const infoIsCollapse = ref(false)
+const detailIsCollapse = ref(true)
+
 //提交判定明细
 const submitDetailModalVisible = ref(false)
 const traceCodeShow = ref(false)
@@ -373,16 +396,18 @@ const traceCodeShow = ref(false)
 const infoDataMapping = {
   id: '质检单编号',
   qcNo: '质检单编号',
+  materialCode: '物料编码',
+  materialName: '物料名称',
+  materialQty: '物料数量',
   sourceType: '来源类型',
   sourceId: '来源编号',
   orderId: '订单编号',
   processId: '工序编号',
-  itemId: '物料编号',
   totalQty: '报检总数',
   status: '质检状态',
   inspectorId: '质检员编号',
   inspectTime: '质检时间',
-  traceType: '追溯类型',
+  traceType: '追溯类型'
 }
 const infoDataMap = new Map(Object.entries(infoDataMapping))
 const mappedInfoList = ref<Array<{ label: string; key: string; value: any }>>([])