高级设置
This commit is contained in:
Captain.B
parent
f3c620511c
commit
52337f63a2
|
|
@ -84,6 +84,7 @@ export default {
|
|||
'ramp_up_time_within': 'In',
|
||||
'ramp_up_time_minutes': 'minutes, separate',
|
||||
'ramp_up_time_times': 'add concurrent users',
|
||||
'advanced_config_error': 'Advanced configuration verification failed',
|
||||
},
|
||||
i18n: {
|
||||
'home': 'Home',
|
||||
|
|
|
|||
|
|
@ -84,6 +84,7 @@ export default {
|
|||
'ramp_up_time_within': '在',
|
||||
'ramp_up_time_minutes': '分钟内，分',
|
||||
'ramp_up_time_times': '次增加并发用户',
|
||||
'advanced_config_error': '高级配置校验失败',
|
||||
},
|
||||
i18n: {
|
||||
'home': '首页',
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<el-col v-if="auth">
|
||||
<el-row id="header-top" type="flex" justify="space-between" align="middle">
|
||||
<el-col :span="4">
|
||||
<el-col :span="1">
|
||||
<a class="logo"/>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
|
|
|
|||
|
|
@ -23,16 +23,15 @@
|
|||
|
||||
<el-tabs class="testplan-config" v-model="active" type="border-card" :stretch="true">
|
||||
<el-tab-pane :label="$t('load_test.basic_config')">
|
||||
<ms-test-plan-basic-config :test-plan="testPlan"/>
|
||||
<ms-test-plan-basic-config :test-plan="testPlan" ref="basicConfig"/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('load_test.pressure_config')">
|
||||
<ms-test-plan-pressure-config :test-plan="testPlan"/>
|
||||
<ms-test-plan-pressure-config :test-plan="testPlan" ref="pressureConfig"/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('load_test.advanced_config')">
|
||||
<ms-test-plan-advanced-config/>
|
||||
<el-tab-pane :label="$t('load_test.advanced_config')" class="advanced-config">
|
||||
<ms-test-plan-advanced-config ref="advancedConfig"/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -201,7 +200,16 @@
|
|||
return false;
|
||||
}
|
||||
|
||||
if (!this.$refs.advancedConfig.validConfig()) {
|
||||
this.$message({
|
||||
message: this.$t('load_test.advanced_config_error'),
|
||||
type: 'error'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
/// todo: 其他校验
|
||||
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
|
@ -235,4 +243,9 @@
|
|||
.edit-testplan-container .input-with-select .el-input-group__prepend {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.advanced-config {
|
||||
height: calc(100vh - 280px);
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,187 @@
|
|||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
我是第三个子组件
|
||||
<el-button type="text" size="small">修改TestPlan值</el-button>
|
||||
<div class="el-tab-pane-box">
|
||||
|
||||
<el-row type="flex" justify="start">
|
||||
<el-col :span="8">
|
||||
<h3>域名绑定</h3>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-button type="primary" plain @click="add('domains')">添加</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- -->
|
||||
<el-row>
|
||||
<el-table :data="domains">
|
||||
<el-table-column
|
||||
label="域名"
|
||||
show-overflow-tooltip>
|
||||
<template slot-scope="{row}">
|
||||
<template v-if="row.edit">
|
||||
<el-input v-model="row.domain" class="edit-input" size="mini"/>
|
||||
</template>
|
||||
<span v-else>{{ row.domain }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="是否启用"
|
||||
show-overflow-tooltip>
|
||||
<template slot-scope="{row}">
|
||||
<template v-if="row.edit">
|
||||
<el-switch
|
||||
size="mini"
|
||||
v-model="row.enable"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#ff4949">
|
||||
</el-switch>
|
||||
</template>
|
||||
<span v-else>{{ row.enable }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="IP地址"
|
||||
show-overflow-tooltip>
|
||||
<template slot-scope="{row}">
|
||||
<template v-if="row.edit">
|
||||
<el-input v-model="row.ip" class="edit-input" size="mini"/>
|
||||
</template>
|
||||
<span v-else>{{ row.ip }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="Actions">
|
||||
<template slot-scope="{row}">
|
||||
<template v-if="row.edit">
|
||||
<el-button
|
||||
class="cancel-btn"
|
||||
size="mini"
|
||||
icon="el-icon-refresh"
|
||||
type="warning"
|
||||
circle
|
||||
@click="cancelEdit(row)">
|
||||
</el-button>
|
||||
<el-button
|
||||
type="success"
|
||||
size="mini"
|
||||
icon="el-icon-circle-check"
|
||||
circle
|
||||
@click="confirmEdit(row)">
|
||||
</el-button>
|
||||
</template>
|
||||
<el-button
|
||||
v-else
|
||||
type="primary"
|
||||
size="mini"
|
||||
icon="el-icon-edit"
|
||||
circle
|
||||
@click="edit(row)">
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="mini"
|
||||
icon="el-icon-delete"
|
||||
circle
|
||||
@click="del(row, 'domains', 'domain')">
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<h3>自定义属性</h3>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-button type="primary" plain @click="add('params')">添加</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- -->
|
||||
<el-row>
|
||||
<el-table :data="params">
|
||||
<el-table-column
|
||||
label="属性名"
|
||||
show-overflow-tooltip>
|
||||
<template slot-scope="{row}">
|
||||
<template v-if="row.edit">
|
||||
<el-input v-model="row.name" class="edit-input" size="mini"/>
|
||||
</template>
|
||||
<span v-else>{{ row.name }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="是否启用"
|
||||
show-overflow-tooltip>
|
||||
<template slot-scope="{row}">
|
||||
<template v-if="row.edit">
|
||||
<el-switch
|
||||
size="mini"
|
||||
v-model="row.enable"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#ff4949">
|
||||
</el-switch>
|
||||
</template>
|
||||
<span v-else>{{ row.enable }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="属性值"
|
||||
show-overflow-tooltip>
|
||||
<template slot-scope="{row}">
|
||||
<template v-if="row.edit">
|
||||
<el-input v-model="row.value" class="edit-input" size="mini"/>
|
||||
</template>
|
||||
<span v-else>{{ row.value }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="Actions">
|
||||
<template slot-scope="{row}">
|
||||
<template v-if="row.edit">
|
||||
<el-button
|
||||
class="cancel-btn"
|
||||
size="mini"
|
||||
icon="el-icon-refresh"
|
||||
type="warning"
|
||||
circle
|
||||
@click="cancelEdit(row)">
|
||||
</el-button>
|
||||
<el-button
|
||||
type="success"
|
||||
size="mini"
|
||||
icon="el-icon-circle-check"
|
||||
circle
|
||||
@click="confirmEdit(row)">
|
||||
</el-button>
|
||||
</template>
|
||||
<el-button
|
||||
v-else
|
||||
type="primary"
|
||||
size="mini"
|
||||
icon="el-icon-edit"
|
||||
circle
|
||||
@click="edit(row)">
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="mini"
|
||||
icon="el-icon-delete"
|
||||
circle
|
||||
@click="del(row, 'params', 'name')">
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
建立连接超时时间 10 ms
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
自定义 HTTP 响应成功状态码 302
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -14,9 +190,93 @@
|
|||
name: "MsTestPlanAdvancedConfig",
|
||||
data() {
|
||||
return {
|
||||
domains: [
|
||||
{domain: 'baidu.com0', enable: true, ip: '127.0.0.1', edit: false},
|
||||
{domain: 'baidu.com1', enable: true, ip: '127.0.0.1', edit: false},
|
||||
{domain: 'baidu.com2', enable: true, ip: '127.0.0.1', edit: false},
|
||||
{domain: 'baidu.com3', enable: true, ip: '127.0.0.1', edit: false},
|
||||
],
|
||||
params: [
|
||||
{name: 'param1', value: '13134', enable: true, edit: false},
|
||||
{name: 'param2', value: '13134', enable: true, edit: false},
|
||||
{name: 'param3', value: '13134', enable: true, edit: false},
|
||||
{name: 'param4', value: '13134', enable: true, edit: false},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
revertObject(row) {
|
||||
Object.keys(row).forEach(function (key) {
|
||||
row[key] = row[key + 'Origin'];
|
||||
});
|
||||
},
|
||||
saveOriginObject(row) {
|
||||
Object.keys(row).forEach(function (key) {
|
||||
row[key + 'Origin'] = row[key];
|
||||
});
|
||||
},
|
||||
add(dataName) {
|
||||
if (dataName === 'domains') {
|
||||
this[dataName].push({
|
||||
domain: '',
|
||||
enable: true,
|
||||
ip: '',
|
||||
edit: false,
|
||||
});
|
||||
}
|
||||
if (dataName === 'params') {
|
||||
this[dataName].push({
|
||||
name: '',
|
||||
enable: true,
|
||||
value: '',
|
||||
edit: false,
|
||||
});
|
||||
}
|
||||
},
|
||||
edit(row) {
|
||||
this.saveOriginObject(row);
|
||||
row.edit = !row.edit
|
||||
},
|
||||
del(row, dataName, id) {
|
||||
this[dataName] = this[dataName].filter((d) => d[id] !== row[id]);
|
||||
},
|
||||
cancelEdit(row) {
|
||||
row.edit = false;
|
||||
// rollback changes
|
||||
this.revertObject(row);
|
||||
this.$message({
|
||||
message: 'The row has been restored to the original value',
|
||||
type: 'warning'
|
||||
})
|
||||
},
|
||||
confirmEdit(row) {
|
||||
row.edit = false;
|
||||
this.saveOriginObject(row);
|
||||
this.$message({
|
||||
message: 'The row has been edited',
|
||||
type: 'success'
|
||||
})
|
||||
},
|
||||
validConfig() {
|
||||
return this.domains.filter(d => !d.domain || !d.ip).length === 0
|
||||
&&
|
||||
this.params.filter(d => !d.name || !d.value).length === 0;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-row {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.edit-input {
|
||||
padding-right: 100px;
|
||||
}
|
||||
|
||||
.container-tab >>> .el-tabs__content {
|
||||
flex-grow: 1;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -127,7 +127,7 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style scoped>
|
||||
.pressure-config-container .el-input {
|
||||
width: 130px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue