feature:营销列表二轮调整接口联调

src/api/marketing/statistics.ts

@@ -1,9 +1,24 @@
 import request from '/@/utils/request';
 
+/**
+ * 获取数据统计一级列表
+ */
 export function pageList(query: object) {
     return request({
-        url: '/admin/marketing/config/pageData',
+        url: '/admin/marketing/data/page',
         method: 'get',
-        data: query,
+        params: query,
+    });
+}
+
+
+/**
+ * 获取数据统计二级列表
+ */
+export function detailList(query: object) {
+    return request({
+        url: '/admin/marketing/data/detail',
+        method: 'get',
+        params: query,
     });
 }

src/views/marketing/statistics/index.vue

@@ -2,25 +2,25 @@
   <div class="layout-padding">
     <div class="layout-padding-auto layout-padding-view">
       <el-row class="ml10" v-show="showSearch">
-        <el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList" ref="queryRef">
+        <el-form :inline="true" :model="state.queryForm" @keyup.enter="withCollapsedChildren(getDataList)" ref="queryRef">
           <el-form-item :label="t('systoken.ip')" prop="ip">
             <el-input :placeholder="t('systoken.inputIpTip')" v-model="state.queryForm.ip"></el-input>
           </el-form-item>
-          <el-form-item :label="t('systoken.domain')" prop="domain">
+          <!-- <el-form-item :label="t('systoken.domain')" prop="domain">
             <el-input :placeholder="t('systoken.inputDomainTip')" v-model="state.queryForm.domain"></el-input>
           </el-form-item>
           <el-form-item :label="t('systoken.referrer')" prop="referrer">
             <el-input :placeholder="t('systoken.inputReferrer')" v-model="state.queryForm.referrer"></el-input>
-          </el-form-item>
+          </el-form-item> -->
           <el-form-item>
-            <el-button @click="getDataList" icon="Search" type="primary">{{ t('common.queryBtn') }} </el-button>
+            <el-button @click="withCollapsedChildren(getDataList)" icon="Search" type="primary">{{ t('common.queryBtn') }} </el-button>
             <el-button @click="resetQuery" icon="Refresh">{{ t('common.resetBtn') }}</el-button>
           </el-form-item>
         </el-form>
       </el-row>
-      <el-table class="statistics-table" :data="state.dataList" row-key="ip" @sort-change="sortChangeHandle" style="width: 100%"
+      <el-table class="statistics-table" :data="state.dataList" row-key="ip" @sort-change="withCollapsedChildren(sortChangeHandle)" style="width: 100%"
         v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
-        :header-cell-style="tableStyle.headerCellStyle" @row-click="toggleRowExpansion"
+        :header-cell-style="tableStyle.headerCellStyle"
         :expand-row-keys="expandedRowKeys"
         @expand-change="handleExpandChange"
         >
@@ -32,7 +32,7 @@
                 :header-cell-style="tableStyle.headerCellStyle">
                 <!-- <el-table-column :label="t('systoken.ip')" prop="ip" show-overflow-tooltip></el-table-column> -->
                 <el-table-column :label="t('systoken.domain')" prop="domain" show-overflow-tooltip></el-table-column>
-                <el-table-column :label="t('systoken.fingerprint')" prop="finger" show-overflow-tooltip></el-table-column>
+                <el-table-column :label="t('systoken.fingerprint')" prop="fingerprint" show-overflow-tooltip></el-table-column>
                 <el-table-column :label="t('systoken.referrer')" prop="referrer" show-overflow-tooltip></el-table-column>
                 <el-table-column :label="t('systoken.content')" prop="total" show-overflow-tooltip></el-table-column>
                 <el-table-column :label="t('systoken.dayActive')" prop="daily" show-overflow-tooltip></el-table-column>
@@ -40,23 +40,28 @@
                 <el-table-column :label="t('systoken.fifteenOnline')" prop="online" show-overflow-tooltip></el-table-column>
               </el-table>
               <div class="pagination-container" @click.stop>
-                <pagination v-bind="row.childPagination" @size-change="size => handlePageSizeChange(row, size)"
+                <pagination v-bind="row.childPagination"
+                  :current-page="row.childPagination.page"
+                  :page-size="row.childPagination.size"
+                  :total="row.childPagination.total"
+                  :key="`pagination-${row.ip}-${row.childPagination.page}`"
+                  @size-change="size => handlePageSizeChange(row, size)"
                   @current-change="page => handlePageChange(row, page)" />
               </div>
             </div>
           </template>
         </el-table-column>
         <el-table-column :label="t('systoken.ip')" prop="ip" show-overflow-tooltip></el-table-column>
-        <!-- <el-table-column :label="t('systoken.domain')" prop="domain" show-overflow-tooltip></el-table-column> -->
-        <!-- <el-table-column :label="t('systoken.fingerprint')" show-overflow-tooltip>--</el-table-column>
-        <el-table-column :label="t('systoken.referrer')" show-overflow-tooltip>--</el-table-column> -->
         <el-table-column :label="t('systoken.content')" prop="total" show-overflow-tooltip></el-table-column>
         <el-table-column :label="t('systoken.dayActive')" prop="daily" show-overflow-tooltip></el-table-column>
         <el-table-column :label="t('systoken.hourActive')" prop="hourly" show-overflow-tooltip></el-table-column>
         <el-table-column :label="t('systoken.fifteenOnline')" prop="online" show-overflow-tooltip></el-table-column>
       </el-table>
 
-      <pagination @current-change="currentChangeHandle" @size-change="sizeChangeHandle" v-bind="state.pagination">
+      <pagination 
+        @current-change="page => withCollapsedChildren(currentChangeHandle, page)" 
+        @size-change="size => withCollapsedChildren(sizeChangeHandle, size)" 
+        v-bind="state.pagination">
       </pagination>
     </div>
   </div>
@@ -64,177 +69,101 @@
 
 <script lang="ts" setup>
 import { BasicTableProps, useTable } from '/@/hooks/table';
-import { pageList } from '/@/api/marketing/statistics';
+import { pageList, detailList } from '/@/api/marketing/statistics';
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
 // 定义变量内容
 const queryRef = ref();
 const showSearch = ref(true);
+const expandedRowKeys = ref<number[]>([]); // 记录展开的行
 
 //  table hook
 const state: BasicTableProps = reactive<BasicTableProps>({
   queryForm: {
     ip: '',
-    domain: ''
   },
   pageList: pageList,
+  pagination: {
+    current: 1,
+    size: 10,
+    total: 0,
+    pageSizes: [5, 10, 20, 50, 100]
+  }
 });
 const { getDataList, currentChangeHandle, sortChangeHandle, sizeChangeHandle, tableStyle } = useTable(state);
 
 // 清空搜索条件
 const resetQuery = () => {
   queryRef.value?.resetFields();
-  getDataList();
+  withCollapsedChildren(getDataList);
 };
 
-// 初始化子表格数据和分页
+// 初始化二级表格数据和分页
 const initChildData = (parentRow) => {
   parentRow.expanded = false;
-  parentRow.childTableData = [
-    {
-      "ip": "",
-      "domain": "192.168.3.9",
-      "referrer": "http://192.168.3.9:5174/",
-      "total": "1",
-      "daily": "0",
-      "hourly": "0",
-      "online": null
-    },
-    {
-      "ip": "",
-      "domain": "192.168.3.9",
-      "referrer": "http://192.168.3.9:5174/www.baidu.com",
-      "total": "2",
-      "daily": "0",
-      "hourly": "0",
-      "online": null
-    },
-    {
-      "ip": "",
-      "domain": "localhost",
-      "referrer": "",
-      "total": "73",
-      "daily": "0",
-      "hourly": "0",
-      "online": null
-    },
-    {
-      "ip": "",
-      "domain": "192.168.3.9",
-      "referrer": "",
-      "total": "75",
-      "daily": "1",
-      "hourly": "0",
-      "online": null
-    },
-    {
-      "ip": "",
-      "domain": "192.168.3.9",
-      "referrer": "",
-      "total": "2",
-      "daily": "0",
-      "hourly": "0",
-      "online": null
-    },
-    {
-      "ip": "",
-      "domain": "192.168.0.77",
-      "referrer": "",
-      "total": "25",
-      "daily": "0",
-      "hourly": "0",
-      "online": null
-    }
-  ];
+  parentRow.childTableData = []
   parentRow.childLoading = false;
-  parentRow.childPagination = {
+  parentRow.childPagination = reactive({
     page: 1,
     size: 5,
-    total: 6,
-    pageSizes: [1, 5, 10, 20]
-  };
+    total: 0,
+    pageSizes: [5, 10, 20, 50, 100]
+  });
 };
 
-// 初始化所有父行
+// 初始化所有二级表格数据
 watchEffect(() => {
   state?.dataList?.forEach(row => {
     initChildData(row);
   })
 }, [state.pageList])
 
-// 切换行展开状态
-const toggleRowExpansion = (row: any, column: any, event: Event) => {
-  console.log(row);
-  if ((event.target as HTMLElement).closest('.pagination-container')) {
-    return;
-  }
-
-  row.expanded = !row.expanded;
-  if (row.expanded && row.childTableData.length === 0) {
-    loadChildData(row);
-  }
-};
-
-// 加载子表格数据（模拟API请求）
+// 获取二级表格数据
 const loadChildData = async (parentRow) => {
   parentRow.childLoading = true;
   try {
-    // 模拟API请求参数
-    const params = {
-      parentId: parentRow.id,
-      page: parentRow.childPagination.page,
-      pageSize: parentRow.childPagination.size
-    };
-
-    // 模拟API请求延迟
-    await new Promise(resolve => setTimeout(resolve, 800));
-
-    // 生成模拟数据
-    const mockData = [];
-    const startIndex = (params.page - 1) * params.pageSize;
-
-    for (let i = 0; i < params.pageSize; i++) {
-      const index = startIndex + i;
-      if (index >= parentRow.childPagination.total) break;
-
-      mockData.push({
-        "ip": parentRow.ip,
-        "domain": "192.168.3.9",
-        "referrer": "http://192.168.3.9:5174/",
-        "total": "1",
-        "daily": "0",
-        "hourly": "0",
-        "online": Math.random() < 0.5 ? null : Math.floor(Math.random() * 100)
-      });
-    }
-
-    // 更新数据
-    parentRow.childTableData = mockData;
-    parentRow.childPagination.total = parentRow.childPagination.total+=0;
+    const res = await detailList({
+      ip: parentRow.ip,
+      current: parentRow.childPagination.page,
+      size: parentRow.childPagination.size
+    });
+    const data = res.data;
+    parentRow.childTableData = data.records;
+    parentRow.childPagination.total = data.total;
   } finally {
     parentRow.childLoading = false;
   }
 };
 
-// 处理分页大小变化
+// 确保在请求数据前关闭所有二级表格
+const withCollapsedChildren = (callback: Function, ...args: any[]) => {
+  expandedRowKeys.value = [];
+  return callback(...args);
+};
+
+// 处理二级表格分页大小变化
 const handlePageSizeChange = (row: any, size: number) => {
   row.childPagination.size = size;
   row.childPagination.page = 1; // 重置为第一页
   loadChildData(row);
 };
 
-// 处理页码变化
+// 处理二级表格页码变化
 const handlePageChange = (row: any, page: number) => {
   row.childPagination.page = page;
-  console.log('page', page);
-  
   loadChildData(row);
 };
 
-const expandedRowKeys = ref<number[]>([]);
+// 二级表格展开/关闭
 const handleExpandChange = (row: any, expandedRows: any[]) => {
   expandedRowKeys.value = expandedRows.map(item => item.ip);
+  row.expanded = !row.expanded;
+
+  // 加载二级表格第1页数据
+  if (row.expanded && (!row.childTableData || row.childTableData.length === 0)) {
+    loadChildData(row);
+  }
 };
 
 </script>