wangyizhe/his
3
3
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

解决合并冲突

Browse Source
This commit is contained in:
chenqi
2025-12-10 14:20:24 +08:00
parent e1385cb3e6
commit 18f6a845e6
804 changed files with 61881 additions and 13577 deletions
Download Patch File Download Diff File Expand all files Collapse all files

828
openhis-ui-vue3/src/template/inHospitalRecord.vue Normal file
View 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>