GeneralFUDetail.vue

<!--通用随访详情-->
<template>
    <div class='flex flex-col' style='height: 100vh'>
        <div class='p-3 text-black text-center shrink-0 doc-nav-bar' v-if='showNav()'>
            <span @click='onBack' class='text-12 back-bt'>
                <doc-icon type='doc-left2' />
            </span>
            <span>随访详情</span>
        </div>
        <div class='px-4 py-3 flex shrink-0 base-info'>
            <div class='flex w-full'>
                <img src='@/assets/image/residentWX/avatar.png' alt='' class='shrink-0'
                     style='width: .56rem;height: .56rem'>
                <div class='grow flex flex-col justify-between pl-3'>
                    <div class='flex justify-between'>
                        <span class='name'>{{ residentInfo.residentName }}</span>
                    </div>
                    <div class='top-label'>
                        <div class='mt-3 flex'>
                            <div><span>随访方式：</span><span class='color-b'>{{ info.visitWayName }}</span></div>
                            <div class='ml-4'>随访日期：<span class='color-b'>{{ info.visitDate }}</span></div>
                        </div>
                        <div><span>下次随访日期：</span><span class='color-b'>{{ info.nextVisitDate }}</span></div>
                    </div>
                </div>
            </div>
        </div>
        <div class='p-3 grow cont-box'>
            <div class='p-3 h-full cont-inner'>
                <div class='flex justify-between collapse-head'>
                    <span class='text-16'>全部内容</span>
                    <span @click='toggleAll'>
                        <span v-if='!collapseAll'>展开全部</span>
                        <span v-else>收起全部</span>
                        <span :class="['ml-2 icon-down', { 'icon-down-expanded': collapseAll }]">
                            <doc-icon type='doc-down' />
                        </span>
                    </span>
                </div>

                <van-collapse v-model='activeCollapse' ref='collapse' class='doc-collapse'
                              @change='collapseChange'>
                    <van-collapse-item key='1' title='居民信息' name='1'>
                        <template #right-icon>
                            <doc-icon type='doc-down' />
                        </template>
                        <div class='list'>
                            <div v-for='item in columnsBase' :key='item.key'>
                                <div class='flex justify-between py-1 border-bottom item'>
                                    <span class='shrink-0 mr-2 label'>{{ item.title }}</span>
                                    <span v-if="item.key === 'idCard'">{{ $idCardHide(residentInfo.idCard) || '-'
                                        }}</span>
                                    <span class='text-end' v-else>
                                        <span>{{ residentInfo[item.key] || '-' }}</span>
                                        <span v-if='item.unit' class='ml-1'>{{ item.unit }}</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </van-collapse-item>
                    <van-collapse-item key='2' title='本次随访情况' name='2'>
                        <template #right-icon>
                            <doc-icon type='doc-down' />
                        </template>
                        <div class='list'>
                            <div class='flex justify-between py-1 border-bottom item'>
                                <span class='shrink-0 mr-2 label'>本次随访情况</span>
                                <span class='text-end'>
                                        <span>{{ info.visitSituationName || '-' }}</span>
                                    </span>
                            </div>
                        </div>
                    </van-collapse-item>
                    <van-collapse-item key='3' title='失访原因' name='3' v-if='info.visitSituation == 2'>
                        <template #right-icon>
                            <doc-icon type='doc-down' />
                        </template>
                        <div class='list'>
                            <div class='flex justify-between py-1 border-bottom item' >
                                <span class='shrink-0 mr-2 label'>失访原因</span>
                                <span class='text-end'>
                                        <span v-if='info.lossReason != 9'>{{ info.lossReasonName || '-' }}</span>
                                        <span v-if='info.lossReason == 9'>{{ info.lossReasonOther || '-' }}</span>
                                    </span>
                            </div>
                        </div>
                    </van-collapse-item>
                    <van-collapse-item key='4' title='死亡原因' name='4' v-if="info.lossReason == 3">
                        <template #right-icon>
                            <doc-icon type='doc-down' />
                        </template>
                        <div class='list'>
                            <div class='flex justify-between py-1 border-bottom item' >
                                <span class='shrink-0 mr-2 label'>死亡原因</span>
                                <span class='text-end'>
                                        <span>{{ info.deathReason || '-' }}</span>
                                    </span>
                            </div>
                        </div>
                    </van-collapse-item>
                    <van-collapse-item key='5' title='随访方式' name='5' v-if="info.visitSituation == 1">
                        <template #right-icon>
                            <doc-icon type='doc-down' />
                        </template>
                        <div class='list'>
                            <div class='flex justify-between py-1 border-bottom item' >
                                <span class='shrink-0 mr-2 label'>随访方式</span>
                                <span class='text-end'>
                                        <span>{{ detailInfo.followUpWayName || '-' }}</span>
                                    </span>
                            </div>
                            <div class='flex justify-between py-1 border-bottom item'  v-if="info.visitSituation == 1 && (info.visitWay == 3 || info.visitWay == 4)">
                                <span class='shrink-0 mr-2 label'>是否发送</span>
                                <span class='text-end'>
                                      <span v-if="info.isSms">{{ info.isSmsName || '-'}}</span>
                                      <span v-if="info.isWx">{{info.isWxName || '-'}}</span>
                                    </span>
                            </div>
                        </div>
                    </van-collapse-item>
                    <van-collapse-item key='6' title='随访内容' name='6' v-if="showOne && info.visitSituation == 1">
                        <template #right-icon>
                            <doc-icon type='doc-down' />
                        </template>
                        <div class='list'>
                            <div class='flex justify-between py-1 border-bottom item' >
                                <span class='shrink-0 mr-2 label'>随访内容</span>
                                <span class='text-end'>
                                        <span>{{ info.visitContent || '-' }}</span>
                                    </span>
                            </div>
                        </div>
                    </van-collapse-item>
                    <van-collapse-item key='7' title='处置意见' name='7' v-if="showOne && info.visitSituation == 1">
                        <template #right-icon>
                            <doc-icon type='doc-down' />
                        </template>
                        <div class='list'>
                            <div class='flex justify-between py-1 border-bottom item' >
                                <span class='shrink-0 mr-2 label'>处置意见</span>
                                <span class='text-end'>
                                        <span>{{ info.disposalOpinion || '-' }}</span>
                                    </span>
                            </div>
                        </div>
                    </van-collapse-item>
                    <van-collapse-item key="8" title='健康指导' name="8" v-if="(showOne || showTwo) && info.visitSituation == 1">
                        <template #right-icon>
                            <doc-icon type="doc-down" />
                        </template>
                        <div>
                            <!-- <div style="color: #262626">指导内容</div> -->
                            <div v-if="guideContentList.length" class="flex flex-col card">
                                <!-- 文本 -->
                                <div v-for="item in guideContentList" :key="item.templateMode" class="mb-1 flex"
                                     :style="`order: ${item.templateMode}`">
                                    <span class="shrink-0 mr-1" v-if="item.templateModeTrans != '无'">{{ item.templateModeTrans }} :</span>
                                    <span> {{ item.templateContent }}</span>
                                </div>
                            </div>
                        </div>
                    </van-collapse-item>
                    <van-collapse-item key="9" title='宣教内容' name="9" v-if="showThree && info.visitSituation == 1">
                        <template #right-icon>
                            <doc-icon type="doc-down" />
                        </template>
                        <div>
                            <!-- <div style="color: #262626">指导内容</div> -->
                            <div v-if="contentList.length" class="flex flex-col card">
                                <!-- 文本 -->
                                <div v-for="item in contentList" :key="item.templateMode" class="mb-1 flex"
                                     :style="`order: ${item.templateMode}`">
                                    <span class="shrink-0 mr-1" v-if="item.templateModeTrans != '无'">{{ item.templateModeTrans }} :</span>
                                    <span> {{ item.templateContent }}</span>
                                </div>
                            </div>
                            <div v-if="mp4List.length" class="card mt-2">
                                <Mp4 :files="mp4List"/>
                            </div>
                            <div v-if="mp3List.length" class="card flex flex-col mt-2" style="row-gap: .06rem;">
                                <Mp3 :file="item" v-for="item in mp3List" :key="item.annexId"/>
                            </div>
                        </div>
                    </van-collapse-item>
                    <van-collapse-item key='10' title='催检内容' name='10' v-if="showFour && info.visitSituation == 1">
                        <template #right-icon>
                            <doc-icon type='doc-down' />
                        </template>
                        <div class='list'>
                            <div class='flex justify-between py-1 border-bottom item' >
                                <span class='shrink-0 mr-2 label'>催检内容</span>
                                <span class='text-end'>
                                        <span>{{ info.urgentInsContent || '-' }}</span>
                                    </span>
                            </div>
                        </div>
                    </van-collapse-item>
                    <van-collapse-item key='11' title='上传随访记录' name='11' v-if="showOne && info.visitSituation == 1">
                        <template #right-icon>
                            <doc-icon type='doc-down' />
                        </template>
                        <div class='list gap-x-2.5 gap-y-1 flex items-center flex-wrap'>
                            <div v-for="(url, index) in info.uploadVisitRecordImageList" :key="index" >
                                <img style='width: 1.47rem;height: 2.04rem'  :src="url.trueDownloadUrl" />
                            </div>
                        </div>
                    </van-collapse-item>
                    <van-collapse-item key='12' title='现场随访照片' name='12' v-if="showOne && info.visitSituation == 1">
                        <template #right-icon>
                            <doc-icon type='doc-down' />
                        </template>
                        <div class='list gap-x-2.5 gap-y-1 flex items-center flex-wrap'>
                            <div v-for="(url, index) in info.sceneVisitImageList" :key="index" >
                                <img style='width: 1.47rem;height: 2.04rem'  :src="url.trueDownloadUrl" />
                            </div>
                        </div>
                    </van-collapse-item>
                    <van-collapse-item key='13' title='随访机构' name='13'>
                        <template #right-icon>
                            <doc-icon type='doc-down' />
                        </template>
                        <div class='list'>
                            <div v-for='item in columnsOrg' :key='item.key'>
                                <div class='flex justify-between py-1 border-bottom item'>
                                    <span class='shrink-0 mr-2 label'>{{ item.title }}</span>
                                    <span class='text-end'>
                                        <span>{{ info[item.key] || '-' }}</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </van-collapse-item>
                </van-collapse>
            </div>
        </div>
    </div>
</template>

<script>
import { showToast } from 'vant'
import { queryGeneralFUDetail } from '@/api/residentWX/visit'
import Mp3 from '@/residentWX/components/mediaPlay/Mp3.vue'
import Mp4 from '@/residentWX/components/mediaPlay/Mp4'

export default {
    name: 'CurrencyFUDetail.vue',
    components: { Mp4, Mp3 },
    inject: ['showNav'],
    data() {
        return {
            activeCollapse: [],
            detailInfo: {
                visitWayRulesT: [],
                publicizeType: [],
                followUpWayName: ''
            },
            collapseList: [
                { title: '居民信息', name: '1'},
                { title: '本次随访情况', name: '2'},
                { title: '失访原因', name: '3'},
                { title: '死亡原因', name: '4'},
                { title: '随访方式', name: '5'},
                { title: '随访内容', name: '6'},
                { title: '处置意见', name: '7'},
                { title: '健康指导', name: '8'},
                { title: '宣教内容', name: '9'},
                { title: '催检内容', name: '10'},
                { title: '上传随访记录', name: '11'},
                { title: '现场随访照片', name: '12'},
                { title: '随访机构', name: '13'},
            ],
            // 全部展开、收起
            collapseAll: false,
            info: {},
            columnsBase: [
                { title: '姓名', key: 'residentName' },
                { title: '证件号码', key: 'idCard' },
                { title: '性别', key: 'genderName' },
                { title: '出生日期', key: 'dataBirth' },
                { title: '年龄', key: 'currentAge' },
                { title: '民族', key: 'nationalName' },
                { title: '本人电话', key: 'telephone' },
                { title: '现住址', key: 'presentCodeName' },
                { title: '详细地址', key: 'nowAddress' },
                { title: '户籍地址', key: 'registeredCodeName' },
                { title: '详细地址', key: 'permanentAddress' }
            ],
            columnsOrg: [
                { title: '随访单位', key: 'visitUnitName' },
                { title: '随访科室', key: 'visitOfficeName' },
                { title: '随访医生', key: 'visitDoctorName' }
            ]
        }
    },
    computed: {
        routerDetail() {
            return this.$route.params
        },
        residentInfo() {
            return this.info.residentsRecord || {}
        },
        //复检
        showOne() {
            const {visitWayRulesT = []} = this.detailInfo
            let res = false
            if (visitWayRulesT.includes('1-1') || visitWayRulesT.includes('1-2') || visitWayRulesT.includes('1-3') ||
                visitWayRulesT.includes('1-4') || visitWayRulesT.includes('1-5') || visitWayRulesT.includes('1-6')) {
                res = true
            }
            return res
        },
        //指导
        showTwo() {
            const {visitWayRulesT = []} = this.detailInfo
            let res = false
            if (visitWayRulesT.includes('2-1') || visitWayRulesT.includes('2-2') || visitWayRulesT.includes('2-3') ||
                visitWayRulesT.includes('2-4') || visitWayRulesT.includes('2-5') || visitWayRulesT.includes('2-6')) {
                res = true
            }
            return res
        },
        //宣教
        showThree() {
            const {visitWayRulesT = []} = this.detailInfo
            let res = false
            if (visitWayRulesT.includes('3-1') || visitWayRulesT.includes('3-2') || visitWayRulesT.includes('3-3') ||
                visitWayRulesT.includes('3-4') || visitWayRulesT.includes('3-5') || visitWayRulesT.includes('3-6')) {
                res = true
            }
            return res
        },
        //催检
        showFour() {
            const {visitWayRulesT = []} = this.detailInfo
            let res = false
            if (visitWayRulesT.includes('4-1') || visitWayRulesT.includes('4-2') || visitWayRulesT.includes('4-3') ||
                visitWayRulesT.includes('4-4') || visitWayRulesT.includes('4-5') || visitWayRulesT.includes('4-6')) {
                res = true
            }
            return res
        },
        // 文本内容
        guideContentList() {
            return this.info?.guide?.contentList || []
        },
        // 文本内容
        contentList() {
            return this.info?.publicize?.contentList || []
        },
        // 文件内容
        annexList() {
            return this.info?.publicize?.annexList || []
        },
        mp3List() {
            return this.annexList.filter(e => e.type == 2)
        },
        mp4List() {
            return this.annexList.filter(e => e.type == 3)
        }
    },
    created() {
        this.load()
    },
    methods: {
        async load() {
            if (!this.routerDetail.relationId) {
                showToast('未获取到信息')
                return
            }
            let par = {
                id: this.routerDetail.relationId
            }
            queryGeneralFUDetail(par).then(res => {
                let result = res.data || {}
                this.info = result
                this.dataHandle()
            }).finally(() => {
            })
        },
        //数据处理
        dataHandle() {
            const {visitWay, visitWayRules, publicizeType, visitWayName, visitWayRulesName} = this.info
            let visitWayRulesT = []
            if (visitWay && visitWayRules) {
                let resList = []
                let list = visitWayRules.split(',')
                list.forEach(item => {
                    resList.push(`${item}-${visitWay}`)
                })
                visitWayRulesT = resList
                this.detailInfo.visitWayRulesT = visitWayRulesT
                if (publicizeType) {
                    this.detailInfo.publicizeType = publicizeType.split(',').map(item => Number(item))
                }
                this.detailInfo.followUpWayName = visitWayName+ '-'+visitWayRulesName.replace(",","/")
            }
        },
        // 折叠面板切换
        collapseChange(val) {
            if (val && val.length === this.collapseList.length) {
                this.collapseAll = true
            } else {
                this.collapseAll = false
            }
        },
        // 全部展开、收起
        toggleAll() {
            if (this.collapseAll) {
                this.activeCollapse = []
            } else {
                this.activeCollapse = this.collapseList.map(e => e.name)
            }
            this.collapseAll = !this.collapseAll
        },
        onBack() {
            this.$router.back()
        }
    }
}
</script>

<style lang='less' scoped>
@import url('../../utils/common.less');

.base-info {
    background: linear-gradient(to bottom, #DFF5F4, #fff 50%);
    color: #8c8c8c;

    .name {
        font-weight: 600;
        color: #000;
        font-size: 18px;
    }

    .top-label {
        font-size: 13px;
        line-height: 22px;
    }

    .color-b {
        color: #262626;
    }
}

.cont-box {
    background-color: #f9f9f9;

    .cont-inner {
        background: linear-gradient(to bottom, #DFF5F4, #fff .6rem);
        border-top-left-radius: .08rem;
        border-top-right-radius: .08rem;
    }
}

.collapse-head {
    .icon-down {
        vertical-align: middle;
        font-size: .12rem;

        .svg-icon {
            transition: all .2s;
        }
    }

    .icon-down-expanded {
        .svg-icon {
            transform: rotate(-180deg);
        }
    }
}


table {
    text-align: left;
    border-bottom: 1px solid var(--van-cell-border-color);

    > tr {
        > td {
            padding-left: 14px;
            padding-bottom: 12px;

            &:first-child {
                text-align: right;
                padding-left: 0;
            }
        }
    }
}

.list {
    .label {
        min-width: 5em;
    }
}
.card {
    background-color: #F8FAFC;
    padding: 4px 10px;
    border-radius: 4px;
    color: #4D5665;
}
</style>