山东大学项目实训开发日志——基于vue+springboot的医院耗材管理系统（九）
发布时间
阅读量：
阅读量
这次主要来记录一下库存管理中的库损登记功能以及过期预警的相关内容。
-
可以看到，在库存管理检索页面的库存表单里，最后一列为操作，并且被折叠始终在最右侧显示。操作提供的功能键是“库损登记”
通过点击“库损登记”键，我们可以给该行对应的耗材的状态进行符合实际的相应更改：
譬如在这里选择“用尽”：
在刷新之后，我们可以看到该耗材状态的变更，由“在库”变为“用尽”：
-
同时，可以注意到这个表单的有一项为过期预警，这也是开始没有考虑到，但是后来发现根据实际情况，其实很有必要的一项内容：
其对应的代码也很简单，只需进行一下计算：
overdue({row, columnIndex}) {
//date1结束时间
let date1 = new Date(row.expireDate);
//date2当前时间
let date2 = new Date();
date1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
date2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
const diff = date1.getTime() - date2.getTime(); //目标时间减去当前时间
const diffDate = diff / (24 * 60 * 60 * 1000); //计算当前时间与结束时间之间相差天数
if (diffDate <= 0 && columnIndex == 14) {
return {
background: 'red'
}
}
if (diffDate > 0 && diffDate <= row.overdue && columnIndex == 14) {
return {
background: 'orange'
}
}
}
并且我们设置了，如果过期时间小于两周，会将对应数据栏变为橙色，以示预警。这一点在库存列表同样有体现：
与这个相联动的，我们在首页也设置了弹窗——低库存和过期预警（在下图右下角）：
其对应代码也很清晰：
<el-col :span="6">
<div v-show="isTrue" class="total-frame3" @click="lowStock()" style="cursor:pointer;" v-loading="loading">
<img :src="img_home_low_stock" class="total-icon">
<div class="total-title">低库存预警</div>
<div class="total-value">{{ listQuery.lowStockCount }}</div>
</div>
</el-col>
<el-col :span="6">
<div v-show="isTrue" class="total-frame4" @click="overdueStock()" style="cursor:pointer;" v-loading="loading">
<img :src="img_home_overdue_count" class="total-icon">
<div class="total-title">过期预警</div>
<div class="total-value">{{ listQuery.overdueCount }}</div>
</div>
</el-col>
全部评论 (0)
还没有任何评论哟~