canrd-outside / order-erp-front · Commits

Commit 93006c7dc7b5243b26637f444c8057c95935e622

Authored by Netfan
Committed by GitHub
1 parent 4f0d45f1

feat(table): add editable DatePicker & TimePicker (#654) 

为表格的可编辑单元格添加日期选择框和时间选择框组件
Inline Side-by-side
Showing 6 changed files with 73 additions and 3 deletions
mock/demo/table-demo.ts
  View file @93006c7
@@ -18,6 +18,8 @@ const demoList = (() => { @@ -18,6 +18,8 @@ const demoList = (() => {
18 name6: '@cname()', 18 name6: '@cname()',
19 name7: '@cname()', 19 name7: '@cname()',
20 name8: '@cname()', 20 name8: '@cname()',
  21 + date: `@date('yyyy-MM-dd')`,
  22 + time: `@time('HH:mm')`,
21 'no|100000-10000000': 100000, 23 'no|100000-10000000': 100000,
22 'status|1': ['normal', 'enable', 'disable'], 24 'status|1': ['normal', 'enable', 'disable'],
23 }); 25 });
src/components/Table/src/componentMap.ts
  View file @93006c7
1 import type { Component } from 'vue'; 1 import type { Component } from 'vue';
2 2
3 -import { Input, Select, Checkbox, InputNumber, Switch } from 'ant-design-vue'; 3 +import {
  4 + Input,
  5 + Select,
  6 + Checkbox,
  7 + InputNumber,
  8 + Switch,
  9 + DatePicker,
  10 + TimePicker,
  11 +} from 'ant-design-vue';
4 12
5 import type { ComponentType } from './types/componentType'; 13 import type { ComponentType } from './types/componentType';
6 import { ApiSelect } from '/@/components/Form'; 14 import { ApiSelect } from '/@/components/Form';
@@ -14,6 +22,8 @@ componentMap.set('Select', Select); @@ -14,6 +22,8 @@ componentMap.set('Select', Select);
14 componentMap.set('ApiSelect', ApiSelect); 22 componentMap.set('ApiSelect', ApiSelect);
15 componentMap.set('Switch', Switch); 23 componentMap.set('Switch', Switch);
16 componentMap.set('Checkbox', Checkbox); 24 componentMap.set('Checkbox', Checkbox);
  25 +componentMap.set('DatePicker', DatePicker);
  26 +componentMap.set('TimePicker', TimePicker);
17 27
18 export function add(compName: ComponentType, component: Component) { 28 export function add(compName: ComponentType, component: Component) {
19 componentMap.set(compName, component); 29 componentMap.set(compName, component);
src/components/Table/src/components/editable/helper.ts
  View file @93006c7
@@ -18,7 +18,9 @@ export function createPlaceholderMessage(component: ComponentType) { @@ -18,7 +18,9 @@ export function createPlaceholderMessage(component: ComponentType) {
18 component.includes('Select') || 18 component.includes('Select') ||
19 component.includes('Checkbox') || 19 component.includes('Checkbox') ||
20 component.includes('Radio') || 20 component.includes('Radio') ||
21 - component.includes('Switch') 21 + component.includes('Switch') ||
  22 + component.includes('DatePicker') ||
  23 + component.includes('TimePicker')
22 ) { 24 ) {
23 return t('common.chooseText'); 25 return t('common.chooseText');
24 } 26 }
src/components/Table/src/types/componentType.ts
  View file @93006c7
@@ -4,4 +4,6 @@ export type ComponentType = @@ -4,4 +4,6 @@ export type ComponentType =
4 | 'Select' 4 | 'Select'
5 | 'ApiSelect' 5 | 'ApiSelect'
6 | 'Checkbox' 6 | 'Checkbox'
7 - | 'Switch'; 7 + | 'Switch'
  8 + | 'DatePicker'
  9 + | 'TimePicker';
src/views/demo/table/EditCellTable.vue
  View file @93006c7
@@ -88,6 +88,28 @@ @@ -88,6 +88,28 @@
88 width: 200, 88 width: 200,
89 }, 89 },
90 { 90 {
  91 + title: '日期选择',
  92 + dataIndex: 'date',
  93 + edit: true,
  94 + editComponent: 'DatePicker',
  95 + editComponentProps: {
  96 + valueFormat: 'YYYY-MM-DD',
  97 + format: 'YYYY-MM-DD',
  98 + },
  99 + width: 200,
  100 + },
  101 + {
  102 + title: '时间选择',
  103 + dataIndex: 'time',
  104 + edit: true,
  105 + editComponent: 'TimePicker',
  106 + editComponentProps: {
  107 + valueFormat: 'HH:mm',
  108 + format: 'HH:mm',
  109 + },
  110 + width: 200,
  111 + },
  112 + {
91 title: '勾选框', 113 title: '勾选框',
92 dataIndex: 'name5', 114 dataIndex: 'name5',
93 edit: true, 115 edit: true,
src/views/demo/table/EditRowTable.vue
  View file @93006c7
@@ -94,6 +94,38 @@ @@ -94,6 +94,38 @@
94 width: 200, 94 width: 200,
95 }, 95 },
96 { 96 {
  97 + title: '日期选择',
  98 + dataIndex: 'date',
  99 + editRow: true,
  100 + editComponent: 'DatePicker',
  101 + editComponentProps: {
  102 + valueFormat: 'YYYY-MM-DD',
  103 + format: 'YYYY-MM-DD',
  104 + },
  105 + width: 200,
  106 + },
  107 + {
  108 + title: '时间选择',
  109 + dataIndex: 'time',
  110 + editRow: true,
  111 + editComponent: 'TimePicker',
  112 + editComponentProps: {
  113 + valueFormat: 'HH:mm',
  114 + format: 'HH:mm',
  115 + },
  116 + width: 200,
  117 + },
  118 + {
  119 + title: '远程下拉',
  120 + dataIndex: 'name4',
  121 + editRow: true,
  122 + editComponent: 'ApiSelect',
  123 + editComponentProps: {
  124 + api: optionsListApi,
  125 + },
  126 + width: 200,
  127 + },
  128 + {
97 title: '勾选框', 129 title: '勾选框',
98 dataIndex: 'name5', 130 dataIndex: 'name5',
99 editRow: true, 131 editRow: true,