This commit is contained in:
BianLzhaoMin
parent
ab6e3eb89d
commit
3f10f58b84
|
|
@ -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
|
||||
},
|
||||
|
||||
// 展开所有节点
|
||||
|
|
|
|||
|
|
@ -16,10 +16,24 @@
|
|||
</div>
|
||||
|
||||
<div class="search-container">
|
||||
<el-input placeholder="请输入" clearable class="search-input">
|
||||
<i slot="suffix" class="el-input__icon el-icon-search"></i>
|
||||
<el-input
|
||||
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>二级文档</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>×××方案</el-breadcrumb-item>
|
||||
<el-breadcrumb-item
|
||||
v-for="(item, index) in breadcrumbData"
|
||||
:key="item.id"
|
||||
>
|
||||
{{ 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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -10,17 +10,7 @@
|
|||
|
||||
<!-- 右侧表格内容 -->
|
||||
<div class="right-content">
|
||||
<RightTable
|
||||
@new="handleNew"
|
||||
@upload="handleUpload"
|
||||
@move="handleMove"
|
||||
@delete="handleDelete"
|
||||
@batch-download="handleBatchDownload"
|
||||
@share="handleShare"
|
||||
@add-copy="handleAddCopy"
|
||||
@view="handleView"
|
||||
@edit="handleEdit"
|
||||
/>
|
||||
<RightTable :breadcrumb-data="breadcrumbData" />
|
||||
</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)
|
||||
},
|
||||
|
||||
// 新建文档
|
||||
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('添加副本功能待实现')
|
||||
this.breadcrumbData = breadcrumbArray || []
|
||||
console.log('选中节点:', data, node)
|
||||
console.log('面包屑数据:', this.breadcrumbData)
|
||||
},
|
||||
|
||||
// 查看文档
|
||||
|
|
|
|||
Loading…
Reference in New Issue