java-collect-fees-front/src/views/mis/reportManagement/ghStatistics-index.vue

<template>
    <div class="mis-pageBox">
        <!-- 主页 -->
        <el-container>
            <el-header height="75px">
                <el-row>
                    <el-col :span="24">
                        <div style="display:flex;align-items:center;">
                            <!--区域联动组件：公司、片区、抄表册-->
                            <cpsLinkageArea :queryParams="queryParams" widthValue="180px"></cpsLinkageArea>&nbsp;
                            关 键 字：&nbsp;<el-input v-model="queryParams.searchText" size="small" style="width:180px;"
                                placeholder="输入关键字" clearable @keyup.enter.native="clickQuery()" />
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="22">
                        <div style="height:41px;display:flex;align-items:center;">
                            操作时间：&nbsp;<el-date-picker v-model="dprCreatedDate" type="datetimerange"
                                :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期"
                                end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" align="right"
                                :default-time="['00:00:00', '23:59:59']" size="small" style="width:438px;" @change="() => {
                                    if (this.dprCreatedDate && this.dprCreatedDate.length > 0) {
                                        this.queryParams.operatorDate_Start = this.dprCreatedDate[0];
                                        this.queryParams.operatorDate_End = this.dprCreatedDate[1];
                                    } else {
                                        this.queryParams.operatorDate_Start = undefined;
                                        this.queryParams.operatorDate_End = undefined;
                                    }
                                }">
                            </el-date-picker>&nbsp;
                            <el-button type="primary" size="small" icon="el-icon-search"
                                @click="clickQuery()">查询</el-button>
                        </div>
                    </el-col>
                    <el-col :span="2" class="list-opCol">
                        <el-popover placement="top-start" title="提示" width="200" trigger="hover"
                            content="数据量大时等待时间可能较长，请您耐心等待！">
                            <el-button slot="reference" type="info" size="small" icon="el-icon-document"
                                @click="clickExport()">导出</el-button>
                        </el-popover>
                        <!-- <el-button type="info" size="small" icon="el-icon-document" @click="clickExport()">导出</el-button> -->
                    </el-col>
                </el-row>
            </el-header>
            <el-main>
                <tfTable :table-data="dataList" :column="columns" :for-id="false" :pagination="true"
                    :currentpage="pageInfo.current" :pagesize="pageInfo.size" :total="pageInfo.tableTotal" :border="true"
                    :multiple="false" :fixed="true" :isdelete="false" :is-select="false" :stripe="true"
                    @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange"
                    @sortChange="onCustomerSortChange" />
            </el-main>
        </el-container>

    </div>
</template>
  
<script>
import '@/views/mis/common/assets/styles/misStyle.scss'
import { DateHelper, FileHelper } from '@/views/mis/common/assets/scripts/utils.js'
import { CustomerGh } from '@/views/mis/common/api/customerManagement.js'
import tfTable from '@/components/TableAuto/index.vue'
import cpsLinkageArea from '@/views/mis/common/components/cps-linkageArea.vue';
export default {
    components: { cpsLinkageArea, tfTable },
    props: ['data'],
    data() {
        return {
            /* ----- 主页 ----- */
            queryParams: {
                companyBranch: undefined,//公司
                mrArea: undefined,//片区
                mrBook: undefined,//抄表本
                searchText: undefined,//模糊查询
                operatorDate_Start: undefined,//开始日期                
                operatorDate_End: undefined//结束日期
            },
            pageInfo: { current: 1, size: 20, tableTotal: 1, 'orders[0].asc': 'true', 'orders[0].column': 'operatorDate' }, // 分页数据
            columns: [
                // {
                //     label: '所属片区',
                //     prop: 'mrArea',
                //     align: 'left'
                // },
                {
                    label: '所属表册',
                    prop: 'mrBook',
                    align: 'left'
                },
                {
                    label: '用户编号',
                    prop: 'customerNo',
                    align: 'center',
                    sortable: true
                },
                {
                    label: '原用户姓名',
                    prop: 'oldCustomerName',
                    align: 'center'
                },
                {
                    label: '新用户姓名',
                    prop: 'newCustomerName',
                    align: 'center'
                },
                {
                    label: '原联系电话',
                    prop: 'oldPhone',
                    align: 'center'
                },
                {
                    label: '新联系电话',
                    prop: 'newCustomerPhone',
                    align: 'center'
                },
                {
                    label: '原用户地址',
                    prop: 'oldCustomerAddr',
                    align: 'left'
                },
                {
                    label: '新用户地址',
                    prop: 'newCustomerAddr',
                    align: 'left'
                },
                {
                    label: '操作时间',
                    prop: 'operatorDate',
                    align: 'center',
                    sortable: true,
                    formatter: function (row, column, value, index) {
                        return DateHelper.formatterTime(value);
                    }
                },
                {
                    label: '操作人员',
                    prop: 'operatorOname',
                    align: 'center'
                }
            ],
            dataList: [], // 表格数据

            dprCreatedDate: [],
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            }
        }
    },
    created() {

    },
    mounted() {
        this.bindList();
    },
    methods: {
        /* ----- 方法 ----- */
        /**
         * @description 绑定列表
         */
        bindList() {
            // 追加分页参数
            let params = Object.assign({}, this.pageInfo, this.queryParams);

            this.dataList = []
            CustomerGh.query(params).then((res) => {
                if (res.code !== 1) {
                    this.$message.error('查询失败!')
                    return
                }
                // 数据总数
                this.pageInfo.tableTotal = res.result.total
                this.dataList = res.result.records
            }).catch((ex) => {
                this.$message.error("查询失败！");
            }).finally(() => {
            });
        },
        /* ----- dom事件 ----- */
        /**
         * @description 查询
         */
        clickQuery() {
            this.pageInfo.current = 1
            this.bindList()
        },
        async clickExport() {
            // 追加分页参数
            let params = Object.assign({}, this.queryParams);
            await CustomerGh.exportFile(params).then((res) => {
                FileHelper.exportExcel(res, '更名过户统计.xlsx');
            }).catch((ex) => {
                this.$message.error("导出失败！");
            }).finally(() => {
            });
        },

        /* ----- 组件事件 ----- */
        /**
         * @description 改变当前页
         */
        handleCurrentChange(current) {
            this.pageInfo.current = current
            this.bindList()
        },
        /**
         * @description 分页每页条数
         */
        handleSizeChange(size) {
            this.pageInfo.size = size
            this.bindList()
        },
        //排序事件
        onCustomerSortChange(arrOrder) {
            this.pageInfo['orders[0].asc'] = arrOrder[0];
            this.pageInfo['orders[0].column'] = arrOrder[1];
            this.bindList();
        }
    }
}
</script>