diff --git a/STD-COMP.md b/STD-COMP.md index 19af8b0..fdbd004 100755 --- a/STD-COMP.md +++ b/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 } ``` diff --git a/STD-COMP_CN.md b/STD-COMP_CN.md index 3769aa5..8a602c4 100644 --- a/STD-COMP_CN.md +++ b/STD-COMP_CN.md @@ -238,6 +238,7 @@ clearable: false, // 是否显示清除按钮 type: 'date', // year/month/date/week/datetime format: '', // 格式显示 + valueFormat: '', // 输出值的格式。空为毫秒数字符串 } ``` diff --git a/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/data-picker.spec.js b/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/data-picker.spec.js index 468b551..15908b4 100644 --- a/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/data-picker.spec.js +++ b/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(); }); }); diff --git a/packages/ncform-theme-elementui/examples/control-comps/date-picker.html b/packages/ncform-theme-elementui/examples/control-comps/date-picker.html index 3186e3b..615f334 100755 --- a/packages/ncform-theme-elementui/examples/control-comps/date-picker.html +++ b/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 diff --git a/packages/ncform-theme-elementui/src/components/control-comps/date-picker.vue b/packages/ncform-theme-elementui/src/components/control-comps/date-picker.vue index af449b9..5dd24f8 100755 --- a/packages/ncform-theme-elementui/src/components/control-comps/date-picker.vue +++ b/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" > @@ -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)) : ''}`; } } }; diff --git a/packages/ncform/src/components/vue-ncform/ncform.vue b/packages/ncform/src/components/vue-ncform/ncform.vue index c89e36d..309f3eb 100755 --- a/packages/ncform/src/components/vue-ncform/ncform.vue +++ b/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;