parent
d8d1fff4cb
commit
0b17888325
2 changed files with 776 additions and 755 deletions
@ -0,0 +1,428 @@ |
|||||||
|
<template> |
||||||
|
<el-dialog :title="title" :visible.sync="visible" width="60%" append-to-body> |
||||||
|
<el-form ref="form" :model="formData" :rules="rules" label-width="90px"> |
||||||
|
<el-row :gutter="20"> |
||||||
|
<el-col :span="6"> |
||||||
|
<el-form-item label="患者姓名" prop="patientName"> |
||||||
|
<el-input |
||||||
|
v-model="formData.patientName" |
||||||
|
placeholder="请输入患者姓名" |
||||||
|
clearable |
||||||
|
:disabled="isEditMode" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<el-form-item label="性别" prop="gender"> |
||||||
|
<el-select |
||||||
|
v-model="formData.gender" |
||||||
|
style="width: 100%" |
||||||
|
placeholder="请选择性别" |
||||||
|
filterable |
||||||
|
clearable |
||||||
|
:disabled="isEditMode" |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="item in genderList" |
||||||
|
:key="item.value" |
||||||
|
:label="item.label" |
||||||
|
:value="item.value" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="8"> |
||||||
|
<el-form-item label="年龄" prop="age"> |
||||||
|
<el-input-number |
||||||
|
v-model="formData.age" |
||||||
|
placeholder="请输入年龄" |
||||||
|
clearable |
||||||
|
:min="0" |
||||||
|
style="width: 100%" |
||||||
|
:disabled="isEditMode" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="4"> |
||||||
|
<el-form-item label="" prop="ageUnit" label-width="0"> |
||||||
|
<el-select |
||||||
|
v-model="formData.ageUnit" |
||||||
|
style="width: 100%" |
||||||
|
placeholder="请选择年龄单位" |
||||||
|
filterable |
||||||
|
clearable |
||||||
|
:disabled="isEditMode" |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="item in ageUnitList" |
||||||
|
:key="item.value" |
||||||
|
:label="item.label" |
||||||
|
:value="item.value" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="12"> |
||||||
|
<el-form-item label="病例号" prop="patientRecordNumber"> |
||||||
|
<el-input |
||||||
|
v-model="formData.patientRecordNumber" |
||||||
|
placeholder="请输入病例号" |
||||||
|
clearable |
||||||
|
:disabled="isEditMode" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="12"> |
||||||
|
<el-form-item label="检查类型" prop="checkType"> |
||||||
|
<el-select |
||||||
|
v-model="formData.checkType" |
||||||
|
style="width: 100%" |
||||||
|
placeholder="请选择检查类型" |
||||||
|
filterable |
||||||
|
clearable |
||||||
|
:disabled="isEditMode" |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="item in checkTypeList" |
||||||
|
:key="item.value" |
||||||
|
:label="item.label" |
||||||
|
:value="item.value" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="12"> |
||||||
|
<el-form-item label="门诊号" prop="outpatientNumber"> |
||||||
|
<el-input |
||||||
|
v-model="formData.outpatientNumber" |
||||||
|
placeholder="请输入门诊号" |
||||||
|
clearable |
||||||
|
:disabled="isEditMode" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="12"> |
||||||
|
<el-form-item label="住院号" prop="inpatientNumber"> |
||||||
|
<el-input |
||||||
|
v-model="formData.inpatientNumber" |
||||||
|
placeholder="请输入住院号" |
||||||
|
clearable |
||||||
|
:disabled="isEditMode" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="12"> |
||||||
|
<el-form-item label="病区号" prop="wardNumber"> |
||||||
|
<el-input |
||||||
|
v-model="formData.wardNumber" |
||||||
|
placeholder="请输入病区号" |
||||||
|
clearable |
||||||
|
:disabled="isEditMode" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="12"> |
||||||
|
<el-form-item label="床位号" prop="bedNumber"> |
||||||
|
<el-input |
||||||
|
v-model="formData.bedNumber" |
||||||
|
placeholder="请输入床位号" |
||||||
|
clearable |
||||||
|
:disabled="isEditMode" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="12"> |
||||||
|
<el-form-item label="申请医师" prop="applyDoctor"> |
||||||
|
<el-input |
||||||
|
v-model="formData.applyDoctor" |
||||||
|
placeholder="请输入申请医师" |
||||||
|
clearable |
||||||
|
:disabled="isEditMode" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="12"> |
||||||
|
<el-form-item label="专家" prop="expertDoctor"> |
||||||
|
<el-select |
||||||
|
v-model="formData.expertDoctor" |
||||||
|
multiple |
||||||
|
style="width: 100%" |
||||||
|
placeholder="请选择专家" |
||||||
|
filterable |
||||||
|
clearable |
||||||
|
:disabled="isEditMode" |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="item in doctorList" |
||||||
|
:key="item.value" |
||||||
|
:label="item.label" |
||||||
|
:value="item.value" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="12"> |
||||||
|
<el-form-item label="检查设备" prop="checkDevice"> |
||||||
|
<el-select |
||||||
|
v-model="formData.checkDevice" |
||||||
|
multiple |
||||||
|
style="width: 100%" |
||||||
|
placeholder="请选择检查设备" |
||||||
|
filterable |
||||||
|
clearable |
||||||
|
:disabled="isEditMode" |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="item in checkDeviceList" |
||||||
|
:key="item.value" |
||||||
|
:label="item.label" |
||||||
|
:value="item.value" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="12"> |
||||||
|
<el-form-item label="检查部位" prop="checkPart"> |
||||||
|
<el-select |
||||||
|
v-model="formData.checkPart" |
||||||
|
multiple |
||||||
|
style="width: 100%" |
||||||
|
placeholder="请选择检查部位" |
||||||
|
filterable |
||||||
|
clearable |
||||||
|
:disabled="isEditMode" |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="item in checkPartList" |
||||||
|
:key="item.value" |
||||||
|
:label="item.label" |
||||||
|
:value="item.value" |
||||||
|
> |
||||||
|
<span style="float: left">{{ item.label }}</span> |
||||||
|
<span style="float: right; color: #8492a6; font-size: 13px"> |
||||||
|
{{ item.category }} |
||||||
|
</span> |
||||||
|
</el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="12"> |
||||||
|
<el-form-item label="检查诊室" prop="checkRoom"> |
||||||
|
<el-select |
||||||
|
v-model="formData.checkRoom" |
||||||
|
style="width: 100%" |
||||||
|
placeholder="请选择检查诊室" |
||||||
|
@change="handleCheckRoomChange" |
||||||
|
filterable |
||||||
|
clearable |
||||||
|
:disabled="isEditMode" |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="item in checkRoomList" |
||||||
|
:key="item.value" |
||||||
|
:label="item.label" |
||||||
|
:value="item.value" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="12"> |
||||||
|
<el-form-item label="自定义部位" prop="customPart"> |
||||||
|
<el-input |
||||||
|
v-model="formData.customPart" |
||||||
|
placeholder="请输入自定义部位" |
||||||
|
clearable |
||||||
|
:disabled="isEditMode" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="12"> |
||||||
|
<el-form-item label="预约日期" prop="reserveDate"> |
||||||
|
<el-date-picker |
||||||
|
v-model="formData.reserveDate" |
||||||
|
type="date" |
||||||
|
value-format="yyyy-MM-dd" |
||||||
|
placeholder="请选择预约日期" |
||||||
|
@change="handleDateChange" |
||||||
|
style="width: 100%" |
||||||
|
clearable |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="12"> |
||||||
|
<el-form-item label="" prop="reserveTime"> |
||||||
|
<el-select |
||||||
|
v-model="formData.reserveTime" |
||||||
|
placeholder="请选择预约时间" |
||||||
|
style="width: 100%" |
||||||
|
filterable |
||||||
|
clearable |
||||||
|
> |
||||||
|
<el-option label="自动" value="auto" /> |
||||||
|
<el-option |
||||||
|
v-for="slot in availableTimeSlots" |
||||||
|
:key="slot.value" |
||||||
|
:label="slot.label" |
||||||
|
:value="slot.value" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</el-form> |
||||||
|
<div slot="footer" class="dialog-footer"> |
||||||
|
<el-button type="primary" @click="submitForm">确 定</el-button> |
||||||
|
<el-button @click="cancel">取 消</el-button> |
||||||
|
</div> |
||||||
|
</el-dialog> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { addCase, updateCase } from "@/api/cases/index.js"; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "CaseFormDialog", |
||||||
|
props: { |
||||||
|
visible: { |
||||||
|
type: Boolean, |
||||||
|
default: false, |
||||||
|
}, |
||||||
|
isEdit: { |
||||||
|
type: Boolean, |
||||||
|
default: false, |
||||||
|
}, |
||||||
|
formData: { |
||||||
|
type: Object, |
||||||
|
default: () => ({}), |
||||||
|
}, |
||||||
|
// 选项列表 |
||||||
|
genderList: { |
||||||
|
type: Array, |
||||||
|
default: () => [], |
||||||
|
}, |
||||||
|
checkTypeList: { |
||||||
|
type: Array, |
||||||
|
default: () => [], |
||||||
|
}, |
||||||
|
ageUnitList: { |
||||||
|
type: Array, |
||||||
|
default: () => [], |
||||||
|
}, |
||||||
|
doctorList: { |
||||||
|
type: Array, |
||||||
|
default: () => [], |
||||||
|
}, |
||||||
|
checkDeviceList: { |
||||||
|
type: Array, |
||||||
|
default: () => [], |
||||||
|
}, |
||||||
|
checkPartList: { |
||||||
|
type: Array, |
||||||
|
default: () => [], |
||||||
|
}, |
||||||
|
checkRoomList: { |
||||||
|
type: Array, |
||||||
|
default: () => [], |
||||||
|
}, |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
availableTimeSlots: [], |
||||||
|
rules: { |
||||||
|
patientName: [ |
||||||
|
{ required: true, message: "患者姓名不能为空", trigger: "blur" }, |
||||||
|
], |
||||||
|
gender: [ |
||||||
|
{ required: true, message: "性别不能为空", trigger: "change" }, |
||||||
|
], |
||||||
|
age: [ |
||||||
|
{ required: true, message: "年龄不能为空", trigger: "blur" }, |
||||||
|
], |
||||||
|
checkType: [ |
||||||
|
{ required: true, message: "检查类型不能为空", trigger: "change" }, |
||||||
|
], |
||||||
|
}, |
||||||
|
}; |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
title() { |
||||||
|
return this.isEdit ? "修改病例" : "新增病例"; |
||||||
|
}, |
||||||
|
isEditMode() { |
||||||
|
return this.isEdit; |
||||||
|
}, |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
visible(val) { |
||||||
|
if (val && this.formData.checkRoom) { |
||||||
|
this.fetchTimeSlots(this.formData.checkRoom); |
||||||
|
} |
||||||
|
}, |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
handleCheckRoomChange(roomId) { |
||||||
|
this.formData.reserveTime = ""; |
||||||
|
if (roomId && this.formData.reserveDate) { |
||||||
|
this.fetchTimeSlots(roomId); |
||||||
|
} else { |
||||||
|
this.availableTimeSlots = []; |
||||||
|
} |
||||||
|
}, |
||||||
|
handleDateChange(date) { |
||||||
|
this.formData.reserveTime = ""; |
||||||
|
if (this.formData.checkRoom && date) { |
||||||
|
this.fetchTimeSlots(this.formData.checkRoom); |
||||||
|
} else { |
||||||
|
this.availableTimeSlots = []; |
||||||
|
} |
||||||
|
}, |
||||||
|
async fetchTimeSlots(roomId) { |
||||||
|
const mockData = { |
||||||
|
1: [ |
||||||
|
{ label: "13:30-14:00", value: "13:30-14:00" }, |
||||||
|
{ label: "14:00-14:30", value: "14:00-14:30" }, |
||||||
|
{ label: "14:30-15:00", value: "14:30-15:00" }, |
||||||
|
{ label: "15:00-15:30", value: "15:00-15:30" }, |
||||||
|
], |
||||||
|
2: [ |
||||||
|
{ label: "09:00-09:30", value: "09:00-09:30" }, |
||||||
|
{ label: "09:30-10:00", value: "09:30-10:00" }, |
||||||
|
{ label: "10:00-10:30", value: "10:00-10:30" }, |
||||||
|
{ label: "10:30-11:00", value: "10:30-11:00" }, |
||||||
|
], |
||||||
|
}; |
||||||
|
this.availableTimeSlots = mockData[roomId] || []; |
||||||
|
}, |
||||||
|
submitForm() { |
||||||
|
this.$refs["form"].validate((valid) => { |
||||||
|
if (valid) { |
||||||
|
const api = this.isEdit ? updateCase : addCase; |
||||||
|
api(this.formData).then(() => { |
||||||
|
this.$modal.msgSuccess(this.isEdit ? "修改成功" : "新增成功"); |
||||||
|
this.$emit("success", this.formData); |
||||||
|
this.closeDialog(); |
||||||
|
}); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
cancel() { |
||||||
|
this.closeDialog(); |
||||||
|
}, |
||||||
|
closeDialog() { |
||||||
|
this.$emit("update:visible", false); |
||||||
|
this.$emit("close"); |
||||||
|
this.resetForm(); |
||||||
|
}, |
||||||
|
resetForm() { |
||||||
|
this.$refs["form"]?.resetFields(); |
||||||
|
this.availableTimeSlots = []; |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.dialog-footer { |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
</style> |
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue