zjyzt_gis_master_web_ui/src/components/Currency/DataTable/DataTable.vue

<template>
  <el-container :class="'data_table'">
    <el-aside width="200px">
      <el-menu ref="menu" class="first_menu">
        <el-submenu
          v-for="(item, index) in list"
          :key="index"
          :index="index + ''"
          :class="'index' + index + ''"
        >
          <template slot="title">
            <span>{{ item.name }}</span>
          </template>
          <div class="second_menu">
            <el-menu-item
              v-for="(item_1, index_1) in item.models"
              :key="index + '-' + index_1"
              :index="index + '-' + index_1"
              @click="jumpMetadataList(item_1)"
              :title="item_1.title"
              >{{ item_1.title }}</el-menu-item
            >
          </div>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-main>
      <MetadataListContainer
        v-if="listContainerIsShow"
        v-bind="{ type: index, params: params }"
      ></MetadataListContainer>
    </el-main>
  </el-container>
</template>

<script>
export default {
  components: {
    MetadataListContainer: () => import("./MetadataListContainer.vue"),
  },
  props: {
    index: {
      type: Number,
    },
  },
  data() {
    return {
      list: null,
      params: null,
      listContainerIsShow: false,
      geometryType: {
        Point: 0,

        LineString: 1,
        Polyline: 1,
        MultiPolyline: 1,
        MultiLineString: 1,

        Polygon: 2,
        MultiPolygon: 2,
      },
    };
  },
  methods: {
    jumpMetadataList(item) {
      this.listContainerIsShow = true;
      this.params = {
        modelId: item.id,
        geotype: this.geometryType[item.geometryType],
      };
    },
  },
  computed: {
    layerData() {
      return this.$store.state.layerList;
    },
  },
  watch: {
    layerData: {
      immediate: true,
      handler(newVal, oldName) {
        this.list = newVal;
      },
    },
    index(newVal, oldVal) {
      let that = this;
      this.listContainerIsShow = false;
      this.list.map(function (item, index) {
        that.$refs.menu.close(index + "");
      });

      this.param = null;
    },
  },
};
</script>

<style lang="less" scoped>
// .data_table {
//   // padding-left: 20px;
// }
.el-main {
  padding: 0 0;
}
.el-aside {
  background: #ffffff;
  .el-menu {
    border-right: 0px;
  }

  .first_menu {
    width: 100% !important;
  }

  .first_menu,
  .second_menu {
    background: transparent;

    /deep/ .el-submenu__title {
      font-size: 16px;
      font-weight: bold;
      color: #000000;
      text-align: left;
      text-indent: 40px;
      line-height: 51px;

      .el-submenu__icon-arrow {
        text-indent: 0px;
      }
    }

    .el-submenu {
      text-align: center;
      line-height: 60px;
      margin: 10px 10px;
      margin-left: 0px;
      &:first-child {
        border-top-right-radius: 4px;
      }
    }

    .el-submenu /deep/ .el-menu {
      background: transparent;
    }

    /deep/ .el-menu-item {
      font-size: 16px;
      padding-left: 40px !important;
      padding-right: 20px !important;
      color: #000000;
      background: transparent;
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /deep/ .el-menu-item:hover,
    /deep/ .el-menu-item.is-active {
      color: #409eff;
      background-color: #ecf5ff;
    }
  }

  .second_menu {
    /deep/ i {
      float: right;
      font-size: 12px;
      color: #ffffff;
      position: absolute;
      top: 50%;
      right: 20px;
      margin-top: -7px;
    }
  }

  .index0 /deep/.el-submenu__title {
    background: url(~@/assets/images/layer/1.png) no-repeat 20px center;
  }

  .index1 /deep/.el-submenu__title {
    background: url(~@/assets/images/layer/2.png) no-repeat 20px center;
  }

  .index2 /deep/.el-submenu__title {
    background: url(~@/assets/images/layer/3.png) no-repeat 20px center;
  }

  .index3 /deep/.el-submenu__title {
    background: url(~@/assets/images/layer/4.png) no-repeat 20px center;
  }

  .index4 /deep/.el-submenu__title {
    background: url(~@/assets/images/layer/5.png) no-repeat 20px center;
  }
}
</style>