Vue + Element UI 實現權限管理系統前端篇（十二）：用戶管理模塊

時間 2019-12-07

標籤 vue element 實現權限管理系統前端十二用戶模塊简体版

原文原文鏈接

用戶管理模塊

添加接口

在 http/moduls/user.js 中添加用戶管理相關接口。前端

import axios from '../axios'

/* 
 * 用戶管理模塊
 */

// 保存
export const save = (params) => {
    return axios({
        url: '/user/save',
        method: 'post',
        params
    })
}// 刪除
export const del = (params) => {
    return axios({
        url: '/user/delete',
        method: 'post',
        params
    })
}
// 分頁查詢
export const findPage = (params) => {
    return axios({
        url: '/user/findPage',
        method: 'post',
        params
    })
}

模擬數據

在 mock/moduls/user.js 中添加用戶管理相關mock接口。vue

/* 
 * 用戶管理模塊
 */

// 保存
export function save() {
  return {
    url: 'http://localhost:8080/user/save',
    type: 'post',
    data: {
      "code": 200,
      "msg": null,
      "data": 1
    }
  }
}// 刪除
export function del() {
  return {
    url: 'http://localhost:8080/user/delete',
    type: 'post',
    data: {
      "code": 200,
      "msg": null,
      "data": 1
    }
  }
}
// 分頁查詢
export function findPage() {
  return {
    url: 'http://localhost:8080/user/findPage',
    type: 'post',
    data: findPageData
  }
}

提取根路徑

爲了能夠統一控制mock的開啓與關閉，把mock的根路徑提取出來。node

而具體的Mock接口，把根路徑移除，由於在生成Mock的時候會自動把根路徑加上去。ios

用戶界面

用戶管理界面主要是用戶信息的表格展現，並提供基礎的增刪改查功能。git

User.vue數據庫

<template>
  <div class="container" style="width:100%;">
    <!--工具欄-->
    <div class="toolbar" style="float:left; padding:18px;">
        <el-form :inline="true" :model="filters" size="small">
            <el-form-item>
                <el-input v-model="filters.name" placeholder="用戶名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" v-on:click="findPage(null)">查詢</el-button>
            </el-form-item>
            <el-form-item>
                <kt-button label="新增" perms="sys:user:add" type="primary" @click="handleAdd" />
            </el-form-item>
        </el-form>
    </div>
    <!--表格內容欄-->
    <kt-table permsEdit="sys:user:edit" permsDelete="sys:user:delete"
        :data="pageResult" :columns="columns" 
        @findPage="findPage" @handleEdit="handleEdit" @handleDelete="handleDelete">
    </kt-table>
    <!--新增編輯界面-->
    <el-dialog :title="operation?'新增':'編輯'" width="40%" :visible.sync="editDialogVisible" :close-on-click-modal="false">
        <el-form :model="dataForm" label-width="80px" :rules="dataFormRules" ref="dataForm">
            <el-form-item label="ID" prop="id">
                <el-input v-model="dataForm.id" :disabled="true" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="用戶名" prop="name">
                <el-input v-model="dataForm.name" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="密碼" prop="password">
                <el-input v-model="dataForm.password" type="password" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="機構" prop="deptName">
                <popup-tree-input 
                    :data="deptData" 
                    :props="deptTreeProps" 
                    :prop="dataForm.deptName" 
                    :nodeKey="''+dataForm.deptId" 
                    :currentChangeHandle="deptTreeCurrentChangeHandle">
                </popup-tree-input>
            </el-form-item>
            <el-form-item label="郵箱" prop="email">
                <el-input v-model="dataForm.email" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="手機" prop="mobile">
                <el-input v-model="dataForm.mobile" auto-complete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click.native="editDialogVisible = false">取消</el-button>
            <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import PopupTreeInput from "@/components/PopupTreeInput"
import KtTable from "@/views/Core/KtTable"
import KtButton from "@/views/Core/KtButton"
export default {
    components:{
            PopupTreeInput,
            KtTable,
            KtButton
    },
    data() {
        return {
            filters: {
                name: ''
            },
            columns: [
                {prop:"id", label:"ID", minWidth:40, sortable:"false"},
                {prop:"name", label:"用戶名", minWidth:120, sortable:"true"},
                {prop:"deptName", label:"機構", minWidth:120, sortable:"true"},
                {prop:"email", label:"郵箱", minWidth:120, sortable:"true"},
                {prop:"mobile", label:"手機", minWidth:120, sortable:"true"}
            ],
            pageRequest: { pageNum: 1, pageSize: 8 },
            pageResult: {},

            operation: false, // true:新增, false:編輯
            editDialogVisible: false, // 新增編輯界面是否顯示
            editLoading: false,
            dataFormRules: {
                name: [
                    { required: true, message: '請輸入用戶名', trigger: 'blur' }
                ]
            },
            // 新增編輯界面數據
            dataForm: {
                id: 0,
                name: '',
                password: '123456',
                deptId: 1,
                deptName: '',
                email: 'test@qq.com',
                mobile: '13889700023',
                status: 1
            },
            deptData: [],
            deptTreeProps: {
                label: 'name',
                children: 'children'
            }
        }
    },
    methods: {
        // 獲取分頁數據
        findPage: function (data) {
            if(data !== null) {
                this.pageRequest = data.pageRequest
            }
            this.pageRequest.columnFilters = {name: {name:'name', value:this.filters.name}}
            this.$api.user.findPage(this.pageRequest).then((res) => {
                this.pageResult = res.data
            })
        },
        // 批量刪除
        handleDelete: function (data) {
            this.$api.user.batchDelete(data.params).then(data.callback)
        },
        // 顯示新增界面
        handleAdd: function () {
            this.editDialogVisible = true
            this.operation = true
            this.dataForm = {
                id: 0,
                name: '',
                password: '',
                deptId: 1,
                deptName: '',
                email: 'test@qq.com',
                mobile: '13889700023',
                status: 1
            }
        },
        // 顯示編輯界面
        handleEdit: function (params) {
            this.editDialogVisible = true
            this.operation = false
            this.dataForm = Object.assign({}, params.row)
        },
        // 編輯
        editSubmit: function () {
            this.$refs.dataForm.validate((valid) => {
                if (valid) {
                    this.$confirm('確認提交嗎？', '提示', {}).then(() => {
                        this.editLoading = true
                        let params = Object.assign({}, this.dataForm)
                        this.$api.user.save(params).then((res) => {
                            this.editLoading = false
                            this.$message({ message: '提交成功', type: 'success' })
                            this.$refs['dataForm'].resetFields()
                            this.editDialogVisible = false
                            this.findPage(null)
                        })
                    })
                }
            })
        },
        // 獲取部門列表
        findDeptTree: function () {
            this.$api.dept.findDeptTree().then((res) => {
                this.deptData = res.data
            })
        },
        // 菜單樹選中
          deptTreeCurrentChangeHandle (data, node) {
            this.dataForm.deptId = data.id
            this.dataForm.deptName = data.name
          }
    },
    mounted() {
        this.findDeptTree()
    }
}
</script>

<style scoped>

</style>

表格組件封裝

爲了能夠實現表格的代碼複用，封裝表格組件。axios

src/views/Core/KtTable.vue後端

<template>
  <div>
    <!--表格欄-->
    <el-table :data="data.content" stripe highlight-current-row @selection-change="selectionChange" 
      :v-loading="loading" :max-height="maxHeight" :size="size" :align="align" style="width:100%;" >
      <el-table-column type="selection" width="40"></el-table-column>
      <el-table-column v-for="column in columns" 
        :prop="column.prop" :label="column.label" :width="column.width" :min-width="column.minWidth" 
        :sortable="column.sortable" :fixed="column.fixed" :key="column.prop" :type="column.type">
      </el-table-column>
      <el-table-column label="操做" width="150" fixed="right">
        <template slot-scope="scope">
          <kt-button label="編輯" :perms="permsEdit" :size="size" @click="handleEdit(scope.$index, scope.row)" />
          <kt-button label="刪除" :perms="permsDelete" :size="size" type="danger" @click="handleDelete(scope.$index, scope.row)" />
        </template>
      </el-table-column>
    </el-table>
    <!--分頁欄-->
    <div class="toolbar" style="padding:10px;">
      <kt-button label="批量刪除" :perms="permsDelete" :size="size" type="danger" @click="handleBatchDelete()" 
        :disabled="this.selections.length===0" style="float:left;"/>
      <el-pagination layout="total, prev, pager, next, jumper" @current-change="refreshPageRequest" 
        :current-page="pageRequest.pageNum" :page-size="pageRequest.pageSize" :total="data.totalSize" style="float:right;">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import KtButton from "@/views/Core/KtButton"
export default {
  name: 'KtTable',
  components:{
            KtButton
    },
  props: {
    columns: Array, // 表格列配置
    data: Object, // 表格分頁數據
    permsEdit: String,  // 編輯權限標識
    permsDelete: String,  // 刪除權限標識
    size: { // 尺寸樣式
      type: String,
      default: 'mini'
    },
    align: {  // 文本對齊方式
      type: String,
      default: 'left'
    },
    maxHeight: {  // 表格最大高度
      type: Number,
      default: 420
    }
  },
  data() {
    return {
      // 分頁信息
            pageRequest: {
                pageNum: 1,
        pageSize: 8
      },
      loading: false,  // 加載標識
      selections: []  // 列表選中列
    }
  },
  methods: {
    // 分頁查詢
    findPage: function () {
      this.$emit('findPage', {pageRequest:this.pageRequest})
    },
    // 選擇切換
    selectionChange: function (selections) {
            this.selections = selections
    },
    // 換頁刷新
        refreshPageRequest: function (pageNum) {
      this.pageRequest.pageNum = pageNum
      this.findPage()
    },
    // 編輯
        handleEdit: function (index, row) {
      this.$emit('handleEdit', {index:index, row:row})
        },
    // 刪除
        handleDelete: function (index, row) {
            this.delete(row.id)
        },
        // 批量刪除
        handleBatchDelete: function () {
            let ids = this.selections.map(item => item.id).toString()
            this.delete(ids)
        },
        // 刪除操做
        delete: function (ids) {
            this.$confirm('確認刪除選中記錄嗎？', '提示', {
                type: 'warning'
            }).then(() => {
                let params = []
                let idArray = (ids+'').split(',')
                for(var i=0; i<idArray.length; i++) {
                    params.push({'id':idArray[i]})
        }
        let callback = res => {
          this.$message({message: '刪除成功', type: 'success'})
          this.findPage()
        }
        this.$emit('handleDelete', {params:params, callback:callback})
            }).catch(() => {
            })
        }
  },
  mounted() {
    this.refreshPageRequest(1)
  }
}
</script>

<style scoped>

</style>

權限按鈕封裝

爲了能夠實現對錶格數據進行新增、編輯、刪除操做按鈕的權限控制，封裝權限按鈕組件。api

src/views/Core/KtButton.vue工具

<template>
  <el-button :size="size" :type="type" 
    :loading="loading" :disabled="!hasPerms(perms)" @click="handleClick">
    {{label}}
  </el-button>
</template>

<script>
import { hasPermission } from '@/permission/index.js'
export default {
  name: 'KtButton',
  props: {
    label: {
      type: String,
      default: 'Button'
    },
    size: {
      type: String,
      default: 'mini'
    },
    type: {
      type: String,
      default: null
    },
    loading: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    perms: {
      type: String,
      default: null
    }
  },
  data() {
    return {
    }
  },
  methods: {
    handleClick: function () {
       this.$emit('click', {})
    }, 
    hasPerms: function (perms) {
       return hasPermission(perms) & !this.disabled
    }
  },
  mounted() {
  }
}
</script>

<style scoped>

</style>