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 18 name6: '@cname()',
19 19 name7: '@cname()',
20 20 name8: '@cname()',
  21 + date: `@date('yyyy-MM-dd')`,
  22 + time: `@time('HH:mm')`,
21 23 'no|100000-10000000': 100000,
22 24 'status|1': ['normal', 'enable', 'disable'],
23 25 });
... ...
src/components/Table/src/componentMap.ts
  View file @93006c7
1 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 13 import type { ComponentType } from './types/componentType';
6 14 import { ApiSelect } from '/@/components/Form';
... ... @@ -14,6 +22,8 @@ componentMap.set('Select', Select);
14 22 componentMap.set('ApiSelect', ApiSelect);
15 23 componentMap.set('Switch', Switch);
16 24 componentMap.set('Checkbox', Checkbox);
  25 +componentMap.set('DatePicker', DatePicker);
  26 +componentMap.set('TimePicker', TimePicker);
17 27  
18 28 export function add(compName: ComponentType, component: Component) {
19 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 18 component.includes('Select') ||
19 19 component.includes('Checkbox') ||
20 20 component.includes('Radio') ||
21   - component.includes('Switch')
  21 + component.includes('Switch') ||
  22 + component.includes('DatePicker') ||
  23 + component.includes('TimePicker')
22 24 ) {
23 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 | 'Select'
5 5 | 'ApiSelect'
6 6 | 'Checkbox'
7   - | 'Switch';
  7 + | 'Switch'
  8 + | 'DatePicker'
  9 + | 'TimePicker';
... ...
src/views/demo/table/EditCellTable.vue
  View file @93006c7
... ... @@ -88,6 +88,28 @@
88 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 113 title: '勾选框',
92 114 dataIndex: 'name5',
93 115 edit: true,
... ...
src/views/demo/table/EditRowTable.vue
  View file @93006c7
... ... @@ -94,6 +94,38 @@
94 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 129 title: '勾选框',
98 130 dataIndex: 'name5',
99 131 editRow: true,
... ...