山东大学项目实训开发日志——基于vue+springboot的医院耗材管理系统（四）
发布时间
阅读量：
阅读量
这篇博客旨在介绍库存管理模块的相关内容
这一类页面设计代码如下：
<template>
<div class="app-container">
<!-- <el-button size="small" @click="back()">返回</el-button>-->
<el-card class="filter-container" shadow="never">
<i class="el-icon-tickets"></i>
<span>建码入库</span>
</el-card>
<div class="table-container">
<el-form :inline="false" :model="createInBill" size="medium " label-width="100px">
<el-form-item label="制单人员：">
<el-col :span="4">
<el-input :disabled="true" v-model="listQuery.billCreator" class="input-width"></el-input>
</el-col>
</el-form-item>
<el-form-item label="备注：">
<el-col :span="24">
<el-input type="textarea"
:rows="2"
v-model="listQuery.remark"
class="input-width">
</el-input>
</el-col>
</el-form-item>
</el-form>
</div>
<el-card class="operate-container" shadow="never">
<el-button icon="el-icon-circle-plus"
type="primary"
size="mini"
class="btn-add"
@click="handleAdd()"
style="float: left;
margin-bottom:15px">选择耗材
</el-button>
</el-card>
<div class="table-container">
<el-form :rules="model.rules" :model="model" ref="form">
<el-table ref="InBillTable"
:data="model.tableData"
:row-class-name="rowClassName"
style="width: 100%;"
v-loading="listLoading"
:default-sort="{prop: 'date', order: 'descending'}"
border>
<el-table-column type="selection" width="60" align="center"></el-table-column>
<el-table-column prop="newId" align="center" label="序号" width="60"></el-table-column>
<el-table-column label="耗材名称" 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.reagentUnit }}</template>
</el-table-column>
<el-table-column label="规格型号" align="center">
<template slot-scope="scope">{{ scope.row.reagentSpecification }}</template>
</el-table-column>
<el-table-column label="供货商" align="center">
<template slot-scope="scope">{{ scope.row.supplierShortName }}</template>
</el-table-column>
<el-table-column label="生产厂家" align="center">
<template slot-scope="scope">{{ scope.row.factory }}</template>
</el-table-column>
<el-table-column prop="batchNo" label="产品批号" width="150%" align="center">
<template slot-scope="scope">
<el-form-item>
<el-input placeholder="请输入产品批号" v-model="scope.row.batchNo"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="expireDate" label="库存有效期" width="250%" align="center">
<template slot-scope="scope">
<el-form-item :prop="'tableData.' + scope.$index + '.expireDate'" :rules='model.rules.name'>
<el-date-picker
placeholder="请选择保质期"
v-model="scope.row.expireDate"
type="date"
value-format="yyyy-MM-dd"
format="yyyy-MM-dd"
:picker-options="pickerOptions">
</el-date-picker>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="单价" width=auto align="center">
<template slot-scope="scope">¥ {{ scope.row.price }}</template>
</el-table-column>
<el-table-column label="耗材数量" width="150" align="center">
<template slot-scope="scope">
<el-form-item :prop="'tableData.' + scope.$index + '.quantity'" :rules='model.rules.name'>
<el-input-number
size="small"
v-model="scope.row.quantity"
:min="1" :max="100000">
</el-input-number>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="操作" width="180" align="center">
<template slot-scope="scope">
<el-button size="mini"
icon="el-icon-delete"
type="danger"
@click="indexDelete(scope.$index)">删除
</el-button>
</template>
</el-table-column>
</el-table>
</el-form>
<el-card shadow="never">
<el-button
type="primary"
size="mini"
@click="submitInBill(0)"
style="float: left;
margin-bottom:15px">提交保存
</el-button>
<el-button
type="primary"
size="mini"
@click="submitInBill(1)"
style="float: left;
margin-bottom:15px">提交入库
</el-button>
</el-card>
<el-dialog title="耗材基础信息" :visible.sync="dialogAddTableVisible" width="84%">
<el-card shadow="hover" :body-style="{ padding: '10px'}">
<div>
<el-button size="small" style="float:right;margin-right: 15px"
type="primary" :loading="loading"
@click.native.prevent="handleSearchList">
查询搜索
</el-button>
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
size="small">
重置
</el-button>
</div>
<div style="float:right">
<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
<el-form-item>
<el-input v-model="listQuery.keyword" class="input-width" placeholder="耗材名称/供货商名称"
clearable @keyup.enter.native="handleSearchList"></el-input>
</el-form-item>
</el-form>
</div>
<el-button icon="el-icon-circle-plus"
type="primary"
size="mini"
class="btn-add"
@click="toggleSelection()"
style="float: left; margin-bottom:11px">添加
</el-button>
</el-card>
<div class="table-container">
<el-table ref="createInBillAddTable"
:data="list"
:row-class-name="rowClassName"
height="500"
style="width: 100%;"
@selection-change="handleSelectionChange"
v-loading="listLoading" border>
<el-table-column type="selection" width="50" fixed align="center"></el-table-column>
<el-table-column prop="newId" align="center" label="序号" width="60"></el-table-column>
<el-table-column label="耗材名称" 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.unit }}</template>
</el-table-column>
<el-table-column label="规格型号" align="center">
<template slot-scope="scope">{{ scope.row.specification }}</template>
</el-table-column>
<el-table-column label="生产厂家" align="center">
<template slot-scope="scope">{{ scope.row.manufacturerName }}</template>
</el-table-column>
<el-table-column label="注册证号" align="center">
<template slot-scope="scope">{{ scope.row.registrationNo }}</template>
</el-table-column>
<el-table-column label="供货商" align="center">
<template slot-scope="scope">{{ scope.row.supplierShortName }}</template>
</el-table-column>
<el-table-column label="单价" align="center">
<template slot-scope="scope">¥ {{ scope.row.price }}</template>
</el-table-column>
<el-table-column label="储存温度" align="center">
<template slot-scope="scope">{{ scope.row.stockType }}</template>
</el-table-column>
<el-table-column label="库存数量" align="center">
<template slot-scope="scope">{{ scope.row.stockNumber }}</template>
</el-table-column>
</el-table>
</div>
<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>
</el-dialog>
</div>
<el-button style="margin-top: 20px" size="small" @click="back()">返回</el-button>
</div>
</template>
<script>这部分博客写作时间是在后端同学完成相应功能之后，在此基础之上得以添加相关数据用于测试与展示。
下一篇博客会从科室库角度记录入库管理，以及展示时段耗材入库汇总。
全部评论 (0)
还没有任何评论哟~