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-button type="primary" plain icon="el-icon-plus" size="mini" v-tester/>
|
||||
<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,150 +55,168 @@
|
|||
|
||||
<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 {
|
||||
name: "ApiAutomation",
|
||||
components: {
|
||||
MsApiScenarioModule,
|
||||
MsApiScenarioList,
|
||||
MsMainContainer,
|
||||
MsAsideContainer,
|
||||
MsContainer,
|
||||
MsEditApiScenario
|
||||
},
|
||||
comments: {},
|
||||
computed: {
|
||||
checkRedirectID: function () {
|
||||
let redirectIDParam = this.$route.params.redirectID;
|
||||
this.changeRedirectParam(redirectIDParam);
|
||||
return redirectIDParam;
|
||||
export default {
|
||||
name: "ApiAutomation",
|
||||
components: {
|
||||
MsApiScenarioModule,
|
||||
MsApiScenarioList,
|
||||
MsMainContainer,
|
||||
MsAsideContainer,
|
||||
MsContainer,
|
||||
MsEditApiScenario
|
||||
},
|
||||
isRedirectEdit: function () {
|
||||
let redirectParam = this.$route.params.dataSelectRange;
|
||||
this.checkRedirectEditPage(redirectParam);
|
||||
return redirectParam;
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
redirectID: '',
|
||||
renderComponent: true,
|
||||
isHide: true,
|
||||
activeName: 'default',
|
||||
currentModule: null,
|
||||
moduleOptions: [],
|
||||
tabs: [],
|
||||
trashEnable: false,
|
||||
selectNodeIds: [],
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
redirectID() {
|
||||
this.renderComponent = false;
|
||||
this.$nextTick(() => {
|
||||
// 在 DOM 中添加 my-component 组件
|
||||
this.renderComponent = true;
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
checkRedirectEditPage(redirectParam) {
|
||||
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 => {
|
||||
let data = response.data;
|
||||
if(data!=null){
|
||||
//如果树未加载
|
||||
if(JSON.stringify(this.moduleOptions) === '{}' ){
|
||||
this.$refs.nodeTree.list();
|
||||
comments: {},
|
||||
computed: {
|
||||
checkRedirectID: function () {
|
||||
let redirectIDParam = this.$route.params.redirectID;
|
||||
this.changeRedirectParam(redirectIDParam);
|
||||
return redirectIDParam;
|
||||
},
|
||||
isRedirectEdit: function () {
|
||||
let redirectParam = this.$route.params.dataSelectRange;
|
||||
this.checkRedirectEditPage(redirectParam);
|
||||
return redirectParam;
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
redirectID: '',
|
||||
renderComponent: true,
|
||||
isHide: true,
|
||||
activeName: 'default',
|
||||
currentModule: null,
|
||||
moduleOptions: [],
|
||||
tabs: [],
|
||||
trashEnable: false,
|
||||
selectNodeIds: [],
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
redirectID() {
|
||||
this.renderComponent = false;
|
||||
this.$nextTick(() => {
|
||||
// 在 DOM 中添加 my-component 组件
|
||||
this.renderComponent = true;
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
checkRedirectEditPage(redirectParam) {
|
||||
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 => {
|
||||
let data = response.data;
|
||||
if (data != null) {
|
||||
//如果树未加载
|
||||
if (JSON.stringify(this.moduleOptions) === '{}') {
|
||||
this.$refs.nodeTree.list();
|
||||
}
|
||||
let row = data.listObject[0];
|
||||
row.tags = JSON.parse(row.tags);
|
||||
this.editScenario(row);
|
||||
}
|
||||
let row = data.listObject[0];
|
||||
row.tags = JSON.parse(row.tags);
|
||||
this.editScenario(row);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
changeRedirectParam(redirectIDParam) {
|
||||
this.redirectID = redirectIDParam;
|
||||
},
|
||||
addTab(tab) {
|
||||
if (!getCurrentProjectID()) {
|
||||
this.$warning(this.$t('commons.check_project_tip'));
|
||||
return;
|
||||
}
|
||||
if (tab.name === 'add') {
|
||||
let label = this.$t('api_test.automation.add_scenario');
|
||||
let name = getUUID().substring(0, 8);
|
||||
this.activeName = name;
|
||||
this.tabs.push({label: label, name: name, currentScenario: {apiScenarioModuleId: "", id: getUUID()}});
|
||||
}
|
||||
if (tab.name === 'edit') {
|
||||
let label = this.$t('api_test.automation.add_scenario');
|
||||
let name = getUUID().substring(0, 8);
|
||||
this.activeName = name;
|
||||
label = tab.currentScenario.name;
|
||||
this.tabs.push({label: label, name: name, currentScenario: tab.currentScenario});
|
||||
}
|
||||
},
|
||||
removeTab(targetName) {
|
||||
this.tabs = this.tabs.filter(tab => tab.name !== targetName);
|
||||
if (this.tabs.length > 0) {
|
||||
this.activeName = this.tabs[this.tabs.length - 1].name;
|
||||
} else {
|
||||
this.activeName = "default"
|
||||
}
|
||||
},
|
||||
setTabLabel(data) {
|
||||
for (const tab of this.tabs) {
|
||||
if (tab.name === this.activeName) {
|
||||
tab.label = data.name;
|
||||
break;
|
||||
},
|
||||
changeRedirectParam(redirectIDParam) {
|
||||
this.redirectID = redirectIDParam;
|
||||
},
|
||||
addTab(tab) {
|
||||
if (!getCurrentProjectID()) {
|
||||
this.$warning(this.$t('commons.check_project_tip'));
|
||||
return;
|
||||
}
|
||||
}
|
||||
},
|
||||
selectModule(data) {
|
||||
this.currentModule = data;
|
||||
},
|
||||
saveScenario(data) {
|
||||
this.setTabLabel(data);
|
||||
this.$refs.apiScenarioList.search(data);
|
||||
},
|
||||
refresh(data) {
|
||||
this.$refs.apiScenarioList.search(data);
|
||||
},
|
||||
editScenario(row) {
|
||||
this.addTab({name: 'edit', currentScenario: row});
|
||||
},
|
||||
if (tab.name === 'add') {
|
||||
let label = this.$t('api_test.automation.add_scenario');
|
||||
let name = getUUID().substring(0, 8);
|
||||
this.activeName = name;
|
||||
this.tabs.push({label: label, name: name, currentScenario: {apiScenarioModuleId: "", id: getUUID()}});
|
||||
}
|
||||
if (tab.name === 'edit') {
|
||||
let label = this.$t('api_test.automation.add_scenario');
|
||||
let name = getUUID().substring(0, 8);
|
||||
this.activeName = name;
|
||||
label = tab.currentScenario.name;
|
||||
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) {
|
||||
this.activeName = this.tabs[this.tabs.length - 1].name;
|
||||
} else {
|
||||
this.activeName = "default"
|
||||
}
|
||||
},
|
||||
setTabLabel(data) {
|
||||
for (const tab of this.tabs) {
|
||||
if (tab.name === this.activeName) {
|
||||
tab.label = data.name;
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
selectModule(data) {
|
||||
this.currentModule = data;
|
||||
},
|
||||
saveScenario(data) {
|
||||
this.setTabLabel(data);
|
||||
this.$refs.apiScenarioList.search(data);
|
||||
},
|
||||
refresh(data) {
|
||||
this.$refs.apiScenarioList.search(data);
|
||||
},
|
||||
editScenario(row) {
|
||||
this.addTab({name: 'edit', currentScenario: row});
|
||||
},
|
||||
|
||||
nodeChange(node, nodeIds, pNodes) {
|
||||
this.selectNodeIds = nodeIds;
|
||||
},
|
||||
setModuleOptions(data) {
|
||||
this.moduleOptions = data;
|
||||
},
|
||||
changeSelectDataRangeAll(tableType) {
|
||||
this.$route.params.dataSelectRange = 'all';
|
||||
},
|
||||
enableTrash(data) {
|
||||
this.trashEnable = data;
|
||||
nodeChange(node, nodeIds, pNodes) {
|
||||
this.selectNodeIds = nodeIds;
|
||||
},
|
||||
setModuleOptions(data) {
|
||||
this.moduleOptions = data;
|
||||
},
|
||||
changeSelectDataRangeAll(tableType) {
|
||||
this.$route.params.dataSelectRange = 'all';
|
||||
},
|
||||
enableTrash(data) {
|
||||
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,313 +86,320 @@
|
|||
@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 {
|
||||
name: "ApiDefinition",
|
||||
computed: {
|
||||
queryDataType: function () {
|
||||
let routeParam = this.$route.params.dataType;
|
||||
let redirectIDParam = this.$route.params.redirectID;
|
||||
this.changeRedirectParam(redirectIDParam);
|
||||
if (routeParam === 'apiTestCase') {
|
||||
this.isApiListEnableChange(false);
|
||||
} else {
|
||||
this.isApiListEnableChange(true);
|
||||
}
|
||||
return routeParam;
|
||||
export default {
|
||||
name: "ApiDefinition",
|
||||
computed: {
|
||||
queryDataType: function () {
|
||||
let routeParam = this.$route.params.dataType;
|
||||
let redirectIDParam = this.$route.params.redirectID;
|
||||
this.changeRedirectParam(redirectIDParam);
|
||||
if (routeParam === 'apiTestCase') {
|
||||
this.isApiListEnableChange(false);
|
||||
} else {
|
||||
this.isApiListEnableChange(true);
|
||||
}
|
||||
return routeParam;
|
||||
},
|
||||
},
|
||||
},
|
||||
components: {
|
||||
ApiCaseSimpleList,
|
||||
MsApiModule,
|
||||
MsApiList,
|
||||
MsMainContainer,
|
||||
MsContainer,
|
||||
MsAsideContainer,
|
||||
MsApiConfig,
|
||||
MsDebugHttpPage,
|
||||
MsRunTestHttpPage,
|
||||
MsDebugJdbcPage,
|
||||
MsDebugTcpPage,
|
||||
MsDebugDubboPage,
|
||||
MsRunTestTcpPage,
|
||||
MsRunTestSqlPage,
|
||||
MsRunTestDubboPage
|
||||
},
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
components: {
|
||||
ApiCaseSimpleList,
|
||||
MsApiModule,
|
||||
MsApiList,
|
||||
MsMainContainer,
|
||||
MsContainer,
|
||||
MsAsideContainer,
|
||||
MsApiConfig,
|
||||
MsDebugHttpPage,
|
||||
MsRunTestHttpPage,
|
||||
MsDebugJdbcPage,
|
||||
MsDebugTcpPage,
|
||||
MsDebugDubboPage,
|
||||
MsRunTestTcpPage,
|
||||
MsRunTestSqlPage,
|
||||
MsRunTestDubboPage
|
||||
},
|
||||
currentRow: {
|
||||
type: Object,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
redirectID: '',
|
||||
renderComponent: true,
|
||||
selectDataRange: 'all',
|
||||
showCasePage: true,
|
||||
apiDefaultTab: 'default',
|
||||
currentProtocol: null,
|
||||
currentModule: null,
|
||||
selectNodeIds: [],
|
||||
currentApi: {},
|
||||
moduleOptions: {},
|
||||
trashEnable: false,
|
||||
apiTabs: [{
|
||||
title: this.$t('api_test.definition.api_title'),
|
||||
name: 'default',
|
||||
type: "list",
|
||||
closable: false
|
||||
}],
|
||||
isApiListEnable: true
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
currentProtocol() {
|
||||
this.handleCommand("CLOSE_ALL");
|
||||
},
|
||||
redirectID() {
|
||||
this.renderComponent = false;
|
||||
this.$nextTick(() => {
|
||||
// 在 DOM 中添加 my-component 组件
|
||||
this.renderComponent = true;
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeRedirectParam(redirectIDParam) {
|
||||
this.redirectID = redirectIDParam;
|
||||
},
|
||||
isApiListEnableChange(data) {
|
||||
this.isApiListEnable = data;
|
||||
},
|
||||
handleCommand(e) {
|
||||
switch (e) {
|
||||
case "ADD":
|
||||
this.handleTabAdd(e);
|
||||
break;
|
||||
case "TEST":
|
||||
this.handleTabsEdit(this.$t("commons.api"), e);
|
||||
break;
|
||||
case "CLOSE_ALL":
|
||||
this.handleTabClose();
|
||||
break;
|
||||
default:
|
||||
this.handleTabsEdit(this.$t('api_test.definition.request.fast_debug'), "debug");
|
||||
break;
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
currentRow: {
|
||||
type: Object,
|
||||
}
|
||||
},
|
||||
handleTabAdd(e) {
|
||||
if (!getCurrentProjectID()) {
|
||||
this.$warning(this.$t('commons.check_project_tip'));
|
||||
return;
|
||||
data() {
|
||||
return {
|
||||
redirectID: '',
|
||||
renderComponent: true,
|
||||
selectDataRange: 'all',
|
||||
showCasePage: true,
|
||||
apiDefaultTab: 'default',
|
||||
currentProtocol: null,
|
||||
currentModule: null,
|
||||
selectNodeIds: [],
|
||||
currentApi: {},
|
||||
moduleOptions: {},
|
||||
trashEnable: false,
|
||||
apiTabs: [{
|
||||
title: this.$t('api_test.definition.api_title'),
|
||||
name: 'default',
|
||||
type: "list",
|
||||
closable: false
|
||||
}],
|
||||
isApiListEnable: true
|
||||
}
|
||||
let api = {
|
||||
status: "Underway", method: "GET", userId: getCurrentUser().id,
|
||||
url: "", protocol: this.currentProtocol, environmentId: ""
|
||||
};
|
||||
this.handleTabsEdit(this.$t('api_test.definition.request.title'), e, api);
|
||||
},
|
||||
handleTabClose() {
|
||||
let tabs = this.apiTabs[0];
|
||||
this.apiTabs = [];
|
||||
this.apiDefaultTab = tabs.name;
|
||||
this.apiTabs.push(tabs);
|
||||
this.refresh();
|
||||
},
|
||||
handleTabRemove(targetName) {
|
||||
let tabs = this.apiTabs;
|
||||
let activeName = this.apiDefaultTab;
|
||||
if (activeName === targetName) {
|
||||
tabs.forEach((tab, index) => {
|
||||
if (tab.name === targetName) {
|
||||
let nextTab = tabs[index + 1] || tabs[index - 1];
|
||||
if (nextTab) {
|
||||
activeName = nextTab.name;
|
||||
}
|
||||
}
|
||||
watch: {
|
||||
currentProtocol() {
|
||||
this.handleCommand("CLOSE_ALL");
|
||||
},
|
||||
redirectID() {
|
||||
this.renderComponent = false;
|
||||
this.$nextTick(() => {
|
||||
// 在 DOM 中添加 my-component 组件
|
||||
this.renderComponent = true;
|
||||
});
|
||||
}
|
||||
this.apiDefaultTab = activeName;
|
||||
this.apiTabs = tabs.filter(tab => tab.name !== targetName);
|
||||
this.refresh();
|
||||
},
|
||||
//创建左侧树的根目录模块
|
||||
createRootModel() {
|
||||
this.$refs.nodeTree.createRootModel();
|
||||
},
|
||||
handleTabsEdit(targetName, action, api) {
|
||||
if (!getCurrentProjectID()) {
|
||||
this.$warning(this.$t('commons.check_project_tip'));
|
||||
return;
|
||||
}
|
||||
if (targetName === undefined || targetName === null) {
|
||||
targetName = this.$t('api_test.definition.request.title');
|
||||
}
|
||||
let newTabName = getUUID();
|
||||
this.apiTabs.push({
|
||||
title: targetName,
|
||||
name: newTabName,
|
||||
closable: true,
|
||||
type: action,
|
||||
api: api,
|
||||
});
|
||||
this.apiDefaultTab = newTabName;
|
||||
},
|
||||
debug(id) {
|
||||
this.handleTabsEdit(this.$t('api_test.definition.request.fast_debug'), "debug", id);
|
||||
},
|
||||
editApi(row) {
|
||||
let name = this.$t('api_test.definition.request.edit_api');
|
||||
if (row.name) {
|
||||
name = this.$t('api_test.definition.request.edit_api') + "-" + row.name;
|
||||
}
|
||||
this.handleTabsEdit(name, "ADD", row);
|
||||
},
|
||||
handleCase(api) {
|
||||
this.currentApi = api;
|
||||
this.showCasePage = false;
|
||||
},
|
||||
apiCaseClose() {
|
||||
this.showCasePage = true;
|
||||
},
|
||||
exportAPI() {
|
||||
if (!this.isApiListEnable) {
|
||||
this.$warning('用例列表暂不支持导出，请切换成接口列表');
|
||||
return;
|
||||
}
|
||||
let obj = {projectName: getCurrentProjectID(), protocol: this.currentProtocol}
|
||||
if (this.$refs.apiList[0].selectRows && this.$refs.apiList[0].selectRows.size > 0) {
|
||||
let arr = Array.from(this.$refs.apiList[0].selectRows);
|
||||
obj.data = arr;
|
||||
this.buildApiPath(obj.data);
|
||||
downloadFile("Metersphere_Api_" + localStorage.getItem(PROJECT_NAME) + ".json", JSON.stringify(obj));
|
||||
} else {
|
||||
let condition = {};
|
||||
let url = "/api/definition/list/all";
|
||||
condition.filters = ["Prepare", "Underway", "Completed"];
|
||||
condition.projectId = getCurrentProjectID();
|
||||
this.$post(url, condition, response => {
|
||||
obj.data = response.data;
|
||||
methods: {
|
||||
changeRedirectParam(redirectIDParam) {
|
||||
this.redirectID = redirectIDParam;
|
||||
},
|
||||
isApiListEnableChange(data) {
|
||||
this.isApiListEnable = data;
|
||||
},
|
||||
addTab(tab) {
|
||||
if (tab.name === 'add') {
|
||||
this.handleCommand("ADD");
|
||||
}
|
||||
},
|
||||
handleCommand(e) {
|
||||
switch (e) {
|
||||
case "ADD":
|
||||
this.handleTabAdd(e);
|
||||
break;
|
||||
case "TEST":
|
||||
this.handleTabsEdit(this.$t("commons.api"), e);
|
||||
break;
|
||||
case "CLOSE_ALL":
|
||||
this.handleTabClose();
|
||||
break;
|
||||
default:
|
||||
this.handleTabsEdit(this.$t('api_test.definition.request.fast_debug'), "debug");
|
||||
break;
|
||||
}
|
||||
},
|
||||
handleTabAdd(e) {
|
||||
if (!getCurrentProjectID()) {
|
||||
this.$warning(this.$t('commons.check_project_tip'));
|
||||
return;
|
||||
}
|
||||
let api = {
|
||||
status: "Underway", method: "GET", userId: getCurrentUser().id,
|
||||
url: "", protocol: this.currentProtocol, environmentId: ""
|
||||
};
|
||||
this.handleTabsEdit(this.$t('api_test.definition.request.title'), e, api);
|
||||
},
|
||||
handleTabClose() {
|
||||
let tabs = this.apiTabs[0];
|
||||
this.apiTabs = [];
|
||||
this.apiDefaultTab = tabs.name;
|
||||
this.apiTabs.push(tabs);
|
||||
this.refresh();
|
||||
},
|
||||
handleTabRemove(targetName) {
|
||||
let tabs = this.apiTabs;
|
||||
let activeName = this.apiDefaultTab;
|
||||
if (activeName === targetName) {
|
||||
tabs.forEach((tab, index) => {
|
||||
if (tab.name === targetName) {
|
||||
let nextTab = tabs[index + 1] || tabs[index - 1];
|
||||
if (nextTab) {
|
||||
activeName = nextTab.name;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
this.apiDefaultTab = activeName;
|
||||
this.apiTabs = tabs.filter(tab => tab.name !== targetName);
|
||||
this.refresh();
|
||||
},
|
||||
//创建左侧树的根目录模块
|
||||
createRootModel() {
|
||||
this.$refs.nodeTree.createRootModel();
|
||||
},
|
||||
handleTabsEdit(targetName, action, api) {
|
||||
if (!getCurrentProjectID()) {
|
||||
this.$warning(this.$t('commons.check_project_tip'));
|
||||
return;
|
||||
}
|
||||
if (targetName === undefined || targetName === null) {
|
||||
targetName = this.$t('api_test.definition.request.title');
|
||||
}
|
||||
let newTabName = getUUID();
|
||||
this.apiTabs.push({
|
||||
title: targetName,
|
||||
name: newTabName,
|
||||
closable: true,
|
||||
type: action,
|
||||
api: api,
|
||||
});
|
||||
this.apiDefaultTab = newTabName;
|
||||
},
|
||||
debug(id) {
|
||||
this.handleTabsEdit(this.$t('api_test.definition.request.fast_debug'), "debug", id);
|
||||
},
|
||||
editApi(row) {
|
||||
let name = this.$t('api_test.definition.request.edit_api');
|
||||
if (row.name) {
|
||||
name = this.$t('api_test.definition.request.edit_api') + "-" + row.name;
|
||||
}
|
||||
this.handleTabsEdit(name, "ADD", row);
|
||||
},
|
||||
handleCase(api) {
|
||||
this.currentApi = api;
|
||||
this.showCasePage = false;
|
||||
},
|
||||
apiCaseClose() {
|
||||
this.showCasePage = true;
|
||||
},
|
||||
exportAPI() {
|
||||
if (!this.isApiListEnable) {
|
||||
this.$warning('用例列表暂不支持导出，请切换成接口列表');
|
||||
return;
|
||||
}
|
||||
let obj = {projectName: getCurrentProjectID(), protocol: this.currentProtocol}
|
||||
if (this.$refs.apiList[0].selectRows && this.$refs.apiList[0].selectRows.size > 0) {
|
||||
let arr = Array.from(this.$refs.apiList[0].selectRows);
|
||||
obj.data = arr;
|
||||
this.buildApiPath(obj.data);
|
||||
downloadFile("Metersphere_Api_" + localStorage.getItem(PROJECT_NAME) + ".json", JSON.stringify(obj));
|
||||
});
|
||||
}
|
||||
},
|
||||
buildApiPath(apis) {
|
||||
apis.forEach((api) => {
|
||||
this.moduleOptions.forEach(item => {
|
||||
if (api.moduleId === item.id) {
|
||||
api.modulePath = item.path;
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
refresh(data) {
|
||||
this.$refs.apiList[0].initTable(data);
|
||||
},
|
||||
setTabTitle(data) {
|
||||
for (let index in this.apiTabs) {
|
||||
let tab = this.apiTabs[index];
|
||||
if (tab.name === this.apiDefaultTab) {
|
||||
tab.title = this.$t('api_test.definition.request.edit_api') + "-" + data.name;
|
||||
break;
|
||||
} else {
|
||||
let condition = {};
|
||||
let url = "/api/definition/list/all";
|
||||
condition.filters = ["Prepare", "Underway", "Completed"];
|
||||
condition.projectId = getCurrentProjectID();
|
||||
this.$post(url, condition, response => {
|
||||
obj.data = response.data;
|
||||
this.buildApiPath(obj.data);
|
||||
downloadFile("Metersphere_Api_" + localStorage.getItem(PROJECT_NAME) + ".json", JSON.stringify(obj));
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
runTest(data) {
|
||||
this.setTabTitle(data);
|
||||
this.handleTabsEdit(this.$t("commons.api"), "TEST", data);
|
||||
},
|
||||
saveApi(data) {
|
||||
this.setTabTitle(data);
|
||||
this.refresh(data);
|
||||
},
|
||||
},
|
||||
buildApiPath(apis) {
|
||||
apis.forEach((api) => {
|
||||
this.moduleOptions.forEach(item => {
|
||||
if (api.moduleId === item.id) {
|
||||
api.modulePath = item.path;
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
refresh(data) {
|
||||
this.$refs.apiList[0].initTable(data);
|
||||
},
|
||||
setTabTitle(data) {
|
||||
for (let index in this.apiTabs) {
|
||||
let tab = this.apiTabs[index];
|
||||
if (tab.name === this.apiDefaultTab) {
|
||||
tab.title = this.$t('api_test.definition.request.edit_api') + "-" + data.name;
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
runTest(data) {
|
||||
this.setTabTitle(data);
|
||||
this.handleTabsEdit(this.$t("commons.api"), "TEST", data);
|
||||
},
|
||||
saveApi(data) {
|
||||
this.setTabTitle(data);
|
||||
this.refresh(data);
|
||||
},
|
||||
|
||||
showExecResult(row) {
|
||||
this.debug(row);
|
||||
},
|
||||
nodeChange(node, nodeIds, pNodes) {
|
||||
this.selectNodeIds = nodeIds;
|
||||
},
|
||||
handleProtocolChange(protocol) {
|
||||
this.currentProtocol = protocol;
|
||||
},
|
||||
setModuleOptions(data) {
|
||||
this.moduleOptions = data;
|
||||
},
|
||||
changeSelectDataRangeAll(tableType) {
|
||||
this.$route.params.dataSelectRange = 'all';
|
||||
},
|
||||
enableTrash(data) {
|
||||
this.trashEnable = data;
|
||||
showExecResult(row) {
|
||||
this.debug(row);
|
||||
},
|
||||
nodeChange(node, nodeIds, pNodes) {
|
||||
this.selectNodeIds = nodeIds;
|
||||
},
|
||||
handleProtocolChange(protocol) {
|
||||
this.currentProtocol = protocol;
|
||||
},
|
||||
setModuleOptions(data) {
|
||||
this.moduleOptions = data;
|
||||
},
|
||||
changeSelectDataRangeAll(tableType) {
|
||||
this.$route.params.dataSelectRange = 'all';
|
||||
},
|
||||
enableTrash(data) {
|
||||
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 {
|
||||
overflow-y: auto;
|
||||
height: calc(100vh - 155px)
|
||||
}
|
||||
.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-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;*/
|
||||
border-top: none;
|
||||
}
|
||||
/deep/ .el-card {
|
||||
/*border: 1px solid #EBEEF5;*/
|
||||
/*border-style: none;*/
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
/deep/ .api-component {
|
||||
margin-top: 10px;
|
||||
}
|
||||
/deep/ .api-component {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue