第二阶段每日汇报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>
实现效果：
浙公网安备 33010602011771号