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
<template>
<div class="h-full flex flex-col">
<van-nav-bar title='居民详情' left-text='' left-arrow class="shrink-0"
@click-left="toBack"></van-nav-bar>
<div class="flex shrink-0 justify-center pb-1">
<van-tabs v-model:active='activeTab' class="w-1/2 top-tabs"
@change="tabChange">
<van-tab v-for='item in tabList' :key="item.name"
:title='item.title' :name='item.name'></van-tab>
</van-tabs>
</div>
<div class="grow" style="background-color: #f5f5f5;min-height: 0;">
<router-view v-slot='{ Component }'>
<Transition name='route' mode='out-in'>
<component :is='Component' />
</Transition>
</router-view>
</div>
</div>
</template>
<script>
import { showNotify } from 'vant'
import { queryResidentInfo } from '@/api/doctor/resident'
export default {
data() {
return {
tabList: [
{ title: '基本信息', name: 'base', path: '/doctor/resident/base' },
{ title: '随访记录', name: 'visit', path: '/doctor/resident/visit' }
],
activeTab: 'base',
residentId: null,
// 基础信息
baseInfo: null
}
},
computed: {
routeQuery() {
return this.$route.query
}
},
provide() {
return {
getBaseInfo: () => this.baseInfo
}
},
created() {
this.residentId = this.routeQuery.residentId
this.init()
if (!this.residentId) {
showNotify({ type: 'warning', message: '未获取到医生信息', duration: 0 })
return
}
this.load()
},
methods: {
init() {
if (this.$route.name === 'doctor-resident-visit') {
this.activeTab = 'visit'
} else if (this.$route.name === 'doctor-resident-base') {
this.activeTab = 'base'
}
},
tabChange() {
console.log(this.activeTab)
const item = this.tabList.find(e => e.name === this.activeTab)
if (!item) return
this.$router.replace({
path: item.path,
query: { residentId: this.residentId }
})
},
load() {
const query = {
residentInfoId: this.residentId
}
queryResidentInfo(query).then(res => {
this.baseInfo = res.data || {}
})
},
toBack() {
this.$router.go(-1)
}
}
}
</script>
<style lang="less" scoped>
.top-tabs {
:deep(.van-tab) {
color: #262626;
}
:deep(.van-tab--active) {
color: var(--van-tab-active-text-color);
}
:deep(.van-tabs__line) {
height: 2px;
width: 28px;
bottom: 20px;
}
}
</style>