|  | @@ -0,0 +1,355 @@
 | 
	
		
			
				|  |  | +<!--  -->
 | 
	
		
			
				|  |  | +<template>
 | 
	
		
			
				|  |  | +  <div class="m-container">
 | 
	
		
			
				|  |  | +    <el-page-header
 | 
	
		
			
				|  |  | +      @back="onCancel"
 | 
	
		
			
				|  |  | +      :content="name"
 | 
	
		
			
				|  |  | +      style="margin-bottom: 16px"
 | 
	
		
			
				|  |  | +    ></el-page-header>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    <div class="m-core">
 | 
	
		
			
				|  |  | +      <save-form
 | 
	
		
			
				|  |  | +        :inline="true"
 | 
	
		
			
				|  |  | +        :model="searchForm"
 | 
	
		
			
				|  |  | +        @submit="search"
 | 
	
		
			
				|  |  | +        @reset="onReSet"
 | 
	
		
			
				|  |  | +      >
 | 
	
		
			
				|  |  | +        <el-form-item prop="search" style="margin-bottom: 0;">
 | 
	
		
			
				|  |  | +          <el-input
 | 
	
		
			
				|  |  | +            class="search"
 | 
	
		
			
				|  |  | +            v-model.trim="searchForm.search"
 | 
	
		
			
				|  |  | +            clearable
 | 
	
		
			
				|  |  | +            @keyup.enter.native="
 | 
	
		
			
				|  |  | +              e => {
 | 
	
		
			
				|  |  | +                e.target.blur();
 | 
	
		
			
				|  |  | +                $refs.searchForm.save();
 | 
	
		
			
				|  |  | +                search();
 | 
	
		
			
				|  |  | +              }
 | 
	
		
			
				|  |  | +            "
 | 
	
		
			
				|  |  | +            placeholder="用户姓名/手机号"
 | 
	
		
			
				|  |  | +          ></el-input>
 | 
	
		
			
				|  |  | +        </el-form-item>
 | 
	
		
			
				|  |  | +        <el-form-item prop="organId" style="margin-bottom: 0;">
 | 
	
		
			
				|  |  | +          <el-select
 | 
	
		
			
				|  |  | +            class="multiple"
 | 
	
		
			
				|  |  | +            style="width: 180px !important"
 | 
	
		
			
				|  |  | +            v-model.trim="searchForm.organId"
 | 
	
		
			
				|  |  | +            filterable
 | 
	
		
			
				|  |  | +            clearable
 | 
	
		
			
				|  |  | +            placeholder="请选择城市"
 | 
	
		
			
				|  |  | +          >
 | 
	
		
			
				|  |  | +            <el-option
 | 
	
		
			
				|  |  | +              v-for="(item, index) in selects.branchs"
 | 
	
		
			
				|  |  | +              :key="index"
 | 
	
		
			
				|  |  | +              :label="item.name"
 | 
	
		
			
				|  |  | +              :value="item.id"
 | 
	
		
			
				|  |  | +            ></el-option>
 | 
	
		
			
				|  |  | +          </el-select>
 | 
	
		
			
				|  |  | +        </el-form-item>
 | 
	
		
			
				|  |  | +        <el-form-item prop="paymentStatus" style="margin-bottom: 0;">
 | 
	
		
			
				|  |  | +          <el-select
 | 
	
		
			
				|  |  | +            class="multiple"
 | 
	
		
			
				|  |  | +            style="width: 180px !important"
 | 
	
		
			
				|  |  | +            v-model.trim="searchForm.paymentStatus"
 | 
	
		
			
				|  |  | +            filterable
 | 
	
		
			
				|  |  | +            clearable
 | 
	
		
			
				|  |  | +            placeholder="请选择状态"
 | 
	
		
			
				|  |  | +          >
 | 
	
		
			
				|  |  | +            <el-option label="已缴费" value="PAID"></el-option>
 | 
	
		
			
				|  |  | +            <el-option label="未缴费" value="NO"></el-option>
 | 
	
		
			
				|  |  | +            <el-option label="已退费" value="REFUND"></el-option>
 | 
	
		
			
				|  |  | +          </el-select>
 | 
	
		
			
				|  |  | +        </el-form-item>
 | 
	
		
			
				|  |  | +        <el-form-item style="margin-bottom: 0;">
 | 
	
		
			
				|  |  | +          <el-button native-type="submit" type="primary">搜索</el-button>
 | 
	
		
			
				|  |  | +          <el-button native-type="reset" type="danger">重置</el-button>
 | 
	
		
			
				|  |  | +          <el-button v-auth="'tempDirectorTrainingDetailCamp/export'" type="primary" @click="onExport">导出</el-button>
 | 
	
		
			
				|  |  | +        </el-form-item>
 | 
	
		
			
				|  |  | +      </save-form>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +      <el-row :gutter="20">
 | 
	
		
			
				|  |  | +        <el-col :span="12">
 | 
	
		
			
				|  |  | +          <statistic :col="6" class="statistic" :cols="12">
 | 
	
		
			
				|  |  | +              <statistic-item>
 | 
	
		
			
				|  |  | +                <span>
 | 
	
		
			
				|  |  | +                  报名人数
 | 
	
		
			
				|  |  | +                </span>
 | 
	
		
			
				|  |  | +                <span> <count-to :endVal="head.applyCount || 0" /> </span>
 | 
	
		
			
				|  |  | +              </statistic-item>
 | 
	
		
			
				|  |  | +              <statistic-item>
 | 
	
		
			
				|  |  | +                <span>
 | 
	
		
			
				|  |  | +                  缴费人数
 | 
	
		
			
				|  |  | +                </span>
 | 
	
		
			
				|  |  | +                <span> <count-to :endVal="head.payCount || 0" /> </span>
 | 
	
		
			
				|  |  | +              </statistic-item>
 | 
	
		
			
				|  |  | +              <statistic-item>
 | 
	
		
			
				|  |  | +                <span>
 | 
	
		
			
				|  |  | +                  早鸟人数
 | 
	
		
			
				|  |  | +                </span>
 | 
	
		
			
				|  |  | +                <span> <count-to :endVal="head.birdCount || 0" /> </span>
 | 
	
		
			
				|  |  | +              </statistic-item>
 | 
	
		
			
				|  |  | +              <statistic-item>
 | 
	
		
			
				|  |  | +                <span>
 | 
	
		
			
				|  |  | +                  收款金额
 | 
	
		
			
				|  |  | +                </span>
 | 
	
		
			
				|  |  | +                <span>
 | 
	
		
			
				|  |  | +                  <count-to
 | 
	
		
			
				|  |  | +                    :endVal="head.payAmount || 0"
 | 
	
		
			
				|  |  | +                    :duration="300"
 | 
	
		
			
				|  |  | +                    :decimals="2"
 | 
	
		
			
				|  |  | +                    :class="'des'"
 | 
	
		
			
				|  |  | +                  />
 | 
	
		
			
				|  |  | +                </span>
 | 
	
		
			
				|  |  | +              </statistic-item>
 | 
	
		
			
				|  |  | +            </statistic>
 | 
	
		
			
				|  |  | +        </el-col>
 | 
	
		
			
				|  |  | +      </el-row>
 | 
	
		
			
				|  |  | +      
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +      <div class="tableWrap" style="margin-bottom: 0;">
 | 
	
		
			
				|  |  | +        <el-table
 | 
	
		
			
				|  |  | +          style="width: 100%"
 | 
	
		
			
				|  |  | +          :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
 | 
	
		
			
				|  |  | +          :data="tableList"
 | 
	
		
			
				|  |  | +        >
 | 
	
		
			
				|  |  | +          <el-table-column align="center" label="姓名" prop="username">
 | 
	
		
			
				|  |  | +          </el-table-column>
 | 
	
		
			
				|  |  | +          <el-table-column
 | 
	
		
			
				|  |  | +            align="center"
 | 
	
		
			
				|  |  | +            prop="mobile"
 | 
	
		
			
				|  |  | +            label="联系电话"
 | 
	
		
			
				|  |  | +          ></el-table-column>
 | 
	
		
			
				|  |  | +          <el-table-column
 | 
	
		
			
				|  |  | +            align="center"
 | 
	
		
			
				|  |  | +            prop="cardNo"
 | 
	
		
			
				|  |  | +            label="身份证号"
 | 
	
		
			
				|  |  | +          ></el-table-column>
 | 
	
		
			
				|  |  | +          <el-table-column
 | 
	
		
			
				|  |  | +            align="center"
 | 
	
		
			
				|  |  | +            prop="organName"
 | 
	
		
			
				|  |  | +            label="所在城市"
 | 
	
		
			
				|  |  | +          >
 | 
	
		
			
				|  |  | +            <template slot-scope="scope">
 | 
	
		
			
				|  |  | +              {{ scope.row.province || '--' }}/{{ scope.row.city || '--' }}/{{ scope.row.region || '--' }}
 | 
	
		
			
				|  |  | +            </template>
 | 
	
		
			
				|  |  | +          </el-table-column>
 | 
	
		
			
				|  |  | +          <el-table-column
 | 
	
		
			
				|  |  | +            align="center"
 | 
	
		
			
				|  |  | +            prop="job"
 | 
	
		
			
				|  |  | +            label="目前从事职业"
 | 
	
		
			
				|  |  | +          ></el-table-column>
 | 
	
		
			
				|  |  | +          <el-table-column
 | 
	
		
			
				|  |  | +            align="center"
 | 
	
		
			
				|  |  | +            prop="subjectName"
 | 
	
		
			
				|  |  | +            label="第一主专业"
 | 
	
		
			
				|  |  | +          ></el-table-column>
 | 
	
		
			
				|  |  | +          <el-table-column
 | 
	
		
			
				|  |  | +            align="center"
 | 
	
		
			
				|  |  | +            prop="study"
 | 
	
		
			
				|  |  | +            label="之前乐队指导基础"
 | 
	
		
			
				|  |  | +          ></el-table-column>
 | 
	
		
			
				|  |  | +          <el-table-column
 | 
	
		
			
				|  |  | +            align="center"
 | 
	
		
			
				|  |  | +            prop="studyTarget"
 | 
	
		
			
				|  |  | +            label="目标效果"
 | 
	
		
			
				|  |  | +          >
 | 
	
		
			
				|  |  | +            <template slot-scope="scope">
 | 
	
		
			
				|  |  | +              <Tooltip :content="scope.row.studyTarget" />
 | 
	
		
			
				|  |  | +            </template>
 | 
	
		
			
				|  |  | +          </el-table-column>
 | 
	
		
			
				|  |  | +          <el-table-column
 | 
	
		
			
				|  |  | +            align="center"
 | 
	
		
			
				|  |  | +            prop="suggestion"
 | 
	
		
			
				|  |  | +            label="需求或建议"
 | 
	
		
			
				|  |  | +          >
 | 
	
		
			
				|  |  | +            <template slot-scope="scope">
 | 
	
		
			
				|  |  | +              <Tooltip :content="scope.row.suggestion" />
 | 
	
		
			
				|  |  | +            </template>
 | 
	
		
			
				|  |  | +          </el-table-column>
 | 
	
		
			
				|  |  | +          <el-table-column
 | 
	
		
			
				|  |  | +            align="center"
 | 
	
		
			
				|  |  | +            prop="paymentStatus"
 | 
	
		
			
				|  |  | +            label="缴费状态"
 | 
	
		
			
				|  |  | +          >
 | 
	
		
			
				|  |  | +            <template slot-scope="scope">
 | 
	
		
			
				|  |  | +              {{ scope.row.paymentStatus | paymentStatus }}
 | 
	
		
			
				|  |  | +            </template>
 | 
	
		
			
				|  |  | +          </el-table-column>
 | 
	
		
			
				|  |  | +          <el-table-column align="center" prop="buyAmount" label="缴费金额">
 | 
	
		
			
				|  |  | +            <template slot-scope="scope">
 | 
	
		
			
				|  |  | +              <div>{{ scope.row.paymentAmount | moneyFormat }}元</div>
 | 
	
		
			
				|  |  | +            </template></el-table-column
 | 
	
		
			
				|  |  | +          >
 | 
	
		
			
				|  |  | +          <el-table-column
 | 
	
		
			
				|  |  | +            align="center"
 | 
	
		
			
				|  |  | +            prop="organName"
 | 
	
		
			
				|  |  | +            label="缴费时间"
 | 
	
		
			
				|  |  | +          ></el-table-column>
 | 
	
		
			
				|  |  | +        </el-table>
 | 
	
		
			
				|  |  | +        <pagination
 | 
	
		
			
				|  |  | +          sync
 | 
	
		
			
				|  |  | +          :total.sync="rules.total"
 | 
	
		
			
				|  |  | +          :page.sync="rules.page"
 | 
	
		
			
				|  |  | +          :limit.sync="rules.limit"
 | 
	
		
			
				|  |  | +          :page-sizes="rules.page_size"
 | 
	
		
			
				|  |  | +          @pagination="getList"
 | 
	
		
			
				|  |  | +        />
 | 
	
		
			
				|  |  | +      </div>
 | 
	
		
			
				|  |  | +    </div>
 | 
	
		
			
				|  |  | +  </div>
 | 
	
		
			
				|  |  | +</template>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +<script>
 | 
	
		
			
				|  |  | +import Tooltip from "@/components/Tooltip/index";
 | 
	
		
			
				|  |  | +import CountTo from "vue-count-to";
 | 
	
		
			
				|  |  | +import pagination from "@/components/Pagination/index";
 | 
	
		
			
				|  |  | +import { getCountCloudTeacherList } from "./api";
 | 
	
		
			
				|  |  | +import { Export } from "@/utils/downLoadFile";
 | 
	
		
			
				|  |  | +import cleanDeep from "clean-deep";
 | 
	
		
			
				|  |  | +import qs from "qs";
 | 
	
		
			
				|  |  | +import { areaQueryTree } from '../organManager/api'
 | 
	
		
			
				|  |  | +import { api_tempDirectorTrainingDetailCampPage, api_tempDirectorTrainingDetailCampPageStat, api_tempDirectorTrainingDetailCampExport } from './api' 
 | 
	
		
			
				|  |  | +export default {
 | 
	
		
			
				|  |  | +  components: { pagination, CountTo, Tooltip },
 | 
	
		
			
				|  |  | +  data() {
 | 
	
		
			
				|  |  | +    return {
 | 
	
		
			
				|  |  | +      name: this.$route.query.name,
 | 
	
		
			
				|  |  | +      searchForm: {
 | 
	
		
			
				|  |  | +        search: null,
 | 
	
		
			
				|  |  | +        paymentStatus: null,
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  | +      head: {
 | 
	
		
			
				|  |  | +        applyCount: null,
 | 
	
		
			
				|  |  | +        payCount: null,
 | 
	
		
			
				|  |  | +        birdCount: null,
 | 
	
		
			
				|  |  | +        payAmount: null
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  | +      tableList: [],
 | 
	
		
			
				|  |  | +      rules: {
 | 
	
		
			
				|  |  | +        // 分页规则
 | 
	
		
			
				|  |  | +        limit: 10, // 限制显示条数
 | 
	
		
			
				|  |  | +        page: 1, // 当前页
 | 
	
		
			
				|  |  | +        total: 0, // 总条数
 | 
	
		
			
				|  |  | +        page_size: [10, 20, 40, 50] // 选择限制显示条数
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    };
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  async mounted() {
 | 
	
		
			
				|  |  | +    // this.getArea()
 | 
	
		
			
				|  |  | +    this.getListStat()
 | 
	
		
			
				|  |  | +    this.getList();
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  methods: {
 | 
	
		
			
				|  |  | +    async getArea() {
 | 
	
		
			
				|  |  | +      try {
 | 
	
		
			
				|  |  | +        const { data } = await areaQueryTree({
 | 
	
		
			
				|  |  | +          delFlag: 0
 | 
	
		
			
				|  |  | +        })
 | 
	
		
			
				|  |  | +        console.log(data)
 | 
	
		
			
				|  |  | +      } catch {}
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    async getListStat() {
 | 
	
		
			
				|  |  | +      try {
 | 
	
		
			
				|  |  | +        const { data } = await api_tempDirectorTrainingDetailCampPageStat({
 | 
	
		
			
				|  |  | +          tempDirectorTrainingCampId: this.$route.query.id,
 | 
	
		
			
				|  |  | +          ...this.searchForm
 | 
	
		
			
				|  |  | +        });
 | 
	
		
			
				|  |  | +        this.head = {
 | 
	
		
			
				|  |  | +          applyCount: data.applyCount || 0,
 | 
	
		
			
				|  |  | +          payCount: data.payCount || 0,
 | 
	
		
			
				|  |  | +          birdCount: data.birdCount || 0,
 | 
	
		
			
				|  |  | +          payAmount: data.payAmount || 0 
 | 
	
		
			
				|  |  | +        };
 | 
	
		
			
				|  |  | +      } catch (e) {
 | 
	
		
			
				|  |  | +        console.log(e);
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    async getList() {
 | 
	
		
			
				|  |  | +      try {
 | 
	
		
			
				|  |  | +        const res = await api_tempDirectorTrainingDetailCampPage({
 | 
	
		
			
				|  |  | +          tempDirectorTrainingCampId: this.$route.query.id,
 | 
	
		
			
				|  |  | +          ...this.searchForm
 | 
	
		
			
				|  |  | +        });
 | 
	
		
			
				|  |  | +        this.tableList = res.data.rows;
 | 
	
		
			
				|  |  | +        this.rules.total = row.data.total || 0
 | 
	
		
			
				|  |  | +      } catch (e) {
 | 
	
		
			
				|  |  | +        console.log(e);
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    search() {
 | 
	
		
			
				|  |  | +      this.rules.page = 1;
 | 
	
		
			
				|  |  | +      this.getListStat()
 | 
	
		
			
				|  |  | +      this.getList();
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    onReSet() {
 | 
	
		
			
				|  |  | +      this.searchForm.search = null
 | 
	
		
			
				|  |  | +      this.searchForm.paymentStatus = null
 | 
	
		
			
				|  |  | +      this.search();
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    async onExport() {
 | 
	
		
			
				|  |  | +      
 | 
	
		
			
				|  |  | +      this.$confirm(`您确定导出${this.name}?`, "提示", {
 | 
	
		
			
				|  |  | +        confirmButtonText: "确定",
 | 
	
		
			
				|  |  | +        cancelButtonText: "取消",
 | 
	
		
			
				|  |  | +        type: "warning"
 | 
	
		
			
				|  |  | +      }).then(async () => {
 | 
	
		
			
				|  |  | +        try {
 | 
	
		
			
				|  |  | +          let obj = {
 | 
	
		
			
				|  |  | +            tempDirectorTrainingCampId: this.$route.query.id,
 | 
	
		
			
				|  |  | +            ...this.searchForm
 | 
	
		
			
				|  |  | +          };
 | 
	
		
			
				|  |  | +          const { data } = await api_tempDirectorTrainingDetailCampExport(obj)
 | 
	
		
			
				|  |  | +          let link = document.createElement("a");
 | 
	
		
			
				|  |  | +          let fname = data.fileName || "导出文件.xls"; //下载文件的名字
 | 
	
		
			
				|  |  | +          link.href = data.downloadPath;
 | 
	
		
			
				|  |  | +          link.setAttribute("download", fname);
 | 
	
		
			
				|  |  | +          document.body.appendChild(link);
 | 
	
		
			
				|  |  | +          link.click();
 | 
	
		
			
				|  |  | +          document.body.removeChild(link)
 | 
	
		
			
				|  |  | +        } catch {
 | 
	
		
			
				|  |  | +          // 
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      }).catch(error => {
 | 
	
		
			
				|  |  | +        that.$message.error('下载失败,请联系管理员');
 | 
	
		
			
				|  |  | +      });
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    onCancel() {
 | 
	
		
			
				|  |  | +      this.$store.dispatch("delVisitedViews", this.$route);
 | 
	
		
			
				|  |  | +      this.$router.push("/bandGuidanceTraining");
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  filters: {
 | 
	
		
			
				|  |  | +    paymentStatus(val) {
 | 
	
		
			
				|  |  | +      let template = {
 | 
	
		
			
				|  |  | +        PAID: "已缴费",
 | 
	
		
			
				|  |  | +        NO: "未缴费",
 | 
	
		
			
				|  |  | +        REFUND: "已退费"
 | 
	
		
			
				|  |  | +      };
 | 
	
		
			
				|  |  | +      return template[val];
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +};
 | 
	
		
			
				|  |  | +</script>
 | 
	
		
			
				|  |  | +<style lang="scss" scoped>
 | 
	
		
			
				|  |  | +.titleCell {
 | 
	
		
			
				|  |  | +  display: inline-block;
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +.tableWrap {
 | 
	
		
			
				|  |  | +  margin-top: 20px;
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +.qrcode {
 | 
	
		
			
				|  |  | +  display: flex;
 | 
	
		
			
				|  |  | +  flex-direction: column;
 | 
	
		
			
				|  |  | +  align-items: center;
 | 
	
		
			
				|  |  | +  img {
 | 
	
		
			
				|  |  | +    width: 200px;
 | 
	
		
			
				|  |  | +    height: 200px;
 | 
	
		
			
				|  |  | +    margin: 0 auto;
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +.code-url {
 | 
	
		
			
				|  |  | +  font-size: 18px;
 | 
	
		
			
				|  |  | +  text-align: center;
 | 
	
		
			
				|  |  | +  padding: 15px 15px 0 15px;
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +</style>
 |