dy-admin-manager/src/views/reportForm/index.vue

<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>
      报表中心
    </h2>
    <div class="m-core">
      <div class="m-wrap">
        <div class="title">课酬导出：</div>
        <el-date-picker
          v-model="mouth"
          type="month"
          placeholder="选择月"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
        <!-- <el-select v-model.trim="courseScheduleType"
                   style="marginLeft:10px"
                   filterable
                   clearable
                   multiple
                   placeholder="课程类型">
          <el-option v-for="(item, index) in courseArray"
                     :key="index"
                     :label="item.label"
                     :value="item.value"></el-option>
        </el-select> -->
        <el-button
          style="margin-left: 10px"
          type="primary"
          @click="exportSalar"
          v-permission="'export/teacherSalary'"
          >导出</el-button
        >
        <el-tooltip placement="top" popper-class="mTooltip">
          <div slot="content">将只导出当前选择月份已结算的课程课酬。</div>
          <i
            class="el-icon-question micon el-tooltip"
            style="font-size: 18px; color: #f56c6c"
            v-permission="'export/teacherSalary'"
          ></i>
        </el-tooltip>
      </div>
      <el-divider></el-divider>
      <div class="m-core">
        <div class="m-wrap">
          <div class="title">乐团招生汇总：</div>
          <select-all
            v-model.trim="organIdList"
            class="organSelect"
            style="width: 100%"
            filterable
            placeholder="请选择分部"
            multiple
            clearable
          >
            <el-option
              v-for="(item, index) in selects.branchs"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </select-all>
          <el-button
            style="margin-left: 10px"
            type="primary"
            @click="exportMusicGroup"
            v-permission="'export/musicGroupRegister'"
            >导出</el-button
          >
          <el-tooltip placement="top" popper-class="mTooltip">
            <div slot="content">
              请选择分部后，导出招生情况汇总表，分部可多选
            </div>
            <i
              class="el-icon-question micon el-tooltip"
              v-permission="'export/musicGroupRegister'"
              style="font-size: 18px; color: #f56c6c"
            ></i>
          </el-tooltip>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="m-core">
        <div class="m-wrap">
          <div class="title">老师默认课酬：</div>
          <select-all
            v-model.trim="teacherDefaultSalaryOrganId"
            class="organSelect"
            style="width: 100%"
            filterable
            placeholder="请选择分部"
            multiple
            clearable
          >
            <el-option
              v-for="(item, index) in selects.branchs"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </select-all>

          <el-button
            style="margin-left: 10px"
            type="primary"
            @click="exportDefaultSalary"
            v-permission="'export/teacherDefaultSalary'"
            >导出</el-button
          >
          <el-tooltip placement="top" popper-class="mTooltip">
            <div slot="content">请选择分部后，导出老师列表及老师课酬信息</div>
            <i
              class="el-icon-question micon el-tooltip"
              style="font-size: 18px; color: #f56c6c"
              v-permission="'export/teacherDefaultSalary'"
            ></i>
          </el-tooltip>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="m-core">
        <div class="m-wrap">
          <div class="title">乐团在读人数：</div>
          <select-all
            v-model.trim="musicTeamNum"
            class="organSelect"
            style="width: 100%"
            filterable
            multiple
            placeholder="请选择分部"
            clearable
          >
            <el-option
              v-for="(item, index) in selects.branchs"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </select-all>
          <el-button
            style="margin-left: 10px"
            type="primary"
            @click="exportMusicTeamNum"
            v-permission="'export/musicGroupNormalStudentNum'"
            >导出</el-button
          >
          <el-tooltip placement="top" popper-class="mTooltip">
            <div slot="content">请选择分部后，导出乐团在读人数信息</div>
            <i
              class="el-icon-question micon el-tooltip"
              style="font-size: 18px; color: #f56c6c"
              v-permission="'export/teacherDefaultSalary'"
            ></i>
          </el-tooltip>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="m-core">
        <div class="m-wrap">
          <div class="title">回款统计：</div>
          <select-all
            v-model.trim="studentOrganId"
            class="organSelect"
            style="width: 100%"
            filterable
            placeholder="请选择分部"
            multiple
            clearable
          >
            <el-option
              v-for="(item, index) in selects.branchs"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </select-all>
          <el-date-picker
            style="margin-left: 15px"
            v-model="studentMonth"
            type="month"
            placeholder="选择月"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
          <el-button
            style="margin-left: 10px"
            type="primary"
            @click="exportStudent"
            v-permission="'export/studentOrder'"
            >导出</el-button
          >
          <el-tooltip placement="top" popper-class="mTooltip">
            <div slot="content">请选择分部和月份，导出回款统计</div>
            <i
              class="el-icon-question micon el-tooltip"
              style="font-size: 18px; color: #f56c6c"
              v-permission="'export/studentOrder'"
            ></i>
          </el-tooltip>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="m-core">
        <div class="m-wrap">
          <div class="title">学生考勤：</div>
          <select-all
            v-model.trim="attendanceOrganId"
            class="organSelect"
            style="width: 100%"
            filterable
            multiple
            placeholder="请选择分部"
            clearable
          >
            <el-option
              v-for="(item, index) in selects.branchs"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </select-all>
          <el-select
            v-model.trim="attendanceCourseType"
            class="organSelect"
            style="margin-left: 15px; width: 100%"
            filterable
            placeholder="请选择课程类型"
          >
            <el-option
              v-for="(item, index) in courseListType"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-date-picker
            v-model.trim="timer"
            style="width: 420px; margin-left: 15px"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="上课开始日期"
            end-placeholder="上课结束日期"
            :picker-options="{
              firstDayOfWeek: 1,
            }"
          ></el-date-picker>
          <el-button
            style="margin-left: 10px"
            type="primary"
            @click="exportAttendance"
            v-permission="'export/exportStudentAttendances'"
            >导出</el-button
          >
        </div>
      </div>
      <el-divider></el-divider>
      <div class="m-core">
        <div class="m-wrap">
          <div class="title">课程余额明细：</div>
          <select-all
            v-model.trim="AccountOrganId"
            class="organSelect"
            style="width: 100%"
            filterable
            multiple
            placeholder="请选择分部"
            clearable
          >
            <el-option
              v-for="(item, index) in selects.branchs"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </select-all>
          <el-date-picker
            v-model.trim="AccountTimer"
            style="width: 420px; margin-left: 15px"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="{
              firstDayOfWeek: 1,
            }"
          ></el-date-picker>
          <el-button
            style="margin-left: 10px"
            type="primary"
            @click="exportAccount"
            v-permission="'export/userCoursesAccount/4388'"
            >导出</el-button
          >
        </div>
      </div>
      <el-divider></el-divider>
      <div class="m-core">
        <div class="m-wrap">
          <div class="title">账户余额明细：</div>
          <select-all
            v-model.trim="AccountDetailOrganId"
            class="organSelect"
            style="width: 100%"
            filterable
            multiple
            placeholder="请选择分部"
            clearable
          >
            <el-option
              v-for="(item, index) in selects.branchs"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </select-all>
          <el-date-picker
            v-model.trim="AccountDetailTimer"
            style="width: 420px; margin-left: 15px"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="{
              firstDayOfWeek: 1,
            }"
          ></el-date-picker>
          <el-button
            style="margin-left: 10px"
            type="primary"
            @click="exportDetailAccount"
            v-permission="'export/userCashAccountDetail/4389'"
            >导出</el-button
          >
        </div>
      </div>
      <el-divider></el-divider>
      <div class="m-core">
        <div class="m-wrap">
          <div class="title">乐保订单导出：</div>
          <el-date-picker
            v-model="leBaoTimer"
            style="width: 420px; margin-left: 15px"
            type="monthrange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始月份"
            end-placeholder="结束月份"
          >
          </el-date-picker>
          <el-button
            style="margin-left: 10px"
            type="primary"
            @click="exportLeBao"
            v-permission="'studentInstrument/export'"
            >导出</el-button
          >
          <!-- <el-tooltip placement="top"
                      popper-class="mTooltip">
            <div slot="content">
              请选择分部和月份，导出回款统计
            </div>
            <i class="el-icon-question micon el-tooltip"
               style="font-size: 18px; color: #F56C6C"
               v-permission="'export/studentOrder'"></i>
          </el-tooltip> -->
        </div>
      </div>
      <el-divider></el-divider>
      <div class="m-core">
        <div class="m-wrap">
          <div class="title">云教练学员统计：</div>
          <el-select
            v-model.trim="trainOrganId"
            class="organSelect"
            style="width: 100%"
            filterable
            placeholder="请选择分部"
            clearable
          >
            <el-option
              v-for="(item, index) in selects.branchs"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
          <el-button
            style="margin-left: 10px"
            type="primary"
            @click="exportTrain"
            v-permission="'export/cloudStudyStudentTrainData'"
            >导出</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { exportTeacherSalary } from "@/api/generalSettings";
import { courseType, courseListType } from "@/utils/searchArray";
import { Export } from "@/utils/downLoadFile";
import cleanDeep from "clean-deep";
import dayjs from "dayjs";
import axios from "axios";
import qs from "qs";
import { getToken } from "@/utils/auth";
import load from "@/utils/loading";
export default {
  name: "reportForm",
  data() {
    return {
      mouth: "",
      organIdList: [],
      teacherDefaultSalaryOrganId: "",
      courseArray: courseType,
      courseListType,
      courseScheduleType: [],
      musicTeamNum: [],
      studentOrganId: "",
      studentMonth: "",
      attendanceOrganId: [],
      attendanceCourseType: "MUSIC",
      timer: [],
      leBaoTimer: [],
      AccountOrganId: [],
      AccountTimer: [],
      AccountDetailOrganId: [],
      AccountDetailTimer: [],
      trainOrganId: null,
    };
  },
  mounted() {
    this.$store.dispatch("setBranchs");
  },
  methods: {
    exportSalar() {
      if (!this.mouth) {
        this.$message.error("请选择导出月份");
        return;
      }
      // let courseTypeList = this.courseScheduleType.join(',')
      let url = "/api-web/export/teacherSalary";
      let data = { date: this.mouth };
      const options = {
        method: "POST",
        headers: {
          Authorization: getToken(),
        },
        data: qs.stringify(cleanDeep(data)),
        url,
        responseType: "blob",
      };
      this.$confirm("您确定导出课酬", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          load.startLoading();
          axios(options)
            .then((res) => {
              let blob = new Blob([res.data], {
                // type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
                type: "application/vnd.ms-excel;charset=utf-8",
                //word文档为application/msword,pdf文档为application/pdf,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8
              });

              let text = new Response(blob).text();
              text.then((res) => {
                // 判断是否报错
                if (res.indexOf("code") != -1) {
                  let json = JSON.parse(res);
                  this.$message.error(json.msg);
                } else {
                  let objectUrl = URL.createObjectURL(blob);
                  let link = document.createElement("a");
                  let nowTime = new Date();
                  let ymd =
                    nowTime.getFullYear() +
                    "" +
                    (nowTime.getMonth() + 1) +
                    "" +
                    nowTime.getDate();
                  let fname = ymd + "课酬.xls"; //下载文件的名字
                  link.href = objectUrl;
                  link.setAttribute("download", fname);
                  document.body.appendChild(link);
                  link.click();
                }
              });
              load.endLoading();
            })
            .catch((error) => {
              this.$message.error("导出数据失败，请联系管理员");
              load.endLoading();
            });
        })
        .catch(() => {});
    },
    exportMusicGroup() {
      if (this.organIdList.length < 1) {
        this.$message.error("请至少选择一个分部");
        return;
      }
      let url = "/api-web/export/musicGroupRegister";
      let data = { organIds: this.organIdList.join(",") };
      const options = {
        method: "POST",
        headers: {
          Authorization: getToken(),
        },
        data: qs.stringify(cleanDeep(data)),
        url,
        responseType: "blob",
      };
      this.$confirm("您确定导出招生情况汇总表", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          load.startLoading();
          axios(options)
            .then((res) => {
              let blob = new Blob([res.data], {
                // type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
                type: "application/vnd.ms-excel;charset=utf-8",
                //word文档为application/msword,pdf文档为application/pdf,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8
              });

              let text = new Response(blob).text();
              text.then((res) => {
                // 判断是否报错
                if (res.indexOf("code") != -1) {
                  let json = JSON.parse(res);
                  this.$message.error(json.msg);
                } else {
                  let objectUrl = URL.createObjectURL(blob);
                  let link = document.createElement("a");
                  let nowTime = new Date();
                  let ymd =
                    nowTime.getFullYear() +
                    "" +
                    (nowTime.getMonth() + 1) +
                    "" +
                    nowTime.getDate();
                  let fname = ymd + "招生情况汇总表.xls"; //下载文件的名字
                  link.href = objectUrl;
                  link.setAttribute("download", fname);
                  document.body.appendChild(link);
                  link.click();
                }
              });
              load.endLoading();
            })
            .catch((error) => {
              this.$message.error("导出数据失败，请联系管理员");
              load.endLoading();
            });
        })
        .catch(() => {});
    },
    exportDefaultSalary() {
      let organIdList = this.teacherDefaultSalaryOrganId.join(",");
      let url = "/api-web/export/teacherDefaultSalary";
      let data = { organIdList };
      const options = {
        method: "POST",
        headers: {
          Authorization: getToken(),
        },
        data: qs.stringify(cleanDeep(data)),
        url,
        responseType: "blob",
      };
      this.$confirm("您确定导出老师默认课酬表", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          load.startLoading();
          axios(options)
            .then((res) => {
              let blob = new Blob([res.data], {
                // type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
                type: "application/vnd.ms-excel;charset=utf-8",
                //word文档为application/msword,pdf文档为application/pdf,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8
              });

              let text = new Response(blob).text();
              text.then((res) => {
                // 判断是否报错
                if (res.indexOf("code") != -1) {
                  let json = JSON.parse(res);
                  this.$message.error(json.msg);
                } else {
                  let objectUrl = URL.createObjectURL(blob);
                  let link = document.createElement("a");
                  let nowTime = new Date();
                  let ymd =
                    nowTime.getFullYear() +
                    "" +
                    (nowTime.getMonth() + 1) +
                    "" +
                    nowTime.getDate();
                  let fname = ymd + "老师默认课酬表.xls"; //下载文件的名字
                  link.href = objectUrl;
                  link.setAttribute("download", fname);
                  document.body.appendChild(link);
                  link.click();
                }
              });
              load.endLoading();
            })
            .catch((error) => {
              this.$message.error("导出数据失败，请联系管理员");
              load.endLoading();
            });
        })
        .catch(() => {});
    },
    exportMusicTeamNum() {
      let organIds = this.musicTeamNum.join(",");
      let url = "/api-web/export/musicGroupNormalStudentNum";
      let data = { organIds };
      const options = {
        method: "POST",
        headers: {
          Authorization: getToken(),
        },
        data: qs.stringify(cleanDeep(data)),
        url,
        responseType: "blob",
      };
      this.$confirm("您确定导出乐团在读人数", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          load.startLoading();
          axios(options)
            .then((res) => {
              let blob = new Blob([res.data], {
                // type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
                type: "application/vnd.ms-excel;charset=utf-8",
                //word文档为application/msword,pdf文档为application/pdf,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8
              });

              let text = new Response(blob).text();
              text.then((res) => {
                // 判断是否报错
                if (res.indexOf("code") != -1) {
                  let json = JSON.parse(res);
                  this.$message.error(json.msg);
                } else {
                  let objectUrl = URL.createObjectURL(blob);
                  let link = document.createElement("a");
                  let nowTime = new Date();
                  let ymd =
                    nowTime.getFullYear() +
                    "" +
                    (nowTime.getMonth() + 1) +
                    "" +
                    nowTime.getDate();
                  let fname = ymd + "乐团在读人数.xls"; //下载文件的名字
                  link.href = objectUrl;
                  link.setAttribute("download", fname);
                  document.body.appendChild(link);
                  link.click();
                }
              });
              load.endLoading();
            })
            .catch((error) => {
              this.$message.error("导出数据失败，请联系管理员");
              load.endLoading();
            });
        })
        .catch(() => {});
    },
    exportStudent() {
      if (!this.studentMonth) {
        this.$message.error("请选择导出月份");
        return;
      }
      let studentOrganId = this.studentOrganId.join(",");
      let url = "/api-web/export/studentOrder";
      let data = { organIds: studentOrganId, date: this.studentMonth };
      const options = {
        method: "POST",
        headers: {
          Authorization: getToken(),
        },
        data: qs.stringify(cleanDeep(data)),
        url,
        responseType: "blob",
      };
      this.$confirm("您确定导出回款统计", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          load.startLoading();
          axios(options)
            .then((res) => {
              let blob = new Blob([res.data], {
                // type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
                type: "application/vnd.ms-excel;charset=utf-8",
                //word文档为application/msword,pdf文档为application/pdf,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8
              });

              let text = new Response(blob).text();
              text.then((res) => {
                // 判断是否报错
                if (res.indexOf("code") != -1) {
                  let json = JSON.parse(res);
                  this.$message.error(json.msg);
                } else {
                  let objectUrl = URL.createObjectURL(blob);
                  let link = document.createElement("a");
                  let nowTime = new Date();
                  let ymd =
                    nowTime.getFullYear() +
                    "" +
                    (nowTime.getMonth() + 1) +
                    "" +
                    nowTime.getDate();
                  let fname = ymd + "回款统计.xls"; //下载文件的名字
                  link.href = objectUrl;
                  link.setAttribute("download", fname);
                  document.body.appendChild(link);
                  link.click();
                }
              });
              load.endLoading();
            })
            .catch((error) => {
              this.$message.error("导出数据失败，请联系管理员");
              load.endLoading();
            });
        })
        .catch(() => {});
    },
    exportAttendance() {
      let classStartDate, classEndDate;
      if (this.timer && this.timer.length > 0) {
        classStartDate = this.timer[0];
        classEndDate = this.timer[1];
      } else {
        classStartDate = null;
        classEndDate = null;
      }
      Export(
        this,
        {
          url: "/api-web/export/exportStudentAttendances",
          fileName: "学生考勤.xls",
          method: "post",
          params: qs.stringify({
            organId: this.attendanceOrganId.join(","),
            groupType: this.attendanceCourseType,
            classStartDate,
            classEndDate,
          }),
        },
        "您确定导出学生考勤?"
      );
    },
    exportTrain() {
      if (!this.trainOrganId) {
        this.$message.error("请选择分部");
        return;
      }
      Export(
        this,
        {
          url: "/api-web/export/cloudStudyStudentTrainData",
          fileName: "云教练学员统计.xls",
          method: "post",
          params: qs.stringify({
            organId: this.trainOrganId
          }),
        },
        "您确定导出云教练学员统计?"
      );
    },
    exportLeBao() {
      let endTime, startTime;
      if (this.leBaoTimer && this.leBaoTimer.length > 1) {
        startTime = this.leBaoTimer[0];
        let end = this.leBaoTimer[1];
        end = new Date(end);
        end = new Date(end.getFullYear(), end.getMonth() + 1, 0);
        endTime = dayjs(end).format("YYYY-MM-DD");
      } else {
        this.$message.error("请选择导出月份");
        return;
      }
      Export(
        this,
        {
          url: "/api-web/studentInstrument/export",
          fileName: "乐保订单.xls",
          method: "get",
          params: { startTime: startTime, endTime: endTime },
        },
        "您确定导出乐保订单?"
      );
    },
    exportAccount(){
      let endTime, startTime;
      if (this.AccountTimer && this.AccountTimer.length > 1) {
        startTime = this.AccountTimer[0];
        endTime = this.AccountTimer[1];
      }else{
        startTime=null;
        endTime=null;
      }
      Export(
        this,
        {
          url: "/api-web/export/userCoursesAccount",
          fileName: "课程余额明细.xls",
          method: "post",
          params: qs.stringify({ startTime: startTime, endTime: endTime,organId: this.AccountOrganId.join(",") }),
        },
        "您确定导出课程余额明细?"
      );
    },
    exportDetailAccount(){
      let endTime, startTime;
      if (this.AccountDetailTimer && this.AccountDetailTimer.length > 1) {
        startTime = this.AccountDetailTimer[0];
        endTime = this.AccountDetailTimer[1];

      }else{
        startTime=null;
        endTime=null;
      }
      Export(
        this,
        {
          url: "/api-web/export/userCashAccountDetail",
          fileName: "账户余额明细.xls",
          method: "post",
          params:qs.stringify( { startTime: startTime, endTime: endTime,organId: this.AccountDetailOrganId.join(",") })
        },
        "您确定导出账户余额明细?"
      );
    }
  },
  // AccountDetailTimer
};
</script>
<style lang="scss" scoped>
.m-container {
  .m-core {
    margin-top: 20px;
    .m-wrap {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      width: 100%;
      // align-items: center;
      .newBand {
        margin: 0 5px 0 10px;
      }
      .title {
        width: 150px;
        height: 40px;
        line-height: 40px;
        text-align: right;
        color: #606266;
      }
      .organSelect {
        width: 220px !important;
      }
      .el-tooltip.micon {
        width: 20px;
        height: 20px;
        position: relative;
        top: 12px;
      }
    }
  }
}
/deep/.el-input__icon.el-icon-date {
  height: 40px !important;
}
</style>