<template>
|
<div class="edit">
|
<div class="layerBox">
|
<div class="layerTitle">
|
<div class="tileLeft">
|
<div class="titleImg" @click="editState">
|
<ArrowLeft />
|
</div>
|
<div class="titleLable">图层编辑</div>
|
</div>
|
</div>
|
<div class="layerContent">
|
<el-tree
|
node-key="id"
|
:props="props"
|
:highlight-current="true"
|
:current-node-key="selectedNodeId"
|
:data="layerTree"
|
:expand-on-click-node="false"
|
@node-click="handleNodeClick"
|
ref="treeRef"
|
/>
|
|
<!-- <div class="contentBox" v-for="(item, i) in menuOption" :key="i">
|
<div
|
class="contentTile"
|
@click.stop="selectList(item)"
|
:class="{ highlight: item.id == selectedNodeId }"
|
>
|
<div class="contentLeft">
|
<div class="contentImg"></div>
|
<div class="contentLabel">{{ item.name }}</div>
|
</div>
|
<div class="contentRight">
|
<div>
|
<div
|
@click="handlIsShow(item.name)"
|
class="contentUP"
|
:class="{ accordion: item.isShow }"
|
></div>
|
</div>
|
</div>
|
</div>
|
|
<div class="content" v-show="item.isShow">
|
<div
|
class="layer_box"
|
v-for="(v, k) in item.children"
|
:key="k"
|
@click.stop="selectList(v)"
|
:class="{ highlight: v.id == selectedNodeId }"
|
>
|
<div class="contentLeft">
|
<div class="contentImg"></div>
|
<div class="contentLabel">{{ v.name }}</div>
|
</div>
|
</div>
|
</div>
|
</div> -->
|
</div>
|
</div>
|
<div class="edit_box">
|
<div class="edit_box_btn btnstyle">
|
<el-button type="primary" :icon="Plus" @click="added('t')"
|
>新增同级</el-button
|
>
|
<el-button type="primary" :icon="Plus" @click="added('z')"
|
>新增子级</el-button
|
>
|
<el-button
|
type="primary"
|
:icon="Delete"
|
class="delbtn"
|
@click="delLayer"
|
>删除</el-button
|
>
|
<el-button type="primary" :icon="Top">向上移动</el-button>
|
<el-button type="primary" :icon="Bottom">向下移动</el-button>
|
</div>
|
<div class="edit_box_form">
|
<el-form :model="form" label-width="120px">
|
<el-form-item label="选中图层">
|
<el-input
|
v-model="form.selectName"
|
disabled
|
placeholder="点击图层树选择"
|
/>
|
</el-form-item>
|
<el-form-item label="图层名称">
|
<el-input v-model="form.name" placeholder="请输入图层名称" />
|
</el-form-item>
|
<el-form-item label="图层类型">
|
<el-select
|
style="width: 100%"
|
v-model="form.region"
|
placeholder="请选择图层类型"
|
>
|
<el-option
|
v-for="(e, i) in stretchOptions"
|
:label="e.label"
|
:value="e.value"
|
:key="i"
|
/>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="服务地址">
|
<el-input v-model="form.layerUrl" placeholder="请输入服务地址" />
|
</el-form-item>
|
<el-form-item>
|
<!-- <div class="btnstyle editBtn">
|
<el-button type="primary" @click="onSubmit">确定</el-button>
|
<el-button class="delbtn">取消</el-button>
|
</div> -->
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import {
|
ref,
|
onMounted,
|
onBeforeUnmount,
|
reactive,
|
defineProps,
|
defineEmits,
|
} from "vue";
|
import { Plus, Delete, Top, Bottom } from "@element-plus/icons-vue";
|
import { ElMessage } from "element-plus";
|
const stretchValue = ref("");
|
const emits = defineEmits(["SETstate", "addlayer", "delLayer"]);
|
//defineProps 来接收组件的传值
|
const defineProp = defineProps({
|
layerTree: Array,
|
});
|
let treeRef = ref();
|
|
const stretchOptions = [
|
{
|
value: "目录",
|
label: "目录",
|
},
|
{
|
value: "Option2",
|
label: "Option2",
|
},
|
{
|
value: "Option3",
|
label: "Option3",
|
},
|
{
|
value: "Option4",
|
label: "Option4",
|
},
|
{
|
value: "Option5",
|
label: "Option5",
|
},
|
];
|
|
const form = reactive({
|
name: "",
|
region: "",
|
selectName: "",
|
layerUrl: "",
|
children: [],
|
});
|
const props = {
|
label: "cnName",
|
children: "children",
|
};
|
// 当前选中的节点 id
|
const selectedNodeId = ref(null as any); //做类型断言处理
|
const selectedObj = ref(null);
|
let menuOption = ref([]);
|
const handleCheckChange = (
|
data: Tree,
|
checked: boolean,
|
indeterminate: boolean
|
) => {
|
console.log(data, checked, indeterminate);
|
};
|
const onSubmit = () => {
|
console.log("submit!");
|
};
|
|
// 处理节点点击事件
|
function handleNodeClick(data: any) {
|
console.log(data);
|
if (data.id === selectedNodeId.value) {
|
// 如果当前节点已经选中，则取消选中
|
selectedNodeId.value = null;
|
} else {
|
// 否则选中当前节点
|
selectedNodeId.value = data.id;
|
form.selectName = data.cnName;
|
selectedObj.value = data;
|
}
|
}
|
//新增
|
const added = (t) => {
|
var id = "";
|
for (var i = 0; i < 7; i++) {
|
id += Math.floor(Math.random() * 10);
|
}
|
var addObj = {
|
id: id,
|
name: form.name,
|
region: form.region,
|
layerUrl: form.layerUrl,
|
children: [],
|
type: 2,
|
parentId: null,
|
};
|
if (form.region == "目录") {
|
addObj.type = 1;
|
}
|
|
if (t == "t") {
|
addObj.parentId = selectedObj.value.parentId;
|
} else {
|
addObj.parentId = selectedNodeId.value;
|
}
|
emits("addlayer", addObj);
|
};
|
//删除
|
const delLayer = () => {
|
console.log(selectedObj.value);
|
console.log(treeRef.value.getNode(selectedObj.value));
|
treeRef.value.remove(treeRef.value.getNode(selectedObj.value));
|
// emits("delLayer", selectedNodeId.value);
|
};
|
//图层设置弹框
|
const layerSet = () => {};
|
//关闭状态
|
const editState = () => {
|
emits("SETstate", false);
|
};
|
const handlIsShow = (res: string) => {
|
menuOption.value.forEach((e) => {
|
if (e.name == res) {
|
e.isShow = !e.isShow;
|
}
|
});
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.edit {
|
width: 1227px;
|
display: flex;
|
position: absolute;
|
top: 60px;
|
left: 395px;
|
// top: 50%;
|
// left: 50%;
|
// transform: translateX(-50%);
|
// transform: translateY(-50%);
|
background: rgba(7, 8, 14, 0.8);
|
box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
|
border: 1px solid #d6e4ff;
|
z-index: 10;
|
}
|
.edit_box {
|
width: 867px;
|
padding: 30px 0;
|
.edit_box_btn {
|
display: flex;
|
justify-content: center;
|
margin-bottom: 47px;
|
}
|
.edit_box_form {
|
padding: 0 116px;
|
/deep/ .el-form-item__label {
|
color: #fff;
|
}
|
}
|
}
|
.btnstyle {
|
.el-button {
|
height: 37px;
|
background: rgba(104, 156, 255, 0.2);
|
border: 1px solid #234066;
|
border-radius: 2px;
|
font-size: 16px;
|
font-weight: 400;
|
color: #ffffff;
|
}
|
.el-button:hover {
|
border: 1px solid #689cff;
|
}
|
.delbtn {
|
background: rgba(245, 108, 108, 0.2);
|
border: 1px solid #5a0914;
|
}
|
}
|
.layerBox {
|
width: 359px;
|
height: 615px;
|
background: rgba(7, 8, 14, 0.8);
|
|
.layerTitle {
|
width: calc(100% - 27px);
|
height: 42px;
|
background: #0e151f;
|
box-shadow: 0px 0px 6px 0px #080c13,
|
0px 14px 16px 0px rgba(38, 47, 71, 0.68);
|
display: flex;
|
justify-content: space-between;
|
padding-left: 7px;
|
padding-right: 20px;
|
color: white;
|
.tileLeft {
|
height: 100%;
|
display: flex;
|
align-items: center;
|
|
.titleLable {
|
font-size: 24px;
|
font-family: Source Han Sans CN;
|
font-weight: 400;
|
color: #ffffff;
|
}
|
}
|
.titleImg {
|
width: 20px;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
color: rgba(104, 156, 255, 1);
|
cursor: pointer;
|
}
|
}
|
.layerContent {
|
padding: 0 8px;
|
}
|
.contentBox {
|
margin-top: 3px;
|
.content {
|
}
|
}
|
.contentTile {
|
width: 100%;
|
height: 42px;
|
background: #0d131d;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.contentLeft {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
.contentImg {
|
width: 22px;
|
height: 22px;
|
background: url("../../assets/img/leftBtn/矩形 8 拷贝 3.png") no-repeat;
|
background-size: 100% 100%;
|
margin-left: 16px;
|
}
|
.contentLabel {
|
font-size: 20px;
|
font-family: Source Han Sans CN;
|
font-weight: 300;
|
color: #ffffff;
|
margin-left: 7px;
|
}
|
}
|
.contentRight {
|
margin-right: 32px;
|
display: flex;
|
align-items: center;
|
|
.contentUP {
|
width: 18px;
|
height: 11px;
|
background: url("../../assets/img/leftBtn/箭头-左 拷贝.png") no-repeat
|
center;
|
background-size: 100% 100%;
|
|
cursor: pointer;
|
}
|
.accordion {
|
transform: rotate(180deg);
|
}
|
.contentDown {
|
width: 18px;
|
height: 11px;
|
background: url("../../assets/img/leftBtn/箭头-左 拷贝 4.png");
|
}
|
}
|
}
|
.content {
|
background: #1e2a3d;
|
padding: 10px;
|
}
|
.layer_box {
|
padding: 4px;
|
margin-bottom: 4px;
|
color: #ffffff;
|
font-size: 18px;
|
font-weight: 400;
|
background: #0e151f;
|
box-shadow: 0px 0px 6px 0px #080c13,
|
0px 14px 16px 0px rgba(38, 47, 71, 0.68);
|
display: flex;
|
justify-content: space-between;
|
padding-left: 7px;
|
padding-right: 20px;
|
.contentLeft {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
.contentImg {
|
width: 22px;
|
height: 22px;
|
background: url("../../assets/img/leftBtn/矩形 8 拷贝 3.png") no-repeat;
|
background-size: 100% 100%;
|
margin-left: 16px;
|
}
|
.contentLabel {
|
font-size: 20px;
|
font-family: Source Han Sans CN;
|
font-weight: 300;
|
color: #ffffff;
|
margin-left: 7px;
|
}
|
}
|
}
|
}
|
.editBtn {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
padding-top: 36px;
|
.delbtn {
|
margin-left: 40px;
|
}
|
}
|
.el-tree {
|
background: transparent;
|
}
|
/deep/ .el-tree-node {
|
background: #0d131d;
|
color: #ffffff;
|
font-size: 20px;
|
font-weight: 300;
|
margin-top: 3px;
|
padding: 8px;
|
}
|
/deep/ .el-tree-node:focus > .el-tree-node__content {
|
background: transparent;
|
}
|
/deep/ .el-tree-node__content:hover {
|
background: #0d131d;
|
}
|
/deep/ .el-tree-node__children {
|
background: #1e2a3d;
|
.el-tree-node {
|
background: #1e2a3d;
|
margin-top: 0;
|
padding: 4px;
|
}
|
}
|
// .layerContent
|
// /deep/
|
// .el-tree--highlight-current
|
// .el-tree-node.is-current
|
// > .el-tree-node__content {
|
// background: rgba(104, 156, 255, 0.5) !important;
|
// }
|
.highlight {
|
background: rgba(104, 156, 255, 0.5) !important;
|
}
|
</style>
|
