452
openhis-ui-vue3/src/template/DischargeDiagnosisCertificate.vue
Executable file
452
openhis-ui-vue3/src/template/DischargeDiagnosisCertificate.vue
Executable file
@@ -0,0 +1,452 @@
|
||||
<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="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 {nextTick, onMounted, reactive, ref} from 'vue';
|
||||
import {ElMessage} from 'element-plus';
|
||||
import {previewPrint} from '../utils/printUtils';
|
||||
import DisDiagnMedicalRecord from '../views/hospitalRecord/components/disDiagnMedicalRecord.vue';
|
||||
import useUserStore from '@/store/modules/user';
|
||||
|
||||
const userStore = useUserStore();
|
||||
|
||||
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>
|
||||
937
openhis-ui-vue3/src/template/FallBedFallAssessment.vue
Executable file
937
openhis-ui-vue3/src/template/FallBedFallAssessment.vue
Executable file
@@ -0,0 +1,937 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="business">
|
||||
<!-- <el-table
|
||||
:data="tableDataSource"
|
||||
border
|
||||
stripe
|
||||
fit
|
||||
:header-cell-style="{ background: '#f2f2f2', color: 'black' }"
|
||||
>
|
||||
<el-table-column prop="content.recordTime" label="记录时间" />
|
||||
<el-table-column prop="content.totalScore" label="评估分数" />
|
||||
<el-table-column prop="content.patientCareSessionsTableList" label="护理措施" />
|
||||
<el-table-column prop="content.nurseSignature" label="责任护士" />
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
plain
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="handleUpdate(scope.row)"
|
||||
:disabled="admissionDataForm !== undefined"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
type="danger"
|
||||
size="small"
|
||||
@click="handleDelete(scope.row)"
|
||||
:disabled="admissionDataForm !== undefined"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table> -->
|
||||
|
||||
<div name="跌倒/坠床评估护理记录单" class="changeMajor" style="width: 99.9%">
|
||||
<div>
|
||||
<el-form ref="formRef" :model="form" style="width: 99.9%">
|
||||
<el-form-item style="text-align: center">
|
||||
<div
|
||||
style="
|
||||
width: 100%;
|
||||
font-size: 14pt;
|
||||
color: black;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
line-height: 36px;
|
||||
"
|
||||
>
|
||||
<span class="space">跌倒/坠床评估护理记录单</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="日期：" class="changeMajorFromItem" style="width: 100%">
|
||||
<el-row :span="20">
|
||||
<el-col :span="8" style="padding-left: 0px !important">
|
||||
<el-form-item>
|
||||
<el-date-picker
|
||||
v-model="form.ZKDATE"
|
||||
type="datetime"
|
||||
placeholder="选择日期"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
style="width: 800px"
|
||||
:disabled="admissionDataForm !== undefined"
|
||||
/>
|
||||
<!-- <span style="margin-left: 5px">时间：</span>
|
||||
<el-time-picker
|
||||
v-model="form.ZKTIME"
|
||||
placeholder="选择时间"
|
||||
value-format="HH:mm:ss"
|
||||
style="width: 40%"
|
||||
:disabled="admissionDataForm !== undefined"
|
||||
/> -->
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-button
|
||||
v-if="!updateFlag"
|
||||
type="primary"
|
||||
size="medium"
|
||||
style="margin-left: 25px"
|
||||
@click="onSubmit"
|
||||
>
|
||||
新增记录
|
||||
</el-button>
|
||||
<el-button
|
||||
v-else
|
||||
type="primary"
|
||||
size="small"
|
||||
style="margin-left: 5px"
|
||||
@click="onSubmit"
|
||||
>
|
||||
保存记录
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item style="padding-top: 10px; margin: 0px !important">
|
||||
<el-table
|
||||
:data="dangerData"
|
||||
border
|
||||
:span-method="handleSpan"
|
||||
style="text-align: center"
|
||||
>
|
||||
<el-table-column
|
||||
v-for="column in dangerColumns"
|
||||
:key="column.key"
|
||||
:prop="column.key"
|
||||
:width="column.width"
|
||||
:label="column.title"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column prop="id" label="选择" width="80" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-checkbox v-model="row.checked" @change="handleDangerChange(row)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
style="text-align: center; margin-bottom: 0px; padding: 0px"
|
||||
class="changeMajorFromItem"
|
||||
>
|
||||
<el-row :span="24">
|
||||
<el-col :span="24">
|
||||
<span style="font-size: large">总分：</span>
|
||||
<span>{{ totalScore }}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item style="padding-top: 10px">
|
||||
<el-table
|
||||
:data="nursingData"
|
||||
border
|
||||
:span-method="arraySpanMethod"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column
|
||||
v-for="column in nursingColumns"
|
||||
:key="column.key"
|
||||
:prop="column.key"
|
||||
:width="column.width"
|
||||
:label="column.title"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column prop="id" label="选择" width="80" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-checkbox v-model="row.checked" @change="handleNursingChange(row)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
style="text-align: center; margin-bottom: 0px; padding: 0px"
|
||||
class="changeMajorFromItem"
|
||||
>
|
||||
<el-row
|
||||
:span="24"
|
||||
style="display: flex; justify-content: center; align-items: center"
|
||||
>
|
||||
<div style="display: flex; align-items: center; gap: 10px">
|
||||
<span style="font-size: large; margin-left: 10vh">护士签字：</span>
|
||||
<el-input
|
||||
v-model="form.nurseSignature"
|
||||
style="width: 300px; padding: 8px"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-row :span="20">
|
||||
<el-col :span="5">
|
||||
<span>备注：</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item label-width="15px">
|
||||
<ul class="instructions-list">
|
||||
<li v-for="(item, index) in instructions" :key="index">{{ item }}</li>
|
||||
</ul>
|
||||
</el-form-item>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineOptions({
|
||||
name: 'FallBedFallAssessment',
|
||||
});
|
||||
import {computed, onMounted, reactive, ref} from 'vue';
|
||||
import {ElMessage} from 'element-plus';
|
||||
import {useRoute, useRouter} from 'vue-router';
|
||||
import {patientInfo} from '../views/doctorstation/components/store/patient';
|
||||
|
||||
// 定义props和emits
|
||||
const props = defineProps({
|
||||
patientInfo: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
const emits = defineEmits(['submitOk']);
|
||||
|
||||
// 响应式数据
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const queryRef = ref();
|
||||
const formRef = ref();
|
||||
|
||||
const wardCode = ref('');
|
||||
const patientId = ref('');
|
||||
const visitId = ref('');
|
||||
const type = '跌倒/坠床评估护理记录单';
|
||||
const updateFlag = ref(false);
|
||||
const info = ref('返回信息');
|
||||
const updateId = ref('');
|
||||
const tableDataSource = ref([]);
|
||||
const content = ref({});
|
||||
const totalScore = ref(0);
|
||||
const lastSubmit = ref('');
|
||||
const admissionDataForm = ref(route.params.admissionData);
|
||||
|
||||
const form = reactive({
|
||||
ZKDATE: '',
|
||||
ZKTIME: '',
|
||||
recordTime: '',
|
||||
totalScore: 0,
|
||||
bedFallRiskAssessmentList: [],
|
||||
nurseSignature: '',
|
||||
patientCareSessionsCheckedList: [],
|
||||
});
|
||||
|
||||
// 危险因素表格列
|
||||
const dangerColumns = [
|
||||
{
|
||||
key: 'content',
|
||||
title: '内容',
|
||||
width: '100',
|
||||
},
|
||||
{
|
||||
key: 'project',
|
||||
title: '项目',
|
||||
},
|
||||
{
|
||||
key: 'evalContent',
|
||||
title: '评定内容',
|
||||
},
|
||||
{
|
||||
key: 'score',
|
||||
title: '分数',
|
||||
},
|
||||
];
|
||||
|
||||
// 危险因素数据 - 使用ref确保响应性
|
||||
const dangerData = ref([
|
||||
{
|
||||
id: '1',
|
||||
content: '危险因素',
|
||||
project: '年龄',
|
||||
evalContent: '≥80周岁',
|
||||
score: 5,
|
||||
checked: false,
|
||||
},
|
||||
{ id: '2', content: '', evalContent: '≤3周岁，≥3个月', score: 5, checked: false },
|
||||
{ id: '3', content: '', evalContent: '>70周岁', score: 3, checked: false },
|
||||
{ id: '4', content: '', evalContent: '≤5周岁', score: 5, checked: false },
|
||||
{ id: '5', project: '既往史', evalContent: '跌倒史', score: 1, checked: false },
|
||||
{ id: '6', evalContent: '坠床史', score: 2, checked: false },
|
||||
{ id: '7', evalContent: '癫痫史', score: 2, checked: false },
|
||||
{ id: '8', project: '意识状态', evalContent: '嗜睡', score: 2, checked: false },
|
||||
{ id: '9', evalContent: '意识模糊', score: 2, checked: false },
|
||||
{ id: '10', evalContent: '谵妄', score: 3, checked: false },
|
||||
{ id: '11', evalContent: '躁动', score: 3, checked: false },
|
||||
{ id: '12', project: '感官因素', evalContent: '头晕', score: 4, checked: false },
|
||||
{ id: '13', evalContent: '听力障碍', score: 2, checked: false },
|
||||
{ id: '14', evalContent: '视力障碍', score: 2, checked: false },
|
||||
{
|
||||
id: '15',
|
||||
project: '肢体活动',
|
||||
evalContent: '关节僵硬、变形、疼痛',
|
||||
score: 1,
|
||||
checked: false,
|
||||
},
|
||||
{ id: '16', evalContent: '借助器械', score: 2, checked: false },
|
||||
{ id: '17', evalContent: '肢体偏瘫', score: 3, checked: false },
|
||||
{ id: '18', evalContent: '肌肉震颤麻痹', score: 3, checked: false },
|
||||
{ id: '19', evalContent: '体质虚弱、乏力', score: 1, checked: false },
|
||||
{ id: '20', evalContent: '尿频、尿急', score: 1, checked: false },
|
||||
{ id: '21', evalContent: '腹泻、便秘', score: 2, checked: false },
|
||||
{ id: '22', project: '药物因素', evalContent: '散瞳剂', score: 1, checked: false },
|
||||
{ id: '23', evalContent: '降压药', score: 1, checked: false },
|
||||
{ id: '24', evalContent: '降糖药', score: 1, checked: false },
|
||||
{ id: '25', evalContent: '镇静安眠药', score: 2, checked: false },
|
||||
{ id: '26', evalContent: '镇痛抗癫痫', score: 2, checked: false },
|
||||
{ id: '27', evalContent: '麻醉止痛剂', score: 2, checked: false },
|
||||
]);
|
||||
|
||||
// 护理措施表格列
|
||||
const nursingColumns = [
|
||||
{
|
||||
key: 'content',
|
||||
width: '100',
|
||||
title: '',
|
||||
},
|
||||
{
|
||||
key: 'project',
|
||||
title: '内容',
|
||||
},
|
||||
];
|
||||
|
||||
// 护理措施数据 - 使用ref确保响应性
|
||||
const nursingData = ref([
|
||||
{
|
||||
id: '1',
|
||||
content: '护理措施',
|
||||
project: '告知患者及家属可能导致跌倒、坠床的原因，并采取相应防范措施',
|
||||
checked: false,
|
||||
},
|
||||
{ id: '2', project: '悬挂预防跌倒、坠床标识，必要时班班交接', checked: false },
|
||||
{ id: '3', project: '患者日常用物放于可及处', checked: false },
|
||||
{ id: '4', project: '将呼叫器放于可及处，提醒患者下床时若有必要寻求帮助', checked: false },
|
||||
{ id: '5', project: '依据风险程度，必要时专人陪住', checked: false },
|
||||
{ id: '6', project: '保持地面无水渍、障碍物，病室及活动区域灯光充足', checked: false },
|
||||
{ id: '7', project: '指导患者穿长短合适的衣裤及防滑鞋', checked: false },
|
||||
{ id: '8', project: '适当使用床栏或约束带', checked: false },
|
||||
]);
|
||||
|
||||
// 说明信息
|
||||
const instructions = [
|
||||
'1.评估对象：新入患者、术后患者、有病情变化时必须评估；',
|
||||
'2.评分<5分，低度风险，无需连续评估，无需采取预防措施；',
|
||||
'3.评分≥5，高度风险，每周至少评估一次，需采取适宜的预防措施，同时填写《预防患者跌倒/坠床知情告知书》',
|
||||
];
|
||||
|
||||
// 计算属性
|
||||
const calculate = computed(() => {
|
||||
return dangerData.value
|
||||
.filter((option) => option.checked)
|
||||
.reduce((total, option) => total + option.score, 0);
|
||||
});
|
||||
|
||||
const isFormEmpty = computed(() => {
|
||||
return (
|
||||
form.ZKDATE === '' && form.ZKTIME === '' && form.recordTime === '' && form.nurseSignature === ''
|
||||
);
|
||||
});
|
||||
|
||||
// 方法 - 不再需要handleData方法，通过表单输入和按钮加载数据
|
||||
|
||||
const handleDangerChange = (row) => {
|
||||
totalScore.value = calculate.value;
|
||||
form.bedFallRiskAssessmentList = dangerData.value
|
||||
.filter((item) => item.checked)
|
||||
.map((item) => item.id);
|
||||
};
|
||||
|
||||
const handleNursingChange = (row) => {
|
||||
form.patientCareSessionsCheckedList = nursingData.value
|
||||
.filter((item) => item.checked)
|
||||
.map((item) => item.id);
|
||||
};
|
||||
|
||||
const init = async () => {
|
||||
// 使用模拟数据，不再调用后端API
|
||||
try {
|
||||
console.log('使用模拟数据初始化表格');
|
||||
|
||||
// 生成一些模拟数据
|
||||
const mockData = [
|
||||
{
|
||||
id: '1',
|
||||
content: {
|
||||
ZKDATE: '2023-01-15',
|
||||
ZKTIME: '09:30:00',
|
||||
recordTime: '2023-01-15 09:30:00',
|
||||
totalScore: 8,
|
||||
bedFallRiskAssessmentList: ['1', '5', '12'],
|
||||
nurseSignature: '张护士',
|
||||
patientCareSessionsCheckedList: ['1', '2', '3'],
|
||||
patientCareSessionsTableList: '1,2,3',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
content: {
|
||||
ZKDATE: '2023-01-20',
|
||||
ZKTIME: '14:20:00',
|
||||
recordTime: '2023-01-20 14:20:00',
|
||||
totalScore: 5,
|
||||
bedFallRiskAssessmentList: ['3', '11'],
|
||||
nurseSignature: '李护士',
|
||||
patientCareSessionsCheckedList: ['1', '4'],
|
||||
patientCareSessionsTableList: '1,4',
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
tableDataSource.value = [];
|
||||
if (mockData && mockData.length > 0) {
|
||||
mockData.forEach((item) => {
|
||||
tableDataSource.value.push(item);
|
||||
});
|
||||
|
||||
if (admissionDataForm.value !== undefined) {
|
||||
const rowData = tableDataSource.value.filter(
|
||||
(item) => item.content.recordTime === JSON.parse(admissionDataForm.value).assessmentDate
|
||||
);
|
||||
|
||||
if (rowData.length > 0) {
|
||||
handleUpdate(rowData[0]);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
tableDataSource.value = [];
|
||||
reset();
|
||||
}
|
||||
|
||||
ElMessage.success('模拟数据加载成功');
|
||||
} catch (error) {
|
||||
console.error('初始化失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSpan = ({ row, column, rowIndex, columnIndex }) => {
|
||||
if (columnIndex === 0) {
|
||||
if (rowIndex === 0) {
|
||||
return [dangerData.value.length, 1];
|
||||
} else if (rowIndex > 0 && rowIndex < 27) {
|
||||
return [0, 0];
|
||||
}
|
||||
if (rowIndex === 27) {
|
||||
return [1, 4];
|
||||
}
|
||||
}
|
||||
if (columnIndex === 1) {
|
||||
if (rowIndex === 0) {
|
||||
return [4, 1];
|
||||
} else if (rowIndex > 0 && rowIndex < 4) {
|
||||
return [0, 0];
|
||||
}
|
||||
if (rowIndex === 4) {
|
||||
return [3, 1];
|
||||
} else if (rowIndex > 0 && rowIndex < 7) {
|
||||
return [0, 0];
|
||||
}
|
||||
if (rowIndex === 7) {
|
||||
return [4, 1];
|
||||
} else if (rowIndex > 0 && rowIndex < 11) {
|
||||
return [0, 0];
|
||||
}
|
||||
if (rowIndex === 11) {
|
||||
return [3, 1];
|
||||
} else if (rowIndex > 0 && rowIndex < 14) {
|
||||
return [0, 0];
|
||||
}
|
||||
if (rowIndex === 14) {
|
||||
return [7, 1];
|
||||
} else if (rowIndex > 0 && rowIndex < 21) {
|
||||
return [0, 0];
|
||||
}
|
||||
if (rowIndex === 21) {
|
||||
return [6, 1];
|
||||
} else if (rowIndex > 0 && rowIndex < 27) {
|
||||
return [0, 0];
|
||||
}
|
||||
}
|
||||
return [1, 1];
|
||||
};
|
||||
|
||||
const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {
|
||||
// 护理措施
|
||||
if (columnIndex === 0) {
|
||||
if (rowIndex === 0) {
|
||||
return [nursingData.value.length, 1];
|
||||
} else if (rowIndex > 0 && rowIndex < 8) {
|
||||
return [0, 0];
|
||||
}
|
||||
// 护士签名
|
||||
if (rowIndex === 8) {
|
||||
return [1, 2];
|
||||
}
|
||||
}
|
||||
return [1, 1];
|
||||
};
|
||||
|
||||
const onSubmit = async () => {
|
||||
// 检查上次提交时间
|
||||
if (lastSubmit.value && new Date() - lastSubmit.value < 2000) {
|
||||
ElMessage.error('禁止重复提交！');
|
||||
return;
|
||||
}
|
||||
|
||||
// 更新上次提交时间
|
||||
lastSubmit.value = new Date();
|
||||
|
||||
// 时间处理
|
||||
if (form.ZKDATE) {
|
||||
form.recordTime = form.ZKDATE;
|
||||
}
|
||||
if (form.ZKTIME) {
|
||||
form.recordTime = form.ZKTIME;
|
||||
}
|
||||
|
||||
if (form.ZKDATE && form.ZKTIME) {
|
||||
form.recordTime = form.ZKDATE + ' ' + form.ZKTIME;
|
||||
}
|
||||
|
||||
form.recordTime ? new Date(form.recordTime) : null;
|
||||
|
||||
if (isFormEmpty.value) {
|
||||
ElMessage.error('请填写跌倒/坠床评估护理记录单后再进行操作');
|
||||
return;
|
||||
}
|
||||
|
||||
// 表单验证通过，收集数据
|
||||
form.totalScore = totalScore.value;
|
||||
|
||||
try {
|
||||
// 准备保存的数据
|
||||
const saveData = {
|
||||
...form,
|
||||
// 添加患者相关信息
|
||||
patientId: patientId.value,
|
||||
visitId: visitId.value,
|
||||
wardCode: wardCode.value,
|
||||
// 确保选中项数组存在
|
||||
bedFallRiskAssessmentList: form.bedFallRiskAssessmentList || [],
|
||||
patientCareSessionsCheckedList: form.patientCareSessionsCheckedList || [],
|
||||
};
|
||||
|
||||
// 提交表单数据
|
||||
console.log('提交保存的数据:', saveData);
|
||||
emits('submitOk', saveData);
|
||||
|
||||
// 更新本地数据
|
||||
if (updateFlag.value) {
|
||||
// 更新操作
|
||||
const updatedIndex = tableDataSource.value.findIndex((item) => item.id === updateId.value);
|
||||
if (updatedIndex !== -1) {
|
||||
tableDataSource.value[updatedIndex].content = { ...form };
|
||||
}
|
||||
ElMessage.success('更新成功');
|
||||
} else {
|
||||
// 新增操作
|
||||
const newRecord = {
|
||||
id: Date.now().toString(),
|
||||
content: { ...form },
|
||||
};
|
||||
tableDataSource.value.unshift(newRecord);
|
||||
ElMessage.success('保存成功');
|
||||
}
|
||||
|
||||
// 处理返回逻辑
|
||||
if (admissionDataForm.value !== undefined) {
|
||||
const admissionDataBack = JSON.parse(admissionDataForm.value);
|
||||
admissionDataBack.project2 = totalScore.value;
|
||||
|
||||
if (route.params.updateId !== undefined) {
|
||||
router.push({
|
||||
name: 'admissionEvaluation',
|
||||
params: {
|
||||
admissionData: JSON.stringify(admissionDataBack),
|
||||
updateId: route.params.updateId,
|
||||
},
|
||||
});
|
||||
} else {
|
||||
router.push({
|
||||
name: 'admissionEvaluation',
|
||||
params: { admissionData: JSON.stringify(admissionDataBack) },
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 重置表单
|
||||
reset();
|
||||
} catch (error) {
|
||||
console.error('保存失败:', error);
|
||||
ElMessage.error('保存失败，请重试');
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdate = (row) => {
|
||||
const loginUser = JSON.parse(window.localStorage.getItem('loginUser'));
|
||||
|
||||
if (
|
||||
row.content.nurseSignature !== loginUser.userName &&
|
||||
window.localStorage.getItem('editFlg') === '0'
|
||||
) {
|
||||
window.confirm('没有操作该数据的权限！');
|
||||
} else {
|
||||
reset();
|
||||
updateFlag.value = true;
|
||||
|
||||
// 深拷贝数据
|
||||
Object.assign(form, JSON.parse(JSON.stringify(row.content)));
|
||||
totalScore.value = row.content.totalScore;
|
||||
|
||||
// 评估项目
|
||||
dangerData.forEach((item) => {
|
||||
item.checked = form.bedFallRiskAssessmentList.includes(item.id);
|
||||
});
|
||||
|
||||
nursingData.forEach((item) => {
|
||||
item.checked = form.patientCareSessionsCheckedList.includes(item.id);
|
||||
});
|
||||
|
||||
updateId.value = row.id;
|
||||
}
|
||||
};
|
||||
|
||||
const reset = () => {
|
||||
Object.assign(form, {
|
||||
ZKDATE: '',
|
||||
ZKTIME: '',
|
||||
recordTime: '',
|
||||
totalScore: 0,
|
||||
bedFallRiskAssessmentList: [],
|
||||
nurseSignature: '',
|
||||
patientCareSessionsCheckedList: [],
|
||||
});
|
||||
|
||||
// 初始化评估项目
|
||||
dangerData.forEach((session) => {
|
||||
session.checked = false;
|
||||
});
|
||||
|
||||
// 初始化护理措施
|
||||
nursingData.forEach((session) => {
|
||||
session.checked = false;
|
||||
});
|
||||
|
||||
totalScore.value = 0;
|
||||
updateId.value = '';
|
||||
updateFlag.value = false;
|
||||
|
||||
if (admissionDataForm.value !== undefined) {
|
||||
const [date, time] = JSON.parse(admissionDataForm.value).assessmentDate.split(' ');
|
||||
form.ZKDATE = date;
|
||||
form.ZKTIME = time;
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = (row) => {
|
||||
const loginUser = JSON.parse(window.localStorage.getItem('loginUser'));
|
||||
|
||||
if (
|
||||
row.content.nurseSignature !== loginUser.userName &&
|
||||
window.localStorage.getItem('editFlg') === '0'
|
||||
) {
|
||||
window.confirm('没有操作该数据的权限！');
|
||||
} else {
|
||||
reset();
|
||||
|
||||
// 模拟删除操作，不再调用后端API
|
||||
const index = tableDataSource.value.findIndex((item) => item.id === row.id);
|
||||
if (index !== -1) {
|
||||
tableDataSource.value.splice(index, 1);
|
||||
updateFlag.value = false;
|
||||
ElMessage.success('模拟删除成功');
|
||||
} else {
|
||||
ElMessage.error('删除失败');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const dc_ajax_preview = () => {
|
||||
var args = {
|
||||
report: urlAddRandomNo('./grf/NurseRecord_Pressure_208.grf'),
|
||||
data: transformData(),
|
||||
type: 'preview',
|
||||
};
|
||||
|
||||
webapp_ws_ajax_run(args);
|
||||
};
|
||||
|
||||
const transformData = () => {
|
||||
const jsonDate = [...tableDataSource.value];
|
||||
|
||||
jsonDate.forEach((element) => {
|
||||
element.content.bedFallRiskAssessmentList.forEach((i) => {
|
||||
switch (i) {
|
||||
case '1':
|
||||
element.FS1 = '√';
|
||||
break;
|
||||
case '2':
|
||||
element.FS2 = '√';
|
||||
break;
|
||||
case '3':
|
||||
element.FS3 = '√';
|
||||
break;
|
||||
case '4':
|
||||
element.FS4 = '√';
|
||||
break;
|
||||
case '5':
|
||||
element.FS5 = '√';
|
||||
break;
|
||||
case '6':
|
||||
element.FS6 = '√';
|
||||
break;
|
||||
case '7':
|
||||
element.FS7 = '√';
|
||||
break;
|
||||
case '8':
|
||||
element.FS8 = '√';
|
||||
break;
|
||||
case '9':
|
||||
element.FS9 = '√';
|
||||
break;
|
||||
case '10':
|
||||
element.FS10 = '√';
|
||||
break;
|
||||
case '11':
|
||||
element.FS11 = '√';
|
||||
break;
|
||||
case '12':
|
||||
element.FS12 = '√';
|
||||
break;
|
||||
case '13':
|
||||
element.FS13 = '√';
|
||||
break;
|
||||
case '14':
|
||||
element.FS14 = '√';
|
||||
break;
|
||||
case '15':
|
||||
element.FS15 = '√';
|
||||
break;
|
||||
case '16':
|
||||
element.FS16 = '√';
|
||||
break;
|
||||
case '17':
|
||||
element.FS17 = '√';
|
||||
break;
|
||||
case '18':
|
||||
element.FS18 = '√';
|
||||
break;
|
||||
case '19':
|
||||
element.FS19 = '√';
|
||||
break;
|
||||
case '20':
|
||||
element.FS20 = '√';
|
||||
break;
|
||||
case '21':
|
||||
element.FS21 = '√';
|
||||
break;
|
||||
case '22':
|
||||
element.FS22 = '√';
|
||||
break;
|
||||
case '23':
|
||||
element.FS23 = '√';
|
||||
break;
|
||||
case '24':
|
||||
element.FS24 = '√';
|
||||
break;
|
||||
case '25':
|
||||
element.FS25 = '√';
|
||||
break;
|
||||
case '26':
|
||||
element.FS26 = '√';
|
||||
break;
|
||||
case '27':
|
||||
element.FS27 = '√';
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
element.countsum = element.content.totalScore;
|
||||
element.RQ = element.content.ZKDATE;
|
||||
element.SJ = element.content.ZKTIME;
|
||||
element.recordTime = element.content.ZKDATE + ' ' + element.content.ZKTIME;
|
||||
element.SIGN = element.content.nurseSignature;
|
||||
|
||||
element.content.patientCareSessionsCheckedList.forEach((i) => {
|
||||
switch (i) {
|
||||
case '1':
|
||||
element.HL1 = '√';
|
||||
break;
|
||||
case '2':
|
||||
element.HL2 = '√';
|
||||
break;
|
||||
case '3':
|
||||
element.HL3 = '√';
|
||||
break;
|
||||
case '4':
|
||||
element.HL4 = '√';
|
||||
break;
|
||||
case '5':
|
||||
element.HL5 = '√';
|
||||
break;
|
||||
case '6':
|
||||
element.HL6 = '√';
|
||||
break;
|
||||
case '7':
|
||||
element.HL7 = '√';
|
||||
break;
|
||||
case '8':
|
||||
element.HL8 = '√';
|
||||
break;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if (jsonDate.length == 0) {
|
||||
jsonDate[0] = {};
|
||||
}
|
||||
|
||||
jsonDate[0].RYRQ = patientInfo.value.admissionDateTime;
|
||||
jsonDate[0].KS = patientInfo.value.deptName;
|
||||
jsonDate[0].CH = patientInfo.value.bedLabel;
|
||||
jsonDate[0].name = patientInfo.value.name;
|
||||
jsonDate[0].sex = patientInfo.value.sex;
|
||||
jsonDate[0].AGE = patientInfo.value.age;
|
||||
jsonDate[0].ZYH = patientInfo.value.patientIdAndVisitId;
|
||||
jsonDate[0].ZD = patientInfo.value.diagnosis;
|
||||
|
||||
const transformedData = {
|
||||
master: jsonDate,
|
||||
};
|
||||
|
||||
return transformedData;
|
||||
};
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
try {
|
||||
// 安全获取用户信息
|
||||
let loginUser = {};
|
||||
const userStr = window.localStorage.getItem('loginUser');
|
||||
if (userStr) {
|
||||
loginUser = JSON.parse(userStr);
|
||||
}
|
||||
form.nurseSignature = loginUser.userName || '测试护士';
|
||||
wardCode.value = window.localStorage.getItem('wardInfo') || '';
|
||||
admissionDataForm.value = route.params.admissionData;
|
||||
|
||||
// 获取患者信息
|
||||
if (patientInfo.value) {
|
||||
patientId.value = patientInfo.value.patientId || '';
|
||||
visitId.value = patientInfo.value.visitId || '';
|
||||
}
|
||||
|
||||
// 自动初始化表格数据
|
||||
// 延迟执行，确保所有数据都已初始化
|
||||
setTimeout(() => {
|
||||
init();
|
||||
}, 100);
|
||||
} catch (error) {
|
||||
console.error('初始化错误:', error);
|
||||
// 即使出错也要初始化表格，显示默认数据
|
||||
setTimeout(() => {
|
||||
init();
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
|
||||
// 暴露接口
|
||||
defineExpose({ form, submit: onSubmit, reset });
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.business {
|
||||
background: white;
|
||||
border-radius: 5px;
|
||||
padding: 10px 16px;
|
||||
height: calc(100vh - 250px);
|
||||
overflow: auto;
|
||||
display: grid;
|
||||
grid-row-gap: 16px;
|
||||
|
||||
.changeMajor {
|
||||
border: 2px solid gray;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.changeMajorFromItem {
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
padding: 5px;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
.tableBorder {
|
||||
border: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.tableBorderRight {
|
||||
border-right: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.tableBorderRightBottom {
|
||||
border-right: 1px solid #ebeef5;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.tableBorderBottom {
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.el-textarea {
|
||||
overflow-y: auto;
|
||||
min-height: 50px;
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
.bed-no-label {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.title-inline {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.arrowhead {
|
||||
margin-left: 6px;
|
||||
font-size: 15px;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
787
openhis-ui-vue3/src/template/HospitalRecordForm.vue
Executable file
787
openhis-ui-vue3/src/template/HospitalRecordForm.vue
Executable file
@@ -0,0 +1,787 @@
|
||||
<template>
|
||||
<div class="hospital-record-form">
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="病案首页(一)" name="first">
|
||||
<medicalRecordFirst
|
||||
ref="firstRef"
|
||||
:formData="formData"
|
||||
@onCaseFirst="updateCaseFirstDatas"
|
||||
></medicalRecordFirst>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="病案首页(二)" name="second">
|
||||
<medicalRecordSecond
|
||||
:formData="formData"
|
||||
@onCaseSecond="updateCaseFirstDatas"
|
||||
></medicalRecordSecond>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="病案附页(三)" name="third">
|
||||
<medicalRecordThird
|
||||
:formData="formData"
|
||||
@onCaseThird="updateCaseFirstDatas"
|
||||
></medicalRecordThird>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<div class="form-footer">
|
||||
<!-- <button @click="printForm" class="print-btn">打印表单</button> -->
|
||||
<button @click="resetForm" class="reset-btn">重置表单</button>
|
||||
</div>
|
||||
<medicalRecordPrint v-if="isShowprintDom" ref="recordPrintRef"></medicalRecordPrint>
|
||||
<!-- <el-drawer v-model="drawer" size="100%">
|
||||
<medicalRecordPrint ref="recordPrintRef"></medicalRecordPrint>
|
||||
</el-drawer> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineOptions({
|
||||
name: 'HospitalRecordForm',
|
||||
});
|
||||
import {nextTick, reactive, ref} from 'vue';
|
||||
import {ElMessage} from 'element-plus';
|
||||
// import medicalRecordFirst from './components/medicalRecordFirst.vue';
|
||||
import medicalRecordFirst from '@/views/hospitalRecord/components/medicalRecordFirst.vue';
|
||||
import medicalRecordSecond from '@/views/hospitalRecord/components/medicalRecordSecond.vue';
|
||||
import medicalRecordThird from '@/views/hospitalRecord/components/medicalRecordThird.vue';
|
||||
import formDataJs from '../views/doctorstation/components/store/medicalpage';
|
||||
import medicalRecordPrint from '../views/hospitalRecord/components/medicalRecordPrint.vue';
|
||||
import {previewPrint} from '../utils/printUtils';
|
||||
import {getEncounterDiagnosis, getTcmDiagnosis,} from '../views/inpatientDoctor/home/components/api';
|
||||
import {cloneDeep} from 'lodash';
|
||||
|
||||
const firstRef = ref();
|
||||
const commpoentType = 'medicalRecord';
|
||||
const emit = defineEmits(['submitOk']);
|
||||
const drawer = ref(false);
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
//医院信息
|
||||
hospitalInfo: {
|
||||
//组织机构代码
|
||||
orgCode: '41275054-700000',
|
||||
//医疗付款方式
|
||||
medicalPaymentCode: '',
|
||||
},
|
||||
//患者信息
|
||||
patientInfo: {
|
||||
// 健康卡号
|
||||
healthCardNo: '',
|
||||
// 患者姓名
|
||||
patientName: '',
|
||||
// 患者性别
|
||||
gender: '',
|
||||
// 出生日期
|
||||
birthDate: '',
|
||||
// 年龄
|
||||
age: '',
|
||||
// 国籍
|
||||
nationality: '中国',
|
||||
// 籍贯
|
||||
nativePlace: '',
|
||||
// 民族
|
||||
ethnicity: '汉族',
|
||||
// 身份证号
|
||||
idCardNo: '',
|
||||
// 户口住址
|
||||
householdAddress: '',
|
||||
// 工作单位地址
|
||||
workUnitAddress: '',
|
||||
// 联系人姓名
|
||||
contactName: '',
|
||||
// 关系
|
||||
contactRelation: '',
|
||||
// 联系人地址
|
||||
contactAddress: '',
|
||||
// 联系人电话
|
||||
contactPhone: '',
|
||||
},
|
||||
// 住院信息
|
||||
admission: {
|
||||
// 第几次住院
|
||||
times: 1,
|
||||
// 住院号
|
||||
hospitalNo: '',
|
||||
// 病案号
|
||||
medicalRecordNo: '',
|
||||
// 入院途径
|
||||
admissionRoute: '',
|
||||
// 入院时间
|
||||
admitTime: '',
|
||||
// 入院科室
|
||||
department: '',
|
||||
// 病房
|
||||
ward: '',
|
||||
// 确诊日期
|
||||
confirmDate: '',
|
||||
// 出院时间
|
||||
dischargeTime: '',
|
||||
// 出院科室
|
||||
dischargeDepartment: '',
|
||||
// 病房
|
||||
dischargeWard: '',
|
||||
// 实际住院天数
|
||||
hospitalDays: '',
|
||||
},
|
||||
// 诊断信息
|
||||
diagnosis: {
|
||||
// 主要诊断
|
||||
mainDiagnosis: '',
|
||||
// 其他诊断
|
||||
otherDiagnosis: '',
|
||||
},
|
||||
// 医疗信息
|
||||
medicalInfo: {
|
||||
// 是否输血
|
||||
bloodTransfusion: '2',
|
||||
// 血型
|
||||
bloodType: '',
|
||||
// rh类型
|
||||
rhType: '',
|
||||
// 药物过敏史
|
||||
drugAllergy: '1',
|
||||
},
|
||||
// 医师信息
|
||||
doctorInfo: {
|
||||
// 科主任
|
||||
departmentDirector: '',
|
||||
// 副主任
|
||||
chiefPhysician: '',
|
||||
// 主治医师
|
||||
attendingPhysician: '',
|
||||
// 住院医师
|
||||
residentPhysician: '',
|
||||
// 责任护士
|
||||
chargeNurse: '',
|
||||
// 住院总医师
|
||||
chiefResident: '',
|
||||
// 实习医师
|
||||
intern: '',
|
||||
// 病案质量
|
||||
recordQuality: '1',
|
||||
// 编码员
|
||||
coder: '',
|
||||
// 控制日期
|
||||
qualityControlDate: '',
|
||||
},
|
||||
// 病案首页2
|
||||
medicalSecond: {
|
||||
// 手术方式
|
||||
surgeryType: '',
|
||||
// 离院方式
|
||||
leaveType: '',
|
||||
// 是否计划出院
|
||||
isPlan: '',
|
||||
// 目的
|
||||
purpose: '',
|
||||
//昏迷时间---入院前
|
||||
comaDurationTime_before: '',
|
||||
//昏迷时间---入院后
|
||||
comaDurationTime_after: '',
|
||||
// 肿瘤分期
|
||||
tumorStaging: '',
|
||||
// T
|
||||
tumor_T: '',
|
||||
// N
|
||||
tumor_N: '',
|
||||
// M
|
||||
tumor_M: '',
|
||||
// 判断依据
|
||||
judgmentBase: '',
|
||||
// 分化程度
|
||||
degreeDifferentiation: '',
|
||||
// 临床路径
|
||||
enterPath: '',
|
||||
// 变异
|
||||
mutation: '',
|
||||
// 退出路径
|
||||
outPath: '',
|
||||
// 特级护理
|
||||
nursingLevel_spec: '',
|
||||
// 1级护理
|
||||
nursingLevel_1: '',
|
||||
// 2级护理
|
||||
nursingLevel_2: '',
|
||||
// 3级护理
|
||||
nursingLevel_3: '',
|
||||
// 呼吸机使用
|
||||
ventilatorUse: '',
|
||||
// 有创呼吸机使用小时
|
||||
ventilatorUseTime: '',
|
||||
// 手术表
|
||||
tableData_top: [],
|
||||
},
|
||||
// 病案首页3
|
||||
// 住院费用
|
||||
hospitalization: {
|
||||
// 总费用
|
||||
hosCharges: '',
|
||||
// 自付金额
|
||||
hosCharges_self: '',
|
||||
},
|
||||
// 综合医疗服务类
|
||||
medicalServices: {
|
||||
// 一般医疗服务类
|
||||
medicalServices_1: '',
|
||||
// 一般治疗操作费
|
||||
medicalServices_2: '',
|
||||
// 护理费
|
||||
medicalServices_3: '',
|
||||
// 其他费用
|
||||
medicalServices_4: '',
|
||||
},
|
||||
// 诊断类
|
||||
diagnosisClass: {
|
||||
// 病理诊断
|
||||
diagnosis_5: '',
|
||||
// 实验室诊断
|
||||
diagnosis_6: '',
|
||||
// 影像学诊断
|
||||
diagnosis_7: '',
|
||||
// 临床诊断
|
||||
diagnosis_8: '',
|
||||
},
|
||||
// 治疗类
|
||||
treatmentClass: {
|
||||
// 非手术治疗项目费
|
||||
treatment_9: '',
|
||||
// 临床物理治疗
|
||||
treatment_9_1: '',
|
||||
// 手术治疗费
|
||||
treatment_10: '',
|
||||
// 麻醉费
|
||||
treatment_10_1: '',
|
||||
// 手术费
|
||||
treatment_10_2: '',
|
||||
},
|
||||
// 康复类
|
||||
recoveryClass: {
|
||||
// 康复费
|
||||
recovery_11: '',
|
||||
},
|
||||
// 中医类
|
||||
TCMClass: {
|
||||
// 中医治疗费
|
||||
TCM_12: '',
|
||||
},
|
||||
// 西药类
|
||||
WesternClass: {
|
||||
// 西药费
|
||||
Western_13: '',
|
||||
// 抗菌药物费
|
||||
Western_13_1: '',
|
||||
},
|
||||
// 中药类
|
||||
chineseClass: {
|
||||
//中成药
|
||||
chinese_14: '',
|
||||
// 中草药
|
||||
chinese_15: '',
|
||||
},
|
||||
// 血液和血液制品类
|
||||
bloodClass: {
|
||||
// 血费
|
||||
blood_16: '',
|
||||
// 蛋白类制品费
|
||||
blood_17: '',
|
||||
// 球蛋白制品费
|
||||
blood_18: '',
|
||||
// 凝血因子制品费
|
||||
blood_19: '',
|
||||
// 细胞因子制品费
|
||||
blood_20: '',
|
||||
},
|
||||
// 耗材类
|
||||
consumablesClass: {
|
||||
// 检查用一次性医用材料费
|
||||
consumables_21: '',
|
||||
// 治疗用一次性医用材料费
|
||||
consumables_22: '',
|
||||
// 手术用一次性医用材料费
|
||||
consumables_23: '',
|
||||
},
|
||||
// 其他类
|
||||
otherClass: {
|
||||
// 其他费用
|
||||
other_24: '',
|
||||
},
|
||||
// 其他诊断及手术附加页
|
||||
tableData_sub: [],
|
||||
// 手术操作数组
|
||||
tableData_top: [],
|
||||
});
|
||||
|
||||
// Props与事件
|
||||
const props = defineProps({
|
||||
patientInfo: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const activeName = ref('first');
|
||||
const recordPrintRef = ref();
|
||||
const isShowprintDom = ref(false);
|
||||
|
||||
// 打印表单
|
||||
const printForm = () => {
|
||||
drawer.value = true;
|
||||
// // 创建一个新的打印窗口
|
||||
// const printWindow = window.open('', '_blank');
|
||||
// let printContent;
|
||||
// // 获取模板字符串并替换转义的插值标记
|
||||
// if (activeName.value == 'first') {
|
||||
// printContent = medicalRecordFirstPrint.printContent;
|
||||
// } else if (activeName.value == 'second') {
|
||||
// printContent = medicalRecordSecondPrint.printContent;
|
||||
// } else {
|
||||
// printContent = medicalRecordThirdPrint.printContent;
|
||||
// }
|
||||
// // 这里可以进行实际的数据替换操作
|
||||
// printContent = printContent.replace(/\$\{([^}]+)\}/g, (match, expr) => {
|
||||
// // 简单示例：实际应根据expr内容进行数据提取
|
||||
// return eval(expr); // 注意：实际使用中应避免eval，这里仅为示例
|
||||
// });
|
||||
// // 将内容写入打印窗口并打印
|
||||
// printWindow.document.write(printContent);
|
||||
// printWindow.document.close();
|
||||
};
|
||||
|
||||
function handleClick() {
|
||||
console.log('住院记录表单点击事件触发');
|
||||
}
|
||||
|
||||
const resetFun = (data) => {
|
||||
Object.keys(data).forEach((key) => {
|
||||
if (data[key] instanceof Array) {
|
||||
data[key].length = 0;
|
||||
} else {
|
||||
data[key] = '';
|
||||
}
|
||||
});
|
||||
};
|
||||
// 重置表单
|
||||
const resetForm = () => {
|
||||
if (activeName.value == 'first') {
|
||||
// resetFun(firstRef.value.formData.hospitalInfo);
|
||||
// resetFun(firstRef.value.formData.patientInfo);
|
||||
firstRef.value.formData.patientInfo.napl = ''; //籍贯
|
||||
firstRef.value.formData.patientInfo.certno = ''; //身份证号
|
||||
firstRef.value.formData.patientInfo.resd_addr = ''; //户口地址
|
||||
firstRef.value.formData.patientInfo.empr_addr = ''; //工作单位
|
||||
firstRef.value.formData.patientInfo.coner_name = ''; //联系人
|
||||
firstRef.value.formData.patientInfo.coner_rlts_code = ''; //关系
|
||||
firstRef.value.formData.patientInfo.coner_addr = ''; //联系人地址
|
||||
firstRef.value.formData.patientInfo.coner_tel = ''; //联系人电话
|
||||
resetFun(firstRef.value.formData.admission);
|
||||
resetFun(firstRef.value.formData.diagnosis);
|
||||
resetFun(firstRef.value.formData.medicalInfo);
|
||||
resetFun(firstRef.value.formData.doctorInfo);
|
||||
} else if (activeName.value == 'second') {
|
||||
resetFun(firstRef.value.formData.medicalSecond);
|
||||
} else {
|
||||
resetFun(firstRef.value.formData.hospitalization);
|
||||
resetFun(firstRef.value.formData.medicalServices);
|
||||
resetFun(firstRef.value.formData.diagnosisClass);
|
||||
resetFun(firstRef.value.formData.treatmentClass);
|
||||
resetFun(firstRef.value.formData.recoveryClass);
|
||||
resetFun(firstRef.value.formData.TCMClass);
|
||||
resetFun(firstRef.value.formData.WesternClass);
|
||||
resetFun(firstRef.value.formData.chineseClass);
|
||||
resetFun(firstRef.value.formData.bloodClass);
|
||||
resetFun(firstRef.value.formData.consumablesClass);
|
||||
resetFun(firstRef.value.formData.otherClass);
|
||||
firstRef.value.formData.tableData_sub.length = 0;
|
||||
firstRef.value.formData.tableData_top.length = 0;
|
||||
}
|
||||
};
|
||||
//自定义事件更新主数据
|
||||
const updateCaseFirstDatas = (newDatas) => {
|
||||
Object.assign(formData, newDatas);
|
||||
};
|
||||
|
||||
const getList = () => {
|
||||
getEncounterDiagnosis(props.patientInfo.encounterId).then((res) => {
|
||||
if (res.code == 200) {
|
||||
console.log('getEncounterDiagnosis=======>', JSON.stringify(res.data));
|
||||
formDataJs.diagnosisList = res.data;
|
||||
}
|
||||
});
|
||||
getTcmDiagnosis({ encounterId: props.patientInfo.encounterId }).then((res) => {
|
||||
if (res.code == 200) {
|
||||
// if (res.data.illness.length > 0) {
|
||||
// diagnosisNetDatas.value = res.data.illness;
|
||||
// res.data.illness.forEach((item, index) => {
|
||||
// form.value.diagnosisList.push({
|
||||
// name: item.name + '-' + res.data.symptom[index].name,
|
||||
// ybNo: item.ybNo,
|
||||
// medTypeCode: item.medTypeCode,
|
||||
// });
|
||||
// });
|
||||
// }
|
||||
}
|
||||
});
|
||||
};
|
||||
// 点击历史数据回传布局
|
||||
const setFormData = (data) => {
|
||||
if (Object.keys(data).length > 0) {
|
||||
Object.assign(firstRef.value.formData, data);
|
||||
} else {
|
||||
resetForm();
|
||||
}
|
||||
getList();
|
||||
};
|
||||
//保存数据方法
|
||||
const submit = () => {
|
||||
/*
|
||||
{
|
||||
"encounterId": "1987758365116919809",
|
||||
"statusEnum": 5,
|
||||
"busNo": "ZY202511100001",
|
||||
"inHospitalTime": "2025-11-10 13:47:08",
|
||||
"outHospitalTime": null,
|
||||
"patientId": "1981311362744872962",
|
||||
"patientName": "王海明",
|
||||
"genderEnum": 0,
|
||||
"genderEnum_enumText": "男性",
|
||||
"birthDate": "1999-06-18 00:00:00",
|
||||
"age": "26岁",
|
||||
"wardName": "内科病区1",
|
||||
"houseName": "内科病房2",
|
||||
"bedName": "002",
|
||||
"inOrgTime": "2025-11-10 19:36:28",
|
||||
"inHospitalDays": 2,
|
||||
"inHospitalOrgId": "1950367917287616513",
|
||||
"inHospitalOrgName": "住院内科",
|
||||
"contractNo": "0000",
|
||||
"contractName": "自费",
|
||||
"regDiagnosisName": "感冒",
|
||||
"accountId": "1987759000528809985"
|
||||
}
|
||||
*/
|
||||
// const isOk = verifyMethod(formDataJs);
|
||||
if (1) {
|
||||
const cloneParams = cloneDeep(formDataJs);
|
||||
|
||||
// 病例二表
|
||||
const medicalSecondTable = cloneParams.medicalSecond.surgery_tableData.filter((obj) => {
|
||||
return obj.isChoose;
|
||||
});
|
||||
// 病例三表第一张表
|
||||
const other_tableData = cloneParams.other_tableData.filter((obj) => {
|
||||
return obj.isChoose;
|
||||
});
|
||||
// 病例三表第二张表
|
||||
const surgery_tableData = cloneParams.surgery_tableData.filter((obj) => {
|
||||
return obj.isChoose;
|
||||
});
|
||||
// 数据整理
|
||||
let params = {
|
||||
...cloneParams,
|
||||
other_tableData,
|
||||
surgery_tableData,
|
||||
};
|
||||
params.medicalSecond.surgery_tableData = medicalSecondTable;
|
||||
console.log('cloneParams========>', JSON.stringify(params));
|
||||
emit('submitOk', params);
|
||||
}
|
||||
};
|
||||
|
||||
// 公共校验方法
|
||||
const verifyMethod = (data) => {
|
||||
let message = '';
|
||||
if (!data) return false;
|
||||
if (!data.hospitalInfo.orgCode) {
|
||||
message = '请填写组织机构代码';
|
||||
} else if (!data.hospitalInfo.medicalPaymentCode) {
|
||||
message = '请选择医疗付费方式';
|
||||
} else if (!data.patientInfo.healthCardNo) {
|
||||
message = '请填写健康卡号';
|
||||
} else if (!data.patientInfo.patientName) {
|
||||
message = '请填患者姓名';
|
||||
} else if (!data.patientInfo.gender) {
|
||||
message = '请选择患者性别';
|
||||
} else if (!data.patientInfo.birthDate) {
|
||||
message = '请选择出生日期';
|
||||
} else if (!data.patientInfo.age) {
|
||||
message = '请填写患者年龄';
|
||||
} else if (!data.patientInfo.nationality) {
|
||||
message = '请填写国籍';
|
||||
} else if (!data.patientInfo.nativePlace) {
|
||||
message = '请填写籍贯';
|
||||
} else if (!data.patientInfo.ethnicity) {
|
||||
message = '请填写民族';
|
||||
} else if (!data.patientInfo.idCardNo) {
|
||||
message = '请填写身份证号';
|
||||
} else if (!data.patientInfo.householdAddress) {
|
||||
message = '请填写户口地址';
|
||||
} else if (!data.patientInfo.workUnitAddress) {
|
||||
message = '请填写工作单位及地址';
|
||||
} else if (!data.patientInfo.contactName) {
|
||||
message = '请填写联系人姓名';
|
||||
} else if (!data.patientInfo.contactRelation) {
|
||||
message = '请填写与联系人关系';
|
||||
} else if (!data.patientInfo.contactAddress) {
|
||||
message = '请填写地址';
|
||||
} else if (!data.patientInfo.contactPhone) {
|
||||
message = '请填写电话';
|
||||
} else if (!data.admission.times) {
|
||||
message = '请填写第几次住院';
|
||||
} else if (!data.admission.hospitalNo) {
|
||||
message = '请填写住院号';
|
||||
} else if (!data.admission.medicalRecordNo) {
|
||||
message = '请填写病案号';
|
||||
} else if (!data.admission.admissionRoute) {
|
||||
message = '请填写入院途径';
|
||||
} else if (!data.admission.admitTime) {
|
||||
message = '请填写入院时间';
|
||||
} else if (!data.admission.department) {
|
||||
message = '请填写入院科室';
|
||||
} else if (!data.admission.ward) {
|
||||
message = '请填写病房';
|
||||
} else if (!data.admission.confirmDate) {
|
||||
message = '请填写确诊日期';
|
||||
} else if (!data.admission.dischargeTime) {
|
||||
message = '请填写出院时间';
|
||||
} else if (!data.admission.dischargeDepartment) {
|
||||
message = '请填写出院科室';
|
||||
} else if (!data.admission.dischargeWard) {
|
||||
message = '请填写病房';
|
||||
} else if (!data.admission.hospitalDays) {
|
||||
message = '请填写实际住院天数';
|
||||
} else if (!data.diagnosis.mainDiagnosis) {
|
||||
message = '请填写主要诊断';
|
||||
} else if (!data.diagnosis.otherDiagnosis) {
|
||||
message = '请填写其他诊断';
|
||||
} else if (!data.medicalInfo.bloodTransfusion) {
|
||||
message = '请选择是否输血';
|
||||
} else if (!data.medicalInfo.bloodType) {
|
||||
message = '请选择血型';
|
||||
} else if (!data.medicalInfo.rhType) {
|
||||
message = '请选择rh类型';
|
||||
} else if (!data.medicalInfo.drugAllergy) {
|
||||
message = '请选择药物过敏史';
|
||||
} else if (!data.doctorInfo.departmentDirector) {
|
||||
message = '请填写科主任';
|
||||
} else if (!data.doctorInfo.chiefPhysician) {
|
||||
message = '请填写主任(副主任)医师';
|
||||
} else if (!data.doctorInfo.attendingPhysician) {
|
||||
message = '请填写主治医师';
|
||||
} else if (!data.doctorInfo.residentPhysician) {
|
||||
message = '请填写住院医师';
|
||||
} else if (!data.doctorInfo.chargeNurse) {
|
||||
message = '请填写责任护士';
|
||||
} else if (!data.doctorInfo.chiefResident) {
|
||||
message = '请填写住院总医师';
|
||||
} else if (!data.doctorInfo.intern) {
|
||||
message = '请填写实习医师';
|
||||
} else if (!data.doctorInfo.recordQuality) {
|
||||
message = '请填写病案质量';
|
||||
} else if (!data.doctorInfo.coder) {
|
||||
message = '请填写编码员';
|
||||
} else if (!data.doctorInfo.qualityControlDate) {
|
||||
message = '请选择质控日期';
|
||||
} else if (!data.medicalSecond.tableData_top) {
|
||||
message = '请添加手术操作表';
|
||||
} else if (!data.medicalSecond.surgeryType) {
|
||||
message = '请填写手术方式';
|
||||
} else if (!data.medicalSecond.leaveType) {
|
||||
message = '请选择离院方式';
|
||||
} else if (!data.medicalSecond.isPlan) {
|
||||
message = '请选择是否有出院31天内再住院计划';
|
||||
} else if (!data.medicalSecond.purpose) {
|
||||
message = '请填写目的';
|
||||
} else if (!data.medicalSecond.comaDurationTime_before) {
|
||||
message = '请选择颅脑损伤患者昏迷时间-入院前';
|
||||
} else if (!data.medicalSecond.comaDurationTime_after) {
|
||||
message = '请选择颅脑损伤患者昏迷时间-入院后';
|
||||
} else if (!data.medicalSecond.tumorStaging) {
|
||||
message = '请填写肿瘤分期';
|
||||
} else if (!data.medicalSecond.tumor_T) {
|
||||
message = '请填写T';
|
||||
} else if (!data.medicalSecond.tumor_N) {
|
||||
message = '请填写N';
|
||||
} else if (!data.medicalSecond.tumor_M) {
|
||||
message = '请填写M';
|
||||
} else if (!data.medicalSecond.judgmentBase) {
|
||||
message = '请填写判断依据';
|
||||
} else if (!data.medicalSecond.degreeDifferentiation) {
|
||||
message = '请选择分化程度';
|
||||
} else if (!data.medicalSecond.enterPath) {
|
||||
message = '请填写临床路径-进入路径';
|
||||
} else if (!data.medicalSecond.mutation) {
|
||||
message = '请选择是否变异';
|
||||
} else if (!data.medicalSecond.outPath) {
|
||||
message = '请选择退出路径';
|
||||
} else if (!data.medicalSecond.nursingLevel_spec) {
|
||||
message = '请填写特级护理';
|
||||
} else if (!data.medicalSecond.nursingLevel_1) {
|
||||
message = '请填写1级护理';
|
||||
} else if (!data.medicalSecond.nursingLevel_2) {
|
||||
message = '请填写2级护理';
|
||||
} else if (!data.medicalSecond.nursingLevel_3) {
|
||||
message = '请填写3级护理';
|
||||
} else if (!data.medicalSecond.ventilatorUse) {
|
||||
message = '请选择是否使用呼吸机使用';
|
||||
} else if (!data.medicalSecond.ventilatorUseTime) {
|
||||
message = '请填写有创呼吸机使用时间（小时）';
|
||||
}
|
||||
if (message.length > 0) {
|
||||
ElMessage({
|
||||
message,
|
||||
type: 'error',
|
||||
});
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
// 打印方法
|
||||
const printFun = () => {
|
||||
isShowprintDom.value = true;
|
||||
nextTick(() => {
|
||||
recordPrintRef?.value.setData();
|
||||
previewPrint(recordPrintRef?.value.getDom());
|
||||
isShowprintDom.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
submit,
|
||||
commpoentType,
|
||||
setFormData,
|
||||
printFun,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/*max-width: 1000px;*/
|
||||
.hospital-record-form {
|
||||
font-family: 'SimSun', serif;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.form-header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.hospital-name {
|
||||
font-size: 24px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.form-title {
|
||||
font-size: 20px;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 30px;
|
||||
border: 1px solid #ccc;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-weight: bold;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 5px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
margin-right: 15px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.form-item.full-width {
|
||||
flex: 0 0 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 80px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.form-footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.print-btn,
|
||||
.reset-btn {
|
||||
padding: 10px 20px;
|
||||
margin: 0 10px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.print-btn {
|
||||
background-color: #4caf50;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
background-color: #f44336;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 打印样式 */
|
||||
@media print {
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.hospital-record-form {
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.form-footer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@page {
|
||||
size: A4;
|
||||
margin: 2cm;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
402
openhis-ui-vue3/src/template/ProgressNoteform.vue
Executable file
402
openhis-ui-vue3/src/template/ProgressNoteform.vue
Executable file
@@ -0,0 +1,402 @@
|
||||
<script lang="ts" setup>
|
||||
import {ref} from 'vue';
|
||||
import useUserStore from '@/store/modules/user';
|
||||
// 迁移到 hiprint
|
||||
import { previewPrint } from '@/utils/printUtils.js';
|
||||
|
||||
const userStore = useUserStore();
|
||||
|
||||
// 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. 打印功能：使用 hiprint
|
||||
const handlePrint = () => {
|
||||
const printDom = document.querySelector('.medical-record');
|
||||
if (printDom) {
|
||||
previewPrint(printDom);
|
||||
} else {
|
||||
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="userStore.hospitalName + 'Logo'" class="header-logo" />
|
||||
<h1 class="hospital-name">{{ userStore.hospitalName }}</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>
|
||||
BIN
openhis-ui-vue3/src/template/img/logo.png
Executable file
BIN
openhis-ui-vue3/src/template/img/logo.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
openhis-ui-vue3/src/template/imgs/logo.png
Executable file
BIN
openhis-ui-vue3/src/template/imgs/logo.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
290
openhis-ui-vue3/src/template/inHospitalCaseForm.vue
Executable file
290
openhis-ui-vue3/src/template/inHospitalCaseForm.vue
Executable file
@@ -0,0 +1,290 @@
|
||||
<template>
|
||||
<div class="assessment-page">
|
||||
<div class="page-container">
|
||||
<!-- 医院头部 -->
|
||||
<div class="hospital-header">
|
||||
<h1 class="hospital-name">
|
||||
<span class="hospital-text">{{ userStore.hospitalName }}</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, nextTick, onMounted, 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>
|
||||
901
openhis-ui-vue3/src/template/inHospitalRecord.vue
Executable file
901
openhis-ui-vue3/src/template/inHospitalRecord.vue
Executable file
@@ -0,0 +1,901 @@
|
||||
<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 defaultFormData = {
|
||||
// 基础信息
|
||||
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'] }],
|
||||
});
|
||||
|
||||
// 监听 patientInfo 变化，更新表单数据
|
||||
watch(
|
||||
() => props.patientInfo,
|
||||
(newPatientInfo) => {
|
||||
if (newPatientInfo) {
|
||||
// 更新基础信息
|
||||
formData.patientName = newPatientInfo.patientName || newPatientInfo.name || '';
|
||||
formData.hospitalNo = newPatientInfo.busNo || newPatientInfo.hospitalNo || '';
|
||||
formData.gender = newPatientInfo.genderEnum_enumText || newPatientInfo.gender || '';
|
||||
formData.age = newPatientInfo.age || '';
|
||||
formData.nation = newPatientInfo.nation || '';
|
||||
formData.occupation = newPatientInfo.profession || '';
|
||||
formData.marriage = newPatientInfo.maritalStatus || '';
|
||||
formData.birthplace = newPatientInfo.birthPlace || '';
|
||||
// 可以根据需要更新更多字段
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
|
||||
// 生命周期
|
||||
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 || patient?.name || '';
|
||||
}
|
||||
if (!formData.gender) {
|
||||
formData.gender = patient?.genderEnum_enumText || patient?.gender || '';
|
||||
}
|
||||
if (!formData.age) {
|
||||
formData.age = patient?.age || '';
|
||||
}
|
||||
if (!formData.hospitalNo) {
|
||||
formData.hospitalNo = patient?.busNo || patient?.hospitalNo || '';
|
||||
}
|
||||
});
|
||||
|
||||
// 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.keys(data).length > 0) {
|
||||
// 如果有数据，则合并到表单中
|
||||
Object.assign(formData, data);
|
||||
} else {
|
||||
// 如果没有数据或数据为空，则重置为默认值
|
||||
// 保留患者基础信息（来自props）
|
||||
Object.assign(formData, {
|
||||
...defaultFormData,
|
||||
patientName: patient?.name || formData.patientName,
|
||||
hospitalNo: patient?.busNo || formData.hospitalNo,
|
||||
gender: patient?.genderEnum_enumText || formData.gender,
|
||||
age: patient?.age || formData.age,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 日期格式化工具
|
||||
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>
|
||||
624
openhis-ui-vue3/src/template/inHospitalSurgicalRecord.vue
Executable file
624
openhis-ui-vue3/src/template/inHospitalSurgicalRecord.vue
Executable file
@@ -0,0 +1,624 @@
|
||||
<template>
|
||||
<div class="medical-document">
|
||||
<!-- 标题区域 -->
|
||||
<div class="doc-header">
|
||||
<h1 class="doc-title">{{ hospitalName }} 住院手术记录单</h1>
|
||||
<div class="doc-subtitle">住院号: {{ formData.busNo || '待填写' }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
label-width="120px"
|
||||
label-align="left"
|
||||
class="doc-content"
|
||||
style="height: 60vh; overflow: scroll"
|
||||
>
|
||||
<!-- 患者与手术基础信息 -->
|
||||
<section class="doc-section">
|
||||
<h2 class="section-title">一、患者与手术基本信息</h2>
|
||||
<div class="adaptive-grid">
|
||||
<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="gender" class="grid-item required">
|
||||
<el-select v-model="formData.gender" placeholder="请选择性别">
|
||||
<el-option label="男" value="男" />
|
||||
<el-option label="女" value="女" />
|
||||
</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="请输入年龄" />
|
||||
<span class="unit">岁</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="科室" prop="department" class="grid-item required">
|
||||
<el-input v-model="formData.department" placeholder="如：普外科" clearable />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="病房/床号" prop="bedNo" class="grid-item required">
|
||||
<el-input v-model="formData.bedNo" placeholder="如：502-03" clearable />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="手术日期/时间" prop="operationDateTime" class="grid-item required">
|
||||
<el-date-picker
|
||||
v-model="formData.operationDateTime"
|
||||
type="datetime"
|
||||
placeholder="选择手术日期时间"
|
||||
value-format="YYYY-MM-DD HH:mm"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 手术团队信息 -->
|
||||
<section class="doc-section">
|
||||
<h2 class="section-title">二、手术团队信息</h2>
|
||||
<div class="adaptive-grid">
|
||||
<el-form-item label="手术者" prop="surgeon" class="grid-item required">
|
||||
<el-input v-model="formData.surgeon" placeholder="主刀医师姓名" clearable />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="第一助手" prop="firstAssistant" class="grid-item required">
|
||||
<el-input v-model="formData.firstAssistant" placeholder="第一助手姓名" clearable />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="第二助手" prop="secondAssistant" class="grid-item">
|
||||
<el-input v-model="formData.secondAssistant" placeholder="第二助手姓名" clearable />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="麻醉医师" prop="anesthesiologist" class="grid-item required">
|
||||
<el-input v-model="formData.anesthesiologist" placeholder="麻醉医师姓名" clearable />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="巡回护士" prop="circulatingNurse" class="grid-item required">
|
||||
<el-input v-model="formData.circulatingNurse" placeholder="巡回护士姓名" clearable />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="器械护士" prop="scrubNurse" class="grid-item required">
|
||||
<el-input v-model="formData.scrubNurse" placeholder="器械护士姓名" clearable />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 手术详情 -->
|
||||
<section class="doc-section">
|
||||
<h2 class="section-title">三、手术详情</h2>
|
||||
|
||||
<el-form-item label="手术名称" prop="operationName" class="full-width-item required">
|
||||
<el-input
|
||||
v-model="formData.operationName"
|
||||
placeholder="规范手术名称（如：腹腔镜下胆囊切除术）"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="手术方式" prop="operationMethod" class="full-width-item required">
|
||||
<el-select v-model="formData.operationMethod" placeholder="选择手术方式">
|
||||
<el-option label="开放手术" value="开放手术" />
|
||||
<el-option label="微创手术" value="微创手术" />
|
||||
<el-option label="介入手术" value="介入手术" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="手术入路" prop="surgicalApproach" class="full-width-item required">
|
||||
<el-input
|
||||
v-model="formData.surgicalApproach"
|
||||
placeholder="如：右上腹经腹直肌切口"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
label="术中发现"
|
||||
prop="intraoperativeFindings"
|
||||
class="full-width-item required"
|
||||
>
|
||||
<el-input
|
||||
v-model="formData.intraoperativeFindings"
|
||||
type="textarea"
|
||||
placeholder="详细描述术中所见器官、病变情况"
|
||||
autosize
|
||||
maxlength="1000"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="手术过程" prop="operationProcess" class="full-width-item required">
|
||||
<el-input
|
||||
v-model="formData.operationProcess"
|
||||
type="textarea"
|
||||
placeholder="按操作顺序描述手术步骤（如：游离胆囊三角→结扎胆囊管→切除胆囊...）"
|
||||
autosize
|
||||
maxlength="1500"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
</section>
|
||||
|
||||
<!-- 术后情况 -->
|
||||
<section class="doc-section">
|
||||
<h2 class="section-title">四、术后情况</h2>
|
||||
<div class="adaptive-grid">
|
||||
<el-form-item label="术中出血量" prop="bloodLoss" class="grid-item required">
|
||||
<div class="input-with-unit">
|
||||
<el-input
|
||||
v-model.number="formData.bloodLoss"
|
||||
type="number"
|
||||
placeholder="请输入出血量"
|
||||
/>
|
||||
<span class="unit">ml</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="输血情况" prop="bloodTransfusion" class="grid-item">
|
||||
<el-select v-model="formData.bloodTransfusion" placeholder="是否输血">
|
||||
<el-option label="是" value="是" />
|
||||
<el-option label="否" value="否" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="引流管放置" prop="drainageTube" class="grid-item">
|
||||
<el-input v-model="formData.drainageTube" placeholder="如：腹腔引流管1根" clearable />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="标本处理" prop="specimenDisposal" class="grid-item required">
|
||||
<el-input
|
||||
v-model="formData.specimenDisposal"
|
||||
placeholder="如：胆囊标本送病理检查"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="手术结束时间" prop="operationEndTime" class="grid-item required">
|
||||
<el-date-picker
|
||||
v-model="formData.operationEndTime"
|
||||
type="datetime"
|
||||
placeholder="选择手术结束时间"
|
||||
value-format="YYYY-MM-DD HH:mm"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="患者去向" prop="patientDestination" class="grid-item required">
|
||||
<el-select v-model="formData.patientDestination" placeholder="选择去向">
|
||||
<el-option label="ICU" value="ICU" />
|
||||
<el-option label="普通病房" value="普通病房" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 签署区域 -->
|
||||
<section class="doc-section">
|
||||
<h2 class="section-title">五、签署确认</h2>
|
||||
<div
|
||||
class="adaptive-grid signature-area"
|
||||
style="grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))"
|
||||
>
|
||||
<el-form-item label="手术者签名" prop="surgeonSignature" class="grid-item required">
|
||||
<el-input v-model="formData.surgeonSignature" placeholder="主刀医师签字" clearable />
|
||||
<div class="signature-tip">请手术者亲笔签名</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="记录者签名" prop="recorderSignature" class="grid-item required">
|
||||
<el-input v-model="formData.recorderSignature" placeholder="记录者签字" clearable />
|
||||
<div class="signature-tip">请记录者（如第一助手）签字</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="记录日期" prop="recordDate" class="grid-item required">
|
||||
<el-date-picker
|
||||
v-model="formData.recordDate"
|
||||
type="date"
|
||||
placeholder="选择记录日期"
|
||||
value-format="YYYY-MM-DD"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</section>
|
||||
</el-form>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="btn-group">
|
||||
<el-button type="primary" @click="submit">保存记录</el-button>
|
||||
<el-button type="success" @click="handlePrint">打印记录</el-button>
|
||||
<el-button type="warning" @click="handleReset">重置表单</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<intOperRecordSheet v-if="isShowprintDom" ref="recordPrintRef"></intOperRecordSheet>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {onMounted, reactive, ref} from 'vue';
|
||||
import intOperRecordSheet from '../views/hospitalRecord/components/intOperRecordSheet.vue';
|
||||
import useUserStore from '@/store/modules/user';
|
||||
// 迁移到 hiprint
|
||||
import { previewPrint } from '@/utils/printUtils.js';
|
||||
|
||||
const userStore = useUserStore();
|
||||
const isShowprintDom = ref(false);
|
||||
const recordPrintRef = ref();
|
||||
// 医院名称
|
||||
const hospitalName = userStore.hospitalName;
|
||||
defineOptions({
|
||||
name: 'iInHospitalSurgicalRecord',
|
||||
});
|
||||
// 表单引用
|
||||
const formRef = ref(null);
|
||||
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
// 患者与手术基础信息
|
||||
busNo: '',
|
||||
patientName: '',
|
||||
gender: '',
|
||||
age: '',
|
||||
department: '',
|
||||
bedNo: '',
|
||||
operationDateTime: '', // 手术日期时间
|
||||
|
||||
// 手术团队信息
|
||||
surgeon: '', // 主刀医师
|
||||
firstAssistant: '', // 第一助手
|
||||
secondAssistant: '', // 第二助手
|
||||
anesthesiologist: '', // 麻醉医师
|
||||
circulatingNurse: '', // 巡回护士
|
||||
scrubNurse: '', // 器械护士
|
||||
|
||||
// 手术详情
|
||||
operationName: '', // 规范手术名称
|
||||
operationMethod: '', // 手术方式
|
||||
surgicalApproach: '', // 手术入路
|
||||
intraoperativeFindings: '', // 术中发现
|
||||
operationProcess: '', // 手术过程
|
||||
|
||||
// 术后情况
|
||||
bloodLoss: '', // 术中出血量
|
||||
bloodTransfusion: '', // 输血情况
|
||||
drainageTube: '', // 引流管放置
|
||||
specimenDisposal: '', // 标本处理
|
||||
operationEndTime: '', // 手术结束时间
|
||||
patientDestination: '', // 患者去向
|
||||
|
||||
// 签署信息
|
||||
surgeonSignature: '', // 手术者签名
|
||||
recorderSignature: '', // 记录者签名
|
||||
recordDate: '', // 记录日期
|
||||
});
|
||||
|
||||
// Props与事件
|
||||
const props = defineProps({
|
||||
patientInfo: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const patient = props.patientInfo;
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
busNo: [{ required: true, message: '请填写住院号', trigger: ['blur', 'submit'] }],
|
||||
patientName: [{ required: true, message: '请填写患者姓名', trigger: ['blur', 'submit'] }],
|
||||
gender: [{ required: true, message: '请选择性别', trigger: ['change', 'submit'] }],
|
||||
age: [
|
||||
{ required: true, message: '请填写年龄', trigger: ['blur', 'submit'] },
|
||||
{ type: 'number', min: 0, max: 150, message: '年龄需在0-150之间', trigger: ['blur', 'submit'] },
|
||||
],
|
||||
department: [{ required: true, message: '请填写科室', trigger: ['blur', 'submit'] }],
|
||||
bedNo: [{ required: true, message: '请填写病房/床号', trigger: ['blur', 'submit'] }],
|
||||
operationDateTime: [
|
||||
{ required: true, message: '请选择手术日期时间', trigger: ['change', 'submit'] },
|
||||
],
|
||||
surgeon: [{ required: true, message: '请填写手术者姓名', trigger: ['blur', 'submit'] }],
|
||||
firstAssistant: [{ required: true, message: '请填写第一助手姓名', trigger: ['blur', 'submit'] }],
|
||||
anesthesiologist: [
|
||||
{ required: true, message: '请填写麻醉医师姓名', trigger: ['blur', 'submit'] },
|
||||
],
|
||||
circulatingNurse: [
|
||||
{ required: true, message: '请填写巡回护士姓名', trigger: ['blur', 'submit'] },
|
||||
],
|
||||
scrubNurse: [{ required: true, message: '请填写器械护士姓名', trigger: ['blur', 'submit'] }],
|
||||
operationName: [{ required: true, message: '请填写手术名称', trigger: ['blur', 'submit'] }],
|
||||
operationMethod: [{ required: true, message: '请选择手术方式', trigger: ['change', 'submit'] }],
|
||||
surgicalApproach: [{ required: true, message: '请填写手术入路', trigger: ['blur', 'submit'] }],
|
||||
intraoperativeFindings: [
|
||||
{ required: true, message: '请描述术中发现', trigger: ['blur', 'submit'] },
|
||||
],
|
||||
operationProcess: [{ required: true, message: '请描述手术过程', trigger: ['blur', 'submit'] }],
|
||||
bloodLoss: [
|
||||
{ required: true, message: '请填写术中出血量', trigger: ['blur', 'submit'] },
|
||||
{ type: 'number', min: 0, message: '出血量不能为负数', trigger: ['blur', 'submit'] },
|
||||
],
|
||||
specimenDisposal: [
|
||||
{ required: true, message: '请填写标本处理方式', trigger: ['blur', 'submit'] },
|
||||
],
|
||||
operationEndTime: [
|
||||
{ required: true, message: '请选择手术结束时间', trigger: ['change', 'submit'] },
|
||||
],
|
||||
patientDestination: [
|
||||
{ required: true, message: '请选择患者去向', trigger: ['change', 'submit'] },
|
||||
],
|
||||
surgeonSignature: [{ required: true, message: '请手术者签名', trigger: ['blur', 'submit'] }],
|
||||
recorderSignature: [{ required: true, message: '请记录者签名', trigger: ['blur', 'submit'] }],
|
||||
recordDate: [{ required: true, message: '请选择记录日期', trigger: ['change', 'submit'] }],
|
||||
});
|
||||
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
// 初始化日期为当前日期时间
|
||||
const today = new Date();
|
||||
formData.operationDateTime = formatDateTime(today);
|
||||
formData.operationEndTime = formatDateTime(today);
|
||||
formData.recordDate = formatDate(today);
|
||||
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 || '';
|
||||
}
|
||||
});
|
||||
|
||||
const emits = defineEmits(['submitOk']);
|
||||
|
||||
// 提交表单
|
||||
const submit = () => {
|
||||
formRef.value.validate((valid) => {
|
||||
if (valid) {
|
||||
ElMessage.success('手术记录保存成功');
|
||||
console.log('手术记录数据:', formData);
|
||||
emits('submitOk', formData);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 表单数据赋值
|
||||
const setFormData = (data) => {
|
||||
if (data) {
|
||||
Object.assign(formData, data);
|
||||
if (!formData.busNo) {
|
||||
formData.busNo = patient?.busNo || '';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 打印功能 - 使用 hiprint
|
||||
const handlePrint = () => {
|
||||
formRef.value.validate((valid) => {
|
||||
if (valid) {
|
||||
const printDom = document.querySelector('.form-container');
|
||||
if (printDom) {
|
||||
previewPrint(printDom);
|
||||
} else {
|
||||
window.print();
|
||||
}
|
||||
} else {
|
||||
ElMessageBox.warning('请先完善表单信息再打印');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 重置表单
|
||||
const handleReset = () => {
|
||||
ElMessageBox.confirm('确定要重置表单吗？所有已填写内容将被清空', '确认重置', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
formRef.value.resetFields();
|
||||
const today = new Date();
|
||||
formData.operationDateTime = formatDateTime(today);
|
||||
formData.operationEndTime = formatDateTime(today);
|
||||
formData.recordDate = formatDate(today);
|
||||
ElMessage.success('表单已重置');
|
||||
});
|
||||
};
|
||||
|
||||
// 日期格式化工具
|
||||
const formatDate = (date) => {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
return `${year}-${month}-${day}`;
|
||||
};
|
||||
|
||||
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({ submit, setFormData, printFun });
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 核心容器：PC端限制合理最大宽度，避免超宽屏内容过散 */
|
||||
.medical-document {
|
||||
max-width: 1440px; /* PC端最优宽度，兼顾大屏和常规屏 */
|
||||
width: 98%; /* 占满父容器98%，保留少量边距 */
|
||||
margin: 20px auto;
|
||||
padding: 30px;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
font-family: 'SimSun', '宋体', serif;
|
||||
box-sizing: border-box; /* 确保内边距不撑大容器 */
|
||||
}
|
||||
|
||||
.doc-header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.doc-title {
|
||||
font-size: 22px;
|
||||
margin: 0 0 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.doc-subtitle {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #333;
|
||||
}
|
||||
|
||||
.doc-content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.doc-section {
|
||||
margin-bottom: 25px;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px dashed #ccc;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
margin: 0 0 15px;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 自适应网格：PC端优先展示多列，优化列宽比例 */
|
||||
.adaptive-grid {
|
||||
display: grid;
|
||||
/* PC端最小列宽220px，保证每列内容不拥挤，自动适配列数 */
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 15px 20px;
|
||||
margin-bottom: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
margin-bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.grid-item .el-form-item__content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.full-width-item {
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.input-with-unit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.unit {
|
||||
white-space: nowrap;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.signature-area {
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
}
|
||||
|
||||
.signature-tip {
|
||||
font-size: 12px;
|
||||
color: #f56c6c;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 15px;
|
||||
margin-top: 30px;
|
||||
padding-top: 20px;
|
||||
border-top: 2px solid #333;
|
||||
}
|
||||
|
||||
.required .el-form-item__label::before {
|
||||
content: '*';
|
||||
color: #ff4d4f;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
/* 仅针对小屏设备做基础适配，优先保证PC端体验 */
|
||||
@media (max-width: 768px) {
|
||||
.medical-document {
|
||||
max-width: 100%;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.adaptive-grid {
|
||||
grid-template-columns: 1fr; /* 移动端强制单列 */
|
||||
}
|
||||
|
||||
.doc-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 超宽屏（≥1920px）优化：适度增大间距，提升视觉体验 */
|
||||
@media (min-width: 1920px) {
|
||||
.medical-document {
|
||||
max-width: 1600px;
|
||||
padding: 40px;
|
||||
}
|
||||
.adaptive-grid {
|
||||
gap: 20px 25px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 打印样式保留 */
|
||||
@media print {
|
||||
.btn-group {
|
||||
display: none;
|
||||
}
|
||||
.medical-document {
|
||||
box-shadow: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.el-input__inner,
|
||||
.el-select__input,
|
||||
.el-textarea__inner {
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
.el-form-item__label {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
572
openhis-ui-vue3/src/template/inHosptialCommunicate.vue
Executable file
572
openhis-ui-vue3/src/template/inHosptialCommunicate.vue
Executable file
@@ -0,0 +1,572 @@
|
||||
<template>
|
||||
<div class="medical-document">
|
||||
<!-- 标题区域 -->
|
||||
<div class="doc-header">
|
||||
<h1 class="doc-title">{{ hospitalName }} 住院患者入院沟通记录单</h1>
|
||||
<div class="doc-subtitle">住院号: {{ formData.hospitalNo || '待填写' }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
label-width="100px"
|
||||
label-align="left"
|
||||
class="doc-content"
|
||||
>
|
||||
<!-- 患者基础信息 -->
|
||||
<section class="doc-section">
|
||||
<h2 class="section-title">一、患者基础信息</h2>
|
||||
<div class="adaptive-grid">
|
||||
<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="gender" class="grid-item required">
|
||||
<el-select v-model="formData.gender" placeholder="请选择性别">
|
||||
<el-option label="男" value="男" />
|
||||
<el-option label="女" value="女" />
|
||||
</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="department" class="grid-item required">
|
||||
<el-input v-model="formData.department" placeholder="如：内科疗区" clearable />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="病房/床号" prop="bedNo" class="grid-item required">
|
||||
<el-input v-model="formData.bedNo" placeholder="如：307-12" clearable />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="入院日期" prop="admissionDate" class="grid-item required">
|
||||
<el-date-picker
|
||||
v-model="formData.admissionDate"
|
||||
type="date"
|
||||
placeholder="选择入院日期"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 医疗团队信息 -->
|
||||
<section class="doc-section">
|
||||
<h2 class="section-title">二、医疗团队信息</h2>
|
||||
<div class="adaptive-grid">
|
||||
<el-form-item label="经治医师" prop="treatingDoctor" class="grid-item required">
|
||||
<el-input v-model="formData.treatingDoctor" placeholder="请输入医师姓名" clearable />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="主治医师" prop="attendingDoctor" class="grid-item required">
|
||||
<el-input v-model="formData.attendingDoctor" placeholder="请输入医师姓名" clearable />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="科主任" prop="departmentHead" class="grid-item required">
|
||||
<el-input v-model="formData.departmentHead" placeholder="请输入主任姓名" clearable />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 病情与诊断 -->
|
||||
<section class="doc-section">
|
||||
<h2 class="section-title">三、病情与诊断</h2>
|
||||
<el-form-item label="病情状况" prop="condition" class="full-width-item required">
|
||||
<el-input
|
||||
v-model="formData.condition"
|
||||
type="textarea"
|
||||
placeholder="详细描述患者病情状况"
|
||||
autosize
|
||||
maxlength="1000"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
<div class="diagnosis-container">
|
||||
<el-form-item label="中医诊断" prop="tcmDiagnosis" class="diagnosis-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="diagnosis-item">
|
||||
<el-input
|
||||
v-model="formData.westernDiagnosis"
|
||||
type="textarea"
|
||||
placeholder="如：1.冠状动脉粥样硬化性心脏病..."
|
||||
autosize
|
||||
maxlength="800"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 治疗与检查计划 -->
|
||||
<section class="doc-section">
|
||||
<h2 class="section-title">四、治疗与检查计划</h2>
|
||||
<el-form-item label="治疗方案" prop="treatmentPlan" class="full-width-item required">
|
||||
<el-input
|
||||
v-model="formData.treatmentPlan"
|
||||
type="textarea"
|
||||
placeholder="详细描述治疗方案"
|
||||
autosize
|
||||
maxlength="1000"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
label="进一步检查项目"
|
||||
prop="examinationItems"
|
||||
class="full-width-item required"
|
||||
>
|
||||
<el-input
|
||||
v-model="formData.examinationItems"
|
||||
type="textarea"
|
||||
placeholder="列出需要进行的检查项目"
|
||||
autosize
|
||||
maxlength="1000"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
</section>
|
||||
|
||||
<!-- 风险告知 -->
|
||||
<section class="doc-section">
|
||||
<h2 class="section-title">五、风险告知</h2>
|
||||
<el-form-item label="告知内容" prop="riskNotification" class="full-width-item required">
|
||||
<el-input
|
||||
v-model="formData.riskNotification"
|
||||
type="textarea"
|
||||
placeholder="告知患者可能存在的风险"
|
||||
autosize
|
||||
maxlength="800"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
</section>
|
||||
|
||||
<!-- 签署区域（优化后：三列自适应+细节样式） -->
|
||||
<section class="doc-section">
|
||||
<h2 class="section-title">六、签署确认</h2>
|
||||
<div
|
||||
class="adaptive-grid signature-area"
|
||||
style="grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))"
|
||||
>
|
||||
<el-form-item label="患者或家属签字" prop="patientSignature" class="grid-item required">
|
||||
<el-input v-model="formData.patientSignature" placeholder="请签字" clearable />
|
||||
<div class="signature-tip">请填写患者或家属签字</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="与患者关系" prop="relationship" class="grid-item">
|
||||
<el-input
|
||||
v-model="formData.relationship"
|
||||
placeholder="如：本人、配偶、子女"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="签字日期" prop="signatureDate" class="grid-item required">
|
||||
<el-date-picker
|
||||
v-model="formData.signatureDate"
|
||||
type="date"
|
||||
placeholder="选择签字日期"
|
||||
value-format="YYYY-MM-DD"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="沟通医师签字" prop="doctorSignature" class="grid-item required">
|
||||
<el-input v-model="formData.doctorSignature" placeholder="请签字" clearable />
|
||||
<div class="signature-tip">请填写沟通医师签字</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="沟通日期" prop="communicationDate" class="grid-item required">
|
||||
<el-date-picker
|
||||
v-model="formData.communicationDate"
|
||||
type="datetime"
|
||||
placeholder="选择沟通日期时间"
|
||||
value-format="YYYY-MM-DD HH:mm"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</section>
|
||||
</el-form>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="btn-group">
|
||||
<el-button type="primary" @click="submit">保存记录</el-button>
|
||||
<el-button type="success" @click="handlePrint">打印记录</el-button>
|
||||
<el-button type="warning" @click="handleReset">重置表单</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {onMounted, reactive, ref} from 'vue';
|
||||
import useUserStore from '@/store/modules/user';
|
||||
// 迁移到 hiprint
|
||||
import { previewPrint } from '@/utils/printUtils.js';
|
||||
|
||||
const userStore = useUserStore();
|
||||
// 医院名称
|
||||
const hospitalName = userStore.hospitalName;
|
||||
defineOptions({
|
||||
name: 'InHospitalCommunicate',
|
||||
});
|
||||
// Props与事件
|
||||
const props = defineProps({
|
||||
patientInfo: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
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 || '';
|
||||
}
|
||||
if (!formData.department) {
|
||||
formData.department = patient?.inHospitalOrgName || '';
|
||||
}
|
||||
if (!formData.bedNo) {
|
||||
formData.bedNo = patient?.houseName + '-' + patient?.bedName;
|
||||
}
|
||||
});
|
||||
const patient = props.patientInfo;
|
||||
console.log('patient1111=======>', JSON.stringify(patient));
|
||||
// 表单引用
|
||||
const formRef = ref(null);
|
||||
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
// 基础信息
|
||||
hospitalNo: '',
|
||||
patientName: '',
|
||||
gender: '',
|
||||
age: '',
|
||||
department: '',
|
||||
bedNo: '',
|
||||
admissionDate: '',
|
||||
// 医疗团队
|
||||
treatingDoctor: '',
|
||||
attendingDoctor: '',
|
||||
departmentHead: '',
|
||||
// 病情诊断
|
||||
condition: '',
|
||||
tcmDiagnosis: '',
|
||||
westernDiagnosis: '',
|
||||
|
||||
// 治疗检查
|
||||
treatmentPlan: '',
|
||||
examinationItems: '',
|
||||
|
||||
// 风险告知
|
||||
riskNotification: '',
|
||||
|
||||
// 签署信息
|
||||
patientSignature: '',
|
||||
relationship: '',
|
||||
signatureDate: '',
|
||||
doctorSignature: '',
|
||||
communicationDate: '',
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
hospitalNo: [{ required: true, message: '请填写住院号', trigger: ['blur', 'submit'] }],
|
||||
patientName: [{ required: true, message: '请填写患者姓名', trigger: ['blur', 'submit'] }],
|
||||
gender: [{ required: true, message: '请选择性别', trigger: ['change', 'submit'] }],
|
||||
age: [
|
||||
{ required: true, message: '请填写年龄', trigger: ['blur', 'submit'] },
|
||||
{ type: 'number', min: 0, max: 150, message: '年龄需在0-150之间', trigger: ['blur', 'submit'] },
|
||||
],
|
||||
department: [{ required: true, message: '请填写科室/病区', trigger: ['blur', 'submit'] }],
|
||||
bedNo: [{ required: true, message: '请填写病房/床号', trigger: ['blur', 'submit'] }],
|
||||
admissionDate: [{ required: true, message: '请选择入院日期', trigger: ['change', 'submit'] }],
|
||||
treatingDoctor: [{ required: true, message: '请填写经治医师', trigger: ['blur', 'submit'] }],
|
||||
attendingDoctor: [{ required: true, message: '请填写主治医师', trigger: ['blur', 'submit'] }],
|
||||
departmentHead: [{ required: true, message: '请填写科主任', trigger: ['blur', 'submit'] }],
|
||||
condition: [{ required: true, message: '请描述病情状况', trigger: ['blur', 'submit'] }],
|
||||
treatmentPlan: [{ required: true, message: '请填写治疗方案', trigger: ['blur', 'submit'] }],
|
||||
examinationItems: [{ required: true, message: '请填写检查项目', trigger: ['blur', 'submit'] }],
|
||||
riskNotification: [
|
||||
{ required: true, message: '请填写风险告知内容', trigger: ['blur', 'submit'] },
|
||||
],
|
||||
patientSignature: [
|
||||
{ required: true, message: '请填写患者或家属签字', trigger: ['blur', 'submit'] },
|
||||
],
|
||||
signatureDate: [{ required: true, message: '请选择签字日期', trigger: ['change', 'submit'] }],
|
||||
doctorSignature: [{ required: true, message: '请填写医师签字', trigger: ['blur', 'submit'] }],
|
||||
communicationDate: [{ required: true, message: '请选择沟通日期', trigger: ['change', 'submit'] }],
|
||||
});
|
||||
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
// 初始化日期为当前日期
|
||||
const today = new Date();
|
||||
formData.admissionDate = formatDate(today);
|
||||
formData.signatureDate = formatDate(today);
|
||||
formData.communicationDate = formatDateTime(today);
|
||||
});
|
||||
|
||||
const emits = defineEmits(['submitOk']);
|
||||
|
||||
// 提交表单
|
||||
const submit = () => {
|
||||
formRef.value.validate((valid) => {
|
||||
if (valid) {
|
||||
ElMessage.success('记录保存成功');
|
||||
console.log('表单数据:', formData);
|
||||
emits('submitOk', formData);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 表单数据赋值
|
||||
const setFormData = (data) => {
|
||||
if (data) {
|
||||
Object.assign(formData, data);
|
||||
}
|
||||
};
|
||||
|
||||
// 打印功能 - 使用 hiprint
|
||||
const handlePrint = () => {
|
||||
formRef.value.validate((valid) => {
|
||||
if (valid) {
|
||||
const printDom = document.querySelector('.form-container');
|
||||
if (printDom) {
|
||||
previewPrint(printDom);
|
||||
} else {
|
||||
window.print();
|
||||
}
|
||||
} else {
|
||||
ElMessageBox.warning('请先完善表单信息再打印');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 重置表单
|
||||
const handleReset = () => {
|
||||
ElMessageBox.confirm('确定要重置表单吗？所有已填写内容将被清空', '确认重置', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
formRef.value.resetFields();
|
||||
const today = new Date();
|
||||
formData.admissionDate = formatDate(today);
|
||||
formData.signatureDate = formatDate(today);
|
||||
formData.communicationDate = formatDateTime(today);
|
||||
ElMessage.success('表单已重置');
|
||||
});
|
||||
};
|
||||
|
||||
// 日期格式化工具
|
||||
const formatDate = (date) => {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
return `${year}-${month}-${day}`;
|
||||
};
|
||||
|
||||
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}`;
|
||||
};
|
||||
|
||||
defineExpose({ submit, setFormData });
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.medical-document {
|
||||
max-width: 1200px;
|
||||
margin: 20px auto;
|
||||
padding: 30px;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
font-family: 'SimSun', '宋体', serif;
|
||||
}
|
||||
|
||||
/* 标题样式 */
|
||||
.doc-header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.doc-title {
|
||||
font-size: 22px;
|
||||
margin: 0 0 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.doc-subtitle {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #333;
|
||||
}
|
||||
|
||||
/* 内容区域 */
|
||||
.doc-content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.doc-section {
|
||||
margin-bottom: 25px;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px dashed #ccc;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
margin: 0 0 15px;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 自适应网格布局 */
|
||||
.adaptive-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 15px 20px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
margin-bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.grid-item .el-form-item__content {
|
||||
flex: 1;
|
||||
min-width: 0; /* 确保输入框可收缩适配列宽 */
|
||||
}
|
||||
|
||||
/* 全宽项目 */
|
||||
.full-width-item {
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* 诊断区域布局 */
|
||||
.diagnosis-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.diagnosis-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* 带单位输入框 */
|
||||
.input-with-unit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.unit {
|
||||
white-space: nowrap;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 签名区域优化 */
|
||||
.signature-area {
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
}
|
||||
|
||||
.signature-tip {
|
||||
font-size: 12px;
|
||||
color: #f56c6c;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* 按钮组 */
|
||||
.btn-group {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 15px;
|
||||
margin-top: 30px;
|
||||
padding-top: 20px;
|
||||
border-top: 2px solid #333;
|
||||
}
|
||||
|
||||
/* 必填项样式 */
|
||||
.required .el-form-item__label::before {
|
||||
content: '*';
|
||||
color: #ff4d4f;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 768px) {
|
||||
.medical-document {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.diagnosis-container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.adaptive-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.doc-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 打印样式优化 */
|
||||
@media print {
|
||||
.btn-group {
|
||||
display: none;
|
||||
}
|
||||
.medical-document {
|
||||
box-shadow: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.el-input__inner,
|
||||
.el-select__input,
|
||||
.el-textarea__inner {
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
.el-form-item__label {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
42
openhis-ui-vue3/src/template/index.js
Executable file
42
openhis-ui-vue3/src/template/index.js
Executable file
@@ -0,0 +1,42 @@
|
||||
/**
|
||||
* 模板组件注册模块
|
||||
* 动态引入 template 目录下的所有 .vue 文件，并将它们注册为全局组件
|
||||
*/
|
||||
|
||||
// 动态引入 template 目录下的所有 .vue 文件（包括中文命名的文件）
|
||||
// 使用 { eager: true } 表示立即加载所有匹配的文件
|
||||
const templates = import.meta.glob('./*.vue', { eager: true });
|
||||
|
||||
// 存储所有加载的组件
|
||||
const components = [];
|
||||
|
||||
// 遍历所有引入的文件
|
||||
for (const path in templates) {
|
||||
try {
|
||||
// 获取组件的默认导出
|
||||
const component = templates[path].default;
|
||||
|
||||
// 检查组件是否有 name 属性，如果没有则跳过
|
||||
if (component && component.name) {
|
||||
components.push(component);
|
||||
} else {
|
||||
console.warn(`组件 ${path} 缺少 name 属性，将不会被注册`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`加载组件 ${path} 时出错：`, error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 注册所有组件到 Vue 应用实例
|
||||
* @param {Object} app - Vue 应用实例
|
||||
*/
|
||||
const registerComponents = (app) => {
|
||||
components.forEach((component) => {
|
||||
// 使用组件的 name 属性作为组件名称进行注册
|
||||
app.component(component.name, component);
|
||||
});
|
||||
};
|
||||
|
||||
// 导出组件数组和注册函数
|
||||
export { components, registerComponents };
|
||||
393
openhis-ui-vue3/src/template/nursingRecordSheet.vue
Executable file
393
openhis-ui-vue3/src/template/nursingRecordSheet.vue
Executable file
@@ -0,0 +1,393 @@
|
||||
<!--
|
||||
* @Author: sjjh
|
||||
* @Date: 2025-10-08 23:33:29
|
||||
* @Description: 护理记录单
|
||||
-->
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h2 class="title">{{ userStore.hospitalName }}</h2>
|
||||
<h3 class="subtitle">患者护理记录单</h3>
|
||||
</div>
|
||||
|
||||
<el-form :model="state.formData" label-position="top" class="nursing-form">
|
||||
<!-- 患者基本信息 -->
|
||||
<div class="patient-info">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="2">
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="state.formData.name" placeholder="请输入姓名"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<el-form-item label="年龄">
|
||||
<el-input v-model="state.formData.age" placeholder="请输入年龄"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item label="性别">
|
||||
<el-select v-model="state.formData.gender" placeholder="请选择性别">
|
||||
<el-option label="男" value="male"></el-option>
|
||||
<el-option label="女" value="female"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item label="病区">
|
||||
<el-input v-model="state.formData.ward" placeholder="请输入病区"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item label="床号">
|
||||
<el-input v-model="state.formData.bedNumber" placeholder="请输入床号"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item label="住院号">
|
||||
<el-input
|
||||
v-model="state.formData.hospitalNumber"
|
||||
placeholder="请输入住院号"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item label="入院诊断">
|
||||
<el-input v-model="state.formData.diagnosis" placeholder="请输入入院诊断"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<!-- 基本信息记录表格 -->
|
||||
<div class="vital-signs-table">
|
||||
<el-table :data="state.formData.vitalSigns" border style="width: 100%">
|
||||
<el-table-column label="日期" width="100">
|
||||
<template #default="scope">
|
||||
<el-date-picker
|
||||
v-model="scope.row.date"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
style="width: 100%"
|
||||
></el-date-picker>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="时间" width="100">
|
||||
<template #default="scope">
|
||||
<el-time-picker
|
||||
v-model="scope.row.time"
|
||||
placeholder="选择时间"
|
||||
format="HH:mm"
|
||||
value-format="HH:mm"
|
||||
style="width: 100%"
|
||||
></el-time-picker>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="基本信息">
|
||||
<el-table-column label="意识" width="80">
|
||||
<template #default="scope">
|
||||
<el-select v-model="scope.row.consciousness" placeholder="选择">
|
||||
<el-option label="清醒" value="清醒"></el-option>
|
||||
<el-option label="嗜睡" value="嗜睡"></el-option>
|
||||
<el-option label="昏迷" value="昏迷"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="体温℃" width="80">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.temperature" placeholder="体温"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="心率次/分" width="100">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.heartRate" placeholder="心率"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="脉搏次/分" width="100">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.heartRate" placeholder="心率"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="呼吸次/分" width="100">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.respiratoryRate" placeholder="呼吸"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="血压mmHg" width="120">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.bloodPressure" placeholder="血压"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="血氧饱和度" width="120">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.bloodPressure" placeholder="血压"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="氧疗L/min" width="200">
|
||||
<el-table-column label="方式" >
|
||||
<template #default="scope">
|
||||
<el-select v-model="scope.row.intake" placeholder="选择">
|
||||
<el-option label="鼻导管" value="鼻导管"></el-option>
|
||||
<el-option label="面罩" value="面罩"></el-option>
|
||||
<el-option label="无" value="无"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="流量" width="80">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.flowRate" placeholder="流量"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="入量" width="200">
|
||||
<el-table-column label="名称" >
|
||||
<template #default="scope">
|
||||
<el-select v-model="scope.row.intake" placeholder="选择">
|
||||
<el-option label="鼻导管" value="鼻导管"></el-option>
|
||||
<el-option label="面罩" value="面罩"></el-option>
|
||||
<el-option label="无" value="无"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="ml" width="80">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.flowRate" placeholder="流量"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="途径" width="80">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.flowRate" placeholder="流量"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="出量" width="200">
|
||||
<el-table-column label="名称" >
|
||||
<template #default="scope">
|
||||
<el-select v-model="scope.row.intake" placeholder="选择">
|
||||
<el-option label="鼻导管" value="鼻导管"></el-option>
|
||||
<el-option label="面罩" value="面罩"></el-option>
|
||||
<el-option label="无" value="无"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="ml" width="80">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.flowRate" placeholder="流量"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="皮肤情况" width="80">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.flowRate" placeholder="流量"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="管路护理" width="80">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.flowRate" placeholder="流量"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="病情与措施" width="80">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.flowRate" placeholder="流量"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="护士签名" width="100">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.nurseSignature" placeholder="签名"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="120" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button type="danger" size="small" @click="removeVitalSign(scope.$index)"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="add-row">
|
||||
<el-button type="primary" @click="addVitalSign">添加记录</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表单底部按钮 -->
|
||||
<div class="form-actions">
|
||||
<div>
|
||||
一、意识:①清醒；②嗜睡；③意识模糊；④昏睡；⑤谗妄；⑥浅昏迷；⑦中度昏迷；⑧深昏迷；⑨全麻未醒；⑩镇静。
|
||||
</div>
|
||||
<div>
|
||||
二、氧疗方式:①鼻导管；②面罩；③HFNC；④HIPPV；⑤IMV。
|
||||
</div>
|
||||
<div>
|
||||
三、皮肤情况:①完好；②压疮；③出血点；④破损；⑤水肿；⑥瘀斑；⑦过敏；⑧其他。
|
||||
</div>
|
||||
<div>
|
||||
四、管路护理:①胃管；②尿导管；③静脉置管；④吸氧管；⑤“T”管；⑥胸腔引流管；⑦腹腔引流管；⑧伤口引流管；⑨脑室引流管；⑩其他。
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineOptions({
|
||||
name: 'NursingRecordSheet',
|
||||
});
|
||||
import {getCurrentInstance, onBeforeMount, onMounted, ref} from 'vue';
|
||||
import useUserStore from '@/store/modules/user';
|
||||
|
||||
const userStore = useUserStore();
|
||||
const { proxy } = getCurrentInstance();
|
||||
const emits = defineEmits([]);
|
||||
const props = defineProps({
|
||||
patientId: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
|
||||
// 表单数据
|
||||
const state = ref({
|
||||
formData: {
|
||||
name: '',
|
||||
age: '',
|
||||
gender: '',
|
||||
ward: '',
|
||||
bedNumber: '',
|
||||
hospitalNumber: '',
|
||||
diagnosis: '',
|
||||
vitalSigns: [
|
||||
{
|
||||
date: new Date().toISOString().split('T')[0],
|
||||
time: new Date().toTimeString().slice(0, 5),
|
||||
consciousness: '清醒',
|
||||
temperature: '',
|
||||
heartRate: '',
|
||||
respiratoryRate: '',
|
||||
bloodPressure: '',
|
||||
intake: '',
|
||||
flowRate: '',
|
||||
nurseSignature: '',
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
|
||||
});
|
||||
|
||||
// 添加生命体征记录
|
||||
const addVitalSign = () => {
|
||||
state.value.formData.vitalSigns.push({
|
||||
date: new Date().toISOString().split('T')[0],
|
||||
time: new Date().toTimeString().slice(0, 5),
|
||||
consciousness: '清醒',
|
||||
temperature: '',
|
||||
heartRate: '',
|
||||
respiratoryRate: '',
|
||||
bloodPressure: '',
|
||||
intake: '',
|
||||
flowRate: '',
|
||||
nurseSignature: '',
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
// 删除生命体征记录
|
||||
const removeVitalSign = (index) => {
|
||||
state.value.formData.vitalSigns.splice(index, 1);
|
||||
if (state.value.formData.vitalSigns.length === 0) {
|
||||
addVitalSign();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
// 重置表单
|
||||
const resetForm = () => {
|
||||
state.value.formData = {
|
||||
name: '',
|
||||
age: '',
|
||||
gender: '',
|
||||
ward: '',
|
||||
bedNumber: '',
|
||||
hospitalNumber: '',
|
||||
diagnosis: '',
|
||||
vitalSigns:[]
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
onBeforeMount(() => {
|
||||
// 如果有patientId，可以在这里加载患者数据
|
||||
if (props.patientId) {
|
||||
// 加载患者数据的逻辑
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
// 组件挂载后的逻辑
|
||||
});
|
||||
const submit = () => {
|
||||
// ElMessage.success('提交成功');
|
||||
emits('submitOk', state.formData);
|
||||
};
|
||||
const setFormData = (data) => {
|
||||
if (data) {
|
||||
state.value.formData = data;
|
||||
}
|
||||
};
|
||||
defineExpose({ state, submit, setFormData });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.title {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.nursing-form {
|
||||
.patient-info {
|
||||
padding: 15px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.vital-signs-table
|
||||
{
|
||||
margin-bottom: 20px;
|
||||
|
||||
h4 {
|
||||
margin-bottom: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.add-row {
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
margin-top: 30px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
419
openhis-ui-vue3/src/template/outpatientMedicalRecord.vue
Executable file
419
openhis-ui-vue3/src/template/outpatientMedicalRecord.vue
Executable file
@@ -0,0 +1,419 @@
|
||||
<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 {onBeforeMount, onMounted, reactive, ref, watch} from 'vue';
|
||||
import useUserStore from '../store/modules/user';
|
||||
import {ElForm, ElFormItem, ElInput, ElMessage} from 'element-plus';
|
||||
import {patientInfo} from '../views/doctorstation/components/store/patient';
|
||||
|
||||
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>
|
||||
454
openhis-ui-vue3/src/template/outpatientMedicalRecord1.1.vue
Executable file
454
openhis-ui-vue3/src/template/outpatientMedicalRecord1.1.vue
Executable file
@@ -0,0 +1,454 @@
|
||||
<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 {onBeforeMount, onMounted, reactive, ref, watch} from 'vue';
|
||||
import useUserStore from '../store/modules/user';
|
||||
import {ElForm, ElFormItem, ElInput, ElMessage} from 'element-plus';
|
||||
import {patientInfo} from '../views/doctorstation/components/store/patient';
|
||||
|
||||
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>
|
||||
739
openhis-ui-vue3/src/template/surgicalPatientHandover.vue
Executable file
739
openhis-ui-vue3/src/template/surgicalPatientHandover.vue
Executable file
@@ -0,0 +1,739 @@
|
||||
<!--
|
||||
* @Author: sjjh
|
||||
* @Date: 2025-09-19 13:04:49
|
||||
* @Description: 手术患者移交
|
||||
-->
|
||||
<template>
|
||||
<div class="surgicalPatientHandover-container">
|
||||
<div class="handover-form">
|
||||
<div class="form-header">
|
||||
<h1 class="hospital-name">{{ userStore.hospitalName }}</h1>
|
||||
<h2 class="form-title">手术患者交接单</h2>
|
||||
</div>
|
||||
|
||||
<div class="patient-info">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<div class="info-item">日期：{{ state.formData.date }}</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="info-item">姓名：{{ state.formData.patientName }}</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="info-item">性别：{{ state.formData.sex }}</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="info-item">年龄：{{ state.formData.age }}岁</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<div class="info-item">科室：{{ state.formData.department }}</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="info-item">床号：{{ state.formData.bedNumber }}</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="info-item">住院号：{{ state.formData.hospitalNumber }}</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="info-item">术前诊断：{{ state.formData.preDiagnosis }}</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<div class="info-item">拟行手术方式：{{ state.formData.surgeryMethod }}</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<el-form :model="state.formData" label-width="0" class="handover-form-content">
|
||||
<!-- 一、病房护士与手术室护士交接记录 -->
|
||||
<div class="form-section">
|
||||
<div class="section-title">一、病房护士与手术室护士交接记录</div>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<div class="form-item">
|
||||
<span class="item-label">药物过敏史</span>
|
||||
<el-radio-group v-model="state.formData.drugAllergy">
|
||||
<el-radio :label="1">无</el-radio>
|
||||
<el-radio :label="2">有</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="form-item">
|
||||
<span v-if="state.formData.drugAllergy === 2"
|
||||
>药物名称：
|
||||
<el-input v-model="state.formData.allergyDrugName" class="inline-input"
|
||||
/></span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<div class="form-item">
|
||||
<span class="item-label">身份确认</span>
|
||||
<el-checkbox-group v-model="state.formData.identityConfirm">
|
||||
<el-checkbox :label="1">患者姓名核实</el-checkbox>
|
||||
<el-checkbox :label="2">病例核实</el-checkbox>
|
||||
<el-checkbox :label="3">腕带核</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<div class="form-item">
|
||||
<span class="item-label">手术标识</span>
|
||||
<el-radio-group v-model="state.formData.surgeryMark">
|
||||
<el-radio
|
||||
v-for="item in getStatisticsOptionList('surgeryMark')"
|
||||
:key="item.dictValue"
|
||||
:label="item.dictValue"
|
||||
>{{ item.dictLabel }}</el-radio
|
||||
>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<div class="form-item">
|
||||
<span class="item-label">药物使用方法</span>
|
||||
<el-select
|
||||
v-model="state.formData.drugMethod"
|
||||
placeholder="Select"
|
||||
style="width: 240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in getStatisticsOptionList('drugMethod')"
|
||||
:key="item.dictValue"
|
||||
:label="item.dictLabel"
|
||||
:value="item.dictValue"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<div class="form-item">
|
||||
<span class="item-label">生命体征</span>
|
||||
<span>
|
||||
<el-input v-model="state.formData.temperature" class="inline-input">
|
||||
<template #prepend>T</template>
|
||||
<template #append>℃</template>
|
||||
</el-input>
|
||||
</span>
|
||||
<span class="ml-20"
|
||||
><el-input v-model="state.formData.pulse" class="inline-input">
|
||||
<template #prepend>P</template>
|
||||
<template #append>次/分</template>
|
||||
</el-input></span
|
||||
>
|
||||
<span class="ml-20"
|
||||
><el-input v-model="state.formData.respiration" class="inline-input">
|
||||
<template #prepend>R</template>
|
||||
<template #append>次/分</template>
|
||||
</el-input></span
|
||||
>
|
||||
<span class="ml-20"
|
||||
><el-input v-model="state.formData.respiration" class="inline-input">
|
||||
<template #prepend>BP</template>
|
||||
<template #append>mmHg</template>
|
||||
</el-input></span
|
||||
>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<div class="form-item">
|
||||
<span class="item-label">意识状态</span>
|
||||
<el-checkbox-group v-model="state.formData.consciousness">
|
||||
<el-checkbox :label="1">清醒</el-checkbox>
|
||||
<el-checkbox :label="2">嗜睡</el-checkbox>
|
||||
<el-checkbox :label="3">意识模糊</el-checkbox>
|
||||
<el-checkbox :label="4">躁动</el-checkbox>
|
||||
<el-checkbox :label="5">偏瘫</el-checkbox>
|
||||
<el-checkbox :label="6">昏迷</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<div class="form-item">
|
||||
<span class="item-label">皮肤情况</span>
|
||||
<el-checkbox-group v-model="state.formData.skinCondition">
|
||||
<el-checkbox :label="1">正常</el-checkbox>
|
||||
<el-checkbox :label="2">破损</el-checkbox>
|
||||
<el-checkbox :label="3">压力性损伤</el-checkbox>
|
||||
<el-checkbox :label="4">其他</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
<span v-if="state.formData.skinCondition.includes(4)"
|
||||
>其他： <el-input v-model="state.formData.skinOther" class="inline-input"
|
||||
/></span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<div class="form-item">
|
||||
<span class="item-label">皮肤情况</span>
|
||||
<span>部位</span>
|
||||
<el-input
|
||||
v-model="state.formData.skinPosition1"
|
||||
class="inline-input"
|
||||
style="width: 50px"
|
||||
/>
|
||||
<span>面积</span>
|
||||
<el-input
|
||||
v-model="state.formData.skinArea1"
|
||||
class="inline-input"
|
||||
style="width: 50px"
|
||||
/>
|
||||
<span>×</span>
|
||||
<el-input
|
||||
v-model="state.formData.skinArea2"
|
||||
class="inline-input"
|
||||
style="width: 50px"
|
||||
/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="form-item">
|
||||
<span>部位</span>
|
||||
<el-input
|
||||
v-model="state.formData.skinPosition2"
|
||||
class="inline-input"
|
||||
style="width: 50px"
|
||||
/>
|
||||
<span>面积</span>
|
||||
<el-input
|
||||
v-model="state.formData.skinArea3"
|
||||
class="inline-input"
|
||||
style="width: 50px"
|
||||
/>
|
||||
<span>×</span>
|
||||
<el-input
|
||||
v-model="state.formData.skinArea4"
|
||||
class="inline-input"
|
||||
style="width: 50px"
|
||||
/>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<div class="form-item">
|
||||
<span class="item-label">留置管路</span>
|
||||
<el-checkbox-group v-model="state.formData.preOperativePipeline">
|
||||
<el-checkbox :label="1">无</el-checkbox>
|
||||
<el-checkbox :label="2">中心静脉置管</el-checkbox>
|
||||
<el-checkbox :label="3">动脉置管</el-checkbox>
|
||||
<el-checkbox :label="4">气管插管</el-checkbox>
|
||||
<el-checkbox :label="5">胃管</el-checkbox>
|
||||
<el-checkbox :label="6">尿管</el-checkbox>
|
||||
<el-checkbox :label="7">引流管</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<div class="form-item">
|
||||
<span class="item-label">外周静脉通路</span>
|
||||
<el-input
|
||||
v-model="state.formData.peripheralVein"
|
||||
class="inline-input"
|
||||
style="width: 50px"
|
||||
/>
|
||||
<span>条</span>
|
||||
<el-checkbox-group v-model="state.formData.veinPosition" class="ml-20">
|
||||
<el-checkbox :label="1">右上肢</el-checkbox>
|
||||
<el-checkbox :label="2">右下肢</el-checkbox>
|
||||
<el-checkbox :label="3">左上肢</el-checkbox>
|
||||
<el-checkbox :label="4">左下肢</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<div class="form-item">
|
||||
<span class="item-label">确认事项</span>
|
||||
<el-checkbox-group v-model="state.formData.confirmItems">
|
||||
<el-checkbox :label="1">禁食水</el-checkbox>
|
||||
<el-checkbox :label="2">备皮</el-checkbox>
|
||||
<el-checkbox :label="3">无活动义齿</el-checkbox>
|
||||
<el-checkbox :label="4">无随形眼镜</el-checkbox>
|
||||
<el-checkbox :label="5">摘首饰</el-checkbox>
|
||||
<el-checkbox :label="6">非月经期</el-checkbox>
|
||||
<el-checkbox :label="7">病员服</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<div class="form-item">
|
||||
<span class="item-label">携带物品</span>
|
||||
<el-checkbox-group v-model="state.formData.carryItems">
|
||||
<el-checkbox :label="1">病例</el-checkbox>
|
||||
<el-checkbox :label="2">药物</el-checkbox>
|
||||
<el-checkbox :label="3">影像资料</el-checkbox>
|
||||
<el-checkbox :label="4">胸/腹带</el-checkbox>
|
||||
<el-checkbox :label="5">血制品</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<div class="form-item">
|
||||
<span class="item-label">病房护士签名</span>
|
||||
<el-input v-model="state.formData.wardNurseName" class="inline-input" />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="form-item">
|
||||
<span class="item-label">手术护士签名</span>
|
||||
<el-input v-model="state.formData.surgeryNurseName" class="inline-input" />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="form-item">
|
||||
<span class="item-label">交接时间</span>
|
||||
<el-input v-model="state.formData.handoverTime" class="inline-input" />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<!-- 二、手术室护士与麻醉复苏室护士/病房护士交接记录 -->
|
||||
<div class="form-section">
|
||||
<div class="section-title">二、手术室护士与麻醉复苏室护士/病房护士交接记录</div>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<div class="form-item">
|
||||
<span class="item-label">生命体征</span>
|
||||
<span>P</span>
|
||||
<el-input
|
||||
v-model="state.formData.postPulse"
|
||||
class="inline-input"
|
||||
style="width: 50px"
|
||||
/>
|
||||
<span>次/分</span>
|
||||
<span class="ml-20">R</span>
|
||||
<el-input
|
||||
v-model="state.formData.postRespiration"
|
||||
class="inline-input"
|
||||
style="width: 50px"
|
||||
/>
|
||||
<span>次/分</span>
|
||||
<span class="ml-20">BP</span>
|
||||
<el-input v-model="state.formData.postBloodPressure" class="inline-input" />
|
||||
<span>mmHg</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<div class="form-item">
|
||||
<span class="item-label">意识状态</span>
|
||||
<el-checkbox-group v-model="state.formData.postConsciousness">
|
||||
<el-checkbox :label="1">清醒</el-checkbox>
|
||||
<el-checkbox :label="2">未清醒</el-checkbox>
|
||||
<el-checkbox :label="3">其他</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
<span v-if="state.formData.postConsciousness.includes(3)"
|
||||
>其他：
|
||||
<el-input v-model="state.formData.postConsciousnessOther" class="inline-input"
|
||||
/></span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<div class="form-item">
|
||||
<span class="item-label">皮肤情况</span>
|
||||
<el-checkbox-group v-model="state.formData.postSkinCondition">
|
||||
<el-checkbox :label="1">正常</el-checkbox>
|
||||
<el-checkbox :label="2">破损</el-checkbox>
|
||||
<el-checkbox :label="3">压力性损伤</el-checkbox>
|
||||
<el-checkbox :label="4">其他</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
<span v-if="state.formData.postSkinCondition.includes(4)"
|
||||
>其他： <el-input v-model="state.formData.postSkinOther" class="inline-input"
|
||||
/></span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<div class="form-item">
|
||||
<span class="item-label">皮肤情况</span>
|
||||
<span>部位</span>
|
||||
<el-input
|
||||
v-model="state.formData.postSkinPosition1"
|
||||
class="inline-input"
|
||||
style="width: 50px"
|
||||
/>
|
||||
<span>面积</span>
|
||||
<el-input
|
||||
v-model="state.formData.postSkinArea1"
|
||||
class="inline-input"
|
||||
style="width: 50px"
|
||||
/>
|
||||
<span>×</span>
|
||||
<el-input
|
||||
v-model="state.formData.postSkinArea2"
|
||||
class="inline-input"
|
||||
style="width: 50px"
|
||||
/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="form-item">
|
||||
<span>部位</span>
|
||||
<el-input
|
||||
v-model="state.formData.postSkinPosition2"
|
||||
class="inline-input"
|
||||
style="width: 50px"
|
||||
/>
|
||||
<span>面积</span>
|
||||
<el-input
|
||||
v-model="state.formData.postSkinArea3"
|
||||
class="inline-input"
|
||||
style="width: 50px"
|
||||
/>
|
||||
<span>×</span>
|
||||
<el-input
|
||||
v-model="state.formData.postSkinArea4"
|
||||
class="inline-input"
|
||||
style="width: 50px"
|
||||
/>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<div class="form-item">
|
||||
<span class="item-label">术后管路</span>
|
||||
<el-checkbox-group v-model="state.formData.postOperativePipeline">
|
||||
<el-checkbox :label="1">无</el-checkbox>
|
||||
<el-checkbox :label="2">中心静脉置管</el-checkbox>
|
||||
<el-checkbox :label="3">动脉置管</el-checkbox>
|
||||
<el-checkbox :label="4">气管插管</el-checkbox>
|
||||
<el-checkbox :label="5">胃管</el-checkbox>
|
||||
<el-checkbox :label="6">尿管</el-checkbox>
|
||||
<el-checkbox :label="7">引流管</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<div class="form-item">
|
||||
<span class="item-label">外周静脉通路</span>
|
||||
<el-input
|
||||
v-model="state.formData.postPeripheralVein"
|
||||
class="inline-input"
|
||||
style="width: 50px"
|
||||
/>
|
||||
<span>条</span>
|
||||
<el-checkbox-group v-model="state.formData.postVeinPosition" class="ml-20">
|
||||
<el-checkbox :label="1">右上肢</el-checkbox>
|
||||
<el-checkbox :label="2">右下肢</el-checkbox>
|
||||
<el-checkbox :label="3">左上肢</el-checkbox>
|
||||
<el-checkbox :label="4">左下肢</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<div class="form-item">
|
||||
<span class="item-label">携带物品</span>
|
||||
<el-checkbox-group v-model="state.formData.postCarryItems">
|
||||
<el-checkbox :label="1">病历</el-checkbox>
|
||||
<el-checkbox :label="2">药物</el-checkbox>
|
||||
<el-checkbox :label="3">影像资料</el-checkbox>
|
||||
<el-checkbox :label="4">胸/腹带</el-checkbox>
|
||||
<el-checkbox :label="5">血制品</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<div class="form-item">
|
||||
<span class="item-label">镇痛泵</span>
|
||||
<el-radio-group v-model="state.formData.painPump">
|
||||
<el-radio :label="1">无</el-radio>
|
||||
<el-radio :label="2">有</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<div class="form-item">
|
||||
<span class="item-label" style="width: 220px">手术室/麻醉复苏室护士签名</span>
|
||||
<el-input v-model="state.formData.surgeryRecoveryNurseName" class="inline-input" />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="form-item">
|
||||
<span class="item-label">病房护士签名</span>
|
||||
<el-input v-model="state.formData.postWardNurseName" class="inline-input" />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="form-item">
|
||||
<span class="item-label">病房护士填写</span>
|
||||
<span>P</span>
|
||||
<el-input
|
||||
v-model="state.formData.wardNursePulse"
|
||||
class="inline-input"
|
||||
style="width: 50px"
|
||||
/>
|
||||
<span>次/分</span>
|
||||
<span class="ml-10">BP</span>
|
||||
<el-input
|
||||
v-model="state.formData.wardNurseBloodPressure"
|
||||
class="inline-input"
|
||||
style="width: 80px"
|
||||
/>
|
||||
<span>mmHg</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="form-item">
|
||||
<span class="item-label">交接时间</span>
|
||||
<el-input v-model="state.formData.postHandoverTime" class="inline-input" />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<!-- 其他 -->
|
||||
<div class="form-section">
|
||||
<div class="section-title">其他</div>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<div class="form-item">
|
||||
<el-checkbox-group v-model="state.formData.otherItems">
|
||||
<el-checkbox :label="1">离院</el-checkbox>
|
||||
<el-checkbox :label="2">死亡</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
defineOptions({
|
||||
name: 'SurgicalPatientHandover',
|
||||
});
|
||||
import {getCurrentInstance, onBeforeMount, onMounted, reactive} from 'vue';
|
||||
import useOptionsList from './useOptionsList';
|
||||
import useUserStore from '@/store/modules/user';
|
||||
|
||||
const userStore = useUserStore();
|
||||
// import { A } from '../../dist/assets/api-DmiMW8YF';
|
||||
const { statisticsOptionList, getStatisticsOptionList } = useOptionsList();
|
||||
const { proxy } = getCurrentInstance();
|
||||
const emits = defineEmits(['submitOk']);
|
||||
const props = defineProps({});
|
||||
const state = reactive({
|
||||
formData: {
|
||||
// 患者基本信息
|
||||
date: '2025/8/13 13:36:41',
|
||||
patientName: '于学斌',
|
||||
sex: '男',
|
||||
age: '46',
|
||||
department: '普外科门诊区',
|
||||
bedNumber: '035',
|
||||
hospitalNumber: '2508000328',
|
||||
preDiagnosis: '胆囊结石',
|
||||
surgeryMethod: '腹腔镜胆囊切除术',
|
||||
// 术前交接记录
|
||||
drugAllergy: 1, // 1-无, 2-有
|
||||
allergyDrugName: '',
|
||||
identityConfirm: [1, 2, 3], // 1-患者姓名核实, 2-病例核实, 3-腕带核
|
||||
surgeryMark: 1, // 1-无, 2-有
|
||||
temperature: '37.5',
|
||||
pulse: '78',
|
||||
respiration: '19',
|
||||
bloodPressure: '124/76',
|
||||
consciousness: [1], // 1-清醒, 2-嗜睡, 3-意识模糊, 4-躁动, 5-偏瘫, 6-昏迷
|
||||
skinCondition: [1], // 1-正常, 2-破损, 3-压力性损伤, 4-其他
|
||||
skinOther: '',
|
||||
skinPosition1: '',
|
||||
skinArea1: '',
|
||||
skinPosition2: '',
|
||||
skinArea2: '',
|
||||
preOperativePipeline: [1], // 1-无, 2-中心静脉置管, 3-动脉置管, 4-气管插管, 5-胃管, 6-尿管, 7-引流管
|
||||
peripheralVein: '1',
|
||||
veinPosition: [1], // 1-右上肢, 2-右下肢, 3-左上肢, 4-左下肢
|
||||
confirmItems: [1, 2], // 1-禁食水, 2-备皮, 3-无活动义齿, 4-无随形眼镜, 5-摘首饰, 6-非月经期, 7-病员服
|
||||
carryItems: [1, 2], // 1-病例, 2-药物, 3-影像资料, 4-胸/腹带, 5-血制品
|
||||
wardNurseName: '周春贺',
|
||||
surgeryNurseName: '',
|
||||
handoverTime: '2025/8/13 13:40:37',
|
||||
// 术后交接记录
|
||||
postPulse: '',
|
||||
postRespiration: '',
|
||||
postBloodPressure: '',
|
||||
postConsciousness: [], // 1-清醒, 2-未清醒, 3-其他
|
||||
postConsciousnessOther: '',
|
||||
postSkinCondition: [], // 1-正常, 2-破损, 3-压力性损伤, 4-其他
|
||||
postSkinOther: '',
|
||||
postSkinPosition1: '',
|
||||
postSkinArea1: '',
|
||||
postSkinPosition2: '',
|
||||
postSkinArea2: '',
|
||||
postOperativePipeline: [], // 1-无, 2-中心静脉置管, 3-动脉置管, 4-气管插管, 5-胃管, 6-尿管, 7-引流管
|
||||
postPeripheralVein: '',
|
||||
postVeinPosition: [], // 1-右上肢, 2-右下肢, 3-左上肢, 4-左下肢
|
||||
postCarryItems: [], // 1-病历, 2-药物, 3-影像资料, 4-胸/腹带, 5-血制品
|
||||
painPump: 1, // 1-无, 2-有
|
||||
surgeryRecoveryNurseName: '',
|
||||
postWardNurseName: '',
|
||||
wardNursePulse: '',
|
||||
wardNurseBloodPressure: '',
|
||||
postHandoverTime: '',
|
||||
// 其他
|
||||
otherItems: [], // 1-离院, 2-死亡
|
||||
},
|
||||
});
|
||||
|
||||
const submit = () => {
|
||||
// ElMessage.success('提交成功');
|
||||
emits('submitOk', state.formData);
|
||||
};
|
||||
const setFormData = (data) => {
|
||||
if (data) {
|
||||
state.formData = data;
|
||||
}
|
||||
};
|
||||
|
||||
onBeforeMount(() => {});
|
||||
onMounted(() => {
|
||||
// { statisticsOptionList,getStatisticsOptionList } =await useOptionsList();
|
||||
});
|
||||
|
||||
defineExpose({ state, submit, setFormData });
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.surgicalPatientHandover-container {
|
||||
padding: 20px;
|
||||
|
||||
.handover-form {
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
border: 1px solid #ccc;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
|
||||
.form-header {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.hospital-name {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.form-title {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.patient-info {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.info-item {
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.handover-form-content {
|
||||
.form-section {
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid #ddd;
|
||||
|
||||
.section-title {
|
||||
font-weight: bold;
|
||||
padding: 10px;
|
||||
background-color: #f5f5f5;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.item-label {
|
||||
display: inline-block;
|
||||
width: 120px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.inline-input {
|
||||
width: 150px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.ml-10 {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.ml-20 {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-input-group__prepend) {
|
||||
padding: 0 8px;
|
||||
}
|
||||
:deep(.el-input-group__append) {
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
44
openhis-ui-vue3/src/template/template1.vue
Executable file
44
openhis-ui-vue3/src/template/template1.vue
Executable file
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<div class="template-content">
|
||||
<div class="template-header">
|
||||
<h3>股骨头坏死(模板1)</h3>
|
||||
</div>
|
||||
<div class="template-body">
|
||||
<p>主诉：左侧髋部疼痛X个月，加重1周。</p>
|
||||
<p>现病史：患者X个月前无明显诱因出现左侧髋部疼痛，活动后加重，休息后减轻，未予重视。1周前疼痛加重，行走困难，遂来我院就诊。</p>
|
||||
<p>既往史：否认高血压、糖尿病、冠心病等慢性病史，否认手术、外伤史，否认药物过敏史。</p>
|
||||
<p>体格检查：左侧髋关节压痛(+)，活动受限，左下肢肌力下降。</p>
|
||||
<p>辅助检查：DR示左侧股骨头坏死。</p>
|
||||
<p>诊断：左侧股骨头坏死。</p>
|
||||
<p>治疗方案：1. 避免负重；2. 药物治疗；3. 必要时手术治疗。</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineOptions({
|
||||
name: 'Template1'
|
||||
})
|
||||
// 可以在这里添加组件逻辑
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.template-content {
|
||||
background-color: white;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
padding: 15px;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.template-header {
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.template-body p {
|
||||
margin-bottom: 10px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
44
openhis-ui-vue3/src/template/template2.vue
Executable file
44
openhis-ui-vue3/src/template/template2.vue
Executable file
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<div class="template-content">
|
||||
<div class="template-header">
|
||||
<h3>上呼吸道感染(模板2)</h3>
|
||||
</div>
|
||||
<div class="template-body">
|
||||
<p>主诉：发热、咳嗽2天。</p>
|
||||
<p>现病史：患者2天前因受凉后出现发热，体温最高38.5℃，伴咳嗽、咽痛，无咳痰、胸痛等不适。自服感冒药后症状无明显缓解，遂来我院就诊。</p>
|
||||
<p>既往史：体健，否认慢性病史，否认手术、外伤史，否认药物过敏史。</p>
|
||||
<p>体格检查：体温38.2℃，咽部充血，双侧扁桃体Ⅰ度肿大，双肺呼吸音清，未闻及干湿啰音。</p>
|
||||
<p>辅助检查：血常规示白细胞计数正常，淋巴细胞比例升高。</p>
|
||||
<p>诊断：急性上呼吸道感染。</p>
|
||||
<p>治疗方案：1. 注意休息，多饮水；2. 对症治疗；3. 必要时抗病毒治疗。</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineOptions({
|
||||
name: 'Template2'
|
||||
})
|
||||
// 可以在这里添加组件逻辑
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.template-content {
|
||||
background-color: white;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
padding: 15px;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.template-header {
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.template-body p {
|
||||
margin-bottom: 10px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
210
openhis-ui-vue3/src/template/template3.vue
Executable file
210
openhis-ui-vue3/src/template/template3.vue
Executable file
@@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
style="max-width: 600px"
|
||||
:model="ruleForm"
|
||||
:rules="rules"
|
||||
label-width="auto"
|
||||
>
|
||||
<el-form-item label="Activity name" prop="name">
|
||||
<el-input v-model="ruleForm.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity zone" prop="region">
|
||||
<el-select v-model="ruleForm.region" placeholder="Activity zone">
|
||||
<el-option label="Zone one" value="shanghai" />
|
||||
<el-option label="Zone two" value="beijing" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity count" prop="count">
|
||||
<el-select-v2
|
||||
v-model="ruleForm.count"
|
||||
placeholder="Activity count"
|
||||
:options="options"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity time" required>
|
||||
<el-col :span="11">
|
||||
<el-form-item prop="date1">
|
||||
<el-date-picker
|
||||
v-model="ruleForm.date1"
|
||||
type="date"
|
||||
aria-label="Pick a date"
|
||||
placeholder="Pick a date"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col class="text-center" :span="2">
|
||||
<span class="text-gray-500">-</span>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item prop="date2">
|
||||
<el-time-picker
|
||||
v-model="ruleForm.date2"
|
||||
aria-label="Pick a time"
|
||||
placeholder="Pick a time"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="Instant delivery" prop="delivery">
|
||||
<el-switch v-model="ruleForm.delivery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity location" prop="location">
|
||||
<el-segmented v-model="ruleForm.location" :options="locationOptions" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity type" prop="type">
|
||||
<el-checkbox-group v-model="ruleForm.type">
|
||||
<el-checkbox value="Online activities" name="type">
|
||||
Online activities
|
||||
</el-checkbox>
|
||||
<el-checkbox value="Promotion activities" name="type">
|
||||
Promotion activities
|
||||
</el-checkbox>
|
||||
<el-checkbox value="Offline activities" name="type">
|
||||
Offline activities
|
||||
</el-checkbox>
|
||||
<el-checkbox value="Simple brand exposure" name="type">
|
||||
Simple brand exposure
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="Resources" prop="resource">
|
||||
<el-radio-group v-model="ruleForm.resource">
|
||||
<el-radio value="Sponsorship">Sponsorship</el-radio>
|
||||
<el-radio value="Venue">Venue</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity form" prop="desc">
|
||||
<el-input v-model="ruleForm.desc" type="textarea" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm(ruleFormRef)">
|
||||
Create
|
||||
</el-button>
|
||||
<el-button @click="resetForm(ruleFormRef)">Reset</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
defineOptions({
|
||||
name: 'Template3'
|
||||
})
|
||||
import {reactive, ref} from 'vue'
|
||||
|
||||
import type {FormInstance, FormRules} from 'element-plus'
|
||||
|
||||
interface RuleForm {
|
||||
name: string
|
||||
region: string
|
||||
count: string
|
||||
date1: string
|
||||
date2: string
|
||||
delivery: boolean
|
||||
location: string
|
||||
type: string[]
|
||||
resource: string
|
||||
desc: string
|
||||
}
|
||||
|
||||
const ruleFormRef = ref<FormInstance>()
|
||||
const ruleForm = reactive<RuleForm>({
|
||||
name: 'Hello',
|
||||
region: '',
|
||||
count: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
location: '',
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: '',
|
||||
})
|
||||
|
||||
const locationOptions = ['Home', 'Company', 'School']
|
||||
|
||||
const rules = reactive<FormRules<RuleForm>>({
|
||||
name: [
|
||||
{ required: true, message: 'Please input Activity name', trigger: 'blur' },
|
||||
{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
|
||||
],
|
||||
region: [
|
||||
{
|
||||
required: true,
|
||||
message: 'Please select Activity zone',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
count: [
|
||||
{
|
||||
required: true,
|
||||
message: 'Please select Activity count',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
date1: [
|
||||
{
|
||||
type: 'date',
|
||||
required: true,
|
||||
message: 'Please pick a date',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
date2: [
|
||||
{
|
||||
type: 'date',
|
||||
required: true,
|
||||
message: 'Please pick a time',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
location: [
|
||||
{
|
||||
required: true,
|
||||
message: 'Please select a location',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
type: [
|
||||
{
|
||||
type: 'array',
|
||||
required: true,
|
||||
message: 'Please select at least one activity type',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
resource: [
|
||||
{
|
||||
required: true,
|
||||
message: 'Please select activity resource',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
desc: [
|
||||
{ required: true, message: 'Please input activity form', trigger: 'blur' },
|
||||
],
|
||||
})
|
||||
|
||||
const submitForm = async (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
await formEl.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
console.log('submit!')
|
||||
} else {
|
||||
console.log('error submit!', fields)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const resetForm = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
formEl.resetFields()
|
||||
}
|
||||
|
||||
const options = Array.from({ length: 10000 }).map((_, idx) => ({
|
||||
value: `${idx + 1}`,
|
||||
label: `${idx + 1}`,
|
||||
}))
|
||||
</script>
|
||||
375
openhis-ui-vue3/src/template/tySurgicalRecord.vue
Executable file
375
openhis-ui-vue3/src/template/tySurgicalRecord.vue
Executable file
@@ -0,0 +1,375 @@
|
||||
<template>
|
||||
<div class="medical-document" >
|
||||
<!-- 操作按钮 -->
|
||||
<div class="btn-group">
|
||||
<el-button type="success" @click="handlePrint">打印记录</el-button>
|
||||
<!-- <el-button type="warning" @click="handleReset">重置表单</el-button> -->
|
||||
</div>
|
||||
<!-- 标题区域 -->
|
||||
<div class="doc-header">
|
||||
<h2 class="doc-title">{{ userStore.hospitalName}}</h2>
|
||||
<h1 class="doc-title">手术记录</h1>
|
||||
<div class="doc-subtitle">病历号: {{ formData.busNo || '待填写' }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
label-width="100px"
|
||||
label-align="left"
|
||||
class="doc-content"
|
||||
style="height: 50vh;overflow: scroll;"
|
||||
>
|
||||
<!-- 患者基础信息 -->
|
||||
<section class="doc-section">
|
||||
<h2 class="section-title">一、患者基础信息</h2>
|
||||
<div class="adaptive-grid">
|
||||
<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="gender" class="grid-item required">
|
||||
<el-select v-model="formData.gender" placeholder="请选择性别">
|
||||
<el-option label="男性" value="男性" />
|
||||
<el-option label="女性" value="女性" />
|
||||
</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="请输入年龄" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="科室" prop="department" class="grid-item required">
|
||||
<el-input v-model="formData.department" placeholder="如：普外科" clearable />
|
||||
</el-form-item>
|
||||
<!--
|
||||
<el-form-item label="病房/床号" prop="bedNo" class="grid-item required">
|
||||
<el-input v-model="formData.bedNo" placeholder="如：502-03" clearable />
|
||||
</el-form-item> -->
|
||||
|
||||
<el-form-item label="手术日期" prop="operationDate" class="grid-item required">
|
||||
<el-date-picker
|
||||
v-model="formData.operationDate"
|
||||
type="date"
|
||||
placeholder="选择手术日期"
|
||||
value-format="YYYY-MM-DD"
|
||||
style="width: 100%;"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 手术综合信息 -->
|
||||
<section class="doc-section">
|
||||
<h2 class="section-title">二、手术综合信息</h2>
|
||||
<el-form-item label="详细记录" prop="surgicalDetails" class="full-width-item required">
|
||||
<el-input
|
||||
v-model="formData.surgicalDetails"
|
||||
type="textarea"
|
||||
placeholder="请整合记录：手术团队、手术名称、术中发现、术后情况、签署信息等"
|
||||
autosize
|
||||
/>
|
||||
</el-form-item>
|
||||
</section>
|
||||
|
||||
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {onMounted, reactive, ref} from 'vue';
|
||||
import {
|
||||
ElButton,
|
||||
ElDatePicker,
|
||||
ElForm,
|
||||
ElFormItem,
|
||||
ElInput,
|
||||
ElMessage,
|
||||
ElMessageBox,
|
||||
ElOption,
|
||||
ElSelect
|
||||
} from 'element-plus';
|
||||
import {patientInfo} from '../views/doctorstation/components/store/patient';
|
||||
import useUserStore from '../store/modules/user';
|
||||
// 迁移到 hiprint
|
||||
import { previewPrint } from '@/utils/printUtils.js';
|
||||
|
||||
defineOptions({
|
||||
name: 'tySurgicalRecord'
|
||||
});
|
||||
// 表单引用
|
||||
const formRef = ref(null);
|
||||
// // Props与事件,去掉props.patientInfo改为直接从store获取
|
||||
// const props = defineProps({
|
||||
// patientInfo: {
|
||||
// type: Object,
|
||||
// required: true,
|
||||
// },
|
||||
// });
|
||||
const props = defineProps({});
|
||||
const emits = defineEmits(['submitOk']);
|
||||
const userStore = useUserStore();
|
||||
const patient = patientInfo.value;
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
busNo: patient?.busNo || '',
|
||||
patientName: patient?.patientName || '',
|
||||
gender: patient?.genderEnum_enumText || '',
|
||||
age: patient?.age || '',
|
||||
department: '',
|
||||
bedNo: '',
|
||||
operationDate: '',
|
||||
surgicalDetails: ''
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
busNo: [
|
||||
{ required: true, message: '请填写病历号', trigger: ['blur', 'submit'] }
|
||||
],
|
||||
patientName: [
|
||||
{ required: true, message: '请填写患者姓名', trigger: ['blur', 'submit'] }
|
||||
],
|
||||
gender: [
|
||||
{ required: true, message: '请选择性别', trigger: ['change', 'submit'] }
|
||||
],
|
||||
age: [
|
||||
{ required: true, message: '请填写年龄', trigger: ['blur', 'submit'] }
|
||||
// { type: 'number', min: 0, max: 150, message: '年龄需在0-150之间', trigger: ['blur', 'submit'] }
|
||||
],
|
||||
department: [
|
||||
{ required: true, message: '请填写科室', trigger: ['blur', 'submit'] }
|
||||
],
|
||||
// bedNo: [
|
||||
// { required: true, message: '请填写病房/床号', trigger: ['blur', 'submit'] }
|
||||
// ],
|
||||
operationDate: [
|
||||
{ required: true, message: '请选择手术日期', trigger: ['change', 'submit'] }
|
||||
],
|
||||
surgicalDetails: [
|
||||
{ required: true, message: '请填写手术综合信息', trigger: ['blur', 'submit'] }
|
||||
]
|
||||
});
|
||||
|
||||
// 提交表单
|
||||
const submit = () => {
|
||||
formRef.value.validate((valid) => {
|
||||
if (valid) {
|
||||
emits('submitOk', formData);
|
||||
ElMessage.success('手术记录保存成功');
|
||||
console.log('手术记录数据:', formData);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 打印功能 - 使用 hiprint
|
||||
const handlePrint = () => {
|
||||
formRef.value.validate((valid) => {
|
||||
if (valid) {
|
||||
const printDom = document.querySelector('.form-container');
|
||||
if (printDom) {
|
||||
previewPrint(printDom);
|
||||
} else {
|
||||
ElMessage.warning('未找到打印内容');
|
||||
}
|
||||
} else {
|
||||
ElMessage.warning('请先完善表单信息再打印');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 重置表单
|
||||
const handleReset = () => {
|
||||
ElMessageBox.confirm(
|
||||
'确定要重置表单吗？所有已填写内容将被清空',
|
||||
'确认重置',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}
|
||||
).then(() => {
|
||||
formRef.value.resetFields();
|
||||
const today = new Date();
|
||||
formData.operationDate = formatDate(today);
|
||||
ElMessage.success('表单已重置');
|
||||
});
|
||||
};
|
||||
|
||||
// 日期格式化
|
||||
const formatDate = (date) => {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
return `${year}-${month}-${day}`;
|
||||
};
|
||||
// 表单数据赋值
|
||||
const setFormData = (data) => {
|
||||
if (data) {
|
||||
Object.assign(formData, data);
|
||||
}
|
||||
};
|
||||
|
||||
// 生命周期
|
||||
onBeforeMount(() => {});
|
||||
onMounted(() => {
|
||||
// 初始化手术日期为当前时间
|
||||
console.log('patientInfo', patient);
|
||||
console.log('userStore', userStore, formData.department);
|
||||
if (!formData.operationDate) {
|
||||
formData.operationDate = formatDate(new Date());
|
||||
}
|
||||
if(formData.department==='' ){
|
||||
formData.department=userStore.orgName;
|
||||
}
|
||||
});
|
||||
// 暴露接口
|
||||
defineExpose({ formData, submit, setFormData });
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.medical-document {
|
||||
max-width: 1200px;
|
||||
height: auto;
|
||||
margin: 20px auto;
|
||||
padding: 30px;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
font-family: 'SimSun', '宋体', serif;
|
||||
}
|
||||
|
||||
.doc-header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.doc-title {
|
||||
font-size: 24px;
|
||||
margin: 0 0 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.doc-subtitle {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #333;
|
||||
}
|
||||
|
||||
.doc-content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.doc-section {
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px dashed #ccc;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
margin: 0 0 15px;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.adaptive-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 15px 20px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
margin-bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.grid-item .el-form-item__content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.full-width-item {
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.input-with-unit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.unit {
|
||||
white-space: nowrap;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 按钮组：强制靠右，增加margin确保间距 */
|
||||
.btn-group {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 20px;
|
||||
margin-bottom: 30px;
|
||||
width: 100%; /* 确保容器占满宽度，实现真正靠右 */
|
||||
}
|
||||
|
||||
.required .el-form-item__label::before {
|
||||
content: '*';
|
||||
color: #ff4d4f;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.el-textarea__inner {
|
||||
line-height: 1.6;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.medical-document {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.adaptive-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.doc-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
.btn-group {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.medical-document {
|
||||
box-shadow: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.el-input__inner, .el-select__input, .el-textarea__inner {
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.el-form-item__label {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
50
openhis-ui-vue3/src/template/useOptionsList.js
Executable file
50
openhis-ui-vue3/src/template/useOptionsList.js
Executable file
@@ -0,0 +1,50 @@
|
||||
// 导入 API 函数，用于从服务器获取带有选项列表的数据
|
||||
import {getListWithOptionList} from '@/views/basicmanage/caseTemplatesStatistics/api';
|
||||
// 导入 Vue 3 的组合式 API：onMounted（组件挂载后执行）和 ref（响应式数据）
|
||||
import {onMounted, ref} from 'vue';
|
||||
|
||||
// 创建响应式数据：统计选项列表，初始为空数组
|
||||
const statisticsOptionList = ref([]);
|
||||
|
||||
/**
|
||||
* 初始化统计选项列表数据
|
||||
* 异步函数，通过 API 获取数据并更新到响应式变量中
|
||||
*/
|
||||
const initStatic = async () => {
|
||||
try {
|
||||
// 调用 API 获取数据
|
||||
const res = await getListWithOptionList();
|
||||
// 将获取到的数据赋值给响应式变量
|
||||
statisticsOptionList.value = res.data;
|
||||
} catch (error) {
|
||||
// 错误处理：打印错误信息到控制台
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Vue 3 组合式函数：用于获取和管理统计选项列表
|
||||
* @returns {Object} 返回包含响应式数据和方法的对象
|
||||
*/
|
||||
export default function useOptionsList() {
|
||||
// 组件挂载后自动初始化数据
|
||||
onMounted(() => {
|
||||
initStatic();
|
||||
});
|
||||
|
||||
/**
|
||||
* 根据代码获取对应的选项列表
|
||||
* @param {string} code - 统计类型代码
|
||||
* @returns {Array} 返回匹配的选项列表，如果没有匹配则返回空数组
|
||||
*/
|
||||
const getStatisticsOptionList = (code) => {
|
||||
// 在统计选项列表中查找匹配代码的项，然后返回其 optionList 属性，如果没有找到则返回空数组
|
||||
return statisticsOptionList.value.find((item) => item.code === code)?.optionList || [];
|
||||
};
|
||||
|
||||
// 返回响应式数据和方法供组件使用
|
||||
return {
|
||||
statisticsOptionList, // 完整的统计选项列表
|
||||
getStatisticsOptionList, // 根据代码获取选项列表的方法
|
||||
};
|
||||
}
|
||||
44
openhis-ui-vue3/src/template/股骨头坏死(模板1).vue
Executable file
44
openhis-ui-vue3/src/template/股骨头坏死(模板1).vue
Executable file
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<div class="template-content">
|
||||
<div class="template-header">
|
||||
<h3>股骨头坏死(模板11111111)</h3>
|
||||
</div>
|
||||
<div class="template-body">
|
||||
<p>主诉：左侧髋部疼痛X个月，加重1周。</p>
|
||||
<p>现病史：患者X个月前无明显诱因出现左侧髋部疼痛，活动后加重，休息后减轻，未予重视。1周前疼痛加重，行走困难，遂来我院就诊。</p>
|
||||
<p>既往史：否认高血压、糖尿病、冠心病等慢性病史，否认手术、外伤史，否认药物过敏史。</p>
|
||||
<p>体格检查：左侧髋关节压痛(+)，活动受限，左下肢肌力下降。</p>
|
||||
<p>辅助检查：DR示左侧股骨头坏死。</p>
|
||||
<p>诊断：左侧股骨头坏死。</p>
|
||||
<p>治疗方案：1. 避免负重；2. 药物治疗；3. 必要时手术治疗。</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineOptions({
|
||||
name: '股骨头坏死(模板11111111)'
|
||||
})
|
||||
// 可以在这里添加组件逻辑
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.template-content {
|
||||
background-color: white;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
padding: 15px;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.template-header {
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.template-body p {
|
||||
margin-bottom: 10px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user