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