style(接口测试): 修改mqtt插件的样式

This commit is contained in:
wxg0103 2023-01-04 15:58:42 +08:00 committed by wxg0103
parent 17bd707efa
commit 988615337e
1 changed files with 15 additions and 24 deletions

View File

@ -44,7 +44,7 @@
<div v-for="(data, index) in value.list" :key="index"> <div v-for="(data, index) in value.list" :key="index">
<el-col name="itemOptions"> <el-col name="itemOptions">
<div v-if="data.type === options.TEXT" class="assertion-item-editing"> <div v-if="data.type === options.TEXT" class="assertion-item-editing">
<el-row :gutter="10" type="flex" justify="space-between" align="middle"> <el-row :gutter="10" class="assertion-item-row">
<el-col class="ms-assertion-select"> <el-col class="ms-assertion-select">
<el-select <el-select
:disabled="true" :disabled="true"
@ -52,9 +52,6 @@
v-model="data.type" v-model="data.type"
:placeholder="$t('api_test.request.assertions.select_type')" :placeholder="$t('api_test.request.assertions.select_type')"
size="small"> size="small">
<el-option :label="$t('api_test.request.assertions.text')" :value="options.TEXT" />
<el-option :label="'JSONPath'" :value="options.JSON_PATH" />
<el-option :label="'XPath'" :value="options.XPATH2" />
</el-select> </el-select>
</el-col> </el-col>
<el-col class="ms-assertion-select"> <el-col class="ms-assertion-select">
@ -79,9 +76,9 @@
size="small" size="small"
show-word-limit show-word-limit
:placeholder="$t('api_test.request.assertions.value')" :placeholder="$t('api_test.request.assertions.value')"
width="500px" /> />
</el-col> </el-col>
<el-col class="assertion-btn"> <el-col style="width: 10%;min-width: 80px">
<el-tooltip :content="$t('test_resource_pool.enable_disable')" placement="top"> <el-tooltip :content="$t('test_resource_pool.enable_disable')" placement="top">
<el-switch <el-switch
v-model="data.enable" v-model="data.enable"
@ -103,7 +100,7 @@
</div> </div>
<div v-if="data.type === options.JSON_PATH" class="assertion-item-editing"> <div v-if="data.type === options.JSON_PATH" class="assertion-item-editing">
<el-row :gutter="10" type="flex" justify="space-between" align="middle"> <el-row :gutter="10" class="assertion-item-row">
<el-col class="ms-assertion-select"> <el-col class="ms-assertion-select">
<el-select <el-select
:disabled="true" :disabled="true"
@ -111,9 +108,6 @@
v-model="data.type" v-model="data.type"
:placeholder="$t('api_test.request.assertions.select_type')" :placeholder="$t('api_test.request.assertions.select_type')"
size="small"> size="small">
<el-option :label="$t('api_test.request.assertions.text')" :value="options.TEXT" />
<el-option :label="'JSONPath'" :value="options.JSON_PATH" />
<el-option :label="'XPath'" :value="options.XPATH2" />
</el-select> </el-select>
</el-col> </el-col>
<el-col> <el-col>
@ -125,12 +119,12 @@
show-word-limit show-word-limit
:placeholder="$t('api_test.request.extract.json_path_expression')" /> :placeholder="$t('api_test.request.extract.json_path_expression')" />
</el-col> </el-col>
<el-col> <el-col style="display: flex; align-items: center;">
<el-select <el-select
v-model="data.option" v-model="data.option"
class="ms-col-type" class="ms-col-type"
size="small" size="small"
style="width: 100px; margin-right: 10px" style="width: 120px; margin-right: 10px; min-width: 100px"
@change="reload"> @change="reload">
<el-option :label="$t('api_test.request.assertions.contains')" value="CONTAINS" /> <el-option :label="$t('api_test.request.assertions.contains')" value="CONTAINS" />
<el-option :label="$t('api_test.request.assertions.not_contains')" value="NOT_CONTAINS" /> <el-option :label="$t('api_test.request.assertions.not_contains')" value="NOT_CONTAINS" />
@ -146,7 +140,7 @@
size="small" size="small"
show-word-limit show-word-limit
:placeholder="$t('api_test.request.assertions.expect')" :placeholder="$t('api_test.request.assertions.expect')"
style="width: 50%" /> />
<el-tooltip placement="top" v-if="data.option === 'REGEX'"> <el-tooltip placement="top" v-if="data.option === 'REGEX'">
<div slot="content"> <div slot="content">
{{ $t('api_test.request.assertions.regex_info') }} {{ $t('api_test.request.assertions.regex_info') }}
@ -154,7 +148,7 @@
<i class="el-icon-question" style="cursor: pointer" /> <i class="el-icon-question" style="cursor: pointer" />
</el-tooltip> </el-tooltip>
</el-col> </el-col>
<el-col class="assertion-btn"> <el-col style="width: 17%;min-width: 80px">
<el-tooltip :content="$t('test_resource_pool.enable_disable')" placement="top"> <el-tooltip :content="$t('test_resource_pool.enable_disable')" placement="top">
<el-switch <el-switch
v-model="data.enable" v-model="data.enable"
@ -175,7 +169,7 @@
</div> </div>
<div v-if="data.type === options.XPATH2" class="assertion-item-editing"> <div v-if="data.type === options.XPATH2" class="assertion-item-editing">
<el-row :gutter="10" type="flex" justify="space-between" align="middle"> <el-row :gutter="10" class="assertion-item-row">
<el-col class="ms-assertion-select"> <el-col class="ms-assertion-select">
<el-select <el-select
:disabled="true" :disabled="true"
@ -183,9 +177,6 @@
v-model="data.type" v-model="data.type"
:placeholder="$t('api_test.request.assertions.select_type')" :placeholder="$t('api_test.request.assertions.select_type')"
size="small"> size="small">
<el-option :label="$t('api_test.request.assertions.text')" :value="options.TEXT" />
<el-option :label="'JSONPath'" :value="options.JSON_PATH" />
<el-option :label="'XPath'" :value="options.XPATH2" />
</el-select> </el-select>
</el-col> </el-col>
<el-col> <el-col>
@ -197,7 +188,7 @@
show-word-limit show-word-limit
:placeholder="$t('api_test.request.extract.xpath_expression')" /> :placeholder="$t('api_test.request.extract.xpath_expression')" />
</el-col> </el-col>
<el-col class="assertion-btn"> <el-col style="width: 9%;min-width: 80px">
<el-tooltip :content="$t('test_resource_pool.enable_disable')" placement="top"> <el-tooltip :content="$t('test_resource_pool.enable_disable')" placement="top">
<el-switch <el-switch
v-model="data.enable" v-model="data.enable"
@ -349,7 +340,6 @@ export default {
<style scoped> <style scoped>
.ms-assertion-item { .ms-assertion-item {
width: 100%; width: 100%;
height: 32px;
} }
.ms-top-line-box { .ms-top-line-box {
@ -370,6 +360,11 @@ export default {
margin-top: 10px; margin-top: 10px;
} }
.assertion-item-row {
display: flex;
align-items: center;
}
:deep(.ms-assertion-select) { :deep(.ms-assertion-select) {
width: 140px; width: 140px;
} }
@ -377,8 +372,4 @@ export default {
.enable-switch { .enable-switch {
margin-right: 10px; margin-right: 10px;
} }
.assertion-btn {
width: 60px;
}
</style> </style>