epmet-work-pc-chengyang/src/views/modules/visual/command/cpts/sidemenu-left.vue

<template>
  <div class="m-menu">
    <div class="list">
      <div
        class="item"
        :key="'menu1' + item.placeType + item.categoryKey"
        v-for="item in menuList"
      >
        <div
          class="info"
          :class="{
            'z-on': currentKey == item.categoryKey,
          }"
          @click="handleClickItem(item)"
        >
          <div class="i-ico">
            <img :src="icoList[item.categoryKey || item.placeType]" />
          </div>

          <div class="name">
            {{ item.categoryName || item.placeTypeName }}
            <i v-if="item.quantity">({{ item.quantity }})</i>
          </div>

          <div
            v-if="!item.categoryKey"
            class="i-arrow"
            :class="{ 'z-unfold': currentUnfolded == item.placeType }"
          >
            <img src="@/assets/img/shuju/command/arrow-right.png" />
          </div>
        </div>

        <div
          v-show="currentUnfolded == item.placeType"
          class="granditem"
          :key="'menu3' + granditem.categoryKey"
          v-for="granditem in item.children"
        >
          <div
            class="info"
            :class="{ 'z-on': currentKey == granditem.categoryKey }"
            @click="handleClickItem(granditem)"
          >
            <div class="i-ico">
              <img
                v-if="icoList[granditem.categoryKey]"
                :src="icoList[granditem.categoryKey]"
              />
            </div>

            <div class="name">
              {{ granditem.categoryName }}
              <i v-if="granditem.quantity">({{ granditem.quantity }})</i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { requestPost } from "@/js/dai/request";
import nextTick from "dai-js/tools/nextTick";

export default {
  name: "sidemenu",

  props: {
    orgId: {
      type: String,
      default: "",
    },
  },

  data() {
    return {
      menuList: [],

      currentKey: "",
      currentUnfolded: "",

      currentItem: {},

      icoList: {
        event_tdnd: require("@/assets/img/shuju/command/ico2/event_tdnd.png"),
        enterprise_patrol_unqualified: require("@/assets/img/shuju/command/ico2/enterprise_patrol_unqualified.png"),
        zhzl_rq: require("@/assets/img/shuju/command/ico2/zhzl_rq.png"),
        resi: require("@/assets/img/shuju/command/ico2/resi.png"),
        resi_xfry: require("@/assets/img/shuju/command/ico2/resi_xfry.png"),
        xiejiaorenyuan: require("@/assets/img/shuju/command/ico2/xiejiaorenyuan.png"),
        zhaoshizhaohuojingshenbing: require("@/assets/img/shuju/command/ico2/zhaoshizhaohuojingshenbing.png"),
        buliangqingshaonian: require("@/assets/img/shuju/command/ico2/buliangqingshaonian.png"),
        shequjiaozheng: require("@/assets/img/shuju/command/ico2/shequjiaozheng.png"),
        xidurenyuan: require("@/assets/img/shuju/command/ico2/xidurenyuan.png"),
        IS_DBH: require("@/assets/img/shuju/command/ico2/IS_DBH.png"),
        // IS_YLFN: require("@/assets/img/shuju/command/ico2/IS_YLFN.png"),
        IS_OLD_PEOPLE: require("@/assets/img/shuju/command/ico2/IS_OLD_PEOPLE.png"),
        IS_UNEMPLOYED: require("@/assets/img/shuju/command/ico2/IS_UNEMPLOYED.png"),
        IS_DB: require("@/assets/img/shuju/command/ico2/IS_DB.png"),
        IS_MB: require("@/assets/img/shuju/command/ico2/IS_MB.png"),
        anzhibangjiao: require("@/assets/img/shuju/command/ico2/anzhibangjiao.png"),
        IS_KC: require("@/assets/img/shuju/command/ico2/IS_KC.png"),
      },
    };
  },

  computed: {},

  watch: {
    currentKey() {
      this.emitChange();
    },
    orgId() {
      this.requestList();
    },
  },

  mounted() {
    // this.requestList();
    this.currentKey = "event_tdnd";
    this.currentItem = {
      categoryKey: "event_tdnd",
      coverageType: "csgl",
      placeType: "event",
    };
  },

  methods: {
    async emitChange() {
      await nextTick();
      this.$emit("change", { ...this.currentItem });
    },

    handleClickItem(item) {
      if (item.categoryKey) {
        this.currentKey = item.categoryKey;
        this.currentItem = { ...item };
      } else {
        this.currentUnfolded =
          this.currentUnfolded == item.placeType ? "" : item.placeType;
      }
    },

    //加载组织数据
    async requestList() {
      const url = "/data/aggregator/coverage/analysis/governedTargetCategories";
      let params = {
        agencyId: this.orgId,
      };

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.menuList = data.map((item) => {
          item.selected = false;
          item.folded = true;
          item.children.forEach((subitem) => {
            subitem.selected = false;
          });
          return item;
        });
      } else {
        this.$message.error(msg);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.m-menu {
  width: 250px;
  //   height: 550px;
  background: rgba(#020340, 0.58);
  border-radius: 8px;
  overflow: hidden;

  .list {
    .item {
      position: relative;
      z-index: 2;
      line-height: 50px;
      color: rgba(#fff, 0.8);

      .z-on {
        color: #ffffff;
        background-color: #041267;
        font-weight: bold;
      }

      .info {
        position: relative;
        font-size: 18px;
        width: 100%;
        padding-left: 10px;
        display: flex;
        align-items: center;
        cursor: pointer;

        .i-ico {
          position: relative;
          width: 35px;
          height: 35px;
          margin-right: 4px;

          img {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 2px;
            margin: auto;
          }
        }

        .i-arrow {
          margin-left: auto;
          margin-right: 10px;

          &.z-unfold {
            transform: rotate(90deg);
          }
        }

        &:hover {
          background: rgba(16, 75, 164, 0.86);
        }
      }

      .subitem,
      .granditem {
        > .info {
          padding-left: 20px;
          font-size: 16px;
        }

        .granditem {
          > .info {
            padding-left: 40px;
          }
        }
      }
    }
  }
}
</style>