版本更新
This commit is contained in:
@@ -0,0 +1,397 @@
|
||||
<!--
|
||||
* @Author: sjjh
|
||||
* @Date: 2025-04-07 20:42:45
|
||||
* @Description:住院患者信息,给医生用,带折叠
|
||||
-->
|
||||
<template>
|
||||
<div class="inPatientBarDoctorFold-container">
|
||||
<div class="basic_info">
|
||||
<div class="patient-header white-bg">
|
||||
<div class="select_wrapper_div">
|
||||
<b class="bedNumber" style="margin-left: 12px">{{ patientInfo?.bedName }}</b>
|
||||
<label class="content-text-color" style="margin-left: 12px; color: #a15209">
|
||||
{{ patientInfo?.patientName }}
|
||||
<span class="sex-age"> {{ patientInfo?.sexName }}/{{ patientInfo?.age }} </span>
|
||||
</label>
|
||||
|
||||
<div style="display: flex; margin-left: 8px">
|
||||
<!-- 状态展示// TODO 后端给状态,前段 -->
|
||||
<ball-tag
|
||||
style="margin-right: 4px"
|
||||
v-for="item in patientInfo?.list"
|
||||
:key="item"
|
||||
:tagId="item"
|
||||
></ball-tag>
|
||||
</div>
|
||||
<div
|
||||
class="gray-border"
|
||||
v-show="patientInfo?.feeTypeName && patientInfo?.feeTypeName !== ''"
|
||||
>
|
||||
{{ patientInfo?.feeTypeName }}
|
||||
</div>
|
||||
<label style="margin-left: 24px">
|
||||
<span class="label-text-color">住院:</span>
|
||||
<span class="content-text-color">{{ patientInfo?.inHospitalDays + '天' }}</span>
|
||||
</label>
|
||||
<label style="margin-left: 24px">
|
||||
<span class="label-text-color">入科:</span>
|
||||
<span class="content-text-color">{{ patientInfo?.inDeptDate }}</span>
|
||||
</label>
|
||||
<label style="margin-left: 24px">
|
||||
<span class="label-text-color">入院时间:</span>
|
||||
<span class="content-text-color">{{ patientInfo?.inHospitalTime }}</span>
|
||||
</label>
|
||||
<label style="margin-left: 24px">
|
||||
<span class="label-text-color">住院号:{{ patientInfo?.busNo }}</span>
|
||||
</label>
|
||||
<svg-icon icon-class="hipCopy" height="20px" width="20px" class="copy-svg" />
|
||||
<label style="margin-left: 30px">
|
||||
<span class="label-text-color">诊断:</span>
|
||||
<span class="content-text-color">{{ patientInfo?.regDiagnosisName }}</span>
|
||||
</label>
|
||||
<!-- <div style="margin-left: auto">
|
||||
<el-icon v-if="expand" @click="toggleExpand"><ArrowUpBold /></el-icon>
|
||||
<el-icon v-else @click="toggleExpand"><ArrowDownBold /></el-icon>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="expand" class="expand_more">
|
||||
<div style="background-color: #ffffff">
|
||||
<div style="margin-top: -10px">
|
||||
<label style="font-size: 14px">
|
||||
<span class="primary-text">过敏:</span>
|
||||
<span class="primary-text">{{ patientInfo?.allergies || '无过敏史' }}</span>
|
||||
</label>
|
||||
<label style="font-size: 14px; margin-left: 32px" v-show="patientInfo?.insuplcAdmdvsName">
|
||||
<span class="primary-text">医保统筹区:</span>
|
||||
<span class="primary-text">{{ patientInfo?.insuplcAdmdvsName }}</span>
|
||||
</label>
|
||||
|
||||
<label style="font-size: 14px; margin-left: 32px" v-show="patientInfo?.ciType">
|
||||
<span class="primary-text">商保信息:</span>
|
||||
<span class="primary-text">{{ patientInfo?.ciType }}</span>
|
||||
</label>
|
||||
<div style="display: flex; flex-wrap: nowrap; margin-top: 8px; white-space: nowrap">
|
||||
<div
|
||||
class="blue-bg"
|
||||
style="background-color: #f1faff; flex-shrink: 0; min-width: fit-content"
|
||||
>
|
||||
<span class="content-text-color">
|
||||
{{
|
||||
patientInfo?.height && patientInfo?.weight
|
||||
? `${patientInfo?.height}cm/${patientInfo?.weight}kg`
|
||||
: '身高/体重'
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="blue-bg"
|
||||
style="
|
||||
margin-left: 24px;
|
||||
background-color: #f1faff;
|
||||
flex-shrink: 0;
|
||||
min-width: fit-content;
|
||||
"
|
||||
v-show="patientInfo?.postoperativeDays"
|
||||
>
|
||||
<span class="content-text-color">术后{{ patientInfo?.postoperativeDays }}天</span>
|
||||
</div>
|
||||
<div
|
||||
class="blue-bg"
|
||||
style="
|
||||
margin-left: 16px;
|
||||
background-color: #f1faff;
|
||||
flex-shrink: 0;
|
||||
min-width: fit-content;
|
||||
"
|
||||
v-show="patientInfo?.poorTypeName"
|
||||
>
|
||||
<span class="label-text-color">贫困类型:</span>
|
||||
<span class="content-text-color" style="margin-left: 4px">{{
|
||||
patientInfo?.poorTypeName
|
||||
}}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="blue-bg"
|
||||
style="
|
||||
margin-left: 16px;
|
||||
background-color: #f1faff;
|
||||
flex-shrink: 0;
|
||||
min-width: fit-content;
|
||||
"
|
||||
v-show="patientInfo?.pathwayName"
|
||||
>
|
||||
<span class="label-text-color">路径情况:</span>
|
||||
<span class="content-text-color" style="margin-left: 4px">{{
|
||||
patientInfo?.pathwayName
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="background-color: #ffffff">
|
||||
<div style="margin-top: -10px">
|
||||
<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">{{
|
||||
patientInfo?.totalAmount ? patientInfo?.totalAmount : 0
|
||||
}}</b>
|
||||
</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">{{
|
||||
patientInfo?.prepayAmount ? patientInfo?.prepayAmount : 0
|
||||
}}</b>
|
||||
</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">{{
|
||||
patientInfo?.balance ? patientInfo?.balance : 0
|
||||
}}</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hip-dividers></hip-dividers>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { computed, onMounted, ref, watch } from 'vue';
|
||||
import BallTag from './components/BallTag.vue';
|
||||
import { patientInfo } from '@/views/inpatientDoctor/home/store/patient.js';
|
||||
// import { ElMessage } from 'element-plus'
|
||||
|
||||
const expand = ref(false);
|
||||
|
||||
// 定义一个布尔变量来控制是否显示 hip-dividers
|
||||
const showDividers = ref(true);
|
||||
|
||||
// 示例方法:切换显示状态
|
||||
const toggleDividers = () => {
|
||||
showDividers.value = !showDividers.value;
|
||||
};
|
||||
const iconClass = ref('hipBarDown');
|
||||
|
||||
// 切换展开状态的方法
|
||||
function toggleExpand() {
|
||||
expand.value = !expand.value;
|
||||
iconClass.value = expand.value ? 'hipBarUp' : 'hipBarDown';
|
||||
toggleDividers();
|
||||
}
|
||||
|
||||
const fetchPatientInfoById = async (patientId) => {
|
||||
// 查询患者信息
|
||||
console.log(patientId);
|
||||
};
|
||||
|
||||
const props = defineProps({
|
||||
visitCode: '',
|
||||
});
|
||||
watch(
|
||||
() => props.visitCode,
|
||||
(val) => {
|
||||
if (val !== null && val !== '') {
|
||||
fetchPatientInfoById(val);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
defineOptions({
|
||||
name: 'NurserDoctorPatientBarminimal',
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inPatientBarDoctorFold-container {
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
.basic_info {
|
||||
height: 43px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
/* expand_more */
|
||||
.expand_more {
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 8px;
|
||||
}
|
||||
.patient-header {
|
||||
width: 100%;
|
||||
padding: 6px 0;
|
||||
font-size: 13px;
|
||||
|
||||
.sex-age {
|
||||
margin-left: 20px;
|
||||
color: var(--hip-color-text-description);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.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: 0px 8px;
|
||||
}
|
||||
|
||||
.copy-svg {
|
||||
fill: var(--hip-color-primary);
|
||||
cursor: pointer;
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.size-15 {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.bedNumber {
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.primary-text {
|
||||
color: var(--hip-color-primary);
|
||||
}
|
||||
|
||||
.flex-between {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.item-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.money-content {
|
||||
color: #ff8616;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.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: 0px;
|
||||
}
|
||||
|
||||
.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-left: 8px;
|
||||
padding-right: 8px;
|
||||
border-radius: 4px; /*圆角*/
|
||||
}
|
||||
|
||||
.label-text-color {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.content-text-color {
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user