From 5ee7fffd68eda83686f088a5880b93f774812c1e Mon Sep 17 00:00:00 2001 From: Coooder-X <55648333+Coooder-X@users.noreply.github.com> Date: Tue, 26 Jan 2021 13:05:03 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E5=AE=9E=E7=8E=B0=20=E6=8E=A5=E5=8F=A3?= =?UTF-8?q?=E6=B5=8B=E8=AF=95-=E6=8E=A5=E5=8F=A3=E5=AE=9A=E4=B9=89?= =?UTF-8?q?=E7=95=8C=E9=9D=A2=EF=BC=8Cctrl=20+=20s=20=E4=BF=9D=E5=AD=98?= =?UTF-8?q?=E5=BF=AB=E6=8D=B7=E9=94=AE=20(#1254)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../api/automation/ApiAutomation.vue | 27 +++++++++++++++- .../automation/scenario/EditApiScenario.vue | 21 ++++++++++--- .../api/definition/ApiDefinition.vue | 20 ++++++++++++ .../api/definition/components/ApiConfig.vue | 31 ++++++++++++++++--- .../complete/EditCompleteDubboApi.vue | 2 +- .../complete/EditCompleteHTTPApi.vue | 2 +- .../complete/EditCompleteSQLApi.vue | 2 +- .../complete/EditCompleteTCPApi.vue | 2 +- frontend/src/common/js/utils.js | 9 ++++++ 9 files changed, 102 insertions(+), 14 deletions(-) diff --git a/frontend/src/business/components/api/automation/ApiAutomation.vue b/frontend/src/business/components/api/automation/ApiAutomation.vue index f4e322c62a..097ceb5346 100644 --- a/frontend/src/business/components/api/automation/ApiAutomation.vue +++ b/frontend/src/business/components/api/automation/ApiAutomation.vue @@ -35,7 +35,7 @@ closable>
+ :moduleOptions="moduleOptions" ref="autoScenarioConfig"/>
@@ -111,6 +111,16 @@ // 在 DOM 中添加 my-component 组件 this.renderComponent = true; }); + }, + '$route'(to, from) { // 路由改变时，把接口定义界面中的 ctrl s 保存快捷键监听移除 + if (to.path.indexOf('/api/automation') == -1) { + if (this.$refs && this.$refs.autoScenarioConfig) { + console.log(this.$refs.autoScenarioConfig); + this.$refs.autoScenarioConfig.forEach(item => { + item.removeListener(); + }); + } + } } }, methods: { @@ -158,6 +168,20 @@ label = tab.currentScenario.name; this.tabs.push({label: label, name: name, currentScenario: tab.currentScenario}); } + if (this.$refs && this.$refs.autoScenarioConfig) { + this.$refs.autoScenarioConfig.forEach(item => { + item.removeListener(); + }); // 删除所有tab的 ctrl + s 监听 + this.addListener(); + } + }, + addListener() { + let index = this.tabs.findIndex(item => item.name === this.activeName); // 找到当前选中tab的index + if(index != -1) { // 为当前选中的tab添加监听 + this.$nextTick(()=>{ + this.$refs.autoScenarioConfig[index].addListener(); + }); + } }, handleTabClose() { this.tabs = []; @@ -181,6 +205,7 @@ this.tabs = this.tabs.filter(tab => tab.name !== targetName); if (this.tabs.length > 0) { this.activeName = this.tabs[this.tabs.length - 1].name; + this.addListener(); // 自动切换当前标签时，也添加监听 } else { this.activeName = "default" } diff --git a/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue b/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue index e80461184f..257b9335ef 100644 --- a/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue +++ b/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue @@ -5,7 +5,7 @@
- {{$t('commons.save')}} + {{$t('commons.save')}}
{{$t('test_track.plan_view.base_info')}}
@@ -222,6 +222,7 @@ import ScenarioApiRelevance from "./api/ApiRelevance"; import ScenarioRelevance from "./api/ScenarioRelevance"; import MsComponentConfig from "./component/ComponentConfig"; + import {handleCtrlSEvent} from "../../../../../common/js/utils"; export default { name: "EditApiScenario", @@ -295,6 +296,7 @@ this.operatingElements = ELEMENTS.get("ALL"); this.getMaintainerOptions(); this.getApiScenario(); + this.addListener(); // 添加 ctrl s 监听 }, directives: {OutsideClick}, computed: { @@ -413,6 +415,17 @@ } }, methods: { + addListener() { + document.addEventListener("keydown", this.createCtrlSHandle); + // document.addEventListener("keydown", (even => handleCtrlSEvent(even, this.$refs.httpApi.saveApi))); + }, + removeListener() { + document.removeEventListener("keydown", this.createCtrlSHandle); + }, + createCtrlSHandle(event) { + console.log("create ctrl + s"); + handleCtrlSEvent(event, this.editScenario); + }, getIdx(index) { return index - 0.33 }, @@ -822,15 +835,13 @@ } return bodyUploadFiles; }, - editScenario(showMessage) { + editScenario() { this.$refs['currentScenario'].validate((valid) => { if (valid) { this.setParameter(); let bodyFiles = this.getBodyUploadFiles(this.currentScenario); this.$fileUpload(this.path, null, bodyFiles, this.currentScenario, response => { - if (showMessage) { - this.$success(this.$t('commons.save_success')); - } + this.$success(this.$t('commons.save_success')); this.path = "/api/automation/update"; if (response.data) { this.currentScenario.id = response.data.id; diff --git a/frontend/src/business/components/api/definition/ApiDefinition.vue b/frontend/src/business/components/api/definition/ApiDefinition.vue index 0421b518eb..9b47c97278 100644 --- a/frontend/src/business/components/api/definition/ApiDefinition.vue +++ b/frontend/src/business/components/api/definition/ApiDefinition.vue @@ -198,6 +198,15 @@ // 在 DOM 中添加 my-component 组件 this.renderComponent = true; }); + }, + '$route'(to, from) { // 路由改变时，把接口定义界面中的 ctrl s 保存快捷键监听移除 + if (to.path.indexOf('/api/definition') == -1) { + if (this.$refs && this.$refs.apiConfig) { + this.$refs.apiConfig.forEach(item => { + item.removeListener(); + }); + } + } } }, methods: { @@ -211,6 +220,17 @@ if (tab.name === 'add') { this.handleTabsEdit(this.$t('api_test.definition.request.fast_debug'), "debug"); } + if(this.$refs.apiConfig) { + this.$refs.apiConfig.forEach(item => { + console.log(item); + item.removeListener(); + }); // 删除所有tab的 ctrl + s 监听 + let tabs = this.apiTabs; + let index = tabs.findIndex(item => item.name === tab.name); // 找到当前选中tab的index + if(index != -1) { + this.$refs.apiConfig[index - 1].addListener(); // 为选中tab添加 ctrl + s 监听（index-1的原因是要除去第一个固有tab） + } + } }, handleCommand(e) { switch (e) { diff --git a/frontend/src/business/components/api/definition/components/ApiConfig.vue b/frontend/src/business/components/api/definition/components/ApiConfig.vue index 1cf299f8a2..bbd76219c8 100644 --- a/frontend/src/business/components/api/definition/components/ApiConfig.vue +++ b/frontend/src/business/components/api/definition/components/ApiConfig.vue @@ -3,16 +3,16 @@
+ :basisData="currentApi" :moduleOptions="moduleOptions" :syncTabs="syncTabs" v-if="currentProtocol === 'HTTP'" ref="httpApi"/> + :moduleOptions="moduleOptions" :syncTabs="syncTabs" v-if="currentProtocol === 'TCP'" ref="tcpApi"/> + :moduleOptions="moduleOptions" :syncTabs="syncTabs" v-if="currentProtocol === 'DUBBO'" ref="dubboApi"/> + :moduleOptions="moduleOptions" :syncTabs="syncTabs" v-if="currentProtocol === 'SQL'" ref="sqlApi"/>
@@ -27,6 +27,7 @@ import {createComponent, Request} from "./jmeter/components"; import Sampler from "./jmeter/components/sampler/sampler"; import {WORKSPACE_ID} from '@/common/js/constants'; + import {handleCtrlSEvent} from "../../../../../common/js/utils"; export default { name: "ApiConfig", @@ -65,8 +66,30 @@ break; } this.formatApi(); + this.addListener(); }, methods: { + addListener() { + document.addEventListener("keydown", this.createCtrlSHandle); + // document.addEventListener("keydown", (even => handleCtrlSEvent(even, this.$refs.httpApi.saveApi))); + }, + removeListener() { + document.removeEventListener("keydown", this.createCtrlSHandle); + }, + createCtrlSHandle(event) { + if(this.$refs.httpApi) { + handleCtrlSEvent(event, this.$refs.httpApi.saveApi); + } + else if(this.$refs.tcpApi) { + handleCtrlSEvent(event, this.$refs.tcpApi.saveApi); + } + else if(this.$refs.dubboApi) { + handleCtrlSEvent(event, this.$refs.dubboApi.saveApi); + } + else if(this.$refs.sqlApi) { + handleCtrlSEvent(event, this.$refs.sqlApi.saveApi); + } + }, runTest(data) { this.setParameters(data); let bodyFiles = this.getBodyUploadFiles(data); diff --git a/frontend/src/business/components/api/definition/components/complete/EditCompleteDubboApi.vue b/frontend/src/business/components/api/definition/components/complete/EditCompleteDubboApi.vue index ffecc7cd01..90769131cb 100644 --- a/frontend/src/business/components/api/definition/components/complete/EditCompleteDubboApi.vue +++ b/frontend/src/business/components/api/definition/components/complete/EditCompleteDubboApi.vue @@ -6,7 +6,7 @@
- {{ $t('commons.save') }} + {{ $t('commons.save') }} {{ $t('commons.test') }}
diff --git a/frontend/src/business/components/api/definition/components/complete/EditCompleteHTTPApi.vue b/frontend/src/business/components/api/definition/components/complete/EditCompleteHTTPApi.vue index 6f4415ee65..7cb015595a 100644 --- a/frontend/src/business/components/api/definition/components/complete/EditCompleteHTTPApi.vue +++ b/frontend/src/business/components/api/definition/components/complete/EditCompleteHTTPApi.vue @@ -6,7 +6,7 @@
- {{ $t('commons.save') }} + {{ $t('commons.save') }} {{ $t('commons.test') }}

diff --git a/frontend/src/business/components/api/definition/components/complete/EditCompleteSQLApi.vue b/frontend/src/business/components/api/definition/components/complete/EditCompleteSQLApi.vue index 0b0bb5699e..14df6b2c0e 100644 --- a/frontend/src/business/components/api/definition/components/complete/EditCompleteSQLApi.vue +++ b/frontend/src/business/components/api/definition/components/complete/EditCompleteSQLApi.vue @@ -5,7 +5,7 @@
- {{ $t('commons.save') }} + {{ $t('commons.save') }} {{ $t('commons.test') }}
diff --git a/frontend/src/business/components/api/definition/components/complete/EditCompleteTCPApi.vue b/frontend/src/business/components/api/definition/components/complete/EditCompleteTCPApi.vue index 3253522333..682ea8817c 100644 --- a/frontend/src/business/components/api/definition/components/complete/EditCompleteTCPApi.vue +++ b/frontend/src/business/components/api/definition/components/complete/EditCompleteTCPApi.vue @@ -5,7 +5,7 @@
- {{ $t('commons.save') }} + {{ $t('commons.save') }} {{ $t('commons.test') }}
diff --git a/frontend/src/common/js/utils.js b/frontend/src/common/js/utils.js index 38de23f333..30602936cc 100644 --- a/frontend/src/common/js/utils.js +++ b/frontend/src/common/js/utils.js @@ -356,3 +356,12 @@ export function _getBodyUploadFiles(request, bodyUploadFiles, obj) { } } } +export function handleCtrlSEvent(event, func) { + if (event.keyCode === 83 && event.ctrlKey) { + // console.log('拦截到 ctrl + s');//ctrl+s + func(); + event.preventDefault(); + event.returnValue = false; + return false; + } +}