finance-cms/src/layout/layout-part/menus.vue

<template>
  <div id="menus">
    <!--    <el-menu :default-active="thisRouter()" class="el-menu-vertical-demo" :router="false" :default-openeds="defalutMenu" @select="to">-->
    <!--      <el-menu-item index="/"> <i class="el-icon-s-home"></i>首页 </el-menu-item>-->
    <!--      <el-submenu index="1">-->
    <!--        <template v-slot:title>-->
    <!--          <i class="el-icon-s-grid"></i>-->
    <!--          <span>账号设置</span>-->
    <!--        </template>-->
    <!--        <el-menu-item-group>-->
    <!--          <el-menu-item index="/userInfo/index">个人信息管理</el-menu-item>-->
    <!--          <el-menu-item index="/uppasswd/index">修改密码</el-menu-item>-->
    <!--          <el-menu-item index="/institutionInfo/index">金融机构信息管理</el-menu-item>-->
    <!--        </el-menu-item-group>-->
    <!--      </el-submenu>-->
    <!--      <el-submenu index="2">-->
    <!--        <template v-slot:title>-->
    <!--          <i class="el-icon-s-grid"></i>-->
    <!--          <span>企业需求</span>-->
    <!--        </template>-->
    <!--        <el-menu-item-group>-->
    <!--          <el-menu-item index="/businessneed/claim">债权需求</el-menu-item>-->
    <!--          <el-menu-item index="/businessneed/stock">股权需求</el-menu-item>-->
    <!--        </el-menu-item-group>-->
    <!--      </el-submenu>-->
    <!--      <el-submenu index="3">-->
    <!--        <template v-slot:title>-->
    <!--          <i class="el-icon-s-grid"></i>-->
    <!--          <span>授信管理</span>-->
    <!--        </template>-->
    <!--        <el-menu-item-group>-->
    <!--          <el-menu-item index="/follow/followindex">授信已关注债权需求</el-menu-item>-->
    <!--          <el-menu-item index="/follow/followstock">关注股权需求</el-menu-item>-->
    <!--          <el-menu-item index="/done/doneclaim">已授信的债权需求</el-menu-item>-->
    <!--        </el-menu-item-group>-->
    <!--      </el-submenu>-->
    <!--      <el-submenu index="4">-->
    <!--        <template v-slot:title>-->
    <!--          <i class="el-icon-s-grid"></i>-->
    <!--          <span>金融产品管理</span>-->
    <!--        </template>-->
    <!--        <el-menu-item-group>-->
    <!--          <el-menu-item index="/financeclaims/financeClaimIndex">债权产品管理</el-menu-item>-->
    <!--          <el-menu-item index="/financeclaims/manageMoneyIndex">理财产品管理</el-menu-item>-->
    <!--          <el-menu-item index="/financeclaims/applymmoneyIndex">申请理财产品管理</el-menu-item>-->
    <!--          <el-menu-item index="/financeclaims/insitionIndex">金融机构提交至审核</el-menu-item>-->
    <!--        </el-menu-item-group>-->
    <!--      </el-submenu>-->
    <!--    </el-menu>-->
    <el-tree style="height: 100%;"
             empty-text=""
             :data="getMenuList"
             @node-click="handleNodeClick"
             :highlight-current="true"
             default-expand-all
    >
      <span slot-scope="{ node, data }"
            style="font-size: 16px">
        <i :class="data.icon"></i>{{data.name}}
      </span>
    </el-tree>
  </div>
</template>

<script>
  import { mapState, createNamespacedHelpers, mapGetters } from 'vuex';
  const { mapActions: userMenu } = createNamespacedHelpers('userMenu');

  export default {
    name: 'menus',
    props: {},
    components: {},
    computed: {
      ...mapState(['user']),
    },
    data: () => ({
      // defalutMenu: ['1', '2', '3'],
      getMenuList: [],
      defalutPage: '',
      collapse: false,

    }),
    created() {

    },
    methods: {
      ...userMenu(['search']),
      async all(uid) {
        const result = await this.search({uid:uid});
        console.log(result.data,"打印")
        this.getMenuList = this.ownMenuList(result.data);

      },
      handleNodeClick(data) {
        console.log(data);
        if (data.children == undefined || data.children.length == 0) {
          this.$router.replace(data.url);
        }
      },
      ownMenuList(result){
        let dbMenuArr = result.allmenu;
        let roleMenu = result.viewmenu;
        let ownMenuList = [];
        dbMenuArr.forEach((item) => {
          if (roleMenu.indexOf(item._id) != -1) {
            ownMenuList.push(item);
          }
        });
        return this.putTree(ownMenuList);
      },
      putTree(arr,child='_id',father='fid',mostKey='0',childKey='children'){
        let map = {};
        let resultArr = [];
        arr.forEach((item) => {
          item[childKey] = [];
          map[item[child]] = item;
        });
        arr.forEach((item) => {
          if (item[father]){
            if (item[father] == mostKey) {
              resultArr.push(item);
            } else {
              let parent = map[item[father]];
              parent[childKey].push(item);
            }
          }
        });
        return resultArr;
      },
    },
    mounted() {
      console.log(this.user, "vuex保存user")
      this.all(this.user.uid)
    }
  };
</script>

<style lang="less" scoped>
  /deep/ .el-menu {
    border-right: none;
  }

  /deep/ .el-menu-item,
  .el-submenu__title {
    height: 45px;
    line-height: 45px;
  }


  /*/deep/ .el-tree-node.is-checked > .el-tree-node__content {*/
  /*    background-color: rgb(255, 255, 255);*/
  /*    color: rgb(64, 158, 255);*/
  /*}*/

  /deep/ .el-tree-node__content:hover {
    color: #e9021d;
  }

  /deep/ .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
    background-color: rgb(255, 255, 255);
    color: #e9021d;
  }


</style>