优化

src/views/publicService/docCenter/components/leftTree.vue

@@ -147,7 +147,28 @@ export default {
 
         // 处理节点点击
         handleNodeClick(data, node) {
-            this.$emit('node-click', data, node)
+            // 获取当前节点的所有父级节点并改成数组 为面包屑使用
+            const breadcrumbArray = this.getBreadcrumbPath(data, node)
+
+            this.$emit('node-click', data, node, breadcrumbArray)
+        },
+
+        // 获取面包屑路径数组
+        getBreadcrumbPath(data, node) {
+            const breadcrumbArray = []
+
+            // 从当前节点开始，向上遍历到根节点
+            let currentNode = node
+            while (currentNode) {
+                breadcrumbArray.unshift({
+                    id: currentNode.data.id,
+                    label: currentNode.data.label,
+                    type: currentNode.data.type,
+                })
+                currentNode = currentNode.parent
+            }
+
+            return breadcrumbArray
         },
 
         // 展开所有节点

src/views/publicService/docCenter/components/rightTable.vue

@@ -16,10 +16,24 @@
             </div>
 
             <div class="search-container">
-                <el-input placeholder="请输入" clearable class="search-input">
+                <el-input
-                    <i slot="suffix" class="el-input__icon el-icon-search"></i>
+                    clearable
+                    placeholder="请输入"
+                    v-model="searchValue"
+                    class="search-input"
+                >
+                    <i
+                        slot="suffix"
+                        @click="onHandleSearch"
+                        style="cursor: pointer"
+                        class="el-input__icon el-icon-search"
+                    />
                 </el-input>
-                <el-button type="primary" class="tag-filter-btn">
+                <el-button
+                    type="primary"
+                    class="tag-filter-btn"
+                    @click="handleTagFilter"
+                >
                     标签筛选
                     <i class="el-icon-arrow-down"></i>
                 </el-button>
@@ -29,10 +43,12 @@
         <!-- 面包屑导航 -->
         <div class="breadcrumb-container">
             <el-breadcrumb separator=">">
-                <el-breadcrumb-item>文档库</el-breadcrumb-item>
+                <el-breadcrumb-item
-                <el-breadcrumb-item>一级文档</el-breadcrumb-item>
+                    v-for="(item, index) in breadcrumbData"
-                <el-breadcrumb-item>二级文档</el-breadcrumb-item>
+                    :key="item.id"
-                <el-breadcrumb-item>×××方案</el-breadcrumb-item>
+                >
+                    {{ item.label }}
+                </el-breadcrumb-item>
             </el-breadcrumb>
         </div>
 
@@ -218,6 +234,16 @@
                 </div>
             </template>
         </DialogModel>
+
+        <!-- 标签筛选 -->
+        <el-drawer
+            title="标签筛选"
+            direction="rtl"
+            :visible.sync="tagFilterVisible"
+            :before-close="handleTagFilterClose"
+        >
+            <TagFilter @query="handleTagQuery" @reset="handleTagReset" />
+        </el-drawer>
     </div>
 </template>
 
@@ -230,8 +256,15 @@ import AddWord from './tableCom/addWord.vue'
 import Upload from './tableCom/upload.vue'
 import Move from './tableCom/move.vue'
 import AddCopy from './tableCom/addCopy.vue'
+import TagFilter from './tableCom/tagFilter.vue'
 export default {
     name: 'RightTable',
+    props: {
+        breadcrumbData: {
+            type: Array,
+            default: () => [],
+        },
+    },
     components: {
         Pagination,
         DialogModel,
@@ -241,12 +274,15 @@ export default {
         Upload,
         Move,
         AddCopy,
+        TagFilter,
     },
     data() {
         return {
-            loading: false,
             total: 0,
+            loading: false,
+            searchValue: '',
             selectedRows: [],
+            tagFilterVisible: false,
             queryParams: {
                 pageNum: 1,
                 pageSize: 10,
@@ -561,6 +597,37 @@ export default {
             this.shareDialogConfig.outerVisible = false
             this.$modal.msgSuccess('权限设置成功')
         },
+
+        // 标签筛选
+        handleTagFilter() {
+            this.tagFilterVisible = true
+        },
+
+        // 关闭标签筛选
+        handleTagFilterClose() {
+            this.tagFilterVisible = false
+        },
+
+        // 处理标签查询
+        handleTagQuery(selectedTags) {
+            console.log('选中的标签:', selectedTags)
+            // 这里可以根据选中的标签进行数据筛选
+            // this.$modal.msgSuccess('标签筛选功能待实现')
+            this.tagFilterVisible = false
+        },
+
+        // 处理标签重置
+        handleTagReset() {
+            console.log('重置标签筛选')
+            this.$modal.msgInfo('已重置标签筛选')
+        },
+
+        // 处理搜索
+        onHandleSearch() {
+            console.log('搜索:', this.searchValue)
+            // 这里可以根据搜索值进行数据筛选
+            // this.$modal.msgSuccess('搜索功能待实现')
+        },
     },
 }
 </script>
@@ -620,6 +687,11 @@ export default {
     background: #fafafa;
 }
 
+// 隐藏第一个面包屑项左侧的分隔符
+.el-breadcrumb .el-breadcrumb__item:first-child {
+    display: none;
+}
+
 .table-container {
     flex: 1;
     overflow: auto;

src/views/publicService/docCenter/components/tableCom/tagFilter.vue

@@ -0,0 +1,320 @@
+<template>
+    <div class="tag-filter-container">
+        <!-- 需求分类 -->
+        <div class="filter-section">
+            <div class="section-title">需求</div>
+            <div class="tag-buttons">
+                <el-button
+                    v-for="(tag, index) in requirementTags"
+                    :key="index"
+                    :class="['tag-button', { active: tag.selected }]"
+                    @click="toggleTag('requirement', index)"
+                >
+                    {{ tag.name }}
+                </el-button>
+            </div>
+        </div>
+
+        <!-- 工程分类 -->
+        <div class="filter-section">
+            <div class="section-title">工程</div>
+            <div class="tag-buttons">
+                <el-button
+                    v-for="(tag, index) in engineeringTags"
+                    :key="index"
+                    :class="['tag-button', { active: tag.selected }]"
+                    @click="toggleTag('engineering', index)"
+                >
+                    {{ tag.name }}
+                </el-button>
+            </div>
+        </div>
+
+        <!-- 产品分类 -->
+        <div class="filter-section">
+            <div class="section-title">产品</div>
+            <div class="tag-buttons">
+                <el-button
+                    v-for="(tag, index) in productTags"
+                    :key="index"
+                    :class="['tag-button', { active: tag.selected }]"
+                    @click="toggleTag('product', index)"
+                >
+                    {{ tag.name }}
+                </el-button>
+            </div>
+        </div>
+
+        <!-- 营销分类 -->
+        <div class="filter-section">
+            <div class="section-title">营销</div>
+            <div class="tag-buttons">
+                <el-button
+                    v-for="(tag, index) in marketingTags"
+                    :key="index"
+                    :class="['tag-button', { active: tag.selected }]"
+                    @click="toggleTag('marketing', index)"
+                >
+                    {{ tag.name }}
+                </el-button>
+            </div>
+        </div>
+
+        <!-- 操作按钮 -->
+        <div class="action-buttons">
+            <el-button type="primary" class="query-button" @click="handleQuery">
+                <i class="el-icon-search"></i>
+                查询
+            </el-button>
+            <el-button class="reset-button" @click="handleReset">
+                <i class="el-icon-refresh"></i>
+                重置
+            </el-button>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'TagFilter',
+    data() {
+        return {
+            // 需求标签
+            requirementTags: [
+                { name: 'XXXXXX', selected: false },
+                { name: 'XXXXXX', selected: false },
+                { name: 'XXXXXX', selected: false },
+                { name: 'XXXXXX', selected: false },
+                { name: 'XXXXXX', selected: false },
+            ],
+            // 工程标签
+            engineeringTags: [
+                { name: 'XXXXXX', selected: false },
+                { name: 'XXXXXX', selected: false },
+                { name: '线路工程', selected: false },
+                { name: '调试工程', selected: false },
+                { name: '大修技改', selected: false },
+                { name: '其他工程', selected: false },
+                { name: '调试工程', selected: false },
+                { name: '设计工程', selected: false },
+                { name: '运维工程', selected: false },
+                { name: '监理工程', selected: false },
+            ],
+            // 产品标签
+            productTags: [
+                { name: 'XXXXXX', selected: false },
+                { name: 'XXXXXX', selected: false },
+                { name: 'XXXXXX', selected: false },
+                { name: 'XXXXXX', selected: false },
+                { name: 'XXXXXX', selected: false },
+            ],
+            // 营销标签
+            marketingTags: [
+                { name: 'XXXXXX', selected: false },
+                { name: 'XXXXXX', selected: false },
+                { name: 'XXXXXX', selected: false },
+                { name: 'XXXXXX', selected: false },
+                { name: 'XXXXXX', selected: false },
+            ],
+        }
+    },
+    methods: {
+        // 切换标签选中状态
+        toggleTag(category, index) {
+            const tagList = this.getTagListByCategory(category)
+            if (tagList && tagList[index]) {
+                tagList[index].selected = !tagList[index].selected
+            }
+        },
+
+        // 根据分类获取标签列表
+        getTagListByCategory(category) {
+            switch (category) {
+                case 'requirement':
+                    return this.requirementTags
+                case 'engineering':
+                    return this.engineeringTags
+                case 'product':
+                    return this.productTags
+                case 'marketing':
+                    return this.marketingTags
+                default:
+                    return null
+            }
+        },
+
+        // 查询
+        handleQuery() {
+            const selectedTags = this.getSelectedTags()
+            this.$emit('query', selectedTags)
+        },
+
+        // 重置
+        handleReset() {
+            this.resetAllTags()
+            this.$emit('reset')
+        },
+
+        // 获取所有选中的标签
+        getSelectedTags() {
+            const selectedTags = {
+                requirement: this.requirementTags.filter((tag) => tag.selected),
+                engineering: this.engineeringTags.filter((tag) => tag.selected),
+                product: this.productTags.filter((tag) => tag.selected),
+                marketing: this.marketingTags.filter((tag) => tag.selected),
+            }
+            return selectedTags
+        },
+
+        // 重置所有标签
+        resetAllTags() {
+            this.requirementTags.forEach((tag) => {
+                tag.selected = false
+            })
+            this.engineeringTags.forEach((tag) => {
+                tag.selected = false
+            })
+            this.productTags.forEach((tag) => {
+                tag.selected = false
+            })
+            this.marketingTags.forEach((tag) => {
+                tag.selected = false
+            })
+        },
+    },
+}
+</script>
+
+<style scoped lang="scss">
+.tag-filter-container {
+    padding: 20px;
+    background: #fff;
+    min-height: 100%;
+    box-sizing: border-box;
+}
+
+.filter-section {
+    margin-bottom: 24px;
+
+    &:last-of-type {
+        margin-bottom: 32px;
+    }
+}
+
+.section-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #409eff;
+    margin-bottom: 12px;
+    padding-left: 4px;
+}
+
+.tag-buttons {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-bottom: 8px;
+
+    .tag-button {
+        height: 32px;
+        padding: 0 16px;
+        border-radius: 16px;
+        border: 1px solid #dcdfe6;
+        background: #f5f7fa;
+        color: #606266;
+        font-size: 14px;
+        transition: all 0.3s;
+
+        &:hover {
+            border-color: #409eff;
+            color: #409eff;
+        }
+
+        &.active {
+            background: #409eff;
+            border-color: #409eff;
+            color: #fff;
+        }
+    }
+}
+
+.action-buttons {
+    display: flex;
+    justify-content: center;
+    gap: 16px;
+    margin-top: 24px;
+    padding-top: 20px;
+    border-top: 1px solid #e4e7ed;
+
+    .query-button {
+        height: 36px;
+        padding: 0 24px;
+        border-radius: 18px;
+        background: #409eff;
+        border-color: #409eff;
+        color: #fff;
+        font-size: 14px;
+        font-weight: 500;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+
+        &:hover {
+            background: #66b1ff;
+            border-color: #66b1ff;
+        }
+
+        i {
+            font-size: 14px;
+        }
+    }
+
+    .reset-button {
+        height: 36px;
+        padding: 0 24px;
+        border-radius: 18px;
+        background: #f5f7fa;
+        border-color: #dcdfe6;
+        color: #606266;
+        font-size: 14px;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+
+        &:hover {
+            background: #ecf5ff;
+            border-color: #c6e2ff;
+            color: #409eff;
+        }
+
+        i {
+            font-size: 14px;
+        }
+    }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+    .tag-filter-container {
+        padding: 16px;
+    }
+
+    .tag-buttons {
+        .tag-button {
+            height: 28px;
+            padding: 0 12px;
+            font-size: 12px;
+        }
+    }
+
+    .action-buttons {
+        flex-direction: column;
+        align-items: center;
+
+        .query-button,
+        .reset-button {
+            width: 120px;
+        }
+    }
+}
+</style>

src/views/publicService/docCenter/index.vue

@@ -10,17 +10,7 @@
 
             <!-- 右侧表格内容 -->
             <div class="right-content">
-                <RightTable
+                <RightTable :breadcrumb-data="breadcrumbData" />
-                    @new="handleNew"
-                    @upload="handleUpload"
-                    @move="handleMove"
-                    @delete="handleDelete"
-                    @batch-download="handleBatchDownload"
-                    @share="handleShare"
-                    @add-copy="handleAddCopy"
-                    @view="handleView"
-                    @edit="handleEdit"
-                />
             </div>
         </div>
     </div>
@@ -40,58 +30,16 @@ export default {
         return {
             searchKeyword: '',
             selectedNode: null,
+            breadcrumbData: [], // 面包屑数据
         }
     },
     methods: {
         // 处理树节点点击
-        handleNodeClick(data, node) {
+        handleNodeClick(data, node, breadcrumbArray) {
             this.selectedNode = data
-            console.log('选中节点:', data)
+            this.breadcrumbData = breadcrumbArray || []
-        },
+            console.log('选中节点:', data, node)
-
+            console.log('面包屑数据:', this.breadcrumbData)
-        // 新建文档
-        handleNew() {
-            this.$modal.msgSuccess('新建功能待实现')
-        },
-
-        // 上传文档
-        handleUpload() {
-            this.$modal.msgSuccess('上传功能待实现')
-        },
-
-        // 移动文档
-        handleMove(selectedRows) {
-            this.$modal.msgSuccess('移动功能待实现')
-        },
-
-        // 删除文档
-        handleDelete(selectedRows) {
-            this.$confirm('确定要删除选中的文档吗？', '提示', {
-                confirmButtonText: '确定',
-                cancelButtonText: '取消',
-                type: 'warning',
-            })
-                .then(() => {
-                    this.$modal.msgSuccess('删除功能待实现')
-                })
-                .catch(() => {
-                    this.$modal.msgInfo('已取消删除')
-                })
-        },
-
-        // 批量下载
-        handleBatchDownload(selectedRows) {
-            this.$modal.msgSuccess('批量下载功能待实现')
-        },
-
-        // 共享文档
-        handleShare(selectedRows) {
-            this.$modal.msgSuccess('共享功能待实现')
-        },
-
-        // 添加副本
-        handleAddCopy(selectedRows) {
-            this.$modal.msgSuccess('添加副本功能待实现')
         },
 
         // 查看文档