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

最新推荐文章于 2024-05-09 18:58:22 发布
最新推荐文章于 2024-05-09 18:58:22 发布
阅读量826 收藏 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 个专栏收录
328 篇文章 2 订阅
订阅专栏
VUE框架
249 篇文章 0 订阅
订阅专栏
CRM项目
142 篇文章 0 订阅
订阅专栏 
<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
关注
  • 21
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CRM.rar_CRM-SSH_CRM权限管理_spring crm_spring-integration_销售 JAVA
07-15
另包括权限管理模块用于系统的用户、角色和相关权限。与本系统相关的用户和角色包括： 系统管理员： 管理系统用户、角色与权限，保证系统正常运行。 销售主管： 对客户服务进行分配。 创建销售机会。
最好的CRM系统管理软件-销售易免费试用体验权限!.pdf
11-16
最好的CRM系统管理软件-销售易免费试用体验权限!.pdf
开发工具 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-...
django-crm：一个简单的Django CRM（客户关系管理）RESTful API项目
02-04
一个简单的Django CRM（客户关系管理）项目该项目包含用于简单CRM Web应用程序的模型和Django REST框架API。 您可以阅读该存储库随附的本以获取更多信息。 您还可以检查。
客户关系管理系统(CRM)Y2项目 高权限-10
04-06
希望通过这个系统完成对客户基本信息、联系人信息、交往信息、客户服务信息的充分共享和规范化管理；希望通过对销售机会、客户开发过程的追踪和记录，提高新客户的开发能力；希望在客户将要流失时系统及时预警，以便...
vue3父组件通过ref调用子组件的方法(组合模式，defineExpose）
徐同保的专栏
05-09 271
vue3父组件通过ref调用子组件的方法(组合模式，defineExpose）
vue快速入门（五十）重定向
不起眼小菜菜的博客
05-03 488
注释很详细，直接上代码……
Vue 传送门
最新发布
征战无悔人生
05-09 152
vue 传送门
前端Vue 后端FastApi 跨域 CORS
weixin_44656422的博客
05-06 384
前端是localhost:3000,后端是localhost:8000 ，就是跨域了。
自定义表单元素组件内容变化触发ElForm重新校验
东逝水
05-02 660
写一个FeeTypeSelector的组件，它的属性大概是这样的// 可选项的数据.......通过接收参数modelValue和触发update:modelValue让FeeTypeSelector组件支持v-model。至此这个组件就大致上写好了。把它放入带有规则的FormItem中，也能正常的校验。不过我今天发现，Element Plus的表单输入组件在有校验错误后再次输入正确的值后校验错误会自动消失，而不需要点击提交按钮调用form.validate方法，而上面的自定义组件就不能。
vue中的async
三三木木七的博客
05-06 395
在使用 async 关键字声明的函数内部，可以使用 await 关键字来等待一个 Promise 对象解析。这样可以使代码更加清晰和易于理解，因为它们使异步代码看起来更像同步代码，避免了回调地狱。
前端vue如何生成二维码
weixin_42759398的博客
04-29 795
有时候有需要链接直接生成二维码在手机上看的需求，比如下载，比如信息，比如excel。
Vue中Element的下载
weixin_64532720的博客
05-06 323
<element-view></element-view>
Vue2 实现前端分页
weixin_65084919的博客
05-09 307
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href=".
第III章-ⅠVue3进阶语法
顾西昂的博客
05-03 1520
ref 用于创建一个响应式的引用对象，其主要用途是维持一个内部值，并确保 Vue 的响应式系统能够追踪到其变化。区别：Vue 3 中的 computed 使用组合式 API 进行定义，而 Vue 2 中是通过选项 API 的 computed 属性进行定义。区别：Vue 3 中的 watch 使用组合式 API 定义，而 Vue 2 中是通过选项 API 的 watch 属性定义。v-model 修饰符在 Vue 3 和 Vue 2 中的作用一致，但 Vue 3 提供了更灵活的多属性绑定方式。
Web开发小知识点（一）
Android 领域开发程序员，希望通过写博客的方式不断的总结提升自己，大家共同进步哦！
05-07 971
个人开发Vue时，遇到的一些小问题和需要记录的小知识点
组件化开发&根组件
m0_74462339的博客
05-06 442
组件化：一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式、行为。好处：便于维护，利于复用，提升开发效率。
Vue(9)
daiism的博客
05-02 525
/ 跨域 http://localhost:80 http://localhost:90。// cors jsonp nginx 代理 解决跨域问题的几种方案。// 写了await必须写async。// 普通数据类型不是响应式。// 复杂数据类型是响应式。// 协议 域名 端口。
Vue进阶之Vue项目实战（一）
qq_34306228的博客
05-03 1147
git hooks提供的pre-commit等，可以在开发的时候，在提交对应的时机，发生一些作用。2.创建文件pre-commit.mjs 在husky/pre-commit.mjs。pre-commit:预提交 执行提交后会先预提交一下，失败的话全部打回，不会提交。husky是一个钩子工具，但是钩子本身不是husky的，钩子是属于git的。加依赖，devDependencies加。以后写脚本的时候可以尝试用zx写。node版本：20.11.1。pnpm版本：9.0.4。帮助轻松拦截hooks。
72crm-uniapp 代码
04-24
72crm-uniapp是一款基于uni-app框架开发的CRM系统前端代码。它是一套跨平台的应用开发框架，可以同时开发iOS、Android和Web等多个平台的应用。以下是72crm-uniapp代码的一些特点和功能： 1. 多平台支持：72crm-uniapp可以在iOS、Android和Web等多个平台上运行，具有良好的跨平台兼容性。 2. 功能丰富：该代码提供了丰富的CRM系统功能，包括客户管理、销售管理、合同管理、任务管理、日程管理等，可以满足企业的各种管理需求。 3. 界面友好：72crm-uniapp采用了现代化的UI设计，界面简洁美观，操作简单直观，用户体验良好。 4. 数据安全：该代码采用了安全的数据传输和存储机制，保证了用户数据的安全性和隐私保护。 5. 可定制性强：72crm-uniapp的代码结构清晰，易于扩展和定制，可以根据企业的需求进行二次开发和定制化。 6. 高性能：该代码经过优化，具有较高的性能和响应速度，能够满足大规模用户同时访问的需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

旧约Alatus

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值