分页模拟

src/components/cus/CusPage.vue

@@ -27,7 +27,7 @@ const props = defineProps({
 })
 const state: any = reactive({})
 const handleSizeChange = (val) => {
-  emit('page', props.pageNum, val)
+  emit('page', 1, val)
 }
 const handleCurrentChange = (val) => {
   emit('page', val, props.pageSize)

src/views/web/home/index.vue

@@ -208,7 +208,7 @@ onMounted(() => {
         font-size: 18px;
         color: var(--cus-text-color-2);
         .el-input__wrapper {
-          box-shadow: none;
+          box-shadow: none !important;
           background-color: transparent;
           .el-input__inner {
             &::placeholder {

src/views/web/list/index.vue

@@ -122,7 +122,7 @@
               <SvgIcon name="card_1" size="16" :color="state.tableParams.model === 'card' ? '#ffffff' : 'var(--cus-text-color-3)'"/>
             </div>
           </div>
-          <div class="table-content">
+          <div class="table-content" v-loading="state.tableParams.loading">
             <div class="table-content-result">
               <div class="table-list" v-if="state.tableParams.model === 'list'">
                 <template v-for="(item, index) in state.tableParams.data">
@@ -246,14 +246,15 @@ const state: any = reactive({
   ws: {
     count: () => {},
     list: () => {},
-    countPercent: 50
+    countPercent: 100
   },
   tableParams: {
     model: 'list',
     pageNum: 1,
     pageSize: 10,
     total: 0,
-    data: []
+    data: [],
+    loading: false
   }
 })
 const ref_area = ref()
@@ -328,26 +329,6 @@ const onDelFilter = (index) => {
   state.cascaderParams.value = temp
 }
 const onSearch = () => {
-  state.tableParams = {
-    model: 'list',
-    pageNum: 1,
-    pageSize: 10,
-    total: 100,
-    data: [
-      {name: '胡杰<span style="color: red;">顶顶顶</span>顶顶', sex: '男', a: 1, b: 2, c: 3, d: 4, avatar: 'https://element-plus.org/images/element-plus-logo.svg'},
-      {name: '胡杰<span style="color: red;">顶顶顶</span>顶顶', sex: '男', a: 1, b: 2, c: 3, d: 4, avatar: 'https://element-plus.org/images/element-plus-logo.svg'},
-      {name: '胡杰<span style="color: red;">顶顶顶</span>顶顶', sex: '男', a: 1, b: 2, c: 3, d: 4, avatar: 'https://element-plus.org/images/element-plus-logo.svg'},
-      {name: '胡杰<span style="color: red;">顶顶顶</span>顶顶', sex: '男', a: 1, b: 2, c: 3, d: 4, avatar: 'https://element-plus.org/images/element-plus-logo.svg'},
-      {name: '胡杰<span style="color: red;">顶顶顶</span>顶顶', sex: '男', a: 1, b: 2, c: 3, d: 4, avatar: 'https://element-plus.org/images/element-plus-logo.svg'},
-      {name: '胡杰<span style="color: red;">顶顶顶</span>顶顶', sex: '男', a: 1, b: 2, c: 3, d: 4, avatar: 'https://element-plus.org/images/element-plus-logo.svg'},
-      {name: '胡杰<span style="color: red;">顶顶顶</span>顶顶', sex: '男', a: 1, b: 2, c: 3, d: 4, avatar: 'https://element-plus.org/images/element-plus-logo.svg'},
-      {name: '胡杰<span style="color: red;">顶顶顶</span>顶顶', sex: '男', a: 1, b: 2, c: 3, d: 4, avatar: 'https://element-plus.org/images/element-plus-logo.svg'},
-      {name: '胡杰<span style="color: red;">顶顶顶</span>顶顶', sex: '男', a: 1, b: 2, c: 3, d: 4, avatar: 'https://element-plus.org/images/element-plus-logo.svg'},
-      {name: '胡杰<span style="color: red;">顶顶顶</span>顶顶', sex: '男', a: 1, b: 2, c: 3, d: 4, avatar: 'https://element-plus.org/images/element-plus-logo.svg'},
-      {name: '胡杰<span style="color: red;">顶顶顶</span>顶顶', sex: '男', a: 1, b: 2, c: 3, d: 4, avatar: 'https://element-plus.org/images/element-plus-logo.svg'},
-      {name: '胡杰<span style="color: red;">顶顶顶</span>顶顶', sex: '男', a: 1, b: 2, c: 3, d: 4, avatar: 'https://element-plus.org/images/element-plus-logo.svg'},
-    ]
-  }
   state.searchParams = JSON.parse(JSON.stringify({
     text: state.searchText,
     indexKey: state.cascaderParams.value
@@ -391,11 +372,13 @@ const getIndexConfig = () => {
       dataProvideSource: '海南省大数据管理局',
       dataTotal: '9125815819',
     }
+    state.ws.list()
   },500)
 }
 const onPage = (pageNum, pageSize) => {
   state.tableParams.pageNum = pageNum
   state.tableParams.pageSize = pageSize
+  state.ws.list(false)
 }
 watch(() => state.resultParams.activeIndex, (n) => {
   if (n) {
@@ -429,6 +412,13 @@ onMounted(() => {
           p.flag = 'stop'
           ws.send(JSON.stringify(p))
         }
+        // 如果有的话，终止上一次请求
+        if (lastListParams) {
+          const p = JSON.parse(lastListParams)
+          p.flag = 'stop'
+          ws.send(JSON.stringify(p))
+          lastListParams = ''
+        }
         // 执行新的请求
         let step = 0
         const builder = state.resultParams.tree.map(tag => ({
@@ -459,6 +449,38 @@ onMounted(() => {
         lastCountParams = JSON.stringify(params)
         ws.send(lastCountParams)
       }
+      state.ws.list = (init = true) => {
+        // 如果有的话，终止上一次请求
+        if (lastListParams) {
+          const p = JSON.parse(lastListParams)
+          p.flag = 'stop'
+          ws.send(JSON.stringify(p))
+          lastListParams = ''
+        }
+        if (init) {
+          state.tableParams = {
+            model: 'list',
+            pageNum: 1,
+            pageSize: 10,
+            total: 0,
+            data: [],
+            loading: true
+          }
+        }
+        const params = {
+          keyData: state.searchParams.text,
+          pageNumber: state.tableParams.pageNum,
+          pageSize: state.tableParams.pageSize,
+          indexCode: state.resultParams.activeIndex,
+          type: 'list',
+          sessionId: sessionId,
+          timestamp: timestamp,
+          flag: 'run',
+          orderBy: {}
+        }
+        lastCountParams = JSON.stringify(params)
+        ws.send(lastCountParams)
+      }
     }
     ws.onmessage = (e) => {
       try {
@@ -499,8 +521,8 @@ onMounted(() => {
                           const index = type.children[indexI]
                           if (index.__count > 0 && !state.resultParams.activeIndex) {
                             state.resultParams.activeIndex = index.treeId
+                            break
                           }
-                          break
                         }
                         break
                       }
@@ -515,6 +537,15 @@ onMounted(() => {
                 }
               }
             } break
+            case 'list': {
+              const p = JSON.parse(lastCountParams)
+              // 返回为最新批次的
+              if (json.timestamp == p.timestamp) {
+                state.tableParams.total = json.records
+                state.tableParams.data = json.datas
+                state.tableParams.loading = false
+              }
+            } break
           }
         }
       } catch (e) {