Skip to content

V
Vue-WebDriver
Commit 6b5ec9d2 by 高源
Options

采集表动作界面优化

parent 2e4c4efe
Showing with 74 additions and 127 deletions
src/components/collectionTable.vue
...@@ -22,8 +22,16 @@ ...@@ -22,8 +22,16 @@
<div style="width: 498px;overflow: auto;"> <div style="width: 498px;overflow: auto;">
<vxe-table :data="SelectTableData" ref="xTableColumn" border class="mytable-scrollbar" height="220" <vxe-table :data="SelectTableData" ref="xTableColumn" border class="mytable-scrollbar" height="220"
v-if="isSelectTable"> v-if="isSelectTable">
<vxe-column field="content" title="content"></vxe-column> <vxe-column field="text" title="content">
<vxe-column field="Xpath" title="xpath"></vxe-column> <template v-slot="{ row }">
{{ row.text }}
<vxe-select v-model="row.name" 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="xpath" title="xpath"></vxe-column>
<vxe-column title="操作" width="100"> <vxe-column title="操作" width="100">
<template #default="{ row }"> <template #default="{ row }">
<vxe-button status="danger" content="删除" @click="columnDelete(row)" <vxe-button status="danger" content="删除" @click="columnDelete(row)"
...@@ -50,8 +58,7 @@ ...@@ -50,8 +58,7 @@
<script> <script>
import VXETable, { t } from 'vxe-table' import VXETable, { t } from 'vxe-table'
// import { getTableData } from '../sdk' import { cell, table } from '../sdk-table'
import { cell, checkTableFromXpaths, table } from '../sdk-table'
export default { export default {
name: 'collectionTable', name: 'collectionTable',
components: {}, components: {},
...@@ -59,58 +66,11 @@ export default { ...@@ -59,58 +66,11 @@ export default {
data () { data () {
return { return {
tableColumn: [], tableColumn: [],
tableData: [ tableData: [],
{
"0": [
{
"content": "/HTML/BODY/DIV[3]/DIV[1]/DIV[1]/DIV[1]/DIV[1]/SPAN[1]/A[1]",
"name": "",
"value": "根据type获取到的值"
},
{
"content": "/HTML/BODY/DIV[3]/DIV[1]/DIV[1]/DIV[1]/DIV[2]/SPAN[1]",
"name": "",
"value": "根据type获取到的值"
}
]
},
{
"1": [
{
"content": "/HTML/BODY/DIV[3]/DIV[2]/DIV[1]/DIV[1]/DIV[1]/SPAN[1]/A[1]",
"name": "",
"value": "根据type获取到的值"
},
{
"content": "/HTML/BODY/DIV[3]/DIV[2]/DIV[1]/DIV[1]/DIV[2]/SPAN[1]",
"name": "",
"value": "根据type获取到的值"
}
]
},
{
"2": [
{
"content": "/HTML/BODY/DIV[3]/DIV[3]/DIV[1]/DIV[1]/DIV[1]/SPAN[1]/A[1]",
"name": "",
"value": "根据type获取到的值"
},
{
"content": "/HTML/BODY/DIV[3]/DIV[3]/DIV[1]/DIV[1]/DIV[2]/SPAN[1]",
"name": "",
"value": "根据type获取到的值"
}
]
}
],
SelectTableData: [], SelectTableData: [],
isSelectTable: true, isSelectTable: true,
firstXpath: [],
somePath: '',
index: 0,
Xpaths: [], Xpaths: [],
sdkXPath: [], table:null
checkTableFrom: null
} }
}, },
created () { created () {
...@@ -123,50 +83,28 @@ export default { ...@@ -123,50 +83,28 @@ export default {
methods: { methods: {
getTable () { getTable () {
let _this = this let _this = this
let _table = new table() _this.table = new table()
for (let i = 0; i < _this.Xpaths.length; i++) { for (let i = 0; i < _this.Xpaths.length; i++) {
_table.newCell(_this.Xpaths[i]) _this.Xpaths[i].name = 'ID' + i
_this.table.newCell(_this.Xpaths[i].xpath, _this.Xpaths[i].name)
} }
_table.verify() _this.table.verify()
console.log(_table.getData())
console.log(_table)
// console.log(_this.table)
//----------------------
// console.log(_this.sdkXPath)
// _this.checkTableFrom = checkTableFromXpaths(_this.sdkXPath)
// console.log(_this.checkTableFrom)
// _this.tableData = _this.checkTableFrom.tableData
// console.log(_this.tableData)
// this.tableColumn = []
// for (let i = 0; i < _this.tableData.length; i++) {
// let objs = {}
// objs.field = ('content' + i) + '.content'
// objs.title = '请填写标题'
// objs.width = 145
// _this.tableColumn.push(objs)
// }
// _this.isSelectTable = false
return
//表格展示配置
_this.tableData = []
_this.tableColumn = [] _this.tableColumn = []
_this.tableData = getTableData(_this.Xpaths) _this.tableData = []
// 返回的结果进行重置 _this.tableData = _this.table.getData()
for (let i = 0; i < this.tableData.length; i++) {
if (_this.tableData.length == 0) return
for (let i = 0; i < Object.keys(_this.tableData[0]).length; i++) {
let objs = {} let objs = {}
objs.field = ('content' + i) + '.content' objs.field = ('ID' + i)
objs.title = '请填写标题' objs.title = '请填写标题'
objs.width = 145 objs.width = 145
_this.tableColumn.push(objs) _this.tableColumn.push(objs)
} }
_this.isSelectTable = false _this.isSelectTable = false
console.log(_this.table)
console.log(_this.tableData) return
}, },
columnDelete (row) { columnDelete (row) {
...@@ -175,18 +113,13 @@ export default { ...@@ -175,18 +113,13 @@ export default {
_this.SelectTableData = this.SelectTableData.filter(item => item._X_ROW_KEY _this.SelectTableData = this.SelectTableData.filter(item => item._X_ROW_KEY
!== row._X_ROW_KEY !== row._X_ROW_KEY
) )
console.log(_this.SelectTableData) _this.Xpaths = _this.Xpaths.filter(xpath => xpath.xpath !== row.xpath);
_this.firstXpath = _this.firstXpath.filter(xpath => xpath !== row.Xpath); _this.table.cells = _this.table.cells.filter(xpath => xpath !== row.xpath);
console.log(_this.tableColumn);
// if (this.SelectTableData.length == 0) this.firstXpath = []
}, },
columnBack () { columnBack () {
let _this = this let _this = this
_this.isSelectTable = true _this.isSelectTable = true
_this.tableData = [] _this.tableData = []
console.log(_this.firstXpath)
// this.firstXpath =[]
}, },
// 获取页面元素 // 获取页面元素
...@@ -196,43 +129,57 @@ export default { ...@@ -196,43 +129,57 @@ export default {
function contextMenuHandler (event) { function contextMenuHandler (event) {
event.preventDefault(); // 阻止默认的右击菜单 event.preventDefault(); // 阻止默认的右击菜单
//表格展示配置 //表格展示配置
let objs = {} let targetElement = event.target;
objs.field = ('content' + _this.index++) + '.content'
objs.title = '请填写标题'
objs.width = 145
_this.tableColumn.push(objs)
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)
};
let obj = {}
obj.Xpath = elementInfo.Xpath
obj.content = elementInfo.PartialLink
// _this.tableData.push(obj)
_this.SelectTableData.push(obj)
_this.firstXpath.push(elementInfo.Xpath)
_this.Xpaths.push(elementInfo.Xpath)
// sdkTable-------------------------------------------------------------------------------------------------------- // sdkTable--------------------------------------------------------------------------------------------------------
var selectCell = new cell(elementInfo.Xpath, 'cellName', 'text', 'title') // 判断元素类型并提取信息
// console.log(selectCell) let info = {};
_this.sdkXPath.push(selectCell) let typeOptions = []
if (targetElement.tagName === 'A') {
// 链接
info = {
xpath: _this.getElementXPath(targetElement),
url: targetElement.href,
text: targetElement.textContent
};
typeOptions = Object.entries(info).map(([label, value]) => {
return { label, value };
});
info.typeOptions = []
info.typeOptions = typeOptions
} else if (targetElement.tagName === 'IMG') {
// 图片
info = {
xpath: _this.getElementXPath(targetElement),
src: targetElement.src,
alt: targetElement.alt
};
typeOptions = Object.entries(info).map(([label, value]) => {
return { label, value };
});
info.typeOptions = []
info.typeOptions = typeOptions
} else {
// 其他标签
info = {
xpath: _this.getElementXPath(targetElement),
text: targetElement.textContent || targetElement.innerText
};
typeOptions = Object.entries(info).map(([label, value]) => {
return { label, value };
});
info.typeOptions = []
info.typeOptions = typeOptions
}
info.name = ''
_this.SelectTableData.push(info)
_this.Xpaths.push(info)
console.log(_this.SelectTableData)
// sdkTable-------------------------------------------------------------------------------------------------------- // sdkTable--------------------------------------------------------------------------------------------------------
// 移除事件监听器 // 移除事件监听器
document.removeEventListener('contextmenu', contextMenuHandler); document.removeEventListener('contextmenu', contextMenuHandler);
} }
// 添加事件监听器 // 添加事件监听器
document.addEventListener('contextmenu', contextMenuHandler, false); document.addEventListener('contextmenu', contextMenuHandler, false);
}, },
// 获取xpath // 获取xpath
getElementXPath (element) { getElementXPath (element) {
......
src/sdk-table.js
...@@ -14,9 +14,9 @@ function table () { ...@@ -14,9 +14,9 @@ function table () {
* 新生成一个单元格 * 新生成一个单元格
* @param {any} xpath * @param {any} xpath
*/ */
this.newCell = function (xpath) { this.newCell = function (xpath,name) {
_isVerified = false;//加入了 _isVerified = false;//加入了
let newCell = new cell(xpath); let newCell = new cell(xpath,name);
this.cells.push(newCell); this.cells.push(newCell);
} }
/** /**
...@@ -101,7 +101,7 @@ function table () { ...@@ -101,7 +101,7 @@ function table () {
* @param {string} type 元素取值类型，文本，链接，元素路径（点击动作用） * @param {string} type 元素取值类型，文本，链接，元素路径（点击动作用）
* @param {string} title 标题信息 * @param {string} title 标题信息
*/ */
function cell (xpath, name = "", type = "", title = "") { function cell (xpath, name , type = "", title = "") {
/**当前单元格的绝对路径，存入Action时有用 */ /**当前单元格的绝对路径，存入Action时有用 */
this.xpath = xpath; this.xpath = xpath;
/**当前单元格存储数据时的属性名 */ /**当前单元格存储数据时的属性名 */
......
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