pig/pig-farm-controller-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修bug

Browse Source
This commit is contained in:
huang
2025-10-31 21:56:33 +08:00
parent fcd1b1c140
commit 840fb98988
3 changed files with 264 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

281
src/components/PlanDetail.vue
View File

@@ -1,15 +1,15 @@
<template>
<div class="plan-detail">
<div v-if="loading" class="loading">
<el-skeleton animated />
<el-skeleton animated/>
</div>
<div v-else-if="error" class="error">
<el-alert
:title="'加载计划内容失败 (ID: ' + planId + ')'"
:description="error"
type="error"
show-icon
@close="error = null"
:title="'加载计划内容失败 (ID: ' + planId + ')'"
:description="error"
type="error"
show-icon
@close="error = null"
/>
<el-button type="primary" @click="fetchPlan" class="retry-btn">重新加载</el-button>
</div>
@@ -20,27 +20,35 @@
<span>{{ plan.name }} - 内容</span>
<div>
<template v-if="!isSubPlan">
<el-button class="button" type="primary" @click="savePlanContent" v-if="isEditingContent" :disabled="plan.plan_type === '系统任务'">保存</el-button>
<el-button class="button" type="danger" @click="cancelEdit" v-if="isEditingContent" :disabled="plan.plan_type === '系统任务'">取消</el-button>
<el-button class="button" @click="enterEditMode" v-else :disabled="plan.plan_type === '系统任务'">编辑内容</el-button>
<el-button class="button" type="primary" @click="savePlanContent" v-if="isEditingContent"
:disabled="plan.plan_type === '系统任务'">保存
</el-button>
<el-button class="button" type="danger" @click="cancelEdit" v-if="isEditingContent"
:disabled="plan.plan_type === '系统任务'">取消
</el-button>
<el-button class="button" @click="enterEditMode" v-else :disabled="plan.plan_type === '系统任务'">
编辑内容
</el-button>
</template>
<!-- Dynamic Add Buttons -->
<template v-if="isEditingContent">
<el-button
v-if="plan.content_type === 'sub_plans' || !plan.content_type"
type="primary"
size="small"
@click="showAddSubPlanDialog"
:disabled="plan.plan_type === '系统任务'"
>增加子计划</el-button>
v-if="plan.content_type === 'sub_plans' || !plan.content_type"
type="primary"
size="small"
@click="showAddSubPlanDialog"
:disabled="plan.plan_type === '系统任务'"
>增加子计划
</el-button>
<el-button
v-if="plan.content_type === 'tasks' || !plan.content_type"
type="primary"
size="small"
@click="showTaskEditorDialog()"
:disabled="plan.plan_type === '系统任务'"
>增加子任务</el-button>
v-if="plan.content_type === 'tasks' || !plan.content_type"
type="primary"
size="small"
@click="showTaskEditorDialog()"
:disabled="plan.plan_type === '系统任务'"
>增加子任务
</el-button>
</template>
</div>
</div>
@@ -51,10 +59,10 @@
<h4>任务列表</h4>
<el-timeline v-if="plan.tasks.length > 0">
<el-timeline-item
v-for="(task, index) in plan.tasks"
:key="task.id || 'new-task-' + index"
:timestamp="'执行顺序: ' + (task.execution_order !== undefined ? task.execution_order : index + 1)"
placement="top"
v-for="(task, index) in plan.tasks"
:key="task.id || 'new-task-' + index"
:timestamp="'执行顺序: ' + (task.execution_order !== undefined ? task.execution_order : index + 1)"
placement="top"
>
<el-card>
<h5>{{ task.name }} ({{ task.type === 'waiting' ? '延时任务' : '未知任务' }})</h5>
@@ -63,8 +71,12 @@
延时: {{ task.parameters.delay_duration }} 秒
</p>
<el-button-group v-if="isEditingContent">
<el-button type="primary" size="small" @click="editTask(task)" :disabled="plan.plan_type === '系统任务'">编辑</el-button>
<el-button type="danger" size="small" @click="deleteTask(task)" :disabled="plan.plan_type === '系统任务'">删除</el-button>
<el-button type="primary" size="small" @click="editTask(task)"
:disabled="plan.plan_type === '系统任务'">编辑
</el-button>
<el-button type="danger" size="small" @click="deleteTask(task)"
:disabled="plan.plan_type === '系统任务'">删除
</el-button>
</el-button-group>
</el-card>
</el-timeline-item>
@@ -76,13 +88,16 @@
<div v-else-if="plan.content_type === 'sub_plans'">
<h4>子计划列表</h4>
<div v-if="plan.sub_plans.length > 0">
<div v-for="(subPlan, index) in plan.sub_plans" :key="subPlan.id || 'new-subplan-' + index" class="sub-plan-wrapper">
<div v-for="(subPlan, index) in plan.sub_plans" :key="subPlan.id || 'new-subplan-' + index"
class="sub-plan-wrapper">
<el-card>
<div class="sub-plan-card-content">
<!-- Pass child_plan_id to recursive PlanDetail -->
<plan-detail :plan-id="subPlan.child_plan_id" :is-sub-plan="true" />
<plan-detail :plan-id="subPlan.child_plan_id" :is-sub-plan="true"/>
<el-button-group v-if="isEditingContent" class="sub-plan-actions">
<el-button type="danger" size="small" @click="deleteSubPlan(subPlan)" :disabled="plan.plan_type === '系统任务'">删除</el-button>
<el-button type="danger" size="small" @click="deleteSubPlan(subPlan)"
:disabled="plan.plan_type === '系统任务'">删除
</el-button>
</el-button-group>
</div>
</el-card>
@@ -102,22 +117,22 @@
<!-- Add Sub-plan Dialog -->
<el-dialog
v-model="addSubPlanDialogVisible"
title="选择子计划"
width="600px"
@close="resetAddSubPlanDialog"
v-model="addSubPlanDialogVisible"
title="选择子计划"
width="600px"
@close="resetAddSubPlanDialog"
>
<el-select
v-model="selectedSubPlanId"
placeholder="请选择一个计划作为子计划"
filterable
style="width: 100%;"
v-model="selectedSubPlanId"
placeholder="请选择一个计划作为子计划"
filterable
style="width: 100%;"
>
<el-option
v-for="item in availablePlans"
:key="item.id"
:label="item.name"
:value="item.id"
v-for="item in availablePlans"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
<template #footer>
@@ -130,32 +145,35 @@
<!-- Task Editor Dialog (for Add and Edit) -->
<el-dialog
v-model="taskEditorDialogVisible"
:title="isEditingTask ? '编辑子任务' : '增加子任务'"
width="600px"
@close="resetTaskEditorDialog"
v-model="taskEditorDialogVisible"
:title="isEditingTask ? '编辑子任务' : '增加子任务'"
width="600px"
@close="resetTaskEditorDialog"
>
<el-form :model="currentTaskForm" ref="taskFormRef" :rules="taskFormRules" label-width="100px">
<el-form-item label="任务类型" prop="type">
<el-select v-model="currentTaskForm.type" placeholder="请选择任务类型" style="width: 100%;" :disabled="isEditingTask || plan.plan_type === '系统任务'">
<el-select v-model="currentTaskForm.type" placeholder="请选择任务类型" style="width: 100%;"
:disabled="isEditingTask || plan.plan_type === '系统任务'">
<!-- Only Delay Task for now -->
<el-option label="延时任务" value="delay_task"></el-option>
</el-select>
</el-form-item>
<el-form-item label="任务名称" prop="name">
<el-input v-model="currentTaskForm.name" placeholder="请输入任务名称" :disabled="plan.plan_type === '系统任务'"></el-input>
<el-input v-model="currentTaskForm.name" placeholder="请输入任务名称"
:disabled="plan.plan_type === '系统任务'"></el-input>
</el-form-item>
<el-form-item label="任务描述" prop="description">
<el-input type="textarea" v-model="currentTaskForm.description" placeholder="请输入任务描述" :disabled="plan.plan_type === '系统任务'"></el-input>
<el-input type="textarea" v-model="currentTaskForm.description" placeholder="请输入任务描述"
:disabled="plan.plan_type === '系统任务'"></el-input>
</el-form-item>
<!-- Dynamic task component for specific parameters -->
<template v-if="currentTaskForm.type === 'delay_task'">
<DelayTaskEditor
:parameters="currentTaskForm.parameters"
@update:parameters="val => currentTaskForm.parameters = val"
prop-path="parameters.delay_duration"
:is-editing="true"
:disabled="plan.plan_type === '系统任务'"
:parameters="currentTaskForm.parameters"
@update:parameters="val => currentTaskForm.parameters = val"
prop-path="parameters.delay_duration"
:is-editing="true"
:disabled="plan.plan_type === '系统任务'"
/>
</template>
<!-- More task types can be rendered here -->
@@ -172,17 +190,17 @@
<script>
import apiClient from '../api/index.js';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ArrowDown } from '@element-plus/icons-vue';
import DelayTaskEditor from './tasks/DelayTask.vue';
import {ElMessage, ElMessageBox} from 'element-plus';
import {ArrowDown} from '@element-plus/icons-vue';
import DelayTaskEditor from './tasks/DelayTask.vue';
export default {
name: 'PlanDetail',
components: {
DelayTaskEditor,
DelayTaskEditor,
// Self-reference for recursion
'plan-detail': this,
ArrowDown,
ArrowDown,
},
props: {
planId: {
@@ -203,9 +221,9 @@ export default {
execution_type: 'automatic',
execute_num: 0,
cron_expression: '',
content_type: null,
sub_plans: [],
tasks: [],
content_type: null,
sub_plans: [],
tasks: [],
},
loading: false,
error: null,
@@ -217,25 +235,25 @@ export default {
availablePlans: [],
// Task Editor dialog (for Add and Edit)
taskEditorDialogVisible: false,
isEditingTask: false,
editingTaskOriginalId: null,
currentTaskForm: {
type: 'delay_task',
taskEditorDialogVisible: false,
isEditingTask: false,
editingTaskOriginalId: null,
currentTaskForm: {
type: 'delay_task',
name: '',
description: '',
parameters: {},
parameters: {},
},
taskFormRules: {
type: [{ required: true, message: '请选择任务类型', trigger: 'change' }],
name: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
taskFormRules: {
type: [{required: true, message: '请选择任务类型', trigger: 'change'}],
name: [{required: true, message: '请输入任务名称', trigger: 'blur'}],
// Rule for delay_duration will be added/removed dynamically
},
};
},
computed: {
delayDurationRules() {
return [{ required: true, message: '请输入延时时间', trigger: 'blur' }];
return [{required: true, message: '请输入延时时间', trigger: 'blur'}];
},
},
watch: {
@@ -247,7 +265,7 @@ export default {
}
},
},
'currentTaskForm.type'(newType) {
'currentTaskForm.type'(newType) {
console.log("PlanDetail: currentTaskForm.type changed to", newType);
if (newType === 'delay_task') {
this.taskFormRules['parameters.delay_duration'] = this.delayDurationRules;
@@ -274,7 +292,7 @@ export default {
sub_plans: response.data.sub_plans || [],
tasks: response.data.tasks || [],
};
this.updateContentType();
this.updateContentType();
} catch (err) {
this.error = err.message || '未知错误';
console.error(`加载计划 (ID: ${this.planId}) 失败:`, err);
@@ -288,7 +306,7 @@ export default {
} else if (this.plan.tasks.length > 0) {
this.plan.content_type = 'tasks';
} else {
this.plan.content_type = null;
this.plan.content_type = null;
}
},
enterEditMode() {
@@ -296,27 +314,27 @@ export default {
console.log("PlanDetail: Entered edit mode.");
},
async savePlanContent() {
this.updateContentType();
this.updateContentType();
try {
const submitData = {
id: this.plan.id,
id: this.plan.id,
name: this.plan.name,
description: this.plan.description,
execution_type: this.plan.execution_type,
execute_num: this.plan.execute_num,
cron_expression: this.plan.cron_expression,
sub_plan_ids: this.plan.content_type === 'sub_plans'
? this.plan.sub_plans.map(sp => sp.child_plan_id)
: [],
? this.plan.sub_plans.map(sp => sp.child_plan_id)
: [],
tasks: this.plan.content_type === 'tasks'
? this.plan.tasks.map((task, index) => ({
? this.plan.tasks.map((task, index) => ({
name: task.name,
description: task.description,
type: task.type,
execution_order: index + 1,
execution_order: index + 1,
parameters: task.parameters || {},
}))
: [],
: [],
};
delete submitData.execute_count;
@@ -325,8 +343,8 @@ export default {
console.log("PlanDetail: Submitting data", submitData);
await apiClient.plans.updatePlan(this.planId, submitData);
ElMessage.success('计划内容已保存');
this.isEditingContent = false;
this.fetchPlan();
this.isEditingContent = false;
this.fetchPlan();
} catch (error) {
ElMessage.error('保存计划内容失败: ' + (error.message || '未知错误'));
console.error('保存计划内容失败:', error);
@@ -335,7 +353,7 @@ export default {
async cancelEdit() {
console.log("PlanDetail: Cancelled edit, re-fetching plan.");
await this.fetchPlan();
this.isEditingContent = false;
this.isEditingContent = false;
ElMessage.info('已取消编辑');
},
@@ -348,7 +366,7 @@ export default {
cancelButtonText: '取消',
type: 'warning'
});
this.plan.tasks = [];
this.plan.tasks = [];
} catch (e) {
return;
}
@@ -358,9 +376,9 @@ export default {
},
async fetchAvailablePlans() {
try {
const response = await apiClient.plans.getPlans({ plan_type: '自定义任务' });
const response = await apiClient.plans.getPlans({plan_type: '自定义任务', page: 1, page_size: 1000});
this.availablePlans = response.data.plans.filter(p =>
p.id !== this.planId
p.id !== this.planId
);
} catch (error) {
ElMessage.error('加载可用计划失败: ' + (error.message || '未知错误'));
@@ -376,12 +394,12 @@ export default {
const selectedPlan = this.availablePlans.find(p => p.id === this.selectedSubPlanId);
if (selectedPlan) {
this.plan.sub_plans.push({
id: Date.now(),
id: Date.now(),
child_plan_id: selectedPlan.id,
child_plan: selectedPlan,
child_plan: selectedPlan,
execution_order: this.plan.sub_plans.length + 1,
});
this.updateContentType();
this.updateContentType();
ElMessage.success(`子计划 "${selectedPlan.name}" 已添加`);
this.addSubPlanDialogVisible = false;
this.resetAddSubPlanDialog();
@@ -400,29 +418,29 @@ export default {
type: 'warning'
}).then(() => {
this.plan.sub_plans = this.plan.sub_plans.filter(sub => sub.id !== subPlanToDelete.id);
this.plan.sub_plans.forEach((item, index) => item.execution_order = index + 1);
this.updateContentType();
this.plan.sub_plans.forEach((item, index) => item.execution_order = index + 1);
this.updateContentType();
ElMessage.success('子计划已删除');
}).catch(() => {
});
},
// --- Task related methods ---
showTaskEditorDialog(task = null) {
showTaskEditorDialog(task = null) {
console.log("PlanDetail: Showing task editor dialog.");
if (this.plan.sub_plans.length > 0 && !task) {
if (this.plan.sub_plans.length > 0 && !task) {
ElMessageBox.confirm('当前计划包含子计划，添加任务将清空现有子计划。是否继续？', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.plan.sub_plans = [];
this.taskEditorDialogVisible = true;
this.prepareTaskForm(task);
}).catch(() => {
// User cancelled
});
return;
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.plan.sub_plans = [];
this.taskEditorDialogVisible = true;
this.prepareTaskForm(task);
}).catch(() => {
// User cancelled
});
return;
}
this.taskEditorDialogVisible = true;
this.prepareTaskForm(task);
@@ -447,11 +465,11 @@ export default {
this.isEditingTask = false;
this.editingTaskOriginalId = null;
// For new tasks, ensure delay_duration is reactive from start
this.currentTaskForm.parameters = { delay_duration: null };
this.currentTaskForm.parameters = {delay_duration: null};
console.log("PlanDetail: Prepared currentTaskForm for adding:", JSON.parse(JSON.stringify(this.currentTaskForm)));
}
// Manually trigger watch for type to ensure rules and default parameters are set
this.updateTaskFormRules();
this.updateTaskFormRules();
},
updateTaskFormRules() {
// Clear existing dynamic rules
@@ -464,7 +482,7 @@ export default {
}
console.log("PlanDetail: Updated taskFormRules:", JSON.parse(JSON.stringify(this.taskFormRules)));
},
confirmTaskEdit() {
confirmTaskEdit() {
console.log("PlanDetail: confirmTaskEdit called. currentTaskForm before validation:", JSON.parse(JSON.stringify(this.currentTaskForm)));
this.$refs.taskFormRef.validate(async (valid) => {
console.log("PlanDetail: Form validation result:", valid);
@@ -479,47 +497,46 @@ export default {
name: this.currentTaskForm.name,
description: this.currentTaskForm.description,
type: this.currentTaskForm.type === 'delay_task' ? 'waiting' : this.currentTaskForm.type,
parameters: { ...this.currentTaskForm.parameters }, // Deep copy parameters to ensure new reference
parameters: {...this.currentTaskForm.parameters}, // Deep copy parameters to ensure new reference
};
this.plan.tasks.splice(index, 1, updatedTask); // Replace the old task with the new one
ElMessage.success(`子任务 "${this.currentTaskForm.name}" 已更新`);
} else {
ElMessage.error('未找到要编辑的任务');
}
}
else {
} else {
// Add a new task
const newTask = {
id: Date.now(),
id: Date.now(),
execution_order: this.plan.tasks.length + 1,
type: this.currentTaskForm.type === 'delay_task' ? 'waiting' : this.currentTaskForm.type,
name: this.currentTaskForm.name,
description: this.currentTaskForm.description,
parameters: { ...this.currentTaskForm.parameters }, // Deep copy parameters to ensure new reference
parameters: {...this.currentTaskForm.parameters}, // Deep copy parameters to ensure new reference
};
this.plan.tasks = [...this.plan.tasks, newTask]; // Create a new array reference
ElMessage.success(`子任务 "${newTask.name}" 已添加`);
}
this.updateContentType();
this.updateContentType();
this.taskEditorDialogVisible = false;
this.resetTaskEditorDialog();
}
});
},
resetTaskEditorDialog() {
resetTaskEditorDialog() {
console.log("PlanDetail: Resetting task editor dialog.");
this.$refs.taskFormRef.resetFields();
this.isEditingTask = false;
this.editingTaskOriginalId = null;
// Manually reset properties to ensure clean state for next use
this.currentTaskForm.type = 'delay_task';
this.currentTaskForm.type = 'delay_task';
this.currentTaskForm.name = '';
this.currentTaskForm.description = '';
this.currentTaskForm.parameters = {};
this.currentTaskForm.parameters = {};
console.log("PlanDetail: currentTaskForm after full reset:", JSON.parse(JSON.stringify(this.currentTaskForm)));
this.updateTaskFormRules();
this.updateTaskFormRules();
},
editTask(task) {
editTask(task) {
console.log('PlanDetail: Calling showTaskEditorDialog for editing task:', task);
this.showTaskEditorDialog(task);
},
@@ -530,8 +547,8 @@ export default {
type: 'warning'
}).then(() => {
this.plan.tasks = this.plan.tasks.filter(task => task.id !== taskToDelete.id);
this.plan.tasks.forEach((item, index) => item.execution_order = index + 1);
this.updateContentType();
this.plan.tasks.forEach((item, index) => item.execution_order = index + 1);
this.updateContentType();
ElMessage.success('任务已删除');
}).catch(() => {
});
@@ -544,37 +561,45 @@ export default {
.plan-detail {
margin-top: 10px;
}
.loading, .error {
padding: 20px;
text-align: center;
}
.retry-btn {
margin-top: 15px;
}
.sub-plan-wrapper {
margin-bottom: 10px;
margin-bottom: 10px;
}
.sub-plan-container {
margin-left: 20px;
margin-top: 10px;
border-left: 2px solid #ebeef5;
border-left: 2px solid #ebeef5;
padding-left: 10px;
}
.sub-plan-card-content {
display: flex;
flex-direction: column;
gap: 10px;
flex-direction: column;
gap: 10px;
}
.sub-plan-actions {
align-self: flex-end;
align-self: flex-end;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
/* 调整子计划卡片内部的header，避免重复样式 */
.sub-plan-container .card-header {
padding: 0;
padding: 0;
}
</style>