From 2718e2da9800e75bb8bf623c26168ae9800339a9 Mon Sep 17 00:00:00 2001
From: WX <1377869194@qq.com>
Date: 星期三, 12 七月 2023 14:52:25 +0800
Subject: [PATCH] 图层管理修改
---
src/views/layer/layerManage.vue | 304 ++++++++++++++++++++++----------------------------
1 files changed, 132 insertions(+), 172 deletions(-)
diff --git a/src/views/layer/layerManage.vue b/src/views/layer/layerManage.vue
index 7eddd0f..318ed41 100644
--- a/src/views/layer/layerManage.vue
+++ b/src/views/layer/layerManage.vue
@@ -1,102 +1,58 @@
<template>
- <div
- v-drag
- class="layerBox"
- >
+ <div v-drag class="layerBox">
<div class="layerTitle">
<div class="tileLeft">
- <div
- @click="setCloseLayer"
- class="titleImg"
- >
+ <div @click="setCloseLayer" class="titleImg">
<ArrowLeft />
</div>
<div class="titleLable">鍥惧眰绠＄悊</div>
</div>
- <div
- class="titleImg set"
- @click="layerSetBox"
- >
+ <div class="titleImg set" @click="layerSetBox">
<Setting />
</div>
</div>
<div class="layerContent">
- <div
- class="contentBox"
- v-for="(item, i) in menuOption"
- :key="i"
+ <el-tree
+ :props="props"
+ :highlight-current="false"
+ :current-node-key="selectedNodeId"
+ :data="menuOption"
+ :expand-on-click-node="false"
+ show-checkbox
+ @check-change="handleCheckChange"
>
- <div class="contentTile">
- <div class="contentLeft">
- <div class="contentImg"></div>
- <div class="contentLabel">{{ item.name }}</div>
- </div>
- <div class="contentRight">
- <div class="contentCheck">
- <el-checkbox
- @change="handlCheckAllChange(item)"
- v-model="item.checkedAll"
- >鍏ㄩ儴閫変腑</el-checkbox>
- </div>
- <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"
- >
- <div class="check_box">
- <el-checkbox
- @change="handlCheckAllChange(item)"
- v-model="v.layerState"
- >{{ v.layerName }}</el-checkbox>
- <img
- src="../../assets/img/layer.png"
- alt=""
- />
- </div>
- <div class="slider-demo-block">
- <div class="demonstration">閫忔槑搴�</div>
- <el-slider v-model="transparence" />
- <div class="demonstration">{{ transparence }}%</div>
- </div>
- <div class="selectBox">
- <div class="selectTile demonstration">鎷変几鏂瑰紡</div>
- <el-select
- v-model="stretchValue"
- class="m-2"
- placeholder="Select"
- size="small"
- >
- <el-option
- v-for="item in stretchOptions"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- />
- </el-select>
- </div>
- </div>
- </div>
- </div>
+ <template #default="{ node, data }">
+ <span class="custom-tree-node">
+ <span>{{ node.label }}</span>
+ <!-- <span>
+ <a @click="append(data)"> Append </a>
+ <a style="margin-left: 8px" @click="remove(node, data)">
+ Delete
+ </a>
+ </span> -->
+ <el-dropdown trigger="click">
+ <span class="el-dropdown-link">
+ <el-icon class="el-icon--right">
+ <MoreFilled />
+ </el-icon>
+ </span>
+ <template #dropdown>
+ <el-dropdown-menu>
+ <el-dropdown-item @click.native="clickdropdown(1)"
+ >璇︾粏</el-dropdown-item
+ >
+ <el-dropdown-item @click.native="clickdropdown(2)"
+ >灞炴��</el-dropdown-item
+ >
+ </el-dropdown-menu>
+ </template>
+ </el-dropdown>
+ </span>
+ </template>
+ </el-tree>
</div>
</div>
- <layer-set
- v-show="layerSetIsshow"
- @SETstate="SETstate"
- ></layer-set>
+ <layer-set v-show="layerSetIsshow" @SETstate="SETstate"></layer-set>
</template>
<script lang="ts" setup>
@@ -142,7 +98,7 @@
children: [
{
layerState: false,
- layerName: "鍥惧眰鍚嶇О",
+ name: "鍥惧眰鍚嶇О",
layerUrl: "",
},
],
@@ -155,6 +111,12 @@
},
]);
const layerSetIsshow = ref(false);
+const props = {
+ label: "name",
+ children: "children",
+};
+// 褰撳墠閫変腑鐨勮妭鐐� id
+const selectedNodeId = ref(null as any); //鍋氱被鍨嬫柇瑷�澶勭悊
const emits = defineEmits(["setCloseLayer"]);
const handlCheckAllChange = (res) => {};
const handlIsShow = (res: string) => {
@@ -174,6 +136,48 @@
};
const setCloseLayer = () => {
emits("setCloseLayer", false);
+};
+// 澶勭悊鑺傜偣鐐瑰嚮浜嬩欢
+function handleNodeClick(data: any) {
+ console.log(data);
+ if (data.id === selectedNodeId.value) {
+ // 濡傛灉褰撳墠鑺傜偣宸茬粡閫変腑锛屽垯鍙栨秷閫変腑
+ selectedNodeId.value = null;
+ console.log(selectedNodeId.value, "鍙栨秷閫変腑");
+ } else {
+ // 鍚﹀垯閫変腑褰撳墠鑺傜偣
+ selectedNodeId.value = data.id;
+ // form.selectName = data.name;
+ console.log(selectedNodeId.value, "褰撳墠閫変腑鐨勮妭鐐�");
+ }
+}
+const handleCheckChange = (
+ data: Tree,
+ checked: boolean,
+ indeterminate: boolean
+) => {
+ console.log(data, checked, indeterminate);
+};
+const clickdropdown = (res) => {
+ console.log(res);
+};
+const remove = (node: Node, data: Tree) => {
+ const parent = node.parent;
+ const children: Tree[] = parent.data.children || parent.data;
+ const index = children.findIndex((d) => d.id === data.id);
+ children.splice(index, 1);
+ // menuOption.value = [...menuOption.value];
+};
+let id = 1000;
+const append = (data: Tree) => {
+ const newChild = { id: id++, name: "testtest", children: [] };
+ if (!data.children) {
+ data.children = [];
+ }
+ data.children.push(newChild);
+ // console.log(data);
+ // menuOption = [...menuOption];
+ // console.log(menuOption);
};
</script>
@@ -220,93 +224,7 @@
.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;
- margin-left: 16px;
- }
- .contentLabel {
- font-size: 16px;
- font-family: Source Han Sans CN;
- font-weight: 300;
- margin-bottom: 5px;
-
- color: #ffffff;
- margin-left: 7px;
- }
- }
- .contentRight {
- margin-right: 32px;
- display: flex;
- align-items: center;
- .contentCheck {
- margin-right: 12px;
- /deep/.el-checkbox__label {
- font-size: 14px;
- }
- }
- .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;
- }
- .check_box {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding-right: 50px;
- img {
- width: 22px;
- height: 19px;
- }
- }
- .check_box .el-checkbox {
- font-size: 16px;
- color: #ffffff;
- }
- .check_box /deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
- background-color: rgba(13, 255, 0, 1);
- border-color: rgba(41, 109, 255, 1);
- }
- .check_box /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
- color: #fff;
- }
.slider-demo-block {
margin-top: 22px;
}
@@ -347,4 +265,46 @@
/deep/.el-select-dropdown__item {
font-size: 12px !important;
}
+.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;
+ }
+}
+/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;
+}
+.custom-tree-node {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ font-size: 16px;
+ padding-right: 8px;
+}
</style>
--
Gitblit v1.9.3