From e8c2bcc5baa4c77a4450e5eaf88f28e7dc8fc476 Mon Sep 17 00:00:00 2001
From: junhong <junhong.zhou@fit2cloud.com>
Date: Fri, 21 Jan 2022 11:39:07 +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=E5=9C=BA=E6=99=AF=E5=8F=98=E9=87=8F=E4=BA=A4?=
 =?UTF-8?q?=E4=BA=92=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

--story=1005318 --user=周骏弘 场景变量交互优化 https://www.tapd.cn/55049933/s/1095248
---
 .../scenario/variable/VariableList.vue        | 684 ++++++++++--------
 .../common/components/table/MsTable.vue       |  12 +-
 .../src/common/js/default-table-header.js     |   8 +
 frontend/src/i18n/en-US.js                    |   1 +
 frontend/src/i18n/zh-CN.js                    |   1 +
 frontend/src/i18n/zh-TW.js                    |   1 +
 6 files changed, 422 insertions(+), 285 deletions(-)

diff --git a/frontend/src/business/components/api/automation/scenario/variable/VariableList.vue b/frontend/src/business/components/api/automation/scenario/variable/VariableList.vue
index da7d4afd83..b05fe590f0 100644
--- a/frontend/src/business/components/api/automation/scenario/variable/VariableList.vue
+++ b/frontend/src/business/components/api/automation/scenario/variable/VariableList.vue
@@ -15,6 +15,7 @@
                             @keyup.enter="filter">
                     <el-select v-model="searchType" slot="prepend" :placeholder="$t('test_resource_pool.type')"
                                style="width: 90px" @change="filter">
+                      <el-option value="ALL" :label="$t('api_test.automation.all')"></el-option>
                       <el-option value="CONSTANT" :label="$t('api_test.automation.constant')"></el-option>
                       <el-option value="LIST" :label="$t('test_track.case.list')"></el-option>
                       <el-option value="CSV" label="CSV"></el-option>
@@ -23,24 +24,17 @@
                     </el-select>
                   </el-input>
                 </div>
-                <div style="float: right">
-                  <el-dropdown split-button type="primary" @command="handleClick" @click="handleClick('CONSTANT')"
-                               size="small" style="margin-left: 10px">
-                    {{ $t('commons.add') }}
-                    <el-dropdown-menu slot="dropdown">
-                      <el-dropdown-item command="CONSTANT">{{ $t('api_test.automation.constant') }}</el-dropdown-item>
-                      <el-dropdown-item command="LIST">{{ $t('test_track.case.list') }}</el-dropdown-item>
-                      <el-dropdown-item command="CSV">CSV</el-dropdown-item>
-                      <el-dropdown-item command="COUNTER">{{ $t('api_test.automation.counter') }}</el-dropdown-item>
-                      <el-dropdown-item command="RANDOM">{{ $t('api_test.automation.random') }}</el-dropdown-item>
-                    </el-dropdown-menu>
-                  </el-dropdown>
-                  <el-button size="small" style="margin-left: 10px" @click="deleteVariable">{{ $t('commons.delete') }}
-                  </el-button>
 
-                </div>
-                <div style="float: right; margin-top: 10px">
-                  <el-link @click="batchAddParameter" type="primary" :disabled="disabled">
+                <div style="float: right">
+                  <el-select v-model="selectType" :placeholder="$t('test_resource_pool.type')" style="width: 90px" size="small" @change="filter">
+                    <el-option value="CONSTANT" :label="$t('api_test.automation.constant')"></el-option>
+                    <el-option value="LIST" :label="$t('test_track.case.list')"></el-option>
+                    <el-option value="CSV" label="CSV"></el-option>
+                    <el-option value="COUNTER" :label="$t('api_test.automation.counter')"></el-option>
+                    <el-option value="RANDOM" :label="$t('api_test.automation.random')"></el-option>
+                  </el-select>
+                  <el-button size="small" style="margin-left: 10px" type="primary" @click="addVariable">{{ $t('commons.add') }}</el-button>
+                  <el-link @click="batchAddParameter" type="primary" :disabled="disabled" style="margin-left: 10px">
                     {{ $t("commons.batch_add") }}
                   </el-link>
                 </div>
@@ -48,23 +42,56 @@
               <el-row>
                 <el-col :span="12">
                   <div style="border:1px #DCDFE6 solid; min-height: 400px;border-radius: 4px ;width: 100% ;">
-                    <el-table ref="table" border :data="variables" class="adjust-table"
-                              :row-class-name="tableRowClassName"
-                              @select-all="select"
-                              @select="select"
-                              @row-click="edit"
-                              v-loading="loading" height="400px">
-                      <el-table-column type="selection" width="38"/>
-                      <el-table-column prop="num" label="ID" sortable width="60"/>
-                      <el-table-column prop="name" :label="$t('api_test.variable_name')" sortable
-                                       show-overflow-tooltip/>
-                      <el-table-column prop="type" :label="$t('test_track.case.type')" width="70">
-                        <template v-slot:default="scope">
-                          <span>{{ types.get(scope.row.type) }}</span>
-                        </template>
-                      </el-table-column>
-                      <el-table-column prop="value" :label="$t('api_test.value')" show-overflow-tooltip/>
-                    </el-table>
+                        <ms-table
+                          v-loading="loading"
+                          row-key="id"
+                          :data="variables"
+                          :total="variables.length"
+                          :screen-height="screenHeight"
+                          :batch-operators="batchButtons"
+                          :remember-order="true"
+                          :highlightCurrentRow="true"
+                          :fields.sync="fields"
+                          :field-key="tableHeaderKey"
+                          @handleRowClick="handleRowClick"
+                          ref="variableTable">
+                          <span v-for="item in fields" :key="item.key">
+                            <ms-table-column
+                              prop="num"
+                              :field="item"
+                              :fields-width="fieldsWidth"
+                              sortable
+                              label="ID"
+                              min-width="60">
+                            </ms-table-column>
+                            <ms-table-column
+                              prop="name"
+                              :field="item"
+                              :fields-width="fieldsWidth"
+                              :label="$t('api_test.variable_name')"
+                              min-width="100"
+                              sortable>
+                            </ms-table-column>
+                            <ms-table-column
+                              prop="type"
+                              :field="item"
+                              :fields-width="fieldsWidth"
+                              :label="$t('test_track.case.type')"
+                              min-width="70"
+                              sortable>
+                              <template v-slot:default="scope">
+                                <span>{{ types.get(scope.row.type) }}</span>
+                              </template>
+                            </ms-table-column>
+                            <ms-table-column
+                              prop="value"
+                              :field="item"
+                              :fields-width="fieldsWidth"
+                              :label="$t('api_test.value')"
+                              sortable>
+                            </ms-table-column>
+                          </span>
+                        </ms-table>
                     <batch-add-parameter @batchSave="batchSaveParameter" ref="batchAddParameter"/>
                   </div>
                 </el-col>
@@ -74,11 +101,14 @@
                   <ms-edit-random v-if="editData.type=='RANDOM'" ref="random" :editData.sync="editData"/>
                   <ms-edit-list-value v-if="editData.type=='LIST'" ref="listValue" :editData="editData"/>
                   <ms-edit-csv v-if="editData.type=='CSV'" ref="csv" :editData.sync="editData"/>
+                  <div v-if="editData.type" style="float: right">
+                    <el-button size="small" style="margin-left: 10px" type="primary" @click="confirmVariable">{{ $t('commons.confirm') }}</el-button>
+                    <el-button size="small" style="margin-left: 10px" @click="cancelVariable">{{ $t('commons.cancel') }}</el-button>
+                    <el-button v-if="showDelete" size="small" style="margin-left: 10px" @click="deleteVariable">{{ $t('commons.delete') }}</el-button>
+                  </div>
                 </el-col>
               </el-row>
             </div>
-
-
           </el-tab-pane>
           <el-tab-pane :label="$t('api_test.scenario.headers')" name="headers">
             <!-- 请求头-->
@@ -112,278 +142,364 @@
 </template>
 
 <script>
-import MsEditConstant from "./EditConstant";
-import MsDialogFooter from "../../../../common/components/MsDialogFooter";
-import MsTableHeader from "@/business/components/common/components/MsTableHeader";
-import MsTablePagination from "@/business/components/common/pagination/TablePagination";
-import MsEditCounter from "./EditCounter";
-import MsEditRandom from "./EditRandom";
-import MsEditListValue from "./EditListValue";
-import MsEditCsv from "./EditCsv";
-import {getUUID} from "@/common/js/utils";
-import MsApiKeyValue from "../../../definition/components/ApiKeyValue";
-import BatchAddParameter from "../../../definition/components/basis/BatchAddParameter";
-import {KeyValue} from "../../../definition/model/ApiTestModel";
-import {REQUEST_HEADERS} from "@/common/js/constants";
+  import MsEditConstant from "./EditConstant";
+  import MsDialogFooter from "../../../../common/components/MsDialogFooter";
+  import MsTableHeader from "@/business/components/common/components/MsTableHeader";
+  import MsTablePagination from "@/business/components/common/pagination/TablePagination";
+  import MsEditCounter from "./EditCounter";
+  import MsEditRandom from "./EditRandom";
+  import MsEditListValue from "./EditListValue";
+  import MsEditCsv from "./EditCsv";
+  import {getUUID} from "@/common/js/utils";
+  import MsApiKeyValue from "../../../definition/components/ApiKeyValue";
+  import BatchAddParameter from "../../../definition/components/basis/BatchAddParameter";
+  import {KeyValue} from "../../../definition/model/ApiTestModel";
+  import {REQUEST_HEADERS} from "@/common/js/constants";
 
-export default {
-  name: "MsVariableList",
-  components: {
-    MsEditConstant,
-    MsDialogFooter,
-    MsTableHeader,
-    MsTablePagination,
-    MsEditCounter,
-    MsEditRandom,
-    MsEditListValue,
-    MsEditCsv,
-    MsApiKeyValue,
-    BatchAddParameter
-  },
-  data() {
-    return {
-      variables: [],
-      headers: [],
-      activeName: "variable",
-      searchType: "",
-      selectVariable: "",
-      condition: {},
-      types: new Map([
-        ['CONSTANT', this.$t('api_test.automation.constant')],
-        ['LIST', this.$t('test_track.case.list')],
-        ['CSV', 'CSV'],
-        ['COUNTER', this.$t('api_test.automation.counter')],
-        ['RANDOM', this.$t('api_test.automation.random')]
-      ]),
-      visible: false,
-      selection: [],
-      loading: false,
-      currentPage: 1,
-      editData: {},
-      pageSize: 10,
-      total: 0,
-      headerSuggestions: REQUEST_HEADERS,
-      disabled: false,
-    };
-  },
-  methods: {
-    batchAddParameter() {
-      this.$refs.batchAddParameter.open();
+  import MsTable from "@/business/components/common/components/table/MsTable";
+  import MsTableColumn from "@/business/components/common/components/table/MsTableColumn";
+  import {
+    getCustomTableWidth,
+    getCustomTableHeader
+  } from "@/common/js/tableUtils";
+
+  export default {
+    name: "MsVariableList",
+    components: {
+      MsEditConstant,
+      MsDialogFooter,
+      MsTableHeader,
+      MsTablePagination,
+      MsEditCounter,
+      MsEditRandom,
+      MsEditListValue,
+      MsEditCsv,
+      MsApiKeyValue,
+      BatchAddParameter,
+      MsTableColumn,
+      MsTable,
     },
-    batchAddHeader() {
-      this.$refs.batchAddHeader.open();
+    data() {
+      return {
+        variables: [],
+        headers: [],
+        activeName: "variable",
+        searchType: "",
+        selectVariable: "",
+        condition: {},
+        types: new Map([
+          ['CONSTANT', this.$t('api_test.automation.constant')],
+          ['LIST', this.$t('test_track.case.list')],
+          ['CSV', 'CSV'],
+          ['COUNTER', this.$t('api_test.automation.counter')],
+          ['RANDOM', this.$t('api_test.automation.random')]
+        ]),
+        visible: false,
+        selection: [],
+        loading: false,
+        currentPage: 1,
+        editData: {},
+        pageSize: 10,
+        total: 0,
+        headerSuggestions: REQUEST_HEADERS,
+        disabled: false,
+        selectType: "",
+        showDelete: false,
+        tableHeaderKey: "VARIABLE_LIST_TABLE",
+        fields: getCustomTableHeader('VARIABLE_LIST_TABLE'),
+        fieldsWidth: getCustomTableWidth('TRACK_REPORT_TABLE'),
+        screenHeight: '400px',
+        batchButtons: [
+          {
+            name: this.$t('api_test.definition.request.batch_delete'),
+            handleClick: this.handleDeleteBatch,
+          },
+        ],
+      };
     },
-    _handleBatchVars(data) {
-      if (data) {
-        let params = data.split("\n");
-        let keyValues = [];
-        params.forEach(item => {
-          let line = item.split(/：|:/);
-          let required = false;
-          keyValues.unshift(new KeyValue({
-            name: line[0],
-            required: required,
-            value: line[1],
-            description: line[2],
-            type: "text",
-            valid: false,
-            file: false,
-            encode: true,
-            enable: true,
-            contentType: "text/plain"
-          }));
-        })
-        return keyValues;
-      }
-    },
-    batchSaveHeader(data) {
-      if (data) {
-        let keyValues = this._handleBatchVars(data);
-        keyValues.forEach(item => {
-          this.format(this.headers, item);
-        });
-      }
-    },
-    format(array, obj) {
-      if (array) {
-        let isAdd = true;
-        for (let i in array) {
-          let item = array[i];
-          if (item.name === obj.name) {
-            item.value = obj.value;
-            isAdd = false;
+    methods: {
+      batchAddParameter() {
+        this.$refs.batchAddParameter.open();
+      },
+      batchAddHeader() {
+        this.$refs.batchAddHeader.open();
+      },
+      _handleBatchVars(data) {
+        if (data) {
+          let params = data.split("\n");
+          let keyValues = [];
+          params.forEach(item => {
+            let line = item.split(/：|:/);
+            let required = false;
+            keyValues.unshift(new KeyValue({
+              name: line[0],
+              required: required,
+              value: line[1],
+              description: line[2],
+              type: "text",
+              valid: false,
+              file: false,
+              encode: true,
+              enable: true,
+              contentType: "text/plain"
+            }));
+          })
+          return keyValues;
+        }
+      },
+      batchSaveHeader(data) {
+        if (data) {
+          let keyValues = this._handleBatchVars(data);
+          keyValues.forEach(item => {
+            this.format(this.headers, item);
+          });
+        }
+      },
+      format(array, obj) {
+        if (array) {
+          let isAdd = true;
+          for (let i in array) {
+            let item = array[i];
+            if (item.name === obj.name) {
+              item.value = obj.value;
+              isAdd = false;
+            }
+          }
+          if (isAdd) {
+            this.headers.unshift(obj);
           }
         }
-        if (isAdd) {
-          this.headers.unshift(obj);
+      },
+      batchSaveParameter(data) {
+        if (data) {
+          let keyValues = this._handleBatchVars(data);
+          keyValues.forEach(item => {
+            item.type = 'CONSTANT';
+            this.addParameters(item);
+          });
         }
-      }
-    },
-    batchSaveParameter(data) {
-      if (data) {
-        let keyValues = this._handleBatchVars(data);
-        keyValues.forEach(item => {
-          item.type = 'CONSTANT';
-          this.addParameters(item);
+      },
+      handleClick(command) {
+        this.editData = {delimiter: ",", quotedData: 'false'};
+        this.editData.type = command;
+        this.addParameters(this.editData);
+      },
+
+      addParameters(v) {
+        v.id = getUUID();
+        if (v.type === 'CSV') {
+          v.delimiter = ",";
+          v.quotedData = false;
+        }
+        this.variables.push(v);
+        let index = 1;
+        this.variables.forEach(item => {
+          item.num = index;
+          index++;
         });
-      }
-    },
-    handleClick(command) {
-      this.editData = {delimiter: ",", quotedData: 'false'};
-      this.editData.type = command;
-      this.addParameters(this.editData);
-    },
-    edit(row) {
-      this.$refs.table.clearSelection();
-      this.$refs.table.toggleRowSelection(row);
-      this.selection = [row.id];
-      this.editData = row;
-    },
-    tableRowClassName(row) {
-      if (row.row.hidden) {
-        return 'ms-variable-hidden-row';
-      }
-      return '';
-    },
-    addParameters(v) {
-      v.id = getUUID();
-      if (v.type === 'CSV') {
-        v.delimiter = ",";
-        v.quotedData = false;
-      }
-      this.variables.push(v);
-      let index = 1;
-      this.variables.forEach(item => {
-        item.num = index;
-        index++;
-      });
-    },
-    select(selection) {
-      this.selection = selection.map(s => s.id);
-    },
-    isSelect(row) {
-      return this.selection.includes(row.id);
-    },
-    open: function (variables, headers, disabled) {
-      if (variables) {
-        this.variables = variables;
-      }
-      if (headers) {
-        this.headers = headers;
-      }
-      this.visible = true;
-      this.disabled = disabled;
-    },
-    save() {
-      this.visible = false;
-    },
-    close() {
-      this.visible = false;
-      let saveVariables = [];
-      this.variables.forEach(item => {
-        item.hidden = undefined;
-        if (item.name && item.name != "") {
-          saveVariables.push(item);
+      },
+      sortParamters() {
+        let index = 1;
+        this.variables.forEach(item => {
+          item.num = index;
+          index++;
+        });
+      },
+      updateParameters(v) {
+        this.editData = JSON.parse(JSON.stringify(v));
+        let datas = [];
+        this.variables.forEach(item => {
+          if(item.id === v.id){
+            item = v;
+          }
+          datas.push(item);
+        });
+        this.variables = datas;
+      },
+      select(selection) {
+        this.selection = selection.map(s => s.id);
+      },
+      open: function (variables, headers, disabled) {
+        if (variables) {
+          this.variables = variables;
         }
-      });
-      this.selectVariable = "";
-      this.searchType = "";
-      this.$emit('setVariables', saveVariables, this.headers);
-    },
-    deleteVariable() {
-      let ids = Array.from(this.selection);
-      if (ids.length == 0) {
-        this.$warning("请选择一条数据删除");
-        return;
-      }
-      let message = "";
-      ids.forEach(row => {
-        const v = this.variables.find(d => d.id === row);
-        if (v.name) {
-          message += v.name + ";";
+        if (headers) {
+          this.headers = headers;
         }
-      });
-      if (message !== "") {
-        message = message.substr(0, message.length - 1);
-        this.$alert('是否确认删除变量：【 ' + message + " 】？", '', {
+        this.visible = true;
+        this.disabled = disabled;
+      },
+      save() {
+        this.visible = false;
+      },
+      close() {
+        this.visible = false;
+        let saveVariables = [];
+        this.variables.forEach(item => {
+          item.hidden = undefined;
+          if (item.name && item.name != "") {
+            saveVariables.push(item);
+          }
+        });
+        this.selectVariable = "";
+        this.searchType = "";
+        this.$emit('setVariables', saveVariables, this.headers);
+      },
+      addVariable() {
+        this.editData = {delimiter: ",", quotedData: 'false'};
+        this.editData.type = this.selectType;
+        this.showDelete = false;
+        this.$refs.variableTable.cancelCurrentRow();
+      },
+      confirmVariable() {
+        if (this.editData && (this.editData.name == undefined || this.editData.name == '')) {
+          this.$warning("变量名不能为空");
+          return;
+        }
+        // 更新场景，修改左边数据
+        if(this.showDelete){
+          this.updateParameters(this.editData);
+        }else{
+          // 新增场景，往左边新加
+          this.addParameters(this.editData);
+          this.addVariable();
+          this.$refs.variableTable.cancelCurrentRow();
+        }
+      },
+      cancelVariable() {
+        this.$refs.variableTable.cancelCurrentRow();
+        // 清空表单
+        this.editData = {};
+      },
+      deleteVariable() {
+        let ids = [this.editData.id];
+        if (ids.length == 0) {
+          this.$warning("请选择一条数据删除");
+          return;
+        }
+        let message = "";
+        ids.forEach(row => {
+          const v = this.variables.find(d => d.id === row);
+          if (v.name) {
+            message += v.name + ";";
+          }
+        });
+        if (message !== "") {
+          message = message.substr(0, message.length - 1);
+          this.$alert('是否确认删除变量：【 ' + message + " 】？", '', {
+            confirmButtonText: this.$t('commons.confirm'),
+            callback: (action) => {
+              if (action === 'confirm') {
+                ids.forEach(row => {
+                  const index = this.variables.findIndex(d => d.id === row);
+                  this.variables.splice(index, 1);
+                });
+                this.sortParamters();
+                this.editData = {};
+              }
+            }
+          });
+        } else {
+          ids.forEach(row => {
+            const index = this.variables.findIndex(d => d.id === row);
+            this.variables.splice(index, 1);
+          });
+          this.sortParamters();
+          this.editData = {};
+        }
+      },
+      handleDeleteBatch() {
+        this.$alert("是否确认删除所选变量" + ' ' + " ？", '', {
           confirmButtonText: this.$t('commons.confirm'),
           callback: (action) => {
             if (action === 'confirm') {
+              let ids = this.$refs.variableTable.selectIds;
               ids.forEach(row => {
                 const index = this.variables.findIndex(d => d.id === row);
                 this.variables.splice(index, 1);
               });
+              // this.editData = {type: "CONSTANT"};
+              this.sortParamters();
+              this.editData = {};
+              this.$refs.variableTable.cancelCurrentRow();
+              this.$refs.variableTable.clear();
             }
           }
         });
-      } else {
-        ids.forEach(row => {
-          const index = this.variables.findIndex(d => d.id === row);
-          this.variables.splice(index, 1);
+      },
+      filter() {
+        let datas = [];
+        this.variables.forEach(item => {
+          if (this.searchType && this.searchType != "" && this.selectVariable && this.selectVariable != "") {
+            if ((item.type && item.type.toLowerCase().indexOf(this.searchType.toLowerCase()) == -1 && this.searchType != 'ALL')
+              || (item.name && item.name.toLowerCase().indexOf(this.selectVariable.toLowerCase()) == -1)) {
+              item.hidden = true;
+            } else {
+              item.hidden = undefined;
+            }
+          } else if (this.selectVariable && this.selectVariable != "") {
+            if (item.name && item.name.toLowerCase().indexOf(this.selectVariable.toLowerCase()) == -1) {
+              item.hidden = true;
+            } else {
+              item.hidden = undefined;
+            }
+          } else if (this.searchType && this.searchType != "") {
+            if (item.type && item.type.toLowerCase().indexOf(this.searchType.toLowerCase()) == -1 && this.searchType != 'ALL') {
+              item.hidden = true;
+            } else {
+              item.hidden = undefined;
+            }
+          } else {
+            item.hidden = undefined;
+          }
+          if(this.searchType === 'ALL' && !((this.selectVariable && this.selectVariable != ""))){
+            item.hidden = undefined;
+          }
+          datas.push(item);
         });
-      }
-      this.selection = [];
-      this.editData = {type: "CONSTANT"};
-    },
-    filter() {
-      let datas = [];
-      this.variables.forEach(item => {
-        if (this.searchType && this.searchType != "" && this.selectVariable && this.selectVariable != "") {
-          if ((item.type && item.type.toLowerCase().indexOf(this.searchType.toLowerCase()) == -1) || (item.name && item.name.toLowerCase().indexOf(this.selectVariable.toLowerCase()) == -1)) {
-            item.hidden = true;
-          } else {
-            item.hidden = undefined;
-          }
-        } else if (this.selectVariable && this.selectVariable != "") {
-          if (item.name && item.name.toLowerCase().indexOf(this.selectVariable.toLowerCase()) == -1) {
-            item.hidden = true;
-          } else {
-            item.hidden = undefined;
-          }
-        } else if (this.searchType && this.searchType != "") {
-          if (item.type && item.type.toLowerCase().indexOf(this.searchType.toLowerCase()) == -1) {
-            item.hidden = true;
-          } else {
-            item.hidden = undefined;
-          }
-        } else {
-          item.hidden = undefined;
-        }
-        datas.push(item);
-      });
-      this.variables = datas;
-    },
-    createFilter(queryString) {
-      return item => {
-        return (item.type && item.type.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
-      };
-    },
-  }
-};
+        this.variables = datas;
+      },
+      createFilter(queryString) {
+        return item => {
+          return (item.type && item.type.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
+        };
+      },
+      handleRowClick(row) {
+        // 做深拷贝
+        this.editData = JSON.parse(JSON.stringify(row));
+        this.showDelete = true;
+      },
+    }
+  };
 </script>
 
 <style>
-.ms-variable-hidden-row {
-  display: none;
-}
+  .ms-variable-hidden-row {
+    display: none;
+  }
 
-.ms-variable-header {
-  background: #783887;
-  color: white;
-  height: 18px;
-  border-radius: 42%;
-}
+  .ms-variable-header {
+    background: #783887;
+    color: white;
+    height: 18px;
+    border-radius: 42%;
+  }
 
-.ms-variable-link {
-  float: right;
-  margin-right: 45px;
-}
+  .ms-variable-link {
+    float: right;
+    margin-right: 45px;
+  }
 
-fieldset {
-  padding: 0px;
-  margin: 0px;
-  min-width: 100%;
-  min-inline-size: 0px;
-  border: 0px;
-}
+  fieldset {
+    padding: 0px;
+    margin: 0px;
+    min-width: 100%;
+    min-inline-size: 0px;
+    border: 0px;
+  }
+
+  .ms-select {
+    width: 100px;
+    margin-right: 10px;
+  }
 </style>
diff --git a/frontend/src/business/components/common/components/table/MsTable.vue b/frontend/src/business/components/common/components/table/MsTable.vue
index 8ade46a0f7..33194ff136 100644
--- a/frontend/src/business/components/common/components/table/MsTable.vue
+++ b/frontend/src/business/components/common/components/table/MsTable.vue
@@ -15,6 +15,7 @@
       :height="screenHeight"
       v-loading="tableIsLoading"
       :row-key="rowKey"
+      :row-class-name="tableRowClassName"
       :cell-class-name="addPaddingColClass"
       :highlight-current-row="highlightCurrentRow"
       ref="table" @row-click="handleRowClick">
@@ -400,6 +401,9 @@ export default {
     handlePageChange() {
       this.$emit('pageChange');
     },
+    cancelCurrentRow() {
+      this.$refs.table.setCurrentRow(-1);
+    },
     clear() {
       this.clearSelectRows();
     },
@@ -446,7 +450,13 @@ export default {
         || column.columnKey ==='batchBtnCol') {
         return 'padding-col';
       }
-    }
+    },
+    tableRowClassName(row) {
+      if (row.row.hidden) {
+        return 'ms-variable-hidden-row';
+      }
+      return '';
+    },
   }
 };
 </script>
diff --git a/frontend/src/common/js/default-table-header.js b/frontend/src/common/js/default-table-header.js
index 74c7f9f5a2..dccf02c4b0 100644
--- a/frontend/src/common/js/default-table-header.js
+++ b/frontend/src/common/js/default-table-header.js
@@ -213,6 +213,14 @@ export let CUSTOM_TABLE_HEADER = {
     {id: 'passRate', key: '8', label: 'test_track.report.list.pass_rate'},
   ],
 
+  // 场景变量
+  VARIABLE_LIST_TABLE: [
+    {id: 'num', key: '1', label: "ID"},
+    {id: 'name', key: '2', label: 'api_test.variable_name'},
+    {id: 'type', key: '3', label: 'test_track.case.type'},
+    {id: 'value', key: '4', label: 'api_test.value'},
+  ],
+
   //缺陷列表
   ISSUE_LIST: [
     {id: 'num', key: '1', label: 'test_track.issue.id'},
diff --git a/frontend/src/i18n/en-US.js b/frontend/src/i18n/en-US.js
index 9c454ad302..4ce1954a88 100644
--- a/frontend/src/i18n/en-US.js
+++ b/frontend/src/i18n/en-US.js
@@ -1283,6 +1283,7 @@ export default {
     automation: {
       open_expansion: "One-click expansion",
       close_expansion: "One-click storage",
+      all: "all",
       constant: "constant",
       counter: "counter",
       random: "random",
diff --git a/frontend/src/i18n/zh-CN.js b/frontend/src/i18n/zh-CN.js
index 1968bd7303..0c0e828ade 100644
--- a/frontend/src/i18n/zh-CN.js
+++ b/frontend/src/i18n/zh-CN.js
@@ -1288,6 +1288,7 @@ export default {
     automation: {
       open_expansion: "一键展开",
       close_expansion: "一键收起",
+      all: "全部",
       constant: "常量",
       counter: "计数器",
       random: "随机数",
diff --git a/frontend/src/i18n/zh-TW.js b/frontend/src/i18n/zh-TW.js
index b09e1472fb..f489c4788a 100644
--- a/frontend/src/i18n/zh-TW.js
+++ b/frontend/src/i18n/zh-TW.js
@@ -1288,6 +1288,7 @@ export default {
     automation: {
       open_expansion: "一鍵展開",
       close_expansion: "一鍵收起",
+      all: "全部",
       constant: "常量",
       counter: "計數器",
       random: "隨機數",