816 lines
24 KiB
Vue
816 lines
24 KiB
Vue
<template>
|
||
<div class="medical-form">
|
||
<h2 style="text-align: center">
|
||
{{ userStore.hospitalName }} -入院记录
|
||
</h2>
|
||
|
||
<!-- 滚动内容区域 -->
|
||
<div class="form-scroll-container">
|
||
<el-form
|
||
ref="formRef"
|
||
:model="formData"
|
||
:rules="rules"
|
||
label-width="80px"
|
||
label-align="left"
|
||
class="medical-full-form"
|
||
>
|
||
<!-- 1. 基础信息区域（自适应两列布局） -->
|
||
<h4 class="section-title">基础信息</h4>
|
||
<div class="adaptive-grid form-section">
|
||
<el-form-item label="姓名" prop="patientName" class="grid-item required">
|
||
<el-input v-model="formData.patientName" placeholder="请输入姓名" clearable />
|
||
</el-form-item>
|
||
<el-form-item label="住院号" prop="hospitalNo" class="grid-item required">
|
||
<el-input v-model="formData.hospitalNo" placeholder="请输入住院号" clearable />
|
||
</el-form-item>
|
||
<el-form-item label="性别" prop="gender" class="grid-item required">
|
||
<el-select v-model="formData.gender" placeholder="请选择" style="width: 100%">
|
||
<el-option label="男" value="男"></el-option>
|
||
<el-option label="女" value="女"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="年龄" prop="age" class="grid-item required">
|
||
<div class="input-with-unit">
|
||
<el-input v-model.number="formData.age" placeholder="请输入年龄" clearable />
|
||
<span class="unit">岁</span>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="民族" prop="nation" class="grid-item">
|
||
<el-input v-model="formData.nation" placeholder="请输入民族" clearable />
|
||
</el-form-item>
|
||
<el-form-item label="职业" prop="occupation" class="grid-item">
|
||
<el-input v-model="formData.occupation" placeholder="请输入职业" clearable />
|
||
</el-form-item>
|
||
<el-form-item label="婚姻状况" prop="marriage" class="grid-item">
|
||
<el-select
|
||
v-model="formData.marriage"
|
||
placeholder="请选择"
|
||
clearable
|
||
style="width: 100%"
|
||
>
|
||
<el-option label="已婚" value="已婚"></el-option>
|
||
<el-option label="未婚" value="未婚"></el-option>
|
||
<el-option label="离异" value="离异"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="出生地" prop="birthplace" class="grid-item">
|
||
<el-input v-model="formData.birthplace" placeholder="请输入出生地" clearable />
|
||
</el-form-item>
|
||
<el-form-item label="入院时间" prop="admissionTime" class="grid-item required">
|
||
<el-date-picker
|
||
v-model="formData.admissionTime"
|
||
type="datetime"
|
||
placeholder="选择入院时间"
|
||
value-format="YYYY-MM-DD HH:mm"
|
||
style="width: 100%"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="记录时间" prop="recordTime" class="grid-item required">
|
||
<el-date-picker
|
||
v-model="formData.recordTime"
|
||
type="datetime"
|
||
placeholder="选择记录时间"
|
||
value-format="YYYY-MM-DD HH:mm"
|
||
style="width: 100%"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="病史陈述者" prop="historyReporter" class="grid-item">
|
||
<el-input v-model="formData.historyReporter" placeholder="请输入陈述者" clearable />
|
||
</el-form-item>
|
||
<el-form-item label="可靠程度" prop="reliability" class="grid-item">
|
||
<el-select v-model="formData.reliability" placeholder="请选择" style="width: 100%">
|
||
<el-option label="可靠" value="可靠"></el-option>
|
||
<el-option label="基本可靠" value="基本可靠"></el-option>
|
||
<el-option label="不可靠" value="不可靠"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</div>
|
||
|
||
<!-- 2. 病史信息 -->
|
||
<h4 class="section-title">病史信息</h4>
|
||
<div class="form-section">
|
||
<el-form-item label="主诉" prop="complaint" class="history-item required">
|
||
<el-input
|
||
v-model="formData.complaint"
|
||
type="textarea"
|
||
placeholder="请输入主诉"
|
||
autosize
|
||
maxlength="200"
|
||
show-word-limit
|
||
/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="现病史" prop="presentIllness" class="history-item">
|
||
<el-input
|
||
v-model="formData.presentIllness"
|
||
type="textarea"
|
||
placeholder="请详细描述现病史"
|
||
autosize
|
||
maxlength="1000"
|
||
show-word-limit
|
||
/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="既往史" prop="pastHistory" class="history-item">
|
||
<el-input
|
||
v-model="formData.pastHistory"
|
||
type="textarea"
|
||
placeholder="请输入既往史"
|
||
autosize
|
||
maxlength="800"
|
||
show-word-limit
|
||
/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="个人史" prop="personalHistory" class="history-item">
|
||
<el-input
|
||
v-model="formData.personalHistory"
|
||
type="textarea"
|
||
placeholder="请输入个人史"
|
||
autosize
|
||
maxlength="500"
|
||
show-word-limit
|
||
/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="婚育史" prop="maritalHistory" class="history-item">
|
||
<el-input
|
||
v-model="formData.maritalHistory"
|
||
type="textarea"
|
||
placeholder="请输入婚育史"
|
||
autosize
|
||
maxlength="500"
|
||
show-word-limit
|
||
/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="月经史" prop="menstrualHistory" class="history-item">
|
||
<el-input
|
||
v-model="formData.menstrualHistory"
|
||
type="textarea"
|
||
placeholder="请输入月经史"
|
||
autosize
|
||
maxlength="500"
|
||
show-word-limit
|
||
/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="家族史" prop="familyHistory" class="history-item">
|
||
<el-input
|
||
v-model="formData.familyHistory"
|
||
type="textarea"
|
||
placeholder="请输入家族史"
|
||
autosize
|
||
maxlength="500"
|
||
show-word-limit
|
||
/>
|
||
</el-form-item>
|
||
</div>
|
||
|
||
<!-- 3. 中医望闻问切 -->
|
||
<h4 class="section-title">中医望闻问切</h4>
|
||
<div class="form-section">
|
||
<el-form-item label="望闻问切" prop="tcmInfo" class="history-item">
|
||
<el-input
|
||
v-model="formData.tcmInfo"
|
||
type="textarea"
|
||
placeholder="请输入中医望闻问切结果"
|
||
autosize
|
||
maxlength="600"
|
||
show-word-limit
|
||
/>
|
||
</el-form-item>
|
||
</div>
|
||
|
||
<!-- 4. 体格检查 -->
|
||
<h4 class="section-title">体格检查</h4>
|
||
<div class="form-section">
|
||
<div class="adaptive-grid">
|
||
<el-form-item label="体温" prop="temp" class="grid-item">
|
||
<div class="input-with-unit">
|
||
<el-input
|
||
v-model.number="formData.temp"
|
||
type="number"
|
||
step="0.1"
|
||
placeholder="如36.0"
|
||
clearable
|
||
/>
|
||
<span class="unit">℃</span>
|
||
</div>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="脉搏" prop="pulse" class="grid-item">
|
||
<div class="input-with-unit">
|
||
<el-input
|
||
v-model.number="formData.pulse"
|
||
type="number"
|
||
placeholder="如76"
|
||
clearable
|
||
/>
|
||
<span class="unit">次/分</span>
|
||
</div>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="呼吸" prop="respiration" class="grid-item">
|
||
<div class="input-with-unit">
|
||
<el-input
|
||
v-model.number="formData.respiration"
|
||
type="number"
|
||
placeholder="如16"
|
||
clearable
|
||
/>
|
||
<span class="unit">次/分</span>
|
||
</div>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="血压" prop="bp" class="grid-item">
|
||
<div class="input-with-unit">
|
||
<el-input
|
||
v-model="formData.bp"
|
||
placeholder="如188/94"
|
||
clearable
|
||
@blur="validateBloodPressure"
|
||
/>
|
||
<span class="unit">mmHg</span>
|
||
</div>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="身高" prop="height" class="grid-item">
|
||
<div class="input-with-unit">
|
||
<el-input
|
||
v-model.number="formData.height"
|
||
type="number"
|
||
placeholder="如165"
|
||
clearable
|
||
/>
|
||
<span class="unit">cm</span>
|
||
</div>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="体重" prop="weight" class="grid-item">
|
||
<div class="input-with-unit">
|
||
<el-input
|
||
v-model.number="formData.weight"
|
||
type="number"
|
||
placeholder="如79"
|
||
clearable
|
||
/>
|
||
<span class="unit">kg</span>
|
||
</div>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="BMI" prop="bmi" class="grid-item">
|
||
<div class="input-with-unit">
|
||
<el-input v-model="formData.bmi" placeholder="如29.02" readonly />
|
||
<span class="unit">kg/m²</span>
|
||
</div>
|
||
</el-form-item>
|
||
</div>
|
||
|
||
<el-form-item label="一般情况" prop="general" class="history-item">
|
||
<el-input
|
||
v-model="formData.general"
|
||
type="textarea"
|
||
placeholder="请输入一般情况"
|
||
autosize
|
||
maxlength="300"
|
||
show-word-limit
|
||
/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="皮肤粘膜" prop="skin" class="history-item">
|
||
<el-input
|
||
v-model="formData.skin"
|
||
type="textarea"
|
||
placeholder="请输入皮肤粘膜情况"
|
||
autosize
|
||
maxlength="300"
|
||
show-word-limit
|
||
/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="胸部（心、肺）" prop="chest" class="history-item">
|
||
<el-input
|
||
v-model="formData.chest"
|
||
type="textarea"
|
||
placeholder="请输入胸部检查结果"
|
||
autosize
|
||
maxlength="500"
|
||
show-word-limit
|
||
/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="腹部" prop="abdomen" class="history-item">
|
||
<el-input
|
||
v-model="formData.abdomen"
|
||
type="textarea"
|
||
placeholder="请输入腹部检查结果"
|
||
autosize
|
||
maxlength="500"
|
||
show-word-limit
|
||
/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="四肢/神经系统" prop="limbsNervous" class="history-item">
|
||
<el-input
|
||
v-model="formData.limbsNervous"
|
||
type="textarea"
|
||
placeholder="请输入四肢及神经系统检查结果"
|
||
autosize
|
||
maxlength="500"
|
||
show-word-limit
|
||
/>
|
||
</el-form-item>
|
||
</div>
|
||
|
||
<!-- 5. 辅助检查 -->
|
||
<h4 class="section-title">辅助检查</h4>
|
||
<div class="form-section">
|
||
<el-form-item label="检查结果" prop="auxExam" class="history-item">
|
||
<el-input
|
||
v-model="formData.auxExam"
|
||
type="textarea"
|
||
placeholder="请输入辅助检查结果"
|
||
autosize
|
||
maxlength="1000"
|
||
show-word-limit
|
||
/>
|
||
</el-form-item>
|
||
</div>
|
||
|
||
<!-- 6. 初步诊断 -->
|
||
<h4 class="section-title">初步诊断</h4>
|
||
<div class="form-section">
|
||
<el-form-item label="中医诊断" prop="tcmDiagnosis" class="history-item">
|
||
<el-input
|
||
v-model="formData.tcmDiagnosis"
|
||
type="textarea"
|
||
placeholder="如：胸痹心痛（气阴两虚证）"
|
||
autosize
|
||
maxlength="500"
|
||
show-word-limit
|
||
/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="西医诊断" prop="westernDiagnosis" class="history-item">
|
||
<el-input
|
||
v-model="formData.westernDiagnosis"
|
||
type="textarea"
|
||
placeholder="如：1.冠状动脉粥样硬化性心脏病"
|
||
autosize
|
||
maxlength="800"
|
||
show-word-limit
|
||
/>
|
||
</el-form-item>
|
||
</div>
|
||
|
||
<!-- 7. 签名信息（三列布局） -->
|
||
<h4 class="section-title">签名信息</h4>
|
||
<div class="adaptive-grid form-section" style="grid-template-columns: repeat(3, 1fr)">
|
||
<el-form-item label="医师签名" prop="doctorSign" class="grid-item">
|
||
<el-input v-model="formData.doctorSign" placeholder="请签名" clearable />
|
||
</el-form-item>
|
||
|
||
<el-form-item label="上级医师签名" prop="superiorSign" class="grid-item">
|
||
<el-input v-model="formData.superiorSign" placeholder="请签名" clearable />
|
||
</el-form-item>
|
||
|
||
<el-form-item label="记录日期" prop="signDate" class="grid-item">
|
||
<el-date-picker
|
||
v-model="formData.signDate"
|
||
type="datetime"
|
||
placeholder="选择日期"
|
||
value-format="YYYY-MM-DD HH:mm"
|
||
style="width: 100%"
|
||
/>
|
||
</el-form-item>
|
||
</div>
|
||
|
||
<!-- 新增：表单操作按钮组（重置按钮） -->
|
||
<div class="form-btn-group">
|
||
<el-button type="warning" @click="handleReset">重置表单</el-button>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
<admissionRecord v-if="isShowprintDom" ref="recordPrintRef"></admissionRecord>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {onMounted, reactive, ref, watch} from 'vue';
|
||
import {previewPrint} from '../utils/printUtils';
|
||
import admissionRecord from '../views/hospitalRecord/components/admissionRecord.vue';
|
||
import {
|
||
ElButton,
|
||
ElDatePicker,
|
||
ElForm,
|
||
ElFormItem,
|
||
ElInput,
|
||
ElMessage,
|
||
ElMessageBox,
|
||
ElOption,
|
||
ElSelect,
|
||
} from 'element-plus';
|
||
import useUserStore from '../store/modules/user';
|
||
|
||
const isShowprintDom = ref(false);
|
||
const recordPrintRef = ref();
|
||
defineOptions({
|
||
name: 'InHospitalRecord',
|
||
components: { ElInput, ElSelect, ElOption, ElDatePicker, ElButton, ElForm, ElFormItem },
|
||
});
|
||
|
||
// Props与事件
|
||
const props = defineProps({
|
||
patientInfo: {
|
||
type: Object,
|
||
required: true,
|
||
},
|
||
});
|
||
|
||
const emits = defineEmits(['submitOk']);
|
||
|
||
// 数据初始化
|
||
const userStore = useUserStore();
|
||
const patient = props.patientInfo;
|
||
const formRef = ref(null);
|
||
|
||
// 表单数据
|
||
const formData = reactive({
|
||
// 基础信息
|
||
patientName: patient?.name || '',
|
||
hospitalNo: patient?.busNo || '',
|
||
gender: patient?.genderEnum_enumText || '',
|
||
age: patient?.age || '',
|
||
nation: '',
|
||
occupation: '', // 职业
|
||
marriage: '', // 婚姻状况
|
||
birthplace: '', // 出生地
|
||
admissionTime: '', // 入院时间
|
||
recordTime: '', // 记录时间
|
||
historyReporter: '', // 病史陈述者
|
||
reliability: '可靠', // 可靠程度
|
||
// 病史信息
|
||
complaint: '', // 主诉
|
||
presentIllness: '', // 现病史
|
||
pastIllness: '', // 既往史
|
||
personalHistory: '', // 个人史
|
||
allergyHistory: '', // 过敏史
|
||
pastHistory: '', // 既往史
|
||
familyHistory: '', // 家族史
|
||
maritalHistory: '', // 婚姻史
|
||
menstrualHistory: '', // 月经史
|
||
// 中医信息
|
||
tcmInfo: '',
|
||
|
||
// 体格检查
|
||
temp: '',
|
||
pulse: '',
|
||
respiration: '',
|
||
bp: '',
|
||
height: '',
|
||
weight: '',
|
||
bmi: '',
|
||
general: '',
|
||
skin: '',
|
||
chest: '',
|
||
abdomen: '',
|
||
limbsNervous: '',
|
||
|
||
// 辅助检查
|
||
auxExam: '',
|
||
|
||
// 诊断信息
|
||
tcmDiagnosis: '',
|
||
westernDiagnosis: '',
|
||
|
||
// 签名信息
|
||
doctorSign: '',
|
||
superiorSign: '',
|
||
signDate: '',
|
||
});
|
||
|
||
// 表单校验规则
|
||
const rules = reactive({
|
||
name: [{ required: true, message: '请填写姓名', trigger: ['blur', 'submit'] }],
|
||
hospitalNo: [{ required: true, message: '请填写住院号', trigger: ['blur', 'submit'] }],
|
||
gender: [{ required: true, message: '请选择性别', trigger: ['change', 'submit'] }],
|
||
age: [
|
||
{ required: true, message: '请填写年龄', trigger: ['blur', 'submit'] },
|
||
{
|
||
type: 'number',
|
||
min: 1,
|
||
max: 120,
|
||
message: '年龄需在1-120岁之间',
|
||
trigger: ['blur', 'submit'],
|
||
},
|
||
],
|
||
admissionTime: [{ required: true, message: '请选择入院时间', trigger: ['change', 'submit'] }],
|
||
recordTime: [{ required: true, message: '请选择记录时间', trigger: ['change', 'submit'] }],
|
||
chiefComplaint: [{ required: true, message: '请填写主诉', trigger: ['blur', 'submit'] }],
|
||
});
|
||
|
||
// 生命周期
|
||
onMounted(() => {
|
||
// 初始化记录时间为当前时间
|
||
if (!formData.recordTime) {
|
||
formData.recordTime = formatDateTime(new Date());
|
||
}
|
||
if (!formData.admissionTime) {
|
||
formData.admissionTime = formatDateTime(new Date());
|
||
}
|
||
if (!formData.signDate) {
|
||
formData.signDate = formatDateTime(new Date());
|
||
}
|
||
if (!formData.patientName) {
|
||
formData.patientName = patient?.patientName || '';
|
||
}
|
||
if (!formData.gender) {
|
||
formData.gender = patient?.genderEnum_enumText || '';
|
||
}
|
||
if (!formData.age) {
|
||
formData.age = patient?.age || '';
|
||
}
|
||
if (!formData.hospitalNo) {
|
||
formData.hospitalNo = patient?.busNo || '';
|
||
}
|
||
});
|
||
|
||
// BMI自动计算
|
||
watch([() => formData.height, () => formData.weight], ([newHeight, newWeight]) => {
|
||
if (newHeight && newWeight && newHeight > 0 && newWeight > 0) {
|
||
const heightM = newHeight / 100;
|
||
formData.bmi = (newWeight / (heightM * heightM)).toFixed(2);
|
||
} else {
|
||
formData.bmi = '';
|
||
}
|
||
});
|
||
|
||
// 入院时间变化处理
|
||
watch(
|
||
() => formData.admissionTime,
|
||
(val) => {
|
||
if (val && !formData.recordTime) {
|
||
ElMessageBox.confirm('是否将记录时间同步为入院时间？', '时间同步提示', {
|
||
confirmButtonText: '同步',
|
||
cancelButtonText: '手动设置',
|
||
type: 'info',
|
||
})
|
||
.then(() => {
|
||
formData.recordTime = val;
|
||
})
|
||
.catch(() => {});
|
||
}
|
||
}
|
||
);
|
||
|
||
// 血压格式校验
|
||
const validateBloodPressure = () => {
|
||
const bp = formData.bp;
|
||
if (!bp) return;
|
||
const reg = /^\d{2,3}\/\d{2,3}$/;
|
||
if (!reg.test(bp)) {
|
||
ElMessage.warning('血压格式不正确，请输入如 "120/80" 的格式');
|
||
formData.bp = '';
|
||
}
|
||
};
|
||
|
||
// 提交表单
|
||
const submit = () => {
|
||
formRef.value.validate((isValid) => {
|
||
if (isValid) {
|
||
// 额外校验血压格式
|
||
if (formData.bp) {
|
||
validateBloodPressure();
|
||
if (!formData.bp) return; // 格式错误时终止提交
|
||
}
|
||
emits('submitOk', formData);
|
||
ElMessage.success('记录保存成功！');
|
||
}
|
||
});
|
||
};
|
||
|
||
// 新增：重置表单方法（带确认提示）
|
||
const handleReset = () => {
|
||
ElMessageBox.confirm('确定要重置表单吗？所有已填写内容将被清空，且不可恢复', '重置确认', {
|
||
confirmButtonText: '确认重置',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
center: true,
|
||
})
|
||
.then(() => {
|
||
// 执行表单重置
|
||
formRef.value.resetFields();
|
||
// 保留患者基础信息和默认值（避免清空关键基础数据）
|
||
formData.patientName = patient?.name || '';
|
||
formData.hospitalNo = patient?.busNo || '';
|
||
formData.gender = patient?.genderEnum_enumText || '';
|
||
formData.age = patient?.age || '';
|
||
formData.reliability = '可靠';
|
||
// 重置时间为当前时间
|
||
const today = new Date();
|
||
formData.admissionTime = formatDateTime(today);
|
||
formData.recordTime = formatDateTime(today);
|
||
formData.signDate = formatDateTime(today);
|
||
// 重置成功提示
|
||
ElMessage.success('表单已成功重置');
|
||
})
|
||
.catch(() => {
|
||
// 取消重置提示
|
||
ElMessage.info('已取消表单重置');
|
||
});
|
||
};
|
||
|
||
// 表单数据赋值
|
||
const setFormData = (data) => {
|
||
if (data) {
|
||
Object.assign(formData, data);
|
||
}
|
||
};
|
||
|
||
// 日期格式化工具
|
||
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 printFun = () => {
|
||
console.log('入院记录打印');
|
||
isShowprintDom.value = true;
|
||
nextTick(() => {
|
||
recordPrintRef?.value.setData(formData);
|
||
nextTick(() => {
|
||
previewPrint(recordPrintRef?.value.getDom());
|
||
isShowprintDom.value = false;
|
||
});
|
||
});
|
||
};
|
||
|
||
// 暴露接口
|
||
defineExpose({ formData, submit, setFormData, handleReset, printFun });
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 表单外层容器 */
|
||
.medical-form {
|
||
max-width: 1200px;
|
||
width: 100%;
|
||
height: 28000px;
|
||
padding: 15px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 8px;
|
||
font-family: Arial, sans-serif;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 滚动内容容器 */
|
||
.form-scroll-container {
|
||
height: calc(100% - 80px);
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
scrollbar-width: thin;
|
||
scrollbar-color: #ccc #f5f5f5;
|
||
}
|
||
.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%;
|
||
}
|
||
|
||
/* 区域通用样式 */
|
||
.form-section {
|
||
margin-bottom: 25px;
|
||
padding: 10px;
|
||
background-color: #fafafa;
|
||
border-radius: 6px;
|
||
}
|
||
.section-title {
|
||
margin: 0 0 15px;
|
||
padding-bottom: 8px;
|
||
border-bottom: 1px solid #e0e0e0;
|
||
color: #333;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* 自适应网格布局（核心调整） */
|
||
.adaptive-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||
gap: 15px;
|
||
}
|
||
.grid-item {
|
||
margin-bottom: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.grid-item .el-form-item__content {
|
||
flex: 1;
|
||
min-width: 0; /* 关键：允许内容收缩以适应容器 */
|
||
}
|
||
|
||
/* 病史项目样式 */
|
||
.history-item {
|
||
margin-bottom: 15px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 100%;
|
||
}
|
||
.history-item .el-form-item__content {
|
||
width: 100%;
|
||
}
|
||
.history-item .el-input__inner {
|
||
width: 100%;
|
||
min-height: 40px;
|
||
resize: vertical;
|
||
}
|
||
|
||
/* 带单位的输入框样式 */
|
||
.input-with-unit {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
width: 100%;
|
||
}
|
||
.input-with-unit .el-input {
|
||
flex: 1;
|
||
min-width: 0; /* 允许输入框收缩 */
|
||
}
|
||
.unit {
|
||
font-weight: 500;
|
||
color: #333;
|
||
white-space: nowrap;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 新增：表单按钮组样式 */
|
||
.form-btn-group {
|
||
margin-top: 30px;
|
||
margin-bottom: 15px;
|
||
text-align: center; /* 按钮居中对齐 */
|
||
}
|
||
.form-btn-group .el-button {
|
||
padding: 8px 20px;
|
||
}
|
||
|
||
/* 必填项红色星号 */
|
||
.required .el-form-item__label::before {
|
||
content: '* ';
|
||
color: #ff4d4f;
|
||
}
|
||
|
||
/* 按钮组 */
|
||
.btn-group {
|
||
text-align: center;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
/* 响应式调整 */
|
||
@media (max-width: 768px) {
|
||
.medical-form {
|
||
height: 80vh;
|
||
padding: 10px;
|
||
}
|
||
.form-scroll-container {
|
||
height: calc(100% - 70px);
|
||
}
|
||
.el-form {
|
||
label-width: 60px !important;
|
||
}
|
||
.adaptive-grid {
|
||
grid-template-columns: 1fr; /* 小屏幕下单列显示 */
|
||
}
|
||
.grid-item,
|
||
.history-item {
|
||
margin-bottom: 10px;
|
||
}
|
||
/* 小屏幕按钮居中 */
|
||
.form-btn-group {
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
/* 中等屏幕调整 */
|
||
@media (min-width: 769px) and (max-width: 1024px) {
|
||
.adaptive-grid {
|
||
grid-template-columns: repeat(2, 1fr); /* 中等屏幕下两列显示 */
|
||
}
|
||
}
|
||
</style>
|