改名

src/components/PlanDetail.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="plan-detail">
+    <div v-if="loading" class="loading">
+      <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"
+      />
+      <el-button type="primary" @click="fetchPlan" class="retry-btn">重新加载</el-button>
+    </div>
+    <div v-else-if="plan">
+      <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>
+        <div v-if="plan.content_type === 'tasks'">
+          <h4>任务列表</h4>
+          <el-timeline>
+            <el-timeline-item
+              v-for="task in sortedContent"
+              :key="task.id"
+              :timestamp="'执行顺序: ' + task.order"
+              placement="top"
+            >
+              <el-card>
+                <h5>{{ task.name }}</h5>
+                <p>{{ task.description }}</p>
+                <el-button-group>
+                  <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>
+        </div>
+        <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>
+        </div>
+        <div v-else>
+          <el-empty description="未知的计划内容类型"></el-empty>
+        </div>
+      </el-card>
+    </div>
+    <div v-else>
+      <el-empty description="没有计划数据"></el-empty>
+    </div>
+  </div>
+</template>
+
+<script>
+import apiClient from '../api/index.js';
+
+export default {
+  name: 'PlanDetail', // 必须设置name属性以供递归调用
+  props: {
+    planId: {
+      type: [Number, String],
+      required: true,
+    },
+  },
+  data() {
+    return {
+      plan: null,
+      loading: false,
+      error: null,
+    };
+  },
+  computed: {
+    sortedContent() {
+      if (this.plan && Array.isArray(this.plan.content)) {
+        // 假设 `content` 是一个包含 `order` 属性的对象的数组
+        return [...this.plan.content].sort((a, b) => a.order - b.order);
+      }
+      return [];
+    }
+  },
+  watch: {
+    planId: {
+      immediate: true,
+      handler(newId) {
+        if (newId) {
+          this.fetchPlan();
+        }
+      },
+    },
+  },
+  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; 
+      } catch (err) {
+        this.error = err.message || '未知错误';
+        console.error(`加载计划 (ID: ${this.planId}) 失败:`, err);
+      } finally {
+        this.loading = false;
+      }
+    },
+    handleEdit() {
+      // Placeholder for future implementation
+      this.$message.info('编辑功能正在开发中');
+    },
+    editTask(task) {
+      console.log('编辑任务:', task);
+      this.$message.info('编辑任务功能正在开发中');
+    },
+    deleteTask(task) {
+       console.log('删除任务:', task);
+       this.$message.info('删除任务功能正在开发中');
+    }
+  },
+};
+</script>
+
+<style scoped>
+.plan-detail {
+  margin-top: 10px;
+}
+.loading, .error {
+  padding: 20px;
+  text-align: center;
+}
+.retry-btn {
+  margin-top: 15px;
+}
+.sub-plan-container {
+  margin-left: 20px;
+  margin-top: 10px;
+}
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+</style>