界面优化

src/App.vue

@@ -25,21 +25,35 @@
                 <div style="display: flex;flex-direction: column;">
                     <el-button size="mini" style="width: 60px;height: 25px;margin-bottom: 5px;margin-left: 10px;"
                         @click="submitForm">保存任务</el-button>
-                    <el-button size="mini" style="width: 60px;height: 25px;" @click="showInput">新建动作</el-button>
+                    <el-button size="mini" style="width: 60px;height: 25px;" @click="newAction">新建动作</el-button>
                 </div>
             </div>
             <el-divider></el-divider>
             <!-- 动作集合 -->
 
-            <!-- 动作添加 -->
-            <div style="max-height: 102px;width: 490px;white-space: wrap;display: flex;margin-left: 10px;">
+            <div
+                style="margin-bottom: 5px;margin-left: 15px;margin-right: 15px;width: 470px;overflow: auto;white-space: nowrap;display: flex;">
+                <el-button @click="goback">返回</el-button>
                 <draggable v-model="dynamicTags" chosenClass="chosen" forceFallback="true" group="people" animation="1000"
                     @start="onStart" @end="onEnd">
                     <transition-group>
-                        <el-tag class="boxtags" :key="tag.tagId" v-for="tag in dynamicTags" closable
-                            :disable-transitions="false" @close="handleClose(tag)" @click="selectTag(tag)">
-                            <span style="margin-left: 3px;">{{ tag.actionName }}</span>
+                        <!-- <div class="item" v-for="element in myArray" :key="element.id">{{ element.name }}</div> -->
+                        <el-tag class="boxtags" :key="tag.Kvid" v-for="tag in allArray" closable
+                            :disable-transitions="false" @close="handleClose(tag)" @click="selectTag(tag)"
+                            v-if="ischTree == false && childrenTree.length >= 0">
+                            {{ tag.actionName }}
+
+                        </el-tag>
+
+                        <el-tag class="boxtags" v-if="childrenTree.length > 0 || ischTree == true" :key="item.Kvid"
+                            v-for="item in childrenTree" closable :disable-transitions="false" @close="handleClose(item)"
+                            @click="selectTag(item)">
+                            {{ item.actionName }}
                         </el-tag>
+
+                        <!-- <el-tag class="boxtags" :key="index" v-for="(item, index) in dynamicTags" closable :disable-transitions="false" @close="handleClose(index)">
+                                {{ item.actionName }}
+                            </el-tag> -->
                     </transition-group>
                 </draggable>
             </div>
@@ -56,11 +70,15 @@
                     </div>
                     <div style="margin-right: 5px;">
                         <span style="width: 90px;">动作类型:</span>
-                        <el-select id="eventType" name="eventType" v-model="actionType" placeholder="请选择类型">
+                        <el-select id="eventType" name="eventType" v-model="actionType" placeholder="请选择类型"
+                            @change="handleChange">
                             <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                             </el-option>
                         </el-select>
                     </div>
+                    <div v-if="actionType == 'actions'">
+                        <el-button @click="toActions">进入容器</el-button>
+                    </div>
                 </div>
                 <!-- 点击动作 -->
                 <div style="background-color: white;" v-if="actionType == 'elClick'">
@@ -70,8 +88,8 @@
                     </div>
                     <!-- 表格信息 -->
                     <vxe-table :data="tableData" ref="xTable" border class="mytable-scrollbar" height="220">
-                        <vxe-column field="name" title="xpath"></vxe-column>
-                        <vxe-column field="sex" title="content"></vxe-column>
+                        <vxe-column field="xpath" title="xpath"></vxe-column>
+                        <vxe-column field="content" title="content"></vxe-column>
                         <vxe-column title="操作" width="100">
                             <template #default="{ row }">
                                 <vxe-button status="danger" content="删除" @click="deleteRowEvent(row)"
@@ -182,17 +200,24 @@ export default {
             }, {
                 value: 'pageClose',
                 label: '关闭页面'
+            }, {
+                value: 'actions',
+                label: '容器'
             }],
-            tableData: [{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
-            { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
-            { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
-            { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' },
-            { id: 10005, name: 'Test5', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
-            ],
+            tableData: [],
             drag: false,
             allData: [],
             tagId: 0,
             dynamicTagObj: {},
+            tableDataID: 0,
+            parentTree: [],
+            childrenTree: [],
+            kvid: null,
+            parentKvid: null,
+            ischTree: false,
+            allArray: [
+            ],
+            selectr: {}
 
         }
     },
@@ -226,16 +251,212 @@ export default {
                 }
             }
             // 可以在这里执行自定义逻辑
+        },
+        actionType (newVal, oldVal) {
+
+
+            // 可以在这里执行自定义逻辑
         }
     },
     computed: {},
     methods: {
+        handleChange (val) {
+            console.log(val)
+            this.actionType == val
+            let _this = this
+            // 在输入值发生变化时触发
+            if (val) {
+                const targetObject = this.dynamicTags.find(obj => obj.tagId === this.dynamicTagObj.tagId);
+                if (targetObject) {
+                    // 找到匹配的对象
+                    targetObject.actionType = val; // 设置新的id值
+                    _this.dynamicTagObj.actionType = val
+
+                } else {
+                    // 未找到匹配的对象
+                    console.log("未找到匹配的对象");
+                }
+
+            }
+        },
+        //    树结构添加数据
+        addDataToParent (tree, parentKvid, newData) {
+            let _this = this
+            _this.childrenTree = []
+            // 递归函数，用于在树的每一级中查找合适的父节点并添加数据
+            function addToNode (node, parentKvid, newData) {
+                if (node.children == undefined) {
+                    node.children = []
+                }
+                // 如果当前节点的 kvid 等于 parentKvid，将 newData 添加到当前节点的 children 中
+                if (node.Kvid === parentKvid) {
+                    node.children.push(newData);
+                    console.log(node)
+                    _this.ischTree = true
+
+                    for (let i = 0; i < node.children.length; i++) {
+                        _this.childrenTree.push(node.children[i])
+
+                    }
+                    return true; // 表示数据已添加成功
+                }
+
+                // 递归查找子节点
+                for (var i = 0; i < node.children.length; i++) {
+                    if (addToNode(node.children[i], parentKvid, newData)) {
+                        return true; // 如果子节点中添加成功，返回 true
+                    }
+                }
+
+                return false; // 表示未找到合适的父节点
+            }
+
+            // 遍历初始树结构，尝试添加数据
+            for (var i = 0; i < tree.length; i++) {
+                if (addToNode(tree[i], parentKvid, newData)) {
+                    return; // 如果在当前节点中添加成功，结束函数
+                }
+            }
+
+            // 如果在整个树中都未找到合适的父节点，可以选择不添加数据或抛出错误
+            // console.error('Parent node not found for kvid: ' + parentKvid);
+            tree.push(newData);
+        },
+
+
+        // 返回上一级目录
+        goback () {
+            this.parentKvid = null
+            let parentKvid = null
+            for (let i = 0; i < this.childrenTree.length; i++) {
+                this.childrenTree[i].actionType == 'actions'
+                parentKvid = this.childrenTree[i].parentKvid
+            }
+            console.log(parentKvid)
+
+            // bug
+            let ab = this.findHierarchyByParentKvid(this.allArray, parentKvid);
+            console.log(ab)
+            if (ab.length == 0) return
+            if (ab[0].parentKvid == undefined || ab[0].parentKvid == null) {
+                this.childrenTree = this.allArray
+            } else {
+                this.childrenTree = ab
+            }
+
+
+
+            // ab.children = []
+        },
+        // 根据parentKvid找当前节点
+        findHierarchyByParentKvid (tree, parentKvid) {
+            let _this = this
+            for (var i = 0; i < tree.length; i++) {
+                var node = tree[i];
+
+                if (node.Kvid === parentKvid) {
+
+                    return [node]; // 找到匹配的节点，返回包含该节点的数组
+                }
+
+                if (node.children && node.children.length > 0) {
+                    var result = _this.findHierarchyByParentKvid(node.children, parentKvid);
+
+                    if (result.length > 0) {
+
+                        return node.children; // 将当前节点与子级层级连接起来
+                    }
+                }
+            }
+
+            return []; // 未找到匹配的节点，返回空数组
+        },
+        // 根据Kvid找节点
+        findObjectByKvid (array, kvid) {
+            let _this = this
+            for (var i = 0; i < array.length; i++) {
+                var obj = array[i];
+
+                if (obj.Kvid === kvid) {
+                    return obj; // 如果当前对象的 kvid 等于目标 kvid，返回当前对象
+                }
+
+                if (obj.children && obj.children.length > 0) {
+                    var result = _this.findObjectByKvid(obj.children, kvid); // 递归查找子级数组中的对象
+
+                    if (result) {
+                        return result; // 如果在子级数组中找到了目标对象，返回结果
+                    }
+                }
+            }
+
+            return null; // 如果没有找到目标对象，返回 null
+        },
+        // 进入容器
+        toActions () {
+            if (this.actionType == 'actions') {
+                this.parentKvid = this.Kvid
+                this.selectr = this.dynamicTagObj
+                console.log('abc')
+                console.log(this.Kvid)
+                console.log(this.allArray)
+                let ab = this.findObjectByKvid(this.allArray, this.Kvid);
+                console.log(ab)
+                ab.children = []
+                console.log(this.allArray)
+            } else {
+                this.parentKvid = null
+            }
+
+        },
+        // 新建动作
+        newAction () {
+
+            this.inputVisible = true;
+            this.dynamicTagObj = {}
+            this.actionName = "新建动作"
+            this.actionType = ""
+            this.tableDataID = 0
+            this.kvid = null
+            let obj = {}
+            obj.taskName = this.taskName
+            obj.taskAddress = this.taskAddress
+            this.dynamicTagObj.actionName = '新建动作'
+            this.dynamicTagObj.actionType = this.actionType
+            this.dynamicTagObj.tagId = this.tagId++
+
+            this.Kvid = Math.floor(Math.random() * 100001);
+            this.dynamicTagObj.Kvid = this.Kvid
+            if (this.parentKvid != null) {
+                this.dynamicTagObj.parentKvid = this.parentKvid
+
+            }
+            obj.dynamicTags = []
+            obj.dynamicTags.push(this.dynamicTagObj)
+            this.dynamicTags.push(this.dynamicTagObj)
+            this.addDataToParent(this.allArray, this.parentKvid, this.dynamicTagObj)
+            console.log(this.allArray)
+        },
+        // 单击标签
         selectTag (item) {
+            this.parentTree = item
+            console.log(item.children)
+
+            if (item.children != undefined && item.children.length > 0) {
+                this.childrenTree = []
+                for (let i = 0; i < item.children.length; i++) {
+                    this.childrenTree.push(item.children[i])
+
+                }
+                this.ischTree = true
+            }
             console.log(item)
             this.dynamicTagObj = item
             this.actionName = item.actionName
+            this.actionType = item.actionType
             this.inputVisible = true
         },
+        // 删除标签
         handleClose (tag) {
             this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
             this.inputVisible = false
@@ -247,7 +468,7 @@ export default {
         },
         async deleteRowEvent (row) {
             console.log(row)
-            this.tableData = this.tableData.filter(item => item.name !== row.name)
+            this.tableData = this.tableData.filter(item => item.tableDataID !== row.tableDataID)
         },
         //开始拖拽事件
         onStart () {
@@ -258,23 +479,7 @@ export default {
             this.drag = false;
             console.log(this.dynamicTags)
         },
-        showInput () {
-            this.inputVisible = true;
-            this.dynamicTagObj = {}
-            this.actionName = "新建动作"
-            this.actionType = ""
-            let obj = {}
-            obj.taskName = this.taskName
-            obj.taskAddress = this.taskAddress
-            this.dynamicTagObj.actionName = '新建动作'
-            this.dynamicTagObj.actionType = this.actionType
-            this.dynamicTagObj.tagId = this.tagId++
-            console.log(this.actionType)
-            obj.dynamicTags = []
-            obj.dynamicTags.push(this.dynamicTagObj)
-            this.dynamicTags.push(this.dynamicTagObj)
-            this.allData.push(obj)
-        },
+
         // 创建动作
         submitForm (formName) {
             console.log(this.actionName)
@@ -309,14 +514,22 @@ export default {
             document.oncontextmenu = () => true;
             document.oncontextmenu = function (e) {
                 e.preventDefault()
-                // console.log(e)
+                console.log(e.target.style)
                 var targetElement = e.target;
+                e.target.style.backgroundColor = "red"
                 console.log('右键点击发生在元素：', targetElement);
+                console.log(e)
                 const xpath = _this.getElementXPath(targetElement);
                 console.log("XPath:", xpath);
                 const element = _this.getElementByXPath(xpath);
                 console.log(element)
                 _this.docClose()
+                let obj = {}
+                obj.xpath = xpath;
+                obj.content = e.target.innerText
+                obj.tableDataID = _this.tableDataID++;
+                _this.tableData.push(obj)
+
                 if (element) {
                     // 执行你的操作，例如获取元素的文本内容或属性
                     console.log("元素文本内容:", element.textContent);
@@ -325,6 +538,7 @@ export default {
                     obj.xpath = xpath;
                     obj.content = element.textContent;
 
+
                     // _this.data.push(obj);
                     // _this.addRow(obj)
                 } else {
@@ -404,602 +618,257 @@ export default {
 
 <style>
 /* 拖拽窗口大小 */
-
 .tooldrag {
-
     width: 100%;
-
     display: flex;
-
     justify-content: center;
-
     align-items: center;
-
     background-color: #3384FF;
-
     text-align: center;
-
     font-size: 15px;
-
     color: white;
-
 }
 
-
-
 .tooltips {
-
     min-width: 500px;
-
     min-height: 444px;
-
     background-color: white;
-
     position: fixed;
-
     z-index: 9999;
-
     right: 30px;
-
     bottom: 30px;
-
     font-size: 13px !important;
-
     font-weight: normal !important;
-
     border: solid #3384FF 3px;
-
     border-radius: 10px;
-
     -webkit-user-select: none;
-
     /* 文字不可被选中 */
-
 }
 
-
-
 .el-card__body,
-
 .el-main {
-
     padding: 0px !important;
-
 }
 
-
-
 .el-input__icon {
-
     line-height: 0px !important;
-
 }
 
-
-
 /* 分割线 */
-
 .el-divider--horizontal {
-
     margin-top: 0px !important;
-
     margin-bottom: 0px !important;
-
     background-color: #409EFF !important;
-
 }
 
-
-
 .el-tag .el-tag__close {
-
     color: #ffffff !important;
-
 }
 
-
-
 .el-tag {
-
     background-color: #409EFF !important;
-
     color: #ffffff !important;
-
-    padding: 0 !important;
-
-    margin-left: 5px;
-
-    margin-right: 5px;
-
-    margin-top: 1px;
-
-    margin-bottom: 1px;
-
-    width: 70px;
-
-    display: flex;
-
-    align-items: center;
-
-    justify-content: center;
-
 }
 
-
-
-.el-tag .el-icon-close {
-
-    line-height: 17px !important;
-
-    right: 0px !important;
-
-}
-
-
-
-/* .el-tag+.el-tag {
-
+.el-tag+.el-tag {
     margin-left: 10px;
-
-} */
-
-
+}
 
 .button-new-tag {
-
     margin-left: 10px;
-
     height: 32px;
-
     line-height: 30px;
-
     padding-top: 0;
-
     padding-bottom: 0;
-
 }
 
-
-
 .input-new-tag {
-
     width: 90px;
-
     margin-left: 10px;
-
     vertical-align: bottom;
-
 }
 
-
-
 .innercontent {
-
     text-align: left;
-
     padding-top: 5px !important;
-
     padding-left: 12px !important;
-
 }
 
-
-
 .innercontent a {
-
     display: inline-block;
-
     text-decoration: none;
-
     margin-top: 2px !important;
-
     font-size: 13px;
-
     color: #3384FF !important;
-
     cursor: pointer;
-
     text-decoration: none !important;
-
 }
 
-
-
 .innercontent a:hover {
-
     color: #3384FF !important;
-
 }
 
-
-
 .innercontent span {
-
     font-size: 20px;
-
     color: #3384FF;
-
     line-height: normal;
-
     padding-left: 5px !important;
-
 }
 
-
-
 .tooltips button {
-
     font-size: 13px;
-
     border-radius: 5px;
-
     border: solid 1px #409EFF;
-
     background-color: #409EFF;
-
     color: #ffffff;
-
     width: 100px;
-
     height: 30px;
-
     cursor: pointer;
-
     /* margin-left: 15px !important; */
-
     padding: 0 !important;
-
 }
 
-
-
 /* 输入框样式 */
-
 .tooltips input[type=text] {
-
     /* display: block; */
-
     /* margin-top: 3px !important; */
-
     /* padding-left: 5px !important; */
-
     /* margin-bottom: 7px !important; */
-
     font-size: 13px;
-
     /* border-radius: 5px; */
-
     /* border: solid 1px #DCDFE6; */
-
-    width: 190px;
-
+    width: 145px;
     height: 20px;
-
 }
 
-
-
 .el-input--small .el-input__inner {
-
-    width: 130px !important;
-
+    width: 140px !important;
 }
 
-
-
 .el-select .el-input__inner {
-
     width: 110px !important;
-
 }
 
-
-
 .tooltips select {
-
     display: block;
-
     margin-top: 7px !important;
-
     padding-left: 5px !important;
-
     margin-bottom: 7px !important;
-
     font-size: 15px;
-
     border-radius: 5px;
-
     border: solid 2px #3384FF;
-
     width: 204px;
-
     height: 30px;
-
 }
 
-
-
 .tooltips button:hover {
-
     color: #3384FF;
-
 }
 
 
-
-
-
 /* 下面用来对冻结表格首行元素和固定表格宽度和高度设定样式 */
 
-
-
 .toolkitcontain {
-
     border: 1px solid #cdd !important;
-
     /*width: 280px !important;*/
-
     /* 上面的宽度设定很重要 */
-
     height: 150px;
-
     overflow: auto;
-
     margin-top: 10px !important;
-
     position: relative;
-
 }
 
-
-
 .toolkitcontain table {
-
     table-layout: fixed;
-
     border-spacing: 0 !important;
-
     word-break: break-all;
-
     word-wrap: break-word;
-
     text-overflow: ellipsis;
-
     overflow: hidden;
-
     margin-top: 0px !important;
-
     white-space: nowrap;
-
     width: 100%;
-
 }
 
-
-
 .toolkitcontain th,
-
 .toolkitcontain td,
-
 .toolkitcontain tr {
-
     border: 1px solid rgb(78, 78, 78) !important;
-
     height: 25px !important;
-
     width: 100px !important;
-
     text-align: center !important;
-
     font-weight: normal !important;
-
     overflow: hidden !important;
-
     font-size: 11px !important;
-
     padding-left: 10px !important;
-
     padding-right: 10px !important;
-
     padding-top: 0px !important;
-
     padding-bottom: 0px !important;
-
     vertical-align: middle !important;
-
     white-space: nowrap;
-
 }
 
-
-
 .toolkitcontain th span {
-
     font-size: 15px;
-
     font-weight: bold;
-
     cursor: pointer;
-
     /*position: absolute;*/
-
     /*position: ;*/
-
     margin-right: 10px;
-
     vertical-align: text-bottom !important;
-
 }
 
-
-
 .toolkitcontain th div {
-
     display: inline-block !important;
-
     overflow: hidden !important;
-
     max-width: 90% !important;
-
 }
 
-
-
 .toolkitcontain .toolkittb2 {
-
     position: sticky;
-
     top: 0px;
-
     margin-bottom: 0px;
-
     background-color: azure;
-
     z-index: 1000;
-
 }
 
-
-
 .toolkitcontain .toolkittb4 {
-
     position: absolute;
-
 }
 
-
-
 #closeButton {
-
     position: absolute;
-
     bottom: 0;
-
     right: 0;
-
     cursor: pointer;
-
     padding: 5px;
-
     opacity: 0.05;
-
 }
 
-
-
 #closeButton:hover {
-
     opacity: 1.0;
-
 }
 
-
-
 .el-select-dropdown {
-
     z-index: 99999 !important;
-
 }
 
-
-
 .vxe-table--render-default .vxe-body--column:not(.col--ellipsis),
-
 .vxe-table--render-default .vxe-footer--column:not(.col--ellipsis),
-
 .vxe-table--render-default .vxe-header--column:not(.col--ellipsis) {
-
     padding: 2px 0 !important;
-
 }
 
-
-
 .item {
-
     padding: 6px;
-
     background-color: #fdfdfd;
-
     border: solid 1px #eee;
-
     margin-bottom: 10px;
-
     cursor: move;
-
 }
 
-
-
 /*选中样式*/
-
 .chosen {
-
     border: solid 2px #3089dc !important;
-
-}
-
-
-
-/*滚动条整体部分*/
-
-.mytable-scrollbar ::-webkit-scrollbar {
-
-    width: 10px;
-
-    height: 10px;
-
-}
-
-
-
-/*滚动条的轨道*/
-
-.mytable-scrollbar ::-webkit-scrollbar-track {
-
-    background-color: #FFFFFF;
-
-}
-
-
-
-/*滚动条里面的小方块，能向上向下移动*/
-
-.mytable-scrollbar ::-webkit-scrollbar-thumb {
-
-    background-color: #bfbfbf;
-
-    border-radius: 5px;
-
-    border: 1px solid #F1F1F1;
-
-    box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
-
-}
-
-
-
-.mytable-scrollbar ::-webkit-scrollbar-thumb:hover {
-
-    background-color: #A8A8A8;
-
-}
-
-
-
-.mytable-scrollbar ::-webkit-scrollbar-thumb:active {
-
-    background-color: #787878;
-
-}
-
-
-
-/*边角，即两个滚动条的交汇处*/
-
-.mytable-scrollbar ::-webkit-scrollbar-corner {
-
-    background-color: #FFFFFF;
-
 }
 </style>

src/main.js

@@ -113,7 +113,7 @@ function generateToolkit () {
     }, 3000);
 }
 
-// window.onload = function () {
+window.onload = function () {
 
 let mousemovebind = false; //如果出现元素默认绑定了mousemove事件导致匹配不到元素的时候，开启第二种模式获得元素
 
@@ -147,5 +147,5 @@ document.addEventListener("DOMContentLoaded", function () {
     // 执行其他操作
 });
 generateToolkit();
-// }
+}