qimall/backend/modules/mall/views/statistics/team-size.php

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-user-info');
?>
<com-list-page :crumbs="crumbs" id="application">
    <com-list-table ref="table" :api="api" :search-list="searchList">
        <el-table-column prop="id" label="会员ID" align="center">
            <template slot-scope="scope">
                {{ scope.row.id }}
            </template>
        </el-table-column>
        <el-table-column prop="nickname" label="会员" min-width="200">
            <template slot-scope="scope">
                <com-user-info :user="scope.row"></com-user-info>
            </template>
        </el-table-column>
        <el-table-column prop="level" label="会员类型" align="center">
            <template slot-scope="scope">
                <div>{{ scope.row.level_name }}</div>
            </template>
        </el-table-column>
        <el-table-column prop="user_direct_total" label="一级人数" align="center">
            <template slot-scope="scope">
                <div>{{ scope.row.user_direct_total }}</div>
            </template>
        </el-table-column>
        <el-table-column prop="user_indirect_total" label="二级人数" align="center">
            <template slot-scope="scope">
                <div>{{ scope.row.user_indirect_total }}</div>
            </template>
        </el-table-column>
        <el-table-column prop="user_team_total" label="团队总数" align="center" min-width="100">
            <template slot-scope="scope">
                <div>{{ scope.row.user_team_total }}</div>
            </template>
        </el-table-column>
        <el-table-column prop="team_finish_order_total" label="团队订单数" align="center" min-width="100">
            <template slot-scope="scope">
                <div>{{ scope.row.team_finish_order_total }}</div>
            </template>
        </el-table-column>
        <el-table-column prop="team_finish_order_price_total" label="团队总业绩" align="center" min-width="100">
            <template slot-scope="scope">
                <div>{{ scope.row.team_finish_order_price_total }}</div>
            </template>
        </el-table-column>
        <el-table-column prop="right_btn" label="操作" align="center" min-width="100">
            <template slot-scope="scope">
                <el-button type="text" @click="$navigate({
                    r: 'mall/statistics/team-achievement', 
                    uid: scope.row.id,
                    name: scope.row.nickname
                })">团队业绩</el-button>
            </template>
        </el-table-column>
        <template slot="header-left">
            <el-button type="primary" size="mini" @click="exportData" :loading="btnLoad">导出全部</el-button>
            <el-button type="primary" size="mini" @click="updateFinishOrder" :loading="btnLoad">团队业绩更新</el-button>
        </template>
    </com-list-table>
</com-list-page>

<script>
    const application = new Vue({
        el: '#application',
        data: {
            api: 'mall/statistics/team-size',
            crumbs: [
                {
                    title: '首页',
                    router: 'mall/overview/index',
                },
                {
                    title: '团队人数',
                }
            ],
            levelList: [],
            exportList: [],
            btnLoad: false,
        },
        mounted() {
            this.getLevel()
        },
        computed: {
            searchList() {
                return [
                    {
                        key: 'keyword',
                        title: '用户昵称/手机号',
                        type: 'text',
                    },
                    {
                        key: 'user_id',
                        title: '用户ID精准搜索',
                        type: 'text',
                    },
                    {
                        key: 'level',
                        title: '会员等级',
                        type: 'select',
                        options: this.levelList,
                        valueKey: {
                            label: 'name',
                            value: 'level',
                        },
                    },
                ]
            }
        },
        methods: {
            async getLevel() {
                request({
                    params: {
                        r: 'mall/user-level/list'
                    },
                    method: 'get',
                }).then(e => {
                    if (e.data.code == 0) {
                        this.levelList = e.data.data
                    }
                })
            },
            updateFinishOrder() {
                this.btnLoad = true;
                request({
                    params: {
                        r: 'mall/statistics/update-finish-order'
                    },
                    method: 'post',
                }).then(e => {
                    if (e.data.code == 0) {
                        this.$message.success(e.data.msg)
                    } else {
                        this.$message.error(e.data.msg)
                    }
                    this.btnLoad = false
                }).catch(e => {
                    this.btnLoad = false
                    this.$message.error('未知错误')
                });
            },
            exportData() {
                let searchParams = JSON.stringify(this.$refs['table'].searchParams) == '{}' 
                    ? {} 
                    : JSON.stringify(this.$refs['table'].searchParams)
                let params = {
                    keyword: searchParams.keyword,
                    level: searchParams.level,
                    user_id: searchParams.user_id,
                }
                let data = {type: 'team-size', params: params}
                request({
                    params: {
                        r: 'mall/statistics/export'
                    },
                    data : data,
                    method: 'post',
                }).then(e => {
                    if (e.data.code == 0) {
                        this.$message.success(e.data.msg)
                    } else {
                        this.$message.error(e.data.msg)
                    }
                    this.btnLoad = false
                }).catch(e => {
                    this.btnLoad = false
                    this.$message.error('未知错误')
                })
            },
        }
    })
</script>