增加列表排序

src/components/PlanList.vue

@@ -33,30 +33,31 @@
       
       <el-table 
         v-else
-        :data="plans" 
+        :data="plans"
         style="width: 100%" 
         class="plan-list-table"
         :fit="true"
-        :scrollbar-always-on="true">
-        <el-table-column prop="id" label="计划ID" min-width="60" />
-        <el-table-column prop="name" label="计划名称" min-width="120" />
+        :scrollbar-always-on="true"
+        @sort-change="handleSortChange">
+        <el-table-column prop="id" label="计划ID" min-width="100" sortable="custom" />
+        <el-table-column prop="name" label="计划名称" min-width="120" sortable="custom" />
         <el-table-column prop="description" label="计划描述" min-width="150" />
-        <el-table-column prop="execution_type" label="执行类型" min-width="150">
+        <el-table-column prop="execution_type" label="执行类型" min-width="150" sortable="custom">
           <template #default="scope">
             <el-tag v-if="scope.row.execution_type === 'manual'">手动</el-tag>
             <el-tag v-else-if="scope.row.execute_num === 0" type="success">自动(无限执行)</el-tag>
             <el-tag v-else type="warning">自动({{ scope.row.execute_num }}次)</el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="execute_count" label="已执行次数" min-width="100" />
-        <el-table-column prop="status" label="状态" min-width="100">
+        <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-else type="info">执行完毕</el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="cron_expression" label="下次执行时间" min-width="150">
+        <el-table-column prop="cron_expression" label="下次执行时间" min-width="150" sortable="custom">
           <template #default="scope">
             {{ formatNextExecutionTime(scope.row.cron_expression) }}
           </template>
@@ -103,6 +104,7 @@ export default {
   data() {
     return {
       plans: [],
+      originalPlans: [], // Store the original unsorted list
       dialogVisible: false,
       isEdit: false,
       loading: false,
@@ -131,6 +133,7 @@ export default {
       try {
         const response = await apiClient.plans.list();
         this.plans = response.data?.plans || [];
+        this.originalPlans = [...this.plans]; // Keep a copy of the original order
       } catch (err) {
         this.error = err.message || '未知错误';
         console.error('加载计划列表失败:', err);
@@ -138,6 +141,46 @@ export default {
         this.loading = false;
       }
     },
+
+    // 处理表格排序
+    handleSortChange({ prop, order }) {
+      if (!order) {
+        // 恢复原始顺序
+        this.plans = [...this.originalPlans];
+        return;
+      }
+
+      const sortFactor = order === 'ascending' ? 1 : -1;
+
+      this.plans.sort((a, b) => {
+        let valA = a[prop];
+        let valB = b[prop];
+
+        // '下次执行时间' 列的特殊排序逻辑
+        if (prop === 'cron_expression') {
+          try {
+            const parser = cronParser.default || cronParser;
+            valA = valA ? parser.parse(valA).next().toDate().getTime() : 0;
+          } catch (e) {
+            valA = 0; // 无效的 cron 表达式排在前面
+          }
+          try {
+            const parser = cronParser.default || cronParser;
+            valB = valB ? parser.parse(valB).next().toDate().getTime() : 0;
+          } catch (e) {
+            valB = 0;
+          }
+        }
+
+        if (valA < valB) {
+          return -1 * sortFactor;
+        }
+        if (valA > valB) {
+          return 1 * sortFactor;
+        }
+        return 0;
+      });
+    },
     
     // 格式化下次执行时间
     formatNextExecutionTime(cronExpression) {