CRM项目前端将解析到的用户权限对应加载出可用的权限按钮和页面路由------CRM项目

最新推荐文章于 2024-11-08 11:26:10 发布
最新推荐文章于 2024-11-08 11:26:10 发布
阅读量862 收藏 22
点赞数 21
分类专栏： CRM项目 前端 # VUE框架 文章标签： vue.js elementui javascript 前端 前端框架 vue ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75960169/article/details/136435979
版权
前端 同时被 3 个专栏收录
350 篇文章 2 订阅
订阅专栏
VUE框架
250 篇文章 0 订阅
订阅专栏
CRM项目
142 篇文章 0 订阅
订阅专栏
文章描述了一个基于Vue.js的CRM系统界面，涉及左侧菜单的折叠/展开功能，用户信息展示，以及下拉菜单中的个人资料、密码修改和退出登录操作。同时，文章强调了路由管理和权限控制的重要性。
摘要由CSDN通过智能技术生成 
<template>
    <el-container>
        <!-- 左侧 -->
      <el-aside :width="isShowed ? '3.4%' : '17%'">
        <div class="menuTitle">{{ isShowed ? "" : title }}</div>
        <!-- 菜单 -->
        <el-menu
        active-text-color="#ffd04b"
        background-color="#334157"
        class="el-menu-vertical-demo"
        :default-active="currentRouterPath"
        style="border-right: solid 0px;"
        :unique-opened="true"
        text-color="#fff"
        :collapse="isShowed"
        :collapse-transition="false"
        :router="true"
      >
      <el-sub-menu :index="index" v-for="(menuPermission, index) in user.menuPermissionList" :key="menuPermission.id">
          <template #title>
            <el-icon><component :is="menuPermission.icon"></component></el-icon>
            <span> {{menuPermission.name}} </span>
          </template>
          <el-menu-item v-for="(subPermission) in menuPermission.subPermissionList" :key="subPermission.id" :index="subPermission.url">
            <el-icon><component :is="subPermission.icon"></component></el-icon>
            {{subPermission.name}}
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
      </el-aside>
      <el-container class="rightContent">
        <!-- 右侧上 -->
        <el-header>
          <!-- 折叠 -->
          <el-icon class="show" @click="showMenu()" v-show="isShowed===false"><Fold /></el-icon>
          <!-- 打开 -->
          <el-icon class="show" @click="showMenu()" v-show="isShowed"><Expand /></el-icon>
          <!-- 用户信息的下拉菜单 -->
          <el-dropdown :hide-on-click="false">
            <span class="el-dropdown-link">
              {{ user.name }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>我的资料</el-dropdown-item>
                <el-dropdown-item>修改密码</el-dropdown-item>
                <el-dropdown-item divided @click="logOut()">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-header>
        <!-- 右侧中 -->
        <el-main v-if="isRouterAlive">
          <router-view></router-view>
        </el-main>
        <!-- 右侧下 -->
        <el-footer>@版权所有 2000-2099 旧约Alatus 广东省广州市九龙大道206号第XX栋XX总部xx号</el-footer>
      </el-container>
    </el-container>
</template>

<script>
import { doGet } from "../http/httpRequest.js";
import { messageTip, removeToken, messageConfirm, later } from "../util/util.js";
export default {
    name : "dashboard",
    mounted(){
      // 挂载时获取用户名
      this.loadLoginName();
      this.loadCurrentRouter();
    },
    // 提供者生产者
    provide(){
      return {
        // 提供了一个函数,要求必须是箭头函数
        reload: () => {
          this.isRouterAlive = false;
          //提供一个函数 (页面局部刷新函数)
          this.$nextTick(function(){
            this.isRouterAlive = true;
          })
        }
      }
    },
    methods : {
      loadLoginName(){
        // 获取用户名
        doGet("/api/login/info",{}).then((resp) => {
          this.user = resp.data.data;
        });
      },
      // 左侧菜单左右展开与折叠
      showMenu(){
        // 取反即可
        this.isShowed = !this.isShowed;
      },
      loadCurrentRouter(){
        let arr = this.$route.path.split("/");
        this.currentRouterPath = "/"+arr[1]+"/"+arr[2];
      },
      // 退出登录
      logOut(){
        // 一样没有参数值,直接给个空的大括号就好
        doGet("/api/logOut",{}).then(resp => {
          if(resp.data.code === 200){
            messageTip('退出成功,即将返回首页',"success");
            // 退出成功
            removeToken();
            later("/");
          }
          else{
            messageConfirm(resp.data.msg+",是否强制退出?","账号退出异常").then(() => {
              messageTip('退出成功,即将返回首页',"success");
              // 后端不起作用,我们就把前端这里存的删了先
              removeToken();
              later("/");
            }).catch(() => {
              messageTip("已取消强制退出","warning");
            });
          }
        });
      }
    },
    data(){
      return {
        isShowed : false,
        // 登录的用户对象
        user : {},
        title : "@CRM管理系统",
        // 控制右侧子路由内容是否显示
        isRouterAlive : true,
        // 激活页面
        currentRouterPath : ''
      }
    }
}
</script>

<style scoped>
.el-dropdown{
  float: right;
  line-height: 225%;
}
.el-aside{
    background-color: black;
}
.menuTitle{
    color: white;
    text-align: center;
    height: 5%;
    line-height: 225%;
}
.el-header{
    background-color: azure;
    height: 5%;
    line-height: 225%;
}
.el-footer{
    background-color: aliceblue;
    height: 5%;
    line-height: 225%;
    text-align: center;
}
.rightContent{
    /* 高度设置为计算高度,屏幕高度的100% */
    height: calc(100vh);
}
.show{
  /* 聚焦事件 */
  cursor: pointer;
}
.el-icon {
  font-size: 1em;
}
</style>

<template>

    <el-container>

        <!-- 左侧 -->

      <el-aside :width="isShowed ? '3.4%' : '17%'">

        <div class="menuTitle">{{ isShowed ? "" : title }}</div>

        <!-- 菜单 -->

        <el-menu

        active-text-color="#ffd04b"

        background-color="#334157"

        class="el-menu-vertical-demo"

        :default-active="currentRouterPath"

        style="border-right: solid 0px;"

        :unique-opened="true"

        text-color="#fff"

        :collapse="isShowed"

        :collapse-transition="false"

        :router="true"

      >

      <el-sub-menu :index="index" v-for="(menuPermission, index) in user.menuPermissionList" :key="menuPermission.id">

          <template #title>

            <el-icon><component :is="menuPermission.icon"></component></el-icon>

            <span> {{menuPermission.name}} </span>

          </template>

          <el-menu-item v-for="(subPermission) in menuPermission.subPermissionList" :key="subPermission.id" :index="subPermission.url">

            <el-icon><component :is="subPermission.icon"></component></el-icon>

            {{subPermission.name}}

          </el-menu-item>

        </el-sub-menu>

      </el-menu>

      </el-aside>

      <el-container class="rightContent">

        <!-- 右侧上 -->

        <el-header>

          <!-- 折叠 -->

          <el-icon class="show" @click="showMenu()" v-show="isShowed===false"><Fold /></el-icon>

          <!-- 打开 -->

          <el-icon class="show" @click="showMenu()" v-show="isShowed"><Expand /></el-icon>

          <!-- 用户信息的下拉菜单 -->

          <el-dropdown :hide-on-click="false">

            <span class="el-dropdown-link">

              {{ user.name }}<el-icon class="el-icon--right"><arrow-down /></el-icon>

            </span>

            <template #dropdown>

              <el-dropdown-menu>

                <el-dropdown-item>我的资料</el-dropdown-item>

                <el-dropdown-item>修改密码</el-dropdown-item>

                <el-dropdown-item divided @click="logOut()">退出登录</el-dropdown-item>

              </el-dropdown-menu>

            </template>

          </el-dropdown>

        </el-header>

        <!-- 右侧中 -->

        <el-main v-if="isRouterAlive">

          <router-view></router-view>

        </el-main>

        <!-- 右侧下 -->

        <el-footer>@版权所有 2000-2099 旧约Alatus 广东省广州市九龙大道206号第XX栋XX总部xx号</el-footer>

      </el-container>

    </el-container>

</template>

<script>

import { doGet } from "../http/httpRequest.js";

import { messageTip, removeToken, messageConfirm, later } from "../util/util.js";

export default {

    name : "dashboard",

    mounted(){

      // 挂载时获取用户名

      this.loadLoginName();

      this.loadCurrentRouter();

    },

    // 提供者生产者

    provide(){

      return {

        // 提供了一个函数,要求必须是箭头函数

        reload: () => {

          this.isRouterAlive = false;

          //提供一个函数 (页面局部刷新函数)

          this.$nextTick(function(){

            this.isRouterAlive = true;

          })

        }

      }

    },

    methods : {

      loadLoginName(){

        // 获取用户名

        doGet("/api/login/info",{}).then((resp) => {

          this.user = resp.data.data;

        });

      },

      // 左侧菜单左右展开与折叠

      showMenu(){

        // 取反即可

        this.isShowed = !this.isShowed;

      },

      loadCurrentRouter(){

        let arr = this.$route.path.split("/");

        this.currentRouterPath = "/"+arr[1]+"/"+arr[2];

      },

      // 退出登录

      logOut(){

        // 一样没有参数值,直接给个空的大括号就好

        doGet("/api/logOut",{}).then(resp => {

          if(resp.data.code === 200){

            messageTip('退出成功,即将返回首页',"success");

            // 退出成功

            removeToken();

            later("/");

          }

          else{

            messageConfirm(resp.data.msg+",是否强制退出?","账号退出异常").then(() => {

              messageTip('退出成功,即将返回首页',"success");

              // 后端不起作用,我们就把前端这里存的删了先

              removeToken();

              later("/");

            }).catch(() => {

              messageTip("已取消强制退出","warning");

            });

          }

        });

      }

    },

    data(){

      return {

        isShowed : false,

        // 登录的用户对象

        user : {},

        title : "@CRM管理系统",

        // 控制右侧子路由内容是否显示

        isRouterAlive : true,

        // 激活页面

        currentRouterPath : ''

      }

    }

}

</script>

<style scoped>

.el-dropdown{

  float: right;

  line-height: 225%;

}

.el-aside{

    background-color: black;

}

.menuTitle{

    color: white;

    text-align: center;

    height: 5%;

    line-height: 225%;

}

.el-header{

    background-color: azure;

    height: 5%;

    line-height: 225%;

}

.el-footer{

    background-color: aliceblue;

    height: 5%;

    line-height: 225%;

    text-align: center;

}

.rightContent{

    /* 高度设置为计算高度,屏幕高度的100% */

    height: calc(100vh);

}

.show{

  /* 聚焦事件 */

  cursor: pointer;

}

.el-icon {

  font-size: 1em;

}

</style>

旧约Alatus
关注
专栏目录
「查缺补漏」我的网易前端秘籍-如何准备面试
Crazymryan的博客
10-20 948
前言开门见山，这篇文章，适合「初级前端」，如果你还在校招的话，或者还在求职的话，可以看看本文，找一找灵感，希望对你们有帮助呀。先说一下最近个人情况：2020年8月底已经拿到网易有道off...
addRoutes 动态加载用户权限路由
前端Cocoko
12-15 461
实现方式两种： 1、后端控制路由。 后台传来当前用户对应的路由表，前端通过调接口拿到处理解析成路由。（addRoutes 动态加载路由。） 2、前端控制路由。 前端写好所有的路由，后端返回当前用户的角色，然后根据事先约定好的每个角色拥有哪些路由对角色的路由进行分配。 第一种处理方式 后端返回路由表。 1、接口传入格式： 字段名 说明 *id id *pid 父级id *p...
乐忧商城项目总结-1
qq_39748316的博客
02-17 1150
乐忧商城项目总结-1
面试题vue+uniapp（易理解）可先收藏点赞方便查找，未编辑完整....
ZZZZZZZZjy的博客
05-30 1547
Vue 2 的响应式系统基于，通过 getter/setter 来实现数据的依赖收集和变化通知。Vue 3 的响应式系统基于Proxy，提供了更强大的数据监听能力。它使用ref和reactive来创建响应式数据。watch在 Vue 2 和 Vue 3 中都是存在的，但它并不是响应式系统的核心部分，而是一个用于观察数据变化并触发相应逻辑的工具。vue2 Object.defineProperty 和 vue 3 Proxy 区别：数据劫持。
面经-hangzhou
m0_46338222的博客
07-08 6814
加油
乐优商城个人笔记上-主要框架、基础知识、管理系统代码
weixin_48713918的博客
10-29 2084
SpringBoot 内置tomcat 提供了自动配置，搭建spring应用的脚手架 复杂的配置，混乱的依赖关系
CRM项目总结
weixin_30666753的博客
04-27 69
web无外乎是对地址的访问 后台生成地址，将数据和地址发送到前台，放在前台适当的位置 views可以直接在urls.py中写函数加括号的优先级最高类(),实例化对象request.POST只能解析urlencoded编码,不能接受json格式数据,json要从request.body中取. 如何自动生成针对特定模型表的增删查改操作? 获取模型表所在应用名,拼接上模型表小写名,加上操作...
BOS物流管理系统-第一天
weixin_30359021的博客
01-10 438
BOS物流管理系统-第一天-系统分析、环境搭建、前端框架 BoBo老师 整体项目内容目标： 对项目概述的一些理解 亮点技术的学习 注意学习方式：优先完成当天代码。 其他内容。 最终： 学到新的技术，会应用新的技术；对项目有个整体感觉； 课程安排：12天左右 主要内容： 项目整体概述和一般流程...
Vue前端面试题
肥晨开发的学习之路
01-19 185
网页看着不方便，想要文档可以私聊我。要是有错别字和错误的地方，请各位大佬直接指出，谢谢啦！！ Vue生命周期 一共8个阶段 详细说明生命周期： beforeCreate：(创建前)在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 created：(创建后)在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (da...
CRM.rar_CRM-SSH_CRM权限管理_spring crm_spring-integration_销售 JAVA
07-15
另包括权限管理模块用于系统的用户、角色和相关权限。与本系统相关的用户和角色包括： 系统管理员： 管理系统用户、角色与权限，保证系统正常运行。 销售主管： 对客户服务进行分配。 创建销售机会。
开发工具 boot-crm
05-31
boot-crm开发工具 boot-crm开发工具 boot-crm开发工具 boot-crm开发工具 boot-crm开发工具 boot-crm开发工具 boot-crm开发工具 boot-crm开发工具 boot-crm开发工具 boot-crm开发工具 boot-crm开发工具 boot-...
最好的CRM系统管理软件-销售易免费试用体验权限!.pdf
11-16
最好的CRM系统管理软件-销售易免费试用体验权限!.pdf
Django-CRM：基于Django的开源Python CRM
02-05
Django CRM Django CRM是在django框架上开发的开源CRM。 它具有CRM的所有基本功能。 我们欢迎通过github提供代码和功能请求。 以获取最新文档 该项目包含以下模块。 联络人 帐目 发票 案例 潜在客户 机会 策划人 ...
crm8000-PSI-master_crm8000-PSI-master_ERP进销存_
10-02
PSI是一款基于SaaS模式(Software as a Service软件即服务)的企业管理软件。PSI以商贸企业的核心业务：采购、销售、库存（进销存）为切入点，最终目标是行业化的ERP解决方案。
后端SpringBoot及vue proxyTable解决跨域
qq_42059717的博客
11-06 395
昨天上线项目遇到了一个奇怪的问题，本来服务实在腾讯云的轻量应用服务器的，但是迁移到一个香港的服务器之后就出现了各种各样的问题。Nginx 开启Https Springboot开启Https，先后出现了噔噔蹬蹬但是我其实已经部署了一个项目了的，那个用的proxyTable,新部署的这个用的是里边的env控制的。后来改成proxyTable就好了。
Vue 状态管理工具vuex
gklcsdn的博客
11-07 569
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 解决了多个组件共享状态时，状态的可维护性和可预测性问题。
fastapi_socketio连接vue的socktio.client
u014220146的博客
11-06 431
所以默认配置是客户端连接时使用的路径时ws，而不是http， 并且路径还要带上socketio.io。提示：如果遇到跨域问题自行解决。
Vue Cli的配置中configureWebpack和chainWebpack的主要作用及区别是什么？
最新发布
friend_ship的博客
11-08 717
Vue Cli提供的两种方案，一种是基于configureWebpack项直接覆盖同名配置；另一种是chainWebpack直接修改默认配置。
vue2 -- el-form组件动态增减表单项及表单项验证
King Saj
11-06 252
在数据录入场景（如订单信息录入）中，可根据实际情况（如商品种类增加）动态添加表单项（如商品相关信息）。包含必填项验证和数据格式验证（如邮箱、电话格式），防止错误数据提交。// 此处执行错误的逻辑。// 执行父组件回调。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值