Detail.vue 13.7 KB
<template>
    <div>
        <van-nav-bar title='随访详情' left-text='' left-arrow @click-left='toBack'></van-nav-bar>
        <div class='p-4 detail-info'>
            <div class='title'>居民信息</div>
            <div class='detail-div mt-2'>
                <div class='flex items-center justify-between'>
                    <div class='label'>证件类型</div>
                    <div>{{ residentInfo.certificateTypeName || '-' }}</div>
                </div>
                <div class='flex items-center justify-between mt-2'>
                    <div class='label'>证件号码</div>
                    <div>{{ residentInfo.idCard || '-' }}</div>
                </div>
                <div class='flex items-center justify-between mt-2'>
                    <div class='label'>姓名</div>
                    <div>{{ residentInfo.residentName || '-' }}</div>
                </div>
                <div class='flex items-center justify-between mt-2'>
                    <div class='label'>性别</div>
                    <div>{{ residentInfo.genderName || '-' }}</div>
                </div>
                <div class='flex items-center justify-between mt-2'>
                    <div class='label'>出生日期</div>
                    <div>{{ residentInfo.dataBirth || '-' }}</div>
                </div>
                <div class='flex items-center justify-between mt-2'>
                    <div class='label'>民族</div>
                    <div>{{ residentInfo.nationalName || '-' }}</div>
                </div>
                <div class='flex items-center justify-between mt-2'>
                    <div class='label'>年龄</div>
                    <div>{{ residentInfo.currentAge || '-' }}</div>
                </div>
                <div class='flex items-center justify-between mt-2'>
                    <div class='label'>本人电话</div>
                    <div>{{ residentInfo.telephone || '-' }}</div>
                </div>
                <div class='flex items-center justify-between mt-2'>
                    <div class='label'>联系人姓名</div>
                    <div>{{ residentInfo.contactName || '-' }}</div>
                </div>
                <div class='flex items-center justify-between mt-2'>
                    <div class='label'>与居民关系</div>
                    <div>{{ residentInfo.relationName || '-' }}</div>
                </div>
                <div class='flex items-center justify-between mt-2'>
                    <div class='label'>联系电话</div>
                    <div>{{ residentInfo.contactPhone || '-' }}</div>
                </div>
                <div class='flex flex-wrap justify-between mt-2'>
                    <div class='label'>现住址</div>
                    <div style='flex: 1'>{{ residentInfo.fullNowAddress || '-' }}</div>
                </div>
                <div class='flex flex-wrap justify-between mt-2'>
                    <div class='label'>户籍地址</div>
                    <div style='flex: 1'>{{ residentInfo.fullPermanentAddress || '-' }}</div>
                </div>
            </div>
            <div class='title mt-2'>随访信息</div>
            <div class='detail-div mt-2'>
                <div class='flex items-center justify-between'>
                    <div>本次随访情况</div>
                    <div>{{ info.visitSituationName }}</div>
                </div>
                <div class='flex items-center justify-between mt-2' v-if='info.visitSituation == 2'>
                    <div>失访原因</div>
                    <div>
                        <span v-if='info.lossReason != 9'>{{ info.lossReasonName || '-' }}</span>
                        <span v-if='info.lossReason == 9'>{{ info.lossReasonOther || '-' }}</span>
                    </div>
                </div>
                <div class='flex items-center justify-between mt-2' v-if='info.lossReason == 3'>
                    <div>死亡原因</div>
                    <div>{{ info.deathReason }}</div>
                </div>
                <div class='flex items-center justify-between mt-2' v-if='info.visitSituation == 1'>
                    <div>随访方式</div>
                    <div>{{ info.visitWayName }}</div>
                </div>
                <div class='white-b mt-2' v-if='showOne && info.visitSituation == 1'>
                    <span>居民电话: </span><span>{{ residentInfo.telephone || '-' }}</span>
                </div>
                <div class='white-b mt-2' v-if='showThree && info.visitSituation == 1'>
                    <div>催检内容:</div>
                    <div>{{ info.urgentInsContent }}</div>
                </div>
                <div class='mt-2' v-if="showOne && info.visitSituation == 1">
                    <div>随访内容</div>
                    <div class='white-b mt-2' style='min-height: 60px'>
                        <div>{{ info.visitContent }}</div>
                    </div>
                </div>
                <div class='mt-2' v-if="showOne && info.visitSituation == 1">
                    <div>处置意见</div>
                    <div class='white-b mt-2' style='min-height: 60px'>
                        <div>{{ info.disposalOpinion }}</div>
                    </div>
                </div>
                <div class='mt-2' v-if="(showOne || showTwo) && info.visitSituation == 1 && info.isHealthGuide == 1">
                    <div>健康指导</div>
                    <div class='white-b mt-2'>
                        <div class='flex flex-wrap mt-2' v-for="(item, index) in healthInterventionsInfo.visitHealthGuideList"  >
                            <div v-if="item.name != '无'" class='label'>{{item.name}}</div>
                            <div style='flex: 1'>{{item.templateContent }}</div>
                        </div>
                    </div>
                </div>

                 <div class='mt-2' v-if='imgList1.length'>
                     <div>随访记录</div>
                     <div class='flex items-center' style='flex-wrap: wrap'>
                         <div v-for='(item, index) in imgList1'>
                             <!--                     图片-->
                             <div v-if="item.imgFlag == 'img'" class='mt-2'>
                                 <img :src='item.trueDownloadUrl' class='ml-2' style='width: 95px;height: 95px;'>
                             </div>
                         </div>
                     </div>
                     <!--                pdf-->
                     <div>
                         <div v-for='item in imgList1'>
                             <div class='mt-2 pdf' v-if="item.imgFlag == 'pdf'">
                                 <div class='flex items-center justify-between'>
                                     <div class='flex items-center' @click.stop='toPdf(item)'>
                                         <div>
                                             <doc-icon type='doc-PDF' style='font-size: .48rem'></doc-icon>
                                         </div>
                                         <div class='ml-1'>{{ item.name }}</div>
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>

                <div class='mt-2' v-if='imgList2.length'>
                    <div>现场随访照片</div>
                    <div class='flex items-center' style='flex-wrap: wrap'>
                        <div v-for='(item, index) in imgList2'>
                            <!--                     图片-->
                            <div v-if="item.imgFlag == 'img'" class='mt-2'>
                                <img :src='item.trueDownloadUrl' class='ml-2' style='width: 95px;height: 95px;'>
                            </div>
                        </div>
                    </div>
                    <!--                pdf-->
                    <div>
                        <div v-for='item in imgList2'>
                            <div class='mt-2 pdf' v-if="item.imgFlag == 'pdf'">
                                <div class='flex items-center justify-between'>
                                    <div class='flex items-center' @click.stop='toPdf(item)'>
                                        <div>
                                            <doc-icon type='doc-PDF' style='font-size: .48rem'></doc-icon>
                                        </div>
                                        <div class='ml-1'>{{ item.name }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class='flex items-center justify-between mt-2' v-if="info.visitSituation == 1">
                    <div>下次随访日期</div>
                    <div>{{ info.nextVisitDate || '-'}}</div>
                </div>

                <div class='flex items-center justify-between mt-2'>
                    <div>随访单位</div>
                    <div>{{ info.visitUnitName || '-'}}</div>
                </div>
                <div class='flex items-center justify-between mt-2'>
                    <div>随访科室</div>
                    <div>{{ info.visitOfficeName || '-'}}</div>
                </div>
                <div class='flex items-center justify-between mt-2'>
                    <div>随访医生</div>
                    <div>{{ info.visitDoctorName || '-'}}</div>
                </div>
            </div>
        </div>
        <div class="px-5  flex align-center justify-around pt-2 pb-2">
            <van-button type="primary" round plain style="width: 70%;background: #F0F3FF;border: 0px"
                        @click="toBack">返回</van-button>
        </div>
    </div>
</template>

<script>
import { fetchCurrencyById } from '@/api/doctor/generalFU'
import { showToast } from 'vant'
import { useStore } from '@/doctor/store'

export default {
    name: 'Detail',
    props: {
        id: [String, Number]
    },
    data() {
        return {
            store: useStore(),
            info: {},
            residentInfo: {}
        }
    },
    computed: {
        routerDetail() {
            return this.$route.query
        },
        //复检指导
        showOne() {
            const { visitWay } = this.info
            let res = false
            if (visitWay == 5 || visitWay == 6 || visitWay == 7 || visitWay == 8) {
                res = true
            }
            return res
        },
        //微信、短信指导
        showTwo() {
            const { visitWay } = this.info
            let res = false
            if (visitWay == 9 || visitWay == 11) {
                res = true
            }
            return res
        },
        //催检
        showThree() {
            const { visitWay } = this.info
            let res = false
            if (visitWay == 10 || visitWay == 12) {
                res = true
            }
            return res
        },
        //健康指导
        healthInterventionsInfo() {
            const modeArray = this.store.getDict('DC00084')
            let visitHealthGuideList = []
            if (this.info.healthGuideContent) {
                visitHealthGuideList = JSON.parse(this.info.healthGuideContent)
            }
            const res = {
                visitHealthGuideList: modeArray.map(e => {
                    const item = visitHealthGuideList.find(i => i.templateMode === e.value)
                    return {
                        templateMode: e.value,
                        name: e.name,
                        templateContent: item ? item.templateContent : '',
                        id: item ? item.visitId : ''
                    }
                })
            }
            return res
        },
        imgList1() {
            const {uploadVisitRecordImageList = []} = this.info
            uploadVisitRecordImageList.forEach(item => {
                item['imgFlag'] = ''
                if (item.fileType == 'pdf') {
                    item['imgFlag'] = 'pdf'
                }
                if (item.fileType == 'img') {
                    item['imgFlag'] = 'img'
                }
            })
            return uploadVisitRecordImageList
        },
        imgList2() {
            const {sceneVisitImageList = []} = this.info
            sceneVisitImageList.forEach(item => {
                item['imgFlag'] = ''
                if (item.fileType == 'pdf') {
                    item['imgFlag'] = 'pdf'
                }
                if (item.fileType == 'img') {
                    item['imgFlag'] = 'img'
                }
            })
            return sceneVisitImageList
        },
    },
    created() {
        this.load()
    },
    methods: {
        async load() {
            if (!this.routerDetail.relationId) {
                showToast('未获取到信息');
                return
            }
            let par = {
                id: this.routerDetail.relationId
            }
            fetchCurrencyById(par).then(res => {
                let result = res.data || {}
                this.info = result
                this.residentInfo = result.residentsRecord || {}
            }).finally(() => {
            })
        },
        toBack() {
            this.$router.back()
        }
    }
}
</script>

<style scoped lang='less'>
.title {
    font-weight: bold;
}
.detail-info {
    height: calc(100vh - 110px);
    overflow-y: auto;
}
.detail-div {
    padding: 12px;
    border: 1px solid #EEEEEE;
    background: #F8FAFC;
    border-radius: 8px;
}

.white-b {
    background: #FFFFFF;
    padding: 12px;
    border: 1px solid #EEEEEE;
    border-radius: 8px;
}

.label {
    width: 104px;
}

:deep(.van-nav-bar .van-icon) {
    color: #000000;
}
</style>