vue实现药品费用录入

Vue 实现药品费用录入功能

药品费用录入功能通常涉及表单设计、数据绑定、验证和提交等环节。以下是一个基于 Vue 的实现方案：

表单设计与数据绑定

创建药品费用录入表单，包含药品名称、单价、数量、总价等字段，使用 v-model 实现双向数据绑定。

<template>
  <div>
    <form @submit.prevent="submitForm">
      <div>
        <label>药品名称</label>
        <input v-model="medicine.name" type="text" required>
      </div>
      <div>
        <label>单价</label>
        <input v-model="medicine.price" type="number" min="0" step="0.01" required>
      </div>
      <div>
        <label>数量</label>
        <input v-model="medicine.quantity" type="number" min="1" required>
      </div>
      <div>
        <label>总价</label>
        <input v-model="totalPrice" type="number" readonly>
      </div>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

计算总价

使用计算属性自动计算药品总价，确保单价或数量变化时总价实时更新。

<script>
export default {
  data() {
    return {
      medicine: {
        name: '',
        price: 0,
        quantity: 1
      }
    }
  },
  computed: {
    totalPrice() {
      return (this.medicine.price * this.medicine.quantity).toFixed(2)
    }
  },
  methods: {
    submitForm() {
      console.log('提交的药品数据:', this.medicine)
    }
  }
}
</script>

表单验证

添加表单验证逻辑，确保输入数据的有效性。

methods: {
  submitForm() {
    if (!this.medicine.name) {
      alert('请输入药品名称')
      return
    }
    if (this.medicine.price <= 0) {
      alert('单价必须大于0')
      return
    }
    if (this.medicine.quantity <= 0) {
      alert('数量必须大于0')
      return
    }
    console.log('提交的药品数据:', this.medicine)
  }
}

数据提交与存储

将表单数据提交到后端或存储在本地，根据实际需求选择适当的数据存储方式。

methods: {
  async submitForm() {
    try {
      const response = await axios.post('/api/medicines', this.medicine)
      console.log('数据提交成功:', response.data)
    } catch (error) {
      console.error('数据提交失败:', error)
    }
  }
}

组件化设计

对于复杂的药品费用录入系统，可以将表单拆分为可复用的组件，提高代码的可维护性。

<template>
  <div>
    <medicine-form @submit="handleSubmit"></medicine-form>
  </div>
</template>

<script>
import MedicineForm from './MedicineForm.vue'

export default {
  components: {
    MedicineForm
  },
  methods: {
    handleSubmit(medicineData) {
      console.log('接收到的药品数据:', medicineData)
    }
  }
}
</script>

以上实现方案涵盖了药品费用录入的基本功能，可根据实际需求进行扩展和调整。