From 93006c7dc7b5243b26637f444c8057c95935e622 Mon Sep 17 00:00:00 2001
From: Netfan <netfan@foxmail.com>
Date: Wed, 26 May 2021 21:47:31 +0800
Subject: [PATCH] feat(table): add editable DatePicker & TimePicker (#654)

---
 mock/demo/table-demo.ts                                |  2 ++
 src/components/Table/src/componentMap.ts               | 12 +++++++++++-
 src/components/Table/src/components/editable/helper.ts |  4 +++-
 src/components/Table/src/types/componentType.ts        |  4 +++-
 src/views/demo/table/EditCellTable.vue                 | 22 ++++++++++++++++++++++
 src/views/demo/table/EditRowTable.vue                  | 32 ++++++++++++++++++++++++++++++++
 6 files changed, 73 insertions(+), 3 deletions(-)

diff --git a/mock/demo/table-demo.ts b/mock/demo/table-demo.ts
index 856ab6c..a455e2d 100644
--- a/mock/demo/table-demo.ts
+++ b/mock/demo/table-demo.ts
@@ -18,6 +18,8 @@ const demoList = (() => {
       name6: '@cname()',
       name7: '@cname()',
       name8: '@cname()',
+      date: `@date('yyyy-MM-dd')`,
+      time: `@time('HH:mm')`,
       'no|100000-10000000': 100000,
       'status|1': ['normal', 'enable', 'disable'],
     });
diff --git a/src/components/Table/src/componentMap.ts b/src/components/Table/src/componentMap.ts
index 18605d5..f859736 100644
--- a/src/components/Table/src/componentMap.ts
+++ b/src/components/Table/src/componentMap.ts
@@ -1,6 +1,14 @@
 import type { Component } from 'vue';
 
-import { Input, Select, Checkbox, InputNumber, Switch } from 'ant-design-vue';
+import {
+  Input,
+  Select,
+  Checkbox,
+  InputNumber,
+  Switch,
+  DatePicker,
+  TimePicker,
+} from 'ant-design-vue';
 
 import type { ComponentType } from './types/componentType';
 import { ApiSelect } from '/@/components/Form';
@@ -14,6 +22,8 @@ componentMap.set('Select', Select);
 componentMap.set('ApiSelect', ApiSelect);
 componentMap.set('Switch', Switch);
 componentMap.set('Checkbox', Checkbox);
+componentMap.set('DatePicker', DatePicker);
+componentMap.set('TimePicker', TimePicker);
 
 export function add(compName: ComponentType, component: Component) {
   componentMap.set(compName, component);
diff --git a/src/components/Table/src/components/editable/helper.ts b/src/components/Table/src/components/editable/helper.ts
index d2f6062..d901729 100644
--- a/src/components/Table/src/components/editable/helper.ts
+++ b/src/components/Table/src/components/editable/helper.ts
@@ -18,7 +18,9 @@ export function createPlaceholderMessage(component: ComponentType) {
     component.includes('Select') ||
     component.includes('Checkbox') ||
     component.includes('Radio') ||
-    component.includes('Switch')
+    component.includes('Switch') ||
+    component.includes('DatePicker') ||
+    component.includes('TimePicker')
   ) {
     return t('common.chooseText');
   }
diff --git a/src/components/Table/src/types/componentType.ts b/src/components/Table/src/types/componentType.ts
index d56672a..b7edbfe 100644
--- a/src/components/Table/src/types/componentType.ts
+++ b/src/components/Table/src/types/componentType.ts
@@ -4,4 +4,6 @@ export type ComponentType =
   | 'Select'
   | 'ApiSelect'
   | 'Checkbox'
-  | 'Switch';
+  | 'Switch'
+  | 'DatePicker'
+  | 'TimePicker';
diff --git a/src/views/demo/table/EditCellTable.vue b/src/views/demo/table/EditCellTable.vue
index 6280422..17ab991 100644
--- a/src/views/demo/table/EditCellTable.vue
+++ b/src/views/demo/table/EditCellTable.vue
@@ -88,6 +88,28 @@
       width: 200,
     },
     {
+      title: '日期选择',
+      dataIndex: 'date',
+      edit: true,
+      editComponent: 'DatePicker',
+      editComponentProps: {
+        valueFormat: 'YYYY-MM-DD',
+        format: 'YYYY-MM-DD',
+      },
+      width: 200,
+    },
+    {
+      title: '时间选择',
+      dataIndex: 'time',
+      edit: true,
+      editComponent: 'TimePicker',
+      editComponentProps: {
+        valueFormat: 'HH:mm',
+        format: 'HH:mm',
+      },
+      width: 200,
+    },
+    {
       title: '勾选框',
       dataIndex: 'name5',
       edit: true,
diff --git a/src/views/demo/table/EditRowTable.vue b/src/views/demo/table/EditRowTable.vue
index 5d1c0a6..a3cda32 100644
--- a/src/views/demo/table/EditRowTable.vue
+++ b/src/views/demo/table/EditRowTable.vue
@@ -94,6 +94,38 @@
       width: 200,
     },
     {
+      title: '日期选择',
+      dataIndex: 'date',
+      editRow: true,
+      editComponent: 'DatePicker',
+      editComponentProps: {
+        valueFormat: 'YYYY-MM-DD',
+        format: 'YYYY-MM-DD',
+      },
+      width: 200,
+    },
+    {
+      title: '时间选择',
+      dataIndex: 'time',
+      editRow: true,
+      editComponent: 'TimePicker',
+      editComponentProps: {
+        valueFormat: 'HH:mm',
+        format: 'HH:mm',
+      },
+      width: 200,
+    },
+    {
+      title: '远程下拉',
+      dataIndex: 'name4',
+      editRow: true,
+      editComponent: 'ApiSelect',
+      editComponentProps: {
+        api: optionsListApi,
+      },
+      width: 200,
+    },
+    {
       title: '勾选框',
       dataIndex: 'name5',
       editRow: true,
--
libgit2 0.23.3