Skip to content

Commit b3e16be

Browse files
sendyasendya
authored
Merge pull request #252 from sunshineLixun/dev
feat: 新增DatePicker原子化组件
2 parents 1127fa6 + 695fd39 commit b3e16be

File tree

31 files changed

+1428
-91
lines changed

31 files changed

+1428
-91
lines changed

‎packages/pro-field/src/components/DatePicker/index.tsx

Lines changed: 26 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { defineComponent, type App, DefineComponent, Plugin } from 'vue';
2-
import Dayjs from 'dayjs';
2+
import dayjs from 'dayjs';
33
import { fieldDatePickerProps, FieldDatePickerProps } from './types';
44
import { DatePicker } from 'ant-design-vue';
55
import { getSlot } from '@ant-design-vue/pro-utils';
@@ -10,13 +10,22 @@ const formatDate = (text: any, format: any) => {
1010
return '-';
1111
}
1212
if (typeof format === 'function') {
13-
return format(Dayjs(text));
13+
return format(dayjs(text));
1414
} else {
15-
return Dayjs(text).format(format || 'YYYY-MM-DD');
15+
return dayjs(text).format(format || 'YYYY-MM-DD');
1616
}
1717
};
1818

19-
export const slots = ['suffixIcon', 'prevIcon', 'nextIcon', 'superPrevIcon', 'superNextIcon'];
19+
export const slots = [
20+
'suffixIcon',
21+
'prevIcon',
22+
'nextIcon',
23+
'superPrevIcon',
24+
'superNextIcon',
25+
'renderExtraFooter',
26+
'dateRender',
27+
'monthCellRender',
28+
];
2029

2130
const FieldDatePicker = defineComponent({
2231
name: 'FieldDatePicker',
@@ -29,16 +38,23 @@ const FieldDatePicker = defineComponent({
2938
const nextIcon = getSlot<() => VueNode>(slots, props.fieldProps as Record<string, any>, 'nextIcon');
3039
const superPrevIcon = getSlot<() => VueNode>(slots, props.fieldProps as Record<string, any>, 'superPrevIcon');
3140
const superNextIcon = getSlot<() => VueNode>(slots, props.fieldProps as Record<string, any>, 'superNextIcon');
41+
const renderExtraFooter = getSlot<() => VueNode>(
42+
slots,
43+
props.fieldProps as Record<string, any>,
44+
'renderExtraFooter'
45+
);
46+
const dateRender = getSlot<() => VueNode>(slots, props.fieldProps as Record<string, any>, 'dateRender');
47+
const monthCellRender = getSlot<() => VueNode>(slots, props.fieldProps as Record<string, any>, 'monthCellRender');
3248

3349
const render = getSlot(slots, props.fieldProps as Record<string, any>, 'render') as any;
3450
const renderFormItem = getSlot(slots, props.fieldProps as Record<string, any>, 'renderFormItem') as any;
3551

3652
return () => {
37-
const { mode, text, dateFormat, fieldProps } = props;
53+
const { mode, text, fieldProps } = props;
3854
const { placeholder, format } = fieldProps || {};
3955

4056
if (mode === 'read') {
41-
const dom = formatDate(text, format || dateFormat);
57+
const dom = formatDate(text, format);
4258
if (render) {
4359
return render(text, { mode, ...fieldProps }, <>{dom}</>);
4460
}
@@ -53,8 +69,12 @@ const FieldDatePicker = defineComponent({
5369
nextIcon,
5470
superPrevIcon,
5571
superNextIcon,
72+
renderExtraFooter,
73+
dateRender,
74+
monthCellRender,
5675
}}
5776
{...fieldProps}
77+
format={format}
5878
placeholder={placeholder || '请选择'}
5979
allowClear
6080
/>

‎packages/pro-field/src/components/DatePicker/types.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import type { ExtractPropTypes, PropType } from 'vue';
2+
import type { Dayjs } from 'dayjs';
23
import type { CommonProps, DatePickerProps } from 'ant-design-vue/es/date-picker/generatePicker/props';
34
import { proFieldFC } from '../typings';
45

56
export const fieldDatePickerProps = {
67
...proFieldFC,
7-
/** 日期格式化 */
8-
dateFormat: {
9-
type: String,
10-
},
118
fieldProps: {
12-
type: Object as PropType<CommonProps<any> & DatePickerProps<any>>,
9+
type: Object as PropType<CommonProps<Dayjs> & DatePickerProps<Dayjs>>,
10+
},
11+
picker: {
12+
type: String as PropType<CommonProps<Dayjs>['picker']>,
1313
},
1414
};
1515

‎packages/pro-field/src/components/RangePicker/index.tsx

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import { defineComponent, type App, DefineComponent, Plugin } from 'vue';
2+
import dayjs from 'dayjs';
3+
import { fieldRangePickerProps, FieldRangePickerProps, RangesType } from './types';
4+
import { RangePicker } from 'ant-design-vue';
5+
import { getSlot } from '@ant-design-vue/pro-utils';
6+
import type { VueNode } from 'ant-design-vue/lib/_util/type';
7+
8+
const formatDate = (text: any, format: any) => {
9+
if (!text) {
10+
return '-';
11+
}
12+
if (typeof format === 'function') {
13+
return format(dayjs(text));
14+
} else {
15+
return dayjs(text).format(format || 'YYYY-MM-DD');
16+
}
17+
};
18+
19+
export const slots = [
20+
'suffixIcon',
21+
'prevIcon',
22+
'nextIcon',
23+
'superPrevIcon',
24+
'superNextIcon',
25+
'renderExtraFooter',
26+
'dateRender',
27+
];
28+
29+
const FieldRangePicker = defineComponent({
30+
name: 'FieldRangePicker',
31+
inheritAttrs: false,
32+
props: fieldRangePickerProps,
33+
slots,
34+
setup(props, { slots }) {
35+
const suffixIcon = getSlot<() => VueNode>(slots, props.fieldProps as Record<string, any>, 'suffixIcon');
36+
const prevIcon = getSlot<() => VueNode>(slots, props.fieldProps as Record<string, any>, 'prevIcon');
37+
const nextIcon = getSlot<() => VueNode>(slots, props.fieldProps as Record<string, any>, 'nextIcon');
38+
const superPrevIcon = getSlot<() => VueNode>(slots, props.fieldProps as Record<string, any>, 'superPrevIcon');
39+
const superNextIcon = getSlot<() => VueNode>(slots, props.fieldProps as Record<string, any>, 'superNextIcon');
40+
const renderExtraFooter = getSlot<() => VueNode>(
41+
slots,
42+
props.fieldProps as Record<string, any>,
43+
'renderExtraFooter'
44+
);
45+
const dateRender = getSlot<() => VueNode>(slots, props.fieldProps as Record<string, any>, 'dateRender');
46+
47+
const render = getSlot(slots, props.fieldProps as Record<string, any>, 'render') as any;
48+
const renderFormItem = getSlot(slots, props.fieldProps as Record<string, any>, 'renderFormItem') as any;
49+
50+
return () => {
51+
const { mode, text, fieldProps } = props;
52+
const { placeholder, ranges, format = 'YYYY-MM-DD' } = fieldProps || {};
53+
const [startText, endText] = Array.isArray(text) ? text : [];
54+
55+
if (mode === 'read') {
56+
const parsedStartText: string = startText ? formatDate(startText, format) : '';
57+
const parsedEndText: string = endText ? formatDate(endText, format) : '';
58+
const dom = (
59+
<div>
60+
<div>{parsedStartText || '-'}</div>
61+
<div>{parsedEndText || '-'}</div>
62+
</div>
63+
);
64+
if (render) {
65+
return render(text, { mode, ...fieldProps }, <>{dom}</>);
66+
}
67+
return dom;
68+
}
69+
if (mode === 'edit' || mode === 'update') {
70+
const dom = (
71+
<RangePicker
72+
v-slots={{
73+
suffixIcon,
74+
prevIcon,
75+
nextIcon,
76+
superPrevIcon,
77+
superNextIcon,
78+
renderExtraFooter,
79+
dateRender,
80+
}}
81+
{...fieldProps}
82+
format={format}
83+
ranges={ranges as RangesType}
84+
placeholder={placeholder || ['请选择', '请选择']}
85+
allowClear
86+
/>
87+
);
88+
if (renderFormItem) {
89+
return renderFormItem(text, { mode, ...fieldProps }, dom);
90+
}
91+
return dom;
92+
}
93+
return null;
94+
};
95+
},
96+
});
97+
98+
FieldRangePicker.install = (app: App) => {
99+
app.component(FieldRangePicker.name, FieldRangePicker);
100+
return app;
101+
};
102+
103+
export default FieldRangePicker as DefineComponent<FieldRangePickerProps> & Plugin;

‎packages/pro-field/src/components/RangePicker/types.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import type { ExtractPropTypes, PropType } from 'vue';
2+
import type { Dayjs } from 'dayjs';
3+
import { rangePickerProps, type CommonProps } from 'ant-design-vue/es/date-picker/generatePicker/props';
4+
import { proFieldFC } from '../typings';
5+
6+
const rangeProps = rangePickerProps<Dayjs>();
7+
8+
export type RangePickerProps = Partial<ExtractPropTypes<typeof rangeProps>>;
9+
10+
export const fieldRangePickerProps = {
11+
...proFieldFC,
12+
fieldProps: {
13+
type: Object as PropType<CommonProps<Dayjs> & RangePickerProps>,
14+
},
15+
};
16+
17+
export type FieldRangePickerProps = Partial<ExtractPropTypes<typeof fieldRangePickerProps>>;
18+
19+
export type RangePickerValueType = [string, string] | [Dayjs, Dayjs];
20+
21+
export type RangesType = Record<string, [Dayjs, Dayjs] | (() => [Dayjs, Dayjs])>;

‎packages/pro-field/src/components/Select/SearchSelect/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { getSlot } from '@ant-design-vue/pro-utils';
66
export const slots = ['default'];
77

88
const SearchSelect = defineComponent({
9+
inheritAttrs: false,
910
props: searchSelectProps,
1011
slots,
1112
setup(props, { slots }) {

‎packages/pro-field/src/components/Select/hooks/useFetchData.ts

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,9 @@ export const useFetchData = (props: FieldSelectProps) => {
1010
const { request } = props;
1111
watchEffect(() => {
1212
loading.value = true;
13-
request(
14-
{
15-
...props.params,
16-
keyWords: defaultKeyWords.value,
17-
},
18-
props
19-
)
13+
request({
14+
keyWords: defaultKeyWords.value,
15+
})
2016
.then((data) => {
2117
options.value = data;
2218
})

‎packages/pro-field/src/components/Select/index.tsx

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,6 @@ export const fieldSelectProps = {
1212
fieldProps: {
1313
type: Object as PropType<SearchSelectProps>,
1414
},
15-
// 请求参数
16-
params: {
17-
type: Object as PropType<Record<string, any>>,
18-
},
1915
// 请求
2016
request: {
2117
type: Function as PropType<ProFieldRequestData>,
@@ -24,6 +20,7 @@ export const fieldSelectProps = {
2420
export type FieldSelectProps = Partial<ExtractPropTypes<typeof fieldSelectProps>>;
2521

2622
const FieldSelect = defineComponent({
23+
inheritAttrs: false,
2724
props: fieldSelectProps,
2825
slots: ['render', 'renderFormItem'],
2926
setup(props, { slots }) {

‎packages/pro-field/src/components/TimePicker/index.tsx

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import { defineComponent, type App, DefineComponent, Plugin } from 'vue';
2+
import dayjs from 'dayjs';
3+
import { fieldTimePickerProps, FieldTimePickerProps } from './types';
4+
import { TimePicker } from 'ant-design-vue';
5+
import { getSlot, VueText } from '@ant-design-vue/pro-utils';
6+
import type { VueNode } from 'ant-design-vue/lib/_util/type';
7+
8+
export const slots = ['renderExtraFooter', 'suffixIcon', 'clearIcon'];
9+
10+
const FieldTimePicker = defineComponent({
11+
name: 'FieldDatePicker',
12+
inheritAttrs: false,
13+
props: fieldTimePickerProps,
14+
slots,
15+
setup(props, { slots }) {
16+
const suffixIcon = getSlot<() => VueNode>(slots, props.fieldProps as Record<string, any>, 'suffixIcon');
17+
const clearIcon = getSlot<() => VueNode>(slots, props.fieldProps as Record<string, any>, 'clearIcon');
18+
const renderExtraFooter = getSlot<() => VueNode>(
19+
slots,
20+
props.fieldProps as Record<string, any>,
21+
'renderExtraFooter'
22+
);
23+
24+
const render = getSlot(slots, props.fieldProps as Record<string, any>, 'render') as any;
25+
const renderFormItem = getSlot(slots, props.fieldProps as Record<string, any>, 'renderFormItem') as any;
26+
27+
return () => {
28+
const { mode, text, fieldProps } = props;
29+
const { placeholder } = fieldProps || {};
30+
31+
const finalFormat = fieldProps?.format || 'HH:mm:ss';
32+
33+
if (mode === 'read') {
34+
const dom = <span>{text ? dayjs(text as VueText, finalFormat).format(finalFormat) : '-'}</span>;
35+
if (render) {
36+
return render(text, { mode, ...fieldProps }, <span>{dom}</span>);
37+
}
38+
return dom;
39+
}
40+
if (mode === 'edit' || mode === 'update') {
41+
const dom = (
42+
<TimePicker
43+
v-slots={{
44+
suffixIcon,
45+
renderExtraFooter,
46+
clearIcon,
47+
}}
48+
{...fieldProps}
49+
format={finalFormat}
50+
placeholder={placeholder || '请选择'}
51+
allowClear
52+
/>
53+
);
54+
if (renderFormItem) {
55+
return renderFormItem(text, { mode, ...fieldProps }, dom);
56+
}
57+
return dom;
58+
}
59+
return null;
60+
};
61+
},
62+
});
63+
64+
FieldTimePicker.install = (app: App) => {
65+
app.component(FieldTimePicker.name, FieldTimePicker);
66+
return app;
67+
};
68+
69+
export default FieldTimePicker as DefineComponent<FieldTimePickerProps> & Plugin;

‎packages/pro-field/src/components/TimePicker/types.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import type { ExtractPropTypes, PropType } from 'vue';
2+
import type { Dayjs } from 'dayjs';
3+
import type { TimePickerProps } from 'ant-design-vue/es/time-picker/time-picker';
4+
import { proFieldFC } from '../typings';
5+
6+
export const fieldTimePickerProps = {
7+
...proFieldFC,
8+
fieldProps: {
9+
type: Object as PropType<TimePickerProps<Dayjs>>,
10+
},
11+
};
12+
13+
export type FieldTimePickerProps = Partial<ExtractPropTypes<typeof fieldTimePickerProps>>;

0 commit comments

Comments
 (0)