Skip to content

V
Vue-WebDriver
Commit 95dc7433 by 郁子恒
Options

优化采集表单功能

parent 913e0cbf
Showing with 86 additions and 80 deletions
src/components/collectionForm.vue
...@@ -2,27 +2,19 @@ ...@@ -2,27 +2,19 @@
<div class="collectionForm"> <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;height: 40px;padding-left: 15px;text-align: left;align-items: center;justify-content: space-between;">
<div style="display: flex;"> <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: 80px;height: 30px;" size="mini" class="button-new-tag" @click="selectElement" v-if="isSelectForm">批量选择元素</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;margin-left: 10px !important;" size="small" class="button-new-tag" @click="cancelSelect" v-if="isSelectForm">取消选择</el-button>
<el-button style="width: 60px;height: 30px;" size="mini" class="button-new-tag" @click="columnBack" v-else>返回</el-button> <el-button style="width: 60px;height: 30px;" size="mini" class="button-new-tag" @click="columnBack" v-else>返回</el-button>
</div> </div>
<el-button style="margin-right: 15px;" size="small" class="button-new-tag" @click="getForm" v-if="isSelectTable">获取表单信息</el-button> <el-button style="margin-right: 15px;" size="small" class="button-new-tag" @click="getForm" v-if="isSelectForm">获取表单信息</el-button>
</div> </div>
<!-- 全部表格信息 --> <!-- 全部表格信息 -->
<div style="overflow: auto;height: 290px;" :style="{ width: widthResize + 'px' }"> <div style="overflow: auto;height: 305px;" :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-table key="1" :data="SelectFormData" ref="xTableColumn" border class="mytable-scrollbar" height="250" auto-resize style="margin-bottom: 5px;" v-if="isSelectForm">
<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"> <vxe-column field="" title="属性名" min-width="150">
<template v-slot="{ row }"> <template v-slot="{ row }">
<div style="display: flex;flex-direction: column;"> <div style="display: flex;flex-direction: column;">
<span>选中内容:{{ row.contentText }}</span> <span>选中内容:{{ row.text }}</span>
<vxe-input v-model="row.name" placeholder="请填写属性名" size="mini"></vxe-input> <vxe-input v-model="row.name" placeholder="请填写属性名" size="mini"></vxe-input>
</div> </div>
</template> </template>
...@@ -30,7 +22,7 @@ ...@@ -30,7 +22,7 @@
<vxe-column field="" title="值类型" min-width="170"> <vxe-column field="" title="值类型" min-width="170">
<template v-slot="{ row }"> <template v-slot="{ row }">
<div style="display: flex;flex-direction: column;"> <div style="display: flex;flex-direction: column;">
<span>选中内容:{{ row.contentText }}</span> <span>选中内容:{{ row.text }}</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-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-option v-for="num in row.typeOptions" :key="num.xpath" :value="num.value" :label="num.label"></el-option>
</el-select> </el-select>
...@@ -44,7 +36,7 @@ ...@@ -44,7 +36,7 @@
</template> </template>
</vxe-column> </vxe-column>
</vxe-table> </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-table key="2" :data="formData" ref="xTableColumn2" border class="mytable-scrollbar" height="250" auto-resize style="margin-bottom: 5px;" v-else>
<vxe-column field="" title="属性名" min-width="150"> <vxe-column field="" title="属性名" min-width="150">
<template v-slot="{ row }"> <template v-slot="{ row }">
<div style="display: flex;flex-direction: column;"> <div style="display: flex;flex-direction: column;">
...@@ -65,42 +57,40 @@ ...@@ -65,42 +57,40 @@
</template> </template>
<script> <script>
import VXETable, { t } from 'vxe-table' // import VXETable, { t } from 'vxe-table'
export default { export default {
name: 'collectionForm', name: 'collectionForm',
components: {}, components: {},
props: ['activedAction', 'widthResize'], props: ['activedAction', 'widthResize'],
data () { data () {
return { return {
tableColumn: [], isSelectForm: true,
tableData: [], SelectFormData: [],
SelectTableData: [], formData: [],
isSelectTable: true, form: null,
table: null,
contextMenuListenerAdded: false, contextMenuListenerAdded: false,
index: 0, index: 0,
tableName: '',
} }
}, },
created () { created () {
if (this.activedAction.table !== undefined) { if (this.activedAction.form !== undefined) {
for (let i = 0; i < this.activedAction.table.cells.length; i++) { for (let i = 0; i < this.activedAction.form.cells.length; i++) {
let info = {}; let info = {};
info.type = this.activedAction.table.cells[i].type; info.type = this.activedAction.form.cells[i].type;
info.name = this.activedAction.table.cells[i].name; info.name = this.activedAction.form.cells[i].name;
info.title = this.activedAction.table.cells[i].title; info.title = this.activedAction.form.cells[i].title;
info.typeOptions = this.activedAction.table.cells[i].types; info.typeOptions = this.activedAction.form.cells[i].types;
info.xPath = this.activedAction.table.cells[i].xpath; info.xpath = this.activedAction.form.cells[i].xpath;
this.SelectTableData.push(info) this.SelectFormData.push(info)
} }
} }
}, },
mounted () { }, mounted () { },
watch: { watch: {
SelectTableData: { SelectFormData: {
handler (newVal) { handler (newVal) {
this.activedAction.formList = []; this.activedAction.formList = [];
this.activedAction.formList = this.SelectTableData this.activedAction.formList = this.SelectFormData
this.$emit('dataChanged', this.activedAction); this.$emit('dataChanged', this.activedAction);
console.log(this.activedAction) console.log(this.activedAction)
}, },
...@@ -115,20 +105,19 @@ export default { ...@@ -115,20 +105,19 @@ export default {
methods: { methods: {
getForm () { getForm () {
let _this = this let _this = this
for (let i = 0; i < _this.SelectTableData.length; i++) { for (let i = 0; i < _this.SelectFormData.length; i++) {
let obj = {}; let obj = {};
obj.name = _this.SelectTableData[i].name; obj.name = _this.SelectFormData[i].name;
obj.title = _this.SelectTableData[i].title; obj.title = _this.SelectFormData[i].title;
obj.typeOptions = _this.SelectTableData[i].typeOptions; obj.typeOptions = _this.SelectFormData[i].typeOptions;
obj.type = _this.SelectTableData[i].type; obj.type = _this.SelectFormData[i].type;
let content = _this.getFormData(_this.SelectTableData[i].xpath, _this.SelectTableData[i].type) let content = _this.getFormData(_this.SelectFormData[i].xpath, _this.SelectFormData[i].type)
obj.content = content obj.content = content
_this.tableData.push(obj) _this.formData.push(obj)
} }
console.log(_this.SelectTableData) console.log(_this.SelectFormData)
// 验证name属性是否唯一 // 验证name属性是否唯一
_this.validateNames(_this.SelectTableData) _this.validateNames(_this.SelectFormData)
}, },
getFormData (xpath, type) { getFormData (xpath, type) {
...@@ -137,7 +126,7 @@ export default { ...@@ -137,7 +126,7 @@ export default {
// 获取查询结果的第一个元素 // 获取查询结果的第一个元素
let element = result.iterateNext(); let element = result.iterateNext();
console.log(element) console.log(element)
if (type == 'xPath') { if (type == 'xpath') {
return xpath return xpath
} else { } else {
return element[type] return element[type]
...@@ -146,90 +135,97 @@ export default { ...@@ -146,90 +135,97 @@ export default {
// 删除数据行 // 删除数据行
columnDelete (row) { columnDelete (row) {
let _this = this let _this = this
_this.SelectTableData = this.SelectTableData.filter(item => item._X_ROW_KEY _this.SelectFormData = this.SelectFormData.filter(item => item._X_ROW_KEY
!== row._X_ROW_KEY !== row._X_ROW_KEY
) )
_this.SelectTableData = _this.SelectTableData.filter(xpath => xpath.xpath !== row.xpath); _this.SelectFormData = _this.SelectFormData.filter(xpath => xpath.xpath !== row.xpath);
// _this.table.cells = _this.table.cells.filter(xpath => xpath !== row.xpath); // _this.form.cells = _this.form.cells.filter(xpath => xpath !== row.xpath);
}, },
columnBack () { columnBack () {
let _this = this let _this = this
_this.isSelectTable = true _this.isSelectForm = true
_this.tableData = [] _this.formData = []
}, },
// 定义事件处理函数 // 定义事件处理函数
contextMenuHandler (event) { contextMenuHandler (event) {
let _this = this let _this = this
event.preventDefault(); // 阻止默认的右击菜单 // 阻止默认的右击菜单
event.preventDefault();
// 标记右击菜单事件已经被处理
_this.contextMenuListenerAdded = true _this.contextMenuListenerAdded = true
//表格展示配置 // 获取右击事件的目标元素
let targetElement = event.target; let targetElement = event.target;
// 检查目标元素是否位于ID为'realcontent'的元素内部 // 检查目标元素是否位于ID为'realcontent'的元素内部
let isInRealContent = targetElement.closest('#realcontent'); let isInRealContent = targetElement.closest('#realcontent');
// 如果目标元素在'realcontent'内，则阻止默认行为 // 如果目标元素在'realcontent'内，则阻止默认行为
if (isInRealContent) return; if (isInRealContent) return;
// 判断元素类型并提取信息 // 定义一个对象用于存储提取的信息
let info = {}; let info = {};
// 定义一个数组用于存储类型选项
let typeOptions = [] let typeOptions = []
// 如果右击的目标元素是链接（<a>标签）
if (targetElement.tagName === 'A') { if (targetElement.tagName === 'A') {
// 链接 // 定义一个对象info，用于存储提取的信息
info = { info = {
xPath: 'xPath', xpath: 'xpath',
url: 'href', url: 'href',
text: 'textContent' text: 'text'
}; };
// 将info对象的属性转换为选项数组，每个选项是一个对象包含label和value属性
typeOptions = Object.entries(info).map(([label, value]) => { typeOptions = Object.entries(info).map(([label, value]) => {
return { label, value }; return { label, value };
}); });
info.typeOptions = [] info.typeOptions = []
// 将生成的typeOptions数组赋值给info对象的typeOptions属性
info.typeOptions = typeOptions info.typeOptions = typeOptions
// 获取目标元素的XPath，赋值给info对象的xpath属性
info.xpath = _this.getElementXPath(targetElement) info.xpath = _this.getElementXPath(targetElement)
info.contentText = targetElement.textContent // 获取目标元素的文本内容，赋值给info对象的contentText属性
info.title = 'columnName' info.text = targetElement.textContent
// 设置info对象的title属性为字符串 'columnName'
// info.title = 'columnName'
// 如果右击的目标元素是图片（IMG标签）
} else if (targetElement.tagName === 'IMG') { } else if (targetElement.tagName === 'IMG') {
// 图片 // 定义一个对象info，用于存储提取的信息
info = { info = {
xPath: 'xPath', xpath: 'xpath',
src: 'src', src: 'src',
alt: 'alt' alt: 'alt'
}; };
// 将info对象的属性转换为选项数组，每个选项是一个对象包含label和value属性
typeOptions = Object.entries(info).map(([label, value]) => { typeOptions = Object.entries(info).map(([label, value]) => {
return { label, value }; return { label, value };
}); });
info.typeOptions = [] info.typeOptions = []
// 将生成的typeOptions数组赋值给info对象的typeOptions属性
info.typeOptions = typeOptions info.typeOptions = typeOptions
// 获取目标元素的XPath，赋值给info对象的xpath属性
info.xpath = _this.getElementXPath(targetElement) info.xpath = _this.getElementXPath(targetElement)
info.contentText = targetElement.textContent // 获取目标元素的文本内容，赋值给info对象的contentText属性
info.title = 'columnName' info.text = targetElement.textContent
// info.title = 'columnName'
} else { } else {
// 其他标签 // 定义一个对象info，用于存储提取的信息
info = { info = {
// xPath:'xPath', text: 'text'
text: 'textContent'
}; };
// 将info对象的属性转换为选项数组，每个选项是一个对象包含label和value属性
typeOptions = Object.entries(info).map(([label, value]) => { typeOptions = Object.entries(info).map(([label, value]) => {
return { label, value }; return { label, value };
}); });
info.typeOptions = [] info.typeOptions = []
// 将生成的typeOptions数组赋值给info对象的typeOptions属性
info.typeOptions = typeOptions info.typeOptions = typeOptions
// 获取目标元素的XPath，赋值给info对象的xpath属性
info.xpath = _this.getElementXPath(targetElement) info.xpath = _this.getElementXPath(targetElement)
info.contentText = targetElement.textContent // 获取目标元素的文本内容，赋值给info对象的contentText属性
info.title = 'columnName' info.text = targetElement.textContent
// info.title = 'columnName'
} }
info.name = 'ID' + _this.index++ info.name = 'ID' + _this.index++
info.type = '' info.type = ''
_this.SelectTableData.push(info) _this.SelectFormData.push(info)
console.log(_this.SelectTableData) console.log(_this.SelectFormData)
},
// 选择元素按钮调用
selectElement () {
// 添加事件监听器
document.addEventListener('contextmenu', this.contextMenuHandler, false);
},
// 取消按钮调用
cancelSelect () {
// 在取消按钮点击时移除事件监听器
document.removeEventListener('contextmenu', this.contextMenuHandler);
}, },
// 获取xpath // 获取xpath
getElementXPath (element) { getElementXPath (element) {
...@@ -248,11 +244,21 @@ export default { ...@@ -248,11 +244,21 @@ export default {
} }
} }
}, },
// 选择元素按钮调用
selectElement () {
// 添加事件监听器
document.addEventListener('contextmenu', this.contextMenuHandler, false);
},
// 取消按钮调用
cancelSelect () {
// 在取消按钮点击时移除事件监听器
document.removeEventListener('contextmenu', this.contextMenuHandler);
},
validateNames (arr) { validateNames (arr) {
// let _this = this; // let _this = this;
let names = new Set(); let names = new Set();
// 检查元素是否为空 // 检查元素是否为空
if (this.SelectTableData.length == 0) { if (this.SelectFormData.length == 0) {
this.$message.error("还未选择元素"); this.$message.error("还未选择元素");
return return
} }
...@@ -270,7 +276,7 @@ export default { ...@@ -270,7 +276,7 @@ export default {
if (item.type == '') { if (item.type == '') {
this.$message.error("类型值不能为空"); this.$message.error("类型值不能为空");
return; return;
} else { this.isSelectTable = false } } else { this.isSelectForm = false }
} }
names.add(item.name); names.add(item.name);
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment