ChuangHeng/src/views/modules/agent/registerRecord.vue

<template>
    <div class="agent_page">
        <div class="title">{{ ptitle }}</div>
        <div class="query adfac">
            <el-select v-model="queryParams.channelType" placeholder="请选择渠道类型" style="margin-right: 20px;">
                <el-option :label="item.label" :value="item.value" v-for="item in channel_type" :key="item.id"></el-option>
            </el-select>
            <el-button type="primary" icon="el-icon-query" @click="getList">查询</el-button>
        </div>
        <el-table :data="dataList" border cell-class-name="vertical-top-cell" v-loading="loading" empty-text="暂无注册记录" max-height="578px" style="margin-top: 24px;">
            <el-table-column label="序号" width="50">
                <template #default="scope">
                    {{ scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column label="渠道类型" prop="channelType">
                <template #default="{ row }">{{ channel_type.find(c=>c.value==row.channelType)?.label||'' }}</template>
            </el-table-column>
            <el-table-column label="创建时间" prop="createDate"></el-table-column>
        </el-table>
        <el-row style="display: flex;justify-content: center;">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryParams.page"
                :page-sizes="[5, 10, 20, 50]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                v-show="total > 0">
            </el-pagination>
        </el-row>
    </div>
</template>

<script setup name="">
    import { ref, getCurrentInstance, onMounted } from 'vue'
    import { getRegisterRecordList } from '@/api/agent/index.js';
    const { proxy } = getCurrentInstance();
    const { channel_type } = proxy.useDict("channel_type");
    const queryParams = ref({
        page:1,
        limit:10,
        channelType:''
    })
    const ptitle = proxy.$route.meta.title;
    const dataList = ref([])
    const loading = ref(false)
    const total = ref(0)

    const getList = async () => {
        let query = {...queryParams.value};
        loading.value = true;
        const res = await getRegisterRecordList(query);
        dataList.value = res.data.list;
        total.value = res.data.total;
        loading.value = false;
    }
    const handleSizeChange = (e)=>{
        queryParams.value.limit = e;
        getList();
    }
    const handleCurrentChange = (e)=>{
        queryParams.value.page = e;
        getList();
    }

    onMounted(()=>{
        getList();
    })

</script>

<style scoped lang="scss">
    .agent_page{
        padding: 20px;
        box-sizing: border-box;
        .title{
            font-family: PingFang-SC, PingFang-SC;
            font-weight: bold;
            font-size: 16px;
            color: #111111;
            line-height: 16px;
        }
        .query{
            margin-top: 24px;
        }
    }

    
    :v-deep .el-dialog__wrapper{
        background: rgba(0,0,0,.3) !important;
    }
    ::v-deep .el-dialog__title{
        font-weight: bold !important;
    }
    ::v-deep .el-dialog{
        margin-top: 15vh !important;
    }
    ::v-deep .el-drawer__header span{
        font-weight: bold;
        font-size: 16px;
        color: #1D2129;
        line-height: 22px;
    }
</style>