wt_project_web_bak/src/layout/left.vue

<template>
  <div class="full-height" style="background-color: #f6f7f8">
    <div class="full-height">
      <div class="padding-left padding-top">
        <el-skeleton :rows="5" animated v-if="data.length === 0" />
        <div v-else v-for="(item, index) in data" :key="item.id">
          <div
            v-if="!item.hasChildren"
            class="item flex flex-center flex-justify-start"
            @click="navClick(index, 1, 0)"
            :style="item.checked ? 'color:#409eff' : ''"
          >
            <img :src="item.source" style="width: 25px" class="mr-5" />
            {{ item.name }}
          </div>
          <el-collapse v-else v-model="activeCollapse">
            <el-collapse-item
              :title="item.name"
              :name="item.name"
              :key="item.name"
            >
              <template #title>
                <div class="flex flex-center flex-justify-start">
                  <img :src="item.source" style="width: 25px" class="mr-5" />
                  {{ item.name }}
                </div>
              </template>
              <div
                class="full-height"
                @click="navClick(index, 2, subIndex)"
                v-for="(sub, subIndex) in item.children"
                :key="sub.name"
              >
                <div
                  class="item flex flex-center flex-justify-start"
                  style="margin-left: 20px"
                  :style="sub.checked ? 'color:#ECAB56' : ''"
                >
                  {{ sub.name }}
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      subActive: 0,
      data: [],
      currentPage: '',
      activeCollapse: ''
    }
  },
  watch: {
    $route: {
      immediate: false,
      handler() {
        this.currentPage = window.location.href
        this.init()
      }
    }
  },
  created() {
    this.currentPage = window.location.href
    this.menus()
  },
  methods: {
    init() {
      const item = localStorage.getItem('index')
      if (item) {
        const menu = JSON.parse(item)
        this.active = menu.active
        this.subActive = menu.subActive
      }
      if (this.data[this.active].hasChildren === true) {
        this.activeCollapse = this.data[this.active].name
        this.data[this.active].children[this.subActive].checked = true
      } else {
        this.activeCollapse = this.data[this.active].name
        this.data[this.active].checked = true
      }
    },
    menus() {
      this.$api.common.getMenus().then(res => {
        console.log('fuck' + new Date().getTime())
        if (res.code === 200) {
          this.data = res.data.map(sub => {
            sub.hasChildren = Object.hasOwn(sub, 'children')
            sub.checked = false
            return sub
          })
          this.init()
        }
      })
    },
    navClick(index, type, subIndex) {
      this.data.forEach(item => {
        item.checked = false
        if (item.hasChildren) {
          item.children.forEach(ele => {
            ele.checked = false
          })
        }
      })
      if (type === 2) {
        this.data[index].children[subIndex].checked = true
      } else {
        this.data[index].checked = true
      }
      if (this.data[index].path.startsWith('http')) {
        window.open(this.data[index].path, '_blank')
      } else if (type === 2) {
        this.$router.push(this.data[index].children[subIndex].path)
        localStorage.setItem(
          'data-type',
          this.data[index].children[subIndex].remark
            ? this.data[index].children[subIndex].remark
            : 'project'
        )
        this.$bus.emit(
          'navChange',
          this.data[index].children[subIndex].remark
            ? this.data[index].children[subIndex].remark
            : 'project'
        )
      } else {
        // this.$router.push(this.data[index].path)
        localStorage.setItem(
          'data-type',
          this.data[index].remark ? this.data[index].remark : 'project'
        )
        this.$bus.emit(
          'navChange',
          this.data[index].remark ? this.data[index].remark : 'project'
        )
      }
      const menu = { active: index, subActive: subIndex }
      localStorage.setItem('index', JSON.stringify(menu))
      this.$emit('closeMenu')
    }
  }
}
</script>

<style scoped>
.item {
  font-weight: 500;
  font-size: 15px;
  padding: 15px 10px;
  z-index: 999;
}

.item:hover {
  background-color: #efefef;
}

:deep(.el-collapse) {
  --el-collapse-content-bg-color: transparent !important;
  --el-collapse-header-bg-color: transparent !important;
  --el-collapse-content-font-size: 15px !important;
  --el-collapse-header-font-size: 15px !important;
  --el-collapse-border-color: transparent !important;
  border-top: none;
  border-bottom: none;
  margin: 0;
  width: 100%;
}

:deep(.el-collapse-item__header) {
  padding-left: 10px;
}

:deep(.el-collapse-item__header):hover {
  background-color: #efefef;
}

:deep(.el-collapse-item__content) {
  padding-bottom: 0 !important;
  line-height: 1 !important;
  padding-left: 10px;
}
</style>