解决合并冲突
This commit is contained in:
897
openhis-ui-vue3/src/template/FallBedFallAssessment.vue
Normal file
897
openhis-ui-vue3/src/template/FallBedFallAssessment.vue
Normal file
@@ -0,0 +1,897 @@
|
||||
<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 { ref, reactive, computed, onMounted } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
|
||||
// import { webapp_ws_ajax_run, urlAddRandomNo } from '@/utils/grwebapp';
|
||||
// import { useRoute, useRouter } from 'vue-router';
|
||||
|
||||
// 响应式数据
|
||||
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('请填写跌倒/坠床评估护理记录单后再进行操作');
|
||||
} else {
|
||||
form.totalScore = totalScore.value;
|
||||
|
||||
// 模拟保存数据，不再调用后端API
|
||||
console.log('保存的数据:', form);
|
||||
|
||||
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();
|
||||
}
|
||||
};
|
||||
|
||||
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;
|
||||
|
||||
// 自动初始化表格数据，不再依赖患者ID参数
|
||||
// 延迟执行，确保所有数据都已初始化
|
||||
setTimeout(() => {
|
||||
init();
|
||||
}, 100);
|
||||
} catch (error) {
|
||||
console.error('初始化错误:', error);
|
||||
// 即使出错也要初始化表格，显示默认数据
|
||||
setTimeout(() => {
|
||||
init();
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.business {
|
||||
background: white;
|
||||
border-radius: 5px;
|
||||
padding: 10px 16px;
|
||||
height: calc(100vh - var(--barHeight) * 1px - 50px);
|
||||
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>
|
||||
278
openhis-ui-vue3/src/template/HospitalRecordForm.vue
Normal file
278
openhis-ui-vue3/src/template/HospitalRecordForm.vue
Normal file
@@ -0,0 +1,278 @@
|
||||
<template>
|
||||
<div class="hospital-record-form">
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="病案首页(一)" name="first">
|
||||
<medicalRecordFirst :formData="formData"></medicalRecordFirst>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="病案首页(二)" name="second">
|
||||
<medicalRecordSecond :formData="formData"></medicalRecordSecond>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="病案附页(一)" name="third">
|
||||
<medicalRecordThird :formData="formData"></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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineOptions({
|
||||
name: 'HospitalRecordForm',
|
||||
});
|
||||
import { ref, reactive } from 'vue';
|
||||
// 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 medicalRecordFirstPrint from '@/views/hospitalRecord/components/medicalRecordFirstPrint.json';
|
||||
import medicalRecordSecondPrint from '@/views/hospitalRecord/components/medicalRecordSecondPrint.json';
|
||||
import medicalRecordThirdPrint from '@/views/hospitalRecord/components/medicalRecordThirdPrint.json';
|
||||
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
hospital: {
|
||||
orgCode: '41275054-7',
|
||||
paymentMethod: '城乡居民基本医疗保险'
|
||||
},
|
||||
patient: {
|
||||
healthCardNo: '',
|
||||
name: '',
|
||||
gender: '',
|
||||
birthDate: '',
|
||||
age: '',
|
||||
nationality: '中国',
|
||||
nativePlace: '',
|
||||
ethnicity: '汉族',
|
||||
idCardNo: '',
|
||||
householdAddress: '',
|
||||
workUnit: '',
|
||||
contactName: '',
|
||||
contactRelation: '',
|
||||
contactAddress: '',
|
||||
contactPhone: ''
|
||||
},
|
||||
admission: {
|
||||
times: 1,
|
||||
hospitalNo: '',
|
||||
recordNo: '',
|
||||
channel: '',
|
||||
admitTime: '',
|
||||
department: '',
|
||||
ward: '',
|
||||
confirmDate: '',
|
||||
dischargeTime: '',
|
||||
dischargeDepartment: '',
|
||||
dischargeWard: '',
|
||||
hospitalDays: ''
|
||||
},
|
||||
diagnosis: {
|
||||
mainDiagnosis: '',
|
||||
otherDiagnosis: ''
|
||||
},
|
||||
medicalInfo: {
|
||||
bloodTransfusion: '2',
|
||||
bloodType: '',
|
||||
rhType: '',
|
||||
drugAllergy: '1'
|
||||
},
|
||||
doctorInfo: {
|
||||
departmentDirector: '',
|
||||
chiefPhysician: '',
|
||||
attendingPhysician: '',
|
||||
residentPhysician: '',
|
||||
chargeNurse: '',
|
||||
chiefResident: '',
|
||||
intern: '',
|
||||
recordQuality: '1',
|
||||
coder: '',
|
||||
qualityControlDate: ''
|
||||
}
|
||||
});
|
||||
|
||||
const activeName = ref('first');
|
||||
|
||||
// 打印表单
|
||||
const printForm = () => {
|
||||
// 创建一个新的打印窗口
|
||||
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() {
|
||||
|
||||
}
|
||||
|
||||
// 重置表单
|
||||
const resetForm = () => {
|
||||
Object.keys(formData).forEach(key => {
|
||||
if (typeof formData[key] === 'object') {
|
||||
Object.keys(formData[key]).forEach(subKey => {
|
||||
formData[key][subKey] = '';
|
||||
});
|
||||
} else {
|
||||
formData[key] = '';
|
||||
}
|
||||
});
|
||||
|
||||
// 重置默认值
|
||||
formData.hospital.orgCode = '41275054-7';
|
||||
formData.hospital.paymentMethod = '城乡居民基本医疗保险';
|
||||
formData.patient.nationality = '中国';
|
||||
formData.patient.ethnicity = '汉族';
|
||||
formData.admission.times = 1;
|
||||
formData.medicalInfo.bloodTransfusion = '2';
|
||||
formData.medicalInfo.drugAllergy = '1';
|
||||
formData.doctorInfo.recordQuality = '1';
|
||||
};
|
||||
</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>
|
||||
828
openhis-ui-vue3/src/template/inHospitalRecord.vue
Normal file
828
openhis-ui-vue3/src/template/inHospitalRecord.vue
Normal file
@@ -0,0 +1,828 @@
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, watch, onMounted } from 'vue';
|
||||
import { ElInput, ElSelect, ElOption, ElDatePicker, ElButton, ElMessage, ElMessageBox, ElForm, ElFormItem } from 'element-plus';
|
||||
import useUserStore from '../store/modules/user';
|
||||
|
||||
defineOptions({
|
||||
name: 'InHospitalRecord',
|
||||
components: { ElInput, ElSelect, ElOption, ElDatePicker, ElButton, ElForm, ElFormItem }
|
||||
});
|
||||
|
||||
// Props与事件
|
||||
const props = defineProps({
|
||||
patientInfo: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const emits = defineEmits(['submitOk']);
|
||||
|
||||
// 数据初始化
|
||||
const userStore = useUserStore();
|
||||
const patient = props.patientInfo;
|
||||
const formRef = ref(null);
|
||||
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
// 基础信息
|
||||
patientName: patient?.name || '',
|
||||
hospitalNo: patient?.busNo || '',
|
||||
gender: patient?.genderEnum_enumText || '',
|
||||
age: patient?.age || '',
|
||||
nation: '',
|
||||
occupation: '',// 职业
|
||||
marriage: '',// 婚姻状况
|
||||
birthplace: '',// 出生地
|
||||
admissionTime: '',// 入院时间
|
||||
recordTime: '',// 记录时间
|
||||
historyReporter: '',// 病史陈述者
|
||||
reliability: '可靠',// 可靠程度
|
||||
// 病史信息
|
||||
complaint: '',// 主诉
|
||||
presentIllness: '',// 现病史
|
||||
pastIllness: '',// 既往史
|
||||
personalHistory: '',// 个人史
|
||||
allergyHistory: '',// 过敏史
|
||||
pastHistory: '',// 既往史
|
||||
familyHistory: '',// 家族史
|
||||
maritalHistory: '',// 婚姻史
|
||||
menstrualHistory: '',// 月经史
|
||||
// 中医信息
|
||||
tcmInfo: '',
|
||||
|
||||
// 体格检查
|
||||
temp: '',
|
||||
pulse: '',
|
||||
respiration: '',
|
||||
bp: '',
|
||||
height: '',
|
||||
weight: '',
|
||||
bmi: '',
|
||||
general: '',
|
||||
skin: '',
|
||||
chest: '',
|
||||
abdomen: '',
|
||||
limbsNervous: '',
|
||||
|
||||
// 辅助检查
|
||||
auxExam: '',
|
||||
|
||||
// 诊断信息
|
||||
tcmDiagnosis: '',
|
||||
westernDiagnosis: '',
|
||||
|
||||
// 签名信息
|
||||
doctorSign: '',
|
||||
superiorSign: '',
|
||||
signDate: ''
|
||||
});
|
||||
|
||||
// 表单校验规则
|
||||
const rules = reactive({
|
||||
name: [
|
||||
{ required: true, message: '请填写姓名', trigger: ['blur', 'submit'] }
|
||||
],
|
||||
hospitalNo: [
|
||||
{ required: true, message: '请填写住院号', trigger: ['blur', 'submit'] }
|
||||
],
|
||||
gender: [
|
||||
{ required: true, message: '请选择性别', trigger: ['change', 'submit'] }
|
||||
],
|
||||
age: [
|
||||
{ required: true, message: '请填写年龄', trigger: ['blur', 'submit'] },
|
||||
{ type: 'number', min: 1, max: 120, message: '年龄需在1-120岁之间', trigger: ['blur', 'submit'] }
|
||||
],
|
||||
admissionTime: [
|
||||
{ required: true, message: '请选择入院时间', trigger: ['change', 'submit'] }
|
||||
],
|
||||
recordTime: [
|
||||
{ required: true, message: '请选择记录时间', trigger: ['change', 'submit'] }
|
||||
],
|
||||
chiefComplaint: [
|
||||
{ required: true, message: '请填写主诉', trigger: ['blur', 'submit'] }
|
||||
]
|
||||
});
|
||||
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
// 初始化记录时间为当前时间
|
||||
if (!formData.recordTime) {
|
||||
formData.recordTime = formatDateTime(new Date());
|
||||
}
|
||||
if (!formData.admissionTime) {
|
||||
formData.admissionTime = formatDateTime(new Date());
|
||||
}
|
||||
if (!formData.signDate) {
|
||||
formData.signDate = formatDateTime(new Date());
|
||||
}
|
||||
if (!formData.patientName) {
|
||||
formData.patientName = patient?.patientName || '';
|
||||
}
|
||||
if (!formData.gender) {
|
||||
formData.gender = patient?.genderEnum_enumText || '';
|
||||
}
|
||||
if (!formData.age) {
|
||||
formData.age = patient?.age || '';
|
||||
}
|
||||
if (!formData.hospitalNo) {
|
||||
formData.hospitalNo = patient?.busNo || '';
|
||||
}
|
||||
});
|
||||
|
||||
// BMI自动计算
|
||||
watch([() => formData.height, () => formData.weight], ([newHeight, newWeight]) => {
|
||||
if (newHeight && newWeight && newHeight > 0 && newWeight > 0) {
|
||||
const heightM = newHeight / 100;
|
||||
formData.bmi = (newWeight / (heightM * heightM)).toFixed(2);
|
||||
} else {
|
||||
formData.bmi = '';
|
||||
}
|
||||
});
|
||||
|
||||
// 入院时间变化处理
|
||||
watch(() => formData.admissionTime, (val) => {
|
||||
if (val && !formData.recordTime) {
|
||||
ElMessageBox.confirm(
|
||||
'是否将记录时间同步为入院时间？',
|
||||
'时间同步提示',
|
||||
{
|
||||
confirmButtonText: '同步',
|
||||
cancelButtonText: '手动设置',
|
||||
type: 'info'
|
||||
}
|
||||
).then(() => {
|
||||
formData.recordTime = val;
|
||||
}).catch(() => {});
|
||||
}
|
||||
});
|
||||
|
||||
// 血压格式校验
|
||||
const validateBloodPressure = () => {
|
||||
const bp = formData.bp;
|
||||
if (!bp) return;
|
||||
const reg = /^\d{2,3}\/\d{2,3}$/;
|
||||
if (!reg.test(bp)) {
|
||||
ElMessage.warning('血压格式不正确，请输入如 "120/80" 的格式');
|
||||
formData.bp = '';
|
||||
}
|
||||
};
|
||||
|
||||
// 提交表单
|
||||
const submit = () => {
|
||||
formRef.value.validate((isValid) => {
|
||||
if (isValid) {
|
||||
// 额外校验血压格式
|
||||
if (formData.bp) {
|
||||
validateBloodPressure();
|
||||
if (!formData.bp) return; // 格式错误时终止提交
|
||||
}
|
||||
|
||||
emits('submitOk', formData);
|
||||
ElMessage.success('记录保存成功！');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 新增：重置表单方法（带确认提示）
|
||||
const handleReset = () => {
|
||||
ElMessageBox.confirm(
|
||||
'确定要重置表单吗？所有已填写内容将被清空，且不可恢复',
|
||||
'重置确认',
|
||||
{
|
||||
confirmButtonText: '确认重置',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
center: true
|
||||
}
|
||||
).then(() => {
|
||||
// 执行表单重置
|
||||
formRef.value.resetFields();
|
||||
// 保留患者基础信息和默认值（避免清空关键基础数据）
|
||||
formData.patientName = patient?.name || '';
|
||||
formData.hospitalNo = patient?.busNo || '';
|
||||
formData.gender = patient?.genderEnum_enumText || '';
|
||||
formData.age = patient?.age || '';
|
||||
formData.reliability = '可靠';
|
||||
// 重置时间为当前时间
|
||||
const today = new Date();
|
||||
formData.admissionTime = formatDateTime(today);
|
||||
formData.recordTime = formatDateTime(today);
|
||||
formData.signDate = formatDateTime(today);
|
||||
// 重置成功提示
|
||||
ElMessage.success('表单已成功重置');
|
||||
}).catch(() => {
|
||||
// 取消重置提示
|
||||
ElMessage.info('已取消表单重置');
|
||||
});
|
||||
};
|
||||
|
||||
// 表单数据赋值
|
||||
const setFormData = (data) => {
|
||||
if (data) {
|
||||
Object.assign(formData, data);
|
||||
}
|
||||
};
|
||||
|
||||
// 日期格式化工具
|
||||
const formatDateTime = (date) => {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const hour = String(date.getHours()).padStart(2, '0');
|
||||
const minute = String(date.getMinutes()).padStart(2, '0');
|
||||
return `${year}-${month}-${day} ${hour}:${minute}`;
|
||||
};
|
||||
|
||||
// 暴露接口
|
||||
defineExpose({ formData, submit, setFormData, handleReset });
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 表单外层容器 */
|
||||
.medical-form {
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
height: 700px;
|
||||
margin: 15px auto;
|
||||
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>
|
||||
555
openhis-ui-vue3/src/template/inHospitalSurgicalRecord.vue
Normal file
555
openhis-ui-vue3/src/template/inHospitalSurgicalRecord.vue
Normal file
@@ -0,0 +1,555 @@
|
||||
<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" type="number" 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>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { ElMessage, ElMessageBox, ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElDatePicker, ElButton } from 'element-plus';
|
||||
|
||||
// 医院名称
|
||||
const 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: ''// 记录日期
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
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);
|
||||
});
|
||||
|
||||
// 提交表单
|
||||
const submit = () => {
|
||||
formRef.value.validate((valid) => {
|
||||
if (valid) {
|
||||
ElMessage.success('手术记录保存成功');
|
||||
console.log('手术记录数据:', formData);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 打印功能
|
||||
const handlePrint = () => {
|
||||
formRef.value.validate((valid) => {
|
||||
if (valid) {
|
||||
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}`;
|
||||
};
|
||||
</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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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>
|
||||
553
openhis-ui-vue3/src/template/inHosptialCommunicate.vue
Normal file
553
openhis-ui-vue3/src/template/inHosptialCommunicate.vue
Normal file
@@ -0,0 +1,553 @@
|
||||
<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" type="number" 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="如：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 { ref, reactive, onMounted } from 'vue';
|
||||
import { ElMessage, ElMessageBox, ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElDatePicker, ElButton } from 'element-plus';
|
||||
|
||||
// 医院名称
|
||||
const hospitalName = '长春市朝阳区中医院';
|
||||
defineOptions({
|
||||
name: 'InHospitalCommunicate'
|
||||
});
|
||||
// 表单引用
|
||||
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 submit = () => {
|
||||
formRef.value.validate((valid) => {
|
||||
if (valid) {
|
||||
ElMessage.success('记录保存成功');
|
||||
console.log('表单数据:', formData);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 打印功能
|
||||
const handlePrint = () => {
|
||||
formRef.value.validate((valid) => {
|
||||
if (valid) {
|
||||
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}`;
|
||||
};
|
||||
</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>
|
||||
@@ -60,7 +60,7 @@
|
||||
|
||||
<!-- 基本信息记录表格 -->
|
||||
<div class="vital-signs-table">
|
||||
<el-table :data="state.vitalSigns" border style="width: 100%">
|
||||
<el-table :data="state.formData.vitalSigns" border style="width: 100%">
|
||||
<el-table-column label="日期" width="100">
|
||||
<template #default="scope">
|
||||
<el-date-picker
|
||||
@@ -128,7 +128,7 @@
|
||||
<el-table-column label="氧疗L/min" width="200">
|
||||
<el-table-column label="方式" >
|
||||
<template #default="scope">
|
||||
<el-select v-model="scope.row.oxygenMethod" placeholder="选择">
|
||||
<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>
|
||||
@@ -144,7 +144,7 @@
|
||||
<el-table-column label="入量" width="200">
|
||||
<el-table-column label="名称" >
|
||||
<template #default="scope">
|
||||
<el-select v-model="scope.row.oxygenMethod" placeholder="选择">
|
||||
<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>
|
||||
@@ -165,7 +165,7 @@
|
||||
<el-table-column label="出量" width="200">
|
||||
<el-table-column label="名称" >
|
||||
<template #default="scope">
|
||||
<el-select v-model="scope.row.oxygenMethod" placeholder="选择">
|
||||
<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>
|
||||
@@ -245,7 +245,7 @@ const props = defineProps({
|
||||
});
|
||||
|
||||
// 表单数据
|
||||
const state = reactive({
|
||||
const state = ref({
|
||||
formData: {
|
||||
name: '',
|
||||
age: '',
|
||||
@@ -254,8 +254,7 @@ const state = reactive({
|
||||
bedNumber: '',
|
||||
hospitalNumber: '',
|
||||
diagnosis: '',
|
||||
},
|
||||
vitalSigns: [
|
||||
vitalSigns: [
|
||||
{
|
||||
date: new Date().toISOString().split('T')[0],
|
||||
time: new Date().toTimeString().slice(0, 5),
|
||||
@@ -264,17 +263,19 @@ const state = reactive({
|
||||
heartRate: '',
|
||||
respiratoryRate: '',
|
||||
bloodPressure: '',
|
||||
oxygenMethod: '无',
|
||||
intake: '',
|
||||
flowRate: '',
|
||||
nurseSignature: '',
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
|
||||
});
|
||||
|
||||
// 添加生命体征记录
|
||||
const addVitalSign = () => {
|
||||
state.vitalSigns.push({
|
||||
state.value.formData.vitalSigns.push({
|
||||
date: new Date().toISOString().split('T')[0],
|
||||
time: new Date().toTimeString().slice(0, 5),
|
||||
consciousness: '清醒',
|
||||
@@ -282,16 +283,17 @@ const addVitalSign = () => {
|
||||
heartRate: '',
|
||||
respiratoryRate: '',
|
||||
bloodPressure: '',
|
||||
oxygenMethod: '无',
|
||||
intake: '',
|
||||
flowRate: '',
|
||||
nurseSignature: '',
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
// 删除生命体征记录
|
||||
const removeVitalSign = (index) => {
|
||||
state.vitalSigns.splice(index, 1);
|
||||
if (state.vitalSigns.length === 0) {
|
||||
state.value.formData.vitalSigns.splice(index, 1);
|
||||
if (state.value.formData.vitalSigns.length === 0) {
|
||||
addVitalSign();
|
||||
}
|
||||
};
|
||||
@@ -300,7 +302,7 @@ const removeVitalSign = (index) => {
|
||||
|
||||
// 重置表单
|
||||
const resetForm = () => {
|
||||
state.formData = {
|
||||
state.value.formData = {
|
||||
name: '',
|
||||
age: '',
|
||||
gender: '',
|
||||
@@ -308,21 +310,9 @@ const resetForm = () => {
|
||||
bedNumber: '',
|
||||
hospitalNumber: '',
|
||||
diagnosis: '',
|
||||
vitalSigns:[]
|
||||
};
|
||||
state.vitalSigns = [
|
||||
{
|
||||
date: new Date().toISOString().split('T')[0],
|
||||
time: new Date().toTimeString().slice(0, 5),
|
||||
consciousness: '清醒',
|
||||
temperature: '',
|
||||
heartRate: '',
|
||||
respiratoryRate: '',
|
||||
bloodPressure: '',
|
||||
oxygenMethod: '无',
|
||||
flowRate: '',
|
||||
nurseSignature: '',
|
||||
},
|
||||
];
|
||||
|
||||
};
|
||||
|
||||
onBeforeMount(() => {
|
||||
@@ -335,8 +325,16 @@ onBeforeMount(() => {
|
||||
onMounted(() => {
|
||||
// 组件挂载后的逻辑
|
||||
});
|
||||
|
||||
defineExpose({ state });
|
||||
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>
|
||||
|
||||
413
openhis-ui-vue3/src/template/outpatientMedicalRecord.vue
Normal file
413
openhis-ui-vue3/src/template/outpatientMedicalRecord.vue
Normal file
@@ -0,0 +1,413 @@
|
||||
<template>
|
||||
<div class="medical-form">
|
||||
<div class="patient-name">
|
||||
患者姓名：{{ patient?.patientName || '未知' }} 病历号：{{
|
||||
patient?.busNo || '未知'
|
||||
}}
|
||||
</div>
|
||||
<h2 style="text-align: center">{{ userStore.hospitalName }}</h2>
|
||||
<h2 style="text-align: center">门诊病历</h2>
|
||||
|
||||
<!-- 滚动内容区域 -->
|
||||
<div class="form-scroll-container">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
label-width="100px"
|
||||
label-align="left"
|
||||
class="medical-full-form"
|
||||
>
|
||||
<h4 class="section-title">基础信息</h4>
|
||||
<!-- 1. 基础信息：单行自适应排列 -->
|
||||
<el-form-item class="form-section">
|
||||
<div class="single-row-layout">
|
||||
<el-form-item label="身高" prop="height" class="row-item">
|
||||
<div class="input-with-unit">
|
||||
<el-input v-model="formData.height" type="text" placeholder="请输入" />
|
||||
<span class="unit">cm</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="体重" prop="weight" class="row-item">
|
||||
<div class="input-with-unit">
|
||||
<el-input v-model="formData.weight" type="text" placeholder="请输入" />
|
||||
<span class="unit">kg</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="体温" prop="temperature" class="row-item">
|
||||
<div class="input-with-unit">
|
||||
<el-input v-model="formData.temperature" type="text" placeholder="请输入" />
|
||||
<span class="unit">℃</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="脉搏" prop="pulse" class="row-item">
|
||||
<div class="input-with-unit">
|
||||
<el-input v-model="formData.pulse" type="text" placeholder="请输入" />
|
||||
<span class="unit">次/分</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="发病日期" prop="onsetDate" class="row-item">
|
||||
<el-date-picker
|
||||
v-model="formData.onsetDate"
|
||||
type="date"
|
||||
placeholder="选择发病日期"
|
||||
value-format="YYYY-MM-DD"
|
||||
style="width: 100%"
|
||||
/>
|
||||
<!-- <el-input v-model="formData.onsetDate" type="date" /> -->
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<h4 class="section-title">病史信息</h4>
|
||||
<!-- 2. 病史信息：单行自适应排列（新增调整） -->
|
||||
<el-form-item class="form-section">
|
||||
<div class="single-row-layout">
|
||||
<el-form-item label="现病史" prop="presentIllness" class="row-item history-item">
|
||||
<el-input
|
||||
v-model="formData.presentIllness"
|
||||
type="textarea"
|
||||
placeholder="无"
|
||||
autosize
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="既往史" prop="pastIllness" class="row-item history-item">
|
||||
<el-input v-model="formData.pastIllness" type="textarea" placeholder="无" autosize />
|
||||
</el-form-item>
|
||||
<el-form-item label="个人史" prop="personalHistory" class="row-item history-item">
|
||||
<el-input
|
||||
v-model="formData.personalHistory"
|
||||
type="textarea"
|
||||
placeholder="无"
|
||||
autosize
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="过敏史" prop="allergyHistory" class="row-item history-item">
|
||||
<el-input
|
||||
v-model="formData.allergyHistory"
|
||||
type="textarea"
|
||||
placeholder="无"
|
||||
autosize
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="家族史" prop="familyHistory" class="row-item history-item">
|
||||
<el-input
|
||||
v-model="formData.familyHistory"
|
||||
type="textarea"
|
||||
placeholder="无"
|
||||
autosize
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<h4 class="section-title">主诉、查体(治疗)、处置、辅助检查</h4>
|
||||
<!-- 3. 主诉（必填） -->
|
||||
<el-form-item label="主诉" prop="complaint" class="required form-item-single">
|
||||
<el-input
|
||||
v-model="formData.complaint"
|
||||
type="textarea"
|
||||
placeholder="请输入主诉"
|
||||
class="tall-textarea"
|
||||
autosize
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- 4. 查体、处理、辅助检查 -->
|
||||
<el-form-item label="查体(治疗)" prop="physicalExam" class="form-item-single">
|
||||
<el-input
|
||||
v-model="formData.physicalExam"
|
||||
type="textarea"
|
||||
placeholder="请输入查体结果"
|
||||
class="tall-textarea"
|
||||
autosize
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="处置" prop="treatment" class="form-item-single">
|
||||
<el-input
|
||||
v-model="formData.treatment"
|
||||
type="textarea"
|
||||
placeholder="请输入处理方案"
|
||||
class="tall-textarea"
|
||||
autosize
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="辅助检查" prop="auxiliaryExam" class="form-item-single">
|
||||
<el-input
|
||||
v-model="formData.auxiliaryExam"
|
||||
type="textarea"
|
||||
placeholder="请输入辅助检查结果"
|
||||
class="tall-textarea"
|
||||
autosize
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, onBeforeMount, onMounted, watch } from 'vue';
|
||||
import useUserStore from '../store/modules/user';
|
||||
import { ElInput, ElMessage, ElForm, ElFormItem } from 'element-plus';
|
||||
import { patientInfo } from '../views/doctorstation/components/store/patient';
|
||||
import { pa } from 'element-plus/es/locales.mjs';
|
||||
|
||||
defineOptions({
|
||||
name: 'OutpatientMedicalRecord',
|
||||
components: { ElInput, ElMessage, ElForm, ElFormItem },
|
||||
});
|
||||
|
||||
// // Props与事件,去掉props.patientInfo改为直接从store获取
|
||||
// const props = defineProps({
|
||||
// patientInfo: {
|
||||
// type: Object,
|
||||
// required: true,
|
||||
// },
|
||||
// });
|
||||
const props = defineProps({});
|
||||
const emits = defineEmits(['submitOk']);
|
||||
|
||||
// 数据初始化
|
||||
const userStore = useUserStore();
|
||||
const patient = ref(null);
|
||||
const formRef = ref(null);
|
||||
|
||||
// 表单数据（全部字符类型）
|
||||
const formData = reactive({
|
||||
height: '', // 身高
|
||||
weight: '', // 体重
|
||||
temperature: '', // 体温
|
||||
pulse: '', // 脉搏
|
||||
onsetDate: '', // 发病日期
|
||||
complaint: '', // 主诉（必填）
|
||||
presentIllness: '', // 现病史
|
||||
pastIllness: '', // 既往史
|
||||
personalHistory: '', // 个人史
|
||||
allergyHistory: '', // 过敏史
|
||||
physicalExam: '', // 查体
|
||||
treatment: '', // 处理
|
||||
auxiliaryExam: '', // 辅助检查
|
||||
familyHistory: '', // 家族史
|
||||
});
|
||||
|
||||
// 表单校验规则
|
||||
const rules = reactive({
|
||||
complaint: [
|
||||
{
|
||||
required: true,
|
||||
message: '请填写主诉',
|
||||
trigger: ['blur', 'submit'],
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
// 提交函数
|
||||
const submit = () => {
|
||||
formRef.value.validate((isValid) => {
|
||||
if (isValid) {
|
||||
emits('submitOk', formData);
|
||||
ElMessage.success('提交成功');
|
||||
}
|
||||
});
|
||||
};
|
||||
// 日期格式化工具
|
||||
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;
|
||||
}
|
||||
|
||||
/* 基础信息项：适配短输入框 */
|
||||
.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>
|
||||
359
openhis-ui-vue3/src/template/tySurgicalRecord.vue
Normal file
359
openhis-ui-vue3/src/template/tySurgicalRecord.vue
Normal file
@@ -0,0 +1,359 @@
|
||||
<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 { ref, reactive, onMounted } from 'vue';
|
||||
import { ElMessage, ElMessageBox, ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElDatePicker, ElButton } from 'element-plus';
|
||||
import { patientInfo } from '../views/doctorstation/components/store/patient';
|
||||
import useUserStore from '../store/modules/user';
|
||||
|
||||
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);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 打印功能
|
||||
const handlePrint = () => {
|
||||
formRef.value.validate((valid) => {
|
||||
if (valid) {
|
||||
// window.print();
|
||||
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>
|
||||
Reference in New Issue
Block a user