front-pc/components/kl-wallpaper-category/index.vue

<template>
  <!-- 面包屑 -->
  <div v-if="breadList && breadList.length > 1" class="mb-[-10px] mt-[20px] pl-[20px]">
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item v-for="(item, index) in breadList" :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"
          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
        >
      </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"
          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
        >
      </div>
    </div>
    <!-- <div class="mb-14px flex items-start">
      <div class="flex-shrink-0 text-18px text-[#333333] font-normal">文本类型</div>
      <div class="ml-30px mt--6px flex flex-wrap">
        <div
          v-for="(item, index) in sourceList"
          :key="index"
          class="mb-8px mr-26px cursor-pointer rounded-15px px-15px py-8px text-14px text-[#666666] font-normal"
          :class="item.id === query.source ? '!bg-[#EBEEFE] !text-[#1A65FF]' : ''"
          @click="query.source = item.id"
          >{{ 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<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 { data: editionsList } = useAsyncData(`editionsList-${props.type}}`, async () => {
    const res = await parent({ type: 2, parentId: 0 })
    const all = [{ id: '-1', name: '全部' }]
    return [...all, ...res.data]
  })

  // 获取面包屑
  const { data: breadList } = await useAsyncData(
    `breadList-${props.type}-${props.id}-${query.value.projectType}}`,
    async () => {
      const res = await getDictTree({ type: 1, id: query.value.projectType })
      const all = [
        {
          id: -1,
          name: props.type === 1 ? '图纸库' : props.type === 3 ? '模型库' : '文本库',
          isChildren: false,
        },
      ]
      const arr = [...res.data, ...all]
      return arr.reverse()
    }
  )
  
  // 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()

  console.log('breadList.value.length----', breadList.value);

  // 服务端渲染兼容方案：顺序执行异步操作
  // 1. 先获取面包屑数据（已在上面通过useAsyncData获取）
  
  // 2. 顺序获取分类下拉框数据
  // 创建一个函数来获取分类数据，确保服务端渲染时能获取到数据
  const getProjectTypeList = async () => {
    let parentId: any = '0'
    
    // 计算parentId的逻辑
    if (breadList?.value && breadList?.value.length > 1) {
      if (breadList.value.length > 2) {
        const length = breadList.value?.length
        parentId = breadList?.value[length - 2].id
      } else {
        const length = breadList.value?.length
        parentId = breadList?.value[length - 1].id
      }
    }

    console.log('parentId', parentId);
    
    
    try {
      // 获取分类数据
      const res = await parent({ type: 1, parentId: parentId })
      const all = [{ id: parentId === '0' ? '-1' : parentId, name: '全部' }]
      return [...all, ...res.data]
    } catch (error) {
      console.error('获取分类数据失败:', error)
      return []
    }
  }
  
  // 使用useAsyncData获取分类列表，确保服务端渲染兼容性
  const { data: projectTypeList } = await useAsyncData(
    `projectType-draw-${props.type}-${query.value.projectType}}`,
    getProjectTypeList,
    { server: true } // 确保在服务端执行
  )



  const handleClick = (row: any) => {
    query.value.title = ''
    query.value.projectType = row.id
    // if (row.name === '全部') return
    // const isChildren = breadList.value.find((c: any) => c.isChildren)
    // if (!row.isChildren && isChildren) {
    //   const index = breadList.value.length - 1
    //   breadList.value[index] = { id: row.id, name: row.name, isChildren: true }
    // } else if (!row.isChildren && !isChildren) {
    //   breadList.value.push({ id: row.id, name: row.name, isChildren: true })
    // } else {
    //   breadList.value.push({ id: row.id, name: row.name })
    //   // getParent()
    //   refresh()
    // }
  }

  const handleClickBread = (row: any, index: number) => {
    // breadList.value.splice(index + 1)
    query.value.title = ''
    query.value.projectType = row.id
    // getParent()
    // refresh()
  }
</script>