Skip to content

V
Vue-WebDriver
Commit 984e9d2d by 高源
Options

主页面优化

parent dc4630e1
Showing with 120 additions and 342 deletions
src/App.vue
......@@ -16,14 +16,15 @@
<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>
</div>
<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;" @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>
</div>
</div>
......@@ -34,12 +35,17 @@
<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 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>
......@@ -47,55 +53,70 @@
<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="currentAction.actions" 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" 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;">{{ tag.actionName }}</span>
<span style="margin-left: 2px;">{{ action.Name }}</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>
</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="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;">
<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>
<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>
</draggable>
</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="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;">
<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>
</div>
<div style="margin-right: 15px;">
<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>
</el-select>
</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>
</div>
<component :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>
......@@ -112,6 +133,13 @@ export default {
props: {},
data () {
return {
rootAction: {
Name: '根目录',
actions: []
},//root action
currentAction: null,//show the path in the bar
activedAction: null,//current actived action
currentActionsParents: [],
subData: [],
state: false,
dynamicComponent: null,
......@@ -174,45 +202,24 @@ export default {
isChildrenTree: false,
treeNode: [],
actionAll: [{
name: '根目录',
Name: '根目录',
Kvid: 123123,
actions: []
}],
actionConfigs: {},
selectTagItem: {}
}
},
created () { },
created () {
this.currentAction = this.rootAction;
this.currentActionsParents = [this.rootAction];
},
mounted () {
this.$nextTick(() => {
window.addEventListener('resize', this.onResize);
});
this.$watch('dynamicTagObj.actionName', (newVal, oldVal) => {
this.dynamicTagObj.actionName = newVal
});
},
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: {
handler (newVal, oldVal) {
// console.log('数组变化了', newVal);
......@@ -225,6 +232,12 @@ export default {
}
},
deep: true
},
"currentAction.actions": {
handler (newVal, oldVal) {
console.log(newVal)
},
deep: true
}
},
computed: {},
......@@ -305,128 +318,47 @@ export default {
}
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 () {
this.isShowAction = true;
this.dynamicTagObj = {}
this.actionName = "新建动作"
this.actionType = ""
this.Kvid = null
this.selectTagItem = {}
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
}
this.actionType = '';
let action = this.createNewAction(this.currentAction);
action.Alias = this.actionType;
this.activedAction = action;
this.$forceUpdate();
console.log(this.currentAction.actions);
},
// 进入容器
toActions () {
let _this = this
let _this = this;
_this.currentAction = _this.activedAction;
_this.currentActionsParents = _this.getActionParents(_this.currentAction);
_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) {
......@@ -434,116 +366,29 @@ export default {
let _this = this
// 在输入值发生变化时触发
if (val) {
const targetObject = this.dynamicTags.find(obj => obj.tagId === this.dynamicTagObj.tagId);
if (targetObject) {
// 找到匹配的对象
targetObject.actionType = val; // 设置新的id值
_this.dynamicTagObj.actionType = val
_this.loadComponent(val)
} else {
// 未找到匹配的对象
console.log("未找到匹配的对象");
}
_this.activedAction.Alias = val;
_this.loadComponent(val);
_this.$forceUpdate();
}
},
// 导航标签
onBreadcrumb (item) {
this.isShowAction = false
this.actionName = item.actionName
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()
this.currentAction = item;
this.currentActionsParents = this.getActionParents(this.currentAction);
},
// 单击标签
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
_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.activedAction = item;
this.isShowAction = true
// 点击切换组件
_this.loadComponent(item.actionType)
this.loadComponent(item.Alias)
},
// 删除标签
handleClose (tag) {
let _this = this
if (_this.childrenTreeNode.length > 0 && _this.isChildrenTree == true) {
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])
}
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.currentAction.actions.splice(_this.currentAction.actions.indexOf(tag), 1);
console.log(this.rootAction.actions)
_this.isShowAction = false
},
// 根据 Kvid 找到对应的对象，并将匹配到的对象后面的所有对象数据删除
......@@ -592,81 +437,22 @@ export default {
// console.error('Parent node not found for kvid: ' + parentKvid);
tree.push(newData);
},
// 返回上一级目录
goback () {
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
}
importJson () {
},
// 保存任务
submitPlan (formName) {
this.isShowAction = true
console.log(this.subData)
// console.log(this.treeNode)
// 将JSON对象转换为JSON字符串
// const arrayOfObjects = [this.subData];
const jsonString = JSON.stringify(this.subData, null, 2);
//导出json
exportJson () {
// if (key == "privateProperty1") return undefined; else if (key == "privateProperty2") return undefined; else return value;
let replacer = function (key, value) { if (key == "parent" || key == "tagId") return undefined; else return value; }
let jsonString = JSON.stringify(this.rootAction.actions, replacer, 2);
// 创建一个Blob对象
const blob = new Blob([jsonString], { type: 'application/json' });
let blob = new Blob([jsonString], { type: 'application/json' });
// 使用file-saver库保存文件
saveAs(blob, 'exported_data.json');
},
// 根据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;
}
saveAs(blob, this.taskName+'.json');
console.log(jsonString);
},
//开始拖拽事件-标签拖拽
onStart () {
this.drag = true;
......@@ -675,21 +461,13 @@ export default {
//拖拽结束事件
onEnd () {
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 () {
this.winHeight = window.outerHeight
},
}
},
}
</script>
......
src/components/elclick.vue
......@@ -29,7 +29,7 @@
export default {
name: 'elClick',
components: {},
props: ['actionName', 'actionType', 'dynamicTagObj'],
props: ['dynamicTagObj'],
data () {
return {
elementInfos: {}, // 存储当前选中元素的信息
......@@ -47,8 +47,8 @@ export default {
},
created () {
console.log(this.dynamicTagObj);
if (Object.keys(this.dynamicTagObj.actionConfigs).length == 0) return
this.actionConfig = this.dynamicTagObj.actionConfigs
// if (Object.keys(this.dynamicTagObj.actionConfigs).length == 0) return
// this.actionConfig = this.dynamicTagObj.actionConfigs
},
mounted () { },
beforeDestroy () {
......
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