山东大学项目实训开发日志——基于vue+springboot的医院耗材管理系统(10)_vue 批量出库,判断出库数量不能大于库存数量-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46915587/article/details/124899785

本次项目实训中，针对基于vue+springboot的医院耗材管理系统进行了改进，主要增加了"申请人"字段，以明确科室库出库方向。同时，为了保证数据的正确性，实现了输入数据的检查规则“inputRules”，特别是对出库数量的数字验证和申领人的非空检查。出库确认方法进行了相应调整，当出库数量超过库存时将导致操作失败，从而增强了系统流程的合理性及数据合法性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这次还是修修补补。

首先在科室库出库的界面新增了“申请人”这一项内容，用来确定科室库的出库方向。

此外新增了对输入数据的检查规则“inputRules”。

这是前端页面的代码

<el-dialog
      :title="'出库信息'"
      :visible.sync="editDialogVisible"
      width="40%">
      <el-form :model="StockCentre"
               :rules="inputRules"
               ref="StockCentreForm"
               label-width="150px" size="small">
        <el-form-item label="出库数量">
          <el-input v-model="StockCentre.outNumber" style="width: 250px"></el-input>
        </el-form-item>
        <el-form-item label="申领人">
          <el-input v-model="StockCentre.applier" style="width: 250px"></el-input>
        </el-form-item>
      </el-form>

传入数据的修改，新增了applier属性。

const defaultStockCentre = {
  id: null,
  stockNo: null,
  stockType: 3,
  reagentId: null,
  reagentName: null,
  reagentType: null,
  reagentUnit: null,
  factory: null,
  supplierName: null,
  quantity: null,
  reagentStatus: null,
  reagentTemp: null,
  lowStock: null,
  overdue: null,
  overdueStock: null,
  outNumber: null,
  branchName: null,
  applier: null,
};

对输入数据的检查代码，可见对出库数量进行了是否为数字的检查，对申领人仅进行非空检查。

inputRules: {       
        outNumber: [
          {required: true, message: '请输入出库数量', trigger: 'blur'},
          {
            type: "number", transform(value) {
              return Number(value);
            }, message: '请输入数字', trigger: 'blur'
          }
        ],    
        applier: '',
      },

修改后的出库确认方法：

当出库数量大于库存时会出库失败。

handleEditDialogConfirm() {
      this.$confirm('是否要确认?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if(this.StockCentre.outNumber <= this.StockCentre.quantity){
          outFromBranchStock(this.StockCentre).then(response => {
          this.$message({
            message: '出库成功！',
            type: 'success'
          });
          this.editDialogVisible = false;
          this.getList();
        });
        } else {
          console.log('出库数量多于库存数量，参数验证不合法！');
          this.$message({
            message: '出库失败！',
            type: 'warning'
          });
          return false
        }
      })
    },

此次改动不仅优化了现实情况下的流程，也确保了输入数据的合法性。