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

style(接口测试): 统一场景步骤二级显示样式 

--bug=1011446 --user=赵勇 【接口测试】场景步骤展开的时候，二级步骤会和一级步骤一样齐 https://www.tapd.cn/55049933/s/1121762
This commit is contained in:
fit2-zhao 2022-03-21 11:24:56 +08:00 committed by xiaomeinvG
parent b84ae8a772
commit b1689a6bce
11 changed files with 120 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
View File

@ -169,17 +169,17 @@
@check-change="chooseHeadsUp"
@node-drag-end="allowDrag" @node-click="nodeClick" draggable ref="stepTree">
<el-row class="custom-tree-node" :gutter="18" type="flex" align="middle" slot-scope="{node, data}" style="width: 100%">
<el-col class="custom-tree-node-col" style="padding-left:0px;padding-right:0px" v-show="node && data.hashTree && data.hashTree.length > 0 && !data.isLeaf">
<el-row class="custom-tree-node" :gutter="10" type="flex" align="middle" slot-scope="{node, data}" style="width: 100%">
<span class="custom-tree-node-col" style="padding-left:0px;padding-right:0px" v-show="node && data.hashTree && data.hashTree.length > 0 && !data.isLeaf">
<span v-show="!node.expanded" class="el-icon-circle-plus-outline custom-node_e" @click="openOrClose(node)"/>
<span v-show="node.expanded" class="el-icon-remove-outline custom-node_e" @click="openOrClose(node)"/>
</el-col>
</span>
<!-- 批量操作 -->
<el-col :class="data.checkBox? 'custom-tree-node-hide' : 'custom-tree-node-col'" style="padding-left: 0px; padding-right: 0px;"
<span :class="data.checkBox? 'custom-tree-node-hide' : 'custom-tree-node-col'" style="padding-left: 0px; padding-right: 0px;"
v-show="(data.hashTree && data.hashTree.length === 0 )|| data.isLeaf">
<show-more-btn :is-show="node.checked" :buttons="batchOperators" :size="selectDataCounts" v-show="data.checkBox" style="margin-right: 3px"/>
</el-col>
<el-col>
</span>
<span style="width: calc(100% - 40px);">
<!-- 步骤组件-->
<ms-component-config
:scenario-definition="scenarioDefinition"
@ -209,7 +209,7 @@
<div v-else class="el-tree-node is-hidden is-focusable is-leaf" style="display: none;">
{{ hideNode(node) }}
</div>
</el-col>
</span>
</el-row>
</el-tree>
</div>

3
frontend/src/business/components/api/automation/scenario/common/ApiBaseComponent.vue
View File

@ -42,7 +42,8 @@
<el-button v-if="showVersion" size="mini" icon="el-icon-copy-document" circle @click="copyRow" style="padding: 5px"
:disabled="(data.disabled && !data.root) || !showVersion "/>
<el-button v-show="isSingleButton" size="mini" icon="el-icon-delete" type="danger" style="padding: 5px" circle @click="remove"/>
<el-button v-show="isSingleButton" size="mini" icon="el-icon-delete" type="danger" style="padding: 5px" circle @click="remove"
:disabled="(data.disabled && !data.root) || !showVersion "/>
<step-extend-btns style="display: contents"
:data="data"
:environmentType="environmentType"

87
frontend/src/business/components/api/definition/components/assertion/ApiAssertionDuration.vue
View File

@ -5,9 +5,9 @@
<el-input :disabled="isReadOnly" :value="value" v-bind="$attrs" step="100" size="small" type="number" @change="change" @input="input" :min="0"
:placeholder="$t('api_test.request.assertions.response_in_time')"/>
</el-col>
<el-col class="assertion-btn">
<el-col :class="edit?'assertion-remove-btn': 'assertion-btn'">
<el-button :disabled="isReadOnly" type="danger" size="mini" icon="el-icon-delete" circle @click="remove" v-if="edit"/>
<el-button :disabled="isReadOnly" type="primary" size="small" @click="add" v-else>
<el-button :disabled="isReadOnly" type="primary" size="mini" @click="add" v-else>
{{ $t('api_test.request.assertions.add') }}
</el-button>
</el-col>
@ -17,53 +17,58 @@
<script>
export default {
name: "MsApiAssertionDuration",
export default {
name: "MsApiAssertionDuration",
props: {
value: [Number, String],
duration: {},
edit: Boolean,
callback: Function,
isReadOnly: {
type: Boolean,
default: false
props: {
value: [Number, String],
duration: {},
edit: Boolean,
callback: Function,
isReadOnly: {
type: Boolean,
default: false
}
},
methods: {
add() {
if (this.validate()) {
this.duration.value = this.value;
this.callback();
}
},
remove() {
this.duration.value = undefined;
methods: {
add() {
if (this.validate()) {
this.duration.value = this.value;
this.callback();
}
},
remove() {
this.duration.value = undefined;
},
change(value) {
if (this.validate()) {
this.$emit('change', value);
}
},
input(value) {
this.$emit('input', value);
},
validate() {
if (this.value == '' || Number(this.value) <= 0) {
this.$error(this.$t('commons.formatErr'));
return false;
}
return true;
},
change(value) {
if (this.validate()) {
this.$emit('change', value);
}
},
input(value) {
this.$emit('input', value);
},
validate() {
if (this.value == '' || Number(this.value) <= 0) {
this.$error(this.$t('commons.formatErr'));
return false;
}
return true;
}
}
}
</script>
<style scoped>
.assertion-btn {
text-align: center;
width: 40px;
}
.assertion-remove-btn {
text-align: center;
width: 40px;
}
.assertion-btn {
text-align: center;
width: 80px;
}
</style>

2
frontend/src/business/components/api/definition/components/assertion/ApiAssertionJsonPath.vue
View File

@ -24,7 +24,7 @@
</el-col>
<el-col class="assertion-btn">
<el-button :disabled="isReadOnly" type="danger" size="mini" icon="el-icon-delete" circle @click="remove" v-if="edit"/>
<el-button :disabled="isReadOnly" type="primary" size="small" @click="add" v-else>
<el-button :disabled="isReadOnly" type="primary" size="mini" @click="add" v-else>
{{ $t('api_test.request.assertions.add') }}
</el-button>
</el-col>

8
frontend/src/business/components/api/definition/components/assertion/ApiAssertionRegex.vue
View File

@ -18,10 +18,10 @@
{{ $t('api_test.request.assertions.ignore_status') }}
</el-checkbox>
</el-col>
<el-col class="assertion-btn">
<el-col :class="edit?'assertion-remove-btn':'assertion-btn'">
<el-button :disabled="isReadOnly" type="danger" size="mini" icon="el-icon-delete" circle @click="remove"
v-if="edit"/>
<el-button :disabled="isReadOnly" type="primary" size="small" @click="add" v-else>
<el-button :disabled="isReadOnly" type="primary" size="mini" @click="add" v-else>
{{ $t('api_test.request.assertions.add') }}
</el-button>
</el-col>
@ -104,6 +104,10 @@ export default {
}
.assertion-btn {
text-align: center;
width: 80px;
}
.assertion-remove-btn {
text-align: center;
width: 50px;
}

2
frontend/src/business/components/api/definition/components/assertion/ApiAssertionText.vue
View File

@ -29,7 +29,7 @@
</el-checkbox>
</el-col>
<el-col class="assertion-btn">
<el-button :disabled="isReadOnly" type="primary" size="small" @click="add">
<el-button :disabled="isReadOnly" type="primary" size="mini" @click="add">
{{ $t('api_test.request.assertions.add') }}
</el-button>
</el-col>

91
frontend/src/business/components/api/definition/components/assertion/ApiAssertionXPath2.vue
View File

@ -5,9 +5,9 @@
<el-input :disabled="isReadOnly" v-model="xPath2.expression" maxlength="500" size="small" show-word-limit
:placeholder="$t('api_test.request.extract.xpath_expression')"/>
</el-col>
<el-col class="assertion-btn">
<el-col :class="edit?'assertion-remove-btn':'assertion-btn'">
<el-button :disabled="isReadOnly" type="danger" size="mini" icon="el-icon-delete" circle @click="remove" v-if="edit"/>
<el-button :disabled="isReadOnly" type="primary" size="small" @click="add" v-else>
<el-button :disabled="isReadOnly" type="primary" size="mini" @click="add" v-else>
{{ $t('api_test.request.assertions.add') }}
</el-button>
</el-col>
@ -16,56 +16,61 @@
</template>
<script>
import {XPath2} from "../../model/ApiTestModel";
import {XPath2} from "../../model/ApiTestModel";
export default {
name: "MsApiAssertionXPath2",
export default {
name: "MsApiAssertionXPath2",
props: {
xPath2: {
default: () => {
return new XPath2();
}
},
edit: {
type: Boolean,
default: false
},
index: Number,
list: Array,
callback: Function,
isReadOnly: {
type: Boolean,
default: false
props: {
xPath2: {
default: () => {
return new XPath2();
}
},
methods: {
add: function () {
this.list.push(this.getXPath2());
this.callback();
},
remove: function () {
this.list.splice(this.index, 1);
},
getXPath2() {
return new XPath2(this.xPath2);
},
edit: {
type: Boolean,
default: false
},
index: Number,
list: Array,
callback: Function,
isReadOnly: {
type: Boolean,
default: false
}
},
methods: {
add: function () {
this.list.push(this.getXPath2());
this.callback();
},
remove: function () {
this.list.splice(this.index, 1);
},
getXPath2() {
return new XPath2(this.xPath2);
},
}
}
</script>
<style scoped>
.assertion-select {
width: 250px;
}
.assertion-select {
width: 250px;
}
.assertion-item {
width: 100%;
}
.assertion-item {
width: 100%;
}
.assertion-btn {
text-align: center;
width: 40px;
}
.assertion-btn {
text-align: center;
width: 80px;
}
.assertion-remove-btn {
text-align: center;
width: 40px;
}
</style>

3
frontend/src/business/components/api/definition/components/assertion/ApiAssertions.vue
View File

@ -6,6 +6,7 @@
<api-json-path-suggest-button
:open-tip="$t('api_test.request.assertions.json_path_suggest')"
:clear-tip="$t('api_test.request.assertions.json_path_clear')"
:isReadOnly="isReadOnly"
@open="suggestJsonOpen"
@clear="clearJson"/>
</span>
@ -69,7 +70,7 @@
:callback="after"
v-if="type === options.DOCUMENT"
/>
<el-button v-if="!type" :disabled="true" type="primary" size="small">
<el-button v-if="!type" :disabled="true" type="primary" size="mini">
{{ $t('api_test.request.assertions.add') }}
</el-button>
</el-col>

3
frontend/src/business/components/api/definition/components/assertion/ApiAssertionsEdit.vue
View File

@ -64,7 +64,8 @@
</el-col>
<el-col class="assertion-remove-btn">
<el-tooltip effect="dark" :content="$t('commons.remove')" placement="top-start">
<el-button icon="el-icon-delete" type="danger" size="mini" circle @click="remove()"/>
<el-button icon="el-icon-delete" type="danger" size="mini" circle @click="remove()"
:disabled="(assertions.disabled && !assertions.root)"/>
</el-tooltip>
</el-col>
</el-row>

6
frontend/src/business/components/api/definition/components/assertion/ApiJsonPathSuggestButton.vue
View File

@ -1,9 +1,9 @@
<template>
<span class="json-path-suggest-button">
<el-button size="mini" type="primary" @click="$emit('open')" @click.stop>
<el-button size="mini" type="primary" @click="$emit('open')" @click.stop :disabled="isReadOnly">
{{ openTip }}
</el-button>
<el-button size="mini" type="danger" @click="$emit('clear')">
<el-button size="mini" type="danger" @click="$emit('clear')" :disabled="isReadOnly">
{{ clearTip }}
</el-button>
</span>
@ -12,7 +12,7 @@
<script>
export default {
name: "ApiJsonPathSuggestButton",
props: ['openTip', 'clearTip']
props: ['openTip', 'clearTip','isReadOnly']
}
</script>

4
frontend/src/business/components/api/definition/components/step/JmxStep.vue
View File

@ -86,7 +86,7 @@
<!--提取规则-->
<ms-api-extract
:response="response"
:is-read-only="isReadOnly"
:is-read-only="data.disabled"
:extract="data"
@copyRow="copyRow"
@remove="remove"
@ -103,7 +103,7 @@
:response="response"
:request="request"
:apiId="apiId"
:is-read-only="isReadOnly"
:is-read-only="data.disabled"
:assertions="data"/>
</div>
</span>