Refactor drawing query pages and routing structure

pages/drawe/[projectType]/[pageNo]/[pageSize]/[[editions]]/[[source]].vue

@@ -33,13 +33,20 @@
   import { getDictTree } from '~/api/home/index'
   import type { pageRes, pageReq } from '~/api/upnew/types'
   const route = useRoute()
-  const projectType = computed(() => route.query?.projectType as string)
+  const projectType = computed(() => (route.params?.projectType ? route.params?.projectType : ''))
+  const pageNo = computed(() => Number(route.params?.pageNo))
+  const pageSize = computed(() => Number(route.params?.pageSize))
+  const editions = computed(() => (route.params?.editions ? route.params?.editions : ''))
+  const source = computed(() => (route.params?.source ? Number(route.params?.source) : ''))
+
+  console.log('route.params----', route.params)
+
   const level = ref(
     route.query?.valuelevel
       ? JSON.parse(route.query.valuelevel as string)
       : [
           {
-            id: '0',
+            id: -1,
             name: '图纸库',
             isChildren: false,
           },
@@ -48,11 +55,11 @@
   const keywords = ref((route.query?.valuekeywords as string) || '')
 
   const query = ref<pageReq>({
-    pageNo: 1,
-    pageSize: 12,
-    projectType: projectType.value,
-    editions: '',
-    source: '',
+    pageNo: pageNo.value || 1,
+    pageSize: pageSize.value || 12,
+    projectType: projectType.value || '-1',
+    editions: editions.value || '-1',
+    source: source.value || -1,
     type: 1,
     title: keywords.value,
   })
@@ -63,23 +70,30 @@
 
   // 如果id存在，则设置projectType
   if (level.value.length) {
-    query.value.projectType = level.value[level.value.length - 1].id || ''
+    // query.value.projectType = level.value[level.value.length - 1].id || ''
   }
 
   const handleClickSize = (val: number) => {
     query.value.pageSize = val
-    getPage()
+    // getPage()
+    navigateTo(`/drawe/${query.value.projectType}/${query.value.pageNo}/${val}/${query.value.editions}/${query.value.source}`)
   }
 
   const handeClickCurrent = (val: number) => {
     query.value.pageNo = val
-    getPage()
+    // getPage()
+    navigateTo(`/drawe/${query.value.projectType}/${val}/${query.value.pageSize}/${query.value.editions}/${query.value.source}`)
   }
 
   const { data: result, refresh: getPage } = useAsyncData(
-    `draw-page-list-${Date.now()}`,
+    `draw-page-list-${query.value.projectType}-${query.value.editions}-${query.value.source}-${query.value.pageNo}-${query.value.pageSize}-${query.value.title}`,
     async () => {
-      const res = await page(query.value)
+      const res = await page({
+        ...query.value,
+        editions: query.value.editions === '-1' ? '' : query.value.editions,
+        source: query.value.source === -1 ? '' : query.value.source,
+        projectType: query.value.projectType === '-1' ? '' : query.value.projectType,
+      })
       return res.data
     },
     {
@@ -98,7 +112,7 @@
 
   watch([() => query.value.projectType, () => query.value.editions, () => query.value.source], (val) => {
     if (val) {
-      getPage()
+      navigateTo(`/drawe/${query.value.projectType}/1/${query.value.pageSize}/${query.value.editions}/${query.value.source}`)
     }
   })
 </script>

pages/drawe/index.vue

@@ -33,12 +33,13 @@
   import { getDictTree } from '~/api/home/index'
   import type { pageRes, pageReq } from '~/api/upnew/types'
   const route = useRoute()
+
   const level = ref(
     route.query?.valuelevel
       ? JSON.parse(route.query.valuelevel as string)
       : [
           {
-            id: '0',
+            id: -1,
             name: '图纸库',
             isChildren: false,
           },
@@ -49,9 +50,9 @@
   const query = ref<pageReq>({
     pageNo: 1,
     pageSize: 12,
-    projectType: '',
-    editions: '',
-    source: '',
+    projectType: '-1',
+    editions: '-1',
+    source: -1,
     type: 1,
     title: keywords.value,
   })
@@ -62,23 +63,30 @@
 
   // 如果id存在，则设置projectType
   if (level.value.length) {
-    query.value.projectType = level.value[level.value.length - 1].id || ''
+    // query.value.projectType = level.value[level.value.length - 1].id || ''
   }
 
   const handleClickSize = (val: number) => {
     query.value.pageSize = val
-    getPage()
+    // getPage()
+    navigateTo(`/drawe/${query.value.projectType}/${query.value.pageNo}/${val}/${query.value.editions}/${query.value.source}`)
   }
 
   const handeClickCurrent = (val: number) => {
     query.value.pageNo = val
-    getPage()
+    // getPage()
+    navigateTo(`/drawe/${query.value.projectType}/${val}/${query.value.pageSize}/${query.value.editions}/${query.value.source}`)
   }
 
   const { data: result, refresh: getPage } = useAsyncData(
-    `draw-page-list-${Date.now()}`,
+    `draw-page-list-${query.value.projectType}-${query.value.editions}-${query.value.source}-${query.value.pageNo}-${query.value.pageSize}-${query.value.title}`,
     async () => {
-      const res = await page(query.value)
+      const res = await page({
+        ...query.value,
+        editions: query.value.editions === '-1' ? '' : query.value.editions,
+        source: query.value.source === -1 ? '' : query.value.source,
+        projectType: query.value.projectType === '-1' ? '' : query.value.projectType,
+      })
       return res.data
     },
     {
@@ -97,7 +105,7 @@
 
   watch([() => query.value.projectType, () => query.value.editions, () => query.value.source], (val) => {
     if (val) {
-      getPage()
+      navigateTo(`/drawe/${query.value.projectType}/1/${query.value.pageSize}/${query.value.editions}/${query.value.source}`)
     }
   })
 </script>

pages/drawe/query-v2/[projectType]-[editions].vue

@@ -1,110 +0,0 @@
-<template>
-  <!-- 导航 -->
-  <KlNavTab active="图纸" :type="1" />
-  <div class="ma-auto w-[1440px]">
-    <!-- 图纸分类 -->
-    <KlWallpaperCategory v-model="query" v-model:level="level" :type="1" />
-    <!-- 推荐栏目 -->
-    <RecommendedColumnsV2 v-model="query" v-model:result="result"></RecommendedColumnsV2>
-    <!-- 精选专题 -->
-    <!-- <FeaturedSpecials></FeaturedSpecials> -->
-    <!-- 分页 -->
-    <div class="mt-[10px] flex justify-center">
-      <el-pagination
-        v-model:current-page="query.pageNo"
-        v-model:page-size="query.pageSize"
-        :page-sizes="[12, 24, 48]"
-        :total="result?.total"
-        layout="total, sizes, prev, pager, next, jumper"
-        @size-change="handleClickSize"
-        @current-change="handeClickCurrent"
-      />
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-  import KlNavTab from '~/components/kl-nav-tab/index.vue'
-  import KlWallpaperCategory from '~/components/kl-wallpaper-category/index.vue'
-  import RecommendedColumnsV2 from '~/components/drawe-components/RecommendedColumnsV2.vue'
-  // import FeaturedSpecials from './components/FeaturedSpecials.vue'
-  import { useRoute } from 'vue-router'
-  import { reactive, watch, ref } from 'vue'
-  import { page } from '~/api/upnew/index'
-  import { getDictTree } from '~/api/home/index'
-  import type { pageRes, pageReq } from '~/api/upnew/types'
-  const route = useRoute()
-  const level = ref(
-    route.query?.valuelevel
-      ? JSON.parse(route.query.valuelevel as string)
-      : [
-          {
-            id: '0',
-            name: '图纸库',
-            isChildren: false,
-          },
-        ]
-  )
-  const keywords = ref((route.query?.valuekeywords as string) || '')
-
-  const query = ref<pageReq>({
-    pageNo: 1,
-    pageSize: 12,
-    projectType: '',
-    editions: '',
-    source: '',
-    type: 1,
-    title: keywords.value,
-  })
-  // const result = reactive<pageRes>({
-  //   list: [],
-  //   total: 0,
-  // })
-
-  // 如果id存在，则设置projectType
-  if (level.value.length) {
-    query.value.projectType = level.value[level.value.length - 1].id || ''
-  }
-
-  const handleClickSize = (val: number) => {
-    query.value.pageSize = val
-    getPage()
-  }
-
-  const handeClickCurrent = (val: number) => {
-    query.value.pageNo = val
-    getPage()
-  }
-
-  const { data: result, refresh: getPage } = useAsyncData(
-    `draw-page-list-${Date.now()}`,
-    async () => {
-      const res = await page(query.value)
-      return res.data
-    },
-    {
-      immediate: true,
-    }
-  )
-  // const getPage = () => {
-  //   page(query).then((res) => {
-  //     const { data, code } = res
-  //     if (code === 0) {
-  //       result.list = data.list
-  //       result.total = data.total
-  //     }
-  //   })
-  // }
-
-  watch([() => query.value.projectType, () => query.value.editions, () => query.value.source], (val) => {
-    if (val) {
-      getPage()
-    }
-  })
-</script>
-<style lang="scss" scoped>
-  :deep(.el-pagination) {
-    .el-input__inner {
-      text-align: center !important;
-    }
-  }
-</style>

pages/drawe/query-v3/[projectType]-[editions]-[source].vue

@@ -1,110 +0,0 @@
-<template>
-  <!-- 导航 -->
-  <KlNavTab active="图纸" :type="1" />
-  <div class="ma-auto w-[1440px]">
-    <!-- 图纸分类 -->
-    <KlWallpaperCategory v-model="query" v-model:level="level" :type="1" />
-    <!-- 推荐栏目 -->
-    <RecommendedColumnsV2 v-model="query" v-model:result="result"></RecommendedColumnsV2>
-    <!-- 精选专题 -->
-    <!-- <FeaturedSpecials></FeaturedSpecials> -->
-    <!-- 分页 -->
-    <div class="mt-[10px] flex justify-center">
-      <el-pagination
-        v-model:current-page="query.pageNo"
-        v-model:page-size="query.pageSize"
-        :page-sizes="[12, 24, 48]"
-        :total="result?.total"
-        layout="total, sizes, prev, pager, next, jumper"
-        @size-change="handleClickSize"
-        @current-change="handeClickCurrent"
-      />
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-  import KlNavTab from '~/components/kl-nav-tab/index.vue'
-  import KlWallpaperCategory from '~/components/kl-wallpaper-category/index.vue'
-  import RecommendedColumnsV2 from '~/components/drawe-components/RecommendedColumnsV2.vue'
-  // import FeaturedSpecials from './components/FeaturedSpecials.vue'
-  import { useRoute } from 'vue-router'
-  import { reactive, watch, ref } from 'vue'
-  import { page } from '~/api/upnew/index'
-  import { getDictTree } from '~/api/home/index'
-  import type { pageRes, pageReq } from '~/api/upnew/types'
-  const route = useRoute()
-  const level = ref(
-    route.query?.valuelevel
-      ? JSON.parse(route.query.valuelevel as string)
-      : [
-          {
-            id: '0',
-            name: '图纸库',
-            isChildren: false,
-          },
-        ]
-  )
-  const keywords = ref((route.query?.valuekeywords as string) || '')
-
-  const query = ref<pageReq>({
-    pageNo: 1,
-    pageSize: 12,
-    projectType: '',
-    editions: '',
-    source: '',
-    type: 1,
-    title: keywords.value,
-  })
-  // const result = reactive<pageRes>({
-  //   list: [],
-  //   total: 0,
-  // })
-
-  // 如果id存在，则设置projectType
-  if (level.value.length) {
-    query.value.projectType = level.value[level.value.length - 1].id || ''
-  }
-
-  const handleClickSize = (val: number) => {
-    query.value.pageSize = val
-    getPage()
-  }
-
-  const handeClickCurrent = (val: number) => {
-    query.value.pageNo = val
-    getPage()
-  }
-
-  const { data: result, refresh: getPage } = useAsyncData(
-    `draw-page-list-${Date.now()}`,
-    async () => {
-      const res = await page(query.value)
-      return res.data
-    },
-    {
-      immediate: true,
-    }
-  )
-  // const getPage = () => {
-  //   page(query).then((res) => {
-  //     const { data, code } = res
-  //     if (code === 0) {
-  //       result.list = data.list
-  //       result.total = data.total
-  //     }
-  //   })
-  // }
-
-  watch([() => query.value.projectType, () => query.value.editions, () => query.value.source], (val) => {
-    if (val) {
-      getPage()
-    }
-  })
-</script>
-<style lang="scss" scoped>
-  :deep(.el-pagination) {
-    .el-input__inner {
-      text-align: center !important;
-    }
-  }
-</style>