<template> <div class="p-3 grow cont-box"> <div class="p-3 h-full cont-inner"> <div class="flex justify-between collapse-head mt-2"> <span class="text-16 font-semibold">全部内容</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 :model-value="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"> {{ info.symptomName || '-' }} </span> </div> </div> </van-collapse-item> <van-collapse-item key="3" title="体征" name="3"> <template #right-icon> <doc-icon type="doc-down" /> </template> <div class="list"> <div v-for="item in columnsPhysical" :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 v-if="item.unit" class="ml-1">{{ item.unit }}</span> </span> </div> </div> </div> </van-collapse-item> <van-collapse-item key="4" title="生活方式指导" name="4"> <template #right-icon> <doc-icon type="doc-down" /> </template> <div style="color: #262626">吸烟</div> <div class="box"> <div> <span>是否正在吸烟:</span> <span>{{ info.isSmokingName }}</span> </div> <div v-if="info.isSmoking === 1"> <span>您大约从几岁起开始养成每天或基本每天都吸烟的习惯:</span> <span>{{ info.startSmokeAge || '-' }}岁</span> </div> <div v-if="info.isSmoking === 1 || info.isSmoking === 2"> <span>您最近7天是否吸烟:</span> <span>{{ info.lastSevenSmokeName }}</span> </div> <div v-if="info.isSmoking === 1 || info.isSmoking === 2"> <span>日吸烟量:</span> <span>{{ info.daySmoking || '-' }}支</span> <span class="ml-4">目标日吸烟量:</span> <span>{{ info.goalDaySmoking || '-' }}支</span> </div> </div> <div style="color: #262626" class="mt-2">饮酒</div> <div class="box"> <div> <span>是否正在饮酒:</span> <span>{{ info.isDrinkName }}</span> </div> <div v-if="info.isDrink === 1 || info.isDrink === 2"> <span>日饮酒量:</span> <span>{{ info.dayDrink || '-' }}ml</span> <span class="ml-4">目标日饮酒量:</span> <span>{{ info.goalDayDrink || '-' }}ml</span> </div> <div v-if="info.isDrink === 1 || info.isDrink === 2"> <span>白酒:</span> <span>{{ info.drinkLiquor || '-' }}ml/日</span> <span class="ml-2">啤酒:</span> <span>{{ info.drinkBeer || '-' }}ml/日</span> <span class="ml-2">红酒:</span> <span>{{ info.drinkRed || '-' }}ml/日</span> <span class="ml-2">黄酒:</span> <span>{{ info.drinkYellow || '-' }}ml/日</span> <span class="ml-2">其他:</span> <span>{{ info.drinkOther || '-' }}ml/日</span> </div> </div> <div style="color: #262626" class="mt-2">运动</div> <div class="box"> <div> <span>有无规律活动:</span> <span>{{ info.regularExerciseName }}</span> </div> <div v-if="info.regularExercise === 1"> <span>运动强度:</span> <span>{{ info.exerciseStrengthName }}</span> </div> <div v-if="info.regularExercise === 1"> <span>目前运动情况:</span> <span>{{ info.nowExerciseWeek || '-' }}次/周、</span> <span>{{ info.nowExerciseMinute || '-' }}分钟/次</span> </div> </div> <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">{{ info.saltIntakeName || '-' }}</span> </div> <div class="flex justify-between py-1 border-bottom item"> <span class="shrink-0 mr-2 label">心理调整</span> <span class="text-end">{{ info.psychologicalRecoveryName || '-' }}</span> </div> <div class="flex justify-between py-1 border-bottom item"> <span class="shrink-0 mr-2 label">遵医行为</span> <span class="text-end">{{ info.doctorAdviceName || '-' }}</span> </div> </div> </van-collapse-item> <van-collapse-item key="5" title="辅助检查" name="5"> <template #right-icon> <doc-icon type="doc-down" /> </template> <div v-for="(x, xIndex) in inspectList" :key="x.insType"> <div style="color: #262626" :class="[xIndex === 0 ? '' : 'mt-2']">{{ x.insName }}</div> <div class="box"> <div v-for="y in x.items"> <span>{{ y.itemName }}:</span> <span>{{ y.itemValue }}</span> <span class="ml-1">{{ y.unit }}</span> </div> </div> </div> </van-collapse-item> <van-collapse-item key="6" title="目前高血压用药及依从性" name="6"> <template #right-icon> <doc-icon type="doc-down" /> </template> <div class="box"> <div> <span>您目前是否在服用降压药、降脂(如他汀类)或抗血小板(如阿司匹林)等心血管病相关药物:</span> <span>{{ info.medicationComplianceName }}</span> </div> <div> <span>药物名称:</span> <span>{{ currentMedicateCase.drugName }}</span> <span class="ml-4">剂量:</span> <span class="mr-1">{{ currentMedicateCase.dose }}</span> <span>{{ store.getDictValue('CP00081', currentMedicateCase.unit) }}</span> </div> <div> <span>用药频次:</span> <span>{{ store.getDictValue('CP00084', currentMedicateCase.frequency) }}</span> <span class="ml-4">用法:</span> <span>{{ store.getDictValue('CP00083', currentMedicateCase.usage) }}</span> </div> <div> <span>服药依从性:</span> <span>{{ store.getDictValue('CP00148', currentMedicateCase.compliance) }}</span> </div> <div> <span>不依从原因:</span> <span>{{ info.noComplianceReasonName }}</span> </div> <div v-if="(info.noComplianceReason || []).includes(3)"> <span>副作用原因:</span> <span>{{ info.sideEffectReasonName }}</span> </div> </div> <div v-for="(item, index) in addMedicateCase" :key="index" class="box mt-2"> <div> <span>药物名称:</span> <span>{{ item.drugName }}</span> <span class="ml-4">剂量:</span> <span class="mr-1">{{ item.dose }}</span> <span>{{ store.getDictValue('CP00081', item.unit) }}</span> </div> <div> <span>用法:</span> <span>{{ store.getDictValue('CP00083', item.usage) }}</span> <span class="ml-4">频次:</span> <span>{{ store.getDictValue('CP00084', item.frequency) }}</span> </div> </div> </van-collapse-item> <van-collapse-item key="7" title="药物不良反应" name="7"> <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">{{ info.drugsAdverseName }}</span> </div> </div> </van-collapse-item> <van-collapse-item key="8" title="此次随访分类" name="8"> <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">{{ info.visitTypeName }}</span> </div> </div> </van-collapse-item> <van-collapse-item key="9" title="目前诊断" name="9"> <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"> {{ info.currentDiagnosisName || '-' }} </span> </div> </div> <!-- <div v-for="(x, xIndex) in info.diagnoseInfoList" :key="xIndex"> <div style="color: #262626"> {{ (store.getDict('CP00086').find(e => e.value === x.currentDiagnoseType)).name }} </div> <div class="box" > <div v-if="x.currentDiagnoseType === 1"> <span>高血压分级:</span> <span>{{ x.diagnoseResultValue }}</span> <span class="ml-4">高血压危险分层:</span> <span>{{ x.diagnoseLevelValue }}</span> </div> <div v-if="x.currentDiagnoseType === 2"> <span>糖尿病:</span> <span>{{ x.diagnoseResultValue }}</span> </div> <div v-if="x.currentDiagnoseType === 3"> <span>冠心病:</span> <span>{{ x.diagnoseResultValue }}</span> </div> <div v-if="x.currentDiagnoseType === 4"> <span>缺血性脑卒中:</span> <span>{{ x.diagnoseResultValue || '-' }}</span> <span class="ml-4">出血性脑卒中:</span> <span>{{ x.diagnoseLevelValue }}</span> </div> <div v-if="x.currentDiagnoseType === 5"> <span>慢阻肺:</span> <span>{{ x.diagnoseResultValue }}</span> </div> <div v-if="x.currentDiagnoseType === 6"> <span>慢性肾病:</span> <span>{{ x.diagnoseResultValue }}</span> </div> <div v-if="x.currentDiagnoseType === 7"> <span>血脂异常:</span> <span>{{ x.diagnoseResultValue }}</span> </div> <div> <span>纳入管理日期:</span> <span>{{ x.inclusionManageDate }}</span> </div> <div v-for="(y, yIndex) in x.diagnoseItemList" :key="yIndex"> <div> <span>诊断名称:</span> <span>{{ y.diagnosisResultName }}</span> </div> <div> <span>诊断日期:</span> <span>{{ y.diagnosisDate }}</span> </div> <div> <span>诊断单位:</span> <span>{{ y.diagnosisUnitName }}</span> </div> <div> <span>诊断科室:</span> <span>{{ y.diagnosisOfficeName }}</span> </div> <div> <span>诊断医生:</span> <span>{{ y.diagnosisUserName }}</span> </div> </div> </div> </div> --> </van-collapse-item> <van-collapse-item key="10" title="用药情况" name="10"> <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">{{ info.adjustTreatName }}</span> </div> </div> <div v-if="info.adjustTreat === 1" v-for="(item, index) in medicateCase" :key="index" class="box mt-2"> <div> <span>药物名称:</span> <span>{{ item.drugName }}</span> <span class="ml-4">剂量:</span> <span class="mr-1">{{ item.dose }}</span> <span>{{ store.getDictValue('CP00081', item.unit) }}</span> </div> <div> <span>频次:</span> <span>{{ store.getDictValue('CP00084', item.frequency) }}</span> <span class="ml-4">用法:</span> <span>{{ store.getDictValue('CP00083', item.usage) }}</span> </div> </div> </van-collapse-item> <van-collapse-item key="11" title="转诊" name="11"> <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">{{ info.isReferralName }}</span> </div> <div v-if="info.isReferral === 1" class="flex justify-between py-1 border-bottom item"> <span class="shrink-0 mr-2 label">转诊原因</span> <span class="text-end">{{ info.referralReason }}</span> </div> <div v-if="info.isReferral === 1" class="flex justify-between py-1 border-bottom item"> <span class="shrink-0 mr-2 label">转诊机构</span> <span class="text-end">{{ info.referralUnitName }}</span> </div> <div v-if="info.isReferral === 1" class="flex justify-between py-1 border-bottom item"> <span class="shrink-0 mr-2 label">转诊科室</span> <span class="text-end">{{ info.referralOfficeName }}</span> </div> </div> </van-collapse-item> <van-collapse-item key="12" title="现场随访照片" name="12"> <template #right-icon> <doc-icon type="doc-down" /> </template> <div> <image-preview :img-list='info.visitImageList'></image-preview> </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 class="flex justify-between py-1 border-bottom item"> <span class="shrink-0 mr-2 label">下次随访日期</span> <span class="text-end">{{ info.nextVisitDate }}</span> </div> </div> </van-collapse-item> <van-collapse-item key="14" title="随访机构" name="14"> <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">{{ info[item.key] }}</span> </div> </div> </div> </van-collapse-item> </van-collapse> </div> </div> </template> <script> import { fetchDataHandle } from '@/utils/common.js' import { useStore } from '@/resident/store/index.js' import ImagePreview from '@/residentWX/components/imagePreview/imagePreview' export default { components: { ImagePreview }, props: { visitInfo: { type: Object, default: () => {} } }, data() { return { info: {}, store: useStore(), // 辅助检查 inspectList: [], // 当前用药 currentMedicateCase: {}, addMedicateCase: [], // 用药情况 medicateCase: [], // 全部展开、收起 collapseAll: false, activeCollapse: [], // 居民信息 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' } ], // 体征 columnsPhysical: [ { title: '收缩压SBP', key: 'signSystolicPressure', unit: 'mmHg' }, { title: '舒张压DBP', key: 'signDiastolicPressure', unit: 'mmHg' }, { title: '心率', key: 'signHeartRate', unit: '次/分' }, { title: '身高', key: 'signHeight', unit: 'cm' }, { title: '体重', key: 'signWeight', unit: 'kg' }, { title: 'BMI', key: 'signBmi', unit: 'kg/m²' }, { title: '腰围', key: 'signWaistline', unit: 'cm' }, { title: '其他', key: 'signOther' } ], // 随访机构 columnsOrg: [ { title: '随访日期', key: 'visitDate' }, { title: '随访单位', key: 'visitUnitName' }, { title: '随访科室', key: 'visitOfficeName' }, { title: '随访医生', key: 'visitDoctorName' }, { title: '录入日期', key: 'createDate' }, { title: '录入单位', key: 'createUnitName' }, { title: '录入科室', key: 'createOfficeName' }, { title: '录入医生', key: 'createDoctorName' }, ] } }, computed: { residentInfo() { return this.info.residentsRecord || {} } }, methods: { dataHandle() { // 字符串转数组 const form = fetchDataHandle(this.visitInfo, { auxiliaryExamination: 'strToArrNum' }) this.info = form // 辅助检查处理 let { auxiliaryExamination = [], inspectList = [], currentMedicateCase = {}, addMedicateCase = [], medicateCase = [], } = form let list = [] auxiliaryExamination.forEach(item => { const items = inspectList.filter(e => e.insType === item) if (items.length > 0) { list.push({ insType: items[0].insType, insName: items[0].insName, items: [...items] }) } }) this.inspectList = list // 当前用药处理 this.currentMedicateCase = JSON.parse(currentMedicateCase) this.addMedicateCase = JSON.parse(addMedicateCase) // 用药情况处理 this.medicateCase = JSON.parse(medicateCase) console.log(2, form) }, // 全部展开、收起 toggleAll() { if (this.collapseAll) { this.activeCollapse = [] } else { let list = [] for (let i = 1; i < 15; i++) { list.push(i.toString()) } this.activeCollapse = list } this.collapseAll = !this.collapseAll }, // 折叠面板切换 collapseChange(val) { if (val && val.length <= 2) { this.activeCollapse = val.slice(val.length - 1) } else { if (this.activeCollapse.length > val.length) { this.activeCollapse = val } if (this.activeCollapse.length < val.length) { this.activeCollapse = val.slice(val.length - 1) } } if (val.length === 14) { this.collapseAll = true } else { this.collapseAll = false } } }, watch: { visitInfo: { handler() { console.log(1, this.visitInfo) this.dataHandle() } } } } </script> <style lang="less" scoped> .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); } } } .list { color: #262626; .label { min-width: 5em; } } .box { background: #F8FAFC; padding: 8px; color: #4D5665; } </style>