增加创建计划组件

node_modules/.package-lock.json

@@ -9919,6 +9919,11 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "node_modules/vue3-cron-plus-picker": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/vue3-cron-plus-picker/-/vue3-cron-plus-picker-1.0.2.tgz",
+      "integrity": "sha512-SUVmAb2qSPMuAm5GIU0wQZyUawiiL3OKEy1HAZs94eZz+neKF+wEPNP4wICWMU78u4LzeCNni2Njnhf8bsqkcw=="
+    },
     "node_modules/watchpack": {
       "version": "2.4.4",
       "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.4.tgz",

node_modules/vue3-cron-plus-picker/README.md

@@ -0,0 +1,125 @@
+# vue3+elementplus 的cron表达式生成插件
+## 目的
+- vue3环境中使用cron表达式插件
+## 依赖版本
+- Vue3.0.0+
+- element-plus
+## 使用
+### 1 安装
+`npm i vue3-cron-plus-picker`
+或者
+`pnpm add vue3-cron-plus-picker`
+
+### 2 引入
+1. 全局引入
+    在src\main.js中引入下载的包，并引入其样式
+    ```js
+    import { createApp } from 'vue'
+    import './style.css'
+    import App from './App.vue'
+    import ElementPlus from 'element-plus'
+    import 'element-plus/dist/index.css'
+    import Vue3CronPlusPicker from 'vue3-cron-plus-picker' // 引入组件
+    import 'vue3-cron-plus-picker/style.css' //引入组件相关样式
+
+    createApp(App).use(ElementPlus).use(Vue3CronPlusPicker).mount('#app')
+
+    ```
+2. 局部引入
+在使用的组件的vue文件中直接引入
+```js
+import 'vue3-cron-plus-picker/style.css'
+import {Vue3CronPlusPicker} from 'vue3-cron-plus-picker'
+```
+### 3 使用
+```js
+  <template>
+  <div>
+    <el-input class="elInput" v-model="cronValue" placeholder="请输入正确的cron表达式">
+      <template #append>
+        <el-button class="inputButton" @click="openDialog">配置cron</el-button>
+      </template>
+    </el-input>
+    <el-dialog v-model="showCron"  >
+      <vue3-cron-plus-picker @hide="showCron=false" @fill="cronFill" :expression="expression"/>
+    </el-dialog>
+    
+  </div>
+</template>
+
+<script setup>
+import {ref} from 'vue'
+
+
+const cronValue = ref('')
+const showCron = ref()
+const expression = ref('')
+const openDialog = ()=>{
+  showCron.value = true
+  expression.value = cronValue.value
+}
+const cronFill = (contabValue)=>{
+  cronValue.value = contabValue
+}
+
+</script>
+<style>
+</style>
+
+```
+### 4 参数
+<table>
+        <thead>
+            <tr>
+                <th>属性名</th>
+                <th>说明</th>
+                <th>类型</th>
+                <th>Default</th>
+                <th>可选值</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>expression</td>
+                <td>cron表达式绑定的值</td>
+                <td><span class="inline-flex items-center"><code class="api-typing mr-1">string</code></span></td>
+                <td>-</td>
+                <td>-</td>
+            </tr>
+            <tr>
+                <td>hideComponent</td>
+                <td>可以隐藏的组件内容</td>
+                <td><span class="inline-flex items-center"><code class="api-typing mr-1">Array</code></span></td>
+                <td>-</td>
+                <td>second/min/hour/day/mouth/week/year/result</td>
+            </tr>
+        </tbody>
+    </table>
+
+### 5 事件
+
+<table>
+    <thead>
+        <tr>
+            <th>名称</th>
+            <th>说明</th>
+            <th>类型</th>
+            <th>方法对应的参数类型</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>fill</td>
+            <td>填充选择的cron表达式</td>
+            <td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code></span></td>
+            <td>(contabValue: string) => void</td>
+        </tr>
+        <tr>
+            <td>hide</td>
+            <td>关闭组件</td>
+            <td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code></span></td>
+            <td>() => void</td>
+        </tr>
+    </tbody>
+</table>
+

node_modules/vue3-cron-plus-picker/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "vue3-cron-plus-picker",
+  "version": "1.0.2",
+  "description": "Corn expression plugin based on vue3+elementPlus（基于vue3+elementplus+vue3的corn表达式插件）",
+  "main": "vue3-cron-plus-picker.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "vue3-cron-plus-picker",
+    "vue3-cron-plus",
+    "vue3-cron",
+    "vue3",
+    "cron"
+  ],
+  "author": "",
+  "license": "ISC"
+}

node_modules/vue3-cron-plus-picker/style.css

@@ -0,0 +1 @@
+.pop_btn[data-v-8ae49d29]{text-align:center;margin-top:20px}.popup-main[data-v-8ae49d29]{position:relative;margin:10px auto;background:#fff;border-radius:5px;font-size:12px;overflow:hidden}.popup-title[data-v-8ae49d29]{overflow:hidden;line-height:34px;padding-top:6px;background:#f2f2f2}.popup-result[data-v-8ae49d29]{box-sizing:border-box;line-height:24px;margin:25px auto;padding:15px 10px 10px;border:1px solid #ccc;position:relative}.popup-result .title[data-v-8ae49d29]{position:absolute;top:-28px;left:50%;width:140px;font-size:14px;margin-left:-70px;text-align:center;line-height:30px;background:#fff}.popup-result table[data-v-8ae49d29]{text-align:center;width:100%;margin:0 auto}.popup-result table span[data-v-8ae49d29]{display:block;width:100%;font-family:arial;line-height:30px;height:30px;white-space:nowrap;overflow:hidden;border:1px solid #e8e8e8}.popup-result-scroll[data-v-8ae49d29]{font-size:12px;line-height:24px;height:10em;overflow-y:auto}

node_modules/vue3-cron-plus-picker/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package-lock.json

@@ -12,7 +12,8 @@
         "axios": "^1.6.0",
         "element-plus": "^2.4.0",
         "vue": "^3.4.0",
-        "vue-router": "^4.2.0"
+        "vue-router": "^4.2.0",
+        "vue3-cron-plus-picker": "^1.0.2"
       },
       "devDependencies": {
         "@babel/core": "^7.23.0",
@@ -9959,6 +9960,11 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "node_modules/vue3-cron-plus-picker": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/vue3-cron-plus-picker/-/vue3-cron-plus-picker-1.0.2.tgz",
+      "integrity": "sha512-SUVmAb2qSPMuAm5GIU0wQZyUawiiL3OKEy1HAZs94eZz+neKF+wEPNP4wICWMU78u4LzeCNni2Njnhf8bsqkcw=="
+    },
     "node_modules/watchpack": {
       "version": "2.4.4",
       "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.4.tgz",

package.json

@@ -20,7 +20,8 @@
     "axios": "^1.6.0",
     "element-plus": "^2.4.0",
     "vue": "^3.4.0",
-    "vue-router": "^4.2.0"
+    "vue-router": "^4.2.0",
+    "vue3-cron-plus-picker": "^1.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.23.0",

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%">
+    <PlanForm 
-      <el-form :model="currentPlan" label-width="120px">
+      v-model:visible="dialogVisible" 
-        <el-form-item label="计划名称">
+      :plan-data="currentPlan" 
-          <el-input v-model="currentPlan.name" />
+      :is-edit="isEdit"
-        </el-form-item>
+      @success="handlePlanSuccess"
-        <el-form-item label="描述">
+      @cancel="handlePlanCancel"
-          <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>
   </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 = {
+          const planRequest = {
-            ...this.currentPlan,
+            ...planData,
-            content_type: this.contentType
+            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;
     }
   }
 };