背景
本文是前端一个基本的增删改查的例子，供自己梳理思路，不涉及复杂业务操作。
界面样子
主界面
用户编辑
学生管理
数据结构
data() {
return {
currentRow: null,//用户列表的当前行
studentList: [],//选择行对应的学生列表数据
//分页查询
pageQuery: {
pageSize: 5,//一页数据条数
currentPageNo: 1,//当前页码
//查询区查询条件
condition: {
userNameCondi: "",
phoneCondi: "",
selectedUserStatusValue: 1,//查询区选择的状态
userStatusOption: [{//用户状态下拉框
value: 1,
label: '启用'
}, {
value: 0,
label: '停用'
}]
},
resultData: {//分页查询结果
totalRecordCount: 0,//总条数
totalPageCount: 0,//总页数
list: []//当前页数据集
},
},
userEditor: {
userDTO: {
id: '',
userName: '',
gender: '',
phone: '',
regDate: '',
password: '',
status: 1
},
userEditorRule: {
userName: [
{
required: true, message: "Please input the user name", trigger: "blur"
},
{ min: 1, max: 30, message: "长度在 1 到 30 个字符", trigger: "blur" }
],
gender: [{ required: true, message: "请选择性别", trigger: "blur" }],
phone: [{ required: true, message: "请输入手机号码", trigger: "blur" }]
},
title: "",//用户编辑窗口标题
visibleFlag: false//用户编辑窗口是否可见
},
stuMana: {
stuManaVisibleFlag: false,//学生管理窗口是否可见
stuEditorVisibleFlag: false,//学生管理编辑窗口
stuEditorTitle: "",//学生编辑窗口标题
stuEditorDTO: {//
}//学生编辑窗口数据
}
}
},页面业务
查询
页面首次加载时，执行分页查询
mounted() {
//加载时执行分页查询
this.execPageQuery(this.pageQuery.currentPageNo, this.pageQuery.pageSize);
document.querySelector('#tbPhoneCondi').focus();
},//获取列表数据并进行分页展示
execPageQuery(currentPageNo, pageSize) {
axios({
method: "post",
url: "/api/users/pageQuery",//http://localhost:9000/users/getUserList
data: {
userName: this.pageQuery.condition.userNameCondi,
phone: this.pageQuery.condition.phoneCondi,
status: this.pageQuery.condition.selectedUserStatusValue,
pageNo: currentPageNo,//取第 ？ 页数据
pageSize: pageSize,//每页数据条数
sortBy: "reg_date",//按注册日期
isAsc: false//排列
}
}).then(data => {
console.log(data);
this.pageQuery.resultData = data.data;//改成分页查询结果
})
},点击查询按钮进行查询、重置查询条件
//点击查询区的查询按钮，执行查询
clickSearch() {
this.execPageQuery(this.pageQuery.currentPageNo, this.pageQuery.pageSize);
},
//查询区重置按钮
resetSearchForm() {
this.pageQuery.condition.userNameCondi = '';
this.pageQuery.condition.phoneCondi = '';
this.pageQuery.condition.selectedUserStatusValue = 1;
},调整分页条上每页展示记录数
//调整分页条上每页展示记录数
handleSizeChange: function (val) {
// alert("每页记录数变化" + val)
this.pageQuery.pageSize = val;// 动态改变
this.execPageQuery(this.pageQuery.currentPageNo, this.pageQuery.pageSize);
},调整分页条上当前页码
handleCurrentChange: function (val) {
// alert("页码发生变化" + val)
this.pageQuery.currentPageNo = val;//动态改变
this.execPageQuery(this.pageQuery.currentPageNo, this.pageQuery.pageSize);
},用户管理
点新增按钮，展示编辑窗口
//点新增按钮，展示编辑窗口
handleAdd() {
this.userEditor.title = "新增用户";
this.userEditor.visibleFlag = true;
this.userEditor.userDTO = {};//清空界面数据
},点修改按钮，编辑窗口数据回显
//点修改按钮，编辑窗口数据回显
handleEdit(index, row) {
this.userEditor.title = "修改用户";
this.userEditor.visibleFlag = true;
this.userEditor.userDTO = Object.assign({}, row); // row 为当前行数据，赋值给表单
},取消保存
// 取消保存
cancel() {
// 关闭弹框
this.userEditor.visibleFlag = false;
},用户：新增保存+修改保存
//新增保存 + 修改保存
saveUser() {
if (!this.userEditor.userDTO.id) {
//新增保存
axios({
method: "post",
url: "/api/users",
data: {
userName: this.userEditor.userDTO.userName,
gender: this.userEditor.userDTO.gender,
phone: this.userEditor.userDTO.phone,
regDate: this.userEditor.userDTO.regDate,
password: '123'
}
}).then(data => {
console.log(data);
});
this.$message.success("新增成功！");
} else {
//修改保存
axios({
method: "put",
url: "/api/users/updateUser",
data: {
id: this.userEditor.userDTO.id,
userName: this.userEditor.userDTO.userName,
gender: this.userEditor.userDTO.gender,
regDate: this.userEditor.userDTO.regDate,
phone: this.userEditor.userDTO.phone
}
}).then(data => {
console.log(data);
});
this.$message.success("修改成功！");
}
// this.$refs.userEditor_userDTO.resetFields();//清空窗口数据，并无作用
this.userEditor.visibleFlag = false;//关闭弹出窗口
this.execPageQuery(this.pageQuery.currentPageNo, this.pageQuery.pageSize);
},删除按钮，执行删除操作
//删除按钮，执行删除操作
handleDelete(index, row) {
this.$confirm('您正在执行删除操作, 是否继续?', '提示', {
confirmButtonText: '删除',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
/
axios({
method: "delete",
url: "/api/users" + "/" + row.id
}).then(data => {
console.log(data);
});
this.$message({
type: 'success',
message: '删除成功!'
});
this.execPageQuery(this.pageQuery.currentPageNo, this.pageQuery.pageSize);
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},列表点击事件
//列表中当前行改变
handleCurrentRowChange: function (val) {
this.currentRow = val;
this.studentList = this.currentRow.lsUserStudent;
},学生管理（第二层功能）
点击“学生管理”按钮展示对应窗口，加载数据
//点击第二层功能，展示对应窗口
handleStudentMana: function () {//学生管理
if (this.currentRow == null) {
this.$alert("请选择一条记录", "错误", {
confirmButtonText: '确定',
callback: action => {
this.$message({
type: 'info',
message: `action: ${action}`
});
}
});
return
}
this.stuMana.stuManaVisibleFlag = true;
console.log("this.currentRow===" + JSON.stringify(this.currentRow))
console.log("this.studentList===" + JSON.stringify(this.studentList))
},点击【新增】学生按钮
//点击新增学生按钮
handleAddStudent: function () {//学生编辑窗口
this.stuMana.stuEditorVisibleFlag = true;
this.stuMana.stuEditorTitle = "新增学生";
this.stuMana.stuEditorDTO = {};//有用，可清空界面数据
// alert("点击新增学生按钮：" + JSON.stringify(this.stuMana.stuEditorDTO))
},学生编辑窗口，关闭弹窗
//学生编辑窗口，关闭弹窗
cancelStudent() {
this.stuMana.stuEditorVisibleFlag = false;
},学生：新增保存 + 修改保存
//学生管理：新增保存 + 修改保存
saveStudent() {
//新增保存
if (this.stuMana.stuEditorDTO.id == null) {
this.stuMana.stuEditorDTO.userId = this.currentRow.id//用户id
this.stuMana.stuEditorDTO.createBy = this.stuMana.stuEditorDTO.userId
axios({
method: "post",
url: "/api/student",
data: this.stuMana.stuEditorDTO
}).then(data => {
console.log(data);
});
this.$message.success("新增成功！");
} else {
//修改保存
axios({
method: "put",
url: "/api/student/updateStudent",
data: this.stuMana.stuEditorDTO
}).then(data => {
console.log(data);
});
this.$message.success("修改成功！");
}
this.stuMana.stuEditorVisibleFlag = false;//关闭弹出窗口
this.stuMana.stuManaVisibleFlag = false;//关闭学生管理窗口
this.execPageQuery(this.pageQuery.currentPageNo, this.pageQuery.pageSize);
},点击学生列表的【编辑】按钮
//点击学生列表的【编辑】按钮
handleEditStudent(index, row) {
this.stuMana.stuEditorDTO = {};
this.stuMana.stuEditorTitle = "修改学生";
this.stuMana.stuEditorVisibleFlag = true;
this.stuMana.stuEditorDTO = Object.assign({}, row);
console.log("handleEditStudent === 111当前学生信息：============" + JSON.stringify(this.stuMana.stuEditorDTO))
console.log("handleEditStudent === 222当前用户：============" + JSON.stringify(this.currentRow.userName))
},点击学生列表的【删除】按钮
//点击学生列表的【删除】按钮
handleDeleteStudent(index, row) {
this.$confirm('您正在执行删除操作, 是否继续?', '提示', {
confirmButtonText: '删除',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
axios({
method: "delete",
url: "/api/student" + "/" + row.id
}).then(data => {
console.log(data);
});
this.$message({
type: 'success',
message: '删除成功!'
});
this.stuMana.stuManaVisibleFlag = false;//关掉窗口
this.execPageQuery(this.pageQuery.currentPageNo, this.pageQuery.pageSize);
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},Vue代码
<template>
<div>
<el-container style="height:900px; border:1px solid #eee; display: flex">
<el-header style="font-size:40px; background-color: rgb(238, 241, 246)">Turtle 智能支持系统</el-header>
<el-container>
<HmAsside></HmAsside>
<el-main>
<el-breadcrumb separator-class="el-icon-arrow-right" style="font-size:medium; ">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>系统管理</el-breadcrumb-item>
<el-breadcrumb-item>用户管理</el-breadcrumb-item>
</el-breadcrumb>
<!-- 查询区 -->
<div style="display: flex;margin-top: 10px">
<div>
<el-input id="tbPhoneCondi" v-model="pageQuery.condition.phoneCondi" placeholder="请输入手机号搜索关键词"
style="width: 200px;" @keyup.enter.native="clickSearch"></el-input>
<el-input v-model="pageQuery.condition.userNameCondi" placeholder="请输入姓名搜索关键词"
style="width: 200px;" @keyup.enter.native="clickSearch"></el-input>
<el-select v-model="pageQuery.condition" placeholder="请选择状态" @change="$forceUpdate()">
<el-option v-for="item in pageQuery.condition.userStatusOption" :key="item.value"
:label="item.label" :value="item.value">
</el-option>
</el-select>
<el-button type="primary" @click="clickSearch">搜索</el-button>
<el-button @click="resetSearchForm">重置</el-button>
</div>
<div>
<!-- 按钮区 -->
<el-button style="margin-left: 200px" type="primary" @click="handleAdd()">新增用户</el-button>
<el-button style="margin-left: 10px" type="primary"
@click="handleStudentMana()">学生管理</el-button>
</div>
</div>
<!-- Table：User -->
<el-table ref="userTable" :data="pageQuery.resultData.list" highlight-current-row height="400" border
stripe :fit="true" style="width: 100%; margin-top: 10px;"
@current-change="handleCurrentRowChange">
<el-table-column prop="id" label="id" width="180"></el-table-column>
<el-table-column prop="userName" label="姓名" width="180"></el-table-column>
<el-table-column label="性别" prop="gender" width="140px">
<template slot-scope="props">
{{ props.row.gender != 'null' && props.row.gender == 1 ? '男' : '女' }}
</template>
</el-table-column>
<el-table-column prop="phone" label="手机号" width="180"></el-table-column>
<el-table-column prop="regDate" label="注册日期" width="180"></el-table-column>
<el-table-column prop="studentNames" label="学生" width="180"></el-table-column>
<el-table-column prop="updateTime" label="最后操作时间" width="180"></el-table-column>
<el-table-column label="状态" width="140px" prop="status"></el-table-column>
<el-table-column label="操作" width="200">
<template slot-scope="scope">
<el-button @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 组件 -->
<div class="block">
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
:total="pageQuery.resultData.totalRecordCount" :page-sizes="[5, 10, 15, 20]"
:current-page="pageQuery.currentPageNo" :page-size="pageQuery.pageSize"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
</div>
<!-- User 编辑界面 dialogUserEditVisible-->
<el-dialog :title="userEditor.title" :visible.sync="userEditor.visibleFlag">
<el-form ref="userEditor_userDTO" :model="userEditor.userDTO" label-width="80px"
:rules="userEditor.userEditorRule">
<el-form-item label="姓名">
<el-input v-model="userEditor.userDTO.userName"></el-input>
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="userEditor.userDTO.gender">
<el-radio label="1">男</el-radio>
<el-radio label="0">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="手机号">
<el-input v-model="userEditor.userDTO.phone"></el-input>
</el-form-item>
<el-form-item label="注册日期">
<el-date-picker type="date" placeholder="选择注册日期" v-model="userEditor.userDTO.regDate"
style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
</el-form-item>
<el-form-item>
<el-button @click="cancel">取消</el-button>
<el-button type="primary" @click="saveUser">保存</el-button>
</el-form-item>
</el-form>
</el-dialog>
<!-- Student 管理窗口 -->
<el-dialog title="学生管理" :visible.sync=" stuMana.stuManaVisibleFlag" width="1300px">
<div style="display: flex;margin-top: 10px">
<!-- 按钮区 -->
<el-button type="primary" @click="handleAddStudent()">新增学生</el-button>
<label v-if="this.currentRow !== null && this.currentRow.userName !== null"
style="margin-left: 20px;margin-top:10px;font-weight: bold;">
用户：{{ this.currentRow.userName }}
</label>
</div>
<!-- Table：学生 -->
<el-table :data="studentList" highlight-current-row border stripe :fit="true"
style="width: 100%; margin-top: 10px;height:300px">
<el-table-column prop="id" label="id" width="180"></el-table-column>
<el-table-column prop="userId" label="用户ID" width="180"></el-table-column>
<el-table-column prop="stuName" label="姓名" width="80px"></el-table-column>
<el-table-column prop="stuGender" label="性别" width="60px">
<template slot-scope="props">
{{ props.row.stuGender != 'null' && props.row.stuGender == 1 ? '男' : '女' }}
</template>
</el-table-column>
<el-table-column prop="stuPhone" label="手机号" width="120px"></el-table-column>
<el-table-column prop="createTime" label="创建时间" width="160px"></el-table-column>
<el-table-column prop="updateTime" label="最后操作时间" width="160px"></el-table-column>
<el-table-column label="状态" width="80px" prop="status"></el-table-column>
<el-table-column label="操作" width="200px">
<template slot-scope="scope">
<el-button @click="handleEditStudent(scope.$index, scope.row)">编辑</el-button>
<el-button type="danger"
@click="handleDeleteStudent(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 学生编辑界面 -->
<el-dialog :title="stuMana.stuEditorTitle" :visible.sync="stuMana.stuEditorVisibleFlag" append-to-body>
<el-form ref="studentForm" :model="stuMana.stuEditorDTO" label-width="80px">
<el-row>
<label v-if="this.currentRow !== null && this.currentRow.userName !== null"
style="margin-left: 20px;margin-top:10px;font-weight: bold;">
用户：{{ this.currentRow.userName }}
</label>
</el-row>
<el-row>
<el-form-item label="状态">
<el-radio-group v-model="stuMana.stuEditorDTO.status">
<el-radio label="启用"></el-radio>
<el-radio label="停用"></el-radio>
</el-radio-group>
</el-form-item>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="姓名">
<el-input v-model="stuMana.stuEditorDTO.stuName"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="性别">
<el-radio-group v-model="stuMana.stuEditorDTO.stuGender">
<el-radio label="1">男</el-radio>
<el-radio label="0">女</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="出生日期">
<el-date-picker type="date" placeholder="选择出生日期"
v-model="stuMana.stuEditorDTO.stuBirthday" style="width: 100%;"
value-format="yyyy-MM-dd"></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="手机号">
<el-input v-model="stuMana.stuEditorDTO.stuPhone"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-form-item>
<el-button @click="cancelStudent">取消</el-button>
<el-button type="primary" @click="saveStudent">保存</el-button>
</el-form-item>
</el-form>
</el-dialog>
</el-dialog>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script src="./user.js"></script>
<style>
/* 自定义选中行的背景颜色和文字颜色 */
.el-table .el-table__body tr.el-table__row.current-row {
background-color: #f0f9eb;
/* 背景色 */
color: #67c23a;
/* 文字颜色 */
}
.s {
margin-left: 20px;
margin-top: 20px;
}
.searchArea {
margin-top: 20px;
float: left;
}
.float-left {
float: left;
}
</style>
扫一扫
5327
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
