|
|
@@ -53,6 +53,31 @@
|
|
|
|
|
|
</Controls>
|
|
|
|
|
|
+ <el-dialog v-model="changeNameshow" align-center :modal="false" :close-on-click-modal="false"
|
|
|
+ :append-to-body="true" draggable :fullscreen="false" :modal-append-to-body="false" modal-class="summary-dlg"
|
|
|
+ :before-close="handleClose" width="400" class="dialog_class bgcolor colortext tianjia sel">
|
|
|
+ <template #header="{ titleId, titleClass }">
|
|
|
+ <div class="my-header ">
|
|
|
+ <h4 :id="titleId" :class="titleClass">修改名称</h4>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div style="margin-top: 20px;padding: 20px;">
|
|
|
+ <el-form :model="changeName" label-width="100px" class="demo-ruleForm">
|
|
|
+ <el-form-item label="新名称：" prop="name">
|
|
|
+ <el-input v-model="changeName.name" placeholder="请输入名称"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button @click="changeNameshow = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="handleUpdate">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
</VueFlow>
|
|
|
<div class="dnd-flow">
|
|
|
|
|
|
@@ -142,6 +167,13 @@ let nnum=ref(0);
|
|
|
const { onDragOver, onDrop, onDragLeave, isDragOver } = useDragAndDrop();
|
|
|
const edges = ref([]);
|
|
|
const nodes = ref([]);
|
|
|
+
|
|
|
+const changeNameshow = ref(false);
|
|
|
+const changeName = ref({
|
|
|
+ name: '',
|
|
|
+
|
|
|
+})
|
|
|
+
|
|
|
onConnect((connection) => {
|
|
|
console.log(connection);
|
|
|
connection.type = 'smoothstep';// smoothstep straight
|
|
|
@@ -153,11 +185,16 @@ onConnect((connection) => {
|
|
|
seledge.value=null;
|
|
|
})
|
|
|
//修改名称
|
|
|
-function handleUpdate(){
|
|
|
-
|
|
|
- noid.value.data.label=labelname.value;
|
|
|
- console.log( noid.value.data.label);
|
|
|
-}
|
|
|
+const handleUpdate = () => {
|
|
|
+ if (noid.value && noid.value.data) {
|
|
|
+ noid.value.data.label = changeName.value.name; // 更新名称
|
|
|
+ console.log(noid.value.data.label); // 打印更新后的值
|
|
|
+ } else {
|
|
|
+ console.error("noid.value 或 noid.value.data 未定义"); // 错误日志
|
|
|
+ }
|
|
|
+ changeNameshow.value = false; // 更新后关闭对话框
|
|
|
+ // noid.value.data.label = labelname;
|
|
|
+};
|
|
|
emitter.on('child2Data', data => {
|
|
|
datatree.value = data;
|
|
|
console.log(datatree.value);
|
|
|
@@ -167,8 +204,10 @@ onUnmounted(() => {
|
|
|
});
|
|
|
function onNodeClick(e) {
|
|
|
noid.value = e.node;
|
|
|
- labelname.value=e.node.data.label;
|
|
|
- console.log(e.node);
|
|
|
+ changeName.value.name=e.node.data.label;
|
|
|
+ console.log("shuju:",e.node.data);
|
|
|
+ console.log("noid.value:",noid.value);
|
|
|
+ console.log("changeName.value:",changeName.value.name);
|
|
|
djshow.value = !djshow.value;
|
|
|
// if(djshow.value){
|
|
|
// console.log('选中');
|
|
|
@@ -245,41 +284,14 @@ function onSelection(){
|
|
|
console.log(nodesitem.value[i]);
|
|
|
nodes.value.push(nodesitem.value[i])
|
|
|
}
|
|
|
-console.log(1111)
|
|
|
-
|
|
|
- console.log( nodes.value);
|
|
|
-//console.log(nodesitem.value);
|
|
|
- //nodes.value.push( nodes.value)
|
|
|
-// let item= {
|
|
|
-// id:nnum.value.toString(),
|
|
|
-// data: { label: '模块化' },
|
|
|
-// position: positionxy,
|
|
|
-// style: { backgroundColor: bgcolor.value, width: '200px',height: '200px' },
|
|
|
-// }
|
|
|
-// console.log(Nested2.value)
|
|
|
-// nodes.value = Nested2.value.map(node => {
|
|
|
-// positionxy=node.position;
|
|
|
-// if(node.parentNode==undefined){
|
|
|
-// node.parentNode=item.id;
|
|
|
-// // node.expandParent=true;
|
|
|
-// node.extent='parent';
|
|
|
-
|
|
|
-// }
|
|
|
-// return node;
|
|
|
-// });
|
|
|
-// Nested2.value.push(item)
|
|
|
-// nodes.value.push(item);
|
|
|
-// console.log( nodes.value);
|
|
|
-
|
|
|
-// }else{
|
|
|
-// console.log(222)
|
|
|
-// }
|
|
|
-
|
|
|
+
|
|
|
+ console.log( nodes.value);
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
function onNodeDoubleClick(e) {
|
|
|
noid.value = e.node;
|
|
|
console.log( e.node.data.name);
|
|
|
- console.log(111111)
|
|
|
if (e.node.data.name == '优化器') {
|
|
|
emit('optimizerfalse','优化器');
|
|
|
}else if(e.node.data.name=="进化优化器"){
|
|
|
@@ -323,9 +335,27 @@ function onEdgeClick(e) {
|
|
|
function logEvent(name, event) {
|
|
|
console.log(2222)
|
|
|
}
|
|
|
-function onContextMenu(event) {
|
|
|
|
|
|
-}
|
|
|
+// 右键更改名字
|
|
|
+const onContextMenu = (e) => {
|
|
|
+ e.preventDefault(); // 阻止浏览器默认的右键菜单
|
|
|
+
|
|
|
+ const node = e.target.closest(".vue-flow__node");
|
|
|
+ console.log("nodes:",nodes);
|
|
|
+ console.log("node:",node);
|
|
|
+ if (node) {
|
|
|
+ // 获取当前右键点击的节点
|
|
|
+ const nodeId = node.getAttribute("data-id");
|
|
|
+ const clickedNode = nodes.value.find((n) => n.id === nodeId);
|
|
|
+ console.log("clickedNode:",clickedNode);
|
|
|
+
|
|
|
+ if (clickedNode) {
|
|
|
+ noid.value = clickedNode;
|
|
|
+ changeName.value.name = clickedNode.label; // 将当前节点的label放入弹窗中
|
|
|
+ changeNameshow.value = true; // 显示弹窗
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
onInit((vueFlowInstance) => {
|
|
|
vueFlowInstance.fitView()
|
|
|
})
|
|
|
@@ -333,7 +363,7 @@ onInit((vueFlowInstance) => {
|
|
|
onNodeDragStop(({ event, nodes, node }) => {
|
|
|
console.log(nodes)
|
|
|
Nested.value=nodes;
|
|
|
- //console.log('Node Drag Stop', { event, nodes, node })
|
|
|
+ console.log('Node Drag Stop', { event, nodes, node })
|
|
|
})
|
|
|
|
|
|
onConnect((connection) => {
|
tangjunhao