Skip to content

F
frontend-h5
Commit 65827e46 authored by songrui's avatar songrui
Browse files
Options

诊断详情

parent 01dd7a6c
Hide whitespace changes
Inline Side-by-side
Showing with 303 additions and 5 deletions
src/doctor/Doctor.vue
View file @ 65827e46
...@@ -263,4 +263,40 @@ export default { ...@@ -263,4 +263,40 @@ export default {
flex-grow: 1; 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> </style>
src/doctor/components/docImageUpload/DocImage.vue
View file @ 65827e46
...@@ -105,8 +105,9 @@ export default { ...@@ -105,8 +105,9 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
min-height: 90px; min-height: 90px;
border: 1px dashed #d9d9d9; // border: 1px dashed #d9d9d9;
background: #fafafa; // background: #fafafa;
background: #EFF2F7;
img { img {
width: 100%; width: 100%;
height: 90px; height: 90px;
......
src/doctor/components/imagePreview/imagePreview.vue
View file @ 65827e46
<template> <template>
<div> <div>
<div class='list gap-x-2.5 gap-y-1 flex items-center flex-wrap'> <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)'> <div v-for="(url, index) in imgList" :key="index" @click='toPreview(index)'
<img style='width: 1.47rem;height: 2.04rem' :src="url.trueDownloadUrl" /> 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>
</div> </div>
<van-overlay :show='imgShow' @click='imgShow = false'> <van-overlay :show='imgShow' @click='imgShow = false'>
...@@ -18,10 +20,22 @@ ...@@ -18,10 +20,22 @@
</template> </template>
<script> <script>
import DocImage from '../docImageUpload/DocImage.vue'
export default { export default {
name: 'imagePreview', name: 'imagePreview',
components: {
DocImage
},
props: { props: {
imgList: Array, imgList: Array,
imgSize: {
default: () => {
return {
width: '.97rem',
height: '.97rem'
}
}}
}, },
data() { data() {
return { return {
......
src/doctor/diagnose/detail/DiagnoseDtail.vue
View file @ 65827e46
<template> <template>
<div class="h-full flex flex-col diagnose-dtail"> <div class="h-full flex flex-col diagnose-dtail">
<DocNavBar title="诊断详情" class="shrink-0"></DocNavBar> <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> </div>
</template> </template>
<script> <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 DocNavBar from '@/doctor/components/docNavBar/DocNavBar.vue'
import imagePreview from '@/doctor/components/imagePreview/imagePreview.vue'
export default { export default {
components: { 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> </script>
<style lang="less" scoped> <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> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment