From 5e1567b6b46ac9a1fdf11b8c1b992910b3f8ad3d Mon Sep 17 00:00:00 2001 From: zhangdahai112 Date: Wed, 14 Dec 2022 17:51:14 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E9=A1=B9=E7=9B=AE=E8=AE=BE=E7=BD=AE):=20U?= =?UTF-8?q?I=E7=8E=AF=E5=A2=83=E9=85=8D=E7=BD=AE=E6=A0=A1=E9=AA=8C?= =?UTF-8?q?=E4=B8=8E=E6=8F=90=E7=A4=BA=E4=BF=A1=E6=81=AF=E5=AE=8C=E5=96=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --story=1010692 --user=张大海 【UI测试】支持与环境管理打通 https://www.tapd.cn/55049933/s/1315234 --- .../environment/commons/MiniTimingItem.vue | 12 +- .../src/components/form/FormSection.vue | 4 +- .../frontend/src/model/EnvironmentModel.js | 16 ++ .../menu/environment/EnvironmentList.vue | 6 +- .../components/EnvironmentHttpConfig.vue | 25 +-- .../ui-related/UiScenarioCookieTable.vue | 199 ++++++++++-------- .../frontend/src/i18n/lang/en-US.js | 9 + .../frontend/src/i18n/lang/zh-CN.js | 8 +- .../frontend/src/i18n/lang/zh-TW.js | 9 + 9 files changed, 183 insertions(+), 105 deletions(-) diff --git a/framework/sdk-parent/frontend/src/components/environment/commons/MiniTimingItem.vue b/framework/sdk-parent/frontend/src/components/environment/commons/MiniTimingItem.vue index 9a2c899314..14e38fe9bd 100644 --- a/framework/sdk-parent/frontend/src/components/environment/commons/MiniTimingItem.vue +++ b/framework/sdk-parent/frontend/src/components/environment/commons/MiniTimingItem.vue @@ -3,7 +3,7 @@ + class="timing_select" :disabled="selfChoose" @change="chooseChange(true)"> + class="timing_select" :disabled="selfChoose" @change="chooseChange(true)"> - + diff --git a/framework/sdk-parent/frontend/src/model/EnvironmentModel.js b/framework/sdk-parent/frontend/src/model/EnvironmentModel.js index d1d27159b5..c98ddccd34 100644 --- a/framework/sdk-parent/frontend/src/model/EnvironmentModel.js +++ b/framework/sdk-parent/frontend/src/model/EnvironmentModel.js @@ -84,6 +84,7 @@ export class HttpConfig extends BaseConfig { this.protocol = 'https'; this.port = undefined; this.conditions = []; + this.cookie = options.cookie ? options.cookie : [new Cookie()]; this.isMock = false; this.description = ""; this.set(options); @@ -93,6 +94,7 @@ export class HttpConfig extends BaseConfig { initOptions(options = {}) { options.headers = options.headers || [new KeyValue()]; + options.cookie = options.cookie || [new Cookie()]; return options; } } @@ -111,6 +113,20 @@ export class Host extends BaseConfig { } } +export class Cookie extends BaseConfig { + constructor(options = {}) { + super(); + + this.cookie = undefined; + this.expireTime = "1D"; + this.updateTime = undefined; + this.relevanceId = undefined; + this.enable = false; + + this.set(options); + } +} + /* ---------- Functions ------- */ diff --git a/project-management/frontend/src/business/menu/environment/EnvironmentList.vue b/project-management/frontend/src/business/menu/environment/EnvironmentList.vue index 585ad24296..00a6e06d42 100644 --- a/project-management/frontend/src/business/menu/environment/EnvironmentList.vue +++ b/project-management/frontend/src/business/menu/environment/EnvironmentList.vue @@ -136,7 +136,7 @@ import MsTableOperator from "metersphere-frontend/src/components/MsTableOperator import MsTableOperatorButton from "metersphere-frontend/src/components/MsTableOperatorButton"; import MsTablePagination from "metersphere-frontend/src/components/pagination/TablePagination"; import ApiEnvironmentConfig from "metersphere-frontend/src/components/environment/ApiEnvironmentConfig"; -import {Environment, parseEnvironment} from "metersphere-frontend/src/model/EnvironmentModel"; +import {Environment, parseEnvironment, HttpConfig} from "metersphere-frontend/src/model/EnvironmentModel"; import EnvironmentEdit from "./components/EnvironmentEdit"; import MsAsideItem from "metersphere-frontend/src/components/MsAsideItem"; import MsAsideContainer from "metersphere-frontend/src/components/MsAsideContainer"; @@ -174,7 +174,7 @@ export default { projectList: [], condition: {}, //封装传递给后端的查询条件 environments: [], - currentEnvironment: new Environment(), + currentEnvironment: new Environment({httpConfig: new HttpConfig()}), result: {}, loading: false, dialogVisible: false, @@ -288,7 +288,7 @@ export default { createEnv() { this.dialogTitle = this.$t('api_test.environment.create'); this.dialogVisible = true; - this.currentEnvironment = new Environment(); + this.currentEnvironment = new Environment({httpConfig: new HttpConfig()}); this.currentEnvironment.projectId = this.currentProjectId; this.currentEnvironment.currentProjectId = this.currentProjectId; this.ifCreate = true; diff --git a/project-management/frontend/src/business/menu/environment/components/EnvironmentHttpConfig.vue b/project-management/frontend/src/business/menu/environment/components/EnvironmentHttpConfig.vue index 3d9df1e9bc..37e2633eee 100644 --- a/project-management/frontend/src/business/menu/environment/components/EnvironmentHttpConfig.vue +++ b/project-management/frontend/src/business/menu/environment/components/EnvironmentHttpConfig.vue @@ -45,7 +45,7 @@ - +

{{ $t('api_test.request.headers') }}

@@ -71,12 +71,12 @@ - - + + - {{$t("ui.browser")}} + {{ $t("ui.browser") }} - + @@ -174,9 +174,10 @@ export default { name: "MsEnvironmentHttpConfig", components: { MsUiScenarioCookieTable, - FormSection, MsApiKeyValue, MsSelectTree, MsTableOperatorButton, BatchAddParameter, MsInstructionsIcon}, + FormSection, MsApiKeyValue, MsSelectTree, MsTableOperatorButton, BatchAddParameter, MsInstructionsIcon + }, props: { - httpConfig: new HttpConfig({cookie: []}), + httpConfig: new HttpConfig(), projectId: String, isReadOnly: { type: Boolean, @@ -185,9 +186,6 @@ export default { }, created() { this.list(); - if (this.httpConfig && !this.httpConfig.cookie) { - this.$set(this.httpConfig, "cookie", []); - } }, data() { let socketValidator = (rule, value, callback) => { @@ -220,7 +218,7 @@ export default { port: 0, headers: [new KeyValue()], headlessEnabled: true, - browser : 'CHROME' + browser: 'CHROME' }, beforeCondition: {}, browsers: [ @@ -354,7 +352,7 @@ export default { list() { if (this.projectId) { this.result = getApiModuleByProjectIdAndProtocol(this.projectId, "HTTP").then((response) => { - if (response.data && response.data !== null) { + if (response.data && response.data !== null) { this.moduleOptions = response.data; } }); @@ -507,6 +505,9 @@ export default { this.$refs["httpConfig"].validate((valid) => { isValidate = valid; }); + if (this.$refs.cookieTable && !this.$refs.cookieTable.validate()) { + return false; + } return isValidate; }, batchAdd() { diff --git a/project-management/frontend/src/business/menu/environment/components/ui-related/UiScenarioCookieTable.vue b/project-management/frontend/src/business/menu/environment/components/ui-related/UiScenarioCookieTable.vue index d260bab626..fab0a85399 100644 --- a/project-management/frontend/src/business/menu/environment/components/ui-related/UiScenarioCookieTable.vue +++ b/project-management/frontend/src/business/menu/environment/components/ui-related/UiScenarioCookieTable.vue @@ -16,10 +16,10 @@ :data="variables" :total="items.length" :screen-height="'100px'" - :batch-operators="batchButtons" :remember-order="true" :highlightCurrentRow="true" @refresh="onChange" + :enable-selection="false" ref="variableTable" > @@ -28,44 +28,44 @@ v-model="scope.row.cookie" size="mini" :placeholder="$t('cookie')" - @change="change" + @change="change(scope.row)" /> - - - + + + + + + + + + + + + + + + + - - - + + + + + + + + + + + + + + + + @@ -95,7 +95,8 @@ + + + + - - + + {{ $t("environment.view_ui_relevane") }} + {{ $t("environment.cancel_ui_relevane") }} + + {{ $t("environment.re_ui_relevane") }} + + - - 查看关联 - 取消关联 - 重新关联 - - - - @@ -158,6 +159,7 @@ import VariableImport from "metersphere-frontend/src/components/environment/Vari import _ from "lodash"; import MiniTimingItem from "metersphere-frontend/src/components/environment/commons/MiniTimingItem"; import UiScenarioEditRelevance from "@/business/menu/environment/components/ui-related/UiScenarioEditRelevance"; +import {getCurrentProjectID, getCurrentWorkspaceId} from "metersphere-frontend/src/utils/token"; export default { name: "MsUiScenarioCookieTable", @@ -218,8 +220,8 @@ export default { }, watch: { items: { - handler(v) { - this.variables = v; + handler(val) { + this.variables = val; this.sortParameters(); }, immediate: true, @@ -235,7 +237,7 @@ export default { }, immediate: true, deep: true, - } + }, }, methods: { remove: function (index) { @@ -271,6 +273,7 @@ export default { this.$t("load_test.param_is_duplicate") ); } + this.variables[0].updateTime = new Date().getTime(); this.$emit("change", this.variables); }, changeType(data) { @@ -314,23 +317,22 @@ export default { }, sortParameters() { let index = 1; - this.variables.forEach((item) => { - item.num = index; - if (!item.type || item.type === "text") { - item.type = "CONSTANT"; - } - if (!item.id) { - item.id = getUUID(); - } - if (item.remark) { - this.$set(item, "description", item.remark); - item.remark = undefined; - } - if (!item.scope) { - this.$set(item, "scope", "api"); - } - index++; - }); + if (this.variables) { + this.variables.forEach((item) => { + item.num = index; + if (!item.type || item.type === "text") { + item.type = "CONSTANT"; + } + if (!item.id) { + item.id = getUUID(); + } + if (item.remark) { + this.$set(item, "description", item.remark); + item.remark = undefined; + } + index++; + }); + } }, handleDeleteBatch() { operationConfirm( @@ -509,17 +511,36 @@ export default { handleCommand(c) { switch (c) { case "view": + this.redirectPage(this.variables[0].relevanceId); break; case "cancelRelevance": this.variables[0].relevanceId = null; + this.$success(this.$t("organization.integration.successful_operation")); break; case "relevance": - this.openRelevance(); + this.openRelevance("scenario", "scenario",); break; default: break; } }, + redirectPage(resourceId) { + let uuid = getUUID().substring(1, 5); + let projectId = getCurrentProjectID(); + let workspaceId = getCurrentWorkspaceId(); + let prefix = '/#'; + if ( + this.$route && + this.$route.path.startsWith('/#') + ) { + prefix = ''; + } + let path = `/ui/automation/?redirectID=${uuid}&dataType=scenario&projectId=${projectId}&workspaceId=${workspaceId}&resourceId=${resourceId}`; + let data = this.$router.resolve({ + path: path, + }); + window.open(data.href, '_blank'); + }, openRelevance() { this.$refs.relevanceUiDialog.open(); }, @@ -527,19 +548,31 @@ export default { this.variables[0].relevanceId = id.keys().next().value.id; this.$refs.relevanceUiDialog.close(); this.$success(this.$t('commons.save_success')); + }, + validate() { + if (!this.variables[0].enable) { + return true; + } + let cookieConfig = this.variables[0]; + if (!cookieConfig) { + this.$warning(this.$t("配置错误")); + return false; + } + if (!cookieConfig.expireTime || cookieConfig.expireTime === "") { + this.$warning(this.$t("environment.need_expire_time")); + return false; + } + if (!cookieConfig.relevanceId) { + this.$warning(this.$t("environment.need_relevance_ui_scenario")); + return false; + } + return true; } }, created() { - if (this.items.length === 0) { - this.items.push(new KeyValue({enable: true, expireTime: '1Y'})); - } else { - //历史数据默认是 api 应用场景 - _.forEach(this.items, item => { - if (!item.scope) { - this.$set(item, "scope", "api"); - } - }) - this.variables = this.items; + if (!this.items || this.items.length === 0) { + this.items = []; + this.items.push(new KeyValue({id: getUUID(), enable: true, expireTime: '1M'})); } }, }; diff --git a/project-management/frontend/src/i18n/lang/en-US.js b/project-management/frontend/src/i18n/lang/en-US.js index 1cd0cc03e8..d992581d9e 100644 --- a/project-management/frontend/src/i18n/lang/en-US.js +++ b/project-management/frontend/src/i18n/lang/en-US.js @@ -35,6 +35,15 @@ const message = { }, project_version: { version_time: 'Version cycle', + }, + environment: { + export_variable_tip : "Export interface test variables", + need_expire_time : "Please enter an expiration time", + need_relevance_ui_scenario : "Please associate the login scenario", + view_ui_relevane : "View Relevane", + cancel_ui_relevane : "Relevant", + re_ui_relevane : "Relevane", + relevance_ui : "Relevance login scene/command", } } diff --git a/project-management/frontend/src/i18n/lang/zh-CN.js b/project-management/frontend/src/i18n/lang/zh-CN.js index b37a22283c..527217c63d 100644 --- a/project-management/frontend/src/i18n/lang/zh-CN.js +++ b/project-management/frontend/src/i18n/lang/zh-CN.js @@ -37,7 +37,13 @@ const message = { version_time: '版本周期', }, environment: { - export_variable_tip : "导出接口测试变量" + export_variable_tip : "导出接口测试变量", + need_expire_time : "请输入过期时间", + need_relevance_ui_scenario : "请关联登录场景", + view_ui_relevane : "查看关联", + cancel_ui_relevane : "取消关联", + re_ui_relevane : "重新关联", + relevance_ui : "关联登录场景/指令", } } diff --git a/project-management/frontend/src/i18n/lang/zh-TW.js b/project-management/frontend/src/i18n/lang/zh-TW.js index 5130a81e33..e0e5e524b2 100644 --- a/project-management/frontend/src/i18n/lang/zh-TW.js +++ b/project-management/frontend/src/i18n/lang/zh-TW.js @@ -35,6 +35,15 @@ const message = { }, project_version: { version_time: '版本週期', + }, + environment: { + export_variable_tip : "導出接口測試變量", + need_expire_time : "請輸入過期時間", + need_relevance_ui_scenario : "請關聯登錄場景", + view_ui_relevane : "查看關聯", + cancel_ui_relevane : "取消關聯", + re_ui_relevane : "重新關聯", + relevance_ui : "關聯登錄場景/指令", } }