详情组件修改

src/components/Detail/src/Detail.vue

@@ -13,7 +13,15 @@
     <div class="flex" v-if="current == 0">
       <!-- 详情 -->
       <ContentWrap class="w-[73%]">
-        <Descriptions :data="detailData" :schema="allSchemas.detailSchema" :columns="2" />
+        <Descriptions v-if="isBasic" :data="detailData" :schema="allSchemas.detailSchema" :columns="2" />
+        <Table 
+          v-if="!isBasic"
+          :columns="detailAllSchemas.tableColumns" 
+          :data="tableObject.tableList" 
+          :loading="tableObject.loading"
+          :pagination="{ total: tableObject.total }" 
+          v-model:pageSize="tableObject.pageSize"
+          v-model:currentPage="tableObject.currentPage" />
       </ContentWrap>
       <ContentWrap class="w-[27%] ml-16px">
         <!-- 附件组件 -->
@@ -25,11 +33,6 @@
         <ChangeRecord :changeRecordData="changeRecordData" class="mt-20px" />
       </ContentWrap>
     </div>
-    <ContentWrap v-else>
-      <Table :columns="allSchemas.tableColumns" :data="tableObject.tableList" :loading="tableObject.loading"
-        :pagination="{ total: tableObject.total }" v-model:pageSize="tableObject.pageSize"
-        v-model:currentPage="tableObject.currentPage" />
-    </ContentWrap>
   </el-drawer>
 </template>
 
@@ -62,6 +65,18 @@ const props = defineProps({
     required: true,
     default: null
   },
+  // 明细列表相关信息
+  detailAllSchemas: {
+    type: Object,
+    required: true,
+    default: null
+  },
+  // 主表API
+  detailApi: {
+    type: Object,
+    required: true,
+    default: null
+  }
 })
 
 const isShowDrawer = ref(false)
@@ -170,6 +185,7 @@ const openDetail = async (row: any, titleName: any, titleValue: any, tableName:
     tableId: row.id,
     tableName: tableName,
   }
+  getList() // 加载明细列表
   isShowDrawer.value = true
   if (row) {
     detailLoading.value = true
@@ -206,6 +222,13 @@ const getChangeRecordList = async () => {
   changeRecordData.changeRecordList = await DetailApi.getChangeRecordPage(remarksData.data)
   
 }
+
+const { tableObject, tableMethods } = useTable({
+  getListApi: props.detailApi?.getDetasListPage // 在主表API中添加根据主表ID获取明细列表分页方法
+})
+// 获得表格的各种操作
+const { getList } = tableMethods
+
 </script>
 <style lang="scss">
 .el-drawer__body {