优化采集表

src/App.vue

@@ -67,7 +67,7 @@
             <el-divider></el-divider>
             <!-- 容器配置 -->
             <div v-if="isShowAction">
-                <div style="height: 35px;display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid #888888;">
+                <div style="height: 35px;display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid rgb(165 165 165);">
                     <div style="width: 211px;display: flex;align-items: center;margin-left: 15px;">
                         <span style="width: 90px;">动作名称:</span>
                         <el-input class="input-new-tag dongzuo" v-model="activedAction.Name" size="small" placeholder="请输入动作名称">

src/components/collectionTable.vue

 <template>
     <div class="collectionTable">
-        <div style="display: flex;height: 50px;margin-left: 15px;text-align: left;align-items: center;justify-content: flex-start;">
-            <el-button size="mini" class="button-new-tag" @click="selectElement" v-if="isSelectTable">选择元素</el-button>
-            <el-button size="mini" class="button-new-tag" @click="columnBack" v-else>返回</el-button>
-            <span style="margin-left: 80px;" v-if="isSelectTable">表名:</span> <vxe-input v-if="isSelectTable" v-model="tableName" placeholder="请填写表名" size="mini"></vxe-input>
+        <div style="display: flex;height: 40px;margin-left: 15px;text-align: left;align-items: center;justify-content: flex-start;">
+            <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;" size="mini" class="button-new-tag" @click="columnBack" v-else>返回</el-button>
+            <span style="margin-left: 80px;font-size: 15px;" v-if="isSelectTable">表名:</span>
+            <vxe-input style="margin-left: 10px;" v-if="isSelectTable" v-model="tableName" placeholder="请填写表名" size="mini"></vxe-input>
         </div>
         <!-- 全部表格信息 -->
-        <div style="width: 498px;overflow: auto;">
-            <vxe-table :data="SelectTableData" ref="xTableColumn" border class="mytable-scrollbar" height="270" v-if="isSelectTable" auto-resize style="margin-bottom: 5px;">
+        <div style="width: 460px;overflow: auto;">
+            <vxe-table :data="SelectTableData" ref="xTableColumn" border class="mytable-scrollbar" height="250" v-if="isSelectTable" auto-resize style="margin-bottom: 5px;">
                 <vxe-column field="" title="列名" width="150">
                     <template v-slot="{ row }">
                         <!-- {{ row.text }} -->
@@ -58,14 +59,13 @@ import { cell, table } from '../sdk-table'
 export default {
     name: 'collectionTable',
     components: {},
-    props: ['actionName', 'actionType'],
+    props: ['activedAction'],
     data () {
         return {
             tableColumn: [],
             tableData: [],
             SelectTableData: [],
             isSelectTable: true,
-            Xpaths: [],
             table: null,
             contextMenuListenerAdded: false,
             index: 0,
@@ -73,8 +73,18 @@ export default {
         }
     },
     created () {
-
-        //  getTableData()
+        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)
+            }
+            this.tableName = this.activedAction.table.name;
+        }
     },
     mounted () { },
     watch: {},
@@ -84,7 +94,7 @@ export default {
             let _this = this
             _this.table = new table()
             // 验证name属性是否唯一
-            _this.validateNames(this.Xpaths)
+            _this.validateNames(this.SelectTableData)
         },
 
         columnDelete (row) {
@@ -92,7 +102,7 @@ export default {
             _this.SelectTableData = this.SelectTableData.filter(item => item._X_ROW_KEY
                 !== row._X_ROW_KEY
             )
-            _this.Xpaths = _this.Xpaths.filter(xpath => xpath.xpath !== row.xpath);
+            _this.SelectTableData = _this.SelectTableData.filter(xpath => xpath.xpath !== row.xpath);
             _this.table.cells = _this.table.cells.filter(xpath => xpath !== row.xpath);
         },
         columnBack () {
@@ -161,7 +171,7 @@ export default {
                 info.name = 'ID' + _this.index++
                 info.type = ''
                 _this.SelectTableData.push(info)
-                _this.Xpaths.push(info)
+                console.log(_this.SelectTableData)
                 // sdkTable--------------------------------------------------------------------------------------------------------
                 // 移除事件监听器
                 document.removeEventListener('contextmenu', contextMenuHandler);
@@ -201,7 +211,7 @@ export default {
                 return; // 找到重复后退出函数
             }
             // 检查元素是否为空
-            if (_this.Xpaths.length == 0) {
+            if (_this.SelectTableData.length == 0) {
                 this.$message.error("还未选择元素");
                 return
             }
@@ -228,10 +238,10 @@ export default {
                 }
                 names.add(item.name);
             }
-            // 遍历 Xpaths
-            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.Xpaths[i].type, _this.Xpaths[i].typeOptions, _this.Xpaths[i].title)
+            // 遍历 SelectTableData
+            for (let i = 0; i < _this.SelectTableData.length; i++) {
+                // _this.SelectTableData[i].name = 'ID' + i
+                _this.table.newCell(_this.SelectTableData[i].xpath, _this.SelectTableData[i].name, _this.SelectTableData[i].type, _this.SelectTableData[i].typeOptions, _this.SelectTableData[i].title)
             }
             _this.table.verify()
             _this.table.name = _this.tableName
@@ -240,20 +250,23 @@ export default {
             _this.tableData = _this.table.getData()
             // 检查数据是否为空
             if (_this.tableData.length == 0) return
-            // 遍历 Xpaths
-            for (let i = 0; i < _this.Xpaths.length; i++) {
+            // 遍历 SelectTableData
+            for (let i = 0; i < _this.SelectTableData.length; i++) {
                 let objs = {}
-                objs.field = _this.Xpaths[i].name
-                objs.title = _this.Xpaths[i].title
+                objs.field = _this.SelectTableData[i].name
+                objs.title = _this.SelectTableData[i].title
                 // objs.width = 150
                 _this.tableColumn.push(objs)
 
             }
             _this.isSelectTable = false
-            _this.table.Name = this.actionName
-            _this.table.Alias = this.actionType
+            _this.table.Name = _this.activedAction.Name
+            _this.table.Alias = _this.activedAction.Alias
             _this.$emit('dataChanged', _this.table);
-            console.log(this.tableData)
+            console.log(this.table)
+            // 防止父级改变，子级未改变重新赋值
+            this.activedAction.table = this.table;
+            this.$emit('dataChanged', this.activedAction);
         }
     },
 }
@@ -266,8 +279,4 @@ export default {
 .vxe-input--inner {
     width: 120px !important;
 }
-
-/* .vxe-table--render-default .vxe-body--column, .vxe-table--render-default .vxe-footer--column, .vxe-table--render-default .vxe-header--column{
-    line-height: 0px!important;
-} */
 </style>
\ No newline at end of file