Skip to content

V
Vue-WebDriver
Commit 79f96c46 by 高源
Options

组件传值优化

parent 984e9d2d
Showing with 46 additions and 128 deletions
src/App.vue
...@@ -54,7 +54,7 @@ ...@@ -54,7 +54,7 @@
<!-- 动作标签 --> <!-- 动作标签 -->
<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="currentAction.actions" chosenClass="chosen" forceFallback="true" group="people" <draggable v-model="currentAction.actions" chosenClass="chosen" forceFallback="true" group="people"
animation="1000" @start="onStart" @end="onEnd" v-if="isChildrenTree == false"> animation="1000" @start="onStart" @end="onEnd">
<transition-group> <transition-group>
<el-tag class="boxtags" v-for="(action, index) in currentAction.actions" <el-tag class="boxtags" v-for="(action, index) in currentAction.actions"
@click="selectTag(action)" @click="selectTag(action)"
...@@ -72,24 +72,7 @@ ...@@ -72,24 +72,7 @@
</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">
<transition-group>
<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">{{ 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">
</div>
</el-tag>
</transition-group>
</draggable> -->
</div> </div>
</div> </div>
<el-divider></el-divider> <el-divider></el-divider>
...@@ -115,7 +98,7 @@ ...@@ -115,7 +98,7 @@
<div style="margin-left: 15px;margin-top: 10px;" v-if="activedAction.Alias == '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 :is="dynamicComponent" @dataChanged="handleDataChange" :dynamicTagObj="activedAction" v-if="activedAction.Alias !== ''"> <component :is="dynamicComponent" @dataChanged="handleDataChange" :activedAction="activedAction" v-if="activedAction.Alias !== ''">
</component> </component>
</div> </div>
</div> </div>
...@@ -145,9 +128,7 @@ export default { ...@@ -145,9 +128,7 @@ export default {
dynamicComponent: null, dynamicComponent: null,
taskName: '', taskName: '',
taskAddress: 'https://k5.kivii.org/storages/app/files/bundle.js', taskAddress: 'https://k5.kivii.org/storages/app/files/bundle.js',
actionName: '',
actionType: '', actionType: '',
dynamicTags: [],
winHeight: window.outerHeight, winHeight: window.outerHeight,
isShowAction: false, isShowAction: false,
options: [{ options: [{
...@@ -190,24 +171,8 @@ export default { ...@@ -190,24 +171,8 @@ export default {
value: 'actions', value: 'actions',
label: '容器' label: '容器'
}], }],
tableData: [],
drag: false, drag: false,
tagId: 0, tagId: 0,
index: 1,
dynamicTagObj: {},
parentTree: [],
childrenTreeNode: [],
Kvid: null,
parentKvid: null,
isChildrenTree: false,
treeNode: [],
actionAll: [{
Name: '根目录',
Kvid: 123123,
actions: []
}],
actionConfigs: {},
} }
}, },
created () { created () {
...@@ -220,19 +185,6 @@ export default { ...@@ -220,19 +185,6 @@ export default {
}); });
}, },
watch: { watch: {
treeNode: {
handler (newVal, oldVal) {
// console.log('数组变化了', newVal);
// console.log(newVal.length);
// 设置动作新增上限为15个
if (newVal.length > 14) {
this.state = true;
} else {
this.state = false;
}
},
deep: true
},
"currentAction.actions": { "currentAction.actions": {
handler (newVal, oldVal) { handler (newVal, oldVal) {
console.log(newVal) console.log(newVal)
...@@ -301,73 +253,89 @@ export default { ...@@ -301,73 +253,89 @@ export default {
}, },
// 接收子组件信息 // 接收子组件信息
handleDataChange (newData) { handleDataChange (newData) {
this.subData = [newData]; this.activedAction = newData
// console.log(this.subData); console.log(this.rootAction.actions)
// console.log('接收到的数据:', newData);
const targetObject = this.dynamicTags.find(obj => obj.Kvid === this.dynamicTagObj.Kvid);
// console.log(targetObject)
if (targetObject) {
// if (newVal == undefined) return
// // 找到匹配的对象
targetObject.actionConfigs = newData; // 设置新的id值
this.dynamicTagObj.actionConfigs = newData
// // console.log(this.dynamicTags)
} else {
// 未找到匹配的对象
console.log("未找到匹配的对象");
}
console.log(this.treeNode)
}, },
// 初始化父节点引用
initActionParent (action) { initActionParent (action) {
// 如果action的actions属性为null或者undefined，或者actions属性的长度为0，则直接返回
if (action.actions === null || action.actions === undefined || action.actions.length === 0) return; if (action.actions === null || action.actions === undefined || action.actions.length === 0) return;
// 遍历actions属性，将每一个action的parent属性设置为action，并递归调用initActionParent函数
action.actions.forEach(a => { action.actions.forEach(a => {
a.parent = action; a.parent = action;
this.initActionParent(a); this.initActionParent(a);
}); });
}, },
// 遍历父级
getActionParents (action) { getActionParents (action) {
// 获取action的父级
let parents = []; let parents = [];
// 将action添加到parents数组中
parents.push(action); parents.push(action);
// 当action有父级时，循环获取action的父级
while (action.parent) { while (action.parent) {
// 将action的父级添加到parents数组中
parents.push(action.parent); parents.push(action.parent);
// 将action的父级赋值给action
action = action.parent; action = action.parent;
} }
// 返回parents数组，并且将数组反转
return parents.reverse(); return parents.reverse();
}, },
// 创建新动作
createNewAction (parent) { createNewAction (parent) {
// 创建一个新的动作
let rtns = {}; let rtns = {};
// 设置新动作的名称
rtns.Name = "新建动作"; rtns.Name = "新建动作";
// 设置新动作的父级
rtns.parent = parent; rtns.parent = parent;
// 设置新动作的标签id
rtns.tagId = this.tagId++; rtns.tagId = this.tagId++;
// 如果父级没有动作，则初始化动作列表
parent.actions = parent.actions || []; parent.actions = parent.actions || [];
// 将新动作添加到动作列表中
parent.actions.push(rtns); parent.actions.push(rtns);
// 返回新动作
return rtns; return rtns;
}, },
// 新建动作 // 新建动作
newAction () { newAction () {
// 重置actionType
this.actionType = ''; this.actionType = '';
// 创建新的action
let action = this.createNewAction(this.currentAction); let action = this.createNewAction(this.currentAction);
// 设置action的别名
action.Alias = this.actionType; action.Alias = this.actionType;
// 设置当前激活的action
this.activedAction = action; this.activedAction = action;
// 强制更新
this.$forceUpdate(); this.$forceUpdate();
console.log(this.currentAction.actions);
}, },
// 进入容器 // 进入容器
toActions () { toActions () {
let _this = this; let _this = this;
// 设置当前激活的动作
_this.currentAction = _this.activedAction; _this.currentAction = _this.activedAction;
// 获取当前动作的父级动作
_this.currentActionsParents = _this.getActionParents(_this.currentAction); _this.currentActionsParents = _this.getActionParents(_this.currentAction);
// 隐藏动作
_this.isShowAction = false _this.isShowAction = false
}, },
// 动作下拉框 // 动作下拉框
handleChange (val) { handleChange (val) {
// 判断当前激活的action的类型是否与输入值val相等
this.actionType == val this.actionType == val
let _this = this let _this = this
// 在输入值发生变化时触发 // 在输入值发生变化时触发
if (val) { if (val) {
// 将输入值赋值给当前激活的action的别名
_this.activedAction.Alias = val; _this.activedAction.Alias = val;
// 加载当前激活的action的别名对应的组件
_this.loadComponent(val); _this.loadComponent(val);
// 强制更新当前组件
_this.$forceUpdate(); _this.$forceUpdate();
} }
}, },
...@@ -391,56 +359,7 @@ export default { ...@@ -391,56 +359,7 @@ export default {
console.log(this.rootAction.actions) console.log(this.rootAction.actions)
_this.isShowAction = false _this.isShowAction = false
}, },
// 根据 Kvid 找到对应的对象，并将匹配到的对象后面的所有对象数据删除 importJson () {},
deleteObjectsAfterKvid (dataArray, targetKvid) {
const index = dataArray.findIndex(obj => obj.Kvid === targetKvid);
if (index !== -1) {
// 找到匹配的对象
dataArray.splice(index + 1);
} else {
console.log("未找到匹配的对象");
}
},
// 树结构添加数据
addDataToParent (tree, parentKvid, newData, childTree) {
let _this = this
_this.childrenTreeNode = []
// 递归函数，用于在树的每一级中查找合适的父节点并添加数据
function addToNode (node, parentKvid, newData, childTree) {
if (node.actions == undefined) {
node.actions = []
}
// 如果当前节点的 kvid 等于 parentKvid，将 newData 添加到当前节点的 actions 中
if (node.Kvid === parentKvid) {
node.actions.push(newData);
// _this.isChildrenTree = childTree
for (let i = 0; i < node.actions.length; i++) {
_this.childrenTreeNode.push(node.actions[i])
}
return true; // 表示数据已添加成功
}
// 递归查找子节点
for (var i = 0; i < node.actions.length; i++) {
if (addToNode(node.actions[i], parentKvid, newData)) {
return true; // 如果子节点中添加成功，返回 true
}
}
return false; // 表示未找到合适的父节点
}
// 遍历初始树结构，尝试添加数据
for (var i = 0; i < tree.length; i++) {
if (addToNode(tree[i], parentKvid, newData)) {
return; // 如果在当前节点中添加成功，结束函数
}
}
// 如果在整个树中都未找到合适的父节点，可以选择不添加数据或抛出错误
// console.error('Parent node not found for kvid: ' + parentKvid);
tree.push(newData);
},
importJson () {
},
//导出json //导出json
exportJson () { exportJson () {
// if (key == "privateProperty1") return undefined; else if (key == "privateProperty2") return undefined; else return value; // if (key == "privateProperty1") return undefined; else if (key == "privateProperty2") return undefined; else return value;
...@@ -452,7 +371,6 @@ export default { ...@@ -452,7 +371,6 @@ export default {
saveAs(blob, this.taskName+'.json'); saveAs(blob, this.taskName+'.json');
console.log(jsonString); console.log(jsonString);
}, },
//开始拖拽事件-标签拖拽 //开始拖拽事件-标签拖拽
onStart () { onStart () {
this.drag = true; this.drag = true;
......
src/components/elclick.vue
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
export default { export default {
name: 'elClick', name: 'elClick',
components: {}, components: {},
props: ['dynamicTagObj'], props: ['activedAction'],
data () { data () {
return { return {
elementInfos: {}, // 存储当前选中元素的信息 elementInfos: {}, // 存储当前选中元素的信息
...@@ -40,15 +40,15 @@ export default { ...@@ -40,15 +40,15 @@ export default {
"InnerText": "", "InnerText": "",
"Timeout": 5000 "Timeout": 5000
}, },
"Name": this.actionName,
"Alias": this.actionType
}, },
componentConfigs: {}
}; };
}, },
created () { created () {
console.log(this.dynamicTagObj); console.log(this.activedAction);
// if (Object.keys(this.dynamicTagObj.actionConfigs).length == 0) return if (this.activedAction.Target!==undefined){
// this.actionConfig = this.dynamicTagObj.actionConfigs this.actionConfig.Target = this.activedAction.Target;
}
}, },
mounted () { }, mounted () { },
beforeDestroy () { beforeDestroy () {
...@@ -62,9 +62,9 @@ export default { ...@@ -62,9 +62,9 @@ export default {
submit () { submit () {
console.log(this.actionConfig); console.log(this.actionConfig);
// 防止父级改变，子级未改变重新赋值 // 防止父级改变，子级未改变重新赋值
// this.actionConfig.Name = this.actionName; // console.log(this.componentConfigs);
// this.actionConfig.Alias = this.actionType; this.activedAction.Target = this.actionConfig.Target;
this.$emit('dataChanged', this.actionConfig); 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