选择界面搭建，目录结构优化

src/App.vue

@@ -47,8 +47,9 @@
                     <transition-group>
                         <!-- <div class="item" v-for="element in myArray" :key="element.id">{{ element.name }}</div> -->
                         <el-tag class="boxtags" :key="tag.tagId" v-for="(tag, index) in treeNode" @click="selectTag(tag)">
+                            
                             <div style="display: flex;align-items: center;height: 30px;position: relative;">
-                                <span style="margin-left: 3px;min-width: 20px;">{{ tag.actionName }}</span>
+                                <span style="margin-left: 3px;min-width: 20px;">{{ 1+tag.actionName }}</span>
                                 <img id="closeimg" @click="handleClose(tag)"
                                     style="width: 20px;position: absolute;top: -8px;right: -18px;" src="./assets/close.png">
                             </div>
@@ -61,7 +62,7 @@
                         <el-tag class="boxtags" :key="item.tagId" v-for="(item, index) in childrenTreeNode"
                             @click="selectTag(item)">
                             <div style="display: flex;align-items: center;height: 30px;position: relative;">
-                                <span style="margin-left: 3px;">{{ item.actionName }}</span>
+                                <span style="margin-left: 3px;">{{2+ item.actionName }}</span>
                                 <img id="closeimg" @click="handleClose(item)"
                                     style="width: 20px;position: absolute;top: -8px;right: -18px;" src="./assets/close.png">
                             </div>
@@ -73,7 +74,7 @@
             <!-- 动作配置 -->
             <el-card class="box-card" v-if="isShowAction">
                 <div style="height: 35px;display: flex;justify-content: space-evenly;align-items: center;">
-                    <span>动作配置:</span>
+                    <!-- <span>动作配置:</span> -->
                     <div style="width: 211px;display: flex;align-items: center;">
                         <span style="width: 90px;">动作名称:</span>
                         <!-- ref="saveTagInput"  @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm" -->
@@ -92,7 +93,8 @@
                         <el-button @click="toActions">进入容器</el-button>
                     </div>
                 </div>
-                <component :is="dynamicComponent"></component>
+                <component :is="dynamicComponent" :actionName="actionName" :actionType="actionType"
+                    @dataChanged="handleDataChange" v-if="actionType !== ''"></component>
 
             </el-card>
 
@@ -167,7 +169,8 @@ export default {
                 name: '根目录',
                 Kvid: 123123,
                 children: []
-            }]
+            }],
+            actionConfigs: {}
 
         }
     },
@@ -257,6 +260,23 @@ export default {
                     this.dynamicComponent = null;
             }
         },
+        // 接收子组件信息
+        handleDataChange (newData) {
+            console.log('接收到的数据:', newData);
+            const targetObject = this.dynamicTags.find(obj => obj.Kvid === this.dynamicTagObj.Kvid);
+            console.log(targetObject)
+            if (targetObject) {
+                // if (newVal == undefined) return
+                // // 找到匹配的对象
+                targetObject.actionConfigs = newData; // 设置新的id值
+                this.dynamicTagObj.actionConfigs = newData
+                // // console.log(this.dynamicTags)
+            } else {
+                // 未找到匹配的对象
+                console.log("未找到匹配的对象");
+            }
+            console.log(this.treeNode)
+        },
         // 新建动作
         newAction () {
             this.isShowAction = true;
@@ -271,6 +291,7 @@ export default {
             this.dynamicTagObj.actionType = this.actionType
             this.dynamicTagObj.tagId = this.tagId++
             this.Kvid = Math.floor(Math.random() * 100001);
+            this.dynamicTagObj.actionConfigs = this.actionConfigs
             this.dynamicTagObj.Kvid = this.Kvid
             if (this.parentKvid != null) {
                 this.dynamicTagObj.parentKvid = this.parentKvid
@@ -302,12 +323,12 @@ export default {
                 let activeItem = this.findObjectByKvid(this.treeNode, this.Kvid);
                 this.childrenTreeNode = []
                 this.isChildrenTree = true
-                // console.log(this.childrenTreeNode)
+                console.log(activeItem)
                 let activeParentItem = this.findObjectByKvid(this.treeNode, activeItem.parentKvid);
                 activeItem.children = []
                 if (activeParentItem == null) {
-                    // console.log('已经有容器了')
-                    if (this.actionAll[0].children.length > 0) return
+                    console.log('已经有容器了')
+                    // if (this.actionAll[0].children.length > 0) return
                     let obj = {}
                     obj.name = activeItem.actionName
                     obj.Kvid = activeItem.Kvid
@@ -365,13 +386,17 @@ export default {
             this.actionType = item.actionType
             this.deleteObjectsAfterKvid(this.actionAll, item.Kvid)
             let activeItem = this.findObjectByKvid(this.treeNode, item.Kvid);
+
             if (activeItem == null) {
                 this.childrenTreeNode = this.treeNode
+                this.isChildrenTree = false
                 this.parentKvid = null
                 // console.log(this.treeNode)
             } else {
+
                 this.childrenTreeNode = []
                 this.childrenTreeNode = activeItem.children
+                this.isChildrenTree = true
                 this.parentKvid = item.Kvid
                 this.isShowAction = false
             }
@@ -379,38 +404,60 @@ export default {
         // 单击标签
         selectTag (item) {
             // this.parentTree = item
+            let _this = this
             if (item.actionType == 'actions') {
-                this.parentKvid = item.Kvid
-                this.isChildrenTree = true
-                this.isShowAction = false
-                // this.actionType = ''
-                // this.actionName = ''
-                let obj = {}
-                obj.name = item.actionName
-                obj.Kvid = item.Kvid
-                obj.children = []
-                for (let i = 0; i < item.children.length; i++) {
-                    obj.children.push(item.children[i])
 
+                if (_this.parentKvid == null && item.parentKvid == undefined) {
+                    _this.parentKvid = item.Kvid
+                    console.log(item)
+                    let obj = {}
+                    obj.name = item.actionName
+                    obj.Kvid = item.Kvid
+                    obj.children = []
+                    for (let i = 0; i < _this.treeNode.length; i++) {
+                        _this.actionAll[0].children.push(_this.treeNode[i])
+
+                    }
+                    _this.actionAll.push(obj)
+                    _this.findOrPushObject(_this.actionAll[0].children, obj)
+                    _this.childrenTreeNode = []
+                    _this.isChildrenTree = true
+
+                } else {
+                    _this.parentKvid = item.Kvid
+                    _this.childrenTreeNode = []
+                    _this.isShowAction = false
+                    let obj = {}
+                    obj.name = item.actionName
+                    obj.Kvid = item.Kvid
+                    obj.children = []
+
+                    for (let i = 0; i < item.children.length; i++) {
+                        obj.children.push(item.children[i])
+                        _this.childrenTreeNode.push(item.children[i])
+                    }
+                    _this.findOrPushObject(_this.actionAll, obj)
+                    _this.isChildrenTree = true
                 }
-                this.findOrPushObject(this.actionAll, obj)
+
+
             } else {
-                this.actionName = item.actionName
-                this.actionType = item.actionType
-                this.isShowAction = true
+                _this.actionName = item.actionName
+                _this.actionType = item.actionType
+                _this.isShowAction = true
+
             }
-            this.Kvid = item.Kvid
-            // this.actionType =item.actionType 
-            // this.actionName =item.actionName 
+            _this.Kvid = item.Kvid
             if (item.children != undefined && item.children.length > 0) {
-                this.childrenTreeNode = []
+                _this.childrenTreeNode = []
                 for (let i = 0; i < item.children.length; i++) {
-                    this.childrenTreeNode.push(item.children[i])
-
+                    _this.childrenTreeNode.push(item.children[i])
                 }
-                this.isChildrenTree = true
+                _this.isChildrenTree = true
             }
-            this.dynamicTagObj = item
+            _this.dynamicTagObj = item
+            // 点击切换组件
+            _this.loadComponent(item.actionType)
         },
         // 删除标签
         handleClose (tag) {
@@ -744,7 +791,7 @@ export default {
 }
 
 .el-select .el-input__inner {
-    width: 110px !important;
+    width: 145px !important;
 }
 
 .tooltips select {

src/components/collectionTable.vue

 <template>
     <div class="collectionTable">
         <div style="height: 35px;margin-left: 15px;text-align: left;">
-            <el-button size="small" class="button-new-tag" @click="selectElement">选择元素</el-button>
+            <el-button size="mini" class="button-new-tag" @click="selectElement" >选择元素</el-button>
             <span style="margin-left: 3px;">元素信息如下:</span>
         </div>
         <!-- 表格信息 -->
@@ -35,25 +35,33 @@ export default {
     watch: {},
     computed: {},
     methods: {
+        
+        getTableData () {
+            const $table = this.$refs.xTable
+            const removeRecords = $table.getRemoveRecords()
+
+        },
+        async deleteRowEvent (row) {
+            this.tableData = this.tableData.filter(item => item.tableDataID !== row.tableDataID)
+        },
         selectElement () {
             let _this = this
-            document.addEventListener('contextmenu', function (event) {
+            // 定义事件处理函数
+            function contextMenuHandler (event) {
+                event.preventDefault(); // 阻止默认的右击菜单
+
                 var xpath = _this.getElementXPath(event.target);
                 var textContent = event.target.textContent.trim();
                 console.log('XPath of the clicked element:', xpath);
                 console.log('Text content of the clicked element:', textContent);
-                _this.docClose()
-            }, false);
 
-        },
-        getTableData () {
-            const $table = this.$refs.xTable
-            const removeRecords = $table.getRemoveRecords()
+                // 移除事件监听器
+                document.removeEventListener('contextmenu', contextMenuHandler);
+            }
+            // 添加事件监听器
+            document.addEventListener('contextmenu', contextMenuHandler, false);
 
         },
-        async deleteRowEvent (row) {
-            this.tableData = this.tableData.filter(item => item.tableDataID !== row.tableDataID)
-        },
         getElementXPath (element) {
             let _this = this
             if (element.tagName === 'BODY') {
@@ -70,12 +78,6 @@ export default {
                 }
             }
         },
-        // deleteRowEvent (row) {
-        //     console.log(row)
-        // },
-        docClose () {
-            document.oncontextmenu = () => false;
-        },
     },
 }
 </script>

src/components/elClick.vue

 <template>
-  <div class="elClick">点击</div>
+    <div class="elClick">
+        <div style="height: 35px;margin-left: 15px;text-align: left;">
+            <el-button size="small" class="button-new-tag" @click="selectElement">选择元素</el-button>
+            <span style="margin-left: 3px;">元素信息如下:</span>
+
+        </div>
+        <el-form label-position="right" label-width="80px" :model="actionConfig">
+           <el-form-item label="查找方式">
+            <el-select id="eventType" name="eventType" v-model="actionConfig.Type" :placeholder="selectDisabled?'请先选择元素':'请选择'"
+                @change="handleChange" filterable remote :disabled="selectDisabled">  
+                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                </el-option>
+            </el-select>
+           </el-form-item>
+            <el-form-item label="标签名称">
+                <el-input v-model="actionConfig.Target.Selector"></el-input>
+            </el-form-item>
+            <el-form-item label="查询时间">
+                <el-input v-model="actionConfig.Target.Timeout"></el-input>
+            </el-form-item>
+        </el-form>
+        <div style="width: 100%;text-align: right;">
+            <el-button size="small" class="button-new-tag" @click="submit" style="margin-right: 5px;">提交信息</el-button>
+        </div>
+    </div>
 </template>
 
 <script>
 export default {
-  name:'elClick',
-  components:{},
-  props:{},
-  data(){
-    return {
-    }
-  },
-  created(){},
-  mounted(){},
-  watch:{},
-  computed:{},
-  methods:{},
+    name: 'elClick',
+    components: {},
+    props: ['actionName', 'actionType'],
+    data () {
+        return {
+            elementInfo:{},
+            actionConfig:
+            {
+                "Target": {//点击的目标元素配置信息
+                    "Type": "",//查找元素的方式，通过Id查找
+                    "Selector": "",//Id名称
+                    "Timeout": 5000//查询时间
+                },
+                "Name": this.actionName,//动作名称
+                "Alias": this.actionType//动作类型
+            },
+            options: [{
+                value: 'Id',
+                label: 'Id'
+            }, {
+                value: 'Link',
+                label: 'Link'
+            }, {
+                value: 'Name',
+                label: 'Name'
+            }, {
+                value: 'Xpath',
+                label: 'Xpath'
+            }, {
+                value: 'Class',
+                label: 'Class'
+            }, {
+                value: 'PartialLink',
+                label: 'PartialLink'
+            }, {
+                value: 'Tag',
+                label: 'Tag'
+            }, {
+                value: 'Css',
+                label: 'Css'
+            }],
+            selectDisabled:true
+
+        }
+    },
+    created () { },
+    mounted () { },
+    watch: {},
+    computed: {},
+    methods: {
+        submit () {
+            console.log(this.actionConfig)
+            // 防止父级改变，子级未改变重新赋值
+            this.actionConfig.Name = this.actionName
+            this.actionConfig.Alias = this.actionType
+            this.$emit('dataChanged', this.actionConfig);
+            // console.log(this.actionName)
+        },
+        // 获取页面元素
+        selectElement () {
+            let _this = this
+            // 定义事件处理函数
+            function contextMenuHandler (event) {
+                event.preventDefault(); // 阻止默认的右击菜单
+                let element = event.target;
+                let elementInfo = {
+                    Id: element.id || '无',
+                    Xpath: _this.getElementXPath(element),
+                    Link: element.href || '无',
+                    Name: element.name || '无',
+                    Class: element.className || '无',
+                    PartialLink: element.textContent.trim() || '无',
+                    Tag: element.tagName.toLowerCase(),
+                    Css: _this.getElementCssSelector(element)
+                };
+                _this.elementInfo =elementInfo
+                _this.selectDisabled = false
+                // 移除事件监听器
+                document.removeEventListener('contextmenu', contextMenuHandler);
+            }
+            // 添加事件监听器
+            document.addEventListener('contextmenu', contextMenuHandler, false);
+
+        },
+        handleChange (val) {
+            // this.actionType == val
+            let _this = this
+            console.log(_this.elementInfo)
+            console.log(_this.elementInfo[val])
+
+            _this.actionConfig.Target.Selector = _this.elementInfo[val]
+        },
+        // 获取xpath
+        getElementXPath (element) {
+            let _this = this
+            if (element.tagName === 'BODY') {
+                return '/HTML/' + element.tagName;
+            }
+            var ix = 1, siblings = element.parentNode.childNodes;
+            for (var i = 0; i < siblings.length; i++) {
+                var sibling = siblings[i];
+                if (sibling === element) {
+                    return _this.getElementXPath(element.parentNode) + '/' + element.tagName + '[' + ix + ']';
+                }
+                if (sibling.nodeType === 1 && sibling.tagName === element.tagName) {
+                    ix++;
+                }
+            }
+        },
+        // 获取元素css
+        getElementCssSelector (element) {
+            let selector = element.tagName.toLowerCase();
+            if (element.id) {
+                selector += '#' + element.id;
+            }
+            if (element.className) {
+                selector += '.' + element.className.split(' ').join('.');
+            }
+            return selector;
+        }
+    },
 }
 </script>
-<style lang="scss" scoped>
+<style scoped>
+.el-form-item {
+    margin-bottom: 0;
+}
+
+.tooltips button {
+    width: 60px !important;
+    height: 30px !important;
+}
 </style>
\ No newline at end of file