421 lines
12 KiB
Vue
421 lines
12 KiB
Vue
<template>
|
||
<div class="medical-form">
|
||
<div class="patient-name">
|
||
患者姓名：{{ patient?.patientName || '未知' }} 病历号：{{
|
||
patient?.busNo || '未知'
|
||
}}
|
||
</div>
|
||
<h2 style="text-align: center">{{ userStore.hospitalName }}</h2>
|
||
<h2 style="text-align: center">门诊病历</h2>
|
||
|
||
<!-- 滚动内容区域 -->
|
||
<div class="form-scroll-container">
|
||
<el-form
|
||
ref="formRef"
|
||
:model="formData"
|
||
:rules="rules"
|
||
label-width="100px"
|
||
label-align="left"
|
||
class="medical-full-form"
|
||
>
|
||
<h4 class="section-title">基础信息</h4>
|
||
<!-- 1. 基础信息：单行自适应排列 -->
|
||
<el-form-item class="form-section">
|
||
<div class="single-row-layout">
|
||
<el-form-item label="身高" prop="height" class="row-item">
|
||
<div class="input-with-unit">
|
||
<el-input v-model="formData.height" type="text" placeholder="请输入" />
|
||
<span class="unit">cm</span>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="体重" prop="weight" class="row-item">
|
||
<div class="input-with-unit">
|
||
<el-input v-model="formData.weight" type="text" placeholder="请输入" />
|
||
<span class="unit">kg</span>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="体温" prop="temperature" class="row-item">
|
||
<div class="input-with-unit">
|
||
<el-input v-model="formData.temperature" type="text" placeholder="请输入" />
|
||
<span class="unit">℃</span>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="脉搏" prop="pulse" class="row-item">
|
||
<div class="input-with-unit">
|
||
<el-input v-model="formData.pulse" type="text" placeholder="请输入" />
|
||
<span class="unit">次/分</span>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="发病日期" prop="onsetDate" class="row-item">
|
||
<el-date-picker
|
||
v-model="formData.onsetDate"
|
||
type="date"
|
||
placeholder="选择发病日期"
|
||
value-format="YYYY-MM-DD"
|
||
style="width: 100%"
|
||
/>
|
||
<!-- <el-input v-model="formData.onsetDate" type="date" /> -->
|
||
</el-form-item>
|
||
</div>
|
||
</el-form-item>
|
||
<h4 class="section-title">病史信息</h4>
|
||
<!-- 2. 病史信息：单行自适应排列（新增调整） -->
|
||
<el-form-item class="form-section">
|
||
<div class="single-row-layout">
|
||
<el-form-item label="现病史" prop="presentIllness" class="row-item history-item">
|
||
<el-input
|
||
v-model="formData.presentIllness"
|
||
type="textarea"
|
||
placeholder="无"
|
||
autosize
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="既往史" prop="pastIllness" class="row-item history-item">
|
||
<el-input v-model="formData.pastIllness" type="textarea" placeholder="无" autosize />
|
||
</el-form-item>
|
||
<el-form-item label="个人史" prop="personalHistory" class="row-item history-item">
|
||
<el-input
|
||
v-model="formData.personalHistory"
|
||
type="textarea"
|
||
placeholder="无"
|
||
autosize
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="过敏史" prop="allergyHistory" class="row-item history-item">
|
||
<el-input
|
||
v-model="formData.allergyHistory"
|
||
type="textarea"
|
||
placeholder="无"
|
||
autosize
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="家族史" prop="familyHistory" class="row-item history-item">
|
||
<el-input
|
||
v-model="formData.familyHistory"
|
||
type="textarea"
|
||
placeholder="无"
|
||
autosize
|
||
/>
|
||
</el-form-item>
|
||
</div>
|
||
</el-form-item>
|
||
<h4 class="section-title">主诉、查体(治疗)、处置、辅助检查</h4>
|
||
<!-- 3. 主诉（必填） -->
|
||
<el-form-item label="主诉" prop="complaint" class="required form-item-single">
|
||
<el-input
|
||
v-model="formData.complaint"
|
||
type="textarea"
|
||
placeholder="请输入主诉"
|
||
class="tall-textarea"
|
||
autosize
|
||
/>
|
||
</el-form-item>
|
||
<!-- 4. 查体、处理、辅助检查 -->
|
||
<el-form-item label="查体(治疗)" prop="physicalExam" class="form-item-single">
|
||
<el-input
|
||
v-model="formData.physicalExam"
|
||
type="textarea"
|
||
placeholder="请输入查体结果"
|
||
class="tall-textarea"
|
||
autosize
|
||
/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="处置" prop="treatment" class="form-item-single">
|
||
<el-input
|
||
v-model="formData.treatment"
|
||
type="textarea"
|
||
placeholder="请输入处理方案"
|
||
class="tall-textarea"
|
||
autosize
|
||
/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="辅助检查" prop="auxiliaryExam" class="form-item-single">
|
||
<el-input
|
||
v-model="formData.auxiliaryExam"
|
||
type="textarea"
|
||
placeholder="请输入辅助检查结果"
|
||
class="tall-textarea"
|
||
autosize
|
||
/>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { reactive, ref, onBeforeMount, onMounted, watch } from 'vue';
|
||
import useUserStore from '../store/modules/user';
|
||
import { ElInput, ElMessage, ElForm, ElFormItem } from 'element-plus';
|
||
import { patientInfo } from '../views/doctorstation/components/store/patient';
|
||
import { pa } from 'element-plus/es/locales.mjs';
|
||
|
||
defineOptions({
|
||
name: 'OutpatientMedicalRecord',
|
||
components: { ElInput, ElMessage, ElForm, ElFormItem },
|
||
});
|
||
|
||
// // Props与事件, 去掉props.patientInfo改为直接从store获取
|
||
// const props = defineProps({
|
||
// patientInfo: {
|
||
// type: Object,
|
||
// required: true,
|
||
// },
|
||
// });
|
||
const props = defineProps({});
|
||
const emits = defineEmits(['submitOk']);
|
||
|
||
// 数据初始化
|
||
const userStore = useUserStore();
|
||
const patient = ref(null);
|
||
const formRef = ref(null);
|
||
|
||
// 表单数据（全部字符类型）
|
||
const formData = reactive({
|
||
height: '', // 身高
|
||
weight: '', // 体重
|
||
temperature: '', // 体温
|
||
pulse: '', // 脉搏
|
||
onsetDate: '', // 发病日期
|
||
complaint: '', // 主诉（必填）
|
||
presentIllness: '', // 现病史
|
||
pastIllness: '', // 既往史
|
||
personalHistory: '', // 个人史
|
||
allergyHistory: '', // 过敏史
|
||
physicalExam: '', // 查体
|
||
treatment: '', // 处理
|
||
auxiliaryExam: '', // 辅助检查
|
||
familyHistory: '', // 家族史
|
||
});
|
||
|
||
// 表单校验规则
|
||
const rules = reactive({
|
||
complaint: [
|
||
{
|
||
required: true,
|
||
message: '请填写主诉',
|
||
trigger: ['blur', 'submit'],
|
||
},
|
||
],
|
||
});
|
||
|
||
// 提交函数
|
||
const submit = () => {
|
||
formRef.value.validate((isValid) => {
|
||
if (isValid) {
|
||
emits('submitOk', formData);
|
||
}
|
||
});
|
||
};
|
||
// 日期格式化工具
|
||
const formatDateTime = (date) => {
|
||
const year = date.getFullYear();
|
||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||
const day = String(date.getDate()).padStart(2, '0');
|
||
const hour = String(date.getHours()).padStart(2, '0');
|
||
const minute = String(date.getMinutes()).padStart(2, '0');
|
||
return `${year}-${month}-${day} ${hour}:${minute}`;
|
||
};
|
||
// 表单数据赋值
|
||
const setFormData = (data) => {
|
||
if (data) {
|
||
Object.assign(formData, data);
|
||
}
|
||
};
|
||
|
||
// 生命周期
|
||
onBeforeMount(() => {});
|
||
onMounted(() => {
|
||
console.log('当前患者信息:', patientInfo);
|
||
patient.value = patientInfo.value;
|
||
// 初始化发病日期为当前时间
|
||
if (!formData.onsetDate) {
|
||
formData.onsetDate = formatDateTime(new Date());
|
||
}
|
||
});
|
||
|
||
// 监听患者信息变化，实现联动显示
|
||
watch(
|
||
() => patientInfo.value,
|
||
(newPatientInfo) => {
|
||
patient.value = newPatientInfo;
|
||
},
|
||
{ deep: true }
|
||
);
|
||
|
||
// 暴露接口
|
||
defineExpose({ formData, submit, setFormData });
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 表单外层容器 */
|
||
.medical-form {
|
||
max-width: 1200px;
|
||
width: 100%;
|
||
min-height: 800px;
|
||
height: auto;
|
||
margin: 15px auto;
|
||
padding: 15px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 8px;
|
||
font-family: Arial, sans-serif;
|
||
box-sizing: border-box;
|
||
overflow: hidden; /* 防止内部内容溢出 */
|
||
position: relative;
|
||
}
|
||
|
||
/* 顶部姓名样式 */
|
||
.patient-name {
|
||
display: inline-block;
|
||
margin-bottom: 15px;
|
||
font-size: 14px;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 滚动内容容器 */
|
||
.form-scroll-container {
|
||
width: 100%;
|
||
max-height: 55vh;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
scrollbar-width: thin;
|
||
scrollbar-color: #ccc #f5f5f5;
|
||
position: relative;
|
||
}
|
||
.form-scroll-container::-webkit-scrollbar {
|
||
width: 6px;
|
||
}
|
||
.form-scroll-container::-webkit-scrollbar-thumb {
|
||
background-color: #ccc;
|
||
border-radius: 3px;
|
||
}
|
||
.form-scroll-container::-webkit-scrollbar-track {
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
/* 完整表单容器 */
|
||
.medical-full-form {
|
||
width: 100%;
|
||
min-width: 0; /* 防止内容强制拉伸容器 */
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 区域通用样式 */
|
||
.form-section {
|
||
margin-bottom: 20px;
|
||
}
|
||
.section-title {
|
||
margin: 0 0 12px;
|
||
padding-bottom: 6px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
color: #333;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* 通用单行自适应布局（基础信息+病史信息共用） */
|
||
.single-row-layout {
|
||
display: flex;
|
||
flex-wrap: wrap; /* 自动换行 */
|
||
align-items: flex-start; /* 顶部对齐，适配文本域高度 */
|
||
gap: 15px; /* 统一元素间距 */
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
.row-item {
|
||
margin-bottom: 0; /* 取消底部间距，避免换行重叠 */
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* 基础信息项：适配短输入框 */
|
||
.row-item:not(.history-item) {
|
||
min-width: 160px; /* 基础信息项最小宽度 */
|
||
}
|
||
|
||
/* 病史信息项：适配文本域，设置更大最小宽度 */
|
||
.history-item {
|
||
min-width: 220px; /* 确保文本域有足够宽度 */
|
||
}
|
||
|
||
/* 带单位的输入框样式 */
|
||
.input-with-unit {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
width: 100%;
|
||
}
|
||
.input-with-unit .el-input {
|
||
flex: 1;
|
||
}
|
||
.unit {
|
||
font-weight: 500;
|
||
color: #333;
|
||
white-space: nowrap;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 单行表单项样式（主诉、查体等） */
|
||
.form-item-single {
|
||
margin-bottom: 18px;
|
||
}
|
||
|
||
/* 文本域高度控制 */
|
||
.tall-textarea {
|
||
--el-input-textarea-min-height: 100px;
|
||
}
|
||
/* 病史信息文本域：适当降低高度，适配单行布局 */
|
||
.history-item .el-input__inner {
|
||
--el-input-textarea-min-height: 60px;
|
||
}
|
||
|
||
/* 必填项红色星号 */
|
||
.required .el-form-item__label::before {
|
||
content: '* ';
|
||
color: #ff4d4f;
|
||
}
|
||
|
||
/* 输入框统一样式 */
|
||
.el-form-item .el-input,
|
||
.el-form-item .el-input__wrapper {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
.el-form-item .el-input__inner {
|
||
font-size: 14px;
|
||
padding: 8px 12px;
|
||
}
|
||
|
||
/* 响应式调整 */
|
||
@media (max-width: 768px) {
|
||
.medical-form {
|
||
height: 80vh;
|
||
padding: 10px;
|
||
overflow: hidden;
|
||
}
|
||
.form-scroll-container {
|
||
height: calc(100% - 35px);
|
||
max-height: none;
|
||
}
|
||
.el-form {
|
||
label-width: 70px !important;
|
||
}
|
||
.row-item:not(.history-item) {
|
||
min-width: 130px;
|
||
}
|
||
.history-item {
|
||
min-width: 100%; /* 移动端病史信息全屏宽度，单行显示 */
|
||
}
|
||
.form-item-single,
|
||
.form-section {
|
||
margin-bottom: 15px;
|
||
}
|
||
.tall-textarea {
|
||
--el-input-textarea-min-height: 80px;
|
||
}
|
||
}
|
||
</style>
|