xiaoshi_system/src/views/task/components/todoList2.vue

<template>
  <div style="padding:5px 10px;">
        <el-form inline>
            <el-form-item  label="创建人">
              <el-input v-model="queryParams.createName" size="small" placeholder="请输入创建人名称"></el-input>
            </el-form-item>
            <el-form-item  label="任务类型" v-if="form != 1 && form != 2">
                <!-- <el-input v-model.trim="queryParams.taskType" size="small" placeholder="请输入任务类型"></el-input> -->
                <el-select v-model="queryParams.taskType" size="small" clearable placeholder="请选择任务类型">
                  <el-option
                    v-for="item in Object.entries(taskType)"
                    :key="item[0]"
                    :label="item[1]"
                    :value="item[0]">
                  </el-option>
                </el-select>
            </el-form-item>
            <el-form-item  label="导入类型" v-if="form != 1 && form != 2">
                <!-- <el-input v-model.trim="queryParams.taskType" size="small" placeholder="请输入任务类型"></el-input> -->
                <el-select v-model="queryParams.taskType2" size="small" clearable placeholder="请选择任务类型">
                  <el-option
                    v-for="item in Object.entries(taskType2)"
                    :key="item[0]"
                    :label="item[1]"
                    :value="item[0]">
                  </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
              <el-button  size="small" type="" @click="getList2">搜索</el-button>
            </el-form-item>
          </el-form>
          <el-table v-loading="loading" :data="tableData" border header-row-class-name="custom-table-header" @sort-change="sortChange" :maxHeight="tableHeight - 220">
            <el-table-column label="#" type="index" align="center" width="55">
              <template slot-scope="scope">
                <span>{{ (scope.$index + 1) + ((queryParams.current - 1) * queryParams.size) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="任务名称" prop="taskName" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column  label="创建时间" prop="createTime" align="center" sortable="custom" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ scope.row.createTime }}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column label="开始时间" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                <span >{{ $d(scope.row.startTime) }}</span>
              </template>
            </el-table-column> -->
            <el-table-column  label="结束时间" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ $d(scope.row.endTime) }}</span>
              </template>
            </el-table-column>
            
            <el-table-column  label="导入方式" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{taskType2[ scope.row.type] }}</span>
              </template>
            </el-table-column>
            <el-table-column  label="任务类型" v-if="form !==1 && form !==2" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                <span v-if="scope.row.taskType">{{ taskType[ scope.row.taskType] }}</span>
                <span v-else>普通任务</span>
              </template>
            </el-table-column>
            <el-table-column label="任务状态" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                <span v-if="scope.row.taskType == 1 && scope.row.status==2">等待下一次执行</span>
                <span v-else>{{ statusObj[scope.row.status] }}</span>
                <!-- <span v-else>{{ statusObj[scope.row.taskState] }}</span> -->
              </template>
            </el-table-column>
            <el-table-column prop="createName" label="创建人" align="center" width="120" show-overflow-tooltip></el-table-column>
            <el-table-column v-if="form !=1 && form !=2" label="定时周期" prop="dateType" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                <div>
                <span v-if="scope.row.taskType == 1">{{dateType.find(item=> item.value == getType(scope.row.crons)).label }}</span> 
                <span v-else></span> 
                </div>
              </template>
            </el-table-column>
            <!-- <el-table-column v-if="form==9 || form==8" label="定时时间" prop="dates" align="center" show-overflow-tooltip></el-table-column> -->
            <el-table-column v-if="form!=1 && form!=2" label="最近更新时间" prop="modifiedTime" align="center" sortable="custom" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ $d(scope.row.modifiedTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="导入情况" align="center"  show-overflow-tooltip>
              <template slot-scope="scope">
                <div class="log">
                  <p>总共{{ scope.row.total }}条</p>
                  <p>成功{{ scope.row.trueSuccessNum }}条</p>
                  <p>失败{{ scope.row.defaultNum }}条</p>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="150">
              <template slot-scope="scope" >
                <div  class="operate">
                  <el-link type="primary" @click.native="handleDownload(scope.row)" v-if="$permission('/workspace/common/taskDownload') && ((scope.row.type == 1 || scope.row.type == 2) && (scope.row.status !== 0 || scope.row.status !== 1))">
                    <el-tooltip class="item" effect="dark" content="下载" placement="top">
                      <i class="iconfont icon-xiazai"></i>
                    </el-tooltip>  
                  </el-link>
                 
                  <el-link class="margin-left_10" type="primary"  @click="handleSuspend(scope.row)" v-if="scope.row.status==1 || scope.row.status==4">
                    <el-tooltip class="item" effect="dark" content="暂停" placement="top">
                      <i class="iconfont icon-zanting1" v-if="scope.row.status==1"></i>
                    </el-tooltip>
                    <el-tooltip class="item" type="primary" effect="dark" content="继续" placement="top">
                      <i class="iconfont icon-zanting" v-if="scope.row.status==4"></i> 
                    </el-tooltip>
                  </el-link>
                  
                  <el-link class="margin-left_10" type="primary"  v-if="scope.row.taskType == 1" @click="updateLog(scope.row)">
                      <el-tooltip class="item" effect="dark" content="更新记录" placement="top">
                        <i class="iconfont icon-banbengengxinjilu" style="font-size:18px"></i>
                      </el-tooltip>
                    </el-link>
                    <el-link class="margin-left_10" type="danger" @click.native="cancel(scope.row)" v-if="(scope.row.status!=2 && scope.row.status!=5) || scope.row.taskType == 1" >
                    <el-tooltip class="item" effect="dark" content="取消" placement="top">
                      <i class="iconfont icon-quxiaorenwu1"></i>
                    </el-tooltip> 
                  </el-link>
                </div>
                <!-- <div v-else class="operate">
                  <el-link class="margin-left_10"  type="danger" @click.native="handleDelete(scope.row)">
                    <el-tooltip class="item" effect="dark" content="删除" placement="top">
                      <i class="iconfont icon-shanchu"></i>
                    </el-tooltip>
                  </el-link>
                  
                  <el-link class="margin-left_10" type="primary"  @click="handleSuspend(scope.row)" v-if="scope.row.status==1 || scope.row.status==4">
                    <el-tooltip class="item" effect="dark" content="暂停" placement="top">
                      <i class="iconfont icon-zanting1" v-if="scope.row.status==1"></i>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="继续" placement="top">
                      <i class="iconfont icon-zanting" v-if="scope.row.status==4"></i> 
                    </el-tooltip>
                  </el-link>
                  
                    <el-link class="margin-left_10" type="primary"  v-if="scope.row.taskType == 1" @click="updateLog(scope.row)">
                      <el-tooltip class="item" effect="dark" content="更新记录" placement="top">
                        <i class="iconfont icon-banbengengxinjilu"></i>
                      </el-tooltip>
                    </el-link>
                </div> -->
              </template>
                
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination :current-page.sync="queryParams.current" :page-size="queryParams.size" :total="total" @current-change="handleCurrentChange" layout="total, prev, pager, next, jumper" background></el-pagination>
          </div>

          <updateLog ref="updateLog"></updateLog>
        </div>
</template>

<script>
import { mapGetters } from "vuex";
import { common } from './mixins';
import updateLog from "@/views/task/components/updateLog.vue";
export default {
  components: {
    updateLog
  },

  mixins:[common],
  data() {
    return {
        loading:false,
        tableData:[],
        queryParams:{
            current:1,
            size:10,
            createName:'',
            taskStatus:[0,1,2,4,5],
            projectId:this.projectId,
            productId:this.productId,
            reportId:this.reportId,
            orderBy:'createTime',
            orderType:'desc',
        },
        total:0,
        options: [
          {label:'普通任务',value:0},
          {label:'定时任务',value:1},
        ],
        dateType: [
          {label:'每天',value:'day'},
          {label:'每周',value:'week'},
          {label:'每月',value:'month'},
          {label:'每年',value:'year'},
        ],
    };
  },
  watch: {},
  computed: {
    ...mapGetters(['webSocket', 'userinfo'])
  },
  created() {},
  mounted() {
    this.getList()
  },
  methods: {
    getList2(){
      this.queryParams.current = 1
      this.getList()
    },
    getList(){
      this.loading = true
      this.$api.getTasks(this.queryParams).then(response=>{
        if(response.code == 200){
          this.tableData = response.data.records
          this.total = response.data.total
          this.loading = false
        }
      }).catch(error=>{
        this.loading = false
      })
    },
    handleCurrentChange(val) {
      this.queryParams.current = val;
      this.getList();
    },
    //排序
    sortChange({ column, prop, order }) {
      if (!order) {
        return false
      }
      const o = {
        'descending': 'desc',
        'ascending': 'asc',
      }
      this.queryParams.orderBy = prop
      this.queryParams.orderType = o[order]
      this.getList()
    },
    //删除
    handleDelete(row) {
      this.$confirm('确认删除本条数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        this.$api.deleteTask({ id: row.id }).then(response => {
          this.$message.success('删除成功')
          this.loading = false
          this.getList()
        }).catch(error => {
          this.loading = false
        })
      })
    },
    // 网站导入表格操作按钮组
    handleCommand(command,row) {
      switch (command) {
        case '1'://暂停/继续
          this.handleSuspend(row)
          break;
        case '2'://删除
          this.handleDelete(row)
          break;
        case '3'://取消定时
          // this.handleTime(row)
          break;
        case '4'://更新日志
          this.updateLog(row)
          break;
        default:
          break;
      }
    },
    handleClick(row){
      this.handleDelete(row)
    },
    //更新日志
    updateLog(row){
      this.$refs.updateLog.open(row,this.webSocket)
    },
    // 网站导入暂停，继续任务操作
    async handleSuspend(row) {
      // console.log(this.pause);
      if (row.status==1) {//暂停pauseJobTask
       await this.$api.pauseJobTask({taskId: row.id}).then(res => {
          if (res.code == 200) {
            row.status==4
            this.$message.success('已成功暂停该任务')
            // console.log(this.pause);
          }
        })
      } else if (row.status==4) {//继续
       await this.$api.resumeJobTask({taskId: row.id}).then(res => {
          if (res.code == 200) {
            row.status==res.data
            this.$message.success('继续执行该任务')
          }
        })
      }
      // this.$nextTick(() => {
      //   this.getList()
      // })
    },
    deletes(row) {
      this.$confirm('确认删除本条数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
         this.$api.deleteTasks([row.id]).then(res => {
          if (res.code == 200) {
            if(res.data.length>0){
              this.$message.error(`${res.data.length}条任务删除失败`)
            }else{
              this.$message.success('成功删除该任务')
            }
            
            this.getList()
          }
        })
      }).catch(err => {
        this.$message.info('取消删除该任务')
      })
     
    },

  },
};
</script>
<style lang="scss" scoped>
.operate{
  i{
    font-size: 24px;
  }
}
.log{
  p{
    margin-bottom: 0;
  }
}
.loadCss::after{
  content:'暂停中';
  color: #F56C6C;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  animation: loadName 1s linear infinite;
}
// .loadCss::before{
//   content: '   ';
//   position: absolute;
//   left: 0;
//   top: 0;
//   overflow: hidden;
// }
.loadCss{
  color: #ebeef5;
  margin-left: 10px;
  position: relative;
}
@keyframes loadName {
  0%{
    width: 0;
  };
  100%{
    width: 100%;
  }
}
</style>