vue实现诊断录入
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>实现数据存储
在父组件中使用：
<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
}
}这个实现提供了基本的诊断录入功能，可以根据具体需求进一步扩展和完善。
