Refactor drawing query pages and routing structure

components/drawe-components/RecommendedColumnsV2.vue

@@ -34,7 +34,7 @@
   const tabBar = ref([
     {
       label: '图纸推荐',
-      value: '',
+      value: -1,
     },
     {
       label: '原创图纸',

components/kl-wallpaper-category/index.vue

@@ -2,8 +2,7 @@
   <!-- 面包屑 -->
   <div v-if="level.length > 1" class="mb-[-10px] mt-[20px] pl-[20px]">
     <el-breadcrumb :separator-icon="ArrowRight">
-      <el-breadcrumb-item v-for="(item, index) in level" :key="item.name" class="cursor-pointer"
+      <el-breadcrumb-item v-for="(item, index) in level" :key="item.name" class="cursor-pointer" @click="handleClickBread(item, index)">{{
-        @click="handleClickBread(item, index)">{{
         item.name
       }}</el-breadcrumb-item>
     </el-breadcrumb>
@@ -12,19 +11,28 @@
     <div class="mb-[14px] flex items-start">
       <div class="flex-shrink-0 text-[15px] text-[#333333] font-normal">{{ computType }}分类</div>
       <div class="ml-[30px] mt-[-6px] flex flex-wrap">
-        <div v-for="(item, index) in projectTypeList" :key="index"
+        <div
+          v-for="(item, index) in projectTypeList"
+          :key="index"
           class="mb-[8px] mr-[26px] cursor-pointer rounded-[15px] px-[15px] py-[6px] text-[14px] text-[#666666] font-normal"
-          :class="item.id === query.projectType ? '!bg-[#ebeefe] !text-[#1A65FF]' : ''" @click="handleClick(item)">{{
+          :class="item.id === query.projectType ? '!bg-[#ebeefe] !text-[#1A65FF]' : ''"
-            item.name }}</div>
+          @click="handleClick(item)"
+          >{{ item.name }}</div
+        >
       </div>
     </div>
     <div class="flex items-start">
       <div class="flex-shrink-0 text-[15px] text-[#333333] font-normal">软件分类</div>
       <div class="ml-[30px] mt-[-6px] flex flex-wrap">
-        <div v-for="(item, index) in editionsList" :key="index"
+        <div
+          v-for="(item, index) in editionsList"
+          :key="index"
           class="mb-[8px] mr-[26px] cursor-pointer rounded-[15px] px-[15px] py-[6px] text-[14px] text-[#666666] font-normal"
-          :class="item.id === query.editions ? '!bg-[#ebeefe] !text-[#1A65FF]' : ''" @click="query.editions = item.id">
+          :class="item.id === query.editions ? '!bg-[#ebeefe] !text-[#1A65FF]' : ''"
-          {{ item.name }}</div>
+          @click="query.editions = item.id"
+        >
+          {{ item.name }}</div
+        >
       </div>
     </div>
     <!-- <div class="mb-14px flex items-start">
@@ -74,12 +82,6 @@ const computType = computed(() => {
     return props.type === 1 ? '图纸' : props.type === 3 ? '模型' : '文本'
   })
 
-
-
-
-
-
-
   const handleParentId = (type?: string) => {
     if (level?.value?.length > 1) {
       if (type === 'init' && level.value.find((c: any) => c.isChildren)) {
@@ -118,21 +120,19 @@ const handleParentId = (type?: string) => {
   // }
   // getEditionsList()
 
-
-
   /** 是否是初始化 */
   const queryType = ref('init')
   /**获取分类下拉框 */
   const { data: projectTypeList, refresh } = useAsyncData(`projectType-draw-${props.type}-${Date.now()}`, async () => {
     const res = await parent({ type: 1, parentId: handleParentId(queryType.value) })
-   const all= [{ id: handleParentId(queryType.value), name: '全部' }]
+    const all = [{ id: '-1', name: '全部' }]
     return [...all, ...res.data]
   })
 
   /** 版本 */
   const { data: editionsList } = useAsyncData(`editionsList-${props.type}-${Date.now()}`, async () => {
     const res = await parent({ type: 2, parentId: 0 })
-  const all = [{ id: '', name: '全部' }]
+    const all = [{ id: '-1', name: '全部' }]
     return [...all, ...res.data]
   })
 

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,
+    pageNo: pageNo.value || 1,
-    pageSize: 12,
+    pageSize: pageSize.value || 12,
-    projectType: projectType.value,
+    projectType: projectType.value || '-1',
-    editions: '',
+    editions: editions.value || '-1',
-    source: '',
+    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: '',
+    projectType: '-1',
-    editions: '',
+    editions: '-1',
-    source: '',
+    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>

pages/home/components/SideMenu.vue

@@ -11,30 +11,16 @@
       <!-- @click="handleSubmenuClick(item)" -->
       {{ item.name }}
       <!-- 悬浮浮窗 -->
-      <div
+      <div v-if="activeIndex === index" class="submenu-panel" :style="{ top: submenuTop + 'px' }" @mouseenter="keepSubmenuVisible" @mouseleave="hideSubMenu">
-        v-if="activeIndex === index"
-        class="submenu-panel"
-        :style="{ top: submenuTop + 'px' }"
-        @mouseenter="keepSubmenuVisible"
-        @mouseleave="hideSubMenu"
-      >
         <div class="submenu-content">
           <!-- <div class="text-right">更多</div> -->
           <div class="submenu-group">
             <template v-for="group in item.children" :key="group.id">
-              <div
+              <div class="submenu-group-title" @click.stop="handleSubmenuClick(group)">
-                class="submenu-group-title"
-                @click.stop="handleSubmenuClick(group)"
-              >
                 {{ group.name }}
               </div>
               <div class="submenu-group-items">
-                <div
+                <div v-for="sub in group.children" :key="sub.id" class="submenu-item" @click.stop="handleSubmenuClick(sub)">
-                  v-for="sub in group.children"
-                  :key="sub.id"
-                  class="submenu-item"
-                  @click.stop="handleSubmenuClick(group, sub)"
-                >
                   {{ sub.name }}
                 </div>
               </div>
@@ -47,103 +33,95 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+  import { ref, onMounted } from 'vue'
-import type { ComponentPublicInstance } from "vue";
+  import type { ComponentPublicInstance } from 'vue'
-import { tab2 } from "~/api/home/index";
+  import { tab2 } from '~/api/home/index'
-import type { ProjectDictNodeVO } from "~/api/home/type";
+  import type { ProjectDictNodeVO } from '~/api/home/type'
 
-const activeIndex = ref(-1);
+  const activeIndex = ref(-1)
-const submenuTop = ref(0);
+  const submenuTop = ref(0)
   // const submenuLeft = ref(0)
-const sideMenu = ref();
+  const sideMenu = ref()
-const menuItemRefs = ref<HTMLElement[]>([]);
+  const menuItemRefs = ref<HTMLElement[]>([])
 
   // const menuItems = ref<ProjectDictNodeVO[]>([]);
 
   // 等待数据加载完成再进行渲染 :courseData 对data进行别名赋值
-const { data: menuItems, pending, error } = useAsyncData(
+  const {
-  'tab2-list',
+    data: menuItems,
-  async () => {
+    pending,
+    error,
+  } = useAsyncData('tab2-list', async () => {
     const res = await tab2()
-      const arr = [];
+    const arr = []
     for (let i = 0; i < res.data?.length; i += 2) {
       arr.push({
         children: res.data.slice(i, i + 2),
         name: getName(res.data.slice(i, i + 2)),
-        });
+      })
     }
     return arr
-  }
+  })
-)
-
-
-
 
   const showSubMenu = (index: number) => {
     // if (menuItems.value.length === index + 1) {
     //   return
     // }
-  activeIndex.value = index;
+    activeIndex.value = index
-  const dom = menuItemRefs.value[index].getBoundingClientRect();
+    const dom = menuItemRefs.value[index].getBoundingClientRect()
-  console.log(dom);
+    console.log(dom)
     // submenuTop.value = window.scrollY
-};
-
-const hideSubMenu = () => {
-  activeIndex.value = -1;
-};
-
-const handleSubmenuClick = (
-  primary?: ProjectDictNodeVO,
-  secondary?: ProjectDictNodeVO,
-  tertiary?: ProjectDictNodeVO
-) => {
-  const normal = { id: "0", name: "图纸库", isChildren: false };
-  const level = [primary, secondary, tertiary]
-    .filter(Boolean)
-    .map((item) => ({
-      id: item?.id,
-      name: item?.name,
-      isChildren: item?.children?.length ? false : true,
-    }));
-  if (primary?.id === "0") {
-    level[0].name = "图纸库";
-  } else {
-    level.unshift(normal);
   }
 
-  navigateTo(`/drawe?level=${JSON.stringify(level)}`);
+  const hideSubMenu = () => {
-};
+    activeIndex.value = -1
+  }
+
+  const handleSubmenuClick = (primary: ProjectDictNodeVO) => {
+    // const normal = { id: "0", name: "图纸库", isChildren: false };
+    // const level = [primary, secondary, tertiary]
+    //   .filter(Boolean)
+    //   .map((item) => ({
+    //     id: item?.id,
+    //     name: item?.name,
+    //     isChildren: item?.children?.length ? false : true,
+    //   }));
+    // if (primary?.id === "0") {
+    //   level[0].name = "图纸库";
+    // } else {
+    //   level.unshift(normal);
+    // }
+
+    // navigateTo(`/drawe?level=${JSON.stringify(level)}`)
+    navigateTo(`/drawe/${primary.id}/1/12/-1`)
+  }
 
   const keepSubmenuVisible = () => {
     // activeIndex.value = activeIndex.value // 保持当前索引
-};
-
-const setMenuItemRef = (
-  el: Element | ComponentPublicInstance | null,
-  index: number
-) => {
-  if (el && "offsetTop" in el) {
-    menuItemRefs.value[index] = el as HTMLElement;
   }
-};
+
+  const setMenuItemRef = (el: Element | ComponentPublicInstance | null, index: number) => {
+    if (el && 'offsetTop' in el) {
+      menuItemRefs.value[index] = el as HTMLElement
+    }
+  }
 
   const getName = (arr: any[]) => {
     if (arr.length === 1) {
-    return arr[0].name;
+      return arr[0].name
     } else {
-    return arr[0].name + " / " + arr[1].name;
+      return arr[0].name + ' / ' + arr[1].name
+    }
   }
-};
 
   const init = () => {
     // 获取标签
     // getLabel()
-};
+  }
 
   onMounted(() => {
     // init();
-});
+  })
 </script>
 
 <style scoped>