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

<template>
  <!-- 面包屑 -->
  <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>
  </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 { 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 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'
}

// 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 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 { 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 })
    // 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>