国内外网站建设比较,抖音广告代运营,网站建设制度制定,wordpress表格编辑Vue Element UI 实现权限管理系统 前端篇#xff08;十二#xff09;#xff1a;用户管理模块
用户管理模块
添加接口
在 http/moduls/user.js 中添加用户管理相关接口。 import axios from ../axios/* * 用户管理模块*/// 保存
export const save (params) {ret…Vue Element UI 实现权限管理系统 前端篇十二用户管理模块
用户管理模块
添加接口
在 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 templatediv classcontainer stylewidth:100%;!--工具栏--div classtoolbar stylefloat:left; padding:18px;el-form :inlinetrue :modelfilters sizesmallel-form-itemel-input v-modelfilters.name placeholder用户名/el-input/el-form-itemel-form-itemel-button typeprimary v-on:clickfindPage(null)查询/el-button/el-form-itemel-form-itemkt-button label新增 permssys:user:add typeprimary clickhandleAdd //el-form-item/el-form/div!--表格内容栏--kt-table permsEditsys:user:edit permsDeletesys:user:delete:datapageResult :columnscolumns findPagefindPage handleEdithandleEdit handleDeletehandleDelete/kt-table!--新增编辑界面--el-dialog :titleoperation?新增:编辑 width40% :visible.synceditDialogVisible :close-on-click-modalfalseel-form :modeldataForm label-width80px :rulesdataFormRules refdataFormel-form-item labelID propidel-input v-modeldataForm.id :disabledtrue auto-completeoff/el-input/el-form-itemel-form-item label用户名 propnameel-input v-modeldataForm.name auto-completeoff/el-input/el-form-itemel-form-item label密码 proppasswordel-input v-modeldataForm.password typepassword auto-completeoff/el-input/el-form-itemel-form-item label机构 propdeptNamepopup-tree-input :datadeptData :propsdeptTreeProps :propdataForm.deptName :nodeKeydataForm.deptId :currentChangeHandledeptTreeCurrentChangeHandle/popup-tree-input/el-form-itemel-form-item label邮箱 propemailel-input v-modeldataForm.email auto-completeoff/el-input/el-form-itemel-form-item label手机 propmobileel-input v-modeldataForm.mobile auto-completeoff/el-input/el-form-item/el-formdiv slotfooter classdialog-footerel-button click.nativeeditDialogVisible false取消/el-buttonel-button typeprimary click.nativeeditSubmit :loadingeditLoading提交/el-button/div/el-dialog/div
/templatescript
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: testqq.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 truethis.operation truethis.dataForm {id: 0,name: ,password: ,deptId: 1,deptName: ,email: testqq.com,mobile: 13889700023,status: 1}},// 显示编辑界面handleEdit: function (params) {this.editDialogVisible truethis.operation falsethis.dataForm Object.assign({}, params.row)},// 编辑editSubmit: function () {this.$refs.dataForm.validate((valid) {if (valid) {this.$confirm(确认提交吗, 提示, {}).then(() {this.editLoading truelet params Object.assign({}, this.dataForm)this.$api.user.save(params).then((res) {this.editLoading falsethis.$message({ message: 提交成功, type: success })this.$refs[dataForm].resetFields()this.editDialogVisible falsethis.findPage(null)})})}})},// 获取部门列表findDeptTree: function () {this.$api.dept.findDeptTree().then((res) {this.deptData res.data})},// 菜单树选中deptTreeCurrentChangeHandle (data, node) {this.dataForm.deptId data.idthis.dataForm.deptName data.name}},mounted() {this.findDeptTree()}
}
/scriptstyle scoped/style 表格组件封装
为了可以实现表格的代码复用封装表格组件。
src/views/Core/KtTable.vue templatediv!--表格栏--el-table :datadata.content stripe highlight-current-row selection-changeselectionChange :v-loadingloading :max-heightmaxHeight :sizesize :alignalign stylewidth:100%; el-table-column typeselection width40/el-table-columnel-table-column v-forcolumn in columns :propcolumn.prop :labelcolumn.label :widthcolumn.width :min-widthcolumn.minWidth :sortablecolumn.sortable :fixedcolumn.fixed :keycolumn.prop :typecolumn.type/el-table-columnel-table-column label操作 width150 fixedrighttemplate slot-scopescopekt-button label编辑 :permspermsEdit :sizesize clickhandleEdit(scope.$index, scope.row) /kt-button label删除 :permspermsDelete :sizesize typedanger clickhandleDelete(scope.$index, scope.row) //template/el-table-column/el-table!--分页栏--div classtoolbar stylepadding:10px;kt-button label批量删除 :permspermsDelete :sizesize typedanger clickhandleBatchDelete() :disabledthis.selections.length0 stylefloat:left;/el-pagination layouttotal, prev, pager, next, jumper current-changerefreshPageRequest :current-pagepageRequest.pageNum :page-sizepageRequest.pageSize :totaldata.totalSize stylefloat:right;/el-pagination/div/div
/templatescript
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 pageNumthis.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 i0; iidArray.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)}
}
/scriptstyle scoped/style 权限按钮封装
为了可以实现对表格数据进行新增、编辑、删除操作按钮的权限控制封装权限按钮组件。
src/views/Core/KtButton.vue templateel-button :sizesize :typetype :loadingloading :disabled!hasPerms(perms) clickhandleClick{{label}}/el-button
/templatescript
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() {}
}
/scriptstyle scoped/style 测试效果
测试效果如下增删改功能mock不能实际操作数据库可以结合本教程的后端代码一起测试。 源码下载
后端kitty: 基于Spring Boot、Spring Cloud、Vue.js 、Element UI实现采用前后端分离架构的权限管理系统JAVA快速开发平台。
前端kitty-ui: Kitty 前端基于 Vue Element 实现的权限管理系统。
