feat(接口测试): 场景中复制的api支持存为case

--story=1010408 --user=王孝刚 【接口测试】场景用例中复制的api步骤支持另存为单接口case https://www.tapd.cn/55049933/s/1289649

api-test/frontend/src/business/automation/scenario/api/AddApiCase.vue

@@ -0,0 +1,127 @@
+<template>
+  <el-dialog :close-on-click-modal="false" :title="$t('api_test.definition.request.save_as_case')"
+             :visible.sync="httpVisible"
+             width="30%"
+             :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('api_definition.case_name')" prop="name">
+        <el-input v-model="httpForm.name" autocomplete="off" :placeholder="$t('api_definition.case_name')"/>
+      </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 {createApiCase} from "@/api/api-test-case";
+import MsDialogFooter from "metersphere-frontend/src/components/MsDialogFooter";
+import {getUUID} from "metersphere-frontend/src/utils";
+
+export default {
+  name: "MsAddApiCase",
+  components: {MsDialogFooter},
+  data() {
+    return {
+      httpVisible: false,
+      loading: false,
+      httpForm: {},
+      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'}
+        ],
+      },
+    }
+  }
+  ,
+  methods: {
+    saveApi() {
+      this.saveCase(this.httpForm);
+    },
+    saveCase(api) {
+      let obj = {
+        apiDefinitionId: api.id,
+        name: api.name,
+        priority: 'P0',
+        active: true,
+        uuid: getUUID(),
+        request: api
+      };
+      obj.projectId = api.projectId;
+      obj.id = obj.uuid;
+      obj.versionId = api.versionId;
+      let bodyFiles = this.getBodyUploadFiles(obj);
+      createApiCase(null, bodyFiles, obj).then((response) => {
+        this.$success(this.$t('commons.save_success'));
+        this.httpVisible = false;
+      });
+    },
+    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;
+    },
+    reload() {
+      this.loading = true
+      this.$nextTick(() => {
+        this.loading = false
+      })
+    },
+    open(api) {
+      if (api) {
+        this.httpForm = api;
+        this.httpVisible = true;
+      }
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+.create-tip {
+  color: #8c939d;
+}
+
+</style>

api-test/frontend/src/business/automation/scenario/component/StepExtendBtns.vue

@@ -29,6 +29,10 @@
                           v-if="allSamplers.indexOf(data.type)!=-1 && (data.referenced===undefined || data.referenced ==='Created' )">
           {{ this.$t("api_test.automation.save_as_api") }}
         </el-dropdown-item>
+        <el-dropdown-item command="saveAsCase"
+                          v-if="data.refType==='API'">
+          {{ this.$t('api_test.definition.request.save_as_case') }}
+        </el-dropdown-item>
         <el-dropdown-item command="setScenario" v-if="data.type==='scenario'">
           {{ $t('commons.reference_settings') }}
         </el-dropdown-item>
@@ -37,6 +41,8 @@
     <ms-variable-list ref="scenarioParameters" @setVariables="setVariables"/>
     <ms-add-basis-api :currentProtocol="currentProtocol" ref="api"/>
 
+    <ms-add-api-case :currentProtocol="currentProtocol" ref="apiCase"/>
+
 
     <el-dialog
       :title="$t('commons.reference_settings')"
@@ -60,13 +66,15 @@
 import {STEP} from "../Setting";
 import MsVariableList from "../variable/VariableList";
 import MsAddBasisApi from "../api/AddBasisApi";
+import MsAddApiCase from "../api/AddApiCase";
 import {getUUID, strMapToObj} from "metersphere-frontend/src/utils";
 import {getCurrentProjectID} from "metersphere-frontend/src/utils/token";
 import {checkScenarioEnv, getScenarioWithBLOBsById, setScenarioDomain} from "@/api/scenario";
+import {hasPermission} from "metersphere-frontend/src/utils/permission";
 
 export default {
   name: "StepExtendBtns",
-  components: {STEP, MsVariableList, MsAddBasisApi},
+  components: {STEP, MsVariableList, MsAddBasisApi, MsAddApiCase},
   props: {
     isScenario: {
       type: Boolean,
@@ -123,6 +131,9 @@ export default {
         case "rename":
           this.$emit("rename");
           break;
+        case "saveAsCase":
+          this.saveAsCase();
+          break;
       }
     },
     setVariables(v, h) {
@@ -185,7 +196,7 @@ export default {
             scenarioDefinition[i].refEevMap = this.data.environmentMap;
           }
         }
-        if (scenarioDefinition[i].hashTree  && scenarioDefinition[i].hashTree.length > 0) {
+        if (scenarioDefinition[i].hashTree && scenarioDefinition[i].hashTree.length > 0) {
           this.setOwnEnvironment(scenarioDefinition[i].hashTree);
         }
       }
@@ -194,7 +205,18 @@ export default {
       this.currentProtocol = this.data.protocol;
       this.data.customizeReq = false;
       this.$refs.api.open(this.data);
-    }
+    },
+    saveAsCase() {
+      if (!this.data.num) {
+        this.$warning(this.$t('api_test.automation.scenario.api_none'));
+        return false;
+      }
+      if (!hasPermission('PROJECT_API_DEFINITION:READ+EDIT_CASE')) {
+        this.$message.error(this.$t('api_definition.case_no_permission'));
+        return false;
+      }
+      this.$refs.apiCase.open(this.data);
+    },
   }
 }
 </script>

api-test/frontend/src/i18n/lang/en-US.js

@@ -17,7 +17,9 @@ const message = {
     },
     body: {
       json_format_error: "JSON format error"
-    }
+    },
+    case_name: "Case name",
+    case_no_permission: "No permission to edit case"
   },
   home: {
     dashboard: {

api-test/frontend/src/i18n/lang/zh-CN.js

@@ -17,7 +17,9 @@ const message = {
     },
     body: {
       json_format_error: "JSON格式错误",
-    }
+    },
+    case_name: "用例名称",
+    case_no_permission: "无编辑用例的权限",
   },
   home: {
     dashboard: {

api-test/frontend/src/i18n/lang/zh-TW.js

@@ -17,7 +17,9 @@ const message = {
     },
     body: {
       json_format_error: "JSON格式錯誤",
-    }
+    },
+    case_name: "用例名稱",
+    case_no_permission: "無編輯用例的權限",
   },
   home: {
     dashboard: {