vue 实现诊断录入

Vue 实现诊断录入功能

实现诊断录入功能需要结合表单处理、数据绑定和可能的API交互。以下是一个完整的实现方案：

表单设计与数据绑定

使用Vue的v-model实现表单数据双向绑定：

<template>
  <div class="diagnosis-form">
    <form @submit.prevent="submitDiagnosis">
      <div class="form-group">
        <label for="patientId">患者ID</label>
        <input type="text" id="patientId" v-model="diagnosis.patientId" required>
      </div>

      <div class="form-group">
        <label for="diagnosisCode">诊断代码</label>
        <input type="text" id="diagnosisCode" v-model="diagnosis.code" required>
      </div>

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

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

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

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

数据模型与提交逻辑

在Vue组件中定义数据模型和处理逻辑：

<script>
export default {
  data() {
    return {
      diagnosis: {
        patientId: '',
        code: '',
        name: '',
        date: new Date().toISOString().slice(0, 10),
        description: ''
      }
    }
  },
  methods: {
    async submitDiagnosis() {
      try {
        // 这里替换为实际的API调用
        const response = await axios.post('/api/diagnoses', this.diagnosis)
        alert('诊断信息已保存')
        this.resetForm()
      } catch (error) {
        console.error('保存诊断失败:', error)
        alert('保存诊断失败，请重试')
      }
    },
    resetForm() {
      this.diagnosis = {
        patientId: '',
        code: '',
        name: '',
        date: new Date().toISOString().slice(0, 10),
        description: ''
      }
    }
  }
}
</script>

样式优化

添加基础样式提升用户体验：

<style scoped>
.diagnosis-form {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

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

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

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

高级功能扩展

对于更复杂的诊断录入需求，可以考虑以下增强功能：

诊断代码自动补全

集成ICD-10代码自动补全功能：

data() {
  return {
    diagnosisCodes: [],
    searchQuery: ''
  }
},
methods: {
  async searchCodes(query) {
    if (query.length > 2) {
      const response = await axios.get(`/api/icd-codes?q=${query}`)
      this.diagnosisCodes = response.data
    }
  }
}

表单验证增强

使用Vuelidate进行更严格的表单验证：

import { required, minLength } from 'vuelidate/lib/validators'

export default {
  validations: {
    diagnosis: {
      patientId: { required },
      code: { required, minLength: minLength(3) },
      name: { required }
    }
  }
}

多诊断同时录入

实现批量诊断录入功能：

data() {
  return {
    diagnoses: [
      { code: '', name: '', date: '', description: '' }
    ]
  }
},
methods: {
  addDiagnosis() {
    this.diagnoses.push({
      code: '', 
      name: '', 
      date: new Date().toISOString().slice(0, 10), 
      description: ''
    })
  },
  removeDiagnosis(index) {
    this.diagnoses.splice(index, 1)
  }
}

以上实现方案涵盖了诊断录入的基本功能和可能的扩展方向，可以根据实际需求进行调整和优化。