tab分页

src/components/cus/CusTable.vue

@@ -135,6 +135,7 @@
       <CusPage
         :page-num="pageNum"
         :page-size="pageSize"
+        :page-sizes="pageSizes"
         :total="total"
         @page="onPage"
       />
@@ -164,7 +165,8 @@ const props = defineProps({
   showIndex: {default: true},
   selectable: {},
   tableHead: {default: []},
-  noPage: {default: false}
+  noPage: {default: false},
+  pageSizes: {default: () => [10, 20, 30, 40, 50, 100]}
 })
 const state: any = reactive({})
 const ref_table = ref()

src/views/web/archive/index.vue

@@ -32,7 +32,7 @@
             </template>
           </el-image>
         </div>
-        <div class="archive-basic-cols" v-if="themeConfigCpt.main.indexStyle.otherParams.length > 0">
+        <div class="archive-basic-cols" v-if="themeConfigCpt.main.indexStyle.otherParams?.length > 0">
           <template v-for="item in themeConfigCpt.main.indexStyle.otherParams">
             <div class="cols-item">
               <div class="label">{{ item.label }}</div>
@@ -41,39 +41,22 @@
           </template>
         </div>
       </div>
-<!--      <div class="archive-list">-->
-<!--        <el-tabs v-model="state.activeTab" class="archive-list-tabs">-->
-<!--          <el-tab-pane label="首页" name="index"/>-->
-<!--          <el-tab-pane label="人员证件信息" name="list"/>-->
-<!--          <el-tab-pane label="Task" name="fourth"/>-->
-<!--        </el-tabs>-->
-<!--        <template v-if="state.activeTab === 'index'">-->
-<!--          <div class="archive-list-block">-->
-<!--            <div class="archive-list-block-title">-->
-<!--              <SvgIcon class="flag" name="flag_1" color="var(&#45;&#45;cus-main-color)"/>关系图谱-->
-<!--            </div>-->
-<!--            <div class="archive-list-block-page">-->
-<!--              <RelationChart/>-->
-<!--            </div>-->
-<!--          </div>-->
-<!--          <div class="archive-list-block">-->
-<!--            <div class="archive-list-block-title">-->
-<!--              <SvgIcon class="flag" name="flag_1" color="var(&#45;&#45;cus-main-color)"/>人员证件信息-->
-<!--            </div>-->
-<!--            <div class="archive-list-block-page">-->
-<!--              <CusTable-->
-<!--                :page-num="state.query.page.pageNum"-->
-<!--                :page-size="state.query.page.pageSize"-->
-<!--                :total="state.query.result.total"-->
-<!--                :data="state.query.result.data"-->
-<!--                :table-head="state.query.tableHead"-->
-<!--                @handlePage="onPage"-->
-<!--              >-->
-<!--              </CusTable>-->
-<!--            </div>-->
-<!--          </div>-->
-<!--        </template>-->
-<!--        <template v-else>-->
+      <div class="archive-list">
+        <el-tabs v-model="state.activeTab" class="archive-list-tabs">
+          <el-tab-pane label="首页" name="首页"/>
+          <template v-for="([key, value], index) in themeConfigCpt.tabs">
+            <el-tab-pane :label="value.indexName" :name="key"/>
+          </template>
+        </el-tabs>
+        <template v-if="state.activeTab === '首页'">
+          <div class="archive-list-block">
+            <div class="archive-list-block-title">
+              <SvgIcon class="flag" name="flag_1" color="var(--cus-main-color)"/>关系图谱
+            </div>
+            <div class="archive-list-block-page">
+              <RelationChart/>
+            </div>
+          </div>
 <!--          <div class="archive-list-block">-->
 <!--            <div class="archive-list-block-title">-->
 <!--              <SvgIcon class="flag" name="flag_1" color="var(&#45;&#45;cus-main-color)"/>人员证件信息-->
@@ -90,14 +73,34 @@
 <!--              </CusTable>-->
 <!--            </div>-->
 <!--          </div>-->
-<!--        </template>-->
-<!--      </div>-->
+        </template>
+        <template v-else>
+          <div class="archive-list-block">
+            <div class="archive-list-block-title">
+              <SvgIcon class="flag" name="flag_1" color="var(--cus-main-color)"/>
+              {{ themeConfigCpt.tabs.get(state.activeTab).indexName }}
+            </div>
+            <div class="archive-list-block-page" v-loading="state.tabTable.loading">
+              <CusTable
+                :page-num="state.tabTable.page.pageNum"
+                :page-size="state.tabTable.page.pageSize"
+                :total="state.tabTable.result.total"
+                :data="state.tabTable.result.data"
+                :table-head="state.tabTable.tableHead"
+                @handlePage="onPage"
+                :page-sizes="[20, 40, 60, 80, 100]"
+              >
+              </CusTable>
+            </div>
+          </div>
+        </template>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import {computed, getCurrentInstance, onMounted, reactive} from "vue";
+import {computed, getCurrentInstance, onMounted, reactive, watch} from "vue";
 import RelationChart from "./relation-chart.vue";
 import {ElLoading, ElMessage} from "element-plus";
 import {useThemeStore} from "@/stores";
@@ -108,12 +111,12 @@ const ThemeStore = useThemeStore()
 const route = useRoute()
 const {proxy} = getCurrentInstance()
 const state: any = reactive({
-  activeTab: 'index',
+  activeTab: '首页',
   tabTable: {
     loading: false,
     page: {
       pageNum: 1,
-      pageSize: 10
+      pageSize: 20
     },
     tableHead: [],
     result: {
@@ -136,7 +139,7 @@ const state: any = reactive({
   ws: {
     instance: null,
     getMain: () => {},
-    listFix: () => {},
+    tabPage: () => {},
     loading: null,
     loadingTimer: null
   },
@@ -182,7 +185,7 @@ const themeConfigCpt = computed(() => {
     main: {
       indexStyle: {}
     },
-    tabs: [],
+    tabs: new Map(),
     chart: {
       nodes: [],
       edges: [],
@@ -211,7 +214,7 @@ const themeConfigCpt = computed(() => {
       })
       res.chart.edges.push({source: String(v.relateIndexId), target: String(v.id)})
     } else {
-      res.tabs.push({
+      res.tabs.set(v.indexTableName, {
         indexName: v.indexName,
         indexTableName: v.indexTableName,
         searchParam: getSearchParam(v),
@@ -222,7 +225,13 @@ const themeConfigCpt = computed(() => {
   console.log(res)
   return res
 })
-const onPage = (pageNum, pageSize) => {}
+const onPage = (pageNum, pageSize) => {
+  state.tabTable.page = {
+    pageNum: pageNum,
+    pageSize: pageSize
+  }
+  state.ws.tabPage()
+}
 const initTheme = () => {
   const loading = ElLoading.service({
     lock: true,
@@ -239,6 +248,25 @@ const initTheme = () => {
     }
   })
 }
+watch(() => state.activeTab, (n) => {
+  if (n === '首页') {
+
+  } else {
+    state.tabTable = {
+      loading: false,
+      page: {
+        pageNum: 1,
+        pageSize: 20
+      },
+      tableHead: themeConfigCpt.value.tabs.get(n).tableHead,
+      result: {
+        total: 0,
+        data: []
+      },
+    }
+    state.ws.tabPage()
+  }
+})
 const initWS = () => {
   const ws: any = new WebSocket('/ws-api/smart-ws?userId=1388061846031220738')
   let sessionId = ''
@@ -285,47 +313,37 @@ const initWS = () => {
       state.mainObj.loading = true
       ws.send(lastMainParams)
     }
-    // state.ws.listFix = () => {
-    //   // 如果有的话，终止上一次请求
-    //   if (lastListFixParams) {
-    //     const p = JSON.parse(lastListFixParams)
-    //     p.flag = 'stop'
-    //     ws.send(JSON.stringify(p))
-    //     lastListFixParams = ''
-    //   }
-    //   const params = {
-    //     pageNumber: 1,
-    //     pageSize: 10,
-    //     type: 'list-fix',
-    //     sessionId: sessionId,
-    //     timestamp: new Date().getTime(),
-    //     flag: 'run',
-    //     orderBy: {},
-    //     builder:[
-    //       {
-    //         tagCode: '',
-    //         datas:[
-    //           {
-    //             typeCode: '',
-    //             datas:[
-    //               {
-    //                 indexCode:"index_seat_smartes_document",
-    //                 orderBy:{"aaa":"desc","bbb":"asc"},
-    //                 datas:[
-    //                   {"fieldCode":"sub_title","fieldQueryType":"MATCH","fieldQueryValue":"佛祖fozu-111"},
-    //                   // {"fieldCode":"title","fieldType":"text","fieldSort":"asc","fieldAnalyzer":"ngram","fieldQueryType":"PREFIX"},
-    //                   // {"fieldCode":"star_num","fieldType":"text","fieldSort":"asc","fieldAnalyzer":"ngram","fieldQueryType":"GT"}
-    //                 ]
-    //               },
-    //             ]
-    //           }
-    //         ]
-    //       }
-    //     ],
-    //   }
-    //   lastListFixParams = JSON.stringify(params)
-    //   ws.send(lastListFixParams)
-    // }
+    state.ws.tabPage = () => {
+      // 如果有的话，终止上一次请求
+      if (lastTabParams) {
+        const p = JSON.parse(lastTabParams)
+        p.flag = 'stop'
+        ws.send(JSON.stringify(p))
+        lastTabParams = ''
+      }
+      const params = {
+        pageNumber: state.tabTable.page.pageNum,
+        pageSize: state.tabTable.page.pageSize,
+        type: 'list-fix',
+        sessionId: sessionId,
+        timestamp: new Date().getTime(),
+        flag: 'run',
+        builder:[
+          {
+            tagCode: '',
+            datas:[
+              {
+                typeCode: '',
+                datas: [themeConfigCpt.value.tabs.get(state.activeTab).searchParam]
+              }
+            ]
+          }
+        ],
+      }
+      lastTabParams = JSON.stringify(params)
+      state.tabTable.loading = true
+      ws.send(lastTabParams)
+    }
   }
   ws.onmessage = (e) => {
     try {
@@ -337,18 +355,30 @@ const initWS = () => {
       } else {
         switch (json.type) {
           case 'list-fix': {
-            const pMain = JSON.parse(lastMainParams)
-            // 返回为最新批次的
-            if (json.timestamp == pMain.timestamp) {
-              state.mainObj.loading = false
-              state.mainObj.data = json.datas?.[0] || {}
-              lastMainParams = ''
+            if (lastMainParams) {
+              const pMain = JSON.parse(lastMainParams)
+              // 返回为最新批次的
+              if (json.timestamp == pMain.timestamp) {
+                state.mainObj.loading = false
+                state.mainObj.data = json.datas?.[0] || {}
+                lastMainParams = ''
+              }
+            }
+            if (lastTabParams) {
+              const pTab = JSON.parse(lastTabParams)
+              // 返回为最新批次的
+              if (json.timestamp == pTab.timestamp) {
+                state.tabTable.result.data = json.datas
+                state.tabTable.result.total = json.records
+                state.tabTable.loading = false
+                lastTabParams = ''
+              }
             }
           } break
         }
       }
     } catch (e) {
-
+      console.log(e)
     }
   }
   ws.onclose = function (){
@@ -378,6 +408,7 @@ onMounted(() => {
     padding: 24px;
     display: flex;
     gap: 16px;
+    overflow: hidden;
     .archive-basic {
       width: 362px;
       height: 100%;
@@ -501,6 +532,7 @@ onMounted(() => {
         display: flex;
         flex-direction: column;
         gap: 15px;
+        overflow: hidden;
         &:first-child {
           border-top-right-radius: 8px;
         }
@@ -520,6 +552,7 @@ onMounted(() => {
         }
         .archive-list-block-page {
           flex: 1;
+          overflow: hidden;
         }
       }
     }