pig-farm-controller-fe/src/components/PlanContentEditor.vue

<template>
  <div class="plan-content-editor">
    <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" text>操作按钮</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-content-editor :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: 'PlanContentEditor', // 必须设置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;
      }
    },
    editTask(task) {
      console.log('编辑任务:', task);
      this.$message.info('编辑任务功能正在开发中');
    },
    deleteTask(task) {
       console.log('删除任务:', task);
       this.$message.info('删除任务功能正在开发中');
    }
  },
};
</script>

<style scoped>
.plan-content-editor {
  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>