zjyzt_gis_master_web_ui/src/components/Currency/ListContainer.vue

<template>
    <div class="list_container">
        <div class="title">
            <el-row>
                <el-col v-for="(item, index) in listField" :key="index" :span="item.span">
                    <div v-if="item.name == 'select'">
                        <el-checkbox></el-checkbox>
                    </div>
                    <div v-else>{{ item.alias }}</div>
                </el-col>
            </el-row>
        </div>
        <div class="list_content">
            <div class="noHaveData" v-if="listData.length == 0">
                <el-row>
                    <el-col :span="24">
                        <div>
                            <i class="el-icon-warning"></i>
                            {{ noDataTip }}
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="haveData" v-else>
                <el-row v-for="(item, index) in listData" :key="index">
                    <el-col v-for="(item_, index_) in listField" :key="index_" :span="item_.span">
                        <div
                            v-if="item_.name.toLowerCase().indexOf('time') >= 0"
                            :title="transDateFormat(item[item_.name], 'yyyy-MM-DD hh:mm:ss')"
                        >{{ transDateFormat(item[item_.name], 'yyyy-MM-DD hh:mm:ss') }}</div>
                        <!-- <div
                            v-else-if="item_.name.toLowerCase().indexOf('request') >= 0"
                            :title="item[item_.name]"
                        >{{ JSON.parse(item[item_.name]).request }}</div>-->
                        <div :title="item[item_.name]" v-else>{{ item[item_.name] || '—' }}</div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="page_content">
            <el-pagination
                background
                :page-size="pageSize"
                :pager-count="11"
                :current-page="currentPage"
                layout="prev, pager, next"
                :total="total"
                @current-change="changeCurrentPage($event)"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        listField: {
            type: Array,
        },
        listData: {
            type: Array,
            default: [],
        },
        noDataTip: {
            type: String,
            default: "暂无数据"
        },
        total: {
            type: Number,
            default: 0
        },
        pageSize: {
            type: Number,
            default: 10
        },
        currentPage: {
            type: Number,
            default: 1
        },
        searchData: {
            type: Function
        },
        functionObj: {
            type: Object
        }
    },
    methods: {
        changeCurrentPage(currentPage) {
            this.searchData(currentPage);
        }
    }
}
</script>

<style lang="less" scoped>
.list_container {
    width: 100%;
    height: 100%;
    .el-row {
        height: 32px;
        line-height: 32px;
        font-size: 16px;
        text-align: center;
        margin: 4px;
        border-radius: 4px;
        width: 100%;
        display: inline-block;
        .el-col {
            > div {
                position: relative;
                padding: 0 10px;
                box-sizing: border-box;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                cursor: default;
                &::before,
                &::after {
                    content: "";
                    position: absolute;
                    width: 4px;
                    height: 100%;
                    border-radius: 4px;
                    background: #3f67c366;
                }
                &::before {
                    top: 0;
                    left: -2px;
                }
                &::after {
                    top: 0;
                    right: -2px;
                }
            }
            &:last-child div::after {
                background: transparent;
            }
            &:first-child div::before {
                background: transparent;
            }
        }
    }
    .title {
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.4);
        border-radius: 5px;
        background: #ffffff;
        overflow: hidden;
        height: 40px;
        .el-row {
            margin-left: 0px;
            margin-right: 0px;
        }
    }
    .list_content {
        margin-top: 10px;
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.4);
        border-radius: 5px;
        background: #ffffff;
        height: calc(100% - 86px);
        > div {
            height: 100%;
            overflow: hidden;
            overflow-y: auto;
        }
        .noHaveData {
            color: #d8d8d8;
        }
        .haveData {
            .el-row:hover {
                background: #efefef;
                cursor: pointer;
            }
        }
    }
}
.page_content {
    margin-top: 10px;
    overflow: hidden;
    .el-pagination {
        float: right;
    }
}
</style>