fix (接口自动化): 场景变量优化处理

--bug=1007127 --user=赵勇 【github#6706】添加场景变量时，场景变量名称必填项未校验 https://www.tapd.cn/55049933/s/1056658

frontend/src/business/components/api/automation/scenario/variable/EditConstant.vue

@@ -2,7 +2,7 @@
   <div>
     <el-form :model="editData" label-position="right" label-width="80px" size="small" ref="form" :rules="rules">
       <el-form-item :label="$t('api_test.variable_name')" prop="name">
-        <el-input v-model="editData.name" :placeholder="$t('api_test.variable_name')" ref="nameInput"></el-input>
+        <el-input v-model="editData.name" :placeholder="$t('api_test.variable_name')" ref="nameInput"/>
       </el-form-item>
 
       <el-form-item :label="$t('commons.description')" prop="description">
@@ -10,12 +10,13 @@
                   v-model="editData.description"
                   type="textarea"
                   :autosize="{ minRows: 2, maxRows: 10}"
-                  :rows="2" size="small"/>
+                  :rows="2" size="small" :disabled="disabled"/>
       </el-form-item>
 
       <el-form-item :label="$t('api_test.value')" prop="value">
         <el-col class="item">
           <el-autocomplete
+            :disabled="disabled"
             size="small"
             :placeholder="$t('api_test.value')"
             style="width: 100%;"
@@ -51,6 +52,11 @@
         },
       }
     },
+    computed:{
+      disabled() {
+        return !(this.editData.name && this.editData.name !=="");
+      }
+    },
     methods: {
       advanced() {
         this.$refs.variableAdvance.open();
@@ -66,8 +72,8 @@
         };
       },
       funcSearch(queryString, cb) {
-        let funcs = MOCKJS_FUNC.concat(JMETER_FUNC);
-        let results = queryString ? funcs.filter(this.funcFilter(queryString)) : funcs;
+        let func = MOCKJS_FUNC.concat(JMETER_FUNC);
+        let results = queryString ? func.filter(this.funcFilter(queryString)) : func;
         // 调用 callback 返回建议列表的数据
         cb(results);
       },

frontend/src/business/components/api/automation/scenario/variable/EditCounter.vue

@@ -9,41 +9,46 @@
                 v-model="editData.description"
                 type="textarea"
                 :autosize="{ minRows: 2, maxRows: 10}"
-                :rows="2" size="small"/>
+                :rows="2" size="small" :disabled="disabled"/>
     </el-form-item>
 
     <el-form-item :label="$t('variables.start')" prop="startNumber">
-      <el-input-number size="small" v-model="editData.startNumber" placeholder="0" style="width: 100%" :max="1000*10000000" :min="0"/>
+      <el-input-number :disabled="disabled" size="small" v-model="editData.startNumber" placeholder="0" style="width: 100%" :max="1000*10000000" :min="0"/>
     </el-form-item>
     <el-form-item :label="$t('variables.end')" prop="endNumber">
-      <el-input-number size="small" v-model="editData.endNumber" placeholder="10" style="width: 100%" :max="1000*10000000" :min="0"/>
+      <el-input-number :disabled="disabled" size="small" v-model="editData.endNumber" placeholder="10" style="width: 100%" :max="1000*10000000" :min="0"/>
     </el-form-item>
     <el-form-item :label="$t('variables.increment')" prop="increment">
-      <el-input-number size="small" v-model="editData.increment" placeholder="1" style="width: 100%" :max="1000*10000000" :min="0"/>
+      <el-input-number :disabled="disabled" size="small" v-model="editData.increment" placeholder="1" style="width: 100%" :max="1000*10000000" :min="0"/>
     </el-form-item>
     <el-form-item :label="$t('variables.format')" prop="value">
-      <el-input v-model="editData.value" :placeholder="$t('variables.counter_info')"></el-input>
+      <el-input :disabled="disabled" v-model="editData.value" :placeholder="$t('variables.counter_info')"></el-input>
     </el-form-item>
   </el-form>
 </template>
 
 <script>
-  export default {
-    name: "MsEditCounter",
-    components: {},
-    props: {
-      editData: {},
-    },
-    data() {
-      return {
-        rules: {
-          name: [
-            {required: true, message: this.$t('test_track.case.input_name'), trigger: 'blur'},
-          ],
-        },
-      }
-    },
-  }
+export default {
+  name: "MsEditCounter",
+  components: {},
+  props: {
+    editData: {},
+  },
+  computed: {
+    disabled() {
+      return !(this.editData.name && this.editData.name !== "");
+    }
+  },
+  data() {
+    return {
+      rules: {
+        name: [
+          {required: true, message: this.$t('test_track.case.input_name'), trigger: 'blur'},
+        ],
+      },
+    }
+  },
+}
 </script>
 
 <style scoped>

frontend/src/business/components/api/automation/scenario/variable/EditCsv.vue

@@ -8,6 +8,7 @@
       <el-input class="ms-http-textarea"
                 v-model="editData.description"
                 type="textarea"
+                :disabled="disabled"
                 :placeholder="$t('commons.input_content')"
                 :autosize="{ minRows: 2, maxRows: 10}"
                 :rows="2" size="small"/>
@@ -31,6 +32,7 @@
               size="small"
               style="width: 100%"
               v-model="editData.encoding"
+              :disabled="disabled"
               :fetch-suggestions="querySearch"
               :placeholder="$t('commons.input_content')"
             ></el-autocomplete>
@@ -41,7 +43,7 @@
             <span>{{$t('variables.delimiter')}}</span>
           </el-col>
           <el-col :span="19">
-            <el-input v-model="editData.delimiter" size="small"/>
+            <el-input v-model="editData.delimiter" size="small" :disabled="disabled"/>
           </el-col>
         </el-row>
         <el-row style="margin-top: 10px">
@@ -49,7 +51,7 @@
             <span>{{$t('variables.quoted_data')}}</span>
           </el-col>
           <el-col :span="19">
-            <el-select v-model="editData.quotedData" size="small">
+            <el-select v-model="editData.quotedData" size="small" :disabled="disabled">
               <el-option label="True" :value="true"/>
               <el-option label="False" :value="false"/>
             </el-select>
@@ -94,7 +96,7 @@
         editFlag: false,
         previewData: [],
         columns: [],
-        allDatas: [],
+        allData: [],
         rules: {
           name: [
             {required: true, message: this.$t('test_track.case.input_name'), trigger: 'blur'},
@@ -102,26 +104,31 @@
         },
       }
     },
+    computed: {
+      disabled() {
+        return !(this.editData.name && this.editData.name !== "");
+      }
+    },
     methods: {
       complete(results) {
         if (results.errors && results.errors.length > 0) {
           this.$error(results.errors);
           return;
         }
-        if (this.allDatas) {
-          this.columns = this.allDatas[0];
-          this.allDatas.splice(0, 1);
-          this.previewData = this.allDatas;
+        if (this.allData) {
+          this.columns = this.allData[0];
+          this.allData.splice(0, 1);
+          this.previewData = this.allData;
         }
         this.loading = false;
       },
       step(results, parser) {
-        this.allDatas.push(results.data);
+        this.allData.push(results.data);
       },
 
       handleClick() {
         let config = {complete: this.complete, step: this.step, delimiter: this.editData.delimiter ? this.editData.delimiter : ","};
-        this.allDatas = [];
+        this.allData = [];
         // 本地文件
         if (this.editData.files && this.editData.files.length > 0 && this.editData.files[0].file) {
           this.loading = true;

frontend/src/business/components/api/automation/scenario/variable/EditListValue.vue

@@ -9,32 +9,39 @@
                 v-model="editData.description"
                 type="textarea"
                 :autosize="{ minRows: 2, maxRows: 10}"
-                :rows="2" size="small"/>
+                :rows="2" size="small"
+                :disabled="disabled"
+      />
     </el-form-item>
 
     <el-form-item :label="$t('api_test.value')" prop="value">
-      <el-input v-model="editData.value" placeholder="列表数据用,分隔"></el-input>
+      <el-input v-model="editData.value" :disabled="disabled" placeholder="列表数据用,分隔"/>
     </el-form-item>
   </el-form>
 </template>
 
 <script>
-  export default {
-    name: "MsEditListValue",
-    components: {},
-    props: {
-      editData: {},
-    },
-    data() {
-      return {
-        rules: {
-          name: [
-            {required: true, message: this.$t('test_track.case.input_name'), trigger: 'blur'},
-          ],
-        },
-      }
-    },
-  }
+export default {
+  name: "MsEditListValue",
+  components: {},
+  props: {
+    editData: {},
+  },
+  computed: {
+    disabled() {
+      return !(this.editData.name && this.editData.name !== "");
+    }
+  },
+  data() {
+    return {
+      rules: {
+        name: [
+          {required: true, message: this.$t('test_track.case.input_name'), trigger: 'blur'},
+        ],
+      },
+    }
+  },
+}
 </script>
 
 <style scoped>

frontend/src/business/components/api/automation/scenario/variable/EditRandom.vue

@@ -8,40 +8,46 @@
       <el-input class="ms-http-textarea"
                 v-model="editData.description"
                 type="textarea"
+                :disabled="disabled"
                 :autosize="{ minRows: 2, maxRows: 10}"
                 :rows="2" size="small"/>
     </el-form-item>
 
     <el-form-item :label="$t('schema.minimum')" prop="minNumber">
-      <el-input size="small" v-model="editData.minNumber" placeholder="0"/>
+      <el-input :disabled="disabled" size="small" v-model="editData.minNumber" placeholder="0"/>
     </el-form-item>
     <el-form-item :label="$t('schema.maximum')" prop="maxNumber">
-      <el-input size="small" v-model="editData.maxNumber" placeholder="10"/>
+      <el-input :disabled="disabled" size="small" v-model="editData.maxNumber" placeholder="10"/>
     </el-form-item>
     <el-form-item :label="$t('variables.format')" prop="value">
-      <el-input v-model="editData.value" :placeholder="$t('variables.counter_info')"></el-input>
+      <el-input :disabled="disabled" v-model="editData.value" :placeholder="$t('variables.counter_info')"></el-input>
     </el-form-item>
   </el-form>
 </template>
 
 <script>
 
-  export default {
-    name: "MsEditRandom",
-    components: {},
-    props: {
-      editData: {},
-    },
-    data() {
-      return {
-        rules: {
-          name: [
-            {required: true, message: this.$t('test_track.case.input_name'), trigger: 'blur'},
-          ],
-        },
-      }
-    },
-  }
+export default {
+  name: "MsEditRandom",
+  components: {},
+  props: {
+    editData: {},
+  },
+  computed: {
+    disabled() {
+      return !(this.editData.name && this.editData.name !== "");
+    }
+  },
+  data() {
+    return {
+      rules: {
+        name: [
+          {required: true, message: this.$t('test_track.case.input_name'), trigger: 'blur'},
+        ],
+      },
+    }
+  },
+}
 </script>
 
 <style scoped>