Skip to content

V
Vue-WebDriver
Commit a2fe75d9 by 高源
Options

容器界面可配置

parent 9a0b5563
Showing with 110 additions and 73 deletions
src/App.vue
......@@ -16,7 +16,8 @@
<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>
......@@ -34,12 +35,15 @@
<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 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 actionAll" :key="item.Kvid"
:style="{ color: item.Kvid == parentKvid ? '#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>
......@@ -47,28 +51,38 @@
<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="treeNode" chosenClass="chosen" forceFallback="true" group="people" animation="1000" @start="onStart" @end="onEnd" v-if="isChildrenTree == false">
<draggable v-model="treeNode" chosenClass="chosen" forceFallback="true" group="people" animation="1000"
@start="onStart" @end="onEnd" v-if="isChildrenTree == false">
<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" :key="tag.tagId" v-for="(tag, index) in treeNode"
@click="selectTag(tag)"
:style="{ backgroundColor: tag.Kvid == Kvid ? '#68C23A!important' : '#409EFF' }">
<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;">{{ tag.actionName }}</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(tag)"
style="width: 17px;position: absolute;top: -6px;right: -16px;"
src="./assets/close.svg">
</div>
</el-tag>
</transition-group>
</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>
<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="item.tagId" v-for="(item, index) in childrenTreeNode"
@click="selectTag(item)"
:style="{ backgroundColor: item.Kvid == Kvid ? '#68C23A!important' : '#409EFF' }">
<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;">{{ item.actionName }}</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>
</el-tag>
</transition-group>
......@@ -78,7 +92,8 @@
<el-divider></el-divider>
<!-- 容器配置 -->
<div v-if="isShowAction">
<div style="height: 35px;display: flex;justify-content: space-between;align-items: center;margin-left: 15px;margin-right: 15px;">
<div
style="height: 35px;display: flex;justify-content: space-between;align-items: center;margin-left: 15px;margin-right: 15px;">
<div style="width: 211px;display: flex;align-items: center;">
<span style="width: 90px;">动作名称:</span>
<el-input class="input-new-tag dongzuo" v-model="actionName" size="small" placeholder="请输入动作名称">
......@@ -86,7 +101,8 @@
</div>
<div style="margin-right: 5px;">
<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="actionType" 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>
......@@ -95,7 +111,8 @@
<div style="margin-left: 15px;margin-top: 10px;" v-if="actionType == 'actions'">
<el-button @click="toActions">进入容器</el-button>
</div>
<component :is="dynamicComponent" :actionName="actionName" :actionType="actionType" @dataChanged="handleDataChange" :dynamicTagObj="dynamicTagObj" v-if="actionType !== ''"></component>
<component :is="dynamicComponent" :actionName="actionName" :actionType="actionType"
@dataChanged="handleDataChange" :dynamicTagObj="dynamicTagObj" v-if="actionType !== ''"></component>
</div>
</div>
</div>
......@@ -174,7 +191,8 @@ export default {
Kvid: 123123,
actions: []
}],
actionConfigs: {}
actionConfigs: {},
selectTagItem: {}
}
},
......@@ -193,8 +211,7 @@ export default {
actionName (newVal, oldVal) {
// 在输入值发生变化时触发
if (newVal !== oldVal) {
// console.log(newVal)
// console.log(this.dynamicTags)
const targetObject = this.dynamicTags.find(obj => obj.tagId === this.dynamicTagObj.tagId);
if (targetObject) {
if (newVal == undefined) return
......@@ -283,7 +300,7 @@ export default {
handleDataChange (newData) {
console.log('接收到的数据:', newData);
const targetObject = this.dynamicTags.find(obj => obj.Kvid === this.dynamicTagObj.Kvid);
console.log(targetObject)
// console.log(targetObject)
if (targetObject) {
// if (newVal == undefined) return
// // 找到匹配的对象
......@@ -303,6 +320,7 @@ export default {
this.actionName = "新建动作"
this.actionType = ""
this.Kvid = null
this.selectTagItem = {}
let obj = {}
obj.taskName = this.taskName
obj.taskAddress = this.taskAddress
......@@ -333,43 +351,86 @@ export default {
},
// 进入容器
toActions () {
this.isShowAction = false
if (this.actionType == 'actions') {
// this.actionType = ''
// this.actionName = ''
this.parentKvid = this.Kvid
let activeItem = this.findObjectByKvid(this.treeNode, this.Kvid);
this.childrenTreeNode = []
this.isChildrenTree = true
console.log(activeItem)
let activeParentItem = this.findObjectByKvid(this.treeNode, activeItem.parentKvid);
activeItem.actions = []
let _this = this
_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) {
console.log('已经有容器了')
// if (this.actionAll[0].actions.length > 0) return
//根节点再次进容器
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])
// 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
}
this.actionAll.push(obj)
this.findOrPushObject(this.actionAll[0].actions, obj)
} else {
// this.actionType = ''
// this.actionName = ''
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)
// console.log(this.actionAll)
_this.childrenTreeNode = obj.actions
_this.findOrPushObject(_this.actionAll, obj)
}
}
} else {
this.parentKvid = null
......@@ -412,42 +473,25 @@ export default {
this.parentKvid = item.Kvid
this.isShowAction = false
}
console.log()
// console.log()
},
// 单击标签
selectTag (item) {
// this.parentTree = item
// console.log(item)
let _this = this
_this.selectTagItem = item
if (item.actionType == 'actions') {
if (_this.parentKvid == null && item.parentKvid == undefined) {
_this.parentKvid = item.Kvid
console.log(item)
let obj = {}
obj.name = item.actionName
obj.Kvid = item.Kvid
obj.actions = []
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
_this.actionType = item.actionType
_this.actionName = item.actionName
_this.isShowAction = true
} else {
_this.parentKvid = item.Kvid
_this.childrenTreeNode = []
_this.isShowAction = false
let obj = {}
obj.name = item.actionName
obj.Kvid = item.Kvid
obj.actions = []
for (let i = 0; i < item.actions.length; i++) {
obj.actions.push(item.actions[i])
_this.childrenTreeNode.push(item.actions[i])
}
_this.findOrPushObject(_this.actionAll, obj)
_this.isChildrenTree = true
_this.actionName = item.actionName
_this.actionType = item.actionType
_this.isShowAction = true
}
} else {
_this.actionName = item.actionName
......@@ -455,13 +499,6 @@ export default {
_this.isShowAction = true
}
_this.Kvid = item.Kvid
if (item.actions != undefined && item.actions.length > 0) {
_this.childrenTreeNode = []
for (let i = 0; i < item.actions.length; i++) {
_this.childrenTreeNode.push(item.actions[i])
}
_this.isChildrenTree = true
}
_this.dynamicTagObj = item
// 点击切换组件
_this.loadComponent(item.actionType)
......@@ -582,7 +619,7 @@ export default {
// 保存任务
submitPlan (formName) {
this.isShowAction = true
console.log(this.treeNode)
// console.log(this.treeNode)
// 将JSON对象转换为JSON字符串
const jsonString = JSON.stringify(this.treeNode, null, 2);
// 创建一个Blob对象
......
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