<template>
|
<div>
|
<Popup
|
ref="layer"
|
:closeHidePage="true"
|
:title="title"
|
:left="left"
|
:maxHeight="maxHeight"
|
:top="top"
|
@close="close"
|
>
|
<div class="treeContainer">
|
<el-tree
|
ref="tree"
|
:data="treeData"
|
show-checkbox
|
node-key="id"
|
draggable
|
:allow-drop="allowDrop"
|
:expand-on-click-node="false"
|
:auto-expand-parent="false"
|
:default-expanded-keys="defaultExpanded"
|
:default-checked-keys="defaultCheck"
|
@node-expand="changeNodeExpand($event, true)"
|
@node-collapse="changeNodeExpand($event, false)"
|
@check="check"
|
@node-contextmenu="rightClick"
|
@node-drop="nodeDrop"
|
>
|
<span
|
class="custom-tree-node"
|
slot-scope="{ data }"
|
@dblclick="flyTo(data)"
|
@click="select(data)"
|
>
|
<span>
|
<i v-if="data.children" class="el-icon-folder"></i>
|
<i
|
v-else
|
:class="
|
data.sourceType === 'location'
|
? 'el-icon-location-outline'
|
: ''
|
"
|
></i>
|
<el-input
|
v-if="data.rename"
|
v-model="data.name"
|
size="mini"
|
placeholder="请输入名称"
|
@change="rename(data)"
|
@blur="rename(data)"
|
></el-input>
|
<span v-else>{{ data.name }}</span>
|
</span>
|
</span>
|
</el-tree>
|
</div>
|
|
<div
|
class="rightClickMenu"
|
v-if="rightClickMenuDisplay"
|
:style="{ ...rightClickMenuStyle }"
|
>
|
<ul>
|
<li @click="addFold"><i class="el-icon-plus"></i>添加目录</li>
|
<li @click="addLayer"><i class="el-icon-plus"></i>添加图层</li>
|
<li @click="addPosition">
|
<i class="el-icon-location-outline"></i>添加定位
|
</li>
|
<li v-if="!isClickParent" @click="editTreeNode">
|
<i class="el-icon-edit"></i>编辑
|
</li>
|
<li v-else @click="mergeTreeNode">
|
<i
|
:class="mergeNode ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"
|
></i
|
>{{ mergeNode ? '展开' : '合并' }}目录
|
</li>
|
<li @click="openRename"><i class="el-icon-edit"></i>重命名</li>
|
<li @click="deleteTreeNode"><i class="el-icon-delete"></i>删除</li>
|
</ul>
|
</div>
|
</Popup>
|
<add-terrain ref="addTerrain" @success="addSceneData" />
|
<add-online-map
|
ref="addOnlineMap"
|
@success="addOtherData('影像', $event)"
|
/>
|
<add-image ref="addImage" @success="addSceneData" />
|
<add-model ref="addModel" @success="addSceneData" />
|
<add-pathLayer ref="addPathLayer" @success="addSceneData" />
|
<add-wfs ref="addWfs" @success="addSceneData" />
|
<add-vector ref="addVector" @success="addSceneData" />
|
<add-geojson ref="addGeojson" @success="addSceneData" />
|
<add-other ref="addOther" @success="addSceneData" />
|
<VideoEdit ref="video" @success="addSceneData" />
|
<Video3DEdit ref="video3D" @success="addSceneData" />
|
|
<select-data ref="select" @success="openThisTypePop" />
|
<animationEdit
|
ref="animationEdit"
|
@success="updateAnimation"
|
@setAnimation="setAnimation"
|
/>
|
</div>
|
</template>
|
|
<script>
|
import Bus from '@tools/Bus';
|
import baseVuex from '@mixin/baseVuex';
|
import Popup from '@tools/Popup';
|
import AddImage from './AddImage';
|
import AddTerrain from './AddTerrain';
|
import AddModel from './AddModel';
|
import AddPathLayer from './AddPathLayer';
|
import AddWfs from './AddWfs';
|
import AddVector from './AddVector';
|
import AddGeojson from './AddGeojson';
|
import AddOther from './AddOther';
|
import SelectData from './SelectData';
|
import animationEdit from '@c/demoAnimation/animationEdit';
|
import VideoEdit from '@c/object/Video';
|
import Video3DEdit from '@c/object/Video3D';
|
import axios from 'axios';
|
import AddOnlineMap from './AddOnlineMap.vue';
|
// 工程树工具
|
let _treeTool;
|
export default {
|
name: 'Layer',
|
components: {
|
Popup,
|
AddImage,
|
AddTerrain,
|
AddWfs,
|
AddVector,
|
AddGeojson,
|
AddModel,
|
AddPathLayer,
|
AddOther,
|
SelectData,
|
animationEdit,
|
AddOnlineMap,
|
VideoEdit,
|
Video3DEdit,
|
},
|
mixins: [baseVuex],
|
data() {
|
return {
|
title: '图层管理',
|
left: '10px',
|
top: '10px',
|
maxHeight: 'max',
|
defaultCheck: [],
|
defaultExpanded: [],
|
selectNode: undefined,
|
rightClickMenuDisplay: false,
|
rightClickMenuStyle: {},
|
isClickParent: false,
|
isNewFold: false,
|
newFoldName: undefined,
|
mergeNode: false,
|
};
|
},
|
mounted() {
|
// 获取本地配置文件
|
if (this.$route.query.hasOwnProperty('layer')) {
|
axios
|
.get(`./layer/${this.$route.query.layer || 'layer'}.json`)
|
.then((data) => {
|
data.name && sessionStorage.setItem('SmartEarthTitle', data.name);
|
document.title = sessionStorage.getItem('SmartEarthTitle');
|
|
this.setTreeData([]);
|
this.initData(data.data);
|
});
|
} else if (this.treeData.length) {
|
// 存在缓存数据
|
// 加载场景数据
|
this.loadDataToScene();
|
} else {
|
// 默认树结构
|
this.setTreeData([
|
{ id: '82A0C3DE', name: '影像', children: [] },
|
{ id: '82C3DE', name: '地形', children: [] },
|
{ id: '4FE10400', name: '模型', children: [] },
|
{ id: '0A51CF71', name: '矢量', children: [] },
|
]);
|
// 加载场景数据
|
this.loadDataToScene();
|
}
|
// 打开弹窗
|
this.$refs.layer.open();
|
|
// 定义中转站事件
|
this.initBusEvent();
|
},
|
destroyed() {
|
_treeTool = undefined;
|
},
|
methods: {
|
close() {
|
Bus.$emit('checkTab', 'index/add/treeLayer', false);
|
},
|
// 定义中转站事件
|
initBusEvent() {
|
Bus.$off('addLayer');
|
Bus.$on('addLayer', (type) => {
|
this.selectNode = this.$refs.tree && this.$refs.tree.getCurrentNode();
|
this.openThisTypePop(type);
|
});
|
Bus.$off('addServerData');
|
Bus.$on('addServerData', (data) => {
|
this.selectNode = this.$refs.tree && this.$refs.tree.getCurrentNode();
|
if (data.openProp) {
|
this.openThisTypePop(data.sourceType, undefined, data);
|
} else {
|
this.addSceneData(data);
|
}
|
});
|
|
Bus.$off('openLayer');
|
Bus.$on('openLayer', (open = true) => {
|
// 打开弹窗
|
if (open) {
|
this.$refs.layer.open();
|
} else {
|
this.$refs.layer.close();
|
}
|
});
|
Bus.$off('saveFile');
|
Bus.$on('saveFile', () => {
|
// 保存文件
|
this.save();
|
});
|
Bus.$off('openFile');
|
Bus.$on('openFile', (file) => {
|
// JSON转为树
|
this.loadJsonFromFile(file);
|
});
|
Bus.$off('addFile');
|
Bus.$on('addFile', () => {
|
this.selectNode = this.$refs.tree && this.$refs.tree.getCurrentNode();
|
// 添加文件
|
this.append(this.selectNode);
|
});
|
Bus.$off('addOtherData');
|
Bus.$on('addOtherData', (parentName, data) => {
|
// 添加其他数据
|
this.addOtherData(parentName, data);
|
});
|
Bus.$off('removeTreeNode');
|
Bus.$on('removeTreeNode', (entity) => {
|
// 删除其他数据
|
this.removeTreeNode({ id: entity.id });
|
});
|
Bus.$off('updataTreeNode');
|
Bus.$on('updataTreeNode', (id, data) => {
|
// 更新其他数据
|
this.updataTreeNode({
|
id: id,
|
nodeValue: data,
|
});
|
});
|
Bus.$off('checkNode');
|
Bus.$on('checkNode', (id, checked) => {
|
if (this.$refs.tree) {
|
let treeNode = this.$refs.tree.getNode(id);
|
// 勾选树节点(勾选框)
|
this.checkNode(treeNode.data, checked);
|
// 勾选节点(数据)
|
this.checkTreeNode({ id, checked });
|
// 更新场景数据
|
_treeTool.checkNode(treeNode.data, checked);
|
}
|
});
|
Bus.$off('clearFirstParentNode');
|
Bus.$on('clearFirstParentNode', (parentName) => {
|
// 清除所有对象
|
this.clearFirstParentNode(parentName);
|
});
|
|
Bus.$off('editDemoAnimation');
|
Bus.$on('editDemoAnimation', () => {
|
this.editDemoAnimation();
|
});
|
},
|
// 读取json文件数据
|
loadJsonFromFile(file) {
|
let reader = new FileReader();
|
reader.onload = (e) => {
|
let data = JSON.parse(e.target.result);
|
this.initData(data);
|
};
|
reader.readAsText(file.raw);
|
},
|
// 初始化数据
|
initData(data) {
|
if (this.treeData.length) {
|
this.removeChildData(this.treeData);
|
}
|
|
data.name && sessionStorage.setItem('SmartEarthTitle', data.name);
|
// 设置工程树数据
|
this.setTreeData(data.children);
|
// 初始定位
|
if (data.flyTo) {
|
this.setView(data.flyTo);
|
}
|
// 地图状态
|
if (data.mapStatus) {
|
for (let status in data.mapStatus) {
|
this.changeMapStatus({ type: status, value: data.mapStatus[status] });
|
}
|
}
|
// 加载场景数据
|
this.loadDataToScene();
|
},
|
// 加载数据到场景
|
loadDataToScene() {
|
if (window.sgworld) {
|
// 工程树工具
|
_treeTool = new window.TreeTool(window.sgworld);
|
window.sgworld._treeTool = _treeTool;
|
if (this.$refs.tree) {
|
this.defaultCheck = [];
|
this.defaultExpanded = [];
|
// 遍历节点
|
this.ergodicNode({ children: this.treeData });
|
}
|
// 初始定位
|
if (this.viewCenter.length) {
|
Viewer.options && (Viewer.options.defaultResetView = this.viewCenter);
|
this.flyTo({
|
flyTo: this.viewCenter,
|
});
|
}
|
|
//地图状态
|
for (let status in this.mapStatus) {
|
sgworld[status] = this.mapStatus[status];
|
}
|
|
document.title =
|
sessionStorage.getItem('SmartEarthTitle') || 'SmartEarth';
|
} else {
|
setTimeout(() => {
|
this.loadDataToScene();
|
}, 500);
|
}
|
},
|
// 遍历节点
|
ergodicNode(node, addData = true) {
|
node.rename = false;
|
if (node.expanded) {
|
this.defaultExpanded.push(node.id);
|
}
|
if (
|
node.checked &&
|
(!node.children || (node.children && !node.children.length))
|
) {
|
this.defaultCheck.push(node.id);
|
if (addData && node._children) {
|
node._children.forEach((item) => {
|
_treeTool.addData(item);
|
});
|
} else {
|
addData && _treeTool.addData(node);
|
}
|
}
|
if (node.children && node.children.length) {
|
node.children.forEach((item) => {
|
this.ergodicNode(item, addData);
|
});
|
}
|
},
|
// 更新节点展开状态
|
changeNodeExpand(data, expanded) {
|
this.updataTreeNode({
|
id: data.id,
|
key: 'expanded',
|
value: expanded,
|
});
|
},
|
checkNode(node, checked) {
|
this.$refs.tree.setChecked(node.id, checked);
|
if (node.children) {
|
node.children.forEach((item) => {
|
this.checkNode(item, checked);
|
});
|
}
|
},
|
// 勾选
|
check(treeNode, data) {
|
let isCheck = data.checkedKeys.indexOf(treeNode.id) > -1;
|
// 勾选节点
|
this.checkTreeNode({ id: treeNode.id, checked: isCheck });
|
// 更新场景数据
|
_treeTool.checkNode(treeNode, isCheck);
|
|
// 只能同时加载一个地形
|
if (
|
isCheck &&
|
treeNode.sourceType &&
|
treeNode.sourceType.indexOf('terrain') > -1
|
) {
|
let index = data.checkedNodes.findIndex((item) => {
|
return (
|
item.sourceType &&
|
item.sourceType.indexOf('terrain') > -1 &&
|
item.id !== treeNode.id
|
);
|
});
|
if (index > -1) {
|
// 取消勾选
|
this.$refs.tree.setChecked(data.checkedNodes[index].id, false);
|
this.checkTreeNode({
|
id: data.checkedNodes[index].id,
|
checked: false,
|
});
|
}
|
}
|
},
|
// 添加节点|文件夹
|
append(data) {
|
this.$confirm('请选择添加类型', '提示', {
|
confirmButtonText: '数据',
|
cancelButtonText: '文件夹',
|
distinguishCancelAndClose: true,
|
closeOnClickModal: false,
|
})
|
.then(() => {
|
// 选择数据
|
this.selectData(data);
|
})
|
.catch((action) => {
|
// 添加文件夹
|
if (action === 'cancel') {
|
this.addFolder(data);
|
}
|
});
|
},
|
// 添加文件夹
|
addFolder(data) {
|
this.$prompt('请输入文件夹名称', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
inputValue: '新建文件夹',
|
closeOnClickModal: false,
|
})
|
.then(({ value }) => {
|
let newChild = {
|
id: window.sgworld.Core.getuid(),
|
name: value,
|
rename: false,
|
children: [],
|
};
|
this.addData(data, newChild);
|
})
|
.catch(() => {});
|
},
|
// 选择数据
|
selectData(data) {
|
this.selectNode = data;
|
this.$refs.select.open();
|
},
|
// 打开对于类型的弹窗
|
openThisTypePop(type, editData, defaultData) {
|
switch (type) {
|
case 'wms':
|
case 'wmts':
|
case 'tdmap':
|
case 'txmap':
|
case 'gdmap':
|
case 'bdmap':
|
case 'local-map':
|
case 'arcgis':
|
this.$refs.addImage.open(type, editData, defaultData);
|
break;
|
case 'onlineMap':
|
this.$refs.addOnlineMap.open(type, editData, defaultData);
|
break;
|
case 'terrain':
|
case 'sgsterrain':
|
case 'arcgisterrain':
|
this.$refs.addTerrain.open(type, editData, defaultData);
|
break;
|
case 'CesiumGlobeTerrain':
|
this.addSceneData({
|
id: window.sgworld.Core.getuid(),
|
name: 'CesiumIon全球地形',
|
sourceType: 'CesiumGlobeTerrain',
|
});
|
break;
|
case 'b3dm':
|
case 'gltf':
|
this.$refs.addModel.open(type, editData, defaultData);
|
break;
|
case 's3m':
|
this.$refs.addModel.open(type, editData, defaultData);
|
break;
|
case 'kml':
|
this.$refs.addOther.open(type, editData, defaultData);
|
break;
|
case 'wfs':
|
this.$refs.addWfs.open(type, editData, defaultData);
|
break;
|
case 'vector':
|
this.$refs.addVector.open(type, editData, defaultData);
|
break;
|
case 'geojson':
|
this.$refs.addGeojson.open(type, editData, defaultData);
|
break;
|
case 'pathLayer':
|
this.$refs.addPathLayer.open(type, editData, defaultData);
|
break;
|
case 'videoBox':
|
this.$refs.video.open(type, editData);
|
break;
|
case 'video3D':
|
this.$refs.video3D.open(type, editData);
|
break;
|
}
|
},
|
// 添加数据到场景
|
addSceneData(data, isEdit) {
|
if (isEdit) {
|
this.updataTreeNode({
|
id: data.id,
|
nodeValue: data,
|
});
|
return;
|
}
|
data.checked = true;
|
// 添加数据到场景
|
if (!_treeTool) {
|
// 工程树工具
|
_treeTool = new window.TreeTool(window.sgworld);
|
window.sgworld._treeTool = _treeTool;
|
}
|
if (data.children) {
|
_treeTool.checkNode(data, true);
|
} else {
|
_treeTool.addData(data);
|
}
|
// 添加节点
|
this.addData(this.selectNode, data);
|
|
this.selectNode = undefined;
|
},
|
// 添加树节点
|
addData(data, value) {
|
!value.rename && (value.rename = false);
|
this.addTreeChildren({ pid: data && data.id, item: value });
|
this.expandedNode(data);
|
|
value.checked &&
|
this.$nextTick(() => {
|
this.setNodeCheck(value, true);
|
});
|
},
|
setNodeCheck(node, checked) {
|
this.$refs.tree.setChecked(node, checked);
|
if (node.children) {
|
node.children.forEach((item) => {
|
this.setNodeCheck(item, checked);
|
});
|
}
|
},
|
// 根据名字获取父节点
|
getParentNodeByName(name) {
|
let index = this.treeData.findIndex((item) => {
|
return item.name === name;
|
});
|
return this.treeData[index];
|
},
|
// 添加其他数据
|
addOtherData(parentName, data) {
|
let parentNode = this.getParentNodeByName(parentName);
|
data.checked = true;
|
|
if (!parentNode) {
|
parentNode = {
|
id: window.sgworld.Core.getuid(),
|
name: parentName,
|
children: [],
|
};
|
this.addData(undefined, parentNode);
|
this.$nextTick(() => {
|
this.addData(parentNode, { ...data, item: undefined });
|
_treeTool.treeData && _treeTool.treeData.set(data.id, data.item);
|
});
|
} else {
|
this.addData(parentNode, { ...data, item: undefined });
|
_treeTool.treeData && _treeTool.treeData.set(data.id, data.item);
|
}
|
},
|
// 添加演示动画
|
editDemoAnimation() {
|
this.$prompt('请输入演示动画名称', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
inputValue: '新建演示动画',
|
closeOnClickModal: false,
|
})
|
.then(({ value }) => {
|
let id = window.sgworld.Core.getuid();
|
let data = {
|
id,
|
name: value,
|
sourceType: 'demoAnimation',
|
animationDatas: [],
|
};
|
this.addOtherData('演示动画', data);
|
this.$refs.animationEdit.open(id);
|
})
|
.catch(() => {});
|
},
|
//更新动画
|
updateAnimation(id, data) {
|
this.updataTreeNode({
|
id: id,
|
key: 'animationDatas',
|
value: data,
|
});
|
},
|
// 设置动画数据
|
setAnimation(keys, isCheck) {
|
if (keys) {
|
keys.forEach((element) => {
|
let treeNode = this.$refs.tree.getNode(element);
|
// 勾选节点
|
this.checkTreeNode({ id: element, checked: isCheck });
|
// 更新场景数据
|
_treeTool.checkNode(treeNode.data, isCheck);
|
this.$refs.tree.setChecked(element, isCheck);
|
});
|
}
|
},
|
// 定位
|
flyTo(treeNode) {
|
if (treeNode.animationDatas) {
|
this.$refs.animationEdit.start(treeNode.animationDatas);
|
} else {
|
_treeTool.flyTo(treeNode);
|
}
|
},
|
select() {
|
this.rightClickMenuDisplay = false;
|
},
|
// 移除
|
remove(data) {
|
// 移除节点
|
this.removeTreeNode({ id: data.id });
|
if (data.children) {
|
this.removeChildData(data.children);
|
} else {
|
// 移除场景数据
|
_treeTool.deleteData(data.id);
|
if (data.sourceType === 'demoAnimation') {
|
Bus.$emit('closeAnimationEdit');
|
}
|
}
|
},
|
removeChildData(nodes) {
|
nodes.forEach((item) => {
|
if (item.children) {
|
this.removeChildData(item.children);
|
} else {
|
// 移除场景数据
|
_treeTool.deleteData(item.id);
|
if (item.sourceType === 'demoAnimation') {
|
Bus.$emit('closeAnimationEdit');
|
}
|
}
|
});
|
},
|
// 清除所有对象
|
clearFirstParentNode(name) {
|
let parentnode = this.getParentNodeByName(name);
|
parentnode && this.remove(parentnode);
|
},
|
// 保存
|
save() {
|
let data = {
|
name: document.title,
|
id: 1,
|
open: true,
|
children: this.treeData,
|
flyTo: this.viewCenter,
|
mapStatus: this.mapStatus,
|
};
|
let content = JSON.stringify(data);
|
let blob = new Blob([content], { type: '' });
|
var reader = new FileReader();
|
reader.onloadend = () => {
|
let url = reader.result;
|
let triggerDownload = document.createElement('a');
|
triggerDownload.download = (document.title || 'layers') + '.json';
|
triggerDownload.href = url;
|
triggerDownload.click();
|
};
|
reader.readAsDataURL(blob);
|
},
|
// 右键菜单元素
|
rightClick(e, data, node, comp) {
|
if (!this.user.admin) {
|
return;
|
}
|
this.isClickParent = !!(data.children || data._children);
|
data._children ? (this.mergeNode = true) : (this.mergeNode = false);
|
this.selectNode = data;
|
let pageY = e.pageY;
|
if (pageY + 192 > Viewer.container.offsetHeight) {
|
pageY -= 192;
|
}
|
this.rightClickMenuStyle = {
|
top: pageY + 'px',
|
left: e.pageX + 5 + 'px',
|
};
|
this.rightClickMenuDisplay = true;
|
document.onclick = () => {
|
this.rightClickMenuDisplay = false;
|
document.onclick = undefined;
|
};
|
},
|
appendTreeNode() {
|
this.append(this.selectNode);
|
},
|
// 右键删除按钮点击事件
|
deleteTreeNode() {
|
this.remove(this.selectNode);
|
this.$refs.tree && this.$refs.tree.setCurrentKey(null);
|
this.selectNode = undefined;
|
},
|
// 右键编辑按钮编辑树节点
|
editTreeNode() {
|
if (this.selectNode) {
|
if (this.selectNode.sourceType === 'SimpleGraphic') {
|
let entity = window.Viewer.entities.getById(this.selectNode.id);
|
sgworld.Creator.SimpleGraphic.openEditProp(entity);
|
} else if (this.selectNode.sourceType === 'MilitaryPlotting') {
|
let entity = window.Viewer.entities.getById(this.selectNode.id);
|
sgworld.Creator.MilitaryPlotting.openEditProp(entity);
|
} else if (this.selectNode.sourceType === 'demoAnimation') {
|
this.$refs.animationEdit.open(
|
this.selectNode.id,
|
this.selectNode.animationDatas
|
);
|
} else {
|
this.openThisTypePop(this.selectNode.sourceType, this.selectNode);
|
}
|
}
|
},
|
// 添加目录
|
addFold() {
|
let newChild = {
|
id: window.sgworld.Core.getuid(),
|
name: '新建目录',
|
children: [],
|
rename: true,
|
};
|
this.addData(this.selectNode, newChild);
|
},
|
// 添加定位点
|
addPosition() {
|
let degrees = sgworld.Navigate.getDegrees(); //经纬度
|
let heading = Cesium.Math.toDegrees(Viewer.camera.heading); //水平角
|
let pitch = Cesium.Math.toDegrees(Viewer.camera.pitch); //俯仰角度
|
let newChild = {
|
id: window.sgworld.Core.getuid(),
|
name: '兴趣点',
|
sourceType: 'location',
|
checked: true,
|
rename: true,
|
disabled: true,
|
flyTo: [
|
degrees.lon.toFixed(6),
|
degrees.lat.toFixed(6),
|
degrees.height.toFixed(2),
|
heading,
|
pitch,
|
],
|
};
|
this.addData(this.selectNode, newChild);
|
},
|
expandedNode(node) {
|
if (node && node.children && !node.expanded) {
|
let treeNode = this.$refs.tree.getNode(node.id);
|
if (treeNode) {
|
treeNode.expanded = true;
|
this.updataTreeNode({
|
id: node.id,
|
key: 'expanded',
|
value: true,
|
});
|
}
|
}
|
},
|
addLayer() {
|
this.selectData(this.selectNode);
|
},
|
openRename() {
|
if (this.selectNode) {
|
this.selectNode.rename = true;
|
}
|
},
|
rename(data) {
|
data.rename = false;
|
this.updataTreeNode({
|
id: data.id,
|
key: 'name',
|
value: data.name,
|
});
|
},
|
mergeTreeNode() {
|
if (this.mergeNode) {
|
this.selectNode.children = this.selectNode._children;
|
this.selectNode._children = null;
|
} else {
|
this.selectNode._children = this.selectNode.children;
|
this.selectNode.children = null;
|
}
|
this.updataTreeNode({
|
id: this.selectNode.id,
|
nodeValue: this.selectNode,
|
});
|
},
|
allowDrop(draggingNode, dropNode, type) {
|
if (!this.user.admin) {
|
return false;
|
} else if (type === 'inner' && !dropNode.data.children) {
|
return false;
|
} else {
|
return true;
|
}
|
},
|
nodeDrop(node) {
|
if (node.data && node.data.checked) {
|
// 勾选
|
this.$refs.tree.setChecked(node.data.id, true);
|
}
|
},
|
},
|
};
|
</script>
|
|
<style scoped lang="less" scoped>
|
.treeContainer {
|
width: 100%;
|
height: 100%;
|
|
.treeTitle {
|
text-align: center;
|
margin: 10px 0;
|
|
/deep/ .el-upload {
|
margin-right: 10px;
|
}
|
}
|
|
.el-tree {
|
background: transparent;
|
color: #fff;
|
}
|
|
/deep/ .el-tree-node__content:hover {
|
background-color: rgba(245, 247, 250, 0.2);
|
}
|
|
/deep/ .el-tree-node:focus > .el-tree-node__content {
|
background-color: rgba(245, 247, 250, 0.2);
|
}
|
|
/deep/ .custom-tree-node {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
font-size: 14px;
|
padding-right: 10px;
|
|
i {
|
margin-right: 5px;
|
}
|
}
|
|
/deep/ .el-checkbox > .is-disabled {
|
display: none;
|
}
|
}
|
.rightClickMenu {
|
position: fixed;
|
display: block;
|
z-index: 10000;
|
background-color: #fff;
|
padding: 5px 0;
|
border: 1px solid #ebeef5;
|
border-radius: 4px;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
[class*=' el-icon-'],
|
[class^='el-icon-'] {
|
margin-right: 5px;
|
}
|
|
ul {
|
margin: 0;
|
padding: 0;
|
|
li {
|
list-style: none;
|
margin: 0;
|
padding: 0 15px;
|
font-size: 14px;
|
line-height: 30px;
|
cursor: pointer;
|
color: black;
|
|
&:hover {
|
background-color: #ebeef5;
|
}
|
}
|
}
|
}
|
</style>
|