Workbench.vue 5.16 KB
<template>
    <div class="h-full flex flex-col workbench">
        <DocNavBar title="慢病管理" class="shrink-0">
            <template #right>
                <doc-icon type="doc-search" style="color: #262626"
                    @click="toSearch"/>
            </template>
        </DocNavBar>
        <div class="grow flex flex-col" style="min-height: 0;position: relative;">
            <div class="shrink-0 workbench-tab">
                <div class="back"></div>
                <div class="flex workbench-tab-inner" ref="tab-inner">
                    <div v-for="(item, index) in configTab" :key="item.key" @click="tabSelect(item, index)"
                        :class="['item', { 'item-active': item.key == tabActive.key }]">{{item.name}}</div>
                </div>
            </div>
            <div class="grow" style="background: #F8FAFC;min-height: 0;">
                <component :is="tabActive.component"
                    :ref="tabActive.key"/>
            </div>
        </div>
    </div>
</template>

<script>
import DocNavBar from '@/doctor/components/docNavBar/DocNavBar.vue'
import TableWork from './tables/Work.vue'
import TableVisit from './tables/Visit.vue'

export default {
    components: {
        DocNavBar,
        TableWork,
        TableVisit
    },
    data() {
        return {
            configTab: [
                { key: 'work', component: 'TableWork', name: '工作记录' },
                { key: 'visit', component: 'TableVisit', name: '慢病待随访' },
                { key: 'screenRecord', component: 'TableScreenRecord', name: '当年待筛查记录' }, 
                { key: 'firstScreen', component: 'TableFirstScreen', name: '初筛高危待筛查' },
                { key: 'receive', component: 'TableReceive', name: '待接诊居民' },
                { key: 'highRisk', component: 'TableHighRisk', name: '高危诊断' }
            ],
            tabActive:{}
        }
    },
    created() {
        this.tabActive = this.configTab[0]
    },
    methods: {
        toSearch() {
            this.$router.push({
                path: '/doctor/search'
            })
        },
        tabSelect(item, index) {
            this.tabActive = item
            const dom = this.$refs['tab-inner']
            if (!dom) return
            // console.log(dom.children[index].offsetLeft, dom.scrollLeft, dom.clientWidth, dom.scrollWidth, scrollNum)
            // dom.children[index].scrollIntoView({ behavior: 'smooth', inline: 'start' })
            const scrollNum = dom.children[index].offsetLeft - (dom.clientWidth - dom.children[index].clientWidth) / 2
            dom.scrollTo({ left: scrollNum > 0 ? scrollNum : 0, behavior: 'smooth' })
        }
    }
}
</script>

<style lang="less" scoped>
.workbench {
    background: linear-gradient(to bottom, #C6DBF9, #EFF2F7);
}
.workbench-tab {
    background: #C6DBF9;
    padding-top: 10px;
    position: relative;
    .workbench-tab-inner {
        align-items: flex-end;
        position: relative;
        overflow-x: auto;
        overflow-y: hidden;
        &::-webkit-scrollbar {
            display: none;
        }
    }
    .back {
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        height: 42px;
        background-color: #E7F1FF;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
    }
    .item {
        flex: 1 0 auto;
        position: relative;
        padding: 0 16px;
        height: 42px;
        line-height: 42px;
        text-align: center;
        &:first-child {
            border-top-left-radius: 12px;
        }
        &:last-child {
            border-top-right-radius: 12px;
        }
    }
    .item-active:first-child {
        border-top-left-radius: 12px;
        &::before {
            display: none;
        }
    }
    .item-active:last-child {
        border-top-right-radius: 12px;
        &::after {
            display: none;
        }
    }
    .item-active {
        background-color: #F8FAFC;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        font-size: 16px;
        height: 46px;
        line-height: 46px;
        &::after {
            content: '';
            display: inline-block;
            position: absolute;
            right: -26px;
            bottom: 0;
            background: url('@/assets/image/doctor/tab-bg.png') no-repeat;
            background-size: auto 100%;
            background-position-x: -20px;
            height: 100%;
            width: 34px;
            z-index: 1;
        }
        &::before {
            content: '';
            display: inline-block;
            position: absolute;
            left: -26px;
            bottom: 0;
            background: url('@/assets/image/doctor/tab-bg.png') no-repeat;
            background-size: auto 100%;
            background-position-x: -20px;
            height: 100%;
            width: 34px;
            z-index: 1;
            transform: rotateY(180deg);
        }
    }
}
:deep(.workbench-search-box) {
    color: #595959;
    .bt-group {
        border-top: 1px solid #EBEBEC;
        color: #262626;
        .submit-btn {
            color: #fff;
            background-color: var(--van-primary-color);
        }
    }
}
</style>