<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.staplFood || '-' }}</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.targetStaplFood || '-' }}</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 class='list'> <div v-for='item in columnsAuxiliary' :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 class='ml-1'>{{ item.unit }}</span> </span> </div> </div> </div> <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='list'> <div class='flex justify-between py-1 border-bottom item'> <span class='shrink-0 mr-2 label'>服药依从性</span> <span class='text-end'>{{ info.medicationComplianceName || '-' }}</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.glycopeniaReactionName || '-' }}</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.visitTypeName || '-' }}</span> </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.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='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.adjustTreatName }}</span> </div> </div> <div v-if='info.adjustTreat === 1'> <div style='color: #262626' class='mt-2'>用药</div> <div 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> </div> <div style='color: #262626' class='mt-2'>胰岛素</div> <div class='box'> <div> <span>胰岛素种类:</span> <span>{{ info.insulinTypeName }}</span> </div> <div> <span>用法:</span> <span>{{ info.insulinUsageName }}</span> </div> <div> <span>用量:</span> <span v-for='(item, index) in insulinDosage' :key='index'> <template v-if='item.checked'> <span>{{ item.name }}</span> <span class='mr-1 ml-1'>{{ item.dosage }}</span> <span>IU、</span> </template> </span> </div> </div> </van-collapse-item> <van-collapse-item key='12' title='转诊' name='12'> <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='13' title='现场随访照片' name='13'> <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='14' title='下次随访日期' name='14'> <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='15' title='随访机构' name='15'> <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: [], // 用药情况 medicateCase: [], // 胰岛素用量 insulinDosage: [], // 全部展开、收起 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: 'signHeight', unit: 'cm' }, { title: '体重', key: 'signWeight', unit: 'kg' }, { title: 'BMI', key: 'signBmi', unit: 'kg/m²' }, { title: '腰围', key: 'signWaistline', unit: 'cm' }, { title: '足背动脉搏动', key: 'signArteryPulsationName' }, { 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' } ], columnsAuxiliary: [ { title: '空腹静脉血糖值', key: 'emptyBloodGlucose', unit: 'mmol/L' }, { title: '空腹胰岛素', key: 'emptyInsulin', unit: 'mU/L' }, { title: '空腹C肽', key: 'emptyPeptide', unit: 'pmol/L' }, { title: '餐后2小时胰岛素', key: 'afterInsulin', unit: 'mU/L' }, { title: '餐后2小时C肽', key: 'afterPeptide', unit: 'pmol/L' } ] } }, computed: { residentInfo() { return this.info.residentsRecord || {} } }, methods: { dataHandle() { // 字符串转数组 const form = fetchDataHandle(this.visitInfo, { auxiliaryExamination: 'strToArrNum' }) this.info = form // 辅助检查处理 let { auxiliaryExamination = [], inspectList = [], medicateCase = [], insulinDosage = [] } = 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.medicateCase = JSON.parse(medicateCase) // 胰岛素用量处理 this.insulinDosage = JSON.parse(insulinDosage) }, // 全部展开、收起 toggleAll() { if (this.collapseAll) { this.activeCollapse = [] } else { let list = [] for (let i = 1; i < 16; 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 === 15) { this.collapseAll = true } else { this.collapseAll = false } } }, watch: { visitInfo: { handler() { 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>