recreational-centre-master-mini/src/views/supplier/sgccRecord/index.vue

<script setup>
import { reactive,ref,onMounted } from "vue";
import { VueThrottle,downloadFn } from '@/utils/index.js'
import { openLoading, closeLoading } from '@/utils/loading.js'
import { ElMessage } from 'element-plus'
import { selectSupplierGameCurrencyPage,selectSupplierSourceTypeList } from '@/apis/supplier.js'
import { setTime } from '@/utils/public.js'


const disabledDate = (time) => {
    return time.getTime() > new Date().getTime()
}
const data = reactive({
    searchForm:{
        sourceTypes:[],
        createTime:[]
    },
    tableData: [],
    pagingData: {
        page: 1,
        pageSize: 20,
        total: 0, 
    },
    typeOption:[],
    sourceOptions:[
        {
            type: 2,
            name: '全民星星乐',
        },
        {
            type: 3,
            name: '乌龟叠叠乐',
        },
        {
            type: 4,
            name: '掌上投篮',
        },
        {
            type: 5,
            name: '疯狂套牛',
        },
        {
            type: 20,
            name: '娱乐中心',
        },
        {
            type: 50,
            name: '海上传奇'
        },
        {
            type: 70,
            name: '九宫格'
        },
        {
            type: 91,
            name: '吉祥兔刮刮卡'
        },
        {
            type: 93,
            name: '补发'
        },
        {
            type: 94,
            name: '兑换商品'
        },
        {
            type: 95,
            name: '小说'
        },
        {
            type: 96,
            name: '幸运数字刮刮卡'
        },
        {
            type: 97,
            name: '波波街机'
        },
		{
			type: 31,
			name: '过期',
      	},
		{
			type:102,
			name:'够玩短剧'
		},
		{
			type:103,
			name:'套图购买'
		},
	  	{
			type:104,
			name:'游戏币充值'
	  	},
		{
			type:105,
			name:'星火捕鱼'
		},
		{
			type:106,
			name:'脑洞大逃亡'
		},
		{
			type: 110,
			name:'猛鬼宿舍'
		},
		{
			type: 111,
			name:'泡米看剧'
		},
		{
			type: 112,
			name:'泡米小说'
		},
		{
			type: 113,
			name: '美女视频'
		}
    ]

})
onMounted(() => {
    getSearchData()
    getGameCurrency()
})
const handleSizeChange = (page) => {
    console.log(page,'zise');
    // data.pagingData.page = 1;
    // data.pagingData.pageSize = size;
    getSearchData();
}
const handleCurrentChange = (page) => {
    getSearchData(page)
}
const getSearchData = (page = 1, pageSize = data.pagingData.pageSize) => {
    openLoading()
    let params = {
        sourceTypes: data.searchForm.sourceTypes?.join(',') || undefined
    }
    if (data.searchForm.createTime && data.searchForm.createTime.length > 0) {
        params['startTime'] = data.searchForm.createTime[0] + ' 00:00:00';
        params['endTime'] = data.searchForm.createTime[1] + ' 23:59:59';
    }
    params['pageNum'] = page;
    params['pageSize'] = pageSize;
    selectSupplierGameCurrencyPage(params).then((res) => {
        if (res.code === 1) {
            let tableList = res.data.result
            // tableList = tableList.map((item, index) => {
            //    item.createTime = item.createTime ? setTime(item.createTime * 1000) : '--';
            //     return item;
            // }); 
            // tableList = tableList.map((item, index) => {
            //    item.updateTime = item.updateTime ? setTime(item.updateTime * 1000) : '--';
            //     return item;
            // }); 
            data.tableData = tableList;
            data.pagingData.total = res.data.total;
            data.pagingData.pageSize = res.data.pageSize;
            // data.pagingData.page = page;
        }else{
            ElMessage.error(res.message)
        }
        closeLoading()
    }).catch(err => {
        console.log(err);
        closeLoading()
    }); 
}

//获取枚举
const getGameCurrency = async() => {
    const res = await selectSupplierSourceTypeList()
    if(res.code === 1){
        data.sourceOptions = res.data
    }else{
        ElMessage.error(res.message)
    }
}

const refresh = () => {
    data.searchForm = {
        sourceTypes:[],
        createTime:[]
    }
    getSearchData()
}
const searchFn = () => {
    getSearchData()
}

const exportForm = VueThrottle(() => {
    console.log(data.pagingData.total,'data.pagingData.total');
    if (data.pagingData.total > 10000 || data.pagingData.total <= 0) {
        setTimeout(() => {
            ElMessage.warning("数据超过10000条或无数据,请重新选择筛选条件");
        })
    } else {
        let params = {
            sourceTypes: data.searchForm.sourceTypes?.join(',') || undefined
        }
        if (data.searchForm.createTime && data.searchForm.createTime.length > 0) {
            params['startTime'] = data.searchForm.createTime[0] + ' 00:00:00';
            params['endTime'] = data.searchForm.createTime[1] + ' 23:59:59';
        }
        // params['pageNum'] = data.pagingData.page;
        // params['pageSize'] = data.pagingData.pageSize;
        downloadFn({
            url: '/increase/supplier/manage/exportSupplierGameCurrencyRecords', 
            params,
        })
    }
},1000)
</script>

<template>
<!-- 供应商游戏币消耗流水记录 -->
    <div class="sgcc-record">
        <div class="serch-box" style="height:40px">
            <div class="form-left">
            <el-form :inline="true" :model="data.searchForm">
                <el-form-item label="来源">
                    <el-select v-model="data.searchForm.sourceTypes" multiple clearable placeholder="请选择" collapse-tags>
                        <el-option v-for="item in data.sourceOptions" :key="item.type" :label="item.name"
                            :value="item.type">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-date-picker v-model="data.searchForm.createTime" :disabled-date="disabledDate"
                        type="daterange" value-format="YYYY-MM-DD" unlink-panels range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期" clearable>
                    </el-date-picker>
                </el-form-item>
            </el-form>
            </div>
            <div class="form-right">
                <el-button type="primary" @click="searchFn" class="iconfont icon-chaxun">搜索</el-button>
                <el-button type="primary" @click="refresh" class="iconfont icon-xinzeng" plain>重置</el-button>
            </div>
        </div>
        <div class="table-wrapper">
            <div>
                <el-button type="primary" @click="exportForm" class="iconfont icon-xinzeng" plain>导出</el-button>
            </div>
            <el-table :data="data.tableData" v-adaptive="{ fixedHeader: true, bottomOffset: 85 }"
            :header-cell-style="{ background: '#FAFAFA', color: '#152129', fontSize: '14px' }" :cell-style="{ height: '50px' }"
            style="width: 100%; margin-top:11px;">
                <el-table-column type="index" width="60" align="center" label="序号"></el-table-column>
                <!-- <el-table-column prop="username" label="用户昵称" align="center" min-width="210"></el-table-column> -->
                <el-table-column prop="phone" width="auto" align="center" min-width="150" label="手机号"></el-table-column>
                <el-table-column prop="changeSourceTypeName" label="来源" align="center" min-width="160"></el-table-column>
                <el-table-column prop="jine" label="变化游戏币" align="center" min-width="160"></el-table-column>
                <el-table-column prop="openId" label="openId" align="center" min-width="160"></el-table-column>
                <el-table-column prop="createTime" label="创建时间" align="center" min-width="160">
                    <template v-slot="scope">
                        <p>{{ scope.row.createTime ? scope.row.createTime : '--' }}</p>
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="operate" label="操作" min-width="120" fixed="right" align="center">
                    <template v-slot="scope">
                        <el-button size="small" type="primary" link @click="check(scope.row)">查看</el-button>
                    </template>
                </el-table-column> -->
            </el-table>
            <el-pagination class="pagination-style" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            v-model:current-page="data.pagingData.page" :page-sizes="[10, 20, 50]" v-model:page-size="data.pagingData.pageSize"
            layout="total, sizes, prev, pager, next" :total="data.pagingData.total">
            </el-pagination>
        </div>
    </div>
</template>