Vue前端项目-用户管理-增删改（上）
目录
1、按钮界面
2、修改和删除按钮状态控制
3、添加和修改的对话框
4、点击 “新增”方法
5、新增用户的保存操作
6、修改用户
7、删除用户
8、总结
实现效果图：
1、按钮界面
在 src / views / system / user / index.vue 页面中，添加 五个按钮分别为 “新增”，“修改”，“删除”，“导入”和 “导出”
在 搜索和重置 按钮后面 添加如下代码：
新增
修改
删除
导入
导出
注意：导入和导出后边单独拿一章出来讲，按钮的权限控制也会单独拿出来讲
2、修改和删除按钮状态控制
修改和删除按钮 是否可用的判定规则如图：
实现：
2.1 在 data 数据中定义 两个变量
data() {
return {
// 非单个禁用
single: true,
// 非多个禁用
multiple: true
}
}2.2 在修改和删除按钮中上一步定义的两个变量
修改
删除 注意: 绑定变量的代码在步骤1的时候已经做过了,这里只是再提一下
2.3 当表格选项发生变化时, 触发相应的方法
2.4 handleSelectionChange 方法
methods: {
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.userId)
this.single = selection.length !== 1
this.multiple = !selection.length
}
}3、添加和修改的对话框
对话框代码放置位置：
3.1 对话框代码
{
{dict.dictLabel}}
注意： 这里有使用到
解决：
安装 riophae
cnpm install --save @riophae/vue-treeselect在需要使用到的 vue 页面导入
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'3.2 对话框代码用到的变量
data() {
return {
// 弹出层标题
title: '',
// 是否显示弹出层
open: false,
// 默认密码
initPassword: undefined,
// 状态数据字典
statusOptions: [],
// 性别状态字典
sexOptions: [],
// 表单参数
form: {},
// 表单校验
rules: {
userName: [{ required: true, message: '用户名称不能为空', trigger: 'blur' }],
nickName: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
deptId: [{ required: true, message: '归属部门不能为空', trigger: 'blur' }],
password: [{ required: true, message: '用户密码不能为空', trigger: 'blur' }],
email: [
{ required: true, message: '邮箱地址不能为空', trigger: 'blur' },
{
type: 'email',
message: "'请输入正确的邮箱地址",
trigger: ['blur', 'change']
}
],
phonenumber: [
{ required: true, message: '手机号码不能为空', trigger: 'blur' },
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: '请输入正确的手机号码',
trigger: 'blur'
}
]
}
}
}4、点击 “新增”方法
实现效果:
分析：
步骤1、点击新增按钮，首先要进行的是重置表单中的所有数据
步骤2、加载远程数据完成表单页面初始化工作
步骤3、这些远程加载的数据分两种, 一种是加载字典中的数据 (如用户密码，性别、状态) 这些数据一般都是固定的。另一种是加载会动态变化的数据（如归属部门、岗位、角色）
步骤4、归属部门的下拉框中 使用到
页面：
新增 methods:
/** 新增按钮操作 */
handleAdd() {
this.reset()
this.getTreeselect()
getUser().then(response => {
this.postOptions = response.posts
this.roleOptions = response.roles
this.open = true
this.title = '添加用户'
this.form.password = this.initPassword
})
},
// 表单重置
reset() {
this.form = {
userId: undefined,
deptId: undefined,
userName: undefined,
nickName: undefined,
password: undefined,
phonenumber: undefined,
email: undefined,
sex: undefined,
status: '0',
remark: undefined,
postIds: [],
roleIds: []
},
/** 查询部门下拉树结构 */
getTreeselect() {
treeselect().then(response => {
this.deptOptions = response.data
})
}导入方法:
在上一步 methods中 使用到 treeselect， getUser 两个远程获取数据的方法
import { treeselect } from '@/api/system/dept'
import { getUser } from '@/api/system/user'定义方法：
创建 src / api / system / dept.js 文件
import request from '@/utils/request'
// 查询部门下拉树结构
export function treeselect() {
return request({
url: '/system/dept/treeselect',
method: 'get'
})
}在 src / api / system / user.js 文件中 新增 getUser 方法
// 查询用户详细
export function getUser(userId) {
return request({
url: '/system/user/' + praseStrEmpty(userId),
method: 'get'
})
}获取字典数据：
在分析时候介绍过， 有些数据是写死的，我们可以页面初始化时候远程加载这些字典数据，这些数据如 用户密码，性别、状态
created() {
this.getList()
this.getTreeselect()
this.getDicts('sys_normal_disable').then(response => {
this.statusOptions = response.data
})
this.getDicts('sys_user_sex').then(response => {
this.sexOptions = response.data
})
this.getConfigKey('sys.user.initPassword').then(response => {
this.initPassword = response.msg
})
}在 main.js 文件中导入 并全局挂载 getDicts、getConfigKey 方法
import { getDicts } from '@/api/system/dict/data'
import { getConfigKey } from '@/api/system/config'
Vue.prototype.getDicts = getDicts
Vue.prototype.getConfigKey = getConfigKey创建 src / api / system / dict / data.js 文件
import request from '@/utils/request'
// 根据字典类型查询字典数据信息
export function getDicts(dictType) {
return request({
url: '/system/dict/data/dictType/' + dictType,
method: 'get'
})
}创建 src / api / system / config.js 文件
import request from '@/utils/request'
// 根据参数键名查询参数值
export function getConfigKey(configKey) {
return request({
url: '/system/config/configKey/' + configKey,
method: 'get'
})
}
5、新增用户的保存操作
在 新增用户 对话框中点击 确定，提交表单
/** 提交按钮 */
submitForm: function() {
this.$refs['form'].validate(valid => {
if (valid) {
if (this.form.userId !== undefined) {
updateUser(this.form).then(response => {
if (response.code === 200) {
this.msgSuccess('修改成功')
this.open = false
this.getList()
} else {
this.msgError(response.msg)
}
})
} else {
addUser(this.form).then(response => {
if (response.code === 200) {
this.msgSuccess('新增成功')
this.open = false
this.getList()
} else {
this.msgError(response.msg)
}
})
}
}
})
}6、修改用户
修改用户的方法：
/** 修改按钮操作 */
handleUpdate(row) {
this.reset()
this.getTreeselect()
const userId = row.userId || this.ids
getUser(userId).then(response => {
this.form = response.data
this.postOptions = response.posts
this.roleOptions = response.roles
this.form.postIds = response.postIds
this.form.roleIds = response.roleIds
this.open = true
this.title = '修改用户'
this.form.password = ''
})
},7、删除用户
删除用户的方法：
/** 删除按钮操作 */
handleDelete(row) {
const userIds = row.userId || this.ids
this.$confirm('是否确认删除用户编号为"' + userIds + '"的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(function() {
return delUser(userIds)
})
.then(() => {
this.getList()
this.msgSuccess('删除成功')
})
.catch(function() {})
}导入 更新和删除 用户的方法：
import { delUser, updateUser} from '@/api/system/user'在 src / api / system / user.js 文件中定义该方法
// 修改用户
export function updateUser(data) {
return request({
url: '/system/user',
method: 'put',
data: data
})
}
// 删除用户
export function delUser(userId) {
return request({
url: '/system/user/' + userId,
method: 'delete'
})
}8、总结
1、在页面创建时，可以提前加载字典数据（如：性别、状态等）
2、新增和修改可以共用一个 对话框，在点击新增或修改时，首先清除对话框中原有数据，其次远程加载数据进行初始化。
3、在点击保存的时候， 根据表单中 userId 是否为 undefined 来判断是 新增还是修改操作