1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<template>
<div class="h-full flex flex-col patient-detail">
<DocNavBar title="居民详情" class="shrink-0">
<template #right>
<span class="text-primary">新增</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" />
</div>
<div class="flex flex-col gap-y-2.5">
<div>
<span class="label">身份证号</span>
<span>{{ $idCardHide(residentInfo.idCard) || '-' }}</span>
</div>
<div>
<span class="label">联系电话</span>
<span>{{ 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'"/>
</div>
</div>
</div>
</template>
<script>
import DocNavBar from '@/doctor/components/docNavBar/DocNavBar.vue'
import ChronicTag from '@/doctor/components/chronicTag/ChronicTag.vue'
import { queryResidentInfo } from '@/api/doctor/resident.js'
import { showNotify } from 'vant'
import ScreeningList from './components/screening/Index.vue'
export default {
components: {
DocNavBar,
ChronicTag,
ScreeningList
},
data() {
return {
residentInfo: {},
// 折叠
collapsed: true,
// 标签页index
activeTab: 0
}
},
provide() {
return {
residentInfo: () => this.residentInfo
}
},
computed: {
residentInfoId() {
return this.$route.query.residentInfoId
},
chronicTagsArray() {
const chronicTagsArray = this.residentInfo.chronicTagsArray || ''
return chronicTagsArray.split(',')
},
tabList() {
const diseaseList = [
{ name: '高血压', value: 1, code: '1', id: 'HYPERTENSION' },
{ name: '糖尿病', value: 3, code: '2', id: 'DIABETE' },
{ name: '冠心病', value: 4, code: '4', id: 'COPD' },
{ name: '脑卒中', value: 5, code: '8', id: 'STROKE' },
{ name: '慢性阻塞性疾病', value: 6, code: '16', id: 'NEPHROPATHY' },
{ name: '慢性肾病', value: 7, code: '32', id: 'KIDNEY' },
{ name: '血脂异常', value: 8, 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: '未获取到患者信息', duration: 0 })
return
}
this.load()
},
methods: {
load() {
queryResidentInfo({ residentInfoId: this.residentInfoId }).then(res => {
this.residentInfo = res.data || {}
})
}
}
}
</script>
<style lang="less" scoped>
.resident-info {
position: relative;
overflow: hidden;
border-radius: 0;
height: 230px;
transition: height .2s;
}
.resident-info-collapsed {
height: 90px;
}
.fold-btn {
color: #BFBFBF;
background: #fff;
position: absolute;
bottom: 0;
left: 16px;
right: 16px;
border-bottom: 1px solid #c0ccdf;
.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>