141 lines
4.2 KiB
Vue
141 lines
4.2 KiB
Vue
<template>
|
|
<div style="padding: 10px; display: flex; flex-direction: column; align-items: end">
|
|
<div style="display: flex; align-items: center; gap: 10px">
|
|
<el-tag type="info">任务数 {{ roleList?.length }}</el-tag>
|
|
<el-button type="primary" link icon="refresh" @click="fetchData">刷新任务</el-button>
|
|
</div>
|
|
<el-table
|
|
ref="dataTableRef"
|
|
:data="roleList"
|
|
highlight-current-row
|
|
border
|
|
show-overflow-tooltip
|
|
class="data-table__content"
|
|
>
|
|
<el-table-column label="任务类型" prop="task_type">
|
|
<template #default="scope">
|
|
<span>{{ scope.row.task_type === 'check_login' ? '检查登录' : '招聘' }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="指定电脑" prop="worker_id" />
|
|
<el-table-column label="环境名称" prop="account_name" />
|
|
<el-table-column label="任务进度" prop="progress" />
|
|
<el-table-column
|
|
label="任务状态"
|
|
prop="status"
|
|
width="90px"
|
|
align="center"
|
|
header-align="center"
|
|
>
|
|
<template #default="scope">
|
|
<el-tag v-if="scope.row.status === 'pending'" type="primary">待派发</el-tag>
|
|
<el-tag v-else-if="scope.row.status === 'dispatched'" type="warning">已派发</el-tag>
|
|
<el-tag v-else-if="scope.row.status === 'running'" type="warning">执行中</el-tag>
|
|
<el-tag v-else-if="scope.row.status === 'success'" type="success">成功</el-tag>
|
|
<el-tag v-else-if="scope.row.status === 'failed'" type="danger">失败</el-tag>
|
|
<el-tag v-else-if="scope.row.status === 'cancelled'" type="info">已停止</el-tag>
|
|
<span v-else>--</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="创建时间" prop="created_at">
|
|
<template #default="scope">
|
|
{{ formatISOToDateTime(scope.row?.created_at || '') }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="完成时间" prop="updated_at">
|
|
<template #default="scope">
|
|
{{ formatISOToDateTime(scope.row?.updated_at || '') }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="110" align="center" header-align="center">
|
|
<template #default="scope">
|
|
<el-button
|
|
type="danger"
|
|
size="small"
|
|
link
|
|
:disabled="!canCancel(scope.row.status)"
|
|
@click="handleCancelTask(scope.row)"
|
|
>
|
|
停止
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<pagination
|
|
v-if="total > 0"
|
|
v-model:total="total"
|
|
v-model:page="queryParams.pageNum"
|
|
v-model:limit="queryParams.pageSize"
|
|
@pagination="fetchData"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
// 表格数据
|
|
import { ApiTasks, ApiTasksCancel } from '@/api/TaskManagement'
|
|
import { formatISOToDateTime } from '@/utils/auxiliaryFunction'
|
|
import { createTimer } from '@/utils/TimerManager'
|
|
|
|
const props = defineProps({
|
|
bossId: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
})
|
|
const { startTimer, stopTimer } = createTimer()
|
|
const roleList = ref<any[]>()
|
|
const total = ref(0)
|
|
const queryParams = reactive<any>({
|
|
pageNum: 1,
|
|
pageSize: 10
|
|
})
|
|
|
|
const cancellableStatuses = new Set(['pending', 'dispatched', 'running'])
|
|
|
|
const canCancel = (status: string) => {
|
|
return cancellableStatuses.has(String(status || '').toLowerCase())
|
|
}
|
|
|
|
const handleCancelTask = (row: any) => {
|
|
if (!row?.task_id || !canCancel(row?.status)) {
|
|
return
|
|
}
|
|
|
|
ElMessageBox.confirm('确认停止该任务吗？', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(
|
|
() => {
|
|
ApiTasksCancel(row.task_id).then((res: any) => {
|
|
ElMessage.success(res.msg || '任务已停止')
|
|
fetchData()
|
|
})
|
|
},
|
|
() => {
|
|
ElMessage.info('已取消操作')
|
|
}
|
|
)
|
|
}
|
|
|
|
// 获取数据
|
|
function fetchData() {
|
|
ApiTasks(props.bossId, queryParams.pageNum, queryParams.pageSize).then((res: any) => {
|
|
roleList.value = res.data.results
|
|
total.value = res.data.total
|
|
})
|
|
}
|
|
defineExpose({
|
|
fetchData
|
|
})
|
|
onMounted(() => {
|
|
startTimer(fetchData, 5000)
|
|
})
|
|
onUnmounted(() => {
|
|
stopTimer()
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss"></style>
|