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>

        <div class="newBand"
             @click="exportSalar"
             v-permission="'export/teacherSalary'">导出</div>
        <el-tooltip placement="top"
                    popper-class="mTooltip">
          <div slot="content">
            将只导出当前选择月份已结算的课程课酬。
          </div>
          <!-- <img :src="imageIcon" class="micon el-tooltip" style="width:8px height:8px" alt /> -->
          <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>
          <el-select v-model.trim="organIdList"
                     class="organSelect"
                     style="width:100%"
                     filterable
                     multiple
                     clearable>
            <el-option v-for="(item,index) in organList"
                       :key="index"
                       :label="item.name"
                       :value="item.id"></el-option>
          </el-select>

          <div class="newBand"
               @click="exportMusicGroup"
               v-permission="'export/musicGroupRegister'">导出</div>
          <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>
          <el-select v-model.trim="teacherDefaultSalaryOrganId"
                     class="organSelect"
                     style="width:100%"
                     filterable
                     clearable>
            <el-option v-for="(item,index) in organList"
                       :key="index"
                       :label="item.name"
                       :value="item.id"></el-option>
          </el-select>

          <div class="newBand"
               @click="exportDefaultSalary"
               v-permission="'export/teacherDefaultSalary'">导出</div>
          <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>
    </div>
  </div>
</template>
<script>
import { exportTeacherSalary } from '@/api/generalSettings'
import { getEmployeeOrgan } from "@/api/buildTeam";
import axios from 'axios'
import {
  getToken
} from '@/utils/auth'
import load from '@/utils/loading'
import qs from 'qs'
export default {
  name: "reportForm",
  data () {
    return {
      mouth: "",
      organList: [],
      organIdList: [],
      teacherDefaultSalaryOrganId: ''
      // imageIcon: require("@/assets/images/base/warning.png")
    };
  },
  mounted () {
    getEmployeeOrgan().then(res => {
      if (res.code == 200) {
        this.organList = res.data;
      }
    });
  },
  methods: {
    exportSalar () {
      if (!this.mouth) {
        this.$message.error('请选择导出月份')
        return
      }
      let url = '/api-web/export/teacherSalary'
      let data = { date: this.mouth }
      const options = {
        method: 'POST',
        headers: {
          'Authorization': getToken()
        },
        data: qs.stringify(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 + '课酬' //下载文件的名字
              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(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 + '招生情况汇总表' //下载文件的名字
              link.href = objectUrl
              link.setAttribute("download", fname)
              document.body.appendChild(link)
              link.click()
            }
          })
          load.endLoading();
        }).catch(error => {
          this.$message.error('导出数据失败，请联系管理员');
          load.endLoading();
        })
      }).catch(() => { })
    },
    exportDefaultSalary () {
      if (!this.teacherDefaultSalaryOrganId) {
        this.$message.error('请选择一个分部')
        return
      }

      let url = '/api-web/export/teacherDefaultSalary'
      let data = { organId: this.teacherDefaultSalaryOrganId }
      const options = {
        method: 'POST',
        headers: {
          'Authorization': getToken()
        },
        data: qs.stringify(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 + '老师默认课酬表' //下载文件的名字
              link.href = objectUrl
              link.setAttribute("download", fname)
              document.body.appendChild(link)
              link.click()
            }
          })
          load.endLoading();
        }).catch(error => {
          this.$message.error('导出数据失败，请联系管理员');
          load.endLoading();
        })
      }).catch(() => { })
    }
  }

};
</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: 120px;
        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>