real3d-portalsite/src/components/Combinations/LayerManage/LayerManageSplit.vue

<template>
  <div class="sm-panel" v-show="LayerManageShow" v-drag>
    <div class="sm-panel-header">
      <span>{{ Resource.LayerManage }}</span>
      <span class="closeBtn" @click="toggleVisibility">&times;</span>
    </div>
    <Tabs value="">
      <TabPane :label="Resource.Resource" name="zyml">
        <div class="zyml" :class="$props.splitId >= 0 ? `zymlsplit` : ''">
          <div class="searchDiv">
            <el-input :placeholder="Resource.InputPlaceholder" prefix-icon="el-icon-search" v-model="treeSearchText"
            size="small">
          </el-input>
          <div
            class="eicon"
            :class="isshowNum ? 'eyes' : 'close_eyes'"
            @click="isshowNum = !isshowNum"
          ></div>
          </div>
          <div class="treeDiv">
            <el-tree @check="handleCheckChange" class="filter-tree" :data="TreeDatas" show-checkbox :props="defaultProps"
              :filter-node-method="filterNode" :default-checked-keys="checkedKeys" node-key="id" ref="tree">
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ !isshowNum && !data.url && node.label ? node.label.replace(/\[.*$/, '') : node.label }}</span>
                <span>
                  <Icon :type="!data.favorite ? 'ios-star-outline' : 'ios-star'" color="green" size="18" class="opBtn"
                    :title="data.favorite ? Resource.DelCollect : Resource.AddCollect
                      " @click="favoriteHandle(data)" v-if="data.url != ''" />
                </span>
              </span>
            </el-tree>
          </div>
        </div>
      </TabPane>
      <TabPane :label="Resource.LayerOptions" name="tckz" v-if="$props.splitId == -1">
        <div class="tckz">
          <List split size="large">
            <ListItem v-for="(item, index) in addlayerdata" :key="index">
              {{ item.title }}
              <div class="listBtn">
                <i-switch v-model="item.visible" size="small" @on-change="visibleChange(item, $event)">
                  <template #open>
                    <span></span>
                  </template>
                  <template #close>
                    <span></span>
                  </template>
                </i-switch>
                <Icon type="md-arrow-round-up" color="green" size="18" class="opBtn" :title="Resource.MoveUpOneLevel"
                  @click="raise(item)" v-if="index > 0 && (item.type == 'Vector' || item.type == 'IMG')
                    " />
                <Icon type="md-arrow-round-down" color="green" size="18" class="opBtn" :title="Resource.MoveDownOneLevel"
                  @click="lower(item)" v-if="index < addlayerdata.length - 1 &&
                    (item.type == 'Vector' || item.type == 'IMG')
                    " />
                <Icon type="md-locate" color="green" size="18" class="opBtn" :title="Resource.location"
                  @click="location(item)" />
              </div>
              <div class="sliderBtn" v-if="item.type != 'Terrain'">
                <Slider v-model="item.trans" @on-change="transSliderChange(item, $event)"></Slider>
              </div>
            </ListItem>
          </List>
        </div>
      </TabPane>
      <TabPane :label="Resource.Favorite" name="collect">
        <div class="collect" :class="$props.splitId >= 0 ? `collectsplit` : ''">
          <List split>
            <ListItem v-for="(item, index) in favoriteLayerList" :key="index" class="layerlist">
              <Checkbox @on-change="checkboxChange(item, $event)">{{
                item.title
              }}</Checkbox>
              <div class="listBtn">
                <Icon type="ios-star" color="green" size="18" class="opBtn" :title="Resource.DelCollect"
                  @click="favoriteHandle(item)" />
              </div>
            </ListItem>
          </List>
        </div>
      </TabPane>
    </Tabs>
  </div>
</template>

<script>
import { Collect, GetResourceTree, GetMyCollect } from "@/api/map";
export default {
  name: "LayerManageSplit",
  props: {
    type: {
      type: String,
    },
    splitId: {
      type: Number,
      default: -1,
    },
    isshow: {
      type: Boolean,
      default: false,
    },
    checkedKeys: {
      type: Object,
    },
    addlayerdata: {
      type: Array,
    },
  },
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "label",
      },
      treeSearchText: "",
      favoriteLayerList: [],
      sharedState: store.state,
      TreeDatas: [
        {
          title: Resource.layerList,
          expand: true,
          //   selected: true,
          //   contextmenu: true,
          children: [],
          type: "ROOT",
        },
      ],
      isshowNum: false,
    };
  },
  computed: {
    LayerManageShow: function () {
      return this.$props.splitId != -1
        ? this.$props.isshow
        : this.sharedState.toolBar[0];
    },
  },

  methods: {
    toggleVisibility() {
      this.$props.splitId != -1
        ? this.$emit("close")
        : store.setToolBarAction(0);
    },
    setCheckedKeys(keys) {
      this.$refs.tree.setCheckedKeys(keys);
    },
    filterNode(value, data) {
      let addjudge = true;
      if (this.$props.type == "split") {
        addjudge = data.type !== "Terrain";
      } else if (this.$props.type == "roller") {
        addjudge = data.type == "IMG" || data.type == "Vector";
      }
      if (!value) return addjudge;
      return data.label.indexOf(value) >= 0 && addjudge;
    },
    favoriteHandle(data) {
      // this.$emit("favoriteHandle", data);
      if (data.favorite) {
        data.favorite = null;
        for (let i = 0; i < this.favoriteLayerList.length; i++) {
          if (this.favoriteLayerList[i].id == data.id) {
            this.favoriteLayerList.splice(i, 1);
          }
        }
      } else {
        data.favorite = this.username;
        this.favoriteLayerList.push(data);
      }
      Collect(this.username, data.id).then((res) => {
        if (res.statuscode == 200) {
          this.$message({
            message: "操作成功",
            type: "success",
          });
        } else {
          this.$message.error(res.message);
        }
      });
    },
    favorite(data) {
      console.log(data);
    },
    checkboxChange(obj, checked, a) {
      obj.checked = checked;
      this.handleCheckChange(obj, checked);
    },
    visibleChange(obj, visible, a) {
      this.$emit("visibleChange", obj, visible, a);
    },
    transSliderChange(obj, v, a) {
      this.$emit("transSliderChange", obj, v, a);
    },
    getCheckedNodes() {
      if (this.$props.splitId < 0) {
        //是否只是叶子节点
        let checks = this.$refs.tree.getCheckedNodes(true);
        store.setcheckedTreeNode(checks);
      }
    },
    // 复选框改变
    handleCheckChange(obj, checked) {
      this.getCheckedNodes();
      console.log(obj, checked);
      if (typeof checked == "boolean") {
        obj.checked = checked;
      } else {
        obj.checked = !obj.checked;
      }
      this.$emit("handleCheckChange", obj, checked, this.$props.splitId);
    },
    setDisabledIfChildrenExist(node) {
      if (node.children && node.children.length > 0) {
        node.disabled = true;
      }

      // 递归遍历子节点
      if (node.children) {
        node.children.forEach(child => {
          this.setDisabledIfChildrenExist(child);
        });
      }
    },
    //获取后台资源目录树结构
    getResourceTree() {
      GetResourceTree().then((res) => {
        if (res.statuscode == 200) {
          // 从根节点开始递归
          res.data.forEach(rootNode => {
            this.setDisabledIfChildrenExist(rootNode);
          });
          this.TreeDatas = res.data;

          store.state.tempResourceTree = res.data;
        } else {
          console.log(e);
        }
      });
    },

    //获取后台资源目录树结构
    getFavoriteLayers() {
      GetMyCollect().then((res) => {
        if (res.statuscode == 200) {
          this.favoriteLayerList = res.data;
        } else {
          console.log(e);
        }
      });
    },
    //图层定位
    location(obj) {
      this.$emit("location", obj);
    },
    //影像图层操作
    raise(obj) {
      this.$emit("raise", obj);
    },
    lower(obj) {
      this.$emit("lower", obj);
    },
  },

  mounted() {
    this.getResourceTree();
    this.getFavoriteLayers();
  },

  watch: {
    treeSearchText(val) {
      this.$refs.tree.filter(val);
    },
    LayerManageShow: {
      handler() {
        if (this.LayerManageShow && this.$props.type) {
          setTimeout(() => {
            if (this.$refs.tree) this.$refs.tree.filter("");
          }, 500);
          // this.$nextTick(() => {
          //   if (this.$refs.tree) this.$refs.tree.filter("");
          // });
        }
      },
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./LayerManage.scss";
.searchDiv {
  display: flex;
  justify-content: space-between;
  margin-right: 10px;
  .el-input {
    width: calc(100% - 30px);
  }
}


</style>