<template>
<div class="h-full flex flex-col patient-detail">
<DocNavBar title="居民详情" class="shrink-0">
<template #right>
<span class="text-primary" @click="() => addVisible = true">新增</span>
</template>
</DocNavBar>
<div class="grow flex flex-col" style="background: #f5f5f5;min-height: 0px;">
<div :class="['px-4 pt-4 doc-list-card resident-info shrink-0',
{'resident-info-collapsed': collapsed}]">
<div class="mb-4">
<span class="name mr-2">{{ residentInfo.residentName || '-' }}</span>
<span class="tag mr-2">{{ residentInfo.currentAge || '-' }}岁</span>
<span class="tag mr-2">{{ residentInfo.genderName || '-' }}</span>
<doc-icon type="doc-edit" class="text-primary" @click="toArchivesEdit"/>
</div>
<div class="flex flex-col" style="row-gap: .04rem;line-height: 1.5;">
<div>
<span class="label">身份证号</span>
<span>{{ $idCardHide(residentInfo.idCard) || '-' }}</span>
</div>
<div class="flex">
<span class="label shrink-0">人群标签</span>
<span class="grow text-wrap">{{ residentInfo.groupsArraysName || '-' }}</span>
</div>
<div>
<span class="label">联系电话</span>
<span>{{ $phoneHide(residentInfo.telephone) || '-' }}</span>
</div>
<!-- <div>
<span class="label">人群分类</span>
<span>{{ residentInfo.chronicCrowdName || '-' }}</span>
</div>
<div class="flex">
<span class="label">慢病标签</span>
<span>
<ChronicTag :list='residentInfo.chronicTagsArray' />
</span>
</div> -->
<div>
<span class="label">建档状态</span>
<span v-if="residentInfo.id">
<span v-if="!!residentInfo.residentsBaseDTO">已建档</span>
<span v-else style="color: #8C8C8C">未建档</span>
</span>
</div>
<div>
<span class="label">签约状态</span>
<span v-if="residentInfo.id">
<span v-if="!!residentInfo.signedInfoDTO">已签约</span>
<span v-else style="color: #8C8C8C">未签约</span>
</span>
</div>
</div>
<div :class="['text-center py-1 fold-btn', { 'fold-btn-collapsed': collapsed }]"
@click="() => collapsed = !collapsed">
<doc-icon type="doc-left-1" />
</div>
</div>
<van-tabs shrink v-model:active="activeTab" class="shrink-0 patient-detail-tabs">
<van-tab v-for="item in tabList" :key="item.id"
:title="item.name"></van-tab>
</van-tabs>
<div class="grow py-3 px-2" style="min-height: 0px;" v-if="residentInfo.id">
<ScreeningList v-if="activeTabItem.id === 'SCREENING'"/>
<GeneralList v-else-if="activeTabItem.id === 'CURRENCY'"/>
<ReferralList v-else-if="activeTabItem.id === 'REFERRAL'"/>
<ConsultationList v-else-if="activeTabItem.id === 'CONSULTATION'"/>
<DiseaseList v-else :diseaseName="activeTabItem.name" :diseaseType="activeTabItem.value"/>
</div>
<van-popup
v-model:show="addVisible"
position="bottom"
:style="{ height: '30%' }"
>
<div class="popup-bottom-panel">
<div class="p-4 text-16 flex items-center justify-between"
style="border-bottom: 1px solid #00000019;">
<span class="left" @click="addVisible = false">取消</span>
<span class="font-semibold">请选择</span>
<span class="right" style="width: .32rem;"></span>
</div>
<div class="p-4">
<CheckBtn :options="addOptions" activeStyleNone
@change="onAddChange" column-1 />
<div class="pb-4"></div>
</div>
</div>
</van-popup>
</div>
</div>
</template>
<script>
import { queryResidentInfo } from '@/api/doctor/resident.js'
import { showNotify, showToast } from 'vant'
import DocNavBar from '@/doctor/components/docNavBar/DocNavBar.vue'
import ChronicTag from '@/doctor/components/chronicTag/ChronicTag.vue'
import CheckBtn from '@/doctor/components/checkBtn/CheckBtn.vue'
import ScreeningList from './components/screening/Index.vue'
import GeneralList from './components/generalFU/List.vue'
import ReferralList from './components/referral/List.vue'
import ConsultationList from './components/consultation/List.vue'
import DiseaseList from './components/disease/Index.vue'
export default {
components: {
DocNavBar,
ChronicTag,
ScreeningList,
GeneralList,
ReferralList,
ConsultationList,
DiseaseList,
CheckBtn
},
data() {
return {
residentInfo: {},
// 折叠
collapsed: true,
// 标签页index
activeTab: 0,
// 新增弹窗
addVisible: false,
addOptions: [
{ name: '新增通用随访', value: 1, path: '/doctor/followUp/generalFU/add' }
]
}
},
provide() {
return {
residentInfo: () => this.residentInfo
}
},
computed: {
residentInfoId() {
return this.$route.query.residentInfoId
},
chronicTagsArray() {
const chronicTagsArray = this.residentInfo.chronicTagsArray || ''
return chronicTagsArray.split(',')
},
// 死亡状态
deathStatus() {
return this.residentInfo.chronicStatus
},
tabList() {
const diseaseList = [
{ name: '高血压', value: 1, code: '1', id: 'HYPERTENSION' },
{ name: '糖尿病', value: 2, code: '2', id: 'DIABETE' },
{ name: '冠心病', value: 3, code: '4', id: 'COPD' },
{ name: '脑卒中', value: 4, code: '8', id: 'STROKE' },
{ name: '慢性阻塞性疾病', value: 5, code: '16', id: 'NEPHROPATHY' },
{ name: '慢性肾脏病', value: 6, code: '32', id: 'KIDNEY' },
{ name: '血脂异常', value: 7, code: '64', id: 'DYSLIPEMIA' }
]
const result = [
// { name: '筛查管理', id: 'SCREENING' },
// ...diseaseList.filter(e => this.chronicTagsArray.includes(e.code)),
{ name: '通用随访', id: 'CURRENCY' },
// { name: '转诊记录', id: 'REFERRAL' },
// { name: '会诊记录', id: 'CONSULTATION' }
]
return result
},
activeTabItem() {
return this.tabList[this.activeTab] || {}
},
},
created() {
if (!this.residentInfoId) {
showNotify({ type: 'warning', message: '未获取到患者信息' })
return
}
this.load()
},
methods: {
load() {
queryResidentInfo({ residentInfoId: this.residentInfoId }).then(res => {
this.residentInfo = res.data || {}
})
},
onAddChange(val, option) {
console.log(val, option)
if (this.deathStatus === 9) {
showToast('该患者已死亡')
return
}
this.addVisible = false
this.$router.push({
path: option.path,
query: { residentInfoId: this.residentInfoId }
})
},
toArchivesEdit() {
this.$router.push({
path: '/doctor/archives-form',
query: { residentInfoId: this.residentInfoId }
})
}
}
}
</script>
<style lang="less" scoped>
.resident-info {
position: relative;
overflow: hidden;
border-radius: 0;
height: auto;
// transition: height .2s;
padding-bottom: 28px;
}
.resident-info-collapsed {
height: 100px;
}
.fold-btn {
color: #BFBFBF;
background: #fff;
position: absolute;
bottom: 0;
left: 16px;
right: 16px;
border-bottom: 1px solid #00000019;
.svg-icon {
transform: rotate(90deg);
}
}
.fold-btn-collapsed {
.svg-icon {
transform: rotate(-90deg);
}
}
:deep(.patient-detail-tabs) {
.van-tab {
color: #262626;
}
.van-tab--active {
color: var(--van-tab-active-text-color);
font-weight: 500;
}
.van-tabs__line {
width: 28px;
height: 2px;
bottom: 22px;
}
}
</style>