【计算机毕设教程】基于springboot+vue的农产品溯源系统 | 仓库管理系统 | 进销存系统 ——前端篇

【计算机毕设教程】基于springboot+vue的农产品溯源系统 | 仓库管理系统 | 进销存系统 ——前端篇

系统演示

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>

脚手架获取

    一键三连获取进群密码。通过企鹅群，直接在群文件中获取即可。