fix：自动化测试-场景编辑

test-ui/src/views/test/uiTest/addScene.vue

@@ -7,33 +7,46 @@
             <el-form-item prop='name' label="名称">
               <el-input v-model="informationForm.name" placeholder="请输入名称" maxlength="100" show-word-limit></el-input>
             </el-form-item>
-            <el-form-item prop='name1' label="模块">
-              <el-input v-model="informationForm.name1" placeholder="请选择模块"></el-input>
+            <el-form-item prop='groupId' label="模块">
+              <el-select v-model="informationForm.groupId">
+                <el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+              </el-select>
             </el-form-item>
-            <el-form-item prop='name2' label="状态">
-              <el-input v-model="informationForm.name2" placeholder="请选择状态"></el-input>
+            <el-form-item prop='status' label="状态">
+              <el-select v-model="informationForm.status" placeholder="请选择状态">
+                <el-option key="1" label="未开始" value="1"></el-option>
+                <el-option key="2" label="进行中" value="2"></el-option>
+                <el-option key="3" label="已完成" value="3"></el-option>
+              </el-select>
             </el-form-item>
-            <el-form-item prop='name3' label="责任人">
-              <el-input v-model="informationForm.name3" placeholder="请选择责任人"></el-input>
+            <el-form-item prop='dutyBy' label="责任人">
+              <el-input v-model="informationForm.dutyBy" placeholder="请选择责任人"></el-input>
             </el-form-item>
-            <el-form-item prop='level' label="用例登记">
-              <el-input v-model="informationForm.level" placeholder="请选择用例登记"></el-input>
+            <el-form-item prop='caseLevel' label="用例等级">
+              <el-select v-model="informationForm.caseLevel" placeholder="请选择用例等级">
+                <el-option key="P0" label="P0" value="P0"></el-option>
+                <el-option key="P1" label="P1" value="P1"></el-option>
+                <el-option key="P2" label="P2" value="P2"></el-option>
+                <el-option key="P3" label="P3" value="P3"></el-option>
+              </el-select>
             </el-form-item>
-            <el-form-item prop='remark' label="标签">
-              <el-input v-model="informationForm.remark" placeholder="请输入标签"></el-input>
+            <el-form-item prop='label' label="标签">
+              <el-input v-model="informationForm.label" placeholder="请输入标签"></el-input>
             </el-form-item>
-            <el-form-item prop='descriptions' label="描述">
-              <el-input v-model="informationForm.descriptions" placeholder="请输入描述" type="textarea" :rows="2"></el-input>
+            <el-form-item prop='description' label="描述">
+              <el-input v-model="informationForm.description" placeholder="请输入描述" type="textarea" :rows="2"></el-input>
             </el-form-item>
           </el-form>
         </el-tab-pane>
         <el-tab-pane label="场景步骤" name="second">
           <el-menu :default-active="String(defaultActive)" @select="handleSelect">
-            <div v-for="(item, index) in stepList">
+            <div v-for="(item, index) in informationForm.uiSceneStepsVOList">
               <el-menu-item :index="String(index + 1)">
                 <div class="menu-wrap">
                   <div class="stepCount">{{ index + 1 }}</div>
                   <div>{{ item.name }}</div>
+                  <el-button type="text" icon="el-icon-delete" class="delete-btn"
+                    @click="deleteStep(index)"></el-button>
                 </div>
               </el-menu-item>
             </div>
@@ -45,12 +58,12 @@
       <div class="scene-header">
         <el-button size="mini" @click="handleClickSave">保存</el-button>
       </div>
-      <SceneStep v-show="defaultActive != 0" :step="stepName" @stepNameChange="stenNameChange" />
-      <AdvancedSetting v-show="defaultActive != 0" />
+      <SceneStep v-show="informationForm.uiSceneStepsVOList.length > 0" :detail="changeStep" />
+      <AdvancedSetting v-show="informationForm.uiSceneStepsVOList.length > 0" />
     </div>
     <!-- 添加步骤 -->
     <div class="add-btn">
-      <el-dropdown @command="handleClickAddStep" :hide-on-click="false">
+      <el-dropdown @command="handleCommand" :hide-on-click="false">
         <el-button icon="el-icon-circle-plus-outline" type="text" style="font-size: 30px;"></el-button>
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item command="浏览器操作">浏览器操作</el-dropdown-item>
@@ -67,6 +80,8 @@
 <script>
 import AdvancedSetting from './advancedSetting.vue'
 import SceneStep from './sceneStep.vue'
+import { getAutomationDetail, updateAutomation } from '../../../api/uiTest/automationTest'
+import { listGroup } from "../../../api/test/group"
 
 export default {
   name: "AddScene",
@@ -74,69 +89,111 @@ export default {
   data() {
     return {
       activeName: 'first',
+      groupList: [], // 分组
       informationForm: {
-        name: null,
-        name1: null,
-        name2: null,
-        name3: null,
-        level: null,
-        remark: null,
-        descriptions: null,
+        automationId: null, // 场景id
+        name: null, // 名称
+        groupId: null,  // 模块
+        status: null,  // 状态
+        dutyBy: null,  // 责任人
+        caseLevel: null,   // 用例等级
+        label: null, // 标签
+        description: null,  // 描述
+        uiSceneStepsVOList: [], // 场景步骤
       },
       rules: {
         name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
-        name1: [{ required: true, message: '请输入名称', trigger: 'blur' }],
-        name2: [{ required: true, message: '请输入名称', trigger: 'blur' }],
-        name3: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+        groupId: [{ required: true, message: '请选择模块', trigger: 'blur' }],
+        status: [{ required: true, message: '请选择状态', trigger: 'blur' }],
+        dutyBy: [{ required: true, message: '请输入责任人', trigger: 'blur' }],
       },
       stepList: [],
       defaultActive: 0, // 当前激活菜单的 index
-      stepName: null, // 当前所选中的步骤的名称
+      changeStep: null, // 选中的步骤
     }
   },
   mounted() {
+    this.getGroupListData()
   },
   methods: {
     handleClick() { },
+    // 
+    getGroupListData() {
+      listGroup('automation').then(res => {
+        if (res.code === 200) {
+          this.groupList = res.data
+        }
+      })
+    },
+
+    // 删除步骤
+    deleteStep(index) {
+      this.$modal.confirm('确认删除该步骤' + '？').then(() => {
+        this.informationForm.uiSceneStepsVOList.splice(index, 1);
+      }).catch(() => { })
+    },
     // 场景步骤
     handleSelect(key, keyPath) {
       this.defaultActive = Number(key)
-      this.stepName = this.stepList[Number(key) - 1].name
+      this.changeStep = this.informationForm.uiSceneStepsVOList[this.defaultActive - 1]
     },
     // 添加步骤
-    handleClickAddStep(command) {
+    handleCommand(command) {
       var param = {
-        name: '',
+        name: null,
+        operateType: null,
+        stepType: '1',
+        automationId: this.$route.query.id
       }
       switch (command) {
         case '浏览器操作':
           param.name = '打开网页'
+          param.operateType = '1'
           break
         case '弹窗操作':
           param.name = '弹窗操作'
+          param.operateType = '2'
           break
         case '元素操作':
           param.name = '提交表单'
+          param.operateType = '3'
           break
         case '鼠标操作':
           param.name = '鼠标点击'
+          param.operateType = '4'
           break
         case '输入操作':
           param.name = '输入操作'
+          param.operateType = '5'
           break
       }
-      this.stepName = param.name
-      this.stepList.splice(this.defaultActive, 0, param);
+      this.informationForm.uiSceneStepsVOList.splice(this.defaultActive, 0, param);
+      this.changeStep = this.informationForm.uiSceneStepsVOList[this.defaultActive]
       this.defaultActive++;
     },
-    // 步骤名称同步
-    stenNameChange(val) {
-      this.stepName = val
-      this.stepList[this.defaultActive - 1].name = val
-    },
     // 保存
     handleClickSave() {
-      console.log('保存')
+      if (this.informationForm.name === null || this.informationForm.name === '') {
+        this.$modal.msgWarning("请输入名称！");
+      }
+      if (this.informationForm.groupId === null || this.informationForm.groupId === '') {
+        this.$modal.msgWarning("请选择模块！");
+      }
+      if (this.informationForm.status === null || this.informationForm.status === '') {
+        this.$modal.msgWarning("请选择状态");
+      }
+      if (this.informationForm.dutyBy === null || this.informationForm.dutyBy === '') {
+        this.$modal.msgWarning("请输入责任人");
+      }
+      updateAutomation(this.informationForm).then(res => {
+        if (res.code === 200) {
+          this.$modal.msgSuccess("编辑成功")
+          this.$tab.closeOpenPage({ path: "/ui-test/automation-test" });
+        } else {
+          this.$modal.msgError("编辑失败")
+        }
+
+      })
     },
   }
 }
@@ -155,6 +212,12 @@ export default {
       display: flex;
       align-items: center;
       gap: 10px;
+      position: relative;
+
+      .delete-btn {
+        position: absolute;
+        right: 0px;
+      }
 
       .stepCount {
         width: 20px;

test-ui/src/views/test/uiTest/advancedSetting.vue

@@ -1,24 +1,179 @@
 <template>
   <div class="advanced-setting">
     <div class="title">高级设置</div>
+    <div class="tab-wrap">
+      <el-tabs v-model="activeName">
+        <el-tab-pane label="元素库" name="first">
+          <div class="element-wrap">
+            <div class="header">
+              <el-button icon="el-icon-circle-plus-outline" size="mini" @click="addElementData">创建元素</el-button>
+              <div class="searchInput">
+                <i class="el-icon-search"></i>
+                <el-input class="input" v-model="searchForm.name" placeholder="根据名称搜索" @blur="searchName"></el-input>
+              </div>
+            </div>
+            <div class="list">
+              <el-table :data="elementList">
+                <el-table-column type="selection" width="55" />
+                <el-table-column prop="id" label="ID" width="50" align="center" sortable />
+                <el-table-column prop="locType" label="定位类型" min-width="150" align="center" />
+                <el-table-column prop="name" label="名称" min-width="150" align="center" />
+                <el-table-column prop="groupNamePath" label="所属模块" min-width="150" align="center" />
+                <el-table-column prop="elementLoc" label="元素定位" min-width="150" align="center" />
+              </el-table>
+              <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                :page-size="searchForm.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" />
+            </div>
+            <!-- 创建元素、编辑元素 -->
+            <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="40%">
+              <div class="form">
+                <el-form :model="editForm" :rules="rules" label-position="right" label-width="80px">
+                  <el-form-item label="元素名称" prop="name">
+                    <el-input v-model="editForm.name" placeholder="请输入元素名称"></el-input>
+                  </el-form-item>
+                  <el-form-item label="所属模块" prop="groupId">
+                    <el-select v-model="editForm.groupId" placeholder="请选择">
+                      <el-option v-for="item in groupList" :key="item.id" :label="item.name"
+                        :value="item.id"></el-option>
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item label="定位类型" prop="locType">
+                    <el-select v-model="editForm.locType" placeholder="请选择">
+                      <el-option v-for="(item, index) in typeList" :key="item" :label="item" :value="item"></el-option>
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item label="元素定位" prop="elementLoc">
+                    <el-input v-model="editForm.elementLoc" placeholder="请输入元素定位"></el-input>
+                  </el-form-item>
+                  <el-form-item label="备注" prop="description">
+                    <el-input v-model="editForm.description" placeholder="请输入备注" type="textarea" :rows="2"></el-input>
+                  </el-form-item>
+                </el-form>
+              </div>
+              <span slot="footer" class="dialog-footer">
+                <el-button @click="dialogVisible = false">取 消</el-button>
+                <el-button type="primary" @click="handleWithAdd()">确 定</el-button>
+              </span>
+            </el-dialog>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="前置操作" name="second">前置操作</el-tab-pane>
+        <el-tab-pane label="后置操作" name="third">后置操作</el-tab-pane>
+        <el-tab-pane label="错误处理" name="forth">
+          <el-form :model="saveForm">
+            <el-form-item label="处理方式">
+              el
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+        <el-tab-pane label="其他设置" name="fifth">其他设置</el-tab-pane>
+      </el-tabs>
+    </div>
   </div>
 </template>
 
 <script>
+import { getElementList, addElement } from "../../../api/uiTest/elementLibrary";
+import { listGroup } from "../../../api/test/group";
+
 export default {
   name: "AdvancedSetting",
   props: {
-    step: '',
+    detail: {}, // 编辑的数据
   },
   data() {
     return {
+      activeName: 'first',
+      saveForm: {
 
+      },
+      searchForm: {
+        pageNum: 1,
+        pageSize: 10,
+        name: null,
+      },
+      elementList: [],
+      total: 0,
+      editForm: {
+        name: null, // 元素名称
+        groupId: null,  // 所属模块
+        locType: null, // 定位类型
+        elementLoc: null, // 元素定位
+        description: null, // 备注
+      },
+      dialogTitle: '',
+      dialogVisible: false,
+      groupList: [], // 分组
+      typeList: ['id', 'name', 'className', 'tagName', 'linkText', 'partialLinkText', 'css', 'xpath', 'lable', 'value', 'index'],
+      rules: {
+        name: [{ required: true, message: '请输入元素名称', trigger: 'blur' }],
+        groupId: [{ required: true, message: '请选择所属模块', trigger: 'blur' }],
+        locType: [{ required: true, message: '请选择定位类型', trigger: 'blur' }],
+        elementLoc: [{ required: true, message: '请输入元素定位', trigger: 'blur' }],
+      },
     }
   },
   mounted() {
+    this.getGroupListData()
+    this.getElementData()
   },
   methods: {
-
+    // 
+    getGroupListData() {
+      listGroup('element').then(res => {
+        if (res.code === 200) {
+          this.groupList = res.data
+        }
+      })
+    },
+    // 获取元素
+    getElementData() {
+      getElementList(this.searchForm).then(res => {
+        if (res.code === 200) {
+          this.elementList = res.rows
+          this.total = res.total
+        }
+      })
+    },
+    // 创建元素
+    addElementData() {
+      this.dialogTitle = '创建元素'
+      this.dialogVisible = true
+      for (let key in this.editForm) {
+        this.editForm[key] = null
+      }
+    },
+    // 搜索
+    searchName() {
+      this.getElementData();
+    },
+    // 确定
+    handleWithAdd() {
+      // 创建元素
+      addElement(this.editForm).then(res => {
+        if (res.code === 200) {
+          this.$modal.msgSuccess("创建成功")
+          this.dialogVisible = false
+          this.getElementData()
+        } else {
+          this.$modal.msgError("创建失败");
+        }
+      })
+    },
+    // 分页
+    handleSizeChange(val) {
+      this.searchForm.pageSize = val
+      this.getElementData();
+    },
+    handleCurrentChange(val) {
+      this.searchForm.pageNum = val
+      this.getElementData();
+    },
+  },
+  watch: {
+    detail(newVal, oldVal) {
+      this.saveForm = newVal
+    },
   }
 }
 </script>
@@ -30,7 +185,42 @@ export default {
   .title {
     padding: 10px 20px;
     font-weight: 600;
-    margin-bottom: 10px;
+  }
+
+  .tab-wrap {
+    padding: 0 20px;
+  }
+
+  .element-wrap {
+    .header {
+      display: flex;
+      justify-content: space-between;
+
+      .searchInput {
+        display: flex;
+        align-items: center;
+        border: 1px solid #DCDFE6;
+        border-radius: 4px;
+        padding: 0 10px;
+
+        .input {
+          width: 200px;
+        }
+
+        /* 去除 el-input 的边框 */
+        ::v-deep .el-input__inner {
+          border: none !important;
+        }
+      }
+    }
+
+    .list {
+      margin-top: 20px;
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+      align-items: flex-end;
+    }
   }
 }
 </style>

test-ui/src/views/test/uiTest/sceneStep.vue

@@ -315,7 +315,6 @@ import { getElementList } from "../../../api/uiTest/elementLibrary";
 export default {
   name: "SceneStep",
   props: {
-    selectIndex: number, // 当前选中的步骤
     detail: {}, // 编辑的数据
   },
   data() {

test-ui/src/views/test/uiTest/testReportDetail.vue

@@ -74,7 +74,7 @@
         <div class="right-wrap">
           <div class="error-wrap">
             <i class="el-icon-warning-outline" style="color: red; font-size: 30px;"></i>
-            <div class="show-title">{{ detailData.faiiRate ? detailData.faiiRate : '0' }}%</div>
+            <div class="show-title">{{ detailData.faiiRate ? detailData.faiiRate : '0' }}</div>
             <div class="show-sub">失败</div>
           </div>
           <div class="error-wrap">