fix(接口自动化): 修复自定义接口显示问题

This commit is contained in:
fit2-zhao 2021-05-31 13:54:31 +08:00 committed by fit2-zhao
parent 16b3e64702
commit 28161744ed
1 changed files with 340 additions and 339 deletions

View File

@ -15,10 +15,10 @@
:title="displayTitle"> :title="displayTitle">
<template v-slot:behindHeaderLeft> <template v-slot:behindHeaderLeft>
<el-tag size="mini" class="ms-tag" v-if="request.referenced==='Deleted'" type="danger">{{$t('api_test.automation.reference_deleted')}}</el-tag> <el-tag size="mini" class="ms-tag" v-if="request.referenced==='Deleted'" type="danger">{{ $t('api_test.automation.reference_deleted') }}</el-tag>
<el-tag size="mini" class="ms-tag" v-if="request.referenced==='Copy'">{{ $t('commons.copy') }}</el-tag> <el-tag size="mini" class="ms-tag" v-if="request.referenced==='Copy'">{{ $t('commons.copy') }}</el-tag>
<el-tag size="mini" class="ms-tag" v-if="request.referenced ==='REF'">{{ $t('api_test.scenario.reference') }}</el-tag> <el-tag size="mini" class="ms-tag" v-if="request.referenced ==='REF'">{{ $t('api_test.scenario.reference') }}</el-tag>
<span class="ms-tag">{{getProjectName(request.projectId)}}</span> <span class="ms-tag">{{ getProjectName(request.projectId) }}</span>
</template> </template>
<template v-slot:button> <template v-slot:button>
@ -83,362 +83,363 @@
</template> </template>
<script> <script>
import MsSqlBasisParameters from "../../../definition/components/request/database/BasisParameters"; import MsSqlBasisParameters from "../../../definition/components/request/database/BasisParameters";
import MsTcpBasisParameters from "../../../definition/components/request/tcp/TcpBasisParameters"; import MsTcpBasisParameters from "../../../definition/components/request/tcp/TcpBasisParameters";
import MsDubboBasisParameters from "../../../definition/components/request/dubbo/BasisParameters"; import MsDubboBasisParameters from "../../../definition/components/request/dubbo/BasisParameters";
import MsApiRequestForm from "../../../definition/components/request/http/ApiHttpRequestForm"; import MsApiRequestForm from "../../../definition/components/request/http/ApiHttpRequestForm";
import MsRequestResultTail from "../../../definition/components/response/RequestResultTail"; import MsRequestResultTail from "../../../definition/components/response/RequestResultTail";
import MsRun from "../../../definition/components/Run"; import MsRun from "../../../definition/components/Run";
import {getUUID, getCurrentProjectID} from "@/common/js/utils"; import {getUUID, getCurrentProjectID} from "@/common/js/utils";
import ApiBaseComponent from "../common/ApiBaseComponent"; import ApiBaseComponent from "../common/ApiBaseComponent";
import ApiResponseComponent from "./ApiResponseComponent"; import ApiResponseComponent from "./ApiResponseComponent";
import CustomizeReqInfo from "@/business/components/api/automation/scenario/common/CustomizeReqInfo"; import CustomizeReqInfo from "@/business/components/api/automation/scenario/common/CustomizeReqInfo";
const requireComponent = require.context('@/business/components/xpack/', true, /\.vue$/); const requireComponent = require.context('@/business/components/xpack/', true, /\.vue$/);
const esbDefinition = (requireComponent != null && requireComponent.keys().length) > 0 ? requireComponent("./apidefinition/EsbDefinition.vue") : {}; const esbDefinition = (requireComponent != null && requireComponent.keys().length) > 0 ? requireComponent("./apidefinition/EsbDefinition.vue") : {};
const esbDefinitionResponse = (requireComponent != null && requireComponent.keys().length) > 0 ? requireComponent("./apidefinition/EsbDefinitionResponse.vue") : {}; const esbDefinitionResponse = (requireComponent != null && requireComponent.keys().length) > 0 ? requireComponent("./apidefinition/EsbDefinitionResponse.vue") : {};
export default { export default {
name: "MsApiComponent", name: "MsApiComponent",
props: { props: {
request: {}, request: {},
currentScenario: {}, currentScenario: {},
node: {}, node: {},
draggable: { draggable: {
type: Boolean, type: Boolean,
default: false, default: false,
},
isMax: {
type: Boolean,
default: false,
},
showBtn: {
type: Boolean,
default: true,
},
currentEnvironmentId: String,
projectList: Array,
expandedNode: Array,
envMap: Map
}, },
components: { isMax: {
CustomizeReqInfo, type: Boolean,
ApiBaseComponent, ApiResponseComponent, default: false,
MsSqlBasisParameters, MsTcpBasisParameters, MsDubboBasisParameters, MsApiRequestForm, MsRequestResultTail, MsRun,
"esbDefinition": esbDefinition.default,
"esbDefinitionResponse": esbDefinitionResponse.default
}, },
data() { showBtn: {
return { type: Boolean,
loading: false, default: true,
reportId: "",
runData: [],
isShowInput: false,
showXpackCompnent: false,
environment: {},
}
}, },
created() { currentEnvironmentId: String,
if (!this.request.requestResult) { projectList: Array,
this.request.requestResult = {responseResult: {}}; expandedNode: Array,
} envMap: Map
// IDID },
if (!this.request.projectId) { components: {
this.request.projectId = getCurrentProjectID(); CustomizeReqInfo,
} ApiBaseComponent, ApiResponseComponent,
this.request.customizeReq = this.isCustomizeReq; MsSqlBasisParameters, MsTcpBasisParameters, MsDubboBasisParameters, MsApiRequestForm, MsRequestResultTail, MsRun,
// "esbDefinition": esbDefinition.default,
this.getApiInfo(); "esbDefinitionResponse": esbDefinitionResponse.default
if (this.request.protocol === 'HTTP') { },
this.setUrl(this.request.url); data() {
this.setUrl(this.request.path); return {
// auth loading: false,
if (this.request.hashTree) { reportId: "",
for (let index in this.request.hashTree) { runData: [],
if (this.request.hashTree[index].type == 'AuthManager') { isShowInput: false,
this.request.authManager = this.request.hashTree[index]; showXpackCompnent: false,
this.request.hashTree.splice(index, 1); environment: {},
} }
},
created() {
if (!this.request.requestResult) {
this.request.requestResult = {responseResult: {}};
}
// IDID
if (!this.request.projectId) {
this.request.projectId = getCurrentProjectID();
}
this.request.customizeReq = this.isCustomizeReq;
//
this.getApiInfo();
if (this.request.protocol === 'HTTP') {
this.setUrl(this.request.url);
this.setUrl(this.request.path);
// auth
if (this.request.hashTree) {
for (let index in this.request.hashTree) {
if (this.request.hashTree[index].type == 'AuthManager') {
this.request.authManager = this.request.hashTree[index];
this.request.hashTree.splice(index, 1);
} }
} }
} }
if (requireComponent != null && JSON.stringify(esbDefinition) != '{}' && JSON.stringify(esbDefinitionResponse) != '{}') { }
this.showXpackCompnent = true; if (requireComponent != null && JSON.stringify(esbDefinition) != '{}' && JSON.stringify(esbDefinitionResponse) != '{}') {
} this.showXpackCompnent = true;
this.getEnvironments(); }
}, this.getEnvironments();
watch: { },
envMap() { watch: {
this.getEnvironments(); envMap() {
}, this.getEnvironments();
}, },
computed: { },
displayColor() { computed: {
if (this.isApiImport) { displayColor() {
return { if (this.isApiImport) {
color: "#F56C6C", return {
backgroundColor: "#FCF1F1" color: "#F56C6C",
} backgroundColor: "#FCF1F1"
} else if (this.isExternalImport) { }
return { } else if (this.isExternalImport) {
color: "#409EFF", return {
backgroundColor: "#EEF5FE" color: "#409EFF",
} backgroundColor: "#EEF5FE"
} else if (this.isCustomizeReq) { }
return { } else if (this.isCustomizeReq) {
color: "#008080", return {
backgroundColor: "#EBF2F2" color: "#008080",
} backgroundColor: "#EBF2F2"
} }
return {}; }
}, return {};
displayTitle() { },
if (this.isApiImport) { displayTitle() {
return this.$t('api_test.automation.api_list_import'); if (this.isApiImport) {
} else if (this.isExternalImport) { return this.$t('api_test.automation.api_list_import');
return this.$t('api_test.automation.external_import'); } else if (this.isExternalImport) {
} else if (this.isCustomizeReq) { return this.$t('api_test.automation.external_import');
return this.$t('api_test.automation.customize_req'); } else if (this.isCustomizeReq) {
} return this.$t('api_test.automation.customize_req');
return ""; }
}, return "";
isApiImport() { },
if (this.request.referenced != undefined && this.request.referenced === 'Deleted' || this.request.referenced == 'REF' || this.request.referenced === 'Copy') { isApiImport() {
return true if (this.request.referenced != undefined && this.request.referenced === 'Deleted' || this.request.referenced == 'REF' || this.request.referenced === 'Copy') {
} return true
return false; }
}, return false;
isExternalImport() { },
if (this.request.referenced != undefined && this.request.referenced === 'OT_IMPORT') { isExternalImport() {
return true if (this.request.referenced != undefined && this.request.referenced === 'OT_IMPORT') {
} return true
return false; }
}, return false;
isCustomizeReq() { },
if (this.request.referenced == undefined || this.request.referenced === 'Created') { isCustomizeReq() {
return true; if (this.request.referenced == undefined || this.request.referenced === 'Created') {
} return true;
return false; }
}, return false;
isDeletedOrRef() { },
if (this.request.referenced != undefined && this.request.referenced === 'Deleted' || this.request.referenced === 'REF') { isDeletedOrRef() {
return true; if (this.request.referenced != undefined && this.request.referenced === 'Deleted' || this.request.referenced === 'REF') {
} return true;
return false; }
}, return false;
projectId() { },
return this.$store.state.projectId; projectId() {
}, return this.$store.state.projectId;
}, },
methods: { },
initDataSource() { methods: {
let databaseConfigsOptions = []; initDataSource() {
if (this.request.protocol === 'SQL' || this.request.type === 'JDBCSampler') { let databaseConfigsOptions = [];
if (this.environment.config) { if (this.request.protocol === 'SQL' || this.request.type === 'JDBCSampler') {
let config = JSON.parse(this.environment.config); if (this.environment.config) {
config.databaseConfigs.forEach(item => { let config = JSON.parse(this.environment.config);
databaseConfigsOptions.push(item); config.databaseConfigs.forEach(item => {
}); databaseConfigsOptions.push(item);
} });
} }
if (databaseConfigsOptions.length > 0) { }
this.request.dataSourceId = databaseConfigsOptions[0].id; if (databaseConfigsOptions.length > 0) {
this.request.environmentId = this.environment.id; this.request.dataSourceId = databaseConfigsOptions[0].id;
} this.request.environmentId = this.environment.id;
}, }
getEnvironments() { },
this.environment = {}; getEnvironments() {
let id = this.envMap.get(this.request.projectId); this.environment = {};
if (id) { let id = this.envMap.get(this.request.projectId);
this.$get('/api/environment/get/' + id, response => { if (id) {
this.environment = response.data; this.$get('/api/environment/get/' + id, response => {
this.initDataSource(); this.environment = response.data;
}); this.initDataSource();
} });
}, }
remove() { },
this.$emit('remove', this.request, this.node); remove() {
}, this.$emit('remove', this.request, this.node);
copyRow() { },
this.$emit('copyRow', this.request, this.node); copyRow() {
}, this.$emit('copyRow', this.request, this.node);
setUrl(url) { },
try { setUrl(url) {
new URL(url); try {
this.request.url = url; new URL(url);
} catch (e) { this.request.url = url;
if (url && (!url.startsWith("http://") || !url.startsWith("https://"))) { } catch (e) {
if (!this.isCustomizeReq) { if (url && (!url.startsWith("http://") || !url.startsWith("https://"))) {
this.request.path = url; if (!this.isCustomizeReq) {
this.request.url = undefined; this.request.path = url;
} this.request.url = undefined;
} }
} }
}, }
getApiInfo() { },
if (this.request.id && this.request.referenced === 'REF') { getApiInfo() {
let requestResult = this.request.requestResult; if (this.request.id && this.request.referenced === 'REF') {
let url = this.request.refType && this.request.refType === 'CASE' ? "/api/testcase/get/" : "/api/definition/get/"; let requestResult = this.request.requestResult;
let enable = this.request.enable; let url = this.request.refType && this.request.refType === 'CASE' ? "/api/testcase/get/" : "/api/definition/get/";
this.$get(url + this.request.id, response => { let enable = this.request.enable;
if (response.data) { this.$get(url + this.request.id, response => {
Object.assign(this.request, JSON.parse(response.data.request)); if (response.data) {
this.request.name = response.data.name; Object.assign(this.request, JSON.parse(response.data.request));
this.request.enable = enable; this.request.name = response.data.name;
if (response.data.path && response.data.path != null) { this.request.referenced = "REF";
this.request.path = response.data.path; this.request.enable = enable;
this.request.url = response.data.url; if (response.data.path && response.data.path != null) {
this.setUrl(this.request.path); this.request.path = response.data.path;
} this.request.url = response.data.url;
if (response.data.method && response.data.method != null) { this.setUrl(this.request.path);
this.request.method = response.data.method; }
} if (response.data.method && response.data.method != null) {
this.request.requestResult = requestResult; this.request.method = response.data.method;
this.request.id = response.data.id; }
this.request.disabled = true; this.request.requestResult = requestResult;
this.request.root = true; this.request.id = response.data.id;
this.request.projectId = response.data.projectId; this.request.disabled = true;
this.reload(); this.request.root = true;
this.sort(); this.request.projectId = response.data.projectId;
} else { this.reload();
this.request.referenced = "Deleted"; this.sort();
} } else {
}) this.request.referenced = "Deleted";
} }
}, })
recursiveSorting(arr) { }
for (let i in arr) { },
arr[i].disabled = true; recursiveSorting(arr) {
arr[i].index = Number(i) + 1; for (let i in arr) {
if (!arr[i].resourceId) { arr[i].disabled = true;
arr[i].resourceId = getUUID(); arr[i].index = Number(i) + 1;
} if (!arr[i].resourceId) {
if (arr[i].hashTree != undefined && arr[i].hashTree.length > 0) { arr[i].resourceId = getUUID();
this.recursiveSorting(arr[i].hashTree); }
} if (arr[i].hashTree != undefined && arr[i].hashTree.length > 0) {
} this.recursiveSorting(arr[i].hashTree);
}, }
sort() { }
for (let i in this.request.hashTree) { },
if (!this.request.hashTree[i].resourceId) { sort() {
this.request.hashTree[i].resourceId = getUUID(); for (let i in this.request.hashTree) {
} if (!this.request.hashTree[i].resourceId) {
this.request.hashTree[i].disabled = true; this.request.hashTree[i].resourceId = getUUID();
this.request.hashTree[i].index = Number(i) + 1; }
if (this.request.hashTree[i].hashTree != undefined && this.request.hashTree[i].hashTree.length > 0) { this.request.hashTree[i].disabled = true;
this.recursiveSorting(this.request.hashTree[i].hashTree); this.request.hashTree[i].index = Number(i) + 1;
} if (this.request.hashTree[i].hashTree != undefined && this.request.hashTree[i].hashTree.length > 0) {
} this.recursiveSorting(this.request.hashTree[i].hashTree);
}, }
active(item) { }
this.request.active = !this.request.active; },
if (this.node) { active(item) {
this.node.expanded = this.request.active; this.request.active = !this.request.active;
} if (this.node) {
if (this.node.expanded && this.expandedNode.indexOf(this.request.resourceId) === -1) { this.node.expanded = this.request.active;
this.expandedNode.push(this.request.resourceId); }
} else { if (this.node.expanded && this.expandedNode.indexOf(this.request.resourceId) === -1) {
if (this.expandedNode.indexOf(this.request.resourceId) !== -1) { this.expandedNode.push(this.request.resourceId);
this.expandedNode.splice(this.expandedNode.indexOf(this.request.resourceId), 1); } else {
} if (this.expandedNode.indexOf(this.request.resourceId) !== -1) {
} this.expandedNode.splice(this.expandedNode.indexOf(this.request.resourceId), 1);
this.reload(); }
}, }
run() { this.reload();
if (this.isApiImport || this.request.isRefEnvironment) { },
if (this.request.type && (this.request.type === "HTTPSamplerProxy" || this.request.type === "JDBCSampler" || this.request.type === "TCPSampler")) { run() {
if (!this.envMap || this.envMap.size === 0) { if (this.isApiImport || this.request.isRefEnvironment) {
this.$warning("请在环境配置中为该步骤所属项目选择运行环境!"); if (this.request.type && (this.request.type === "HTTPSamplerProxy" || this.request.type === "JDBCSampler" || this.request.type === "TCPSampler")) {
return false; if (!this.envMap || this.envMap.size === 0) {
} else if (this.envMap && this.envMap.size > 0) { this.$warning("请在环境配置中为该步骤所属项目选择运行环境!");
const env = this.envMap.get(this.request.projectId); return false;
if (!env) { } else if (this.envMap && this.envMap.size > 0) {
this.$warning("请在环境配置中为该步骤所属项目选择运行环境!"); const env = this.envMap.get(this.request.projectId);
return false; if (!env) {
} this.$warning("请在环境配置中为该步骤所属项目选择运行环境!");
} return false;
} }
} }
this.request.active = true; }
this.loading = true; }
this.runData = []; this.request.active = true;
this.runData.projectId = this.request.projectId; this.loading = true;
this.request.useEnvironment = this.currentEnvironmentId; this.runData = [];
this.request.customizeReq = this.isCustomizeReq; this.runData.projectId = this.request.projectId;
let debugData = { this.request.useEnvironment = this.currentEnvironmentId;
id: this.currentScenario.id, name: this.currentScenario.name, type: "scenario", this.request.customizeReq = this.isCustomizeReq;
variables: this.currentScenario.variables, referenced: 'Created', headers: this.currentScenario.headers, let debugData = {
enableCookieShare: this.enableCookieShare, environmentId: this.currentEnvironmentId, hashTree: [this.request], id: this.currentScenario.id, name: this.currentScenario.name, type: "scenario",
}; variables: this.currentScenario.variables, referenced: 'Created', headers: this.currentScenario.headers,
this.runData.push(debugData); enableCookieShare: this.enableCookieShare, environmentId: this.currentEnvironmentId, hashTree: [this.request],
/*触发执行操作*/ };
this.reportId = getUUID(); this.runData.push(debugData);
}, /*触发执行操作*/
errorRefresh() { this.reportId = getUUID();
this.loading = false; },
}, errorRefresh() {
runRefresh(data) { this.loading = false;
this.request.requestResult = data; },
this.request.result = undefined; runRefresh(data) {
this.loading = false; this.request.requestResult = data;
this.$emit('refReload', this.request, this.node); this.request.result = undefined;
}, this.loading = false;
reload() { this.$emit('refReload', this.request, this.node);
this.loading = true },
this.$nextTick(() => { reload() {
this.loading = false this.loading = true
}) this.$nextTick(() => {
}, this.loading = false
getProjectName(id) { })
if (this.projectId !== id) { },
const project = this.projectList.find(p => p.id === id); getProjectName(id) {
return project ? project.name : ""; if (this.projectId !== id) {
} const project = this.projectList.find(p => p.id === id);
return project ? project.name : "";
} }
} }
} }
}
</script> </script>
<style scoped> <style scoped>
.ms-api-col-ot-import-button { .ms-api-col-ot-import-button {
background-color: #EEF5FE; background-color: #EEF5FE;
margin-right: 20px; margin-right: 20px;
color: #409EFF; color: #409EFF;
} }
/deep/ .el-card__body { /deep/ .el-card__body {
padding: 10px; padding: 10px;
} }
.tip { .tip {
padding: 3px 5px; padding: 3px 5px;
font-size: 16px; font-size: 16px;
border-radius: 4px; border-radius: 4px;
border-left: 4px solid #783887; border-left: 4px solid #783887;
margin: 20px 0; margin: 20px 0;
} }
.icon.is-active { .icon.is-active {
transform: rotate(90deg); transform: rotate(90deg);
} }
.ms-tabs >>> .el-icon-close:before { .ms-tabs >>> .el-icon-close:before {
content: ""; content: "";
} }
.ms-btn { .ms-btn {
background-color: #409EFF; background-color: #409EFF;
color: white; color: white;
} }
.ms-btn-flot { .ms-btn-flot {
margin: 20px; margin: 20px;
float: right; float: right;
} }
.ms-tag { .ms-tag {
margin-left: 20px; margin-left: 20px;
} }
</style> </style>