搜索完成后設(shè)置定時器，實現(xiàn)實時刷新

<template>

??<div?class="dataDiscovery">

????<div?class="container-wd?bg-shadow">

??????<third-nav?:itemsData="thirdNavItemsData"?:triangleShow="false"></third-nav>

??????<div?class="pl-30?pr-30?pb-10?pt-0?relative">

????????<el-form?ref="searchform"?:model="searchform"?class="xyj-el-form">

??????????<el-row?:gutter="120"?class="mt-20">

????????????<el-col?:span="8">

??????????????<el-form-item?label="任務(wù)名稱:"?label-width="90px">

????????????????<el-input?v-model.trim="searchform.serch"?placeholder="請輸入任務(wù)名稱"?class="xyj-input?h30?flex-1"

????????????????@keyup.enter.native="goSearch(searchform)">

??????????????????<i?slot="suffix"?class="el-input__icon?el-icon-search"?@click="goSearch(searchform)"></i>

????????????????</el-input>

????????????????<input?onkeypress="if?(event.keyCode?==?13)?showResult();"?style="display:none;"/>

??????????????</el-form-item>

????????????</el-col>

????????????<el-col?:span="8">

??????????????<el-form-item?label="任務(wù)狀態(tài):"?label-width="90px">

????????????????<el-select

??????????????????v-model.number="searchform.status"?clearable?popper-class="xyj-dropdown"?placeholder="請選擇任務(wù)狀態(tài)"

??????????????????@change="goSearch()"?class="xyj-select?h30?flex-1">

??????????????????<el-option?v-for="item?in?taskStatusOptions"?:key="item.value"?:label="item.label"?:value="item.value"?/>

????????????????</el-select>

??????????????</el-form-item>

????????????</el-col>

????????????<el-col?:span="8">

??????????????<el-form-item?label=""?label-width="0px"?class="text-r">

????????????????<el-button?:disabled="isReadonlyByAuth"?size="small"?@click="showEdit('add')">?<i?class="el-icon-plus?mr-5"></i>新增</el-button>

????????????????<el-button?:disabled="isReadonlyByAuth?||?!(this.batchpram.length>0)"?class="btn-delete?ml-20"?size="small"?@click="copyTask()"><img?class="lmy-img"?src="@/assets/image/icon-copy.png"?alt=""?/>復(fù)制任務(wù)</el-button>

????????????????<el-button?:disabled="isReadonlyByAuth?||?!(this.batchpram.length>0)"?size="small"?class="btn-delete?ml-20"?@click="batchRemove(batchDeltask,'任務(wù)')"><i?class="el-icon-delete?mr-5"></i>刪除</el-button>

??????????????</el-form-item>

????????????</el-col>

??????????</el-row>

????????</el-form>

????????<el-table?class="xyj-table"?:data='tableData.tableList'?ref="multipleTable"?@selection-change="handleSelectionChange">

??????????<el-table-column?align="center"?class="xyj-table-select"?type="selection"?width="60">

??????????</el-table-column>

??????????<el-table-column?label='任務(wù)名稱'?min-width="100"?:show-overflow-tooltip="true">

????????????<template?slot-scope="scope">

????????????????<el-button?:disabled="isReadonlyByAuth"?type="text"?class="btn-text-two?overflow"?@click="handleDetail(scope.row.id)">

??????????????????<span?style="

??????????????????display:?inline-block;

??????????????????text-align:left;

??????????????????width:?108px;

??????????????????text-overflow:?ellipsis;

??????????????????overflow:?hidden;

??????????????????white-space:?nowrap;">{{scope.row.taskName}}</span>

????????????????</el-button?>

????????????</template>

??????????</el-table-column>

??????????<el-table-column?label=''??width="70">

????????????<template?slot-scope="scope">

??????????????<div?class="">

????????????<el-popover?trigger="hover"?placement="right-start"?popper-class="action-popover">

??????????????????<el-button?:disabled="isReadonlyByAuth?||?scope.row.status?===?2?||?scope.row.status===3"?class="lmy-popover-button?action-button"?type="text"?@click="showEdit('edit',scope.row)">

????????????????????<i?class="iconfont?icon-bianji-zhengchang?fs12"></i>?編輯

??????????????????</el-button>

??????????????????<el-button?:disabled="isReadonlyByAuth?||?scope.row.status?===?2?||?scope.row.status?===?6"?class="lmy-popover-button?action-button"?type="text"?@click="startOrStop(1,scope)">

????????????????????<i?class="iconfont?icon-qidong-zhengchang?fs12"></i>?啟動

??????????????????</el-button>

??????????????????<el-button?:disabled="isReadonlyByAuth?||?scope.row.status?!==?2"?class="lmy-popover-button?action-button"?type="text"?@click="startOrStop(2,scope)">

????????????????????<i?class="iconfont?icon-tingzhi?fs12"></i>?停止

??????????????????</el-button>

??????????????????<el-button??v-if="scope.row.status?==?2?||?scope.row.status==?6"?class="lmy-popover-button?action-button"?type="text"?@click="pauseOrRecoverWay(1,scope)">

????????????????????<i?class="iconfont?icon-qidong-zhengchang?fs12"></i>?暫停

??????????????????</el-button>

??????????????????<el-button?v-if="scope.row.status?==?3?"??class="lmy-popover-button?action-button"?type="text"?@click="pauseOrRecoverWay(2,scope)">

????????????????????<i?class="iconfont?icon-tingzhi?fs12"></i>?恢復(fù)

??????????????????</el-button>

??????????????????<el-button?:disabled="isReadonlyByAuth?||?scope.row.status?===?2||?scope.row.status===3"?class="lmy-popover-button?action-button"?type="text"?@click="deleteTask(scope.row.id)">

????????????????????<i?class="iconfont?icon-shanchu-zhengchang?fs12"></i>?刪除

??????????????????</el-button>

??????????????????<div?slot="reference"?class="name-wrapper">

????????????????????<i?class="iconfont?icon-sangedian-zhengchang?more-action"></i>

??????????????????</div>

????????????????</el-popover>

????????????????</div>

????????????</template>

??????????</el-table-column>

??????????<el-table-column?label='數(shù)據(jù)源名稱'?min-width='130'?:show-overflow-tooltip="true">

????????????<template?slot-scope="scope">

??????????????<span>{{scope.row.dsName}}</span>

????????????</template>

??????????</el-table-column>

??????????<el-table-column?label='任務(wù)創(chuàng)建時間'?min-width='150'?:show-overflow-tooltip="true">

????????????<template?slot-scope="scope">

??????????????<span>{{scope.row.createTime?|?getDate}}</span>

????????????</template>

??????????</el-table-column>

??????????<el-table-column?label='任務(wù)開始時間'?min-width='150'?:show-overflow-tooltip="true">

????????????<template?slot-scope="scope">

??????????????<span?v-if="scope.row.startTime">{{scope.row.startTime?|?getDate}}</span>

??????????????<span?v-if="!scope.row.startTime">--</span>

????????????</template>

??????????</el-table-column>

??????????<el-table-column?label='任務(wù)運行用時'?min-width='100'?:show-overflow-tooltip="true">

????????????<template?slot-scope="scope">

??????????????<span>{{scope.row.duration?|?formatSeconds}}</span>

????????????</template>

??????????</el-table-column>

??????????<el-table-column?label='任務(wù)狀態(tài)'?min-width='100'?:show-overflow-tooltip="true">

????????????<template?slot-scope="scope">

??????????????<span?v-bind:class="handleTaskStatusStyle(scope.row.status)">{{scope.row.status?|?getTaskState}}</span>

????????????</template>

??????????</el-table-column>

??????????<el-table-column?label='用戶'?prop='creator'?min-width='100'?:show-overflow-tooltip="true"></el-table-column>

??????????<el-table-column?label='操作'?width='130'?align="center">

????????????<template?slot-scope="scope">

??????????????<el-button?:disabled="isReadonlyByAuth"?v-if="scope.row.status?===?5"?type="text"?class="btn-text"?@click="handleAdjust(scope.row.id,false,'confirm')">結(jié)果確認</el-button>

??????????????<el-button?:disabled="isReadonlyByAuth"?v-if="scope.row.status?===?4"?type="text"?class="btn-text"?@click="handleAdjust(scope.row.id,true,'adjust')">結(jié)果調(diào)整</el-button>

??????????????<el-button?:disabled="isReadonlyByAuth"?v-if="scope.row.status?===?-1||scope.row.status===3"?type="text"?class="btn-text"?@click="handleFailureReason(scope.row.id)">查看詳情</el-button>

??????????????<el-button?:disabled="isReadonlyByAuth"?v-if="scope.row.status?===?2"?type="text"?class="btn-text"?@click="Progress(scope)">查看進度</el-button>

????????????</template>

??????????</el-table-column>

????????</el-table>

????????<div?class="text-r?pt-20?pl-20?pr-20?relative">

????????<el-pagination

????????????background

????????????class="xyj-pagination?pagination-one?mar-t"

????????????@size-change='handleSizeChange'

????????????@current-change='handleCurrentChange'

????????????:current-page='pageData.pageNum'

????????????:page-sizes='[10,?20,?30,?50]'

????????????:page-size='pageData.pageSize'

????????????layout='total,?sizes,?prev,?pager,?next,?jumper'

????????????:total='tableData.total'>

????????</el-pagination>

??????</div>

??????</div>

????</div>

????<!--?新增與編輯彈窗?-->

????<add-task

????@update-data="updateData"

????@show-change="showChange"

????v-if="dialogInit"

????:type="dialogType"

????:TaskForm="formForEdit"

????:title="dialogTitle"></add-task>

??</div>

</template>

<script>

import?ThirdNav?from?'@/views/components/ThirdNav'

import?{?globalTable,?batchRemoveCommon,?pageMenusAuth,?getRealTimeData?}?from?'@/mixin/index'

import?{?taskList,?taskStartOrStop,pauseOrRecover,failureReason,?taskCopy,?batchDeltask?}?from?'@/http/htask'

import?{?dataDiscoveryOpts?}?from?'@/dict/dataDesen'

import?addTask?from?'./addTaskT.vue'

export?default?{

??mixins:?[globalTable,?batchRemoveCommon,?pageMenusAuth,?getRealTimeData],

??components:?{

????addTask,

????ThirdNav

??},

??data?()?{

????return?{

??????batchDeltask,

??????thirdNavItemsData:?[

????????{

??????????'label':?'數(shù)據(jù)發(fā)現(xiàn)任務(wù)列表',

??????????'value':?1

????????}

??????],

??????dialogType:?'add',

??????dialogTitle:?'新建任務(wù)',

??????id:?'',

??????Num:?1,

??????isAddTask:?false,

??????searchform:?{},

??????sourceTypes:?[{?value:?1,?label:?'MySQL'?},?{?value:?2,?label:?'Oracle'?},?{?value:?3,?label:?'SQLServer'?},

????????{?value:?4,?label:?'PostgreSQL'?},?{?value:?5,?label:?'DB2'?},?{?value:?6,?label:?'Informix'?},

????????{?value:?7,?label:?'SYBase'?},?{?value:?8,?label:?'Hive'?},?{?value:?9,?label:?'Hbase'?},?{?value:?10,?label:?'DM'?}],

??????tableData:?{

????????tableList:?[],

????????total:?1

??????},

??????pageData:?{

????????pageNum:?1,

????????pageSize:?10

??????},

??????taskStatusOptions:?dataDiscoveryOpts

????}

??},

??watch:?{

????dialogType:?{

??????handler?()?{

????????this.dialogTitle?=?this.dialogType?===?'add'???'新建任務(wù)'?:?'編輯任務(wù)'

??????}

????},

????'$route':?{

??????handler?(value)?{

????????this.searchTask()

??????},

??????immediate:?true

????}

??},

??computed:?{

??},

??mounted?()?{

????this.searchTask()

??},

??methods:?{

????showEditTwo?(row)?{

??????this.dialogType?=?'edit'

??????let?editFilterTable?=?JSON.parse(JSON.stringify(row.filterTable)).map(item?=>?{

????????return?{

??????????label:?item,

??????????key:?item

????????}

??????})

??????this.formForEdit?=?JSON.parse(JSON.stringify(row))

??????this.formForEdit.filterTable?=?editFilterTable

??????this.dialogInit?=?true

????},

????handleSelectionChange?(val)?{

??????if?(val?&&?val.length)?{

????????this.multipleSelection?=?val

????????this.clearTimer()

??????}?else?{

????????this.multipleSelection?=?[]

????????this.setTimer()

??????}

????},

????deleteTask?(id)?{

??????this.multipleSelection?=?[]

??????this.multipleSelection.push({?id:?id?})

??????this.batchRemove(batchDeltask,?'任務(wù)')

????},

????setTimer?()?{

??????this.clearTimer()

??????this.timer?=?setTimeout(()?=>?{

????????this.searchTask()

??????},?5000)

????},

????clearTimer?()?{

??????if?(this.timer)?{

????????clearTimeout(this.timer)

????????this.timer?=?null

??????}

????},

????searchTask?(val)?{

??????//?通知top5列表根據(jù)任務(wù)名稱跳轉(zhuǎn)到任務(wù)列表

??????let?name?=?this.$route.query.name

??????if?(typeof?(val)?===?'undefined')?{

????????val?=?{}

????????if?(typeof?(name)?!==?'undefined')?{

??????????val.serch?=?name

??????????//?type為1-精確查詢

??????????val.type?=?1

????????}?else?{

??????????//?type為0-模糊查詢

??????????val.type?=?0

????????}

??????}

??????if?(name?===?undefined)?{

????????val.type?=?0

??????}

??????let?pr?=?this.getparams(val)

??????taskList(pr).then((res)?=>?{

????????if?(res.code?===?0?&&?res.data)?{

??????????if?(!this.noDataJumpFirst(res.data))?{

????????????this.tableData.tableList?=?res.data.list

????????????this.tableData.total?=?res.data.total

??????????}

??????????this.setTimer()

????????}?else?{

??????????this.errorTips(res.message?||?'網(wǎng)絡(luò)異常，請稍后再試')

????????}

??????})

????},

????//?根據(jù)不同任務(wù)狀態(tài)顯示字的不同顏色

????//?'已完成'，'未開始'，'執(zhí)行中'，'待確認'，'失敗'5種狀態(tài)

????handleTaskStatusStyle?(item)?{

??????if?(item?===?-1)?{

????????return?'failure-state'

??????}

????},

????copyTask?()?{

??????if?(this.multipleSelection.length?>?1)?{

????????this.errorTips('暫不支持批量復(fù)制！')

????????return?false

??????}

??????let?param?=?this.multipleSelection[0].id

??????taskCopy(param).then(res?=>?{

????????if?(res.code?===?0)?{

??????????this.successTips('復(fù)制任務(wù)成功！')

??????????this.searchTask()

????????}?else?{

??????????this.errorTips(res.message?||?'復(fù)制任務(wù)失?。?)

????????}

??????})

????},

????//?詳情

????handleDetail?(id)?{

??????this.$router.push({?name:?'taskdetail',?query:?{?id:?id?}?})

????},

????startOrStop?(flag,?scope)?{

??????taskStartOrStop(flag,?scope.row.id).then(res?=>?{

????????if?(flag?===?1)?{

??????????if?(res.code?===?0)?{

????????????this.successTips('啟動任務(wù)成功！')

????????????this.updateData()

??????????}?else?{

????????????this.errorTips(res.message?||?'啟動任務(wù)失??！')

??????????}

????????}?else?if?(flag?===?2)?{

??????????if?(res.code?===?0)?{

????????????this.successTips('停止任務(wù)成功！')

????????????this.updateData()

??????????}?else?{

????????????this.errorTips(res.message?||?'停止任務(wù)失?。?)

??????????}

????????}

??????})

????},

????pauseOrRecoverWay?(flag,?scope)?{

??????pauseOrRecover(flag,?scope.row.id).then(res?=>?{

????????if?(flag?===?1)?{

??????????if?(res.code?===?0)?{

????????????this.successTips('暫停任務(wù)成功！')

????????????this.updateData()

??????????}?else?{

????????????this.errorTips(res.message?||?'暫停任務(wù)失敗！')

??????????}

????????}?else?if?(flag?===?2)?{

??????????if?(res.code?===?0)?{

????????????this.successTips('恢復(fù)任務(wù)成功！')

????????????this.updateData()

??????????}?else?{

????????????this.errorTips(res.message?||?'恢復(fù)任務(wù)失??！')

??????????}

????????}

??????})

????},

????Progress?(scope)?{

??????this.$router.push({?path:?'/dataDiscovery/scan',?query:?{?id:?scope.row.id?}?})

????},

????//?失敗-查看詳情

????handleFailureReason?(id)?{

??????failureReason(id).then(res?=>?{

????????if?(res.code?===?0)?{

??????????this.successTips(res.data)

????????}?else?{

??????????this.errorTips(res.message?||?'請求失??！')

????????}

??????})

????},

????//?結(jié)果調(diào)整

????handleAdjust?(id,?val,?type)?{

??????this.$router.push({?name:?'dataConfirm',?query:?{?id:?id,?isEdit:?val,?type?}?})

????}

??}

??//?beforeDestroy?()?{

??//???this.clearTimer()

??//?}

}

</script>

<style?lang="scss">

.dataDiscovery{

??.more-action{

????color:#709AF9;

????cursor:?pointer;

??}

??.failure-state{

????color:?#E45E5E;

??}

??.task-btn{

????font-family:?MicrosoftYaHei;

????font-size:?13px;

????color:?#6E52EE;

????&:hover,&:active{

??????color:?#a997ff;

????}

??}

??.name-wrapper{

????display:?inline-block;

??}

}

.grouplabel{

??font-size:14px;

}

.action-popover{

??min-width:?70px?!important;

??padding:?10px;

}

.action-button{

??display:?block;

??font-family:?"MicrosoftYaHei";

??font-size:?12px;

??color:?#5D5D5D;

??padding:?10px?0?0?0;

??&:first-child{

????padding-top:?0;

??}

??&:hover,&:active{

????color:?#709AF9;

????img:first-child?{

??????display:?none;

????}

????img:last-child?{

??????display:?inline-block;

????}

??}

??img{

????margin-right:?5px;

??}

??.delete-action?{

????display:?inline-block;

??}

??.delete-active-action?{

????display:?none;

??}

}

</style>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些閱讀 2,142評論 0贊 2
  • pyspark.sql模塊 模塊上下文 Spark SQL和DataFrames的重要類： pyspark.sql...
    mpro閱讀 9,911評論 0贊 13
  • rljs by sennchi Timeline of History Part One The Cognitiv...
    sennchi閱讀 7,845評論 0贊 10
  • <template> <el-row type="flex" class="row-bg ...
    南漂一枚閱讀 431評論 0贊 0
  • 路過萬達廣場的臭豆腐檔口 媽媽，什么味道呢，好臭呀 怎么有拉屎的味道呢……
    薇薇董閱讀 231評論 0贊 0

友情鏈接更多精彩內(nèi)容