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

<template>
  <div style="padding:5px 10px;" class="todoList">
    <el-form inline>
      <el-form-item style="width: 150px;">
        <el-select v-model="query" size="small">
          <el-option v-for="item in queryOption" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <template v-if="query == 'createName'">
          <el-input v-model="queryParams[query]" size="small" clearable placeholder="请输入创建人名称"
            style="width: 215px;"></el-input>
        </template>
        <template v-else-if="query == 'taskType'">
          <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>
        </template>
        <template v-else>
          <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>
        </template>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" @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" :row-class-name="tableRowClassName">
      <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: [],
      queryOption: [
        { value: 'createName', label: '创建人' },
        { value: 'taskType', label: '任务类型' },
        { value: 'taskType2', label: '导入类型' },
      ],
      query: 'createName',
      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('取消删除该任务')
      })

    },
    // row隔行变色
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 0) {
        return 'height-row'
      }
    },

  },
};
</script>
<style lang="scss">
.todoList {

  .custom-table-header>th {
    background: #deedff !important;
    color: #7ba6d5 !important;
    font-weight: 400 !important;
  }

  .height-row {
    background: #f5faff !important;
  }
}
</style>
<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>