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

refactor: 场景编辑页面优化

This commit is contained in:
chenjianxing 2020-12-29 11:05:06 +08:00
parent 8f7a32698f
commit df1ebcdb96
6 changed files with 138 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/business/components/api/automation/scenario/ApiScenarioList.vue
View File

@ -8,7 +8,7 @@
<el-table ref="scenarioTable" border :data="tableData" class="adjust-table" @select-all="select" @select="select" v-loading="loading"> <el-table ref="scenarioTable" border :data="tableData" class="adjust-table" @select-all="select" @select="select" v-loading="loading">
<el-table-column type="selection"/> <el-table-column type="selection"/>
<el-table-column width="40" :resizable="false" align="center"> <el-table-column v-if="!referenced" width="40" :resizable="false" align="center">
<template v-slot:default="{row}"> <template v-slot:default="{row}">
<show-more-btn :is-show="isSelect(row)" :buttons="buttons" :size="selection.length"/> <show-more-btn :is-show="isSelect(row)" :buttons="buttons" :size="selection.length"/>
</template> </template>

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

@ -15,10 +15,9 @@
ref="nodeTree"> ref="nodeTree">
<template v-slot:header> <template v-slot:header>
<el-input class="module-input" :placeholder="$t('test_track.module.search')" v-model="condition.filterText" <el-input :placeholder="$t('test_track.module.search')" v-model="condition.filterText" size="small">
size="small">
<template v-slot:append> <template v-slot:append>
<el-button icon="el-icon-folder-add" @click="addScenario" v-tester/> <el-button v-if="!isReadOnly" icon="el-icon-folder-add" @click="addScenario" v-tester/>
</template> </template>
</el-input> </el-input>
<module-trash-button v-if="!isReadOnly" :condition="condition" :exe="enableTrash"/> <module-trash-button v-if="!isReadOnly" :condition="condition" :exe="enableTrash"/>
@ -247,7 +246,4 @@
width: 30px; width: 30px;
} }
.module-input {
width: 275px;
}
</style> </style>

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

@ -115,7 +115,6 @@
<el-checkbox v-model="enableCookieShare">共享cookie</el-checkbox> <el-checkbox v-model="enableCookieShare">共享cookie</el-checkbox>
</el-col> </el-col>
<el-col :span="7" class="ms-font"> <el-col :span="7" class="ms-font">
{{$t('api_test.definition.request.run_env')}}：
<el-select v-model="currentEnvironmentId" size="small" class="ms-htt-width" <el-select v-model="currentEnvironmentId" size="small" class="ms-htt-width"
:placeholder="$t('api_test.definition.request.run_env')" :placeholder="$t('api_test.definition.request.run_env')"
clearable> clearable>
@ -177,19 +176,21 @@
</el-col> </el-col>
<!-- 按钮列表 --> <!-- 按钮列表 -->
<el-col :span="3"> <el-col :span="3">
<vue-fab id="fab" mainBtnColor="#783887" size="small" :global-options="globalOptions" <div @click="fabClick">
:click-auto-close="false" v-outside-click="outsideClick"> <vue-fab id="fab" mainBtnColor="#783887" size="small" :global-options="globalOptions"
<fab-item :click-auto-close="false" v-outside-click="outsideClick">
v-for="(item, index) in buttons" <fab-item
:key="index" v-for="(item, index) in buttons"
:idx="getIdx(index)" :key="index"
:title="item.title" :idx="getIdx(index)"
:title-bg-color="item.titleBgColor" :title="item.title"
:title-color="item.titleColor" :title-bg-color="item.titleBgColor"
:color="item.titleColor" :title-color="item.titleColor"
:icon="item.icon" :color="item.titleColor"
@clickItem="item.click"/> :icon="item.icon"
</vue-fab> @clickItem="item.click"/>
</vue-fab>
</div>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
@ -248,7 +249,7 @@
import InputTag from 'vue-input-tag' import InputTag from 'vue-input-tag'
import "@/common/css/material-icons.css" import "@/common/css/material-icons.css"
import OutsideClick from "@/common/js/outside-click"; import OutsideClick from "@/common/js/outside-click";
import ScenarioApiRelevance from "./api/ScenarioApiRelevance"; import ScenarioApiRelevance from "./api/ApiRelevance";
import ScenarioRelevance from "./api/ScenarioRelevance"; import ScenarioRelevance from "./api/ScenarioRelevance";
export default { export default {
@ -451,9 +452,14 @@
return false; return false;
}, },
outsideClick(e) { outsideClick(e) {
e.stopPropagation() e.stopPropagation();
this.showAll(); this.showAll();
}, },
fabClick() {
if (this.operatingElements.length < 1) {
this.$info("引用的场景或接口无法添加配置");
}
},
addComponent(type) { addComponent(type) {
switch (type) { switch (type) {
case ELEMENT_TYPE.IfController: case ELEMENT_TYPE.IfController:

77
frontend/src/business/components/api/automation/scenario/api/ScenarioApiRelevance.vue → frontend/src/business/components/api/automation/scenario/api/ApiRelevance.vue
View File

@ -1,47 +1,38 @@
<template> <template>
<el-dialog class="api-relevance" :title="'接口导入'" <relevance-dialog :title="'接口导入'" ref="relevanceDialog">
:visible.sync="dialogVisible"
width="70%"
:close-on-click-modal="false"
top="50px">
<ms-container> <template v-slot:aside>
<ms-aside-container :enable-aside-hidden="false"> <ms-api-module
<ms-api-module @nodeSelectEvent="nodeChange"
@nodeSelectEvent="nodeChange" @protocolChange="handleProtocolChange"
@protocolChange="handleProtocolChange" @refreshTable="refresh"
@refreshTable="refresh" @setModuleOptions="setModuleOptions"
@setModuleOptions="setModuleOptions" :is-read-only="true"
:is-read-only="true" ref="nodeTree"/>
ref="nodeTree"/> </template>
</ms-aside-container>
<ms-main-container> <scenario-relevance-api-list
<scenario-relevance-api-list v-if="isApiListEnable"
v-if="isApiListEnable" :current-protocol="currentProtocol"
:current-protocol="currentProtocol" :select-node-ids="selectNodeIds"
:select-node-ids="selectNodeIds" :is-api-list-enable="isApiListEnable"
:is-api-list-enable="isApiListEnable" @isApiListEnableChange="isApiListEnableChange"
@isApiListEnableChange="isApiListEnableChange" ref="apiList"/>
ref="apiList"
/>
<scenario-relevance-case-list <scenario-relevance-case-list
v-if="!isApiListEnable" v-if="!isApiListEnable"
:current-protocol="currentProtocol" :current-protocol="currentProtocol"
:select-node-ids="selectNodeIds" :select-node-ids="selectNodeIds"
:is-api-list-enable="isApiListEnable" :is-api-list-enable="isApiListEnable"
@isApiListEnableChange="isApiListEnableChange" @isApiListEnableChange="isApiListEnableChange"
ref="apiCaseList"/> ref="apiCaseList"/>
</ms-main-container>
</ms-container>
<template v-slot:footer> <template v-slot:footer>
<el-button type="primary" @click="copy" @keydown.enter.native.prevent>复制</el-button> <el-button type="primary" @click="copy" @keydown.enter.native.prevent>复制</el-button>
<el-button v-if="!isApiListEnable" type="primary" @click="reference" @keydown.enter.native.prevent>引用</el-button> <el-button v-if="!isApiListEnable" type="primary" @click="reference" @keydown.enter.native.prevent>引用</el-button>
</template> </template>
</el-dialog> </relevance-dialog>
</template> </template>
<script> <script>
@ -51,14 +42,15 @@
import MsAsideContainer from "../../../../common/components/MsAsideContainer"; import MsAsideContainer from "../../../../common/components/MsAsideContainer";
import MsMainContainer from "../../../../common/components/MsMainContainer"; import MsMainContainer from "../../../../common/components/MsMainContainer";
import ScenarioRelevanceApiList from "./ScenarioRelevanceApiList"; import ScenarioRelevanceApiList from "./ScenarioRelevanceApiList";
import RelevanceDialog from "../../../../track/plan/view/comonents/base/RelevanceDialog";
export default { export default {
name: "ScenarioApiRelevance", name: "ApiRelevance",
components: { components: {
RelevanceDialog,
ScenarioRelevanceApiList, ScenarioRelevanceApiList,
MsMainContainer, MsAsideContainer, MsContainer, MsApiModule, ScenarioRelevanceCaseList}, MsMainContainer, MsAsideContainer, MsContainer, MsApiModule, ScenarioRelevanceCaseList},
data() { data() {
return { return {
dialogVisible: false,
result: {}, result: {},
currentProtocol: null, currentProtocol: null,
selectNodeIds: [], selectNodeIds: [],
@ -91,10 +83,10 @@
}, },
close() { close() {
this.refresh(); this.refresh();
this.dialogVisible = false; this.$refs.relevanceDialog.close();
}, },
open() { open() {
this.dialogVisible = true; this.$refs.relevanceDialog.open();
}, },
isApiListEnableChange(data) { isApiListEnableChange(data) {
this.isApiListEnable = data; this.isApiListEnable = data;
@ -120,13 +112,4 @@
</script> </script>
<style scoped> <style scoped>
.ms-aside-container {
border: 0px;
}
.api-relevance >>> .el-dialog__body {
padding: 10px 20px;
}
</style> </style>

44
frontend/src/business/components/api/automation/scenario/api/ScenarioRelevance.vue
View File

@ -1,12 +1,7 @@
<template> <template>
<el-dialog class="api-relevance" :title="'场景导入'" <relevance-dialog :title="'场景导入'" ref="relevanceDialog">
:visible.sync="dialogVisible"
width="70%"
:close-on-click-modal="false"
top="50px">
<ms-container> <template v-slot:aside>
<ms-aside-container :enable-aside-hidden="false">
<ms-api-scenario-module <ms-api-scenario-module
@nodeSelectEvent="nodeChange" @nodeSelectEvent="nodeChange"
@refreshTable="refresh" @refreshTable="refresh"
@ -14,24 +9,21 @@
@enableTrash="false" @enableTrash="false"
:is-read-only="true" :is-read-only="true"
ref="nodeTree"/> ref="nodeTree"/>
</ms-aside-container> </template>
<ms-main-container> <ms-api-scenario-list
<ms-api-scenario-list :select-node-ids="selectNodeIds"
:select-node-ids="selectNodeIds" :referenced="true"
:referenced="true" :trash-enable="false"
:trash-enable="false" @selection="setData"
@selection="setData" ref="apiScenarioList"/>
ref="apiScenarioList"/>
</ms-main-container>
</ms-container>
<template v-slot:footer> <template v-slot:footer>
<el-button type="primary" @click="copy" @keydown.enter.native.prevent>复制</el-button> <el-button type="primary" @click="copy" @keydown.enter.native.prevent>复制</el-button>
<el-button type="primary" @click="reference" @keydown.enter.native.prevent>引用</el-button> <el-button type="primary" @click="reference" @keydown.enter.native.prevent>引用</el-button>
</template> </template>
</el-dialog> </relevance-dialog>
</template> </template>
<script> <script>
@ -44,21 +36,21 @@
import MsApiScenarioModule from "../ApiScenarioModule"; import MsApiScenarioModule from "../ApiScenarioModule";
import MsApiScenarioList from "../ApiScenarioList"; import MsApiScenarioList from "../ApiScenarioList";
import {getUUID} from "../../../../../../common/js/utils"; import {getUUID} from "../../../../../../common/js/utils";
import RelevanceDialog from "../../../../track/plan/view/comonents/base/RelevanceDialog";
export default { export default {
name: "ScenarioRelevance", name: "ScenarioRelevance",
components: { components: {
RelevanceDialog,
MsApiScenarioList, MsApiScenarioList,
MsApiScenarioModule, MsApiScenarioModule,
MsMainContainer, MsAsideContainer, MsContainer}, MsMainContainer, MsAsideContainer, MsContainer},
data() { data() {
return { return {
dialogVisible: false,
result: {}, result: {},
currentProtocol: null, currentProtocol: null,
selectNodeIds: [], selectNodeIds: [],
moduleOptions: {}, moduleOptions: {},
isApiListEnable: true, isApiListEnable: true,
currentScenario: [], currentScenario: [],
currentScenarioIds: [], currentScenarioIds: [],
} }
@ -97,10 +89,10 @@
}, },
close() { close() {
this.refresh(); this.refresh();
this.dialogVisible = false; this.$refs.relevanceDialog.close();
}, },
open() { open() {
this.dialogVisible = true; this.$refs.relevanceDialog.open();
if (this.$refs.apiScenarioList) { if (this.$refs.apiScenarioList) {
this.$refs.apiScenarioList.search(); this.$refs.apiScenarioList.search();
} }
@ -127,12 +119,4 @@
<style scoped> <style scoped>
.ms-aside-container {
border: 0px;
}
.api-relevance >>> .el-dialog__body {
padding: 10px 20px;
}
</style> </style>

69
frontend/src/business/components/track/plan/view/comonents/base/RelevanceDialog.vue Normal file
View File

@ -0,0 +1,69 @@
<template>
<el-dialog :title="title"
:visible.sync="dialogVisible"
@close="close"
width="60%" v-loading="result.loading"
:close-on-click-modal="false"
top="50px">
<el-container class="main-content">
<el-aside class="tree-aside" width="250px">
<slot name="aside"></slot>
</el-aside>
<el-container>
<el-main class="case-content">
<slot></slot>
</el-main>
</el-container>
</el-container>
<template v-slot:footer>
<slot name="footer"></slot>
</template>
</el-dialog>
</template>
<script>
import MsDialogFooter from '../../../../../common/components/MsDialogFooter'
import SelectMenu from "../../../../common/SelectMenu";
export default {
name: "RelevanceDialog",
components: {
SelectMenu,
MsDialogFooter,
},
data() {
return {
result: {},
dialogVisible: false,
};
},
props: ['title'],
methods: {
open() {
this.dialogVisible = true;
},
close() {
this.dialogVisible = false;
},
}
}
</script>
<style scoped>
.el-dialog {
min-height: 700px;
}
.el-dialog >>> .el-dialog__body {
padding: 10px 20px;
}
</style>