用戶管理模塊
添加接口
在 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接口。
/* * 用戶管理模塊 */ // 保存 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的根路徑提取出來。
而具體的Mock接口，把根路徑移除，因為在生成Mock的時候會自動把根路徑加上去。
用戶界面
用戶管理界面主要是用戶信息的表格展示，並提供基礎的增刪改查功能。
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>
表格組件封裝
為了可以實現表格的代碼復用，封裝表格組件。
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>
權限按鈕封裝
為了可以實現對表格數據進行新增、編輯、刪除操作按鈕的權限控制，封裝權限按鈕組件。
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>
測試效果
測試效果如下，增刪改功能，mock不能實際操作數據庫，可以結合本教程的后端代碼一起測試。
源碼下載
后端：https://gitee.com/liuge1988/kitty
前端：https://gitee.com/liuge1988/kitty-ui.git
作者：朝雨憶輕塵
出處：https://www.cnblogs.com/xifengxiaoma/
版權所有，歡迎轉載，轉載請注明原文作者及出處。