11

WX

2023-07-14 23aac3cf9903d404eb86310d502a0eeb5a68b407

 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;
}