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
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
<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 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>
<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 #c0ccdf;">
<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"
@change="onAddChange" column-1 />
<div class="pb-4"></div>
</div>
</div>
</van-popup>
</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'
import CheckBtn from '@/doctor/components/checkBtn/CheckBtn.vue'
export default {
components: {
DocNavBar,
ChronicTag,
ScreeningList,
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(',')
},
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 || {}
})
},
onAddChange(val, option) {
console.log(val, option)
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: 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>