<template> <div class="h-full flex flex-col px-2 py-3 work"> <div class="shrink-0 flex pb-2 items-center"> <van-tabs shrink type="card" class="grow doc-tab-round" line v-model:active="activeTab" @change="tabChange"> <van-tab v-for="item in tabList" :key="item.value" :title="item.name"></van-tab> </van-tabs> <div class="shrink-0 pl-3" style="border-left: 1px solid #A5AEBE;"> <doc-icon type="doc-menu" style="font-size:.2rem;color:#03053D"/> </div> </div> <div class='grow pt-1 overflow-y-auto' ref='list'> <van-pull-refresh v-model='loadingRefresh' @refresh='onRefresh' :disabled='isRefreshDisable' style="min-height: 100%"> <van-list v-model:loading='loading' :finished='finished' :finished-text="list.length ? '没有更多了' : ''" :immediate-check='false' @load='onMore' > <div class="flex flex-col gap-y-2.5"> <div class="py-3 px-4 doc-list-card" v-for='item in list' :key="item.id"> <div class="mb-4"> <span class="name mr-2">{{ item.residentName }}</span> <span class="tag mr-2">{{ item.age }}岁</span> <span class="tag mr-2">{{ item.genderName || '-' }}</span> </div> <div class="flex flex-col gap-y-2.5"> <div> <span class="label">身份证号</span> <span>{{ $idCardHide(item.idCard) }}</span> </div> <div> <span class="label">是否逾期</span> <span>{{ item.isOverdue == 1 ? '是' : '否' }}</span> </div> <div> <span class="label">逾期天数</span> <span>{{ item.overdueDay }}</span> </div> <div class="flex"> <span class="label">慢病标签</span> <span> <ChronicTag :list='item.chronicTagsArray' /> </span> </div> <div> <span class="label">数据来源</span> <span>{{ item.sourceName || '-' }}</span> </div> </div> <div class="divider my-3"></div> <div class="bt-group"> <van-button round size="small" class="doc-btn-primary">详情</van-button> <span class="mr-3"></span> <van-button round size="small" class="doc-btn-primary">通用随访</van-button> <span class="mr-3"></span> <van-button round size="small" class="doc-btn-primary" @click="onIgnore(item)">忽略</van-button> </div> </div> </div> </van-list> <div class='text-center shrink-0 empty' v-if='!list.length'> <img src='@/assets/image/doctor/empty.png' alt='' style='width: 1.2rem;'> <p>暂无数据</p> </div> </van-pull-refresh> </div> </div> </template> <script> import { getVisitByPage, delVisit } from '@/api/doctor/workbench.js' import ChronicTag from '@/doctor/components/chronicTag/ChronicTag.vue' import { showToast } from 'vant' export default { name: 'TableVisit', components: { ChronicTag }, data() { return { list: [], pagination: { total: 0, pageIndex: 1, pageSize: 8 }, loading: false, finished: false, loadingRefresh: false, isRefreshDisable: false, // 慢病tab列表 tabList: [ { name: '高血压', value: 1 }, { name: '糖尿病', value: 2 }, { name: '冠心病', value: 3 }, { name: '脑卒中', value: 4 }, { name: '慢阻肺', value: 5 }, { name: '慢性肾病', value: 6 }, { name: '血脂异常', value: 7 } ], activeTab: 0 } }, computed: { activeTabItem() { return this.tabList[this.activeTab] || {} } }, created() { this.load() }, mounted() { const list = this.$refs.list list.addEventListener('scroll', () => { if (list.scrollTop > 0) { this.isRefreshDisable = true } else { this.isRefreshDisable = false } }) }, methods: { load(loading = true) { const query = { pageIndex: this.pagination.pageIndex, pageSize: this.pagination.pageSize, searchType: 1, diseaseType: this.activeTabItem.value } getVisitByPage(query, loading).then(res => { if (this.pagination.pageIndex === 1) { this.list = [] } this.list = this.list.concat(res.data.dataList || []) this.pagination.total = res.data.total || 0 this.finished = this.list.length >= this.pagination.total }).finally(() => { this.loading = false this.loadingRefresh = false }) }, onMore() { this.pagination.pageIndex++ this.load(false) }, onRefresh() { this.pagination.pageIndex = 1 this.load() }, tabChange() { this.pagination.pageIndex = 1 this.load() }, toDetail(record) { if (!record) return // let path = `/residentWX/screening/firstDetail/${record.id}` // if (this.activeTab == '2') { // path = `/residentWX/screening/SecondDetail/${record.id}` // } // this.$router.push({ path }) }, onIgnore(record) { delVisit({ id: record.id }).then(() => { this.list = this.list.filter(e => e.id !== record.id) setTimeout(() => { showToast('操作成功') }, 800); }) } } } </script> <style lang="less" scoped> </style>