自定义权限按钮
1. 系统设置->菜单设置->其他权限,点开设置按钮名称与值,设置后勾上按钮

2. 前端:api->buttons.js添加配置;(早期版本文件夹是config->buttons.js)

3. 前端生成页面js文件或者vue文件实现此方法

代码实现
[vue3代码]写在生成的[表.vue]文件中,[vue2代码]写在[表.jsx]文件methods方法中;二选一实现
上面菜单设置的是哪张表,就在对应[表.vue]文件或者[表.jsx]文件实现
vue3代码
const onInit = ($vm) => {
gridRef = $vm;
gridRef.testBtnClick = () => {};
};
vue2 代码
testBtnClick(){
}
判断是否有按钮权限
[vue3代码]写在生成的[表.vue]文件中,[vue2代码]写在[表.jsx]文件methods方法中;二选一实现
判断是否有个某个页面的按钮权限
vue3代码
const onInit = ($vm) => {
gridRef = $vm;
//Search:改为要判断的按钮值
//按钮可选值Search\Add\Update等,value参照值在api->buttons.js文件中的value值
//1、判断指定页面是否有某个按钮权限
if (proxy.base.hasAuthButton("表名", "Search")) {
}
//2、获取指定页面的所有按钮权限
//获取页面的所有按钮权限
const buttons = proxy.base.getAuthButtons("表名");
//判断当前页面有哪些按钮权限
//按钮可选值Search\Add\Update等,value参照值在api->buttons.js文件中的value值
const b = gridRef.buttons.some(x=>{return x.value=='值'})
};
vue2 代码
onInit(){
//Search:改为要判断的按钮值
//按钮可选值Search\Add\Update等,value参照值在api->buttons.js文件中的value值
//1、判断指定页面是否有某个按钮权限
if(this.base.hasAuthButton('表名','Search')){
}
//2、获取指定页面的所有按钮权限
//获取页面的所有按钮权限
const buttons = this.base.getAuthButtons("表名");
//判断当前页面有哪些按钮权限
//按钮可选值Search\Add\Update等,value参照值在api->buttons.js文件中的value值
const b = this.buttons.some(x=>{return x.value=='值'})
}
判断按钮权限(指令判断)
权限指令说明: v-auth="'表名:Add'" ,,
权限指令说明
- 使用方式:v-auth="'表名:Add'"
- 表名为设置菜单填写的表名
- Add为权限值,对应菜单设置【权限按钮】中的权限值
- 权限值选项:Search、Add、Update、Delete、CopyData、Import、Export、Upload、Audit、AntiAudit、CancelAudit、AbortAudit、UrgentAudit、Print、View及菜单上的自定义权限值
1.vue html标签中使用
<template>
<div>
//1.判断是否有添加按钮权限
<el-button v-auth="'表名:Add'">添加</el-button>
//2.判断是否有修改按钮权限
<el-button v-auth="'表名:Update'">修改</el-button>
//3.判断多张表按钮权限、判断多个按钮
<el-button v-auth="['表名:Add', '表名:Update']">编辑</el-button>
</div>
</template>
1.render中使用
//1.判断是否有添加按钮权限
<el-button v-auth={'表名:Add'} type="primary" onClick={($e) => {}}>添加按钮</el-button>
//2.完整表格中自定义权限按钮(带样式)
columns.push({
title:"操作",field:"操作",width:100,fixed:"right",align:"center",
render: (h, { row, column, index }) => {
return (
<div>
<el-button
v-auth={'表名:Add'}
link
onClick={($e) => {}}
color="#0425dd"
plain
size="small"
style="padding: 5px !important;margin: 0;">
<i style="font-size:13px" class="el-icon-edit-outline"></i>
{proxy.$ts("按钮")}
</el-button>
</div>
);
}
});
//3.其他配置属性与上面【vue html标签中使用】一致
