1.修改用戶信息

A.為用戶列表中的修改按鈕綁定點擊事件
B.在頁面中添加修改用戶對話框期吓，并修改對話框的屬性
C.根據(jù)id查詢需要修改的用戶數(shù)據(jù)

//展示編輯用戶的對話框
async showEditDialog(id) {
    //發(fā)送請求根據(jù)id獲取用戶信息
    const { data: res } = await this.$http.get('users/' + id)
    //判斷如果添加失敗樱衷，就做提示
    if (res.meta.status !== 200) return this.$message.error('獲取用戶信息失敗')
    //將獲取到的數(shù)據(jù)保存到數(shù)據(jù)editForm中
    this.editForm = res.data
    //顯示彈出窗
    this.editDialogVisible = true
}

D.在彈出窗中添加修改用戶信息的表單并做響應(yīng)的數(shù)據(jù)綁定以及數(shù)據(jù)驗證

<!-- 對話框主體區(qū)域 -->
<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>

數(shù)據(jù)綁定以及驗證：

//控制修改用戶對話框的顯示與否
editDialogVisible: false,
//修改用戶的表單數(shù)據(jù)
editForm: {
    username: '',
    email: '',
    mobile: ''
},
//修改表單的驗證規(guī)則對象
editFormRules: {
    email: [
        { required: true, message: '請輸入郵箱', trigger: 'blur' },
        {
        validator: checkEmail,
        message: '郵箱格式不正確啦逆，請重新輸入',
        trigger: 'blur'
        }
    ],
    mobile: [
        { required: true, message: '請輸入手機(jī)號碼', trigger: 'blur' },
        {
        validator: checkMobile,
        message: '手機(jī)號碼不正確评疗，請重新輸入',
        trigger: 'blur'
        }
    ]
}

E.監(jiān)聽對話框關(guān)閉事件茁帽，在對話框關(guān)閉之后胆屿，重置表單

<el-dialog title="修改用戶" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">

editDialogClosed(){
    //對話框關(guān)閉之后腋逆，重置表達(dá)
    this.$refs.editFormRef.resetFields()
}

F.在用戶點擊確定按鈕的時候旁壮，驗證數(shù)據(jù)成功之后發(fā)送請求完成修改

editUser() {
    //用戶點擊修改表單中的確定按鈕之后监嗜，驗證表單數(shù)據(jù)
    this.$refs.editFormRef.validate(async valid => {
    if (!valid) return this.$message.error('請?zhí)顚懲暾脩粜畔?)
    //發(fā)送請求完成修改用戶的操作
    const { data: res } = await this.$http.put(
        'users/' + this.editForm.id,
        this.editForm
    )
    //判斷如果修改失敗，就做提示
    if (res.meta.status !== 200) return this.$message.error('修改用戶失敗')
    //修改成功的提示
    this.$message.success('修改用戶成功')
    //關(guān)閉對話框
    this.editDialogVisible = false
    //重新請求最新的數(shù)據(jù)
    this.getUserList()
    })
}

2.刪除用戶

在點擊刪除按鈕的時候抡谐，我們應(yīng)該跳出提示信息框裁奇，讓用戶確認(rèn)要進(jìn)行刪除操作。
如果想要使用確認(rèn)取消提示框麦撵，我們需要先將提示信息框掛載到vue中刽肠。
A.導(dǎo)入MessageBox組件，并將MessageBox組件掛載到實例免胃。
Vue.prototype.$confirm = MessageBox.confirm
B.給用戶列表中的刪除按鈕添加事件音五，并在事件處理函數(shù)中彈出確定取消窗,最后再根據(jù)id發(fā)送刪除用戶的請求

async removeUserById(id){
    //彈出確定取消框，是否刪除用戶
    const confirmResult = await this.$confirm('請問是否要永久刪除該用戶','刪除提示',{
    confirmButtonText:'確認(rèn)刪除',
    cancelButtonText:'取消',
    type:'warning'
    }).catch(err=>err)
    //如果用戶點擊確認(rèn)羔沙，則confirmResult 為'confirm'
    //如果用戶點擊取消, 則confirmResult獲取的就是catch的錯誤消息'cancel'
    if(confirmResult != "confirm"){
        return this.$message.info("已經(jīng)取消刪除")
    }
    //發(fā)送請求根據(jù)id完成刪除操作
    const {data:res} = await this.$http.delete('users/'+id)
    //判斷如果刪除失敗放仗，就做提示
    if (res.meta.status !== 200) return this.$message.error('刪除用戶失敗')
    //修改成功的提示
    this.$message.success('刪除用戶成功')
    //重新請求最新的數(shù)據(jù)
    this.getUserList()
}

3.推送代碼

創(chuàng)建user子分支，并將代碼推送到碼云
A.創(chuàng)建user子分支 git checkout -b user
B.將代碼添加到暫存區(qū) git add .
C.將代碼提交并注釋 git commit -m '添加完成用戶列表功能'
D.將本地的user分支推送到碼云 git push -u origin user
E.將user分支代碼合并到master:
切換到master git checkout master
合并user git merge user
F.將本地master分支的代碼推送到碼云 git push

創(chuàng)建rights子分支
A.創(chuàng)建rights子分支 git checkout -b rights
B.將本地的rights分支推送到碼云 git push -u origin rights

4.權(quán)限列表

A.添加權(quán)限列表路由

創(chuàng)建權(quán)限管理組件（Rights.vue）撬碟，并在router.js添加對應(yīng)的路由規(guī)則

import Rights from './components/power/Rights.vue'
......
      path: '/home', component: Home, redirect: '/welcome', children: [
        { path: "/welcome", component: Welcome },
        { path: "/users", component: Users },
        { path: "/rights", component: Rights }
      ]
......

B.添加面包屑導(dǎo)航

在Rights.vue中添加面包屑組件展示導(dǎo)航路徑

C.顯示數(shù)據(jù)

在data中添加一個rightsList數(shù)據(jù)诞挨，在methods中提供一個getRightsList方法發(fā)送請求獲取權(quán)限列表數(shù)據(jù)，在created中調(diào)用這個方法獲取數(shù)據(jù)

<el-table :data="rightsList" stripe>
    <el-table-column type="index"></el-table-column>
    <el-table-column label="權(quán)限名稱" prop="authName"></el-table-column>
    <el-table-column label="路徑" prop="path"></el-table-column>
    <el-table-column label="權(quán)限等級" prop="level">
        <template slot-scope="scope"> 
            <el-tag v-if="scope.row.level === 0">一級權(quán)限</el-tag>
            <el-tag v-if="scope.row.level === 1" type="success">二級權(quán)限</el-tag>
            <el-tag v-if="scope.row.level === 2" type="warning">三級權(quán)限</el-tag>
        </template>
    </el-table-column>
</el-table>
<script>
export default {
    data(){
        return {
            //列表形式的權(quán)限
            rightsList:[]
        }
    },
    created(){
        this.getRightsList();
    },
    methods:{
        async getRightsList(){
            const {data:res} = await this.$http.get('rights/list')
            //如果返回狀態(tài)為異常狀態(tài)則報錯并返回
            if (res.meta.status !== 200)
                return this.$message.error('獲取權(quán)限列表失敗')
            //如果返回狀態(tài)正常呢蛤，將請求的數(shù)據(jù)保存在data中
            this.rightsList = res.data
        }
    }
}
</script>

5.角色列表

A.添加角色列表路由

添加角色列表子組件（power/Roles.vue）惶傻，并添加對應(yīng)的規(guī)則

path: '/home', component: Home, redirect: '/welcome', children: [
        { path: "/welcome", component: Welcome },
        { path: "/users", component: Users },
        { path: "/rights", component: Rights },
        { path: "/roles", component: Roles  }
      ]

B.添加面包屑導(dǎo)航

在Roles.vue中添加面包屑組件展示導(dǎo)航路徑

C.顯示數(shù)據(jù)

在data中添加一個roleList數(shù)據(jù)，在methods中提供一個getRoleList方法發(fā)送請求獲取權(quán)限列表數(shù)據(jù)其障，在created中調(diào)用這個方法獲取數(shù)據(jù)

<!-- 角色列表區(qū)域 -->
<!-- row-key="id" 是2019年3月提供的新特性银室，
if there's nested data, rowKey is required.
如果這是一個嵌套的數(shù)據(jù)，rowkey 是必須添加的屬性 -->
<el-table row-key="id" :data="roleList" border>
    <!-- 添加展開列 -->
    <el-table-column type="expand"></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="300px">
        <template slot-scope="scope"> 
            <el-button size="mini" type="primary" icon="el-icon-edit">編輯</el-button>
            <el-button size="mini" type="danger" icon="el-icon-delete">刪除</el-button>
            <el-button size="mini" type="warning" icon="el-icon-setting">分配權(quán)限</el-button>
        </template>
    </el-table-column>
</el-table>

<script>
export default {
    data(){
        return {
            roleList:[]
        }
    },created(){
        this.getRoleList();
    },methods:{
        async getRoleList(){
            const {data:res} = await this.$http.get('roles')
            //如果返回狀態(tài)為異常狀態(tài)則報錯并返回
            // if (res.meta.status !== 200)
            //     return this.$message.error('獲取角色列表失敗')
            // //如果返回狀態(tài)正常励翼，將請求的數(shù)據(jù)保存在data中
            // this.roleList = res.data
            console.log(res.data)
            this.roleList = res.data;
        }
    }
}
</script>

D.補(bǔ)充說明

之前學(xué)習(xí)過類似的添加角色蜈敢，刪除角色汽抚，編輯角色請參照之前編寫過的代碼還有接口文檔完成效果抓狭。

E.生成權(quán)限列表

使用三重嵌套for循環(huán)生成權(quán)限下拉列表

<!-- 添加展開列 -->
<el-table-column type="expand">
    <template slot-scope="scope">
        <el-row :class="['bdbottom',i1===0?'bdtop':'']" v-for="(item1,i1) in scope.row.children" :key="item1.id">
            <!-- 渲染一級權(quán)限 -->
            <el-col :span="5">
                <el-tag>
                    {{item1.authName}}
                </el-tag>
                <i class="el-icon-caret-right"></i>
            </el-col>
            <!-- 渲染二，三級權(quán)限 -->
            <el-col :span="19">
                <!-- 通過for循環(huán)嵌套渲染二級權(quán)限  -->
                <el-row :class="[i2===0?'':'bdtop' ]" v-for="(item2,i2) in item1.children" :key="item2.id">
                    <el-col :span="6">
                        <el-tag type="success">{{item2.authName}}</el-tag>
                        <i class="el-icon-caret-right"></i>
                    </el-col>
                    <el-col :span="18">
                        <el-tag type="warning" v-for="(item3) in item2.children" :key="item3.id">
                            {{item3.authName}}
                        </el-tag>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </template>
</el-table-column>

F.美化樣式

通過設(shè)置global.css中的#app樣式min-width:1366px 解決三級權(quán)限換行的問題
造烁，通過給一級權(quán)限el-row添加display:flex,align-items:center的方式解決一級權(quán)限垂直居中的問題否过，二級權(quán)限也類似添加午笛，因為需要給多個內(nèi)容添加，可以將這個樣式設(shè)置為一個.vcenter{display:flex;align-items:center}

G.添加權(quán)限刪除功能

給每一個權(quán)限的el-tag添加closable屬性苗桂，是的權(quán)限右側(cè)出現(xiàn)“X”圖標(biāo)
再給el-tag添加綁定close事件處理函數(shù)removeRightById(scope.row,item1.id)
removeRightById(scope.row,item2.id)
removeRightById(scope.row,item3.id)

async removeRightById(role,rightId){
    //彈窗提示用戶是否要刪除
    const confirmResult = await this.$confirm('請問是否要刪除該權(quán)限','刪除提示',{
        confirmButtonText:'確認(rèn)刪除',
        cancelButtonText:'取消',
        type:'warning'
    }).catch(err=>err)
    //如果用戶點擊確認(rèn)药磺，則confirmResult 為'confirm'
    //如果用戶點擊取消, 則confirmResult獲取的就是catch的錯誤消息'cancel'
    if(confirmResult != "confirm"){
        return this.$message.info("已經(jīng)取消刪除")
    }

    //用戶點擊了確定表示真的要刪除
    //當(dāng)發(fā)送delete請求之后，返回的數(shù)據(jù)就是最新的角色權(quán)限信息
    const {data:res} = await this.$http.delete(`roles/${role.id}/rights/${rightId}`)
    if (res.meta.status !== 200)
        return this.$message.error('刪除角色權(quán)限失敗')

    //無需再重新加載所有權(quán)限
    //只需要對現(xiàn)有的角色權(quán)限進(jìn)行更新即可
    role.children = res.data
    // this.getRoleList();

}

H.完成權(quán)限分配功能

先給分配權(quán)限按鈕添加事件
<el-button size="mini" type="warning" icon="el-icon-setting" @click="showSetRightDialog">分配權(quán)限</el-button>
在showSetRightDialog函數(shù)中請求權(quán)限樹數(shù)據(jù)并顯示對話框

async showSetRightDialog() {
    //當(dāng)點擊分配權(quán)限按鈕時煤伟，展示對應(yīng)的對話框
    this.setRightDialogVisible = true;
    //獲取所有權(quán)限的數(shù)據(jù)
    const {data:res} = await this.$http.get('rights/tree')
    //如果返回狀態(tài)為異常狀態(tài)則報錯并返回
    if (res.meta.status !== 200)
        return this.$message.error('獲取權(quán)限樹失敗')
    //如果返回狀態(tài)正常癌佩，將請求的數(shù)據(jù)保存在data中
    this.rightsList = res.data
}

添加分配權(quán)限對話框，并添加綁定數(shù)據(jù)setRightDialogVisible

<el-dialog title="分配權(quán)限" :visible.sync="setRightDialogVisible" width="50%">
<span>這是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="setRightDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="setRightDialogVisible = false">確 定</el-button>
</span>
</el-dialog>

I.完成樹形結(jié)構(gòu)彈窗

在element.js中引入Tree便锨，注冊Tree

<!-- 分配權(quán)限對話框 -->
<el-dialog title="分配權(quán)限" :visible.sync="setRightDialogVisible" width="50%" @close="setRightDialogClose">
    <!-- 樹形組件
    show-checkbox:顯示復(fù)選框
    node-key:設(shè)置選中節(jié)點對應(yīng)的值
    default-expand-all:是否默認(rèn)展開所有節(jié)點
    :default-checked-keys 設(shè)置默認(rèn)選中項的數(shù)組
    ref:設(shè)置引用 -->
    <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>

<script>
export default {
  data() {
    return {
      //角色列表數(shù)據(jù)
      roleList: [],
      //控制分配權(quán)限對話框的顯示
      setRightDialogVisible: false,
      //權(quán)限樹數(shù)據(jù)
      rightsList: [],
      //樹形控件的屬性綁定對象
      treeProps: {
        //通過label設(shè)置樹形節(jié)點文本展示authName
        label: 'authName',
        //設(shè)置通過children屬性展示子節(jié)點信息
        children: 'children'
      },
      //設(shè)置樹形控件中默認(rèn)選中的內(nèi)容
      defKeys: [],
      //保存正在操作的角色id
      roleId:''
    }
  },
  created() {
    this.getRoleList()
  },
  methods: {
    async getRoleList() {
      const { data: res } = await this.$http.get('roles')
      //如果返回狀態(tài)為異常狀態(tài)則報錯并返回
      if (res.meta.status !== 200)
        return this.$message.error('獲取角色列表失敗')
      //如果返回狀態(tài)正常驼卖，將請求的數(shù)據(jù)保存在data中
      // this.roleList = res.data
      console.log(res.data)
      this.roleList = res.data
    },
    async removeRightById(role, rightId) {
      //彈窗提示用戶是否要刪除
      const confirmResult = await this.$confirm(
        '請問是否要刪除該權(quán)限',
        '刪除提示',
        {
          confirmButtonText: '確認(rèn)刪除',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      //如果用戶點擊確認(rèn)，則confirmResult 為'confirm'
      //如果用戶點擊取消, 則confirmResult獲取的就是catch的錯誤消息'cancel'
      if (confirmResult != 'confirm') {
        return this.$message.info('已經(jīng)取消刪除')
      }

      //用戶點擊了確定表示真的要刪除
      //當(dāng)發(fā)送delete請求之后鸿秆，返回的數(shù)據(jù)就是最新的角色權(quán)限信息
      const { data: res } = await this.$http.delete(
        `roles/${role.id}/rights/${rightId}`
      )
      if (res.meta.status !== 200)
        return this.$message.error('刪除角色權(quán)限失敗')

      //無需再重新加載所有權(quán)限
      //只需要對現(xiàn)有的角色權(quán)限進(jìn)行更新即可
      role.children = res.data
      // this.getRoleList();
    },
    async showSetRightDialog(role) {
      //將role.id保存起來以供保存權(quán)限時使用
      this.roleId = role.id;  
      //獲取所有權(quán)限的數(shù)據(jù)
      const { data: res } = await this.$http.get('rights/tree')
      //如果返回狀態(tài)為異常狀態(tài)則報錯并返回
      if (res.meta.status !== 200) return this.$message.error('獲取權(quán)限樹失敗')
      //如果返回狀態(tài)正常酌畜，將請求的數(shù)據(jù)保存在data中
      this.rightsList = res.data

      //調(diào)用getLeafKeys進(jìn)行遞歸，將三級權(quán)限添加到數(shù)組中
      this.getLeafKeys(role, this.defKeys)
      //當(dāng)點擊分配權(quán)限按鈕時卿叽，展示對應(yīng)的對話框
      this.setRightDialogVisible = true
      console.log(this.defKeys)
    },
    getLeafKeys(node, arr) {
      //該函數(shù)會獲取到當(dāng)前角色的所有三級權(quán)限id并添加到defKeys中
      //如果當(dāng)前節(jié)點不包含children屬性桥胞，則表示node為三級權(quán)限
      if (!node.children) {
        return arr.push(node.id)
      }
      //遞歸調(diào)用
      node.children.forEach(item => this.getLeafKeys(item, arr))
    },
    setRightDialogClose() {
      //當(dāng)用戶關(guān)閉樹形權(quán)限對話框的時候，清除掉所有選中狀態(tài)
      this.defKeys = []
    },
    async allotRights() {
      //當(dāng)用戶在樹形權(quán)限對話框中點擊確定考婴，將用戶選擇的
      //權(quán)限發(fā)送請求進(jìn)行更新

      //獲取所有選中及半選的內(nèi)容
      const keys = [
        ...this.$refs.treeRef.getCheckedKeys(),
        ...this.$refs.treeRef.getHalfCheckedKeys()
      ]
      //將數(shù)組轉(zhuǎn)換為 , 拼接的字符串
      const idStr = keys.join(',')

      //發(fā)送請求完成更新
      const { data: res } = await this.$http.post(
        `roles/${this.roleId}/rights`,
        { rids:idStr }
      )
      if (res.meta.status !== 200)
        return this.$message.error('分配權(quán)限失敗')

      this.$message.success("分配權(quán)限成功")
      this.getRoleList();
      //關(guān)閉對話框
      this.setRightDialogVisible = false;
    }
  }
}
</script>

6.分配角色

打開Users.vue贩虾，完成分配角色的功能
A.添加分配角色對話框

<!-- 分配角色對話框 -->
<el-dialog title="分配角色" :visible.sync="setRoleDialogVisible" width="50%">
    <div>
    <p>當(dāng)前的用戶:{{userInfo.username}}</p>
    <p>當(dāng)前的角色:{{userInfo.role_name}}</p>
    <p>分配新角色:</p>
    </div>
    <span slot="footer" class="dialog-footer">
    <el-button @click="setRoleDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="setRoleDialogVisible = false">確 定</el-button>
    </span>
</el-dialog>

B.給分配角色按鈕添加點擊事件，點擊之后彈出一個對話框進(jìn)行角色分配

<!-- 分配角色 -->
<el-tooltip class="item" 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>

data(){
    ......
    //控制顯示分配角色對話框
    setRoleDialogVisible:false,
    //保存正在操作的那個用戶信息
    userInfo:{},
    //保存所有的角色信息
    rolesList:[],
    //保存用戶選中的角色id
    selectedRoleId:''
},
methods:{
    ......
    async setRole( userInfo ){
      //保存起來以供后續(xù)使用
      this.userInfo = userInfo;
      //獲取所有的角色信息沥阱，以備下拉列表使用
      //發(fā)送請求根據(jù)id完成刪除操作
      const { data: res } = await this.$http.get('roles')
      //判斷如果刪除失敗缎罢，就做提示
      if (res.meta.status !== 200) return this.$message.error('獲取角色列表失敗')
      
      this.rolesList = res.data;
      //展示分配角色對話框
      this.setRoleDialogVisible = true;

      
    }
}

C.在element.js中引入Select，Option考杉，注冊Select策精，Option

<!-- 角色選擇下拉框
v-model：設(shè)置用戶選中角色之后的id綁定數(shù)據(jù)
-->
<el-select v-model="selectedRoleId" placeholder="請選擇角色">
<!-- :label 顯示文本，:value 選中值 -->
<el-option v-for="item in rolesList" :key="item.id" :label="item.roleName" :value="item.id">
</el-option>
</el-select>

D.當(dāng)用戶點擊對話框中的確定之后崇棠，完成分配角色的操作

<!-- 分配角色對話框 -->
<el-dialog title="分配角色" :visible.sync="setRoleDialogVisible" width="50%" @close="setRoleDialogClosed">
    <div>
    <p>當(dāng)前的用戶:{{userInfo.username}}</p>
    <p>當(dāng)前的角色:{{userInfo.role_name}}</p>
    <p>分配新角色:
        <!-- 角色選擇下拉框
        v-model：設(shè)置用戶選中角色之后的id綁定數(shù)據(jù)
        -->
        <el-select v-model="selectedRoleId" placeholder="請選擇角色">
        <!-- :label 顯示文本咽袜，:value 選中值 -->
        <el-option v-for="item in rolesList" :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>


methods:{
    .......
    async saveRoleInfo(){
      //當(dāng)用戶點擊確定按鈕之后
      //判斷用戶是否選擇了需要分配的角色
      if(!this.selectedRoleId){
        return this.$message.error('請選擇需要分配的角色')
      }
      //發(fā)送請求完成分配角色的操作
      const {data:res} = await this.$http.put(`users/${this.userInfo.id}/role`,{rid:this.selectedRoleId})

      //判斷如果刪除失敗，就做提示
      if (res.meta.status !== 200)
        return this.$message.error('分配角色失敗')

      this.$message.success('分配角色成功')
      this.getUserList();
      //關(guān)閉對話框
      this.setRoleDialogVisible = false
    },
    setRoleDialogClosed(){
      //當(dāng)關(guān)閉對話框的時候枕稀，重置下拉框中的內(nèi)容
      this.selectedRoleId = ''
      this.userInfo = {}
    }
}