优化详情页面包屑显示及ID字段

api/drawe-detail/types.ts

@@ -35,6 +35,7 @@ export interface ProjectRespVO {
   projectTypeName: string
   favoriteId?: string
   relationDraws: RelationDraws[]
+  no?: string
   filesInfo: {
     fileSize: string
     count: number

pages/down-drawe-detail/[id].vue

@@ -1,6 +1,11 @@
 <template>
   <SeoHead :title="detail?.title" :description="detail?.description" :keywords="detail?.labels?.toString()" />
   <KlNavTab />
+  <div v-if="breadList && breadList.length > 1" class="mb-[-10px] mt-[20px] w-[1440px] mx-auto">
+    <el-breadcrumb :separator-icon="ArrowRight">
+      <el-breadcrumb-item v-for="(item, index) in breadList" :key="item.name">{{ item.name }}</el-breadcrumb-item>
+    </el-breadcrumb>
+  </div>
   <div class="ml-auto mr-auto mt-[20px] w-[1440px]">
     <div class="flex items-center">
       <div
@@ -56,7 +61,11 @@
           {{ detail?.type === 1 ? '图纸' : detail?.type === 2 ? '文本' : '模型' }}中包含的文件
         </div>
         <div>
-          <div v-for="item in detail?.otherFiles" :key="item.id" class="flex items-center justify-between border-b-[1px] border-b-[#eee] border-b-solid py-[10px]">
+          <div
+            v-for="item in detail?.otherFiles"
+            :key="item.id"
+            class="flex items-center justify-between border-b-[1px] border-b-[#eee] border-b-solid py-[10px]"
+          >
             <!-- <img src="~/assets/images/avater.png" alt="" srcset="" class="h-30px w-30px" /> -->
             <div>
               <!-- <span class="ml-[10px] cursor-pointer" @click="handleDownloadPreview(item)">{{ item.title }}</span> -->
@@ -102,7 +111,7 @@
     </div>
     <div class="ml-[22px]">
       <div class="box-border min-h-[269px] w-[397px] border border-[#EEEEEE] rounded-[12px] border-solid bg-[#FFFFFF] pa-[22px]">
-        <div class="mb-[10px]">图纸ID: {{ detail?.id }}</div>
+        <div class="mb-[10px]">图纸ID: {{ detail?.no }}</div>
         <div class="mb-[10px]">文件大小：{{ detail?.filesInfo?.fileSize || 0 }} </div>
         <!-- <div class="mb-10px">图纸版本：{{ detail.editionsName }} </div> -->
         <div class="mb-[10px]">图纸格式：{{ detail?.formatType?.toString() }}</div>
@@ -176,11 +185,13 @@
 
 <script setup lang="ts">
   import dayjs from 'dayjs'
+  import { ArrowRight } from '@element-plus/icons-vue'
   import { downloadFile } from '~/utils/utils'
   import { useMessage } from '~/utils/useMessage'
   import { Warning } from '@element-plus/icons-vue'
   import SeoHead from '~/components/seo-head/index.vue'
   import CardPicture from '~/components/kl-card-picture/index.vue'
+  import { getDictTree } from '~/api/home/index'
   import { getDetail, getRelationRecommend, report, getUserInfo, getMainWork, createContent, createUserProject, deleteProject } from '~/api/drawe-detail/index'
   import KlNavTab from '~/components/kl-nav-tab/index.vue'
   import ThumBnail from './components/swiper.vue'
@@ -213,6 +224,20 @@
     })
   }
 
+  // 获取面包屑
+  const { data: breadList } = await useAsyncData(`breadList-detail-${route.params.id}}`, async () => {
+    const res = await getDictTree({ type: 1, id: detail.value?.projectType?.[0] })
+    const all = [
+      {
+        id: -1,
+        name: detail.value?.type === 1 ? '图纸库' : detail.value?.type === 3 ? '模型库' : '文本库',
+        isChildren: false,
+      },
+    ]
+    const arr = [...res.data, ...all]
+    return arr.reverse()
+  })
+
   // const init = () => {
   //   getDetail({ id }).then((res) => {
   //     if (res.code === 0) {