采集表优化

src/components/collectionTable.vue

@@ -6,14 +6,14 @@
             <!-- <span style="margin-left: 3px;">元素信息如下:</span> -->
         </div>
         <!-- 表格信息 -->
-        <div style="width: 498px;overflow: auto;" v-if="!isSelectTable">
+        <!-- <div style="width: 498px;overflow: auto;" v-if="isSelectTable">
             <el-form ref="form" label-width="" style="display: flex;height: 40px;">
-                <el-form-item label="" v-for="item in tableColumn" :key="item.field">
+                <el-form-item label="" v-for="item in Xpaths" :key="item.field">
                     <el-input v-model="item.title"></el-input>
                 </el-form-item>
 
             </el-form>
-        </div>
+        </div> -->
         <!-- 选中表格信息 -->
 
 
@@ -22,16 +22,27 @@
         <div style="width: 498px;overflow: auto;">
             <vxe-table :data="SelectTableData" ref="xTableColumn" border class="mytable-scrollbar" height="220"
                 v-if="isSelectTable">
-                <vxe-column field="text" title="content">
+                <vxe-column field="" title="列配置">
+                    <template v-slot="{ row }">
+                        <!-- {{ row.text }} -->
+                        <vxe-input v-model="row.name" placeholder="请填写名称" size="mini"></vxe-input>
+                        <vxe-select v-model="row.type" placeholder="选择值类型">
+                            <vxe-option v-for="num in row.typeOptions" :key="num.xpath" :value="num.value"
+                                :label="num.label"></vxe-option>
+                        </vxe-select>
+                        
+                    </template>
+                </vxe-column>
+                <vxe-column field="" title="当前选中列文本值">
                     <template v-slot="{ row }">
                         {{ row.text }}
-                        <vxe-select v-model="row.name" placeholder="选择值类型">
+                        <!-- <vxe-select v-model="row.type" placeholder="选择值类型">
                             <vxe-option v-for="num in row.typeOptions" :key="num.xpath" :value="num.value"
                                 :label="num.label"></vxe-option>
                         </vxe-select>
+                        <vxe-input v-model="row.name" placeholder="请填写名称" size="mini"></vxe-input> -->
                     </template>
                 </vxe-column>
-                <vxe-column field="xpath" title="xpath"></vxe-column>
                 <vxe-column title="操作" width="100">
                     <template #default="{ row }">
                         <vxe-button status="danger" content="删除" @click="columnDelete(row)"
@@ -70,7 +81,9 @@ export default {
             SelectTableData: [],
             isSelectTable: true,
             Xpaths: [],
-            table:null
+            table: null,
+            contextMenuListenerAdded: false,
+            index: 0,
         }
     },
     created () {
@@ -84,27 +97,8 @@ export default {
         getTable () {
             let _this = this
             _this.table = new table()
-            for (let i = 0; i < _this.Xpaths.length; i++) {
-                _this.Xpaths[i].name = 'ID' + i
-                _this.table.newCell(_this.Xpaths[i].xpath, _this.Xpaths[i].name)
-            }
-            _this.table.verify()
-            _this.tableColumn = []
-            _this.tableData = []
-            _this.tableData = _this.table.getData()
-   
-            if (_this.tableData.length == 0) return
-            for (let i = 0; i < Object.keys(_this.tableData[0]).length; i++) {
-                let objs = {}
-                objs.field = ('ID' + i)
-                objs.title = '请填写标题'
-                objs.width = 145
-                _this.tableColumn.push(objs)
-
-            }
-            _this.isSelectTable = false
-            console.log(_this.table)
-            return
+            // 验证name属性是否唯一
+            _this.validateNames(this.Xpaths)
         },
 
         columnDelete (row) {
@@ -128,6 +122,7 @@ export default {
             // 定义事件处理函数
             function contextMenuHandler (event) {
                 event.preventDefault(); // 阻止默认的右击菜单
+                _this.contextMenuListenerAdded = true
                 //表格展示配置
                 let targetElement = event.target;
                 // sdkTable--------------------------------------------------------------------------------------------------------
@@ -170,16 +165,21 @@ export default {
                     info.typeOptions = []
                     info.typeOptions = typeOptions
                 }
-                info.name = ''
+                info.name = 'ID' + _this.index++
                 _this.SelectTableData.push(info)
                 _this.Xpaths.push(info)
-                console.log(_this.SelectTableData)
                 // sdkTable--------------------------------------------------------------------------------------------------------
                 // 移除事件监听器
                 document.removeEventListener('contextmenu', contextMenuHandler);
+                _this.contextMenuListenerAdded = false;
+
+            }
+            if (!_this.contextMenuListenerAdded) {
+                // 添加事件监听器
+                document.addEventListener('contextmenu', contextMenuHandler, false);
+                _this.contextMenuListenerAdded = true;
             }
-            // 添加事件监听器
-            document.addEventListener('contextmenu', contextMenuHandler, false);
+
         },
         // 获取xpath
         getElementXPath (element) {
@@ -198,8 +198,48 @@ export default {
                 }
             }
         },
+        validateNames (arr) {
+            let _this = this;
+            let names = new Set();
+
+            for (const item of arr) {
+                if (names.has(item.name)) {
+                    alert("name 值不能一样: " + item.name);
+                    return; // 找到重复后退出函数
+                }
+                names.add(item.name);
+            }
+            for (let i = 0; i < _this.Xpaths.length; i++) {
+                // _this.Xpaths[i].name = 'ID' + i
+                _this.table.newCell(_this.Xpaths[i].xpath, _this.Xpaths[i].name)
+            }
+            _this.table.verify()
+            _this.tableColumn = []
+            _this.tableData = []
+            _this.tableData = _this.table.getData()
+
+            if (_this.tableData.length == 0) return
+            console.log(_this.Xpaths)
+            for (let i = 0; i < _this.Xpaths.length; i++) {
+                let objs = {}
+                objs.field = _this.Xpaths[i].name
+                objs.title = _this.Xpaths[i].name
+                // objs.width = 145
+                _this.tableColumn.push(objs)
+
+            }
+            _this.isSelectTable = false
+            console.log(_this.table)
+            alert("所有 name 值都是唯一的。");
+        }
+
+
 
     },
 }
 </script>
-<style lang="scss" scoped></style>
+<style>
\ No newline at end of file
+.vxe-select>.vxe-input {
+    width: 145px !important;
+}
+</style>
\ No newline at end of file

src/sdk-table.js

@@ -62,6 +62,7 @@ function table () {
      * 加载JSON格式，生成一个新的对象结构
  * @param {table} obj 元素的XPath路径
      */
+    
     this.load = function (obj) {
         this.name = obj.name;
         this.xpath = obj.xpath;