当前位置：首页 > VUE

vue实现诊断录入

2026-01-17 15:59:26VUE

Vue 实现诊断录入功能

诊断录入功能通常涉及表单输入、数据提交和验证。以下是一个基于 Vue 的实现方案：

创建诊断表单组件

<template>
  <form @submit.prevent="submitDiagnosis">
    <div class="form-group">
      <label for="diagnosis">诊断名称</label>
      <input 
        type="text" 
        id="diagnosis" 
        v-model="diagnosis.name" 
        required
      >
    </div>

    <div class="form-group">
      <label for="description">描述</label>
      <textarea 
        id="description" 
        v-model="diagnosis.description"
      ></textarea>
    </div>

    <div class="form-group">
      <label for="date">诊断日期</label>
      <input 
        type="date" 
        id="date" 
        v-model="diagnosis.date" 
        required
      >
    </div>

    <button type="submit">提交诊断</button>
  </form>
</template>

设置数据模型和方法

<script>
export default {
  data() {
    return {
      diagnosis: {
        name: '',
        description: '',
        date: new Date().toISOString().split('T')[0]
      }
    }
  },
  methods: {
    submitDiagnosis() {
      if(this.validateForm()) {
        // 提交数据到API
        this.$emit('diagnosis-submitted', this.diagnosis)
        this.resetForm()
      }
    },
    validateForm() {
      return this.diagnosis.name.trim() !== '' 
        && this.diagnosis.date.trim() !== ''
    },
    resetForm() {
      this.diagnosis = {
        name: '',
        description: '',
        date: new Date().toISOString().split('T')[0]
      }
    }
  }
}
</script>

添加样式

<style scoped>
.form-group {
  margin-bottom: 1rem;
}

label {
  display: block;
  margin-bottom: 0.5rem;
}

input, textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  background-color: #42b983;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #369f6e;
}
</style>

实现数据存储

在父组件中使用：

vue实现诊断录入

<template>
  <div>
    <DiagnosisForm @diagnosis-submitted="addDiagnosis" />
    <ul>
      <li v-for="(diag, index) in diagnoses" :key="index">
        {{ diag.name }} - {{ diag.date }}
      </li>
    </ul>
  </div>
</template>

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

export default {
  components: {
    DiagnosisForm
  },
  data() {
    return {
      diagnoses: []
    }
  },
  methods: {
    addDiagnosis(diagnosis) {
      this.diagnoses.push(diagnosis)
      // 这里可以添加API调用以持久化数据
    }
  }
}
</script>

增强功能建议

添加诊断代码字段（如ICD编码）
实现诊断分类选择（内科/外科等）
添加严重程度评级
支持多选诊断
添加表单验证提示信息
实现诊断历史查看功能
添加自动完成功能（从已有诊断中选择）

数据验证增强

methods: {
  validateForm() {
    const errors = []

    if(!this.diagnosis.name.trim()) {
      errors.push('诊断名称不能为空')
    }

    if(!this.diagnosis.date) {
      errors.push('请选择诊断日期')
    } else if(new Date(this.diagnosis.date) > new Date()) {
      errors.push('诊断日期不能晚于今天')
    }

    if(errors.length > 0) {
      this.$emit('validation-error', errors)
      return false
    }

    return true
  }
}

这个实现提供了基本的诊断录入功能，可以根据具体需求进一步扩展和完善。

标签: vue