vue後臺管理系統程式碼
goods下的Cate.vue
<!-- cate -->
<template>
<div class="cate">
<!-- 麵包屑導航區域 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首頁</el-breadcrumb-item>
<el-breadcrumb-item>商品管理</el-breadcrumb-item>
<el-breadcrumb-item>商品分類</el-breadcrumb-item>
</el-breadcrumb>
<!-- 卡片試圖區域 -->
<el-card class="box-card">
<!-- 新增分類區域 -->
<el-row>
<el-col>
<el-button type="primary">新增分類</el-button>
</el-col>
</el-row>
<!-- 表格 -->
<!-- 分頁 -->
</el-card>
</div>
</template>
<script>
//這裡可以匯入其他檔案（比如：元件，工具js，第三方外掛js，json檔案，圖片檔案等等）
//例如：import 《元件名稱》 from '《元件路徑》';
export default {
//import引入的元件需要注入到物件中才能使用
components: {},
data() {
//這裡存放資料
return {
//查詢條件
queryInfo:{
type:3,
pagenum:1,
pagesize:5
},
//商品分類的資料列表，預設為空
catelist:[],
//總資料條數
total:0,
};
},
//監聽屬性 類似於data概念
computed: {},
//監控data中的資料變化
watch: {},
//方法集合
methods: {
//獲取商品分類資料
getCateList(){
this.$axios.get('categories',{
params:this.queryInfo
}).then(res=>{
if(res.meta.status !== 200){
return this.$message.error('獲取商品分類失敗！')
}
//把資料列表，賦值給catelist
this.catelist = res.data.result
//為總資料條數賦值
this.total = res.data.total
})
}
},
//生命週期 - 建立完成（可以訪問當前this例項）
created() {
this.getCateList()
},
//生命週期 - 掛載完成（可以訪問DOM元素）
mounted() {},
beforeCreate() {}, //生命週期 - 建立之前
beforeMount() {}, //生命週期 - 掛載之前
beforeUpdate() {}, //生命週期 - 更新之前
updated() {}, //生命週期 - 更新之後
beforeDestroy() {}, //生命週期 - 銷燬之前
destroyed() {}, //生命週期 - 銷燬完成
activated() {}, //如果頁面有keep-alive快取功能，這個函式會觸發
};
</script>
<style scoped>
</style>
power下的Rights.vue
<!-- rights -->
<template>
<div class='rights'>
<!-- 麵包屑導航區域 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首頁</el-breadcrumb-item>
<el-breadcrumb-item>許可權管理</el-breadcrumb-item>
<el-breadcrumb-item>許可權列表</el-breadcrumb-item>
</el-breadcrumb>
<!-- 卡片檢視 -->
<el-card class="box-card">
<el-table :data="rightsList" border stripe>
<el-table-column type="index"></el-table-column>
<el-table-column label="許可權名稱" prop="authName"></el-table-column>
<el-table-column label="路徑" prop="path"></el-table-column>
<el-table-column label="許可權等級" prop="level">
<template slot-scope="scope">
<el-tag v-if="scope.row.level === '0'">一級</el-tag>
<el-tag type="success" v-else-if="scope.row.level === '1'">二級</el-tag>
<el-tag type="warning" v-else>三級</el-tag>
</template>
</el-table-column>
</el-table>
</el-card>
</div>
</template>
<script>
//這裡可以匯入其他檔案（比如：元件，工具js，第三方外掛js，json檔案，圖片檔案等等）
//例如：import 《元件名稱》 from '《元件路徑》';
export default {
//import引入的元件需要注入到物件中才能使用
components: {},
data() {
//這裡存放資料
return {
//許可權列表
rightsList:[],
};
},
//監聽屬性 類似於data概念
computed: {},
//監控data中的資料變化
watch: {},
//方法集合
methods: {
//獲取許可權列表
getRightsList(){
this.$axios.get(`rights/list`).then(res=>{
if(res.meta.status !== 200){
return this.$message.error('獲取列表許可權失敗')
}
this.rightsList = res.data
console.log(this.rightsList);
})
}
},
//生命週期 - 建立完成（可以訪問當前this例項）
created() {
//獲取所有的許可權
this.getRightsList()
},
//生命週期 - 掛載完成（可以訪問DOM元素）
mounted() {
},
beforeCreate() {}, //生命週期 - 建立之前
beforeMount() {}, //生命週期 - 掛載之前
beforeUpdate() {}, //生命週期 - 更新之前
updated() {}, //生命週期 - 更新之後
beforeDestroy() {}, //生命週期 - 銷燬之前
destroyed() {}, //生命週期 - 銷燬完成
activated() {}, //如果頁面有keep-alive快取功能，這個函式會觸發
}
</script>
<style scoped lang="scss">
</style>
power下的Role.vue
<!-- roles -->
<template>
<div class="roles">
<!-- 麵包屑導航區域 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首頁</el-breadcrumb-item>
<el-breadcrumb-item>許可權管理</el-breadcrumb-item>
<el-breadcrumb-item>角色列表</el-breadcrumb-item>
</el-breadcrumb>
<!-- 卡片試圖區域 -->
<el-card class="box-card">
<!-- 新增角色區域 -->
<el-row>
<el-col>
<el-button type="primary">新增角色</el-button>
</el-col>
</el-row>
<!-- 角色列表區域 -->
<el-table :data="roleList" border stripe>
<!-- 展開列 -->
<el-table-column type="expand">
<template slot-scope="scope">
<el-row
v-for="(item1, i1) in scope.row.children"
:key="item1.id"
:class="['bdbottom', 'vcenter', i1 === 0 ? 'bdtop' : '']"
>
<!-- 一級許可權 -->
<el-col :span="5">
<el-tag
closable
@close="removeRightById(scope.row, item1.id)"
>{{ item1.authName }}</el-tag
>
<i class="el-icon-caret-right"></i>
</el-col>
<!-- 二級和三級許可權 -->
<el-col :span="19">
<!-- 通過for迴圈巢狀渲染二級許可權 -->
<el-row
v-for="(item2, i2) in item1.children"
:key="item2.id"
:class="['bdbottom', 'vcenter', i2 === 0 ? '' : 'bdtop']"
>
<el-col :span="6">
<el-tag
type="success"
closable
@close="removeRightById(scope.row, item2.id)"
>{{ item2.authName }}</el-tag
>
<i class="el-icon-caret-right"></i>
</el-col>
<el-col :span="18">
<el-tag
v-for="(item3, i3) in item2.children"
:key="item3.id"
type="warning"
closable
@close="removeRightById(scope.row, item3.id)"
>{{ item3.authName }}</el-tag
>
</el-col>
</el-row>
</el-col>
</el-row>
<!-- <pre>
{{ scope.row }}
</pre
> -->
</template>
</el-table-column>
<!-- 索引列 -->
<el-table-column type="index"></el-table-column>
<el-table-column label="角色名稱" prop="roleName"></el-table-column>
<el-table-column label="角色描述" prop="roleDesc"></el-table-column>
<el-table-column label="操作" width="300">
<template slot-scope="scope">
<el-button type="primary" icon="el-icon-edit" size="mini"
>編輯</el-button
>
<el-button type="danger" icon="el-icon-delete" size="mini"
>刪除</el-button
>
<el-button
type="warning"
icon="el-icon-setting"
size="mini"
@click="showSetRightDialog(scope.row)"
>分配許可權</el-button
>
</template>
</el-table-column>
</el-table>
</el-card>
<!-- 分配許可權的對話方塊 -->
<el-dialog
title="分配許可權"
:visible.sync="setRightDialogVisible"
width="50%"
@close="setRightDialogClosed"
>
<!-- 樹形控制元件 -->
<el-tree
:data="rightslist"
:props="treeProps"
show-checkbox
node-key="id"
default-expand-all
:default-checked-keys="defKeys"
ref="treeRef"
></el-tree>
<span slot="footer" class="dialog-footer">
<el-button @click="setRightDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="allotRights"
>確 定</el-button
>
</span>
</el-dialog>
</div>
</template>
<script>
//這裡可以匯入其他檔案（比如：元件，工具js，第三方外掛js，json檔案，圖片檔案等等）
//例如：import 《元件名稱》 from '《元件路徑》';
export default {
//import引入的元件需要注入到物件中才能使用
components: {},
data() {
//這裡存放資料
return {
//所有角色列表資料
roleList: [],
//控制分配許可權對話方塊的顯示與隱藏
setRightDialogVisible: false,
//所有許可權的資料
rightslist: [],
treeProps: {
children: "children",
label: "authName",
},
//預設選中的節點id值陣列
defKeys: [],
//當前即將分配許可權的角色id
roleId:''
};
},
//監聽屬性 類似於data概念
computed: {},
//監控data中的資料變化
watch: {},
//方法集合
methods: {
//獲取所有角色的列表
getRolesList() {
this.$axios.get("roles").then((res) => {
if (res.meta.status !== 200) {
return this.$message.error("獲取角色列表失敗");
}
this.roleList = res.data;
// console.log(this.roleList);
});
},
//根據id刪除對應的許可權
async removeRightById(role, rightId) {
const confirmResult = await this.$confirm(
"此操作將永久刪除該檔案, 是否繼續?",
"提示",
{
confirmButtonText: "確定",
cancelButtonText: "取消",
type: "warning",
}
).catch((err) => err);
if (confirmResult !== "confirm") {
return this.$message.info("取消刪除");
}
// console.log("確認了刪除");
this.$axios.delete(`roles/${role.id}/rights/${rightId}`).then((res) => {
if (res.meta.status !== 200) {
return this.$message.error("刪除許可權失敗");
}
// this.getRolesList()
role.children = res.data;
});
},
//展示分配許可權的對話方塊
showSetRightDialog(role) {
//遞迴獲取三級節點的id
this.getLeafKeys(role, this.defKeys);
this.setRightDialogVisible = true;
this.roleId = role.id
this.$axios.get(`rights/tree`).then((res) => {
if (res.meta.status !== 200) {
return this.$message.error("獲取許可權資料失敗");
}
//把所有獲取到的許可權資料儲存到data中
this.rightslist = res.data;
console.log(this.rightslist);
});
},
//通過遞迴的形式，獲取角色下所有 三級許可權的id,並儲存到defKeys陣列中
getLeafKeys(node, arr) {
//判斷是否是三級節點,如果當前node不包含children屬性，則是三級節點
if (!node.children) {
return arr.push(node.id);
}
node.children.forEach((item) => {
this.getLeafKeys(item, arr);
});
},
//監聽分配許可權對話方塊的關閉事件
setRightDialogClosed(){
this.defKeys=[]
},
//點選確定為角色分配許可權
allotRights(){
const keys = [
...this.$refs.treeRef.getCheckedKeys(),...this.$refs.treeRef.getHalfCheckedKeys()
]
// console.log(keys);
const idStr = keys.join(',')
// console.log(idStr);
this.$axios.post(`roles/${this.roleId}/rights`,{
rids:idStr
}).then(res=>{
if(res.meta.status !== 200){
return this.$message.error('分配許可權失敗')
}
this.$message.success('分配許可權成功')
this.getRolesList()
this.setRightDialogVisible = false
})
}
},
//生命週期 - 建立完成（可以訪問當前this例項）
created() {
this.getRolesList();
},
//生命週期 - 掛載完成（可以訪問DOM元素）
mounted() {},
beforeCreate() {}, //生命週期 - 建立之前
beforeMount() {}, //生命週期 - 掛載之前
beforeUpdate() {}, //生命週期 - 更新之前
updated() {}, //生命週期 - 更新之後
beforeDestroy() {}, //生命週期 - 銷燬之前
destroyed() {}, //生命週期 - 銷燬完成
activated() {}, //如果頁面有keep-alive快取功能，這個函式會觸發
};
</script>
<style scoped lang="scss">
.bdtop {
border-top: 1px solid #eee;
}
.bdbottom {
border-bottom: 1px solid #eee;
}
.el-tag {
margin: 7px;
}
.vcenter {
display: flex;
align-items: center;
}
</style>
users下的users.vue
<!-- user -->
<template>
<div class="user">
<!-- 麵包屑導航區域 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首頁</el-breadcrumb-item>
<el-breadcrumb-item>使用者管理</el-breadcrumb-item>
<el-breadcrumb-item>使用者列表</el-breadcrumb-item>
</el-breadcrumb>
<!-- 卡片試圖區域 -->
<el-card class="box-card">
<!-- 搜尋與新增區域 -->
<el-row :gutter="20">
<el-col :span="8">
<el-input
placeholder="請輸入內容"
class="input-with-select"
v-model="queryInfo.query"
clearable
@clear="getUserList"
>
<el-button
slot="append"
icon="el-icon-search"
@click="getUserList"
></el-button>
</el-input>
</el-col>
<el-col :span="4">
<el-button type="primary" @click="addDialogVisible = true"
>新增使用者</el-button
>
</el-col>
<el-col :span="6"></el-col>
<el-col :span="6"></el-col>
</el-row>
<!-- 使用者列表區域 -->
<el-table :data="userList" border stripe>
<el-table-column type="index"></el-table-column>
<el-table-column prop="username" label="姓名"></el-table-column>
<el-table-column prop="email" label="郵箱"></el-table-column>
<el-table-column prop="mobile" label="電話"></el-table-column>
<el-table-column prop="role_name" label="角色"></el-table-column>
<el-table-column label="狀態">
<!-- slot-scope作用域插槽 -->
<template slot-scope="scope">
<!-- scope.row這一行的資料 -->
<el-switch
v-model="scope.row.mg_state"
@change="userStateChange(scope.row)"
>
</el-switch>
</template>
</el-table-column>
<el-table-column label="操作" width="180">
<template slot-scope="scope">
<!-- 修改按鈕 -->
<el-tooltip
effect="dark"
content="修改"
placement="top"
:enterable="false"
>
<el-button
type="primary"
icon="el-icon-edit"
size="mini"
@click="showEditDialog(scope.row.id)"
></el-button>
</el-tooltip>
<!-- 刪除按鈕 -->
<el-tooltip
effect="dark"
content="刪除"
placement="top"
:enterable="false"
>
<el-button
type="danger"
icon="el-icon-delete"
size="mini"
@click="removeUserById(scope.row.id)"
></el-button>
</el-tooltip>
<!-- 分配角色按鈕 -->
<el-tooltip
effect="dark"
content="分配角色"
placement="top"
:enterable="false"
>
<el-button
type="warning"
icon="el-icon-setting"
size="mini"
@click="setRole(scope.row)"
></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<!-- 分頁區域 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.pagenum"
:page-sizes="[1, 2, 5, 10]"
:page-size="queryInfo.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</el-card>
<!-- 新增使用者的對話方塊 -->
<el-dialog
title="新增使用者"
:visible.sync="addDialogVisible"
width="50%"
@close="addDialogClosed"
>
<!-- 內容主體區域 -->
<el-form
:model="addForm"
:rules="addFormRules"
ref="addFormRef"
label-width="70px"
>
<el-form-item label="使用者名稱" prop="username">
<el-input v-model="addForm.username"></el-input>
</el-form-item>
<el-form-item label="密碼" prop="password">
<el-input v-model="addForm.password"></el-input>
</el-form-item>
<el-form-item label="郵箱" prop="email">
<el-input v-model="addForm.email"></el-input>
</el-form-item>
<el-form-item label="手機" prop="mobile">
<el-input v-model="addForm.mobile"></el-input>
</el-form-item>
</el-form>
<!-- 底部區域 -->
<span slot="footer" class="dialog-footer">
<el-button @click="addDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addUser">確 定</el-button>
</span>
</el-dialog>
<!-- 修改使用者的對話方塊 -->
<el-dialog
title="修改使用者"
:visible.sync="editDialogVisible"
width="50%"
@close="editDialogClose"
>
<!-- 內容主體區域 -->
<el-form
:model="editForm"
:rules="editFormRules"
ref="editFormRef"
label-width="70px"
>
<el-form-item label="使用者名稱">
<el-input v-model="editForm.username" disabled></el-input>
</el-form-item>
<el-form-item label="郵箱" prop="email">
<el-input v-model="editForm.email"></el-input>
</el-form-item>
<el-form-item label="手機號" prop="mobile">
<el-input v-model="editForm.mobile"></el-input>
</el-form-item>
</el-form>
<!-- 底部區域 -->
<span slot="footer" class="dialog-footer">
<el-button @click="editDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="editUserInfo">確 定</el-button>
</span>
</el-dialog>
<!-- 分配角色的對話方塊 -->
<el-dialog
title="分配角色"
:visible.sync="setRoleDialogVisible"
width="50%"
@close="setRoleDialogClosed"
>
<div>
<p>當前的使用者：{{ userInfo.username }}</p>
<p>當前的角色：{{ userInfo.role_name }}</p>
<p>
當分配新角色：
<el-select v-model="selectRoleId" placeholder="請選擇">
<el-option
v-for="item in roleList"
:key="item.id"
:label="item.roleName"
:value="item.id"
>
</el-option>
</el-select>
</p>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="setRoleDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="saveRoleInfo"
>確 定</el-button
>
</span>
</el-dialog>
</div>
</template>
<script>
//這裡可以匯入其他檔案（比如：元件，工具js，第三方外掛js，json檔案，圖片檔案等等）
//例如：import 《元件名稱》 from '《元件路徑》';
export default {
//import引入的元件需要注入到物件中才能使用
components: {},
data() {
//驗證郵箱的校驗規則
var checkEmail = (rule, value, cb) => {
//驗證郵箱的正規表示式
const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
if (regEmail.test(value)) {
return cb();
}
cb(new Error("請輸入合法的郵箱"));
};
//驗證手機號的校驗規則
var checkMobile = (rule, value, cb) => {
//驗證郵箱的正規表示式
const regMobile = /^(0|86|17951)?(13[0-9]|15[0-9]|17[0-9]|18[0-9]|19[0-9]|14[57])[0-9]{8}$/;
if (regMobile.test(value)) {
return cb();
}
cb(new Error("請輸入合法的手機號"));
};
//這裡存放資料
return {
//獲取使用者列表的引數物件
queryInfo: {
query: "", //當前的頁數
pagenum: 1,
pagesize: 2,
},
userList: [],
total: 0,
addDialogVisible: false, //控制新增使用者對話方塊的顯示與隱藏
editDialogVisible: false, //控制修改使用者對話方塊的顯示與隱藏
editForm: {}, //查詢到的使用者資訊
//新增使用者的表單資料
addForm: {
username: "",
password: "",
email: "",
mobile: "",
},
//新增表單的驗證規則物件
addFormRules: {
username: [
{ required: true, message: "請輸入使用者名稱", trigger: "blur" },
{
min: 3,
max: 10,
message: "長度在 3 到 10 個字元",
trigger: "blur",
},
],
password: [
{ required: true, message: "請輸入密碼", trigger: "blur" },
{
min: 6,
max: 15,
message: "長度在 6 到 15 個字元",
trigger: "blur",
},
],
email: [
{ required: true, message: "請輸入郵箱", trigger: "blur" },
{
validator: checkEmail,
trigger: "blur",
},
],
mobile: [
{ required: true, message: "請輸入手機號碼", trigger: "blur" },
{
validator: checkMobile,
trigger: "blur",
},
],
},
//修改表單的驗證規則物件
editFormRules: {
email: [
{ required: true, message: "請輸入郵箱", trigger: "blur" },
{
validator: checkEmail,
trigger: "blur",
},
],
mobile: [
{ required: true, message: "請輸入手機號碼", trigger: "blur" },
{
validator: checkMobile,
trigger: "blur",
},
],
},
//控制分配角色對話方塊的顯示與隱藏
setRoleDialogVisible: false,
//需要被分配角色的使用者資訊
userInfo: {},
//所有角色的資料列表
roleList: [],
//已選中的角色的id
selectRoleId:''
};
},
//監聽屬性 類似於data概念
computed: {},
//監控data中的資料變化
watch: {},
//方法集合
methods: {
getUserList() {
this.$axios
.get("users", {
params: this.queryInfo,
})
.then((res) => {
// console.log(res);
if (res.meta.status !== 200)
return this.$message.error("獲取使用者列表失敗");
this.userList = res.data.users;
// console.log(res.data);
this.total = res.data.total;
});
},
//監聽pagesize改變的事件
handleSizeChange(newSize) {
// console.log(newSize);
this.queryInfo.pagesize = newSize;
this.getUserList();
},
//監聽頁碼值改變的事件
handleCurrentChange(newPage) {
// console.log(newPage);
this.queryInfo.pagenum = newPage;
this.getUserList();
},
//監聽Switch開關狀態的變化
userStateChange(userinfo) {
// console.log(userinfo);
this.$axios
.put(`users/${userinfo.id}/state/${userinfo.mg_state}`)
.then((res) => {
console.log(res);
if (res.meta.status !== 200) {
userinfo.mg_state = !userinfo.mg_state;
return this.$message.error("更新使用者狀態失敗");
}
this.$message.success("更新使用者狀態成功");
});
},
//監聽新增使用者對話方塊的關閉事件
addDialogClosed() {
this.$refs.addFormRef.resetFields();
},
//點選確定，新增新使用者
addUser() {
this.$refs.addFormRef.validate((valid) => {
// console.log(valid);
if (!valid) return;
//可以發起新增使用者的網路請求
this.$axios.post("users", this.addForm).then((res) => {
if (res.meta.status !== 201) {
this.$message.error("新增使用者失敗");
}
this.$message.success("新增使用者成功");
//隱藏新增使用者的對話方塊
this.addDialogVisible = false;
this.getUserList();
});
});
},
//展示編輯使用者的對話方塊
showEditDialog(id) {
// console.log(id);
this.$axios.get(`users/${id}`).then((res) => {
// console.log(res);
if (res.meta.status !== 200) {
return this.$message.error("修改失敗");
}
this.editDialogVisible = true;
this.editForm = res.data;
});
},
//監聽修改使用者對話方塊的關閉事件
editDialogClose() {
this.$refs.editFormRef.resetFields();
},
//修改使用者並提交
editUserInfo() {
this.$refs.editFormRef.validate((valid) => {
if (!valid) return;
//發起修改使用者資訊的資料請求
this.$axios
.put(`users/${this.editForm.id}`, {
email: this.editForm.email,
mobile: this.editForm.mobile,
})
.then((res) => {
if (res.meta.status !== 200) {
return this.$message.error("修改使用者資訊失敗");
}
//關閉對話方塊
this.editDialogVisible = false;
//重新整理資料列表
this.getUserList();
this.$message.success("修改使用者資訊成功");
});
});
},
//根據id刪除使用者
async removeUserById(id) {
//彈框詢問使用者是否刪除資料
console.log(id);
const res = await this.$confirm("永久刪除該檔案使用者?", "刪除使用者", {
confirmButtonText: "確定",
cancelButtonText: "取消",
type: "warning",
}).catch((err) => err);
// .then(() => {
// this.$message({
// type: 'success',
// message: '刪除成功!'
// });
// }).catch(() => {
// this.$message({
// type: 'info',
// message: '已取消刪除'
// });
// });
//如果使用者確認刪除，則返回值為字元竄 confirm
//如果使用者取消刪除,則返回值為字元竄 cancel
// console.log(res);
if (res !== "confirm") {
return this.$message.info("已取消刪除");
}
this.$axios.delete(`users/${id}`).then((res) => {
if (res.meta.status !== 200) {
return this.$message.error("刪除使用者失敗");
}
this.$message.success("刪除成功");
this.getUserList();
});
},
//展示分配角色的對話方塊
setRole(userInfo) {
this.userInfo = userInfo;
//在展示對話方塊之前，獲取所有角色列表
this.$axios.get("roles").then((res) => {
if (res.meta.status !== 200) {
return this.$message.error("獲取角色列表失敗!");
}
this.roleList = res.data;
});
this.setRoleDialogVisible = true;
},
//點選按鈕分配角色
saveRoleInfo(){
if(!this.selectRoleId){
return this.$message.error('請選擇要分配的角色')
}
this.$axios.put(`users/${this.userInfo.id}/role`,{
rid:this.selectRoleId
}).then(res=>{
if(res.meta.status !== 200){
return this.$message.error("更新角色失敗")
}
this.$message.success("更新角色成功")
this.getUserList()
this.setRoleDialogVisible = false
})
},
//監聽分配角色對話方塊的關閉事件
setRoleDialogClosed(){
this.selectRoleId = ''
this.userInfo = {}
}
},
//生命週期 - 建立完成（可以訪問當前this例項）
created() {
this.getUserList();
},
//生命週期 - 掛載完成（可以訪問DOM元素）
mounted() {},
beforeCreate() {}, //生命週期 - 建立之前
beforeMount() {}, //生命週期 - 掛載之前
beforeUpdate() {}, //生命週期 - 更新之前
updated() {}, //生命週期 - 更新之後
beforeDestroy() {}, //生命週期 - 銷燬之前
destroyed() {}, //生命週期 - 銷燬完成
activated() {}, //如果頁面有keep-alive快取功能，這個函式會觸發
};
</script>
<style scoped lang="scss">
</style>
相關文章
- Vue+Node 後臺管理系統Vue
- 使用Vue搭建電商後臺管理系統Vue
- 後臺管理系統vue.js路由Vue.js路由
- LaraCMS 後臺管理系統 - 小程式ACM
- Linux系統管理-工作管理（後臺程式管理）Linux
- VUE3後臺管理系統【路由鑑權】Vue路由
- Vue速成--專案實戰（後臺管理系統）Vue
- Vue + ElementUI 後臺管理系統專案心得（一）VueUI
- Vue + ElementUI 後臺管理系統專案心得（二）VueUI
- Vue 專案應用 —— 後臺管理系統模板Vue
- lucms - vue 與 Laravel 開發的後臺管理系統VueLaravel
- Thinkphp後臺管理系統PHP
- AlphaCms後臺管理系統ACM
- ITKEE後臺管理系統
- LaraCMS 後臺管理系統ACM
- 快速開發後臺管理系統vue-bag-adminVue
- vue-manage-system 後臺管理系統開發總結Vue
- 保姆級別的vue + ElementUI 搭建後臺管理系統教程VueUI
- 基於 Thinkphp 6 + Vue2 的，一鍵生成程式碼的，前後端分離的，後臺管理系統PHPVue後端
- 網站後臺管理系統網站
- vue後臺管理系統學習(6)--路由和許可權Vue路由
- 基於Vue + Antd 搭建自己的部落格後臺管理系統Vue
- 如何使用Vue.js來搭建一個後臺管理系統Vue.js
- Vue+element搭建後臺管理系統-二、安裝外掛Vue
- 簡單的後臺管理系統vue-cli3.0+element-uiVueUI
- vue後臺管理系統許可權控制思考與實踐Vue
- 使用Vue搭建電商後臺管理系統的注意點<首頁>Vue
- 基於Vue和Node.js的電商後臺管理系統VueNode.js
- 基於Hyperf + Vue + Element 構建的後臺管理系統（內建聊天系統）Vue
- Laravel8.x+Vue+AntDesign前後端分離後臺管理系統LaravelVue後端
- vue-admin-template搭建後臺管理系統的學習（一）Vue
- 基於 vue-element-admin 高效開發後臺管理系統Vue
- 最好用的 7 款 Vue admin 後臺管理系統測評Vue
- vue使用iview Form元件驗證（適用於後臺管理系統）VueViewORM元件
- 使用Vue搭建電商後臺管理系統的注意點<登入頁>Vue
- Vue 2.x 實戰之後臺管理系統開發（一）Vue
- Vue 2.x 實戰之後臺管理系統開發（二）Vue
- 基於vue2.0 +vuex+ element-ui後臺管理系統VueUI