temList.vue

<template>
    <van-popup v-model:show='innerShow' position='right' :style="{ height: '100%', width: '100%' }" :overlay='false' >
        <div class='bg flex flex-col'>
            <div class='p-3 flex  items-center shrink-0 justify-between title bg-white'>
                <div @click='onBack' class='text-12 back-bt'>
                    <doc-icon type='doc-left2' />
                </div>
                <div>选择内容</div>
                <div class='text-primary left-btn' @click='openSearch'>筛查</div>
            </div>

            <div class='grow p-10 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='flex flex-col gap-y-2.5'>
                                    <div>
                                        <span class='label'>模板分类</span>
                                        <span>{{ item.templateClassifyTrans }}</span>
                                    </div>
                                    <div>
                                        <span class='label'>模板名称</span>
                                        <span>{{ item.templateName }}</span>
                                    </div>
                                </div>
                                <div class='divider my-3'></div>
                                <div class='bt-group'>
                                        <van-button round size='small' class='doc-btn-primary mr-3'
                                                    @click='toDetail(item)'>查看
                                        </van-button>
                                        <van-button round size='small' class='doc-btn-primary' @click='toUse(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>

                <van-popup v-model:show='searchVisible' position='top' :style="{ height: '60%' }"
                           style='position: absolute;transition: none'
                           :overlay-style="{ position: 'absolute' }"
                           transition='viewer-fade'
                           :teleport='listDom'>
                    <div class='h-full flex flex-col workbench-search-box'>
                        <div class='px-4 py-3 grow overflow-y-auto' style=''>
                            <van-field v-model='form.templateName' placeholder='请输入要查询的模板名称' maxlength='100'
                                       class='doc-input' />
                            <div class='my-3'>模板分类（仅单选）</div>
                            <CheckBtn :options="store.getDict('DC00082')" v-model:value='form.templateClassify' column-3
                                      class='check-btn-workbench' />
                            <div class='my-3'>文件类型（可多选）</div>
                            <CheckBtn multiple :options="store.getDict('DC00093')" v-model:value='form.fileType' column-3
                                      class='check-btn-workbench' />

                            <div class='my-3'>共享类型（仅单选）</div>
                            <CheckBtn :options="store.getDict('DC00053')" v-model:value='form.templateType' column-3
                                      class='check-btn-workbench' />
                        </div>
                        <div class='text-16 flex shrink-0 text-center bt-group'>
                            <div class='grow py-3' @click='reset'>重置</div>
                            <div class='grow py-3 submit-btn' @click='search'>确定</div>
                        </div>
                    </div>
                </van-popup>

                <!--                查看详情组件-->

                <temDetail v-if='detailShow && innerShow'
                           :show='detailShow'
                           :id='selectRecord.id'
                           @closeDetail='detailClosed'
                           @selectedInfo='detailToUse'
                           :overlay='false'
                ></temDetail>
            </div>
        </div>
    </van-popup>
</template>

<script>
import CheckBtn from '@/doctor/components/checkBtn/CheckBtn'
import { getTemplateByPage } from '@/api/doctor/workbench'
import { useStore } from '@/doctor/store'
import TemDetail from '@/doctor/components/template/temDetail'

const DefaultForm = () => {
    return {
        templateName: undefined,
        templateClassify: undefined,
        //慢病
        businessType: 1,
        //文件类型
        fileType: [],
        //共享类型
        templateType: 1
    }
}

export default {
    name: 'temList',
    components: { TemDetail, CheckBtn },
    props: {
        show: { default: false },
        templateClassify: Number,
    },
    data() {
        return {
            store: useStore(),
            list: [],
            pagination: {
                total: 0,
                pageIndex: 1,
                pageSize: 8
            },
            loading: false,
            finished: false,
            loadingRefresh: false,
            isRefreshDisable: false,
            // 搜索弹出框
            searchVisible: false,
            form: DefaultForm(),
            //是否展示详情弹窗
            detailShow: false,
            //选中项
            selectRecord: {}
        }
    },
    computed: {
        innerShow() {
            return this.show
        },
        listDom() {
            return this.$refs.list
        }
    },
    created() {
        this.form.templateClassify = this.templateClassify
        this.load()
    },
    mounted() {
        const list = this.$refs.list
        if (list) {
            list.addEventListener('scroll', () => {
                if (list.scrollTop > 0) {
                    this.isRefreshDisable = true
                } else {
                    this.isRefreshDisable = false
                }
            })
        }
    },
    methods: {
        load(loading = true) {
            const {fileType = [], ...others} = this.form
            const query = {
                pageIndex: this.pagination.pageIndex,
                pageSize: this.pagination.pageSize,
                fileType: fileType&&fileType.length ? fileType.join(): '',
                ...others
            }
            getTemplateByPage(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
            })
        },
        search() {
            this.pagination.pageIndex = 1
            this.load()
            this.searchVisible = false
        },
        reset() {
            this.form = DefaultForm()
            this.form.templateClassify = this.templateClassify
            this.search()
        },
        onMore() {
            this.pagination.pageIndex++
            this.load(false)
        },
        onRefresh() {
            this.pagination.pageIndex = 1
            this.load()
        },
        openSearch() {
            this.searchVisible = true
        },
        toDetail(record) {
            this.selectRecord = record
            this.detailShow = true
        },
        detailClosed(val) {
          this.detailShow = val
        },
        //列表引用
        toUse(record, typeList = [1, 2, 3]) {
            this.$emit('selectRecord', record.id, typeList)
            this.onBack()
        },
        //详情选中引用
        detailToUse(val, typeList = []) {
            this.$emit('selectRecord', val, typeList)
            this.onBack()
        },
        onBack() {
            this.$emit('closed', false)
        }
    }
}
</script>

<style scoped lang='less'>
.title {
    font-size: 18px;
    font-weight: 600;
}

.bg-white {
    background: #FFFFFF;
}

.left-btn {
    font-size: 14px;
    font-weight: 400;
}

.bg {
    background: rgb(245, 245, 245);
    height: 100vh;
}

.p-10 {
    padding: 10px;
}

: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>