ruyi-ui/src/views/stat/writeOff/index.vue

<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="120px">
        <el-form-item label="商户名称" prop="sellers">
          <el-input v-model="queryParams.discountSeller" placeholder="请输入商户名称" clearable @keyup.enter.native="handleQuery"/>
        </el-form-item>
        <el-form-item label="发行社区" prop="community">
          <el-select v-model="queryParams.community" placeholder="请选择">
            <el-option v-for="dict in dict.type.community" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
          </el-select>
        </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-table v-loading="loading" :data="writeOffList" show-summary>
        <el-table-column label="代金劵名称" align="center" prop="discountName" />
        <el-table-column label="商户名称" align="center" prop="discountSeller" />
        <el-table-column label="发行社区" align="center" prop="community" />
        <el-table-column label="发放数" align="center" prop="issuedCount" />
        <el-table-column label="兑换数" align="center" prop="collectCount" />
        <el-table-column label="核销数" align="center" prop="writeOffCount" />
        <el-table-column label="核销金额" align="center" prop="writeOffAmount" />
      </el-table>

      <pagination  v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
    </div>
  </template>

  <script>
  import { writeOffQuery } from "@/api/stat/index";
  export default {
    name: "writeOff",
    dicts: ['community'],
    data() {
      return {
        // 遮罩层
        loading: false,
        // 总条数
        total: 0,
        // 活动管理表格数据
        writeOffList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
        }
      };
    },
    created() {
      this.getList();
    },
    methods: {
      /** 查询活动管理列表 */
      async getList() {
        this.loading = true;
        const res = await writeOffQuery(this.queryParams);
        this.writeOffList = res.data;
        this.total = res.total;
        this.loading = false;
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
    }
  };
  </script>