图层树开发方法（待验证）下拉框选择图片（有bug）

WX

2023-07-21 bf48462e6ce0e0baa899c1c64c24c05290dc77fd

 src/views/layer/layerSet.vue

@@ -3,22 +3,30 @@
    <div class="layerBox">
      <div class="layerTitle">
        <div class="tileLeft">
          <div
            class="titleImg"
            @click="editState"
          >
          <div class="titleImg" @click="editState">
            <ArrowLeft />
          </div>
          <div class="titleLable">图层编辑</div>
        </div>
      </div>
      <div class="layerContent">
        <div
          class="contentBox"
          v-for="(item, i) in menuOption"
          :key="i"
        >
          <div class="contentTile">
        <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>
@@ -34,85 +42,80 @@
            </div>
          </div>

          <div
            class="content"
            v-show="item.isShow"
          >
          <div class="content" v-show="item.isShow">
            <div
              class="layer_box"
              v-for="(v, k) in item.children"
              :key="k"
            ></div>
              @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>
    <div class="edit_box">
      <div class="edit_box_btn btnstyle">
        <el-button
          type="primary"
          :icon="Plus"
        >新增同级</el-button>
        <el-button
          type="primary"
          :icon="Plus"
        >新增子级</el-button>
        <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"
        >删除</el-button>
        <el-button
          type="primary"
          :icon="Top"
        >向上移动</el-button>
        <el-button
          type="primary"
          :icon="Bottom"
        >向下移动</el-button>
          @click="delLayer"
          >删除</el-button
        >
        <el-button type="primary" :icon="Top" @click="move(1)"
          >向上移动</el-button
        >
        <el-button type="primary" :icon="Bottom" @click="move(2)"
          >向下移动</el-button
        >
      </div>
      <div class="edit_box_form">
        <el-form
          :model="form"
          label-width="120px"
        >
          <el-form-item label="Activity name">
            <el-input v-model="form.name" />
        <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="Activity zone">
          <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="please select your zone"
              placeholder="请选择图层类型"
            >
              <el-option
                label="Zone one"
                value="shanghai"
              />
              <el-option
                label="Zone two"
                value="beijing"
                v-for="(e, i) in stretchOptions"
                :label="e.label"
                :value="e.value"
                :key="i"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="Resources">
            <el-radio-group v-model="form.resource">
              <el-radio label="Sponsor" />
              <el-radio label="Venue" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="Activity form">
            <el-input
              v-model="form.desc"
              type="textarea"
            />
          <el-form-item label="服务地址">
            <el-input v-model="form.layerUrl" placeholder="请输入服务地址" />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="onSubmit"
            >Create</el-button>
            <el-button>Cancel</el-button>
            <!-- <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>
@@ -130,12 +133,19 @@
  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"]);
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",
@@ -155,53 +165,128 @@
  },
];

let menuOption = reactive([
  {
    name: "测试",
    isShow: false,
    checkedAll: false,
    children: [
      {
        layerState: false,
        layerName: "图层名称",
        layerUrl: "",
      },
    ],
  },
  {
    name: "测试1",
    isShow: false,
    checkedAll: true,
    layerState: false,
  },
]);
const form = reactive({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
  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!");
};
const handlCheckAllChange = (res) => {};
const handlIsShow = (res: string) => {
  menuOption.forEach((e) => {
    if (e.name == res) {
      e.isShow = !e.isShow;
    }
  });

// 处理节点点击事件
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,
    cnName: form.name,
    region: form.region,
    layerUrl: form.layerUrl,
    children: [],
    type: 2,
    parentId: null,
  };
  if (form.region == "目录") {
    addObj.type = 1;
  }

  if (t == "t") {
    // console.log(treeRef.value.getNode(selectedObj.value));
    // addObj.parentId = selectedObj.value.parentId;
    treeRef.value.insertAfter(addObj, treeRef.value.getNode(selectedObj.value));
  } else {
    // addObj.parentId = selectedNodeId.value;
    treeRef.value.append(addObj, treeRef.value.getNode(selectedObj.value));
  }
};
//删除
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;
    }
  });
};
//移动
const move = (type) => {
  // let node = treeRef.value.getCurrentNode();
  let node = treeRef.value.getNode(selectedObj.value);
  let data = selectedObj.value;
  // 将变动之前的node备份
  let copyNode = { ...node };
  copyNode.previousSibling = { ...node.previousSibling };
  copyNode.nextSibling = { ...node.nextSibling };
  // window.sessionStorage.setItem("menuNode", CircularJSON.stringify(copyNode));

  if (type === 1) {
    // 上移
    if (node.previousSibling) {
      // 删除原先的node
      treeRef.value.remove(node.data);
      // 拿到copy的node
      // nodeData = CircularJSON.parse(window.sessionStorage.getItem("menuNode"));
      // 复制该node到指定位置(参数：1. 要增加的节点的 data 2. 要增加的节点的后一个节点的 data、key 或者 node)

      treeRef.value.insertBefore(copyNode.data, copyNode.previousSibling.data);
      // window.sessionStorage.removeItem("menuNode");
    } else {
      return ElMessage.warning("该菜单已经是当前层最上级");
    }
  } else {
    // 下移
    if (node.nextSibling) {
      treeRef.value.remove(node.data);
      treeRef.value.insertAfter(copyNode.data, copyNode.nextSibling.data);
    } else {
      return ElMessage.warning("该菜单已经是当前层最下级");
    }
  }
  emits("addlayer", { type: type, id: selectedObj.value.id });
};
</script>

@@ -210,10 +295,12 @@
  width: 1227px;
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  transform: translateY(-50%);
  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;
@@ -229,6 +316,9 @@
  }
  .edit_box_form {
    padding: 0 116px;
    /deep/ .el-form-item__label {
      color: #fff;
    }
  }
}
.btnstyle {
@@ -251,8 +341,9 @@
}
.layerBox {
  width: 359px;
  height: 680px;
  height: 615px;
  background: rgba(7, 8, 14, 0.8);

  .layerTitle {
    width: calc(100% - 27px);
    height: 42px;
@@ -309,6 +400,7 @@
        width: 22px;
        height: 22px;
        background: url("../../assets/img/leftBtn/矩形 8 拷贝 3.png") no-repeat;
        background-size: 100% 100%;
        margin-left: 16px;
      }
      .contentLabel {
@@ -347,5 +439,83 @@
    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>