增加创建计划组件

src/components/PlanForm.vue

@@ -0,0 +1,288 @@
+<template>
+  <el-dialog
+    :model-value="visible"
+    :title="title"
+    @close="handleClose"
+    :close-on-click-modal="false"
+    width="600px"
+  >
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="rules"
+      label-width="120px"
+      @submit.prevent
+    >
+      <!-- 任务名 -->
+      <el-form-item label="任务名" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入任务名" />
+      </el-form-item>
+      
+      <!-- 任务描述 -->
+      <el-form-item label="任务描述" prop="description">
+        <el-input 
+          v-model="formData.description" 
+          type="textarea" 
+          placeholder="请输入任务描述"
+          :rows="3"
+        />
+      </el-form-item>
+      
+      <!-- 执行方式 -->
+      <el-form-item label="执行方式" prop="execution_type">
+        <el-radio-group v-model="formData.execution_type" @change="handleExecutionTypeChange">
+          <el-radio label="automatic">自动执行</el-radio>
+          <el-radio label="manual">手动执行</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      
+      <!-- 执行次数 -->
+      <el-form-item 
+        label="执行次数" 
+        prop="execute_num"
+        v-if="formData.execution_type === 'automatic'">
+        <el-input-number 
+          v-model="formData.execute_num" 
+          :min="0" 
+          :max="999999"
+          placeholder="请输入执行次数"
+          controls-position="right"
+          style="width: 100%"
+        />
+        <div class="form-item-tip">0表示无限执行，正数表示执行次数</div>
+      </el-form-item>
+      
+      <!-- 执行频率 (仅自动执行时显示) -->
+      <el-form-item 
+        label="执行频率" 
+        prop="cron_expression"
+        v-if="formData.execution_type === 'automatic'">
+        <el-input 
+          v-model="formData.cron_expression" 
+          placeholder="请输入cron表达式，如：0 0 6 * * *"
+        >
+          <template #append>
+            <el-button @click="showCronDialog = true">可视化配置</el-button>
+          </template>
+        </el-input>
+        <div class="form-item-tip">Cron表达式格式：秒 分 时 日 月 周</div>
+      </el-form-item>
+    </el-form>
+    
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="handleClose">取消</el-button>
+        <el-button 
+          type="primary" 
+          @click="handleSubmit" 
+          :loading="loading">
+          {{ isEdit ? '更新' : '创建' }}
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+  
+  <!-- Cron表达式可视化配置对话框 -->
+  <el-dialog
+    v-model="showCronDialog"
+    title="可视化配置执行频率"
+    width="800px"
+    :before-close="handleCronDialogClose"
+  >
+    <div style="padding: 10px 20px;">
+      <vue3-cron-plus-picker 
+        @fill="handleCronFill" 
+        @hide="handleCronDialogClose"
+        :expression="tempCronExpression"
+        :hide-year="true"
+      />
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { ref, reactive, computed, watch } from 'vue';
+import { ElMessage } from 'element-plus';
+import { Vue3CronPlusPicker } from 'vue3-cron-plus-picker';
+import 'vue3-cron-plus-picker/style.css';
+
+export default {
+  name: 'PlanForm',
+  components: {
+    Vue3CronPlusPicker
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    planData: {
+      type: Object,
+      default: () => ({})
+    },
+    isEdit: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['update:visible', 'success', 'cancel'],
+  setup(props, { emit }) {
+    // 表单引用
+    const formRef = ref(null);
+    
+    // 加载状态
+    const loading = ref(false);
+    
+    // 是否显示Cron表达式配置对话框
+    const showCronDialog = ref(false);
+    
+    // 临时存储cron表达式
+    const tempCronExpression = ref('');
+    
+    // 表单数据
+    const formData = reactive({
+      id: null,
+      name: '',
+      description: '',
+      execution_type: 'automatic', // 默认自动执行
+      execute_num: 0, // 0表示无限执行
+      cron_expression: '' // cron表达式
+    });
+    
+    // 表单验证规则
+    const rules = {
+      name: [
+        { required: true, message: '请输入任务名', trigger: 'blur' }
+      ],
+      execution_type: [
+        { required: true, message: '请选择执行方式', trigger: 'change' }
+      ],
+      execute_num: [
+        { required: true, message: '请输入执行次数', trigger: 'blur' }
+      ],
+      cron_expression: [
+        { required: true, message: '请输入执行频率(cron表达式)', trigger: 'blur' }
+      ]
+    };
+    
+    // 标题计算
+    const title = computed(() => {
+      return props.isEdit ? '编辑计划' : '创建计划';
+    });
+    
+    // 处理执行方式变更
+    const handleExecutionTypeChange = (value) => {
+      // 如果切换为手动执行，清空执行次数和cron表达式
+      if (value === 'manual') {
+        formData.execute_num = 0;
+        formData.cron_expression = '';
+      } else {
+        // 切换为自动执行时，默认设置为无限执行
+        formData.execute_num = 0;
+        formData.cron_expression = '';
+      }
+    };
+
+    // 处理Cron表达式填充
+    const handleCronFill = (cronExpression) => {
+      formData.cron_expression = cronExpression;
+      tempCronExpression.value = cronExpression;
+      showCronDialog.value = false;
+    };
+    
+    // 处理Cron对话框关闭
+    const handleCronDialogClose = () => {
+      showCronDialog.value = false;
+    };
+    
+    // 关闭对话框
+    const handleClose = () => {
+      emit('update:visible', false);
+      emit('cancel');
+    };
+    
+    // 提交表单
+    const handleSubmit = async () => {
+      await formRef.value.validate(async (valid) => {
+        if (valid) {
+          loading.value = true;
+          try {
+            // 准备提交数据
+            const submitData = {
+              ...formData
+            };
+            
+            // 如果是手动执行，清除执行次数和cron表达式
+            if (formData.execution_type === 'manual') {
+              submitData.execute_num = 0;
+              submitData.cron_expression = '';
+            }
+            
+            emit('success', submitData);
+            handleClose();
+          } catch (error) {
+            console.error('保存计划失败:', error);
+            ElMessage.error(props.isEdit ? '更新计划失败' : '创建计划失败');
+          } finally {
+            loading.value = false;
+          }
+        }
+      });
+    };
+    
+    // 监听计划数据变化
+    watch(() => props.planData, (newVal) => {
+      if (newVal && Object.keys(newVal).length > 0) {
+        // 填充表单数据
+        Object.keys(formData).forEach(key => {
+          if (newVal[key] !== undefined) {
+            formData[key] = newVal[key];
+          }
+        });
+        
+        // 初始化临时cron表达式
+        tempCronExpression.value = newVal.cron_expression || '';
+      } else {
+        // 重置表单数据
+        Object.keys(formData).forEach(key => {
+          if (key === 'execute_num') {
+            formData[key] = 0;
+          } else {
+            formData[key] = '';
+          }
+        });
+        // 默认值
+        formData.execution_type = 'automatic';
+        tempCronExpression.value = '';
+      }
+    }, { immediate: true });
+    
+    return {
+      formRef,
+      loading,
+      showCronDialog,
+      tempCronExpression,
+      formData,
+      rules,
+      title,
+      handleExecutionTypeChange,
+      handleCronFill,
+      handleCronDialogClose,
+      handleClose,
+      handleSubmit
+    };
+  }
+};
+</script>
+
+<style scoped>
+.dialog-footer {
+  text-align: right;
+}
+
+.form-item-tip {
+  font-size: 12px;
+  color: #909399;
+  margin-top: 5px;
+}
+</style>

src/components/PlanList.vue

@@ -37,56 +37,38 @@
       </el-table>
     </el-card>
 
-    <!-- 添加/编辑计划对话框 -->
-    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="50%">
-      <el-form :model="currentPlan" label-width="120px">
-        <el-form-item label="计划名称">
-          <el-input v-model="currentPlan.name" />
-        </el-form-item>
-        <el-form-item label="描述">
-          <el-input v-model="currentPlan.description" type="textarea" />
-        </el-form-item>
-        <el-form-item label="执行类型">
-          <el-select v-model="currentPlan.execution_type" placeholder="请选择执行类型">
-            <el-option label="自动执行" value="automatic" />
-            <el-option label="手动执行" value="manual" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="内容类型" v-if="!isEdit">
-          <el-radio-group v-model="contentType">
-            <el-radio label="tasks">任务</el-radio>
-            <el-radio label="sub_plans">子计划</el-radio>
-          </el-radio-group>
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <span class="dialog-footer">
-          <el-button @click="dialogVisible = false">取消</el-button>
-          <el-button type="primary" @click="savePlan">保存</el-button>
-        </span>
-      </template>
-    </el-dialog>
+    <!-- 使用新的计划表单组件 -->
+    <PlanForm 
+      v-model:visible="dialogVisible" 
+      :plan-data="currentPlan" 
+      :is-edit="isEdit"
+      @success="handlePlanSuccess"
+      @cancel="handlePlanCancel"
+    />
   </div>
 </template>
 
 <script>
 import apiClient from '../api/index.js';
+import PlanForm from './PlanForm.vue';
 
 export default {
   name: 'PlanList',
+  components: {
+    PlanForm
+  },
   data() {
     return {
       plans: [],
       dialogVisible: false,
-      dialogTitle: '',
       isEdit: false,
-      contentType: 'tasks',
       currentPlan: {
         id: null,
         name: '',
         description: '',
         execution_type: 'automatic',
-        content_type: 'tasks'
+        execute_num: 0,
+        cron_expression: ''
       },
       startingPlanId: null
     };
@@ -107,19 +89,19 @@ export default {
     },
     
     addPlan() {
-      this.dialogTitle = '添加计划';
       this.currentPlan = {
         id: null,
         name: '',
         description: '',
-        execution_type: 'automatic'
+        execution_type: 'automatic',
+        execute_num: 0,
+        cron_expression: ''
       };
       this.isEdit = false;
       this.dialogVisible = true;
     },
     
     editPlan(plan) {
-      this.dialogTitle = '编辑计划';
       this.currentPlan = { ...plan };
       this.isEdit = true;
       this.dialogVisible = true;
@@ -156,28 +138,33 @@ export default {
       }
     },
     
-    async savePlan() {
+    // 处理计划表单提交成功
+    async handlePlanSuccess(planData) {
       try {
         if (this.isEdit) {
           // 编辑计划
-          await apiClient.plans.update(this.currentPlan.id, this.currentPlan);
+          await apiClient.plans.update(planData.id, planData);
           this.$message.success('计划更新成功');
         } else {
           // 添加新计划
-          const planData = {
-            ...this.currentPlan,
-            content_type: this.contentType
+          const planRequest = {
+            ...planData,
+            content_type: 'tasks' // 默认使用任务类型
           };
           
-          await apiClient.plans.create(planData);
+          await apiClient.plans.create(planRequest);
           this.$message.success('计划添加成功');
         }
         
-        this.dialogVisible = false;
         await this.loadPlans();
       } catch (err) {
         this.$message.error('保存失败: ' + (err.message || '未知错误'));
       }
+    },
+    
+    // 处理计划表单取消
+    handlePlanCancel() {
+      this.dialogVisible = false;
     }
   }
 };