下载列表组件

<template>
  <div>
  <el-dialog :title="dialogTaskTitle" :visible.sync="dialogTaskShow" width="960px" 
  top="5vh" :close-on-click-modal='false'
    :before-close="closeTaskDialog">
    <div style="margin-bottom:10px;100%;height:32px;">
      <el-button type="operate" size="small" @click="refreshExportList" icon="el-icon-refresh" style="float:right;padding: 4px 10px;">刷新</el-button>
    </div>
    <el-table :data="taskListData" style=" 100%" v-loading="loading">
      <el-table-column prop="downloadFileName" label="任务类型" width="180"> </el-table-column>
      <el-table-column prop="downloadState" label="任务处理装态" align="center" width="120"></el-table-column>
      <el-table-column prop="gmtCreated" align="center" label="创建时间" width="160"></el-table-column>
      <el-table-column prop="startDate" align="center" label="处理开始时间" width="160"></el-table-column>
      <el-table-column prop="endDate" align="center" label="处理结束时间" width="160"></el-table-column>
      <el-table-column prop="downloadPath" label="路径" align="center">
        <template slot-scope="scope">
          <a class="download-link" v-if="scope.row.downloadPath!='' && scope.row.downloadPath!=null" href="javascript:void(0)" @click="downloadExcelFile(scope.row.downloadPath,scope.row.downloadFileName)">下载</a>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
  </div>
</template>
<script>
  export default {
    name: 'downloadTable',
      props: [
      'dialogTaskTitle',//下载任务列表标题
      'executeCode',//任务导出id
      ],
      data() {
     return {
       taskListData:[],
       dialogTaskShow:false,
       loading:false,
     }
      },
    created(){
      //console.log(this.executeCode+this.dialogTaskShow)
    },
    methods:{
       closeTaskDialog(){
         this.dialogTaskShow=false;
       },
       showTaskDialog(){
         this.refreshExportList();
         this.dialogTaskShow=true;
       },
       refreshExportList(){
          this.taskListData=[];
          this.loading=true;
          this.$request.post('/air-open-cms/asyncDownload/listByPage',{"downloadCode":this.executeCode,"downloadType":"1"})
                       .then((response) => {
               var res = response.result;
               this.taskListData=res.records;
               this.loading=false;
          });
       },
       downloadExcelFile(url,fileName){
         this.$request({
           method:"get",
           url:"/air-open-base/ossfile/download/"+url,
           responseType: 'blob'
         }).then(function(response) {
            var blob = new Blob([response.result])
            var downloadElement = document.createElement('a');
         　　var href = window.URL.createObjectURL(blob); //创建下载的链接
         　　downloadElement.href = href;
         　　downloadElement.download = fileName+".xlsx";//下载后文件名
         　　document.body.appendChild(downloadElement);
         　　downloadElement.click(); //点击下载
         　　document.body.removeChild(downloadElement); //下载完成移除元素
         　　window.URL.revokeObjectURL(href); //释放掉blob对象
           })
           .catch(function(error) {
             console.log(error);
           });
      },
    }
   }
</script>

<style scoped="scoped">
    a.download-link{
        color:#409EFF!important;
        text-decoration:underline!important;
    }
    .el-table tr td div.cell{font-size:12px !important;}
</style>

<template>
  <div>
  <el-dialog :title="dialogTaskTitle" :visible.sync="dialogTaskShow" width="960px" top="5vh" :close-on-click-modal='false'
    :before-close="closeTaskDialog">
    <div style="margin-bottom:10px;100%;height:32px;">
      <el-button type="main" size="small" @click="refreshExportList" icon="el-icon-refresh" style="float:right;padding: 4px 10px;">刷新</el-button>
    </div>
    <el-table :data="taskListData" style=" 100%">
      <el-table-column prop="downloadFileName" label="任务类型" width="160" :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column prop="statusStr" label="任务处理装态" align="center" width="120" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="createTime" align="center" label="创建时间" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="beginTime" align="center" label="处理开始时间" width="160" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="endTime" align="center" label="处理结束时间" width="160" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="downloadPath" label="路径">
        <template slot-scope="scope">
          <a style="text-decoration:underline;color:#5e74a5" v-if="scope.row.state==6" href="javascript:void(0)" @click="downloadExcelFile(scope.row.downloadPath,scope.row.downloadFileName)">下载</a>
        </template>
      </el-table-column>
    </el-table>
    <!--<el-pagination id="exportPagenation" small @size-change="pageTaskSizeChange" @current-change="currentTaskPageChange" :current-page="taskPagenation.currentPage" :page-sizes="[10,20]"
        :page-size="taskPagenation.pageSize" layout="->,prev, pager, next, jumper, sizes,total" :total="taskPagenation.totalSize" :pagerCount="5"  background>
      </el-pagination>-->
  </el-dialog>
  </div>
</template>

<script>
  import { isAtmsFun } from '@/utils/auth'
  export default {
    name: 'downloadTable',
      props: [
      'dialogTaskTitle',
      'executeCode',
      ],
      data() {
     const isAtms = isAtmsFun()
     return {
       isAtms,
       taskListData:[],
       dialogTaskShow:false,
       downloadPreUrl:""
     }
      },
    created(){
      //console.log(this.executeCode+this.dialogTaskShow)
      // 兼容open的下载接口
     this.downloadPreUrl = this.isAtms ? '' : '/air-atms-core-service';
     //this.downloadPreUrl = '/air-atms-core-service';
    },
    methods:{
       closeTaskDialog(){
         this.dialogTaskShow=false;
       },
       showTaskDialog(){
         this.refreshExportList();
         this.dialogTaskShow=true;
       },
       refreshExportList(){
          this.taskListData=[];
          this.$request.get('/air-atms-core-base/exportTask/list/'+this.executeCode)
             .then((response) => {
               let res = response.result;
               this.taskListData=res.records;
               //this.taskPagenation.totalSize=res.total;
          });
       },
       downloadExcelFile(url,fileName){
         this.$request({
           method:"get",
           url:this.downloadPreUrl+"/ossfile/download/"+url,
           responseType: 'blob'
         }).then(function(response) {
            let blob = new Blob([response.result]);
            let downloadElement = document.createElement('a');
            let href = window.URL.createObjectURL(blob); //创建下载的链接
            downloadElement.href = href;
            downloadElement.download = fileName+".xlsx";//下载后文件名
            document.body.appendChild(downloadElement);
            downloadElement.click(); //点击下载
            document.body.removeChild(downloadElement); //下载完成移除元素
            window.URL.revokeObjectURL(href); //释放掉blob对象
           })
           .catch(function(error) {
             console.log(error);
           });
      },
    }
   }
</script>

<style>
</style>

3.日历

<template>
        <el-popover
          ref="popover4"
          placement="bottom-start"
          popper-class="popperCalendar"
          width="412"
          trigger="click" v-model="showCalenderFlag">
          <div class="list" id="list" @click="showCalender">
        <div class="myDate-month">
            <div class="year-inner">
                <span class="calendar-menu-prev" @click="preItem()"><i class="el-icon-caret-left"></i></span>
                <span class="yearText">{{yearText}}</span>
                <span class="calendar-menu-next" @click="nextItem()"><i class="el-icon-caret-right"></i></span>
            </div>
            <div class="month-inner">
                <div class="monthBox">
                    <transition name="fade">
                      <ul v-show="leftMonthBox" :key="currentFlag">
                        <li class="calendar-menu-month" v-for="(item,index) in monthArray" :key="index"
                            :class="{'month-selected':hasMonth(item,preYearNumber)}"
                            @click="checkItem(item,preYearNumber)" :code="preYearNumber+item.monthNumber">{{item.name}}</li>
                    </ul>
                    </transition>
                    <transition name="fade">
                    <ul v-show="centerMonthBox" :key="currentFlag+1">
                        <li class="calendar-menu-month" v-for="(item,index) in monthArray" :key="index"
                            :class="{'month-selected':hasMonth(item,nowYearNumber)}"
                            @click="checkItem(item,nowYearNumber)" :code="nowYearNumber+item.monthNumber">{{item.name}}</li>
                    </ul>
                    </transition>
                    <transition name="fade">
                    <ul v-show="rightMonthBox" :key="currentFlag+2">
                        <li class="calendar-menu-month" v-for="(item,index) in monthArray" :key="index"
                            :class="{'month-selected':hasMonth(item,nextYearNumber)}"
                            @click="checkItem(item,nextYearNumber)" :code="nextYearNumber+item.monthNumber">{{item.name}}</li>
                    </ul>
                    </transition>
                </div>
             </div>
        </div>
    </div>
    </el-popover>
</template>
<script>
    export default {
      name: 'calendarComponet',
      props: {
          selectMonths: {
              type: Array,
              default: () => []
          },
          yearNumber: {
        type: Number,
        default: 0
      }
      },
      data () {
          return {
             showCalenderFlag:false,
             leftMonthBox:false,
             centerMonthBox:true,
             rightMonthBox:false,
             currentFlag:1,
             yearText:0,
             nowYearNumber:0,
             preYearNumber:0,
             nextYearNumber:0,
             monthArray:[
                    {
                      "name":"一月",
                      "monthNumber":'01'
                    },
                    {
                      "name":"二月",
                      "monthNumber":'02'
                    },
                    {
                      "name":"三月",
                      "monthNumber":'03'
                    },{
                      "name":"四月",
                      "monthNumber":'04'
                    },
                    {
                      "name":"五月",
                      "monthNumber":'05'
                    },
                    {
                      "name":"六月",
                      "monthNumber":'06'
                    },
                    {
                      "name":"七月",
                      "monthNumber":'07'
                    },{
                      "name":"八月",
                      "monthNumber":'08'
                    },
                    {
                      "name":"九月",
                      "monthNumber":'09'
                    },
                    {
                      "name":"十月",
                      "monthNumber":'10',
                    },
                    {
                      "name":"十一月",
                      "monthNumber":'11',
                    },{
                      "name":"十二月",
                      "monthNumber":'12',
                    }
             ],
          }
        },
        created(){
      debugger;
        this.yearText=parseInt(this.yearNumber);
          this.nowYearNumber=parseInt(this.yearNumber)
          this.preYearNumber=parseInt(this.nowYearNumber)-1;
          this.nextYearNumber=parseInt(this.nowYearNumber)+1;
          this.leftMonthBox=false;
          this.centerMonthBox=true;
          this.rightMonthBox=false;
          this.currentFlag=1;
        },
        mounted() {

        },
         watch:{
            "yearNumber":function(val){
              this.yearText=parseInt(val)
              this.nowYearNumber=parseInt(val)
              this.preYearNumber=parseInt(this.nowYearNumber)-1;
              this.nextYearNumber=parseInt(this.nowYearNumber)+1;
            },
        },
        methods: {
            showCalender(e){
              e.stopPropagation();
            },
            changeCalender(){
        debugger;
              this.leftMonthBox=false;
              this.centerMonthBox=true;
              this.rightMonthBox=false;
              this.currentFlag=1;
              this.yearText=parseInt(this.yearNumber);
            this.showCalenderFlag=!this.showCalenderFlag;
            },
            hideCalender(){
              this.showCalenderFlag=false;
            },
            hasMonth(item,yearNumber){
              if(this.selectMonths.indexOf(yearNumber+item.monthNumber)!=-1){
                return true;
              }
              return false;
            },
            checkItem(item,yearNumber){
              if(this.hasMonth(item,yearNumber)){
                let index=this.selectMonths.indexOf(yearNumber+item.monthNumber);
                this.selectMonths.splice(index,1);
              }else{
                this.selectMonths.push(yearNumber+item.monthNumber);
              }
              console.log(this.selectMonths);
              this.$emit("setSelectMonths",this.selectMonths);
            },
            preItem(){
              if(this.currentFlag==2){
                 this.leftMonthBox=false;
                 this.rightMonthBox=false;
                 this.currentFlag=1;
                 this.centerMonthBox=true;
                 this.yearText=this.yearText-1;
              }else{
                if(this.currentFlag==1){
                    this.centerMonthBox=false;
                    this.rightMonthBox=false;
                    this.currentFlag=0;
                    this.leftMonthBox=true;
                    this.yearText=this.yearText-1;
                }
              }
            },
            nextItem(){
              if(this.currentFlag==0){
                 this.currentFlag=1;
                 this.centerMonthBox=true;
                 this.leftMonthBox=false;
                 this.rightMonthBox=false;
                 this.yearText=parseInt(this.yearText)+1;
              }    else{
                if(this.currentFlag==1){
                    this.currentFlag=2;
                    this.rightMonthBox=true;
                    this.centerMonthBox=false;
                    this.leftMonthBox=false;
                    this.yearText=parseInt(this.yearText)+1;
                }
              }
            },
        },
        beforeDestory(){
            this.leftMonthBox=false;
            this.centerMonthBox=true;
            this.rightMonthBox=false;
            this.currentFlag=1;
            this.yearText=0;
            this.yearNumber=0;
            this.nowYearNumber=0;
            this.preYearNumber=0;
            this.nextYearNumber=0;
        }
    }
</script>

<style>
    *{margin:0;padding:0}
     ul li{padding:0}
    .myDate-month{404px;height:auto;border:1px solid #ddd;margin:auto;background-color: #F2F5F7;z-index:999}
    .year-inner{64%;height:40px;margin:0px auto;line-height:40px;text-align: center;}
    .year-inner .yearText{60%;margin:0 4px}
    .monthBox{position: relative;100%;height:160px;overflow: hidden;}
    .monthBox ul{100%;height:180px;font-size:13px;position: absolute;top:0;padding:2%}
    .monthBox ul li{
        21%;height:30px;border-radius:4px;
        float:left;text-align:center;line-height:30px;
        margin-right:1%;margin-left:1%;margin-top:10px;
        border:1px solid #ddd;cursor:pointer}
    .monthBox ul.l_table{left:0}
    .monthBox ul.m_table{left:100%}
    .monthBox ul.r_table{left:200%}
    .month-selected{background: #409eff;color:#fff;}
    .year-inner>span{font-weight: 700;}
    .year-inner>span>i{cursor: pointer;font-size:18px}

    .fade-enter-active, .fade-leave-active {
    transition: opacity .5s
    }
    .fade-enter, .fade-leave-active {
    opacity: 0
    }

  .popperCalendar{
      padding:0px!important;
      height:204px!important;
    padding-top: 2px!important;
      padding-bottom: 0px!important;
  }
</style>