优化展示

src/components/DeviceList.vue

@@ -114,6 +114,8 @@ export default {
       
       try {
         const data = await deviceService.getDevices();
+        // Default sort by ID ascending
+        data.sort((a, b) => a.id - b.id);
         this.allDevices = data;
         this.tableData = this.buildTreeData(data);
         this.originalTableData = [...this.tableData]; // 保存原始顺序

src/components/PlanDetail.vue

@@ -13,78 +13,227 @@
       />
       <el-button type="primary" @click="fetchPlan" class="retry-btn">重新加载</el-button>
     </div>
-    <div v-else-if="plan">
+    <div v-else-if="plan && plan.id">
       <el-card class="box-card">
         <template #header>
           <div class="card-header">
             <span>{{ plan.name }} - 内容</span>
-            <el-button class="button" @click="handleEdit">编辑</el-button>
+            <div>
+              <template v-if="!isSubPlan">
+                <el-button class="button" type="primary" @click="savePlanContent" v-if="isEditingContent">保存</el-button>
+                <el-button class="button" @click="cancelEdit" v-if="isEditingContent">取消</el-button>
+                <el-button class="button" @click="enterEditMode" v-else>编辑内容</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"
+                >增加子计划</el-button>
+                <el-button
+                  v-if="plan.content_type === 'tasks' || !plan.content_type"
+                  type="primary"
+                  size="small"
+                  @click="showAddTaskDialog"
+                >增加子任务</el-button>
+              </template>
+            </div>
           </div>
         </template>
+
+        <!-- Display Tasks -->
         <div v-if="plan.content_type === 'tasks'">
           <h4>任务列表</h4>
-          <el-timeline>
+          <el-timeline v-if="plan.tasks.length > 0">
             <el-timeline-item
-              v-for="task in sortedContent"
-              :key="task.id"
-              :timestamp="'执行顺序: ' + task.order"
+              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 }}</h5>
+                <h5>{{ task.name }} ({{ task.type === 'waiting' ? '延时任务' : '未知任务' }})</h5>
                 <p>{{ task.description }}</p>
-                <el-button-group>
+                <p v-if="task.type === 'waiting' && task.parameters?.delay_duration">
+                  延时: {{ task.parameters.delay_duration }} 秒
+                </p>
+                <el-button-group v-if="isEditingContent">
                   <el-button type="primary" size="small" @click="editTask(task)">编辑</el-button>
                   <el-button type="danger" size="small" @click="deleteTask(task)">删除</el-button>
                 </el-button-group>
               </el-card>
             </el-timeline-item>
           </el-timeline>
+          <el-empty v-else description="暂无任务"></el-empty>
         </div>
+
+        <!-- Display Sub-plans -->
         <div v-else-if="plan.content_type === 'sub_plans'">
           <h4>子计划列表</h4>
-          <div v-for="subPlan in sortedContent" :key="subPlan.id" class="sub-plan-container">
-            <!-- 递归使用组件 -->
-            <plan-detail :plan-id="subPlan.id" />
+          <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">
+              <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" />
+                  <el-button-group v-if="isEditingContent" class="sub-plan-actions">
+                    <el-button type="danger" size="small" @click="deleteSubPlan(subPlan)">删除</el-button>
+                  </el-button-group>
+                </div>
+              </el-card>
+            </div>
           </div>
+          <el-empty v-else description="暂无子计划"></el-empty>
         </div>
-        <div v-else>
-          <el-empty description="未知的计划内容类型"></el-empty>
+
+        <div v-else-if="!plan.content_type">
+          <el-empty description="请添加子计划或子任务"></el-empty>
         </div>
       </el-card>
     </div>
     <div v-else>
       <el-empty description="没有计划数据"></el-empty>
     </div>
+
+    <!-- Add Sub-plan Dialog -->
+    <el-dialog
+      v-model="addSubPlanDialogVisible"
+      title="选择子计划"
+      width="600px"
+      @close="resetAddSubPlanDialog"
+    >
+      <el-select
+        v-model="selectedSubPlanId"
+        placeholder="请选择一个计划作为子计划"
+        filterable
+        style="width: 100%;"
+      >
+        <el-option
+          v-for="item in availablePlans"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"
+        ></el-option>
+      </el-select>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="addSubPlanDialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="confirmAddSubPlan">确定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+
+    <!-- Add Task Dialog -->
+    <el-dialog
+      v-model="addTaskDialogVisible"
+      title="增加子任务"
+      width="600px"
+      @close="resetAddTaskDialog"
+    >
+      <el-form :model="newTaskForm" ref="newTaskFormRef" :rules="newTaskRules" label-width="100px">
+        <el-form-item label="任务类型" prop="type">
+          <el-select v-model="newTaskForm.type" placeholder="请选择任务类型" style="width: 100%;">
+            <!-- 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="newTaskForm.name" placeholder="请输入任务名称"></el-input>
+        </el-form-item>
+        <el-form-item label="任务描述" prop="description">
+          <el-input type="textarea" v-model="newTaskForm.description" placeholder="请输入任务描述"></el-input>
+        </el-form-item>
+        <!-- Dynamic task component for specific parameters -->
+        <template v-if="newTaskForm.type === 'delay_task'">
+          <DelayTaskEditor
+            :parameters="newTaskForm.parameters"
+            @update:parameters="val => newTaskForm.parameters = val"
+            prop-path="parameters.delay_duration"
+            :is-editing="true" 
+          />
+        </template>
+        <!-- More task types can be rendered here -->
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="addTaskDialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="confirmAddTask">确定</el-button>
+        </span>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <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'; 
 
 export default {
-  name: 'PlanDetail', // 必须设置name属性以供递归调用
+  name: 'PlanDetail',
+  components: {
+    DelayTaskEditor, 
+    // Self-reference for recursion
+    'plan-detail': this,
+    ArrowDown, 
+  },
   props: {
     planId: {
       type: [Number, String],
       required: true,
     },
+    isSubPlan: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
-      plan: null,
+      plan: {
+        id: null,
+        name: '',
+        description: '',
+        execution_type: 'automatic',
+        execute_num: 0,
+        cron_expression: '',
+        content_type: null, 
+        sub_plans: [], 
+        tasks: [],     
+      },
       loading: false,
       error: null,
+      isEditingContent: false,
+      originalPlanState: null, 
+
+      // Add Sub-plan dialog
+      addSubPlanDialogVisible: false,
+      selectedSubPlanId: null,
+      availablePlans: [],
+
+      // Add Task dialog
+      addTaskDialogVisible: false,
+      newTaskForm: {
+        type: 'delay_task', 
+        name: '',
+        description: '',
+        parameters: { delay_duration: 1 }, // Initialize with delay_duration
+      },
+      newTaskRules: {
+        type: [{ required: true, message: '请选择任务类型', trigger: 'change' }],
+        name: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
+        // Add rule for delay_duration directly here, as it's the default type
+        'parameters.delay_duration': [{ required: true, message: '请输入延时时间', trigger: 'blur' }],
+      },
     };
   },
   computed: {
-    sortedContent() {
-      if (this.plan && Array.isArray(this.plan.content)) {
-        // 假设 `content` 是一个包含 `order` 属性的对象的数组
-        return [...this.plan.content].sort((a, b) => a.order - b.order);
-      }
-      return [];
-    }
+    delayDurationRules() {
+      return [{ required: true, message: '请输入延时时间', trigger: 'blur' }];
+    },
   },
   watch: {
     planId: {
@@ -95,16 +244,36 @@ export default {
         }
       },
     },
+    'newTaskForm.type'(newType) {
+      // This watch is less critical now since delay_task is the only option
+      // but kept for extensibility.
+      if (newType === 'delay_task') {
+        this.newTaskRules['parameters.delay_duration'] = this.delayDurationRules;
+        if (!this.newTaskForm.parameters.delay_duration) {
+          this.newTaskForm.parameters.delay_duration = 1;
+        }
+      } else {
+        if (this.newTaskRules['parameters.delay_duration']) {
+          delete this.newTaskRules['parameters.delay_duration'];
+        }
+        if (this.newTaskForm.parameters.delay_duration) {
+          delete this.newTaskForm.parameters.delay_duration;
+        }
+      }
+    },
   },
   methods: {
     async fetchPlan() {
       this.loading = true;
       this.error = null;
       try {
-        // 假设存在一个 `apiClient.plans.get(id)` 的方法来获取单个计划的详细信息
-        // 这个返回的计划对象应该包含 `content` 字段, 其中是任务或子计划的数组
         const response = await apiClient.plans.get(this.planId);
-        this.plan = response.data; 
+        this.plan = {
+          ...response.data,
+          sub_plans: response.data.sub_plans || [],
+          tasks: response.data.tasks || [],
+        };
+        this.updateContentType(); 
       } catch (err) {
         this.error = err.message || '未知错误';
         console.error(`加载计划 (ID: ${this.planId}) 失败:`, err);
@@ -112,18 +281,196 @@ export default {
         this.loading = false;
       }
     },
-    handleEdit() {
-      // Placeholder for future implementation
-      this.$message.info('编辑功能正在开发中');
+    updateContentType() {
+      if (this.plan.sub_plans.length > 0) {
+        this.plan.content_type = 'sub_plans';
+      } else if (this.plan.tasks.length > 0) {
+        this.plan.content_type = 'tasks';
+      } else {
+        this.plan.content_type = null; 
+      }
+    },
+    enterEditMode() {
+      this.isEditingContent = true;
+      this.originalPlanState = JSON.parse(JSON.stringify(this.plan));
+    },
+    async savePlanContent() {
+      this.updateContentType(); 
+      try {
+        const submitData = {
+          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,
+          content_type: this.plan.content_type,
+          sub_plan_ids: this.plan.content_type === 'sub_plans'
+            ? this.plan.sub_plans.map(sp => sp.child_plan_id) 
+            : [],
+          tasks: this.plan.content_type === 'tasks'
+            ? this.plan.tasks.map((task, index) => ({
+                name: task.name,
+                description: task.description,
+                // Set type to 'waiting' for delay_task
+                type: task.type === 'delay_task' ? 'waiting' : task.type,
+                execution_order: index + 1, 
+                parameters: task.parameters || {},
+              }))
+            : [],
+        };
+
+        delete submitData.execute_count;
+        delete submitData.status;
+
+        await apiClient.plans.update(this.planId, submitData);
+        ElMessage.success('计划内容已保存');
+        this.isEditingContent = false; 
+        this.originalPlanState = null; 
+        this.fetchPlan(); 
+      } catch (error) {
+        ElMessage.error('保存计划内容失败: ' + (error.message || '未知错误'));
+        console.error('保存计划内容失败:', error);
+      }
+    },
+    cancelEdit() {
+      this.plan = JSON.parse(JSON.stringify(this.originalPlanState));
+      this.isEditingContent = false; 
+      this.originalPlanState = null; 
+      ElMessage.info('已取消编辑');
+    },
+
+    // --- Sub-plan related methods ---
+    async showAddSubPlanDialog() {
+      if (this.plan.tasks.length > 0) {
+        try {
+          await ElMessageBox.confirm('当前计划包含任务，添加子计划将清空现有任务。是否继续？', '警告', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          });
+          this.plan.tasks = []; 
+        } catch (e) {
+          return;
+        }
+      }
+      this.addSubPlanDialogVisible = true;
+      await this.fetchAvailablePlans();
+    },
+    async fetchAvailablePlans() {
+      try {
+        const response = await apiClient.plans.list();
+        this.availablePlans = response.data.plans.filter(p =>
+          p.id !== this.planId
+        );
+      } catch (error) {
+        ElMessage.error('加载可用计划失败: ' + (error.message || '未知错误'));
+        console.error('加载可用计划失败:', error);
+      }
+    },
+    confirmAddSubPlan() {
+      if (!this.selectedSubPlanId) {
+        ElMessage.warning('请选择一个子计划');
+        return;
+      }
+
+      const selectedPlan = this.availablePlans.find(p => p.id === this.selectedSubPlanId);
+      if (selectedPlan) {
+        this.plan.sub_plans.push({
+          id: Date.now(), 
+          child_plan_id: selectedPlan.id,
+          child_plan: selectedPlan, 
+          execution_order: this.plan.sub_plans.length + 1,
+        });
+        this.updateContentType(); 
+        ElMessage.success(`子计划 "${selectedPlan.name}" 已添加`);
+        this.addSubPlanDialogVisible = false;
+        this.resetAddSubPlanDialog();
+      } else {
+        ElMessage.error('未找到选中的计划');
+      }
+    },
+    resetAddSubPlanDialog() {
+      this.selectedSubPlanId = null;
+      this.availablePlans = [];
+    },
+    deleteSubPlan(subPlanToDelete) {
+      ElMessageBox.confirm(`确认删除子计划 "${subPlanToDelete.child_plan?.name || '未知子计划'}" 吗？`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        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(); 
+        ElMessage.success('子计划已删除');
+      }).catch(() => {
+      });
+    },
+
+    // --- Task related methods ---
+    async showAddTaskDialog() {
+      if (this.plan.sub_plans.length > 0) {
+        try {
+          await ElMessageBox.confirm('当前计划包含子计划，添加任务将清空现有子计划。是否继续？', '警告', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          });
+          this.plan.sub_plans = []; 
+        } catch (e) {
+          return;
+        }
+      }
+      this.addTaskDialogVisible = true;
+    },
+    confirmAddTask() {
+      this.$refs.newTaskFormRef.validate(async (valid) => {
+        if (valid) {
+          const newTask = {
+            id: Date.now(), 
+            execution_order: this.plan.tasks.length + 1,
+            // Map 'delay_task' UI type to 'waiting' backend type
+            type: this.newTaskForm.type === 'delay_task' ? 'waiting' : this.newTaskForm.type,
+            name: this.newTaskForm.name,
+            description: this.newTaskForm.description,
+            parameters: this.newTaskForm.parameters, 
+          };
+
+          this.plan.tasks.push(newTask);
+          this.updateContentType(); 
+          ElMessage.success(`子任务 "${newTask.name}" 已添加`);
+          this.addTaskDialogVisible = false;
+          this.resetAddTaskDialog();
+        }
+      });
+    },
+    resetAddTaskDialog() {
+      this.$refs.newTaskFormRef.resetFields();
+      this.newTaskForm = {
+        type: 'delay_task', 
+        name: '',
+        description: '',
+        parameters: { delay_duration: 1 }, // Reset with default delay_duration
+      };
     },
     editTask(task) {
+      ElMessage.info('编辑任务功能正在开发中');
       console.log('编辑任务:', task);
-      this.$message.info('编辑任务功能正在开发中');
     },
-    deleteTask(task) {
-       console.log('删除任务:', task);
-       this.$message.info('删除任务功能正在开发中');
-    }
+    deleteTask(taskToDelete) {
+      ElMessageBox.confirm(`确认删除任务 "${taskToDelete.name}" 吗？`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        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(); 
+        ElMessage.success('任务已删除');
+      }).catch(() => {
+      });
+    },
   },
 };
 </script>
@@ -139,13 +486,30 @@ export default {
 .retry-btn {
   margin-top: 15px;
 }
+.sub-plan-wrapper {
+  margin-bottom: 10px; 
+}
 .sub-plan-container {
   margin-left: 20px;
   margin-top: 10px;
+  border-left: 2px solid #ebeef5; 
+  padding-left: 10px;
+}
+.sub-plan-card-content {
+  display: flex;
+  flex-direction: column; 
+  gap: 10px; 
+}
+.sub-plan-actions {
+  align-self: flex-end; 
 }
 .card-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
+/* 调整子计划卡片内部的header，避免重复样式 */
+.sub-plan-container .card-header {
+  padding: 0; 
+}
 </style>

src/components/PlanList.vue

@@ -52,8 +52,9 @@
         <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-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>
@@ -66,11 +67,13 @@
           <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 v-if="scope.row.status === 1" size="small" type="warning" @click="stopPlan(scope.row)" :loading="stoppingPlanId === scope.row.id">
-              停止
-            </el-button>
-            <el-button v-else size="small" @click="startPlan(scope.row)" :loading="startingPlanId === scope.row.id">
-              启动
+            <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>
@@ -156,7 +159,10 @@ export default {
       
       try {
         const response = await apiClient.plans.list();
-        this.plans = response.data?.plans || [];
+        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 || '未知错误';

src/components/tasks/DelayTask.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="delay-task-editor">
+    <el-form-item
+      label="延时时间(秒)"
+      :prop="propPath"
+      :rules="isEditing ? {
+        required: true,
+        message: '请输入延时时间',
+        trigger: 'blur'
+      } : null"
+      class="delay-time-form-item"
+    >
+      <el-input-number
+        :model-value="delayDuration"
+        @update:model-value="updateDelayDuration"
+        :min="1"
+        placeholder="请输入延时时间"
+        style="width: 100%;"
+      ></el-input-number>
+    </el-form-item>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DelayTaskEditor",
+  props: {
+    // The parameters object for the task
+    parameters: {
+      type: Object,
+      required: true,
+    },
+    // The full prop path for validation, e.g., 'parameters.delay_duration'
+    propPath: {
+      type: String,
+      default: "parameters.delay_duration", // Updated default prop path
+    },
+    // New prop to control editability
+    isEditing: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  emits: ["update:parameters"],
+  computed: {
+    delayDuration() { // Renamed from delaySeconds
+      return this.parameters?.delay_duration || 1;
+    },
+  },
+  methods: {
+    updateDelayDuration(value) { // Renamed from updateDelaySeconds
+      this.$emit("update:parameters", {
+        ...this.parameters,
+        delay_duration: value,
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.delay-task-editor {
+  width: 100%;
+}
+.delay-time-form-item :deep(.el-form-item__label) {
+  white-space: nowrap;
+}
+</style>