test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(接口自动化): 场景步骤另存新的接口及用例

This commit is contained in:
fit2-zhao 2021-03-16 18:03:33 +08:00
parent 99c46579fd
commit e88f467105
15 changed files with 865 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
View File

@ -119,7 +119,7 @@
:project-list="projectList" ref="envPopover"/>
</el-col>
<el-col :span="3">
<el-button :disabled="scenarioDefinition.length < 1" size="small" type="primary" v-prevent-re-click @click="runDebug">{{$t('api_test.request.debug')}}</el-button>
<el-button :disabled="scenarioDefinition.length < 1" size="mini" type="primary" v-prevent-re-click @click="runDebug">{{$t('api_test.request.debug')}}</el-button>
<font-awesome-icon class="alt-ico" :icon="['fa', 'expand-alt']" size="lg" @click="fullScreen"/>
</el-col>
</el-row>
@ -201,7 +201,7 @@
@closePage="close" @showAllBtn="showAllBtn" @runDebug="runDebug" @setProjectEnvMap="setProjectEnvMap" @showScenarioParameters="showScenarioParameters" ref="maximizeHeader"/>
</template>
<maximize-scenario :scenario-definition="scenarioDefinition" :moduleOptions="moduleOptions" :currentScenario="currentScenario" :type="type" ref="maximizeScenario"/>
<maximize-scenario :scenario-definition="scenarioDefinition" :moduleOptions="moduleOptions" :currentScenario="currentScenario" :type="type" ref="maximizeScenario" @openScenario="openScenario"/>
</ms-drawer>
</div>
@ -732,9 +732,6 @@
this.loading = false
})
},
runDebugMax() {
this.$refs.maximizeScenario.runDebug();
},
runDebug() {
/*触发执行操作*/
let sign = this.$refs.envPopover.checkEnv();

284
frontend/src/business/components/api/automation/scenario/api/AddBasisApi.vue Normal file
View File

@ -0,0 +1,284 @@
<template>
<el-dialog :close-on-click-modal="false" :title="$t('api_test.definition.request.title')" :visible.sync="httpVisible"
width="45%"
:destroy-on-close="true" append-to-body>
<el-form :model="httpForm" label-position="right" label-width="80px" size="small" :rules="rule" ref="httpForm" v-if="!loading">
<el-form-item :label="$t('commons.name')" prop="name">
<el-input v-model="httpForm.name" autocomplete="off" :placeholder="$t('commons.name')"/>
</el-form-item>
<!--HTTP 协议特有参数-->
<el-form-item :label="$t('api_report.request')" prop="path" v-if="currentProtocol==='HTTP'">
<el-input :placeholder="$t('api_test.definition.request.path_info')" v-model="httpForm.path"
class="ms-http-input" size="small">
<el-select v-model="httpForm.method" slot="prepend" style="width: 100px" size="small">
<el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id"/>
</el-select>
</el-input>
</el-form-item>
<el-form-item :label="$t('api_test.definition.request.responsible')" prop="userId">
<el-select v-model="httpForm.userId"
:placeholder="$t('api_test.definition.request.responsible')" filterable size="small"
style="width: 100%">
<el-option
v-for="item in maintainerOptions"
:key="item.id"
:label="item.id + ' (' + item.name + ')'"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('test_track.module.module')" prop="moduleId">
<ms-select-tree size="small" :data="moduleOptions" @getValue="setModule" :obj="moduleObj" clearable checkStrictly/>
</el-form-item>
<el-form-item :label="$t('commons.description')" prop="description" style="margin-bottom: 29px">
<el-input class="ms-http-textarea" v-model="httpForm.description"
type="textarea"
:autosize="{ minRows: 2, maxRows: 10}"
:rows="2" size="small"/>
</el-form-item>
<el-form-item class="create-tip">
{{$t('api_test.definition.create_tip')}}
</el-form-item>
</el-form>
<template v-slot:footer>
<ms-dialog-footer
@cancel="httpVisible = false"
@confirm="saveApi" v-prevent-re-click>
</ms-dialog-footer>
</template>
</el-dialog>
</template>
<script>
import MsDialogFooter from "../../../../common/components/MsDialogFooter";
import {WORKSPACE_ID} from '../../../../../../common/js/constants';
import {REQ_METHOD} from "../../../definition/model/JsonData";
import {getCurrentProjectID, getCurrentUser} from "@/common/js/utils";
import {createComponent, Request} from "../../../definition/components/jmeter/components";
import {getUUID} from "@/common/js/utils";
import MsSelectTree from "@/business/components/common/select-tree/SelectTree";
export default {
name: "MsAddBasisApi",
components: {MsDialogFooter, MsSelectTree},
props: {
currentProtocol: {
type: String,
default: "HTTP"
},
},
data() {
let validateURL = (rule, value, callback) => {
if (!this.httpForm.path.startsWith("/") || this.httpForm.path.match(/\s/) != null) {
callback(this.$t('api_test.definition.request.path_valid_info'));
}
callback();
};
return {
httpForm: {environmentId: ""},
moduleOptions: [],
httpVisible: false,
currentModule: {},
maintainerOptions: [],
loading: false,
moduleObj: {
id: 'id',
label: 'name',
},
rule: {
name: [
{required: true, message: this.$t('test_track.case.input_name'), trigger: 'blur'},
{max: 100, message: this.$t('test_track.length_less_than') + '100', trigger: 'blur'}
],
path: [{required: true, message: this.$t('api_test.definition.request.path_info'), trigger: 'blur'}, {validator: validateURL, trigger: 'blur'}],
userId: [{required: true, message: this.$t('test_track.case.input_maintainer'), trigger: 'change'}],
// moduleId: [{required: true, message: this.$t('test_track.module.module'), trigger: 'change'}],
},
value: REQ_METHOD[0].id,
options: REQ_METHOD,
}
}
,
methods: {
saveApi() {
this.$refs['httpForm'].validate((valid) => {
if (valid) {
if (this.httpForm.path && this.httpForm.path.match(/\s/) != null) {
this.$error(this.$t("api_test.definition.request.path_valid_info"));
return false;
}
this.save(this.httpForm);
} else {
return false;
}
})
},
save(data) {
this.setParameters(data);
let bodyFiles = this.getBodyUploadFiles(data);
this.$fileUpload("/api/definition/create", null, bodyFiles, data, () => {
this.saveCase(data);
});
},
saveCase(api) {
let obj = {apiDefinitionId: api.id, name: api.name, priority: 'P0', active: true, uuid: getUUID(), request: api.request};
obj.projectId = getCurrentProjectID();
obj.id = obj.uuid;
let url = "/api/testcase/create";
let bodyFiles = this.getBodyUploadFiles(obj);
this.$fileUpload(url, null, bodyFiles, obj, (response) => {
this.$success(this.$t('commons.save_success'));
this.httpVisible = false;
});
},
setParameters(data) {
data.projectId = getCurrentProjectID();
data.request.name = data.name;
if (data.protocol === "DUBBO" || data.protocol === "dubbo://") {
data.request.protocol = "dubbo://";
}
data.id = data.request.id;
if (!data.method) {
data.method = data.protocol;
}
},
getBodyUploadFiles(data) {
let bodyUploadFiles = [];
data.bodyUploadIds = [];
let request = data.request;
if (request.body) {
if (request.body.kvs) {
request.body.kvs.forEach(param => {
if (param.files) {
param.files.forEach(item => {
if (item.file) {
let fileId = getUUID().substring(0, 8);
item.name = item.file.name;
item.id = fileId;
data.bodyUploadIds.push(fileId);
bodyUploadFiles.push(item.file);
}
});
}
});
}
if (request.body.binary) {
request.body.binary.forEach(param => {
if (param.files) {
param.files.forEach(item => {
if (item.file) {
let fileId = getUUID().substring(0, 8);
item.name = item.file.name;
item.id = fileId;
data.bodyUploadIds.push(fileId);
bodyUploadFiles.push(item.file);
}
});
}
});
}
}
return bodyUploadFiles;
},
setParameter() {
switch (this.currentProtocol) {
case Request.TYPES.SQL:
this.initSQL();
break;
case Request.TYPES.DUBBO:
this.initDUBBO();
break;
case Request.TYPES.TCP:
this.initTCP();
break;
default:
this.initHTTP();
break;
}
this.httpForm.bodyUploadIds = [];
this.httpForm.projectId = getCurrentProjectID();
this.httpForm.id = this.httpForm.request.id;
this.httpForm.protocol = this.currentProtocol;
this.httpForm.request.name = this.httpForm.name;
this.httpForm.request.protocol = this.currentProtocol;
if (this.currentProtocol === 'HTTP') {
this.httpForm.request.method = this.httpForm.method;
this.httpForm.request.path = this.httpForm.path;
}
if (this.currentModule != null) {
this.httpForm.modulePath = this.currentModule.method != undefined ? this.currentModule.method : null;
this.httpForm.moduleId = this.currentModule.id;
}
},
initHTTP() {
let request = createComponent("HTTPSamplerProxy");
request.path = this.httpForm.path;
this.httpForm.request = request;
},
initSQL() {
this.httpForm.method = Request.TYPES.SQL;
this.httpForm.request = createComponent("JDBCSampler");
},
initTCP() {
this.httpForm.method = Request.TYPES.TCP;
this.httpForm.request = createComponent("TCPSampler");
},
initDUBBO() {
this.httpForm.method = "dubbo://";
this.httpForm.request = createComponent("DubboSampler");
},
getMaintainerOptions() {
let workspaceId = localStorage.getItem(WORKSPACE_ID);
this.$post('/user/ws/member/tester/list', {workspaceId: workspaceId}, response => {
this.maintainerOptions = response.data;
});
},
list(data) {
let url = "/api/module/list/" + getCurrentProjectID() + "/" + data.protocol;
this.result = this.$get(url, response => {
if (response.data != undefined && response.data != null) {
this.moduleOptions = response.data;
}
});
},
setModule(id) {
this.httpForm.moduleId = id;
//this.reload();
},
reload() {
this.loading = true
this.$nextTick(() => {
this.loading = false
})
},
open(api) {
if (api) {
let data = JSON.parse(JSON.stringify(api));
data.id = getUUID();
this.httpForm = {id: data.id, name: data.name, protocol: data.protocol, path: data.path, method: REQ_METHOD[0].id, userId: getCurrentUser().id, request: data};
this.getMaintainerOptions();
this.list(data);
this.httpVisible = true;
}
},
}
}
</script>
<style scoped>
.create-tip {
color: #8c939d;
}
</style>

22
frontend/src/business/components/api/automation/scenario/common/ApiBaseComponent.vue
View File

@ -5,7 +5,7 @@
<div v-if="data.index" class="el-step__icon is-text" style="margin-right: 10px;" :style="{'color': color, 'background-color': backgroundColor}">
<div class="el-step__icon-inner">{{data.index}}</div>
</div>
<el-button class="ms-left-buttion" size="mini" :style="{'color': color, 'background-color': backgroundColor}">{{title}}</el-button>
<el-tag class="ms-left-buttion" size="small" :style="{'color': color, 'background-color': backgroundColor}">{{title}}</el-tag>
<el-tag size="mini" v-if="data.method">{{data.method}}</el-tag>
</slot>
@ -15,12 +15,6 @@
@click="active(data)" v-if="data.type!='scenario' && !isMax "/>
<el-input :draggable="draggable" v-if="isShowInput && isShowNameInput" size="mini" v-model="data.name" class="name-input"
@blur="isShowInput = false" :placeholder="$t('commons.input_name')" ref="nameEdit" :disabled="data.disabled"/>
<!--最大化显示-->
<span v-else-if="isMax">
<el-tooltip :content="data.name" placement="top">
<span>{{data.name}}</span>
</el-tooltip>
</span>
<span v-else>
{{data.name}}
<i class="el-icon-edit" style="cursor:pointer" @click="editName" v-tester v-if="data.referenced!='REF' && !data.disabled"/>
@ -32,7 +26,7 @@
<div class="header-right" @click.stop>
<slot name="message"></slot>
<el-tooltip :content="$t('test_resource_pool.enable_disable')" placement="top" v-if="showBtn">
<el-switch v-model="data.enable" class="enable-switch"/>
<el-switch v-model="data.enable" class="enable-switch" size="mini"/>
</el-tooltip>
<slot name="button"></slot>
<step-extend-btns style="display: contents" :data="data" @copy="copyRow" @remove="remove" @openScenario="openScenario" v-if="showBtn"/>
@ -56,6 +50,7 @@
<script>
import StepExtendBtns from "../component/StepExtendBtns";
import {ELEMENTS} from "../Setting";
export default {
name: "ApiBaseComponent",
@ -119,6 +114,11 @@
if (this.data && this.data.type === "JmeterElement") {
this.data.active = false;
}
if (this.data && ELEMENTS.get("AllSamplerProxy").indexOf(this.data.type) != -1) {
if (!this.data.method) {
this.data.method = this.data.protocol;
}
}
},
methods: {
active() {
@ -184,6 +184,12 @@
width: 100px;
}
/deep/ .el-step__icon {
width: 20px;
height: 20px;
font-size: 12px;
}
fieldset {
padding: 0px;
margin: 0px;

12
frontend/src/business/components/api/automation/scenario/component/ApiComponent.vue
View File

@ -6,7 +6,7 @@
@active="active"
:is-show-name-input="!isDeletedOrRef"
:data="request"
:draggable="true"
:draggable="draggable"
:color="displayColor.color"
:background-color="displayColor.backgroundColor"
:is-max="isMax"
@ -328,7 +328,7 @@
}
/deep/ .el-card__body {
padding: 15px;
padding: 10px;
}
.tip {
@ -339,14 +339,6 @@
margin: 20px 0;
}
.name-input {
width: 30%;
}
.el-icon-arrow-right {
margin-right: 5px;
}
.icon.is-active {
transform: rotate(90deg);
}

6
frontend/src/business/components/api/automation/scenario/component/ComponentConfig.vue
View File

@ -2,7 +2,7 @@
<div class="request-form">
<component :is="component" :isMax="isMax" :show-btn="showBtn"
:scenario="scenario" :controller="scenario" :timer="scenario" :assertions="scenario" :extract="scenario" :jsr223-processor="scenario" :request="scenario" :currentScenario="currentScenario" :currentEnvironmentId="currentEnvironmentId" :node="node"
:draggable="true" :title="title" :color="titleColor" :background-color="backgroundColor" @suggestClick="suggestClick(node)" :response="response"
:draggable="draggable" :title="title" :color="titleColor" :background-color="backgroundColor" @suggestClick="suggestClick(node)" :response="response"
@remove="remove" @copyRow="copyRow" @refReload="refReload" @openScenario="openScenario" :project-list="projectList" :env-map="envMap"/>
</div>
</template>
@ -25,6 +25,10 @@
props: {
type: String,
scenario: {},
draggable: {
type: Boolean,
default: true,
},
isMax: {
type: Boolean,
default: false,

4
frontend/src/business/components/api/automation/scenario/component/ConstantTimer.vue
View File

@ -3,7 +3,7 @@
@copy="copyRow"
@remove="remove"
:data="timer"
:draggable="true"
:draggable="draggable"
:show-collapse="false"
:is-max="isMax"
color="#67C23A"
@ -11,7 +11,7 @@
:title="$t('api_test.automation.wait_controller')">
<template v-slot:headerLeft>
<el-input-number class="time-input" size="small" v-model="timer.delay" :min="0" :step="1000" ref="nameInput"/>
<el-input-number class="time-input" size="mini" v-model="timer.delay" :min="0" :step="1000" ref="nameInput"/>
ms
</template>

8
frontend/src/business/components/api/automation/scenario/component/IfController.vue
View File

@ -4,7 +4,7 @@
@remove="remove"
:data="controller"
:show-collapse="false"
:draggable="true"
:draggable="draggable"
:is-max="isMax"
:show-btn="showBtn"
color="#E6A23C"
@ -13,14 +13,14 @@
<template v-slot:headerLeft>
<el-input draggable size="small" v-model="controller.variable" style="width: 20%" :placeholder="$t('api_test.request.condition_variable')"/>
<el-input draggable size="mini" v-model="controller.variable" style="width: 20%" :placeholder="$t('api_test.request.condition_variable')"/>
<el-select v-model="controller.operator" :placeholder="$t('commons.please_select')" size="small"
<el-select v-model="controller.operator" :placeholder="$t('commons.please_select')" size="mini"
@change="change" class="ms-select">
<el-option v-for="o in operators" :key="o.value" :label="$t(o.label)" :value="o.value"/>
</el-select>
<el-input draggable size="small" v-model="controller.value" :placeholder="$t('api_test.value')" v-if="!hasEmptyOperator" class="ms-btn"/>
<el-input draggable size="mini" v-model="controller.value" :placeholder="$t('api_test.value')" v-if="!hasEmptyOperator" class="ms-btn"/>
</template>
</api-base-component>

15
frontend/src/business/components/api/automation/scenario/component/LoopController.vue
View File

@ -6,7 +6,7 @@
@copy="copyRow"
@remove="remove"
:data="controller"
:draggable="true"
:draggable="draggable"
:is-max="isMax"
:show-btn="showBtn"
color="#02A7F0"
@ -15,9 +15,9 @@
<template v-slot:headerLeft>
<i class="icon el-icon-arrow-right" :class="{'is-active': controller.active}" @click="active(controller)" style="margin-right: 10px" v-if="!isMax"/>
<el-radio @change="changeRadio" class="ms-radio" v-model="controller.loopType" label="LOOP_COUNT">{{$t('loop.loops_title')}}</el-radio>
<el-radio @change="changeRadio" class="ms-radio" v-model="controller.loopType" label="FOREACH">{{$t('loop.foreach')}}</el-radio>
<el-radio @change="changeRadio" class="ms-radio" v-model="controller.loopType" label="WHILE">{{$t('loop.while')}}</el-radio>
<el-radio @change="changeRadio" class="ms-radio ms-radio-margin" v-model="controller.loopType" label="LOOP_COUNT">{{$t('loop.loops_title')}}</el-radio>
<el-radio @change="changeRadio" class="ms-radio ms-radio-margin" v-model="controller.loopType" label="FOREACH">{{$t('loop.foreach')}}</el-radio>
<el-radio @change="changeRadio" class="ms-radio ms-radio-margin" v-model="controller.loopType" label="WHILE">{{$t('loop.while')}}</el-radio>
</template>
<template v-slot:message>
@ -114,9 +114,6 @@ export default {
},
envMap: Map
},
created() {
// this.initResult();
},
data() {
return {
loading: false,
@ -344,4 +341,8 @@ export default {
.icon.is-active {
transform: rotate(90deg);
}
/deep/ .el-radio {
margin-right: 5px;
}
</style>

21
frontend/src/business/components/api/automation/scenario/component/StepExtendBtns.vue
View File

@ -13,7 +13,7 @@
</el-dropdown-menu>
</el-dropdown>
<ms-variable-list ref="scenarioParameters"/>
<ms-add-basis-api ref="api"/>
</div>
</template>
@ -21,10 +21,11 @@
import {getCurrentProjectID, getUUID} from "@/common/js/utils";
import {ELEMENTS} from "../Setting";
import MsVariableList from "../variable/VariableList";
import MsAddBasisApi from "../api/AddBasisApi";
export default {
name: "StepExtendBtns",
components: {ELEMENTS, MsVariableList},
components: {ELEMENTS, MsVariableList, MsAddBasisApi},
props: {
data: Object,
},
@ -46,13 +47,25 @@
this.$refs.scenarioParameters.open(this.data.variables, this.data.headers, true);
break;
case "openScenario":
this.$emit('openScenario', this.data);
this.getScenario();
break;
case "saveAs":
this.$emit('copy');
this.saveAsApi();
break;
}
},
getScenario() {
this.result = this.$get("/api/automation/getApiScenario/" + this.data.id, response => {
if (response.data) {
this.$emit('openScenario', response.data);
} else {
this.$error("引用场景已经被删除");
}
});
},
saveAsApi(){
this.$refs.api.open(this.data);
}
}
}
</script>

59
frontend/src/business/components/api/automation/scenario/maximize/MaximizeScenario.vue
View File

@ -2,7 +2,7 @@
<div>
<!-- 场景步骤-->
<ms-container>
<ms-aside-container width="600px" class="scenario-aside">
<ms-aside-container>
<!-- 场景步骤内容 -->
<div v-loading="loading">
<el-tree node-key="resourceId" :props="props" :data="scenarioDefinition"
@ -16,7 +16,7 @@
<!-- 步骤组件-->
<ms-component-config :isMax="true" :type="data.type" :scenario="data" :response="response" :currentScenario="currentScenario"
:currentEnvironmentId="currentEnvironmentId" :node="node" :project-list="projectList" :env-map="projectEnvMap"
@remove="remove" @copyRow="copyRow" @suggestClick="suggestClick" @refReload="refReload"/>
@remove="remove" @copyRow="copyRow" @suggestClick="suggestClick" @refReload="refReload" @openScenario="openScenario"/>
</span>
</el-tree>
@ -41,15 +41,35 @@
<ms-main-container>
<!-- 第一层当前节点内容-->
<ms-component-config :isMax="false" :showBtn="false" :type="selectedTreeNode.type" :scenario="selectedTreeNode" :response="response" :currentScenario="currentScenario"
:currentEnvironmentId="currentEnvironmentId" :node="selectedNode" :project-list="projectList" :env-map="projectEnvMap"
@remove="remove" @copyRow="copyRow" @suggestClick="suggestClick" @refReload="refReload" v-if="selectedTreeNode && selectedNode"/>
<ms-component-config :isMax="false"
:showBtn="false"
:type="selectedTreeNode.type"
:scenario="selectedTreeNode"
:response="response"
:currentScenario="currentScenario"
:currentEnvironmentId="currentEnvironmentId"
:node="selectedNode"
:project-list="projectList"
:env-map="projectEnvMap"
:draggable="false"
@remove="remove" @copyRow="copyRow" @suggestClick="suggestClick" @refReload="refReload" @openScenario="openScenario"
v-if="selectedTreeNode && selectedNode"/>
<!-- 请求下还有的子步骤-->
<div v-if="selectedTreeNode && selectedTreeNode.hashTree && showNode(selectedTreeNode)">
<div v-for="item in selectedTreeNode.hashTree" :key="item.id" class="ms-col-one">
<ms-component-config :showBtn="false" :isMax="false" :type="item.type" :scenario="item" :response="response" :currentScenario="currentScenario"
:currentEnvironmentId="currentEnvironmentId" :project-list="projectList" :env-map="projectEnvMap"
@remove="remove" @copyRow="copyRow" @suggestClick="suggestClick" @refReload="refReload" v-if="selectedTreeNode && selectedNode"/>
<ms-component-config :showBtn="false"
:isMax="false"
:type="item.type"
:scenario="item"
:response="response"
:currentScenario="currentScenario"
:currentEnvironmentId="currentEnvironmentId"
:project-list="projectList"
:env-map="projectEnvMap"
:draggable="false"
@remove="remove" @copyRow="copyRow" @suggestClick="suggestClick"
@refReload="refReload" @openScenario="openScenario"
v-if="selectedTreeNode && selectedNode"/>
</div>
</div>
@ -120,7 +140,7 @@
import EnvPopover from "@/business/components/api/automation/scenario/EnvPopover";
import MsContainer from "../../../../common/components/MsContainer";
import MsMainContainer from "../../../../common/components/MsMainContainer";
import MsAsideContainer from "../../../../common/components/MsAsideContainer";
import MsAsideContainer from "./MsLeftContainer";
let jsonPath = require('jsonpath');
export default {
@ -319,6 +339,10 @@
}
},
methods: {
// 打开引用的场景
openScenario(data) {
this.$emit('openScenario', data);
},
removeListener() {
document.removeEventListener("keydown", this.createCtrlSHandle);
},
@ -1038,12 +1062,29 @@
}
.scenario-aside {
min-width: 400px;
position: relative;
border-radius: 4px;
border: 1px solid #EBEEF5;
box-sizing: border-box;
}
.scenario-main {
position: relative;
margin-left: 20px;
border: 1px solid #EBEEF5;
}
.scenario-list {
overflow-y: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 28px;
}
.father:hover .child {
display: block;
}

55
frontend/src/business/components/api/automation/scenario/maximize/MsLeftContainer.vue Normal file
View File

@ -0,0 +1,55 @@
<template>
<el-aside class="ms-aside-container">
<slot></slot>
<ms-horizontal-drag-bar/>
</el-aside>
</template>
<script>
import MsHorizontalDragBar from "../../../../../components/common/components/dragbar/MsLeft2RightDragBar";
export default {
name: "MsLeftContainer",
components: {MsHorizontalDragBar},
props: {
width: {
type: String,
default: '500px'
},
enableAsideHidden: {
type: Boolean,
default: true
},
},
data() {
return {
asideHidden: false
}
}
}
</script>
<style scoped>
.ms-aside-container {
border: 1px solid #E6E6E6;
padding: 10px;
min-width: 600px;
border-radius: 2px;
box-sizing: border-box;
background-color: #FFF;
height: calc(100vh - 60px);
border-right: 0px;
position: relative;
}
.hiddenBottom i {
margin-left: -2px;
}
.hiddenBottom:hover i {
margin-left: 0;
color: white;
}
</style>

6
frontend/src/business/components/common/head/HeaderTopMenus.vue
View File

@ -29,6 +29,8 @@
</template>
<script>
import {LicenseKey} from '@/common/js/constants';
const requireContext = require.context('@/business/components/xpack/', true, /router\.js$/)
const report = requireContext.keys().map(key => requireContext(key).report);
const isReport = report && report != null && report.length > 0 && report[0] != undefined ? true : false;
@ -55,6 +57,10 @@
if (this.$route.matched.length > 0) {
this.activeIndex = this.$route.matched[0].path;
}
let license = localStorage.getItem(LicenseKey);
if (license != "valid") {
this.isReport = false;
}
},
methods: {
handleSelect(index) {

390
frontend/src/business/components/common/select-tree/SelectTree.vue Normal file
View File

@ -0,0 +1,390 @@
<template>
<div>
<div class="mask" v-show="isShowSelect"></div>
<el-popover placement="bottom-start" :width="popoverWidth" trigger="manual" v-model="isShowSelect" @hide="popoverHide" v-outside-click="outsideClick">
<el-input
size="mini"
prefix-icon="el-icon-search"
v-model="filterText">
</el-input>
<el-tree class="common-tree" :width="width" ref="tree" :data="treeData" :props="obj"
:show-checkbox="multiple"
:node-key="obj.id"
:check-strictly="checkStrictly"
:expand-on-click-node="multiple&&expandClickNode"
:check-on-click-node="checkClickNode"
:highlight-current="true"
@check-change="nodeClick"
:filter-node-method="filterNode"
@node-click="nodeClick"/>
<el-select slot="reference" ref="select" :size="size"
v-model="returnDataKeys"
:multiple="multiple"
:clearable="clearable"
:collapse-tags="collapseTags"
:disabled="disabled"
@click.native="selectClick"
@remove-tag="removeTag"
@clear="clean"
class="ms-tree-select">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<el-row>
<el-button v-if="multiple" class="ok" @click="isShowSelect=false" size="mini" type="text">{{$t('commons.confirm')}}</el-button>
</el-row>
</el-popover>
</div>
</template>
<script>
import OutsideClick from "@/common/js/outside-click";
export default {
name: 'test-code',
directives: {OutsideClick},
props: {
// 树结构数据
data: {
type: Array,
default() {
return [];
}
},
obj: {
type: Object,
required: false,
default: () => {
return {
id: 'id',// ID
label: 'name',// 显示名称
children: 'children', //子级字段名
path: 'path',//路径
content: 'content',//描述
pid: 'pid',//父id
}
}
},
disabled: {
type: Boolean,
default: false,
},
// 配置是否可多选
multiple: {
type: Boolean,
default() {
return false;
}
},
// 配置是否可清空选择
clearable: {
type: Boolean,
default() {
return false;
}
},
// 配置多选时是否将选中值按文字的形式展示
collapseTags: {
type: Boolean,
default() {
return false;
}
},
// 显示复选框情况下，是否严格遵循父子不互相关联
checkStrictly: {
type: Boolean,
default() {
return false;
}
},
//多选是设置点击节点是否可以选中
checkClickNode: {
type: Boolean,
default() {
return false;
}
},
//多选时：点击节点展开还是点三角标
expandClickNode: {
type: Boolean,
default() {
return false;
}
},
// 默认选中的节点key
defaultKey: {
type: [Number, String, Array, Object],
default() {
return [];
}
},
size: {
type: String,
default() {
return 'small';
}
},
width: {
type: String,
default() {
return '100%';
}
},
height: {
type: String,
default() {
return '300px';
}
}
},
//上面是父组件可传入参数
data() {
return {
popoverWidth: "0px",//下拉框大小
isShowSelect: false, // 是否显示树状选择器
options: [],//select option选项
returnDatas: [],//返回给父组件数组对象
returnDataKeys: [],//返回父组件数组主键值
filterText: "",
};
},
computed: {
treeData() { // 若非树状结构，则转化为树状结构数据
return JSON.stringify(this.data).indexOf(this.obj.children) !== -1 ? this.data : this.switchTree();
},
},
methods: {
outsideClick(e) {
e.stopPropagation();
this.isShowSelect=false;
},
init() {
if (this.defaultKey != undefined && this.defaultKey.length > 0) {
if (this.multiple) {
// 多选
if (Object.prototype.toString.call(this.defaultKey).indexOf("Array") != -1) {
if (Object.prototype.toString.call(this.defaultKey[0]).indexOf("Object") != -1) {//对象
this.setDatas(this.defaultKey);
} else if (Object.prototype.toString.call(this.defaultKey[0]).indexOf("Number") != -1
|| Object.prototype.toString.call(this.defaultKey[0]).indexOf("String") != -1) {
this.setKeys(this.defaultKey);
} else {
console.log("多选：传入参数类型不匹配");
return;
}
} else {
console.log("多选：传入参数类型不匹配");
return;
}
} else {
// 单选
if (Object.prototype.toString.call(this.defaultKey).indexOf("Number") != -1
|| Object.prototype.toString.call(this.defaultKey).indexOf("String") != -1
|| Object.prototype.toString.call(this.defaultKey).indexOf("Object") != -1) {
this.setKey(this.defaultKey);
} else {
console.log("单选：传入参数类型不匹配");
return;
}
}
}
},
//下拉框select点击[入口]
selectClick() {
if (this.disabled) {
return;
}
this.$nextTick(function () {//设置下拉框自适应宽度
this.popoverWidth = this.$refs.select.$el.clientWidth - 26;
})
//显示下拉框
return this.isShowSelect = !this.isShowSelect
},
//单选: 树点击方法
nodeClick(data, node) {
if (!this.multiple) {//单选
this.isShowSelect = false;
this.setKey(node.key);
} else {//多选
let checkedKeys = this.$refs.tree.getCheckedKeys(); // 所有被选中的节点的 key 所组成的数组数据
let t = [];
this.options = checkedKeys.map((item) => {//设置option选项
let node = this.$refs.tree.getNode(item); // 所有被选中的节点对应的node
t.push(node.data);
return {label: node.label, value: node.key};
});
this.returnDataKeys = this.options.map((item) => {
return item.value;
});
this.returnDatas = t;
}
},
//单选:清空选中
clean() {
this.$refs.tree.setCurrentKey(null);//清除树选中key
this.returnDatas = null;
this.returnDataKeys = '';
this.popoverHide();
},
//单选:设置、初始化值 key
setKey(thisKey) {
this.$refs.tree.setCurrentKey(thisKey);
let node = this.$refs.tree.getNode(thisKey);
this.setData(node.data);
},
//单选：设置、初始化对象
setData(data) {
this.options = [];
this.options.push({label: data[this.obj.label], value: data[this.obj.id]});
this.returnDatas = data;
this.returnDataKeys = data[this.obj.id]
},
//多选:设置、初始化值 keys
setKeys(thisKeys) {
this.$refs.tree.setCheckedKeys(thisKeys);
this.returnDataKeys = thisKeys;
let t = [];
thisKeys.map((item) => {//设置option选项
let node = this.$refs.tree.getNode(item); // 所有被选中的节点对应的node
t.push(node.data);
return {label: node.label, value: node.key};
});
this.returnDatas = t;
this.popoverHide()
},
//多选:设置、初始化对象
setDatas(data) {
this.$refs.tree.setCheckedNodes(data);
this.returnDatas = data;
let t = [];
data.map((item) => {//设置option选项
t.push(item[this.obj.id]);
});
this.returnDataKeys = t;
this.popoverHide()
},
// 多选,删除任一select选项的回调
removeTag(val) {
this.$refs.tree.setChecked(val, false);//设置为未选中
let node = this.$refs.tree.getNode(val);//获取节点
if (!this.checkStrictly && node.childNodes.length > 0) {
this.treeToList(node).map(item => {
if (item.childNodes.length <= 0) {
this.$refs.tree.setChecked(item, false);
}
});
}
this.nodeClick();
this.popoverHide();
},
//下拉框关闭执行
popoverHide() {
this.$emit('getValue', this.returnDataKeys, this.returnDatas);
},
// 多选，清空所有勾选
clearSelectedNodes() {
let checkedKeys = this.$refs.tree.getCheckedKeys(); // 所有被选中的节点的 key 所组成的数组数据
for (let i = 0; i < checkedKeys.length; i++) {
this.$refs.tree.setChecked(checkedKeys[i], false);
}
},
//树形转为集合
treeToList(tree) {
let queen = [];
let out = [];
queen = queen.concat(tree);
while (queen.length) {
let first = queen.shift();
if (first.childNodes) {
queen = queen.concat(first.childNodes);
}
out.push(first);
}
return out;
},
switchTree() {
return this.buildTree(this.data, this.defaultValue);
},
// 将一维的扁平数组转换为多层级对象
buildTree(data, id) {
const fa = (id) => {
const temp = [];
for (let i = 0; i < data.length; i++) {
const n = data[i];
if (n[this.obj.pid] === id) {
n[this.obj.children] = fa(n[this.obj.id]);
temp.push(n);
}
}
return temp;
};
return fa(id);
},
filterNode(value, data) {
if (!value) return true;
if (data.label) {
return data.label.indexOf(value.toLowerCase()) !== -1;
}
return false;
},
},
watch: {
// eslint-disable-next-line no-unused-vars
isShowSelect(val) {
// 隐藏select自带的下拉框
this.$refs.select.blur();
},
treeData() {//监听tree数据
this.$nextTick(() => {
this.init();
})
},
filterText(val) {
this.$nextTick(() => {
this.$refs.tree.filter(val);
});
},
filter(val) {
this.$nextTick(() => {
this.$refs.tree.filter(val);
});
},
}
};
</script>
<style scoped>
.mask {
height: 100%;
position: fixed;
top: 0;
left: 0;
opacity: 0;
z-index: 11;
}
.common-tree {
overflow: auto;
height: 200px;
}
.ms-tree-select {
width: 100%;
z-index: 111;
}
.ok {
float: right;
}
.el-row {
padding-top: 0px !important;
}
</style>

2
frontend/src/business/components/track/plan/view/comonents/base/RelevanceDialog.vue
View File

@ -4,7 +4,7 @@
@close="close"
width="60%" v-loading="result.loading"
:close-on-click-modal="false"
top="50px">
top="50px" append-to-body>
<el-container class="main-content">

2
frontend/src/business/components/xpack

@ -1 +1 @@
Subproject commit 4c33b9c3b12a83da6d9bd2740262c6c8baaab819
Subproject commit f2781219889c2f993436bcc3ea90038f588fa73e