vue实现药品费用录入

Vue实现药品费用录入功能

功能需求分析 药品费用录入通常涉及表单输入、数据校验、计算和提交等环节。需要实现药品名称、数量、单价自动计算总价以及表单验证功能。

核心实现步骤

数据模型设计

data() {
  return {
    medicineForm: {
      name: '',
      quantity: 1,
      price: 0,
      total: 0
    },
    medicineList: []
  }
}

表单模板部分

<template>
  <div class="medicine-form">
    <el-form :model="medicineForm" :rules="rules" ref="formRef">
      <el-form-item label="药品名称" prop="name">
        <el-input v-model="medicineForm.name" placeholder="输入药品名称"/>
      </el-form-item>

      <el-form-item label="数量" prop="quantity">
        <el-input-number 
          v-model="medicineForm.quantity" 
          :min="1" 
          @change="calculateTotal"/>
      </el-form-item>

      <el-form-item label="单价(元)" prop="price">
        <el-input 
          v-model.number="medicineForm.price" 
          type="number"
          @input="calculateTotal"/>
      </el-form-item>

      <el-form-item label="总价(元)">
        <span class="total-price">{{ medicineForm.total.toFixed(2) }}</span>
      </el-form-item>

      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form>

    <el-table :data="medicineList">
      <!-- 表格列定义 -->
    </el-table>
  </div>
</template>

计算总价方法

methods: {
  calculateTotal() {
    this.medicineForm.total = 
      this.medicineForm.quantity * this.medicineForm.price
  }
}

表单验证规则

data() {
  return {
    rules: {
      name: [
        { required: true, message: '请输入药品名称', trigger: 'blur' }
      ],
      quantity: [
        { type: 'number', min: 1, message: '数量必须大于0', trigger: 'blur' }
      ],
      price: [
        { type: 'number', min: 0, message: '价格不能为负数', trigger: 'blur' }
      ]
    }
  }
}

提交处理

methods: {
  submitForm() {
    this.$refs.formRef.validate(valid => {
      if (valid) {
        this.medicineList.push({...this.medicineForm})
        this.resetForm()
      }
    })
  },

  resetForm() {
    this.$refs.formRef.resetFields()
    this.medicineForm.total = 0
  }
}

样式优化

.medicine-form {
  max-width: 600px;
  margin: 20px auto;
}

.total-price {
  font-weight: bold;
  color: #f56c6c;
}

扩展功能建议

1. 药品名称自动补全 可通过接入药品数据库API实现输入提示功能

   

2. 数据持久化 使用localStorage或对接后端API保存录入记录

3. 批量导入 支持Excel文件导入实现批量录入

4. 费用统计 添加按日期、药品类别的统计图表功能

5. 打印功能 实现费用清单的打印输出

该实现使用了Element UI组件库简化UI开发，核心逻辑包括表单数据绑定、实时计算和验证功能。根据实际需求可进一步扩展药品库存管理、医保报销比例计算等关联功能。