完成采集表单功能

src/App.vue

@@ -96,10 +96,10 @@
 import ResizeObserver from 'resize-observer-polyfill';
 import { saveAs } from 'file-saver';
 import draggable from 'vuedraggable'
-import { pageNavigate, elClick, sysSleep, onInput, elOutput, pageJavascript, collectionTable, actions } from './components/index.js'
+import { pageNavigate, elClick, sysSleep, onInput, elOutput, pageJavascript, collectionTable, collectionForm, actions } from './components/index.js'
 export default {
     name: 'App',
-    components: { pageNavigate, elClick, sysSleep, onInput, elOutput, pageJavascript, collectionTable, actions, draggable },
+    components: { pageNavigate, elClick, sysSleep, onInput, elOutput, pageJavascript, collectionTable, collectionForm, actions, draggable },
     props: {},
     data () {
         return {
@@ -141,6 +141,9 @@ export default {
                 value: 'collectionTable',
                 label: '采集表'
             }, {
+                value: 'collectionForm',
+                label: '采集表单'
+            }, {
                 value: 'actions',
                 label: '容器'
             }],
@@ -219,6 +222,9 @@ export default {
                 case 'collectionTable':
                     this.dynamicComponent = collectionTable
                     break;
+                case 'collectionForm':
+                    this.dynamicComponent = collectionForm
+                    break;
                 case 'actions':
                     this.dynamicComponent = actions
                     break;

src/components/collectionForm.vue

+<template>
+    <div class="collectionForm">
+        <div style="display: flex;height: 40px;padding-left: 15px;text-align: left;align-items: center;justify-content: space-between;">
+            <div style="display: flex;">
+                <el-button style="width: 60px;height: 30px;" size="mini" class="button-new-tag" @click="selectElement" v-if="isSelectTable">选择元素</el-button>
+                <el-button style="width: 60px;height: 30px;margin-left: 10px !important;" size="small" class="button-new-tag" @click="cancelSelect" v-if="isSelectTable">取消选择</el-button>
+                <el-button style="width: 60px;height: 30px;" size="mini" class="button-new-tag" @click="columnBack" v-else>返回</el-button>
+            </div>
+            <el-button style="margin-right: 15px;" size="small" class="button-new-tag" @click="getForm" v-if="isSelectTable">获取表单信息</el-button>
+        </div>
+        <!-- 全部表格信息 -->
+        <div style="overflow: auto;height: 290px;" :style="{ width: widthResize + 'px' }">
+            <vxe-table key="1" :data="SelectTableData" ref="xTableColumn" border class="mytable-scrollbar" height="250" auto-resize style="margin-bottom: 5px;" v-if="isSelectTable">
+                <vxe-column field="" title="字段名" min-width="150">
+                    <template v-slot="{ row }">
+                        <div style="display: flex;flex-direction: column;">
+                            <span>选中内容:{{ row.contentText }}</span>
+                            <vxe-input v-model="row.title" placeholder="请填写列名" size="mini"></vxe-input>
+                        </div>
+                    </template>
+                </vxe-column>
+                <vxe-column field="" title="属性名" min-width="150">
+                    <template v-slot="{ row }">
+                        <div style="display: flex;flex-direction: column;">
+                            <span>选中内容:{{ row.contentText }}</span>
+                            <vxe-input v-model="row.name" placeholder="请填写属性名" size="mini"></vxe-input>
+                        </div>
+                    </template>
+                </vxe-column>
+                <vxe-column field="" title="值类型" min-width="170">
+                    <template v-slot="{ row }">
+                        <div style="display: flex;flex-direction: column;">
+                            <span>选中内容:{{ row.contentText }}</span>
+                            <el-select style="height: 28px;" v-model="row.type" placeholder="选择值类型" v-if="row.typeOptions.length > 1" :popper-append-to-body="false" filterable remote>
+                                <el-option v-for="num in row.typeOptions" :key="num.xpath" :value="num.value" :label="num.label"></el-option>
+                            </el-select>
+                            <vxe-input style="width: 100% !important;" v-model="row.type" :placeholder="row.typeOptions[0].label" size="mini" v-else disabled></vxe-input>
+                        </div>
+                    </template>
+                </vxe-column>
+                <vxe-column title="操作" min-width="70" fixed="right">
+                    <template #default="{ row }">
+                        <vxe-button status="danger" content="删除" @click="columnDelete(row)" style="width: 50px;"></vxe-button>
+                    </template>
+                </vxe-column>
+            </vxe-table>
+            <vxe-table key="2" :data="tableData" ref="xTableColumn2" border class="mytable-scrollbar" height="250" auto-resize style="margin-bottom: 5px;" v-else>
+                <vxe-column field="" title="属性名" min-width="150">
+                    <template v-slot="{ row }">
+                        <div style="display: flex;flex-direction: column;">
+                            <span>{{ row.name }}</span>
+                        </div>
+                    </template>
+                </vxe-column>
+                <vxe-column field="" title="内容" min-width="150">
+                    <template v-slot="{ row }">
+                        <div style="display: flex;flex-direction: column;">
+                            <span>{{ row.content }}</span>
+                        </div>
+                    </template>
+                </vxe-column>
+            </vxe-table>
+        </div>
+    </div>
+</template>
+
+<script>
+import VXETable, { t } from 'vxe-table'
+export default {
+    name: 'collectionForm',
+    components: {},
+    props: ['activedAction', 'widthResize'],
+    data () {
+        return {
+            tableColumn: [],
+            tableData: [],
+            SelectTableData: [],
+            isSelectTable: true,
+            table: null,
+            contextMenuListenerAdded: false,
+            index: 0,
+            tableName: '',
+        }
+    },
+    created () {
+        if (this.activedAction.table !== undefined) {
+            for (let i = 0; i < this.activedAction.table.cells.length; i++) {
+                let info = {};
+                info.type = this.activedAction.table.cells[i].type;
+                info.name = this.activedAction.table.cells[i].name;
+                info.title = this.activedAction.table.cells[i].title;
+                info.typeOptions = this.activedAction.table.cells[i].types;
+                info.xPath = this.activedAction.table.cells[i].xpath;
+                this.SelectTableData.push(info)
+            }
+        }
+    },
+    mounted () { },
+    watch: {
+        SelectTableData: {
+            handler (newVal) {
+                this.activedAction.formList = [];
+                this.activedAction.formList = this.SelectTableData
+                this.$emit('dataChanged', this.activedAction);
+                console.log(this.activedAction)
+            },
+            deep: true
+        }
+    },
+    computed: {},
+    beforeDestroy () {
+        // 在组件销毁前移除事件监听器
+        document.removeEventListener('contextmenu', this.contextMenuHandler);
+    },
+    methods: {
+        getForm () {
+            let _this = this
+            for (let i = 0; i < _this.SelectTableData.length; i++) {
+                let obj = {};
+                obj.name = _this.SelectTableData[i].name;
+                obj.title = _this.SelectTableData[i].title;
+                obj.typeOptions = _this.SelectTableData[i].typeOptions;
+                obj.type = _this.SelectTableData[i].type;
+                let content = _this.getFormData(_this.SelectTableData[i].xpath, _this.SelectTableData[i].type)
+                obj.content = content
+                _this.tableData.push(obj)
+            }
+            console.log(_this.SelectTableData)
+
+            // 验证name属性是否唯一
+            _this.validateNames(_this.SelectTableData)
+
+        },
+        getFormData (xpath, type) {
+            // 获取元素
+            let result = document.evaluate(xpath, document, null, XPathResult.ANY_TYPE, null);
+            // 获取查询结果的第一个元素
+            let element = result.iterateNext();
+            console.log(element)
+            if (type == 'xPath') {
+                return xpath
+            } else {
+                return element[type]
+            }
+        },
+        // 删除数据行
+        columnDelete (row) {
+            let _this = this
+            _this.SelectTableData = this.SelectTableData.filter(item => item._X_ROW_KEY
+                !== row._X_ROW_KEY
+            )
+            _this.SelectTableData = _this.SelectTableData.filter(xpath => xpath.xpath !== row.xpath);
+            // _this.table.cells = _this.table.cells.filter(xpath => xpath !== row.xpath);
+        },
+        columnBack () {
+            let _this = this
+            _this.isSelectTable = true
+            _this.tableData = []
+        },
+        // 定义事件处理函数
+        contextMenuHandler (event) {
+            let _this = this
+            event.preventDefault(); // 阻止默认的右击菜单
+            _this.contextMenuListenerAdded = true
+            //表格展示配置
+            let targetElement = event.target;
+            // 检查目标元素是否位于ID为'realcontent'的元素内部
+            let isInRealContent = targetElement.closest('#realcontent');
+            // 如果目标元素在'realcontent'内，则阻止默认行为
+            if (isInRealContent) return;
+            // 判断元素类型并提取信息
+            let info = {};
+            let typeOptions = []
+            if (targetElement.tagName === 'A') {
+                // 链接
+                info = {
+                    xPath: 'xPath',
+                    url: 'href',
+                    text: 'textContent'
+                };
+                typeOptions = Object.entries(info).map(([label, value]) => {
+                    return { label, value };
+                });
+                info.typeOptions = []
+                info.typeOptions = typeOptions
+                info.xpath = _this.getElementXPath(targetElement)
+                info.contentText = targetElement.textContent
+                info.title = 'columnName'
+            } else if (targetElement.tagName === 'IMG') {
+                // 图片
+                info = {
+                    xPath: 'xPath',
+                    src: 'src',
+                    alt: 'alt'
+                };
+                typeOptions = Object.entries(info).map(([label, value]) => {
+                    return { label, value };
+                });
+                info.typeOptions = []
+                info.typeOptions = typeOptions
+                info.xpath = _this.getElementXPath(targetElement)
+                info.contentText = targetElement.textContent
+                info.title = 'columnName'
+            } else {
+                // 其他标签
+                info = {
+                    // xPath:'xPath',
+                    text: 'textContent'
+                };
+                typeOptions = Object.entries(info).map(([label, value]) => {
+                    return { label, value };
+                });
+                info.typeOptions = []
+                info.typeOptions = typeOptions
+                info.xpath = _this.getElementXPath(targetElement)
+                info.contentText = targetElement.textContent
+                info.title = 'columnName'
+            }
+            info.name = 'ID' + _this.index++
+            info.type = ''
+            _this.SelectTableData.push(info)
+            console.log(_this.SelectTableData)
+        },
+        // 选择元素按钮调用
+        selectElement () {
+            // 添加事件监听器
+            document.addEventListener('contextmenu', this.contextMenuHandler, false);
+        },
+        // 取消按钮调用
+        cancelSelect () {
+            // 在取消按钮点击时移除事件监听器
+            document.removeEventListener('contextmenu', this.contextMenuHandler);
+        },
+        // 获取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++;
+                }
+            }
+        },
+        validateNames (arr) {
+            // let _this = this;
+            let names = new Set();
+            // 检查元素是否为空
+            if (this.SelectTableData.length == 0) {
+                this.$message.error("还未选择元素");
+                return
+            }
+            // 遍历 arr
+            for (const item of arr) {
+                // 检查 name 是否为空
+                if (!item.name) {
+                    this.$message.error("属性名不能为空");
+                    return; // 如果 name 为空，则退出函数
+                }
+                // 检查类型是否为空
+                if (item.typeOptions.length == 1) {
+                    item.type = item.typeOptions[0].value
+                } else if (item.typeOptions.length > 1) {
+                    if (item.type == '') {
+                        this.$message.error("类型值不能为空");
+                        return;
+                    } else { this.isSelectTable = false }
+                }
+                names.add(item.name);
+            }
+        }
+    },
+}
+</script>
+<style>
+.vxe-select>.vxe-input {
+    width: 120px !important;
+}
+
+.vxe-input--inner {
+    width: 120px !important;
+}
+</style>
\ No newline at end of file

src/components/index.js

@@ -5,5 +5,6 @@ import onInput from './onInput.vue';
 import elOutput from './elOutput.vue';
 import pageJavascript from './pageJavascript.vue';
 import collectionTable from './collectionTable.vue';
+import collectionForm from './collectionForm.vue';
 import actions from './actions.vue';
-export { pageNavigate, elClick, sysSleep, onInput, elOutput, pageJavascript, collectionTable, actions };
\ No newline at end of file
+export { pageNavigate, elClick, sysSleep, onInput, elOutput, pageJavascript, collectionTable, collectionForm, actions };
\ No newline at end of file