1770 lines
43 KiB
Vue
1770 lines
43 KiB
Vue
<template>
|
||
<div class="medical-report">
|
||
<!-- 左侧人员列表 -->
|
||
<div class="patient-list">
|
||
<div class="list-header">
|
||
|
||
<div class="filter-options">
|
||
<div class="header-title">人员列表</div>
|
||
<!-- <label class="radio-label">
|
||
<input type="radio" name="status" checked/>
|
||
<span>未检</span>
|
||
</label>
|
||
<label class="radio-label">
|
||
<input type="radio" name="status"/>
|
||
<span>已检</span>
|
||
</label> -->
|
||
</div>
|
||
<div class="view-options">
|
||
<div class="view-buttons">
|
||
<button
|
||
v-for="period in timePeriods"
|
||
:key="period.value"
|
||
class="view-btn"
|
||
:class="{ active: selectedPeriod === period.value }"
|
||
@click="handlePeriodChange(period.value)"
|
||
>
|
||
{{ period.label }}
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 添加日期选择器组件和搜索按钮 -->
|
||
<div v-if="showDatePicker" class="date-picker-container">
|
||
<div class="date-picker-wrapper">
|
||
<el-date-picker
|
||
v-model="customDateRange"
|
||
type="daterange"
|
||
unlink-panels
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
:shortcuts="shortcuts"
|
||
format="YYYY-MM-DD"
|
||
value-format="YYYY-MM-DD"
|
||
/>
|
||
</div>
|
||
<el-button
|
||
type="primary"
|
||
@click="handleDateSearch"
|
||
class="search-button"
|
||
>搜索</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="search-box">
|
||
<input
|
||
type="text"
|
||
v-model="searchQuery"
|
||
placeholder="请输入姓名"
|
||
@input="handleSearch"
|
||
/>
|
||
<i class="el-icon-search search-icon"></i>
|
||
</div>
|
||
</div>
|
||
<div class="list-content">
|
||
<div
|
||
v-for="patient in patients"
|
||
:key="patient.id"
|
||
class="patient-item"
|
||
@click="handlePatientSelect(patient)"
|
||
:class="{ active: selectedPatient?.id === patient.id }"
|
||
>
|
||
<div class="patient-info">
|
||
<span class="name">{{ patient.pname }}</span>
|
||
<span class="medical-sn">{{ patient.medicalSn }}</span>
|
||
</div>
|
||
</div>
|
||
<!-- 将分页组件移到list-content内部底部 -->
|
||
<div class="pagination-container">
|
||
<el-pagination
|
||
v-model:current-page="pageNo"
|
||
:page-size="20"
|
||
small
|
||
:total="total"
|
||
layout="total, prev, pager, next, jumper"
|
||
@current-change="handleCurrentChange"
|
||
>
|
||
<template #total>
|
||
<span>共 {{ total }} 条</span>
|
||
</template>
|
||
</el-pagination>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 右侧检查结果 -->
|
||
<div class="report-content" v-if="selectedPatient">
|
||
<!-- 基本信息 -->
|
||
<div class="basic-info">
|
||
<div class="photo-box">
|
||
<img v-if="reportData.headPicUrl" :src="reportData.headPicUrl" alt="头像" class="photo"/>
|
||
<div v-else class="no-photo">个人照片</div>
|
||
</div>
|
||
<div class="info-grid">
|
||
<div class="info-row">
|
||
<div class="info-item">
|
||
<label>体检编号：</label>
|
||
<span>{{ reportData.medicalSn }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>身份证号：</label>
|
||
<span>{{ reportData.cardId }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>姓名：</label>
|
||
<span>{{ reportData.pname }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>性别：</label>
|
||
<span>{{ reportData.gender }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="info-row">
|
||
<div class="info-item">
|
||
<label>年龄：</label>
|
||
<span>{{ age }}岁</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>电话：</label>
|
||
<span>{{ reportData.phoneNum }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>国籍：</label>
|
||
<span>{{ reportData.nationality }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>民族：</label>
|
||
<span>{{ reportData.nation }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 检查结果部分 -->
|
||
<div class="exam-results">
|
||
<!-- 检查项目标签 -->
|
||
<div class="exam-tabs">
|
||
<div
|
||
v-for="tab in examTabs"
|
||
:key="tab.id"
|
||
:class="['tab-item', { active: currentTab === tab.id }]"
|
||
@click="switchTab(tab.id)"
|
||
>
|
||
<div class="tab-indicator" :style="{ background: tab.color }"></div>
|
||
<span>{{ tab.name }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 检查结果表格 -->
|
||
<div class="result-table">
|
||
<!-- 表头部分 -->
|
||
<div class="table-header">
|
||
<div class="header-row">
|
||
<div class="header-cell" style="width: 5%">#</div>
|
||
<div class="header-cell" style="width: 15%">体检项目</div>
|
||
<div class="header-cell" style="width: 20%">明细结果</div>
|
||
<div class="header-cell" style="width: 10%">单位</div>
|
||
<div class="header-cell" style="width: 15%">参考值</div>
|
||
<div class="header-cell" style="width: 10%">提示</div>
|
||
<div class="header-cell" style="width: 15%">危险程度</div>
|
||
<div class="header-cell" style="width: 10%">是否阳性</div>
|
||
<div class="header-cell" style="width: 10%">操作</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 表格内容部分 -->
|
||
<div class="table-body">
|
||
<div
|
||
v-for="(item, index) in sortedExamItems"
|
||
:key="item.id"
|
||
class="table-row"
|
||
:class="{
|
||
'warning-row': item.status === 'warning',
|
||
'danger-row': item.status === 'danger'
|
||
}"
|
||
:data-item-status="item.itemStatus"
|
||
>
|
||
<div class="table-cell" style="width: 5%">{{ index + 1 }}</div>
|
||
<div class="table-cell" style="width: 15%">{{ item.name }}</div>
|
||
<div class="table-cell" style="width: 20%">
|
||
<input
|
||
type="text"
|
||
v-model="item.value"
|
||
@change="handleResultChange(item)"
|
||
class="cell-input"
|
||
:disabled="isItemDisabled(item)"
|
||
/>
|
||
</div>
|
||
<div class="table-cell" style="width: 10%">{{ item.unit }}</div>
|
||
<div class="table-cell" style="width: 15%">{{ item.reference }}</div>
|
||
<div class="table-cell" style="width: 10%">{{ item.note }}</div>
|
||
<div class="table-cell" style="width: 15%">{{ item.risk }}</div>
|
||
<div class="table-cell" style="width: 10%">
|
||
<el-tag
|
||
v-if="item.positive === '阳性'"
|
||
type="danger"
|
||
size="small"
|
||
effect="light"
|
||
class="positive-indicator"
|
||
>
|
||
阳性
|
||
</el-tag>
|
||
<span v-else class="negative-text">阴性</span>
|
||
</div>
|
||
<div class="table-cell" style="width: 10%">
|
||
<el-dropdown @command="handleOperation">
|
||
<el-button size="small">
|
||
更多操作
|
||
<el-icon class="el-icon--right"><arrow-down /></el-icon>
|
||
</el-button>
|
||
<template #dropdown>
|
||
<el-dropdown-menu>
|
||
<el-dropdown-item
|
||
:command="{ type: 'positive', item: item }"
|
||
:class="{ 'is-active': item.positive === '阳性' }"
|
||
>
|
||
阳性
|
||
</el-dropdown-item>
|
||
<el-dropdown-item
|
||
:command="{ type: 'negative', item: item }"
|
||
:class="{ 'is-active': item.positive === '阴性' }"
|
||
>
|
||
阴性
|
||
</el-dropdown-item>
|
||
<el-dropdown-item
|
||
divided
|
||
:command="{ type: 'abandon', item: item }"
|
||
:class="{ 'is-danger': item.itemStatus !== '2' }"
|
||
style="color: red;"
|
||
>
|
||
{{ item.itemStatus === '2' ? '恢复正常' : '弃检' }}
|
||
</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</template>
|
||
</el-dropdown>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 将体检小结移到这里，与表格同级 -->
|
||
<div class="summary-section">
|
||
<div class="section-title">体检小结</div>
|
||
<textarea
|
||
v-model="examConclusion"
|
||
placeholder="输入多个以分号隔开"
|
||
class="summary-textarea"
|
||
></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 底部操作栏 -->
|
||
<div class="action-footer">
|
||
<div class="left-section">
|
||
<span>检查医生：</span>
|
||
<span>{{ user?.nickname || '暂无' }}</span>
|
||
<span style="margin-left: 100px;">检查日期：{{ formattedMedicalDateTime }}</span>
|
||
</div>
|
||
<div class="right-section">
|
||
<div class="action-buttons">
|
||
<button class="action-btn">同步结果</button>
|
||
<button class="action-btn">报告预览</button>
|
||
<button class="action-btn">复检</button>
|
||
<button class="action-btn">弃检</button>
|
||
<button class="action-btn primary" @click="handleSaveResults">保存结果</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 添加未选择患者时的提示 -->
|
||
<div class="empty-content" v-else>
|
||
<el-empty
|
||
description="请选择左侧人员查看详细信息"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 添加日期选择对话框 -->
|
||
<el-dialog
|
||
v-model="dateDialogVisible"
|
||
title="自定义日期"
|
||
width="580px"
|
||
>
|
||
<el-date-picker
|
||
v-model="customDateRange"
|
||
type="daterange"
|
||
unlink-panels
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
:shortcuts="shortcuts"
|
||
style="width: 100%"
|
||
/>
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button @click="dateDialogVisible = false">取消</el-button>
|
||
<el-button type="primary" @click="confirmCustomDate">
|
||
确定
|
||
</el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted, computed, onBeforeUnmount } from 'vue'
|
||
import { ElDialog, ElLoading, ElMessage, ElMessageBox } from 'element-plus'
|
||
import { PatientApi } from '@/api/inspect/inspectpatient'
|
||
import { PatientitemsApi } from '@/api/inspect/inspectpatientitems'
|
||
import { getUserProfile } from '@/api/system/user/profile'
|
||
import ExamImages from './Exam_images.vue'
|
||
import { ArrowDown } from '@element-plus/icons-vue'
|
||
|
||
const dialogTitle = ref('体检报告')
|
||
const { t } = useI18n() // 国际化
|
||
const message = useMessage() // 消息弹窗
|
||
const status = ref('')
|
||
const patients = ref([])
|
||
// 患者基本信息数据
|
||
const reportData = ref({
|
||
medicalSn: '', // 体检编号
|
||
cardId: '', // 证件ID
|
||
pName: '', // 患者姓名
|
||
gender: '', // 性别
|
||
birthday: '', // 出生日期
|
||
nationality: '', // 国籍
|
||
nation: '', // 民族
|
||
race: '', // 人种
|
||
phoneNum: '', // 电话
|
||
status: 0, // 状态
|
||
reportType: '', // 报告类型
|
||
medicalDateTime: '', // 体检日期
|
||
chargeType: '', // 收费方式
|
||
totalPrice: 0, // 实际收款金额
|
||
headPicUrl: '', // 头像图片路径
|
||
summaryResult: '', // 汇总分析结果
|
||
auditor: '', // 审核人
|
||
auditorTime: '', // 审核时间
|
||
})
|
||
// 患者体检项目数据
|
||
const patientitemData = ref({
|
||
medicalSn: '', // 体检编号
|
||
itemName: '', // 检查项目名称
|
||
itemCode: '', // 项目代号
|
||
price: 0, // 项目单价
|
||
discountedPrice: 0, // 折扣价
|
||
discounted: 0, // 折扣 百分比
|
||
sectionID: '', // 科室ID
|
||
examDescription: '', // 检查所见
|
||
itemResult: '', // 检查结论
|
||
unit: '', // 项目单位
|
||
highValue: 0, // 取值上限
|
||
lowValue: 0, // 取值下限
|
||
itemStatus: '', // 0：未检 1：已检 2：放弃 3：挂起，择日检(待查)
|
||
createTime: '', // 创建时间
|
||
positive: '', // 是否阳性 1：阳性
|
||
inspectdoctor: '', // 检查医生
|
||
inspecttime: '', // 检查时间
|
||
})
|
||
const doctorSignature = ref('')
|
||
|
||
// 检查项目标签数据
|
||
const examTabs = ref([])
|
||
|
||
const currentTab = ref('urine')
|
||
|
||
// 检查结果数据
|
||
const examItems = ref({})
|
||
|
||
// 当前显示的检查结果
|
||
const currentExamItems = computed(() => examItems.value[currentTab.value] || [])
|
||
|
||
// 添加排序后的计算属性
|
||
const sortedExamItems = computed(() => {
|
||
if (!currentExamItems.value) return [];
|
||
|
||
// 对当前显示的检查项目进行排序
|
||
return [...currentExamItems.value].sort((a, b) => {
|
||
// 首先按照 itemStatus 排序（未检的排在前面）
|
||
if (a.itemStatus !== b.itemStatus) {
|
||
// 优先级：未检(0) > 已检(1) > 待查(3) > 弃检(2)
|
||
const statusOrder = { '0': 0, '1': 1, '3': 2, '2': 3 };
|
||
return statusOrder[a.itemStatus] - statusOrder[b.itemStatus];
|
||
}
|
||
// 如果状态相同，则按照 id 排序
|
||
return a.id - b.id;
|
||
});
|
||
});
|
||
|
||
// 切换标签页
|
||
const switchTab = (tabId) => {
|
||
currentTab.value = tabId
|
||
}
|
||
|
||
// 其他数据
|
||
const examConclusion = ref('')
|
||
const examDate = ref('')
|
||
|
||
// 时间周期选项
|
||
const timePeriods = [
|
||
{ label: '今日', value: 'today' },
|
||
{ label: '本周', value: 'week' },
|
||
{ label: '本月', value: 'month' },
|
||
{ label: '自定义', value: 'custom' },
|
||
{ label: '重置', value: 'reset' }
|
||
]
|
||
|
||
const pageNo = ref(1)
|
||
const pageSize = ref(20)
|
||
const total = ref(0)
|
||
|
||
// 添加搜索相关的状态
|
||
const searchQuery = ref('')
|
||
const originalPatients = ref([]) // 保存原始患者列表
|
||
|
||
// 添加数据缓存
|
||
const patientDataCache = ref(new Map())
|
||
|
||
// 修改获取患者列表数据的函数
|
||
const getPatientList = async () => {
|
||
try {
|
||
const params = {
|
||
pageNo: pageNo.value,
|
||
pageSize: pageSize.value
|
||
}
|
||
const res = await PatientApi.getPatientPage(params)
|
||
originalPatients.value = res.list // 保存原始列表
|
||
patients.value = res.list
|
||
total.value = res.total
|
||
} catch (error) {
|
||
console.error('获取患者列表出错:', error)
|
||
message.error('获取患者列表出错')
|
||
}
|
||
}
|
||
|
||
// 修改获取患者体检项目数据的方法
|
||
const getpatientitemData = async (medicalSn) => {
|
||
try {
|
||
const params = {
|
||
medicalSn: medicalSn,
|
||
pageNo: 1,
|
||
pageSize: 100
|
||
}
|
||
const itemsRes = await PatientitemsApi.getPatientitemsPage(params)
|
||
if (itemsRes.list && itemsRes.list.length > 0) {
|
||
patientitemData.value = itemsRes.list[0]
|
||
|
||
// 获取用户信息
|
||
try {
|
||
const userProfile = await getUserProfile()
|
||
user.value = userProfile
|
||
} catch (userError) {
|
||
console.error('获取用户信息失败:', userError)
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('获取患者体检项目数据出错:', error)
|
||
message.error('获取患者体检项目数据出错')
|
||
}
|
||
}
|
||
|
||
// 修改获取患者详细数据的函数
|
||
const loadPatientData = async (patient) => {
|
||
try {
|
||
// 检查缓存中是否已有数据
|
||
const cacheKey = patient.id
|
||
if (patientDataCache.value.has(cacheKey)) {
|
||
const cachedData = patientDataCache.value.get(cacheKey)
|
||
reportData.value = cachedData.reportData
|
||
examItems.value = cachedData.examItems
|
||
examTabs.value = cachedData.examTabs
|
||
currentTab.value = cachedData.currentTab
|
||
return
|
||
}
|
||
|
||
const loading = ElLoading.service({
|
||
lock: true,
|
||
text: '加载中...',
|
||
background: 'rgba(255, 255, 255, 0.7)'
|
||
})
|
||
|
||
try {
|
||
const [userData, patientData, itemsRes] = await Promise.all([
|
||
getUserProfile(),
|
||
PatientApi.getPatient(patient.id),
|
||
PatientitemsApi.getPatientitemsPage({
|
||
medicalSn: patient.medicalSn,
|
||
pageNo: 1,
|
||
pageSize: 100
|
||
})
|
||
])
|
||
|
||
user.value = userData
|
||
reportData.value = patientData
|
||
|
||
if (itemsRes.list && itemsRes.list.length > 0) {
|
||
examConclusion.value = itemsRes.list[0].analyse || ''
|
||
|
||
const itemsBySection = {}
|
||
itemsRes.list.forEach(item => {
|
||
const sectionType = '一般检查'
|
||
if (!itemsBySection[sectionType]) {
|
||
itemsBySection[sectionType] = []
|
||
}
|
||
|
||
const processedItem = {
|
||
id: item.id,
|
||
name: item.itemName,
|
||
value: item.itemResult,
|
||
unit: item.unit,
|
||
reference: `${item.lowValue}-${item.highValue}`,
|
||
note: getStatusNote(item),
|
||
risk: getRiskLevel(item),
|
||
status: getRowStatus(item),
|
||
positive: item.positive === '1' ? '阳性' : '阴性',
|
||
itemStatus: item.itemStatus
|
||
}
|
||
|
||
itemsBySection[sectionType].push(processedItem)
|
||
})
|
||
|
||
examTabs.value = Object.keys(itemsBySection).map((sectionType, index) => ({
|
||
id: sectionType,
|
||
name: sectionType,
|
||
color: getTabColor(index)
|
||
}))
|
||
|
||
examItems.value = itemsBySection
|
||
|
||
if (examTabs.value.length > 0) {
|
||
currentTab.value = examTabs.value[0].id
|
||
}
|
||
}
|
||
|
||
patientDataCache.value.set(cacheKey, {
|
||
reportData: { ...reportData.value },
|
||
examItems: { ...examItems.value },
|
||
examTabs: [...examTabs.value],
|
||
currentTab: currentTab.value
|
||
})
|
||
|
||
} finally {
|
||
loading.close()
|
||
}
|
||
|
||
} catch (error) {
|
||
console.error('获取患者详细信息出错:', error)
|
||
message.error('获取患者详细信息失败')
|
||
}
|
||
}
|
||
|
||
// 添加辅助函数
|
||
const getStatusNote = (item) => {
|
||
const value = parseFloat(item.itemResult)
|
||
const low = item.lowValue
|
||
const high = item.highValue
|
||
|
||
if (value < low) return '↓'
|
||
if (value > high) return '↑'
|
||
return '-'
|
||
}
|
||
|
||
const getRiskLevel = (item) => {
|
||
const value = parseFloat(item.itemResult)
|
||
const low = item.lowValue
|
||
const high = item.highValue
|
||
|
||
if (value < low) return '低于正常值'
|
||
if (value > high) return '高于正常值'
|
||
return '正常'
|
||
}
|
||
|
||
const getRowStatus = (item) => {
|
||
const value = parseFloat(item.itemResult)
|
||
const low = item.lowValue
|
||
const high = item.highValue
|
||
if (value > high) {
|
||
return 'danger'
|
||
}
|
||
else {
|
||
return ''
|
||
}
|
||
}
|
||
|
||
// 修改科室名称映射函数
|
||
const getSectionName = (sectionId) => {
|
||
// 获取该科室下的所有检查项目
|
||
const items = examItems.value[sectionId] || []
|
||
|
||
// 检查是否包含特定检查项目
|
||
const hasBloodTest = items.some(item => item.name.includes('血常规'))
|
||
const hasUrineTest = items.some(item => item.name.includes('尿常规'))
|
||
const hasImageTest = items.some(item =>
|
||
item.name.includes('CT') ||
|
||
item.name.includes('MRI') ||
|
||
item.name.includes('超声') ||
|
||
item.name.includes('X线') ||
|
||
item.name.includes('影像')
|
||
)
|
||
|
||
// 根据检查项目类型返回对应科室名称
|
||
if (hasBloodTest) return '血液检查'
|
||
if (hasUrineTest) return '尿液检查'
|
||
if (hasImageTest) return '影像检查'
|
||
return '一般检查'
|
||
}
|
||
|
||
// 标签颜色映射
|
||
const tabColors = ['#003366', '#006699', '#0099CC', '#00CCFF']
|
||
const getTabColor = (index) => {
|
||
return tabColors[index % tabColors.length]
|
||
}
|
||
|
||
// 修改患者选择处理函数
|
||
const handlePatientSelect = async (patient) => {
|
||
try {
|
||
// 清理当前数据
|
||
examConclusion.value = ''
|
||
examItems.value = {}
|
||
examTabs.value = []
|
||
currentTab.value = ''
|
||
|
||
// 清理该患者的缓存
|
||
if (patientDataCache.value.has(patient.id)) {
|
||
patientDataCache.value.delete(patient.id)
|
||
}
|
||
|
||
// 设置选中患者
|
||
selectedPatient.value = patient
|
||
|
||
// 重新加载患者数据
|
||
await loadPatientData(patient)
|
||
|
||
// 如果有体检编号，获取体检项目数据
|
||
if (patient.medicalSn) {
|
||
await getpatientitemData(patient.medicalSn)
|
||
}
|
||
} catch (error) {
|
||
console.error('切换患者失败:', error)
|
||
message.error('切换患者失败')
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
// 清理页面状态
|
||
patients.value = []
|
||
selectedPatient.value = null
|
||
reportData.value = {
|
||
medicalSn: '',
|
||
cardId: '',
|
||
pName: '',
|
||
gender: '',
|
||
birthday: '',
|
||
nationality: '',
|
||
nation: '',
|
||
race: '',
|
||
phoneNum: '',
|
||
status: 0,
|
||
reportType: '',
|
||
medicalDateTime: '',
|
||
chargeType: '',
|
||
totalPrice: 0,
|
||
headPicUrl: '',
|
||
summaryResult: '',
|
||
auditor: '',
|
||
auditorTime: ''
|
||
}
|
||
patientitemData.value = {
|
||
medicalSn: '',
|
||
itemName: '',
|
||
itemCode: '',
|
||
price: 0,
|
||
discountedPrice: 0,
|
||
discounted: 0,
|
||
sectionID: '',
|
||
examDescription: '',
|
||
itemResult: '',
|
||
unit: '',
|
||
highValue: 0,
|
||
lowValue: 0,
|
||
itemStatus: '',
|
||
createTime: '',
|
||
positive: '',
|
||
inspectdoctor: '',
|
||
inspecttime: ''
|
||
}
|
||
customDateRange.value = []
|
||
|
||
// 设置默认为今日
|
||
const today = new Date()
|
||
selectedPeriod.value = 'today'
|
||
const todayStart = new Date(today.setHours(0, 0, 0, 0))
|
||
const todayEnd = new Date(today.setHours(23, 59, 59, 999))
|
||
customDateRange.value = [todayStart, todayEnd]
|
||
|
||
// 获取今日数据
|
||
fetchPatientsByDate()
|
||
})
|
||
|
||
// 当前选中的时间周期
|
||
const selectedPeriod = ref('today')
|
||
|
||
// 日期选择相关
|
||
const dateDialogVisible = ref(false)
|
||
const customDateRange = ref([])
|
||
|
||
// 快捷选项
|
||
const shortcuts = [
|
||
{
|
||
text: '最近一周',
|
||
value: () => {
|
||
const end = new Date()
|
||
const start = new Date()
|
||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
||
return [start, end]
|
||
},
|
||
},
|
||
{
|
||
text: '最近一个月',
|
||
value: () => {
|
||
const end = new Date()
|
||
const start = new Date()
|
||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
||
return [start, end]
|
||
},
|
||
},
|
||
{
|
||
text: '最近三个月',
|
||
value: () => {
|
||
const end = new Date()
|
||
const start = new Date()
|
||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
|
||
return [start, end]
|
||
},
|
||
},
|
||
]
|
||
|
||
const showDatePicker = ref(false)
|
||
|
||
// 修改按日期获取患者列表的方法
|
||
const fetchPatientsByDate = async () => {
|
||
try {
|
||
if (!customDateRange.value || customDateRange.value.length !== 2) return
|
||
|
||
const [startDate, endDate] = customDateRange.value
|
||
const params = {
|
||
pageNo: pageNo.value,
|
||
pageSize: pageSize.value,
|
||
medicalDateTime: [
|
||
`${formatDate(startDate)} 00:00:00`,
|
||
`${formatDate(endDate)} 23:59:59`
|
||
]
|
||
}
|
||
|
||
const res = await PatientApi.getPatientPage(params)
|
||
originalPatients.value = res.list
|
||
patients.value = res.list
|
||
total.value = res.total
|
||
|
||
// 如果没有查询到患者，清除右侧详情
|
||
if (!res.list || res.list.length === 0) {
|
||
selectedPatient.value = null
|
||
reportData.value = {
|
||
medicalSn: '',
|
||
cardId: '',
|
||
pName: '',
|
||
gender: '',
|
||
birthday: '',
|
||
nationality: '',
|
||
nation: '',
|
||
race: '',
|
||
phoneNum: '',
|
||
status: 0,
|
||
reportType: '',
|
||
medicalDateTime: '',
|
||
chargeType: '',
|
||
totalPrice: 0,
|
||
headPicUrl: '',
|
||
summaryResult: '',
|
||
auditor: '',
|
||
auditorTime: ''
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('按日期获取患者列表失败:', error)
|
||
message.error('获取患者列表失败')
|
||
}
|
||
}
|
||
|
||
// 修改处理时间周期切换的函数
|
||
const handlePeriodChange = (period) => {
|
||
selectedPeriod.value = period
|
||
|
||
// 清除选中状态
|
||
selectedPatient.value = null
|
||
|
||
const today = new Date()
|
||
let startDate, endDate
|
||
|
||
switch (period) {
|
||
case 'today':
|
||
startDate = new Date(today.setHours(0, 0, 0, 0))
|
||
endDate = new Date(today.setHours(23, 59, 59, 999))
|
||
customDateRange.value = [startDate, endDate]
|
||
showDatePicker.value = false
|
||
fetchPatientsByDate()
|
||
break
|
||
|
||
case 'week':
|
||
startDate = new Date(today)
|
||
startDate.setDate(today.getDate() - today.getDay()) // 本周开始
|
||
endDate = new Date(today)
|
||
endDate.setDate(startDate.getDate() + 6) // 本周结束
|
||
customDateRange.value = [startDate, endDate]
|
||
showDatePicker.value = false
|
||
fetchPatientsByDate()
|
||
break
|
||
|
||
case 'month':
|
||
startDate = new Date(today.getFullYear(), today.getMonth(), 1)
|
||
endDate = new Date(today.getFullYear(), today.getMonth() + 1, 0)
|
||
customDateRange.value = [startDate, endDate]
|
||
showDatePicker.value = false
|
||
fetchPatientsByDate()
|
||
break
|
||
|
||
case 'custom':
|
||
showDatePicker.value = !showDatePicker.value
|
||
patients.value = [] // 清空患者列表
|
||
customDateRange.value = [] // 清空日期范围
|
||
break
|
||
|
||
case 'reset':
|
||
selectedPeriod.value = 'today'
|
||
const todayStart = new Date(today.setHours(0, 0, 0, 0))
|
||
const todayEnd = new Date(today.setHours(23, 59, 59, 999))
|
||
customDateRange.value = [todayStart, todayEnd]
|
||
showDatePicker.value = false
|
||
fetchPatientsByDate()
|
||
break
|
||
}
|
||
}
|
||
|
||
// 修改日期格式化函数，确保格式正确
|
||
const formatDate = (date) => {
|
||
if (!date) return ''
|
||
const d = new Date(date)
|
||
const year = d.getFullYear()
|
||
const month = String(d.getMonth() + 1).padStart(2, '0')
|
||
const day = String(d.getDate()).padStart(2, '0')
|
||
return `${year}-${month}-${day}`
|
||
}
|
||
|
||
// 修改日期搜索处理函数
|
||
const handleDateSearch = () => {
|
||
// 清除选中状态
|
||
selectedPatient.value = null
|
||
|
||
if (customDateRange.value && customDateRange.value.length === 2) {
|
||
fetchPatientsByDate()
|
||
} else {
|
||
message.warning('请选择日期范围')
|
||
}
|
||
}
|
||
|
||
// 添加格式化后的检查日期计算属性
|
||
const formattedMedicalDateTime = computed(() => {
|
||
if (!reportData.value.medicalDateTime) return ''
|
||
const date = new Date(reportData.value.medicalDateTime)
|
||
return date.toLocaleDateString('zh-CN', {
|
||
year: 'numeric',
|
||
month: '2-digit',
|
||
day: '2-digit'
|
||
}).replace(/\//g, '-')
|
||
})
|
||
|
||
const age = computed(() => {
|
||
if (!reportData.value.birthday || !Array.isArray(reportData.value.birthday)) return ''
|
||
|
||
const [year, month, day] = reportData.value.birthday
|
||
const birthDate = new Date(year, month - 1, day) // 注意月份要减1，因为JS中月份从0开始
|
||
const today = new Date()
|
||
let age = today.getFullYear() - birthDate.getFullYear()
|
||
const monthDiff = today.getMonth() - birthDate.getMonth()
|
||
|
||
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
|
||
age--
|
||
}
|
||
|
||
return age
|
||
})
|
||
|
||
// 添加选中患者的状态
|
||
const selectedPatient = ref(null)
|
||
|
||
// 添加用户信息的响应式引用
|
||
const user = ref(null)
|
||
|
||
// 加载数据
|
||
const loadData = async () => {
|
||
reportData.value = await PatientApi.getPatient(1)
|
||
console.log(reportData.value.birthday)
|
||
}
|
||
|
||
// 添加搜索处理函数
|
||
const handleSearch = () => {
|
||
if (!searchQuery.value) {
|
||
patients.value = originalPatients.value
|
||
return
|
||
}
|
||
|
||
const query = searchQuery.value.toLowerCase()
|
||
patients.value = originalPatients.value.filter(patient =>
|
||
patient.pname.toLowerCase().includes(query) ||
|
||
patient.medicalSn.toLowerCase().includes(query)
|
||
)
|
||
}
|
||
|
||
// 修改判断项目是否禁用的方法
|
||
const isItemDisabled = (item) => {
|
||
// 使用 itemStatus 判断：2 表示放弃
|
||
return item.itemStatus === '2'
|
||
}
|
||
|
||
// 修改操作处理函数
|
||
const handleOperation = async ({ type, item }) => {
|
||
switch (type) {
|
||
case 'positive':
|
||
if (isItemDisabled(item)) {
|
||
ElMessage.warning('已弃检的项目不能修改')
|
||
return
|
||
}
|
||
item.positive = '阳性'
|
||
break
|
||
case 'negative':
|
||
if (isItemDisabled(item)) {
|
||
ElMessage.warning('已弃检的项目不能修改')
|
||
return
|
||
}
|
||
item.positive = '阴性'
|
||
break
|
||
case 'abandon':
|
||
// 如果当前是弃检状态,则恢复为正常状态
|
||
if (item.itemStatus === '2') {
|
||
item.itemStatus = '0' // 恢复为未检状态
|
||
ElMessage.success('已恢复正常状态')
|
||
return
|
||
}
|
||
|
||
// 如果是正常状态,则确认是否弃检
|
||
ElMessageBox.confirm(
|
||
'确定要弃检该项目吗？弃检后将无法编辑该项目。',
|
||
'警告',
|
||
{
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
}
|
||
).then(() => {
|
||
item.itemStatus = '2' // 设置弃检状态
|
||
ElMessage.success('已设置为弃检')
|
||
}).catch(() => {
|
||
ElMessage.info('已取消弃检')
|
||
})
|
||
break
|
||
}
|
||
}
|
||
|
||
// 修改结果变化处理函数
|
||
const handleResultChange = (item) => {
|
||
if (isItemDisabled(item)) {
|
||
ElMessage.warning('已弃检的项目不能修改')
|
||
return
|
||
}
|
||
|
||
item.itemStatus = '1' // 设置为已检状态
|
||
|
||
const value = parseFloat(item.value)
|
||
const [low, high] = item.reference.split('-').map(Number)
|
||
|
||
item.note = getStatusNote({ itemResult: value, lowValue: low, highValue: high })
|
||
item.risk = getRiskLevel({ itemResult: value, lowValue: low, highValue: high })
|
||
item.status = getRowStatus({ itemResult: value, lowValue: low, highValue: high })
|
||
}
|
||
|
||
// 修改保存结果方法
|
||
const handleSaveResults = async () => {
|
||
try {
|
||
// 先获取用户信息
|
||
const userProfile = await getUserProfile()
|
||
user.value = userProfile
|
||
|
||
const updatedItems = Object.values(examItems.value).flatMap(sectionItems =>
|
||
sectionItems.map(item => ({
|
||
id: item.id,
|
||
itemResult: item.value || '',
|
||
positive: item.positive === '阳性' ? '1' : '0',
|
||
analyse: examConclusion.value,
|
||
inspectdoctor: user.value?.nickname || '',
|
||
itemStatus: item.itemStatus || '1', // 包含弃检状态
|
||
inspecttime: new Date().toISOString()
|
||
}))
|
||
)
|
||
|
||
console.log('发送的数据:', updatedItems)
|
||
await PatientitemsApi.updatePatientitemsBatch(updatedItems)
|
||
message.success('保存成功')
|
||
} catch (error) {
|
||
console.error('保存失败:', error)
|
||
message.error(`保存失败: ${error.message}`)
|
||
}
|
||
}
|
||
|
||
// 添加分页处理函数
|
||
const handleCurrentChange = (val) => {
|
||
pageNo.value = val
|
||
fetchPatientsByDate()
|
||
}
|
||
|
||
// 添加签名加载错误处理
|
||
const handleSignatureError = (e) => {
|
||
e.target.style.display = 'none'
|
||
console.warn('医生签名图片加载失败')
|
||
}
|
||
|
||
// 添加缓存清理函数
|
||
const clearPatientCache = () => {
|
||
patientDataCache.value.clear()
|
||
}
|
||
|
||
// 在组件卸载时清理缓存
|
||
onBeforeUnmount(() => {
|
||
clearPatientCache()
|
||
})
|
||
|
||
// 添加判断是否为影像类检查的计算属性
|
||
const isImageExam = computed(() => {
|
||
const items = currentExamItems.value || []
|
||
return items.some(item => {
|
||
const itemName = (item.name || '').toLowerCase()
|
||
return (
|
||
itemName.includes('ct') ||
|
||
itemName.includes('mri') ||
|
||
itemName.includes('超声') ||
|
||
itemName.includes('x线') ||
|
||
itemName.includes('心电图') ||
|
||
itemName.includes('影像') ||
|
||
itemName.includes('胸片') ||
|
||
itemName.includes('内镜') ||
|
||
itemName.includes('放射') ||
|
||
itemName.includes('b超') ||
|
||
itemName.includes('彩超') ||
|
||
itemName.includes('心超')
|
||
)
|
||
})
|
||
})
|
||
|
||
</script>
|
||
|
||
<style scoped>
|
||
.medical-report {
|
||
display: flex;
|
||
height: 83vh;
|
||
min-height: 600px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.patient-list {
|
||
width: 280px;
|
||
background: #fff;
|
||
border-right: 1px solid #e6e6e6;
|
||
}
|
||
|
||
.list-header {
|
||
padding: 0;
|
||
}
|
||
|
||
.header-title {
|
||
font-size: 14px;
|
||
background: #fff;
|
||
border-bottom: 1px solid #fff;
|
||
color: #333;
|
||
}
|
||
|
||
.filter-options {
|
||
padding: 10px 15px;
|
||
border-bottom: 1px solid #e6e6e6;
|
||
}
|
||
|
||
.radio-label {
|
||
margin-right: 20px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
color: #606266;
|
||
}
|
||
|
||
.radio-label input[type="radio"] {
|
||
margin-right: 4px;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.view-options {
|
||
padding: 10px 15px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
border-bottom: 1px solid #e6e6e6;
|
||
}
|
||
|
||
.view-buttons {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
|
||
.view-btn {
|
||
padding: 5px 12px;
|
||
border: none;
|
||
background: none;
|
||
cursor: pointer;
|
||
font-size: 13px;
|
||
color: #606266;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.view-btn:hover {
|
||
color: #409EFF;
|
||
background: #ecf5ff;
|
||
}
|
||
|
||
.view-btn.active {
|
||
color: #409EFF;
|
||
background: #ecf5ff;
|
||
}
|
||
|
||
.search-box {
|
||
padding: 10px 15px;
|
||
position: relative;
|
||
border-bottom: 1px solid #e6e6e6;
|
||
}
|
||
|
||
.search-box input {
|
||
width: 100%;
|
||
padding: 8px 30px 8px 10px;
|
||
border: 1px solid #dcdfe6;
|
||
border-radius: 4px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.search-box input:focus {
|
||
border-color: #409EFF;
|
||
outline: none;
|
||
}
|
||
|
||
.search-icon {
|
||
position: absolute;
|
||
right: 25px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
color: #c0c4cc;
|
||
}
|
||
|
||
.patient-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 12px 15px;
|
||
border-bottom: 1px solid #e6e6e6;
|
||
}
|
||
|
||
.report-content {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
background: #fff;
|
||
}
|
||
|
||
.main-content {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 20px;
|
||
padding-bottom: 60px;
|
||
}
|
||
|
||
.progress-nav {
|
||
display: flex;
|
||
margin-bottom: 20px;
|
||
position: relative;
|
||
}
|
||
|
||
.nav-item {
|
||
position: relative;
|
||
padding: 8px 40px;
|
||
background: #E4E7ED;
|
||
color: #606266;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-right: 4px;
|
||
}
|
||
|
||
.nav-item:after {
|
||
content: '';
|
||
position: absolute;
|
||
right: -20px;
|
||
top: 0;
|
||
border-left: 20px solid #E4E7ED;
|
||
border-top: 18px solid transparent;
|
||
border-bottom: 18px solid transparent;
|
||
z-index: 1;
|
||
}
|
||
|
||
.nav-item.active {
|
||
background: #409EFF;
|
||
color: white;
|
||
}
|
||
|
||
.nav-item.active:after {
|
||
border-left-color: #409EFF;
|
||
}
|
||
|
||
.basic-info {
|
||
display: flex;
|
||
gap: 20px;
|
||
padding: 20px;
|
||
background: #F8F9FA;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.photo-box {
|
||
width: 120px;
|
||
height: 160px;
|
||
background: #fff;
|
||
border: 1px dashed #dcdfe6;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.no-photo {
|
||
color: #909399;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.photo {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.info-grid {
|
||
flex: 1;
|
||
}
|
||
|
||
.info-row {
|
||
display: flex;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.info-row:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.info-item {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
min-width: 0;
|
||
}
|
||
|
||
.info-item label {
|
||
color: #606266;
|
||
margin-right: 8px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.info-item span {
|
||
color: #333;
|
||
flex: 1;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.full-width {
|
||
width: 100%;
|
||
}
|
||
|
||
.full-width .info-item {
|
||
flex: none;
|
||
width: 100%;
|
||
}
|
||
|
||
.full-width .info-item span {
|
||
flex: 1;
|
||
}
|
||
|
||
|
||
|
||
.exam-tabs {
|
||
display: flex;
|
||
}
|
||
|
||
.tab-item {
|
||
position: relative;
|
||
padding: 8px 20px;
|
||
margin-right: -1px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
border-radius: 4px;
|
||
background: #fff;
|
||
color: #606266;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.tab-indicator {
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.tab-item.active {
|
||
background: #f5f7fa;
|
||
border-bottom-color: transparent;
|
||
border: 1px solid #409EFF;
|
||
border-radius: 4px;
|
||
font-weight: 500;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.result-table {
|
||
margin: 20px 0;
|
||
border: 1px solid #ebeef5;
|
||
border-radius: 4px;
|
||
height: 520px; /* 固定高度，与Charge.vue保持一致 */
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: #fff;
|
||
}
|
||
|
||
/* 表头样式 */
|
||
.table-header {
|
||
background: #f5f7fa;
|
||
border-bottom: 1px solid #ebeef5;
|
||
}
|
||
|
||
.header-row {
|
||
display: flex;
|
||
width: 100%;
|
||
}
|
||
|
||
.header-cell {
|
||
padding: 12px 8px;
|
||
font-weight: 500;
|
||
color: #606266;
|
||
text-align: left;
|
||
border-right: 1px solid #ebeef5;
|
||
}
|
||
|
||
/* 表格主体样式 */
|
||
.table-body {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
.table-row {
|
||
display: flex;
|
||
border-bottom: 1px solid #ebeef5;
|
||
}
|
||
|
||
.table-cell {
|
||
padding: 12px 8px;
|
||
border-right: 1px solid #ebeef5;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 输入框和下拉框样式 */
|
||
.cell-input,
|
||
.cell-select {
|
||
width: 100%;
|
||
border: none;
|
||
background: transparent;
|
||
outline: none;
|
||
padding: 0;
|
||
}
|
||
|
||
/* 警告和危险行样式 */
|
||
.danger-row {
|
||
background: #fc00262d;
|
||
}
|
||
|
||
/* 美化滚动条 */
|
||
.table-body::-webkit-scrollbar {
|
||
width: 6px;
|
||
height: 6px;
|
||
}
|
||
|
||
.table-body::-webkit-scrollbar-thumb {
|
||
background: #c0c4cc;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.table-body::-webkit-scrollbar-track {
|
||
background: #f5f7fa;
|
||
}
|
||
|
||
/* 修改体检小结样式 */
|
||
.summary-section {
|
||
margin-top: 20px;
|
||
padding: 20px;
|
||
background: #f8f9fa;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #303133;
|
||
margin-bottom: 15px;
|
||
padding-left: 10px;
|
||
border-left: 4px solid #409eff;
|
||
}
|
||
|
||
.summary-textarea {
|
||
width: 100%;
|
||
height: 120px; /* 调整文本框高度 */
|
||
padding: 12px;
|
||
border: 1px solid #dcdfe6;
|
||
border-radius: 4px;
|
||
resize: none;
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
background: #fff;
|
||
}
|
||
|
||
.summary-textarea:focus {
|
||
outline: none;
|
||
border-color: #409EFF;
|
||
}
|
||
|
||
.action-footer {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 10px 20px;
|
||
background: #fff;
|
||
border-top: 1px solid #ebeef5;
|
||
z-index: 10;
|
||
}
|
||
|
||
.left-section {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20px;
|
||
}
|
||
|
||
.signature {
|
||
height: 30px;
|
||
margin: 0 10px;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.right-section {
|
||
display: flex;
|
||
gap: 10px;
|
||
}
|
||
|
||
.action-btn {
|
||
padding: 6px 16px;
|
||
border: none;
|
||
border-radius: 4px;
|
||
background: #40B6FF;
|
||
color: white;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.action-btn:hover {
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.action-btn.primary {
|
||
background: #40B6FF;
|
||
}
|
||
|
||
.action-buttons {
|
||
display: flex;
|
||
gap: 15px;
|
||
}
|
||
|
||
.dialog-footer {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
margin-top: 20px;
|
||
gap: 10px;
|
||
}
|
||
|
||
.date-picker-container {
|
||
margin-top: 10px;
|
||
background: #fff;
|
||
padding: 10px 0;
|
||
width: 100%;
|
||
}
|
||
|
||
.date-picker-wrapper {
|
||
display: flex;
|
||
gap: 10px;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.search-button {
|
||
width: 100%;
|
||
margin-top: 8px;
|
||
height: 32px;
|
||
}
|
||
|
||
.patient-info {
|
||
display: flex;
|
||
gap: 10px;
|
||
align-items: center;
|
||
}
|
||
|
||
.medical-sn {
|
||
color: #909399;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.list-content {
|
||
height: calc(100% - 180px);
|
||
overflow-y: auto;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* 添加空状态样式 */
|
||
.empty-content {
|
||
flex: 1;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: #fff;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
/* 添加选中状态样式 */
|
||
.patient-item.active {
|
||
background-color: #ecf5ff;
|
||
}
|
||
|
||
.patient-item:hover {
|
||
background-color: #f5f7fa;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.result-table td input {
|
||
width: 100%;
|
||
padding: 4px 8px;
|
||
border: none;
|
||
background: transparent;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.result-table td {
|
||
padding: 8px;
|
||
border: 1px solid #ebeef5;
|
||
text-align: left;
|
||
min-width: 100px; /* 设置最小宽度 */
|
||
}
|
||
|
||
/* 为明细结果列设置固定宽度 */
|
||
.result-table th:nth-child(3),
|
||
.result-table td:nth-child(3) {
|
||
width: 200px; /* 可以根据需要调整宽度 */
|
||
}
|
||
|
||
/* 修改分页容器样式 */
|
||
.pagination-container {
|
||
padding: 8px;
|
||
background: #fff;
|
||
border-top: 1px solid #e6e6e6;
|
||
margin-top: auto;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* 自定义分页组件样式 */
|
||
:deep(.el-pagination) {
|
||
font-size: 12px;
|
||
justify-content: flex-start;
|
||
width: 100%;
|
||
}
|
||
|
||
:deep(.el-pagination .el-pagination__total) {
|
||
margin-right: 8px;
|
||
}
|
||
|
||
:deep(.el-pagination .el-pagination__jump) {
|
||
margin-left: 8px;
|
||
}
|
||
|
||
:deep(.el-pagination .el-input__inner) {
|
||
height: 24px;
|
||
line-height: 24px;
|
||
}
|
||
|
||
:deep(.el-pagination .el-pagination__editor.el-input) {
|
||
width: 50px;
|
||
}
|
||
|
||
.no-signature {
|
||
color: #909399;
|
||
font-size: 14px;
|
||
margin: 0 10px;
|
||
}
|
||
|
||
/* 添加图片展示区域样式 */
|
||
.result-table {
|
||
flex: 1;
|
||
overflow: auto;
|
||
background: #fff;
|
||
}
|
||
|
||
/* 确保图片展示组件能够正确填充空间 */
|
||
:deep(.exam-images) {
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* 美化滚动条样式 */
|
||
.result-table::-webkit-scrollbar {
|
||
width: 6px;
|
||
height: 6px;
|
||
}
|
||
|
||
.result-table::-webkit-scrollbar-thumb {
|
||
background: #c0c4cc;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.result-table::-webkit-scrollbar-track {
|
||
background: #f5f7fa;
|
||
}
|
||
|
||
/* 添加文字按钮样式 */
|
||
.text-button {
|
||
cursor: pointer;
|
||
font-size: 15px;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.text-button.danger {
|
||
color: #F56C6C;
|
||
}
|
||
|
||
.text-button.danger:hover {
|
||
color: #f78989;
|
||
}
|
||
|
||
.positive-indicator {
|
||
margin-left: 8px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.table-cell {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
|
||
/* 添加下拉菜单相关样式 */
|
||
.el-dropdown-link {
|
||
cursor: pointer;
|
||
color: #409EFF;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.el-dropdown-link:hover {
|
||
color: #66b1ff;
|
||
}
|
||
|
||
:deep(.el-dropdown-menu__item.is-active) {
|
||
color: #409EFF;
|
||
background-color: #ecf5ff;
|
||
}
|
||
|
||
:deep(.el-dropdown-menu__item--divided) {
|
||
margin-top: 6px;
|
||
border-top: 1px solid #ebeef5;
|
||
}
|
||
|
||
:deep(.el-dropdown-menu__item--divided:before) {
|
||
height: 1px;
|
||
margin: 0 -20px;
|
||
background-color: #ebeef5;
|
||
}
|
||
|
||
.negative-text {
|
||
color: #333;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 修改下拉按钮样式以匹配 baseUI */
|
||
:deep(.el-dropdown) {
|
||
margin-right: 8px;
|
||
}
|
||
|
||
:deep(.el-button) {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 4px;
|
||
}
|
||
|
||
/* 添加禁用状态的样式 */
|
||
.cell-input:disabled {
|
||
background-color: #ebeef5;
|
||
cursor: not-allowed;
|
||
color: #606266;
|
||
}
|
||
|
||
/* 修改弃检行的样式判断 */
|
||
.table-row[data-item-status="2"] {
|
||
background-color: #ebeef5;
|
||
color: #606266;
|
||
}
|
||
|
||
/* 修改弃检状态下的下拉菜单样式判断 */
|
||
.table-row[data-item-status="2"] .el-dropdown {
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* 固定列样式 */
|
||
.fixed-cell {
|
||
position: sticky;
|
||
background: #fff;
|
||
z-index: 1;
|
||
}
|
||
|
||
.table-row .fixed-cell:nth-child(1) {
|
||
left: 0;
|
||
}
|
||
|
||
.table-row .fixed-cell:nth-child(2) {
|
||
left: 5%;
|
||
}
|
||
|
||
</style> |