From e66d1de7724c3c07c933072f15c3e5261e8a1d3b Mon Sep 17 00:00:00 2001 From: fit2-zhao Date: Fri, 4 Mar 2022 17:45:32 +0800 Subject: [PATCH] =?UTF-8?q?refactor(=E6=8E=A5=E5=8F=A3=E6=B5=8B=E8=AF=95):?= =?UTF-8?q?=20=E5=9C=BA=E6=99=AF=E6=AD=A5=E9=AA=A4=E9=87=8D=E6=9E=84?= =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../automation/scenario/EditApiScenario.vue | 114 +++++++++++------- .../scenario/common/ApiBaseComponent.vue | 7 +- .../scenario/maximize/MaximizeScenario.vue | 103 ++++++++++++---- 3 files changed, 150 insertions(+), 74 deletions(-) diff --git a/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue b/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue index 541b5b6c52..7f3e927a73 100644 --- a/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue +++ b/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue @@ -196,39 +196,47 @@ @node-expand="nodeExpand" @node-collapse="nodeCollapse" :allow-drop="allowDrop" @node-drag-end="allowDrag" @node-click="nodeClick" draggable ref="stepTree" v-if="showHideTree"> - - - - - - + + + + + + + + + + + + + @@ -443,6 +451,7 @@ export default { showConfigButtonWithOutPermission: false, props: { label: "label", + isLeaf: "isLeaf", children: "hashTree" }, moduleObj: { @@ -601,6 +610,14 @@ export default { } }, methods: { + openOrClose(node) { + node.expanded = !node.expanded; + if (node.expanded) { + this.nodeExpand(node.data); + } else { + this.nodeCollapse(node.data); + } + }, hideNode(node) { node.isLeaf = true; node.visible = false; @@ -608,15 +625,14 @@ export default { hideTreeNode(node, array) { let isLeaf = true; array.forEach(item => { - if (!item.isLeaf && !isLeaf) { + if (this.stepFilter.get('ALlSamplerStep').indexOf(item.type) === -1) { isLeaf = false; } - if (item.childNodes && item.childNodes.length > 0) { - this.hideTreeNode(item, item.childNodes); + if (item.hashTree && item.hashTree.length > 0) { + this.hideTreeNode(item, item.hashTree); } }) node.isLeaf = isLeaf; - node.clazzName = '.is-leaf'; }, currentUser: () => { return getCurrentUser(); @@ -655,9 +671,6 @@ export default { } else { this.$store.state.currentApiCase = {resetDataSource: getUUID()}; } - if (this.$refs.stepTree && this.$refs.stepTree.root && this.$refs.stepTree.root.childNodes) { - this.hideTreeNode(this.$refs.stepTree.root, this.$refs.stepTree.root.childNodes); - } } } }) @@ -1106,6 +1119,7 @@ export default { // 添加debug结果 stepArray[i].parentIndex = fullPath ? fullPath + "_" + stepArray[i].index : stepArray[i].index; if (stepArray[i].hashTree && stepArray[i].hashTree.length > 0) { + this.hideTreeNode(stepArray[i], stepArray[i].hashTree); this.stepSize += stepArray[i].hashTree.length; this.sort(stepArray[i].hashTree, stepArray[i].projectId, stepArray[i].parentIndex); } @@ -1530,9 +1544,6 @@ export default { this.resetResourceId(this.scenarioDefinition); } this.$store.state.scenarioMap.set(this.currentScenario.id, 0); - if (this.$refs.stepTree && this.$refs.stepTree.root && this.$refs.stepTree.root.childNodes) { - this.hideTreeNode(this.$refs.stepTree.root, this.$refs.stepTree.root.childNodes); - } }) } }, @@ -2002,8 +2013,9 @@ export default { } .ms-tree >>> .el-icon-caret-right:before { - content: '\e723'; - font-size: 20px; + /*content: '\e723';*/ + padding: 0; + content: ""; } .ms-tree >>> .el-tree-node__expand-icon.is-leaf { @@ -2016,8 +2028,9 @@ export default { .ms-tree >>> .el-tree-node__expand-icon.expanded.el-icon-caret-right:before { color: #7C3985; - content: "\e722"; - font-size: 20px; + /* content: "\e722";*/ + padding: 0; + content: ""; } .ms-sc-variable-header >>> .el-dialog__body { @@ -2081,4 +2094,13 @@ export default { z-index: 999; } +.custom-node_e { + color: #7C3985; + font-size: 20px; +} + +.custom-tree-node-col { + width: 20px; + padding: 0px; +} diff --git a/frontend/src/business/components/api/automation/scenario/common/ApiBaseComponent.vue b/frontend/src/business/components/api/automation/scenario/common/ApiBaseComponent.vue index fa1872149f..2bf04acced 100644 --- a/frontend/src/business/components/api/automation/scenario/common/ApiBaseComponent.vue +++ b/frontend/src/business/components/api/automation/scenario/common/ApiBaseComponent.vue @@ -32,10 +32,11 @@ - + - - + + - + :allow-drop="allowDrop" @node-drag-end="allowDrag" @node-click="nodeClick" class="ms-tree"> + + + + + + + + - - + + + +
+ v-if="selectedTreeNode && selectedNode && stepFilter.get('ALlSamplerStep').indexOf(item.type) ===-1"/>
@@ -414,6 +428,7 @@ export default { arr[i].projectId = scenarioProjectId ? scenarioProjectId : this.projectId; } if (arr[i].hashTree != undefined && arr[i].hashTree.length > 0) { + this.hideTreeNode(arr[i], arr[i].hashTree); this.recursiveSorting(arr[i].hashTree, arr[i].projectId); } // 添加debug结果 @@ -422,6 +437,30 @@ export default { } } }, + openOrClose(node) { + node.expanded = !node.expanded; + if (node.expanded) { + this.nodeExpand(node.data); + } else { + this.nodeCollapse(node.data); + } + }, + hideNode(node) { + node.isLeaf = true; + node.visible = false; + }, + hideTreeNode(node, array) { + let isLeaf = true; + array.forEach(item => { + if (this.stepFilter.get('ALlSamplerStep').indexOf(item.type) === -1) { + isLeaf = false; + } + if (item.hashTree && item.hashTree.length > 0) { + this.hideTreeNode(item, item.hashTree); + } + }) + node.isLeaf = isLeaf; + }, sort() { for (let i in this.scenarioDefinition) { // 排序 @@ -437,6 +476,7 @@ export default { } if (this.scenarioDefinition[i].hashTree != undefined && this.scenarioDefinition[i].hashTree.length > 0) { + this.hideTreeNode(this.scenarioDefinition[i], this.scenarioDefinition[i].hashTree); this.recursiveSorting(this.scenarioDefinition[i].hashTree, this.scenarioDefinition[i].projectId); } // 添加debug结果 @@ -899,7 +939,7 @@ export default { runScenario(scenario) { this.$emit('runScenario', scenario); }, - stopScenario(){ + stopScenario() { this.$emit('stopScenario'); }, editScenarioAdvance(data) { @@ -996,14 +1036,16 @@ export default { z-index: 9; } + .ms-tree >>> .el-tree-node__expand-icon.expanded { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .ms-tree >>> .el-icon-caret-right:before { - content: '\e723'; - font-size: 20px; + /*content: '\e723';*/ + padding: 0; + content: ""; } .ms-tree >>> .el-tree-node__expand-icon.is-leaf { @@ -1016,8 +1058,9 @@ export default { .ms-tree >>> .el-tree-node__expand-icon.expanded.el-icon-caret-right:before { color: #7C3985; - content: "\e722"; - font-size: 20px; + /* content: "\e722";*/ + padding: 0; + content: ""; } .ms-sc-variable-header >>> .el-dialog__body { @@ -1092,4 +1135,14 @@ export default { .ms-aside-container { height: calc(100vh - 50px) !important; } + +.custom-node_e { + color: #7C3985; + font-size: 20px; +} + +.custom-tree-node-col { + width: 20px; + padding: 0px; +}