<template> <div id="chooseChannelForCatalog" > <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;font-size: 14px;"> <el-tree class="el-scrollbar" ref="tree" id="catalogTree" empty-text="未知节点" node-key="id" default-expand-all :highlight-current="false" :expand-on-click-node="false" :props="props" :load="loadNode" @node-contextmenu="contextmenuEventHandler" @node-click="nodeClickHandler" lazy> <span class="custom-tree-node" slot-scope="{ node, data }" style="width: 100%"> <el-radio v-if="node.data.type === 0 || node.data.type === -1" style="margin-right: 0" v-model="chooseId" :label="node.data.id">{{''}}</el-radio> <span v-if="node.data.type === -1 && node.level === 1" style="font-size: 12px" class="iconfont icon-ziyuan"></span> <span v-if="node.data.type === 0 && node.level === 1" class="el-icon-s-home"></span> <span v-if="node.data.type === 0 && node.level > 1" class="el-icon-folder-opened"></span> <span v-if="node.data.type === 1" class="iconfont icon-shexiangtou"></span> <span v-if="node.data.type === 2" class="iconfont icon-zhibo"></span> <span style=" padding-left: 1px">{{ node.label }}</span> <span> <i style="margin-left: 5rem; color: #9d9d9d; padding-right: 20px" v-if="node.data.id === defaultCatalogIdSign">默认</i> </span> </span> </el-tree> </div> <catalogEdit ref="catalogEdit" :platformId="platformId" :platformDeviceId="platformDeviceId"></catalogEdit> </div> </template> <script> import catalogEdit from './catalogEdit.vue' export default { name: 'chooseChannelForCatalog', props: ['platformId', 'platformDeviceId', 'platformName', 'defaultCatalogId', 'catalogIdChange'], created() { this.chooseId = this.defaultCatalogId; this.defaultCatalogIdSign = this.defaultCatalogId; this.initData(); setTimeout(()=>{ if (this.catalogIdChange)this.catalogIdChange(this.defaultCatalogId, this.platformName); }, 100) }, components: { catalogEdit, }, data() { return { props: { label: 'name', children: 'children', isLeaf: 'leaf' }, defaultCatalogIdSign: null, chooseNode: null, chooseId: "", chooseName: "", catalogTree: null, contextmenuShow: false }; }, watch:{ platformId(newData, oldData){ console.log(newData) this.initData() }, }, methods: { initData: function () { this.getCatalog(); }, getCatalog: function(parentId, callback) { let that = this; this.$axios({ method:"get", url:`/api/platform/catalog`, params: { platformId: that.platformId, parentId: parentId } }).then((res)=> { if (res.data.code === 0) { if (typeof(callback) === 'function') { callback(res.data.data) } } }) .catch(function (error) { console.log(error); }); }, addCatalog: function (parentId, node){ let that = this; console.log(this.platformId) console.log(parentId) // 打开添加弹窗 that.$refs.catalogEdit.openDialog(false, null, null, parentId, node.level, ()=>{ node.loaded = false node.expand(); }); }, refreshCatalog: function (node){ node.loaded = false node.expand(); }, refreshCatalogById: function (id) { if (id) { let node = this.$refs.tree.getNode(id); this.refreshCatalog(node); } }, editCatalog: function (data, node){ let that = this; // 打开添加弹窗 that.$refs.catalogEdit.openDialog(true, data.id, data.name, data.parentId, (newData)=>{ node.parent.loaded = false node.parent.expand(); if (data.id === this.chooseId && newData.name !== data.name) { if (this.catalogIdChange)this.catalogIdChange(this.chooseId, newData.name); } }); }, removeCatalog: function (id, node){ this.$axios({ method:"delete", url:`/api/platform/catalog/del`, params: { id: id, platformId: this.platformId, } }).then((res) => { if (res.data.code === 0) { console.log("移除成功") node.parent.loaded = false node.parent.expand(); if (res.data.data) { this.defaultCatalogIdSign = res.data.data; } } }) .catch(function (error) { console.log(error); }); }, setDefaultCatalog: function (id){ this.$axios({ method:"post", url:`/api/platform/catalog/default/update`, params: { platformId: this.platformId, catalogId: id, } }).then((res)=> { if (res.data.code === 0) { this.defaultCatalogIdSign = id; } }) .catch(function (error) { console.log(error); }); }, loadNode: function(node, resolve){ console.log("this.platformDeviceId: " + this.platformDeviceId) if (node.level === 0) { resolve([ { name: "未分配", id: null, type: -1 },{ name: this.platformName, id: this.platformDeviceId, type: 0 } ]); } if (node.level >= 1){ this.getCatalog(node.data.id, resolve) } }, contextmenuEventHandler: function (event,data,node,element){ if (node.data.type !== 0) { data.parentId = node.parent.data.id; this.$contextmenu({ items: [ { label: "移除通道", icon: "el-icon-delete", disabled: false, onClick: () => { this.$axios({ method:"delete", url:"/api/platform/catalog/relation/del", data: data }).then((res)=>{ console.log("移除成功") node.parent.loaded = false node.parent.expand(); }).catch(function (error) { console.log(error); }); } } ], event, // 鼠标事件信息 customClass: "custom-class", // 自定义菜单 class zIndex: 3000, // 菜单样式 z-index }); }else { this.$contextmenu({ items: [ { label: "刷新节点", icon: "el-icon-refresh", disabled: false, onClick: () => { this.refreshCatalog(node); } }, { label: "新建节点", icon: "el-icon-plus", disabled: false, onClick: () => { this.addCatalog(data.id, node); } }, { label: "修改节点", icon: "el-icon-edit", disabled: node.level === 1, onClick: () => { this.editCatalog(data, node); } }, { label: "删除节点", icon: "el-icon-delete", disabled: node.level === 1, divided: true, onClick: () => { this.$confirm('确定删除?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { this.removeCatalog(data.id, node) }).catch(() => { }); } }, { label: "设为默认", icon: "el-icon-folder-checked", disabled: node.data.id === this.defaultCatalogIdSign, onClick: () => { this.setDefaultCatalog(data.id) }, }, // { // label: "导出", // icon: "el-icon-download", // disabled: false, // children: [ // { // label: "导出到文件", // onClick: () => { // // }, // }, // { // label: "导出到其他平台", // onClick: () => { // // }, // } // ] // }, ], event, // 鼠标事件信息 customClass: "custom-class", // 自定义菜单 class zIndex: 3000, // 菜单样式 z-index }); } return false; }, nodeClickHandler: function (data, node, tree){ console.log(data) console.log(node) this.chooseId = data.id; this.chooseName = data.name; if (this.catalogIdChange)this.catalogIdChange(this.chooseId, this.chooseName); } } }; </script> <style> #catalogTree{ display: inline-block; } </style>