添加前置条件

src/views/auto/EditScene.vue

 <template>
   <div>
     <el-form ref="sceneFormRef" :rules="rules" :model="sceneForm" label-width="90px">
-      <el-form-item label="场景名称:" prop="name" style="width:310px">
-        <el-input v-model="sceneForm.name" disabled></el-input>
-      </el-form-item>
-      <el-form-item label="项目名称:" prop="projectId">
-        <el-select v-model="sceneForm.projectId" disabled>
-          <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id"></el-option>
-        </el-select>
-      </el-form-item>
+      <el-row>
+        <el-col :span="6">
+          <el-form-item label="场景名称:">
+            <el-input v-model="sceneForm.name" disabled></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="10">
+          <el-form-item label="项目名称:">
+            <el-select v-model="sceneForm.projectId" disabled>
+              <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-collapse style="margin-left:20px">
+        <el-collapse-item title="全局参数">
+          <el-form-item>
+            <el-row>
+              <el-col :span="6">
+                <div style="margin-left:150px">参数名</div>
+              </el-col>
+              <el-col :span="6">
+                <div style="margin-left:150px">参数值</div>
+              </el-col>
+              <el-col :span="2">
+                <div style="margin-left:60px">操作</div>
+              </el-col>
+            </el-row>
+            <el-row v-for="(item,index) in globalParamList" :key="index">
+              <el-col :span="6">
+                <el-input v-model.trim="item.globalParamsName" placeholder="请输入参数名称"></el-input>
+              </el-col>
+              <el-col :span="6" style="margin-left:15px">
+                <el-input v-model.trim="item.globalParamsValue" placeholder="请输入参数值"></el-input>
+              </el-col>
+              <el-col :span="2">
+                <!-- <el-button type="text" @click="globalDelss(index)" icon="el-icon-delete" style="height:35px;margin-left:20px">添加</el-button> -->
+                <el-button size="mini" type="danger" @click="globalDelss(index)" icon="el-icon-delete" style="height:35px;margin-left:20px">删除</el-button>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="14">
+                <el-button type="primary" style="width:770px;margin-top:20px" @click="addGlobalListRow()" class="el-icon-circle-plus">添加行</el-button>
+
+              </el-col>
+            </el-row>
+
+          </el-form-item>
+
+        </el-collapse-item>
+      </el-collapse>
+
       <el-form-item>
         <!-- 列表展示 -->
         <el-table :data="sceneTestcaseList" border style="width: 100%;margin-top:20px;cursor:pointer" row-key="sequence">
@@ -45,7 +90,7 @@
           </el-select>
         </el-form-item>
         <el-form-item>
-          <el-table  ref="multipleTable" :data="sceneCaseForm.caseList" border style="width: 100%;margin-left:1px" @selection-change="handleSelectionChange" @select="select" @select-all="selectAll">
+          <el-table ref="multipleTable" :data="sceneCaseForm.caseList" border style="width: 100%;margin-left:1px" @selection-change="handleSelectionChange" @select="select" @select-all="selectAll">
             <el-table-column type="selection" style="width:10%">
             </el-table-column>
             <el-table-column type='index' style="width:15%"></el-table-column>
@@ -58,16 +103,49 @@
         <el-button type="primary" @click="addSceneFrom">确 定</el-button>
       </span>
     </el-dialog>
+
     <!-- 编辑场景用例 -->
     <el-dialog title="编辑场景用例" :visible.sync="editDialogVisible" width="60%">
       <!-- <el-card> -->
       <el-form>
-        <el-form-item label="用例名称:" style="width:310px;">
+        <el-form-item label="用例名称:" style="width:300px">
           <el-input v-model="sceneCaseForm.name"></el-input>
         </el-form-item>
+
         <el-collapse v-model="activeNames">
+          <!-- 前置条件 -->
+          <el-collapse-item name="1" title="前置条件">
+            <el-form-item>
+              <el-table :data="preActionList" border style="width:100%;margin-top: 15px;">
+                <el-table-column label="数据库" width="150">
+                  <template slot-scope="scope">
+                    <el-input v-model="scope.row.db">
+                    </el-input>
+                  </template>
+                </el-table-column>
+                <el-table-column label="sql语句" width="600">
+                  <template slot-scope="scope">
+                    <el-input v-model="scope.row.sql">
+                    </el-input>
+                  </template>
+                </el-table-column>
+                <el-table-column label="Key值" width="100">
+                  <template slot-scope="scope">
+                    <el-input v-model="scope.row.key">
+                    </el-input>
+                  </template>
+                </el-table-column>
+                <el-table-column label="操作">
+                  <template slot-scope="scope">
+                    <el-button size="mini" type="danger" icon="el-icon-delete" @click="PreActiveDelete(scope.$index)" style="height:40px">删除</el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-form-item>
+            <el-button type="success" size="mini" plain @click="AddPreActiveListRow()" class="el-icon-circle-plus">添加行</el-button>
+          </el-collapse-item>
           <!-- Headers -->
-          <el-collapse-item name="1" title="请求头">
+          <el-collapse-item name="2" title="请求头">
             <el-form-item>
               <el-row>
                 <el-col :span="6">
@@ -95,7 +173,7 @@
             <el-button type="success" plain @click="AddHeaderListRow()" class="el-icon-circle-plus">添加行</el-button>
           </el-collapse-item>
           <!-- 请求参数 -->
-          <el-collapse-item name="2" title="请求参数">
+          <el-collapse-item name="3" title="请求参数">
             <el-form-item>
               <el-row>
                 <el-col :span="6">
@@ -123,7 +201,7 @@
             <el-button type="success" plain @click="AddRequestParamsListRow()" class="el-icon-circle-plus">添加行</el-button>
           </el-collapse-item>
           <!-- 响应解析列表 -->
-          <el-collapse-item name="3" title="响应提取">
+          <el-collapse-item name="4" title="响应提取">
             <el-form-item>
               <el-row>
                 <el-col :span="6">
@@ -151,7 +229,7 @@
             <el-button type="success" plain @click="AddResponseListRow()" class="el-icon-circle-plus">添加行</el-button>
           </el-collapse-item>
           <!-- 断言 -->
-          <el-collapse-item name="4" title="结果断言">
+          <el-collapse-item name="5" title="结果断言">
             <el-table :data="assertionList" border style="width:100%;margin-top: 15px;">
               <el-table-column label="Json表达式" width="300">
                 <template slot-scope="scope">
@@ -174,7 +252,7 @@
               </el-table-column>
               <el-table-column label="操作">
                 <template slot-scope="scope">
-                  <el-button size="mini" type="danger" icon="el-icon-delete" @click="AssertionDelete(scope.$index)" style="height:40px">删除</el-button>
+                  <el-button size="mini" type="danger" icon="el-icon-delete" @click="AssertionDelete(scope.$index)" style="height:35px">删除</el-button>
                 </template>
               </el-table-column>
             </el-table>
@@ -276,6 +354,8 @@ export default {
         extract: '',
         validate: '',
         sceneId: ''
+        // 前置条件
+        // preAction: []
       },
       sceneTestcaseList: [],
       sceneCaseInfo: {
@@ -297,7 +377,7 @@ export default {
         interfaceId: ''
       },
       editDialogVisible: false,
-      activeNames: ['1', '2', '3', '4'],
+      activeNames: ['1', '2', '3', '4', '5'],
       headersList: [],
       requestParamsList: [],
       responseList: [],
@@ -316,9 +396,11 @@ export default {
       },
       newIndex: 0,
       newCaseIndex: 0,
+      // 保存传递的参数
       newSceneForm: {
         sceneId: '',
-        sceneTestcaseList: []
+        sceneTestcaseList: [],
+        globalParameters: {}
       },
       selectAssertionList: [
         {
@@ -337,7 +419,9 @@ export default {
           id: 'neq',
           name: '不等于'
         }
-      ]
+      ],
+      globalParamList: [],
+      preActionList: []
     }
   },
   created() {
@@ -424,10 +508,10 @@ export default {
         parameters: this.sceneCaseForm.caseDetialList[0].parameters,
         extract: this.sceneCaseForm.caseDetialList[0].extract,
         validate: this.sceneCaseForm.caseDetialList[0].validate,
-        // id: this.sceneCaseForm.caseDetialList[0].id,
         interfaceId: this.sceneCaseForm.caseDetialList[0].interfaceId,
         sceneId: this.sceneCaseInfo.sceneId,
-        sequence: this.sceneTestcaseList.length + 1
+        sequence: this.sceneTestcaseList.length + 1,
+        preAction: this.preActionList
       })
       console.log('save----', this.sceneTestcaseList)
       this.DialogVisible = false
@@ -445,6 +529,7 @@ export default {
 
     // 编辑场景用例
     editeSceneFrom(row) {
+      console.log('6666', row)
       this.editDialogVisible = true
       this.sceneCaseForm.sequence = row.sequence
       this.sceneCaseForm.interfaceId = row.interfaceId
@@ -479,6 +564,8 @@ export default {
       }
       // 返回断言
       this.assertionList = JSON.parse(row.validate)
+      // 前置条件
+      this.preActionList = JSON.parse(row.preAction)
     },
     // 保存场景用例方法
     addSceneCaseFrom() {
@@ -487,9 +574,17 @@ export default {
         item.sequence = index
         index += 1
       })
+      // 将数组转化为对象
+      var globalObj = {}
+      this.globalParamList.forEach((item) => {
+        globalObj[item.globalParamsName] = item.globalParamsValue
+      })
+      // 将对象转化为json
+      this.newSceneForm.globalParameters = JSON.stringify(globalObj)
+
       this.newSceneForm.sceneId = this.sceneCaseInfo.sceneId
       this.newSceneForm.sceneTestcaseList = this.sceneTestcaseList
-      console.log('保存传递的参数值', this.newSceneForm.sceneTestcaseList)
+      console.log('保存传递的参数值', this.newSceneForm)
       this.$refs.sceneFormRef.validate((valid) => {
         if (!valid) {
           return false
@@ -589,6 +684,8 @@ export default {
       this.sceneCaseForm.extract = JSON.stringify(responseObj)
       // 断言
       this.sceneCaseForm.validate = JSON.stringify(this.assertionList)
+      // 前置条件
+      this.sceneCaseForm.preAction = JSON.stringify(this.preActionList)
       // 循环数组并删除对应的数组下标的整条数据信息
       for (var i = 0; i < this.sceneTestcaseList.length; i++) {
         if (
@@ -599,6 +696,8 @@ export default {
           this.sceneTestcaseList[i].extract = this.sceneCaseForm.extract
           this.sceneTestcaseList[i].validate = this.sceneCaseForm.validate
           this.sceneTestcaseList[i].name = this.sceneCaseForm.name
+          // 新添加
+          this.sceneTestcaseList[i].preAction = this.sceneCaseForm.preAction
         }
       }
       this.editDialogVisible = false
@@ -614,6 +713,30 @@ export default {
           this.sceneTestcaseList.splice(i, 1)
         }
       }
+    },
+    // 添加全局变量
+    addGlobalListRow() {
+      this.globalParamList.push({
+        globalParamsName: '',
+        globalParamsValue: ''
+      })
+    },
+    // 删除全部变量
+    globalDelss(index) {
+      this.globalParamList.splice(index, 1)
+    },
+    // 添加前置条件
+    AddPreActiveListRow() {
+      this.preActionList.push({
+        db: '',
+        sql: '',
+        key: '',
+        type: 'map'
+      })
+    },
+    // 删除前置条件
+    PreActiveDelete(index) {
+      this.preActionList.splice(index, 1)
     }
   }
 }