dy-admin-manager/src/views/teamDetail/components/baseInfo.vue

<template>
  <div class='basea-container'>
    <div class="baseTop">
      <div class="left">
        <el-form :inline="true"
                 :model="topForm">
          <el-form-item label="乐团编号">
            <el-input v-model.trim="topForm.num"
                      disabled></el-input>
          </el-form-item>
          <el-form-item label="教务老师">
            <el-input v-model.trim="topForm.teacher"
                      disabled></el-input>
            <!-- <el-select>
              <el-option label="啦啦啦"
                         value="1"></el-option>
            </el-select> -->
          </el-form-item>
          <el-form-item label="所属分部">
            <el-input v-model.trim="topForm.section"
                      disabled></el-input>
            <!-- <el-select v-model.trim="topForm.section">
              <el-option label="啦啦啦"
                         value="1"></el-option>
            </el-select> -->
          </el-form-item>
          <el-form-item label="乐队指导">
            <el-input v-model.trim="topForm.boss"
                      disabled></el-input>
            <!-- <el-select v-model.trim="topForm.boss">
              <el-option label="啦啦啦"
                         value="1"></el-option>
            </el-select> -->
          </el-form-item>
          <el-form-item label="合作单位">
            <el-input v-model.trim="topForm.cooperate"
                      disabled></el-input>
            <!-- <el-select v-model.trim="topForm.cooperate">
              <el-option label="啦啦啦"
                         value="1"></el-option>
            </el-select> -->
          </el-form-item>
          <el-form-item label="上课地点">
            <el-input v-model.trim="topForm.add"
                      disabled
                      style="width:370px;"></el-input>
          </el-form-item>
          <el-form-item label="收费类型">
            <el-input v-model.trim="topForm.type"
                      disabled></el-input>
            <!-- <el-select v-model.trim="topForm.type">
              <el-option label="啦啦啦"
                         value="1"></el-option>
            </el-select> -->
          </el-form-item>
          <!-- <el-form-item label="课酬结算标准">
            <el-select v-model.trim="topForm.salary">
              <el-option label="课时默认结算"
                         value="TEACHER_DEFAULT"></el-option>
              <el-option label="课时梯度结算"
                         value="GRADIENT_SALARY"></el-option>
            </el-select>
          </el-form-item> -->
        </el-form>
        <el-button type="text"
                   v-permission="'order/musicalListExport'"
                   @click="musicalListExport">发放清单导出</el-button>
        <el-button type="text"
                   v-permission="'order/musicalListDetailExport'"
                   @click="musicalListDetailExport">分发清单导出</el-button>
      </div>
      <div class="right">
        <ul>
          <li v-for="(item,index) in processList"
              :key='index'>{{ item.createTime}} {{ item.realName }} {{item.event}}</li>

        </ul>
      </div>
    </div>
    <!-- <div class="baseBottom">
      <div class="qrcode code"
           ref="qrCodeUrl"></div>
      <a href="#">www.baidu.com</a>
    </div> -->
  </div>
</template>
<script>
import {
  getMusicGroup,
  getMusicGroupProcess
} from '@/api/buildTeam'
import QRCode from 'qrcodejs2'
import axios from 'axios'
import qs from 'qs'
import {
  getToken
} from '@/utils/auth'
import load from '@/utils/loading'
export default {
  name: "tbaseInfo",
  props: ['teamid'],
  data () {
    return {
      id: '',
      topForm: {
        num: '',
        teacher: '',
        section: '',
        boss: '',
        cooperate: '',
        add: '',
        type: '',
        salary: ''
      },
      name: '',
      processList: []
    }
  },
  created () {
    // 获取乐团基本信息
    // let teamid = '191014135135001';
    // this.creatQrCode();
    this.init()
  },
  activated () {
    this.init()
  },
  methods: {
    init () {
      getMusicGroup({
        musicGroupId: this.teamid
      }).then(res => {
        if (res.code == 200) {
          this.topForm.num = res.data.id;
          // this.topForm.teacher = res.data.teamTeacherName;
          this.topForm.teacher = res.data.educationalTeacherName;
          this.topForm.boss = res.data.directorUserName;
          this.topForm.cooperate = res.data.schoolName;
          this.topForm.type = res.data.chargeTypeName;
          this.topForm.section = res.data.organName;
          this.topForm.add = res.data.address
          // 差上课地点
          this.$emit('getname', res.data.name)
        }
      })

      // 根据乐团id获取乐团流程
      getMusicGroupProcess({
        musicGroupId: this.teamid
      }).then(res => {
        if (res.code == 200) {
          this.processList = res.data;
        }
      })
    },
    creatQrCode () {
      var qrcode = new QRCode(this.$refs.qrCodeUrl, {
        text: 'http://www.baidu.com',
        width: 300,
        height: 300,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      })
    },
    musicalListExport () { // 报表导出
      let url = '/api-web/order/musicalListExport'
      let data = {
        musicGroupId: this.$route.query.id,
      }
      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() + '' +
                nowTime.getHours() +
                '' + nowTime.getMinutes()
              let fname = this.$route.query.id + '-' + ymd + '发放清单' //下载文件的名字
              link.href = objectUrl
              link.setAttribute("download", fname)
              document.body.appendChild(link)
              link.click()
            }
          })
          load.endLoading();
          
        }).catch(error => {
            this.$message.error('导出数据失败，请连接管理员');
            load.endLoading();
          })
      }).catch(() => { })

    },
    musicalListDetailExport () { // 报表导出
      let url = '/api-web/order/musicalListDetailExport'
      let data = {
        musicGroupId: this.$route.query.id
      }
      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() + '' +
                nowTime.getHours() +
                '' + nowTime.getMinutes()
              let fname = this.$route.query.id + '-' + 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" scope>
.basea-container {
  margin-top: 35px;

  .baseTop {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .left {
      max-width: 750px;

      .el-select {
        width: 180px !important;
      }
    }

    .right {
      height: 40vh;
      overflow: scroll;

      ul {
        li {
          list-style: none;
          line-height: 22px;
          font-size: 14px;
          color: #aaa;
        }
      }

      &::-webkit-scrollbar {
        display: none;
      }
    }
  }

  .baseBottom {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .code {
      width: 300px;
      height: 300px;
      background-color: red;
      margin-bottom: 20px;
    }

    .btnList {
      width: 300px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-top: 60px;

      div {
        cursor: pointer;
        width: 120px;
        height: 40px;
        line-height: 40px;
        border-radius: 4px;
        color: #fff;
        text-align: center;
      }

      .closeBtn {
        background-color: #777;
      }

      .okBtn {
        background-color: #f97215;
      }
    }
  }
}
</style>