refactor(接口测试): 优化dubbo调试页面样式 (#11786)

--bug=1011521 --user=王孝刚
【接口测试】dubbo协议-api-test-增加前置操作后-断言规则tab页显示隐藏-需要点击右侧的>才能看到
https://www.tapd.cn/55049933/s/1123428

Co-authored-by: wxg0103 <727495428@qq.com>
This commit is contained in:
metersphere-bot 2022-03-22 17:42:04 +08:00 committed by GitHub
parent ccf5f03309
commit 947d372038
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 42 additions and 37 deletions

View File

@ -63,34 +63,34 @@
</el-tab-pane> </el-tab-pane>
<!-- 脚本步骤/断言步骤 --> <!-- 脚本步骤/断言步骤 -->
<el-tab-pane :label="$t('api_test.definition.request.pre_operation')" name="preOperate" v-if="showScript"> <el-tab-pane :label="$t('api_test.definition.request.pre_operation')" name="preOperate" v-if="showScript">
<span class="item-tabs" effect="dark" placement="top-start" slot="label"> <span class="item-tabs" effect="dark" placement="top-start" slot="label">
{{ $t('api_test.definition.request.pre_operation') }} {{ $t('api_test.definition.request.pre_operation') }}
<div class="el-step__icon is-text ms-api-col ms-header" v-if="request.preSize > 0"> <div class="el-step__icon is-text ms-api-col ms-header" v-if="request.preSize > 0">
<div class="el-step__icon-inner">{{ request.preSize }}</div> <div class="el-step__icon-inner">{{ request.preSize }}</div>
</div> </div>
</span> </span>
<ms-jmx-step :request="request" :apiId="request.id" :response="response" :tab-type="'pre'" <ms-jmx-step :request="request" :apiId="request.id" :response="response" :tab-type="'pre'"
ref="preStep"/> ref="preStep"/>
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('api_test.definition.request.post_operation')" name="postOperate" <el-tab-pane :label="$t('api_test.definition.request.post_operation')" name="postOperate"
v-if="showScript"> v-if="showScript">
<span class="item-tabs" effect="dark" placement="top-start" slot="label"> <span class="item-tabs" effect="dark" placement="top-start" slot="label">
{{ $t('api_test.definition.request.post_operation') }} {{ $t('api_test.definition.request.post_operation') }}
<div class="el-step__icon is-text ms-api-col ms-header" v-if="request.postSize > 0"> <div class="el-step__icon is-text ms-api-col ms-header" v-if="request.postSize > 0">
<div class="el-step__icon-inner">{{ request.postSize }}</div> <div class="el-step__icon-inner">{{ request.postSize }}</div>
</div> </div>
</span> </span>
<ms-jmx-step :request="request" :apiId="request.id" :response="response" :tab-type="'post'" <ms-jmx-step :request="request" :apiId="request.id" :response="response" :tab-type="'post'"
ref="postStep"/> ref="postStep"/>
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('api_test.definition.request.assertions_rule')" name="assertionsRule" <el-tab-pane :label="$t('api_test.definition.request.assertions_rule')" name="assertionsRule"
v-if="showScript"> v-if="showScript">
<span class="item-tabs" effect="dark" placement="top-start" slot="label"> <span class="item-tabs" effect="dark" placement="top-start" slot="label">
{{ $t('api_test.definition.request.assertions_rule') }} {{ $t('api_test.definition.request.assertions_rule') }}
<div class="el-step__icon is-text ms-api-col ms-header" v-if="request.ruleSize > 0"> <div class="el-step__icon is-text ms-api-col ms-header" v-if="request.ruleSize > 0">
<div class="el-step__icon-inner">{{ request.ruleSize }}</div> <div class="el-step__icon-inner">{{ request.ruleSize }}</div>
</div> </div>
</span> </span>
<ms-jmx-step :request="request" :apiId="request.id" :response="response" @reload="reloadBody" <ms-jmx-step :request="request" :apiId="request.id" :response="response" @reload="reloadBody"
:tab-type="'assertionsRule'" ref="assertionsRule"/> :tab-type="'assertionsRule'" ref="assertionsRule"/>
</el-tab-pane> </el-tab-pane>

View File

@ -4,7 +4,8 @@
<el-col :span="spanNum" style="padding-bottom: 20px"> <el-col :span="spanNum" style="padding-bottom: 20px">
<div style="border:1px #DCDFE6 solid; height: 100%;border-radius: 4px ;width: 100% ;"> <div style="border:1px #DCDFE6 solid; height: 100%;border-radius: 4px ;width: 100% ;">
<el-form :model="request" ref="request" label-width="100px" :disabled="isReadOnly" style="margin: 10px"> <el-form :model="request" ref="request" label-width="100px" :disabled="isReadOnly" style="margin: 10px"
class="ms-el-tabs__nav-scroll">
<el-form-item :label="$t('api_test.request.dubbo.protocol')" prop="protocol"> <el-form-item :label="$t('api_test.request.dubbo.protocol')" prop="protocol">
<el-select v-model="request.protocol" size="small"> <el-select v-model="request.protocol" size="small">
@ -39,38 +40,37 @@
<!-- 脚本步骤/断言步骤 --> <!-- 脚本步骤/断言步骤 -->
<el-tab-pane :label="$t('api_test.definition.request.pre_operation')" name="preOperate" v-if="showScript"> <el-tab-pane :label="$t('api_test.definition.request.pre_operation')" name="preOperate" v-if="showScript">
<span class="item-tabs" effect="dark" placement="top-start" slot="label"> <span class="item-tabs" effect="dark" placement="top-start" slot="label">
{{ $t('api_test.definition.request.pre_operation') }} {{ $t('api_test.definition.request.pre_operation') }}
<div class="el-step__icon is-text ms-api-col ms-header" v-if="request.preSize > 0"> <div class="el-step__icon is-text ms-api-col ms-header" v-if="request.preSize > 0">
<div class="el-step__icon-inner">{{ request.preSize }}</div> <div class="el-step__icon-inner">{{ request.preSize }}</div>
</div> </div>
</span> </span>
<ms-jmx-step :request="request" :apiId="request.id" :response="response" :tab-type="'pre'" <ms-jmx-step :request="request" :apiId="request.id" :response="response" :tab-type="'pre'"
ref="preStep"/> ref="preStep"/>
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('api_test.definition.request.post_operation')" name="postOperate" <el-tab-pane :label="$t('api_test.definition.request.post_operation')" name="postOperate"
v-if="showScript"> v-if="showScript">
<span class="item-tabs" effect="dark" placement="top-start" slot="label"> <span class="item-tabs" effect="dark" placement="top-start" slot="label">
{{ $t('api_test.definition.request.post_operation') }} {{ $t('api_test.definition.request.post_operation') }}
<div class="el-step__icon is-text ms-api-col ms-header" v-if="request.postSize > 0"> <div class="el-step__icon is-text ms-api-col ms-header" v-if="request.postSize > 0">
<div class="el-step__icon-inner">{{ request.postSize }}</div> <div class="el-step__icon-inner">{{ request.postSize }}</div>
</div> </div>
</span> </span>
<ms-jmx-step :request="request" :apiId="request.id" :response="response" :tab-type="'post'" <ms-jmx-step :request="request" :apiId="request.id" :response="response" :tab-type="'post'"
ref="postStep"/> ref="postStep"/>
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('api_test.definition.request.assertions_rule')" name="assertionsRule" <el-tab-pane :label="$t('api_test.definition.request.assertions_rule')" name="assertionsRule"
v-if="showScript"> v-if="showScript">
<span class="item-tabs" effect="dark" placement="top-start" slot="label"> <span class="item-tabs" effect="dark" placement="top-start" slot="label">
{{ $t('api_test.definition.request.assertions_rule') }} {{ $t('api_test.definition.request.assertions_rule') }}
<div class="el-step__icon is-text ms-api-col ms-header" v-if="request.ruleSize > 0"> <div class="el-step__icon is-text ms-api-col ms-header" v-if="request.ruleSize > 0">
<div class="el-step__icon-inner">{{ request.ruleSize }}</div> <div class="el-step__icon-inner">{{ request.ruleSize }}</div>
</div> </div>
</span> </span>
<ms-jmx-step :request="request" :apiId="request.id" :response="response" @reload="reloadBody" <ms-jmx-step :request="request" :apiId="request.id" :response="response" @reload="reloadBody"
:tab-type="'assertionsRule'" ref="assertionsRule"/> :tab-type="'assertionsRule'" ref="assertionsRule"/>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</el-form> </el-form>
@ -248,4 +248,9 @@
/deep/ .el-form-item { /deep/ .el-form-item {
margin-bottom: 15px; margin-bottom: 15px;
} }
.ms-el-tabs__nav-scroll >>> .el-tabs__nav-scroll {
width: calc(100% - 10px);
}
</style> </style>