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

<template>
  <div class='basea-container'>
    <div class="baseTop">
      <div class="left">
        <!-- <el-form :inline="true"
                 class="form-list"
                 label-width="110px"
                 :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-form-item>
          <el-form-item label="所属分部">
            <el-input v-model.trim="topForm.section"
                      disabled></el-input>

          </el-form-item>
          <el-form-item label="乐队指导">
            <el-input v-model.trim="topForm.boss"
                      disabled></el-input>
          </el-form-item>
               <el-form-item label="运营主管">
            <el-input v-model.trim="topForm.teamTeacherName"
                      disabled></el-input>
          </el-form-item>
               <el-form-item label="维修技师">
            <el-input v-model.trim="topForm.repairUserName"
                      disabled></el-input>
          </el-form-item>

          <el-form-item label="合作单位">
            <el-input v-model.trim="topForm.cooperate"
                      disabled></el-input>
          </el-form-item>
          <el-form-item label="机构类型">
            <el-input v-model.trim="topForm.ownershipType"
                      disabled></el-input>
          </el-form-item>


          <el-form-item label="收费类型">
            <el-input v-model.trim="topForm.type"
                      disabled></el-input>
          </el-form-item>
          <el-form-item label="缴费方式"
                        prop="paymentPattern">
            <el-select placeholder="缴费方式"
                       style="width: 220px"
                       clearable
                       filterable
                       disabled
                       v-model.trim="topForm.paymentPattern">
              <el-option :value="0"
                         label="按月"></el-option>
              <el-option :value="1"
                         label="按季"></el-option>
              <el-option :value="2"
                         label="一次性"></el-option>
            </el-select>
          </el-form-item>
            <el-form-item label="上课地点">
            <el-input v-model.trim="topForm.add"
                      type="textarea"
                      disabled></el-input>
          </el-form-item>

        </el-form> -->
        <teambaseinfo />
        <div class="wrap">
              <el-button type="text"
                   v-if="lookType!=='look'"
                   v-permission="'order/musicalListExport'"
                   @click="musicalListExport">订货清单导出</el-button>

        <el-button type="text"
                   v-if="lookType!=='look'"
                   v-permission="'order/musicalListDetailExport'"
                   @click="musicalListDetailExport">分发清单导出</el-button>
        </div>

      </div>
    </div>
  </div>
</template>
<script>
import { getMusicGroup, getMusicGroupProcess } from '@/api/buildTeam'
import teambaseinfo from '@/views/teamBuild/components/teamBaseInfo'
import axios from 'axios'
import qs from 'qs'
import {
  getToken
} from '@/utils/auth'
import load from '@/utils/loading'
export default {
  components:{teambaseinfo},
  name: "tbaseInfo",
  data () {
    return {
      id: '',
      topForm: {
        num: '',
        teacher: '',
        section: '',
        paymentPattern: '',
        paymentValidStartDate: '',
        paymentValidEndDate: '',
        boss: '',
        cooperate: '',
        add: '',
        type: '',
        salary: '',
        teamTeacherName:'',
        ownershipType:'',
        repairUserName:''
      },
      name: '',
      processList: [],
      lookType: ''
    }
  },
  created () {
    // this.init()
  },
  activated () {
    // this.init()
  },
  methods: {
    // init () {
    //   this.teamid = this.$route.query.id;
    //   this.lookType = this.$route.query.type
    //   getMusicGroup({
    //     musicGroupId: this.teamid
    //   }).then(res => {
    //     if (res.code == 200) {
    //       this.topForm.num = res.data.id;
    //       this.topForm.teacher = res.data.educationalTeacherName;
    //       this.topForm.boss = res.data.directorUserName;
    //       this.topForm.paymentPattern = res.data.paymentPattern;
    //       this.topForm.paymentValidStartDate = res.data.paymentValidStartDate;
    //       this.topForm.paymentValidEndDate = res.data.paymentValidEndDate;
    //       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.topForm.teamTeacherName = res.data.teamTeacherName
    //       this.topForm.ownershipType = res.data.ownershipType
    //       this.topForm.repairUserName = res.data.repairUserName
    //       // 差上课地点
    //       this.$emit('getname', res.data.name)
    //     }
    //   })
    // },
    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" scoped>
.basea-container {
  margin-top: 35px;

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

  }

  .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;
      }
    }
  }
  .form-list{
    /deep/ .el-form-item__content{
      width: 220px;
      .el-select{
        width: 100%!important;
      }
      .el-textarea.is-disabled .el-textarea__inner{
        color: #606266;
      }
    }
  }
  .wrap {
    padding-left: 60px;
  }
}
</style>