hx-mini-web/src/layout/components/tasks.vue

<template>
	<el-container v-loading="loading">
		<el-main>
			<el-empty v-if="tasks.length==0" :image-size="120" >
				<template #description>
					<h2>没有正在执行的任务</h2>
				</template>
				<p style="font-size: 14px;color: #999;line-height: 1.5;margin: 0 40px;">在处理耗时过久的任务时为了不阻碍正在处理的工作，可在任务中心进行异步执行。</p>
			</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 :size="20"><el-icon-paperclip /></el-icon>
						<!-- <el-icon v-if="task.type=='report'" :size="20"><el-icon-dataAnalysis /></el-icon> -->
					</div>
					<div class="taskMain">
						<div class="title">
							<h2>{{ task.name }}</h2>
							<p><span v-time.tip="task.create_at"></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=='1'">完成</el-tag>
								<el-tag v-if="task.status=='2'">完成-无数据</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>
	export default {
		data() {
			return {
				loading: false,
				tasks: []
			}
		},
		mounted() {
			this.getData()
		},
		methods: {
			async getData(){
				this.loading = true
				var res = await this.$API.system.tasks.list.get()
				this.tasks = res.data
				this.loading = false
			},
			refresh(){
				this.getData()
			},
			download(row){
				let a = document.createElement("a")
				a.style = "display: none"
				a.target = "_blank"
				a.href = row.down_url
				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>