fix: 自定义json后保存失效 #8

haixin-fang · Mar 22, 2024 · 390b31a · 390b31a
1 parent cdfda62
commit 390b31a
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 9 deletions.
diff --git a/packages/editor/package.json b/packages/editor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "starfish-editor",
-  "version": "1.1.17",
+  "version": "1.1.18",
   "main": "dist/starfish-editor.umd.js",
   "style": "dist/style.css",
   "module": "dist/starfish-editor.es.js",

diff --git a/packages/editor/src/components/NavList.vue b/packages/editor/src/components/NavList.vue
@@ -194,7 +194,24 @@
           :filter-node-method="filterNode"
           @node-click="myClick"
           style="margin-top: 20px"
-        />
+        >
+          <template #default="{ node, data }">
+            <span class="custom-tree-node">
+              <i
+                class="iconfont"
+                :class="data.icon"
+                style="font-size: 12px; margin-right: 5px"
+              ></i>
+              <span>{{ node.label }}</span>
+              <!-- <span>
+                <i
+                  @click="remove(node, data)"
+                  class="iconfont icon-shanchu1"
+                ></i>
+              </span> -->
+            </span>
+          </template>
+        </el-tree>
       </div>
     </el-drawer>
     <custom-dialog ref="jsonDialog" :width="800" dialogclass="codeDialog">
@@ -301,11 +318,12 @@ export default defineComponent({
         return [];
       }
     };
-    function toTree(item: any): Tree {
+    function toTree(item: any): any {
       if (!item.layout) {
         return {
           id: item.id,
           label: item.nameCn,
+          icon: item.icon,
         };
       } else {
         let children;
@@ -467,7 +485,7 @@ export default defineComponent({
             element.msRequestFullscreen();
           }
         } else {
-          const doc:any = document;
+          const doc: any = document;
           if (doc.exitFullscreen) {
             doc.exitFullscreen();
           } else if (doc.mozCancelFullScreen) {
@@ -535,6 +553,7 @@ export default defineComponent({
           });
         }
       },
+      // remove(node, data) {},
     };
   },
 });

diff --git a/packages/editor/src/main.ts b/packages/editor/src/main.ts
@@ -7,6 +7,7 @@ import vm from "./utils/vm";
 import flex from "./utils/_";
 import "starfish-form/dist/style.css";
 import StarfishEditor from "./starfish-editor.vue";
+import Loading from "@/common/Loading.vue";
 export default {
   install: (app: App) => {
     app.config.globalProperties.$EventBus = vm;
@@ -36,7 +37,10 @@ export default {
     );
     app.component(
       "draggable",
-      defineAsyncComponent(() => import("vuedraggable"))
+      defineAsyncComponent({
+        loader: () => import("vuedraggable"),
+        loadingComponent: Loading,
+      })
     );
     app.component(
       "Shape",

diff --git a/packages/editor/src/starfish-editor.vue b/packages/editor/src/starfish-editor.vue
@@ -16,7 +16,11 @@
       <workspace ref="workspace"></workspace>
     </template>
     <template #propsPanel v-if="panel.length > 0">
-      <props-panel @save="onSave" :column="menu.column" :panel="panel"></props-panel>
+      <props-panel
+        @save="onSave"
+        :column="menu.column"
+        :panel="panel"
+      ></props-panel>
     </template>
     <template #other>
       <form-preview ref="formPreview"></form-preview>
@@ -103,8 +107,8 @@ export default defineComponent({
     // 右侧配置属性tab
     panel: {
       type: Array,
-      default: () => (["form", "json", "global"])
-    }
+      default: () => ["form", "json", "global"],
+    },
   },
   setup(props: any, { emit }) {
     const workspace = ref();
@@ -155,6 +159,7 @@ export default defineComponent({
           return window.VApp.$Flex.jsonToForm(json);
         });
         formStore.updateAllFormList(newJson);
+        formStore?.set("save", true);
       },
     };
   },

diff --git a/packages/editor/src/styles/nav-list.scss b/packages/editor/src/styles/nav-list.scss
@@ -50,3 +50,10 @@
     }
   }
 }
+.custom-tree-node {
+  display: flex;
+  align-items: center;
+  span:last-child {
+    justify-content: flex-end;
+  }
+}
diff --git a/playground/package.json b/playground/package.json
@@ -11,7 +11,7 @@
   "dependencies": {
     "@element-plus/icons-vue": "^2.0.8",
     "element-plus": "^2.2.12",
-    "starfish-editor": "^1.1.17",
+    "starfish-editor": "^1.1.18",
     "starfish-form": "^1.2.9",
     "vite": "^4.5.2",
     "vue": "^3.2.37",