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

style(接口测试): 统一接口定义和接口自动化 Tab 添加样式

This commit is contained in:
fit2-zhao 2021-01-18 14:22:14 +08:00
parent 6d6853101b
commit 7766db552c
2 changed files with 448 additions and 428 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/src/business/components/api/automation/ApiAutomation.vue
View File

@ -38,7 +38,14 @@
<el-tab-pane name="add">
<template v-slot:label>
<el-dropdown @command="handleCommand" v-tester>
<el-button type="primary" plain icon="el-icon-plus" size="mini" v-tester/>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="ADD">{{ $t('api_test.definition.request.title') }}</el-dropdown-item>
<el-dropdown-item command="CLOSE_ALL">{{ $t('api_test.definition.request.close_all_label') }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-tab-pane>
</el-tabs>
@ -148,6 +155,24 @@ export default {
this.tabs.push({label: label, name: name, currentScenario: tab.currentScenario});
}
},
handleTabClose() {
this.tabs = [];
this.activeName = "default";
this.refresh();
},
handleCommand(e) {
switch (e) {
case "ADD":
this.addTab({name: 'add'});
break;
case "CLOSE_ALL":
this.handleTabClose();
break;
default:
this.addTab({name: 'add'});
break;
}
},
removeTab(targetName) {
this.tabs = this.tabs.filter(tab => tab.name !== targetName);
if (this.tabs.length > 0) {

55
frontend/src/business/components/api/definition/ApiDefinition.vue
View File

@ -15,20 +15,8 @@
</ms-aside-container>
<ms-main-container>
<el-dropdown size="small" split-button type="primary" class="ms-api-buttion"
@click="handleCommand('ADD')"
@command="handleCommand" v-tester>
{{ $t('commons.add') }}
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="debug">{{ $t('api_test.definition.request.fast_debug') }}</el-dropdown-item>
<el-dropdown-item command="ADD">{{ $t('api_test.definition.request.title') }}</el-dropdown-item>
<el-dropdown-item command="CLOSE_ALL">{{ $t('api_test.definition.request.close_all_label') }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<!-- 主框架列表 -->
<el-tabs v-model="apiDefaultTab" @edit="handleTabRemove">
<el-tabs v-model="apiDefaultTab" @edit="handleTabRemove" @tab-click="addTab">
<el-tab-pane v-for="(item) in apiTabs"
:key="item.name"
:label="item.title"
@ -98,6 +86,20 @@
@refresh="refresh" v-if="currentProtocol==='DUBBO'"/>
</div>
</el-tab-pane>
<el-tab-pane name="add">
<template v-slot:label>
<el-dropdown @command="handleCommand" v-tester>
<el-button type="primary" plain icon="el-icon-plus" size="mini" v-tester/>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="debug">{{ $t('api_test.definition.request.fast_debug') }}</el-dropdown-item>
<el-dropdown-item command="ADD">{{ $t('api_test.definition.request.title') }}</el-dropdown-item>
<el-dropdown-item command="CLOSE_ALL">{{ $t('api_test.definition.request.close_all_label') }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-tab-pane>
</el-tabs>
</ms-main-container>
</ms-container>
@ -204,6 +206,11 @@ export default {
isApiListEnableChange(data) {
this.isApiListEnable = data;
},
addTab(tab) {
if (tab.name === 'add') {
this.handleCommand("ADD");
}
},
handleCommand(e) {
switch (e) {
case "ADD":
@ -370,33 +377,21 @@ export default {
</script>
<style scoped>
.ms-api-buttion {
position: absolute;
top: 100px;
right: 4px;
padding: 0;
background: 0 0;
border: none;
outline: 0;
cursor: pointer;
margin-right: 10px;
font-size: 16px;
}
.ms-api-div {
overflow-y: auto;
height: calc(100vh - 155px)
}
/deep/ .el-tabs__header {
margin: 0 0 5px;
width: calc(100% - 90px);
}
/deep/ .el-main {
overflow: hidden;
}
/deep/ .el-tabs__header {
margin: 0 0 0px;
/*width: calc(100% - 90px);*/
}
/deep/ .el-card {
/*border: 1px solid #EBEEF5;*/
/*border-style: none;*/