第二阶段每日汇报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>

实现效果:

 

posted @ 2023-05-22 23:22  一直队  阅读(26)  评论(0)    收藏  举报