authority-admin v0.1.8

1.权限使用说明

权限使用的是角色配置里配置好的角色列表,在角色配置中进行配置角色,在权限配置中对相应的角色进行权限配置

更新日志

• v0.0.30-alpha
  • 第一版
• v0.1.0
  • 迭代功能权限列表交互
  • 功能权限选择树节点时自动选择子节点，如果对应叶子节点无选中则自动全选
  • 叶子节点增加权限按钮，取消选中、全部选中不会影响对应树节点

1.1 集成

1.1.1 安装

# 目前处于内网发布，镜像地址：http://192.168.5.55:4873
npm i authority-admin -S
# 建议安装时固定版本号

// 需要配置网关地址
// .env
VUE_APP_BASEURL=/api/
VUE_APP_CONTACT=/contact/v1
VUE_APP_AUTH=**

import {
  version,
  config,
  RoleAuthRouter,
  AuthorityStore,
  RegisterVuePlugin
} from "authority-admin";

// RoleAuthRouter 权限页面路由配置
// 将路由配置添加到自己项目的路由配置中，然后在项目中实现需要跳转的菜单
// 以下是路由的配置详情供参考
export default [
  {
    path: "roleManage",
    name: "roleManage",
    component: RoleManage
  },
  {
    path: "authManage",
    name: "authManage",
    component: AuthManage
  }
];

Vue.use(RegisterVuePlugin); // 注册权限用到的相关组件和第三方库

/**
 * roleTitle <string> 角色页面提示的文字
 * pcCode <string> 与后台确定的PC权限code码
 * mobile <string> 移动端权限code码
 * appId <string> 应用id
 **/
AuthorityAdmin.config({
  roleTitle: "TDS智能设备",
  pcCode: "350",
  mobileCode: "150",
  appId: "8"
});

AuthorityStore为 vuex 的模块，需要加入到项目的vuex的module中
并且调用this.$store.dispatch("setUserCompanyMsg", { companyId: <公司Id> })保存登陆用户的信息

/**
 * AuthorityStore
 * 需要调用action中的方法把免登后的用户信息存入
 * this.$store.dispatch("setUserCompanyMsg", { companyId: <公司Id> })
 * 以下为模块内容说明
 */
const state: any = {
  roleid: "", // 角色ID
  allchecked: "", // 反向全选
  tabKey: "1", // tab值
  userCompanyMsg: {
    companyId: "" // 当前公司ID
  }
};

const getters = {
  getRoleid,
  getAllcheck,
  getTabKey,
  getUserCompanyMsg
};

const actions = {
  setRoleid,
  setAllcheck,
  setTabKey,
  setUserCompanyMsg
};

const mutations = {
  setRoleid,
  setAllcheck,
  setTabKey,
  setUserCompanyMsg
};

export default {
  state,
  getters,
  actions,
  mutations
};

1.2 模板类型(与后端的参数形式)

数据权限的五种组件类型：radio, checkboxs, or, and, dialog

• radio //单选框组件

  未配置过权限的角色默认选中第一个单选按钮,配置过的显示当前角色下的配置

{
    "plugins": "radios", //组件类型
    "title": "性别", //组件标题
    "value": "sex", //组件key值
    "options": [
      {
        "label": "男", //标题
        "value": "男"，//值
        "isChecked": "true" //是否被选中
      },
      {
        "label": "女",
        "value": "女",
        "isChecked": "false"
      }
    ]
  }

• checkboxs //多选框组件

{
  "plugins": "checkboxs",
  "title": "爱好",
  "value": "like", //组件key值
  "options": [
    {
      "label": "篮球",
      "value": "篮球",
      "ischecked": "false"
    },
    {
      "label": "足球",
      "value": "足球",
      "ischecked": "false"
    }
  ]
}

• or // 或的关系组件

  形式为多组单选框,单选框下有对应的多选框组 每次只能选择一组,只有当前单选框被选中,对应的多选框组才可用,未选中的单选框下的多选框组为禁用状态 默认选择第一组单选框,配置过的角色显示配置后的信息

{
  "plugins": "or",
  "title": "或的关系",
  "value": "huo", //组件key值
  "options": [
    {
      "label": "球",
      "value": "球",
      "isChecked": "false",
      "children": [
        {
          "label": "篮球",
          "value": "篮球",
          "isChecked": "false"
        },
        {
          "label": "足球",
          "value": "足球",
          "isChecked": "false"
        }
      ]
    },
    {
      "label": "绳",
      "value": "绳",
      "isChecked": "false",
      "children": []
    }
  ]
}

• and // 与的关系组件

  形式为多组多选框,多选框下有对应的多选框组 每次可以选择多组,只有当前多选框被选中,对应的多选框组才可用,未选中的多选框下的多选框组为禁用状态

{
    "plugins": "and",
    "title": "与的关系",
    "value": "yu", //组件key值
    "options": [
      {
        "label": "条件1",
        "value": "条件1",
        "isChecked": "false",
        "children": [
          {
            "label": "1.1",
            "value": "1.1",
            "isChecked": "false"
          },
          {
            "label": "1.2",
            "value": "1.2"，
            "isChecked": "false"
          }
        ]
      },
      {
        "label": "条件2",
        "value": "条件2",
        "isChecked": "false",
        "children": []
      }
    ]
  }

• dialog // 多选框控制 input 框是否可用组件

  有两种形式,第一种为 dialog 框是通用组件,标题展示后端传入的数据,左侧展示树,在左侧进行选中节点、删除节点等操作（全选时父节点会被选中）;右侧只起到展示选中的节点的作用 通过是否有 checkList 判断当前组件是否处于选中状态 通过 value 值判断显示组织架构形式还是通用形式

{
  "plugins": "dialog",
  "title": "存放位置",
  "value": "storage",
  "checkList": [
    {
      "id": "1.1",
      "name": "1.1"
    },
    {
      "id": "1.2",
      "name": "1.2"
    }
  ],
  "options": [
    {
      "title": "1.1",
      "key": "1.1",
      "children": [
        {
          "title": "1.1.1",
          "key": "1.1.1"
        },
        {
          "title": "1.1.2",
          "key": "1.1.2"
        },
        {
          "title": "1.1.3",
          "key": "1.1.3"
        },
        {
          "title": "1.1.4",
          "key": "1.1.4"
        }
      ]
    },
    {
      "title": "1.2",
      "key": "1.2"
    }
  ]
}

• dialog // 多选框控制 input 框是否可用组件

  有两种形式,第二种为 dialog 框显示组织架构,沿用组织架构组件,内部操作按组织架构形式 使用组织架构时,value 值必须为 organization;因为要通过此值判断是展示组织架构形式还是通用形式 没有 options,组织架构另调组织架构自己的接口

{
  "plugins": "dialog",
  "title": "组织架构",
  "value": "organization",
  "checkList": [
    {
      "id": "1.1",
      "name": "1.1"
    },
    {
      "id": "1.2",
      "name": "1.2"
    }
  ]
}