|
|
@@ -0,0 +1,206 @@
|
|
|
+<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>
|
