feat: 增加帮助文档跳转

frontend/src/business/components/common/components/MsScheduleEdit.vue

@@ -1,135 +1,227 @@
 <template>
-  <el-dialog width="35%" class="schedule-edit" :title="$t('schedule.edit_timer_task')" :visible.sync="dialogVisible"  @close="close">
+  <el-dialog :close-on-click-modal="false" width="35%" class="schedule-edit" :visible.sync="dialogVisible"
-    <div id="app">
+             @close="close">
-      <el-form :model="form" :rules="rules" ref="from">
+    <template>
-        <el-form-item
+      <div>
-          prop="cronValue">
+        <el-tabs v-model="activeName" @tab-click="handleClick">
-          <el-input :disabled="isReadOnly" v-model="form.cronValue" class="inp" :placeholder="$t('schedule.please_input_cron_expression')"/>
+          <el-tab-pane :label="$t('schedule.edit_timer_task')" name="first">
-<!--          <el-button type="primary" @click="showCronDialog">{{$t('schedule.generate_expression')}}</el-button>-->
+            <el-form :model="form" :rules="rules" ref="from">
-          <el-button :disabled="isReadOnly" type="primary" @click="saveCron">{{$t('commons.save')}}</el-button>
+              <el-form-item
-        </el-form-item>
+                prop="cronValue">
-        <el-form-item>
+                <el-input :disabled="isReadOnly" v-model="form.cronValue" class="inp"
-          <el-link :disabled="isReadOnly" type="primary" @click="showCronDialog">{{$t('schedule.generate_expression')}}</el-link>
+                          :placeholder="$t('schedule.please_input_cron_expression')"/>
-        </el-form-item>
+                <!--          <el-button type="primary" @click="showCronDialog">{{$t('schedule.generate_expression')}}</el-button>-->
-        <crontab-result :ex="form.cronValue" ref="crontabResult" />
+                <el-button :disabled="isReadOnly" type="primary" @click="saveCron">{{$t('commons.save')}}</el-button>
-      </el-form>
+              </el-form-item>
-      <el-dialog :title="$t('schedule.generate_expression')" :visible.sync="showCron" :modal="false">
+              <el-form-item>
-        <crontab @hide="showCron=false" @fill="crontabFill" :expression="schedule.value" ref="crontab"/>
+                <el-link :disabled="isReadOnly" type="primary" @click="showCronDialog">
-      </el-dialog>
+                  {{$t('schedule.generate_expression')}}
-    </div>
+                </el-link>
+              </el-form-item>
+              <crontab-result :ex="form.cronValue" ref="crontabResult"/>
+            </el-form>
+            <el-dialog :title="$t('schedule.generate_expression')" :visible.sync="showCron" :modal="false">
+              <crontab @hide="showCron=false" @fill="crontabFill" :expression="schedule.value" ref="crontab"/>
+            </el-dialog>
+          </el-tab-pane>
+          <el-tab-pane :label="$t('schedule.task_notification')" name="second">
+            <template>
+              <el-table
+                :data="tableData"
+                style="width: 100%">
+                <el-table-column
+                  prop="event"
+                  :label="$t('schedule.event')"
+                >
+                </el-table-column>
+                <el-table-column
+                  prop="receiver"
+                  :label="$t('schedule.receiver')"
+                  width="200"
+                >
+                  <template v-slot:default="{row}">
+                    <el-input
+                      size="mini"
+                      type="textarea"
+                      :rows="1"
+                      class="edit-input"
+                      v-model="row.receiver"
+                      :placeholder="$t('schedule.receiver')"
+                      clearable>
+                    </el-input>
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  prop="email"
+                  :label="$t('schedule.receiving_mode')"
+                  width="300">
+                  <template v-slot:default="{row}">
+                    <el-input
+                      size="mini"
+                      type="textarea"
+                      :rows="1"
+                      class="edit-input"
+                      v-model="row.email"
+                      :placeholder="$t('schedule.input_email')"
+                      clearable>
+                    </el-input>
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  align="center"
+                  :label="$t('schedule.operation')"
+                  show-overflow-tooltip>
+                  <template slot-scope="scope">
+                    <el-switch
+                      v-model="scope.row.status"
+                      :active-value="1"
+                      :inactive-value="2"
+                      active-color="#13ce66"
+                      inactive-color="#ff4949"
+                    />
+                  </template>
+                </el-table-column>
+              </el-table>
+            </template>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </template>
   </el-dialog>
 </template>
 
 <script>
 
-    import Crontab from "../cron/Crontab";
+  import Crontab from "../cron/Crontab";
-    import CrontabResult from "../cron/CrontabResult";
+  import CrontabResult from "../cron/CrontabResult";
-    import {cronValidate} from "../../../../common/js/cron";
+  import {cronValidate} from "../../../../common/js/cron";
-    import {listenGoBack, removeGoBackListener} from "../../../../common/js/utils";
+  import {listenGoBack, removeGoBackListener} from "../../../../common/js/utils";
 
-    function defaultCustomValidate() {return {pass: true};}
+  function defaultCustomValidate() {
+    return {pass: true};
+  }
 
-    export default {
+  export default {
-      name: "MsScheduleEdit",
+    name: "MsScheduleEdit",
-      components: {CrontabResult, Crontab},
+    components: {CrontabResult, Crontab},
-      props: {
+    props: {
-        save: Function,
+      save: Function,
-        schedule: {},
+      schedule: {},
-        customValidate: {
+      customValidate: {
-          type: Function,
+        type: Function,
-          default: defaultCustomValidate
+        default: defaultCustomValidate
-        },
+      },
-        isReadOnly: {
+      isReadOnly: {
-          type: Boolean,
+        type: Boolean,
-          default: false
+        default: false
+      }
+    },
+    watch: {
+      'schedule.value'() {
+        this.form.cronValue = this.schedule.value;
+      }
+    },
+    data() {
+      const validateCron = (rule, cronValue, callback) => {
+        let customValidate = this.customValidate(this.getIntervalTime());
+        if (!cronValue) {
+          callback(new Error(this.$t('commons.input_content')));
+        } else if (!cronValidate(cronValue)) {
+          callback(new Error(this.$t('schedule.cron_expression_format_error')));
         }
-      },
+          // else if(!this.intervalShortValidate()) {
-      watch: {
+          //   callback(new Error(this.$t('schedule.cron_expression_interval_short_error')));
-        'schedule.value'() {
+        // }
-          this.form.cronValue = this.schedule.value;
+        else if (!customValidate.pass) {
+          callback(new Error(customValidate.info));
+        } else {
+          callback();
         }
-      },
+      };
-      data() {
+      return {
-          const validateCron = (rule, cronValue, callback) => {
+        operation: true,
-            let customValidate = this.customValidate(this.getIntervalTime());
+        dialogVisible: false,
-            if (!cronValue) {
+        showCron: false,
-              callback(new Error(this.$t('commons.input_content')));
+        form: {
-            } else if (!cronValidate(cronValue)) {
+          cronValue: ""
-              callback(new Error(this.$t('schedule.cron_expression_format_error')));
+        },
-            }
+        tableData: [
-            // else if(!this.intervalShortValidate()) {
+          {
-            //   callback(new Error(this.$t('schedule.cron_expression_interval_short_error')));
+            event: '执行成功',
-            // }
+            receiver: '',
-            else if (!customValidate.pass){
+            email: '',
-              callback(new Error(customValidate.info));
+            operation: 1
-            } else {
+          }, {
-              callback();
+            event: '执行成功',
-            }
+            receiver: '',
-          };
+            email: '',
-          return {
+            operation: 2
-            dialogVisible: false,
-            showCron: false,
-            form: {
-              cronValue: ""
-            },
-            rules: {
-              cronValue :[{required: true, validator: validateCron, trigger: 'blur'}],
-            }
           }
-      },
+        ],
-      methods: {
+        email: "",
-        open() {
+        enable: true,
-          this.dialogVisible = true;
+        activeName: 'first',
-          this.form.cronValue = this.schedule.value;
+        rules: {
-          listenGoBack(this.close);
+          cronValue: [{required: true, validator: validateCron, trigger: 'blur'}],
-        },
-        crontabFill(value, resultList) {
-          //确定后回传的值
-          this.form.cronValue = value;
-          this.$refs.crontabResult.resultList = resultList;
-          this.$refs['from'].validate();
-        },
-        showCronDialog() {
-          this.showCron = true;
-        },
-        saveCron () {
-          this.$refs['from'].validate((valid) => {
-            if (valid) {
-              this.intervalShortValidate();
-              this.save(this.form.cronValue);
-              this.dialogVisible = false;
-            } else  {
-              return false;
-            }
-          });
-        },
-        close() {
-          this.dialogVisible = false;
-          this.form.cronValue = '';
-          this.$refs['from'].resetFields();
-          if (!this.schedule.value) {
-            this.$refs.crontabResult.resultList = [];
-          }
-          removeGoBackListener(this.close);
-        },
-        intervalShortValidate() {
-          if (this.getIntervalTime() < 3*60*1000) {
-            // return false;
-            this.$info(this.$t('schedule.cron_expression_interval_short_error'));
-          }
-          return true;
-        },
-        resultListChange() {
-          this.$refs['from'].validate();
-        },
-        getIntervalTime() {
-          let resultList = this.$refs.crontabResult.resultList;
-          let time1 = new Date(resultList[0]);
-          let time2 = new Date(resultList[1]);
-          return time2 - time1;
         }
       }
+    },
+    methods: {
+      handleClick() {
+
+      },
+      open() {
+        this.dialogVisible = true;
+        this.form.cronValue = this.schedule.value;
+        listenGoBack(this.close);
+      },
+      crontabFill(value, resultList) {
+        //确定后回传的值
+        this.form.cronValue = value;
+        this.$refs.crontabResult.resultList = resultList;
+        this.$refs['from'].validate();
+      },
+      showCronDialog() {
+        this.showCron = true;
+      },
+      saveCron() {
+        this.$refs['from'].validate((valid) => {
+          if (valid) {
+            this.intervalShortValidate();
+            this.save(this.form.cronValue);
+            this.dialogVisible = false;
+          } else {
+            return false;
+          }
+        });
+      },
+      close() {
+        this.dialogVisible = false;
+        this.form.cronValue = '';
+        this.$refs['from'].resetFields();
+        if (!this.schedule.value) {
+          this.$refs.crontabResult.resultList = [];
+        }
+        removeGoBackListener(this.close);
+      },
+      intervalShortValidate() {
+        if (this.getIntervalTime() < 3 * 60 * 1000) {
+          // return false;
+          this.$info(this.$t('schedule.cron_expression_interval_short_error'));
+        }
+        return true;
+      },
+      resultListChange() {
+        this.$refs['from'].validate();
+      },
+      getIntervalTime() {
+        let resultList = this.$refs.crontabResult.resultList;
+        let time1 = new Date(resultList[0]);
+        let time2 = new Date(resultList[1]);
+        return time2 - time1;
+      }
     }
+  }
 </script>
 
 <style scoped>

frontend/src/business/components/common/head/HeaderUser.vue

@@ -6,8 +6,9 @@
     <template v-slot:dropdown>
       <el-dropdown-menu>
         <el-dropdown-item command="personal">{{$t('commons.personal_information')}}</el-dropdown-item>
-        <el-dropdown-item command="logout">{{$t('commons.exit_system')}}</el-dropdown-item>
         <el-dropdown-item command="about">{{$t('commons.about_us')}} <i class="el-icon-info"/></el-dropdown-item>
+        <el-dropdown-item command="help">{{$t('commons.help_documentation')}}</el-dropdown-item>
+        <el-dropdown-item command="logout">{{$t('commons.exit_system')}}</el-dropdown-item>
       </el-dropdown-menu>
     </template>
 
@@ -54,6 +55,9 @@
           case "about":
             this.$refs.aboutUs.open();
             break;
+          case "help":
+            window.location.href = "https://metersphere.io/docs/index.html";
+            break;
           default:
             break;
         }

frontend/src/business/components/performance/test/components/PerformanceAdvancedConfig.vue

@@ -109,169 +109,169 @@
 </template>
 
 <script>
-import MsTableOperatorButton from "../../../common/components/MsTableOperatorButton";
+  import MsTableOperatorButton from "../../../common/components/MsTableOperatorButton";
 
-export default {
+  export default {
-  name: "PerformanceAdvancedConfig",
+    name: "PerformanceAdvancedConfig",
-  components: {MsTableOperatorButton},
+    components: {MsTableOperatorButton},
-  data() {
+    data() {
-    return {
+      return {
-      timeout: 2000,
+        timeout: 2000,
-      statusCode: [],
+        statusCode: [],
-      domains: [],
+        domains: [],
-      params: [],
+        params: [],
-      statusCodeStr: '',
+        statusCodeStr: '',
-    }
+      }
-  },
-  props: {
-    readOnly: {
-      type: Boolean,
-      default: false
     },
-    testId: String,
+    props: {
-  },
+      readOnly: {
-  mounted() {
+        type: Boolean,
-    if (this.testId) {
+        default: false
-      this.getAdvancedConfig();
+      },
-    }
+      testId: String,
-  },
+    },
-  watch: {
+    mounted() {
-    testId() {
       if (this.testId) {
         this.getAdvancedConfig();
       }
+    },
+    watch: {
+      testId() {
+        if (this.testId) {
+          this.getAdvancedConfig();
+        }
+      }
+    },
+    methods: {
+      getAdvancedConfig() {
+        this.$get('/performance/get-advanced-config/' + this.testId, (response) => {
+          if (response.data) {
+            let data = JSON.parse(response.data);
+            this.timeout = data.timeout || 10;
+            this.statusCode = data.statusCode || [];
+            this.statusCodeStr = this.statusCode.join(',');
+            this.domains = data.domains || [];
+            this.params = data.params || [];
+            /*this.domains.forEach(d => d.edit = false);
+            this.params.forEach(d => d.edit = false);*/
+          }
+        });
+      },
+      add(dataName) {
+        if (dataName === 'domains') {
+          this[dataName].push({
+            domain: 'fit2cloud.com',
+            enable: true,
+            ip: '127.0.0.1',
+            edit: true,
+          });
+        }
+        if (dataName === 'params') {
+          this[dataName].push({
+            name: 'param1',
+            enable: true,
+            value: '0',
+            edit: true,
+          });
+        }
+      },
+      edit(row) {
+        row.edit = !row.edit
+      },
+      del(row, dataName, index) {
+        this[dataName].splice(index, 1);
+      },
+      confirmEdit(row) {
+        row.edit = false;
+        row.enable = true;
+      },
+      groupBy(data, key) {
+        return data.reduce((p, c) => {
+          let name = c[key];
+          if (!p.hasOwnProperty(name)) {
+            p[name] = 0;
+          }
+          p[name]++;
+          return p;
+        }, {});
+      },
+      validConfig() {
+        let counts = this.groupBy(this.domains, 'domain');
+        for (let c in counts) {
+          if (counts[c] > 1) {
+            this.$error(this.$t('load_test.domain_is_duplicate'));
+            return false;
+          }
+        }
+        counts = this.groupBy(this.params, 'name');
+        for (let c in counts) {
+          if (counts[c] > 1) {
+            this.$error(this.$t('load_test.param_is_duplicate'));
+            return false;
+          }
+        }
+        if (this.domains.filter(d => !d.domain || !d.ip).length > 0) {
+          this.$error(this.$t('load_test.domain_ip_is_empty'));
+          return false;
+        }
+        if (this.params.filter(d => !d.name || !d.value).length > 0) {
+          this.$error(this.$t('load_test.param_name_value_is_empty'));
+          return false;
+        }
+        return true;
+      },
+      checkStatusCode() {
+        let license_num = this.statusCodeStr;
+        license_num = license_num.replace(/[^\d,]/g, ''); // 清除“数字”和“.”以外的字符
+        this.statusCodeStr = license_num;
+      },
+      cancelAllEdit() {
+        this.domains.forEach(d => d.edit = false);
+        this.params.forEach(d => d.edit = false);
+      },
+      configurations() {
+        let statusCode = [];
+        if (this.statusCodeStr) {
+          statusCode = this.statusCodeStr.split(',');
+        }
+        return {
+          timeout: this.timeout,
+          statusCode: statusCode,
+          params: this.params,
+          domains: this.domains,
+        };
+      },
     }
-  },
-  methods: {
-    getAdvancedConfig() {
-      this.$get('/performance/get-advanced-config/' + this.testId, (response) => {
-        if (response.data) {
-          let data = JSON.parse(response.data);
-          this.timeout = data.timeout || 10;
-          this.statusCode = data.statusCode || [];
-          this.statusCodeStr = this.statusCode.join(',');
-          this.domains = data.domains || [];
-          this.params = data.params || [];
-          /*this.domains.forEach(d => d.edit = false);
-          this.params.forEach(d => d.edit = false);*/
-        }
-      });
-    },
-    add(dataName) {
-      if (dataName === 'domains') {
-        this[dataName].push({
-          domain: 'fit2cloud.com',
-          enable: true,
-          ip: '127.0.0.1',
-          edit: true,
-        });
-      }
-      if (dataName === 'params') {
-        this[dataName].push({
-          name: 'param1',
-          enable: true,
-          value: '0',
-          edit: true,
-        });
-      }
-    },
-    edit(row) {
-      row.edit = !row.edit
-    },
-    del(row, dataName, index) {
-      this[dataName].splice(index, 1);
-    },
-    confirmEdit(row) {
-      row.edit = false;
-      row.enable = true;
-    },
-    groupBy(data, key) {
-      return data.reduce((p, c) => {
-        let name = c[key];
-        if (!p.hasOwnProperty(name)) {
-          p[name] = 0;
-        }
-        p[name]++;
-        return p;
-      }, {});
-    },
-    validConfig() {
-      let counts = this.groupBy(this.domains, 'domain');
-      for (let c in counts) {
-        if (counts[c] > 1) {
-          this.$error(this.$t('load_test.domain_is_duplicate'));
-          return false;
-        }
-      }
-      counts = this.groupBy(this.params, 'name');
-      for (let c in counts) {
-        if (counts[c] > 1) {
-          this.$error(this.$t('load_test.param_is_duplicate'));
-          return false;
-        }
-      }
-      if (this.domains.filter(d => !d.domain || !d.ip).length > 0) {
-        this.$error(this.$t('load_test.domain_ip_is_empty'));
-        return false;
-      }
-      if (this.params.filter(d => !d.name || !d.value).length > 0) {
-        this.$error(this.$t('load_test.param_name_value_is_empty'));
-        return false;
-      }
-      return true;
-    },
-    checkStatusCode() {
-      let license_num = this.statusCodeStr;
-      license_num = license_num.replace(/[^\d,]/g, ''); // 清除“数字”和“.”以外的字符
-      this.statusCodeStr = license_num;
-    },
-    cancelAllEdit() {
-      this.domains.forEach(d => d.edit = false);
-      this.params.forEach(d => d.edit = false);
-    },
-    configurations() {
-      let statusCode = [];
-      if (this.statusCodeStr) {
-        statusCode = this.statusCodeStr.split(',');
-      }
-      return {
-        timeout: this.timeout,
-        statusCode: statusCode,
-        params: this.params,
-        domains: this.domains,
-      };
-    },
   }
-}
 </script>
 
 <style scoped>
-.el-row {
+  .el-row {
-  margin-bottom: 10px;
+    margin-bottom: 10px;
-}
+  }
 
-.edit-input {
+  .edit-input {
-  padding-right: 0px;
+    padding-right: 0px;
-}
+  }
 
-.tb-edit .el-textarea {
+  .tb-edit .el-textarea {
-  display: none;
+    display: none;
-}
+  }
 
-.tb-edit .current-row .el-textarea {
+  .tb-edit .current-row .el-textarea {
-  display: block;
+    display: block;
-}
+  }
 
-.tb-edit .current-row .el-textarea + span {
+  .tb-edit .current-row .el-textarea + span {
-  display: none;
+    display: none;
-}
+  }
 
-.el-col {
+  .el-col {
-  text-align: left;
+    text-align: left;
-}
+  }
 
-.el-col .el-table {
+  .el-col .el-table {
-  align: center;
+    align: center;
-}
+  }
 
 </style>

frontend/src/i18n/en-US.js

@@ -1,5 +1,6 @@
 export default {
   commons: {
+    help_documentation: 'Help documentation',
     delete_cancelled: 'Delete cancelled',
     workspace: 'Workspace',
     organization: 'Organization',
@@ -805,6 +806,12 @@ export default {
     mapping_cannot_be_empty: 'LDAP mapping cannot be empty',
   },
   schedule: {
+    input_email: "Please input email account",
+    event: "event",
+    receiving_mode: "Receiving mode",
+    receiver: "Receiver",
+    operation: "operation",
+    task_notification: "Task notification",
     not_set: "Not Set",
     next_execution_time: "Next Execution Time",
     edit_timer_task: "Edit Timer Task",

frontend/src/i18n/zh-CN.js

@@ -1,5 +1,6 @@
 export default {
   commons: {
+    help_documentation: '帮助文档',
     delete_cancelled: '已取消删除',
     workspace: '工作空间',
     organization: '组织',
@@ -807,6 +808,12 @@ export default {
     password_cannot_be_empty: 'LDAP 密码不能为空',
   },
   schedule: {
+    input_email: "请输入邮箱账号",
+    event: "事件",
+    receiving_mode: "接收方式",
+    receiver: "接收人",
+    operation: "操作",
+    task_notification: "任务通知",
     not_set: "未设置",
     test_name: '测试名称',
     running_rule: '运行规则',

frontend/src/i18n/zh-TW.js

@@ -1,5 +1,6 @@
 export default {
   commons: {
+    help_documentation: '幫助文檔',
     delete_cancelled: '已取消删除',
     workspace: '工作空間',
     organization: '組織',
@@ -804,6 +805,12 @@ export default {
     mapping_cannot_be_empty: 'LDAP 用戶屬性映射不能為空',
   },
   schedule: {
+    input_email: "請輸入郵箱帳號",
+    event: "事件",
+    receiving_mode: "接收管道",
+    receiver: "接收人",
+    operation: "操作",
+    task_notification: "任務通知",
     not_set: "未設置",
     next_execution_time: "下次執行時間",
     edit_timer_task: "編輯定時任務",