User addition and data verification
Subcomponent UserEdit.vue
<template>
<div>
<el-form :model="form" :rules="rules" ref="ruleForm">
<el-form-item label="用户名" label-width="120px" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="密码" label-width="120px">
<el-input v-model="form.password"></el-input>
</el-form-item>
<el-form-item label="邮箱" label-width="120px">
<el-input v-model="form.email" type="email"></el-input>
</el-form-item>
<el-form-item label="手机" label-width="120px">
<el-input v-model="form.mobile" type="email"></el-input>
</el-form-item>
<el-form-item label="状态" label-width="120px">
<el-switch
v-model="form.status"
active-color="#13ce66"
:active-value="1"
:inactive-value="0"
inactive-color="#ff4949">
</el-switch>
</el-form-item>
<el-form-item label="部门" label-width="120px">
<el-select v-model="form.dept.deptId" placeholder="部门">
<el-option v-for="d in deptList" :label="d.name" :value="d.deptId" :key="d.deptId+'option'"></el-option>
</el-select>
</el-form-item>
<el-form-item label="角色" label-width="120px">
<el-select multiple v-model="form.roleIds" placeholder="角色">
<el-option v-for="r in roleList" :label="r.roleName" :value="r.roleId" :key="r.roleId+'option'"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="showDialog = false">取 消{
{
userId }}</el-button>
<el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
{
{
form }}
</div>
</div>
</template>
<script>
import request from "@/util/request";
export default {
name: "UserEdit",
props: {
userId: {
type: Number, default: 0}},
async created() {
this.deptList = await request("dept/findAll", {
})
this.roleList = await request("role/findAll", {
})
},
data() {
return {
deptList: [],
roleList: [],
form: {
status: 1,
dept: {
deptId: 1},
roleIds: []
},
rules: {
username: {
required: true, message: '请输入用户名称', trigger: 'blur'}
}
,
}
}, methods: {
submitForm(formName) {
this.$refs[formName].validate(async (valid) => {
if (valid) {
await request('/user/add',this.form)
this.$message("添加成功")
this.$emit("close-dialog",false)
} else {
console.log('error submit!!');
return false;
}
});
}
},
}
</script>
<style scoped>
</style>
Parent component UserManager.vue
<template>
<div>
<h1>用户管理</h1>
<!-- 查询栏-->
<el-form :inline="true" :model="formInline" size="medium" >
<el-form-item>
<el-button type="primary" size="medium" @click="showDialog=true">添加</el-button>
</el-form-item>
<el-form-item label="用户名">
<el-input v-model="formInline.username" placeholder="用户名"></el-input>
</el-form-item>
<el-form-item label="电话">
<el-input v-model="formInline.mobile" placeholder="电话"></el-input>
</el-form-item>
<el-form-item label="邮箱">
<el-input v-model="formInline.email" placeholder="邮箱"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" size="small" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
<!-- 页面表格-->
<!-- @sort-change="sortChange"，sortable="custom"用来做排序-->
<el-table :data="tableData" @sort-change="sortChange">
<el-table-column sortable="custom" prop="userId" label="用户ID" width="140">
</el-table-column>
<el-table-column sortable="custom" prop="username" label="用户名" width="120">
</el-table-column>
<el-table-column sortable="custom" prop="mobile" label="手机号">
</el-table-column>
<el-table-column sortable="custom" prop="email" label="邮箱">
</el-table-column>
<el-table-column sortable="custom" prop="createTime" label="创建时间">
</el-table-column>
<el-table-column label="状态">
<template v-slot="scope"><!--状态栏修改按钮 插槽表达式-->
<el-switch
@change="switchChange(scope.row)"
v-model="scope.row.status"
active-color="#13ce66"
inactive-color="#ff4949"
:active-value="1"
:inactive-value="0">
</el-switch>
</template>
</el-table-column>
<el-table-column label="操作">
<el-button type="info" size="mini" >修改</el-button>
<el-button type="danger" size="mini">删除</el-button>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="page"
:page-sizes="[2, 10, 20, 50]"
:page-size="size"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
<el-dialog title="用户添加/修改" :visible.sync="showDialog">
<user-edit :user-id="userId" @close-dialog="changeShowDialog"></user-edit><!--传参数到子组件加：做数据绑定-->
</el-dialog>
</div>
</template>
<script>
import request from "@/util/request";
import UserEdit from "@/components/edit/UserEdit";
export default {
name: "UserManger",
components: {
UserEdit},
created() {
this.loadData();
},
data() {
return {
page: 1,
size: 2,
tableData: [],
total: 3,
formInline:{
},
showDialog:false,
userId:0
}
}, methods: {
changeShowDialog(obj){
this.showDialog = obj
console.info(obj)
},
async loadData() {
let data = await request(`user/findAll?page=${
this.page}&size=${
this.size}`, {
}, )
this.tableData = data.list;
this.total=data.total;
},
handleSizeChange(obj) {
this.size = obj;
this.loadData();
},
handleCurrentChange(obj) {
this.page = obj;
this.loadData();
},
async onSubmit(){
let data = await request(`user/findAll?page=${
this.page}&size=${
this.size}`, this.formInline)
this.tableData = data.list;
this.total=data.total;
},
async sortChange(obj){
console.info(obj)
let orderBy
if (obj.order === "ascending"){
orderBy = obj.prop + ' asc'
}else {
orderBy = obj.prop + ' desc'
}
let data = await request(`user/findAll?page=${
this.page}&size=${
this.size}&orderBy=${
orderBy}`, this.formInline)
this.tableData = data.list;
this.total=data.total;
},
async switchChange({
userId,status}){
let data = await request("user/update",{
userId,status})
if (data){
this.$message("修改成功")
}
}
}
}
</script>
<style scoped>
</style>