Skip to content

V
Vue-WebDriver
Commit ade9fe55 by 郁子恒
Options

解决合并冲突

parent 422f0de8
Showing with 332 additions and 418 deletions
src/App.vue
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
</div> </div>
<div style="display: flex; flex-direction: row; justify-content: space-around; width: 170px;"> <div style="display: flex; flex-direction: row; justify-content: space-around; width: 170px;">
<el-button size="mini" style="width: 50px;height: 20px;">导入任务</el-button> <el-button size="mini" style="width: 50px;height: 20px;">导入任务</el-button>
<el-button size="mini" style="width: 50px;height: 20px;" @click="submitPlan">导出任务</el-button> <el-button size="mini" style="width: 50px;height: 20px;" @click="exportJson">导出任务</el-button>
<el-button size="mini" style="width: 50px;height: 20px;">保存任务</el-button> <el-button size="mini" style="width: 50px;height: 20px;">保存任务</el-button>
</div> </div>
</div> </div>
...@@ -34,7 +34,9 @@ ...@@ -34,7 +34,9 @@
<span>动作集合:</span> <span>动作集合:</span>
<div class="scroll-container" @wheel="handleScroll" style="width: 325px;"> <div class="scroll-container" @wheel="handleScroll" style="width: 325px;">
<div class="scroll-content" style="margin-left: 10px;"> <div class="scroll-content" style="margin-left: 10px;">
<span id="Breadcrumb" @click="onBreadcrumb(item)" v-for="item in actionAll" :key="item.Kvid" :style="{ color: item.Kvid == parentKvid ? '#68C23A!important' : '#409EFF' }">{{ item.name }}></span> <span id="Breadcrumb" @click="onBreadcrumb(item)" v-for="item in currentActionsParents" :key="item.tagId" :style="{ color: item == currentAction ? '#68C23A!important' : '#409EFF' }">{{
item.Name
}}></span>
</div> </div>
</div> </div>
</div> </div>
...@@ -47,55 +49,61 @@ ...@@ -47,55 +49,61 @@
<div style="display: flex;align-items: flex-start;justify-content: space-between;width: 460px;"> <div style="display: flex;align-items: flex-start;justify-content: space-between;width: 460px;">
<!-- 动作标签 --> <!-- 动作标签 -->
<div style="margin-bottom: 5px;margin-right: 1px;white-space: wrap;display: flex;width: 88%;"> <div style="margin-bottom: 5px;margin-right: 1px;white-space: wrap;display: flex;width: 88%;">
<draggable v-model="treeNode" chosenClass="chosen" forceFallback="true" group="people" animation="1000" @start="onStart" @end="onEnd" v-if="isChildrenTree == false"> <draggable v-model="currentAction.actions" chosenClass="chosen" forceFallback="true" group="people" animation="1000" @start="onStart" @end="onEnd" v-if="isChildrenTree == false">
<transition-group> <transition-group>
<el-tag class="boxtags" :key="tag.tagId" v-for="(tag, index) in treeNode" @click="selectTag(tag)" :style="{ backgroundColor: tag.Kvid == Kvid ? '#68C23A!important' : '#409EFF' }"> <el-tag class="boxtags" v-for="(action, index) in currentAction.actions" @click="selectTag(action)" :style="{ backgroundColor: action == activedAction ? '#68C23A!important' : '#409EFF' }" :key="action.tagId">
<div style="display: flex;align-items: center;height: 25px;position: relative;"> <div style="display: flex;align-items: center;height: 25px;position: relative;">
<span style="min-width: 40px;display: flex;align-items: center;"> <span style="min-width: 40px;display: flex;align-items: center;">
<div class="circle">{{ index + 1 }}</div> <div class="circle">{{ index + 1 }}</div>
<span style="margin-left: 2px;">{{ tag.actionName }}</span> <span style="margin-left: 2px;">{{ action.Name }}</span>
</span> </span>
<img id="closeimg" @click="handleClose(tag)" style="width: 17px;position: absolute;top: -6px;right: -16px;" src="./assets/close.svg"> <img id="closeimg" @click="handleClose(action)" style="width: 17px;position: absolute;top: -6px;right: -16px;" src="./assets/close.svg">
</div> </div>
</el-tag> </el-tag>
</transition-group> </transition-group>
</draggable> </draggable>
<draggable v-model="childrenTreeNode" chosenClass="chosen" forceFallback="true" group="people" animation="1000" @start="onStart" @end="onEnd" v-if="isChildrenTree == true"> <!-- <draggable v-model="childrenTreeNode" chosenClass="chosen" forceFallback="true" group="people"
animation="1000" @start="onStart" @end="onEnd" v-if="isChildrenTree == true">
<transition-group> <transition-group>
<el-tag class="boxtags" :key="item.tagId" v-for="(item, index) in childrenTreeNode" @click="selectTag(item)" :style="{ backgroundColor: item.Kvid == Kvid ? '#68C23A!important' : '#409EFF' }"> <el-tag class="boxtags" :key="index2" v-for="(item, index2) in childrenTreeNode"
@click="selectTag(item)"
:style="{ backgroundColor: item.Kvid == Kvid ? '#68C23A!important' : '#409EFF' }">
<div style="display: flex;align-items: center;height: 25px;position: relative;"> <div style="display: flex;align-items: center;height: 25px;position: relative;">
<span style="min-width: 40px;display: flex;align-items: center;"> <span style="min-width: 40px;display: flex;align-items: center;">
<div class="circle">{{ index + 1 }}</div> <div class="circle">{{ index2 + 1 }}</div>
<span style="margin-left: 2px;">{{ item.actionName }}</span> <span style="margin-left: 2px;">{{ item.actionName }}</span>
</span> </span>
<img id="closeimg" @click="handleClose(item)" style="width: 17px;position: absolute;top: -6px;right: -16px;" src="./assets/close.svg"> <img id="closeimg" @click="handleClose(item)"
style="width: 17px;position: absolute;top: -6px;right: -16px;"
src="./assets/close.svg">
</div> </div>
</el-tag> </el-tag>
</transition-group> </transition-group>
</draggable> </draggable> -->
</div> </div>
</div> </div>
<el-divider></el-divider> <el-divider></el-divider>
<!-- 容器配置 --> <!-- 容器配置 -->
<div v-if="isShowAction"> <div v-if="isShowAction">
<div style="height: 35px;display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid #888888;"> <div style="height: 35px;display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid #888888;">
<div style="width: 211px;display: flex;align-items: center;margin-left: 15px;"> <div style="width: 211px;display: flex;align-items: center;">
<span style="width: 90px;">动作名称:</span> <span style="width: 90px;">动作名称:</span>
<el-input class="input-new-tag dongzuo" v-model="actionName" size="small" placeholder="请输入动作名称"> <el-input class="input-new-tag dongzuo" v-model="activedAction.Name" size="small" placeholder="请输入动作名称">
</el-input> </el-input>
</div> </div>
<div style="margin-right: 15px;"> <div style="margin-right: 15px;">
<span style="width: 90px;">动作类型:</span> <span style="width: 90px;">动作类型:</span>
<el-select id="eventType" name="eventType" v-model="actionType" placeholder="请选择类型" @change="handleChange" filterable remote> <el-select id="eventType" name="eventType" v-model="activedAction.Alias" placeholder="请选择类型" @change="handleChange" filterable remote>
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option> </el-option>
</el-select> </el-select>
</div> </div>
</div> </div>
<div style="margin-left: 15px;margin-top: 10px;" v-if="actionType == 'actions'"> <div style="margin-left: 15px;margin-top: 10px;" v-if="activedAction.Alias == 'actions'">
<el-button @click="toActions">进入容器</el-button> <el-button @click="toActions">进入容器</el-button>
</div> </div>
<component style="height: 345px;width: 460px;" :is="dynamicComponent" :actionName="actionName" :actionType="actionType" @dataChanged="handleDataChange" :dynamicTagObj="dynamicTagObj" v-if="actionType !== ''"></component> <component :is="dynamicComponent" @dataChanged="handleDataChange" :dynamicTagObj="activedAction" v-if="activedAction.Alias !== ''">
</component>
</div> </div>
</div> </div>
</div> </div>
...@@ -105,13 +113,20 @@ ...@@ -105,13 +113,20 @@
// 导出json文件使用的库 // 导出json文件使用的库
import { saveAs } from 'file-saver'; import { saveAs } from 'file-saver';
import draggable from 'vuedraggable' import draggable from 'vuedraggable'
import { pageNavigate, elClick, sysSleep, elOutput, loopClick, elInput, pageJavascript, collectSingleElements, pageClose, mouseMove, collectionTable, submit, actions } from './components/index.js' import { pageNavigate, elClick, sysSleep, elOutput, loopClick, onInput, collectSingleElements, pageClose, mouseMove, pageJavascipt, collectionTable, submit, actions } from './components/index.js'
export default { export default {
name: 'App', name: 'App',
components: { pageNavigate, elClick, sysSleep, elOutput, loopClick, elInput, pageJavascript, collectSingleElements, pageClose, mouseMove, collectionTable, submit, actions, draggable, }, components: { pageNavigate, elClick, sysSleep, draggable, elOutput, loopClick, onInput, collectSingleElements, pageClose, mouseMove, pageJavascipt, collectionTable, submit, actions },
props: {}, props: {},
data () { data () {
return { return {
rootAction: {
Name: '根目录',
actions: []
},//root action
currentAction: null,//show the path in the bar
activedAction: null,//current actived action
currentActionsParents: [],
subData: [], subData: [],
state: false, state: false,
dynamicComponent: null, dynamicComponent: null,
...@@ -123,24 +138,21 @@ export default { ...@@ -123,24 +138,21 @@ export default {
winHeight: window.outerHeight, winHeight: window.outerHeight,
isShowAction: false, isShowAction: false,
options: [{ options: [{
value: 'page.navigate', value: 'page.Navigate',
label: '页面跳转' label: '页面跳转'
}, { }, {
value: 'el.click', value: 'elClick',
label: '点击' label: '点击'
}, { }, {
value: 'sys.sleep', value: 'sysSleep',
label: '等待' label: '等待'
}, { }, {
value: 'el.input', value: 'el.input',
label: '输入' label: '输入'
}, { }, {
value: 'el.output', value: 'elOutput',
label: '取值' label: '取值'
}, { }, {
value: 'page.javascipt',
label: '脚本执行'
}, {
value: 'collectionTable', value: 'collectionTable',
label: '采集表' label: '采集表'
}, { }, {
...@@ -156,6 +168,9 @@ export default { ...@@ -156,6 +168,9 @@ export default {
value: 'mouseMove', value: 'mouseMove',
label: '鼠标移动' label: '鼠标移动'
}, { }, {
value: 'pageJavascipt',
label: '脚本执行'
}, {
value: 'submit', value: 'submit',
label: '提交' label: '提交'
}, { }, {
...@@ -174,45 +189,24 @@ export default { ...@@ -174,45 +189,24 @@ export default {
isChildrenTree: false, isChildrenTree: false,
treeNode: [], treeNode: [],
actionAll: [{ actionAll: [{
name: '根目录', Name: '根目录',
Kvid: 123123, Kvid: 123123,
actions: [] actions: []
}], }],
actionConfigs: {}, actionConfigs: {},
selectTagItem: {}
} }
}, },
created () { }, created () {
this.currentAction = this.rootAction;
this.currentActionsParents = [this.rootAction];
},
mounted () { mounted () {
this.$nextTick(() => { this.$nextTick(() => {
window.addEventListener('resize', this.onResize); window.addEventListener('resize', this.onResize);
}); });
this.$watch('dynamicTagObj.actionName', (newVal, oldVal) => {
this.dynamicTagObj.actionName = newVal
});
}, },
watch: { watch: {
actionName (newVal, oldVal) {
// 在输入值发生变化时触发
if (newVal !== oldVal) {
const targetObject = this.dynamicTags.find(obj => obj.tagId === this.dynamicTagObj.tagId);
if (targetObject) {
if (newVal == undefined) return
// 找到匹配的对象
targetObject.actionName = newVal; // 设置新的id值
this.dynamicTagObj.actionName = newVal
// console.log(this.dynamicTags)
} else {
// 未找到匹配的对象
console.log("未找到匹配的对象");
}
}
// 可以在这里执行自定义逻辑
},
treeNode: { treeNode: {
handler (newVal, oldVal) { handler (newVal, oldVal) {
// console.log('数组变化了', newVal); // console.log('数组变化了', newVal);
...@@ -225,6 +219,12 @@ export default { ...@@ -225,6 +219,12 @@ export default {
} }
}, },
deep: true deep: true
},
"currentAction.actions": {
handler (newVal, oldVal) {
console.log(newVal)
},
deep: true
} }
}, },
computed: {}, computed: {},
...@@ -243,21 +243,21 @@ export default { ...@@ -243,21 +243,21 @@ export default {
// 组件配置 // 组件配置
loadComponent (componentName) { loadComponent (componentName) {
switch (componentName) { switch (componentName) {
case 'page.navigate': case 'page.Navigate':
this.dynamicComponent = pageNavigate this.dynamicComponent = pageNavigate
break; break;
case 'el.click': case 'elClick':
this.dynamicComponent = elClick this.dynamicComponent = elClick
break; break;
case 'sys.sleep': case 'sysSleep':
this.dynamicComponent = sysSleep this.dynamicComponent = sysSleep
break; break;
case 'el.input': case 'elOutput':
this.dynamicComponent = elInput
break;
case 'el.output':
this.dynamicComponent = elOutput this.dynamicComponent = elOutput
break; break;
case 'el.input':
this.dynamicComponent = onInput
break;
case 'loopClick': case 'loopClick':
this.dynamicComponent = loopClick this.dynamicComponent = loopClick
break; break;
...@@ -270,8 +270,8 @@ export default { ...@@ -270,8 +270,8 @@ export default {
case 'mouseMove': case 'mouseMove':
this.dynamicComponent = mouseMove this.dynamicComponent = mouseMove
break; break;
case 'page.javascipt': case 'pageJavascipt':
this.dynamicComponent = pageJavascript this.dynamicComponent = pageJavascipt
break; break;
case 'collectionTable': case 'collectionTable':
this.dynamicComponent = collectionTable this.dynamicComponent = collectionTable
...@@ -288,8 +288,7 @@ export default { ...@@ -288,8 +288,7 @@ export default {
}, },
// 接收子组件信息 // 接收子组件信息
handleDataChange (newData) { handleDataChange (newData) {
// this.subData = [newData]; this.subData = [newData];
this.subData.push(newData);
// console.log(this.subData); // console.log(this.subData);
// console.log('接收到的数据:', newData); // console.log('接收到的数据:', newData);
const targetObject = this.dynamicTags.find(obj => obj.Kvid === this.dynamicTagObj.Kvid); const targetObject = this.dynamicTags.find(obj => obj.Kvid === this.dynamicTagObj.Kvid);
...@@ -306,128 +305,47 @@ export default { ...@@ -306,128 +305,47 @@ export default {
} }
console.log(this.treeNode) console.log(this.treeNode)
}, },
initActionParent (action) {
if (action.actions === null || action.actions === undefined || action.actions.length === 0) return;
action.actions.forEach(a => {
a.parent = action;
this.initActionParent(a);
});
},
getActionParents (action) {
let parents = [];
parents.push(action);
while (action.parent) {
parents.push(action.parent);
action = action.parent;
}
return parents.reverse();
},
createNewAction (parent) {
let rtns = {};
rtns.Name = "新建动作";
rtns.parent = parent;
rtns.tagId = this.tagId++;
parent.actions = parent.actions || [];
parent.actions.push(rtns);
return rtns;
},
// 新建动作 // 新建动作
newAction () { newAction () {
this.isShowAction = true; this.actionType = '';
this.dynamicTagObj = {} let action = this.createNewAction(this.currentAction);
this.actionName = "新建动作" action.Alias = this.actionType;
this.actionType = "" this.activedAction = action;
this.Kvid = null this.$forceUpdate();
this.selectTagItem = {} console.log(this.currentAction.actions);
let obj = {}
obj.taskName = this.taskName
obj.taskAddress = this.taskAddress
this.dynamicTagObj.actionName = '新建动作'
this.dynamicTagObj.actionType = this.actionType
this.dynamicTagObj.tagId = this.tagId++
this.Kvid = Math.floor(Math.random() * 100000001);
this.dynamicTagObj.actionConfigs = this.actionConfigs
this.dynamicTagObj.Kvid = this.Kvid
if (this.parentKvid != null) {
this.dynamicTagObj.parentKvid = this.parentKvid
this.isChildrenTree = true
} else {
this.isChildrenTree = false
}
obj.dynamicTags = []
obj.dynamicTags.push(this.dynamicTagObj)
this.dynamicTags.push(this.dynamicTagObj)
this.addDataToParent(this.treeNode, this.parentKvid, this.dynamicTagObj, this.isChildrenTree)
// 根目录时新建动作
if (this.parentKvid == null) {
this.childrenTreeNode = []
for (let i = 0; i < this.treeNode.length; i++) {
this.childrenTreeNode.push(this.treeNode[i])
}
this.isChildrenTree = false
}
}, },
// 进入容器 // 进入容器
toActions () { toActions () {
let _this = this let _this = this;
_this.currentAction = _this.activedAction;
_this.currentActionsParents = _this.getActionParents(_this.currentAction);
_this.isShowAction = false _this.isShowAction = false
if (_this.actionType == 'actions') {
if (Object.keys(_this.selectTagItem).length == 0) {
_this.parentKvid = _this.Kvid
}
let activeItem = _this.findObjectByKvid(_this.treeNode, _this.Kvid);
_this.childrenTreeNode = []
_this.isChildrenTree = true
let activeParentItem = _this.findObjectByKvid(_this.treeNode, activeItem.parentKvid);
if (activeParentItem == null) {
//根节点再次进容器
if (Object.keys(_this.selectTagItem).length !== 0) {
_this.Kvid = _this.selectTagItem.Kvid
let obj = {}
obj.name = _this.selectTagItem.actionName
obj.Kvid = _this.selectTagItem.Kvid
obj.actions = []
// console.log(_this.treeNode)
for (let i = 0; i < _this.treeNode.length; i++) {
_this.actionAll[0].actions.push(_this.treeNode[i])
}
_this.actionAll.push(obj)
_this.findOrPushObject(_this.actionAll[0].actions, obj)
_this.childrenTreeNode = []
_this.isChildrenTree = true
if (_this.selectTagItem.actions != undefined && _this.selectTagItem.actions.length > 0) {
_this.childrenTreeNode = []
for (let i = 0; i < _this.selectTagItem.actions.length; i++) {
_this.childrenTreeNode.push(_this.selectTagItem.actions[i])
}
_this.isChildrenTree = true
}
} else {
let obj = {}
obj.name = activeItem.actionName
obj.Kvid = activeItem.Kvid
obj.actions = []
// console.log(_this.treeNode)
for (let i = 0; i < _this.treeNode.length; i++) {
_this.actionAll[0].actions.push(_this.treeNode[i])
}
_this.actionAll.push(obj)
_this.findOrPushObject(_this.actionAll[0].actions, obj)
}
} else {
// 子节点再次进入容器
if (Object.keys(_this.selectTagItem).length !== 0) {
_this.childrenTreeNode = []
let obj = {}
obj.name = _this.selectTagItem.actionName
obj.Kvid = _this.selectTagItem.Kvid
obj.actions = []
for (let i = 0; i < _this.selectTagItem.actions.length; i++) {
obj.actions.push(_this.selectTagItem.actions[i])
_this.childrenTreeNode.push(_this.selectTagItem.actions[i])
}
_this.findOrPushObject(_this.actionAll, obj)
_this.isChildrenTree = true
if (_this.selectTagItem.actions != undefined && _this.selectTagItem.actions.length > 0) {
_this.childrenTreeNode = []
for (let i = 0; i < _this.selectTagItem.actions.length; i++) {
_this.childrenTreeNode.push(_this.selectTagItem.actions[i])
}
_this.isChildrenTree = true
}
} else {
let obj = {}
obj.name = activeItem.actionName
obj.Kvid = activeItem.Kvid
obj.actions = []
activeItem.actions = []
for (let i = 0; i < activeItem.actions.length; i++) {
obj.actions.push(activeItem.actions[i])
}
_this.childrenTreeNode = obj.actions
_this.findOrPushObject(_this.actionAll, obj)
}
}
} else {
this.parentKvid = null
}
}, },
// 动作下拉框 // 动作下拉框
handleChange (val) { handleChange (val) {
...@@ -435,116 +353,29 @@ export default { ...@@ -435,116 +353,29 @@ export default {
let _this = this let _this = this
// 在输入值发生变化时触发 // 在输入值发生变化时触发
if (val) { if (val) {
const targetObject = this.dynamicTags.find(obj => obj.tagId === this.dynamicTagObj.tagId); _this.activedAction.Alias = val;
if (targetObject) { _this.loadComponent(val);
// 找到匹配的对象 _this.$forceUpdate();
targetObject.actionType = val; // 设置新的id值
_this.dynamicTagObj.actionType = val
_this.loadComponent(val)
} else {
// 未找到匹配的对象
console.log("未找到匹配的对象");
}
} }
}, },
// 导航标签 // 导航标签
onBreadcrumb (item) { onBreadcrumb (item) {
this.isShowAction = false this.currentAction = item;
this.actionName = item.actionName this.currentActionsParents = this.getActionParents(this.currentAction);
this.actionType = item.actionType
this.deleteObjectsAfterKvid(this.actionAll, item.Kvid)
let activeItem = this.findObjectByKvid(this.treeNode, item.Kvid);
if (activeItem == null) {
this.childrenTreeNode = this.treeNode
this.isChildrenTree = false
this.parentKvid = null
// console.log(this.treeNode)
} else {
this.childrenTreeNode = []
this.childrenTreeNode = activeItem.actions
this.isChildrenTree = true
this.parentKvid = item.Kvid
this.isShowAction = false
}
// console.log()
}, },
// 单击标签 // 单击标签
selectTag (item) { selectTag (item) {
// this.parentTree = item this.activedAction = item;
// console.log(item) this.isShowAction = true
let _this = this
_this.selectTagItem = item
if (item.actionType == 'actions') {
if (_this.parentKvid == null && item.parentKvid == undefined) {
_this.parentKvid = item.Kvid
_this.actionType = item.actionType
_this.actionName = item.actionName
_this.isShowAction = true
} else {
_this.parentKvid = item.Kvid
_this.actionName = item.actionName
_this.actionType = item.actionType
_this.isShowAction = true
}
} else {
_this.actionName = item.actionName
_this.actionType = item.actionType
_this.isShowAction = true
}
_this.Kvid = item.Kvid
_this.dynamicTagObj = item
// 点击切换组件 // 点击切换组件
_this.loadComponent(item.actionType) this.loadComponent(item.Alias)
}, },
// 删除标签 // 删除标签
handleClose (tag) { handleClose (tag) {
let _this = this let _this = this
if (_this.childrenTreeNode.length > 0 && _this.isChildrenTree == true) {
let filteredArray = _this.childrenTreeNode.filter(item => item.Kvid !== tag.Kvid); _this.currentAction.actions.splice(_this.currentAction.actions.indexOf(tag), 1);
_this.childrenTreeNode = [] console.log(this.rootAction.actions)
for (let i = 0; i < filteredArray.length; i++) {
_this.childrenTreeNode.push(filteredArray[i])
}
let activeItem = _this.findObjectByKvid(_this.actionAll[0].actions, tag.Kvid);
let activeParentItem = null
// 根目录下处理
if (activeItem !== null) {
activeParentItem = _this.findObjectByKvid(_this.actionAll[0].actions, activeItem.parentKvid);
} else {
let filteredArray = _this.treeNode.filter(item => item.Kvid !== tag.Kvid);
_this.treeNode = []
for (let i = 0; i < filteredArray.length; i++) {
_this.treeNode.push(filteredArray[i])
}
}
if (activeParentItem == null) {
let filteredArray = _this.childrenTreeNode.filter(item => item.Kvid !== tag.Kvid);
_this.childrenTreeNode = []
for (let i = 0; i < filteredArray.length; i++) {
_this.childrenTreeNode.push(filteredArray[i])
}
} else {
let filteredArray = activeParentItem.actions.filter(item => item.Kvid !== tag.Kvid);
activeParentItem.actions = []
for (let i = 0; i < filteredArray.length; i++) {
activeParentItem.actions.push(filteredArray[i])
}
}
} else if (_this.treeNode.length > 0 && _this.isChildrenTree == false) {
let filteredArray = _this.treeNode.filter(item => item.Kvid !== tag.Kvid);
_this.treeNode = []
for (let i = 0; i < filteredArray.length; i++) {
_this.treeNode.push(filteredArray[i])
}
let activeItem = _this.findObjectByKvid(_this.childrenTreeNode, tag.parentKvid);
if (activeItem == null) {
let filteredArray = _this.childrenTreeNode.filter(item => item.Kvid !== tag.Kvid);
_this.childrenTreeNode = []
for (let i = 0; i < filteredArray.length; i++) {
_this.childrenTreeNode.push(filteredArray[i])
}
}
}
_this.isShowAction = false _this.isShowAction = false
}, },
// 根据 Kvid 找到对应的对象，并将匹配到的对象后面的所有对象数据删除 // 根据 Kvid 找到对应的对象，并将匹配到的对象后面的所有对象数据删除
...@@ -593,81 +424,22 @@ export default { ...@@ -593,81 +424,22 @@ export default {
// console.error('Parent node not found for kvid: ' + parentKvid); // console.error('Parent node not found for kvid: ' + parentKvid);
tree.push(newData); tree.push(newData);
}, },
// 返回上一级目录
goback () { importJson () {
this.parentKvid = null
this.childrenTreeNode = []
let activeItem = this.findObjectByKvid(this.treeNode, this.Kvid);
let activeParentItem = this.findObjectByKvid(this.treeNode, activeItem.parentKvid);
let activeParentsItem = this.findObjectByKvid(this.treeNode, activeParentItem.parentKvid);
if (activeParentsItem == null) {
this.childrenTreeNode = this.treeNode
} else {
for (let i = 0; i < activeParentsItem.actions.length; i++) {
this.childrenTreeNode.push(activeParentsItem.actions[i])
}
this.Kvid = activeParentItem.Kvid
}
}, },
// 保存任务 //导出json
submitPlan (formName) { exportJson () {
this.isShowAction = true // if (key == "privateProperty1") return undefined; else if (key == "privateProperty2") return undefined; else return value;
// console.log(this.subData) let replacer = function (key, value) { if (key == "parent" || key == "tagId") return undefined; else return value; }
// console.log(this.treeNode) let jsonString = JSON.stringify(this.rootAction.actions, replacer, 2);
// 将JSON对象转换为JSON字符串
const jsonString = JSON.stringify(this.subData, null, 2);
// const jsonString = JSON.stringify(this.treeNode, null, 2);
// 创建一个Blob对象 // 创建一个Blob对象
const blob = new Blob([jsonString], { type: 'application/json' }); let blob = new Blob([jsonString], { type: 'application/json' });
// 使用file-saver库保存文件 // 使用file-saver库保存文件
saveAs(blob, 'exported_data.json'); saveAs(blob, this.taskName + '.json');
}, console.log(jsonString);
// 根据parentKvid找当前节点
findHierarchyByParentKvid (tree, parentKvid) {
let _this = this
for (var i = 0; i < tree.length; i++) {
var node = tree[i];
if (node.Kvid === parentKvid) {
return [node]; // 找到匹配的节点，返回包含该节点的数组
}
if (node.actions && node.actions.length > 0) {
var result = _this.findHierarchyByParentKvid(node.actions, parentKvid);
if (result.length > 0) {
return node.actions; // 将当前节点与子级层级连接起来
}
}
}
return []; // 未找到匹配的节点，返回空数组
},
// 根据Kvid找节点
findObjectByKvid (array, kvid) {
let _this = this
for (var i = 0; i < array.length; i++) {
var obj = array[i];
if (obj.Kvid === kvid) {
return obj; // 如果当前对象的 kvid 等于目标 kvid，返回当前对象
}
if (obj.actions && obj.actions.length > 0) {
var result = _this.findObjectByKvid(obj.actions, kvid); // 递归查找子级数组中的对象
if (result) {
return result; // 如果在子级数组中找到了目标对象，返回结果
}
}
}
return null; // 如果没有找到目标对象，返回 null
},
// 根据 Kvid 匹配，如果有相同的就返回，没有就 push
findOrPushObject (dataArray, newObj) {
const existingObj = dataArray.find(obj => obj.Kvid === newObj.Kvid);
if (existingObj) {
// 已经存在相同的 Kvid，返回该对象
return existingObj;
} else {
// 不存在相同的 Kvid，将新对象推送到数组
this.actionAll.push(newObj);
return newObj;
}
}, },
//开始拖拽事件-标签拖拽 //开始拖拽事件-标签拖拽
onStart () { onStart () {
this.drag = true; this.drag = true;
...@@ -676,21 +448,13 @@ export default { ...@@ -676,21 +448,13 @@ export default {
//拖拽结束事件 //拖拽结束事件
onEnd () { onEnd () {
this.drag = false; this.drag = false;
// console.log(this.treeNode)
// console.log(this.childrenTreeNode)
let activeParentItem = this.findObjectByKvid(this.treeNode, this.childrenTreeNode[0].parentKvid);
if (activeParentItem != null) {
activeParentItem.actions = []
for (let i = 0; i < this.childrenTreeNode.length; i++) {
activeParentItem.actions.push(this.childrenTreeNode[i])
}
}
// 拖拽完最终结果 // 拖拽完最终结果
console.log(this.treeNode) console.log(this.rootAction)
this.$forceUpdate();
}, },
onResize () { onResize () {
this.winHeight = window.outerHeight this.winHeight = window.outerHeight
}, }
}, },
} }
</script> </script>
......
src/components/collectionTable.vue
...@@ -3,42 +3,50 @@ ...@@ -3,42 +3,50 @@
<div style="height: 35px;margin-left: 15px;text-align: left;"> <div style="height: 35px;margin-left: 15px;text-align: left;">
<el-button size="mini" class="button-new-tag" @click="selectElement" v-if="isSelectTable">选择元素</el-button> <el-button size="mini" class="button-new-tag" @click="selectElement" v-if="isSelectTable">选择元素</el-button>
<el-button size="mini" class="button-new-tag" @click="columnBack" v-else>返回</el-button> <el-button size="mini" class="button-new-tag" @click="columnBack" v-else>返回</el-button>
<span style="margin-left: 80px;" v-if="isSelectTable">表名:</span> <vxe-input v-if="isSelectTable" v-model="tableName" placeholder="请填写表名" size="mini"></vxe-input> <span style="margin-left: 80px;" v-if="isSelectTable">表名:</span> <vxe-input v-if="isSelectTable"
v-model="tableName" placeholder="请填写表名" size="mini"></vxe-input>
</div> </div>
<!-- 全部表格信息 --> <!-- 全部表格信息 -->
<div style="overflow: auto;min-width: 460px;"> <div style="width: 498px;overflow: auto;">
<vxe-table :data="SelectTableData" ref="xTableColumn" border class="mytable-scrollbar" height="270" v-if="isSelectTable" auto-resize style="margin-bottom: 5px;"> <vxe-table :data="SelectTableData" ref="xTableColumn" border class="mytable-scrollbar" height="270"
<vxe-column field="" title="列名" min-width="150"> v-if="isSelectTable" auto-resize style="margin-bottom: 5px;">
<vxe-column field="" title="列名" width="150">
<template v-slot="{ row }"> <template v-slot="{ row }">
<!-- {{ row.text }} --> <!-- {{ row.text }} -->
<div style="display: flex;"> <span style="width: 68px;"></span> <vxe-input v-model="row.title" placeholder="请填写列名" size="mini"></vxe-input> <div style="display: flex;"> <span style="width: 68px;"></span> <vxe-input v-model="row.title"
placeholder="请填写列名" size="mini"></vxe-input>
</div> </div>
</template> </template>
</vxe-column> </vxe-column>
<vxe-column field="" title="属性名" min-width="150"> <vxe-column field="" title="属性名" width="150">
<template v-slot="{ row }"> <template v-slot="{ row }">
<div style="display: flex;"> <span style="width: 68px;"></span> <vxe-input v-model="row.name" placeholder="请填写属性名" size="mini"></vxe-input> <div style="display: flex;"> <span style="width: 68px;"></span> <vxe-input v-model="row.name"
placeholder="请填写属性名" size="mini"></vxe-input>
</div> </div>
</template> </template>
</vxe-column> </vxe-column>
<vxe-column field="" title="值类型" min-width="150"> <vxe-column field="" title="值类型" width="150">
<template v-slot="{ row }"> <template v-slot="{ row }">
<div style="display: flex;"> <span style="width: 68px;line-height: 12px;"> <div style="display: flex;"> <span style="width: 68px;line-height: 12px;">
</span> <vxe-select v-model="row.type" placeholder="选择值类型" placement="bottom" v-if="row.typeOptions.length > 1"> </span> <vxe-select v-model="row.type" placeholder="选择值类型" placement="bottom"
<vxe-option v-for="num in row.typeOptions" :key="num.xpath" :value="num.value" :label="num.label"></vxe-option> v-if="row.typeOptions.length > 1">
<vxe-option v-for="num in row.typeOptions" :key="num.xpath" :value="num.value"
:label="num.label"></vxe-option>
</vxe-select> </vxe-select>
<vxe-input v-model="row.type" :placeholder="row.typeOptions[0].label" size="mini" v-else disabled></vxe-input> <vxe-input v-model="row.type" :placeholder="row.typeOptions[0].label" size="mini" v-else
disabled></vxe-input>
</div> </div>
</template> </template>
</vxe-column> </vxe-column>
<vxe-column field="" title="当前选中文本值" min-width="150"> <vxe-column field="" title="当前选中文本值" width="150">
<template v-slot="{ row }"> <template v-slot="{ row }">
{{ row.contentText }} {{ row.contentText }}
</template> </template>
</vxe-column> </vxe-column>
<vxe-column title="操作" min-width="100"> <vxe-column title="操作" width="100">
<template #default="{ row }"> <template #default="{ row }">
<vxe-button status="danger" content="删除" @click="columnDelete(row)" style="margin-right: 20px;width: 50px;"></vxe-button> <vxe-button status="danger" content="删除" @click="columnDelete(row)"
style="margin-right: 20px;width: 50px;"></vxe-button>
</template> </template>
</vxe-column> </vxe-column>
</vxe-table> </vxe-table>
...@@ -116,7 +124,7 @@ export default { ...@@ -116,7 +124,7 @@ export default {
if (targetElement.tagName === 'A') { if (targetElement.tagName === 'A') {
// 链接 // 链接
info = { info = {
xPath: 'xPath', xPath:'xPath',
url: 'href', url: 'href',
text: 'textContent' text: 'textContent'
}; };
...@@ -131,7 +139,7 @@ export default { ...@@ -131,7 +139,7 @@ export default {
} else if (targetElement.tagName === 'IMG') { } else if (targetElement.tagName === 'IMG') {
// 图片 // 图片
info = { info = {
xPath: 'xPath', xPath:'xPath',
src: 'src', src: 'src',
alt: 'alt' alt: 'alt'
}; };
...@@ -162,7 +170,7 @@ export default { ...@@ -162,7 +170,7 @@ export default {
info.type = '' info.type = ''
_this.SelectTableData.push(info) _this.SelectTableData.push(info)
_this.Xpaths.push(info) _this.Xpaths.push(info)
// sdkTable------------------------------ // sdkTable--------------------------------------------------------------------------------------------------------
// 移除事件监听器 // 移除事件监听器
document.removeEventListener('contextmenu', contextMenuHandler); document.removeEventListener('contextmenu', contextMenuHandler);
_this.contextMenuListenerAdded = false; _this.contextMenuListenerAdded = false;
...@@ -231,7 +239,7 @@ export default { ...@@ -231,7 +239,7 @@ export default {
// 遍历 Xpaths // 遍历 Xpaths
for (let i = 0; i < _this.Xpaths.length; i++) { for (let i = 0; i < _this.Xpaths.length; i++) {
// _this.Xpaths[i].name = 'ID' + i // _this.Xpaths[i].name = 'ID' + i
_this.table.newCell(_this.Xpaths[i].xpath, _this.Xpaths[i].name, _this.Xpaths[i].type, _this.Xpaths[i].typeOptions, _this.Xpaths[i].title) _this.table.newCell(_this.Xpaths[i].xpath, _this.Xpaths[i].name, _this.Xpaths[i].type,_this.Xpaths[i].typeOptions, _this.Xpaths[i].title)
} }
_this.table.verify() _this.table.verify()
_this.table.name = _this.tableName _this.table.name = _this.tableName
...@@ -266,4 +274,7 @@ export default { ...@@ -266,4 +274,7 @@ export default {
.vxe-input--inner { .vxe-input--inner {
width: 120px !important; width: 120px !important;
} }
/* .vxe-table--render-default .vxe-body--column, .vxe-table--render-default .vxe-footer--column, .vxe-table--render-default .vxe-header--column{
line-height: 0px!important;
} */
</style> </style>
\ No newline at end of file
src/components/elInput.vue
<template> <template>
<div class="elInput"> <div class="onInput">
<!-- 操作按钮区域 --> <!-- 操作按钮区域 -->
<div style="width: 130px;height: 50px; margin-left: 15px; text-align: left;display: flex;align-items: center;justify-content: space-between;"> <div style="height: 35px; margin-left: 15px; text-align: left;">
<el-button size="small" class="button-new-tag" @click="selectElement">选择元素</el-button> <el-button size="small" class="button-new-tag" @click="selectElement">选择元素</el-button>
<el-button size="small" class="button-new-tag" @click="cancelSelect">取消选择</el-button> <el-button size="small" class="button-new-tag" @click="cancelSelect">取消选择</el-button>
</div> </div>
...@@ -14,19 +14,22 @@ ...@@ -14,19 +14,22 @@
<el-input v-model="actionConfig.Target.tagName" disabled></el-input> <el-input v-model="actionConfig.Target.tagName" disabled></el-input>
</el-form-item> </el-form-item>
<el-form-item label="文本内容"> <el-form-item label="文本内容">
<el-input v-model="actionConfig.InputValue"></el-input> <el-input v-model="actionConfig.Attributes.innerText"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="查询时间"> <el-form-item label="查询时间">
<el-input v-model="actionConfig.Target.Timeout"></el-input> <el-input v-model="actionConfig.Target.Timeout"></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-button size="small" class="button-new-tag" @click="submit" style="position: absolute;bottom: 10px;right: 15px;">提交信息</el-button> <!-- 提交按钮 -->
<div style="width: 100%; text-align: right;">
<el-button size="small" class="button-new-tag" @click="submit" style="margin-right: 5px;">提交信息</el-button>
</div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'elInput', name: 'onInput',
components: {}, components: {},
props: ['actionName', 'actionType', 'dynamicTagObj'], props: ['actionName', 'actionType', 'dynamicTagObj'],
data () { data () {
...@@ -35,12 +38,13 @@ export default { ...@@ -35,12 +38,13 @@ export default {
actionConfig: { actionConfig: {
"Target": { "Target": {
"Type": "xpath", "Type": "xpath",
"Selector": "", "Xpath": "",
"Timeout": 5000, "Timeout": 5000,
"tagName": '' "tagName": ''
}, },
"InputValue": "",//输入的内容 "Attributes": {
"Script": null, "innerText": ""
},
"Name": this.actionName, "Name": this.actionName,
"Alias": this.actionType "Alias": this.actionType
}, },
...@@ -49,8 +53,8 @@ export default { ...@@ -49,8 +53,8 @@ export default {
}, },
created () { created () {
console.log(this.dynamicTagObj); console.log(this.dynamicTagObj);
if (Object.keys(this.dynamicTagObj.actionConfigs).length == 0) return // if (Object.keys(this.dynamicTagObj.actionConfigs).length == 0) return
this.actionConfig = this.dynamicTagObj.actionConfigs // this.actionConfig = this.dynamicTagObj.actionConfigs
}, },
mounted () { }, mounted () { },
watch: {}, watch: {},
...@@ -75,7 +79,7 @@ export default { ...@@ -75,7 +79,7 @@ export default {
}; };
this.elementInfos = elementInfo; this.elementInfos = elementInfo;
console.log(event); console.log(event);
this.actionConfig.Target.Selector = elementInfo.Xpath; this.actionConfig.Target.Xpath = elementInfo.Xpath;
this.actionConfig.Target.tagName = elementInfo.TagName; this.actionConfig.Target.tagName = elementInfo.TagName;
this.selectDisabled = false; this.selectDisabled = false;
// 移除事件监听器 // 移除事件监听器
...@@ -114,14 +118,4 @@ export default { ...@@ -114,14 +118,4 @@ export default {
}, },
} }
</script> </script>
<style lang="scss" scoped></style>
<style scoped> \ No newline at end of file
.el-form-item {
margin-bottom: 0 !important;
}
.tooltips button {
width: 60px !important;
height: 30px !important;
}
</style>
\ No newline at end of file
src/components/elOutput.vue
<template> <template>
<div class="elOutput"> <div class="elOutput">
<!-- 操作按钮区域 --> <!-- 操作按钮区域 -->
<div style="width: 130px;height: 50px; margin-left: 15px; text-align: left;display: flex;align-items: center;justify-content: space-between;"> <div style="height: 35px; margin-left: 15px; text-align: left;">
<el-button size="small" class="button-new-tag" @click="selectElement">选择元素</el-button> <el-button size="small" class="button-new-tag" @click="selectElement">选择元素</el-button>
<el-button size="small" class="button-new-tag" @click="cancelSelect">取消选择</el-button> <el-button size="small" class="button-new-tag" @click="cancelSelect">取消选择</el-button>
</div> </div>
...@@ -18,7 +18,9 @@ ...@@ -18,7 +18,9 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- 提交按钮 --> <!-- 提交按钮 -->
<el-button size="small" class="button-new-tag" @click="submit" style="position: absolute;bottom: 10px;right: 15px;">提交信息</el-button> <div style="width: 100%; text-align: right;">
<el-button size="small" class="button-new-tag" @click="submit" style="margin-right: 5px;">提交信息</el-button>
</div>
</div> </div>
</template> </template>
...@@ -33,7 +35,7 @@ export default { ...@@ -33,7 +35,7 @@ export default {
actionConfig: { actionConfig: {
"Target": { "Target": {
"Type": "xpath", "Type": "xpath",
"Selector": "", "Xpath": "",
"Timeout": 5000 "Timeout": 5000
}, },
"Attributes": { "Attributes": {
...@@ -78,7 +80,7 @@ export default { ...@@ -78,7 +80,7 @@ export default {
Text: element.innerText Text: element.innerText
}; };
this.elementInfos = elementInfo; this.elementInfos = elementInfo;
this.actionConfig.Target.Selector = elementInfo.Xpath; this.actionConfig.Target.Xpath = elementInfo.Xpath;
this.actionConfig.Attributes.innerText = elementInfo.Text; this.actionConfig.Attributes.innerText = elementInfo.Text;
// 移除事件监听器 // 移除事件监听器
document.removeEventListener('contextmenu', this.contextMenuHandler); document.removeEventListener('contextmenu', this.contextMenuHandler);
......
src/components/elclick.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<!-- 点击菜单组件 --> <!-- 点击菜单组件 -->
<div class="elClick"> <div class="elClick">
<!-- 操作按钮区域 --> <!-- 操作按钮区域 -->
<div style="width: 130px;height: 50px; margin-left: 15px; text-align: left;display: flex;align-items: center;justify-content: space-between;"> <div style="height: 35px; margin-left: 15px; text-align: left;">
<el-button size="small" class="button-new-tag" @click="selectElement">选择元素</el-button> <el-button size="small" class="button-new-tag" @click="selectElement">选择元素</el-button>
<el-button size="small" class="button-new-tag" @click="cancelSelect">取消选择</el-button> <el-button size="small" class="button-new-tag" @click="cancelSelect">取消选择</el-button>
</div> </div>
...@@ -19,7 +19,9 @@ ...@@ -19,7 +19,9 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- 提交按钮 --> <!-- 提交按钮 -->
<el-button size="small" class="button-new-tag" @click="submit" style="position: absolute;bottom: 10px;right: 15px;">提交信息</el-button> <div style="width: 100%; text-align: right;">
<el-button size="small" class="button-new-tag" @click="submit" style="margin-right: 5px;">提交信息</el-button>
</div>
</div> </div>
</template> </template>
...@@ -27,7 +29,7 @@ ...@@ -27,7 +29,7 @@
export default { export default {
name: 'elClick', name: 'elClick',
components: {}, components: {},
props: ['actionName', 'actionType', 'dynamicTagObj'], props: ['dynamicTagObj'],
data () { data () {
return { return {
elementInfos: {}, // 存储当前选中元素的信息 elementInfos: {}, // 存储当前选中元素的信息
...@@ -45,8 +47,8 @@ export default { ...@@ -45,8 +47,8 @@ export default {
}, },
created () { created () {
console.log(this.dynamicTagObj); console.log(this.dynamicTagObj);
if (Object.keys(this.dynamicTagObj.actionConfigs).length == 0) return // if (Object.keys(this.dynamicTagObj.actionConfigs).length == 0) return
this.actionConfig = this.dynamicTagObj.actionConfigs // this.actionConfig = this.dynamicTagObj.actionConfigs
}, },
mounted () { }, mounted () { },
beforeDestroy () { beforeDestroy () {
...@@ -60,8 +62,8 @@ export default { ...@@ -60,8 +62,8 @@ export default {
submit () { submit () {
console.log(this.actionConfig); console.log(this.actionConfig);
// 防止父级改变，子级未改变重新赋值 // 防止父级改变，子级未改变重新赋值
this.actionConfig.Name = this.actionName; // this.actionConfig.Name = this.actionName;
this.actionConfig.Alias = this.actionType; // this.actionConfig.Alias = this.actionType;
this.$emit('dataChanged', this.actionConfig); this.$emit('dataChanged', this.actionConfig);
}, },
......
src/components/index.js
...@@ -2,14 +2,14 @@ import pageNavigate from './pageNavigates.vue'; ...@@ -2,14 +2,14 @@ import pageNavigate from './pageNavigates.vue';
import elClick from './elClick.vue'; import elClick from './elClick.vue';
import sysSleep from './sysSleep.vue'; import sysSleep from './sysSleep.vue';
import elOutput from './elOutput.vue'; import elOutput from './elOutput.vue';
import elInput from './elInput.vue'; import loopClick from './loopClick.vue'
import pageJavascript from './pageJavascript.vue';
import loopClick from './loopClick.vue';
import collectSingleElements from './collectSingleElements.vue'; import collectSingleElements from './collectSingleElements.vue';
import pageClose from './pageClose.vue'; import pageClose from './pageClose.vue';
import mouseMove from './mouseMove.vue'; import mouseMove from './mouseMove.vue';
import pageJavascipt from './pageJavascipt.vue'
import collectionTable from './collectionTable.vue'; import collectionTable from './collectionTable.vue';
import submit from './submit.vue'; import submit from './submit.vue';
import actions from './actions.vue'; import actions from './actions.vue';
import onInput from './onInput.vue'
export { pageNavigate, elClick, sysSleep, elOutput, elInput, pageJavascript, loopClick, collectSingleElements, pageClose, mouseMove, collectionTable, submit, actions }; export { pageNavigate, elClick, sysSleep, elOutput, onInput, loopClick, collectSingleElements, pageClose, mouseMove, pageJavascipt, collectionTable, submit, actions };
\ No newline at end of file \ No newline at end of file
src/components/onInput.vue 0 → 100644
<template>
<div class="onInput">
<!-- 操作按钮区域 -->
<div style="height: 35px; margin-left: 15px; text-align: left;">
<el-button size="small" class="button-new-tag" @click="selectElement">选择元素</el-button>
<el-button size="small" class="button-new-tag" @click="cancelSelect">取消选择</el-button>
</div>
<!-- 表单区域 -->
<el-form label-position="right" label-width="80px" :model="actionConfig">
<el-form-item label="查找方式">
<el-input v-model="actionConfig.Target.Type" disabled></el-input>
</el-form-item>
<el-form-item label="当前标签">
<el-input v-model="actionConfig.Target.tagName" disabled></el-input>
</el-form-item>
<el-form-item label="文本内容">
<el-input v-model="actionConfig.InputValue"></el-input>
</el-form-item>
<el-form-item label="查询时间">
<el-input v-model="actionConfig.Target.Timeout"></el-input>
</el-form-item>
</el-form>
<!-- 提交按钮 -->
<div style="width: 100%; text-align: right;">
<el-button size="small" class="button-new-tag" @click="submit" style="margin-right: 5px;">提交信息</el-button>
</div>
</div>
</template>
<script>
export default {
name: 'onInput',
components: {},
props: ['actionName', 'actionType', 'dynamicTagObj'],
data () {
return {
elementInfos: {}, // 存储当前选中元素的信息
actionConfig: {
"Target": {
"Type": "xpath",
"Selector": "",
"Timeout": 5000,
"tagName": ''
},
"InputValue": "",//输入的内容
"Script": null,
"Name": this.actionName,
"Alias": this.actionType
},
selectDisabled: true // 控制选择按钮的禁用状态
}
},
created () {
console.log(this.dynamicTagObj);
if (Object.keys(this.dynamicTagObj.actionConfigs).length == 0) return
this.actionConfig = this.dynamicTagObj.actionConfigs
},
mounted () { },
watch: {},
computed: {},
methods: {
// 提交表单信息
submit () {
console.log(this.actionConfig);
// 防止父级改变，子级未改变重新赋值
this.$emit('dataChanged', this.actionConfig);
},
// 获取页面元素方法
contextMenuHandler (event) {
event.preventDefault(); // 阻止默认的右击菜单
let element = event.target;
let elementInfo = {
Xpath: this.getElementXPath(element),
TagName: element.tagName
};
this.elementInfos = elementInfo;
console.log(event);
this.actionConfig.Target.Selector = elementInfo.Xpath;
this.actionConfig.Target.tagName = elementInfo.TagName;
this.selectDisabled = false;
// 移除事件监听器
document.removeEventListener('contextmenu', this.contextMenuHandler);
},
// 选择元素按钮调用
selectElement () {
// 添加事件监听器
document.addEventListener('contextmenu', this.contextMenuHandler, false);
},
// 取消按钮调用
cancelSelect () {
// 在取消按钮点击时移除事件监听器
document.removeEventListener('contextmenu', this.contextMenuHandler);
},
// 获取xpath
getElementXPath (element) {
let _this = this;
if (element.tagName === 'BODY') {
return '/HTML/' + element.tagName;
}
var ix = 1, siblings = element.parentNode.childNodes;
for (var i = 0; i < siblings.length; i++) {
var sibling = siblings[i];
if (sibling === element) {
return _this.getElementXPath(element.parentNode) + '/' + element.tagName + '[' + ix + ']';
}
if (sibling.nodeType === 1 && sibling.tagName === element.tagName) {
ix++;
}
}
},
},
}
</script>
<style lang="scss" scoped></style>
\ No newline at end of file
src/components/pageJavascipt.vue 0 → 100644
<template>
<div class="pageJavascipt">页面执行</div>
</template>
<script>
export default {
name:'pageJavascipt',
components:{},
props:{},
data(){
return {
}
},
created(){},
mounted(){},
watch:{},
computed:{},
methods:{},
}
</script>
<style lang="scss" scoped>
</style>
\ No newline at end of file
src/components/pageNavigates.vue
...@@ -13,9 +13,9 @@ ...@@ -13,9 +13,9 @@
<div style="width: 100%; text-align: right; display: flex; justify-content: space-between;"> <div style="width: 100%; text-align: right; display: flex; justify-content: space-between;">
<!-- 获取当前页面地址的按钮 --> <!-- 获取当前页面地址的按钮 -->
<el-button size="small" class="button-new-tag" @click="getCurrentPageUrl" style="margin-left: 15px;">获取当前页面地址</el-button> <el-button size="small" class="button-new-tag" @click="getCurrentPageUrl" style="margin-left: 15px;">获取当前页面地址</el-button>
</div>
<!-- 提交信息的按钮 --> <!-- 提交信息的按钮 -->
<el-button size="small" class="button-new-tag" @click="submit" style="position: absolute;bottom: 10px;right: 15px;">提交信息</el-button> <el-button size="small" class="button-new-tag" @click="submit" style="margin-right: 15px">提交信息</el-button>
</div>
</div> </div>
</template> </template>
<script> <script>
...@@ -47,8 +47,6 @@ export default { ...@@ -47,8 +47,6 @@ export default {
submit () { submit () {
// 防止父级改变，子级未改变重新赋值 // 防止父级改变，子级未改变重新赋值
// 将当前组件中的actionConfig对象通过自定义事件传递给父组件 // 将当前组件中的actionConfig对象通过自定义事件传递给父组件
this.actionConfig.Name = this.actionName;
this.actionConfig.Alias = this.actionType;
this.$emit("dataChanged", this.actionConfig); this.$emit("dataChanged", this.actionConfig);
}, },
// 获取当前页面地址的方法 // 获取当前页面地址的方法
......
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