zjyzt_gis_master_web_ui/src/views/SecondaryDevelopment.vue

<template>
  <div class="secondary_development">
    <el-container>
      <Aside
        v-bind="{
          showMenuIndex: showMenuIndex,
          menuList: menuList,
          handleMenuSelect: handleMenuSelect,
        }"
      ></Aside>
      <el-main>
        <ManualDrawingTool v-if="showIndex == '1'"></ManualDrawingTool>
        <GraphicsDrawingTool v-if="showIndex == '2'"></GraphicsDrawingTool>
        <MeasureTool v-if="showIndex == '3'"></MeasureTool>
        <IntegratedDescription v-if="showIndex == '4'"></IntegratedDescription>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  props: {
    permission: {
      type: Number,
    },
  },
  data() {
    return {
      menuList: null,
      showIndex: "-1",
      showMenuIndex: "-1",
    };
  },
  components: {
    Aside: () => import("@/components/Currency/Aside.vue"),
    ManualDrawingTool: () =>
      import("@/components/SecondaryDevelopment/ManualDrawingTool.vue"),
    GraphicsDrawingTool: () =>
      import("@/components/SecondaryDevelopment/GraphicsDrawingTool.vue"),
    MeasureTool: () =>
      import("@/components/SecondaryDevelopment/MeasureTool.vue"),
    IntegratedDescription: () =>
      import("@/components/SecondaryDevelopment/IntegratedDescription.vue"),
  },
  created() {
    let that = this;
    this.menuList =
      this.$store.getters.getMenuListTotal.filter(function (item) {
      return item.permission == that.permission
    })[0].children ;
    if (this.menuList.length == 0) return;
    t("", this.menuList);
    function t(beforeindex, arr) {
      if (beforeindex == "") {
        beforeindex = arr[0].index;
      } else {
        beforeindex = beforeindex + "-" + arr[0].index;
      }
      if (arr[0].children) {
        t(beforeindex, arr[0].children);
      } else {
        that.showIndex = beforeindex;
        that.showMenuIndex = beforeindex;
      }
    }
  },
  methods: {
    handleMenuSelect(index) {
      this.showIndex = index;
    },
  },
};
</script>

<style lang="less" scoped>
.secondary_development {
  height: 100%;
  width: 100%;
  .el-container {
    height: 100%;
    .el-main {
      padding: 0 0;
      margin-left: 20px;
    }
  }
}
</style>