Vue電商後臺管理系統項目第4篇-權限管理頁面實現

優化以前的分配角色功能

實現下拉列表的選項默認選中ios

爲下拉列表的v-model賦值一個id，這個id會對應着下拉列表的value，若是賦值了Value，那麼就會讓這個value數據所對應的字符串數據顯示axios
咱們得先獲取到這個用戶的ridapi

// 分配角色提交
grantrolesubmit () { if (this.grantForm.rid) { grantUserRole(this.grantForm.id, this.grantForm.rid) .then(res => { if (res.data.meta.status === 200) { this.$message({ type: 'success', message: res.data.meta.msg }) this.grantDialogFormVisible = false } }) } else { this.$message({ type: 'warning', message: '請先選擇一個角色' }) } }

數據搜索功能

搜索業務處理已經完成，和以前獲取數據徹底同樣，由於以前獲取數據的方法中已經添加了搜索關鍵字的參數。微信

在el-input添加@keyup事件的時候，須要添加native，由於@keyup事件是原生dom事件。數據結構

<el-input placeholder="請輸入內容" v-model="userKey" class="input-with-select" style="width:300px;margin-right:15px" @keyup.enter.native="init"
          >
    <el-button slot="append" icon="el-icon-search" @click='init'></el-button>
</el-input>

權限列表

添加權限列表單文件組件app

<template>
    <div class="right">right</div>
</template>
<script> export default { } </script>
<style lang="less" scoped>

</style>

添加路由配置less

{ name: 'Right', path: 'right', component: Right }

修改左側菜單項的指定子項的indexdom

<el-menu-item index="/home/right">
    <template slot="title">
        <i class="el-icon-location"></i>
        <span>權限列表</span>
    </template>
</el-menu-item>

獲取全部權限列表數據優化

@/api/rights.jsthis
添加api方法

// 獲取全部權限列表
export const getAllRightList = (type) => { return axios({ url: `rights/${type}`
 }) }

製做權限列表組件

添加麪包屑
添加表格

表格經常使用屬性

data:代碼表格的數據源
列中的prop是指定這一列要展現數據屬性名稱

<!-- 表格結構 -->
<el-table :data="rightList" border style="width: 100%">
    <el-table-column type="index" width="50"></el-table-column>
    <el-table-column prop="authName" label="權限" width="180"></el-table-column>
    <el-table-column prop="path" label="路徑" width="180"></el-table-column>
    <el-table-column prop="level" label="層級"></el-table-column>
</el-table>

getAllRightList('list') .then(res => { console.log(res) this.rightList = res.data.data })

數據處理：添加過濾器

局部過濾器：只有在當前組件中能夠使用
在當前組件中經過filters建立

filters:{ 名稱：(參數) =>｛ return　＇＇ ｝ }

filters: { levelFormat: level => { if (level === '0') { return '一級' } else if (level === '1') { return '二級' } else if (level === '2') { return '三級' } return '' } }

使用局部過濾器

如今現實狀況，咱們須要在表格中列中使用過濾器
列中有一個prop屬性，可是不能在這個屬性中直接使用過濾器
咱們能夠考慮添加template來實現這個效果

<el-table-column label="層級">
    <template slot-scope="scope">
        <span>{{scope.row.level | levelFormat}}</span>
    </template>
</el-table-column>

角色列表

業務說明

數據展現：添加展開行功能
添加角色
能夠爲角色受權--樹形組件
展開行功能：能夠實現權限的刪除
樹形組件中能夠實現受權權限和刪除權限

一個建議：必定要仔細的去分析數據結構

添加單文件組件

<template>
    <div class="role">role</div>
</template>
<script> export default { } </script>
<style lang="less" scoped>

</style>

配置路由

{ name: 'Role', path: 'roles', component: Role }

修改左側菜單項的index設置

<el-menu-item index="/home/roles">
    <template slot="title">
        <i class="el-icon-location"></i>
        <span>角色列表</span>
    </template>
</el-menu-item>

添加單文件組件的基本靜態結構

麪包屑
按鈕

表格

展開行
經過設置 type="expand" 和 Scoped slot 能夠開啓展開行功能，el-table-column 的模板會被渲染成爲展開行的內容，展開行可訪問的屬性與使用自定義列模板時的 Scoped slot 相同

再實現數據的動態展現

表格數據是顯示角色數據：表格》》角色
展開行數據是展現這個角色的權限數據：展開行》》權限

實現表格數據--角色數據的展開

獲取全部角色數據
設置表格的相關屬性

<el-table :data="roleList" style="width: 100%">
      <!-- type="expand"：說明這列能夠實現展開 -->
      <el-table-column type="expand">
        <!-- 展開的時候，template模板中的結構就是展開行的內容 -->
        <template slot-scope="props">我要本身的內容，之後這塊內容應該根據數據動態生成</template>
      </el-table-column>
      <el-table-column type="index" width="50"></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="操做">
        <!-- 插槽：匿名插槽，具名插槽，數據插槽 -->
        <template v-slot="scope">
          <el-tooltip class="item" effect="dark" content="編輯" placement="top">
            <el-button type="info" icon="el-icon-edit"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="角色受權" placement="top">
            <el-button type="success" icon="el-icon-share"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="刪除" placement="top">
            <el-button type="warning" icon="el-icon-delete"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

展開行數據展現

權限數據在當前角色的children中
咱們須要根據權限數據動態生成展開行結構

有幾個一級權限，生成幾行數據
二級權限是屬於指定一級權限的二級權限，因此我應該在展現完某個一級權限，採用嵌套的結構去展現它的二級權限
三級權限是指定的二級權限的三級權限

<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">{{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">{{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'>{{third.authName}}</el-tag>
                </el-col>
            </el-row>
        </el-col>
    </el-row>
</template>

Vue電商後臺管理系統項目第4篇-權限管理頁面實現

優化以前的分配角色功能

數據搜索功能

權限列表

角色列表

效果展現：

角色列表

權限列表

支付寶　　　　　　　　　　　　微信

Vue電商後臺管理系統項目第4篇-權限管理頁面實現

優化以前的分配角色功能

數據搜索功能

權限列表

角色列表

效果展現：

角色列表

權限列表

支付寶 微信

　　　　支付寶　　　　　　　　　　　　微信