修改看版配置

src/views/boardGenerate/index.vue

@@ -495,16 +495,17 @@ onMounted(async () => {
     .then((res) => {
       let data = res.data;
       boardData.value = data;
-      nodes.value = data.designPagePointList.map(e => {
+      nodes.value = data.designPagePointList?.length !== 0 ? data.designPagePointList.map(e => {
         let data = {};
         let savaField = ['customData', 'options'];
-        Object.keys(e.data).forEach((key) => {
+        let dataContent = JSON.parse(e.dataContent) || {};
+        Object.keys(dataContent).forEach((key) => {
           if (savaField.includes(key)) {
-            data[key] = e.data[key];
+            data[key] = dataContent[key];
           } else {
-            if (Array.isArray(e.data[key])) {
+            if (Array.isArray(dataContent[key])) {
               data[key] = [];
-            } else if (e.data[key] && typeof e.data[key] === 'object' && !Array.isArray(e.data[key])) {
+            } else if (dataContent[key] && typeof dataContent[key] === 'object' && !Array.isArray(dataContent[key])) {
               data[key] = {};
             } else {
               data[key] = null;
@@ -516,17 +517,17 @@ onMounted(async () => {
           id: e.pagePointId,
           name: e.pagePointName,
           dimensions: {
-            width: e.dimensions.width,
-            height: e.dimensions.height
+            width: e.width,
+            height: e.height
           },
           position: {
-            x: e.position.x,
-            y: e.position.y
+            x: e.posX,
+            y: e.posY
           },
           type: e.pointType,
           data: JSON.parse(e.dataContent)
         };
-      }) || [{
+      }) : [{
         id: `area_${uuidv4().replaceAll('-', '_')}`,
         name: 'area',
         type: 'area',
@@ -629,7 +630,7 @@ const save = () => {
 
   editBoardApi({
     ...boardData.value,
-    designPageEdgesList: nodes.value.map(e => {
+    designPagePointList: nodes.value.map(e => {
       let data = {};
       let savaField = ['customData', 'options'];
       Object.keys(e.data).forEach((key) => {
@@ -648,6 +649,7 @@ const save = () => {
       });
       return {
         activeFlag: '1',
+        pageConfigId: boardData.value.pageConfigId,
         pagePointId: e.id,
         pagePointName: e.name,
         width: e.dimensions.width,
@@ -658,9 +660,11 @@ const save = () => {
         dataContent: JSON.stringify(data)
       };
     }),
-    designPagePointList: edges.value.map(e => {
+    designPageEdgesList: edges.value.map(e => {
+      console.log(e);
       return {
         activeFlag: '1',
+        pageConfigId: boardData.value.pageConfigId,
         pageEdgesId: e.id,
         sourceNodeId: e.source,
         targetNodeId: e.target,

src/views/boardGenerate/view.vue

@@ -4,7 +4,7 @@
     <div v-for="i in nodes" class="node" :style="{left:i.position?.x+'px',top: i.position?.y+'px'}">
       <template v-if="i.type === 'customBoard'">
         <CustomBoardNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></CustomBoardNode>
-      </template>
+      </template>00
       <template v-if="i.type === 'customData'">
         <CustomDataNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></CustomDataNode>
       </template>
@@ -55,6 +55,7 @@
   </div>
 </template>
 <script setup lang="ts">
+import { useRouter } from 'vue-router';
 import TimeNode from './nodes/form/timeNode.vue';
 import DataNode from './nodes/data/dataNode.vue';
 import LineNode from './nodes/board/lineNode.vue';
@@ -72,6 +73,9 @@ import TextNode from './nodes/form/textNode.vue';
 import ImgNode from './nodes/form/imgNode.vue';
 import PieNode from '@/views/boardGenerate/nodes/board/pieNode.vue';
 import StaticDataNode from './nodes/data/staticDataNode.vue';
+import { getBoardApi } from '@/views/boardGenerate/api/boardList';
+
+const router = useRouter();
 
 const nodes = ref([]);
 const edges = ref([]);
@@ -97,8 +101,62 @@ const getInputData = (e) => {
   return outputData;
 };
 onMounted(() => {
-  nodes.value = JSON.parse(localStorage.getItem('NODES') || '[]');
-  edges.value = JSON.parse(localStorage.getItem('EDGES') || '[]');
+  getBoardApi(router.currentRoute.value.query.id)
+    .then((res) => {
+      let data = res.data;
+      nodes.value = data.designPagePointList?.length !== 0 ? data.designPagePointList.map(e => {
+        let data = {};
+        let savaField = ['customData', 'options'];
+        let dataContent = JSON.parse(e.dataContent) || {};
+        Object.keys(dataContent).forEach((key) => {
+          if (savaField.includes(key)) {
+            data[key] = dataContent[key];
+          } else {
+            if (Array.isArray(dataContent[key])) {
+              data[key] = [];
+            } else if (dataContent[key] && typeof dataContent[key] === 'object' && !Array.isArray(dataContent[key])) {
+              data[key] = {};
+            } else {
+              data[key] = null;
+            }
+
+          }
+        });
+        return {
+          id: e.pagePointId,
+          name: e.pagePointName,
+          dimensions: {
+            width: e.width,
+            height: e.height
+          },
+          position: {
+            x: e.posX,
+            y: e.posY
+          },
+          type: e.pointType,
+          data: JSON.parse(e.dataContent)
+        };
+      }) : [{
+        id: `area_${uuidv4().replaceAll('-', '_')}`,
+        name: 'area',
+        type: 'area',
+        position: {
+          x: 0,
+          y: 0
+        },
+        data: {}
+      }];
+      edges.value = data.designPageEdgesList.map(e => {
+        return {
+          id: e.pageEdgesId,
+          source: e.sourceNodeId,
+          target: e.targetNodeId,
+          type: e.edgeType,
+          targetHandle: e.targetHandleId,
+          sourceHandle: e.sourceHandleId
+        };
+      }) || [];
+    });
   area.value = JSON.parse(localStorage.getItem('PAGEDATA'));
 });
 </script>