ylrz_his_scrm_adminUI/src/views/course/courseRedPacketStatistics/index.vue

<template>
  <div class="course-red-packet-statistics">
    <!-- 查询条件 -->
    <el-card class="search-card">
      <el-form :model="queryForm" ref="queryForm" label-width="80px" inline>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="公司名" prop="companyId">
              <el-select filterable style="width: 220px" v-model="queryForm.companyId" @change="handleSeller" placeholder="请选择公司名" clearable size="small">
                <el-option
                  v-for="item in companys"
                  :key="item.companyId"
                  :label="item.companyName"
                  :value="item.companyId"
                />
              </el-select>
            </el-form-item>
          </el-col>
          
          <el-col :span="6">
            <el-form-item label="员工" prop="nickName" v-if="queryForm.companyId">
              <el-select v-model="queryForm.companyUserId" remote placeholder="请选择" filterable clearable  style="width: 100%;" @keyup.enter.native="handleQuery">
                <el-option
                  v-for="dict in companyUserList"
                  :key="dict.userId"
                  :label="`${dict.nickName}`"
                  :value="dict.userId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          
          <el-col :span="6">
            <el-form-item label="创建时间" prop="createTime">
              <el-date-picker v-model="createTime" size="small" style="width: 220px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" @change="change"></el-date-picker>
            </el-form-item>
          </el-col>
          
          <el-col :span="6">
            <el-form-item label="状态" prop="status">
              <el-select v-model="queryForm.status" placeholder="请选择状态" clearable style="width: 100%">
                <el-option label="全部" value=""></el-option>
                <el-option label="发送中" value="0"></el-option>
                <el-option label="已发送" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row>
          <el-col :span="24" class="text-right">
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="resetQuery">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    
    <!-- 统计结果 -->
    <el-card class="result-card">
      <div slot="header">
        <span>红包发送统计</span>
      </div>
      
      <el-table :data="statisticsData" border style="width: 100%" v-loading="loading">
        <el-table-column prop="companyName" label="公司名称" align="center"></el-table-column>
        <el-table-column prop="nickName" label="员工姓名" align="center"></el-table-column>
        <el-table-column prop="companyUserId" label="员工编号" align="center"></el-table-column>
        <el-table-column prop="redPacketNum" label="红包数" align="center"></el-table-column>
        <el-table-column prop="redPacketTotalMoney" label="总金额(元)" align="center">
          <template slot-scope="scope">
            {{ scope.row.redPacketTotalMoney.toFixed(2) }}
          </template>
        </el-table-column>
      </el-table>
      
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageInfo.currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import {getCompanyList} from "@/api/company/company";
import {getUserList} from "@/api/company/companyUser";
import {list} from "@/api/course/courseRedPacketStatistics";
export default {
  name: 'CourseRedPacketStatistics',
  data() {
    return {
      companys:[],
      companyUserList:[],
      createTime: [],
      queryForm: {
        companyId: '',
        companyUserId: '',
        startTime:null,
        endTime:null,
        status: ''
      },
      statisticsData: [],
      loading: false,
      pageInfo: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  mounted() {
    this.getList()
  },
  created() {
      getCompanyList().then(response => {
          this.companys = response.data;
          if(this.companys!=null&&this.companys.length>0){
            this.companyId=this.companys[0].companyId;
          }
      });
    },
  methods: {
    
    
    handleSearch() {
      this.pageInfo.currentPage = 1
      this.getList();
    },
    change() {
      if (this.createTime) {
        this.queryForm.startTime = this.createTime[0];
        this.queryForm.endTime = this.createTime[1];
      } else {
        this.queryForm.startTime = null;
        this.queryForm.endTime = null;
      }
    },
    handleSeller(){
      console.log(this.queryForm.companyId)
      if(this.queryForm.companyId != null) {
        getUserList(this.queryForm.companyId).then(res=>{
          if(res.code === 200) {
            this.companyUserList = res.data
          }
        })
      }
    },
    
    resetQuery() {
      this.$refs.queryForm.resetFields()
      this.queryForm.dateRange = []
      this.handleSearch()
    },
    
    getList() {
      this.loading = true
      // 查询统计
      list(this.queryForm).then(response => {
        this.statisticsData = response.data.list;
        this.pageInfo.total = response.data.total;
        this.loading = false;
      });
    },
    
    handleSizeChange(val) {
      this.pageInfo.pageSize = val
      this.pageInfo.currentPage = 1
      this.getList()
    },
    
    handleCurrentChange(val) {
      this.pageInfo.currentPage = val
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.course-red-packet-statistics {
  padding: 20px;
  
  .search-card {
    margin-bottom: 20px;
  }
  
  .result-card {
    .pagination-container {
      margin-top: 20px;
      text-align: right;
    }
  }
  
  .text-right {
    text-align: right;
  }
}
</style>