admin/src/layout/components/attach.vue

<template>
	<el-container v-loading="loading">
		<el-scrollbar :view-style="{ 'overflow-x': 'hidden' }" @endReached="handleScroll">
			<el-main>
				<el-empty v-if="attachList.length===0" :image-size="120">
					<template #description>
						<h2>没有正在执行的任务</h2>
					</template>
				</el-empty>
				<el-card v-for="(attach, index) in attachList" :key="attach.attachment_id" shadow="hover"
						 class="user-bar-attach-item">
					<div class="user-bar-attach-item-body">
						<div class="attachIcon">
							<el-icon :size="20">
								<el-icon-paperclip/>
							</el-icon>
						</div>
						<div class="attachMain">
							<div class="title">
								<h2>{{ attach.name }}</h2>
								<p><span v-time.tip="attach.create_time"></span> 创建</p>
								<p v-if="attach.status===2"><span>{{ attach.fail_reason }}</span></p>
							</div>
							<div class="bottom">
								<div class="state">
									<el-tag type="info" v-if="attach.status===0">待处理</el-tag>
									<el-tag type="success" v-if="attach.status===1">完成</el-tag>
									<el-tag type="warning" v-if="attach.status===2">失败</el-tag>
								</div>
								<div class="handler">
									<el-button type="danger" circle icon="el-icon-delete"
											   @click="remove(attach, index)"></el-button>
									<el-button v-if="attach.status===1" type="primary" circle icon="el-icon-download"
											   @click="download(attach)"></el-button>
								</div>
							</div>
						</div>
					</div>
				</el-card>
			</el-main>
		</el-scrollbar>
		<el-footer style="padding:10px;text-align: right;">
			<el-button circle icon="el-icon-delete" @click="removeAll"></el-button>
			<el-button circle icon="el-icon-refresh" @click="refresh"></el-button>
		</el-footer>
	</el-container>
</template>

<script setup>
import {ref, onMounted, getCurrentInstance} from "vue"
import api from "@/api"
import {ElMessageBox} from 'element-plus'
import tools from "@/utils/tools"

const {proxy} = getCurrentInstance()

let loading = ref(false)
let attachList = ref([])
let page = ref(1)
let limit = ref(5)
let finish = ref(false)

onMounted(() => {
	loadData()
})

async function loadData() {
	loading.value = true
	const res = await api.tools.attachment.list({page: page.value, limit: limit.value});
	loading.value = false
	attachList.value = attachList.value.concat(res.data)
	if (res.data.length < limit.value) {
		finish.value = true
	}
}

function refresh() {
	page.value = 1
	attachList.value = []
	finish.value = false
	loadData()
}

function removeAll() {
	ElMessageBox.prompt('请输入“清空所有”以确认操作', '警告', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		inputPattern: /^清空所有$/,
		inputErrorMessage: '输入错误',
	}).then(async () => {
		loading.value = true
		const [res, err] = await tools.go(api.tools.attachment.clear());
		loading.value = false
		if (!err) {
			proxy.$message.error(res.msg)
			return
		}
		proxy.$message.success(res.msg)
		attachList.value = []
	}).catch(() => {
	})
}

function download(row) {
	let a = document.createElement("a")
	a.style = "display: none"
	a.href = row.path
	document.body.appendChild(a)
	a.click()
	document.body.removeChild(a)
}

async function handleScroll(event) {
	if (loading.value || finish.value || event !== "bottom") return
	page.value++
	await loadData()
}

async function remove(row, index) {
	loading.value = true
	const res = await api.tools.attachment.del({ids: [row.attachment_id]});
	loading.value = false
	proxy.$message.success(res.msg)
	attachList.value.splice(index, 1)
}
</script>


<style scoped>
.user-bar-attach-item {
	margin-bottom: 10px;
}

.user-bar-attach-item:hover {
	border-color: var(--el-color-primary);
}

.user-bar-attach-item-body {
	display: flex;
}

.user-bar-attach-item-body .attachIcon {
	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-attach-item-body .attachMain {
	flex: 1;
}

.user-bar-attach-item-body .title h2 {
	font-size: 15px;
}

.user-bar-attach-item-body .title p {
	font-size: 12px;
	color: #999;
	margin-top: 5px;
}

.user-bar-attach-item-body .bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 20px;
}
</style>