@@ -1,449 +0,0 @@
|
||||
<template>
|
||||
<div class="medical-form">
|
||||
<div class="patient-name">
|
||||
患者姓名：{{ patient?.patientName || '未知' }} 病历号：{{
|
||||
patient?.busNo || '未知'
|
||||
}}
|
||||
</div>
|
||||
<h2 style="text-align: center">长春市朝阳区中医院</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="patientName" class="row-item">
|
||||
<div class="input-with-unit">
|
||||
<el-input
|
||||
disabled
|
||||
v-model="formData.patientName"
|
||||
type="text"
|
||||
placeholder="请输入"
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="年龄" prop="age" class="row-item">
|
||||
<div class="input-with-unit">
|
||||
<el-input disabled v-model="formData.age" type="text" placeholder="请输入" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="性别" prop="gender" class="row-item">
|
||||
<div class="input-with-unit">
|
||||
<el-input v-model="formData.gender" type="text" placeholder="请输入" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="住院号" prop="busNo" class="row-item">
|
||||
<div class="input-with-unit">
|
||||
<el-input disabled v-model="formData.busNo" type="text" placeholder="请输入" />
|
||||
</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="请输入" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="入院日期" prop="admissionDate" class="row-item">
|
||||
<el-date-picker
|
||||
v-model="formData.admissionDate"
|
||||
type="date"
|
||||
placeholder="选择入院日期"
|
||||
value-format="YYYY-MM-DD"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="出院日期" prop="dischargeDate" class="row-item">
|
||||
<el-date-picker
|
||||
v-model="formData.dischargeDate"
|
||||
type="date"
|
||||
placeholder="选择出院日期"
|
||||
value-format="YYYY-MM-DD"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="住院天数" prop="hospitalDays" class="row-item">
|
||||
<div class="input-with-unit">
|
||||
<el-input disabled v-model="formData.hospitalDays" placeholder="请输入" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<h4 class="section-title">二、诊断</h4>
|
||||
<!-- 3. 出院诊断（必填） -->
|
||||
<el-form-item label="出院诊断" prop="DischargeDiagnosis" class="required form-item-single">
|
||||
<el-input
|
||||
v-model="formData.DischargeDiagnosis"
|
||||
type="textarea"
|
||||
placeholder="请输入出院诊断"
|
||||
:autosize="{ minRows: 1 }"
|
||||
style="resize: none; padding-right: 10px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- 4. 出院病情摘要及诊疗经过 -->
|
||||
<el-form-item
|
||||
label="出院病情摘要及诊疗经过"
|
||||
prop="SummaryAndDiagnosisAndTreatmentProcess"
|
||||
class="form-item-single"
|
||||
>
|
||||
<el-input
|
||||
v-model="formData.SummaryAndDiagnosisAndTreatmentProcess"
|
||||
type="textarea"
|
||||
placeholder="请输入出院病情摘要及诊疗经过"
|
||||
:autosize="{ minRows: 1 }"
|
||||
style="resize: none; padding-right: 10px"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
label="出院后要求及注意事项"
|
||||
prop="RequirementsAndPrecautionsAfterDischarge"
|
||||
class="form-item-single"
|
||||
>
|
||||
<el-input
|
||||
v-model="formData.RequirementsAndPrecautionsAfterDischarge"
|
||||
type="textarea"
|
||||
placeholder="请输入出院后要求及注意事项"
|
||||
:autosize="{ minRows: 1 }"
|
||||
style="resize: none; padding-right: 10px"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
label="中医调护"
|
||||
prop="TraditionalChineseMedicineNursing"
|
||||
class="form-item-single"
|
||||
>
|
||||
<el-input
|
||||
v-model="formData.TraditionalChineseMedicineNursing"
|
||||
type="textarea"
|
||||
placeholder="请输入中医调护"
|
||||
:autosize="{ minRows: 1 }"
|
||||
style="resize: none; padding-right: 10px"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<DisDiagnMedicalRecord v-if="isShowprintDom" ref="recordPrintRef"></DisDiagnMedicalRecord>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, onMounted, watch, nextTick } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { previewPrint } from '../utils/printUtils';
|
||||
import DisDiagnMedicalRecord from '../views/hospitalRecord/components/disDiagnMedicalRecord.vue';
|
||||
|
||||
defineOptions({
|
||||
name: 'DischargeDiagnosisCertificate',
|
||||
});
|
||||
|
||||
// Props与事件
|
||||
const props = defineProps({
|
||||
patientInfo: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const recordPrintRef = ref();
|
||||
const isShowprintDom = ref(false);
|
||||
|
||||
const patient = props.patientInfo;
|
||||
|
||||
// const props = defineProps({});
|
||||
const emits = defineEmits(['submitOk']);
|
||||
|
||||
// 数据初始化
|
||||
// const patient = ref(null);
|
||||
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
patientName: '', // 姓名
|
||||
age: '', // 年龄
|
||||
gender: '', // 性别
|
||||
busNo: '', // 住院号
|
||||
admissionDate: '', // 入院日期
|
||||
dischargeDate: '', // 出院日期
|
||||
hospitalDays: '', // 住院天数
|
||||
DischargeDiagnosis: '', // 出院诊断
|
||||
SummaryAndDiagnosisAndTreatmentProcess: '', // 出院病情摘要及诊疗经过
|
||||
RequirementsAndPrecautionsAfterDischarge: '', // 出院后要求及注意事项
|
||||
TraditionalChineseMedicineNursing: '', // 中医调护
|
||||
});
|
||||
|
||||
// 表单校验规则
|
||||
const rules = reactive({
|
||||
dischargeDiagnosis: [
|
||||
{
|
||||
required: true,
|
||||
message: '请填写出院诊断',
|
||||
trigger: ['blur', 'submit'],
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
// 提交函数
|
||||
const submit = () => {
|
||||
emits('submitOk', formData);
|
||||
};
|
||||
// 表单数据赋值
|
||||
const setFormData = (data) => {
|
||||
if (data) {
|
||||
Object.assign(formData, data);
|
||||
}
|
||||
};
|
||||
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
// patient.value = patientInfo.value;
|
||||
// 组件挂载时自动填充患者信息
|
||||
// fillPatientInfo(patientInfo.value);
|
||||
if (!formData.patientName) {
|
||||
formData.patientName = patient?.patientName || '';
|
||||
}
|
||||
if (!formData.gender) {
|
||||
formData.gender = patient?.genderEnum_enumText || '';
|
||||
}
|
||||
if (!formData.age) {
|
||||
formData.age = patient?.age || '';
|
||||
}
|
||||
if (!formData.department) {
|
||||
formData.department = patient?.inHospitalOrgName || '';
|
||||
}
|
||||
if (!formData.bedNo) {
|
||||
formData.bedNo = patient?.houseName + '-' + patient?.bedName;
|
||||
}
|
||||
if (!formData.busNo) {
|
||||
formData.busNo = patient?.busNo || '';
|
||||
}
|
||||
if (!formData.admissionDate) {
|
||||
formData.admissionDate = patient?.inHospitalTime || '';
|
||||
}
|
||||
if (!formData.hospitalDays) {
|
||||
formData.hospitalDays = patient?.inHospitalDays;
|
||||
}
|
||||
console.log('patientInfo========>', JSON.stringify(props.patientInfo));
|
||||
});
|
||||
|
||||
// 监听患者信息变化，实现联动显示和自动填充
|
||||
// watch(
|
||||
// () => patientInfo.value,
|
||||
// (newPatientInfo) => {
|
||||
// patient.value = newPatientInfo;
|
||||
// // 患者信息变化时自动填充
|
||||
// fillPatientInfo(newPatientInfo);
|
||||
// },
|
||||
// { deep: true }
|
||||
// );
|
||||
|
||||
// 自动填充患者信息到表单
|
||||
const fillPatientInfo = (patientData) => {
|
||||
if (!patientData) {
|
||||
ElMessage.warning('未获取到患者信息，请确保已选择患者');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// 填充基本信息，处理可能的数据缺失情况
|
||||
formData.patientName = patientData.patientName || '';
|
||||
formData.age = patientData.age || '';
|
||||
formData.gender = patientData.genderEnum_enumText || '';
|
||||
formData.busNo = patientData.busNo || '';
|
||||
formData.hospitalDays = patientData.inHospitalDays || '';
|
||||
} catch (error) {
|
||||
console.error('填充患者信息时发生错误:', error);
|
||||
ElMessage.error('自动填充患者信息失败，请检查数据源格式');
|
||||
}
|
||||
};
|
||||
|
||||
// 打印方法
|
||||
const printFun = () => {
|
||||
isShowprintDom.value = true;
|
||||
nextTick(() => {
|
||||
recordPrintRef?.value.setData(formData);
|
||||
nextTick(() => {
|
||||
previewPrint(recordPrintRef?.value.getDom());
|
||||
isShowprintDom.value = false;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// 暴露接口
|
||||
defineExpose({ formData, submit, setFormData, fillPatientInfo, printFun });
|
||||
</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; /* 基础信息项最小宽度 */
|
||||
}
|
||||
|
||||
/* 带单位的输入框样式 */
|
||||
.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: 18px 0;
|
||||
}
|
||||
|
||||
/* 必填项红色星号 */
|
||||
.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;
|
||||
}
|
||||
|
||||
/* 确保textarea的rows属性生效 */
|
||||
.el-textarea__inner {
|
||||
min-height: auto !important;
|
||||
height: auto !important;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
/* 根据rows属性设置高度 */
|
||||
.el-input--textarea {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,393 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
// 1. 基础信息（复用已有变量，补充一致性格式）
|
||||
const patientInfo = ref({
|
||||
name: '',
|
||||
department: '',
|
||||
bed: '',
|
||||
inpatientNo: '',
|
||||
});
|
||||
|
||||
defineOptions({
|
||||
name: 'ProgressNoteform',
|
||||
});
|
||||
|
||||
// 2. 首次病程记录（复用已有变量，补充文本格式）
|
||||
const firstRecordTime = ref('');
|
||||
const firstRecordIntro = ref(
|
||||
''
|
||||
);
|
||||
const caseFeatures =
|
||||
ref('');
|
||||
|
||||
const chinaDiscussion = ref('');
|
||||
|
||||
const westDiscussion = ref('');
|
||||
|
||||
const preliminaryDiagnosis = ref('');
|
||||
|
||||
const treatmentPlan = ref(''); // 添加缺失的变量
|
||||
|
||||
// 3. 后续查房/会诊记录（新增，还原PDF所有章节）
|
||||
const roundRecords = ref([
|
||||
{
|
||||
title: '',
|
||||
time: '',
|
||||
content: '',
|
||||
signature: { doctor: '', physician: '主治医师签名:' }, // 区分普通医师和主治医师签名
|
||||
},
|
||||
{
|
||||
title: '',
|
||||
time: '',
|
||||
content: '',
|
||||
signature: { doctor: '', physician: '副主任医师签名:' },
|
||||
},
|
||||
{
|
||||
title: '',
|
||||
time: '',
|
||||
content: '',
|
||||
signature: { doctor: '', physician: '' },
|
||||
},
|
||||
{
|
||||
title: '',
|
||||
time: '',
|
||||
content: '',
|
||||
signature: { doctor: '', physician: '' },
|
||||
},
|
||||
{
|
||||
title: '',
|
||||
time: '',
|
||||
content: '',
|
||||
signature: { doctor: '', physician: '' },
|
||||
},
|
||||
{
|
||||
title: '',
|
||||
time: '',
|
||||
content: '',
|
||||
signature: { doctor: '', physician: '' },
|
||||
},
|
||||
{
|
||||
title: '',
|
||||
time: '',
|
||||
content: '',
|
||||
signature: { doctor: '', physician: '' },
|
||||
},
|
||||
{
|
||||
title: '',
|
||||
time: '',
|
||||
content: '',
|
||||
signature: { doctor: '', physician: '' },
|
||||
},
|
||||
]);
|
||||
|
||||
// 4. 签名变量（支持所有记录的签名输入）
|
||||
interface Signatures {
|
||||
firstDoctor: string;
|
||||
[key: string]: string;
|
||||
}
|
||||
|
||||
const signatures = ref<Signatures>({
|
||||
firstDoctor: '', // 首次病程记录医师签名
|
||||
...roundRecords.value.reduce((acc, record, index) => {
|
||||
acc[`round${index}Doctor`] = '';
|
||||
acc[`round${index}Physician`] = '';
|
||||
return acc;
|
||||
}, {} as Record<string, string>),
|
||||
});
|
||||
|
||||
// 5. 打印功能：控制打印范围+样式
|
||||
const handlePrint = () => {
|
||||
// 1. 触发浏览器打印
|
||||
window.print();
|
||||
};
|
||||
|
||||
// 暴露接口
|
||||
defineExpose({ patientInfo, firstRecordTime, firstRecordIntro, caseFeatures, chinaDiscussion, westDiscussion, preliminaryDiagnosis, treatmentPlan, roundRecords, signatures });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="medical-record-container">
|
||||
<!-- 打印按钮：固定在顶部，非打印内容 -->
|
||||
<div class="print-btn-container no-print">
|
||||
<el-button type="primary" @click="handlePrint">打印病历</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 病历主体：打印核心内容 -->
|
||||
<div class="medical-record">
|
||||
<!-- 1. 医院头部（每一页PDF均包含，复用已有样式） -->
|
||||
<div class="hospital-header">
|
||||
<img src="./imgs/logo.png" alt="长春市朝阳区中医院Logo" class="header-logo" />
|
||||
<h1 class="hospital-name">长春市朝阳区中医院</h1>
|
||||
</div>
|
||||
|
||||
<!-- 2. 患者信息栏（每一页PDF均包含，下划线样式） -->
|
||||
<div class="patient-info">
|
||||
<span class="info-item">姓名:{{ patientInfo.name }}</span>
|
||||
<span class="info-item">科室:{{ patientInfo.department }}</span>
|
||||
<span class="info-item">床号:{{ patientInfo.bed }}</span>
|
||||
<span class="info-item">住院号:{{ patientInfo.inpatientNo }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 3. 首次病程记录 -->
|
||||
<div class="record-section">
|
||||
<h2 class="section-main-title">首 次 病 程 记 录</h2>
|
||||
<div class="record-time">{{ firstRecordTime }}</div>
|
||||
<el-input v-model="firstRecordIntro" autosize type="textarea" class="clean-textarea" />
|
||||
|
||||
<!-- 病例特点 -->
|
||||
<h3 class="section-sub-title">一、病例特点</h3>
|
||||
<el-input v-model="caseFeatures" autosize type="textarea" class="clean-textarea" />
|
||||
|
||||
<!-- 拟诊讨论 -->
|
||||
<h3 class="section-sub-title">二、拟诊讨论</h3>
|
||||
<el-input v-model="chinaDiscussion" autosize type="textarea" class="clean-textarea" />
|
||||
<el-input v-model="westDiscussion" autosize type="textarea" class="clean-textarea" />
|
||||
|
||||
<!-- 初步诊断 -->
|
||||
<el-input v-model="preliminaryDiagnosis" autosize type="textarea" class="clean-textarea" />
|
||||
|
||||
<!-- 诊疗计划 -->
|
||||
<el-input v-model="treatmentPlan" autosize type="textarea" class="clean-textarea" />
|
||||
|
||||
<!-- 首次病程记录签名 -->
|
||||
<div class="signature-group">
|
||||
<span class="signature-label">医师签名:</span>
|
||||
<el-input v-model="signatures.firstDoctor" autosize type="textarea" class="clean-textarea signature-input"
|
||||
:rows="1" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 4. 分页分隔线（模拟PDF分页，打印时自动分页） -->
|
||||
<div class="page-break"></div>
|
||||
|
||||
<!-- 5. 后续查房/会诊记录（按时间顺序） -->
|
||||
<div v-for="(record, index) in roundRecords" :key="index" class="record-section">
|
||||
<!-- 重复患者信息（与PDF一致） -->
|
||||
<div class="patient-info page-repeated-info">
|
||||
<span class="info-item">姓名:{{ patientInfo.name }}</span>
|
||||
<span class="info-item">科室:{{ patientInfo.department }}</span>
|
||||
<span class="info-item">床号:{{ patientInfo.bed }}</span>
|
||||
<span class="info-item">住院号:{{ patientInfo.inpatientNo }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 查房标题+时间 -->
|
||||
<h2 class="section-main-title">{{ record.title }}</h2>
|
||||
<div class="record-time">{{ record.time }}</div>
|
||||
|
||||
<!-- 查房内容 -->
|
||||
<el-input v-model="record.content" autosize type="textarea" class="clean-textarea" />
|
||||
|
||||
<!-- 查房签名（区分普通医师/上级医师） -->
|
||||
<div class="signature-group">
|
||||
<span class="signature-label">医师签名:</span>
|
||||
<el-input v-model="signatures[`round${index}Doctor`]" autosize type="textarea"
|
||||
class="clean-textarea signature-input" :rows="1" />
|
||||
|
||||
<span v-if="record.signature.physician" class="signature-label ml-20">
|
||||
{{ record.signature.physician }}
|
||||
</span>
|
||||
<el-input v-if="record.signature.physician" v-model="signatures[`round${index}Physician`]" autosize
|
||||
type="textarea" class="clean-textarea signature-input" :rows="1" />
|
||||
</div>
|
||||
|
||||
<!-- 分页分隔线（最后一条记录无需分页） -->
|
||||
<div v-if="index !== roundRecords.length - 1" class="page-break"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* 1. 容器基础样式 */
|
||||
.medical-record-container {
|
||||
padding: 20px;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.print-btn-container {
|
||||
margin-bottom: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* 2. 病历主体样式（模拟A4纸） */
|
||||
.medical-record {
|
||||
max-width: 210mm;
|
||||
/* A4宽度 */
|
||||
min-height: 297mm;
|
||||
/* A4高度 */
|
||||
margin: 0 auto;
|
||||
padding: 20mm;
|
||||
/* A4页边距 */
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
||||
font-family: 'SimSun', '宋体', serif;
|
||||
/* 病历标准字体 */
|
||||
}
|
||||
|
||||
/* 3. 医院头部样式 */
|
||||
.hospital-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.header-logo {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.hospital-name {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 4. 患者信息样式 */
|
||||
.patient-info {
|
||||
border-bottom: 1px solid #000;
|
||||
padding: 5px 0;
|
||||
margin-bottom: 15px;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
margin-right: 30px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 5. 记录章节样式 */
|
||||
.record-section {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.section-main-title {
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.section-sub-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.record-time {
|
||||
font-size: 14px;
|
||||
margin-bottom: 15px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 6. 签名区域样式 */
|
||||
.signature-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
margin-top: 20px;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.signature-label {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.signature-input {
|
||||
width: 200px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ml-20 {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
/* 7. 分页分隔线（模拟PDF分页） */
|
||||
.page-break {
|
||||
height: 1px;
|
||||
background-color: #eee;
|
||||
margin: 30px 0;
|
||||
page-break-after: always;
|
||||
/* 打印时强制分页 */
|
||||
}
|
||||
|
||||
/* 8. 重复信息样式（后续页面的患者信息） */
|
||||
.page-repeated-info {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/* 9. 清洁输入框样式（复用已有，确保无边框） */
|
||||
:deep(.clean-textarea .el-textarea__wrapper) {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
:deep(.clean-textarea .el-textarea__inner) {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
resize: none;
|
||||
word-break: break-word;
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: break-word;
|
||||
font-family: inherit;
|
||||
font-size: 16px;
|
||||
line-height: 1.8;
|
||||
/* 病历标准行高 */
|
||||
color: #000;
|
||||
}
|
||||
|
||||
:deep(.clean-textarea .el-textarea__inner:focus) {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* 10. 打印专属样式：控制打印效果 */
|
||||
@media print {
|
||||
|
||||
/* 隐藏非打印内容（如打印按钮） */
|
||||
.no-print {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* 强制A4尺寸+无边距 */
|
||||
@page {
|
||||
size: A4;
|
||||
margin: 15mm;
|
||||
/* 打印页边距，匹配PDF */
|
||||
}
|
||||
|
||||
/* 确保背景色打印（部分浏览器默认不打印背景） */
|
||||
body {
|
||||
-webkit-print-color-adjust: exact;
|
||||
print-color-adjust: exact;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* 病历主体无边框阴影，仅打印内容 */
|
||||
.medical-record {
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 文本不换行优化 */
|
||||
.info-item {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
/* 确保输入框内容正常打印 */
|
||||
:deep(.el-textarea__inner) {
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
@@ -1,289 +0,0 @@
|
||||
<template>
|
||||
<div class="assessment-page">
|
||||
<div class="page-container">
|
||||
<!-- 医院头部 -->
|
||||
<div class="hospital-header">
|
||||
<h1 class="hospital-name">
|
||||
<span class="hospital-text">长春市朝阳区中医院</span>
|
||||
</h1>
|
||||
</div>
|
||||
<!-- 页面标题 -->
|
||||
<h2 class="form-title">住院病人风险评估表</h2>
|
||||
|
||||
<!-- 表单卡片 -->
|
||||
<el-form :model="formData" label-width="100px">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="科室" label-position="top">
|
||||
<el-input v-model="formData.department" readonly="true"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="床号" label-position="top" class="comment-padding">
|
||||
<el-input v-model="formData.bedNo" readonly="true"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="住院号" label-position="top" class="comment-padding">
|
||||
<el-input v-model="formData.busNo" readonly="true"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="姓名" label-position="top">
|
||||
<el-input
|
||||
v-model="formData.patientName"
|
||||
readonly="true"
|
||||
class="auto-resize-input"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="性别" label-position="top" class="comment-padding">
|
||||
<el-input
|
||||
v-model="formData.gender"
|
||||
readonly="true"
|
||||
class="auto-resize-input"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="年龄" label-position="top" class="comment-padding">
|
||||
<el-input v-model="formData.age" readonly="true" class="auto-resize-input"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item label="病情简介" label-position="top">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="formData.adm_cond"
|
||||
:autosize="{ minRows: 1, maxRows: 100 }"
|
||||
class="full-width-textarea"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="可能发生的不良后果及预后" label-position="top">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="formData.effectless"
|
||||
:autosize="{ minRows: 1, maxRows: 100 }"
|
||||
class="full-width-textarea"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="评估等级" label-position="top">
|
||||
<el-radio-group v-model="formData.evalLevel">
|
||||
<el-radio label="一般">一般</el-radio>
|
||||
<el-radio label="病重">病重</el-radio>
|
||||
<el-radio label="病危">病危</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="护理等级" label-position="top">
|
||||
<el-radio-group v-model="formData.nurseLevel">
|
||||
<el-radio label="特级护理">特级护理</el-radio>
|
||||
<el-radio label="一级护理">一级护理</el-radio>
|
||||
<el-radio label="二级护理">二级护理</el-radio>
|
||||
<el-radio label="三级护理">三级护理</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="收集资料时间:">
|
||||
<span class="date-display">{{ currentDate }}</span>
|
||||
</el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="评估医师签名:">
|
||||
<el-input
|
||||
disabled
|
||||
v-model="formData.sign_doc"
|
||||
:autosize="{ minRows: 1 }"
|
||||
class="auto-resize-input"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="主治医师签名:" class="comment-padding">
|
||||
<el-input
|
||||
v-model="formData.sign_maindoc"
|
||||
:autosize="{ minRows: 1 }"
|
||||
class="auto-resize-input"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="科主任签名:" class="comment-padding">
|
||||
<el-input
|
||||
v-model="formData.sign_leader"
|
||||
:autosize="{ minRows: 1 }"
|
||||
class="auto-resize-input"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<inAssessmentForm v-if="isShowprintDom" ref="recordPrintRef"></inAssessmentForm>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, onMounted, nextTick, reactive, ref } from 'vue';
|
||||
import inAssessmentForm from '../views/hospitalRecord/components/inAssessmentForm.vue';
|
||||
import useUserStore from '@/store/modules/user';
|
||||
import { previewPrint } from '../utils/printUtils';
|
||||
defineOptions({
|
||||
name: 'InHospitalCaseForm',
|
||||
});
|
||||
const isShowprintDom = ref(false);
|
||||
const recordPrintRef = ref();
|
||||
const props = defineProps({
|
||||
patientInfo: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const patient = props.patientInfo;
|
||||
const userStore = useUserStore();
|
||||
|
||||
// 表单数据 - 修复：将 formData 定义移到 patient 之后
|
||||
const formData = reactive({
|
||||
department: patient?.inHospitalOrgName || '',
|
||||
bedNo: patient?.bedName || '',
|
||||
busNo: patient?.busNo || '',
|
||||
patientName: patient?.patientName || '',
|
||||
gender: patient?.genderEnum_enumText || '',
|
||||
age: patient?.age || '',
|
||||
adm_cond: '',
|
||||
effectless: '',
|
||||
evalLevel: '',
|
||||
nurseLevel: '',
|
||||
sign_doc: userStore.nickName || '',
|
||||
sign_maindoc: '',
|
||||
sign_leader: '',
|
||||
});
|
||||
|
||||
// 当前日期（YYYY-MM-DD）
|
||||
const currentDate = computed(() => {
|
||||
const d = new Date();
|
||||
const yyyy = d.getFullYear();
|
||||
const mm = String(d.getMonth() + 1).padStart(2, '0');
|
||||
const dd = String(d.getDate()).padStart(2, '0');
|
||||
return `${yyyy}-${mm}-${dd}`;
|
||||
});
|
||||
|
||||
//表单引用
|
||||
const formRef = ref(null);
|
||||
|
||||
//提交表单
|
||||
const submit = () => {
|
||||
// 如果需要表单验证，可以使用以下代码
|
||||
// formRef.value.validate((valid) => {
|
||||
// if (valid) {
|
||||
// emits('submitOk', formData);
|
||||
// }
|
||||
// });
|
||||
// 简化版本:
|
||||
emits('submitOk', formData);
|
||||
};
|
||||
|
||||
//表单数据赋值
|
||||
const setFormData = (data) => {
|
||||
if (data) {
|
||||
Object.assign(formData, data);
|
||||
}
|
||||
};
|
||||
|
||||
// 定义 emits
|
||||
const emits = defineEmits(['submitOk']);
|
||||
|
||||
onMounted(() => {
|
||||
// 页面加载完成后触发一次 resize 事件，确保输入框高度正确
|
||||
setTimeout(() => {
|
||||
window.dispatchEvent(new Event('resize'));
|
||||
}, 100);
|
||||
console.log('@@@@@=======>', JSON.stringify(props.patientInfo));
|
||||
});
|
||||
// 打印方法
|
||||
const printFun = () => {
|
||||
console.log('入院记录打印');
|
||||
isShowprintDom.value = true;
|
||||
nextTick(() => {
|
||||
recordPrintRef?.value.setData(formData);
|
||||
nextTick(() => {
|
||||
previewPrint(recordPrintRef?.value.getDom());
|
||||
isShowprintDom.value = false;
|
||||
});
|
||||
});
|
||||
};
|
||||
//暴露接口
|
||||
defineExpose({ formData, submit, setFormData, printFun });
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* ===== 页面容器与背景 ===== */
|
||||
.comment-padding {
|
||||
padding-left: 10px;
|
||||
}
|
||||
.assessment-page {
|
||||
font-family: 'Microsoft YaHei', 宋体, sans-serif;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* ===== 医院头部 ===== */
|
||||
.hospital-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.hospital-name {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.hospital-text {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* ===== 表单标题与操作 ===== */
|
||||
.form-title {
|
||||
margin-top: 10px;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
margin: 1.25rem 0;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
/* ===== 表单卡片 ===== */
|
||||
.form-card {
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* ===== Textarea 自动扩展样式 ===== */
|
||||
.full-width-textarea {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.full-width-textarea textarea) {
|
||||
overflow: hidden;
|
||||
resize: none;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
/* ===== 日期显示 ===== */
|
||||
.date-display {
|
||||
font-size: 0.95rem;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
@@ -6,7 +6,7 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h2 class="title">长春市朝阳区中医院</h2>
|
||||
<h2 class="title">乾安县人民医院</h2>
|
||||
<h3 class="subtitle">患者护理记录单</h3>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,455 +0,0 @@
|
||||
<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="breathe" class="row-item">
|
||||
<div class="input-with-unit">
|
||||
<el-input v-model="formData.breathe" type="text" placeholder="请输入" />
|
||||
<span class="unit">次/分</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="血压" prop="blood" class="row-item">
|
||||
<div class="input-with-unit">
|
||||
<el-input v-model="formData.blood" type="text" placeholder="请输入" />
|
||||
<span class="unit">mmHg</span>
|
||||
</div>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="血压" prop="blood" class="row-item">
|
||||
<div class="input-with-unit blood-input-group">
|
||||
<el-input
|
||||
v-model="formData.bloodHigh"
|
||||
type="text"
|
||||
placeholder="高压"
|
||||
style="width: 80px"
|
||||
/>
|
||||
<span class="divider">/</span>
|
||||
<el-input
|
||||
v-model="formData.bloodLow"
|
||||
type="text"
|
||||
placeholder="低压"
|
||||
style="width: 80px"
|
||||
/>
|
||||
<span class="unit">(高/低)mmHg</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: 'OutpatientMedicalRecord1.1',
|
||||
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({
|
||||
breathe: '', // 呼吸
|
||||
bloodHigh: '', //高压
|
||||
bloodLow: '', //低压
|
||||
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: 900px;
|
||||
margin: 15px auto;
|
||||
padding: 15px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
font-family: Arial, sans-serif;
|
||||
box-sizing: border-box;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* 顶部姓名样式 */
|
||||
.patient-name {
|
||||
display: inline-block;
|
||||
margin-bottom: 15px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 滚动内容容器 */
|
||||
.form-scroll-container {
|
||||
width: 100%;
|
||||
max-height: 80vh;
|
||||
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: 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; /* 统一元素间距 */
|
||||
}
|
||||
.row-item {
|
||||
margin-bottom: 0; /* 取消底部间距，避免换行重叠 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.blood-input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.blood-input-group .el-input {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.divider {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.unit {
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
white-space: nowrap;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 基础信息项：适配短输入框 */
|
||||
.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;
|
||||
}
|
||||
.form-scroll-container {
|
||||
height: calc(100% - 35px);
|
||||
}
|
||||
.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>
|
||||
@@ -7,7 +7,7 @@
|
||||
<div class="surgicalPatientHandover-container">
|
||||
<div class="handover-form">
|
||||
<div class="form-header">
|
||||
<h1 class="hospital-name">长春市朝阳区中医院</h1>
|
||||
<h1 class="hospital-name">**医院</h1>
|
||||
<h2 class="form-title">手术患者交接单</h2>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user