80
openhis-ui-vue3/src/components/patientBar/components/BallTag.vue
Executable file
80
openhis-ui-vue3/src/components/patientBar/components/BallTag.vue
Executable file
@@ -0,0 +1,80 @@
|
||||
<!--
|
||||
* @Author: sjjh
|
||||
* @Date: 2025-04-09 17:53:29
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="ball-tag" v-show="tagId" :style="{ backgroundColor: _tag?.color }">
|
||||
{{ _tag?.name }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {computed} from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
tagId: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
})
|
||||
const tagList = [
|
||||
{
|
||||
id: '危',
|
||||
name: '危',
|
||||
color: '#ba7bc8',
|
||||
},
|
||||
{
|
||||
id: '径',
|
||||
name: '径',
|
||||
color: '#57bfe0',
|
||||
},
|
||||
{
|
||||
id: '术',
|
||||
name: '术',
|
||||
color: '#51ccc2',
|
||||
},
|
||||
{
|
||||
id: '预警',
|
||||
name: '￥',
|
||||
color: '#ee9038',
|
||||
},
|
||||
{
|
||||
id: '欠',
|
||||
name: '￥',
|
||||
color: '#E95657',
|
||||
},
|
||||
{
|
||||
id: '敏',
|
||||
name: '敏',
|
||||
color: '#5585e3',
|
||||
},
|
||||
{
|
||||
id: '重',
|
||||
name: '重',
|
||||
color: '#E95657',
|
||||
},
|
||||
]
|
||||
|
||||
const _tag = computed(() => {
|
||||
if (!props.tagId) {
|
||||
return tagList[0]
|
||||
} else {
|
||||
return tagList.find((item) => item.id == props.tagId)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ball-tag {
|
||||
display: inline-flex;
|
||||
flex-shrink: 0; // 防止子元素缩小
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font-size: 13px;
|
||||
border-radius: 20px;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
427
openhis-ui-vue3/src/components/patientBar/inPatientBarDoctorFold.vue
Executable file
427
openhis-ui-vue3/src/components/patientBar/inPatientBarDoctorFold.vue
Executable file
@@ -0,0 +1,427 @@
|
||||
<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} 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>
|
||||
Reference in New Issue
Block a user