Skip to content

V
Vue-WebDriver
Commit fa9ffd96 by 郁子恒
Options

优化采集表格

parent 58d6d9db
Showing with 86 additions and 18 deletions
src/components/collectionForm.vue
......@@ -8,7 +8,7 @@
</div>
<!-- 全部表格信息 -->
<div style="overflow: auto;height: 230px;" :style="{ width: widthResize + 'px' }">
<vxe-table key="1" :data="SelectFormData" ref="xTableColumn" border class="mytable-scrollbar" height="220" auto-resize style="margin-bottom: 5px;">
<vxe-table :data="SelectFormData" ref="xTableColumn" border class="mytable-scrollbar" height="220" auto-resize style="margin-bottom: 5px;" @current-change="currentChangeEvent" highlight-hover-row highlight-current-row>
<vxe-column field="" min-width="150">
<template #header>
<span style="font-size: 13px;">属性名</span>
......@@ -69,7 +69,26 @@ export default {
this.SelectFormData = this.activedAction.formList
}
},
mounted () { },
mounted () {
let _this = this
document.addEventListener('click', function handleClick (event) {
// 如果点击的不是当前高亮的元素，移除高亮
if (event.target !== window.currentlyHighlighted) {
if (window.currentlyHighlighted) {
window.currentlyHighlighted.style.backgroundColor = '';
}
window.currentlyHighlighted = null;
}
if (_this.selectedRow == null) return
if (event.target.id == 'addImg' || event.target.id == 'addButton') {
_this.setElementBackgroundColor(_this.selectedRow.xpath, '');
_this.selectedRow = null;
document.removeEventListener('click', handleClick);
return;
// 移除监听器的代码已经移动到函数开头
}
});
},
watch: {
SelectFormData: {
handler (newVal) {
......@@ -93,6 +112,14 @@ export default {
!== row._X_ROW_KEY
)
_this.SelectFormData = _this.SelectFormData.filter(xpath => xpath.xpath !== row.xpath);
// 先将删除的元素清空,并且将背景色还原
_this.setElementBackgroundColor(row.xpath, '')
// 将表格最后一个选中，添加背景色
if (_this.SelectFormData.length > 0) {
_this.$refs.xTableColumn.setCurrentRow(_this.SelectFormData[_this.SelectFormData.length - 1])
_this.setElementBackgroundColor(_this.SelectFormData[_this.SelectFormData.length - 1].xpath, 'orange')
}
if (_this.table == null) return
},
// 定义事件处理函数
contextMenuHandler (event) {
......@@ -173,8 +200,37 @@ export default {
info.name = 'ID' + _this.index++
info.type = ''
_this.SelectFormData.push(info)
// 将新加入的tableData添加高亮
_this.$refs.xTableColumn.setCurrentRow(_this.SelectFormData[_this.SelectFormData.length - 1])
// 移除先前元素的背景色（如果有）
if (window.currentlyHighlighted) {
window.currentlyHighlighted.style.backgroundColor = '';
}
// 更新背景色并保存当前元素
event.target.style.backgroundColor = 'orange';
window.currentlyHighlighted = event.target;
console.log(_this.SelectFormData)
},
// 行选中事件
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')
}
},
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;
}
},
// 获取xpath
getElementXPath (element) {
let _this = this
......@@ -219,7 +275,7 @@ export default {
.vxe-table--render-default .vxe-body--column,
.vxe-table--render-default .vxe-footer--column,
.vxe-table--render-default .vxe-header--column {
line-height: 15px;
line-height: 25px;
text-align: center;
}
......
src/components/collectionTable.vue
......@@ -21,28 +21,34 @@
<el-button size="mini" style="width: 74px;height: 20px;margin-right: 7px;" @click="getTable" v-if="isSelectTable">获取表格信息</el-button>
</div>
<!-- 全部表格信息 -->
<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;" @current-change="currentChangeEvent" highlight-hover-row highlight-current-row>
<vxe-column field="" title="列名" min-width="150">
<div style="overflow: auto;height: 230px;" :style="{ width: widthResize + 'px' }">
<vxe-table :data="SelectTableData" ref="xTableColumn" border class="mytable-scrollbar" height="220" v-if="isSelectTable" auto-resize style="margin-bottom: 5px;" @current-change="currentChangeEvent" highlight-hover-row highlight-current-row>
<vxe-column field="" min-width="150">
<template #header>
<span style="font-size: 13px;">列名</span>
</template>
<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="" min-width="150">
<template #header>
<span style="font-size: 13px;">属性名</span>
</template>
<template v-slot="{ row }">
<div style="display: flex;flex-direction: column;">
<!-- <span>选中内容:{{ row.contentText }}</span> -->
<vxe-input v-model="row.name" placeholder="请填写属性名" size="mini"></vxe-input>
</div>
</template>
</vxe-column>
<vxe-column field="" title="值类型" min-width="170">
<vxe-column field="" min-width="170">
<template #header>
<span style="font-size: 13px;">值类型</span>
</template>
<template v-slot="{ row }">
<div style="display: flex;flex-direction: column;">
<!-- <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.label" :label="num.value"></el-option>
</el-select>
......@@ -50,11 +56,14 @@
</div>
</template>
</vxe-column>
<vxe-column title="操作" min-width="70" fixed="right">
<vxe-column min-width="70" fixed="right">
<template #header>
<span style="font-size: 13px;">操作</span>
</template>
<template #default="{ row }">
<el-tooltip class="item" effect="dark" content="删除" placement="top">
<!-- <el-tooltip class="item" effect="dark" content="删除" placement="top"> -->
<img style="width: 38px;height: 28px;vertical-align: bottom;cursor: pointer;" src="../assets/close.svg" @click="columnDelete(row)">
</el-tooltip>
<!-- </el-tooltip> -->
</template>
</vxe-column>
</vxe-table>
......@@ -111,6 +120,7 @@ export default {
}
window.currentlyHighlighted = null;
}
if (_this.selectedRow == null) return
if (event.target.id == 'addImg' || event.target.id == 'addButton') {
_this.setElementBackgroundColor(_this.selectedRow.xpath, '');
_this.selectedRow = null;
......@@ -373,8 +383,8 @@ export default {
},
}
</script>
<style>
.vxe-select>.vxe-input {
<style >
/* .vxe-select>.vxe-input {
width: 120px !important;
}
......@@ -389,6 +399,7 @@ export default {
.vxe-table--render-default .vxe-body--column:not(.col--ellipsis),
.vxe-table--render-default .vxe-footer--column:not(.col--ellipsis),
.vxe-table--render-default .vxe-header--column:not(.col--ellipsis) {
padding: 0 !important;
}
padding-top: 0px !important;
padding-bottom: 0px !important;
} */
</style>
\ No newline at end of file
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