suojin
/
HIYL-localization-web
23
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

病例库-页面搭建

Browse Source
main
ysn 2 weeks ago
parent d8d1fff4cb
commit 0b17888325
2 changed files with 776 additions and 755 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 428
      src/views/cases/components/CaseFormDialog.vue
  2. 1101
      src/views/cases/index.vue

428
src/views/cases/components/CaseFormDialog.vue
Unescape View File

@ -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>

1101
src/views/cases/index.vue
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save