# 使用手册

# 使用导出

导出没有使用自定义组件,还是普通的按钮实现

<el-button
    icon="el-icon-download"
    v-auth="['system:user:export']"
    @click="exportExcel"
>导出</el-button>
1
2
3
4
5

vue 代码,里面使用了一个全局挂载的 $TOOL 工具助手,使用 download 函数对服务器的数据进行处理

// 导出用户
exportExcel () {
    this.$API.user.exportExcel(this.queryParams).then(res => {
        this.$TOOL.download(res)
    })
},
1
2
3
4
5
6

# 使用导入

前端已经全局挂载了导入组件,可以在任何页面直接使用

<ma-import
    :auth="['system:user:import']"
    :upload-api="$API.user.importExcel"
    :download-tpl-api="$API.user.downloadTemplate"
    @success="handleSuccess()"
/>
1
2
3
4
5
6
参数 说明
auth 接收字符串或者数组,验证是否有权限可以使用
upload-api 指定导入数据接口
download-tpl-api 指定下载空模板接口
@success 导入成功后处理方法,比如刷新表格

# 使用权限

前端已经封装好了两个指令级别的权限 v-authv-role,每个都可单独使用,也可以联合使用

  • v-auth 权限检查指令
  • v-role 角色检查指令

# 使用权限指令

// 单个权限检查 检查用户必须存在此权限才能看到
<el-button v-auth="system:user:save">新增用户</el-button>

// 多个权限检查 (多个权限,只要包含一个就能看到)
<el-button v-auth="['system:user:delete', 'system:user:realDelete']">删除用户</el-button>
1
2
3
4
5

# 使用角色指令

// 单个角色检查 检查用户拥有此角色才能看到
<el-button v-role="superAdmin">新增用户</el-button>

// 多个角色检查 (多个角色,只要包含一个就能看到)
<el-button v-role="['role-1', 'role-2']">删除用户</el-button>
1
2
3
4
5

# 使用字典

字典管理是用来维护固定且常用的数据,如下拉框、单选按钮、复选框、等数据,方便维护。

TIP

字典主要通过字典的代码标识来调用数据,因为已经在main.js里全局挂载了方法,所以在页面里任何地方都可以直接使用

// 使用获取单个字典
let xxxx = this.getDict('字典类型代码标识')
console.log(xxxx.data)

OR 

this.getDict('字典类型代码标识').then(res => {
    this.xxxx = res.data
})
console.log(this.xxxx)

// 使用获取多个字典
let zzzz = this.getDicts(['字典标识-1', '字典标识-2'])
console.log(zzzz.data)

OR 

this.getDicts(['字典标识-1', '字典标识-2']).then(res => {
    this.zzzz = res.data
})
console.log(this.zzzz)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 前端获取当前用户信息

在任何页面中,用法如下:

let user = this.$TOOL.data.get('user');
console.log(user)
1
2

在JS当中,用法如下:

// 需要先引入tool
import tool from '@/utils/tool';
// 获取用户信息
let user = tool.data.get('user')
console.log(user)
1
2
3
4
5