style(接口测试): 统一接口定义和接口自动化 Tab 添加样式
This commit is contained in:
fit2-zhao
parent
6d6853101b
commit
7766db552c
|
|
@ -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>
|
||||
|
|
@ -48,16 +55,16 @@
|
|||
|
||||
<script>
|
||||
|
||||
import MsContainer from "@/business/components/common/components/MsContainer";
|
||||
import MsAsideContainer from "@/business/components/common/components/MsAsideContainer";
|
||||
import MsMainContainer from "@/business/components/common/components/MsMainContainer";
|
||||
import MsApiScenarioList from "@/business/components/api/automation/scenario/ApiScenarioList";
|
||||
import {getUUID} from "@/common/js/utils";
|
||||
import MsApiScenarioModule from "@/business/components/api/automation/scenario/ApiScenarioModule";
|
||||
import MsEditApiScenario from "./scenario/EditApiScenario";
|
||||
import {getCurrentProjectID} from "../../../../common/js/utils";
|
||||
import MsContainer from "@/business/components/common/components/MsContainer";
|
||||
import MsAsideContainer from "@/business/components/common/components/MsAsideContainer";
|
||||
import MsMainContainer from "@/business/components/common/components/MsMainContainer";
|
||||
import MsApiScenarioList from "@/business/components/api/automation/scenario/ApiScenarioList";
|
||||
import {getUUID} from "@/common/js/utils";
|
||||
import MsApiScenarioModule from "@/business/components/api/automation/scenario/ApiScenarioModule";
|
||||
import MsEditApiScenario from "./scenario/EditApiScenario";
|
||||
import {getCurrentProjectID} from "../../../../common/js/utils";
|
||||
|
||||
export default {
|
||||
export default {
|
||||
name: "ApiAutomation",
|
||||
components: {
|
||||
MsApiScenarioModule,
|
||||
|
|
@ -104,18 +111,18 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
checkRedirectEditPage(redirectParam) {
|
||||
if(redirectParam!=null){
|
||||
if (redirectParam != null) {
|
||||
let selectParamArr = redirectParam.split("edit:");
|
||||
if (selectParamArr.length == 2) {
|
||||
let scenarioId = selectParamArr[1];
|
||||
let projectId = getCurrentProjectID();
|
||||
//查找单条数据，跳转修改页面
|
||||
let url = "/api/automation/list/" + 1 + "/" + 1;
|
||||
this.$post(url, {id:scenarioId,projectId:projectId}, response => {
|
||||
this.$post(url, {id: scenarioId, projectId: projectId}, response => {
|
||||
let data = response.data;
|
||||
if(data!=null){
|
||||
if (data != null) {
|
||||
//如果树未加载
|
||||
if(JSON.stringify(this.moduleOptions) === '{}' ){
|
||||
if (JSON.stringify(this.moduleOptions) === '{}') {
|
||||
this.$refs.nodeTree.list();
|
||||
}
|
||||
let row = data.listObject[0];
|
||||
|
|
@ -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) {
|
||||
|
|
@ -191,7 +216,7 @@ export default {
|
|||
this.trashEnable = data;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -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,31 +86,45 @@
|
|||
@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>
|
||||
</template>
|
||||
<script>
|
||||
import MsApiList from './components/list/ApiList';
|
||||
import MsContainer from "../../common/components/MsContainer";
|
||||
import MsMainContainer from "../../common/components/MsMainContainer";
|
||||
import MsAsideContainer from "../../common/components/MsAsideContainer";
|
||||
import MsApiConfig from "./components/ApiConfig";
|
||||
import MsDebugHttpPage from "./components/debug/DebugHttpPage";
|
||||
import MsDebugJdbcPage from "./components/debug/DebugJdbcPage";
|
||||
import MsDebugTcpPage from "./components/debug/DebugTcpPage";
|
||||
import MsDebugDubboPage from "./components/debug/DebugDubboPage";
|
||||
import MsApiList from './components/list/ApiList';
|
||||
import MsContainer from "../../common/components/MsContainer";
|
||||
import MsMainContainer from "../../common/components/MsMainContainer";
|
||||
import MsAsideContainer from "../../common/components/MsAsideContainer";
|
||||
import MsApiConfig from "./components/ApiConfig";
|
||||
import MsDebugHttpPage from "./components/debug/DebugHttpPage";
|
||||
import MsDebugJdbcPage from "./components/debug/DebugJdbcPage";
|
||||
import MsDebugTcpPage from "./components/debug/DebugTcpPage";
|
||||
import MsDebugDubboPage from "./components/debug/DebugDubboPage";
|
||||
|
||||
import MsRunTestHttpPage from "./components/runtest/RunTestHTTPPage";
|
||||
import MsRunTestTcpPage from "./components/runtest/RunTestTCPPage";
|
||||
import MsRunTestSqlPage from "./components/runtest/RunTestSQLPage";
|
||||
import MsRunTestDubboPage from "./components/runtest/RunTestDubboPage";
|
||||
import {downloadFile, getCurrentUser, getUUID, getCurrentProjectID} from "@/common/js/utils";
|
||||
import MsApiModule from "./components/module/ApiModule";
|
||||
import ApiCaseSimpleList from "./components/list/ApiCaseSimpleList";
|
||||
import {PROJECT_NAME} from "../../../../common/js/constants";
|
||||
import MsRunTestHttpPage from "./components/runtest/RunTestHTTPPage";
|
||||
import MsRunTestTcpPage from "./components/runtest/RunTestTCPPage";
|
||||
import MsRunTestSqlPage from "./components/runtest/RunTestSQLPage";
|
||||
import MsRunTestDubboPage from "./components/runtest/RunTestDubboPage";
|
||||
import {downloadFile, getCurrentUser, getUUID, getCurrentProjectID} from "@/common/js/utils";
|
||||
import MsApiModule from "./components/module/ApiModule";
|
||||
import ApiCaseSimpleList from "./components/list/ApiCaseSimpleList";
|
||||
import {PROJECT_NAME} from "../../../../common/js/constants";
|
||||
|
||||
export default {
|
||||
export default {
|
||||
name: "ApiDefinition",
|
||||
computed: {
|
||||
queryDataType: function () {
|
||||
|
|
@ -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":
|
||||
|
|
@ -366,45 +373,33 @@ export default {
|
|||
this.trashEnable = data;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</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 {
|
||||
.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 {
|
||||
/deep/ .el-main {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .el-card {
|
||||
/deep/ .el-tabs__header {
|
||||
margin: 0 0 0px;
|
||||
/*width: calc(100% - 90px);*/
|
||||
}
|
||||
|
||||
/deep/ .el-card {
|
||||
/*border: 1px solid #EBEEF5;*/
|
||||
/*border-style: none;*/
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .api-component {
|
||||
/deep/ .api-component {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue