From c8b9b2babb5d393991177a13eda4633a9920e244 Mon Sep 17 00:00:00 2001
From: fit2-zhao <yong.zhao@fit2cloud.com>
Date: Wed, 13 Jan 2021 14:34:43 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E6=8E=A5=E5=8F=A3=E8=87=AA=E5=8A=A8?=
 =?UTF-8?q?=E5=8C=96):=20=E6=95=B0=E6=8D=AE=E8=BF=81=E7=A7=BB=EF=BC=8C?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97=E4=BB=A5=E6=A0=91=E5=BD=A2=E7=BB=93=E6=9E=84?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../automation/scenario/EditApiScenario.vue   |   6 +-
 .../scenario/common/ApiBaseComponent.vue      |  90 ++++++-------
 .../components/extract/ApiExtract.vue         |   9 ++
 .../business/components/api/test/Upgrade.vue  | 125 +++++++++++++++---
 4 files changed, 162 insertions(+), 68 deletions(-)

diff --git a/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue b/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
index 8ab3c34732..8030d490f7 100644
--- a/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
+++ b/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
@@ -156,11 +156,11 @@
                       <!--等待控制器-->
                       <ms-constant-timer :timer="data" :node="node" v-if="data.type==='ConstantTimer'" @remove="remove" @copyRow="copyRow"/>
                       <!--自定义脚本-->
-                      <ms-jsr233-processor v-if="data.type==='JSR223Processor'" @remove="remove" @copyRow="copyRow" :title="$t('api_test.automation.customize_script')" :jsr223-processor="data" :node="node"/>
+                      <ms-jsr233-processor :draggable="true" v-if="data.type==='JSR223Processor'" @remove="remove" @copyRow="copyRow" :title="$t('api_test.automation.customize_script')" :jsr223-processor="data" :node="node"/>
                       <!--前置脚本-->
-                      <ms-jsr233-processor v-if="data.type==='JSR223PreProcessor'" @remove="remove" @copyRow="copyRow" :title="$t('api_test.definition.request.pre_script')" :jsr223-processor="data" :node="node"/>
+                      <ms-jsr233-processor :draggable="true" v-if="data.type==='JSR223PreProcessor'" @remove="remove" @copyRow="copyRow" :title="$t('api_test.definition.request.pre_script')" :jsr223-processor="data" :node="node"/>
                       <!--后置脚本-->
-                      <ms-jsr233-processor v-if="data.type==='JSR223PostProcessor'" @remove="remove" @copyRow="copyRow" :title="$t('api_test.definition.request.post_script')" :jsr223-processor="data" :node="node"/>
+                      <ms-jsr233-processor :draggable="true" v-if="data.type==='JSR223PostProcessor'" @remove="remove" @copyRow="copyRow" :title="$t('api_test.definition.request.post_script')" :jsr223-processor="data" :node="node"/>
                       <!--断言规则-->
                       <ms-api-assertions :draggable="true" @suggestClick="suggestClick(node)" :response="response" v-if="data.type==='Assertions'" @remove="remove" @copyRow="copyRow" :assertions="data" :node="node"/>
                       <!--提取规则-->
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 7a79cf3585..f3ab660e85 100644
--- a/frontend/src/business/components/api/automation/scenario/common/ApiBaseComponent.vue
+++ b/frontend/src/business/components/api/automation/scenario/common/ApiBaseComponent.vue
@@ -29,63 +29,63 @@
     </div>
 
     <el-collapse-transition>
-      <div v-if="data.active && showCollapse" draggable>
+      <div v-if="data.active && showCollapse" :draggable="draggable">
         <el-divider></el-divider>
-       <slot></slot>
+        <slot></slot>
       </div>
     </el-collapse-transition>
   </el-card>
 </template>
 
 <script>
-    export default {
-      name: "ApiBaseComponent",
-      data() {
-        return {
-          isShowInput: false
+  export default {
+    name: "ApiBaseComponent",
+    data() {
+      return {
+        isShowInput: false
+      }
+    },
+    props: {
+      draggable: Boolean,
+      data: {
+        type: Object,
+        default() {
+          return {}
+        },
+      },
+      color: {
+        type: String,
+        default() {
+          return "#B8741A"
         }
       },
-      props: {
-        draggable: Boolean,
-        data: {
-          type: Object,
-          default() {
-            return {}
-          },
-        },
-        color: {
-          type: String,
-          default() {
-            return "#B8741A"
-          }
-        },
-        backgroundColor: {
-          type: String,
-          default() {
-            return "#F9F1EA"
-          }
-        },
-        showCollapse: {
-          type: Boolean,
-          default() {
-            return true
-          }
-        },
-        title: String
-      },
-      methods: {
-        active() {
-          this.$set(this.data, 'active', !this.data.active);
-          this.$emit('active');
-        },
-        copyRow() {
-          this.$emit('copy');
-        },
-        remove() {
-          this.$emit('remove');
+      backgroundColor: {
+        type: String,
+        default() {
+          return "#F9F1EA"
         }
+      },
+      showCollapse: {
+        type: Boolean,
+        default() {
+          return true
+        }
+      },
+      title: String
+    },
+    methods: {
+      active() {
+        this.$set(this.data, 'active', !this.data.active);
+        this.$emit('active');
+      },
+      copyRow() {
+        this.$emit('copy');
+      },
+      remove() {
+        this.$emit('remove');
       }
     }
+  }
 </script>
 
 <style scoped>
diff --git a/frontend/src/business/components/api/definition/components/extract/ApiExtract.vue b/frontend/src/business/components/api/definition/components/extract/ApiExtract.vue
index 3968774ef6..ed83fddc78 100644
--- a/frontend/src/business/components/api/definition/components/extract/ApiExtract.vue
+++ b/frontend/src/business/components/api/definition/components/extract/ApiExtract.vue
@@ -3,6 +3,7 @@
     @copy="copyRow"
     @remove="remove"
     :data="extract"
+    :draggable="draggable"
     color="#015478"
     background-color="#E6EEF2"
     :title="$t('api_test.definition.request.extract_param')">
@@ -46,6 +47,7 @@
   import MsApiJsonpathSuggest from "../assertion/ApiJsonpathSuggest";
   import {ExtractJSONPath} from "../../../test/model/ScenarioModel";
   import ApiBaseComponent from "../../../automation/scenario/common/ApiBaseComponent";
+
   export default {
     name: "MsApiExtract",
     components: {
@@ -66,6 +68,10 @@
       isReadOnly: {
         type: Boolean,
         default: false
+      },
+      draggable: {
+        type: Boolean,
+        default: false,
       }
     },
     data() {
@@ -139,15 +145,18 @@
     font-size: 13px;
     margin-bottom: 10px;
   }
+
   .extract-item {
     width: 100%;
   }
+
   .extract-add {
     padding: 10px;
     border: #DCDFE6 solid 1px;
     margin: 5px 0;
     border-radius: 5px;
   }
+
   /deep/ .el-card__body {
     padding: 15px;
   }
diff --git a/frontend/src/business/components/api/test/Upgrade.vue b/frontend/src/business/components/api/test/Upgrade.vue
index 5e0f9c2d92..ecc125082c 100644
--- a/frontend/src/business/components/api/test/Upgrade.vue
+++ b/frontend/src/business/components/api/test/Upgrade.vue
@@ -7,13 +7,24 @@
     :destroy-on-close="true"
     show-close
     @closed="handleClose" v-loading="loading">
-    <el-form :model="ruleForm" label-position="right" label-width="80px" size="small" :rules="rule">
-      <el-form-item :label="$t('test_track.module.module')" prop="apiScenarioModuleId">
-        <el-select size="small" style="width: 80%" v-model="apiScenarioModuleId">
-          <el-option v-for="item in moduleOptions" :key="item.id" :label="item.path" :value="item.id"/>
-        </el-select>
-      </el-form-item>
-    </el-form>
+
+    <ms-node-tree
+      v-loading="result.loading"
+      :tree-nodes="data"
+      @add="add"
+      :type="'edit'"
+      @edit="edit"
+      @drag="drag"
+      @remove="remove"
+      @nodeSelectEvent="nodeChange"
+      ref="nodeTree">
+
+      <template v-slot:header>
+        <el-input :placeholder="$t('test_track.module.search')" v-model="condition.filterText" size="small">
+        </el-input>
+      </template>
+
+    </ms-node-tree>
     <span slot="footer" class="dialog-footer">
    <ms-dialog-footer
      @cancel="oneClickOperationVisible = false"
@@ -28,31 +39,32 @@
   import MsApiReportStatus from "../report/ApiReportStatus";
   import MsApiReportDialog from "./ApiReportDialog";
   import {getUUID, getCurrentProjectID} from "@/common/js/utils";
+  import SelectMenu from "../../track/common/SelectMenu";
+  import MsNodeTree from "../../track/common/NodeTree";
   import {buildNodePath} from "../definition/model/NodeTree";
 
-
   export default {
     name: "MsUpgrade",
     components: {
-      MsApiReportDialog, MsApiReportStatus, MsApiScenarioConfig, MsDialogFooter
+      MsApiReportDialog, MsApiReportStatus, MsApiScenarioConfig,
+      MsDialogFooter,
+      MsNodeTree,
+      SelectMenu,
     },
     data() {
       return {
         oneClickOperationVisible: false,
-        apiScenarioModuleId: "",
         moduleOptions: [],
-        ruleForm: {},
         loading: false,
-        rule: {
-          apiScenarioModuleId: [
-            {required: true, message: this.$t('test_track.module.module'), trigger: 'blur'},
-          ],
-        }
+        result: {},
+        data: [],
+        condition: {
+          filterText: "",
+          trashEnable: false
+        },
+        currentModule: undefined,
       };
     },
-    created() {
-      this.initModule();
-    },
     props: {
       selectIds: {
         type: Set
@@ -64,8 +76,14 @@
         type: Set
       }
     },
+    watch: {
+      'condition.filterText'(val) {
+        this.$refs.nodeTree.filter(val);
+      },
+    },
     methods: {
       openOneClickOperation() {
+        this.initModule();
         this.oneClickOperationVisible = true;
       },
       getPath(id) {
@@ -75,9 +93,13 @@
         return path[0].path;
       },
       confirm() {
+        if (!this.currentModule) {
+          this.$warning("请选择一个模块");
+          return;
+        }
         this.loading = true;
         let arr = Array.from(this.selectIds);
-        let obj = {testIds: arr, projectId: getCurrentProjectID(), modulePath: this.getPath(this.apiScenarioModuleId), moduleId: this.apiScenarioModuleId};
+        let obj = {testIds: arr, projectId: getCurrentProjectID(), modulePath: this.getPath(this.currentModule.id), moduleId: this.currentModule.id};
         this.$post("/api/historicalDataUpgrade", obj, response => {
           this.loading = false;
           this.$success(this.$t('organization.integration.successful_operation'));
@@ -100,6 +122,69 @@
       handleClose() {
         this.ruleForm = {}
       },
+      edit(param) {
+        param.projectId = getCurrentProjectID();
+        param.protocol = this.condition.protocol;
+        this.$post("/api/automation/module/edit", param, () => {
+          this.$success(this.$t('commons.save_success'));
+          this.initModule();
+          this.refresh();
+        }, (error) => {
+          this.initModule();
+        });
+      },
+      add(param) {
+        param.projectId = getCurrentProjectID();
+        param.protocol = this.condition.protocol;
+        this.$post("/api/automation/module/add", param, () => {
+          this.$success(this.$t('commons.save_success'));
+          this.initModule();
+        }, (error) => {
+          this.initModule();
+        });
+      },
+      remove(nodeIds) {
+        this.$post("/api/automation/module/delete", nodeIds, () => {
+          this.initModule();
+          this.refresh();
+        }, (error) => {
+          this.initModule();
+        });
+      },
+      drag(param, list) {
+        this.$post("/api/automation/module/drag", param, () => {
+          this.$post("/api/automation/module/pos", list, () => {
+            this.initModule();
+          });
+        }, (error) => {
+          this.initModule();
+        });
+      },
+      nodeChange(node, nodeIds, pNodes) {
+        this.currentModule = node.data;
+        this.condition.trashEnable = false;
+        if (node.data.id === 'root') {
+          this.$emit("nodeSelectEvent", node, [], pNodes);
+        } else {
+          this.$emit("nodeSelectEvent", node, nodeIds, pNodes);
+        }
+      },
+      saveAsEdit(data) {
+        this.$emit('saveAsEdit', data);
+      },
+      refresh() {
+        this.$emit("refreshTable");
+      },
+      addScenario() {
+        if (!getCurrentProjectID()) {
+          this.$warning(this.$t('commons.check_project_tip'));
+          return;
+        }
+        this.$refs.basisScenario.open(this.currentModule);
+      },
+      enableTrash() {
+        this.condition.trashEnable = true;
+      }
     }
   }
 </script>