@imom/button-permission

IMOM 前端 PC 按钮权限基础包

工程位于 @imom/button-permission (opens new window)。

@imom/button-permission 依赖包更新日志：

• [0.0.2] 功能实现
• [0.0.3] 修复：按钮权限会导致原来用 disabled 控制按钮是否禁用的功能失效
• [0.0.4] 修复：按钮权限会导致原来用 v-show 控制按钮是否展示的功能失效
• [0.0.5] 修复：按钮权限获取按钮字典时，默认 method 为 post

使用手册

前期准备（可以让前端开发帮忙完成）

1. 将基础包引入微前端项目代码，并注册到全局指令

• 在项目根目录的 package.json 添加 @imom/button-permission，更新 @dme/snack-ui 版本为最新，最小可用按钮权限的版本号是 0.0.43,

"dependencies": {
  "@imom/button-permission": "^0.0.5",
  "@dme/snack-ui": "^0.0.43",
},

• 在项目根目录的 main.js 注册全局指令 v-permission

import { createApp } from "vue";
import App from "./App.vue";
// 路由模块
import router from "@/router";
import createDirective from "@imom/button-permission";

const app = createApp(App);

// 注册指令
createDirective(app);

app.use(router).mount("#app");

2. 在项目的 src/router/index.js 修改路由守卫，确保在路由跳转前权限数据已加载

// ... 省略部分代码
import { initDataBtnTree } from "@imom/button-permission";

const router = createRouter({
  history: createWebHashHistory(config.basePATH),
  routes: routerMap
});

// 路由全局前置守卫
router.beforeEach(async (to, from, next) => {
  // ... 省略部分代码
  fetchDataDictionaryTree(next); // 获取华为数字字典树
});

// 获取华为数字字典树
function fetchDataDictionaryTree(next) {
  Promise.all([initDataDictionaryTree(), initDataBtnTree()])
    .then(res => {
      next();
    })
    .catch(err => {
      console.error("router fetchDataDictionaryTree err :>> ", err);
      next();
    });
}

3. 增加项目中字典 SESSION_KEY_BTN 值

// ... 省略部分代码
SESSION_KEY_CARDS: "KEY_CARDS", // 卡片数据交互，包括登录信息
// 在 SESSION_KEY_CARDS 后面添加
SESSION_KEY_BTN: "KEY_BTN", // 按钮权限的key

具体使用（给按钮增加权限控制）

一、配置按钮权限

在联建四环境 (opens new window),通过系统管理-栏目管理配置页面按钮。

步骤：

1. 找到目标菜单所在位置。
2. 创建页面 创建成功后，会发现左侧栏目结构发生了变化，设备点检方案由一个文件变成一个文件夹，并新增了主页面文件。
3. 创建按钮
4. 给账号添加按钮权限

二、权限组成规则

以 imom-mes-ui的eam-ui的维修任务管理菜单为例子 (opens new window)。

1. 菜单 URL PS: 如果菜单URL有多级，例如station/check，用"."替换"/"，替换后为station.check

   

2. 页面的栏目代码

   

3. 按钮的栏目代码

   

结合以上 3 步，最后得出权限key为equipmentRepair.pageMain.repair

三、按钮绑定权限

1. 直接使用了 tiny-button 的写法，加上指令 v-permission="'equipmentRepair.pageMain.repair'" 如果 equipmentRepair.pageMain.repair 存在于 sessionStorage 中，按钮会展示，否则隐藏。

<tiny-row>
  <tiny-button>默认按钮</tiny-button>
  <tiny-button type="primary" native-type="submit">主要按钮</tiny-button>
  <tiny-button type="success" v-permission="'equipmentRepair.pageMain.repair'">
    能看到的成功按钮
  </tiny-button>
  <tiny-button type="info">信息按钮</tiny-button>
  <tiny-button type="warning">警告按钮</tiny-button>
  <tiny-button type="danger">危险按钮</tiny-button>
</tiny-row>
<tiny-row>
  <tiny-button plain>朴素按钮</tiny-button>
  <tiny-button type="primary" plain>主要按钮</tiny-button>
  // 不存在 imes.center.mdm.panoram2icNavigation.ps_Tree.pageMain.btnSearch 这样的按钮key，所以它会被隐藏
  <tiny-button
    type="success"
    v-permission="'imes.center.mdm.panoram2icNavigation.ps_Tree.pageMain.btnSearch'"
    plain>
    不能看到的成功按钮
  </tiny-button>
  <tiny-button type="info" plain>信息按钮</tiny-button>
  <tiny-button type="warning" plain>警告按钮</tiny-button>
  <tiny-button type="danger" plain>危险按钮</tiny-button>
</tiny-row>

2. 使用组件 sie-button-group ，需要指定 buttonList 里属性 perm 的值，自动控制按钮是否显示

<sie-button-group :button-list="buttonList"></sie-button-group>

const buttonList = [
  {
    text: "新建",
    perm: "equipmentRepair.pageMain.repair",
    key: "add"
  },
  ...
];

3. 使用组件 sie-table ，需要指定 actionBtnList 里属性 perm 的值，自动控制按钮是否显示

<sie-table :action-btn-list="actionBtnList"></sie-table>

const actionBtnList = [
  {
    text: "新建",
    perm: "equipmentRepair.pageMain.repair",
    type: "add"
  },
  ...
];