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" />
</template>

<script setup lang="ts">
import { cancelTask, getTaskInfo, getTaskList, type TaskInfo, type TaskList } from '@/api/module/taks'
import { useMessage } from '@/composables/useMessage'
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%' },
]


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()
}
onMounted(() => {
  getList()
})
</script>

<style scoped></style>