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

This commit is contained in:
wangqiao
2025-09-23 22:37:51 +08:00
parent 5b498724c4
commit 33430e0888
2 changed files with 28 additions and 2 deletions

View File

@ -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) {