选择已建档的数据填充到表单心路历程
<template>
<div>
<el-form :model="editForm" ref="editForm">
<span class="card-border-title">基本信息</span>
<div class="card-border">
<el-row>
<el-col :span="8">
<el-form-item label="档案号">
<el-input v-model="editForm.hisPatientId"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="姓名">
<template v-if="isSelectVisible">
<el-select v-model="editForm.patientName" filterable remote reserve-keyword
placeholder="请输入姓名查询已建档" :filter-method="queryPatientList" @change="handleChange"
:loading="loading">
<el-option v-for="patient in patientList" :key="patient.patientId"
:label="patient.patientName" :value="patient.patientId">
<span style="float: left">{{ patient.patientName }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ patient.patientId
}}</span>
</el-option>
</el-select>
</template>
<template v-else>
<el-input v-model="editForm.patientName" placeholder="请输入姓名"></el-input>
</template>
<el-button @click="toggleSelect">{{ buttonText }}</el-button>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="性别">
<el-select v-model="editForm.gender">
<el-option label="男" :value="0"></el-option>
<el-option label="女" :value="1"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="出生日期">
<el-date-picker v-model="editForm.birthDay" type="date" class="datePicker"
format="yyyy年MM月dd日"></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="年龄">
<el-input v-model="editForm.age" type="number"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="联系电话">
<el-input v-model="editForm.phoneNum"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="残疾证号(目前没有接口)">
<el-input v-model="editForm.disabilityCertificateNumber"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="残疾类别">
<el-select v-model="editForm.disabilityType">
<el-option label="类别 1" value="type1"></el-option>
<el-option label="类别 2" value="type2"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="残疾程度">
<el-select v-model="editForm.disabilityDegree">
<el-option label="轻度" value="mild"></el-option>
<el-option label="中度" value="moderate"></el-option>
<el-option label="重度" value="severe"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="身份证号">
<el-input v-model="editForm.idCard"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="患者类别">
<el-select v-model="editForm.patientType">
<el-option label="门诊" :value="1"></el-option>
<el-option label="住院" :value="2"></el-option>
<el-option label="其他" :value="3"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="患者状态">
<el-select v-model="editForm.patientStates">
<el-option label="在院" :value="1"></el-option>
<el-option label="出院" :value="2"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
</el-row>
<el-row>
<el-col :span="16">
<el-form-item label="详细地址">
<el-input v-model="editForm.addr"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="id">
<el-input v-model="editForm.patientId" disabled></el-input>
</el-form-item>
</el-col>
</el-row>
</div>
<span class="card-border-title">就诊信息</span>
<div class="card-border">
<el-row>
<el-col :span="8">
<el-form-item label="就诊科室名称">
<el-input v-model="editForm.departmentName" disabled></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="就诊科室编码">
<el-input v-model="editForm.departmentCode" disabled></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="医保费别">
<el-select v-model="editForm.insuranceType">
<el-option label="自费" :value="0"></el-option>
<el-option label="医保" :value="1"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="就诊医生">
<el-input v-model="editForm.doctor"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="病区">
<el-input v-model="editForm.sickRegion"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="床号">
<el-input v-model="editForm.bedNum"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="主诉">
<el-input v-model="editForm.chiefComplaint"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="主要诊断">
<el-input v-model="editForm.coreDiagnosis"></el-input>
</el-form-item>
</el-col>
</el-row>
</div>
</el-form>
</div>
</template>
<script>
import { queryPatientInfo } from '@/api/patients/files/info.js'
import Vue from 'vue';
export default {
data() {
return {
editForm: {
hisPatientId: '',
patientName: '',
gender: '',
birthDay: '',
age: '',
phoneNum: '',
disabilityCertificateNumber: '',
disabilityType: '',
disabilityDegree: '',
idCard: '',
patientType: '',
patientStates: '',
detailAddr: '',
patientId: '',
departmentName: '',
departmentCode: '',
insuranceType: '',
doctor: '',
sickRegion: '',
bedNum: '',
chiefComplaint: '',
coreDiagnosis: ''
},
patientList: [],
loading: false,
isSelectVisible: false,
buttonText: '选择已建档'
};
},
mounted() {
},
methods: {
async queryAllPatientInfo(query, page = 1, size = 10) {
try {
let res = await queryPatientInfo({
page,
size,
patientName: query
});
return res;
} catch (error) {
console.log(error);
this.$notify({
title: '提示',
message: '网络出错了，请稍后再试',
type: 'danger'
});
}
},
async queryPatientList(query) {
if (query) {
this.loading = true;
try {
let res = await this.queryAllPatientInfo(query);
if (res && res.code === 0 && res.content) {
this.patientList = res.content;
console.log(this.patientList, "this.patientList");
} else {
this.patientList = [];
}
} catch (error) {
console.log(error);
} finally {
this.loading = false;
}
}
},
handleChange(value) {
console.log("handleChange", value);
const targetPatient = this.patientList.find(patient => patient.patientId === value);
if (targetPatient) {
Object.keys(this.editForm).forEach(key => {
Vue.set(this.editForm, key, '');
});
Object.keys(targetPatient).forEach(key => {
Vue.set(this.editForm, key, targetPatient[key]);
});
}
},
toggleSelect() {
this.isSelectVisible =!this.isSelectVisible;
if (this.isSelectVisible) {
this.buttonText = '新建接诊';
} else {
this.buttonText = '选择已建档';
Object.keys(this.editForm).forEach(key => {
Vue.set(this.editForm, key, '');
});
}
}
}
};
</script>
<style></style>
