element-ui 写一段 西医病案首页编辑界面
时间: 2023-07-08 16:50:19 浏览: 115
病案首页-主诊断-DRGs
以下是一个简单的使用Element UI编写西医病案首页编辑界面的示例代码:
```
<template>
<el-form :model="form" label-width="120px">
<el-row>
<el-col :span="12">
<el-form-item label="住院号" prop="admissionNumber">
<el-input v-model="form.admissionNumber"></el-input>
</el-form-item>
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="性别" prop="gender">
<el-radio-group v-model="form.gender">
<el-radio label="男">男</el-radio>
<el-radio label="女">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model.number="form.age" type="number"></el-input>
</el-form-item>
<el-form-item label="住院时间" prop="admissionDate">
<el-date-picker v-model="form.admissionDate" type="date"></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="主治医师" prop="attendingDoctor">
<el-input v-model="form.attendingDoctor"></el-input>
</el-form-item>
<el-form-item label="科室" prop="department">
<el-input v-model="form.department"></el-input>
</el-form-item>
<el-form-item label="床号" prop="bedNumber">
<el-input v-model="form.bedNumber"></el-input>
</el-form-item>
<el-form-item label="入院诊断" prop="admissionDiagnosis">
<el-input v-model="form.admissionDiagnosis"></el-input>
</el-form-item>
<el-form-item label="住院天数" prop="admissionDays">
<el-input v-model.number="form.admissionDays" type="number"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="主要病情" prop="mainCondition">
<el-input v-model="form.mainCondition" type="textarea"></el-input>
</el-form-item>
<el-form-item label="治疗经过" prop="treatmentProcess">
<el-input v-model="form.treatmentProcess" type="textarea"></el-input>
</el-form-item>
<el-form-item label="出院情况" prop="dischargeCondition">
<el-input v-model="form.dischargeCondition" type="textarea"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">保存</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
admissionNumber: '',
name: '',
gender: '',
age: '',
admissionDate: '',
attendingDoctor: '',
department: '',
bedNumber: '',
admissionDiagnosis: '',
admissionDays: '',
mainCondition: '',
treatmentProcess: '',
dischargeCondition: ''
}
};
},
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
// 提交表单数据的逻辑
console.log(this.form);
this.$message.success('保存成功');
} else {
this.$message.error('表单验证失败');
return false;
}
});
}
}
};
</script>
```
这个示例中使用了Element UI的表单组件,包括输入框、单选框、日期选择器等等。在表单提交时,使用了表单验证功能来确保数据的有效性。你可以根据实际需要进行修改和扩展。
阅读全文