Merge branch 'master' of http://www.beijingsoft.cn:9090/r/mdc-front

yangys

2024-01-16 30ab871400e5064bc38085ef64931b8dc1f64fb9

 src/container/list/index.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-01-06 17:40:19
 * @LastEditors: Sneed
 * @LastEditTime: 2024-01-06 19:54:37
 * @LastEditTime: 2024-01-16 22:13:59
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/list/index.vue
-->
<template>
@@ -10,9 +10,12 @@
            <slot name="search"></slot>
        </div>
        <div class="table">
            <slot name="table-tool"></slot>
            <el-table
            stripe
            :data="tableData"
            style="width: 100%">
            v-loading="loading"
            style="width: 100%;margin-top: 20px;">
                <slot name="columns"></slot>
                <!-- <el-table-column
                    prop="date"
@@ -29,13 +32,13 @@
                    label="地址">
                </el-table-column> -->
            </el-table>
            <div class="pagination">
            <div v-if="total" class="pagination">
                <el-pagination
                style="background: transparent;"
                :page-size="20"
                :pager-count="11"
                :page-size="pageSize"
                :pager-count="current"
                layout="prev, pager, next"
                :total="1000">
                :total="total">
                </el-pagination>
            </div>
            
@@ -44,12 +47,39 @@
</template>
<script>
    export default {
        data () {
            return {
                tableData: [{name:123},{name:123}]
        props: {
            url: {
                type: String
            }
        },

        data () {
            return {
                tableData: [],
                pageSize: 10,
                current: 1,
                total: 0,
                loading: false
            }
        },
        created () {
            this.pageQuery()
        },
        methods: {
            pageQuery(params) {
                this.loading = true
                this.$http.postJson(this.url,{
                    pageSize: this.pageSize,
                    current: this.current,
                    ...params
                }).then(res => {
                    console.log(res)
                    this.tableData = res.data.records || []
                    this.total = res.data.total
                }).finally(() => {
                    this.loading = false
                })
            }
        },
    }
</script>
<style lang="scss">
@@ -58,10 +88,6 @@
        height: 100%;
        overflow: auto;
        .table {
            .el-table td, .el-table th.is-leaf {
                // border-bottom: 1px solid red;
                // padding: 20px ;
            }
            .el-table::before {
                background-color: transparent;
            }
@@ -69,7 +95,6 @@
                color: #E6E5E5;
                background-color: #182D54;
                border-bottom: none;
                
            }
            .el-table {
                color: #E6E5E5;
@@ -78,35 +103,42 @@
                border-bottom: none;
                padding: 0;
            }
            .el-table td{
            .el-table__fixed-right::before, .el-table__fixed::before {
                background: transparent;
            }
            .el-table td, .el-table--striped .el-table__body tr.el-table__row--striped td,.el-table--enable-row-hover .el-table__body tr:hover>td{
                color: #E6E5E5;
                border-bottom: none;
                background: transparent;
                background-color: transparent!important;;
                background-color: transparent;
                // padding: 0;
            }
            .el-table tr{
                color: #E6E5E5;
                border-bottom: none;
                background: transparent;
                background-color: transparent!important;;
                border-bottom: none;
                padding: 0;
            }
            .el-table__header {
                color: #E6E5E5;
                background: transparent;
                background-color: transparent;
                border-bottom: none;
                padding: 0;
            }
            .el-table__body-wrapper {
                color: #E6E5E5;
                background: transparent;
                background-color: transparent;
                border-bottom: none;
                padding: 0;
            .el-table tr.el-table__row--striped {
                background-color: #182D54!important;

            }
            // .el-table__header {
            //     color: #E6E5E5;
            //     background: transparent;
            //     background-color: transparent;
            //     border-bottom: none;
            //     padding: 0;
            // }
            // .el-table__body-wrapper {
            //     color: #E6E5E5;
            //     background: transparent;
            //     background-color: transparent;
            //     border-bottom: none;
            //     padding: 0;
            // }
            .el-table__header-wrapper {
                border: none;
                border-bottom: none;
@@ -129,20 +161,42 @@
</style>
<style lang="scss" scoped>
    .list {
        
        padding: 30px;
    }
    .search {
        margin: 20px 30px 0;
        padding: 20px 30px;
        // margin: 20px 30px;
        padding: 30px 0px;
        min-height: 160px;
        display: flex;
        flex-wrap: wrap;
        background: url('./search.png') 100% 100% no-repeat;
        position: relative;
    }
    .search:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 4px;
        background: url('./border.png') 100% 100%  no-repeat;
        background-size: contain;
    }
    .search:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 4px;
        background: url('./border.png') 100% 100%  no-repeat;
        background-size: contain;
    }
    .table {
        margin-top: 20px;
        margin-bottom: 30px;
        padding: 20px 30px;
        padding: 20px 0px;
        background: transparent;
        overflow: auto;
        .pagination {
@@ -151,4 +205,23 @@
            right: 40px;
        }
    }
    .table::-webkit-scrollbar {
    width: 4px; /* Chrome/Safari */
    }

    /* 定义滑块（thumb）的样式 */
    .table::-webkit-scrollbar-thumb {
    background-color: #999; /* Chrome/Safari */
    }

    /* 当滑块被按下时的样式 */
    .table::-webkit-scrollbar-thumb:hover {
    background-color: #666; /* Chrome/Safari */
    }

    /* 定义两侧边界的样式 */
    .table::-webkit-scrollbar-track {
    background-color: #f5f5f5; /* Chrome/Safari */
    }

</style>