From c5e18b985f4c23a1dc4d035ce7f66625e9383d17 Mon Sep 17 00:00:00 2001
From: fanzhuxian <17826840660@139.com>
Date: Wed, 23 Apr 2025 17:28:38 +0800
Subject: [PATCH] =?UTF-8?q?add=EF=BC=9AUI=E6=B5=8B=E8=AF=95-=E5=85=83?=
 =?UTF-8?q?=E7=B4=A0=E5=BA=93=EF=BC=8C=E8=87=AA=E5=8A=A8=E5=8C=96=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 test-ui/src/api/uiTest/automationTest.js      |   1 +
 test-ui/src/components/FolderPage/index.vue   |  37 ++--
 .../src/views/test/uiTest/automationTest.vue  | 133 +++++++++++++
 .../src/views/test/uiTest/elementLibrary.vue  | 176 ++++++++++++++++++
 test-ui/src/views/test/uiTest/testReport.vue  |  24 +++
 5 files changed, 356 insertions(+), 15 deletions(-)
 create mode 100644 test-ui/src/api/uiTest/automationTest.js
 create mode 100644 test-ui/src/views/test/uiTest/automationTest.vue
 create mode 100644 test-ui/src/views/test/uiTest/elementLibrary.vue
 create mode 100644 test-ui/src/views/test/uiTest/testReport.vue

diff --git a/test-ui/src/api/uiTest/automationTest.js b/test-ui/src/api/uiTest/automationTest.js
new file mode 100644
index 0000000..fd4c4d1
--- /dev/null
+++ b/test-ui/src/api/uiTest/automationTest.js
@@ -0,0 +1 @@
+// 
diff --git a/test-ui/src/components/FolderPage/index.vue b/test-ui/src/components/FolderPage/index.vue
index 4557f0c..360a3c3 100644
--- a/test-ui/src/components/FolderPage/index.vue
+++ b/test-ui/src/components/FolderPage/index.vue
@@ -2,41 +2,42 @@
   <div class="app-container">
     <el-container>
       <el-aside v-loading="loading" :visible.sync="loading">
-        <el-input placeholder="输入关键字进行过滤" v-model="filterText" size="small" style="margin-bottom: 10px" clearable/>
-        <el-tree class="filter-tree" :data="groupList" @node-click="nodeClick" node-key="id" highlight-current :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree" :default-expanded-keys="[0]">
+        <el-input placeholder="输入关键字进行过滤" v-model="filterText" size="small" style="margin-bottom: 10px" clearable />
+        <el-tree class="filter-tree" :data="groupList" @node-click="nodeClick" node-key="id" highlight-current
+          :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree" :default-expanded-keys="[0]">
           <span class="custom-tree-node" slot-scope="{ node, data }" v-if="groupState !== 'list' && editId === data.id">
             <span>
               <el-form ref="form" :model="form" :rules="rules">
-                <el-input v-model="form.name" placeholder="请输入节点名称" class="custom-tree-node-input"/>
+                <el-input v-model="form.name" placeholder="请输入节点名称" class="custom-tree-node-input" />
               </el-form>
             </span>
             <span>
-              <el-button type="text" size="mini"><i class="el-icon-check" @click="submitNode(node)"/></el-button>
-              <el-button type="text" size="mini"><i class="el-icon-close" @click="cancelNode(node)"/></el-button>
+              <el-button type="text" size="mini"><i class="el-icon-check" @click="submitNode(node)" /></el-button>
+              <el-button type="text" size="mini"><i class="el-icon-close" @click="cancelNode(node)" /></el-button>
             </span>
           </span>
           <span class="custom-tree-node" slot-scope="{ node, data }" v-else>
             <span @click="nodeSelected(data)" style="width: 100%;">{{ node.label }}</span>
             <span v-if="data.id === 0">
-              <el-button type="text" size="mini" @click="nodeAdd(node)"><i class="el-icon-plus"/></el-button>
+              <el-button type="text" size="mini" @click="nodeAdd(node)"><i class="el-icon-plus" /></el-button>
             </span>
             <span class="custom-tree-node-option" v-else>
-              <el-button type="text" size="mini" @click="nodeAdd(node)"><i class="el-icon-plus"/></el-button>
-              <el-button type="text" size="mini"><i class="el-icon-edit" @click="nodeEdit(node)"/></el-button>
-              <el-button type="text" size="mini"><i class="el-icon-delete" @click="nodeDelete(node)"/></el-button>
+              <el-button type="text" size="mini" @click="nodeAdd(node)"><i class="el-icon-plus" /></el-button>
+              <el-button type="text" size="mini"><i class="el-icon-edit" @click="nodeEdit(node)" /></el-button>
+              <el-button type="text" size="mini"><i class="el-icon-delete" @click="nodeDelete(node)" /></el-button>
             </span>
           </span>
         </el-tree>
       </el-aside>
       <el-main>
-        <slot/>
+        <slot />
       </el-main>
     </el-container>
   </div>
 </template>
 
 <script>
-import {addGroup, delGroup, listGroup, updateGroup} from "@/api/test/group";
+import { addGroup, delGroup, listGroup, updateGroup } from "@/api/test/group";
 
 export default {
   name: "FolderPage",
@@ -45,7 +46,7 @@ export default {
       type: String,
       required: true,
       validator: function (value) {
-        return ['api', 'task', 'case'].includes(value)
+        return ['api', 'task', 'case', 'element', 'automation'].includes(value)
       }
     }
   },
@@ -62,7 +63,7 @@ export default {
       },
       rules: {
         name: [
-          {required: true, message: "节点名不能为空", trigger: "blur"}
+          { required: true, message: "节点名不能为空", trigger: "blur" }
         ],
       },
     };
@@ -93,6 +94,12 @@ export default {
         case "case":
           this.groupList[0].label = "用例管理";
           break;
+        case 'element':
+          this.groupList[0].label = "元素库";
+          break;
+        case 'automation':
+          this.groupList[0].label = "UI自动化";
+          break;
       }
       listGroup(this.type).then(res => {
         res.data.filter(item => item.parentId === 0).map(item => {
@@ -106,7 +113,7 @@ export default {
           this.groupId = res.data[0].id;
           this.$nextTick(() => {
             this.$refs.tree.setCurrentKey(this.groupId);
-            if (openList){
+            if (openList) {
               openList.forEach(item => {
                 this.$refs.tree.store.nodesMap[item].expanded = true;
               })
@@ -144,7 +151,7 @@ export default {
     },
     nodeAdd(node) {
       this.groupState = "add";
-      const newChild = {id: -1, label: '', children: []};
+      const newChild = { id: -1, label: '', children: [] };
       if (!node.data.children) {
         this.$set(node.data, 'children', []);
       }
diff --git a/test-ui/src/views/test/uiTest/automationTest.vue b/test-ui/src/views/test/uiTest/automationTest.vue
new file mode 100644
index 0000000..d75abd7
--- /dev/null
+++ b/test-ui/src/views/test/uiTest/automationTest.vue
@@ -0,0 +1,133 @@
+<template>
+  <folder-page type="automation" @click="folderHandleSelected" ref="folder">
+    <div class="header">
+      <el-dropdown @command="handleCommand">
+        <span class="el-dropdown-link">
+          <i style="border: 1px solid #DCDFE6; padding: 5px 15px; border-radius: 4px;" class="el-icon-plus"></i>
+        </span>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item command="1">创建场景</el-dropdown-item>
+          <el-dropdown-item command="2">创建指令</el-dropdown-item>
+          <el-dropdown-item command="3">关闭所有标签</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+      <div class="searchInput">
+        <i class="el-icon-search"></i>
+        <el-input class="input" v-model="search" placeholder="根据名称搜索"></el-input>
+      </div>
+    </div>
+    <div class="list">
+      <el-table :data="automationList">
+        <el-table-column type="selection" width="55" />
+        <el-table-column prop="id" label="ID" width="50" align="center" />
+        <el-table-column prop="performanceName" label="场景名称" width="150" align="center" sortable />
+        <el-table-column prop="createBy" label="用例等级" width="150" align="center" sortable />
+        <el-table-column prop="createTime" label="状态" width="150" align="center" sortable />
+        <el-table-column prop="updateTime" label="标签" width="150" align="center" />
+        <el-table-column prop="status" label="创建人" width="150" align="center" sortable />
+        <el-table-column prop="status" label="责任人" width="150" align="center" sortable />
+        <el-table-column prop="status" label="最后更新时间" width="150" align="center" sortable />
+        <el-table-column prop="status" label="步骤数" width="80" align="center" />
+        <el-table-column prop="status" label="执行结果" width="150" align="center" sortable />
+        <el-table-column prop="status" label="通过率" width="150" align="center" sortable />
+        <el-table-column prop="action" label="操作" align="center" fixed="right" width="200px">
+          <template slot-scope="scope">
+            <el-button type="text" icon="el-icon-edit-outline" @click="hadleClickEdit(scope.row)">编辑</el-button>
+            <el-button type="text" icon="el-icon-view" @click="handleClickDetail(scope.row)"
+              style="color: green;">查看</el-button>
+            <el-button type="text" icon="el-icon-delete" style="color: red;"
+              @click="hadleClickDelete(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="page">
+        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+          :page-size="searchForm.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" />
+      </div>
+    </div>
+  </folder-page>
+</template>
+
+<script>
+import FolderPage from "@/components/FolderPage/index.vue"
+
+export default {
+  name: "AutomationTest",
+  components: { FolderPage },
+  data() {
+    return {
+      automationList: [{}],
+      search: '',
+      searchForm: {
+        pageNumber: 1,
+        pageSize: 10,
+      },
+      total: 0,
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    folderHandleSelected(id) {
+      if (id) {
+        // 获取列表
+      } else {
+        this.elementList = [];
+      }
+    },
+    // 创建元素
+    handleCommand(command) {
+      this.$message('click on item ' + command);
+    },
+    // 编辑
+    hadleClickEdit() { },
+    // 删除
+    hadleClickDelete(val) {
+      this.$modal.confirm('确认删除元素' + '？').then(() => {
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => { })
+    },
+    // 查看
+    handleClickDetail() { },
+    handleSizeChange() { },
+    handleCurrentChange() { },
+  }
+
+}
+
+</script>
+
+
+
+<style scoped lang="scss">
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .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>
diff --git a/test-ui/src/views/test/uiTest/elementLibrary.vue b/test-ui/src/views/test/uiTest/elementLibrary.vue
new file mode 100644
index 0000000..c3aefc8
--- /dev/null
+++ b/test-ui/src/views/test/uiTest/elementLibrary.vue
@@ -0,0 +1,176 @@
+<template>
+  <folder-page type="element" @click="folderHandleSelected" ref="folder">
+    <div class="header">
+      <el-button icon="el-icon-circle-plus-outline" size="mini" @click="addElement">创建元素</el-button>
+      <div class="searchInput">
+        <i class="el-icon-search"></i>
+        <el-input class="input" v-model="search" placeholder="根据名称搜索"></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" />
+        <el-table-column prop="name" label="元素名称" width="150" align="center" />
+        <el-table-column prop="createBy" label="定位类型" width="150" align="center" />
+        <el-table-column prop="createTime" label="元素定位" width="150" align="center" />
+        <el-table-column prop="updateTime" label="创建人" width="150" sortable align="center" />
+        <el-table-column prop="status" label="创建时间" width="150" align="center" sortable />
+        <el-table-column prop="action" label="操作" align="center" fixed="right" width="200px">
+          <template slot-scope="scope">
+            <el-button type="text" icon="el-icon-edit-outline" @click="hadleClickEdit(scope.row)">编辑</el-button>
+            <el-button type="text" icon="el-icon-view" @click="handleClickDetail(scope.row)"
+              style="color: green;">查看</el-button>
+            <el-button type="text" icon="el-icon-delete" style="color: red;"
+              @click="hadleClickDelete(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="page">
+        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+          :page-size="searchForm.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" />
+      </div>
+    </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="name1">
+            <el-input v-model="editForm.name1" placeholder="请输入元素名称"></el-input>
+          </el-form-item>
+          <el-form-item label="所属模块" prop="name2">
+            <el-select v-model="editForm.name2" placeholder="请选择">
+              <el-option key='1' label="模块1" value="1"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="定位类型" prop="name3">
+            <el-select v-model="editForm.name3" placeholder="请选择">
+              <el-option v-for="(item, index) in typeList" :key="index" :label="item" :value="index"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="元素定位" prop="name4">
+            <el-input v-model="editForm.name4" placeholder="请输入元素定位"></el-input>
+          </el-form-item>
+          <el-form-item label="备注" prop="name5">
+            <el-input v-model="editForm.name5" 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>
+  </folder-page>
+</template>
+
+<script>
+import FolderPage from "@/components/FolderPage/index.vue";
+
+export default {
+  name: "ElementLibrary.vue",
+  components: { FolderPage },
+  data() {
+    return {
+      search: '',
+      elementList: [{ name1: '名称1' }],
+      searchForm: {
+        pageNumber: 1,
+        pageSize: 10,
+      },
+      total: 0,
+      dialogTitle: '',
+      dialogVisible: false,
+      editForm: {
+        name1: null,
+        name2: null,
+        name3: null,
+        name4: null,
+        name5: null,
+      },
+      typeList: ['id', 'name', 'class', 'tag', 'link', 'plink', 'css', 'xpath', 'lable', 'value', 'index'],
+      rules: {
+        name1: [{ required: true, message: '请输入元素名称', trigger: 'blur' }],
+        name2: [{ required: true, message: '请选择所属模块', trigger: 'blur' }],
+        name3: [{ required: true, message: '请选择定位类型', trigger: 'blur' }],
+        name4: [{ required: true, message: '请输入元素定位', trigger: 'blur' }],
+      },
+      deleteVisible: false,
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    folderHandleSelected(id) {
+      if (id) {
+        // 获取列表
+      } else {
+        this.elementList = [];
+      }
+    },
+    // 创建元素
+    addElement() {
+      this.dialogTitle = '创建元素'
+      this.dialogVisible = true
+      for (let key in this.editForm) {
+        this.editForm[key] = null
+      }
+    },
+    // 编辑
+    hadleClickEdit(val) {
+      this.dialogTitle = '编辑元素'
+      this.dialogVisible = true
+      this.editForm = val
+    },
+    // 删除
+    hadleClickDelete(val) {
+      this.$modal.confirm('确认删除元素' + '？').then(() => {
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => { })
+    },
+    // 查看
+    handleClickDetail() { },
+    handleSizeChange() { },
+    // 确定
+    handleWithAdd() {
+      console.log(this.editForm)
+    },
+    handleCurrentChange() { },
+  },
+}
+
+</script>
+
+
+
+<style scoped lang="scss">
+.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>
diff --git a/test-ui/src/views/test/uiTest/testReport.vue b/test-ui/src/views/test/uiTest/testReport.vue
new file mode 100644
index 0000000..1446b2c
--- /dev/null
+++ b/test-ui/src/views/test/uiTest/testReport.vue
@@ -0,0 +1,24 @@
+<template>
+  <div>测试报告</div>
+</template>
+<script>
+
+export default {
+  name: "TestReport",
+  data() {
+    return {
+    }
+  },
+  mounted() {
+  },
+  methods: {
+
+  }
+
+}
+
+</script>
+
+
+
+<style scoped lang="scss"></style>