From 23aac3cf9903d404eb86310d502a0eeb5a68b407 Mon Sep 17 00:00:00 2001
From: WX <1377869194@qq.com>
Date: 星期五, 14 七月 2023 16:45:03 +0800
Subject: [PATCH] 11
---
src/views/layer/layerSet.vue | 163 +++++++++++++++++------------------------------------
1 files changed, 53 insertions(+), 110 deletions(-)
diff --git a/src/views/layer/layerSet.vue b/src/views/layer/layerSet.vue
index c3cdad0..ae13792 100644
--- a/src/views/layer/layerSet.vue
+++ b/src/views/layer/layerSet.vue
@@ -10,16 +10,18 @@
</div>
</div>
<div class="layerContent">
- <!-- <el-tree
+ <el-tree
+ node-key="id"
:props="props"
:highlight-current="true"
:current-node-key="selectedNodeId"
- :data="menuOption"
+ :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="contentBox" v-for="(item, i) in menuOption" :key="i">
<div
class="contentTile"
@click.stop="selectList(item)"
@@ -54,7 +56,7 @@
</div>
</div>
</div>
- </div>
+ </div> -->
</div>
</div>
<div class="edit_box">
@@ -93,8 +95,12 @@
v-model="form.region"
placeholder="璇烽�夋嫨鍥惧眰绫诲瀷"
>
- <el-option label="Zone one" value="shanghai" />
- <el-option label="Zone two" value="beijing" />
+ <el-option
+ v-for="(e, i) in stretchOptions"
+ :label="e.label"
+ :value="e.value"
+ :key="i"
+ />
</el-select>
</el-form-item>
@@ -125,11 +131,17 @@
import { Plus, Delete, Top, Bottom } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
const stretchValue = ref("");
-const emits = defineEmits(["SETstate"]);
+const emits = defineEmits(["SETstate", "addlayer", "delLayer"]);
+//defineProps 鏉ユ帴鏀剁粍浠剁殑浼犲��
+const defineProp = defineProps({
+ layerTree: Array,
+});
+let treeRef = ref();
+
const stretchOptions = [
{
- value: "Option1",
- label: "Option1",
+ value: "鐩綍",
+ label: "鐩綍",
},
{
value: "Option2",
@@ -149,30 +161,6 @@
},
];
-let menuOption = reactive([
- {
- name: "娴嬭瘯",
- isShow: false,
- checkedAll: false,
- id: 1,
- children: [
- {
- id: 2,
- layerState: false,
- name: "鍥惧眰鍚嶇О",
- layerUrl: "",
- },
- ],
- },
- {
- id: 3,
- name: "娴嬭瘯1",
- isShow: false,
- checkedAll: true,
- layerState: false,
- children: [],
- },
-]);
const form = reactive({
name: "",
region: "",
@@ -181,12 +169,13 @@
children: [],
});
const props = {
- label: "name",
+ label: "cnName",
children: "children",
};
// 褰撳墠閫変腑鐨勮妭鐐� id
const selectedNodeId = ref(null as any); //鍋氱被鍨嬫柇瑷�澶勭悊
const selectedObj = ref(null);
+let menuOption = ref([]);
const handleCheckChange = (
data: Tree,
checked: boolean,
@@ -204,12 +193,11 @@
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, "褰撳墠閫変腑鐨勮妭鐐�");
+ form.selectName = data.cnName;
+ selectedObj.value = data;
}
}
//鏂板
@@ -218,44 +206,32 @@
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") {
- menuOption.forEach((e, i) => {
- if (e.id == selectedNodeId.value) {
- menuOption.push({
- id: id,
- name: form.name,
- region: form.region,
- layerUrl: form.layerUrl,
- children: [],
- });
- } else {
- e.children.forEach((v) => {
- if (v.id == selectedNodeId.value) {
- menuOption[i].children.push({
- id: id,
- name: form.name,
- region: form.region,
- layerUrl: form.layerUrl,
- children: [],
- });
- }
- });
- }
- });
+ addObj.parentId = selectedObj.value.parentId;
} else {
- // if(){
- // return
- // }
+ addObj.parentId = selectedNodeId.value;
}
+ emits("addlayer", addObj);
};
//鍒犻櫎
const delLayer = () => {
- menuOption = menuOption.filter((item) => {
- return item.id != selectedNodeId.value;
- });
-
- console.log(menuOption);
+ 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 = () => {};
@@ -264,45 +240,11 @@
emits("SETstate", false);
};
const handlIsShow = (res: string) => {
- menuOption.forEach((e) => {
+ menuOption.value.forEach((e) => {
if (e.name == res) {
e.isShow = !e.isShow;
}
});
-};
-//閫夋嫨鍒楄〃
-const selectList = (v) => {
- // selectedNodeId.value = v.id;
- console.log(v);
- if (v.id === selectedNodeId.value) {
- // 濡傛灉褰撳墠鑺傜偣宸茬粡閫変腑锛屽垯鍙栨秷閫変腑
- selectedNodeId.value = null;
- console.log(selectedNodeId.value, "鍙栨秷閫変腑");
- } else {
- // 鍚﹀垯閫変腑褰撳墠鑺傜偣
- selectedNodeId.value = v.id;
- form.selectName = v.name;
- selectedObj.value = v;
- console.log(selectedNodeId.value, "褰撳墠閫変腑鐨勮妭鐐�");
- }
-};
-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>
@@ -524,12 +466,13 @@
padding: 4px;
}
}
-/deep/
- .el-tree--highlight-current
- .el-tree-node.is-current
- > .el-tree-node__content {
- background: rgba(104, 156, 255, 0.5) !important;
-}
+// .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;
}
--
Gitblit v1.9.3