feat: 优化

haixin-fang · Sep 18, 2023 · e24c985 · e24c985
1 parent 3f3b72e
commit e24c985
Show file tree

Hide file tree

Showing 15 changed files with 152 additions and 60 deletions.
diff --git a/packages/editor/src/components/NavList.vue b/packages/editor/src/components/NavList.vue
@@ -78,7 +78,6 @@
     setup(props) {
       const { proxy } = getCurrentInstance() as any;
       const { hisContrl, uiControl, formStore } = inject<Controls>("control") || {};
-      const lastTime = computed(() => formStore?.get("saveTimetemp"));
       const clearIsDisable = computed(() => formStore?.get("allFormList")?.length == 0);
       const historyIndex = computed(() => hisContrl?.get("index"));
       const historyLen = computed(() => hisContrl?.get<Array<any>>("historyList").length || 0);
@@ -100,6 +99,7 @@
         id: string;
         label: string;
         children?: Tree[];
+        name?: string;
       }
       const initTree = () => {
         if (allFormList.value && allFormList.value.length > 0) {
@@ -115,7 +115,7 @@
         if (!item.layout) {
           return {
             id: item.id,
-            label: item.ControlType + "_" + item.data.fieldName,
+            label: item.nameCn,
           };
         } else {
           let children;
@@ -138,13 +138,13 @@
                 });
                 return {
                   id: "",
-                  label: "table_Column",
+                  label: "列",
                   children,
                 };
               });
               return {
                 id: "",
-                label: "table_Row",
+                label: "行",
                 children,
               };
             });
@@ -155,14 +155,14 @@
               });
               return {
                 id: "",
-                label: item.ControlType + "_child",
+                label: item.nameCn + '-child',
                 children,
               };
             });
           }
           return {
             id: item.id,
-            label: item.ControlType + "_" + item.data.fieldName,
+            label: item.nameCn,
             children,
           };
         }
@@ -183,10 +183,7 @@
 
       const setTimeSave = () => {
         timer = setInterval(() => {
-          const nowTime = new Date().getTime();
-          if (nowTime - lastTime.value > 5 * 60 * 1000) {
-            handleFormSave("auto");
-          }
+          handleFormSave("auto");
         }, 20000);
       };
 

diff --git a/packages/editor/src/components/PropsPanel.vue b/packages/editor/src/components/PropsPanel.vue
@@ -168,6 +168,8 @@
 
       const checkValidates = async (formSave = false, type?: string) => {
         const curControlIndex = formStore?.get("currentIndex");
+        // 预览模式下不自动保存
+        if(type && preview.value)return;
         if (preview.value || save.value || formUpdate.value) {
           const ispreview = await checkFormValidate(allFormList.value);
           if (ispreview) {
@@ -176,8 +178,8 @@
           formStore?.setSave(ispreview as boolean);
           formStore?.setFormUpdate(false);
           if (ispreview) {
-            const result: BaseComponentItem[] = initFormToJson(allFormList.value);
             debugger
+            const result: BaseComponentItem[] = initFormToJson(allFormList.value);
             formStore?.set("AllFormResult", result);
             formStore?.handleDynamicForm();
             emit("save");

diff --git a/packages/editor/src/controller/form.ts b/packages/editor/src/controller/form.ts
@@ -10,7 +10,6 @@ const state = reactive<FormState>({
   preview: false, // 开启预览进行表单验证
   previewShow: false, // 预览是否展示
   save: false, // 保存
-  saveTimetemp: new Date().getTime(), //上一次保存的时间戳
   // 下一次保存的时候判断表单是否变更了，而不用变更就改变vuex的save，但是我们监听了save会形成死循环
   formUpdate: false, // 判断表单是否更新
   AllFormResult: [], // 预览和存储到数据库最终结果

diff --git a/packages/editor/src/shims-vue.d.ts b/packages/editor/src/shims-vue.d.ts
@@ -5,7 +5,6 @@ declare module "*.vue" {
   export default component;
 }
 
-
 declare module 'starfish-form'
 
 declare module "jsoneditor";

diff --git a/packages/editor/src/starfish-editor.vue b/packages/editor/src/starfish-editor.vue
@@ -16,7 +16,7 @@
       <props-panel @save="onSave" :column="menu.column"></props-panel>
     </template>
     <template #other>
-      <form-preview></form-preview>
+      <form-preview ref="formPreview"></form-preview>
     </template>
   </framework>
 </template>
@@ -85,6 +85,7 @@
     },
     setup(props:any, { emit }) {
       const workspace = ref();
+      const formPreview = ref();
       let dom: HTMLDivElement;
       const mouseenterHandler = () => {
         dom?.focus();
@@ -119,6 +120,7 @@
       provide("control", control);
       return {
         workspace,
+        formPreview,
         onSave() {
           emit("save", formStore?.get("AllFormResult"));
         },

diff --git a/packages/editor/src/styles/custom-dialog.scss b/packages/editor/src/styles/custom-dialog.scss
@@ -104,6 +104,12 @@
       text-align: right;
       padding-top: 3px;
       border-top: 1px solid #ebeef5;
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
     }
   }
 }
diff --git a/packages/editor/src/styles/nav-list.scss b/packages/editor/src/styles/nav-list.scss
@@ -28,10 +28,14 @@
       width: 20% !important;
     }
   }
-  .codeDialog {
-    height: auto;
-    .custom_code {
-      height: 100%;
+}
+.codeDialog {
+  height: auto;
+  .custom_code {
+    height: 100%;
+    flex: 1;
+    .upload-demo {
+      margin-top: 20px;
     }
   }
 }
diff --git a/packages/editor/src/type.ts b/packages/editor/src/type.ts
@@ -128,10 +128,7 @@ export interface FormState {
    * 保存
    */
   save: boolean;
-  /**
-   * 上一次保存的时间戳
-   */
-  saveTimetemp: number;
+
   /**
    * 下一次保存的时候判断表单是否变更了，而不用变更就改变save，但是我们监听了save会形成死循环
    * 判断表单是否更新

diff --git a/packages/editor/tsconfig.json b/packages/editor/tsconfig.json
@@ -2,13 +2,22 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "baseUrl": "../..",
+    "paths": {
+      "~editor/*": [
+        "./src/pages/Editor/components/*"
+      ],
+      "@/*": [
+        "./src/*"
+      ]
+    },
   },
-  "paths": {
-    "~editor/*": [
-      "src/pages/Editor/components/*"
-    ],
-    "@/*": [
-      "src/*"
-    ]
-  }
+
+  "exclude": [
+    "node_modules",
+  ],
+  "include": [
+    "*",
+    "./src/env.d.ts",
+    "./src"
+  ]
 }
diff --git a/packages/form/src/layout/Info.vue b/packages/form/src/layout/Info.vue
@@ -2,26 +2,43 @@
   <div class="starfish-formitem" :class="{ formCover: drag }">
     <div class="label" v-if="!item.data.labelShow">
       <label>{{ item.data.label }}</label>
-      <el-tooltip v-if="item.data.tip" class="item" effect="dark" :content="item.data.tip" placement="top">
+      <el-tooltip
+        v-if="item.data.tip"
+        class="item"
+        effect="dark"
+        :content="item.data.tip"
+        placement="top"
+      >
         <span class="tip iconfont icon-tishi"></span>
       </el-tooltip>
     </div>
     <div class="control">
-      <el-alert :title="item.data.title" :type="item.data.infotype" :effect="item.data.effect" :show-icon="item.data.showIcon" :closable="item.data.closable" :center="item.data.center" :description="item.data.desc"  />
+      <el-alert
+        :title="item.data.title"
+        :type="item.data.infotype"
+        :effect="item.data.effect"
+        :show-icon="item.data.showIcon"
+        :closable="item.data.closable"
+        :center="item.data.center"
+        :description="item.data.desc"
+        @close="execFunc('onClose')"
+      />
     </div>
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent } from "vue";
-  import { getFormConfig } from "../utils/fieldConfig";
-  import fieldProps from "../utils/fieldProps";
-  import { useWatch } from "../utils/customHooks";
-  export default defineComponent({
-    ControlType: "Info", // 必须与文件名匹配
-    nameCn: "提示",
-    icon: "icon-jinggao",
-    layout: true,
-    formConfig: getFormConfig("Info", [
+import { defineComponent,getCurrentInstance,ComponentInternalInstance } from "vue";
+import { getFormConfig } from "../utils/fieldConfig";
+import fieldProps from "../utils/fieldProps";
+import { useWatch } from "../utils/customHooks";
+export default defineComponent({
+  ControlType: "Info", // 必须与文件名匹配
+  nameCn: "提示",
+  icon: "icon-jinggao",
+  layout: true,
+  formConfig: getFormConfig(
+    "Info",
+    [
       { fieldName: "title", component: "Text", label: "标题" },
       { fieldName: "desc", component: "Text", label: "文字描述" },
       { fieldName: "labelShow", component: "Switch", label: "标签隐藏" },
@@ -30,12 +47,23 @@
       { fieldName: "showIcon", component: "Switch", label: "	是否显示类型图标" },
       { fieldName: "effect", component: "Selected" },
       { fieldName: "infotype", component: "Selected" },
-    ], ['required', 'tip', 'rule']),
-    props: {
-      ...fieldProps,
-    },
-    setup(props) {
-      useWatch(props);
-    },
-  });
+    ],
+    ["required", "tip", "rule"]
+  ),
+  actionType: ["onClose"],
+  props: {
+    ...fieldProps,
+  },
+  setup(props) {
+     const vm = getCurrentInstance() as ComponentInternalInstance;
+    useWatch(props);
+    return {
+      execFunc(type: string) {
+          if (props.item.data.action && props.item.data.action[type]) {
+            window.VApp.$Flex.funcExec(props.item.data.action[type], vm.proxy, [props.item.data.fieldName]);
+          }
+        },
+    };
+  },
+});
 </script>
diff --git a/packages/form/src/layout/collapse.vue b/packages/form/src/layout/collapse.vue
@@ -3,21 +3,21 @@
     <div class="control">
       <el-collapse v-model="activeName" :accordion="item.data.accordion">
         <el-collapse-item :title="colItem.name" :name="colItem.name" v-for="(colItem, index) in item.data.items" :key="index">
-          <tempate v-if="drag">
+          <template v-if="drag">
             <draggable class="draggable-box" animation="300" ghostClass="itemGhost" v-model="colItem.list" @add="addControl($event, colItem.list, index)" group="starfish-form" @choose="chooseClick($event, colItem.list)" item-key="id" @update="changePos($event, colItem.list)">
               <template #item="{ element, index }">
                 <Shape v-if="element.data" :active="currentId == element.id" :currentIndex="index" :currentId="element.id" :len="colItem.list.length" :item="element"> <component :is="element.ControlType" :drag="true" :item="element" :data="{}"></component></Shape>
               </template>
             </draggable>
-          </tempate>
+          </template>
           <template v-else-if="!drag && colItem.list.length > 0">
-            <template v-for="listItem in colItem.list" :key="listItem.id">
-              <el-form-item :prop="listItem.data.fieldName" v-if="!listItem.layout">
+            <template v-for="listItem in colItem.list" >
+              <el-form-item :prop="listItem.data.fieldName" v-if="!listItem.layout" :key="listItem.id">
               <!-- v-if="listItem.show" -->
                 <component ref="controlObj" @change="$emit('change')" :is="listItem.ControlType" :item="listItem" :data="data || '{}'" :drag="false" ></component>
               </el-form-item>
               <template v-else>
-                <component ref="controlObj" @change="$emit('change')" :is="listItem.ControlType" :item="listItem" :data="data || '{}'" :drag="false" ></component>
+                <component ref="controlObj" @change="$emit('change')" :is="listItem.ControlType" :item="listItem" :data="data || '{}'" :key="listItem.id" :drag="false" ></component>
               </template>
             </template>
           </template>

diff --git a/packages/form/src/styles/collapse.scss b/packages/form/src/styles/collapse.scss
@@ -4,8 +4,12 @@
     background: white;
     border: 1px #ccc dashed;
     box-sizing: border-box;
+    width: 100%;
   }
   :deep(.el-collapse-item__content) {
     padding-bottom: 5px;
+    > * {
+      width: 100%;
+    }
   }
 }
diff --git a/packages/form/tsconfig.json b/packages/form/tsconfig.json
@@ -1,6 +1,13 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "baseUrl": "../..",
+    "baseUrl": "../.."
   },
+  "exclude": [
+    "node_modules",
+  ],
+  "include": [
+    "*",
+    "./src/env.d.ts"
+  ]
 }
diff --git a/playground/index.html b/playground/index.html
@@ -4,9 +4,49 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Starfish-Vue3-lowcode</title>
+    <style>
+      .first-screen-loading {
+        width: 200px;
+        height: 200px;
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        margin-top: -100px;
+        margin-left: -100px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      .first-screen-loading-spinner {
+        width: 36px;
+        height: 36px;
+        border: 3px solid #4d7cff;
+        border-top-color: transparent;
+        border-radius: 50%;
+        animation: spinner .8s linear infinite;
+      }
+      .first-screen-loading-text {
+        margin-top: 20px;
+        color: #4d7cff;
+      }
+      @keyframes spinner {
+        0% {
+          transform: rotate(0deg);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+    </style>
   </head>
   <body>
-    <div id="app"></div>
+    <div id="app">
+      <div class="first-screen-loading">
+        <div class="first-screen-loading-spinner"></div>
+        <div class="first-screen-loading-text">正在加载中，请稍等 ...</div>
+      </div>
+    </div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,7 +5,6 @@ declare module "*.vue" { @@
       export default component;
     }
     declare module 'starfish-form'
     declare module "jsoneditor";
@@ Expand Down @@