vue中el-tree结合el-switch实现开关状态切换

<template>
	<div>
		<el-col :span="24">
			<el-card class="tree-card">
				<div class="sketch_content selectFile">
					<span class="span_title">组织列表 </span>
					<div style="display: flex; justify-content: flex-end; width: 55vw">
						<div
							style="display: flex; align-items: center; margin-right: 1.5vw"
						>
							<el-radio-group v-model="filterType" @change="radioChange">
								<el-radio :label="'all'">显示全部</el-radio>
								<el-radio :label="'on'">只显示开启</el-radio>
								<el-radio :label="'off'">只显示关闭</el-radio>
							</el-radio-group>
						</div>
						<el-button type="primary" size="small" @click="oneClickEnables"
							>一键启用</el-button
						>
					</div>
					<el-tree
						style="margin-top: 20px; width: 55vw"
						:data="organizationTreeData"
						node-key="id"
						default-expand-all
						:expand-on-click-node="false"
						v-if="
							organizationTreeData.length !== 0 && organizationTreeData !== ''
						"
						draggable
						@node-click="getOrganizationList"
						@drag-start="handleDragStart"
						@allow-drop="allowDrop"
						@drag-end="handleDragEnd"
						@node-drop="handleNodeDrop"
						@allow-drag="allowDrag"
					>
						<span class="custom-tree-node" slot-scope="{ node, data }">
							<span>{{ node.label }}</span>
							<div
								v-if="data.type !== 1"
								style="
									display: flex;
									justify-content: center;
									align-items: center;
								"
							>
								<el-button
									type="text"
									icon="el-icon-plus"
									class="edit"
									@click="showOrganizationDialog"
								>
								</el-button>
								<el-tooltip
									class="item"
									effect="dark"
									content="修改组织"
									placement="top"
								>
									<el-button
										type="text"
										@click="() => showEditOrganizationDialog(data)"
										icon="el-icon-edit"
										class="edit"
										style="margin-right: 2vw"
									>
									</el-button>
								</el-tooltip>
								<el-switch
									slot="reference"
									style="display: block"
									v-model="node.data.organizeStatus"
									active-color="#13ce66"
									inactive-color="#cccccc"
									:active-value="0"
									:inactive-value="1"
									active-text="启用"
									inactive-text="禁用"
									@change="statusChange(node)"
								>
								</el-switch>
							</div>
						</span>
					</el-tree>
					<div
						v-if="
							organizationTreeData.length == 0 || organizationTreeData == ''
						"
					>
						<el-empty description="暂无组织" />
						<el-button
							type="primary"
							size="small"
							@click="showDialog"
							v-if="add"
							>添加组织</el-button
						>
					</div>
				</div>
			</el-card>
		</el-col>
 
		<el-dialog
			width="580px"
			:visible.sync="addOrganizationDialogVisible"
			:close-on-click-modal="false"
			@close="closeOrganizationTreeDialog"
		>
			<div class="addOrganizationDialog">
				<span>新增组织</span>
			</div>
			<el-divider class="dialog_divider"></el-divider>
			<el-form
				:model="organizationForm"
				ref="addFileBackupTaskForm"
				label-width="100px"
				style="height: auto"
			>
				<el-form-item label="组织代码：" style="margin-left: -19px">
					<el-input
						v-model="organizationForm.id"
						size="mini"
						style="width: 200px; margin-left: -170px"
					></el-input>
				</el-form-item>
				<el-form-item label="上级组织：" style="margin-left: -19px">
					<el-input
						v-model="organizationForm.lead"
						size="mini"
						style="width: 200px; margin-left: -170px"
					></el-input>
				</el-form-item>
				<el-form-item
					label="组织名称："
					prop="fileIp"
					style="margin-left: -19px"
				>
					<el-input
						v-model="organizationForm.organizationName"
						placeholder="请输入组织名称"
						size="mini"
						style="width: 200px; margin-left: -170px"
					></el-input>
				</el-form-item>
				<!-- <el-form-item
					label="上级组织："
					prop="fileIp"
					style="margin-left: -19px"
				>
					<el-select
						placeholder="请选择上级组织"
						style="width: 200px; margin-left: -170px"
						size="mini"
					>
						<el-option label="部门1" value="0"></el-option>
						<el-option label="部门2" value="1"></el-option>
						<el-option label="生态单位1" value="2"></el-option>
					</el-select>
				</el-form-item> -->
				<el-form-item
					label="组织类型："
					prop="fileType"
					style="margin-left: -19px"
				>
					<el-select
						style="width: 200px; margin-left: -170px"
						v-model="value1"
						@change="select"
					>
						<el-option
							v-for="item in options1"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						>
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<el-divider></el-divider>
			<div class="dialogClose">
				<el-button @click="closeOrganizationTreeDialog">取消</el-button>
				<el-button type="primary" @click="addOrganization">确定</el-button>
			</div>
		</el-dialog>
		<el-dialog
			width="580px"
			:visible.sync="visible"
			:close-on-click-modal="false"
			@close="closeOrganizationTreeDialog"
		>
			<div class="addOrganizationDialog">
				<span>新增组织</span>
			</div>
			<el-divider class="dialog_divider"></el-divider>
			<el-form
				:model="organizationForm"
				ref="addFileBackupTaskForm"
				label-width="100px"
				style="height: auto"
			>
				<el-form-item
					label="组织名称："
					prop="fileIp"
					style="margin-left: -19px"
				>
					<el-input
						v-model="organizationForm.organizationName"
						placeholder="请输入组织名称"
						size="mini"
						style="width: 200px; margin-left: -170px"
					></el-input>
				</el-form-item>
 
				<el-form-item
					label="组织类型："
					prop="fileType"
					style="margin-left: -19px"
				>
					<el-select
						style="width: 200px; margin-left: -170px"
						v-model="value1"
						@change="select"
					>
						<el-option
							v-for="item in options1"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						>
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<el-divider></el-divider>
			<div class="dialogClose">
				<el-button @click="closeOrganizationTreeDialog">取消</el-button>
				<el-button type="primary" @click="addOrganization1">确定</el-button>
			</div>
		</el-dialog>
		<!--    组织修改模块-->
		<el-dialog
			width="580px"
			:visible.sync="editOrganizationDialogVisible"
			:close-on-click-modal="false"
			@close="closeEditOrganizationDialog"
		>
			<div class="addOrganizationDialog">
				<span>修改组织</span>
			</div>
			<el-divider class="dialog_divider"></el-divider>
			<el-form
				:model="organizationForm"
				ref="addFileBackupTaskForm"
				label-width="100px"
				style="height: auto"
			>
				<el-form-item label="组织名称" prop="fileIp" style="margin-left: -19px">
					<el-input
						v-model="organizationForm.organizationName"
						placeholder="请输入组织名称"
						size="mini"
						style="width: 200px; margin-left: -170px"
					></el-input>
				</el-form-item>
				<el-form-item
					label="组织类型"
					prop="fileType"
					style="margin-left: -19px"
				>
					<el-select
						v-model="value"
						style="width: 200px; margin-left: -170px"
						:placeholder="placeholder"
						@change="change"
					>
						<el-option
							v-for="item in options"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						>
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<el-divider></el-divider>
			<div class="dialogClose">
				<el-button @click="closeEditOrganizationDialog">取消</el-button>
				<el-button type="primary" @click="editOrganization">确定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
 
<script>
import {
	getOrganizeList,
	restartOrganize,
	forbiddenOrganize,
	editOrganize,
	addOrganize,
	changeOrganize,
	oneClickEnable,
} from '@/api/index'
let id = 1000
 
export default {
	name: 'OrganizeMaintain',
	data() {
		return {
			value: '',
			see: true,
			placeholder: '请选择',
			add: true,
			options: [
				{ value: 0, label: '集团' },
				{ value: 1, label: '子集团' },
				{ value: 2, label: '公司' },
				{ value: 3, label: '部门' },
				{ value: 4, label: '生态单位' },
			],
			options1: [
				{ value: 0, label: '集团' },
				{ value: 1, label: '子集团' },
				{ value: 2, label: '公司' },
				{ value: 3, label: '部门' },
				{ value: 4, label: '生态单位' },
			],
			organizationTreeData: [],
			sectionList: [
				{
					id: 1,
					name: '部门1',
				},
				{
					id: 2,
					name: '部门2',
				},
				{
					id: 3,
					name: '部门3',
				},
				{
					id: 4,
					name: '生态单位',
				},
			],
			userList: [
				{
					id: 1,
					username: 'zzn',
				},
			],
			sectionUserList: [
				{
					id: 1,
					name: '用户1',
				},
				{
					id: 2,
					name: '用户2',
				},
				{
					id: 3,
					name: '用户3',
				},
			],
			addOrganizationDialogVisible: false,
			organizationForm: {
				organizationName: '',
				id: '',
				lead: '',
			},
			addTopOrganizationDialogVisible: false,
			// 节点的data
			organizationDialogData: '',
			editOrganizationDialogVisible: false,
			listTitle: '',
			data: [],
			type: 'text',
			node: '',
			organizeType: '',
			value1: '',
			addOrganizeType: '',
			draggedNode: null,
			visible: false,
			filterType: 'all',
		}
	},
	mounted() {
		this.getOrganizationList()
 
		getOrganizeList({ viewType: 2 })
	},
	methods: {
		async radioChange(value) {
			if (value == 'on') {
				this.add = false
				const res = await getOrganizeList({ viewType: 0 })
				this.organizationTreeData = [res.data.data[0]]
			} else if (value == 'off') {
				this.add = false
				const res = await getOrganizeList({ viewType: 1 })
				this.organizationTreeData = []
				this.organizationTreeData = [].concat(...res.data.data)
				console.log(this.organizationTreeData)
			} else {
				const res = await getOrganizeList({ viewType: 2 })
				this.organizationTreeData = [res.data.data[0]]
			}
		},
		getOrganizationList(data, node) {
			this.data = data
			this.node = node
			// this.listTitle = data.label
			// }
		},
 
		showOrganizationDialog() {
			setTimeout(() => {
				this.organizationForm.id = this.node.data.id
				this.organizationForm.lead = this.node.data.label
			})
 
			// this.organizationForm.id = this.node.parent.data.id
			// this.organizationForm.lead = this.node.parent.data.label
 
			this.addOrganizationDialogVisible = true
		},
		closeOrganizationTreeDialog() {
			this.addOrganizationDialogVisible = false
			this.visible = false
			this.organizationForm.organizationName = ''
			this.organizationForm.id = ''
			this.organizationForm.lead = ''
			this.value = ''
			this.value1 = ''
		},
 
		showEditOrganizationDialog() {
			this.editOrganizationDialogVisible = true
			setTimeout(() => {
				this.organizationForm.organizationName = this.data.label
				if (this.data.organizeType == 0) {
					this.placeholder = '集团'
				} else if (this.data.organizeType == 1) {
					this.placeholder = '子集团'
				} else if (this.data.organizeType == 2) {
					this.placeholder = '公司'
				} else if (this.data.organizeType == 3) {
					this.placeholder = '部门'
				} else if (this.data.organizeType == 4) {
					this.placeholder = '生态单位'
				}
			}, 0)
		},
		showDialog() {
			this.visible = true
		},
		closeEditOrganizationDialog() {
			this.editOrganizationDialogVisible = false
			this.organizationForm.organizationName = ''
		},
		// 新增组织
		async addOrganization() {
			const organizeName = this.organizationForm.organizationName
			const parentOrganize = this.organizationForm.id
			let organizeType = this.addOrganizeType
			if (organizeType == '集团') {
				organizeType = 0
			} else if (organizeType == '子集团') {
				organizeType = 1
			} else if (organizeType == '公司') {
				organizeType = 2
			} else if (organizeType == '部门') {
				organizeType = 3
			} else if (organizeType == '生态单位') {
				organizeType = 4
			}
			addOrganize({
				organizeName,
				parentOrganize,
				organizeType,
			}).then((res) => {
				if (res.data.status == 200) {
					this.$message({
						message: res.data.message,
						type: 'success',
					})
				} else {
					this.$message({
						message: res.data.message,
						type: 'error',
					})
				}
				const newChild = {
					id: id++,
					label: this.organizationForm.organizationName,
					children: [],
				}
 
				this.data.children.push(newChild)
				getOrganizeList({ viewType: 2 }).then(
					(res) => (this.organizationTreeData = [res.data.data[0]])
				)
 
				this.organizationForm.organizationName = ''
				this.value1 = ''
				this.value = ''
				this.organizationForm.id = ''
				this.organizationForm.lead = ''
				this.organizeType = ''
				this.addOrganizationDialogVisible = false
			})
		},
		async addOrganization1() {
			const organizeName = this.organizationForm.organizationName
			const parentOrganize = this.organizationForm.id
			let organizeType = this.addOrganizeType
			if (organizeType == '集团') {
				organizeType = 0
			} else if (organizeType == '子集团') {
				organizeType = 1
			} else if (organizeType == '公司') {
				organizeType = 2
			} else if (organizeType == '部门') {
				organizeType = 3
			} else if (organizeType == '生态单位') {
				organizeType = 4
			}
			const res = await addOrganize({
				organizeName,
				parentOrganize,
				organizeType,
			})
			const newChild = {
				id: id++,
				label: this.organizationForm.organizationName,
				children: [],
			}
			this.data = []
			this.data.push(newChild)
			const res1 = await getOrganizeList({ viewType: 2 })
			this.organizationTreeData = [res1.data.data[0]]
			this.visible = false
			// this.organizationForm.organizationName = ''
			// this.value = ''
			// this.organizationForm.id = ''
			// this.organizationForm.lead = ''
		},
		// 组织修改
		async editOrganization() {
			this.editOrganizationDialogVisible = false
			const id = this.data.id
			const organizeName = this.organizationForm.organizationName
			const organizeType = this.organizeType
			this.data.label = this.organizationForm.organizationName
			editOrganize({ id, organizeName, organizeType }).then((res) => {
				if (res.data.status === 200) {
					this.$message({
						message: res.data.message,
						type: 'success',
					})
				} else {
					this.$message({
						message: res.data.message,
						type: 'error',
					})
				}
			})
			const res1 = await getOrganizeList({ viewType: 2 })
			this.organizationTreeData = [res1.data.data[0]]
		},
		// 组织停用启用
		async statusChange(node) {
			setTimeout(() => {
				const organizeId = this.node.data.id
				const organizeName = this.node.data.organizeName
				console.log(node.data.organizeStatus)
				if (this.node.data.organizeStatus == 0) {
					restartOrganize({ organizeId, organizeName }).then((res) => {
						if (res.data.status == 200) {
							this.$message({
								message: res.data.message,
								type: 'success',
							})
						} else {
							this.$message({
								message: res.data.message,
								type: 'error',
							})
						}
						getOrganizeList({ viewType: 2 }).then((res) => {
							console.log(res.data.data[0])
							this.organizationTreeData = [res.data.data[0]]
						})
					})
				} else {
					forbiddenOrganize({ organizeId, organizeName }).then((res) => {
						if (res.data.status == 200) {
							this.$message({
								message: res.data.message,
								type: 'success',
							})
						} else {
							this.$message({
								message: res.data.message,
								type: 'error',
							})
						}
						getOrganizeList({ viewType: 2 }).then((res) => {
							this.organizationTreeData = [res.data.data[0]]
						})
					})
				}
			}, 0)
		},
		getSwitchValue(node) {
			// Convert numeric value to boolean
			return node.data.organizeStatus
		},
		oneClickEnables() {
			oneClickEnable().then((res) => {
				if (res.data.status == 200) {
					this.$message({
						message: res.data.message,
						type: 'success',
					})
					getOrganizeList({ viewType: 2 }).then((res) => {
						console.log(res.data.data[0])
						this.organizationTreeData = [res.data.data[0]]
					})
				} else {
					this.$message({
						message: res.data.message,
						type: 'error',
					})
				}
			})
		},
		// 获取修改组织类型
		change() {
			const selectedLabel = this.options.find(
				(item) => item.value === this.value
			)?.value
 
			this.organizeType = selectedLabel
		},
		// 获取新增组织类型
		select() {
			const selectedLabel = this.options1.find(
				(item) => item.value === this.value1
			)?.label
 
			this.addOrganizeType = selectedLabel
		},
		// 拖拽节点事件
		handleDragStart(draggingNode) {
			// 在拖拽开始时检查节点位置
			// 如果拖拽的节点是顶层节点并且已经有一个顶层节点存在，禁止拖拽
			if (draggingNode.level === 1 && this.hasTopLevelNode()) {
				this.draggable = false
			} else {
				this.draggable = true
			}
		},
 
		// 检查是否已经有一个顶层节点
		hasTopLevelNode() {
			return this.organizationTreeData.some((node) => node.level === 1)
		},
		handleDragEnd() {
			this.draggable = true
		},
 
		// 允许拖拽的条件
		allowDrop(draggingNode, dropNode, type) {
			// 如果拖拽的节点是顶层节点，不允许放置
 
			if (draggingNode.level === 1) {
				return false
			}
 
			// 如果拖拽的节点不是顶层节点但目标节点是顶层节点的同级，不允许放置
			if (draggingNode.level > 1 && dropNode.level === 1) {
				return false
			}
 
			// 其他情况允许放置
			return true
		},
		allowDrag(draggingNode, dropNode, type) {
			// 如果拖拽的节点是顶层节点，不允许放置
			// if (draggingNode.level === 1) {
			// 	return false
			// }
			// 如果拖拽的节点不是顶层节点但目标节点是顶层节点的同级，不允许放置
			// if (draggingNode.level > 1 && dropNode.level === 1) {
			// 	return false
			// }
			// 其他情况允许放置
			// return true
		},
		handleNodeDrop(draggingNode, dropNode, type) {
			// 在这里可以获取拖拽后节点的父节点
			const parentNode = dropNode.parent
 
			const currentOrganize = draggingNode.data.id
			const targetOrganize = dropNode.data.id
			changeOrganize({ currentOrganize, targetOrganize })
		},
	},
	watch: {
		// 监听拖拽后节点的变化
		draggedNode(newNode) {
			if (newNode) {
				// 这里可以访问拖拽后节点的父节点
				const parentNode = newNode.parent
			}
		},
	},
	computed: {
		filteredOrganizationTreeData() {
			// Filter out nodes with organizeStatus !== 0 (禁用)
			return this.organizationTreeData.filter((node) => {
				return node.data.organizeStatus === 0
			})
		},
	},
	async created() {
		const res = await getOrganizeList({ viewType: 2 })
		this.organizationTreeData = [res.data.data[0]]
		console.log([res.data.data[0]])
	},
}
</script>
 
<style scoped lang="scss">
.edit {
	width: 5vw;
}
.custom-tree-node {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	/*font-size: 15px;*/
	padding-right: 8px;
}
 
.selectFile {
	line-height: 19px;
}
 
.tree-card {
	overflow-y: auto; /* 开启滚动显示溢出内容 */
	width: 90%;
	height: 80vh;
	margin-left: 4vw;
	overflow-x: auto;
}
 
/*滚动条样式*/
::-webkit-scrollbar {
	width: 6px;
}
 
::-webkit-scrollbar-thumb {
	background-color: #40b8ff;
	border-radius: 3px;
}
 
.el-tree-node__label {
	font-size: 50px;
}
 
.list-card {
	overflow-y: auto; /* 开启滚动显示溢出内容 */
	width: 98%;
	height: 80vh;
}
 
/* 查询*/
.select-organization {
	margin-top: -33px;
	display: flex;
	justify-content: right;
	line-height: 30px;
}
 
.findButton,
.reset {
	margin-top: 58px;
	height: 40px;
	width: 8%;
}
 
.selectEvent {
	margin-right: 30px;
	margin-top: 58px;
}
 
.list-span {
	font-family: 微软雅黑;
	font-size: 20px;
	height: 100px;
	font-weight: bold;
	color: #525252;
	display: flex;
	line-height: 100px;
}
 
::v-deep .el-collapse-item__header {
	font-size: 17px;
	font-weight: bold;
}
 
.addOrganizationDialog {
	font-size: 20px;
	text-align: left;
	margin-top: -105px;
}
 
.dialog_divider {
	margin-top: -50px;
}
 
.dialogClose {
	text-align: right;
	margin-top: -75px;
	margin-bottom: -80px;
}
 
.span_title {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	color: #222222;
	font-size: 17px;
	font-weight: bold;
}
 
/*解决table展开时高度异常问题*/
::v-deep .el-table__header {
	width: 100% !important;
}
 
::v-deep .el-table__body {
	width: 100% !important;
}
</style>