扩展tabs 详情组件修改

src/components/Detail/src/Detail.vue

@@ -26,7 +26,7 @@
       </ContentWrap>
 
       <Tabs :tabsList="tabsList" :current="current" @change="change" />
-      <div class="flex" v-if="current == 0">
+      <div class="flex">
         <!-- 详情 -->
         <ContentWrap class="w-[73%]">
           <!-- 列表头部 -->
@@ -47,12 +47,12 @@
           />
           <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"
+            :columns="tableColumnsRef"
+            :data="tableObjectRef.tableList"
+            :loading="tableObjectRef.loading"
+            :pagination="{ total: tableObjectRef.total }"
+            v-model:pageSize="tableObjectRef.pageSize"
+            v-model:currentPage="tableObjectRef.currentPage"
           >
             <template #action="{ row }">
               <ButtonBase
@@ -276,7 +276,7 @@ const openDetail = async (row: any, titleName: any, titleValue: any, tableName:
     masterParmas.value.masterId = row.id
     masterParmas.value.number = row.number
     masterParmas.value.status = row.status
-    tableObject.params = {
+    tableObjectRef.value.params = {
       masterId: row.id
     }
     getList()
@@ -331,10 +331,20 @@ const remarksSubmitScuess = async (remark) => {
 const getChangeRecordList = async () => {
   changeRecordData.changeRecordList = await RemarkApi.getChangeRecordPage(remarksData.data)
 }
+
+
+const tableObjectRef = ref()
+const tableMethodsRef = ref()
+const tableColumnsRef = ref()
+
 const { tableObject, tableMethods } = useTable({
   getListApi: props.apiPage // 分页接口
 })
 
+tableObjectRef.value = tableObject
+tableMethodsRef.value = tableMethods
+tableColumnsRef.value = props.detailAllSchemas.tableColumns
+
 // 根据状态返回该按钮是否显示
 const isShowMainButton = (row, val) => {
   if (val.indexOf(row.status) > -1) {
@@ -345,7 +355,7 @@ const isShowMainButton = (row, val) => {
 }
 
 // 获得表格的各种操作
-const { getList } = tableMethods
+const { getList } = tableMethodsRef.value
 
 // 头部按钮事件
 const buttonBaseClick = (val, item) => {
@@ -427,7 +437,7 @@ const handleDelete = async (id: number) => {
 }
 // 筛选提交
 const searchFormClick = (searchData) => {
-  tableObject.params = {
+  tableObjectRef.value.params = {
     isSearch: true,
     filters: searchData.filters
       ? searchData.filters
@@ -435,16 +445,19 @@ const searchFormClick = (searchData) => {
   }
   getList() // 刷新当前列表
 }
-console.log(props.apiPage)
+
 //监视属性
-// watch(props.apiPage, (newValue, oldValue) => {
-//   // 回调函数形式
-//   console.log('求和的值变了', '变化后的值是' + newValue, '变化前的值是' + oldValue)
-// })
 watch(
   () => props.apiPage,
-  (newValue,oldValue) => {
-    console.log('求和的值变了', '变化后的值是' + newValue, '变化前的值是' + oldValue)
+  () => {
+    const { tableObject, tableMethods } = useTable({
+      getListApi: props.apiPage // 分页接口
+    })
+    tableColumnsRef.value = props.detailAllSchemas.tableColumns
+    tableObjectRef.value = tableObject
+    tableMethodsRef.value = tableMethods
+    const { getList } = tableMethods
+    getList()
   }
 )
 </script>

src/views/wms/purchasereceiptManage/purchasereceipt/purchasereceiptRequestMain/index.vue

@@ -61,7 +61,7 @@
     ref="detailRef"
     :isBasic="false"
     :allSchemas="PurchasereceiptRequestMain.allSchemas"
-    :detailAllSchemas="PurchasereceiptRequestDetail.allSchemas"
+    :detailAllSchemas="detailAllSchemas"
     :detailAllSchemasRules="PurchasereceiptRequestDetailRules"
     :apiCreate="PurchasereceiptRequestDetailApi.createPurchasereceiptRequestDetail"
     :apiUpdate="PurchasereceiptRequestDetailApi.updatePurchasereceiptRequestDetail"
@@ -84,6 +84,7 @@ import * as PurchasereceiptRequestMainApi from '@/api/wms/purchasereceiptRequest
 import * as PurchasereceiptRequestDetailApi from '@/api/wms/purchasereceiptRequestDetail'
 import * as defaultButtons from '@/utils/disposition/defaultButtons'
 import { PurchasereceiptRequestTabsList } from '@/utils/disposition/tabsList'
+import { SupplierdeliverRecordMain, SupplierdeliverRecordDetail} from './../../supplierdeliver/supplierdeliverRecordMain/supplierdeliverRecordMain.data'
 
 // 采购收货申请
 defineOptions({ name: 'PurchasereceiptRequestMain' })
@@ -97,6 +98,9 @@ routeName.value = route.name
 const tableColumns = ref(PurchasereceiptRequestMain.allSchemas.tableColumns)
 
 const apiPage = ref(PurchasereceiptRequestDetailApi.getPurchasereceiptRequestDetailPage)
+const detailAllSchemas = ref(PurchasereceiptRequestDetail.allSchemas)
+
+
 
 // 字段设置 更新主列表字段
 const updataTableColumns = (val) => {
@@ -363,15 +367,18 @@ const searchFormClick = (searchData) => {
   }
   getList() // 刷新当前列表
 }
+
+// tabs 切换事件
 const changeTabs = (data) =>{
-  // console.log(data.prop)
   if(data.prop == 'receiptDetail'){
     apiPage.value = PurchasereceiptRequestDetailApi.getPurchasereceiptRequestDetailPage
+    detailAllSchemas.value = PurchasereceiptRequestDetail.allSchemas    
   }else if(data.prop == 'scarceGoodsDetail'){
     apiPage.value = PurchasereceiptRequestDetailApi.getScarceGoodsDetailPage
+    detailAllSchemas.value = SupplierdeliverRecordDetail.allSchemas
   }
-  console.log( apiPage.value)
 }
+
 /** 初始化 **/
 onMounted(async () => {
   getList()