78 lines
2.2 KiB
Vue
78 lines
2.2 KiB
Vue
<template>
|
||
<div class="box-border w-[100%] border border-[#EEEEEE] rounded-[12px] border-solid bg-[#FFFFFF] px-[20px] py-[26px]">
|
||
<div class="mb-[10px] 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 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 ? '!bg-[#ebeefe] !text-[#1A65FF]' : ''"
|
||
@click="handleClick(item)"
|
||
>{{ item.name }}</div
|
||
>
|
||
</div>
|
||
</div>
|
||
</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 { getDictTree } from '~/api/home/index'
|
||
import { ArrowRight } from '@element-plus/icons-vue'
|
||
|
||
const props = defineProps({
|
||
type: {
|
||
type: Number,
|
||
default: 1,
|
||
},
|
||
id: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
groundId: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
})
|
||
|
||
const query = defineModel<string | undefined>('modelValue', {
|
||
required: true,
|
||
})
|
||
|
||
// 服务端渲染兼容方案：顺序执行异步操作
|
||
// 1. 先获取面包屑数据（已在上面通过useAsyncData获取）
|
||
|
||
// 2. 顺序获取分类下拉框数据
|
||
// 创建一个函数来获取分类数据，确保服务端渲染时能获取到数据
|
||
const getProjectTypeList = async () => {
|
||
try {
|
||
// 获取分类数据
|
||
const res = await parent({
|
||
type: 3,
|
||
parentId: 0,
|
||
})
|
||
const all = [{ id: '-1', name: '全部' }]
|
||
return [...all, ...res.data]
|
||
} catch (error) {
|
||
return []
|
||
}
|
||
}
|
||
|
||
// 使用useAsyncData获取分类列表，确保服务端渲染兼容性
|
||
const { data: projectTypeList } = await useAsyncData(
|
||
`projectType-draw-toolbox-${props.type}-${query.value}}`,
|
||
getProjectTypeList,
|
||
{ server: true } // 确保在服务端执行
|
||
)
|
||
|
||
const handleClick = (row: any) => {
|
||
query.value = row.id
|
||
}
|
||
|
||
const handleClickBread = (row: any, index: number) => {
|
||
query.value = row.id
|
||
}
|
||
</script>
|