vue中el-tree结合el-switch实现开关状态切换
更新时间:2023年12月13日 15:06:15 作者:Zwq8023520
本文主要介绍了vue中el-tree结合el-switch实现开关状态切换,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
本文主要介绍了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>
到此这篇关于vue中el-tree结合el-switch实现开关状态切换的文章就介绍到这了,更多相关vue开关状态切换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
最新评论