vue后臺系統(tǒng)管理項目之角色權(quán)限分配管理功能(示例詳解)
更新時間：2022年09月26日 15:40:46 作者：船長在船上
這篇文章主要介紹了vue后臺系統(tǒng)管理項目-角色權(quán)限分配管理功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
vue后臺系統(tǒng)管理項目：
- 技術(shù)選型：vue + element-ui
- 菜單權(quán)限管理模塊功能
- 角色列表查詢，通過（角色名稱；角色編號；狀態(tài)：啟用、禁用）進行角色數(shù)據(jù)搜索。
- 查詢、重置、新建角色功能
- 角色列表分頁實現(xiàn)
- 角色編輯，角色禁用，角色刪除操作
- 新建角色功能包括對角色名稱、菜單權(quán)限信息的保存提交
角色權(quán)限分配管理功能
element-ui tree組件注意事項
node-key 每個樹節(jié)點用來作為唯一標識的屬性，整棵樹應(yīng)該是唯一的check-strictly 在顯示復(fù)選框的情況下，是否嚴格的遵循父子不互相關(guān)聯(lián)的做法，默認為 false
expand-on-click-node 是否在點擊節(jié)點的時候展開或者收縮節(jié)點， 默認值為 true，如果為 false，則只有點箭頭圖標的時候才會展開或者收縮節(jié)點。
check-change 節(jié)點選中狀態(tài)發(fā)生變化時的回調(diào)，共三個參數(shù)，依次為：傳遞給
data屬性的數(shù)組中該節(jié)點所對應(yīng)的對象、節(jié)點本身是否被選中、節(jié)點的子樹中是否有被選中的節(jié)點props
role.vue模塊
1.查詢重置搜索
<!-- 查詢重置搜索 -->
<el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm" size="35">
<el-row>
<el-col :span="8">
<div class="grid-content bg-purple-light">
<el-form-item label="角色名稱" prop="roleName">
<el-input v-model="ruleForm.roleName" placeholder="請輸入角色名稱"></el-input>
</el-form-item>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple-light">
<el-form-item label="角色編號" prop="id">
<el-input v-model="ruleForm.id" placeholder="請輸入角色編號"></el-input>
</el-form-item>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple-light">
<el-form-item label="狀態(tài)" prop="disable">
<el-select v-model="ruleForm.disable" placeholder="請選擇狀態(tài)">
<el-option label="啟用" value="false"></el-option>
<el-option label="禁用" value="true"></el-option>
</el-select>
</el-form-item>
</div>
</el-col>
<el-col :span="24">
<div class="grid-content bg-purple-light ">
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">查詢</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
<el-button @click="addNewRole" type="primary">新建角色</el-button>
</el-form-item>
</div>
</el-col>
</el-row>
</el-form>2.table列表
<!--列表-->
<el-table :data="tableData" border highlight-current-row v-loading="loading" element-loading-text="拼命加載中"
style="width: 100%;height:auto;" :header-cell-style="{textAlign: 'center',background:'#fafafa'}"
:cell-style="{ textAlign: 'center' }">
<el-table-column prop="id" label="角色編號"></el-table-column>
<el-table-column prop="roleName" label="角色名稱"></el-table-column>
<el-table-column prop="disable" label="狀態(tài)">
<template slot-scope="scope">{{ scope.row.disable == false ? '啟用' : '禁用' }}</template>
</el-table-column>
<el-table-column label="操作" width="200">
<template slot-scope="scope">
<el-button @click="handleEditClick(scope.row)" type="text" size="small">編輯</el-button>
<!-- <el-button @click="handleLimitClick(scope.row)" type="text" size="small">權(quán)限設(shè)置</el-button> -->
<el-button :class="scope.row.disable==false?'isCanUse':''" @click="handleDisableClick(scope.row)" type="text"
size="small">{{ scope.row.disable == true ? '啟用' : '禁用' }}
</el-button>
<el-button class="isCanUse" @click="delFun(scope.row)" type="text" size="small">刪除</el-button>
</template>
</el-table-column>
</el-table>3.分頁
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="pagination.page" :page-sizes="[10, 20, 30, 40,50]" :page-size="pagination.pageSize"
layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>4.新建/編輯角色彈窗
<!-- 新建發(fā)送彈框 -->
<el-dialog title="新建角色" :visible.sync="dialogFormUser">
<el-form ref="newRoleForm" :rules="rules" :model="newRoleForm" label-width="100px">
<!-- <el-form-item label="角色編號" prop="userName">
<el-input v-model="newRoleForm.userName" placeholder="自動生成" :disabled="true"></el-input>
</el-form-item>-->
<el-form-item label="角色名稱" prop="roleName">
<el-input v-model="newRoleForm.roleName" placeholder="請輸入角色名稱"></el-input>
</el-form-item>
<el-form-item label="菜單權(quán)限">
<div>
<el-tree :data="data2" node-key="id" ref="tree" :check-strictly="checkStrictly" :expand-on-click-node="true"
@check-change="handleChecked" :props="defaultProps" :show-checkbox="true"></el-tree>
</div>
</el-form-item>
<el-form-item>
<el-button @click="saveRole('newRoleForm')" type="primary">立即保存</el-button>
<el-button @click="dialogFormUser=false">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>5.接口引入
import {
getRolePage,//獲取角色列表
addRole,//添加角色
allMenu,//菜單列表
disableRoleEnable,//禁用角色
roleEditInfo,//角色編輯
updateEditRole, //更新角色
delSysRole//刪除角色
} from "../../api/userMG";6.data定義
data() {
return {
loading: false, //是顯示加載
isCanUse: false,
dialogFormUser: false,
checkStrictly: true,
pagination: {
page: 1,
pageSize: 10,
total: 0
},
ruleForm: {
roleName: "",
id: "",
disable: ""
},
newRoleForm: {
roleName: ""
},
rules: {
roleName: [
{required: true, message: "請輸入角色名稱", trigger: "blur"}
]
},
treeCheckedData: [],
CheckedData: [], //選擇新建角色的勾選
tableData: [],
data2: [],
roleId: "",
defaultProps: {
children: "childMenu",
label: "name"
}
};
},7.methods方法
查詢數(shù)據(jù)
submitForm(ruleForm) {
this.$refs[ruleForm].validate(valid => {
if (valid) {
this.pagination.page = 1;
this.getRolePageFun();
} else {
console.log("error submit!!");
return false;
}
});
},重置數(shù)據(jù)
resetForm(ruleForm) {
this.pagination.page = 1;
this.$refs[ruleForm].resetFields();
(this.ruleForm.roleName = ""),
(this.ruleForm.id = ""),
(this.ruleForm.disable = ""),
(this.ruleForm.pageNum = 1);
this.ruleForm.pageSize = this.pagination.pageSize;
this.getRolePageFun();
},選擇一頁幾條數(shù)據(jù)
handleSizeChange(val) {
this.pagination.pageSize = val;
this.pagination.page = 1;
this.getRolePageFun();
},選擇第幾頁
handleCurrentChange(val) {
this.pagination.page = val;
this.getRolePageFun();
},權(quán)限設(shè)置
handleLimitClick(val) {
this.dialogFormUser = true;
},啟用和禁用角色
handleDisableClick(row) {
console.log(row, "row");
this.$confirm(
row.disable == true ? "是否將此用戶開啟使用?" : "是否將此用戶禁止使用?",
"提示",
{
confirmButtonText: "確定",
cancelButtonText: "取消",
type: "warning"
}
)
.then(() => {
let params = {
disable: row.disable == true ? "false" : "true",
id: row.id
};
disableRoleEnable(params)
.then(res => {
this.loading = false;
if (res.code == 200) {
console.log("開啟或者禁用");
this.$message.success(
row.disable == true ? "啟用成功" : "禁用成功"
);
this.reload();
} else {
this.$message.error(res.msg);
}
})
.catch(err => {
this.loading = false;
this.$message.error("菜單加載失敗，請稍后再試！");
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消操作"
});
});
},刪除角色，根據(jù)角色id
delFun(row) {
this.$confirm(
"是否將此用戶刪除?",
"提示",
{
confirmButtonText: "確定",
cancelButtonText: "取消",
type: "warning"
}
).then(() => {
delSysRole({id: row.id}).then(res =>{
if (res.code === 200) {
this.$message.success("操作成功");
this.reload();
}else {
this.$message.warning(res.msg);
}
})
}).catch(() => {
this.$message.info("取消操作");
})
},添加角色
addNewRole() {
this.dialogFormUser = true;
this.treeCheckedData = [];
this.newRoleForm.roleName = "";
this.roleId = "";
this.getAllMenu();
},點擊節(jié)點選中 （節(jié)點選中狀態(tài)發(fā)生變化時的回調(diào)）
handleChecked(data) {
this.CheckedData = this.$refs.tree.getCheckedKeys();
},立即保存角色
saveRole() {
this.addRoleFun();
},點擊編輯
handleEditClick(row) {
console.log(row, "row");
this.dialogFormUser = true;
// /sysRole/info// 根據(jù)id查看角色詳情
roleEditInfo(row.id)
.then(res => {
this.loading = false;
if (res.code == 200) {
console.log(res.data, "根據(jù)id查看角色詳情");
this.getAllMenu();
this.roleId = res.data.id;
// this.newRoleForm.id = res.data.id;
this.newRoleForm.roleName = res.data.roleName;
let that = this;
setTimeout(function () {
res.data.menuIds.forEach(value => {
that.$refs.tree.setChecked(value, true, false);
});
}, 1000);
} else {
this.$message.error(res.msg);
}
})
.catch(err => {
this.loading = false;
this.$message.error("菜單加載失敗，請稍后再試！");
});
},新建角色
getRolePageFun() {
this.ruleForm.pageNum = this.pagination.page;
this.ruleForm.pageSize = this.pagination.pageSize;
getRolePage(this.ruleForm)
.then(res => {
this.loading = false;
if (res.code == 200) {
console.log(res.data, "角色列表函數(shù)");
this.tableData = res.data.records;
this.pagination.total = res.data.total;
} else {
this.$message.error(res.msg);
}
})
.catch(err => {
this.loading = false;
this.$message.error("菜單加載失敗，請稍后再試！");
});
},添加角色保存函數(shù)
addRoleFun(newRoleForm) {
console.log(this.newRoleForm, "this.newRoleForm");
if (this.newRoleForm.roleName == "") {
this.$message.error("角色名稱不能為空");
} else if (this.CheckedData.length == 0) {
this.$message.error("權(quán)限不能為空");
} else {
if (this.roleId == "") {
this.newRoleForm.menuIds = this.CheckedData;
addRole(this.newRoleForm)
.then(res => {
this.loading = false;
console.log(res, "添加角色");
if (res.code == 200) {
this.$message.success("添加成功");
this.reload();
} else {
this.$message.error(res.msg);
}
})
.catch(err => {
this.loading = false;
this.$message.error("菜單加載失敗，請稍后再試！");
});
} else {
this.newRoleForm.menuIds = this.CheckedData;
this.newRoleForm.id = this.roleId;
console.log(this.newRoleForm.menuIds, "id獲取");
updateEditRole(this.newRoleForm)
.then(res => {
this.loading = false;
console.log(res, "編輯角色");
if (res.code == 200) {
this.$message.success("編輯成功");
this.reload();
} else {
this.$message.error(res.msg);
}
})
.catch(err => {
this.loading = false;
this.$message.error("菜單加載失敗，請稍后再試！");
});
}
}
},獲取所有的菜單函數(shù)
getAllMenu() {
allMenu()
.then(res => {
this.loading = false;
console.log(res.data, "獲取所有的菜單");
if (res.code == 200) {
this.data2 = res.data;
} else {
this.$message.error(res.msg);
}
})
.catch(err => {
this.loading = false;
this.$message.error("菜單加載失敗，請稍后再試！");
});
}8.created加載角色列表
created() {
// 角色列表
this.getRolePageFun();
},到此這篇關(guān)于vue后臺系統(tǒng)管理項目-角色權(quán)限分配管理功能的文章就介紹到這了,更多相關(guān)vue角色權(quán)限分配管理內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
最近在開發(fā)時遇到一個問題,是在輸入框里面放一個樹形組件,這篇文章主要給大家介紹了關(guān)于前端vue3樹形組件使用的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了Vue移動端下拉刷新組件的使用教程，每一次我在使用vant組件庫里面list組件和下拉刷新連在一起用的時候都會出現(xiàn)下拉刷新和列表下滑局部滾動的沖突，這就很難受，這篇文章將解決它2023-04-04
這篇文章給大家分享Vue3搭建組件庫開發(fā)環(huán)境，給大家講解依次搭建組件庫、example、文檔、cli，本文內(nèi)容是搭建組件庫的開發(fā)環(huán)境的過程，感興趣的朋友跟隨小編一起看看吧2022-11-11
vue3中實現(xiàn)文本顯示省略號和tooltips提示框的方式詳解
在?B?端業(yè)務(wù)中,我們經(jīng)常會遇到文本內(nèi)容超出容器區(qū)域需顯示省略號的需求,當鼠標移入文本時,會出現(xiàn)?Tooltip?顯示完整內(nèi)容,最近,我也遇到了這樣的場景,接下來給大家介紹vue3中實現(xiàn)文本顯示省略號和tooltips提示框的方式,需要的朋友可以參考下2024-04-04
這篇文章主要為大家介紹了vue導(dǎo)出excel表格并支持樣式及行高修改，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
這篇文章主要給大家介紹了關(guān)于Vue中extends繼承和組件復(fù)用性的相關(guān)資料,組件(Component)是Vue.js最強大的功能之一,組件可以擴展HTML元素,封裝可重用的代碼,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了vue項目中form?data形式傳參方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了vue部署到域名二級目錄刷新404的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue在項目中實現(xiàn)base64加密解密的示例代碼
這篇文章主要為大家詳細介紹了vue在項目中實現(xiàn)base64加密解密的兩種方法,文中的示例代碼講解詳細,具有一定的參考價值,有需要的小伙伴可以了解一下2023-10-10
vue-router相關(guān)基礎(chǔ)知識及工作原理
這篇文章主要介紹了vue-router相關(guān)基礎(chǔ)知識及單頁面應(yīng)用的工作原理,需要的朋友可以參考下2018-03-03