element树形组件使用之数据授权

<template>
	<div>
		<el-card class="tree-card">
			<p class="title">数据授权</p>
			<div class="box">
				<div class="tree">
					<div class="member">选择授权人员</div>
					<div class="search">
						<div class="input">
							<el-input
								placeholder="请输入人员名称进行搜索"
								prefix-icon="el-icon-search"
								v-model="input2"
							>
							</el-input>
						</div>
						<div class="search-btn">
							<el-button type="primary" @click="handleSearch">搜索</el-button>
						</div>
					</div>
					<div class="function">
						<p>功能权限</p>
					</div>
					<el-tree :data="filteredData" node-key="id">
						<span class="custom-tree-node" slot-scope="{ node, data }">
							<span>{{ node.label }}</span>
							<span>
								<el-checkbox
									v-model="data.preview"
									@change="printNodeProperties(node, data, 'preview')"
									>预览</el-checkbox
								>
								<el-checkbox
									v-model="data.download"
									@change="printNodeProperties(node, data, 'download')"
									>下载</el-checkbox
								>
							</span>
						</span>
					</el-tree>
				</div>
				<div class="databox">
					<div class="data">选择授权数据</div>
					<div class="search">
						<div class="input">
							<el-input
								placeholder="请输入文件名称进行搜索"
								prefix-icon="el-icon-search"
								v-model="input"
							>
							</el-input>
						</div>
						<div class="search-btn">
							<el-button type="primary" @click="handleSearch1">搜索</el-button>
						</div>
					</div>
					<div class="drprojectTable">
						<el-table
							ref="table"
							:data="filteredTableData"
							row-key="id"
							class="drline"
							:header-cell-style="rowClass"
							style="width: 100%"
							@selection-change="handleSelectionChange"
						>
							<el-table-column type="selection"> </el-table-column>
							<el-table-column label="序号" type="index" prop="id">
							</el-table-column>
							<el-table-column prop="name" label="文件名称"> </el-table-column>

							<el-table-column prop="organize" label="所属组织">
							</el-table-column>
							<el-table-column prop="filetype" label="文件格式类型">
							</el-table-column>
						</el-table>
						<!-- 分页组件 -->
						<div class="drblock">
							<el-pagination
								:current-page="currentPage"
								:background="true"
								:page-sizes="[10, 20]"
								:page-size="pageSize"
								layout=" prev, pager, next,sizes, jumper"
								:total="total"
							>
							</el-pagination>
						</div>
					</div>
				</div>
			</div>
			<div class="button">
				<el-button>取消</el-button>
				<el-button type="primary" style="margin-left: 3vw">确定</el-button>
			</div>
		</el-card>
	</div>
</template>

<script>
let id = 1000

export default {
	name: 'OrganizeMaintain',
	data() {
		const data = []

		return {
			data: JSON.parse(JSON.stringify(data)),
			data: JSON.parse(JSON.stringify(data)),
			checkAll: false,
			checkedCities: [],
			tableData: [],
			multipleSelection: [],
			input2: '', // 用于存储搜索关键字
			filteredData: [], // 用于存储过滤后的数据
			filteredTableData: [],
			input: '',
			checked: '',
			nodesWithPreview: [], // 存储具有 preview 为 true 的节点
			nodesWithDownload: [], // 存储具有 download 为 true 的节点
			selectedNodes: [], // 用于存储所有preview被选中的节点
			selectedNodes1: [], // 用于存储所有download被选中的节点
		}
	},

	methods: {
		handleSearch1() {
			const searchText = this.input.trim().toLowerCase()
			console.log(searchText)
			if (searchText === '') {
				// 如果搜索关键字为空，则显示全部数据
				console.log(this.tableData)
				this.filteredTableData = this.tableData
			} else {
				// 根据搜索关键字筛选数据
				this.filteredTableData = this.tableData.filter((row) => {
					return row.name.toLowerCase().includes(searchText)
				})
			}
		},
		rowClass({}) {
			return 'background:#F0F0F0'
		},
		handleSelectionChange(selection) {
			// `selection`参数是选中的行数据数组
			console.log(selection)

			// 如果你需要获取所有选中行的特定属性，可以使用map函数
			const selectedIds = selection.map((row) => row.id)
			console.log(selectedIds)
		},
		collectPreviewNodes(node) {
			if (node.preview) {
				this.selectedNodes.push(node)
			}
			if (node.children && node.children.length > 0) {
				node.children.forEach((childNode) => {
					this.collectPreviewNodes(childNode)
				})
			}
		},
		collectDownloadNodes(node) {
			if (node.download) {
				this.selectedNodes1.push(node)
			}
			if (node.children && node.children.length > 0) {
				node.children.forEach((childNode) => {
					this.collectDownloadNodes(childNode)
				})
			}
		},
		printNodeProperties(node, data, type) {
			if (type === 'preview') {
				this.selectedNodes = [] // 清空之前收集的节点
				this.filteredData.forEach((rootNode) => {
					this.collectPreviewNodes(rootNode) // 递归收集节点
				})
				// 所有具有预览功能的节点
				console.log('具有 preview 为 true 的节点:', this.selectedNodes)
				const preview = this.selectedNodes.map((item) => item.id)
				console.log(preview)
			} else if (type === 'download') {
				this.selectedNodes1 = [] // 清空之前收集的节点
				this.filteredData.forEach((rootNode) => {
					this.collectDownloadNodes(rootNode) // 递归收集节点
				})
				// 所有具有下载功能的节点
				console.log('具有 download 为 true 的节点:', this.selectedNodes1)
				const download = this.selectedNodes1.map((item) => item.id)
				console.log(download)
			}
		},
		collectNodes(type) {
			if (type === 'preview') {
				this.nodesWithPreview = this.filteredData.filter((node) => node.preview)
				console.log('具有 preview 为 true 的节点:', this.nodesWithPreview)
			} else if (type === 'download') {
				this.nodesWithDownload = this.filteredData.filter(
					(node) => node.download
				)
				console.log('具有 download 为 true 的节点:', this.nodesWithDownload)
			}
		},
	},
	created() {
		this.filteredData = this.data
		this.filteredTableData = this.tableData
	},
}
</script>

<style scoped lang="scss">
.custom-tree-node {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	padding-right: 8px;
}
.tree-card {
	overflow-y: auto; /* 开启滚动显示溢出内容 */
	width: 100%;
	height: 88vh;
	.title {
		height: 40px;
		line-height: 40px;
		font-size: 22px;
		font-weight: bold;
	}
	.box {
		display: flex;
		margin-top: -6vh;
		.tree {
			width: 45%;
			margin-right: 5%;
			height: 77vh;
			overflow-y: auto;
			.search {
				display: flex;
				margin-top: -11vh;
				.input {
					width: 30vw;
					margin-right: 3vw;
				}
			}
			.function {
				margin-left: 29vw;
				margin-top: -8vh;
				p {
					height: 22px;
					line-height: 22px;
					margin-top: 5vh;
					margin-bottom: 1vh;
				}
			}
		}
		.databox {
			width: 50%;
			height: 77vh;
			overflow-y: auto;
			.search {
				display: flex;
				margin-top: -11vh;

				.input {
					width: 30vw;
					margin-right: 4vw;
					margin-left: 1vw;
				}
			}
			.checkbox {
				display: flex;
				margin-top: 2vh;
			}
			.drprojectTable {
				width: 95%;
				margin-left: 2%;
				margin-top: -5vh;
				::v-deep .el-table thead {
					line-height: 22px;
				}
				.drblock {
					margin-top: 35px;
					height: 60px;
					margin-bottom: 0px;
					text-align: right;
				}
				.drline {
					line-height: 35px;
				}
				.sort {
					display: inline-flex;
					flex-direction: column;
					align-items: center;
					height: 34px;
					width: 24px;
					vertical-align: middle;
					cursor: pointer;
					overflow: initial;
					position: relative;
					.sort-cart {
						width: 0;
						height: 0;
						border: 5px solid transparent;
						position: absolute;
						left: 7px;
						.ascending {
							border-bottom-color: #c0c4cc;
							top: 5px;
						}
						.descendign {
							border-top-color: #c0c4cc;
							bottom: 7px;
						}
					}
				}
				.sort:hover {
					cursor: pointer;
				}
				.label {
					display: flex;
					margin-left: 15px;
				}
			}
		}
	}
	.button {
		// margin-top: 13vh;
		height: 40px;
		line-height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

.list-card {
	overflow-y: auto; /* 开启滚动显示溢出内容 */
	width: 98%;
	height: 88vh;
	.checkbox {
		display: flex;
		margin-top: 2vh;
	}
}
</style>