diagnosis.admin/src/views/knowledge/Disease.vue

<template>
    <div class="prescription">
        <!-- 顶部筛选 -->
        <div class="screening flex-plane-start-b">

            <div class="screening-form flex-vertical-center-l flex-wrap">

                <div class="screening-item flex-vertical-center-l">
                    <span>疾病名称：</span>
                    <div class="input">
                        <el-input size="mini" v-model="form.name" placeholder="请输入"></el-input>
                    </div>

                </div>

                <!-- <div class="screening-item flex-vertical-center-l">
                    <span>功效：</span>
                    <div class="input">
                        <el-input v-model="form.gongxiao" placeholder="请输入"></el-input>
                    </div>

                </div> -->
                <el-button size="mini" type="primary" @click="search">搜索</el-button>
                <el-button size="mini" type="warning" @click="clearFilter">清空</el-button>

            </div>
            <!-- <div class="total">
                共 <span>123</span>味药
            </div> -->
        </div>

        <!-- 主体部分 -->
        <div class="prescr-body">
            <!-- 顶部tab -->
            <div class="p-tab flex-vertical-center-l">
                <div :class="tab_current==index?'flex-center p-active':'flex-center'" v-for="(item,index) in tabs"
                    :key="index" @click="tabCahnge(index);scroll($event)">
                    {{item.deptName}}
                </div>

            </div>
            <!-- 底部数据表格 -->
            <div class="table-data">

                <div class="flex-center table-name" v-for="(item,index) in list" :key="index" :title="item.disname"
                    @click="$router.push({path:'/index/diseased?disid='+item.disid})">{{item.disname}}</div>

                <div class="flex-center findmore" @click="loadMoreData">
                    <span>更多</span>
                </div>
            </div>

        </div>
    </div>
</template>
<script>
    import {
        getDiseaseList,
        getDiseaseClass
    } from '@/api/knowledge.js'
    export default {
        data() {
            return {
                form: {
                    name: '',

                    gongxiao: ''
                },
                page: 1,
                list: [],
                loadMore: true,
                tabs: [],
                tab_current: 0
            }
        },
        created() {
            this.getDiseaseClass()

        },
        methods: {
            clearFilter() {
                this.form.name = ''
                this.getDiseaseList()
            },
            search() {
                this.page = 1
                this.loadMore = true
                this.getDiseaseList()
            },
            tabCahnge(index) {
                this.page = 1
                this.loadMore = true
                this.tab_current = index
                this.getDiseaseList()
            },
            scroll(event) {
              try { event.target.scrollIntoView({ behavior: 'smooth', inline: 'center' }); } catch (e) {}
            },
            loadMoreData() {
                this.getDiseaseList(this.loadMore)
            },
            // 获取疾病数据
            async getDiseaseList(load = true) {
                if (!load) {
                    this.$message.warning('没有更多数据')
                    return
                }
                let params = {
                    keyword: this.form.name,
                    pageid: this.page,
                    pagesize: 100,
                    serchtype: '',
                    deptid: this.tabs[this.tab_current].deptId

                }
                let res = await getDiseaseList(params)
                if (res.code == 0) {
                    if (this.page > 1) {
                        this.list = [...this.list, ...res.data.diseases]
                    } else {
                        this.list = res.data.diseases
                    }

                    if (this.page <= res.data.TotalPageCount) {
                        this.page += 1
                    } else {
                        this.loadMore = false
                        this.$message.warning('没有更多数据')
                    }

                }
            },
            // 获取疾病分类
            async getDiseaseClass() {
                let res = await getDiseaseClass()
                if (res.code == 0) {
                    this.tabs = res.data
                    this.getDiseaseList()
                }

            }
        }
    }
</script>
<style lang="scss" scoped>
    @import '../../style/common.scss';
    @import '../../style/base.scss';

    .prescription {
        .total {
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #333333;
            margin-bottom: 20px;


            span {
                color: #FF3A3A;
            }
        }

        .prescr-body {
            margin-top: 10px;
            .p-tab {
              flex-wrap: nowrap;
              overflow-x: auto;
              > div {
                flex-shrink: 0;
                min-width: 70px;
                width: auto;
              }
            }
        }

        .table-data {
            padding: 10px 10px;
            background: #FFFFFF;
            border-radius: 0px 5px 5px 5px;
            height: 65vh;
            overflow: auto;

            div {
                display: inline-block;
                width: 90px;
                height: 44px;
                line-height: 44px;
                text-align: center;
                background: #F5F5F5;
                border-radius: 4px;
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #000000;
                margin: 0 10px 10px 0;
                cursor: pointer;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        .findmore {
            background: #FFAE45 !important;
            color: #fff !important;
        }
    }
</style>
<style lang="scss" scoped>
    @media screen and (min-width:1681px) and (max-width:1920px) {
        .prescription {
            .table-data {
                height: 79vh;
            }
        }

    }

    @media screen and (min-width:1601px) and (max-width:1680px) {
        .prescription {
            .table-data {
                height: 78vh;
            }
        }

    }

    @media screen and (min-width:1361px) and (max-width:1600px) {
        .prescription {
            .table-data {
                height: 68vh;
            }
        }

    }

    @media screen and(min-width:1281px) and (max-width:1360px) {
        .prescription {
            .table-data {
                height: 68vh;
            }
        }


    }
</style>