vue 实现诊断录入

实现诊断录入功能

在Vue中实现诊断录入功能需要结合表单组件、数据绑定和事件处理。以下是一个完整的实现方案：

表单结构设计

使用Vue的v-model实现双向数据绑定，创建诊断录入表单：

<template>
  <div class="diagnosis-form">
    <h3>诊断信息录入</h3>
    <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="diagnosisDate">诊断日期</label>
        <input type="date" id="diagnosisDate" v-model="diagnosis.date" 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="description">详细描述</label>
        <textarea id="description" v-model="diagnosis.description" rows="4"></textarea>
      </div>

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

数据模型与逻辑

定义数据模型和处理逻辑：

<script>
export default {
  data() {
    return {
      diagnosis: {
        patientId: '',
        date: '',
        code: '',
        name: '',
        description: ''
      }
    }
  },
  methods: {
    submitDiagnosis() {
      // 这里可以添加表单验证逻辑
      if(this.validateForm()) {
        // 提交数据到API或存储
        this.$emit('diagnosis-submitted', this.diagnosis);
        // 重置表单
        this.resetForm();
      }
    },
    validateForm() {
      // 简单的验证示例
      return this.diagnosis.patientId && 
             this.diagnosis.date && 
             this.diagnosis.code && 
             this.diagnosis.name;
    },
    resetForm() {
      this.diagnosis = {
        patientId: '',
        date: '',
        code: '',
        name: '',
        description: ''
      }
    }
  }
}
</script>

样式设计

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

<style scoped>
.diagnosis-form {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background: #f5f5f5;
  border-radius: 8px;
}

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

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

input[type="text"],
input[type="date"],
textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.submit-btn {
  background-color: #4CAF50;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.submit-btn:hover {
  background-color: #45a049;
}
</style>

高级功能扩展

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

诊断代码自动完成

集成医疗编码系统如ICD-10，提供自动完成功能：

// 在组件中添加
data() {
  return {
    diagnosisCodes: [], // 从API加载的代码列表
    filteredCodes: []
  }
},
methods: {
  searchCodes(query) {
    this.filteredCodes = this.diagnosisCodes.filter(code => 
      code.toLowerCase().includes(query.toLowerCase())
    );
  }
}

历史诊断记录

显示患者的历史诊断记录，避免重复录入：

<div v-if="patientHistory.length > 0" class="history-section">
  <h4>历史诊断记录</h4>
  <ul>
    <li v-for="(item, index) in patientHistory" :key="index">
      {{ item.date }} - {{ item.name }} ({{ item.code }})
    </li>
  </ul>
</div>

多诊断录入

允许一次录入多个诊断：

data() {
  return {
    diagnoses: [{
      code: '',
      name: '',
      description: ''
    }]
  }
},
methods: {
  addDiagnosis() {
    this.diagnoses.push({
      code: '',
      name: '',
      description: ''
    });
  },
  removeDiagnosis(index) {
    this.diagnoses.splice(index, 1);
  }
}

与后端集成

实现与后端API的集成，保存诊断数据：

methods: {
  async submitDiagnosis() {
    try {
      const response = await axios.post('/api/diagnoses', this.diagnosis);
      console.log('诊断已保存', response.data);
      this.$emit('diagnosis-saved', response.data);
    } catch (error) {
      console.error('保存诊断失败', error);
    }
  }
}

表单验证增强

使用Vuelidate等库进行更全面的表单验证：

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

export default {
  validations: {
    diagnosis: {
      patientId: { required },
      date: { required },
      code: { required, minLength: minLength(3) },
      name: { required }
    }
  },
  methods: {
    submitDiagnosis() {
      this.$v.$touch();
      if(!this.$v.$invalid) {
        // 提交逻辑
      }
    }
  }
}

响应式布局

确保表单在不同设备上都能良好显示：

@media (max-width: 768px) {
  .diagnosis-form {
    padding: 15px;
  }

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

以上方案提供了从基础到高级的诊断录入功能实现，可根据实际需求进行调整和扩展。