新增无权限展示页

zuozhengqing

2023-12-12 6dde1e41c03698fd5520f8bf5abb55173b060d51

新增无权限展示页

 src/api/menus/index.js

New file
@@ -0,0 +1,10 @@
import request from "@/common/untils/request.js"

// 左侧菜单
export function getMenuTreeByRole(data) {
  return request({
    url: "/api/menu/getMenuTreeByRole",
    method: "get",
    data
  })
}

 src/assets/img/noJurisdiction.png

 src/components/layout/components/appsidebar/index.vue

@@ -16,47 +16,44 @@
        text-color="#bfcbd9"
        active-text-color="#fff"
      >
        <el-submenu index="1">
        <el-submenu v-for="item in menus" :key="item.id" :index="item.id">
          <template slot="title">
            <i class="el-icon-money icon"></i>
            <span>供应商管理</span>
            <span>{{item.title}}</span>
          </template>
          <el-menu-item index="/supplierManage/supplier">供应商</el-menu-item>
          <el-menu-item v-for="itm in item.children" :key="itm.id" :index="itm.path">{{itm.title}}</el-menu-item>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-phone-outline icon"></i>
            <span>采购管理</span>
          </template>
          <el-menu-item index="/purchaseManage/purchase">采购订单</el-menu-item>
          <!-- <el-menu-item index="/purchaseManage/quality">采购质检单</el-menu-item> -->
          <!-- <el-menu-item index="/purchaseManage/warehouse">采购入库单</el-menu-item> -->
          <!-- <el-menu-item index="/purchaseManage/returned">采购退货单</el-menu-item> -->
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-service icon"></i>
            <span>产品管理</span>
          </template>
          <el-menu-item index="/productManage/product">产品管理</el-menu-item>
        </el-submenu>
        
      </el-menu>
    </div>
  </div>
</template>

<script>
import {getMenuTreeByRole} from "@/api/menus/index"
export default {
  name: "AppSidebar",
  props: {},
  data() {
    return {}
    return {
      menus:[]
    }
  },
  watch: {},
  created() {
    this.initNavMenu()
    this.getMenuTreeByRole()
  },
  methods: {
    getMenuTreeByRole(){
      getMenuTreeByRole().then((res)=>{
        res.data.list.map((item)=>{
          if(item.systemType===4){
            this.menus=item.menus
          }
        })
      })
    },
    // 监听路由
    initNavMenu() {
      // console.log(this.$route.name)

 src/router/index.js

@@ -12,8 +12,20 @@
const purchaseManage = (resolve) => require(["@/views/purchaseManage/index"], resolve)
const productManage = (resolve) => require(["@/views/productManage/index"], resolve)
const PreviewFile = (resolve) => require(["@/views/supplierManage/supplier/PreviewFile"], resolve)
const noData = (resolve) => require(["@/views/NoData/index"], resolve)


export const routes = [
  // 无数据页面
  {
    path: "/",
    name: "NoData",
    meta: {
      title: "",
      auth: true,
    },
    component: noData,
  },
  {
    path: "supplierManage", // 供应商管理
    name: "supplierManage",

 src/views/NoData/index.vue

New file
@@ -0,0 +1,62 @@
<template>
  <d2-container>
    <div class="content">
      <el-empty :image="require('@/assets/img/noJurisdiction.png')" description="您尚未获得访问权限。">
        <p>请您联系主账号登录访问控制，为您授予服务的相关权限。</p>
      </el-empty>
    </div>
  </d2-container>
</template>

<script>

export default {
  name: "NoData",
  components: {
  },
  
  computed: {
   
  },
  data() {
    return {
     
    };
  },
  mounted() {},
  methods: {
    
  },
};
</script>

<style lang="scss" scoped>

// 显示列表
.content {
  width: 100%;
  height:100%;
  min-height: 300px;
  overflow: hidden;
  background:#fff;
  padding:30px 0;
  border-radius: 4px;
  .el-empty{
    width: 100%;
    height:calc(100% - 280px);
    p{
      margin: 0;
      font-size: 14px;
      color: #909399;
    }
  }
}

::v-deep .el-empty__bottom{
  margin: 0 !important;
}
::v-deep .el-empty__description{
  margin: 0 !important;

}
</style>

 vue.config.js

@@ -13,12 +13,16 @@
  productionSourceMap: false, // 如果你不需要生产环境的source map, 可以将其设置为false 以加速生产环境构建
  devServer: {
    proxy: {
      "/api/menu":{
        target:"http://192.168.20.119:8001",
        ws: true,
        changeOrigin: true
      },
      "/api": {

        // target: "http://192.168.20.118:8889", // http://192.168.20.119:8002 http://fai365.com:30150/
        // target: "http://192.168.20.120:8004", 
        target: "http://192.168.20.119:8004", // http://192.168.20.119:8004 http://fai365.com:30150/

        ws: true,
        changeOrigin: true
      }