角色列表的增刪改查
1.添加角色
先根據API文檔編寫接口；
// 添加角色 export const addRolesApi = (data) => { return axios({ method: 'post', url: 'roles', data }) }
在角色組件內引用，然后給 添加角色 按鈕綁定一個點擊事件addRolesClick；
<!-- 添加角色 --> <el-button type="success" plain @click="addRolesClick">添加角色</el-button>
找到Element-UI中的Dialog組件，添加到頁面中；
<!-- 添加角色 -->
<el-dialog title="添加角色" :visible.sync="addRolesDialogFormVisible">
<el-form :model="addRolesForm" label-width="120px" ref="addRolesForm" :rules="rules">
<el-form-item label="角色名稱" prop="roleName">
<el-input v-model="addRolesForm.roleName" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="角色描述" prop="roleDesc">
<el-input v-model="addRolesForm.roleDesc" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="addRolesDialogFormVisible = false;$refs.addRolesForm.resetFields()">取 消</el-button>
<el-button type="primary" @click="addRolesConfirm">確 定</el-button>
</div>
</el-dialog>
參數說明：
- :visible.sync="addRolesDialogFormVisible" // 是否隱藏組件，接收一個布爾值
- :model // 綁定的數據對象
- :rules="rules" // 驗證規則
- prop="roleName" // 要校驗的字段
- v-model="addRolesForm.roleName" // 雙向數據綁定
業務邏輯和前面的用戶管理=>用戶列表的增刪改查的業務邏輯都是一樣的，用戶輸入數據后校驗是否合法，合法之后發送請求然后刷新數據。
角色列表的刪除指定權限(重點)
添加綁定事件
刪除有兩種：
- 刪除三級權限：就是刪除當前這一個三級權限
- 刪除二級或一級權限：刪除二級權限，對應的三級權限也被刪除，同樣的，刪除一級權限對應的二級權限也將被刪除
查閱接口文檔，分析刪除業務的組件內的處理，在組件內部我們需要獲取到兩個值：roleid(角色id),rightid(權限id)
實現接口方法
在vue組件中綁定事件，發起請求，記得傳遞兩個參數
難點：刪除之后的數據刷新
- 我們可以重新加載整個數據，但是這樣會造成極不好的用戶體驗：因為展開行會合並
- 我們期望：能不能只刷新當前行數據，具體的說是能不能只刷新當前展開行數據？
解決：只刷新當前展開行的數據
-
-
所以：我們可以直接將返回值中的Data覆蓋這個展開行的數據源(scope.row.children)
-
scope.row.children = res.data.data
@close='deleteright(scope.row,third.id)' ---------------------------------------- // 刪除指定權限 deleteright (row, rightid) { deleteRightById(row.id, rightid) .then(res => { console.log('--------------') console.log(res) console.log('--------------') if (res.data.meta.status === 200) { this.$message({ type: 'success', message: res.data.meta.msg }) // 數據的刷新 row.children = res.data.data } }) }
最終的模板代碼：
<el-table-column type="expand">
<!-- 展開的時候，template模板中的結構就是展開行的內容 -->
<template slot-scope="scope">
<!-- 遍歷數據行對象的children -->
<el-row v-for="first in scope.row.children" :key="first.id" style='margin-bottom:10px;border-bottom:1px dashed #ccc'>
<el-col :span="4">
<el-tag closable type="success" @close='deleteright(scope.row,first.id)' v-if='first.children.length !== 0'>{{first.authName}}</el-tag>
</el-col>
<el-col :span="20">
<el-row v-for='second in first.children' :key='second.id' style='margin-bottom:10px;' >
<el-col :span='4'>
<el-tag closable type="info" @close='deleteright(scope.row,second.id)' v-if='second.children.length !== 0'>{{second.authName}}</el-tag>
</el-col>
<el-col :span='20'>
<el-tag closable type="danger" v-for='third in second.children' :key='third.id' style='margin:0 4px 4px 0' @close='deleteright(scope.row,third.id)'>{{third.authName}}</el-tag>
</el-col>
</el-row>
</el-col>
</el-row>
<el-row>
<el-col :span="24" v-if='scope.row.children.length === 0'>沒有任何的權限數據，請先添加</el-col>
</el-row>
</template>
</el-table-column>
角色權限分配
分配權限彈出框的添加
-
找到組件，添加結構
-
分析樹形組件的屬性
-
動態加載所有權限數據
-
實現樹形組件 節點的默認選中：獲取當前角色所擁有的權限id
-
實現權限的設置：獲取到當前用戶所選擇的所有權限所對應的id,並且拼接為,分隔的字符串格式
-
分配權限彈出框的添加
-
樹形組件的添加：默認展開+帶復選框+默認選中
<el-tree :data="data2" // 數據源 show-checkbox // 顯示復選框 node-key="id" //每個樹節點用來作為唯一標識的屬性，整棵樹應該是唯一的,后期這個值就應該綁定為當前權限對象數據中的權限id :default-expanded-keys="[2, 3]" // 默認展開的節點 :default-expand-all='true' // 默認展開所有節點 :default-checked-keys="[5]" // 默認勾選的節點的 key 的數組 :props="defaultProps" // 當前節點的配置，如你想展示什么數據，背后的value。。，子級數據 ></el-tree>
樹形組件的常用屬性
<el-tree :data="rightList" // 數據源 show-checkbox // 顯示復選框 node-key="id" //每個樹節點用來作為唯一標識的屬性，整棵樹應該是唯一的,后期這個值就應該綁定為當前權限對象數據中的權限id :default-expand-all='true' // 默認展開所有節點 :default-checked-keys="rightListByRole" // 默認勾選的節點的 key 的數組 :props="defaultProps" // 當前節點的配置，如你想展示什么數據，背后的value。。，子級數據 ></el-tree> --------- defaultProps:{ label:authName, chilren:children }
數據和樹形組件對應，顯示權限動態數據
// 打開授權對話框 showGrantDialog () { this.grantdialogFormVisible = true // 獲取所有權限數據 getAllRightList('tree') .then(res => { console.log(res) this.rightList = res.data.data }) }
讓樹形組件有默認節點選擇
-
-
我們只需要獲取最下面一層的節點所對應的權限id
-
一級權限下不一定有二級權限，同樣的，二級權限下不一定有三級權限--判斷
-
我們得遍歷當前角色所擁有的權限，獲取到所有的權限id（最后一級）
// 獲取當前角色所擁有的所有權限id // 先將上一個角色的權限id數組清空 this.checkedArr.length = 0 row.children.forEach((first) => { if (first.children.length > 0) { // 遍歷二級權限 first.children.forEach(second => { if (second.children.length > 0) { // 遍歷三級權限 second.children.forEach(third => { this.checkedArr.push(third.id) }) } }) } })
實現角色授權的提交
-
-
我們如何獲取接口所需要的參數？
-
我們觀察數據表的結構，我們發現，在存儲三級權限的時候，它還同時存儲着二級權限和一級權限
-
所以我們有一個現實的需求：我們在獲取權限id的時候，應該獲取一個完整的擁有層次結構的id：(一級權限,二級權限,三級權限)
獲取權限id： 為tree添加一個ref屬性
- this.$refs.tree.getCheckedKeys():獲取當前被選中的復選框所對應的key（node-key="id"）
- 這個場合不要使用getCheckedKeys，因為當不是所有三級權限都被選中的情況下，它不能獲取到二級權限和一級權限所對應的id
- this.$refs.tree.getCheckedNodes():可以獲取到當前節點對象，這個對象中包含當前節點所對應的權限數據對象，這個對象中有完整的父級權限id
添加接口方法
// 角色授權 export const grantRightByRoleId = (roleid, rids) => { return axios({ method: 'post', url: `roles/${roleid}/rights`, data: { rids: rids } }) }
實現授權提交
// 實現角色授權提交 grantSubmit () { // var arr = this.$refs.tree.getCheckedKeys() var arr = this.$refs.tree.getCheckedNodes() // [authName: "添加訂單",id: 109,path: (...),pid: "107,102"] console.log(arr) // 我們需要的是每個權限所對應的id，同時包含它們的父級id // 1.遍歷Arr,獲取里面的兩個值：id pid ,遍歷：我需要遍歷拼接后的結果["109,107,102",'154,107,102'] // 它可以將回調函數的操作結果存儲到map函數內部所創建的數組中，當遍歷完之后再將其返回 var temp = arr.map(value => { return value.id + ',' + value.pid }) // ["109,107,102", "154,107,102"] console.log(temp) // 去除重復值--數組才能去重 // 將數組拼接為字符串 “109,107,102,154,107,102" var str = temp.join(',') console.log(str) console.log(str.split(',')) // 數組去重.new Set可以創建一個set對象，同時去除重復值 var obj = new Set(str.split(',')) console.log(obj) // 最終需要一個去除了重復值的數組,...可以將對象中的數據一個一個展開 var final = [...obj] console.log(final.join(',')) // 調用接口方法實現角色授權 grantRightByRoleId(this.roleId, final.join(',')) .then(res => { console.log(res) }) }
具體效果和業務邏輯代碼還是直接從github上把項目拉下來細細研究吧：https://github.com/C4az6/vue_manage_system.git
如果您喜歡這篇文章，可以打賞點錢給我 ：）
支付寶 微信
