feat: 增加帮助文档跳转

This commit is contained in:
wenyann 2020-08-31 17:40:56 +08:00
parent 98194ab778
commit 8d88ff7f6e
6 changed files with 384 additions and 267 deletions

View File

@ -1,135 +1,227 @@
<template>
<el-dialog width="35%" class="schedule-edit" :title="$t('schedule.edit_timer_task')" :visible.sync="dialogVisible" @close="close">
<div id="app">
<el-form :model="form" :rules="rules" ref="from">
<el-form-item
prop="cronValue">
<el-input :disabled="isReadOnly" v-model="form.cronValue" class="inp" :placeholder="$t('schedule.please_input_cron_expression')"/>
<!-- <el-button type="primary" @click="showCronDialog">{{$t('schedule.generate_expression')}}</el-button>-->
<el-button :disabled="isReadOnly" type="primary" @click="saveCron">{{$t('commons.save')}}</el-button>
</el-form-item>
<el-form-item>
<el-link :disabled="isReadOnly" type="primary" @click="showCronDialog">{{$t('schedule.generate_expression')}}</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>
</div>
<el-dialog :close-on-click-modal="false" width="35%" class="schedule-edit" :visible.sync="dialogVisible"
@close="close">
<template>
<div>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane :label="$t('schedule.edit_timer_task')" name="first">
<el-form :model="form" :rules="rules" ref="from">
<el-form-item
prop="cronValue">
<el-input :disabled="isReadOnly" v-model="form.cronValue" class="inp"
:placeholder="$t('schedule.please_input_cron_expression')"/>
<!-- <el-button type="primary" @click="showCronDialog">{{$t('schedule.generate_expression')}}</el-button>-->
<el-button :disabled="isReadOnly" type="primary" @click="saveCron">{{$t('commons.save')}}</el-button>
</el-form-item>
<el-form-item>
<el-link :disabled="isReadOnly" type="primary" @click="showCronDialog">
{{$t('schedule.generate_expression')}}
</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 CrontabResult from "../cron/CrontabResult";
import {cronValidate} from "../../../../common/js/cron";
import {listenGoBack, removeGoBackListener} from "../../../../common/js/utils";
import Crontab from "../cron/Crontab";
import CrontabResult from "../cron/CrontabResult";
import {cronValidate} from "../../../../common/js/cron";
import {listenGoBack, removeGoBackListener} from "../../../../common/js/utils";
function defaultCustomValidate() {return {pass: true};}
function defaultCustomValidate() {
return {pass: true};
}
export default {
name: "MsScheduleEdit",
components: {CrontabResult, Crontab},
props: {
save: Function,
schedule: {},
customValidate: {
type: Function,
default: defaultCustomValidate
},
isReadOnly: {
type: Boolean,
default: false
export default {
name: "MsScheduleEdit",
components: {CrontabResult, Crontab},
props: {
save: Function,
schedule: {},
customValidate: {
type: Function,
default: defaultCustomValidate
},
isReadOnly: {
type: Boolean,
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')));
}
},
watch: {
'schedule.value'() {
this.form.cronValue = this.schedule.value;
// else if(!this.intervalShortValidate()) {
// callback(new Error(this.$t('schedule.cron_expression_interval_short_error')));
// }
else if (!customValidate.pass) {
callback(new Error(customValidate.info));
} else {
callback();
}
},
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()) {
// callback(new Error(this.$t('schedule.cron_expression_interval_short_error')));
// }
else if (!customValidate.pass){
callback(new Error(customValidate.info));
} else {
callback();
}
};
return {
dialogVisible: false,
showCron: false,
form: {
cronValue: ""
},
rules: {
cronValue :[{required: true, validator: validateCron, trigger: 'blur'}],
}
};
return {
operation: true,
dialogVisible: false,
showCron: false,
form: {
cronValue: ""
},
tableData: [
{
event: '执行成功',
receiver: '',
email: '',
operation: 1
}, {
event: '执行成功',
receiver: '',
email: '',
operation: 2
}
},
methods: {
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;
],
email: "",
enable: true,
activeName: 'first',
rules: {
cronValue: [{required: true, validator: validateCron, trigger: 'blur'}],
}
}
},
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>

View File

@ -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;
}

View File

@ -109,169 +109,169 @@
</template>
<script>
import MsTableOperatorButton from "../../../common/components/MsTableOperatorButton";
import MsTableOperatorButton from "../../../common/components/MsTableOperatorButton";
export default {
name: "PerformanceAdvancedConfig",
components: {MsTableOperatorButton},
data() {
return {
timeout: 2000,
statusCode: [],
domains: [],
params: [],
statusCodeStr: '',
}
},
props: {
readOnly: {
type: Boolean,
default: false
export default {
name: "PerformanceAdvancedConfig",
components: {MsTableOperatorButton},
data() {
return {
timeout: 2000,
statusCode: [],
domains: [],
params: [],
statusCodeStr: '',
}
},
testId: String,
},
mounted() {
if (this.testId) {
this.getAdvancedConfig();
}
},
watch: {
testId() {
props: {
readOnly: {
type: Boolean,
default: false
},
testId: String,
},
mounted() {
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 {
margin-bottom: 10px;
}
.el-row {
margin-bottom: 10px;
}
.edit-input {
padding-right: 0px;
}
.edit-input {
padding-right: 0px;
}
.tb-edit .el-textarea {
display: none;
}
.tb-edit .el-textarea {
display: none;
}
.tb-edit .current-row .el-textarea {
display: block;
}
.tb-edit .current-row .el-textarea {
display: block;
}
.tb-edit .current-row .el-textarea + span {
display: none;
}
.tb-edit .current-row .el-textarea + span {
display: none;
}
.el-col {
text-align: left;
}
.el-col {
text-align: left;
}
.el-col .el-table {
align: center;
}
.el-col .el-table {
align: center;
}
</style>

View File

@ -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",

View File

@ -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: '运行规则',

View File

@ -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: "編輯定時任務",