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