Skip to content

V
Vue-WebDriver
Commit a2fe75d9 by 高源
Options

容器界面可配置

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