kuailelunwen_new_houtai/src/views/agent/ocpcList.vue

<template>
    <div class="main-content12">
        <!-- page header -->
        <div class="pageheader">
            <span class="pagetitle">OCPC订单</span>
        </div>

        <!-- page content -->
        <div class="elementWrap">
            <div>
                <el-form>
                    <div class="flex">
                        <GuipInput :label="`ID：`" v-model="searchSaleid" @blur="changeSearchSaleid()" placeholder="" ref="GuipInput" class="searchId" />

                        <GuipSelect label="站点" v-model="searchUid" @change="changeSearchSite()"
                        :options="siteList" valueKey="uid" labelKey="name" :extraItem="{ label: '全部', value: '0' }"
                        placeholder="" clearable class="searchSite"  />
                    </div>

                    <GuipTable :tableData="orderList" ref="multipleTable" autoColumn="true" :loading="tableLoading">
                        <el-table-column prop="sitename" label="站点"></el-table-column>
                        <el-table-column prop="sale_id" label="ID"></el-table-column>
                        <el-table-column prop="ocpc_type" label="渠道"></el-table-column>
                        <el-table-column prop="type_desc" label="类型"></el-table-column>
                        <el-table-column prop="money" label="销售金额"></el-table-column>
                        <el-table-column prop="sale_date" label="销售日期"></el-table-column>
                    </GuipTable>
                    <el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange'
                        :current-page="orderListCurrentPage" 
                        :page-size="orderListPageSize" 
                        :total="orderListTotal"
                        layout="prev, pager, next,jumper">
                    </el-pagination>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>

import GuipTable from '@/components/GuipTable.vue';
import GuipSelect from '@/components/GuipSelect.vue';
import GuipInput from '@/components/GuipInput.vue';

export default {
    name: 'siteList',
    components: {
        GuipTable,
        GuipSelect,
        GuipInput,
    },
    data() {
        return {
            // 表格加载
            tableLoading: true,
            // 订单列表
            orderList: [],
            orderListTotal: 0,
            orderListCurrentPage: 1,
            orderListPageSize: 20,

            siteList: [],

            searchUid: '0',
            searchSaleid: 0,
        }
    },
    mounted() {
        this.getOcpcList()
    },
    methods: {
        getOcpcList() {
            this.tableLoading = true
            const that = this
            that.orderList = []
            this.$http('POST', '/agentnew/ajax_get_ocpc_order_list', {
                page: this.orderListCurrentPage,
                pagesize: this.orderListPageSize,
                uid: this.searchUid,
                saleid: this.searchSaleid,
            }).then(response => {
                this.tableLoading = false
                this.$nextTick(() => {
                    that.orderList = response.data.list
                    this.orderListTotal = response.data.total
                    this.siteList = response.data.sitelist
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        handleSizeChange(val) {
            this.orderListPageSize = val
            this.getOcpcList()
        },
        handleCurrentChange(val) {
            this.orderListCurrentPage = val
            this.getOcpcList()
        },
        changeSearchSite() {
            console.log(this.searchUid)
            this.getOcpcList()
        },
        changeSearchSaleid() {
            console.log(this.searchSaleid)
            this.getOcpcList()
        },
    },
    computed: {
        
    },
}
</script>
<style lang="scss" scoped>
.pageheader {
    display: flex;
    justify-content: space-between;
    /* 关键属性 */
    align-items: center;
    margin: 0px 0px 16px 0px;
}

.pagetitle {
    font-size: 16px;
    font-weight: bold;
    line-height: normal;
    letter-spacing: 0.08em;
    color: #1E2226;
    margin-top: 8px;
}

.elementWrap {
    padding: 32px 36px;
    background: #fff;
}

.searchId {
    margin-right: 24px;
    width: 200px;
}

.searchSite {
    width: 300px;
}

::v-deep .custom-popover {
    position: fixed !important;
    // max-height: 290px;
    // overflow-y: auto;
    margin-top: 0 !important;
    margin-left: 0 !important;
    transform: none !important;
}

</style>