refactor: 移除数据处理状态切换

This commit is contained in:
caoxiaozhu
2026-07-10 23:57:07 +08:00
parent 57c3947615
commit a438684575

View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, computed } from 'vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import DataTablePage from '@/components/DataTablePage.vue'
@@ -55,24 +55,6 @@ const dataList = ref<DataProcessTask[]>([
},
])
const activeTab = ref('all')
const filteredDataList = computed(() => {
let list = dataList.value
if (activeTab.value !== 'all') {
if (activeTab.value === 'processing') {
list = list.filter(item => item.status === 'running' || item.status === 'pending')
} else if (activeTab.value === 'completed') {
list = list.filter(item => item.status === 'completed')
} else if (activeTab.value === 'failed') {
list = list.filter(item => item.status === 'failed')
}
}
return list
})
/** 新建数据处理任务 */
function handleCreate() {
router.push('/data-process/create')
@@ -98,7 +80,7 @@ function formatDateTime(value?: string) {
<div class="data-process-page" style="height: 100%;">
<DataTablePage
title=""
:data="filteredDataList"
:data="dataList"
searchable
:search-fields="['name']"
create-text="新建数据处理任务"
@@ -106,32 +88,6 @@ function formatDateTime(value?: string) {
row-key="id"
:page-size="10"
>
<template #title>
<!-- 胶囊切换控件 -->
<div class="capsule-tabs">
<button
class="capsule-tab-item"
:class="{ active: activeTab === 'all' }"
@click="activeTab = 'all'"
>
全部任务
</button>
<button
class="capsule-tab-item"
:class="{ active: activeTab === 'processing' }"
@click="activeTab = 'processing'"
>
处理中
</button>
<button
class="capsule-tab-item"
:class="{ active: activeTab === 'completed' }"
@click="activeTab = 'completed'"
>
已完成
</button>
</div>
</template>
<template #columns>
<el-table-column label="任务名称" prop="name" align="center" show-overflow-tooltip />
<el-table-column label="任务状态" align="center" width="110">
@@ -168,41 +124,6 @@ function formatDateTime(value?: string) {
</template>
<style scoped lang="scss">
/* 胶囊切换栏样式 */
.capsule-tabs {
display: flex;
background: #f1f5f9;
padding: 3px;
border-radius: 8px;
gap: 2px;
border: 1px solid #e2e8f0;
}
.capsule-tab-item {
border: 0;
background: transparent;
padding: 6px 20px;
font-size: 13px;
font-weight: 500;
color: #64748b;
cursor: pointer;
border-radius: 6px;
transition: all 0.2s ease;
outline: none;
&:hover {
color: #1e293b;
}
&.active {
background: #fff;
color: #4f46e5;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
font-weight: 600;
}
}
.action-buttons {
display: flex;
justify-content: center;