修改看版配置

src/views/boardGenerate/index.vue

@@ -225,7 +225,29 @@
     </div>
   </div>
   <div class="rightPanel">
-    <el-form :model="nodeAttrForm" label-width="auto" style="max-width: 600px" v-if="nodeAttrForm">
+    <el-collapse>
+      <el-collapse-item title="基础设置" name="1" v-if="Object.keys(nodeDataForm).length>0">
+        <el-form :model="nodeDataForm" label-width="auto" style="max-width: 600px">
+          <el-form-item label="x">
+            <el-input-number :precision="0" :step="1" v-model="nodeDataForm.position.x" style="width: 100%"
+                             @change="updateNode(nodeAttrForm.id,nodeAttrForm,{ replace: true })" />
+          </el-form-item>
+          <el-form-item label="y">
+            <el-input-number :precision="0" :step="1" v-model="nodeDataForm.position.y" style="width: 100%"
+                             @change="updateNode(nodeAttrForm.id,nodeAttrForm,{ replace: true })" />
+          </el-form-item>
+          <el-form-item label="宽度">
+            <el-input-number :precision="0" :step="1" v-model="nodeDataForm.dimensions.width" style="width: 100%"
+                             @change="updateNode(nodeAttrForm.id,nodeAttrForm,{ replace: true })" />
+          </el-form-item>
+          <el-form-item label="高度">
+            <el-input-number :precision="0" :step="1" v-model="nodeDataForm.dimensions.height" style="width: 100%"
+                             @change="updateNode(nodeAttrForm.id,nodeAttrForm,{ replace: true })" />
+          </el-form-item>
+        </el-form>
+      </el-collapse-item>
+      <el-collapse-item title="数据配置" name="2" v-if="Object.keys(nodeAttrForm).length>0">
+        <el-form :model="nodeAttrForm" label-width="auto" style="max-width: 600px">
           <el-form-item label="默认内容" v-if="Object.keys(nodeAttrForm).includes('defaultInput')">
             <el-input v-model="nodeAttrForm.defaultInput" style="width: 100%" />
           </el-form-item>
@@ -321,6 +343,15 @@
             />
           </el-form-item>
         </el-form>
+      </el-collapse-item>
+      <el-collapse-item title="自定义配置" name="3" v-if="customDataForm">
+        <el-form :model="customDataForm" label-width="auto" style="max-width: 600px">
+          <el-form-item label="自定义内容">
+            <el-input type="textarea" v-model="customDataForm.option" style="width: 100%" />
+          </el-form-item>
+        </el-form>
+      </el-collapse-item>
+    </el-collapse>
   </div>
   <el-dialog v-model="pageSettingVisible" title="页面设置" width="500">
     <el-form :model="pageSettingForm">
@@ -389,8 +420,10 @@ const { onDragStart, onDrop, onDragOver } = tool();
 
 // flow内置方法
 const {
-  addEdges
+  addEdges,
+  updateNode
 } = useVueFlow();
+console.log(updateNode);
 
 const pageSettingVisible = ref(false);
 const pageSettingForm = ref({});
@@ -418,7 +451,9 @@ onMounted(async () => {
   edges.value = JSON.parse(localStorage.getItem('EDGES') || '[]');
   pageData.value = JSON.parse(localStorage.getItem('PAGEDATA'));
 });
+const customDataForm = ref({});
 const nodeAttrForm = ref({});
+const nodeDataForm = ref({});
 const logEvent = async (eventname, event) => {
   switch (eventname) {
     case 'connect':
@@ -437,15 +472,23 @@ const logEvent = async (eventname, event) => {
       break;
     case 'paneClick':
       nodeAttrForm.value = {};
+      nodeDataForm.value = {};
+      customDataForm.value = {};
       break;
     case 'click':
       nodeAttrForm.value = event.node.data.options;
+      nodeDataForm.value = event.node;
+      customDataForm.value = event.node.data.customData;
       break;
     case 'nodeDrag':
       if (event.nodes.length === 1) {
         nodeAttrForm.value = event.node.data.options;
+        nodeDataForm.value = event.node;
+        customDataForm.value = event.node.data.customData;
       } else {
         nodeAttrForm.value = {};
+        nodeDataForm.value = {};
+        customDataForm.value = {};
       }
       break;
     case 'contextmenu':

src/views/boardGenerate/nodes/board/barNode.vue

@@ -209,6 +209,11 @@ watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.string
     chart && chart.setOption(getOption(), true);
   }
 }, { deep: true, immediate: true });
+watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => {
+  if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
+    chart?.resize();
+  }
+}, { deep: true, immediate: true });
 const emit = defineEmits(['resize']);
 const resize = (e) => {
   chart.resize();

src/views/boardGenerate/nodes/board/curveNode.vue

@@ -216,6 +216,11 @@ watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.string
     chart && chart.setOption(getOption(), true);
   }
 }, { deep: true, immediate: true });
+watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => {
+  if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
+    chart?.resize();
+  }
+}, { deep: true, immediate: true });
 const emit = defineEmits(['resize']);
 const resize = (e) => {
   chart.resize();

src/views/boardGenerate/nodes/board/customBoardNode.vue

@@ -94,6 +94,11 @@ watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.string
     chart && chart.setOption(getOption(), true);
   }
 }, { deep: true, immediate: true });
+watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => {
+  if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
+    chart?.resize();
+  }
+}, { deep: true, immediate: true });
 const emit = defineEmits(['resize']);
 const resize = (e) => {
   chart.resize();

src/views/boardGenerate/nodes/board/lineNode.vue

@@ -216,6 +216,11 @@ watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.string
     chart && chart.setOption(getOption(), true);
   }
 }, { deep: true, immediate: true });
+watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => {
+  if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
+    chart?.resize();
+  }
+}, { deep: true, immediate: true });
 const emit = defineEmits(['resize']);
 const resize = (e) => {
   chart.resize();

src/views/boardGenerate/nodes/board/multiBarsNode.vue

@@ -219,6 +219,11 @@ watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.string
   }
 }, { deep: true, immediate: true });
 
+watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => {
+  if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
+    chart?.resize();
+  }
+}, { deep: true, immediate: true });
 const emit = defineEmits(['resize']);
 const resize = (e) => {
   chart.resize();

src/views/boardGenerate/nodes/board/multiCurvesNode.vue

@@ -225,6 +225,11 @@ watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.string
     chart && chart.setOption(getOption(), true);
   }
 }, { deep: true, immediate: true });
+watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => {
+  if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
+    chart?.resize();
+  }
+}, { deep: true, immediate: true });
 
 const emit = defineEmits(['resize']);
 const resize = (e) => {

src/views/boardGenerate/nodes/board/multiLinesNode.vue

@@ -225,6 +225,11 @@ watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.string
     chart && chart.setOption(getOption(), true);
   }
 }, { deep: true, immediate: true });
+watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => {
+  if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
+    chart?.resize();
+  }
+}, { deep: true, immediate: true });
 
 const emit = defineEmits(['resize']);
 const resize = (e) => {

src/views/boardGenerate/nodes/board/pieNode.vue

@@ -139,6 +139,11 @@ watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.string
     chart && chart.setOption(getOption(), true);
   }
 }, { deep: true, immediate: true });
+watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => {
+  if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
+    chart?.resize();
+  }
+}, { deep: true, immediate: true });
 const emit = defineEmits(['resize']);
 const resize = (e) => {
   chart.resize();