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