eta_front/src/views/smartReport/components/ETASheet.vue

<template>
    <div class="eta-sheet-wrap">
        <div class="top-box">
            <span>ETA表格</span>
            <el-input
                class="search-box"
				placeholder="表格名称"
				v-model="keyword"
				size="medium"
				prefix-icon="el-icon-search"
                @input="handleSearch"
			/>
        </div>
        <div class="main-box">
            <div class="list-wrap" v-infinite-scroll="handleLoadMore" :infinite-scroll-immediate="true">
            <draggable
                :list="list"
                :group="{ name: 'component', pull: 'clone', put: false }"
                class="sheet-list-box"
                animation="300"
                :sort="false"
                tag="div"
            >
                <div class="sheet-item" :comp-data="getCompData(item)" v-for="item in list" :key="item.ExcelInfoId">
                    <div class="title">{{item.ExcelName}}</div>
                    <div class="img" :style="'backgroundImage:url('+item.ExcelImage+')'"></div>
                </div>
            </draggable>
            <tableNoData text="暂无数据" size="mini" v-if="list.length===0"/>
            </div>
        </div>
    </div>
</template>

<script>
import * as sheetInterface from "@/api/modules/sheetApi.js";
export default {
    data() {
        return {
            keyword:'',
            list:[],
            page:1,
            pageSize:20,
            finished:false,
            loading:false
        }
    },
    created(){
        this.getSheetList()
    },
    methods: {
        // 生产随机id
        getCompId(type){
            return type+new Date().getTime()
        },

        getCompData(item){
            const LINK_URL = this.$setting.dynamicOutLinks.ChartViewUrl+'/sheetshow';
            // console.log(LINK_URL);
            const obj={
                compId:4,
                compType:'sheet',
                content:`${LINK_URL}?code=${item.UniqueCode}&fromScene=1`
            }
            return JSON.stringify(obj)
        },

        handleSearch(){
            this.list=[]
            this.page=1
            this.finished=false
            this.getSheetList()
        },
        getSheetList() {
            this.loading=true
            sheetInterface.sheetList({
                Keyword: this.keyword,
                CurrentIndex: this.page,
                PageSize: this.pageSize,
            }).then((res) => {
                this.loading=false
                if (res.Ret !== 200) return;
                const arr = res.Data.List || [];
                this.list =
                    this.page === 1
                    ? arr
                    : [...this.list, ...arr];
                this.finished =  res.Data.Paging.IsEnd;
            });
        },

        handleLoadMore(){
            if(this.finished||this.loading) return
            this.page++
            this.getSheetList()
        }
    },
}
</script>

<style lang="scss" scoped>
div{
    box-sizing: border-box;
}
.eta-sheet-wrap{
    .top-box{
        display: flex;
        justify-content: space-between;
        .search-box{
            width: 330px;
        }
    }
    .main-box{
        margin-top: 30px;
        height: calc(100vh - 180px);
        border-radius: 4px;
        border: 1px solid var(--gary-gy-5-line, #C8CDD9);
        background: #FFF;
        padding: 20px;
        display: flex;
        flex-direction: column;
        .list-wrap{
            flex: 1;
            overflow-y: auto;

        }
        .sheet-list-box{
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            .sheet-item{
                cursor: move;
                padding: 0 10px 10px 10px;
                width: 250px;
                border-radius: 4px;
                border: 1px solid var(--gary-gy-5-line, #C8CDD9);
                background: var(--gary-gy-white, #FFF);
                .title{
                    padding: 10px 0;
                    text-align: center;
                    border-bottom: 1px solid #C8CDD9;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
                .img{
                    width: 100%;
                    height: 197px;
                    background-size: contain;
                    background-position: center;
                    background-repeat: no-repeat;
                }
            }
        }
    }
}
</style>