Merge pull request #78 from ncform/develop

feat(ncform-theme-elementui): add valueFormat config for date-picker …

STD-COMP.md

@@ -238,6 +238,7 @@ If you don't like the cold text description, click on the [interactive version](
   clearable: false, // Whether to display the clear button
   type: 'date', // year/month/date/week/datetime
   format: '', // Format display
+  valueFormat: '', // The format of the output value. Empty means a millisecond string
 }
 ```
 

STD-COMP_CN.md

@@ -238,6 +238,7 @@
   clearable: false, // 是否显示清除按钮
   type: 'date', // year/month/date/week/datetime
   format: '', // 格式显示
+  valueFormat: '', // 输出值的格式。空为毫秒数字符串
 }
 ```
 

packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/data-picker.spec.js

@@ -100,6 +100,20 @@ context('data-picker', () => {
               clearable: false
             }
           }
+        },
+        name3: {
+          type: 'string',
+          value: '2019-12-10',
+          ui: {
+            widget: 'date-picker',
+            widgetConfig: {
+              valueFormat: 'yyyy-MM-dd'
+            }
+          }
+        },
+        labelTest: {
+          type: 'string',
+          valueTemplate: 'dx: {{$root.name3}}',
         }
       }
     };
@@ -108,9 +122,13 @@ context('data-picker', () => {
       .invoke('setValue', JSON.stringify(formSchema, null, 2));
     common.startRun();
 
+    cy.get('body').as('body');
+
     cy.get('.previewArea').within(() => {
       // Declare action elements
 
+      cy.get('label').contains('labelTest').parent().find('input').as('labelTest');
+
       cy.get('label')
         .contains('name1')
         .parent()
@@ -135,6 +153,16 @@ context('data-picker', () => {
           });
         });
 
+      cy.get('label')
+        .contains('name3')
+        .parent()
+        .within(() => {
+          cy.get('input').should('have.value', '2019-12-10');
+          cy.get('input').click();
+          cy.get('@body').find('.el-date-table__row td.available.current+td').click();
+          cy.get('@labelTest').should('have.value', '2019-12-11');
+        });
+
       // common.submitForm();
     });
   });

packages/ncform-theme-elementui/examples/control-comps/date-picker.html

@@ -224,7 +224,28 @@
             cn: '年 yyyy，月 MM，日 dd，小时 HH，分 mm，秒 ss',
             en: 'Year yyyy, month MM, day dd, hour HH, minute mm, second ss'
           }
-        }
+        },
+        {
+          title: {
+            cn: '[属性] valueFormat: 输出值的格式。空为毫秒数字符串',
+            en: '[ATTR] valueFormat: The format of the output value. Empty means a millisecond string'
+          },
+          schema: {
+            type: 'object',
+            properties: {
+              date: {
+                type: 'string',
+                value: '2019-12-12',
+                ui: {
+                  widget: 'date-picker',
+                  widgetConfig: {
+                    valueFormat: 'yyyy-MM-dd'
+                  }
+                }
+              }
+            }
+          }
+        },
       ];
 
       // Bootstrap the app

packages/ncform-theme-elementui/src/components/control-comps/date-picker.vue

@@ -9,6 +9,7 @@
     v-model="modelVal"
     :type="type"
     :format="mergeConfig.format || $nclang(typeOptions[type].format)"
+    :value-format="mergeConfig.valueFormat"
     >
   </el-date-picker>
 </template>
@@ -73,7 +74,7 @@ export default {
 
   mounted() {
     if(this.$data.modelVal){
-      this.$data.modelVal = new Date(parseInt(this.$data.modelVal));
+      this.$data.modelVal = this.mergeConfig.valueFormat ? this.$data.modelVal : new Date(parseInt(this.$data.modelVal));
     }
   },
 
@@ -103,7 +104,10 @@ export default {
       },
       // 组件特有的配置属性
       defaultConfig: {
-        type: "date"  // year/month/date/week/datetime
+        clearable: false,
+        type: "date",  // year/month/date/week/datetime
+        format: '',
+        valueFormat: ''
       }
       // modelVal：请使用该值来绑定实际的组件的model
     };
@@ -123,7 +127,7 @@ export default {
   methods: {
     // 你可以通过该方法在modelVal传出去之前进行加工处理，即在this.$emit('input')之前
     _processModelVal(newVal){
-      return `${newVal ? new Date(newVal).getTime() : ''}`;
+      return `${newVal ? (this.mergeConfig.valueFormat ? newVal : +new Date(newVal)) : ''}`;
     }
   }
 };

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

@@ -57,7 +57,7 @@ export default {
     }
 
     this.$watch('formSchema', (newVal, oldVal) => {
-      if (newVal !== oldVal) {
+      if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
         this.$data.isSchemaChanging = true;
         this.$nextTick(() => {
           this.$data.isSchemaChanging = false;