<template>  <div class="row">    <loadingHourGlass></loadingHourGlass>    <div class="col-xs-12 top-offset-15 bottom-offset-15">      <div>        <strong class="pull-left line-height-24 right-offset-15">自動刷新開關:</strong>        <iphoneSwitcher v-bind:status="refresh.status" v-bind:canSwitch="false" v-bind:callBackName="'switchRefreshStatus'"></iphoneSwitcher>      </div>      <button type="button" class="btn btn-sm btn-primary pull-right" v-on:click="editRecord()">添加任務</button>    </div>    <div class="col-xs-12 main-table-wrapper">      <h4 class="page-header">點播刷新任務數據表格 <!-- <small>Secondary text</small> --></h4>      <!-- <p>123</p> -->      <table class="table table-striped table-hover table-bordered" id="main-table">        <thead>          <tr>            <th>名稱</th>            <th>狀態</th>            <th>完成率</th>            <th>創建時間</th>            <th>備注</th>            <th>操作</th>          </tr>        </thead>        <tbody><!-- v-bind:class=" (item.completeCount/item.total=='1')?'text-success':'text-danger' " -->          <tr v-for="item in tableList" v-bind:class="'id-' + item.id">            <td>{{ item.file_name }}</td>            <!-- {{ item.status | statusFilter }} -->            <td class="status"></td>            <!-- v-bind:class=" (item.completeCount/item.total=='1')?'text-success':'text-danger' " -->            <!-- {{ item.completeRate }} -->            <td class="rate"></td>            <td>{{ item.create_time }}</td>            <td>{{ item.description }}</td>            <td>              <button type="button" class="btn btn-primary btn-xs" v-on:click="showDetailModal(item.id,item.file_name)">詳情</button>              <!-- <button type="button" class="btn btn-danger btn-xs" v-on:click="test()">test</button> -->            </td>          </tr>        </tbody>      </table>    </div>  </div></template>

methods: {  initRecordTable: function(){    $('#main-table').DataTable({      "paging": true,// 開啟分頁      "pageLength": 10,//每頁顯示數量      "lengthChange": true,//是否允許用戶改變表格每頁顯示的記錄數      "searching": true,//搜索      "ordering": true,//排序      "info": true,//左下角 從 1 到 5 /共 23 條數據      "autoWidth": true,      // "scrollX": "100%",//表格的寬度      // "scrollY": "200px",//表格的高度      "scrollXInner": "100%",//表格的內容寬度      // "bScrollCollapse":true,//當顯示的數據不足以支撐表格的默認的高度時，依然顯示縱向的滾動條。(默認是false)      "aaSorting": [        [3, 'asc']      ],      "language": {        "sInfoEmpty": "沒有數據",        "sZeroRecords": "沒有查找到滿足條件的數據",        "sInfo": "從 _START_ 到 _END_ /共 _TOTAL_ 條數據",        "sLengthMenu": "每頁顯示 _MENU_ 條記錄",        "sInfoFiltered": "(從 _MAX_ 條數據中檢索)",        "oPaginate": {          "sFirst": "首頁",          "sPrevious": "前一頁",          "sNext": "后一頁",          "sLast": "尾頁"        }      },    });  },  initQuery: function(){    // status 和 rate兩個字段是實時刷新的    // dataTable摧毀和tableList賦值都砸在promise里完成    // tableList只初始化的時候賦值一次 然后就不動了 用原生js去改變表格內的status字段    let mySelf = this;    let callback = function(){      if($('#main-table').DataTable()){        $('#main-table').DataTable().destroy()      }      mySelf.tableList = util.deepClone(mySelf.originTableList);    }    let queryTablePromise = mySelf.queryTable(callback);    let promiseList = [];    mySelf.clearRefresh();    promiseList.push(queryTablePromise);    Promise.all(promiseList).then(function (result) {      console.log('ajax全部執行完畢：' + JSON.stringify(result)); // ["Hello", "World"]      //renderTable函數只在首次進入頁面時調用 1.毀掉dataTable插件 2.加載一次表格更新狀態和完成率 3.調用自動刷新      mySelf.renderTable();      mySelf.updateRefreshStatus();      mySelf.setRefresh();    });  },  switchRefreshStatus: function(){    let mySelf = this;    let status = mySelf.refresh.status;    let text = (status==true)?'關閉':'開啟';    let confirmCallback = null;    if (status==true){      confirmCallback = function(){        mySelf.refresh.status = false;      }    }    else{      confirmCallback = function(){        mySelf.refresh.status = true;        mySelf.setRefresh();      }    }    util.showConfirm('確認要' + text + '自動刷新么？',confirmCallback);  },  checkTaskRefresh: function(){    let mySelf = this;    let originTableList = mySelf.originTableList;    let taskAllComplete = true;    // console.log(JSON.stringify(mySelf.originTableList));    originTableList.forEach(function(item,index,array){      let completeTaskList = mySelf.refresh.completeTaskList;      let completeRate = item.completeRate;      //當前task完成 report給后端      if (Number.parseInt(completeRate) == 1){        // 若任務完成列表 沒有這個TaskId 則發送請求        if (!completeTaskList.includes(item.id)){          console.log(item.id + "任務完成了！并且不存在于任務完成列表，現在發送完成請求！");          mySelf.reportTaskComplete(item.id);          mySelf.refresh.completeTaskList.push(item.id);        }      }      else{        taskAllComplete = false;      }    });    if(taskAllComplete){      console.log('全部任務都完成了！')      return true;    }    return false;  },  setRefresh: function(){    let mySelf = this;    let status = mySelf.refresh.status;    let interval = mySelf.refresh.interval;    // 如果所有任務都完成了 則停止發送ajax請求 并更新最后一次    if (mySelf.checkTaskRefresh()){      console.log('更新最后一次表格！')      mySelf.updateRefreshStatus();      return false;    }    // console.log('refresh')    if (status){      mySelf.refresh.timer = setTimeout(function(){        let queryTablePromise = mySelf.queryTable();        let promiseList = [];        promiseList.push(queryTablePromise);        Promise.all(promiseList).then(function (result) {          console.log('ajax全部執行完畢：' + JSON.stringify(result)); // ["Hello", "World"]          mySelf.updateRefreshStatus();          mySelf.setRefresh();        });      },interval);    }    else{      mySelf.clearRefresh();    }  },  updateRefreshStatus: function(){    console.log('更新刷新狀態')    let mySelf = this;    let mainTable = document.getElementById("main-table");    let originTableList = mySelf.originTableList;    originTableList.forEach(function(item,index,array){      let trClassName = "id-" + item.id;      // console.log(trClassName)      // 獲取當前頁面展示的所有tr      let trDom = mainTable.getElementsByClassName(trClassName)[0];      // console.log(trDom)      // 局部刷新個別字段      if (trDom){        let tdRate = trDom.getElementsByClassName("rate")[0];        let tdStatus = trDom.getElementsByClassName("status")[0];        tdRate.innerText = item.completeRate;        tdRate.className = (item.status == "1")?"text-info rate":((item.status == "2")?"text-success rate":"text-danger rate");        tdStatus.innerText = (item.status == "1")?"刷新中":((item.status == "2")?"刷新完成":"刷新失敗");        tdStatus.className = (item.status == "1")?"text-info status":((item.status == "2")?"text-success status":"text-danger status");      }    });  },  clearRefresh: function(){    let mySelf = this;    console.log('clear timer');    clearTimeout(mySelf.refresh.timer);  },  queryTable: function(callback){    let mySelf = this;    let promise = new Promise(function (resolve, reject) {      let url = pars.domain + "/api.php?Action=xxxxxxx&t=" + (new Date).getTime();      $.get(url, function(res) {        if (res.code == 0) {          let resData = res.list;          resData.forEach(function(item,index,array){            let info = item.info;            let completeCount = info.completeCount;            let total = info.count;            item.completeRate = ((completeCount/total)*100).toFixed(2) + "%";          });          // console.log(JSON.stringify(resData))          mySelf.originTableList = resData;          if (callback){            callback();          }          resolve('queryTable完成！');        }        else{          util.showDialog('error',"接口調用失敗，報錯信息為：" + res.message);        }      }, "json");    });    return promise;  },  renderTable: function(){    let mySelf = this;    mySelf.$nextTick(function(){      mySelf.initRecordTable();      util.hideLoading();    })  }},beforeRouteLeave (to, from, next){  let mySelf = this;  mySelf.clearRefresh();  next();},