山东大学项目实训开发日志——基于vue+springboot的医院耗材管理系统（五）

这篇博客记录入库管理的后半部分。

• 时段耗材入库汇总功能是可以针对某特定时段入库的耗材进行查询、展示。从下图可以看到5月7日当天没有入库记录：
  而将搜索时间范围扩大到4月1日到5月7日便可以看到对应时间的记录：
  科室库管可以看到的时段耗材入库汇总和入库列表与中心库管相似，这里不再赘述。

这里记录一下在不少地方都出现的时段耗材汇总列表的代码：

<template> 
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>时段耗材入库汇总列表</span>
      <div style="float: right">
        <el-button
          style="float:right;margin-bottom: 10px"
          size="small"
          type="primary"
          @click.native.prevent="searchByDate">搜索
        </el-button>
        <el-date-picker
          size="small"
          style="float:right;margin-right: 10px"
          v-model="dateRange"
          type="datetimerange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00','23:59:59']">
        </el-date-picker>

        <div style="float:right">
          <el-form :inline="true" :model="listQuery" size="small">
            <el-form-item>
              <el-input v-model="listQuery.reagentName" class="input-width" placeholder="耗材名称" clearable
                        @keyup.enter.native="searchByDate"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div style="margin-left: 10px;margin-top: 10px">
        <span>{{ listQuery.startTime|formatDate }}——{{ listQuery.endTime|formatDate }}</span>
      </div>
      <div style="margin-left: 10px;margin-top: 10px">
        <el-input v-model="filename" placeholder="Enter File Name"
                  style="width:200px;
                      float:right;"
                  prefix-icon="el-icon-document"
                  size="small"/>
        <el-button :loading="downloadLoading"
                   style="margin-bottom:10px;
                       float:right;
                       margin-right:10px"
                   type="primary"
                   icon="el-icon-download"
                   @click="handleDownload"
                   size="small">导出
        </el-button>
        <el-button :loading="downloadLoading"
                   style="margin-bottom:10px;
                       float:right;
                       margin-right:10px"
                   type="primary"
                   icon="el-icon-printer"
                   @click="handlePrint"
                   size="small">打印
        </el-button>
      </div>
    </el-card>

    <div class="table-container">
      <el-table ref="lossTable"
                :data="list"
                :row-class-name="rowClassName"
                max-height="550"
                stripe
                :default-sort="{scope: 'scope.row.orderDay', order: 'descending'}"
                style="width: 100%;"
                @selection-change="handleSelectionChange"
                v-loading="listLoading" border>

        <el-table-column prop="newId" align="center" label="序号" width="60"></el-table-column>
        <el-table-column label="耗材名称" width="240" align="center">
          <template slot-scope="scope">{{ scope.row.reagentName }}</template>
        </el-table-column>
        <el-table-column label="耗材编号" align="center">
          <template slot-scope="scope">{{ scope.row.updateBy }}</template>
        </el-table-column>
        <el-table-column label="批号" align="center">
          <template slot-scope="scope">{{ scope.row.batchNo }}</template>
        </el-table-column>
        <el-table-column label="供货商" align="center">
          <template slot-scope="scope">{{ scope.row.factory }}</template>
        </el-table-column>
        <el-table-column label="单位" align="center">
          <template slot-scope="scope">{{ scope.row.reagentUnit }}</template>
        </el-table-column>
        <el-table-column label="入库时间" width="200" align="center">
          <template slot-scope="scope">{{ scope.row.createTime | formatDateTime }}</template>
        </el-table-column>
        <el-table-column label="领用人" align="center">
          <template slot-scope="scope">{{ scope.row.createBy }}</template>
        </el-table-column>
      </el-table>
    </div>
    <el-button style="margin-top: 20px" size="small" @click="back()">返回</el-button>

    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :current-page.sync="listQuery.pageNum"
        :page-size="listQuery.pageSize"
        :page-sizes="[50,100,200]"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

下一篇博客将重点关注库存列表部分，这是一个很重要的部分。