ui自动化和压力测试bug修改

2025-05-28 16:31:27 +08:00
parent 66498fd750
commit 080a80d53d
5 changed files with 147 additions and 89 deletions
--- a/test-ui/src/views/test/performance/performanceAdd.vue
+++ b/test-ui/src/views/test/performance/performanceAdd.vue
@@ -14,10 +14,10 @@
        <div class="date-top">
          <i class="el-icon-date"></i>
          <span class="date-title">SCHEDULER</span>
-          <el-switch v-model="switchOpen" @change="switchChange"></el-switch>
+          <el-switch v-model="addForm.crontabStatus" :active-value="1" :inactive-value="0" @change="handleSwitchChange"></el-switch>
        </div>
-        <div class="date-bottom">
-          <span>下次执行时间</span>
+        <div class="date-bottom" v-if="addForm.crontabStatus === 1">
+          <span>下次执行时间：{{ nextExecutionTime }}</span>
        </div>
      </div>
    </div>
@@ -124,8 +124,6 @@
        <div class="crontab-wrap">
          <div class="title">Crontab表达式</div>
          <el-input v-model="addForm.crontab" @input="updateExecutionTimes" placeholder="请输入crontab表达式" />
-          <div class="title" style="margin-left: 50px;">定时任务开关</div>
-          <el-switch v-model="addForm.crontabStatus" active-value="1" inactive-value="0"></el-switch>
        </div>
        <div class="near-time">
          <div class="title">最近5次运行时间</div>
@@ -135,8 +133,8 @@
        </div>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisibleTime = false, switchOpen = false">取 消</el-button>
-        <el-button type="primary" @click="dialogVisibleTime = false">确 定</el-button>
+        <el-button @click="dialogVisibleTime = false, addForm.crontabStatus = false">取 消</el-button>
+        <el-button type="primary" @click="handleDialogConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
@@ -144,6 +142,7 @@

 <script>
 import { addTest, addAndExecuteTest, getTestCaseList } from '../../../api/performance';
+import parser from 'cron-parser';  // 添加 cron-parser 依赖

 export default {
  name: "PerformanceAdd",
@@ -162,7 +161,7 @@ export default {
        rpsStatus: '0', //  rps状态：0关闭，1开启，默认0
        rpsLimit: '0', // 每分钟rps上限数，默认0
        crontab: '', // crontab表达式
-        crontabStatus: '0', // 定时任务状态：0关闭，1开启，默认0
+        crontabStatus: 0, // 定时任务状态：0关闭，1开启，默认0
        loopCount: '0', // 迭代次数，默认0
      },
      activeName: 'first',
@@ -177,26 +176,10 @@ export default {
      searchScene: '',
      changeList: [],
      multipleSelection: [],
-      switchOpen: false,
      dialogVisibleTime: false,
      activeTime: 'first',
-      executionTimeList: [
-        {
-          time: "2025-02-18 10:00:00",
-        },
-        {
-          time: "2025-02-19 10:00:00",
-        },
-        {
-          time: "2025-02-20 10:00:00",
-        },
-        {
-          time: "2025-02-21 10:00:00",
-        },
-        {
-          time: "2025-02-22 10:00:00",
-        },
-      ],
+      executionTimeList: [],  // 修改为空数组
+      nextExecutionTime: '',  // 添加下次执行时间
      validation: false, // 校验
    }
  },
@@ -313,37 +296,70 @@ export default {
      })
      this.dialogVisible = false
    },
-    switchChange(val) {
-      this.dialogVisibleTime = val
-    },
    handleClose() {
      this.dialogVisibleTime = false
-      this.switchOpen = false
+      this.addForm.crontabStatus = false
    },
-    // 根据crontab表达式更新执行时间
+    // 更新执行时间列表
    updateExecutionTimes() {
      const crontab = this.addForm.crontab.trim();
      if (!crontab) {
        this.executionTimeList = [];
+        this.nextExecutionTime = '';
        return;
      }

      try {
        // 解析crontab表达式
-        const interval = cronParser.parseExpression(crontab);
+        const interval = parser.parseExpression(crontab);
        const times = [];

-        // 获取最近三次执行时间
-        for (let i = 0; i < 3; i++) {
-          const nextTime = interval.next().toDate(); // 获取 Date 对象
-          const formattedTime = this.formatDate(nextTime); // 格式化时间
-          times.push({ time: formattedTime });
+        // 获取最近5次执行时间
+        for (let i = 0; i < 5; i++) {
+          const nextTime = interval.next().toDate();
+          times.push({
+            time: this.formatDate(nextTime)
+          });
        }

        this.executionTimeList = times;
+        this.nextExecutionTime = times[0].time;  // 设置下次执行时间
      } catch (error) {
-        console.error('无效的crontab表达式:', error);
-        this.executionTimeList = [{ time: '无效的crontab表达式' }];
+        this.$message.error('无效的crontab表达式');
+        this.executionTimeList = [];
+        this.nextExecutionTime = '';
+      }
+    },
+    // 格式化日期
+    formatDate(date) {
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, '0');
+      const day = String(date.getDate()).padStart(2, '0');
+      const hour = String(date.getHours()).padStart(2, '0');
+      const minute = String(date.getMinutes()).padStart(2, '0');
+      const second = String(date.getSeconds()).padStart(2, '0');
+      return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
+    },
+    // 修改确定按钮的处理函数
+    handleDialogConfirm() {
+      if (!this.addForm.crontab.trim()) {
+        this.$message.warning('请输入Crontab表达式');
+        return;
+      }
+      
+      try {
+        parser.parseExpression(this.addForm.crontab.trim());
+        this.updateExecutionTimes();
+        this.dialogVisibleTime = false;
+      } catch (error) {
+        this.$message.error('无效的crontab表达式，请修正后再确定');
+        return;
+      }
+    },
+    // 添加开关变化处理函数
+    handleSwitchChange(val) {
+      if (val === 1) {
+        this.dialogVisibleTime = true;
      }
    },
  }
--- a/test-ui/src/views/test/performance/performanceEdit.vue
+++ b/test-ui/src/views/test/performance/performanceEdit.vue
@@ -15,10 +15,10 @@
        <div class="date-top">
          <i class="el-icon-date"></i>
          <span class="date-title">SCHEDULER</span>
-          <el-switch v-model="switchOpen" @change="switchChange"></el-switch>
+          <el-switch v-model="addForm.crontabStatus" :active-value="1" :inactive-value="0" @change="handleSwitchChange"></el-switch>
        </div>
-        <div class="date-bottom">
-          <span>下次执行时间</span>
+        <div class="date-bottom" v-if="addForm.crontabStatus === 1">
+          <span>下次执行时间：{{ nextExecutionTime }}</span>
        </div>
      </div>
    </div>
@@ -125,8 +125,6 @@
        <div class="crontab-wrap">
          <div class="title">Crontab表达式</div>
          <el-input v-model="addForm.crontab" @input="updateExecutionTimes" placeholder="请输入crontab表达式" />
-          <div class="title" style="margin-left: 50px;">定时任务开关</div>
-          <el-switch v-model="addForm.crontabStatus" active-value="1" inactive-value="0"></el-switch>
        </div>
        <div class="near-time">
          <div class="title">最近5次运行时间</div>
@@ -136,8 +134,8 @@
        </div>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisibleTime = false, switchOpen = false">取 消</el-button>
-        <el-button type="primary" @click="dialogVisibleTime = false">确 定</el-button>
+        <el-button @click="dialogVisibleTime = false, addForm.crontabStatus = 0">取 消</el-button>
+        <el-button type="primary" @click="handleDialogConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
@@ -146,6 +144,7 @@
 <script>
 import { editTest, editAndExecuteTest, getTestCaseList, getTestDetail, executeTest } from '../../../api/performance';
 import {runTestPlanCase} from "../../../api/test/planCase";
+import parser from 'cron-parser';  // 添加 cron-parser 依赖

 export default {
  name: "PerformanceEdit",
@@ -164,7 +163,7 @@ export default {
        rpsStatus: '0', //  rps状态：0关闭，1开启，默认0
        rpsLimit: '0', // 每分钟rps上限数，默认0
        crontab: '', // crontab表达式
-        crontabStatus: '0', // 定时任务状态：0关闭，1开启，默认0
+        crontabStatus: 0, // 定时任务状态：0关闭，1开启，默认0
        loopCount: '0', // 迭代次数，默认0
      },
      loading: false,
@@ -180,26 +179,10 @@ export default {
      searchScene: '',
      changeList: [],
      multipleSelection: [],
-      switchOpen: false,
      dialogVisibleTime: false,
      activeTime: 'first',
-      executionTimeList: [
-        {
-          time: "2025-02-18 10:00:00",
-        },
-        {
-          time: "2025-02-19 10:00:00",
-        },
-        {
-          time: "2025-02-20 10:00:00",
-        },
-        {
-          time: "2025-02-21 10:00:00",
-        },
-        {
-          time: "2025-02-22 10:00:00",
-        },
-      ],
+      executionTimeList: [],  // 修改为空数组
+      nextExecutionTime: '',  // 添加下次执行时间
      validation: false, // 校验
    }
  },
@@ -323,6 +306,7 @@ export default {
      getTestDetail(this.$route.query.id).then(res => {
        if (res.code === 200) {
          this.addForm = res.data
+          this.addForm.crontabStatus = parseInt(res.data.crontabStatus)
          res.data.performanceTestCaseVOList.forEach(item => {
            item.status = String(item.status)
          })
@@ -366,37 +350,70 @@ export default {

      this.dialogVisible = false
    },
-    switchChange(val) {
-      this.dialogVisibleTime = val
-    },
    handleClose() {
      this.dialogVisibleTime = false
-      this.switchOpen = false
+      this.addForm.crontabStatus = 0
    },
-    // 根据crontab表达式更新执行时间
+    // 更新执行时间列表
    updateExecutionTimes() {
-      const crontab = this.form.crontab.trim();
+      const crontab = this.addForm.crontab.trim();
      if (!crontab) {
        this.executionTimeList = [];
+        this.nextExecutionTime = '';
        return;
      }

      try {
        // 解析crontab表达式
-        const interval = cronParser.parseExpression(crontab);
+        const interval = parser.parseExpression(crontab);
        const times = [];

-        // 获取最近三次执行时间
-        for (let i = 0; i < 3; i++) {
-          const nextTime = interval.next().toDate(); // 获取 Date 对象
-          const formattedTime = this.formatDate(nextTime); // 格式化时间
-          times.push({ time: formattedTime });
+        // 获取最近5次执行时间
+        for (let i = 0; i < 5; i++) {
+          const nextTime = interval.next().toDate();
+          times.push({
+            time: this.formatDate(nextTime)
+          });
        }

        this.executionTimeList = times;
+        this.nextExecutionTime = times[0].time;  // 设置下次执行时间
      } catch (error) {
-        console.error('无效的crontab表达式:', error);
-        this.executionTimeList = [{ time: '无效的crontab表达式' }];
+        this.$message.error('无效的crontab表达式');
+        this.executionTimeList = [];
+        this.nextExecutionTime = '';
+      }
+    },
+    // 格式化日期
+    formatDate(date) {
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, '0');
+      const day = String(date.getDate()).padStart(2, '0');
+      const hour = String(date.getHours()).padStart(2, '0');
+      const minute = String(date.getMinutes()).padStart(2, '0');
+      const second = String(date.getSeconds()).padStart(2, '0');
+      return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
+    },
+    // 修改确定按钮的处理函数
+    handleDialogConfirm() {
+      if (!this.addForm.crontab.trim()) {
+        this.$message.warning('请输入Crontab表达式');
+        return;
+      }
+      
+      try {
+        parser.parseExpression(this.addForm.crontab.trim());
+        this.updateExecutionTimes();
+        this.dialogVisibleTime = false;
+      } catch (error) {
+        this.$message.error('无效的crontab表达式，请修正后再确定');
+        return;
+      }
+    },
+    // 添加开关变化处理函数
+    handleSwitchChange(val) {
+      if (val === 1) {
+        this.dialogVisibleTime = true;
      }
    },
  }
--- a/test-ui/src/views/test/performance/report.vue
+++ b/test-ui/src/views/test/performance/report.vue
@@ -86,8 +86,14 @@ export default {
      })
    },
    // 分页
-    handleSizeChange() { },
-    handleCurrentChange() { },
+    handleSizeChange(val) {
+      this.serachForm.pageSize = val;
+      this.getReportListData();
+    },
+    handleCurrentChange(val) {
+      this.serachForm.pageNum = val;
+      this.getReportListData();
+    },
    serachList() {
      this.getReportListData()
    },
--- a/test-ui/src/views/test/uiTest/editScene.vue
+++ b/test-ui/src/views/test/uiTest/editScene.vue
@@ -56,7 +56,7 @@
    </div>
    <div class="scene-wrap">
      <div class="scene-header">
-        <el-button size="mini" @click="handleClickSave">保存</el-button>
+        <el-button size="mini" :loading="isSaving" @click="handleClickSave">保存</el-button>
      </div>
      <SceneStep v-show="informationForm.uiSceneStepsVOList.length > 0" :detail="changeStep" />
      <AdvancedSetting v-show="informationForm.uiSceneStepsVOList.length > 0" :detail="changeStep"
@@ -90,6 +90,7 @@ export default {
  data() {
    return {
      activeName: 'first',
+      isSaving: false, // 保存按钮loading状态
      groupList: [], // 分组
      informationForm: {
        automationId: null, // 场景id
@@ -208,14 +209,16 @@ export default {
        this.$modal.msgWarning("请输入责任人");
        return
      }
+      
+      this.isSaving = true;
      updateAutomation(this.informationForm).then(res => {
        if (res.code === 200) {
          this.$modal.msgSuccess("编辑成功")
-          this.$tab.closeOpenPage({ path: "/ui-test/automation-test" });
        } else {
          this.$modal.msgError("编辑失败")
        }
-
+      }).finally(() => {
+        this.isSaving = false;
      })
    },
  }