lukongtou-front/src/views/TaskView.vue

<template>
    <ElCard shadow="never" ref="el">
        <template #header>
            <div class="flex items-center">
                <span>任务</span>
                <ElButton class="ml-4" type="primary" @click="emit('createTask')">新建任务</ElButton>
                <div class="flex-1"></div>
                <ElIcon @click="refresh" class="cursor-pointer" :class="{ iloading: loading }">
                    <RotateClockwise />
                </ElIcon>
            </div>
        </template>
        <PagingTable url="/tasks" ref="pt" :height="tableHeight">
            <ElTableColumn prop="id" label="ID" width="50" />
            <ElTableColumn prop="createdAt" label="创建时间" :formatter="timeFormatter" width="150" />
            <ElTableColumn prop="startTime" label="执行时间" :formatter="timeFormatter" width="150" />
            <ElTableColumn prop="type" label="任务类型" show-overflow-tooltip>
                <template #default="{ row }">
                    {{ row.items.map((i) => i.type).join(' ,') }}
                </template>
            </ElTableColumn>
            <ElTableColumn prop="status" label="状态" align="center" width="120">
                <template #default="{ row }">
                    <ElTag v-if="row.status === 'pending'" type="info">未开始</ElTag>
                    <ElTag v-if="row.status === 'in_progress'" type="success">执行中</ElTag>
                    <ElTag v-if="row.status === 'done'" type="">已完成</ElTag>
                </template>
            </ElTableColumn>
            <ElTableColumn prop="progress" label="进度" :formatter="progressFormatter" width="100" />
            <ElTableColumn label="操作" align="center" width="100">
                <template #default="{ row }">
                    <ElButton @click="delTask(row)" type="danger" :disabled="row.status === 'in_progress'"
                        >删除</ElButton
                    >
                </template>
            </ElTableColumn>
        </PagingTable>
    </ElCard>
</template>
<script setup>
import { ref, inject, computed } from 'vue'
import PagingTable from '@/components/PagingTable.vue'
import { useTimeFormatter, useEnumFormatter } from '@/utils/formatter'
import { TaskType } from '@/enums'
import { useIntervalFn, useElementSize } from '@vueuse/core'
import { RotateClockwise } from '@vicons/tabler'
import { ElMessage, ElMessageBox } from 'element-plus'
import { http } from '@/plugins/http'

const emit = defineEmits(['createTask'])
const timeFormatter = useTimeFormatter('yyyy-MM-dd HH:mm:ss')
const taskTypeFormatter = useEnumFormatter(TaskType)
const pt = ref(null)
useIntervalFn(() => {
    pt.value && pt.value.refresh()
}, 2000)
function progressFormatter(row, column, value, index) {
    return `${value + 1}/${row.accounts.length * row.items.length}`
}
const loading = ref(false)
function refresh() {
    pt.value && pt.value.refresh()
    loading.value = true
    setTimeout(() => {
        loading.value = false
    }, 1000)
}
const el = ref(null)
const { width, height } = useElementSize(el)
const tableHeight = computed(() => {
    return height.value - 105
})
async function delTask(row) {
    try {
        await ElMessageBox.confirm('此操作将永久删除该任务, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        })
        await http.delete(`/tasks/${row.id}`)
        refresh()
    } catch (error) {
        if ('cancel' === error) return
        ElMessage.error(error.message)
    }
}
</script>