Refactor drawing query pages and routing structure
This commit is contained in:
wangqiao
@ -34,7 +34,7 @@
|
||||
const tabBar = ref([
|
||||
{
|
||||
label: '图纸推荐',
|
||||
value: '',
|
||||
value: -1,
|
||||
},
|
||||
{
|
||||
label: '原创图纸',
|
||||
|
||||
@ -2,29 +2,37 @@
|
||||
<!-- 面包屑 -->
|
||||
<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"
|
||||
@click="handleClickBread(item, index)">{{
|
||||
item.name
|
||||
}}</el-breadcrumb-item>
|
||||
<el-breadcrumb-item v-for="(item, index) in level" :key="item.name" class="cursor-pointer" @click="handleClickBread(item, index)">{{
|
||||
item.name
|
||||
}}</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<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="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)">{{
|
||||
item.name }}</div>
|
||||
:class="item.id === query.projectType ? '!bg-[#ebeefe] !text-[#1A65FF]' : ''"
|
||||
@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">
|
||||
{{ item.name }}</div>
|
||||
:class="item.id === query.editions ? '!bg-[#ebeefe] !text-[#1A65FF]' : ''"
|
||||
@click="query.editions = item.id"
|
||||
>
|
||||
{{ item.name }}</div
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="mb-14px flex items-start">
|
||||
@ -43,123 +51,115 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { parent } from '~/api/upnew/index'
|
||||
import type { pageReq } from '~/api/upnew/types'
|
||||
import { ArrowRight } from '@element-plus/icons-vue'
|
||||
import { computed, ref } from 'vue'
|
||||
import { parent } from '~/api/upnew/index'
|
||||
import type { pageReq } from '~/api/upnew/types'
|
||||
import { ArrowRight } from '@element-plus/icons-vue'
|
||||
|
||||
const props = defineProps({
|
||||
type: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
groundId: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
})
|
||||
const props = defineProps({
|
||||
type: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
groundId: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
})
|
||||
|
||||
const query = defineModel<pageReq>('modelValue', {
|
||||
required: true,
|
||||
})
|
||||
const level = defineModel<{ id: string; name: string; isChildren?: boolean }[]>('level', {
|
||||
required: true,
|
||||
})
|
||||
const query = defineModel<pageReq>('modelValue', {
|
||||
required: true,
|
||||
})
|
||||
const level = defineModel<{ id: string; name: string; isChildren?: boolean }[]>('level', {
|
||||
required: true,
|
||||
})
|
||||
|
||||
const computType = computed(() => {
|
||||
return props.type === 1 ? '图纸' : props.type === 3 ? '模型' : '文本'
|
||||
})
|
||||
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)) {
|
||||
return level.value[level.value.length - 2].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 level.value[level.value.length - 1].id || '' // 获取最后一个元素的 id 或 defaul
|
||||
return '0'
|
||||
}
|
||||
return '0'
|
||||
}
|
||||
|
||||
// const projectTypeList = ref<any>([])
|
||||
/** 获取分类下拉框 */
|
||||
// const getParent = (type?: string) => {
|
||||
// parent({
|
||||
// type: 1,
|
||||
// parentId: handleParentId(type),
|
||||
// }).then((res) => {
|
||||
// if (Array.isArray(res.data)) {
|
||||
// // projectTypeList.value = [...[{ id: handleParentId(type), name: '全部' }], ...res.data]
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
// getParent('init')
|
||||
// const projectTypeList = ref<any>([])
|
||||
/** 获取分类下拉框 */
|
||||
// const getParent = (type?: string) => {
|
||||
// parent({
|
||||
// type: 1,
|
||||
// parentId: handleParentId(type),
|
||||
// }).then((res) => {
|
||||
// if (Array.isArray(res.data)) {
|
||||
// // projectTypeList.value = [...[{ id: handleParentId(type), name: '全部' }], ...res.data]
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
// getParent('init')
|
||||
|
||||
/** 版本 */
|
||||
// const editionsList = ref<any>([])
|
||||
// const getEditionsList = () => {
|
||||
// parent({
|
||||
// type: 2,
|
||||
// parentId: 0,
|
||||
// }).then((res) => {
|
||||
// if (Array.isArray(res.data)) {
|
||||
// // editionsList.value = [...[{ id: '', name: '全部' }], ...res.data]
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
// getEditionsList()
|
||||
/** 版本 */
|
||||
// const editionsList = ref<any>([])
|
||||
// const getEditionsList = () => {
|
||||
// parent({
|
||||
// type: 2,
|
||||
// parentId: 0,
|
||||
// }).then((res) => {
|
||||
// if (Array.isArray(res.data)) {
|
||||
// // editionsList.value = [...[{ id: '', name: '全部' }], ...res.data]
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
// 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 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: '全部' }]
|
||||
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()
|
||||
queryType.value = ''
|
||||
refresh()
|
||||
}
|
||||
}
|
||||
|
||||
/** 版本 */
|
||||
const { data: editionsList } = useAsyncData(`editionsList-${props.type}-${Date.now()}`, async () => {
|
||||
const res = await parent({ type: 2, parentId: 0 })
|
||||
const all = [{ id: '', name: '全部' }]
|
||||
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 })
|
||||
const handleClickBread = (row: any, index: number) => {
|
||||
level.value.splice(index + 1)
|
||||
query.value.title = ''
|
||||
query.value.projectType = row.id
|
||||
// getParent()
|
||||
queryType.value = ''
|
||||
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>
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -11,30 +11,16 @@
|
||||
<!-- @click="handleSubmenuClick(item)" -->
|
||||
{{ item.name }}
|
||||
<!-- 悬浮浮窗 -->
|
||||
<div
|
||||
v-if="activeIndex === index"
|
||||
class="submenu-panel"
|
||||
:style="{ top: submenuTop + 'px' }"
|
||||
@mouseenter="keepSubmenuVisible"
|
||||
@mouseleave="hideSubMenu"
|
||||
>
|
||||
<div 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
|
||||
class="submenu-group-title"
|
||||
@click.stop="handleSubmenuClick(group)"
|
||||
>
|
||||
<div class="submenu-group-title" @click.stop="handleSubmenuClick(group)">
|
||||
{{ group.name }}
|
||||
</div>
|
||||
<div class="submenu-group-items">
|
||||
<div
|
||||
v-for="sub in group.children"
|
||||
:key="sub.id"
|
||||
class="submenu-item"
|
||||
@click.stop="handleSubmenuClick(group, sub)"
|
||||
>
|
||||
<div v-for="sub in group.children" :key="sub.id" class="submenu-item" @click.stop="handleSubmenuClick(sub)">
|
||||
{{ sub.name }}
|
||||
</div>
|
||||
</div>
|
||||
@ -47,134 +33,126 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import type { ComponentPublicInstance } from "vue";
|
||||
import { tab2 } from "~/api/home/index";
|
||||
import type { ProjectDictNodeVO } from "~/api/home/type";
|
||||
import { ref, onMounted } from 'vue'
|
||||
import type { ComponentPublicInstance } from 'vue'
|
||||
import { tab2 } from '~/api/home/index'
|
||||
import type { ProjectDictNodeVO } from '~/api/home/type'
|
||||
|
||||
const activeIndex = ref(-1);
|
||||
const submenuTop = ref(0);
|
||||
// const submenuLeft = ref(0)
|
||||
const sideMenu = ref();
|
||||
const menuItemRefs = ref<HTMLElement[]>([]);
|
||||
const activeIndex = ref(-1)
|
||||
const submenuTop = ref(0)
|
||||
// const submenuLeft = ref(0)
|
||||
const sideMenu = ref()
|
||||
const menuItemRefs = ref<HTMLElement[]>([])
|
||||
|
||||
// const menuItems = ref<ProjectDictNodeVO[]>([]);
|
||||
// const menuItems = ref<ProjectDictNodeVO[]>([]);
|
||||
|
||||
// 等待数据加载完成再进行渲染 :courseData 对data进行别名赋值
|
||||
const { data: menuItems, pending, error } = useAsyncData(
|
||||
'tab2-list',
|
||||
async () => {
|
||||
// 等待数据加载完成再进行渲染 :courseData 对data进行别名赋值
|
||||
const {
|
||||
data: menuItems,
|
||||
pending,
|
||||
error,
|
||||
} = useAsyncData('tab2-list', async () => {
|
||||
const res = await tab2()
|
||||
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)),
|
||||
});
|
||||
}
|
||||
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;
|
||||
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);
|
||||
const showSubMenu = (index: number) => {
|
||||
// if (menuItems.value.length === index + 1) {
|
||||
// return
|
||||
// }
|
||||
activeIndex.value = index
|
||||
const dom = menuItemRefs.value[index].getBoundingClientRect()
|
||||
console.log(dom)
|
||||
// submenuTop.value = window.scrollY
|
||||
}
|
||||
|
||||
navigateTo(`/drawe?level=${JSON.stringify(level)}`);
|
||||
};
|
||||
|
||||
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 hideSubMenu = () => {
|
||||
activeIndex.value = -1
|
||||
}
|
||||
};
|
||||
|
||||
const getName = (arr: any[]) => {
|
||||
if (arr.length === 1) {
|
||||
return arr[0].name;
|
||||
} else {
|
||||
return arr[0].name + " / " + arr[1].name;
|
||||
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 init = () => {
|
||||
// 获取标签
|
||||
// getLabel()
|
||||
};
|
||||
const keepSubmenuVisible = () => {
|
||||
// activeIndex.value = activeIndex.value // 保持当前索引
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// init();
|
||||
});
|
||||
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
|
||||
} else {
|
||||
return arr[0].name + ' / ' + arr[1].name
|
||||
}
|
||||
}
|
||||
|
||||
const init = () => {
|
||||
// 获取标签
|
||||
// getLabel()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// init();
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.side-menu {
|
||||
width: 221px;
|
||||
background-color: #fff;
|
||||
/* padding: 10px 0; */
|
||||
/* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
|
||||
/* overflow: visible; */
|
||||
box-sizing: border-box;
|
||||
position: relative; /* 添加定位上下文 */
|
||||
/* overflow-y: auto; */
|
||||
/* 隐藏滚动条 */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
z-index: 9;
|
||||
/* padding-top: 10px; */
|
||||
}
|
||||
.side-menu {
|
||||
width: 221px;
|
||||
background-color: #fff;
|
||||
/* padding: 10px 0; */
|
||||
/* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
|
||||
/* overflow: visible; */
|
||||
box-sizing: border-box;
|
||||
position: relative; /* 添加定位上下文 */
|
||||
/* overflow-y: auto; */
|
||||
/* 隐藏滚动条 */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
z-index: 9;
|
||||
/* padding-top: 10px; */
|
||||
}
|
||||
|
||||
/* 隐藏 Webkit 浏览器的滚动条 */
|
||||
.side-menu::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
/* 隐藏 Webkit 浏览器的滚动条 */
|
||||
.side-menu::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 鼠标悬停时显示滚动条 */
|
||||
.side-menu:hover {
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
}
|
||||
/* 鼠标悬停时显示滚动条 */
|
||||
.side-menu:hover {
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
}
|
||||
|
||||
/* .side-menu:hover::-webkit-scrollbar {
|
||||
/* .side-menu:hover::-webkit-scrollbar {
|
||||
display: block;
|
||||
width: 8px !important;
|
||||
}
|
||||
@ -188,44 +166,44 @@ onMounted(() => {
|
||||
background-color: #fff;
|
||||
} */
|
||||
|
||||
.menu-item {
|
||||
/* position: relative; */
|
||||
text-align: center;
|
||||
padding: 11px 24px;
|
||||
cursor: pointer;
|
||||
/* transition: all 0.3s ease; */
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
border: 1px solid transparent;
|
||||
z-index: 9;
|
||||
}
|
||||
.menu-item {
|
||||
/* position: relative; */
|
||||
text-align: center;
|
||||
padding: 11px 24px;
|
||||
cursor: pointer;
|
||||
/* transition: all 0.3s ease; */
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
border: 1px solid transparent;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
background-color: #fff;
|
||||
color: #1890ff;
|
||||
border: 1px solid #1890ff;
|
||||
border-right: transparent !important;
|
||||
}
|
||||
.menu-item:hover {
|
||||
background-color: #fff;
|
||||
color: #1890ff;
|
||||
border: 1px solid #1890ff;
|
||||
border-right: transparent !important;
|
||||
}
|
||||
|
||||
.submenu-panel {
|
||||
position: absolute;
|
||||
left: 220px;
|
||||
top: 0;
|
||||
width: 957px;
|
||||
background: #fff;
|
||||
/* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); */
|
||||
border: 1px solid #1890ff;
|
||||
/* border-radius: 4px; */
|
||||
display: flex;
|
||||
padding: 20px;
|
||||
z-index: -1;
|
||||
box-sizing: border-box;
|
||||
min-height: 480px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.submenu-panel {
|
||||
position: absolute;
|
||||
left: 220px;
|
||||
top: 0;
|
||||
width: 957px;
|
||||
background: #fff;
|
||||
/* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); */
|
||||
border: 1px solid #1890ff;
|
||||
/* border-radius: 4px; */
|
||||
display: flex;
|
||||
padding: 20px;
|
||||
z-index: -1;
|
||||
box-sizing: border-box;
|
||||
min-height: 480px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.submenu-panel::before {
|
||||
/* content: '';
|
||||
.submenu-panel::before {
|
||||
/* content: '';
|
||||
position: absolute;
|
||||
left: -6px;
|
||||
top: 50%;
|
||||
@ -236,61 +214,61 @@ onMounted(() => {
|
||||
border-bottom: 8px solid transparent;
|
||||
border-right: 8px solid #fff;
|
||||
filter: drop-shadow(-2px 0 2px rgba(0, 0, 0, 0.1)); */
|
||||
}
|
||||
}
|
||||
|
||||
.submenu-content {
|
||||
/* flex: 1; */
|
||||
/* display: grid; */
|
||||
/* grid-template-columns: repeat(3, 1fr); */
|
||||
/* gap: 15px; */
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.submenu-group {
|
||||
.submenu-content {
|
||||
/* flex: 1; */
|
||||
/* display: grid; */
|
||||
/* grid-template-columns: repeat(3, 1fr); */
|
||||
/* gap: 15px; */
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
-webkit-column-break-inside: avoid; /* 兼容webkit内核 */
|
||||
/* 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;
|
||||
.submenu-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
color: #666;
|
||||
padding: 0px 16px;
|
||||
gap: 10px;
|
||||
.submenu-item {
|
||||
cursor: pointer;
|
||||
-webkit-column-break-inside: avoid; /* 兼容webkit内核 */
|
||||
/* 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;
|
||||
flex-wrap: wrap;
|
||||
color: #666;
|
||||
padding: 0px 16px;
|
||||
gap: 10px;
|
||||
.submenu-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.submenu-item {
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: inline-block; /* 改为行内块元素 */
|
||||
/* padding: 8px 12px; */
|
||||
padding-right: 12px;
|
||||
/* padding-bottom: 8px; */
|
||||
}
|
||||
.submenu-item {
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: inline-block; /* 改为行内块元素 */
|
||||
/* padding: 8px 12px; */
|
||||
padding-right: 12px;
|
||||
/* padding-bottom: 8px; */
|
||||
}
|
||||
|
||||
.submenu-item:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
.submenu-item:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user