简易筛查详情

src/assets/icons/doc-down2.svg

+<svg width="11" height="5" viewBox="0 0 11 5" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.5 5L5.5 0L10.5 5H0.5Z" fill="#262626"/>
+</svg>

src/assets/icons/doc-exclamation.svg

+<svg width="13" height="12" viewBox="0 0 13 12" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_7955_10757)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 0C3.18629 0 0.5 2.68629 0.5 6C0.5 9.3137 3.18629 12 6.5 12C9.81371 12 12.5 9.3137 12.5 6C12.5 2.68629 9.81371 0 6.5 0Z" fill="#768092"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.59668 7.25H6.37793C6.19671 7.25 6.0498 7.08974 6.0498 6.89205V2.35795C6.0498 2.16026 6.19671 2 6.37793 2H6.59668C6.7779 2 6.9248 2.16026 6.9248 2.35795V6.89205C6.9248 7.08974 6.7779 7.25 6.59668 7.25Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.59668 9H6.37793C6.19671 9 6.0498 8.8531 6.0498 8.67187V8.45313C6.0498 8.2719 6.19671 8.125 6.37793 8.125H6.59668C6.7779 8.125 6.9248 8.2719 6.9248 8.45313V8.67187C6.9248 8.8531 6.7779 9 6.59668 9Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_7955_10757">
+<rect width="12" height="12" fill="white" transform="translate(0.5)"/>
+</clipPath>
+</defs>
+</svg>

src/assets/icons/doc-item.svg

+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.5 20H3.5C2.70435 20 1.94129 19.6839 1.37868 19.1213C0.816071 18.5587 0.5 17.7956 0.5 17V1C0.5 0.734784 0.605357 0.48043 0.792893 0.292893C0.98043 0.105357 1.23478 0 1.5 0H15.5C15.7652 0 16.0196 0.105357 16.2071 0.292893C16.3946 0.48043 16.5 0.734784 16.5 1V13H20.5V17C20.5 17.7956 20.1839 18.5587 19.6213 19.1213C19.0587 19.6839 18.2956 20 17.5 20ZM16.5 15V17C16.5 17.2652 16.6054 17.5196 16.7929 17.7071C16.9804 17.8946 17.2348 18 17.5 18C17.7652 18 18.0196 17.8946 18.2071 17.7071C18.3946 17.5196 18.5 17.2652 18.5 17V15H16.5ZM4.5 5V7H12.5V5H4.5ZM4.5 9V11H12.5V9H4.5ZM4.5 13V15H9.5V13H4.5Z" fill="url(#paint0_linear_8000_1847)"/>
+<defs>
+<linearGradient id="paint0_linear_8000_1847" x1="0.5" y1="0" x2="20.5" y2="20" gradientUnits="userSpaceOnUse">
+<stop stop-color="#80E8FF"/>
+<stop offset="1" stop-color="#00B6C1"/>
+</linearGradient>
+</defs>
+</svg>

src/router/index.js

@@ -9,7 +9,12 @@ const routes = [
             {
                 path: 'screening/simple/form',
                 name: 'tumour-screening-simple-form',
-                component: () => import(/* webpackChunkName: "page-tumour-screening" */ '@/tumour/screening/simpleV2/form/Index.vue')
+                component: () => import(/* webpackChunkName: "page-tumour-screening-form" */ '@/tumour/screening/simpleV2/form/Index.vue')
+            },
+            {
+                path: 'screening/simple/detail',
+                name: 'tumour-screening-simple-detail',
+                component: () => import(/* webpackChunkName: "page-tumour-screening-detail" */ '@/tumour/screening/simpleV2/detail/Detail.vue')
             },
             {
                 path: 'visit/detail',

src/tumour/api/screening.js

@@ -4,3 +4,8 @@ import { fetchBase } from '@/utils/fetch.js'
 export function addSimpleScreen(params, loading = true) {
     return fetchBase({ url: `/tumour-admin/v1/h5-app/add-simple-screen`, body: params, loading })
 }
+
+// 简易筛查 详情
+export function getSimpleScreenById(id, loading = true) {
+    return fetchBase({ url: `/tumour-admin/v1/h5-app/simple-screen-detail/${id}`, loading })
+}

src/tumour/api/visit.js

 import { fetchBase } from '@/utils/fetch.js'
 
-// 简易筛查 新增
+// 随访详情
 export function getVisitById(id, loading = true) {
     return fetchBase({ url: `/tumour-admin/v1/h5-app/visit-details/${id}`, loading })
 }

src/tumour/screening/simpleV2/config.js

@@ -716,7 +716,11 @@ class Question {
         this.issue = issue.map(e => {
             let value = detail[e.key] || (e.init && e.init())
             if (!e.title && value) {
-                value = value.split(',').map(i => +i)
+                if (typeof value === 'string') {
+                    value = value.split(',').map(i => +i)
+                } else if (e.answer.type === 'checkbox') {
+                    value = [value]
+                }
             }
             return {
                 ...e,

src/tumour/screening/simpleV2/detail/Detail.vue

+<template>
+    <div class="h-full flex flex-col screening-simple-detail">
+        <DocNavBar home v-if="embed !== 'wx'">
+            筛查详情
+        </DocNavBar>
+        <div class="grow overflow-y-auto">
+            <div class="notice text-12 pl-4 py-2 flex items-center">
+                <doc-icon type="doc-exclamation" class="mr-1"/>
+                <span class="black-5">仅能查询部分检验报告,此结果仅作参考,以医院纸质报告为准</span>
+            </div>
+            <div class="resident-info black-1">
+                <div class="screen-unit">{{ info.screenUnitName || '-' }}</div>
+                <div class="mb-3 mt-1">肿瘤简易筛查报告</div>
+                <div style="font-size: .1rem;">筛查日期：{{ info.screenDate || '-' }}</div>
+                <img src="@/assets/image/detail-trim.png" alt="">
+            </div>
+            <div class="px-4 mt-2">
+                <div class="panel">
+                    <div class="flex items-center">
+                        <span class="text-16 text-black">{{ info.residentName }}</span>
+                        <span class="mx-4">{{ info.genderTrans }}</span>
+                        <span class="black-2">{{ info.age }}岁</span>
+                    </div>
+                    <div class="screen-items mt-2">
+                        <div v-for="item in screenItems" class="screen-item p-2">
+                            <div class="black-4">{{ item.speciesTrans }}</div>
+                            <div class="mt-2">
+                                <span :class="['black-3', { 'high-risk-text': item.highRisk === 1 }]">
+                                    {{ item.highRiskTrans }}
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <van-collapse v-model="activeCollapse" ref="collapse" class="doc-collapse">
+                    <van-collapse-item v-for="(item, index) in detailsInfo" :name="index"
+                        :title="item.title">
+                        <template #right-icon>
+                            <doc-icon type="doc-down2" class="right-icon"/>
+                        </template>
+                        <template #icon>
+                            <doc-icon type="doc-item" class="left-icon"/>
+                        </template>
+                        <table>
+                            <colgroup>
+                                <col></col>
+                                <col style="width: .55rem"></col>
+                            </colgroup>
+                            <thead>
+                                <tr>
+                                    <th>内容</th>
+                                    <th>结果</th>
+                                </tr>
+                            </thead>
+                            <tr v-for="(q, index) in item.issue.filter(e => e.title)" :key="index">
+                                <td>
+                                    <span>{{ q.title.text || q.title }}</span>
+                                    <span v-if="q.title.linkKey">
+                                        {{ q.titleExtend.valueTrans }}
+                                    </span>
+                                </td>
+                                <td class="text-center">{{ q.valueTrans }}</td>
+                            </tr>
+                        </table>
+
+                        <div class="panel-2 mt-2">
+                            <div class="black-2">筛查结论</div>
+                            <div class="mt-1">
+                                <span v-if="item.score" class="mr-4">
+                                    总分 {{ item.score || 0 }} 分
+                                </span>
+                                <span :class="{ 'high-risk-text': item.highRisk === 1 }">{{ item.highRiskTrans }}</span>
+                            </div>
+                        </div>
+                        <div class="panel-2 mt-2">
+                            <div class="black-2">建议</div>
+                            <div class="mt-1" style="white-space: pre-wrap;">{{ item.remark }}</div>
+                        </div>
+                    </van-collapse-item>
+                </van-collapse>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { showNotify } from 'vant'
+import { getSimpleScreenById } from '@/tumour/api/screening.js'
+import { fetchDataHandle } from '@/utils/common.js'
+import { getQuestion as getQuestionV2 } from '../config.js'
+import { getQuestion as getQuestionV1 } from '@/tumour/screening/simple/config.js'
+import DocNavBar from '@/components/docNavBar/DocNavBar.vue'
+
+// http://192.168.1.108:8086/#/tumour/screening/simple/detail?id=49167
+export default {
+    data() {
+        return {
+            info: {},
+            // 问题详情
+            detailsInfo: [],
+            activeCollapse: []
+        }
+    },
+    computed: {
+        id() {
+            return this.$route.query.id
+        },
+        embed() {
+            return this.$route.query.embed
+        },
+        // 筛查项
+        screenItems() {
+            const result = []
+            const details = this.info.details
+            if(!details) return []
+            Reflect.ownKeys(details).forEach(key => {
+                result.push(details[key])
+            })
+            return result
+        }
+    },
+    created() {
+        document.title = '筛查详情'
+        if (!this.id) {
+            showNotify({ type: 'warning', message: '未获取到患者信息', duration: 0 })
+            return
+        }
+        this.load()
+    },
+    methods: {
+        load() {
+            getSimpleScreenById(this.id).then(res => {
+                this.info = fetchDataHandle(res.data, {
+                    species: 'strToArrNum'
+                })
+                this.detailsInfo = this.detailsHandle(this.info)
+                // console.log('this.info', this.detailsInfo)
+                this.$nextTick(() => {
+                    this.$refs.collapse.toggleAll(true)
+                })
+            })
+        },
+        detailsHandle(info) {
+            const details = info.details
+            const species = info.species
+            if (info.version == 1) {
+                return species.map(e => {
+                    return getQuestionV1(e, details[e])
+                })
+            } else {
+                return species.map(e => {
+                    return getQuestionV2(e, {}, details[e])
+                })
+            }
+            
+        }
+    },
+    components: {
+        DocNavBar
+    },
+}
+</script>
+
+<style lang="less" scoped>
+.screening-simple-detail {
+    // background-color: #eff2f7;
+    // background-image: linear-gradient(to bottom, #DEF6FF, #DEF6FF59);
+    // background-repeat: no-repeat;
+    // background-size: 100% 340px;
+    background: linear-gradient(to bottom, #DEF6FF, #DEF6FF59) no-repeat top/100% 340px,
+        linear-gradient(to bottom, #DEF6FF59, #eff2f7) no-repeat 0 340px/100%;
+}
+
+.notice {
+    background-color: #F5FCFF;
+}
+
+.resident-info {
+    padding: 24px 28px 0 28px;
+    position: relative;
+    // background-image: url('@/assets/image/detail-trim.png');
+    // background-repeat: no-repeat;
+    // background-size: 84px;
+    // background-position: top 100% right 24px;
+    .screen-unit {
+        position: relative;
+        font-size: 18px;
+        max-width: 230px;
+        word-break: break-all;
+        z-index: 2;
+    }
+    img {
+        width: 84px;
+        position: absolute;
+        top: calc(50% + 10px);
+        right: 24px;
+        transform: translateY(-50%);
+    }
+}
+
+.screen-items {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 8px;
+    .screen-item {
+        background-color: #EDFAFF;
+        border-radius: 4px;
+    }
+}
+
+:deep(.doc-collapse) {
+    &::after {
+        display: none;
+    }
+    .left-icon {
+        font-size: 20px;
+        margin-right: 10px;
+    }
+    .right-icon {
+        font-size: 10px;
+    }
+    .van-collapse-item__title {
+        display: flex;
+        align-items: center;
+    }
+    .van-cell__title {
+        font-size: 16px;
+    }
+    .van-collapse-item {
+        border-radius: 8px;
+        background-color: #fff;
+        margin-top: 8px;
+        &::after {
+            display: none;
+        }
+    }
+    .van-cell {
+        background-color: transparent;
+        padding: 8px 12px;
+    }
+    .van-collapse-item__content {
+        background-color: transparent;
+        padding: 12px;
+        color: #262626;
+        font-size: 14px;
+    }
+    // 展开
+    .van-collapse-item__title--expanded {
+        .right-icon {
+            transform: rotate(-180deg);
+        }
+    }
+    table {
+        border-collapse: collapse;
+        border-right: 1px solid #f0f0f0;
+        border-bottom: 1px solid #f0f0f0;
+        td, th{
+            border-left: 1px solid #f0f0f0;
+            border-top: 1px solid #f0f0f0;
+            padding: 4px;
+        }
+        th {
+            background-color: #fafafa;
+            font-weight: 600;
+        }
+    }
+}
+
+.panel {
+    padding: 12px;
+    border-radius: 8px;
+    background-color: #fff;
+}
+.panel-2 {
+    padding: 4px 12px;
+    border-radius: 4px;
+    background-color: #F8FAFC;
+}
+.black-1 {
+    color: #2D2D2D;
+}
+.black-2 {
+    color: #595959;
+}
+.black-3 {
+    color: #56707D;
+}
+.black-4 {
+    color: #65889A;
+}
+.black-5 {
+    color: #768092;
+}
+.high-risk-text {
+    color: #FF0306;
+    @supports (-webkit-background-clip: text) or (background-clip: text) {
+        background: linear-gradient(135deg, #FF0306, #FF2F7F);
+        background-clip: text;
+        -webkit-background-clip: text;
+        color: transparent;
+    }
+    
+}
+</style>