400 lines
11 KiB
Vue
400 lines
11 KiB
Vue
<template>
|
|
<div class="plan-list">
|
|
<el-card>
|
|
<template #header>
|
|
<div class="card-header">
|
|
<div class="title-container">
|
|
<h2 class="page-title">计划管理</h2>
|
|
<el-button type="text" @click="loadPlans" class="refresh-btn" title="刷新计划列表">
|
|
<el-icon :size="20"><Refresh /></el-icon>
|
|
</el-button>
|
|
</div>
|
|
<el-button type="primary" @click="addPlan">添加计划</el-button>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- 加载状态 -->
|
|
<div v-if="loading" class="loading">
|
|
<el-skeleton animated />
|
|
</div>
|
|
|
|
<!-- 错误状态 -->
|
|
<div v-else-if="error" class="error">
|
|
<el-alert
|
|
title="获取计划数据失败"
|
|
:description="error"
|
|
type="error"
|
|
show-icon
|
|
closable
|
|
@close="error = null"
|
|
/>
|
|
<el-button type="primary" @click="loadPlans" class="retry-btn">重新加载</el-button>
|
|
</div>
|
|
|
|
<el-table
|
|
v-else
|
|
:data="plans"
|
|
style="width: 100%"
|
|
class="plan-list-table"
|
|
:fit="true"
|
|
:scrollbar-always-on="true"
|
|
@sort-change="handleSortChange">
|
|
<el-table-column prop="id" label="计划ID" min-width="100" sortable="custom" />
|
|
<el-table-column prop="name" label="计划名称" min-width="120" sortable="custom" />
|
|
<el-table-column prop="description" label="计划描述" min-width="150" />
|
|
<el-table-column prop="execution_type" label="执行类型" min-width="150" sortable="custom">
|
|
<template #default="scope">
|
|
<el-tag v-if="scope.row.execution_type === 'manual'">手动</el-tag>
|
|
<el-tag v-else-if="scope.row.execute_num === 0" type="success">自动(无限执行)</el-tag>
|
|
<el-tag v-else type="warning">自动({{ scope.row.execute_num }}次)</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="execute_count" label="已执行次数" min-width="120" sortable="custom" />
|
|
<el-table-column prop="status" label="状态" min-width="100" sortable="custom">
|
|
<template #default="scope">
|
|
<el-tag v-if="scope.row.status === 0" type="danger">禁用计划</el-tag>
|
|
<el-tag v-else-if="scope.row.status === 1" type="success">启用计划</el-tag>
|
|
<el-tag v-else-if="scope.row.status === 3" type="danger">执行失败</el-tag>
|
|
<el-tag v-else type="info">执行完毕</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="cron_expression" label="下次执行时间" min-width="150" sortable="custom">
|
|
<template #default="scope">
|
|
{{ formatNextExecutionTime(scope.row.cron_expression) }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="280">
|
|
<template #default="scope">
|
|
<el-button size="small" @click="editPlan(scope.row)">编辑</el-button>
|
|
<el-button size="small" @click="showDetails(scope.row)">详情</el-button>
|
|
<el-button
|
|
size="small"
|
|
:type="scope.row.status === 1 ? 'warning' : 'primary'"
|
|
@click="scope.row.status === 1 ? stopPlan(scope.row) : startPlan(scope.row)"
|
|
:loading="stoppingPlanId === scope.row.id || startingPlanId === scope.row.id"
|
|
>
|
|
{{ scope.row.status === 1 ? '停止' : '启动' }}
|
|
</el-button>
|
|
<el-button size="small" type="danger" @click="deletePlan(scope.row)">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
</el-card>
|
|
|
|
<!-- 计划表单 -->
|
|
<PlanForm
|
|
v-model:visible="dialogVisible"
|
|
:plan-data="currentPlan"
|
|
:is-edit="isEdit"
|
|
@success="handlePlanSuccess"
|
|
@cancel="handlePlanCancel"
|
|
/>
|
|
|
|
<!-- 计划详情 -->
|
|
<el-dialog
|
|
v-model="detailsVisible"
|
|
title="计划详情"
|
|
width="70%"
|
|
top="5vh"
|
|
>
|
|
<plan-detail
|
|
v-if="detailsVisible"
|
|
:plan-id="selectedPlanIdForDetails"
|
|
/>
|
|
<template #footer>
|
|
<span class="dialog-footer">
|
|
<el-button @click="detailsVisible = false">关闭</el-button>
|
|
</span>
|
|
</template>
|
|
</el-dialog>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { Refresh } from '@element-plus/icons-vue';
|
|
import apiClient from '../api/index.js';
|
|
import PlanForm from './PlanForm.vue';
|
|
import PlanDetail from './PlanDetail.vue'; // 导入新组件
|
|
import cronParser from 'cron-parser';
|
|
|
|
export default {
|
|
name: 'PlanList',
|
|
components: {
|
|
PlanForm,
|
|
PlanDetail, // 注册新组件
|
|
Refresh
|
|
},
|
|
data() {
|
|
return {
|
|
plans: [],
|
|
originalPlans: [], // Store the original unsorted list
|
|
dialogVisible: false,
|
|
detailsVisible: false, // 控制详情对话框
|
|
isEdit: false,
|
|
loading: false,
|
|
error: null,
|
|
currentPlan: {
|
|
id: null,
|
|
name: '',
|
|
description: '',
|
|
execution_type: 'automatic',
|
|
execute_num: 0,
|
|
cron_expression: ''
|
|
},
|
|
selectedPlanIdForDetails: null, // 当前要查看详情的计划ID
|
|
startingPlanId: null,
|
|
stoppingPlanId: null
|
|
};
|
|
},
|
|
async mounted() {
|
|
await this.loadPlans();
|
|
},
|
|
methods: {
|
|
// 加载计划列表
|
|
async loadPlans() {
|
|
this.loading = true;
|
|
this.error = null;
|
|
|
|
try {
|
|
const response = await apiClient.plans.getPlans(); // 更正此处
|
|
let fetchedPlans = response.data?.plans || [];
|
|
// Default sort by ID ascending
|
|
fetchedPlans.sort((a, b) => a.id - b.id);
|
|
this.plans = fetchedPlans;
|
|
this.originalPlans = [...this.plans]; // Keep a copy of the original order
|
|
} catch (err) {
|
|
this.error = err.message || '未知错误';
|
|
console.error('加载计划列表失败:', err);
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
},
|
|
|
|
// 处理表格排序
|
|
handleSortChange({ prop, order }) {
|
|
if (!order) {
|
|
// 恢复原始顺序
|
|
this.plans = [...this.originalPlans];
|
|
return;
|
|
}
|
|
|
|
const sortFactor = order === 'ascending' ? 1 : -1;
|
|
|
|
this.plans.sort((a, b) => {
|
|
let valA = a[prop];
|
|
let valB = b[prop];
|
|
|
|
// '下次执行时间' 列的特殊排序逻辑
|
|
if (prop === 'cron_expression') {
|
|
try {
|
|
const parser = cronParser.default || cronParser;
|
|
valA = valA ? parser.parse(valA).next().toDate().getTime() : 0;
|
|
} catch (e) {
|
|
valA = 0; // 无效的 cron 表达式排在前面
|
|
}
|
|
try {
|
|
const parser = cronParser.default || cronParser;
|
|
valB = valB ? parser.parse(valB).next().toDate().getTime() : 0;
|
|
} catch (e) {
|
|
valB = 0;
|
|
}
|
|
}
|
|
|
|
if (valA < valB) {
|
|
return -1 * sortFactor;
|
|
}
|
|
if (valA > valB) {
|
|
return 1 * sortFactor;
|
|
}
|
|
return 0;
|
|
});
|
|
},
|
|
|
|
// 格式化下次执行时间
|
|
formatNextExecutionTime(cronExpression) {
|
|
if (!cronExpression) {
|
|
return '-';
|
|
}
|
|
|
|
try {
|
|
// 正确使用cron-parser库
|
|
const parser = cronParser.default || cronParser;
|
|
const interval = parser.parse(cronExpression);
|
|
const next = interval.next().toDate();
|
|
return next.toLocaleString('zh-CN');
|
|
} catch (err) {
|
|
console.error('解析cron表达式失败:', err);
|
|
return '无效的表达式';
|
|
}
|
|
},
|
|
|
|
addPlan() {
|
|
this.currentPlan = {
|
|
id: null,
|
|
name: '',
|
|
description: '',
|
|
execution_type: 'automatic',
|
|
execute_num: 0,
|
|
cron_expression: ''
|
|
};
|
|
this.isEdit = false;
|
|
this.dialogVisible = true;
|
|
},
|
|
|
|
showDetails(plan) {
|
|
this.selectedPlanIdForDetails = plan.id;
|
|
this.detailsVisible = true;
|
|
},
|
|
|
|
editPlan(plan) {
|
|
this.currentPlan = { ...plan };
|
|
this.isEdit = true;
|
|
this.dialogVisible = true;
|
|
},
|
|
|
|
async deletePlan(plan) {
|
|
try {
|
|
await this.$confirm('确认删除该计划吗？', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
});
|
|
|
|
await apiClient.plans.deletePlan(plan.id);
|
|
this.$message.success('删除成功');
|
|
await this.loadPlans();
|
|
} catch (err) {
|
|
if (err !== 'cancel') {
|
|
this.$message.error('删除失败: ' + (err.message || '未知错误'));
|
|
}
|
|
}
|
|
},
|
|
|
|
async startPlan(plan) {
|
|
try {
|
|
this.startingPlanId = plan.id;
|
|
await apiClient.plans.startPlan(plan.id);
|
|
this.$message.success('计划启动成功');
|
|
await this.loadPlans();
|
|
} catch (err) {
|
|
this.$message.error('启动失败: ' + (err.message || '未知错误'));
|
|
} finally {
|
|
this.startingPlanId = null;
|
|
}
|
|
},
|
|
|
|
async stopPlan(plan) {
|
|
try {
|
|
this.stoppingPlanId = plan.id;
|
|
await apiClient.plans.stopPlan(plan.id);
|
|
this.$message.success('计划停止成功');
|
|
await this.loadPlans();
|
|
} catch (err) {
|
|
this.$message.error('停止失败: ' + (err.message || '未知错误'));
|
|
} finally {
|
|
this.stoppingPlanId = null;
|
|
}
|
|
},
|
|
|
|
// 处理计划表单提交成功
|
|
async handlePlanSuccess(planData) {
|
|
try {
|
|
if (this.isEdit) {
|
|
// 编辑计划
|
|
await apiClient.plans.updatePlan(planData.id, planData);
|
|
this.$message.success('计划更新成功');
|
|
} else {
|
|
// 添加新计划
|
|
const planRequest = {
|
|
...planData,
|
|
content_type: 'tasks' // 默认使用任务类型
|
|
};
|
|
|
|
await apiClient.plans.createPlan(planRequest);
|
|
this.$message.success('计划添加成功');
|
|
}
|
|
|
|
await this.loadPlans();
|
|
} catch (err) {
|
|
this.$message.error('保存失败: ' + (err.message || '未知错误'));
|
|
}
|
|
},
|
|
|
|
// 处理计划表单取消
|
|
handlePlanCancel() {
|
|
this.dialogVisible = false;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.plan-list {
|
|
padding: 20px;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 15px 0;
|
|
}
|
|
|
|
.title-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.page-title {
|
|
margin: 0;
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
line-height: 1;
|
|
}
|
|
|
|
.refresh-btn {
|
|
color: black;
|
|
background-color: transparent;
|
|
padding: 0;
|
|
width: 24px;
|
|
height: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: none;
|
|
}
|
|
|
|
.loading {
|
|
padding: 20px 0;
|
|
}
|
|
|
|
.error {
|
|
padding: 20px 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.retry-btn {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.plan-list-table :deep(tbody)::after {
|
|
content: "";
|
|
display: block;
|
|
height: 20px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.plan-list {
|
|
padding: 10px;
|
|
}
|
|
.card-header {
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
}
|
|
}
|
|
</style> |