427 lines
11 KiB
Vue
427 lines
11 KiB
Vue
<template>
|
||
<div class="inPatientBarDoctorFold-container">
|
||
<div class="basic_info">
|
||
<div class="patient-header white-bg">
|
||
<div class="select_wrapper_div">
|
||
<b class="bedNumber">{{ patientInfo?.bedName || '未分床' }}</b>
|
||
<label class="patient-name">
|
||
{{ patientInfo?.patientName || '-' }}
|
||
<span class="sex-age">
|
||
{{ formatSexAge(patientInfo?.sexName, patientInfo?.age) }}
|
||
</span>
|
||
</label>
|
||
<div class="tag-list" v-if="patientInfo?.list && patientInfo.list.length > 0">
|
||
<ball-tag
|
||
v-for="item in patientInfo.list"
|
||
:key="item"
|
||
:tagId="item"
|
||
class="tag-item"
|
||
></ball-tag>
|
||
</div>
|
||
<div class="gray-border" v-if="patientInfo?.feeTypeName">
|
||
{{ patientInfo.feeTypeName }}
|
||
</div>
|
||
<label class="info-label">
|
||
<span class="label-text-color">住院：</span>
|
||
<span class="content-text-color">{{ formatDays(patientInfo?.inHospitalDays) }}</span>
|
||
</label>
|
||
<label class="info-label" v-if="patientInfo?.inOrgTime">
|
||
<span class="label-text-color">入科：</span>
|
||
<span class="content-text-color">{{ patientInfo.inOrgTime }}</span>
|
||
</label>
|
||
<label class="info-label" v-if="patientInfo?.inHospitalTime">
|
||
<span class="label-text-color">入院时间：</span>
|
||
<span class="content-text-color">{{ patientInfo.inHospitalTime }}</span>
|
||
</label>
|
||
<label class="info-label" v-if="patientInfo?.busNo">
|
||
<span class="label-text-color">住院号：</span>
|
||
<span class="content-text-color">{{ patientInfo.busNo }}</span>
|
||
</label>
|
||
<label class="info-label diagnosis-label" v-if="patientInfo?.regDiagnosisName">
|
||
<span class="label-text-color">诊断：</span>
|
||
<span class="content-text-color">{{ patientInfo.regDiagnosisName }}</span>
|
||
</label>
|
||
<label class="info-label">
|
||
<span class="label-text-color">费用：</span>
|
||
<span class="content-text-color">{{ formatMoney(patientInfo?.totalAmount) }}</span>
|
||
</label>
|
||
<label class="info-label">
|
||
<span class="label-text-color">余额：</span>
|
||
<span class="content-text-color">{{ formatMoney(patientInfo?.balanceAmount) }}</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="expand" class="expand_more">
|
||
<div class="expand-content">
|
||
<div class="expand-section">
|
||
<label class="expand-label">
|
||
<span class="primary-text">过敏：</span>
|
||
<span class="primary-text">{{ patientInfo?.allergies || '无过敏史' }}</span>
|
||
</label>
|
||
<label class="expand-label" v-if="patientInfo?.insuplcAdmdvsName">
|
||
<span class="primary-text">医保统筹区：</span>
|
||
<span class="primary-text">{{ patientInfo.insuplcAdmdvsName }}</span>
|
||
</label>
|
||
<label class="expand-label" v-if="patientInfo?.ciType">
|
||
<span class="primary-text">商保信息：</span>
|
||
<span class="primary-text">{{ patientInfo.ciType }}</span>
|
||
</label>
|
||
<div class="info-tags">
|
||
<div class="blue-bg">
|
||
<span class="content-text-color">
|
||
{{ formatHeightWeight(patientInfo?.height, patientInfo?.weight) }}
|
||
</span>
|
||
</div>
|
||
<div class="blue-bg" v-if="patientInfo?.postoperativeDays">
|
||
<span class="content-text-color">术后{{ patientInfo.postoperativeDays }}天</span>
|
||
</div>
|
||
<div class="blue-bg" v-if="patientInfo?.poorTypeName">
|
||
<span class="label-text-color">贫困类型：</span>
|
||
<span class="content-text-color">{{ patientInfo.poorTypeName }}</span>
|
||
</div>
|
||
<div class="blue-bg" v-if="patientInfo?.pathwayName">
|
||
<span class="label-text-color">路径情况：</span>
|
||
<span class="content-text-color">{{ patientInfo.pathwayName }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="expand-content">
|
||
<div class="expand-section">
|
||
<div class="patient-board">
|
||
<div class="item-center">
|
||
<div class="line-block">
|
||
<div class="line-block-top">
|
||
<span class="label-text-color">科室：</span>
|
||
<span class="content-text-color">{{
|
||
patientInfo?.admissionDeptName || '-'
|
||
}}</span>
|
||
</div>
|
||
<div class="line-block-bottom">
|
||
<span class="label-text-color">病区：</span>
|
||
<span class="content-text-color">{{ patientInfo?.deptNurseName || '-' }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="line-block">
|
||
<div class="line-block-top">
|
||
<span class="label-text-color">主治医生：</span>
|
||
<span class="content-text-color">{{ patientInfo?.masterDoctorName || '-' }}</span>
|
||
</div>
|
||
<div class="line-block-bottom">
|
||
<span class="label-text-color">责任护士：</span>
|
||
<span class="content-text-color">{{ patientInfo?.masterNurseName || '-' }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="line-blockMoney">
|
||
<div class="line-blockMoney-top">
|
||
<span class="label-text-color">预交金</span>
|
||
</div>
|
||
<div class="line-blockMoney-bottom">
|
||
<b class="money-content size-15">{{ formatMoney(patientInfo?.prepayAmount) }}</b>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import { ref, watch } from 'vue';
|
||
import BallTag from './components/BallTag.vue';
|
||
import { patientInfo } from '@/views/inpatientDoctor/home/store/patient.js';
|
||
interface Props {
|
||
visitCode?: string;
|
||
}
|
||
|
||
const props = withDefaults(defineProps<Props>(), {
|
||
visitCode: '',
|
||
});
|
||
|
||
const expand = ref<boolean>(false);
|
||
|
||
// 格式化性别和年龄
|
||
const formatSexAge = (sexName?: string, age?: number | string): string => {
|
||
const sex = sexName || '';
|
||
const ageStr = age !== undefined && age !== null ? String(age) : '';
|
||
if (sex && ageStr) {
|
||
return `${sex}/${ageStr}`;
|
||
} else if (sex) {
|
||
return sex;
|
||
} else if (ageStr) {
|
||
return ageStr;
|
||
}
|
||
return '-';
|
||
};
|
||
|
||
// 格式化天数
|
||
const formatDays = (days?: number | string): string => {
|
||
if (days === undefined || days === null || days === '') {
|
||
return '-';
|
||
}
|
||
return `${days}天`;
|
||
};
|
||
|
||
// 格式化身高体重
|
||
const formatHeightWeight = (height?: number | string, weight?: number | string): string => {
|
||
if (height && weight) {
|
||
return `${height}cm/${weight}kg`;
|
||
}
|
||
return '身高/体重';
|
||
};
|
||
|
||
// 格式化金额
|
||
const formatMoney = (amount?: number | string): number => {
|
||
if (amount === undefined || amount === null || amount === '') {
|
||
return 0;
|
||
}
|
||
return Number(amount) || 0;
|
||
};
|
||
|
||
defineOptions({
|
||
name: 'NurserDoctorPatientBarminimal',
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.inPatientBarDoctorFold-container {
|
||
border-bottom: 1px solid #ebeef5;
|
||
background-color: #ffffff;
|
||
align-items: center;
|
||
.basic_info {
|
||
min-height: 44px;
|
||
padding: 0 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.expand_more {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 0 8px;
|
||
}
|
||
|
||
.expand-content {
|
||
background-color: #ffffff;
|
||
}
|
||
|
||
.expand-section {
|
||
margin-top: -10px;
|
||
padding: 8px 0;
|
||
}
|
||
|
||
.patient-header {
|
||
width: 100%;
|
||
padding: 6px 0;
|
||
font-size: 13px;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
|
||
.select_wrapper_div {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
width: 100%;
|
||
}
|
||
|
||
.bedNumber {
|
||
font-weight: bold;
|
||
font-size: 18px;
|
||
margin-left: 12px;
|
||
color: #1f2933;
|
||
}
|
||
|
||
.patient-name {
|
||
margin-left: 12px;
|
||
color: #a15209;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.sex-age {
|
||
margin-left: 8px;
|
||
color: var(--hip-color-text-description);
|
||
font-size: 14px;
|
||
font-weight: normal;
|
||
}
|
||
|
||
.tag-list {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 8px;
|
||
gap: 4px;
|
||
}
|
||
|
||
.tag-item {
|
||
margin-right: 4px;
|
||
}
|
||
|
||
.gray-border {
|
||
display: inline-flex;
|
||
color: var(--hip-color-text-description);
|
||
justify-content: center;
|
||
align-items: center;
|
||
border: 1px solid var(--hip-color-text-description);
|
||
border-radius: 20px;
|
||
padding: 0 8px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.info-label {
|
||
margin-left: 24px;
|
||
white-space: nowrap;
|
||
|
||
&:first-of-type {
|
||
margin-left: 0;
|
||
}
|
||
}
|
||
|
||
.diagnosis-label {
|
||
margin-left: 30px;
|
||
}
|
||
|
||
.copy-svg {
|
||
fill: var(--hip-color-primary);
|
||
cursor: pointer;
|
||
margin-left: 4px;
|
||
transition: opacity 0.2s;
|
||
|
||
&:hover {
|
||
opacity: 0.8;
|
||
}
|
||
}
|
||
}
|
||
|
||
.expand-label {
|
||
font-size: 14px;
|
||
margin-right: 32px;
|
||
white-space: nowrap;
|
||
|
||
&:first-child {
|
||
margin-right: 32px;
|
||
}
|
||
}
|
||
|
||
.info-tags {
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
margin-top: 8px;
|
||
white-space: nowrap;
|
||
gap: 16px;
|
||
}
|
||
|
||
.size-15 {
|
||
font-size: 15px;
|
||
}
|
||
|
||
.primary-text {
|
||
color: var(--hip-color-primary);
|
||
}
|
||
|
||
.item-center {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.patient-board {
|
||
margin-left: 20px;
|
||
|
||
.line-block {
|
||
position: relative;
|
||
min-width: 73px;
|
||
padding-left: 15px;
|
||
padding-right: 10px;
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
width: 1px;
|
||
height: 50%;
|
||
top: 25%;
|
||
left: 0;
|
||
background-color: #e1e1e1;
|
||
}
|
||
|
||
&-top {
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
&-bottom {
|
||
margin-top: 4px;
|
||
}
|
||
}
|
||
|
||
.line-blockMoney {
|
||
position: relative;
|
||
min-width: 73px;
|
||
padding-left: 15px;
|
||
padding-right: 10px;
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
width: 1px;
|
||
height: 50%;
|
||
top: 25%;
|
||
left: 0;
|
||
background-color: #e1e1e1;
|
||
}
|
||
|
||
&-top {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.money-content {
|
||
color: #ff8616;
|
||
font-size: 20px;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
:deep(.color-content) {
|
||
background-color: rgba(252, 252, 252, 0.8);
|
||
}
|
||
}
|
||
|
||
.white-bg {
|
||
background-color: #ffffff;
|
||
}
|
||
|
||
.blue-bg {
|
||
display: inline-flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-color: #f1faff;
|
||
padding: 4px 8px;
|
||
border-radius: 4px;
|
||
flex-shrink: 0;
|
||
min-width: fit-content;
|
||
white-space: nowrap;
|
||
|
||
.content-text-color {
|
||
margin-left: 0;
|
||
}
|
||
|
||
.label-text-color {
|
||
margin-right: 4px;
|
||
}
|
||
}
|
||
|
||
.label-text-color {
|
||
font-size: 14px;
|
||
color: #666666;
|
||
}
|
||
|
||
.content-text-color {
|
||
font-size: 14px;
|
||
color: #666666;
|
||
}
|
||
}
|
||
</style>
|