wangqiao/front-pc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor drawing query pages and routing structure

Browse Source
This commit is contained in:
wangqiao
2025-08-29 17:40:54 +08:00
parent a2c2a87e38
commit 7fe259299e
7 changed files with 345 additions and 565 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/drawe-components/RecommendedColumnsV2.vue
View File

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

226
components/kl-wallpaper-category/index.vue
View File

@ -2,29 +2,37 @@
<!-- 面包屑 --> <!-- 面包屑 -->
<div v-if="level.length > 1" class="mb-[-10px] mt-[20px] pl-[20px]"> <div v-if="level.length > 1" class="mb-[-10px] mt-[20px] pl-[20px]">
<el-breadcrumb :separator-icon="ArrowRight"> <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
item.name }}</el-breadcrumb-item>
}}</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div> </div>
<div class="mt-[30px] box-border w-[100%] border border-[#EEEEEE] rounded-[12px] border-solid bg-[#FFFFFF] px-[20px] py-[26px]"> <div class="mt-[30px] box-border w-[100%] border border-[#EEEEEE] rounded-[12px] border-solid bg-[#FFFFFF] px-[20px] py-[26px]">
<div class="mb-[14px] flex items-start"> <div class="mb-[14px] flex items-start">
<div class="flex-shrink-0 text-[15px] text-[#333333] font-normal">{{ computType }}分类</div> <div class="flex-shrink-0 text-[15px] text-[#333333] font-normal">{{ computType }}分类</div>
<div class="ml-[30px] mt-[-6px] flex flex-wrap"> <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="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> </div>
<div class="flex items-start"> <div class="flex items-start">
<div class="flex-shrink-0 text-[15px] text-[#333333] font-normal">软件分类</div> <div class="flex-shrink-0 text-[15px] text-[#333333] font-normal">软件分类</div>
<div class="ml-[30px] mt-[-6px] flex flex-wrap"> <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="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> </div>
<!-- <div class="mb-14px flex items-start"> <!-- <div class="mb-14px flex items-start">
@ -43,123 +51,115 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref } from 'vue' import { computed, ref } from 'vue'
import { parent } from '~/api/upnew/index' import { parent } from '~/api/upnew/index'
import type { pageReq } from '~/api/upnew/types' import type { pageReq } from '~/api/upnew/types'
import { ArrowRight } from '@element-plus/icons-vue' import { ArrowRight } from '@element-plus/icons-vue'
const props = defineProps({ const props = defineProps({
type: { type: {
type: Number, type: Number,
default: 1, default: 1,
}, },
id: { id: {
type: String, type: String,
default: '', default: '',
}, },
groundId: { groundId: {
type: String, type: String,
default: '', default: '',
}, },
}) })
const query = defineModel<pageReq>('modelValue', { const query = defineModel<pageReq>('modelValue', {
required: true, required: true,
}) })
const level = defineModel<{ id: string; name: string; isChildren?: boolean }[]>('level', { const level = defineModel<{ id: string; name: string; isChildren?: boolean }[]>('level', {
required: true, required: true,
}) })
const computType = computed(() => { const computType = computed(() => {
return props.type === 1 ? '图纸' : props.type === 3 ? '模型' : '文本' 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)) {
return level.value[level.value.length - 2].id || '' // 获取最后一个元素的 id 或 defaul
}
return level.value[level.value.length - 1].id || '' // 获取最后一个元素的 id 或 defaul
const handleParentId = (type?: string) => {
if (level?.value?.length > 1) {
if (type === 'init' && level.value.find((c: any) => c.isChildren)) {
return level.value[level.value.length - 2].id || '' // 获取最后一个元素的 id 或 defaul
} }
return level.value[level.value.length - 1].id || '' // 获取最后一个元素的 id 或 defaul return '0'
} }
return '0'
}
// const projectTypeList = ref<any>([]) // const projectTypeList = ref<any>([])
/** 获取分类下拉框 */ /** 获取分类下拉框 */
// const getParent = (type?: string) => { // const getParent = (type?: string) => {
// parent({ // parent({
// type: 1, // type: 1,
// parentId: handleParentId(type), // parentId: handleParentId(type),
// }).then((res) => { // }).then((res) => {
// if (Array.isArray(res.data)) { // if (Array.isArray(res.data)) {
// // projectTypeList.value = [...[{ id: handleParentId(type), name: '全部' }], ...res.data] // // projectTypeList.value = [...[{ id: handleParentId(type), name: '全部' }], ...res.data]
// } // }
// }) // })
// } // }
// getParent('init') // getParent('init')
/** 版本 */ /** 版本 */
// const editionsList = ref<any>([]) // const editionsList = ref<any>([])
// const getEditionsList = () => { // const getEditionsList = () => {
// parent({ // parent({
// type: 2, // type: 2,
// parentId: 0, // parentId: 0,
// }).then((res) => { // }).then((res) => {
// if (Array.isArray(res.data)) { // if (Array.isArray(res.data)) {
// // editionsList.value = [...[{ id: '', name: '全部' }], ...res.data] // // editionsList.value = [...[{ id: '', name: '全部' }], ...res.data]
// } // }
// }) // })
// } // }
// getEditionsList() // 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: '-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: '-1', name: '全部' }]
return [...all, ...res.data]
})
/** 是否是初始化 */ const handleClick = (row: any) => {
const queryType = ref('init') query.value.title = ''
/**获取分类下拉框 */ query.value.projectType = row.id
const { data: projectTypeList, refresh } = useAsyncData(`projectType-draw-${props.type}-${Date.now()}`, async () => { if (row.name === '全部') return
const res = await parent({ type: 1, parentId: handleParentId(queryType.value) }) const isChildren = level.value.find((c: any) => c.isChildren)
const all= [{ id: handleParentId(queryType.value), name: '全部' }] if (!row.isChildren && isChildren) {
return [...all, ...res.data] const index = level.value.length - 1
}) level.value[index] = { id: row.id, name: row.name, isChildren: true }
} else if (!row.isChildren && !isChildren) {
level.value.push({ id: row.id, name: row.name, isChildren: true })
} else {
level.value.push({ id: row.id, name: row.name })
// getParent()
queryType.value = ''
refresh()
}
}
/** 版本 */ const handleClickBread = (row: any, index: number) => {
const { data: editionsList } = useAsyncData(`editionsList-${props.type}-${Date.now()}`, async () => { level.value.splice(index + 1)
const res = await parent({ type: 2, parentId: 0 }) query.value.title = ''
const all = [{ id: '', name: '全部' }] query.value.projectType = row.id
return [...all, ...res.data]
})
const handleClick = (row: any) => {
query.value.title = ''
query.value.projectType = row.id
if (row.name === '全部') return
const isChildren = level.value.find((c: any) => c.isChildren)
if (!row.isChildren && isChildren) {
const index = level.value.length - 1
level.value[index] = { id: row.id, name: row.name, isChildren: true }
} else if (!row.isChildren && !isChildren) {
level.value.push({ id: row.id, name: row.name, isChildren: true })
} else {
level.value.push({ id: row.id, name: row.name })
// getParent() // getParent()
queryType.value = '' queryType.value = ''
refresh() refresh()
} }
}
const handleClickBread = (row: any, index: number) => {
level.value.splice(index + 1)
query.value.title = ''
query.value.projectType = row.id
// getParent()
queryType.value = ''
refresh()
}
</script> </script>

40
pages/drawe/query-v1/[projectType].vue → pages/drawe/[projectType]/[pageNo]/[pageSize]/[[editions]]/[[source]].vue
View File

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

28
pages/drawe/index.vue
View File

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

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

@ -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>

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

@ -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>

394
pages/home/components/SideMenu.vue
View File

@ -11,30 +11,16 @@
<!-- @click="handleSubmenuClick(item)" --> <!-- @click="handleSubmenuClick(item)" -->
{{ item.name }} {{ 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="submenu-content">
<!-- <div class="text-right">更多</div> --> <!-- <div class="text-right">更多</div> -->
<div class="submenu-group"> <div class="submenu-group">
<template v-for="group in item.children" :key="group.id"> <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 }} {{ group.name }}
</div> </div>
<div class="submenu-group-items"> <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 }} {{ sub.name }}
</div> </div>
</div> </div>
@ -47,134 +33,126 @@
</template> </template>
<script setup lang="ts"> <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 submenuLeft = ref(0)
const sideMenu = ref(); const sideMenu = ref()
const menuItemRefs = ref<HTMLElement[]>([]); const menuItemRefs = ref<HTMLElement[]>([])
// const menuItems = ref<ProjectDictNodeVO[]>([]); // const menuItems = ref<ProjectDictNodeVO[]>([]);
// 等待数据加载完成再进行渲染 :courseData 对data进行别名赋值 // 等待数据加载完成再进行渲染 :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 res = await tab2()
const arr = []; const arr = []
for (let i = 0; i < res.data?.length; i += 2) { for (let i = 0; i < res.data?.length; i += 2) {
arr.push({ arr.push({
children: res.data.slice(i, i + 2), children: res.data.slice(i, i + 2),
name: getName(res.data.slice(i, i + 2)), name: getName(res.data.slice(i, i + 2)),
}); })
} }
return arr return arr
} })
)
const showSubMenu = (index: number) => {
// if (menuItems.value.length === index + 1) {
// return
const showSubMenu = (index: number) => { // }
// if (menuItems.value.length === index + 1) { activeIndex.value = index
// return const dom = menuItemRefs.value[index].getBoundingClientRect()
// } console.log(dom)
activeIndex.value = index; // submenuTop.value = window.scrollY
const dom = menuItemRefs.value[index].getBoundingClientRect();
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 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 getName = (arr: any[]) => { const handleSubmenuClick = (primary: ProjectDictNodeVO) => {
if (arr.length === 1) { // const normal = { id: "0", name: "图纸库", isChildren: false };
return arr[0].name; // const level = [primary, secondary, tertiary]
} else { // .filter(Boolean)
return arr[0].name + " / " + arr[1].name; // .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 init = () => { const keepSubmenuVisible = () => {
// 获取标签 // activeIndex.value = activeIndex.value // 保持当前索引
// getLabel() }
};
onMounted(() => { const setMenuItemRef = (el: Element | ComponentPublicInstance | null, index: number) => {
// init(); if (el && 'offsetTop' in el) {
}); menuItemRefs.value[index] = el as HTMLElement
}
}
const getName = (arr: any[]) => {
if (arr.length === 1) {
return arr[0].name
} else {
return arr[0].name + ' / ' + arr[1].name
}
}
const init = () => {
// 获取标签
// getLabel()
}
onMounted(() => {
// init();
})
</script> </script>
<style scoped> <style scoped>
.side-menu { .side-menu {
width: 221px; width: 221px;
background-color: #fff; background-color: #fff;
/* padding: 10px 0; */ /* padding: 10px 0; */
/* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */ /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
/* overflow: visible; */ /* overflow: visible; */
box-sizing: border-box; box-sizing: border-box;
position: relative; /* 添加定位上下文 */ position: relative; /* 添加定位上下文 */
/* overflow-y: auto; */ /* overflow-y: auto; */
/* 隐藏滚动条 */ /* 隐藏滚动条 */
scrollbar-width: none; /* Firefox */ scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE and Edge */ -ms-overflow-style: none; /* IE and Edge */
z-index: 9; z-index: 9;
/* padding-top: 10px; */ /* padding-top: 10px; */
} }
/* 隐藏 Webkit 浏览器的滚动条 */ /* 隐藏 Webkit 浏览器的滚动条 */
.side-menu::-webkit-scrollbar { .side-menu::-webkit-scrollbar {
display: none; display: none;
} }
/* 鼠标悬停时显示滚动条 */ /* 鼠标悬停时显示滚动条 */
.side-menu:hover { .side-menu:hover {
scrollbar-width: none; /* Firefox */ scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE and Edge */ -ms-overflow-style: none; /* IE and Edge */
} }
/* .side-menu:hover::-webkit-scrollbar { /* .side-menu:hover::-webkit-scrollbar {
display: block; display: block;
width: 8px !important; width: 8px !important;
} }
@ -188,44 +166,44 @@ onMounted(() => {
background-color: #fff; background-color: #fff;
} */ } */
.menu-item { .menu-item {
/* position: relative; */ /* position: relative; */
text-align: center; text-align: center;
padding: 11px 24px; padding: 11px 24px;
cursor: pointer; cursor: pointer;
/* transition: all 0.3s ease; */ /* transition: all 0.3s ease; */
color: #333; color: #333;
font-size: 14px; font-size: 14px;
border: 1px solid transparent; border: 1px solid transparent;
z-index: 9; z-index: 9;
} }
.menu-item:hover { .menu-item:hover {
background-color: #fff; background-color: #fff;
color: #1890ff; color: #1890ff;
border: 1px solid #1890ff; border: 1px solid #1890ff;
border-right: transparent !important; border-right: transparent !important;
} }
.submenu-panel { .submenu-panel {
position: absolute; position: absolute;
left: 220px; left: 220px;
top: 0; top: 0;
width: 957px; width: 957px;
background: #fff; background: #fff;
/* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); */ /* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); */
border: 1px solid #1890ff; border: 1px solid #1890ff;
/* border-radius: 4px; */ /* border-radius: 4px; */
display: flex; display: flex;
padding: 20px; padding: 20px;
z-index: -1; z-index: -1;
box-sizing: border-box; box-sizing: border-box;
min-height: 480px; min-height: 480px;
overflow-y: auto; overflow-y: auto;
} }
.submenu-panel::before { .submenu-panel::before {
/* content: ''; /* content: '';
position: absolute; position: absolute;
left: -6px; left: -6px;
top: 50%; top: 50%;
@ -236,61 +214,61 @@ onMounted(() => {
border-bottom: 8px solid transparent; border-bottom: 8px solid transparent;
border-right: 8px solid #fff; border-right: 8px solid #fff;
filter: drop-shadow(-2px 0 2px rgba(0, 0, 0, 0.1)); */ filter: drop-shadow(-2px 0 2px rgba(0, 0, 0, 0.1)); */
} }
.submenu-content { .submenu-content {
/* flex: 1; */ /* flex: 1; */
/* display: grid; */ /* display: grid; */
/* grid-template-columns: repeat(3, 1fr); */ /* grid-template-columns: repeat(3, 1fr); */
/* gap: 15px; */ /* gap: 15px; */
width: 100%; width: 100%;
display: flex;
flex-direction: column;
.submenu-group {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; .submenu-group {
flex-wrap: wrap; display: flex;
-webkit-column-break-inside: avoid; /* 兼容webkit内核 */ flex-direction: column;
/* border: 1px solid #e6e8eb; */
.submenu-group-title {
font-size: 15px;
/* font-weight: 700; */
padding: 10px 16px;
color: #000;
font-weight: 600;
transition: all 0.2s;
/* border-bottom: 1px solid #e6e8eb; */
}
.submenu-group-title:hover {
color: #1890ff;
/* border-bottom: 1px solid #e6e8eb; */
}
.submenu-group-items {
display: flex !important;
flex-direction: row;
align-items: flex-start; align-items: flex-start;
flex-wrap: wrap; flex-wrap: wrap;
color: #666; -webkit-column-break-inside: avoid; /* 兼容webkit内核 */
padding: 0px 16px; /* border: 1px solid #e6e8eb; */
gap: 10px; .submenu-group-title {
.submenu-item { font-size: 15px;
cursor: pointer; /* font-weight: 700; */
padding: 10px 16px;
color: #000;
font-weight: 600;
transition: all 0.2s;
/* border-bottom: 1px solid #e6e8eb; */
}
.submenu-group-title:hover {
color: #1890ff;
/* border-bottom: 1px solid #e6e8eb; */
}
.submenu-group-items {
display: flex !important;
flex-direction: row;
align-items: flex-start;
flex-wrap: wrap;
color: #666;
padding: 0px 16px;
gap: 10px;
.submenu-item {
cursor: pointer;
}
} }
} }
} }
}
.submenu-item { .submenu-item {
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
display: inline-block; /* 改为行内块元素 */ display: inline-block; /* 改为行内块元素 */
/* padding: 8px 12px; */ /* padding: 8px 12px; */
padding-right: 12px; padding-right: 12px;
/* padding-bottom: 8px; */ /* padding-bottom: 8px; */
} }
.submenu-item:hover { .submenu-item:hover {
color: #1890ff; color: #1890ff;
} }
</style> </style>