搜索完成后设置定时器，实现实时刷新

<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="任务名称:" label-width="90px">

                <el-input v-model.trim="searchform.serch" placeholder="请输入任务名称" 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="任务状态:" label-width="90px">

                <el-select

                  v-model.number="searchform.status" clearable popper-class="xyj-dropdown" placeholder="请选择任务状态"

                  @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="" />复制任务</el-button>

                <el-button :disabled="isReadonlyByAuth || !(this.batchpram.length>0)" size="small" class="btn-delete ml-20" @click="batchRemove(batchDeltask,'任务')"><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='任务名称' 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> 恢复

                  </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='数据源名称' min-width='130' :show-overflow-tooltip="true">

            <template slot-scope="scope">

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

            </template>

          </el-table-column>

          <el-table-column label='任务创建时间' 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='任务开始时间' 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='任务运行用时' 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='任务状态' 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')">结果确认</el-button>

              <el-button :disabled="isReadonlyByAuth" v-if="scope.row.status === 4" type="text" class="btn-text" @click="handleAdjust(scope.row.id,true,'adjust')">结果调整</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': '数据发现任务列表',

          'value': 1

        }

      ],

      dialogType: 'add',

      dialogTitle: '新建任务',

      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' ? '新建任务' : '编辑任务'

      }

    },

    '$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, '任务')

    },

    setTimer () {

      this.clearTimer()

      this.timer = setTimeout(() => {

        this.searchTask()

      }, 5000)

    },

    clearTimer () {

      if (this.timer) {

        clearTimeout(this.timer)

        this.timer = null

      }

    },

    searchTask (val) {

      // 通知top5列表根据任务名称跳转到任务列表

      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 || '网络异常，请稍后再试')

        }

      })

    },

    // 根据不同任务状态显示字的不同颜色

    // '已完成'，'未开始'，'执行中'，'待确认'，'失败'5种状态

    handleTaskStatusStyle (item) {

      if (item === -1) {

        return 'failure-state'

      }

    },

    copyTask () {

      if (this.multipleSelection.length > 1) {

        this.errorTips('暂不支持批量复制！')

        return false

      }

      let param = this.multipleSelection[0].id

      taskCopy(param).then(res => {

        if (res.code === 0) {

          this.successTips('复制任务成功！')

          this.searchTask()

        } else {

          this.errorTips(res.message || '复制任务失败！')

        }

      })

    },

    // 详情

    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('启动任务成功！')

            this.updateData()

          } else {

            this.errorTips(res.message || '启动任务失败！')

          }

        } else if (flag === 2) {

          if (res.code === 0) {

            this.successTips('停止任务成功！')

            this.updateData()

          } else {

            this.errorTips(res.message || '停止任务失败！')

          }

        }

      })

    },

    pauseOrRecoverWay (flag, scope) {

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

        if (flag === 1) {

          if (res.code === 0) {

            this.successTips('暂停任务成功！')

            this.updateData()

          } else {

            this.errorTips(res.message || '暂停任务失败！')

          }

        } else if (flag === 2) {

          if (res.code === 0) {

            this.successTips('恢复任务成功！')

            this.updateData()

          } else {

            this.errorTips(res.message || '恢复任务失败！')

          }

        }

      })

    },

    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 || '请求失败！')

        }

      })

    },

    // 结果调整

    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>

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,185评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,445评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,684评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,564评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,681评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,874评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,025评论 3赞 408
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,761评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,217评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,545评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,694评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,351评论 4赞 332
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,988评论 3赞 315
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,778评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,007评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,427评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,580评论 2赞 349

推荐阅读更多精彩内容

  • snapshot-1.0.0.js
    "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 2,028评论 0赞 2
  • pySpark 中文API (2)
    pyspark.sql模块 模块上下文 Spark SQL和DataFrames的重要类： pyspark.sql...
    mpro阅读 9,448评论 0赞 13
  • rljs
    rljs by sennchi Timeline of History Part One The Cognitiv...
    sennchi阅读 7,312评论 0赞 10
  • 功能
    <template> <el-row type="flex" class="row-bg ...
    南漂一枚阅读 393评论 0赞 0
  • 童言童趣
    路过万达广场的臭豆腐档口 妈妈，什么味道呢，好臭呀 怎么有拉屎的味道呢……
    薇薇董阅读 205评论 0赞 0