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

476 住院医生工作-检查申请单界面缺失核心临床字段（紧急程度、过敏史、检查目的等）

Browse Source
This commit is contained in:
Ranyunqiao
2026-05-14 12:56:04 +08:00
parent 360256e589
commit 6367654ada
1 changed files with 250 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files

580
openhis-ui-vue3/src/views/inpatientDoctor/home/components/order/applicationForm/medicalExaminations.vue
View File

@@ -5,36 +5,25 @@
--> -->
<template> <template>
<div class="medicalExaminations-container"> <div class="medicalExaminations-container">
<!-- 顶部标题栏 --> <!-- 主体内容 -->
<div class="form-header"> <div class="form-body">
<div class="header-left"> <!-- 右上角：紧急程度 -->
<el-icon class="header-icon"><Files /></el-icon> <div class="urgency-bar">
<span class="header-title">检查申请单</span> <span class="urgency-bar-label">紧急程度：</span>
</div> <el-radio-group v-model="form.urgencyLevel" @change="handleUrgencyChange" size="small">
<div class="header-right">
<span class="urgency-label">紧急程度</span>
<el-radio-group v-model="form.urgencyLevel" @change="handleUrgencyChange" class="urgency-radio-group">
<el-radio-button label="routine">普通</el-radio-button> <el-radio-button label="routine">普通</el-radio-button>
<el-radio-button label="emergency">急诊</el-radio-button> <el-radio-button label="emergency">急诊</el-radio-button>
</el-radio-group> </el-radio-group>
<transition name="el-fade-in-linear"> <transition name="el-fade-in-linear">
<span v-if="form.urgencyLevel === 'emergency'" class="emergency-tip"> <span v-if="form.urgencyLevel === 'emergency'" class="emergency-tip-inline">
<el-icon><WarningFilled /></el-icon> <el-icon><WarningFilled /></el-icon>
急诊单将进入绿色通道 绿色通道
</span> </span>
</transition> </transition>
</div> </div>
</div>
<!-- 主体内容区 -->
<div class="form-body">
<!-- 选择检查项目 --> <!-- 选择检查项目 -->
<div class="section-card"> <div class="section-card">
<div class="section-header"> <div class="transfer-wrapper">
<el-icon><Document /></el-icon>
<span>选择检查项目</span>
</div>
<div v-loading="loading" class="transfer-wrapper">
<el-transfer <el-transfer
v-model="transferValue" v-model="transferValue"
:data="applicationList" :data="applicationList"
@@ -45,165 +34,150 @@
</div> </div>
</div> </div>
<!-- 申请信息 --> <el-form :model="form" :rules="rules" ref="formRef" label-position="top" class="info-form">
<div class="section-card"> <!-- 第一行：发往科室 + 紧急程度 + 期望检查时间 -->
<div class="section-header"> <el-row :gutter="16">
<el-icon><EditPen /></el-icon> <el-col :span="8">
<span>申请信息</span> <el-form-item label="发往科室" prop="targetDepartment">
</div> <el-tree-select
clearable
style="width: 100%"
v-model="form.targetDepartment"
filterable
:data="orgOptions"
:props="{ value: 'id', label: 'name', children: 'children' }"
value-key="id"
check-strictly
placeholder="请选择执行科室"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="期望检查时间">
<el-date-picker
v-model="form.expectedExaminationTime"
type="datetime"
placeholder="默认当前时间"
style="width: 100%"
value-format="YYYY-MM-DD HH:mm:ss"
format="YYYY-MM-DD HH:mm"
:disabled-date="disabledFutureDate"
:default-value="new Date()"
/>
</el-form-item>
</el-col>
</el-row>
<el-form :model="form" :rules="rules" ref="formRef" label-position="top" class="info-form"> <!-- 第二行：症状 + 体征 -->
<!-- 第一行：发往科室 + 期望检查时间 --> <el-row :gutter="16">
<el-row :gutter="16"> <el-col :span="12">
<el-col :span="12"> <el-form-item label="症状">
<el-form-item label="发往科室" prop="targetDepartment"> <el-input v-model="form.symptom" autocomplete="off" type="textarea" :rows="2" placeholder="请输入患者症状" />
<el-tree-select </el-form-item>
clearable </el-col>
style="width: 100%" <el-col :span="12">
v-model="form.targetDepartment" <el-form-item label="体征">
filterable <el-input v-model="form.sign" autocomplete="off" type="textarea" :rows="2" placeholder="请输入患者体征" />
:data="orgOptions" </el-form-item>
:props="{ value: 'id', label: 'name', children: 'children' }" </el-col>
value-key="id" </el-row>
check-strictly
placeholder="请选择执行科室"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="期望检查时间">
<el-date-picker
v-model="form.expectedExaminationTime"
type="datetime"
placeholder="默认当前时间"
style="width: 100%"
value-format="YYYY-MM-DD HH:mm:ss"
format="YYYY-MM-DD HH:mm"
:disabled-date="disabledFutureDate"
:default-value="new Date()"
/>
</el-form-item>
</el-col>
</el-row>
<!-- 第二行：症状 + 体征 --> <!-- 第三行：临床诊断 + 其他诊断 -->
<el-row :gutter="16"> <el-row :gutter="16">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="症状"> <el-form-item label="临床诊断">
<el-input v-model="form.symptom" autocomplete="off" type="textarea" :rows="2" placeholder="请输入患者症状" /> <el-input disabled v-model="form.clinicalDiagnosis" placeholder="自动带入主诊断" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="体征"> <el-form-item label="其他诊断">
<el-input v-model="form.sign" autocomplete="off" type="textarea" :rows="2" placeholder="请输入患者体征" /> <el-input disabled v-model="form.otherDiagnosis" placeholder="自动带入其他诊断" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<!-- 第三行：临床诊断 + 其他诊断 --> <!-- 第四行：相关结果 + 注意事项 -->
<el-row :gutter="16"> <el-row :gutter="16">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="临床诊断"> <el-form-item label="相关结果">
<el-input disabled v-model="form.clinicalDiagnosis" placeholder="自动带入主诊断" /> <el-input v-model="form.relatedResult" autocomplete="off" type="textarea" :rows="2" placeholder="请输入相关检验结果" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="其他诊断"> <el-form-item label="注意事项">
<el-input disabled v-model="form.otherDiagnosis" placeholder="自动带入其他诊断" /> <el-input v-model="form.attention" autocomplete="off" type="textarea" :rows="2" placeholder="请输入检查注意事项" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<!-- 第四行：相关结果 + 注意事项 --> <!-- 第五行：检查目的 + 病史摘要 -->
<el-row :gutter="16"> <el-row :gutter="16">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="相关结果"> <el-form-item label="检查目的" prop="examinationPurpose">
<el-input v-model="form.relatedResult" autocomplete="off" type="textarea" :rows="2" placeholder="请输入相关检验结果" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="注意事项">
<el-input v-model="form.attention" autocomplete="off" type="textarea" :rows="2" placeholder="请输入检查注意事项" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<!-- 过敏史卡片 -->
<div class="section-card allergy-card">
<div class="section-header">
<el-icon><Warning /></el-icon>
<span>过敏史</span>
<span v-if="form.allergyHistory" class="header-count">{{ form.allergyHistory.length }}字</span>
</div>
<div class="allergy-content">
<div class="allergy-input-row">
<el-input <el-input
v-model="form.allergyHistory" v-model="form.examinationPurpose"
autocomplete="off" autocomplete="off"
type="textarea" type="textarea"
:rows="2" :rows="2"
:class="{ 'allergy-danger': isSevereAllergy }" maxlength="200"
placeholder="如：造影剂过敏史等（系统将自动从患者档案带入）" show-word-limit
placeholder="请输入检查目的，如：明确诊断、术后复查、疗效评估等"
/> />
<span v-if="isSevereAllergy" class="allergy-severe-tag"> </el-form-item>
<el-icon><WarningFilled /></el-icon> </el-col>
严重过敏 <el-col :span="12">
</span> <el-form-item label="病史摘要" prop="medicalHistorySummary">
</div> <div class="history-field-wrapper">
<div class="allergy-confirm"> <el-input
<el-checkbox v-model="form.allergyConfirmed" size="small"> v-model="form.medicalHistorySummary"
已通过口头询问确认无过敏史 autocomplete="off"
</el-checkbox> type="textarea"
</div> :rows="2"
</div> placeholder="请简要描述患者病史摘要"
</div> />
<el-button
type="primary"
plain
size="small"
class="history-sync-btn"
@click="handleSyncHistory"
:loading="syncingHistory"
>
<el-icon><Refresh /></el-icon>
同步
</el-button>
</div>
</el-form-item>
</el-col>
</el-row>
<!-- 检查目的卡片 --> <!-- 第六行：过敏史 -->
<div class="section-card purpose-card"> <el-row :gutter="16">
<div class="section-header"> <el-col :span="24">
<el-icon><Aim /></el-icon> <el-form-item label="过敏史">
<span>检查目的</span> <div class="allergy-wrapper">
<span class="required-mark">必填</span> <el-input
</div> v-model="form.allergyHistory"
<el-input autocomplete="off"
v-model="form.examinationPurpose" type="textarea"
autocomplete="off" :rows="1"
type="textarea" :class="{ 'allergy-danger': isSevereAllergy }"
:rows="2" placeholder="如：造影剂过敏史等（系统将自动从患者档案带入）"
maxlength="200" />
show-word-limit <div class="allergy-actions">
placeholder="请输入检查目的，如：明确诊断、术后复查、疗效评估等" <span v-if="isSevereAllergy" class="allergy-severe-tag-inline">
/> <el-icon><WarningFilled /></el-icon>
</div> 严重过敏
</span>
<!-- 病史摘要卡片 --> <el-checkbox v-model="form.allergyConfirmed" size="small">
<div class="section-card history-card"> 已通过口头询问确认无过敏史
<div class="section-header"> </el-checkbox>
<el-icon><DocumentCopy /></el-icon> </div>
<span>病史摘要</span> </div>
<span class="required-mark">必填</span> </el-form-item>
<el-button </el-col>
type="primary" </el-row>
plain </el-form>
size="small"
class="sync-btn"
@click="handleSyncHistory"
:loading="syncingHistory"
>
<el-icon><Refresh /></el-icon>
同步现病史/体征
</el-button>
</div>
<el-input
v-model="form.medicalHistorySummary"
autocomplete="off"
type="textarea"
:rows="3"
placeholder="请简要描述患者病史摘要"
/>
</div>
</div>
</div> </div>
<!-- 急诊确认弹窗 --> <!-- 急诊确认弹窗 -->
@@ -228,6 +202,7 @@
<script setup name="MedicalExaminations"> <script setup name="MedicalExaminations">
import {getCurrentInstance, onMounted, reactive, ref, watch, computed, nextTick} from 'vue'; import {getCurrentInstance, onMounted, reactive, ref, watch, computed, nextTick} from 'vue';
import dayjs from 'dayjs';
import {patientInfo} from '../../../store/patient.js'; import {patientInfo} from '../../../store/patient.js';
import {getDepartmentList} from '@/api/public.js'; import {getDepartmentList} from '@/api/public.js';
import {getEncounterDiagnosis} from '../../api.js'; import {getEncounterDiagnosis} from '../../api.js';
@@ -355,7 +330,7 @@ const form = reactive({
allergyHistory: '', allergyHistory: '',
examinationPurpose: '', examinationPurpose: '',
medicalHistorySummary: '', medicalHistorySummary: '',
expectedExaminationTime: '', expectedExaminationTime: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'),
symptom: '', symptom: '',
sign: '', sign: '',
clinicalDiagnosis: '', clinicalDiagnosis: '',
@@ -622,7 +597,7 @@ const resetForm = () => {
form.allergyHistory = ''; form.allergyHistory = '';
form.examinationPurpose = ''; form.examinationPurpose = '';
form.medicalHistorySummary = ''; form.medicalHistorySummary = '';
form.expectedExaminationTime = ''; form.expectedExaminationTime = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss');
form.symptom = ''; form.symptom = '';
form.sign = ''; form.sign = '';
form.clinicalDiagnosis = ''; form.clinicalDiagnosis = '';
@@ -705,81 +680,13 @@ $bg-color: #f5f7fa;
background: $bg-color; background: $bg-color;
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
// 顶部标题栏 // 主体内容区 - 紧凑布局
.form-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 20px;
background: linear-gradient(135deg, #fff 0%, #f0f7ff 100%);
border-bottom: 1px solid $border-color;
.header-left {
display: flex;
align-items: center;
gap: 10px;
.header-icon {
font-size: 24px;
color: $primary-color;
}
.header-title {
font-size: 18px;
font-weight: 600;
color: $text-primary;
letter-spacing: 1px;
}
}
.header-right {
display: flex;
align-items: center;
gap: 12px;
.urgency-label {
font-size: 13px;
color: $text-secondary;
font-weight: 500;
}
.urgency-radio-group {
:deep(.el-radio-button__inner) {
border-radius: 4px;
margin: 0;
}
:deep(.el-radio-button:first-child .el-radio-button__inner) {
border-radius: 4px;
}
:deep(.el-radio-button:last-child .el-radio-button__inner) {
border-radius: 4px;
}
}
.emergency-tip {
display: flex;
align-items: center;
gap: 4px;
color: $danger-color;
font-size: 13px;
font-weight: 500;
background: #fef0f0;
padding: 4px 10px;
border-radius: 4px;
border: 1px solid #fde2e2;
}
}
}
// 主体内容区
.form-body { .form-body {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px; gap: 8px;
padding: 16px; padding: 8px 12px;
overflow-y: auto; overflow-y: auto;
&::-webkit-scrollbar { &::-webkit-scrollbar {
@@ -796,47 +703,30 @@ $bg-color: #f5f7fa;
} }
} }
// 卡片通用样式 // 紧急程度栏 - 右上角
.urgency-bar {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
padding: 4px 0;
margin-bottom: 4px;
}
.urgency-bar-label {
font-size: 13px;
font-weight: 500;
color: $text-regular;
white-space: nowrap;
}
// 卡片通用样式 - 紧凑
.section-card { .section-card {
background: #fff; background: #fff;
border-radius: 8px; border-radius: 6px;
padding: 16px; padding: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); border: 1px solid #e4e7ed;
border: 1px solid rgba(0, 0, 0, 0.04); margin-bottom: 4px;
.section-header {
display: flex;
align-items: center;
gap: 8px;
padding-bottom: 12px;
margin-bottom: 12px;
border-bottom: 1px dashed $border-color;
font-size: 14px;
font-weight: 600;
color: $text-primary;
> i {
font-size: 16px;
color: $primary-color;
}
.header-count {
margin-left: auto;
font-size: 12px;
font-weight: 400;
color: $text-secondary;
}
.required-mark {
font-size: 12px;
font-weight: 500;
color: #fff;
background: $danger-color;
padding: 2px 8px;
border-radius: 10px;
margin-left: 4px;
}
}
} }
.transfer-wrapper { .transfer-wrapper {
@@ -850,10 +740,23 @@ $bg-color: #f5f7fa;
display: flex !important; display: flex !important;
flex-direction: row !important; flex-direction: row !important;
} }
// 信息表单
// 穿梭框按钮垂直居中
:deep(.el-transfer__buttons) {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 4px;
}
:deep(.el-transfer__button) {
margin: 4px 0;
}
// 信息表单 - 紧凑
.info-form { .info-form {
:deep(.el-form-item) { :deep(.el-form-item) {
margin-bottom: 14px; margin-bottom: 6px;
.el-form-item__label { .el-form-item__label {
font-size: 13px; font-size: 13px;
@@ -883,53 +786,10 @@ $bg-color: #f5f7fa;
} }
} }
// 过敏史卡片 // 过敏史危险输入样式
.allergy-card { :deep(.el-textarea__inner.allergy-danger) {
.allergy-content { border-color: $danger-color !important;
.allergy-input-row { background-color: #fef0f0;
position: relative;
:deep(.el-textarea) {
.el-textarea__inner.allergy-danger {
border-color: $danger-color !important;
background-color: #fef0f0;
}
}
}
.allergy-severe-tag {
position: absolute;
right: 12px;
top: 8px;
display: flex;
align-items: center;
gap: 4px;
color: $danger-color;
font-size: 13px;
font-weight: 600;
background: #fef0f0;
padding: 3px 10px;
border-radius: 12px;
border: 1px solid #fde2e2;
}
.allergy-confirm {
margin-top: 10px;
padding-left: 4px;
}
}
}
// 病史摘要卡片
.history-card {
.section-header {
.sync-btn {
margin-left: auto;
font-size: 12px;
padding: 6px 12px;
border-radius: 16px;
}
}
} }
// 急诊确认弹窗 // 急诊确认弹窗
@@ -968,4 +828,64 @@ $bg-color: #f5f7fa;
.fade-in-linear-leave-to { .fade-in-linear-leave-to {
opacity: 0; opacity: 0;
} }
/* 紧急程度行内布局 */
.urgency-inline {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
}
.emergency-tip-inline {
display: inline-flex;
align-items: center;
gap: 2px;
color: $danger-color;
font-size: 11px;
font-weight: 500;
background: #fef0f0;
padding: 2px 6px;
border-radius: 3px;
white-space: nowrap;
}
/* 过敏史包装 */
.allergy-wrapper {
width: 100%;
}
.allergy-actions {
display: flex;
align-items: center;
gap: 12px;
margin-top: 4px;
}
.allergy-severe-tag-inline {
display: inline-flex;
align-items: center;
gap: 2px;
color: $danger-color;
font-size: 11px;
font-weight: 600;
background: #fef0f0;
padding: 2px 8px;
border-radius: 3px;
}
/* 病史摘要同步按钮 */
.history-field-wrapper {
position: relative;
width: 100%;
}
.history-sync-btn {
position: absolute;
right: 4px;
top: -28px;
font-size: 11px;
padding: 2px 8px;
height: 24px;
}
</style> </style>