|
|
@@ -0,0 +1,225 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <el-form class="search-form" :inline="true">
|
|
|
+<!-- <el-form-item label="销售名称">-->
|
|
|
+<!-- <el-input-->
|
|
|
+<!-- v-model="userName"-->
|
|
|
+<!-- placeholder="请输入销售名称"-->
|
|
|
+<!-- clearable-->
|
|
|
+<!-- size="small"-->
|
|
|
+<!-- @keyup.enter.native="handleQuery"-->
|
|
|
+<!-- />-->
|
|
|
+<!-- </el-form-item>-->
|
|
|
+ <el-form-item label="创建时间">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="daterangeCreateTime"
|
|
|
+ size="small"
|
|
|
+ style="width: 240px"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="-"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ ></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button
|
|
|
+ type="cyan"
|
|
|
+ icon="el-icon-search"
|
|
|
+ @click="handleQuery"
|
|
|
+ v-hasPermi="['company:statistics:redPacket']"
|
|
|
+ >搜索</el-button>
|
|
|
+ <el-button
|
|
|
+ type="warning"
|
|
|
+ icon="el-icon-download"
|
|
|
+ @click="handleExport"
|
|
|
+ v-hasPermi="['company:statistics:exportRedPacket']"
|
|
|
+ >导出</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <el-table
|
|
|
+ :data="statisticsList"
|
|
|
+ border
|
|
|
+ :summary-method="getSummaries"
|
|
|
+ show-summary
|
|
|
+ max-height="500"
|
|
|
+ style="width: 100%;"
|
|
|
+ v-loading="loading"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ prop="userName"
|
|
|
+ label="销售"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="userCount"
|
|
|
+ label="用户数"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="newUserCount"
|
|
|
+ label="新增用户数"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="finishCount"
|
|
|
+ label="完课数"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="redPacketAmount"
|
|
|
+ label="红包金额"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { redPacketStatisticsBySales, exportRedPacketStatisticsBySales } from "@/api/company/statistics";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'RedPacketStatistics',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 遮罩层
|
|
|
+ loading: true,
|
|
|
+ // 统计数据
|
|
|
+ statisticsList: [],
|
|
|
+ // 销售名称
|
|
|
+ userName: undefined,
|
|
|
+ // 创建时间范围
|
|
|
+ daterangeCreateTime: [],
|
|
|
+ // 查询参数
|
|
|
+ queryParams: {
|
|
|
+ userName: null,
|
|
|
+ startDate: null,
|
|
|
+ endDate: null
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // 设置默认时间为今天
|
|
|
+ const today = this.formatDate(new Date());
|
|
|
+ this.daterangeCreateTime = [today, today];
|
|
|
+
|
|
|
+ this.getStatisticsList();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /** 格式化日期 */
|
|
|
+ formatDate(date) {
|
|
|
+ const year = date.getFullYear();
|
|
|
+ const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
|
+ const day = String(date.getDate()).padStart(2, '0');
|
|
|
+ return `${year}-${month}-${day}`;
|
|
|
+ },
|
|
|
+ /** 查询统计列表 */
|
|
|
+ getStatisticsList() {
|
|
|
+ this.loading = true;
|
|
|
+
|
|
|
+ // 处理时间参数
|
|
|
+ if (null != this.daterangeCreateTime && '' != this.daterangeCreateTime) {
|
|
|
+ this.queryParams.startDate = this.daterangeCreateTime[0] + ' 00:00:00';
|
|
|
+ this.queryParams.endDate = this.daterangeCreateTime[1] + ' 23:59:59';
|
|
|
+ } else {
|
|
|
+ this.queryParams.startDate = null;
|
|
|
+ this.queryParams.endDate = null;
|
|
|
+ }
|
|
|
+ this.queryParams.userName = this.userName;
|
|
|
+
|
|
|
+ redPacketStatisticsBySales(this.queryParams).then((response) => {
|
|
|
+ console.log('返回数据:', response);
|
|
|
+ // 根据返回的数据结构,可能是 list 或者 rows
|
|
|
+ this.statisticsList = response.list || response.rows || response.data || [];
|
|
|
+ this.loading = false;
|
|
|
+ }).catch(() => {
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 搜索按钮操作 */
|
|
|
+ handleQuery() {
|
|
|
+ this.queryParams.pageNum = 1;
|
|
|
+ this.getStatisticsList();
|
|
|
+ },
|
|
|
+ /** 重置按钮操作 */
|
|
|
+ resetQuery() {
|
|
|
+ this.userName = null;
|
|
|
+ const today = this.formatDate(new Date());
|
|
|
+ this.daterangeCreateTime = [today, today];
|
|
|
+ this.handleQuery();
|
|
|
+ },
|
|
|
+ /** 导出按钮操作 */
|
|
|
+ handleExport() {
|
|
|
+ this.$confirm('是否确认导出所有红包统计数据项?', "警告", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning"
|
|
|
+ }).then(() => {
|
|
|
+ // 处理时间参数
|
|
|
+ if (null != this.daterangeCreateTime && '' != this.daterangeCreateTime) {
|
|
|
+ this.queryParams.startDate = this.daterangeCreateTime[0] + ' 00:00:00';
|
|
|
+ this.queryParams.endDate = this.daterangeCreateTime[1] + ' 23:59:59';
|
|
|
+ } else {
|
|
|
+ this.queryParams.startDate = null;
|
|
|
+ this.queryParams.endDate = null;
|
|
|
+ }
|
|
|
+ this.queryParams.userName = this.userName;
|
|
|
+
|
|
|
+ return exportRedPacketStatisticsBySales(this.queryParams);
|
|
|
+ }).then(response => {
|
|
|
+ this.download(response.msg);
|
|
|
+ }).catch(() => {});
|
|
|
+ },
|
|
|
+ /** 合计行 */
|
|
|
+ getSummaries(param) {
|
|
|
+ const { columns, data } = param;
|
|
|
+ const sums = [];
|
|
|
+ columns.forEach((column, index) => {
|
|
|
+ if (index === 0) {
|
|
|
+ sums[index] = '总计';
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const values = data.map(item => Number(item[column.property]));
|
|
|
+ if (!values.every(value => isNaN(value))) {
|
|
|
+ sums[index] = values.reduce((prev, curr) => {
|
|
|
+ const value = Number(curr);
|
|
|
+ if (!isNaN(value)) {
|
|
|
+ return prev + curr;
|
|
|
+ } else {
|
|
|
+ return prev;
|
|
|
+ }
|
|
|
+ }, 0);
|
|
|
+ // 红包金额保留两位小数
|
|
|
+ if (column.property === 'redPacketAmount') {
|
|
|
+ sums[index] = sums[index].toFixed(2);
|
|
|
+ } else {
|
|
|
+ sums[index] = Math.round(sums[index]);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ sums[index] = '';
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return sums;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.app-container {
|
|
|
+ border: 1px solid #e6e6e6;
|
|
|
+ padding: 12px;
|
|
|
+ background-color: white;
|
|
|
+
|
|
|
+ .search-form {
|
|
|
+ margin: 20px 30px 0px 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .el-table__footer-wrapper {
|
|
|
+ .cell {
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|