EDFS-MCU/src/views/taskList/index.vue

<template>
  <div class="task-list wh-full">
    <EdfsWrap title="任务列表" class="h-full">
      <EdfsTable class="wh-full" v-loading="loading" :data="list" ref="tableRef"
                 :highlight-current-row="true"
                 :page-total="total" :current-page="queryParams.page" :page-size="queryParams.size"
                 row-class-name="row"
                 @pageCurrentChange="handleJump">
        <template v-for="(col, idx) in tableCol" :key="idx">
          <el-table-column v-if="col.prop.endsWith('Time')" :label="col.label"
                           :min-width="col.minWidth">
            <template #default="scope">
              {{ dayjs(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
            </template>
          </el-table-column>
          <el-table-column v-else-if="col.prop === 'status'" :prop="col.prop" :label="col.label"
                           :min-width="col.minWidth">
            <template #default="scope">
              {{ taskStatus.find(r => r.value === scope.row.status)?.label || '--' }}
            </template>
          </el-table-column>
          <el-table-column v-else-if="col.prop === 'mode'" :prop="col.prop" :label="col.label"
                           :min-width="col.minWidth">
            <template #default="scope">
              {{ taskMode.find(r => r.value === scope.row.mode)?.label || '--' }}
            </template>
          </el-table-column>
          <el-table-column v-else :prop="col.prop" :label="col.label" :min-width="col.minWidth"/>
        </template>
        <el-table-column label="操作" width="210" align="center">
          <template #default="scope">
            <EdfsButton size="small" link type="primary" inner-text="详情"
                        @click="onDetail(scope.row)"/>
            <EdfsButton size="small" link type="danger" v-if="[0, 1].includes(scope.row.mode)"
                        inner-text="取消任务"
                        @click="onCancel(scope.row.id)"/>
          </template>
        </el-table-column>
      </EdfsTable>

    </EdfsWrap>
  </div>
  <InfoDrawer ref="InfoDrawerRef" @task-finish="onTaskFinish"/>
</template>

<script setup lang="ts">
import {
  cancelTask,
  getTaskInfo,
  getTaskList,
  type TaskInfo,
  type TaskList
} from '@/api/module/taks'
import { useMessage } from '@/composables/useMessage'
import EdfsWrap from "@/components/Edfs-wrap.vue";
import EdfsTable from "@/components/Edfs-table/index.vue";
import EdfsButton from "@/components/Edfs-button.vue";
import dayjs from 'dayjs'
import InfoDrawer from './infoDrawer.vue'

const message = useMessage()
const taskStatus = [{
  value: -1,
  label: '执行失败'
}, {
  label: '等待执行',
  value: 0
}, {
  label: '执行中',
  value: 1
}, {
  label: '已取消',
  value: 2
}, {
  label: '执行成功',
  value: 3
}]

const taskMode = [{
  value: 'export',
  label: '迁移'
}, {
  value: 'import',
  label: '导入'
}, {
  value: 'update',
  label: '升级'
}]

const tableCol = [
  { label: '任务ID', prop: 'id', minWidth: '10%' },
  { label: '站点', prop: 'site', minWidth: '16%' },
  { label: '任务类型', prop: 'mode', minWidth: '10%' },
  { label: '任务状态', prop: 'status', minWidth: '10%' },
  { label: '创建时间', prop: 'startTime', minWidth: '10%' },
  { label: '任务详情', prop: 'info', minWidth: '20%' },
]


const loading = ref(true)
const total = ref(0)
const list = ref<TaskList[]>([])
const queryParams = reactive({
  page: 1,
  size: undefined,
})
const tableRef = ref()
const getList = async () => {
  if (!queryParams.size) {
    queryParams.size = tableRef.value.getSize()
  }
  loading.value = true

  const res = await getTaskList(queryParams as any)

  if (res !== null && res.code === 0) {
    list.value = res.data.tasks
    total.value = res.data.total
  }

  loading.value = false
}

function handleJump(page: number) {
  queryParams.page = page
  getList()
}

const InfoDrawerRef = ref<typeof InfoDrawer>()

function onDetail(row: TaskList) {
  InfoDrawerRef.value?.open(row)
}

const onCancel = async (id: string) => {
  await message.delConfirm(`是否确认取消该任务？`)
  const res = await cancelTask(id)
  if (res.code !== 0) return
  await getList()
}

function onTaskFinish(id: string, status: -1 | 0 | 1 | 2 | 3) {
  const curTask = list.value.findIndex(item => item.id === id)
  if (curTask !== -1) {
    list.value[curTask].status = status
  }
}

onMounted(() => {
  getList()
})
</script>

<style scoped></style>