feat(ncform, ncform-common, ncform-show): Add HTML / COMP types to support static content show. for

CONFIG.md

@@ -7,7 +7,7 @@
     firstName: {
       
       /* 数据 */
-      type: 'string', // 数据类型 string / number / integer / boolean / object / array 
+      type: 'string', // 数据类型 string / number / integer / boolean / object / array / HTML / COMP (注意：大写的为特殊只读类型，该数据会自动过滤掉。HTML: value值为一段HTML【支持dx表达式】; COMP: value值为component name)
       value: '', // 数据的值
       default: '', // 数据的默认值，value为空的时候取该值 
       valueTemplate: '', // 值模板，当里面有dx表达式时，表达式值发生改变，会优化取该值作为value（即会覆盖用户所填的值）

packages/ncform-common/src/ncform-utils.js

@@ -70,7 +70,7 @@ const ncformUtils = {
 
     function addDefField(fieldName, fieldSchema) {
       const fullFields = {
-        /* 数据本身 */
+        /* 数据本身 */
         type: fieldSchema.type || "string",
         value: null, // 这里给了null，否则如果是对象这种，默认值就不会被覆盖了
         // value: ncformUtils.getDefVal(fieldSchema.type),
@@ -80,6 +80,7 @@ const ncformUtils = {
           /* 通用的表单项字段 */
           label: fieldName === "$root" ? "" : fieldName,
           legend: fieldName === "$root" ? "" : fieldName,
+          noLabelSpace: fieldSchema.type.toUpperCase() === fieldSchema.type ? true : false, // 大写的类型为特殊的只读类型，所以不需要显示label
           showLabel: true,
           showLegend: true,
           description: "",
@@ -132,7 +133,7 @@ const ncformUtils = {
       if (fieldName === "$root") {
         // 根节点
         const defaultGlobalConfig = {
-          // 全局配置
+          // 全局配置
           style: {
             formCls: "", // form class
             invalidFeedbackCls: "" // invalid feedback class
@@ -175,12 +176,14 @@ const ncformUtils = {
               key
             );
           } else {
-            model[key] = ncformUtils.priorityGetValue(
-              "basic",
-              formSchema.properties[key].value,
-              ncformUtils.smartAnalyze(formSchema.properties[key].default),
-              ncformUtils.getDefVal(formSchema.properties[key].type)
-            );
+            if (formSchema.properties[key].type.toUpperCase() !== formSchema.properties[key].type) { // 大写的类型忽略掉
+              model[key] = ncformUtils.priorityGetValue(
+                "basic",
+                formSchema.properties[key].value,
+                ncformUtils.smartAnalyze(formSchema.properties[key].default),
+                ncformUtils.getDefVal(formSchema.properties[key].type)
+              );
+            }
           }
         });
       }

packages/ncform-common/test/unit/ncform-utils.js

@@ -223,6 +223,27 @@ describe('/src/ncform-utils.js', () => {
     const result = ncformUtils.getModelFromSchema(formSchema);
     assert(JSON.stringify(result.user) === JSON.stringify([]));
   });
+  it("getModelFromSchema - 大写的类型，如HTML，COMP类型值 自动过滤掉", () => {
+    const formSchema = {
+      type: 'object',
+      properties: {
+        user: {
+          type: 'string',
+          value: 'daniel'
+        },
+        _line1: {
+          type: 'HTML',
+          value: '------'
+        },
+        _line2: {
+          type: 'COMP',
+          value: 'SomeLineComp'
+        }
+      }
+    };
+    const result = ncformUtils.getModelFromSchema(formSchema);
+    assert(JSON.stringify(result) === JSON.stringify({user: 'daniel'}));
+  });
 
   // --- setValueToSchema
 

packages/ncform-show/src/components/playground/playground.js

@@ -83,6 +83,10 @@ export default {
           value: "7",
           label: "基础使用-标签数组"
         },
+        {
+          value: "77",
+          label: "基础使用-分隔栏"
+        },
         {
           value: "8",
           label: "高级玩法-控件交互 dx表达式"
@@ -543,6 +547,51 @@ export default {
             }
           }
         },
+        "77": {
+          type: "object",
+          properties: {
+            _line1: {
+              type: 'HTML',
+              value: '<div style="border-left: 4px solid orange; padding-left: 6px; color: orange">  基本信息</div>'
+            },
+            name: {
+              type: "string",
+              ui: {
+                label: "姓名",
+                description: "请填写你的姓名",
+                placeholder: "姓名"
+              }
+            },
+            email: {
+              type: "string",
+              ui: {
+                label: "邮件"
+              }
+            },
+            _line2: {
+              type: 'HTML',
+              value: '<div style="border-left: 4px solid orange; margin-top:10px; padding-left: 6px; color: orange">  其它信息</div>'
+            },
+            age: {
+              type: "integer",
+              default: 18,
+              ui: {
+                label: "年龄"
+              }
+            },
+            adult: {
+              type: "boolean",
+              ui: {
+                label: "是否成年",
+                help: {
+                  show: true,
+                  text: "?",
+                  content: "成年才可以玩农药啊"
+                }
+              }
+            }
+          }
+        },
         "8": {
           type: "object",
           properties: {

packages/ncform/examples/components/vue-ncform/base-use.html

@@ -26,6 +26,10 @@
   <script type="text/javascript">
     Vue.use(vueNcform)
 
+    Vue.component('SepLine', {
+      template: '<div> >> ========这是一条华丽丽的COMP分割线======== << </div>'
+    })
+
     // Bootstrap the app
     new Vue({
       el: '#demo',
@@ -78,6 +82,14 @@
                 }
               }
             },
+            _sepLine1: {
+              type: 'HTML',
+              value: 'dx: {{$root.peason1.firstName}} + " >> ========这是一条华丽丽的HTML分割线======== << " + {{$root.peason1.firstName}}',
+            },
+            _sepLine2: {
+              type: 'COMP',
+              value: 'SepLine'
+            },
             peason2: {
               type: 'object',
               properties: {

packages/ncform/src/components/vue-ncform/form-item.vue

@@ -20,6 +20,16 @@
 
     </component>
 
+    <!-- 特殊类型 HTML -->
+    <template v-else-if="schema.type === 'HTML'">
+      <div v-html="htmlTypeVal"></div>
+    </template>
+
+    <!-- 特殊类型 COMP -->
+    <template v-else-if="schema.type === 'COMP'">
+      <div :is="schema.value"></div>
+    </template>
+
     <!-- string / number / integer / boolean 类型 -->
     <template v-else>
       <component :is="'ncform-' + schema.ui.widget" :config="schema.ui.widgetConfig" v-model="schema.value" :form-data="formData" :global-const="globalConfig.constants" :idx-chain="idxChain" class="__ncform-control">
@@ -142,6 +152,15 @@ export default {
           constData: this.globalConfig.constants
         }
       });
+    },
+    htmlTypeVal() {
+      return ncformUtils.smartAnalyzeVal(this.schema.value, {
+        idxChain: this.idxChain,
+        data: {
+          rootData: this.formData,
+          constData: this.globalConfig.constants
+        }
+      });
     }
   },