UP 替换任务中心表格为卡片

src/layout/components/tasks.vue

@@ -1,28 +1,63 @@
 <template>
-	<scTable ref="table" :apiObj="apiObj" row-key="id" empty-text="没有正在执行的任务" paginationLayout="total, prev, pager, next">
-		<sc-table-column label="序号" type="index"></sc-table-column>
-		<sc-table-column label="任务名称" prop="taskName" min-width="100"></sc-table-column>
-		<sc-table-column label="创建时间" prop="createDate" width="170"></sc-table-column>
-		<sc-table-column label="状态" prop="stateName" width="80"></sc-table-column>
-		<sc-table-column label="结果" prop="result" width="80">
-			<template #default="scope">
-				<el-button v-if="scope.row.state=='1'" type="primary" icon="el-icon-download" circle plain size="small" @click="download(scope.row)"></el-button>
-			</template>
-		</sc-table-column>
-	</scTable>
+	<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 v-if="task.type=='export'" :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.taskName }}</h2>
+							<p><span v-time.tip="task.createDate"></span> 创建</p>
+						</div>
+						<div class="bottom">
+							<div class="state">
+								<el-tag type="info" v-if="task.state=='0'">执行中</el-tag>
+								<el-tag v-if="task.state=='1'">完成</el-tag>
+							</div>
+							<div class="handler">
+								<el-button v-if="task.state=='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 {
-				apiObj: this.$API.system.tasks.list,
+				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"
@@ -37,5 +72,12 @@
 </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>

src/layout/components/userbar.vue

@@ -65,7 +65,7 @@
 		<search @success="searchVisible=false"></search>
 	</el-dialog>
 
-	<el-drawer v-model="tasksVisible" :size="550"  title="任务中心" destroy-on-close>
+	<el-drawer v-model="tasksVisible" :size="450"  title="任务中心" custom-class="drawerBG" destroy-on-close>
 		<tasks></tasks>
 	</el-drawer>