第二阶段每日汇报20230522
补货站后台管理系统开始实现补货商品管理的界面的初步实现
补货商品管理同时也是主界面,主界面的代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>补货站后台管理系统</title> <style> .el-table .warning-row { background: oldlace; } .el-table .success-row { background: #f0f9eb; } </style> </head> <body> <div id="app"> <template> <div> <el-container style="height: 700px; border: 1px solid #eee"> <el-header style="font-size:40px; background-color: rgb(238, 241, 246)">补货站后台管理系统</el-header> <el-container> <el-aside width="230px" style="border: 1px solid #eee"> <el-menu :default-openeds="['1', '3']"> <el-submenu index="1"> <template slot="title"><i class="el-icon-message"></i>系统管理</template> <el-menu-item index="1-1"> <a href="Menu.html">补货商品管理</a> </el-menu-item> <el-menu-item index="1-2"> <a href="replenishment.html">补货申请处理</a> </el-menu-item> </el-submenu> </el-menu> </el-aside> <el-main> <!--搜索表单--> <el-form :inline="true" :model="fruit" class="demo-form-inline"> <el-form-item label="商品编号"> <el-input v-model="fruit.id" placeholder="请输入商品编号"></el-input> </el-form-item> <el-form-item label="商品名称"> <el-input v-model="fruit.name" placeholder="请输入商品名称"></el-input> </el-form-item> <el-form-item label="商品价格"> <el-input v-model="fruit.price" placeholder="请输入商品价格"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">搜索</el-button> </el-form-item> </el-form> <!--按钮--> <el-row> <el-button type="danger" plain @click="deleteByIds">批量删除</el-button> <el-button type="primary" plain @click="dialogVisible = true">新增</el-button> </el-row> <!--添加数据对话框表单--> <el-dialog title="新增水果" :visible.sync="dialogVisible" width="30%" > <el-form ref="form" :model="fruit" label-width="80px"> <el-form-item label="商品编号"> <el-input v-model="fruit.id"></el-input> </el-form-item> <el-form-item label="商品名称"> <el-input v-model="fruit.name"></el-input> </el-form-item> <el-form-item label="商品价格"> <el-input v-model="fruit.price"></el-input> </el-form-item> <el-form-item label="商品数量"> <el-input v-model="fruit.number"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="addPolicy">提交</el-button> <el-button @click="dialogVisible = false">取消</el-button> </el-form-item> </el-form> </el-dialog> <template> <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column prop="id" label="商品编号" align="center" > </el-table-column> <el-table-column prop="name" label="商品名称" align="center" > </el-table-column> <el-table-column prop="price" label="商品价格(元)" align="center" > </el-table-column> <el-table-column prop="number" label="商品数量" align="center" > </el-table-column> <el-table-column align="center" label="操作"> <template slot-scope="scope"> <el-button type="primary" plain @click="updateById(scope.$index, scope.row)">修改</el-button> <el-button type="danger" plain @click="deleteById(scope.$index, scope.row)">删除</el-button> </template> </el-table-column> </el-table> </template> <!--分页工具条--> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="5" layout="total, sizes, prev, pager, next, jumper" :total="totalCount"> </el-pagination> </el-main> </el-container> </el-container> </div> </template> </div> <script src="js/vue.js"></script> <script src="element-ui/lib/index.js"></script> <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> <script src="js/axios-0.18.0.js"></script> <script> new Vue({ el: "#app", mounted() { //当页面加载完成后,发送异步请求,获取数据 }, methods: { // 查询分页数据 selectAll(){ axios({ method:"post", url:"http://localhost:8080/replenishmentMis/fruit/selectByPageAndCondition?currentPage="+this.currentPage+"&pageSize="+this.pageSize, data:this.fruit }).then(resp =>{ //设置表格数据 this.tableData = resp.data.rows; // {rows:[],totalCount:100} //设置总记录数 this.totalCount = resp.data.totalCount; }) }, //带状态表格 tableRowClassName({row, rowIndex}) { if (rowIndex === 1) { return 'warning-row'; } else if (rowIndex === 3) { return 'success-row'; } return ''; }, //分页 handleSizeChange(val) { // 重新设置每页显示的条数 this.pageSize = val; this.selectAll(); }, handleCurrentChange(val) { // 重新设置当前页码 this.currentPage = val; this.selectAll(); }, // 复选框选中后执行的方法 handleSelectionChange(val) { this.multipleSelection = val; }, //辅助数据类 initPolicy() { this.fruit.id=''; this.fruit.name=''; this.fruit.price=''; this.fruit.number=''; }, //辅助数据搜索类 initPolicyAndSearch() { this.fruit.id=''; this.fruit.name=''; this.fruit.price=''; this.fruit.number=''; }, // 添加数据 addFruit() { var _this = this; // 发送ajax请求,添加数据 axios({ method:"post", url:"http://localhost:8080/policyTest/policy/addPolicy", data:_this.policy }).then(function (resp) { if(resp.data == "success"){ //添加成功 //关闭窗口 _this.dialogVisible = false; // 重新查询数据 _this.initPolicy(); _this.selectAll(); // 弹出消息提示 _this.$message({ message: '恭喜你,添加成功', type: 'success' }); } }) }, }, data() { return { // 每页显示的条数 pageSize: 5, // 总记录数 totalCount: 100, // 当前页码 currentPage: 1, // 添加数据对话框是否展示的标记 dialogVisible: false, centerVisible: false, // 模型数据 fruit: { name: '', price: '', number: '', id: '' }, //辅助修改的复制数据 fruit_: { name: '', price: '', number: '', id: '' }, // 被选中的id数组 selectedIds: [], // 复选框选中数据集合 multipleSelection: [], //表格数据 tableData: [{ name: '西瓜', price: '5', number: '100', id: '001' }, { name: '西瓜', price: '5', number: '100', id: '001' }, { name: '西瓜', price: '5', number: '100', id: '001' }, { name: '西瓜', price: '5', number: '100', id: '001' }] } } }) </script> </body> </html>
实现效果: