项目消费情况统计

src/views/tourism/statisticalReports/projectConsumptionStatistics.vue

@@ -0,0 +1,284 @@
+<template>
+    <div class="app-container">
+      <el-row :gutter="20">
+        <!--用户数据-->
+        <el-col :span="24" :xs="24">
+          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
+            <el-form-item label="刷卡时间" prop="time">
+                <el-date-picker
+                v-model="queryParams.time"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                value-format="yyyy-MM-dd"
+                end-placeholder="结束日期">
+                </el-date-picker>
+            </el-form-item>
+            <el-form-item label="卡号" prop="cardNo">
+                <el-input
+                v-model="queryParams.cardNo"
+                placeholder="请输入卡号"
+                clearable
+                style="width: 200px"
+                />
+            </el-form-item>
+            <el-form-item label="持卡人" prop="name">
+                <el-input
+                v-model="queryParams.name" 
+                placeholder="请输入持卡人姓名"
+                clearable
+                style="width: 200px"
+                />
+            </el-form-item>
+            
+            <el-form-item>
+              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+  
+          <el-row :gutter="10" class="mb8">
+            <!-- <el-col :span="1.5">
+              <el-button
+                type="warning"
+                plain
+                icon="el-icon-download"
+                size="mini"
+                @click="handleExport"
+                v-hasPermi="configPermi.export"
+              >导出</el-button>
+            </el-col> -->
+            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
+          </el-row>
+  
+          <el-table v-loading="loading" border :data="tableList">
+            <el-table-column label="消费项目" align="center" key="projectName" prop="projectName" v-if="columns[0].visible" :show-overflow-tooltip="true" />
+            <el-table-column label="年卡数量" align="center" key="yearCount" prop="yearCount" v-if="columns[1].visible" :show-overflow-tooltip="true" />
+            <el-table-column label="刷卡次数" align="center" key="flushCount" prop="flushCount" v-if="columns[2].visible" :show-overflow-tooltip="true" />
+          </el-table>
+  
+          <pagination
+            v-show="total>0"
+            :total="total"
+            :page.sync="queryParams.pageNum"
+            :limit.sync="queryParams.pageSize"
+            @pagination="getList"
+          />
+        </el-col>
+      </el-row>
+    </div>
+  </template>
+  
+  <script>
+  import { 
+    listTableApi, 
+    delTableParamsApi, 
+    addTableApi
+  } from "@/api/CURD";
+  import moment from "moment";
+  export default {
+    name: "projectConsumptionStatistics",
+    dicts: ['ticket_order_source'],
+    data() {
+      return {
+        title: "消费情况统计",// 通用标题
+        configPermi: {
+          export: ['statisticalReports:projectConsumption:export'],// 导出权限
+        },
+        configUrl: {
+          list: '/merchant/equityCard/projectConsumptionYearCount', // 列表地址
+          delect: '', // 删除地址
+          upload: '',// 导入地址
+          download:'', // 下载模板地址
+          export: '/merchant/equityCard/exportProjectConsumption',// 导出地址
+          edit: '', // 编辑地址
+        },
+        // 遮罩层
+        loading: true,
+        // 选中数组
+        ids: [],
+        // 非单个禁用
+        single: true,
+        // 非多个禁用
+        multiple: true,
+        // 显示搜索条件
+        showSearch: true,
+        // 总条数
+        total: 0,
+        // 用户表格数据
+        tableList: [],
+        // 查询参数
+        queryParams: {
+          pageNum: 1,
+          pageSize: 10,
+          time: [moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
+          cardNo: undefined,
+          name: undefined
+        },
+        dateRange: [],
+        // 控制列表是否显示
+        columns: [
+          { key: 0, label: `消费项目`, visible: true },
+          { key: 1, label: `年卡数量`, visible: true },
+          { key: 2, label: `刷卡次数`, visible: true }
+        ],
+        mergeObj: {}, // 用来记录需要合并行的下标
+        mergeArr: ['reportDate'] // 表格中的列名
+      };
+    },
+    created() {
+      this.getList();
+    },
+    methods: {
+      // 默认接受四个值 { 当前行的值, 当前列的值, 行的下标, 列的下标 }
+      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+          // 判断列的属性
+          if(this.mergeArr.indexOf(column.property) !== -1) { 
+              // 判断其值是不是为0 
+              if(this.mergeObj[column.property][rowIndex]) { 
+                  return [this.mergeObj[column.property][rowIndex], 1]
+              } else {
+                  // 如果为0则为需要合并的行
+                  return [0, 0]; 
+              }
+          }
+      },
+      // getSpanArr方法
+      getSpanArr(data) {
+          this.mergeArr.forEach((key, index1) => {
+              let count = 0; // 用来记录需要合并行的起始位置
+              this.mergeObj[key] = []; // 记录每一列的合并信息
+              data.forEach((item, index) => {
+                  // index == 0表示数据为第一行，直接 push 一个 1
+                  if(index === 0) {
+                      this.mergeObj[key].push(1); 
+                  } else {
+                      // 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1 表示当前行需要合并 并push 一个 0 作为占位
+                      if(item[key] === data[index - 1][key]) { 
+                          this.mergeObj[key][count] += 1;
+                          this.mergeObj[key].push(0);
+                      } else {
+                          // 如果当前行和上一行其值不相等 
+                          count = index; // 记录当前位置 
+                          this.mergeObj[key].push(1); // 重新push 一个 1
+                      }
+                  }
+              })
+          })
+      },
+      /** 查询用户列表 */
+      getList() {
+        if(!this.queryParams.time || this.queryParams.time.length == 0){
+          this.$modal.msgError(`请选择时间!!!`);
+          this.tableList = []
+          this.total = 0
+          return
+        }
+        this.loading = true;
+        let params = {
+          ...this.queryParams,
+          startTime: this.queryParams.time[0],
+          endTime: this.queryParams.time[1]
+        };
+        delete params.time;
+        listTableApi(this.configUrl.list, params)
+          .then(response => {
+            this.tableList = response.rows;
+            this.getSpanArr(this.tableList)
+            this.total = response.total;
+            this.loading = false;
+          })
+          .catch(error => {
+            console.error('获取列表失败!', error);
+            this.tableList = [];
+            this.total = 0;
+            this.loading = false;
+          });
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.queryParams.pageNum = 1;
+        this.getList();
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.queryParams = {
+          pageNum: 1,
+          pageSize: 10,
+          time: [moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
+          cardNo: undefined,
+          name: undefined
+        };
+        this.handleQuery();
+      },
+      // 多选框选中数据
+      handleSelectionChange(selection) {
+        this.ids = selection.map(item => item.id);
+        this.single = selection.length != 1;
+        this.multiple = !selection.length;
+      },
+      /** 新增按钮操作 */
+      handleAdd() {
+        if(this.$refs.addAndEdit) {
+          this.$refs.addAndEdit.initData(this.title + '新增', "ADD",{})
+        }
+      },
+      /** 修改按钮操作 */
+      handleUpdate(row) {
+        if(this.$refs.addAndEdit) {
+          this.$refs.addAndEdit.initData(this.title + '编辑', "EDITInit",{...row})
+        }
+      },
+      handleDetails(row){
+        if(this.$refs.detailsBox) {
+          this.$refs.detailsBox.initData(this.title + '详情',"DEATILSInit", row)
+        }
+      },
+      /** 删除按钮操作 */
+      handleDelete(row) {
+        const ids = row.id || this.ids;
+        this.$modal.confirm('是否确认删除数据项？').then( () => {
+          return delTableParamsApi(this.configUrl.delect,{
+            id: ids
+          });
+        }).then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        }).catch((e) => {
+          console.error("删除失败====",e)
+        });
+      },
+      /** 导出按钮操作 */
+      handleExport() {
+        if(!this.queryParams.time || this.queryParams.time.length == 0){
+          this.$modal.msgError(`请选择时间!!!`);
+          return
+        }
+        let params = {
+          ...this.queryParams,
+          startTime: this.queryParams.time[0],
+          endTime: this.queryParams.time[1]
+        };
+        delete params.time;
+        delete params.pageNum;
+        delete params.pageSize;
+        this.downloadGet(this.configUrl.export, params, `消费情况统计_${new Date().getTime()}.xlsx`);
+      },
+      /** 导入按钮操作 */
+      handleImport() {
+        if(this.$refs.upload) {
+          this.$refs.upload.initData({
+            width: '400px',
+            // 弹出层标题（用户导入）
+            title: this.title + "导入",
+            // 下载模板地址
+            importTemplate: this.configUrl.download,
+            // 上传的地址
+            url: this.configUrl.upload
+          })
+        }
+      },
+    }
+  };
+  </script>
+