Skip to content

V
Vue-WebDriver
Commit 7a129fd4 by 高源
Options

表格添加选中高亮

parent cc492774
Showing with 93 additions and 33 deletions
src/components/collectionTable.vue
......@@ -3,12 +3,13 @@
<div
style="display: flex;height: 40px;padding-left: 15px;text-align: left;align-items: center;justify-content: space-between;">
<template v-if="isSelectTable">
<el-tooltip class="item" effect="dark" content="请右击页面元素" placement="top">
<el-tooltip class="item" effect="dark" content="点击新增,右击页面元素添加数据" placement="top">
<!-- <el-button style="width: 60px;height: 30px;" size="mini" class="button-new-tag"
@click="selectElement">选择元素</el-button> -->
<!-- <vxe-button icon="fa fa-plus">新增</vxe-button> -->
<el-button type="primary" size="mini" style="width: 20px;height: 20px;" @click="selectElement">
<img style="width: 12px;height: 12px;" src="../assets/add.svg">
<!-- <vxe-button icon="fa fa-plus">新增</vxe-button> -->
<el-button type="primary" size="mini" style="width: 40px;height: 20px;" @click="selectElement">
<img style="width: 10px;height: 10px;vertical-align: bottom;" src="../assets/add.svg">
<span>新增</span>
</el-button>
</el-tooltip>
</template>
......@@ -27,11 +28,12 @@
<!-- 全部表格信息 -->
<div style="overflow: auto;height: 290px;" :style="{ width: widthResize + 'px' }">
<vxe-table :data="SelectTableData" ref="xTableColumn" border class="mytable-scrollbar" height="250"
v-if="isSelectTable" auto-resize style="margin-bottom: 5px;">
v-if="isSelectTable" auto-resize style="margin-bottom: 5px;" @current-change="currentChangeEvent"
highlight-hover-row highlight-current-row>
<vxe-column field="" title="列名" min-width="150">
<template v-slot="{ row }">
<div style="display: flex;flex-direction: column;">
<span>选中内容:{{ row.contentText }}</span>
<!-- <span>选中内容:{{ row.contentText }}</span> -->
<vxe-input v-model="row.title" placeholder="请填写列名" size="mini"></vxe-input>
</div>
</template>
......@@ -39,7 +41,7 @@
<vxe-column field="" title="属性名" min-width="150">
<template v-slot="{ row }">
<div style="display: flex;flex-direction: column;">
<span>选中内容:{{ row.contentText }}</span>
<!-- <span>选中内容:{{ row.contentText }}</span> -->
<vxe-input v-model="row.name" placeholder="请填写属性名" size="mini"></vxe-input>
</div>
</template>
......@@ -47,21 +49,23 @@
<vxe-column field="" title="值类型" min-width="170">
<template v-slot="{ row }">
<div style="display: flex;flex-direction: column;">
<span>选中内容:{{ row.contentText }}</span>
<!-- <span>选中内容:{{ row.contentText }}</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-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.label"
:label="num.value"></el-option>
</el-select>
<vxe-input style="width: 100% !important;" v-model="row.type"
:placeholder="row.typeOptions[0].label" size="mini" v-else disabled></vxe-input>
:placeholder="row.typeOptions[0].value" size="mini" v-else disabled></vxe-input>
</div>
</template>
</vxe-column>
<vxe-column title="操作" min-width="70" fixed="right">
<template #default="{ row }">
<vxe-button status="danger" content="删除" @click="columnDelete(row)"
style="width: 50px;"></vxe-button>
<img style="width: 50px;height: 28px;vertical-align: bottom;" src="../assets/close.svg"
@click="columnDelete(row)">
<!-- <vxe-button status="danger" content="删除" @click="columnDelete(row)"
style="width: 50px;"></vxe-button> -->
</template>
</vxe-column>
</vxe-table>
......@@ -91,6 +95,7 @@ export default {
contextMenuListenerAdded: false,
index: 0,
tableName: '',
selectedRow: null
}
},
created () {
......@@ -107,7 +112,19 @@ export default {
this.tableName = this.activedAction.table.name;
}
},
mounted () { },
mounted () {
let _this = this
document.addEventListener('click', function (event) {
// 如果点击的不是当前高亮的元素，移除高亮
if (event.target !== window.currentlyHighlighted) {
if (window.currentlyHighlighted) {
window.currentlyHighlighted.style.backgroundColor = '';
}
window.currentlyHighlighted = null;
}
});
},
watch: {},
computed: {},
methods: {
......@@ -123,7 +140,16 @@ export default {
_this.SelectTableData = this.SelectTableData.filter(item => item._X_ROW_KEY
!== row._X_ROW_KEY
)
// 先将删除的元素清空,并且将背景色还原
_this.SelectTableData = _this.SelectTableData.filter(xpath => xpath.xpath !== row.xpath);
_this.setElementBackgroundColor(row.xpath, '')
// 将表格最后一个选中，添加背景色
if (_this.SelectTableData.length > 0) {
_this.$refs.xTableColumn.setCurrentRow(_this.SelectTableData[_this.SelectTableData.length - 1])
_this.setElementBackgroundColor(_this.SelectTableData[_this.SelectTableData.length - 1].xpath, 'orange')
}
if (_this.table == null) return
_this.table.cells = _this.table.cells.filter(xpath => xpath !== row.xpath);
},
columnBack () {
......@@ -131,6 +157,21 @@ export default {
_this.isSelectTable = true
_this.tableData = []
},
// 行选中事件
currentChangeEvent ({ row }) {
if (this.selectedRow == null) {
this.selectedRow = row
}
if (this.selectedRow.xpath !== row.xpath) {
this.setElementBackgroundColor(this.selectedRow.xpath, '')
this.selectedRow = row
this.setElementBackgroundColor(row.xpath, 'orange')
} else {
this.setElementBackgroundColor(row.xpath, 'orange')
}
},
// 获取页面元素
selectElement () {
......@@ -151,9 +192,9 @@ export default {
if (targetElement.tagName === 'A') {
// 链接
info = {
xPath: 'xPath',
url: 'href',
text: 'textContent'
xPath: '元素路径',
href: '超链接',
textContent: '文本'
};
typeOptions = Object.entries(info).map(([label, value]) => {
return { label, value };
......@@ -166,9 +207,9 @@ export default {
} else if (targetElement.tagName === 'IMG') {
// 图片
info = {
xPath: 'xPath',
src: 'src',
alt: 'alt'
"xPath": '元素路径',
src: '超链接',
alt: '属性'
};
typeOptions = Object.entries(info).map(([label, value]) => {
return { label, value };
......@@ -181,8 +222,7 @@ export default {
} else {
// 其他标签
info = {
// xPath:'xPath',
text: 'textContent'
textContent: '文本'
};
typeOptions = Object.entries(info).map(([label, value]) => {
return { label, value };
......@@ -196,8 +236,16 @@ export default {
info.name = 'ID' + _this.index++
info.type = ''
_this.SelectTableData.push(info)
console.log(_this.SelectTableData)
// sdkTable--------------------------------------------------------------------------------------------------------
// 将新加入的tableData添加高亮
_this.$refs.xTableColumn.setCurrentRow(_this.SelectTableData[_this.SelectTableData.length - 1])
// 移除先前元素的背景色（如果有）
if (window.currentlyHighlighted) {
window.currentlyHighlighted.style.backgroundColor = '';
}
// 更新背景色并保存当前元素
event.target.style.backgroundColor = 'orange';
window.currentlyHighlighted = event.target;
// 移除事件监听器
document.removeEventListener('contextmenu', contextMenuHandler);
_this.contextMenuListenerAdded = false;
......@@ -226,6 +274,13 @@ export default {
}
}
},
setElementBackgroundColor (xpath, color) {
let result = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
let selectedElement = result.singleNodeValue;
if (selectedElement) {
selectedElement.style.backgroundColor = color;
}
},
validateNames (arr) {
let _this = this;
let names = new Set();
......@@ -287,10 +342,13 @@ export default {
_this.table.Name = _this.activedAction.Name
_this.table.Alias = _this.activedAction.Alias
_this.$emit('dataChanged', _this.table);
console.log(this.table)
// 防止父级改变，子级未改变重新赋值
this.activedAction.table = this.table;
this.$emit('dataChanged', this.activedAction);
_this.activedAction.table = _this.table;
_this.$emit('dataChanged', _this.activedAction);
// _this.setElementBackgroundColor('/HTML/BODY/DIV[3]', 'orange')
if (_this.selectedRow == null) return
_this.setElementBackgroundColor(this.selectedRow.xpath, '')
}
},
}
......@@ -304,7 +362,7 @@ export default {
width: 120px !important;
}
.el-tooltip__popper.is-dark{
.el-tooltip__popper.is-dark {
z-index: 99999 !important;
}
</style>
\ No newline at end of file
src/sdk-table.js
......@@ -14,9 +14,9 @@ function table () {
* 新生成一个单元格
* @param {any} xpath
*/
this.newCell = function (xpath, name, type, types,title) {
this.newCell = function (xpath, name, type, types, title) {
_isVerified = false;//加入了
let newCell = new cell(xpath, name, type,types, title);
let newCell = new cell(xpath, name, type, types, title);
this.cells.push(newCell);
}
/**
......@@ -102,7 +102,7 @@ function table () {
* @param {string} type 元素取值类型，文本，链接，元素路径（点击动作用）
* @param {string} title 标题信息
*/
function cell (xpath, name, type,types, title) {
function cell (xpath, name, type, types, title) {
/**当前单元格的绝对路径，存入Action时有用 */
this.xpath = xpath;
/**当前单元格存储数据时的属性名 */
......@@ -167,9 +167,10 @@ function cell (xpath, name, type,types, title) {
let cellXpath = this.tableXpath + "[" + index + "]" + '/' + this.relativeXpath;
let results = document.evaluate(cellXpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
if (!!results.singleNodeValue) {
// console.log(results)
if (this.type == 'xPath') {
result[this.name] = this.xpath
result[this.name] = xpath
} else if (this.type == '文本') {
result[this.name] = results.singleNodeValue['textContent'];
} else {
result[this.name] = results.singleNodeValue[this.type];
}
......
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