From 65827e46342f9146beb1896a0fd1064b0a0921ff Mon Sep 17 00:00:00 2001 From: "nightkis1995@sina.com" <nightkis1995@sina.com> Date: Tue, 7 Jan 2025 17:55:32 +0800 Subject: [PATCH] =?UTF-8?q?=E8=AF=8A=E6=96=AD=E8=AF=A6=E6=83=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/doctor/Doctor.vue | 36 +++ .../components/docImageUpload/DocImage.vue | 5 +- .../components/imagePreview/imagePreview.vue | 18 +- src/doctor/diagnose/detail/DiagnoseDtail.vue | 249 +++++++++++++++++- 4 files changed, 303 insertions(+), 5 deletions(-) diff --git a/src/doctor/Doctor.vue b/src/doctor/Doctor.vue index 9d25163..0117822 100644 --- a/src/doctor/Doctor.vue +++ b/src/doctor/Doctor.vue @@ -263,4 +263,40 @@ export default { flex-grow: 1; } } + +// 折叠面板 +.doc-collapse { + margin-top: .1rem; + &::after { + display: none; + } + .van-cell { + padding: .1rem 0; + color: #8C8C8C; + font-weight: 600; + background: transparent; + &::after { + display: none; + } + .svg-icon { + font-size: .12rem; + transition: all .2s; + } + } + .van-collapse-item { + .van-collapse-item__content { + padding: 0; + color: #262626; + } + &::after { + display: none; + } + } + // 展开 + .van-collapse-item__title--expanded { + .svg-icon { + transform: rotate(-180deg); + } + } +} </style> diff --git a/src/doctor/components/docImageUpload/DocImage.vue b/src/doctor/components/docImageUpload/DocImage.vue index f51aaaf..0f1a155 100644 --- a/src/doctor/components/docImageUpload/DocImage.vue +++ b/src/doctor/components/docImageUpload/DocImage.vue @@ -105,8 +105,9 @@ export default { width: 100%; height: 100%; min-height: 90px; - border: 1px dashed #d9d9d9; - background: #fafafa; + // border: 1px dashed #d9d9d9; + // background: #fafafa; + background: #EFF2F7; img { width: 100%; height: 90px; diff --git a/src/doctor/components/imagePreview/imagePreview.vue b/src/doctor/components/imagePreview/imagePreview.vue index c5314b8..145d563 100644 --- a/src/doctor/components/imagePreview/imagePreview.vue +++ b/src/doctor/components/imagePreview/imagePreview.vue @@ -1,8 +1,10 @@ <template> <div> <div class='list gap-x-2.5 gap-y-1 flex items-center flex-wrap'> - <div v-for="(url, index) in imgList" :key="index" @click='toPreview(index)'> - <img style='width: 1.47rem;height: 2.04rem' :src="url.trueDownloadUrl" /> + <div v-for="(url, index) in imgList" :key="index" @click='toPreview(index)' + class="flex gap-x-2.5"> + <!-- <img :style="{width: imgSize.width, height: imgSize.height}" :src="url.trueDownloadUrl" /> --> + <DocImage :style="{width: imgSize.width, height: imgSize.height}" :src="url.trueDownloadUrl"/> </div> </div> <van-overlay :show='imgShow' @click='imgShow = false'> @@ -18,10 +20,22 @@ </template> <script> +import DocImage from '../docImageUpload/DocImage.vue' + export default { name: 'imagePreview', + components: { + DocImage + }, props: { imgList: Array, + imgSize: { + default: () => { + return { + width: '.97rem', + height: '.97rem' + } + }} }, data() { return { diff --git a/src/doctor/diagnose/detail/DiagnoseDtail.vue b/src/doctor/diagnose/detail/DiagnoseDtail.vue index d7b50bb..85d802b 100644 --- a/src/doctor/diagnose/detail/DiagnoseDtail.vue +++ b/src/doctor/diagnose/detail/DiagnoseDtail.vue @@ -1,19 +1,266 @@ <template> <div class="h-full flex flex-col diagnose-dtail"> <DocNavBar title="诊断详情" class="shrink-0"></DocNavBar> + <div class="px-4 py-3 shrink-0 base-info"> + <div class="name">{{ baseInfo.residentName }}</div> + <div class="flex flex-wrap mt-1 w-full base-info-inner" style="line-height: .22rem;" > + <div> + <span>证件类型:</span> + <span>{{ baseInfo.certificateTypeName }}</span> + </div> + <div> + <span>证件号码:</span> + <span>{{ baseInfo.idCard }}</span> + </div> + <div> + <span>出生日期:</span> + <span>{{ baseInfo.dataBirth }}</span> + </div> + <div> + <span>民族:</span> + <span>{{ baseInfo.nationalName }}</span> + </div> + <div> + <span>其他联系人:</span> + <span>{{ baseInfo.contactName }}</span> + </div> + <div> + <span>联系人关系:</span> + <span> + {{ baseInfo.relationName }} + <span v-if="baseInfo.relationOther"> {{ baseInfo.relationOther }}</span> + </span> + </div> + <div class="w-full"> + <span>现住址:</span> + <span>{{ baseInfo.fullNowAddress }}</span> + </div> + <div class="w-full"> + <span>户籍地址:</span> + <span>{{ baseInfo.fullPermanentAddress }}</span> + </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 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 v-for="collapse in collapseList" :key="collapse.name" + :title="collapse.title" :name="collapse.name"> + <template #right-icon> + <doc-icon type="doc-down" /> + </template> + <div v-if="collapse.name === '1'"> + <div v-for="item in collapse.columns" :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 class="py-1">诊断评估</div> + <div class="py-1 px-3 block"> + {{ info.diagnoseResultValue }} + </div> + </div> + <div v-else-if="collapse.name === '2'"> + <div v-for="inspect in inspectInfo" :key="inspect.id" > + <div>{{ inspect.diagnoseName }}</div> + <div v-for="item in inspect.inspectDetailedObj" :key="item.itemCode" + class="flex justify-between py-1 border-bottom item"> + <span class="shrink-0 mr-2 label">{{ item.itemName }}</span> + <span class="text-end"> + {{ item.itemValue }} + <span v-if="item.unit" class="ml-1">{{ item.unit }}</span> + </span> + </div> + </div> + <imagePreview :imgList="inspectFileList" class="mt-1" + v-if="inspectFileList.length"/> + <span class="py-1" v-if="!inspectFileList.length && !inspectInfo.length">-</span> + </div> + <div v-else-if="collapse.name === '3'"> + <div v-for="check in checkInfo" :key="check.id" > + <div class="py-1" >{{ check.diagnoseName }}</div> + <div class="py-1 px-3 block" > + <div v-if="check.inspectDetailedObj.length"> + <span>{{ check.inspectDetailedObj[0].itemValue }}</span> + </div> + <imagePreview :imgList="check.inspectFileList" class="mt-1" + v-if="check.inspectFileList?.length"/> + </div> + </div> + </div> + </van-collapse-item> + </van-collapse> + </div> + </div> </div> </template> <script> +import { showNotify } from 'vant' +import { getDiagnoseDetail } from '@/api/doctor/disease.js' +import { useStore } from '@/doctor/store' import DocNavBar from '@/doctor/components/docNavBar/DocNavBar.vue' +import imagePreview from '@/doctor/components/imagePreview/imagePreview.vue' export default { components: { - DocNavBar + DocNavBar, + imagePreview + }, + data() { + return { + store: useStore(), + activeCollapse: [], + collapseList: [ + { title: '诊断评估', name: '1', columns: [ + { title: '诊断名称', key: 'diseaseName' }, + { title: '诊断日期', key: 'diseaseDate' }, + { title: '诊断单位', key: 'diseaseUnitName' }, + { title: '诊断科室', key: 'diseaseOfficeName' }, + { title: '诊断医生', key: 'diseaseDoctorName' }, + ]}, + { title: '检验信息', name: '2'}, + { title: '检查信息', name: '3'} + ], + // 全部展开、收起 + collapseAll: false, + info: {} + } + }, + computed: { + id() { + return this.$route.query.id + }, + baseInfo() { + return this.info.residentsRecord || {} + }, + inspectInfo() { + const temp = this.info.diagnoseInspectList || [] + return temp.filter(e => e.projectType == 0) + }, + checkInfo() { + const temp = this.info.diagnoseInspectList || [] + return temp.filter(e => e.projectType == 1) + }, + inspectFileList() { + return this.info.inspectFileList || [] + } + }, + created() { + document.title = '诊断详情' + if (!this.id) { + showNotify({ type: 'warning', message: '未获取到查询信息'}) + return + } + this.init() + }, + methods: { + init() { + getDiagnoseDetail(this.id).then(res => { + this.info = res.data || {} + for(let item of this.info.diagnoseInspectList) { + if (item.inspectDetailed !== void 0 && item.inspectDetailed !== ''){ + item.inspectDetailedObj = JSON.parse(item.inspectDetailed) + } else { + item.inspectDetailedObj = [] + } + } + // this.collapseList[0].info = this.info?.residentsRecord + // this.collapseList[1].info = this.info + // this.collapseList[2].info = this.info + }) + }, + // 折叠面板切换 + collapseChange(val) { + // console.log(val, this.activeCollapse) + 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 && 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 + } } } </script> <style lang="less" scoped> +.base-info { + background: linear-gradient(to bottom, #D2E4FF , #fff 50%); + color: #8c8c8c; + .name { + font-weight: 600; + color: #000; + font-size: 18px; + } + .base-info-inner { + column-gap: 18px; + >div { + >span:last-child { + color: #262626; + } + } + } +} + +.cont-box { + background-color: #f9f9f9; + .cont-inner { + background: linear-gradient(to bottom, #D2E4FF , #fff .6rem); + border-top-left-radius: .08rem; + border-top-right-radius: .08rem; + } + .block { + background-color: #F8FAFC; + color: #4D5665; + border-radius: 4px; + } +} + +.collapse-head { + .icon-down { + vertical-align: middle; + font-size: .12rem; + .svg-icon { + transition: all .2s; + } + } + .icon-down-expanded { + .svg-icon { + transform: rotate(-180deg); + } + } +} </style> -- 2.18.0