设备台账详情资料库增加导航

src/views/pms/device/DeviceFileLibrary.vue

@@ -38,6 +38,23 @@
         </el-form>
       </div>
 
+      <div class="library-navigation">
+        <!-- <el-button link type="primary" class="library-back-btn" :disabled="!canGoBack" @click="goBack">
+          <Icon icon="ep:back" />
+          返回上一级
+        </el-button> -->
+        <el-breadcrumb separator=">" class="library-breadcrumb">
+          <el-breadcrumb-item
+            v-for="(item, index) in breadcrumbs"
+            :key="item.key"
+            class="library-breadcrumb__item"
+            :class="{ 'is-current': index === breadcrumbs.length - 1 }"
+            @click="handleBreadcrumbClick(index)">
+            {{ item.name }}
+          </el-breadcrumb-item>
+        </el-breadcrumb>
+      </div>
+
       <ZmTable
         :data="fileList"
         class="library-table"
@@ -164,6 +181,7 @@ const queryParams = reactive({
 
 const rootName = computed(() => props.deviceName || '设备资料')
 const breadcrumbs = ref<BreadcrumbItem[]>([{ id: null, name: '设备资料', key: 'root' }])
+const canGoBack = computed(() => breadcrumbs.value.length > 1)
 const currentFolderName = computed(() => {
   return breadcrumbs.value[breadcrumbs.value.length - 1]?.name || rootName.value
 })
@@ -218,6 +236,22 @@ const resetQuery = () => {
   loadFiles()
 }
 
+const handleBreadcrumbClick = async (index: number) => {
+  if (index < 0 || index >= breadcrumbs.value.length) return
+  if (index === breadcrumbs.value.length - 1) return
+
+  queryParams.filename = ''
+  queryParams.pageNo = 1
+  breadcrumbs.value = breadcrumbs.value.slice(0, index + 1)
+  queryParams.classId = breadcrumbs.value[index]?.id ?? rootClassId.value
+  await loadFiles()
+}
+
+const goBack = async () => {
+  if (!canGoBack.value) return
+  await handleBreadcrumbClick(breadcrumbs.value.length - 2)
+}
+
 const enterFolder = async (row: FileRecord) => {
   if (!row.id) return
 
@@ -380,6 +414,39 @@ watch(
   width: 260px;
 }
 
+.library-navigation {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 14px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.library-back-btn {
+  padding: 0;
+}
+
+.library-breadcrumb {
+  min-width: 0;
+}
+
+.library-breadcrumb__item {
+  cursor: pointer;
+}
+
+.library-breadcrumb__item.is-current {
+  cursor: default;
+}
+
+.library-breadcrumb__item.is-current :deep(.el-breadcrumb__inner) {
+  color: var(--el-color-primary);
+  font-weight: 600;
+}
+
+.library-breadcrumb__item:not(.is-current):hover :deep(.el-breadcrumb__inner) {
+  color: var(--el-color-primary);
+}
+
 .library-table {
   --el-table-header-bg-color: var(--el-fill-color-lighter);
   --el-table-row-hover-bg-color: #f6faff;
@@ -505,5 +572,10 @@ watch(
   .library-search-input {
     width: 100%;
   }
+
+  .library-navigation {
+    align-items: flex-start;
+    flex-direction: column;
+  }
 }
 </style>