86 lines
2.6 KiB
Vue
86 lines
2.6 KiB
Vue
<template>
|
|
<el-container v-loading="loading">
|
|
<el-main>
|
|
<el-empty v-if="tasks.length==0" :image-size="120" >
|
|
<template #description>
|
|
<h2>没有正在执行的任务</h2>
|
|
</template>
|
|
</el-empty>
|
|
<el-card v-for="task in tasks" :key="task.id" shadow="hover" class="user-bar-tasks-item">
|
|
<div class="user-bar-tasks-item-body">
|
|
<div class="taskIcon">
|
|
<el-icon v-if="task.type=='1'" :size="20"><el-icon-paperclip /></el-icon>
|
|
</div>
|
|
<div class="taskMain">
|
|
<div class="title">
|
|
<h2>{{ task.task_name }}</h2>
|
|
<p><span v-time.tip="task.create_time"></span> 创建</p>
|
|
</div>
|
|
<div class="bottom">
|
|
<div class="state">
|
|
<el-tag type="info" v-if="task.status=='0'">待处理</el-tag>
|
|
<el-tag v-if="task.status=='3'">处理中</el-tag>
|
|
<el-tag type="info" v-if="task.status=='1'">完成</el-tag>
|
|
<el-tag type="danger" v-if="task.status=='0'">失败</el-tag>
|
|
</div>
|
|
<div class="handler">
|
|
<el-button v-if="task.status=='1'" type="primary" circle icon="el-icon-download" @click="download(task)"></el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-main>
|
|
<el-footer style="padding:10px;text-align: right;">
|
|
<el-button circle icon="el-icon-refresh" @click="refresh"></el-button>
|
|
</el-footer>
|
|
</el-container>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {ref, onMounted} from "vue";
|
|
import api from "@/api";
|
|
|
|
let loading = ref(false)
|
|
let tasks = ref([])
|
|
|
|
|
|
onMounted(() => {
|
|
getData()
|
|
})
|
|
|
|
async function getData(){
|
|
// loading.value = true
|
|
// const res = await api.system.tasks.list();
|
|
// tasks.value= res.data
|
|
// loading.value = false
|
|
}
|
|
|
|
function refresh(){
|
|
getData()
|
|
}
|
|
|
|
function download(row){
|
|
let a = document.createElement("a")
|
|
a.style = "display: none"
|
|
a.target = "_blank"
|
|
a.href = row.attach
|
|
document.body.appendChild(a)
|
|
a.click()
|
|
document.body.removeChild(a)
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
.user-bar-tasks-item {margin-bottom: 10px;}
|
|
.user-bar-tasks-item:hover {border-color: var(--el-color-primary);}
|
|
.user-bar-tasks-item-body {display: flex;}
|
|
.user-bar-tasks-item-body .taskIcon {width: 45px;height: 45px;background: var(--el-color-primary-light-9);margin-right: 20px;display: flex;justify-content:center;align-items: center;color: var(--el-color-primary);border-radius:20px;}
|
|
.user-bar-tasks-item-body .taskMain {flex: 1;}
|
|
.user-bar-tasks-item-body .title h2 {font-size: 15px;}
|
|
.user-bar-tasks-item-body .title p {font-size: 12px;color: #999;margin-top: 5px;}
|
|
.user-bar-tasks-item-body .bottom {display: flex;justify-content: space-between;align-items: center;padding-top: 20px;}
|
|
</style>
|