控制权限按钮的显示隐藏
权限按钮的显示隐藏
<template slot="top-right">
<el-button
v-if="fn('organizationManage-new')"
type="primary"
icon="el-icon-plus"
:disabled="!hasCurrentNodeData"
@click="showAddOrg"
>新增组织</el-button>
<!-- v-if="$checkBtnAuth('delete', authData, true)" -->
<el-button
v-if="fn('organizationManage-delete')"
:disabled="!selected_rows||selected_rows.length<=0"
@click="handleClickDelete"
>删除</el-button>
</template>
//修改权限显示
fn(btn) {
let arr = JSON.parse(sessionStorage.getItem('vuex')).all_has_permission_code
let flag = arr.indexOf(btn)
if (flag == -1) {
return false
} else {
return true
}
}
控制按钮权限操作
<template>
<div class="app-container">
<el-button
type="primary"
icon="el-icon-plus"
@click="addOneRow"
>新增一行</el-button>
<el-table
v-loading="item_menu_permission_loading"
:data="itemMenuPermissionTable"
max-height="400px"
height="400px"
border
fit
highlight-current-row
style="width: 100%;"
>
<el-table-column
type="index"
align="center"
label="ID"
width="40"
></el-table-column>
<el-table-column
min-width="140px"
align="center"
label="权限名称"
>
<template slot-scope="{row}">
<template v-if="row.edit">
<div class="edit">
<el-input
v-model="row.actionName"
class="edit-input"
/>
<el-button
class="cancel-btn"
type="text"
icon="el-icon-refresh"
@click="cancelEdit(row)"
>取消</el-button>
</div>
</template>
<span v-else>{{ row.actionName }}</span>
</template>
</el-table-column>
<el-table-column
min-width="260px"
label="权限编码"
>
<template slot-scope="{row}">
<template v-if="row.edit">
<div class="edit">
<el-input
v-model.trim="row.actionCode"
class="edit-input"
/>
<el-button
class="cancel-btn"
icon="el-icon-refresh"
type="text"
@click="cancelEdit(row)"
>取消</el-button>
</div>
</template>
<span v-else>{{ row.actionCode }}</span>
</template>
</el-table-column>
<el-table-column
width="110px"
label="权限类型"
>
<template slot-scope="{row}">
<el-select
v-model="row.actionOperation"
placeholder
>
<el-option
v-for="item in action_operation_options"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column
width="110px"
label="请求类型"
>
<template slot-scope="{row}">
<el-select
v-model="row.actionType"
placeholder
>
<el-option
v-for="item in actionTypeOptions"
:key="item.value"
:label="item.value"
:value="item.value"
></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column
min-width="100px"
label="请求地址"
>
<template slot-scope="{row}">
<template v-if="row.edit">
<div class="edit">
<el-input
v-model.trim="row.actionURL"
class="edit-input"
/>
<el-button
class="cancel-btn"
icon="el-icon-refresh"
type="text"
@click="cancelEdit(row)"
>取消</el-button>
</div>
</template>
<span v-else>{{ row.actionURL }}</span>
</template>
</el-table-column>
<el-table-column
width="80px"
label="启用"
>
<template slot-scope="{row}">
<el-switch
v-model="row.ifUse"
:active-value="1"
:inactive-value="0"
@change="singleControlSwitch(row)"
></el-switch>
</template>
</el-table-column>
<el-table-column
align="center"
label="操作"
width="140"
>
<template slot-scope="{row,$index}">
<el-button
v-if="row.edit"
type="success"
plain
@click="confirmEdit(row)"
>完成</el-button>
<el-button
v-else
type="primary"
plain
@click="handleEdit(row)"
>编辑</el-button>
<el-button
type="text"
@click="handleDelete(row,$index)"
>删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
export default class ItemPermissionTable extends Vue {
filters = {
statusFilter(status) {
const statusMap = {
published: 'success',
draft: 'info',
deleted: 'danger'
}
return statusMap[status]
}
}
listLoading = true
// 权限类型
//请求类型
actionTypeOptions = [
{
value: 'GET'
},
{
value: 'POST'
},
{
value: 'PUT'
},
{
value: 'DELETE'
}
]
@vuexSystemMenu.State current_menu!: IMenuDetail
@vuexSystemMenu.State item_menu_permission_loading
@vuexSystemMenu.State action_operation_options
// 权限列表
@vuexSystemMenu.State item_menu_permission
get itemMenuPermissionTable(): IItemMenuPermissionForm[] {
return this.item_menu_permission
}
set itemMenuPermissionTable(val: IItemMenuPermissionForm[]) {
this.itemMenuPermissionTable = val
}
singleControlSwitch({ ifUse, id }) {
// console.log(ifUse, id, 2)
getRestart(id, ifUse)
.then(res => {
//console.log(res)
this.$notify.success(`${['禁用', '启用'][ifUse]}成功!`)
})
.catch(e => {
// this.$notify.error(`${['禁用', '启用'][ifUse]}失败: ${e.message}`)
})
}
handleEdit(row) {
this.$set(row, 'edit', true)
}
handleDelete(row, $index) {
this.$confirm(`确定删除选择的权限？`, { type: 'warning' }).then(() => {
if (!row.id) {
this.itemMenuPermissionTable.splice($index, 1)
return
}
deleteMenuPermission([row.id])
.then(res => {
this.itemMenuPermissionTable.splice($index, 1)
})
.catch(e => {
this.$notify.error(`删除失败: ${e.message}`)
})
})
}
addOneRow() {
this.itemMenuPermissionTable.push({
menuId: this.current_menu.id,
actionOperation: 'check',
actionCode: '',
actionName: '',
actionType: 'GET',
actionURL: '',
ifUse: 1,
edit: true
})
}
cancelEdit(row) {
row.edit = false
this.$message({
message: '已取消编辑,将不保存修改!',
type: 'warning'
})
}
confirmEdit(row) {
this.$set(row, 'edit', false)
postMenuPermission(row)
.then(res => {
this.$notify.success(`保存成功!`)
})
.catch(e => {
this.$notify.error(`保存失败: ${e.message}`)
})
}
}