<template> <div class='h-full flex flex-col patient-detail'> <DocNavBar title='居民详情' class='shrink-0'> <template #right> <span class='text-primary' @click='() => addVisible = true' v-if='deathStatus == 1'>新增</span> <span class='text-primary' @click='toCancelDeath' v-if='showDeath'>撤销死亡</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> <span :class="[deathStatus == 9 ? 'tag-red' : 'tag' ,'mr-2']" @click='toDeath'>{{ deathStatus == 9 ? '死亡' : '存活' }}</span> <doc-icon type='doc-edit' class='text-primary' @click='toArchivesEdit' /> <!-- <van-icon class="text-red" name="share" v-if='deathStatus ==9' @click='toCancelDeath'/>--> </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 :key='activeTabItem.value' :diseaseName='activeTabItem.name' :diseaseType='activeTabItem.value' /> </div> <van-popup v-model:show='addVisible' position='bottom' > <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 :clearable='false' @change='onAddChange' column-1 /> <div class='pb-5'></div> </div> </div> </van-popup> </div> </div> </template> <script> import { useStore } from '@/doctor/store' import { getResidentsDeath, queryResidentInfo } from '@/api/doctor/resident.js' import { showConfirmDialog, showNotify } 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' import { deleteFirstScreening } from '@/api/doctor/screening' import { saveResidentsDeath } from '@/api/doctor/death' export default { name: 'PatientDetail', components: { DocNavBar, ChronicTag, ScreeningList, GeneralList, ReferralList, ConsultationList, DiseaseList, CheckBtn }, data() { return { store: useStore(), residentInfoId: null, residentInfo: {}, showDeath:false, // 折叠 collapsed: true, // 标签页index activeTab: 0, // 新增弹窗 addVisible: false, addOptions: [ { name: '新增主要慢病高危筛查', value: 1, path: '/doctor/screening/firstForm' }, { name: '新增专病高危筛查', value: 2, path: '/doctor/screening/secondForm' }, { name: '新增主要慢病高危随访', value: 8, path: '/doctor/screening/highVisit/firstForm' }, { name: '新增专病高危随访', value: 9, path: '/doctor/screening/highVisit/secondForm' }, { name: '新增慢病诊断', value: 3, path: '/doctor/diagnose/form' }, { name: '新增通用随访', value: 4, path: '/doctor/followUp/generalFU/add' }, { name: '新增死亡记录', value: 5, path: '/doctor/deathRecord/add' }, // { name: '新增死亡记录详情', value: 6, path: '/doctor/deathRecord/detail' }, { name: '新增专病随访', value: 7, path: '/doctor/followUp/separateFU/add' } ] } }, provide() { return { residentInfo: () => this.residentInfo } }, computed: { chronicTagsArray() { const chronicTagsArray = this.residentInfo.chronicTagsArray || '' return chronicTagsArray.split(',') }, groupsArrays() { const groupsArrays = this.residentInfo.groupsArrays || '' return groupsArrays.split(',') }, // 死亡状态 deathStatus() { return this.residentInfo.chronicStatus }, authInfo() { return this.store.authInfo }, tabList() { const result = [ { name: '筛查管理', id: 'SCREENING' }, ...this.diagnoseList, { name: '通用随访', id: 'CURRENCY' } // { name: '转诊记录', id: 'REFERRAL' }, // { name: '会诊记录', id: 'CONSULTATION' } ] return result }, activeTabItem() { return this.tabList[this.activeTab] || {} }, diagnoseList() { const diseaseList = [ { name: '高血压', value: 1, code: '512', id: 'HYPERTENSION' }, { name: '糖尿病', value: 2, code: '1024', id: 'DIABETE' }, { name: '冠心病', value: 3, code: '2048', id: 'COPD' }, { name: '脑卒中', value: 4, code: '4096', id: 'STROKE' }, { name: '慢性阻塞性疾病', value: 5, code: '8192', id: 'NEPHROPATHY' }, { name: '慢性肾脏病', value: 6, code: '16384', id: 'KIDNEY' }, { name: '血脂异常', value: 7, code: '32768', id: 'DYSLIPEMIA' } ] return diseaseList.filter(e => this.groupsArrays.includes(e.code)) } }, activated() { this.residentInfoId = this.$route.query.residentInfoId }, methods: { load() { if (!this.residentInfoId) { showNotify({ type: 'warning', message: '未获取到患者信息' }) return } queryResidentInfo({ residentInfoId: this.residentInfoId }).then(res => { this.residentInfo = res.data || {} if (!this.activeTabItem.value) { this.activeTab = 0 } if (this.deathStatus == 9) { this.queryResidentsDeath() } else { this.showDeath = false } }) }, //获取死亡信息 queryResidentsDeath() { let par = { residentInfoId: this.residentInfoId } getResidentsDeath(par).then(res => { let CdofficeId = res.data.createOfficeId if (this.authInfo.officeId == CdofficeId) { this.showDeath = true } else { this.showDeath = false } }) }, onAddChange(val, option) { console.log(val, option) if (this.deathStatus === 9) { this.$message.info('该患者已死亡') return } this.addVisible = false const query = { residentInfoId: this.residentInfoId } if (val == 3 && this.diagnoseList.length) { // 诊断 query.excludeType = this.diagnoseList.map(e => e.value).join(',') } if (val === 7) { query.diseaseType = this.tabList[this.activeTab].value } this.$router.push({ path: option.path, query }) }, toArchivesEdit() { this.$router.push({ path: '/doctor/archives-form', query: { residentInfoId: this.residentInfoId } }) }, //死亡详情 toDeath() { if (this.deathStatus != 9) return this.$router.push({ path: '/doctor/deathRecord/detail', query: { residentInfoId: this.residentInfoId } }) }, //撤销死亡 toCancelDeath() { showConfirmDialog({ message: '确定要撤销死亡吗?' }).then(() => { const query = { residentInfoId: this.residentInfoId, // operateType=1 新增死亡 3-撤销删除 operateType: 3, source: 2 } saveResidentsDeath(query).then(res => { if (res.code == 'SUCCESS') { showNotify({ type: 'success', message: '撤销成功' }); this.store.onRefreshMark() } }) }).catch((err) => { console.warn('death', err) }) } }, watch: { residentInfoId(val) { if (!val) return this.residentInfo = {} this.load() }, 'store.refreshMark'() { this.load() } } } </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); } } .tag-red { background: #FFF3F0; color: #FF4D4F; padding: 4px 8px; border-radius: 8px; font-size: 12px; line-height: 1; } .tag-blue { background: #F0F3FF; color: var(--van-primary-color); padding: 4px 8px; border-radius: 8px; font-size: 12px; line-height: 1; } :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>