refactor: 创建接口、场景模块为空下拉框优化

创建接口、场景模块为空时，下拉框增加"去添加"的按钮，点击即可增加

frontend/src/business/components/api/definition/ApiDefinition.vue

@@ -63,7 +63,7 @@
 
           <!-- 添加/编辑测试窗口-->
           <div v-else-if="item.type=== 'ADD'" class="ms-api-div">
-            <ms-api-config @runTest="runTest" @saveApi="saveApi" ref="apiConfig"
+            <ms-api-config @runTest="runTest" @saveApi="saveApi" @createRootModel="createRootModel" ref="apiConfig"
                            :current-api="item.api"
                            :currentProtocol="currentProtocol"
                            :moduleOptions="moduleOptions"/>
@@ -215,6 +215,10 @@
         this.apiTabs = tabs.filter(tab => tab.name !== targetName);
         this.refresh();
       },
+      //创建左侧树的根目录模块
+      createRootModel(){
+        this.$refs.nodeTree.createRootModel();
+      },
       handleTabsEdit(targetName, action, api) {
         if (!getCurrentProjectID()) {
           this.$warning(this.$t('commons.check_project_tip'));

frontend/src/business/components/api/definition/components/ApiConfig.vue

@@ -2,16 +2,16 @@
 
   <div class="card-container">
     <!-- HTTP 请求参数 -->
-    <ms-edit-complete-http-api @runTest="runTest" @saveApi="saveApi" :request="request" :response="response"
+    <ms-edit-complete-http-api @runTest="runTest" @saveApi="saveApi" @createRootModelInTree="createRootModelInTree" :request="request" :response="response"
                                :basisData="currentApi" :moduleOptions="moduleOptions" v-if="currentProtocol === 'HTTP'"/>
     <!-- TCP -->
-    <ms-edit-complete-tcp-api :request="request" @runTest="runTest" @saveApi="saveApi" :basisData="currentApi"
+    <ms-edit-complete-tcp-api :request="request" @runTest="runTest" @createRootModelInTree="createRootModelInTree" @saveApi="saveApi" :basisData="currentApi"
                               :moduleOptions="moduleOptions" v-if="currentProtocol === 'TCP'"/>
     <!--DUBBO-->
-    <ms-edit-complete-dubbo-api :request="request" @runTest="runTest" @saveApi="saveApi" :basisData="currentApi"
+    <ms-edit-complete-dubbo-api :request="request" @runTest="runTest" @createRootModelInTree="createRootModelInTree" @saveApi="saveApi" :basisData="currentApi"
                                 :moduleOptions="moduleOptions" v-if="currentProtocol === 'DUBBO'"/>
     <!--SQL-->
-    <ms-edit-complete-sql-api :request="request" @runTest="runTest" @saveApi="saveApi" :basisData="currentApi"
+    <ms-edit-complete-sql-api :request="request" @runTest="runTest" @createRootModelInTree="createRootModelInTree" @saveApi="saveApi" :basisData="currentApi"
                               :moduleOptions="moduleOptions" v-if="currentProtocol === 'SQL'"/>
   </div>
 </template>
@@ -75,6 +75,9 @@
           this.$emit('runTest', data);
         })
       },
+      createRootModelInTree(){
+        this.$emit("createRootModel");
+      },
       getMaintainerOptions() {
         let workspaceId = localStorage.getItem(WORKSPACE_ID);
         this.$post('/user/ws/member/tester/list', {workspaceId: workspaceId}, response => {

frontend/src/business/components/api/definition/components/complete/BasisApi.vue

@@ -11,7 +11,17 @@
         <el-col :span="12">
           <el-form-item :label="$t('test_track.module.module')" prop="moduleId">
             <el-select class="ms-http-input" size="small" v-model="basicForm.moduleId" style="width: 100%" @change="reload">
-              <el-option v-for="item in moduleOptions" :key="item.id" :label="item.path" :value="item.id"/>
+              <div v-if="moduleOptions.length>0">
+                <el-option v-for="item in moduleOptions" :key="item.id" :label="item.path" :value="item.id"/>
+              </div>
+              <div v-else>
+                <el-option :key="0" :value="''">
+                  <div style="margin-left: 40px">
+                        <span style="font-size: 14px;color: #606266;font-weight: 48.93">{{$t('api_test.definition.select_comp.no_data')}},
+                        </span><el-link type="primary" @click="createModules">{{$t('api_test.definition.select_comp.add_data')}}</el-link>
+                  </div>
+                </el-option>
+              </div>
             </el-select>
           </el-form-item>
         </el-col>
@@ -115,7 +125,10 @@
             this.$emit('callback');
           }
         })
-      }
+      },
+      createModules(){
+        this.$emit("createRootModelInTree");
+      },
     }
   }
 </script>

frontend/src/business/components/api/definition/components/complete/EditCompleteDubboApi.vue

@@ -16,7 +16,7 @@
     <br/>
     <el-row>
       <el-col>
-        <ms-basis-api :moduleOptions="moduleOptions" :basisData="basisData" ref="basicForm" @callback="callback"/>
+        <ms-basis-api @createRootModelInTree="createRootModelInTree" :moduleOptions="moduleOptions" :basisData="basisData" ref="basicForm" @callback="callback"/>
       </el-col>
     </el-row>
 
@@ -71,7 +71,10 @@
           this.basisData.request = this.request;
           this.$emit('runTest', this.basisData);
         }
-      }
+      },
+      createRootModelInTree(){
+        this.$emit("createRootModelInTree");
+      },
     },
 
     computed: {}

frontend/src/business/components/api/definition/components/complete/EditCompleteHTTPApi.vue

@@ -36,7 +36,17 @@
             <el-col :span="8">
               <el-form-item :label="$t('test_track.module.module')" prop="moduleId">
                 <el-select class="ms-http-select" size="small" v-model="httpForm.moduleId">
-                  <el-option v-for="item in moduleOptions" :key="item.id" :label="item.path" :value="item.id"/>
+                  <div v-if="moduleOptions.length>0">
+                    <el-option v-for="item in moduleOptions" :key="item.id" :label="item.path" :value="item.id"/>
+                  </div>
+                  <div v-else>
+                    <el-option :key="0" :value="''">
+                      <div style="margin-left: 40px">
+                        <span style="font-size: 14px;color: #606266;font-weight: 48.93">{{$t('api_test.definition.select_comp.no_data')}},
+                        </span><el-link type="primary" @click="createModules">{{$t('api_test.definition.select_comp.add_data')}}</el-link>
+                      </div>
+                    </el-option>
+                  </div>
                 </el-select>
               </el-form-item>
             </el-col>
@@ -96,6 +106,7 @@
   import {REQ_METHOD, API_STATUS} from "../../model/JsonData";
   import MsJsr233Processor from "../processor/Jsr233Processor";
   import {KeyValue} from "../../model/ApiTestModel";
+  // import {append} from "./../../../../track/common/NodeTree";
 
   export default {
     name: "MsAddCompleteHttpApi",
@@ -161,6 +172,9 @@
           }
         })
       },
+      createModules(){
+        this.$emit("createRootModelInTree");
+      },
       getPath(id) {
         if (id === null) {
           return null;

frontend/src/business/components/api/definition/components/complete/EditCompleteSQLApi.vue

@@ -15,7 +15,7 @@
     <br/>
     <el-row>
       <el-col>
-        <ms-basis-api :moduleOptions="moduleOptions" :basisData="basisData" ref="basicForm" @callback="callback"/>
+        <ms-basis-api @createRootModelInTree="createRootModelInTree" :moduleOptions="moduleOptions" :basisData="basisData" ref="basicForm" @callback="callback"/>
       </el-col>
     </el-row>
 
@@ -70,6 +70,9 @@
           this.$emit('runTest', this.basisData);
         }
       },
+      createRootModelInTree(){
+        this.$emit("createRootModelInTree");
+      },
     },
   }
 </script>

frontend/src/business/components/api/definition/components/complete/EditCompleteTCPApi.vue

@@ -15,7 +15,7 @@
     <br/>
     <el-row>
       <el-col>
-        <ms-basis-api :moduleOptions="moduleOptions" :basisData="basisData" ref="basicForm" @callback="callback"/>
+        <ms-basis-api @createRootModelInTree="createRootModelInTree" :moduleOptions="moduleOptions" :basisData="basisData" ref="basicForm" @callback="callback"/>
       </el-col>
     </el-row>
 
@@ -70,7 +70,10 @@
           this.basisData.request = this.request;
           this.$emit('runTest', this.basisData);
         }
-      }
+      },
+      createRootModelInTree(){
+        this.$emit("createRootModelInTree");
+      },
     },
   }
 </script>

frontend/src/business/components/api/definition/components/module/ApiModule.vue

@@ -176,6 +176,13 @@
           this.$emit("nodeSelectEvent", node, nodeIds, pNodes);
         }
       },
+      //创建根目录的模块---供父类使用
+      createRootModel(){
+        let dataArr = this.$refs.nodeTree.extendTreeNodes;
+        if(dataArr.length>0){
+          this.$refs.nodeTree.append({},dataArr[0]);
+        }
+      },
       exportAPI() {
         this.$emit('exportAPI');
       },

frontend/src/i18n/en-US.js

@@ -505,6 +505,10 @@ export default {
       api_case_status: "Ise case status",
       api_case_passing_rate: "Use case pass rate",
       create_tip: "Note: Detailed interface information can be filled out on the edit page",
+      select_comp:{
+        no_data:"No Data",
+        add_data:"Add Data"
+      },
       request: {
         grade_info: "Filter by rank",
         run_env: "Operating environment",

frontend/src/i18n/zh-CN.js

@@ -503,6 +503,10 @@ export default {
       api_case_status: "用例状态",
       api_case_passing_rate: "用例通过率",
       create_tip: "注: 详细的接口信息可以在编辑页面填写",
+      select_comp:{
+        no_data:"无数据",
+        add_data:"去添加"
+      },
       request: {
         grade_info: "按等级筛选",
         run_env: "运行环境",

frontend/src/i18n/zh-TW.js

@@ -503,6 +503,10 @@ export default {
       api_case_status: "用例狀態",
       api_case_passing_rate: "用例通過率",
       create_tip: "註: 詳細的接口信息可以在編輯頁面填寫",
+      select_comp:{
+        no_data:"無數據",
+        add_data:"去添加"
+      },
       request: {
         grade_info: "按等級筛选",
         run_env: "運行環境",