feat(schema generator): 完成schema生成器 input 组件配置化

Author: lljj-x

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

@@ -55,11 +55,14 @@
                 </div>
                 <div :class="$style.rightForm">
                     <div v-if="curEditorItem" :class="$style.configForm">
-                        <h3>表单配置</h3>
                         <div style="padding: 20px 0;">
                             <VueJsonFrom
                                 v-model="editorValue"
                                 :schema="curEditorItem.componentPack.propsSchema"
+                                :form-props="{
+                                    labelPosition: 'right',
+                                    labelWidth: '110px'
+                                }"
                                 :form-footer="{
                                     show: false
                                 }"

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

@@ -39,3 +39,60 @@ export function generateEditorItem(toolItem) {
         id
     };
 }
+
+// editor item 转出为 SchemaField 的数据结构
+
+export function formatFormConfig(key, value) {
+    switch (key) {
+
+    case 'labelWidth':
+        return `${value * 4}px`;
+
+    default: {
+        return value;
+    }
+
+    }
+}
+
+export function editorItem2SchemaFieldProps(editorItem, formData) {
+    const baseValue = editorItem.componentValue.baseValue;
+
+    // baseValue
+    const { default: defaultValue, uiOptions } = Object.keys(editorItem.componentValue.baseValue).reduce((preVal, curVal) => {
+        if (curVal === 'default') {
+            preVal.default = baseValue[curVal];
+        } else if (baseValue[curVal]) {
+            preVal.uiOptions = preVal.uiOptions || {};
+            console.log(formatFormConfig(curVal, baseValue[curVal]));
+            preVal.uiOptions[curVal] = formatFormConfig(curVal, baseValue[curVal]);
+        }
+
+        return preVal;
+    }, {});
+
+    // options
+
+
+    // rules
+
+    const schema = {
+        ...editorItem.componentPack.viewSchema,
+        default: defaultValue,
+    };
+
+    return {
+        rootSchema: schema,
+        schema,
+        rootFormData: formData,
+        curNodePath: editorItem.componentValue.property || '',
+        uiSchema: {
+            'ui:options': {
+                ...uiOptions,
+                ...editorItem.componentValue.options,
+                ...editorItem.componentValue.rules
+            },
+        }
+    };
+
+}

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

@@ -4,7 +4,7 @@
              [$style.active]: editorItem.isEdit,
              js_viewComponentWrap: true
          }"
-         @click="handelClickView"
+         @click="handleClickView"
     >
         <span :class="$style.formProperty"> {{ attrs.curNodePath }}</span>
         <div v-if="editorItem.isEdit" :class="$style.editBar">
@@ -45,6 +45,7 @@
 
 <script>
     import { SchemaField } from '@lljj/vue-json-schema-form';
+    import { editorItem2SchemaFieldProps } from '../common/editorData';
 
     export default {
         name: 'ViewComponentWrap',
@@ -63,40 +64,15 @@
         },
         computed: {
             attrs() {
-                const baseValue = this.editorItem.componentValue.baseValue;
-                const { default: defaultValue, uiOptions } = Object.keys(this.editorItem.componentValue.baseValue).reduce((preVal, curVal) => {
-                    if (curVal === 'default') {
-                        preVal.default = baseValue[curVal];
-                    } else if (baseValue[curVal]) {
-                        preVal.uiOptions = preVal.uiOptions || {};
-                        preVal.uiOptions[curVal] = baseValue[curVal];
-                    }
-
-                    return preVal;
-                }, {});
-
-                const schema = {
-                    ...this.editorItem.componentPack.viewSchema,
-                    default: defaultValue,
-                };
-
-                return {
-                    rootSchema: schema,
-                    schema,
-                    rootFormData: this.formData,
-                    curNodePath: this.editorItem.componentValue.property || '',
-                    uiSchema: {
-                        'ui:options': uiOptions,
-                    }
-                };
+                return editorItem2SchemaFieldProps(this.editorItem, this.formData);
             }
         },
         beforeDestroy() {
             this.hideEditForm();
         },
         methods: {
             // 点击只能打开，并且打开状态下只能执行一次
-            handelClickView(e) {
+            handleClickView(e) {
                 // 阻止浏览器默认事件
                 e.preventDefault();
                 if (!this.editorItem.isEdit) this.showEditForm();

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

@@ -10,5 +10,60 @@ const viewSchema = {
 };
 export default {
     viewSchema,
-    propsSchema: genSchema()
+    propsSchema: genSchema({
+        options: {
+            type: 'object',
+            title: '选项',
+            required: [],
+            properties: {
+                placeholder: {
+                    type: 'string',
+                    title: '输入占位文本',
+                    default: '请输入'
+                },
+                clearable: {
+                    title: '显示清空按钮',
+                    type: 'boolean',
+                    default: false
+                },
+                showWordLimit: {
+                    title: '字数统计',
+                    type: 'boolean',
+                    default: false
+                },
+                showPassword: {
+                    title: '密码框',
+                    type: 'boolean',
+                    default: false
+                },
+                type: {
+                    type: 'string',
+                    title: '输入框类型',
+                    enum: [
+                        'text',
+                        'textarea'
+                    ],
+                    enumNames: [
+                        '输入框 Input',
+                        '文字域 Textarea'
+                    ]
+                },
+            }
+        },
+        rules: {
+            type: 'object',
+            title: '数据校验',
+            required: [],
+            properties: {
+                maxlength: {
+                    title: '最大长度',
+                    type: 'number'
+                },
+                minlength: {
+                    title: '最小长度',
+                    type: 'number'
+                }
+            }
+        }
+    })
 };

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

@@ -2,25 +2,41 @@
  * Created by Liu.Jun on 2020/10/26 18:24.
  */
 
+import { formatFormConfig } from '../common/editorData';
+
 const baseValue = {
-    title: '基础Form label配置',
+    title: '基础配置',
     type: 'object',
     properties: {
         title: {
             title: '标题',
-            type: 'string'
+            type: 'string',
+            'ui:placeholder': '请输入表单项标题',
+            'err:required': '请输入标题'
         },
         description: {
             title: '描述',
-            type: 'string'
+            type: 'string',
+            'ui:options': {
+                placeholder: '请输入表单项描述，支持输入html',
+                type: 'textarea',
+                rows: 3,
+            }
         },
         labelWidth: {
             title: '标签宽度',
-            type: 'number'
+            type: 'number',
+            'ui:widget': 'ElSlider',
+            'ui:options': {
+                formatTooltip(val) {
+                    return formatFormConfig('labelWidth', val);
+                }
+            }
         },
         default: {
             title: '默认值',
-            type: 'string'
+            type: 'string',
+            'ui:placeholder': '请输入默认值'
         },
         disabled: {
             title: '禁用',
@@ -32,11 +48,13 @@ const baseValue = {
 
 export default schema => ({
     type: 'object',
-    required: [],
+    required: ['property'],
     properties: {
         property: {
             title: '属性名',
-            type: 'string'
+            type: 'string',
+            'ui:placeholder': '请输入属性名',
+            'err:required': '属性名必填'
         },
         baseValue,
         ...schema