bsdgy-front/src/pages/shop/IncreaseDataCompany.vue

<template>
    <div>
        <Row style="margin-top: 20px;width: 100%;background-color: #F7F8FA;">
            <i-col span="24" style="text-align: left;padding-left: 10px;">
                <Row class="row-style">
                    <i-col span="1" style="text-align: right;">
                        <p class="region">选择日期</p>
                    </i-col>
                    <i-col span="3" style="padding-left: 10px;">
                        <DatePicker :value="selectDate" type="daterange" split-panels placeholder="请选择日期" @on-change="onChangeDateLister"
                                    style="width: 200px"></DatePicker>
                    </i-col>
                    <i-col span="2" style="text-align: right;">
                        <span class="region">零售公司</span>
                    </i-col>
                    <i-col span="4" style="padding-left: 10px;">
                        <Select v-model="selectedCompany" filterable style="width: 200px;">
                            <Option v-for="item in companyList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                        </Select>
                    </i-col>
                    <i-col span="4">
                        <Button type="primary" @click="generalizeOfRetail">查询</Button>
                    </i-col>
                    <div style="text-align: right;padding-right: 20px;float: right">
                        <Button type="primary" @click="exportZeroExtend" :loading="loading" >导出数据</Button>
                    </div>
                </Row>
            </i-col>
        </Row>


        <Table :loading="tableLoading" ref="table" :columns="columns1" :data="data1" style="margin-top: 20px;" size="small"></Table>
        <Page :total="totalSize" :current="pageNum" :page-size="pageSize" show-elevator show-total
              placement="top" @on-change="handlePage" style="float: right;margin-top: 20px"></Page>
    </div>
</template>

<script>
    import IncreaseData from "../../services/generalize/IncreaseData";

    export default {
        name: "IncreaseDataCompany",
        data() {
            return {
                loading:false,
                selectedCompany: null,
                companyList: [],
                columns1: [
                    {
                        title: '序号',
                        key: 'index',
                        width: '80px'
                    },
                    {
                        title: '零售公司名称',
                        key: 'retailCompany',
                        width: '250px'
                    },
                    {
                        title: '总好友数',
                        key: 'allCustomer'
                    },
                    {
                        title: '总好友数（去重）',
                        key: 'effectiveCustomer'
                    },
                    {
                        title: '新增好友数',
                        key: 'newCustomer',
                        render: (h, params) => {
                            let that = this;
                            if(that.data1[params.index].newCustomer != null){
                                return h('div', [
                                    h('span', {}, that.data1[params.index].newCustomer),
                                ])
                            }else {
                                return h('div', [
                                    h('span', {}, '0'),
                                ])
                            }

                        }
                    },
                    {
                        title: '新增好友数（去重）',
                        key: 'newEffectiveCustomer',
                        render: (h, params) => {
                            let that = this;
                            if(that.data1[params.index].newEffectiveCustomer != null){
                                return h('div', [
                                    h('span', {}, that.data1[params.index].newEffectiveCustomer),
                                ])
                            }else {
                                return h('div', [
                                    h('span', {}, '0'),
                                ])
                            }
                        }
                    },
                    {
                        title: '日增好友平均',
                        key: 'avgNewCustomer',
                        render: (h, params) => {
                            let that = this;
                            if(that.data1[params.index].avgNewCustomer != null){
                                return h('div', [
                                    h('span', {}, that.data1[params.index].avgNewCustomer),
                                ])
                            }else {
                                return h('div', [
                                    h('span', {}, '0'),
                                ])
                            }
                        }
                    },
                    {
                        title: '日增好友平均（去重）',
                        key: 'avgNewEffectiveCustomer',
                        render: (h, params) => {
                            let that = this;
                            if(that.data1[params.index].avgNewEffectiveCustomer != null){
                                return h('div', [
                                    h('span', {}, that.data1[params.index].avgNewEffectiveCustomer),
                                ])
                            }else {
                                return h('div', [
                                    h('span', {}, '0'),
                                ])
                            }
                        }
                    },
                    {
                        title: '删除/拉黑成员客户数（累计）',
                        key: 'delCustomer'
                    },
                    {
                        title: '拉黑率（累计）',
                        key: 'delRate'
                    }
                ],
                data1: [],
                //分页内容
                totalSize: 0,
                pageNum: 1,
                pageSize: 10,
                selectDate: [],
                tableLoading:false,
            }
        },
        mounted: function () {
            let startDate = this.$moment(new Date()).add(-29,"day").format("YYYY-MM-DD");
            let endDate = this.$moment(new Date()).format("YYYY-MM-DD");
            this.selectDate.push(startDate);
            this.selectDate.push(endDate);
            this.allCompany();
            this.generalizeOfRetail();
        },
        methods: {
            onChangeDateLister(date) {
                this.selectDate = date;
            },
            allCompany() {
                let that = this;
                let request = {
                    userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId
                };
                this.companyList = [];
                IncreaseData.listOfRetailCompany(request, function (data) {
                    data = data.data;
                    if (data.code === '0001') {
                        that.$Message.error("查询零售公司出错!");
                        return;
                    }
                    if (data.code === '0000') {
                        that.companyList.push({id:'-1',name:"全部"});
                        that.selectedCompany = "-1";
                        data.results.forEach(da => {
                            that.companyList.push(da);
                        })
                    }
                })
            },
            generalizeOfRetail() {
                this.tableLoading = true;
                if(this.selectDate[0] === ""){
                    this.$Message.info("请选择日期");
                    return
                }
                let orgId = this.selectedCompany;
                if(this.selectedCompany === '-1'){
                    orgId = null;
                }
                let request = {
                    startTime: this.selectDate[0],
                    endTime: this.selectDate[1],
                    orgId: orgId,
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    userId:JSON.parse(sessionStorage.getItem("loginInfo")).userId
                };
                let that = this;
                that.data1 = [];
                IncreaseData.generalizeOfRetail(request, function (data) {
                    that.tableLoading = false;
                    data = data.data;
                    if (data.code === '0001') {
                        that.$Message.info("查询推广数据失败！");
                        return;
                    }
                    if (data.code === '0000') {
                        that.tableLoading = false;
                        that.data1 = data.results.dataVOS;
                        that.totalSize = data.results.sizeNum;
                        if(that.data1){
                            for(let i = 0; i < that.data1.length;i++){
                                that.data1[i].index = (that.pageNum - 1) * that.pageSize + i+1;
                            }
                        }
                    }
                })
            },
            //切页处理
            handlePage: function (value) {
                this.pageNum = value;
                this.generalizeOfRetail();
            },
            //零推广导出
            exportZeroExtend: function(){
                this.loading = true;
                if(this.selectDate[0] === ""){
                    this.$Message.info("请选择日期");
                    return
                }
                let orgId = this.selectedCompany;
                if(this.selectedCompany === '-1'){
                    orgId = null;
                }
                let request = {
                    startTime: this.selectDate[0],
                    endTime: this.selectDate[1],
                    orgId: orgId,
                    pageNum: 1,
                    pageSize: this.totalSize,
                    userId:JSON.parse(sessionStorage.getItem("loginInfo")).userId
                };
                let that = this;
                let originAllData = [];
                IncreaseData.generalizeOfRetail(request,function (data) {
                    if(data.data.code !== "0000"){
                        that.$Message.error("系统异常");
                    }
                    data = data.data.results.dataVOS;
                    if(data && data.length > 0){
                        that.loading = false;
                        for(let i=0;i<data.length;i++){
                            let entity = data[i];
                            entity.index = i+1;
                            originAllData.push(entity);
                        }
                        let title = "零售公司推广情况"+ that.$moment(new Date()).format("YYYY-MM-DD");
                        require.ensure([], () => {
                            const { export_json_to_excel } = require('../../excel/Export2Excel');
                            const tHeader = ['序号', '零售公司名称', '总好友数', '总好友数（去重）', '新增好友数', '新增好友数（去重）','日增好友平均','日增好友平均（去重）','删除/拉黑成员客户数（累计）','拉黑率（累计）'];
                            // 属性名
                            const filterVal = ['index', 'retailCompany', 'allCustomer', 'effectiveCustomer', 'newCustomer', 'newEffectiveCustomer','avgNewCustomer','avgNewEffectiveCustomer','delCustomer','delRate'];
                            // 数据
                              //把data里的tableData存到list
                            const data = that.formatJson(filterVal, originAllData);
                            export_json_to_excel(tHeader, data, title);
                        });
                    }
                    if(!data || data.length === 0){
                        that.$Message.info("暂无数据");
                    }
                });
            },
            formatJson(filterVal, jsonData) {
                return jsonData.map(v => filterVal.map(j => v[j]))
            },
        }
    }
</script>

<style scoped>
    .region {
        font-size: 14px;
        line-height: 32px;
    }

    .row-style {
        padding-top: 20px;
        padding-bottom: 20px;
    }
</style>