【计算机毕设教程】基于springboot+vue的农产品溯源系统 | 仓库管理系统 | 进销存系统 ——前端篇
系统演示
<iframe allowfullscreen="true" data-mediaembed="bilibili" frameborder="0" id="wxKvhBHs-1727317935030" src="https://player.bilibili.com/player.html?aid=113198711770424&page=2"></iframe>02.系统功能&业务演示
页面解析
以采购管理功能为例，这样的一个基本的管理功能页面我们可以将他分为三部分，最顶层为功能介绍区，紧接着是用户搜索操作区，最后是数据展示区，因此，我们可以用3个并列的div进行展示。
<div>
<div class="title-container"></div>
<div class="search-container"></div>
<div class="table-container"></div>
</div>
功能介绍区只需要展示title即可，但是需要注意title前面有一个小方块，这个方块直接用::before伪类来进行绘制即可。
<div class="title-container">
<span class="text-with-rectangle">{{ title }}</span>
</div>
.title-container{
width:100%;
height:auto;
position: relative;
margin-bottom: 10px;
}
.text-with-rectangle {
font-size:22px;
color: #333;
vertical-align: center;
padding-left: 20px; /* 为矩形留出空间 */
}
.text-with-rectangle::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 6px;
height: 100%;
background-color: #5b8034;
}
接下来是用户搜索区域，这部分只需要添加搜索框以及操作按钮即可。
<div class="search-container">
<el-input style="width: 200px;margin-right: 20px" placeholder="请输入单据编号" v-model="billCode"></el-input>
<el-button style="margin-left: 10px;" @click="load" class="el-icon-search">搜索</el-button>
<el-button style="margin-left: 10px;" @click="reset" class="el-icon-refresh">重置</el-button>
<el-button style="margin-right: 10px;" class="el-icon-plus" @click="save">新增</el-button>
<el-button slot="reference" style="margin-left:5px;" class="el-icon-delete" @click="deleteBatch">批量删除</el-button>
</div>
最后是数据展示部分，这部分主要分为了表格和分页栏，表格我们直接使用elementUI自带的组件el-table，分页栏使用el-pagination.
组件的说明可以查看https://element.eleme.io/#/[Element - The world's most popular Vue UI framework](https://element.eleme.io/#/)
使用data来和后端分页接口传过来的数据进行绑定，告诉el-table我要展示tableData中的数据， 用stripe标识el-table可以让表格拥有斑马纹效果，header-cell-style这里我们修改了表头的样式，让表头的背景色是浅绿色，和系统主题色相搭配，@selection-change主要是当我们勾选了表格数据后，能够为后续的批量删除操作进行支撑。
el-table-column是定义表格的每一列，prop需要和tableData的字段对应上，告诉el-table这里展示什么字段，label是每一列表头的名称。在操作这一列，如果我们需要实现自定义列，则需要用到template标签，在template中定义我们需要的效果。
<el-table :data="tableData" stripe :header-cell-style="getRowClass"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="billCode" label="单据编号"></el-table-column>
<el-table-column prop="billDate" label="单据日期"></el-table-column>
<el-table-column prop="customerName" label="客户名称"></el-table-column>
<el-table-column prop="thingName" label="农产品名称"></el-table-column>
<el-table-column prop="unit" label="单位"></el-table-column>
<el-table-column prop="quanlity" label="数量"></el-table-column>
<el-table-column prop="amount" label="总价"></el-table-column>
<el-table-column label="操作" width="200">
<template slot-scope="scope">
<el-button class="operation" @click="handleEdit(scope.row)">编辑</el-button>
<el-popconfirm
confirm-button-text='确定'
cancel-button-text='取消'
icon="el-icon-info"
icon-color="red"
title="确定删除这些数据吗？"
@confirm="handleDelete(scope.row.id)"
@cancel="cancel">
<el-button slot="reference" class="operation" style="margin-left:5px;">删除</el-button>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
分页栏中@size-change是页大小改变的处理方法，例如用户从5条/页修改为10条/页就会执行handleSizeChange方法，@current-change是如果用户直接在输入框输入数字，跳转到第几页，则会执行handleCurrentChange方法，current-page则是记录了当前为第几页，注意要在data()中定义pageNum！page-sizes为默认的下拉选项值，page-size则表示默认为10条数据一页，layout则定义了分页栏中的按钮，分别是总数，每页数，上一下，页码，下一页，跳转；total则记录了接口会告诉你一共有多少条数据，当然，这里也要在data()中定义total变量。
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[5, 10, 15, 20]"
:page-size="10"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>>
那么，页面上还剩下新增和编辑功能需要再进一步开发，我们可以设计为点击新增/编辑后，弹出一个对话框，对话框中有一个form表单，利用这个表单来进行数据记录，完成新增/编辑的功能。因此，我们需要定义一个el-dialog。
<el-dialog title="采购信息" :visible.sync="dialogFormVisible" width="40%">
<el-form :model="form" :rules="rules">
<el-form-item label="单据编号" :label-width="formLabelWidth" prop="billCode">
<el-input v-model="form.billCode" disabled></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button class="dlg-cancel" @click="dialogFormVisible = false">取 消</el-button>
<el-button class="dlg-submit" @click="handleAdd">确 定</el-button>
</div>
</el-dialog>
脚手架获取
一键三连获取进群密码。通过企鹅群，直接在群文件中获取即可。
