|
@@ -0,0 +1,201 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="80px">
|
|
|
+ <el-form-item label="门店">
|
|
|
+ <el-select v-model="queryParams.storeId" placeholder="请选择门店" clearable filterable>
|
|
|
+ <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="开卡时间">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="dateRange"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
|
|
+ <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
|
|
+ <el-button type="success" icon="el-icon-download" @click="handleExport">导出</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <el-table :data="rawList" border style="width: 100%">
|
|
|
+ <el-table-column label="门店" prop="storeName" fixed="left" />
|
|
|
+ <!-- 累计数据 -->
|
|
|
+ <el-table-column label="累计数据" align="center">
|
|
|
+ <el-table-column label="卡张数" prop="totalCardCount" />
|
|
|
+ <el-table-column label="充值现金" prop="totalRechargeAmount" />
|
|
|
+ <el-table-column label="赠送" prop="totalGiveAmount" />
|
|
|
+ <el-table-column label="福利" prop="totalWelfareAmount" />
|
|
|
+ <el-table-column label="现金消耗" prop="totalConsumeRechargeAmount" />
|
|
|
+ <el-table-column label="赠送消耗" prop="totalConsumeGiveAmount" />
|
|
|
+ <el-table-column label="福利消耗" prop="totalConsumeWelfareAmount" />
|
|
|
+ </el-table-column>
|
|
|
+ <!-- 使用中数据 -->
|
|
|
+ <el-table-column label="使用中数据" align="center">
|
|
|
+ <el-table-column label="有效卡张数" prop="validCardCount" />
|
|
|
+ <el-table-column label="剩余现金" prop="validRechargeBalance" />
|
|
|
+ <el-table-column label="剩余赠送" prop="validGiveBalance" />
|
|
|
+ <el-table-column label="剩余福利" prop="validWelfareBalance" />
|
|
|
+ <el-table-column label="过期赠送余额" prop="expiredGiveBalance" />
|
|
|
+ <el-table-column label="已消耗现金" prop="usedConsumeRechargeAmount" />
|
|
|
+ <el-table-column label="已消耗赠送" prop="usedConsumeGiveAmount" />
|
|
|
+ <el-table-column label="已消耗福利" prop="usedConsumeWelfareAmount" />
|
|
|
+ </el-table-column>
|
|
|
+ <!-- 已退款数据 -->
|
|
|
+ <el-table-column label="已退款数据" align="center">
|
|
|
+ <el-table-column label="退款卡张数" prop="refundCardCount" />
|
|
|
+ <el-table-column label="退款现金" prop="refundRechargeBalance" />
|
|
|
+ <el-table-column label="退款赠送" prop="refundGiveBalance" />
|
|
|
+ <el-table-column label="退款福利" prop="refundWelfareBalance" />
|
|
|
+ </el-table-column>
|
|
|
+ <!-- 未激活数据 -->
|
|
|
+ <el-table-column label="未激活数据" align="center">
|
|
|
+ <el-table-column label="卡片数量" prop="inactiveCardCount" />
|
|
|
+ <el-table-column label="总现金" prop="inactiveRechargeAmount" />
|
|
|
+ <el-table-column label="总赠送" prop="inactiveGiveAmount" />
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <pagination
|
|
|
+ v-show="total>0"
|
|
|
+ :total="total"
|
|
|
+ :page.sync="queryParams.pageNum"
|
|
|
+ :limit.sync="queryParams.pageSize"
|
|
|
+ @pagination="getList"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { listStoreCardStatistics, exportStoreCardStatistics } from '@/api/statistics/storeCard'
|
|
|
+import { allOrg } from '@/api/system/store'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'StoreCardTotal',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ queryParams: {
|
|
|
+ storeId: undefined,
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ beginTime: undefined,
|
|
|
+ endTime: undefined
|
|
|
+ },
|
|
|
+ dateRange: [],
|
|
|
+ storeList: [],
|
|
|
+ total: 0,
|
|
|
+ rawList: [],
|
|
|
+ groups: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getStoreList()
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getStoreList() {
|
|
|
+ allOrg({ sourceType: '02' }).then(res => {
|
|
|
+ this.storeList = res.data
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getList() {
|
|
|
+ if (this.dateRange && this.dateRange.length === 2) {
|
|
|
+ this.queryParams.beginTime = this.dateRange[0]
|
|
|
+ this.queryParams.endTime = this.dateRange[1]
|
|
|
+ } else {
|
|
|
+ this.queryParams.beginTime = undefined
|
|
|
+ this.queryParams.endTime = undefined
|
|
|
+ }
|
|
|
+ listStoreCardStatistics(this.queryParams).then(res => {
|
|
|
+ this.rawList = res.rows
|
|
|
+ this.total = res.total
|
|
|
+ this.buildGroups()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleQuery() {
|
|
|
+ this.queryParams.pageNum = 1
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ resetQuery() {
|
|
|
+ this.queryParams = { pageNum: 1, pageSize: 10 }
|
|
|
+ this.dateRange = []
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ handleExport() {
|
|
|
+ exportStoreCardStatistics(this.queryParams).then(res => {
|
|
|
+ const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
|
|
|
+ const link = document.createElement('a')
|
|
|
+ link.href = window.URL.createObjectURL(blob)
|
|
|
+ link.download = '门店会员卡统计.xlsx'
|
|
|
+ link.click()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ buildGroups() {
|
|
|
+ // 分组数据
|
|
|
+ this.groups = [
|
|
|
+ {
|
|
|
+ key: 'total',
|
|
|
+ label: '累计',
|
|
|
+ columns: [
|
|
|
+ { label: '累计卡张数', prop: 'totalCardCount' },
|
|
|
+ { label: '累计充值现金', prop: 'totalRechargeAmount' },
|
|
|
+ { label: '累计赠送', prop: 'totalGiveAmount' },
|
|
|
+ { label: '累计福利', prop: 'totalWelfareAmount' },
|
|
|
+ { label: '累计消耗现金', prop: 'totalConsumeRechargeAmount' },
|
|
|
+ { label: '累计消耗赠送', prop: 'totalConsumeGiveAmount' },
|
|
|
+ { label: '累计消耗福利', prop: 'totalConsumeWelfareAmount' }
|
|
|
+ ],
|
|
|
+ data: this.rawList
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'valid',
|
|
|
+ label: '使用中',
|
|
|
+ columns: [
|
|
|
+ { label: '有效卡张数', prop: 'validCardCount' },
|
|
|
+ { label: '有效剩余现金', prop: 'validRechargeBalance' },
|
|
|
+ { label: '有效剩余赠送', prop: 'validGiveBalance' },
|
|
|
+ { label: '有效剩余福利', prop: 'validWelfareBalance' },
|
|
|
+ { label: '已过期赠送余额', prop: 'expiredGiveBalance' },
|
|
|
+ { label: '已消耗现金', prop: 'usedConsumeRechargeAmount' },
|
|
|
+ { label: '已消耗赠送', prop: 'usedConsumeGiveAmount' },
|
|
|
+ { label: '已消耗福利', prop: 'usedConsumeWelfareAmount' }
|
|
|
+ ],
|
|
|
+ data: this.rawList
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'refund',
|
|
|
+ label: '已退款',
|
|
|
+ columns: [
|
|
|
+ { label: '退款卡张数', prop: 'refundCardCount' },
|
|
|
+ { label: '退款现金', prop: 'refundRechargeBalance' },
|
|
|
+ { label: '退款赠送', prop: 'refundGiveBalance' },
|
|
|
+ { label: '退款福利', prop: 'refundWelfareBalance' }
|
|
|
+ ],
|
|
|
+ data: this.rawList
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'inactive',
|
|
|
+ label: '未激活',
|
|
|
+ columns: [
|
|
|
+ { label: '未激活卡片数量', prop: 'inactiveCardCount' },
|
|
|
+ { label: '未激活总现金', prop: 'inactiveRechargeAmount' },
|
|
|
+ { label: '未激活总赠送', prop: 'inactiveGiveAmount' }
|
|
|
+ ],
|
|
|
+ data: this.rawList
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.mb8 {
|
|
|
+ margin-bottom: 8px;
|
|
|
+}
|
|
|
+</style>
|