refactor: 移除数据处理状态切换
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user