add show formatted date feature in grid

mulholland0318 · Nov 13, 2015 · 0849974 · 0849974
1 parent 5c442a9
commit 0849974
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 28 deletions.
diff --git a/examples/data/grid.vue b/examples/data/grid.vue
@@ -4,16 +4,17 @@
       <d-text-field></d-text-field>
     </d-form>
 
-    <d-grid :data="testData" schema="Test" height="300" :fit="true" :selection.sync="selection" :fixed-column-count2="3" flex>
+    <d-grid :data="testData" schema="GridTest" height="300" :fit="true" :selection.sync="selection" :fixed-column-count2="3" flex>
       <d-grid-column type="index"></d-grid-column>
       <d-grid-column type="selection"></d-grid-column>
       <d-grid-column property="prop1"></d-grid-column>
       <d-grid-column property="prop2"></d-grid-column>
       <d-grid-column property="prop3" width="400"></d-grid-column>
       <d-grid-column property="prop4"></d-grid-column>
       <d-grid-column label="5" property="prop5"></d-grid-column>
-      <d-grid-column label="操作" width="200"><d-button @click="$parent.test()">测试1</d-button><button>测试2</button><button>测试3</button></d-grid-column>
+      <d-grid-column label="操作" width="200"><d-button>测试1</d-button><button>测试2</button><button>测试3</button></d-grid-column>
     </d-grid>
+
     <div>
       xxx
     </div>
@@ -23,7 +24,7 @@
 <script type="text/ecmascript-6" lang="babel">
   import { SchemaStore } from '../../src/index.js'
 
-  SchemaStore.defineSchema('Test', {
+  SchemaStore.defineSchema('GridTest', {
     prop1: {
       label: '测试1',
       required: true
@@ -33,7 +34,8 @@
       required: true
     },
     prop3: {
-      label: '测试3'
+      label: '测试3',
+      type: Date
     },
     prop4: {
       label: '测试4'
@@ -64,21 +66,21 @@
       return {
         selection: [],
         testData: [
+          {prop1: '11', prop2: '12', prop3: new Date(), prop4: '14', prop5: true},
+          {prop1: '21', prop2: '22', prop3: new Date(), prop4: '24', prop5: false},
+          {prop1: '31', prop2: '32', prop3: new Date(), prop4: '34', prop5: false},
+          {prop1: '41', prop2: '42', prop3: new Date(), prop4: '44', prop5: true},
+          {prop1: '51', prop2: '52', prop3: new Date(), prop4: '54', prop5: false},
           {prop1: '11', prop2: '12', prop3: '13', prop4: '14', prop5: true},
-          {prop1: '21', prop2: '22', prop3: '23', prop4: '24', prop5: false},
-          {prop1: '31', prop2: '32', prop3: '33', prop4: '34', prop5: false},
-          {prop1: '41', prop2: '42', prop3: '43', prop4: '44', prop5: true},
-          {prop1: '51', prop2: '52', prop3: '53', prop4: '54', prop5: false},
-          {prop1: '11', prop2: '12', prop3: '13', prop4: '14', prop5: true},
-          {prop1: '21', prop2: '22', prop3: '23', prop4: '24', prop5: false},
-          {prop1: '31', prop2: '32', prop3: '33', prop4: '34', prop5: true},
-          {prop1: '41', prop2: '42', prop3: '43', prop4: '44', prop5: false},
-          {prop1: '51', prop2: '52', prop3: '53', prop4: '54', prop5: true},
-          {prop1: '11', prop2: '12', prop3: '13', prop4: '14', prop5: false},
-          {prop1: '21', prop2: '22', prop3: '23', prop4: '24', prop5: false},
-          {prop1: '31', prop2: '32', prop3: '33', prop4: '34', prop5: true},
-          {prop1: '41', prop2: '42', prop3: '43', prop4: '44', prop5: false},
-          {prop1: '51', prop2: '52', prop3: '53', prop4: '54', prop5: true}
+          {prop1: '21', prop2: '22', prop3: new Date(), prop4: '24', prop5: false},
+          {prop1: '31', prop2: '32', prop3: new Date(), prop4: '34', prop5: true},
+          {prop1: '41', prop2: '42', prop3: new Date(), prop4: '44', prop5: false},
+          {prop1: '51', prop2: '52', prop3: new Date(), prop4: '54', prop5: true},
+          {prop1: '11', prop2: '12', prop3: new Date(), prop4: '14', prop5: false},
+          {prop1: '21', prop2: '22', prop3: new Date(), prop4: '24', prop5: false},
+          {prop1: '31', prop2: '32', prop3: new Date(), prop4: '34', prop5: true},
+          {prop1: '41', prop2: '42', prop3: null, prop4: '44', prop5: false},
+          {prop1: '51', prop2: '52', prop3: undefined, prop4: '54', prop5: true}
         ]
       };
     }

diff --git a/src/data/grid.vue b/src/data/grid.vue
@@ -448,6 +448,7 @@
                 if (mapping) {
                   return schema.$translateProperty(row, property);
                 }
+                return schema.$getPropertyText(row, property);
               }
               return row[property];
             }

diff --git a/src/form/text-editor.vue b/src/form/text-editor.vue
@@ -98,9 +98,8 @@
 
 <script type="text/ecmascript-6" lang="babel">
   var Vue = require('vue');
-  var fecha = require('fecha');
-  var merge = require('../util').merge;
   var domUtil = require('wind-dom');
+  import { merge, formatDate, parseDate } from '../util';
 
   export default {
     props: {
@@ -156,7 +155,7 @@
         get() {
           var value = this.value;
           if (value instanceof Date) {
-            return fecha.format(value, this.format || 'YYYY-MM-DD');
+            return formatDate(value, this.format || 'YYYY-MM-DD');
           }
           return value;
         },
@@ -214,7 +213,7 @@
         var type = this.type;
         if (type === 'date') {
           if (value) {
-            var parsedValue = fecha.parse(value, this.format || 'YYYY-MM-DD');
+            var parsedValue = parseDate(value, this.format || 'YYYY-MM-DD');
 
             if (parsedValue) {
               this.value = parsedValue;

diff --git a/src/schema/schema.js b/src/schema/schema.js
@@ -1,6 +1,6 @@
 var validatorFnMap = require('./validators');
-
 var Vue = require('../config');
+var formatDate = require('../util').formatDate;
 
 var getMessage = function(key, options) {
   var result = Vue.prototype.$t.call(null, key, options);
@@ -101,6 +101,19 @@ class Schema {
     return descriptor.label;
   }
 
+  $getPropertyText(object, property) {
+    var descriptor = this.props[property];
+    if (descriptor) {
+      var value = object[property];
+
+      if (descriptor.type === Date) {
+        return formatDate(value, descriptor.format);
+      }
+    }
+
+    return object[property];
+  }
+
   $getPropertyDescriptor(property) {
     return this.props[property] || {};
   }

diff --git a/src/util.js b/src/util.js
@@ -1,5 +1,7 @@
-module.exports = {
-  merge: function(target) {
+const dateUtil = require('fecha');
+
+export default {
+  merge(target) {
     for (var i = 1, j = arguments.length; i < j; i++) {
       var source = arguments[i];
       for (var prop in source) {
@@ -15,11 +17,21 @@ module.exports = {
     return target;
   },
 
-  debounce: function(fn, delay) {
+  formatDate(date, format) {
+    if (!date) return '';
+    return dateUtil.format(date, format || 'YYYY-MM-DD');
+  },
+
+  parseDate(string, format) {
+    return dateUtil.parse(string, format || 'YYYY-MM-DD');
+  },
+
+  debounce(fn, delay) {
     var timer;
 
     return function() {
-      var context = this, args = arguments;
+      var context = this;
+      var args = arguments;
       if (timer) {
         clearTimeout(timer);
         timer = null;
@@ -31,7 +43,7 @@ module.exports = {
     };
   },
 
-  throttle: function(fn, delay) {
+  throttle(fn, delay) {
     var now, lastExec, timer, context, args;
 
     var execute = function () {