@lx-frontend/wrap-element-ui 1.0.21-beta.2 → 1.0.21-beta.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lx-frontend/wrap-element-ui",
3
- "version": "1.0.21-beta.2",
3
+ "version": "1.0.21-beta.3",
4
4
  "description": "wrap-element-ui",
5
5
  "author": "",
6
6
  "main": "src/components/index.ts",
@@ -9,14 +9,14 @@
9
9
  v-bind="datePickerCommonProps"
10
10
  placeholder="开始日期"
11
11
  :value="tempFilteredValue[config.prop[0]]"
12
- :picker-options="genStartDateDisabledOptions(tempFilteredValue[config.prop[1]], config.limit)"
12
+ :picker-options="pickerStartOptions"
13
13
  @input="handleStartDateChange"
14
14
  />
15
15
  <el-date-picker
16
16
  v-bind="datePickerCommonProps"
17
17
  placeholder="结束日期"
18
18
  :value="tempFilteredValue[config.prop[1]]"
19
- :picker-options="genEndDateDisabledOptions(tempFilteredValue[config.prop[0]], config.limit)"
19
+ :picker-options="pickerEndOptions"
20
20
  @input="handleEndDateChange"
21
21
  />
22
22
  </div>
@@ -24,17 +24,19 @@
24
24
  </template>
25
25
 
26
26
  <script setup lang="ts">
27
- import { IFilterDoubleDatePicker } from '../../types';
27
+ import { IFilterDoubleDatePicker, IFilterDoubleDatePickerLimit } from '../../types';
28
28
  import { genStartDateDisabledOptions, genEndDateDisabledOptions } from '../../../helper';
29
+ import { computed, toRefs } from 'vue';
29
30
 
30
31
  interface IFilterDoubleDatePickerProps {
31
32
  /** 日期选择器配置 */
32
- config: IFilterDoubleDatePicker;
33
+ config: IFilterDoubleDatePicker | IFilterDoubleDatePickerLimit;
33
34
  /** 临时筛选值 */
34
35
  tempFilteredValue: Record<string, string>;
35
36
  }
36
37
 
37
38
  const props = defineProps<IFilterDoubleDatePickerProps>();
39
+ const { config, tempFilteredValue } = toRefs(props)
38
40
 
39
41
  const emit = defineEmits<{
40
42
  (e: 'update:tempFilteredValue', key: string, value: string): void;
@@ -49,13 +51,36 @@ const datePickerCommonProps = {
49
51
  editable: false,
50
52
  } as const;
51
53
 
54
+
55
+ const pickerStartOptions = computed(() => {
56
+ if ('startOptions' in config.value && config.value.startOptions) {
57
+ return config.value.startOptions;
58
+ }
59
+ if ('limit' in config.value) {
60
+ return genStartDateDisabledOptions(tempFilteredValue.value[config.value.prop[1]], config.value.limit);
61
+ }
62
+ // 默认,无限制
63
+ return genStartDateDisabledOptions(tempFilteredValue.value[config.value.prop[1]]);
64
+ });
65
+
66
+ const pickerEndOptions = computed(() => {
67
+ if ('endOptions' in config.value && config.value.endOptions) {
68
+ return config.value.endOptions;
69
+ }
70
+ if ('limit' in config.value) {
71
+ return genEndDateDisabledOptions(tempFilteredValue.value[config.value.prop[0]], config.value.limit);
72
+ }
73
+ // 默认,无限制
74
+ return genEndDateDisabledOptions(tempFilteredValue.value[config.value.prop[0]]);
75
+ })
76
+
52
77
  /** 处理开始日期变更 */
53
78
  const handleStartDateChange = (val: string | null) => {
54
- emit('update:tempFilteredValue', props.config.prop[0], val || '');
79
+ emit('update:tempFilteredValue', config.value.prop[0], val || '');
55
80
  };
56
81
 
57
82
  /** 处理结束日期变更 */
58
83
  const handleEndDateChange = (val: string | null) => {
59
- emit('update:tempFilteredValue', props.config.prop[1], val || '');
84
+ emit('update:tempFilteredValue', config.value.prop[1], val || '');
60
85
  };
61
86
  </script>
@@ -36,11 +36,18 @@ export interface IFilterSelect {
36
36
  }
37
37
 
38
38
  /** 筛选组件 - 日期范围(拆分两个日期选择器) */
39
- export interface IFilterDoubleDatePicker {
39
+ export interface IFilterDoubleDatePickerBase {
40
40
  type: 'doubleDatePicker',
41
41
  prop: [string, string],
42
42
  label?: string,
43
- pickerOptions?: DatePicker['pickerOptions'],
43
+ }
44
+
45
+ export interface IFilterDoubleDatePicker extends IFilterDoubleDatePickerBase {
46
+ startOptions?: DatePicker['pickerOptions'],
47
+ endOptions?: DatePicker['pickerOptions'],
48
+ }
49
+
50
+ export interface IFilterDoubleDatePickerLimit extends IFilterDoubleDatePickerBase {
44
51
  /** 限制天数范围 */
45
52
  limit?: number
46
53
  }
@@ -68,7 +75,7 @@ export interface IFilterSolt {
68
75
  active: () => boolean
69
76
  }
70
77
 
71
- export type FilterItem = IFilterInput | IFilterSelect | IFilterDoubleDatePicker | IFilterMonthDayPicker | IFilterColorRadio | IFilterSolt
78
+ export type FilterItem = IFilterInput | IFilterSelect | IFilterDoubleDatePicker | IFilterDoubleDatePickerLimit | IFilterMonthDayPicker | IFilterColorRadio | IFilterSolt
72
79
 
73
80
  /** 筛选组件类型 */
74
81
  export type FilterListType = Array<FilterItem>
@@ -8,7 +8,7 @@
8
8
  v-for="({
9
9
  isEmpty = true, key, type, prop, label, placeholder, candidate, filterable=false, withoutAll=false, collapseTags=false,
10
10
  clearable=false, multiple=false, multipleLimit=0, changeCb, inputLimitCallback, slotName, dateType='date',
11
- doubleIsInline = true, maxlength = 255, doubleDatePickerLimit
11
+ doubleIsInline = true, maxlength = 255, datePickerOptions, doubleDatePickerStartOptions, doubleDatePickerEndOptions, doubleDatePickerLimit
12
12
  }) in config"
13
13
  :key="label"
14
14
  :label="showLabel ? label : ''"
@@ -72,6 +72,7 @@
72
72
  :placeholder="dateType == 'date' ? placeholder || '选择日期' : '选择日期范围'"
73
73
  start-placeholder="开始日期"
74
74
  end-placeholder="结束日期"
75
+ :picker-options="datePickerOptions"
75
76
  />
76
77
  <div
77
78
  v-if="type === 'doubleDatePicker'"
@@ -86,7 +87,7 @@
86
87
  type="date"
87
88
  :editable="false"
88
89
  :placeholder="(placeholder || [])[0] || '开始日期'"
89
- :picker-options="genStartDateDisabledOptions(formData[prop[1]], doubleDatePickerLimit)"
90
+ :picker-options="doubleDatePickerStartOptions || genStartDateDisabledOptions(formData[prop[1]], doubleDatePickerLimit)"
90
91
  />
91
92
  <el-date-picker
92
93
  @input="val => handleInput(val, prop[1], '', key)"
@@ -97,7 +98,7 @@
97
98
  type="date"
98
99
  :editable="false"
99
100
  :placeholder="(placeholder || [])[1] || '结束日期'"
100
- :picker-options="genEndDateDisabledOptions(formData[prop[0]], doubleDatePickerLimit)"
101
+ :picker-options="doubleDatePickerEndOptions || genEndDateDisabledOptions(formData[prop[0]], doubleDatePickerLimit)"
101
102
  />
102
103
  <el-checkbox
103
104
  :value="checkedIds[key]"
@@ -1,3 +1,5 @@
1
+ import { DatePicker } from "element-ui/types/element-ui"
2
+
1
3
  type BaseOption = {
2
4
  label: string
3
5
  prop: string
@@ -37,6 +39,7 @@ type SelectOption = BaseOption & {
37
39
  type DatePickerOption = BaseOption & {
38
40
  type: 'datePicker'
39
41
  dateType?: string
42
+ datePickerOptions?: DatePicker['pickerOptions']
40
43
  }
41
44
 
42
45
  type BaseDoubleOption = Omit<BaseOption, 'prop'> & {
@@ -49,15 +52,25 @@ type DoubleInputOption = BaseDoubleOption & {
49
52
  inputLimitCallback?: (value: string) => boolean
50
53
  }
51
54
 
52
- type DoubleDatePickerOption = BaseDoubleOption & {
55
+ type DoubleDatePickerOptionBase = BaseDoubleOption & {
53
56
  type: 'doubleDatePicker'
54
57
  isEmpty?: boolean
55
58
  }
56
59
 
60
+ type DoubleDatePickerOption = DoubleDatePickerOptionBase & {
61
+ doubleDatePickerStartOptions?: DatePicker['pickerOptions']
62
+ doubleDatePickerEndOptions?: DatePicker['pickerOptions']
63
+ }
64
+
65
+ type DoubleDatePickerOptionLimit = DoubleDatePickerOptionBase & {
66
+ doubleDatePickerLimit?: number
67
+ }
68
+
57
69
  export type SearchFormConfigOption =
58
70
  | InputOption
59
71
  | SelectOption
60
72
  | DatePickerOption
61
73
  | DoubleInputOption
62
74
  | DoubleDatePickerOption
75
+ | DoubleDatePickerOptionLimit
63
76
  | SlotOption