feat(schema-generator): 生成表单编辑器

lljj-x · Oct 26, 2020 · dd5eecb · dd5eecb
1 parent ad048d8
commit dd5eecb
Show file tree

Hide file tree

Showing 14 changed files with 227 additions and 508 deletions.
diff --git a/packages/demo/src/schema-generator/views/editor/Editor.vue b/packages/demo/src/schema-generator/views/editor/Editor.vue
diff --git a/packages/demo/src/schema-generator/views/editor/EditorHeader.vue b/packages/demo/src/schema-generator/views/editor/EditorHeader.vue
@@ -25,7 +25,7 @@
         display: flex;
         justify-content: space-between;
         align-items: center;
-        box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
+        box-shadow: 0 8px 24px -2px rgba(0,0,0,.05), 0 1px 1px 0 rgba(0,0,0,0.2);
     }
     .logo {
         display: flex;

diff --git a/packages/demo/src/schema-generator/views/editor/EditorToolBar.vue b/packages/demo/src/schema-generator/views/editor/EditorToolBar.vue
@@ -18,25 +18,14 @@
                            @start="$emit('onDragStart')"
                            @end="$emit('onDragEnd')"
                 >
-                    <div v-for="item in group.componentList"
-                         :key="item.title"
+                    <div v-for="(item, cIndex) in group.componentList"
+                         :key="cIndex"
                          :class="{
                              [$style.listItem]: true,
-                             draggableToolItem: true,
-                             [$style.disabled]: (currentUseComponentNum[item.componentPack.componentViewName] || 0) >= item.maxNum
+                             draggableToolItem: true
                          }"
                     >
-                        <div>
-                            <p :class="[$style.line, $style.lineIcon]">
-                                <i :class="item.icon"></i>
-                            </p>
-                            <p :class="[$style.line, $style.lineTitle]">
-                                {{ item.title }}
-                            </p>
-                            <p :class="[$style.line, $style.lineUseNum]">
-                                {{ currentUseComponentNum[item.componentPack.componentViewName] || 0 }} / {{ item.maxNum }}
-                            </p>
-                        </div>
+                        {{ item.title }}
                     </div>
                 </draggable>
             </template>
@@ -59,20 +48,11 @@
                 type: Array,
                 default: () => []
             },
-            currentUseComponentNum: {
-                default: () => ({}),
-                type: Object
-            },
             dragGroup: {
                 default: '',
                 type: String
             }
         },
-        watch: {
-            currentUseComponentNum(newVal) {
-                // console.log(newVal);
-            }
-        },
         methods: {
             // clone 当前模块
             cloneDog(toolItem) {
@@ -85,7 +65,7 @@
 <style module>
     @import "variable.css";
     .box{
-        padding: 20px;
+        padding: 10px;
     }
     .group {
         margin-top: 20px;
@@ -94,29 +74,37 @@
         }
     }
     .groupName {
-        font-size: 12px;
+        font-size: 15px;
+        font-weight: bold;
         line-height: 18px;
     }
     .groupList {
+        margin-top: -10px;
         display: flex;
         flex-wrap: wrap;
-        padding: 0 10px;
+        padding: 10px 0;
         justify-content: space-between;
     }
     .listItem {
         position: relative;
-        width: 50%;
+        margin-top: 10px;
+        width: 47%;
         max-width: 120px;  /* 避免拖动ghost样式异常 */
-        height: 80px;
+        height: 36px;
+        line-height: 36px;
         cursor: move;
         flex-shrink: 0;
         transition: box-shadow 0.3s ease;
         display: flex;
         text-align: center;
         align-items: center;
         justify-content: center;
+        background-color: var(--background-color-selected);
+        border: 1px dashed transparent;
+        font-size: 12px;
         &:hover {
-            background-color: var(--background-color-selected);
+            color: #409eff;
+            border: 1px dashed #409eff;
             box-shadow: 0 0 8px 1px rgba(0,0,0,.2);
         }
     }

diff --git a/packages/demo/src/schema-generator/views/editor/common/editorData.js b/packages/demo/src/schema-generator/views/editor/common/editorData.js
@@ -17,6 +17,7 @@ function isEmptyObject(obj) {
 // 生成一个新的editor item
 export function generateEditorItem(toolItem) {
     const currentComponentPack = toolItem.componentPack;
+    const id = genId();
     return {
         ...toolItem,
         isEdit: false,
@@ -31,9 +32,7 @@ export function generateEditorItem(toolItem) {
             {}, // 初始值为空
             currentComponentPack.propsSchema
         ) : toolItem.componentValue,
-        componentViewName: currentComponentPack.componentViewName,
-        componentFormName: currentComponentPack.componentFormName,
-        // id: `${currentComponentPack.componentViewName}_${+new Date()}`,
-        id: genId(),
+        id,
+        property: id
     };
 }
diff --git a/packages/demo/src/schema-generator/views/editor/common/utils.js b/packages/demo/src/schema-generator/views/editor/common/utils.js
@@ -2,7 +2,7 @@
  * Created by Liu.Jun on 2019/11/28 18:37.
  */
 
-import { genId } from '@/_common/utils/id';
+// import { genId } from '@/_common/utils/id';
 
 
 export function deepFreeze(obj) {
@@ -20,41 +20,3 @@ export function deepFreeze(obj) {
     // 冻结自身(no-op if already frozen)
     return Object.freeze(obj);
 }
-
-// 初始化配置数据并返回所有组件
-export function getComponentsAndInitToolsConfig(configTools) {
-    // 平铺开所有组
-    const componentList = configTools.reduce((preVal, curVal) => [
-        ...preVal,
-        ...curVal.componentList
-    ], []);
-
-    // 注册组件结构
-    const data = componentList.reduce((preVal, { componentPack }) => {
-        // 修改原数据
-        // 生成 From组件和View组件 Name
-        const needViewName = !componentPack.componentViewName;
-        const needFormName = componentPack.Form && !componentPack.componentFormName;
-
-        // 需要生成viewName 或者 formName
-        if (needViewName || needFormName) {
-            const id = (componentPack.propsSchema.id || componentPack.propsSchema.$id || genId());
-            if (needViewName) componentPack.componentViewName = `${id}View`;
-            if (needFormName) componentPack.componentFormName = `${id}Form`;
-        }
-
-        if (componentPack.componentFormName) {
-            preVal[componentPack.componentFormName] = componentPack.Form;
-        }
-        preVal[componentPack.componentViewName] = componentPack.View;
-
-        Object.freeze(componentPack);
-        return preVal;
-    }, {});
-
-
-    // 冻结配置数据
-    Object.freeze(configTools);
-    window.configTools = configTools;
-    return data;
-}