faw-report-library-web/src/views/Layout.vue

<template>
    <el-container v-watermark="mymark">
        <el-header>
            <Header :menuAllDate="menuAllDate"></Header>
        </el-header>
        <el-container class="main-content">
            <el-aside width="200px">
                <el-scrollbar class="menu">
                    <Menu :menuData="menuData"></Menu>
                </el-scrollbar>
            </el-aside>
            <el-main>
                <el-scrollbar class="main main1">
                    <router-view/>
                </el-scrollbar>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import Header from '@/components/Header'
import Menu from '@/components/Menu'
export default {
  name: 'Layout',
  components: {
    Header,
    Menu
  },
  data () {
    return {
      menuData: [],
      menuAllDate: [],
      mymark:{}
    }
  },
  watch: {
    '$route.path': {
      handler (val) {
        this.getMenu()
      },
      deep: true
    }
  },
  methods: {
    handleTree (arr, parentId) {
      const cloneData = JSON.parse(JSON.stringify(arr)) // 对源数据深度克隆
      return cloneData.filter((father) => {
        const branchArr = cloneData.filter(child => father.id === child.parentId) // 返回每一项的子级数组
        father.children = branchArr.length > 0 ? branchArr : null // 如果存在子级，则给父级添加一个children属性，并赋值
        return father.parentId === parentId // 返回第一层
      })
    },
    addLevel (data, level) {
      data.forEach(item => {
        item.level = level
        if (item.children) {
          this.addLevel(item.children, level + 1)
        }
      })
      return data
    },
    getMenu () {
      if (!this.$route.query.id) {
        return this.$router.push({ path: '/report/list', query: { id: 'AEHJB8YNJ3' } })
      }
      const data = JSON.parse(JSON.stringify(this.$store.state.menuData))
      console.log('data',data);
      const menu = data.filter(item => item.parentId === this.$route.query.id)
      console.log('id', this.$route.query.id);
      let menuData = []
      const menuFun = (menu) => {
        menuData = [...menuData, ...menu]
        const parentIds = menu.map(item => item.id)
        if (parentIds.length) {
          menuFun(data.filter(item => parentIds.find(el => el === item.parentId)))
        }
      }
      menuFun(menu)
      const treeData = this.handleTree(menuData, this.$route.query.id)
      this.menuData = this.addLevel(treeData, 1)
    },
    getSysMenu () {
      this.$api.menu.getSysMenu({ roleId: this.$store.getters.userInfo.roleIdList[0] }).then(({ data }) => {
        if (data === null) {
          data = []
        }
        data = data.sort((a, b) => a.sort - b.sort)
        const menu = data.filter(item => item.belong)
        let menuData = []
        const menuFun = (menu) => {
          menuData = [...menuData, ...menu]
          const parentIds = menu.map(item => item.parentId)
          if (parentIds.length) {
            menuFun(data.filter(item => parentIds.find(el => el === item.id)))
          }
        }
        menuFun(menu)

        const treeData = menuData.map(item => ({
          id: item.id,
          parentId: item.parentId,
          label: item.name,
          href: item.href,
          icon: item.iconHref,
          isCollage: true,
          belong: item.belong,
          isUrl: item.isUrl
        }))
        // 去重
        const obj = {}
        treeData.forEach(item => {
          obj[item.id] = item
        })
          this.$store.commit('saveMenuData', Object.values(obj))
        this.menuAllDate = Object.values(obj)
        this.getMenu()
      })
    }
  },
  created () {
    let username = this.$store.getters.userInfo.usname
    let date = new Date()
    console.log(date)
    console.log(/^\d+(\.\d+)?$/.test(date))
    let pre = this.$store.getters.marketpre
    this.mymark.text=pre+' '+username+' '+ date.toLocaleDateString()
    console.log(this.mymark)
    // 判定菜单是否存在，存在则不加载
    // let menuData = this.$store.state.menuData;
    // debugger
    // if (menuData.length == 0) {
    this.getSysMenu()
    // } else {
    //   this.getMenu();
    // }
  }
}
</script>

<style lang="scss" scoped>
    .el-header {
        background: url("../assets/imgs/bg-header.png") no-repeat center center;
        background-size: cover;
        padding: 0;
    }

    .main-content {
        height: calc(100vh - 60px);

        .el-aside {
            background-color: #FFFFFF;

            .menu {
                width: 100%;
                height: 100%;
            }
        }

        .el-main {
            background-color: #F8F8FA;
            padding: 0;

            ::v-deep .main.el-scrollbar {
                height: 100%;

                .el-scrollbar__view {
                    padding: 10px 8px;
                }
            }

            ::v-deep .main1.el-scrollbar {
                height: 100%;

                .el-scrollbar__view {
                    height: 100% !important;
                    padding: 10px 8px;
                }
            }
        }
    }
</style>