feat(schema-generator): 更新schema生成器 支持配置数组

Author: lljj-x

packages/demo/src/schema-generator/views/editor/Editor.vue

@@ -1,7 +1,8 @@
 <template>
     <div v-loading="loading">
         <EditorHeader default-active="4">
-            <el-button @click="handleToDemo">在 Demo 页验证</el-button>
+            <el-button plain @click="handleToDemo">Playground中验证</el-button>
+            <el-button type="primary" plain @click="handlePreview">预览展示</el-button>
             <el-button type="primary" @click="handleExportSchema">导出Schema</el-button>
         </EditorHeader>
 
@@ -204,6 +205,20 @@
                     formProps: filter(formProps, defaultConfig.formProps)
                 };
             },
+            handlePreview() {
+                const props = this.getExportCode();
+                componentWithDialog({
+                    VueComponent: VueJsonFrom,
+                    dialogProps: {
+                        title: '预览展示',
+                        width: '1000px'
+                    },
+                    componentProps: {
+                        value: {},
+                        ...props
+                    }
+                });
+            },
             handleExportSchema() {
                 componentWithDialog({
                     VueComponent: ExportSchemaView,

packages/demo/src/schema-generator/views/editor/common/editorData.js

@@ -130,7 +130,10 @@ export function editorItem2SchemaFieldProps(editorItem, formData) {
         disabled: false,
         showPassword: false,
         showWordLimit: false,
-        type: 'text'
+        type: 'text',
+
+        showTitle: true,
+        showDescription: true,
     };
 
     // uiSchema

packages/demo/src/schema-generator/views/editor/components/NestedEditor.vue

@@ -12,6 +12,10 @@
                  w100: showNestedEditor(item),
                  [$style.formItem]: true
              }"
+             :style=" item.componentValue.baseValue.uiOptions.width ? {
+                 width: item.componentValue.baseValue.uiOptions.width,
+                 flexBasis: item.componentValue.baseValue.uiOptions.width
+             } : {}"
         >
             <ViewComponentWrap
                 :form-data="formData"
@@ -179,6 +183,12 @@
                     align-items: center;
                     justify-content: flex-start;
                     align-content: flex-start;
+                    :global {
+                        .el-form-item {
+                            width: 100% !important;
+                            flex-basis: 100% !important;
+                        }
+                    }
                 }
             }
             &.layoutColumn-1 {

packages/demo/src/schema-generator/views/editor/components/ViewComponentWrap.vue

@@ -13,27 +13,31 @@
                 :class="$style.toolBarBtn"
                 class="el-icon-caret-top"
                 title="上移"
+                type="button"
                 @click="$emit('onOperate', { item: editorItem, command: 'moveUp'})"
             ></button>
             <button
                 :disabled="editorItem.toolBar.moveDownDisabled"
                 :class="$style.toolBarBtn"
                 class="el-icon-caret-bottom"
                 title="下移"
+                type="button"
                 @click="$emit('onOperate', { item: editorItem, command: 'moveDown'})"
             ></button>
             <button
                 :disabled="editorItem.toolBar.copyDisabled"
                 :class="[$style.toolBarBtn]"
                 class="el-icon-copy-document"
                 title="复制"
+                type="button"
                 @click="$emit('onOperate', { item: editorItem, command: 'copy' })"
             ></button>
             <button
                 :disabled="editorItem.toolBar.removeDisabled"
                 :class="$style.toolBarBtn"
                 class="el-icon-delete"
                 title="移除"
+                type="button"
                 @click="$emit('onOperate', { item: editorItem, command: 'remove' })"
             ></button>
         </div>

packages/demo/src/schema-generator/views/editor/viewComponents/genSchema.js

@@ -32,6 +32,22 @@ function genBaseVal(type = 'string') {
                             title: '默认值',
                             type,
                             'ui:placeholder': '输入默认值'
+                        },
+                    } : {},
+                    ...['array'].includes(type) ? {
+                        minItems: {
+                            title: '最少子元素',
+                            type: 'number'
+                        },
+                        maxItems: {
+                            title: '最多子元素',
+                            type: 'number'
+                        },
+                        uniqueItems: {
+                            type: 'boolean',
+                            title: '不允许重复项',
+                            'ui:widget': 'el-switch',
+                            default: false
                         }
                     } : {}
                 }
@@ -40,6 +56,12 @@ function genBaseVal(type = 'string') {
                 type: 'object',
                 properties: {
                     ...!['array', 'object'].includes(type) ? {
+                        width: {
+                            title: '宽度',
+                            type: 'string',
+                            description: '请输入style width 支持的格式，<br />比如<strong style="font-weight: bold;">10%、100px</strong>等，推荐百分比单位',
+                            'ui:placeholder': '请输入FormItem宽度'
+                        },
                         labelWidth: {
                             title: '标签宽度',
                             type: 'number',
@@ -55,7 +77,20 @@ function genBaseVal(type = 'string') {
                             type: 'boolean',
                             default: false
                         }
-                    } : {}
+                    } : {
+                        showTitle: {
+                            title: '显示标题',
+                            type: 'boolean',
+                            default: true,
+                            'ui:widget': 'el-switch'
+                        },
+                        showDescription: {
+                            title: '显示描述',
+                            type: 'boolean',
+                            default: true,
+                            'ui:widget': 'el-switch'
+                        }
+                    },
                 }
             }
         }

packages/lib/src/JsonSchemaForm/fieldComponents/Widget.js

@@ -183,7 +183,7 @@ export default {
 
         const miniDescriptionVnode = (miniDesModel && descriptionVnode) ? h('el-popover', {
             style: {
-                marginLeft: '4px',
+                margin: '0 2px',
                 fontSize: '16px',
                 cursor: 'pointer'
             },
@@ -278,8 +278,9 @@ export default {
                 miniDescriptionVnode ? h('template', {
                     slot: 'label',
                 }, [
-                    `${self.label || ''}${self.formProps.labelSuffix || ''}`,
-                    miniDescriptionVnode
+                    `${self.label || ''}`,
+                    miniDescriptionVnode,
+                    `${self.formProps.labelSuffix || ''}`
                 ]) : null,
 
                 // description

packages/lib/src/JsonSchemaForm/index.css

@@ -108,6 +108,8 @@
     /* validateWidget 单独的校验不属于输入框的*/
     .validateWidget {
         margin-bottom: 0;
+        width: 100% !important;
+        flex-basis: 100% !important;
         .formItemErrorBox {
             padding: 5px 0;
             position: relative;
@@ -127,7 +129,7 @@
     }
     .arrayOrderList_item {
         position: relative;
-        padding: 25px 10px 20px;
+        padding: 25px 10px 12px;
         border-radius: 2px;
         margin-bottom: 6px;
         display: flex;
@@ -145,7 +147,7 @@
         /*box-shadow: 0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 1px rgba(0,0,0,0.1);*/
     }
     .arrayListItem_content {
-        padding-top: 6px;
+        padding-top: 15px;
         flex: 1;
         margin: 0 auto;
         box-shadow: 0 -1px 0 0 rgba(0,0,0,0.05);
@@ -227,6 +229,9 @@
         }
     }
     &.el-form--label-top {
+        .arrayListItem_content {
+            padding-top: 8px;
+        }
         .el-form-item__label {
             line-height: 26px;
             padding-bottom: 6px;