Skip to content

V
Vue-WebDriver
Commit d2938d19 by 郁子恒
Options

动作优化

parent 587df2b3
Showing with 114 additions and 479 deletions
src/App.vue
......@@ -16,8 +16,7 @@
<span style="width: 95px;padding-left: 5px;">任务名称：</span>
<el-input v-model="taskName" placeholder="请输入内容" style="height: 20px;"></el-input>
</div>
<div
style="width: 100%;height: 25px;display: flex;align-items: center;padding-left: 10px;display: none;">
<div style="width: 100%;height: 25px;display: flex;align-items: center;padding-left: 10px;display: none;">
<span style="width: 95px; padding-left: 5px;">任务地址：</span>
<el-input v-model="taskAddress" placeholder="请输入内容" style="height: 20px;" disabled></el-input>
</div>
......@@ -35,17 +34,14 @@
<span>动作集合:</span>
<div class="scroll-container" @wheel="handleScroll" style="width: 325px;">
<div class="scroll-content" style="margin-left: 10px;">
<span id="Breadcrumb" @click="onBreadcrumb(item)" v-for="item in currentActionsParents"
:key="item.tagId"
:style="{ color: item == currentAction ? '#68C23A!important' : '#409EFF' }">{{
<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 style="display:flex;align-items: center;margin-right: 15px;">
<el-button :disabled="state" type="primary" size="mini" style="width: 20px;height: 20px;"
@click="newAction">
<el-button :disabled="state" type="primary" size="mini" style="width: 20px;height: 20px;" @click="newAction">
<img style="width: 12px;height: 12px;" src="./assets/add.svg">
</el-button>
</div>
......@@ -53,43 +49,33 @@
<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%;">
<draggable v-model="currentAction.actions" chosenClass="chosen" forceFallback="true" group="people"
animation="1000" @start="onStart" @end="onEnd">
<draggable v-model="currentAction.actions" chosenClass="chosen" forceFallback="true" group="people" animation="1000" @start="onStart" @end="onEnd">
<transition-group>
<el-tag class="boxtags" v-for="(action, index) in currentAction.actions"
@click="selectTag(action)"
:style="{ backgroundColor: action == activedAction ? '#68C23A!important' : '#409EFF' }"
:key="action.tagId">
<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;">
<span style="min-width: 40px;display: flex;align-items: center;">
<div class="circle">{{ index + 1 }}</div>
<span style="margin-left: 2px;">{{ action.Name }}</span>
</span>
<img id="closeimg" @click="handleClose(action)"
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>
</el-tag>
</transition-group>
</draggable>
</div>
</div>
<el-divider></el-divider>
<!-- 容器配置 -->
<div v-if="isShowAction">
<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;">
<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;">
<span style="width: 90px;">动作名称:</span>
<el-input class="input-new-tag dongzuo" v-model="activedAction.Name" size="small"
placeholder="请输入动作名称">
<el-input class="input-new-tag dongzuo" v-model="activedAction.Name" size="small" placeholder="请输入动作名称">
</el-input>
</div>
<div style="margin-right: 15px;">
<span style="width: 90px;">动作类型:</span>
<el-select id="eventType" name="eventType" v-model="activedAction.Alias" 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>
</el-select>
......@@ -98,23 +84,21 @@
<div style="margin-left: 15px;margin-top: 10px;" v-if="activedAction.Alias == 'actions'">
<el-button @click="toActions">进入容器</el-button>
</div>
<component :is="dynamicComponent" @dataChanged="handleDataChange" :activedAction="activedAction"
v-if="activedAction.Alias !== ''">
<component :is="dynamicComponent" @dataChanged="handleDataChange" :activedAction="activedAction" v-if="activedAction.Alias !== ''">
</component>
</div>
</div>
</div>
</template>
<script>
// 导出json文件使用的库
import { saveAs } from 'file-saver';
import draggable from 'vuedraggable'
import { pageNavigate, elClick, sysSleep, elOutput, loopClick, onInput, collectSingleElements, pageClose, mouseMove, pageJavascipt, collectionTable, submit, actions } from './components/index.js'
import { pageNavigate, elClick, sysSleep, onInput, elOutput, pageJavascript, collectionTable, actions } from './components/index.js'
export default {
name: 'App',
components: { pageNavigate, elClick, sysSleep, draggable, elOutput, loopClick, onInput, collectSingleElements, pageClose, mouseMove, pageJavascipt, collectionTable, submit, actions },
components: { pageNavigate, elClick, sysSleep, onInput, elOutput, pageJavascript, collectionTable, actions, draggable },
props: {},
data () {
return {
......@@ -134,41 +118,26 @@ export default {
winHeight: window.outerHeight,
isShowAction: false,
options: [{
value: 'page.Navigate',
value: 'page.navigate',
label: '页面跳转'
}, {
value: 'elClick',
value: 'el.click',
label: '点击'
}, {
value: 'sysSleep',
value: 'sys.sleep',
label: '等待'
}, {
value: 'el.input',
label: '输入'
}, {
value: 'elOutput',
value: 'el.output',
label: '取值'
}, {
value: 'collectionTable',
label: '采集表'
}, {
value: 'loopClick',
label: '循环点击'
}, {
value: 'collectSingleElements',
label: '采集单元素'
}, {
value: 'pageClose',
label: '关闭页面'
}, {
value: 'mouseMove',
label: '鼠标移动'
}, {
value: 'pageJavascipt',
value: 'page.javascipt',
label: '脚本执行'
}, {
value: 'submit',
label: '提交'
value: 'collectionTable',
label: '采集表'
}, {
value: 'actions',
label: '容器'
......@@ -210,42 +179,27 @@ export default {
// 组件配置
loadComponent (componentName) {
switch (componentName) {
case 'page.Navigate':
case 'page.navigate':
this.dynamicComponent = pageNavigate
break;
case 'elClick':
case 'el.click':
this.dynamicComponent = elClick
break;
case 'sysSleep':
case 'sys.sleep':
this.dynamicComponent = sysSleep
break;
case 'elOutput':
this.dynamicComponent = elOutput
break;
case 'el.input':
this.dynamicComponent = onInput
break;
case 'loopClick':
this.dynamicComponent = loopClick
break;
case 'collectSingleElements':
this.dynamicComponent = collectSingleElements
break;
case 'pageClose':
this.dynamicComponent = pageClose
break;
case 'mouseMove':
this.dynamicComponent = mouseMove
case 'el.output':
this.dynamicComponent = elOutput
break;
case 'pageJavascipt':
this.dynamicComponent = pageJavascipt
case 'page.javascipt':
this.dynamicComponent = pageJavascript
break;
case 'collectionTable':
this.dynamicComponent = collectionTable
break;
case 'submit':
this.dynamicComponent = submit
break;
case 'actions':
this.dynamicComponent = actions
break;
......
src/components/actions.vue
<template>
<div class="actions">
<!-- 容器 -->
<el-empty description="正在维护..."></el-empty>
</div>
</template>
......@@ -9,12 +9,12 @@ export default {
name: 'actions',
components: {},
props: {},
data() {
data () {
return {
}
},
created() { },
mounted() { },
created () { },
mounted () { },
watch: {},
computed: {},
methods: {},
......
src/components/collectSingleElements.vue deleted 100644 → 0
<template>
<div class="collectSingleElements">
采集单元素
</div>
</template>
<script>
export default {
name:'collectSingleElements',
components:{},
props:{},
data(){
return {
}
},
created(){},
mounted(){},
watch:{},
computed:{},
methods:{},
}
</script>
<style lang="scss" scoped>
</style>
\ No newline at end of file
src/components/collectionTable.vue
<template>
<div class="collectionTable">
<div style="height: 35px;margin-left: 15px;text-align: left;">
<div style="display: flex;height: 50px;margin-left: 15px;text-align: left;align-items: center;justify-content: flex-start;">
<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>
<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 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" v-if="isSelectTable" auto-resize style="margin-bottom: 5px;">
<vxe-column field="" title="列名" width="150">
<template v-slot="{ row }">
<!-- {{ 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>
</template>
</vxe-column>
<vxe-column field="" title="属性名" width="150">
<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>
</template>
</vxe-column>
<vxe-column field="" title="值类型" width="150">
<template v-slot="{ row }">
<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">
<vxe-option v-for="num in row.typeOptions" :key="num.xpath" :value="num.value"
:label="num.label"></vxe-option>
</span> <vxe-select v-model="row.type" placeholder="选择值类型" placement="bottom" 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-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>
</template>
</vxe-column>
......@@ -45,8 +38,7 @@
</vxe-column>
<vxe-column title="操作" width="100">
<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>
</vxe-column>
</vxe-table>
......@@ -124,7 +116,7 @@ export default {
if (targetElement.tagName === 'A') {
// 链接
info = {
xPath:'xPath',
xPath: 'xPath',
url: 'href',
text: 'textContent'
};
......@@ -139,7 +131,7 @@ export default {
} else if (targetElement.tagName === 'IMG') {
// 图片
info = {
xPath:'xPath',
xPath: 'xPath',
src: 'src',
alt: 'alt'
};
......@@ -239,7 +231,7 @@ export default {
// 遍历 Xpaths
for (let i = 0; i < _this.Xpaths.length; 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.name = _this.tableName
......@@ -274,6 +266,7 @@ export default {
.vxe-input--inner {
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;
} */
......
src/components/elInput.vue deleted 100644 → 0
<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.Attributes.innerText"></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",
"Xpath": "",
"Timeout": 5000,
"tagName": ''
},
"Attributes": {
"innerText": ""
},
"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.actionConfig.Name = this.actionName;
this.actionConfig.Alias = this.actionType;
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.Xpath = 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/elOutput.vue
<template>
<div class="elOutput">
<!-- 操作按钮区域 -->
<div style="height: 35px; margin-left: 15px; text-align: left;">
<div style="display: flex;height: 50px;margin-left: 15px;text-align: left;align-items: center;justify-content: flex-start;">
<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" style="margin-left: 10px !important;" class="button-new-tag" @click="cancelSelect">取消选择</el-button>
</div>
<!-- 表单区域 -->
<el-form label-position="right" label-width="80px" :model="actionConfig">
......@@ -28,7 +28,7 @@
export default {
name: 'elOutput',
components: {},
props: ['actionName', 'actionType', 'dynamicTagObj'],
props: ['activedAction'],
data () {
return {
elementInfos: {}, // 存储当前选中元素的信息
......@@ -41,15 +41,17 @@ export default {
"Attributes": {
"innerText": ""
},
"Name": this.actionName,
"Alias": this.actionType
},
};
},
created () {
console.log(this.dynamicTagObj);
if (Object.keys(this.dynamicTagObj.actionConfigs).length == 0) return
this.actionConfig = this.dynamicTagObj.actionConfigs
// console.log(this.activedAction);
if (this.activedAction.Target !== undefined) {
this.actionConfig.Target = this.activedAction.Target;
}
if (this.activedAction.Attributes !== undefined) {
this.actionConfig.Attributes = this.activedAction.Attributes;
}
},
mounted () {
// 在组件挂载后调用selectElement来添加事件监听器
......@@ -66,11 +68,10 @@ export default {
submit () {
console.log(this.actionConfig);
// 防止父级改变，子级未改变重新赋值
this.actionConfig.Name = this.actionName;
this.actionConfig.Alias = this.actionType;
this.$emit('dataChanged', this.actionConfig);
this.activedAction.Target = this.actionConfig.Target;
this.activedAction.Attributes = this.actionConfig.Attributes;
this.$emit('dataChanged', this.activedAction);
},
// 获取页面元素方法
contextMenuHandler (event) {
event.preventDefault(); // 阻止默认的右击菜单
......@@ -85,19 +86,16 @@ export default {
// 移除事件监听器
document.removeEventListener('contextmenu', this.contextMenuHandler);
},
// 选择元素按钮调用
selectElement () {
// 添加事件监听器
document.addEventListener('contextmenu', this.contextMenuHandler, false);
},
// 取消按钮调用
cancelSelect () {
// 在取消按钮点击时移除事件监听器
document.removeEventListener('contextmenu', this.contextMenuHandler);
},
// 获取xpath
getElementXPath (element) {
let _this = this;
......
src/components/elclick.vue
......@@ -2,9 +2,9 @@
<!-- 点击菜单组件 -->
<div class="elClick">
<!-- 操作按钮区域 -->
<div style="height: 35px; margin-left: 15px; text-align: left;">
<div style="display: flex;height: 50px;margin-left: 15px;text-align: left;align-items: center;justify-content: flex-start;">
<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" style="margin-left: 10px !important;" class="button-new-tag" @click="cancelSelect">取消选择</el-button>
</div>
<!-- 表单区域 -->
<el-form label-position="right" label-width="80px" :model="actionConfig">
......@@ -19,9 +19,7 @@
</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>
<el-button size="small" class="button-new-tag" @click="submit" style="position: absolute;bottom: 10px;right: 15px;">提交信息</el-button>
</div>
</template>
......@@ -45,7 +43,7 @@ export default {
};
},
created () {
console.log(this.activedAction);
// console.log(this.activedAction);
if (this.activedAction.Target !== undefined) {
this.actionConfig.Target = this.activedAction.Target;
}
......@@ -62,7 +60,6 @@ export default {
submit () {
console.log(this.actionConfig);
// 防止父级改变，子级未改变重新赋值
// console.log(this.componentConfigs);
this.activedAction.Target = this.actionConfig.Target;
this.$emit('dataChanged', this.activedAction);
},
......
src/components/index.js
import pageNavigate from './pageNavigates.vue';
import elClick from './elClick.vue';
import sysSleep from './sysSleep.vue';
import onInput from './onInput.vue';
import elOutput from './elOutput.vue';
import loopClick from './loopClick.vue'
import collectSingleElements from './collectSingleElements.vue';
import pageClose from './pageClose.vue';
import mouseMove from './mouseMove.vue';
import pageJavascipt from './pageJavascipt.vue'
import pageJavascript from './pageJavascript.vue';
import collectionTable from './collectionTable.vue';
import submit from './submit.vue';
import actions from './actions.vue';
import onInput from './onInput.vue'
export { pageNavigate, elClick, sysSleep, elOutput, onInput, loopClick, collectSingleElements, pageClose, mouseMove, pageJavascipt, collectionTable, submit, actions };
\ No newline at end of file
export { pageNavigate, elClick, sysSleep, onInput, elOutput, pageJavascript, collectionTable, actions };
\ No newline at end of file
src/components/loopClick.vue deleted 100644 → 0
<template>
<div class="loopClick">循环点击
<div style="width: 498px;overflow: auto;">
<vxe-table :data="tableData" ref="xTable" border class="mytable-scrollbar" height="220">
<vxe-table-column v-for="(config, index) in tableColumn" :key="index" v-bind="config"></vxe-table-column>
<!-- <vxe-column title="操作" width="">
<template #default="{ row }">
<vxe-button status="danger" content="删除" @click="deleteRowEvent(row)"
style="margin-right: 20px;width: 50px;"></vxe-button>
</template>
</vxe-column> -->
</vxe-table>
</div>
</div>
</template>
<script>
import { getTableData } from '../sdk'
export default {
name: 'loopClick',
components: {},
props: {},
data () {
return {
tableData: [],
tableColumn: [],
}
},
created () {
//表格展示配置
let _this = this
_this.tableData = getTableData()
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)
}
let transformedData = this.tableData.map((group, index) => {
let transformedGroup = {};
group.elements.forEach((element, elemIndex) => {
transformedGroup[`content${elemIndex}`] = {
Xpath: element.xpath,
content: element.content,
otherName: "请填写标题"
};
});
transformedGroup["_X_ROW_KEY"] = `row_${index + 8}`; // 假设起始索引为8
return transformedGroup;
});
// console.log(transformedData);
this.tableData = transformedData
console.log(this.tableColumn)
},
mounted () { },
watch: {},
computed: {},
methods: {},
}
</script>
<style lang="scss" scoped></style>
\ No newline at end of file
src/components/mouseMove.vue deleted 100644 → 0
<template>
<div class="mouseMove">鼠标移动</div>
</template>
<script>
export default {
name:'mouseMove',
components:{},
props:{},
data(){
return {
}
},
created(){},
mounted(){},
watch:{},
computed:{},
methods:{},
}
</script>
<style lang="scss" scoped>
</style>
\ No newline at end of file
src/components/onInput.vue
<template>
<div class="onInput">
<!-- 操作按钮区域 -->
<div style="height: 35px; margin-left: 15px; text-align: left;">
<div style="display: flex;height: 50px;margin-left: 15px;text-align: left;align-items: center;justify-content: flex-start;">
<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" style="margin-left: 10px !important;" class="button-new-tag" @click="cancelSelect">取消选择</el-button>
</div>
<!-- 表单区域 -->
<el-form label-position="right" label-width="80px" :model="actionConfig">
......@@ -31,7 +31,7 @@
export default {
name: 'onInput',
components: {},
props: ['actionName', 'actionType', 'dynamicTagObj'],
props: ['activedAction'],
data () {
return {
elementInfos: {}, // 存储当前选中元素的信息
......@@ -51,9 +51,13 @@ export default {
}
},
created () {
console.log(this.dynamicTagObj);
if (Object.keys(this.dynamicTagObj.actionConfigs).length == 0) return
this.actionConfig = this.dynamicTagObj.actionConfigs
// console.log(this.activedAction);
if (this.activedAction.Target !== undefined) {
this.actionConfig.Target = this.activedAction.Target;
}
if (this.activedAction.InputValue !== undefined) {
this.actionConfig.InputValue = this.activedAction.InputValue;
}
},
mounted () { },
watch: {},
......@@ -63,7 +67,9 @@ export default {
submit () {
console.log(this.actionConfig);
// 防止父级改变，子级未改变重新赋值
this.$emit('dataChanged', this.actionConfig);
this.activedAction.Target = this.actionConfig.Target;
this.activedAction.InputValue = this.actionConfig.InputValue;
this.$emit('dataChanged', this.activedAction);
},
// 获取页面元素方法
......@@ -115,4 +121,13 @@ export default {
},
}
</script>
<style lang="scss" scoped></style>
\ No newline at end of file
<style scoped>
.el-form-item {
margin-bottom: 0;
}
.tooltips button {
width: 60px !important;
height: 30px !important;
}
</style>
\ No newline at end of file
src/components/pageClose.vue deleted 100644 → 0
<template>
<div class="pageClose">页面关闭</div>
</template>
<script>
export default {
name:'pageClose',
components:{},
props:{},
data(){
return {
}
},
created(){},
mounted(){},
watch:{},
computed:{},
methods:{},
}
</script>
<style lang="scss" scoped>
</style>
\ No newline at end of file
src/components/pageJavascipt.vue deleted 100644 → 0
<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/pageJavascript.vue
......@@ -15,21 +15,20 @@
export default {
name: 'pageJavascript',
components: {},
props: ['actionName', 'actionType', 'dynamicTagObj'],
props: ['activedAction'],
data () {
return {
elementInfos: {}, // 存储当前选中元素的信息
actionConfig: {
"Script": "",
"Name": this.actionName,
"Alias": this.actionType
},
};
},
created () {
console.log(this.dynamicTagObj);
if (Object.keys(this.dynamicTagObj.actionConfigs).length == 0) return
this.actionConfig = this.dynamicTagObj.actionConfigs
// console.log(this.activedAction);
if (this.activedAction.Script !== undefined) {
this.actionConfig.Script = this.activedAction.Script;
}
},
mounted () { },
watch: {},
......@@ -39,9 +38,8 @@ export default {
submit () {
console.log(this.actionConfig);
// 防止父级改变，子级未改变重新赋值
this.actionConfig.Name = this.actionName;
this.actionConfig.Alias = this.actionType;
this.$emit('dataChanged', this.actionConfig);
this.activedAction.Script = this.actionConfig.Script;
this.$emit('dataChanged', this.activedAction);
},
},
};
......
src/components/pageNavigates.vue
......@@ -13,31 +13,29 @@
<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="submit" style="margin-right: 15px">提交信息</el-button>
</div>
<!-- 提交信息的按钮 -->
<el-button size="small" class="button-new-tag" @click="submit" style="position: absolute;bottom: 10px;right: 15px;">提交信息</el-button>
</div>
</template>
<script>
export default {
name: "pageNavigates", // 组件名称
components: {},
props: ["actionName", "actionType", "dynamicTagObj"], // 父组件传递的属性
props: ["activedAction"], // 父组件传递的属性
data () {
return {
// 页面导航配置对象
actionConfig: {
Url: "", // 页面地址
Name: this.actionName, // 页面名称，从父组件传递而来
Alias: this.actionType, // 页面类型，从父组件传递而来
"Url": "", // 页面地址
},
};
},
created () {
// 如果动态标签对象中的actionConfigs属性为空，则直接返回
if (Object.keys(this.dynamicTagObj.actionConfigs).length == 0) return;
// 使用动态标签对象中的actionConfigs属性初始化actionConfig
this.actionConfig = this.dynamicTagObj.actionConfigs;
console.log(this.activedAction);
if (this.activedAction.Url !== undefined) {
this.actionConfig.Url = this.activedAction.Url;
}
},
mounted () { },
watch: {},
......@@ -45,9 +43,10 @@ export default {
methods: {
// 提交表单信息的方法
submit () {
console.log(this.actionConfig);
// 防止父级改变，子级未改变重新赋值
// 将当前组件中的actionConfig对象通过自定义事件传递给父组件
this.$emit("dataChanged", this.actionConfig);
this.activedAction.Url = this.actionConfig.Url;
this.$emit('dataChanged', this.activedAction);
},
// 获取当前页面地址的方法
getCurrentPageUrl (event) {
......
src/components/submit.vue deleted 100644 → 0
<template>
<div class="submit">提交</div>
</template>
<script>
export default {
name:'submit',
components:{},
props:{},
data(){
return {
}
},
created(){},
mounted(){},
watch:{},
computed:{},
methods:{},
}
</script>
<style lang="scss" scoped>
</style>
\ No newline at end of file
src/components/sysSleep.vue
......@@ -18,20 +18,19 @@
export default {
name: 'sysSleep',
components: {},
props: ['actionName', 'actionType', 'dynamicTagObj'],
props: ['activedAction'],
data () {
return {
actionConfig: {
"PauseMilliseconds": "",
"Name": this.actionName,
"Alias": this.actionType
},
};
},
created () {
console.log(this.dynamicTagObj);
if (Object.keys(this.dynamicTagObj.actionConfigs).length == 0) return
this.actionConfig = this.dynamicTagObj.actionConfigs
// console.log(this.activedAction);
if (this.activedAction.PauseMilliseconds !== undefined) {
this.actionConfig.PauseMilliseconds = this.activedAction.PauseMilliseconds;
}
},
mounted () { },
watch: {},
......@@ -41,9 +40,8 @@ export default {
submit () {
console.log(this.actionConfig);
// 防止父级改变，子级未改变重新赋值
this.actionConfig.Name = this.actionName;
this.actionConfig.Alias = this.actionType;
this.$emit('dataChanged', this.actionConfig);
this.activedAction.PauseMilliseconds = this.actionConfig.PauseMilliseconds;
this.$emit('dataChanged', this.activedAction);
},
},
};
......
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