Vue電商後臺管理系統項目第5篇-角色列表的增刪改查&&角色受權

時間 2019-11-25

標籤 vue 後臺管理系統項目角色列表增刪受權简体版

原文原文鏈接

角色列表的增刪改查

1.添加角色

先根據API文檔編寫接口；vue

// 添加角色
export const addRolesApi = (data) => {
  return axios({
    method: 'post',
    url: 'roles',
    data
  })
}

在角色組件內引用，而後給 添加角色 按鈕綁定一個點擊事件addRolesClick；node

<!-- 添加角色 -->
<el-button type="success" plain @click="addRolesClick">添加角色</el-button>

找到Element-UI中的Dialog組件，添加到頁面中；ios

<!-- 添加角色 -->
    <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>

參數說明：git

:visible.sync="addRolesDialogFormVisible"　　　　// 是否隱藏組件，接收一個布爾值
:model　　　　// 綁定的數據對象
:rules="rules" // 驗證規則
prop="roleName" 　　// 要校驗的字段
v-model="addRolesForm.roleName"　　　　// 雙向數據綁定

業務邏輯和前面的用戶管理=>用戶列表的增刪改查的業務邏輯都是同樣的，用戶輸入數據後校驗是否合法，合法以後發送請求而後刷新數據。github

角色列表的刪除指定權限(重點)

添加綁定事件axios

刪除有兩種：數組

刪除三級權限：就是刪除當前這一個三級權限
刪除二級或一級權限：刪除二級權限，對應的三級權限也被刪除，一樣的，刪除一級權限對應的二級權限也將被刪除

查閱接口文檔，分析刪除業務的組件內的處理，在組件內部咱們須要獲取到兩個值：roleid(角色id),rightid(權限id)

實現接口方法

在vue組件中綁定事件，發起請求，記得傳遞兩個參數

難點：刪除以後的數據刷新

咱們能夠從新加載整個數據，可是這樣會形成極很差的用戶體驗：由於展開行會合並
咱們指望：能不能只刷新當前行數據，具體的說是能不能只刷新當前展開行數據？

解決：只刷新當前展開行的數據微信

咱們發現，刪除權限以後的返回值中有一個Data屬性，這個data就是實現刪除操做以後這個角色還擁有的權限數據antd
因此：咱們能夠直接將返回值中的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)
    })
}