test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(接口测试): 步骤较多时，点击步骤的输出，页面会自动滚动 

--bug=1028094 --user=白奇 【接口测试】github#25757，步骤较多时，点击步骤的输出，页面会自动滚动 https://www.tapd.cn/55049933/s/1397206
This commit is contained in:
baiqi 2023-07-25 15:24:48 +08:00 committed by fit2-zhao
parent 177016932e
commit 848a3589ed
2 changed files with 72 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
api-test/frontend/src/business/definition/components/body/ApiBody.vue
View File

@ -27,7 +27,9 @@
</el-radio-group>
<div v-if="body.type == 'Form Data' || body.type == 'WWW_FORM'">
<el-row v-if="body.type == 'Form Data' || body.type == 'WWW_FORM'" class="ms-el-link">
<el-link style="margin-right: 5px" @click="batchAdd" :disabled="isReadOnly"> {{ $t('commons.batch_add') }}</el-link>
<el-link style="margin-right: 5px" @click="batchAdd" :disabled="isReadOnly">
{{ $t('commons.batch_add') }}</el-link
>
<api-params-config
v-if="apiParamsConfigFields"
@refresh="refreshApiParamsField"
@ -104,7 +106,7 @@ import BatchAddParameter from '../basis/BatchAddParameter';
import Convert from '@/business/commons/json-schema/convert/convert';
import { getApiParamsConfigFields } from 'metersphere-frontend/src/utils/custom_field';
import ApiParamsConfig from '@/business/definition/components/request/components/ApiParamsConfig';
import {jsonParse, trimAll} from '@/business/commons/json-schema/convert/jsonParse'
import { jsonParse, trimAll } from '@/business/commons/json-schema/convert/jsonParse';
export default {
name: 'MsApiBody',
@ -167,6 +169,29 @@ export default {
'body.typeChange'() {
this.reloadCodeEdit();
},
'body.type': {
handler() {
setTimeout(() => {
// 展开动画大概是 300ms 左右，使视觉效果更流畅
if (this.body.format === 'JSON-SCHEMA') {
this.$refs.jsonCodeEdit?.$el.querySelector('.ace_text-input')?.focus();
this.$refs.jsonCodeEdit?.$parent?.$parent?.$parent?.$parent?.$parent.$el.scrollIntoView({
behavior: 'smooth',
block: 'start',
inline: 'center',
});
} else if (this.codeEditActive) {
this.$refs.codeEdit?.$el.querySelector('.ace_text-input')?.focus();
this.$refs.codeEdit?.$parent?.$parent?.$parent?.$parent?.$parent?.$el.scrollIntoView({
behavior: 'smooth',
block: 'start',
inline: 'center',
});
}
}, 300);
},
immediate: true,
},
},
methods: {
refreshApiParamsField() {
@ -257,7 +282,7 @@ export default {
if (this.body.format === 'JSON-SCHEMA') {
if (this.body.raw) {
try {
const tmpObj = jsonParse(this.body.raw)
const tmpObj = jsonParse(this.body.raw);
this.body.jsonSchema = MsConvert.format(tmpObj);
} catch (e) {
this.body.format = 'JSON';
@ -266,15 +291,15 @@ export default {
}
} else {
if (this.body.jsonSchema) {
MsConvert.schemaToJsonStr(this.body.jsonSchema, (result) => {
if (result === 'Error') {
this.body.format = 'JSON-SCHEMA';
this.$message.error(this.$t('api_definition.body.json_format_error_tips'));
} else {
this.$set(this.body, 'raw', result);
this.reloadCodeEdit();
}
})
MsConvert.schemaToJsonStr(this.body.jsonSchema, (result) => {
if (result === 'Error') {
this.body.format = 'JSON-SCHEMA';
this.$message.error(this.$t('api_definition.body.json_format_error_tips'));
} else {
this.$set(this.body, 'raw', result);
this.reloadCodeEdit();
}
});
}
}
},
@ -354,7 +379,7 @@ export default {
params.forEach((item) => {
if (item) {
let line = item.split(/：|:/);
let values = item.substr(line[0].length +1).trim();
let values = item.substr(line[0].length + 1).trim();
let required = false;
keyValues.push(
new KeyValue({

41
api-test/frontend/src/business/definition/components/response/ResponseResult.vue
View File

@ -18,6 +18,7 @@
:mode="'text'"
:read-only="true"
:data.sync="responseResult.headers"
ref="codeEdit"
v-if="activeName === 'headers'" />
</el-tab-pane>
@ -26,6 +27,7 @@
:mode="'text'"
:read-only="true"
:data.sync="responseResult.console"
ref="codeEdit"
v-if="activeName === 'console'"
height="calc(100vh - 300px)" />
</el-tab-pane>
@ -35,6 +37,7 @@
:mode="'text'"
:read-only="true"
:data.sync="responseResult.console"
ref="codeEdit"
v-if="activeName === 'console'" />
</el-tab-pane>
@ -43,11 +46,21 @@
</el-tab-pane>
<el-tab-pane :label="$t('api_test.request.extract.label')" name="label" class="pane">
<ms-code-edit :mode="'text'" :read-only="true" :data.sync="responseResult.vars" v-if="activeName === 'label'" />
<ms-code-edit
:mode="'text'"
:read-only="true"
:data.sync="responseResult.vars"
v-if="activeName === 'label'"
ref="codeEdit" />
</el-tab-pane>
<el-tab-pane :label="$t('api_report.request_body')" name="request_body" class="pane">
<ms-code-edit :mode="'text'" :read-only="true" :data.sync="reqMessages" v-if="activeName === 'request_body'" />
<ms-code-edit
:mode="'text'"
:read-only="true"
:data.sync="reqMessages"
v-if="activeName === 'request_body'"
ref="codeEdit" />
</el-tab-pane>
<el-tab-pane v-if="activeName == 'body'" :disabled="true" name="mode" class="pane cookie">
@ -108,6 +121,20 @@ export default {
this.setBodyType();
this.setReqMessage();
},
activeName: {
handler() {
setTimeout(() => {
// 展开动画大概是 300ms 左右，使视觉效果更流畅
this.$refs.codeEdit?.$el.querySelector('.ace_text-input')?.focus();
this.$refs.codeEdit?.$parent?.$parent?.$parent?.$parent?.$parent?.$el.scrollIntoView({
behavior: 'smooth',
block: 'center',
inline: 'center',
});
}, 300);
},
immediate: true,
},
},
methods: {
modeChange(mode) {
@ -183,11 +210,11 @@ export default {
computed: {
isSqlType() {
return (
this.currentProtocol === 'SQL'
&& this.response
&& this.response.responseResult
&& this.response.responseResult.responseCode === '200'
&& this.mode === 'table'
this.currentProtocol === 'SQL' &&
this.response &&
this.response.responseResult &&
this.response.responseResult.responseCode === '200' &&
this.mode === 'table'
);
},
responseResult() {