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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lx-frontend/wrap-element-ui",
-  "version": "1.0.21-beta.1",
+  "version": "1.0.21-beta.3",
   "description": "wrap-element-ui",
   "author": "",
   "main": "src/components/index.ts",

package/src/components/EditableTable/features/bizTableHeaderPopover/BizDoubleDatePickerFilter.vue

@@ -9,14 +9,14 @@
         v-bind="datePickerCommonProps"
         placeholder="开始日期"
         :value="tempFilteredValue[config.prop[0]]"
-        :picker-options="startDateDisabledOptions"
+        :picker-options="pickerStartOptions"
         @input="handleStartDateChange"
       />
       <el-date-picker
         v-bind="datePickerCommonProps"
         placeholder="结束日期"
         :value="tempFilteredValue[config.prop[1]]"
-        :picker-options="endDateDisabledOptions"
+        :picker-options="pickerEndOptions"
         @input="handleEndDateChange"
       />
     </div>
@@ -24,19 +24,19 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
-import { IFilterDoubleDatePicker } from '../../types';
-import dayjs from 'dayjs';
-import type { DatePickerOptions } from 'element-ui/types/date-picker';
+import { IFilterDoubleDatePicker, IFilterDoubleDatePickerLimit } from '../../types';
+import { genStartDateDisabledOptions, genEndDateDisabledOptions } from '../../../helper';
+import { computed, toRefs } from 'vue';
 
 interface IFilterDoubleDatePickerProps {
   /** 日期选择器配置 */
-  config: IFilterDoubleDatePicker;
+  config: IFilterDoubleDatePicker | IFilterDoubleDatePickerLimit;
   /** 临时筛选值 */
   tempFilteredValue: Record<string, string>;
 }
 
 const props = defineProps<IFilterDoubleDatePickerProps>();
+const { config, tempFilteredValue } = toRefs(props)
 
 const emit = defineEmits<{
   (e: 'update:tempFilteredValue', key: string, value: string): void;
@@ -51,41 +51,36 @@ const datePickerCommonProps = {
   editable: false,
 } as const;
 
-/** 开始日期禁用配置 */
-const startDateDisabledOptions = computed<DatePickerOptions>(() => {
-  const endDate = props.tempFilteredValue[props.config.prop[1]];
 
-  return {
-    disabledDate: (time: Date) => {
-      if (!endDate) return false;
-      
-      const currentDate = dayjs(time);
-      return currentDate.isAfter(dayjs(endDate), 'day');
-    }
-  };
+const pickerStartOptions = computed(() => {
+  if ('startOptions' in config.value && config.value.startOptions) {
+    return config.value.startOptions;
+  }
+  if ('limit' in config.value) {
+    return genStartDateDisabledOptions(tempFilteredValue.value[config.value.prop[1]], config.value.limit);
+  }
+  // 默认，无限制
+  return genStartDateDisabledOptions(tempFilteredValue.value[config.value.prop[1]]);
 });
 
-/** 结束日期禁用配置 */
-const endDateDisabledOptions = computed<DatePickerOptions>(() => {
-  const startDate = props.tempFilteredValue[props.config.prop[0]];
-
-  return {
-    disabledDate: (time: Date) => {
-      if (!startDate) return false;
-      
-      const currentDate = dayjs(time);
-      return currentDate.isBefore(dayjs(startDate), 'day');
-    }
-  };
-});
+const pickerEndOptions = computed(() => {
+  if ('endOptions' in config.value && config.value.endOptions) {
+    return config.value.endOptions;
+  }
+  if ('limit' in config.value) {
+    return genEndDateDisabledOptions(tempFilteredValue.value[config.value.prop[0]], config.value.limit);
+  }
+  // 默认，无限制
+  return genEndDateDisabledOptions(tempFilteredValue.value[config.value.prop[0]]);
+})
 
 /** 处理开始日期变更 */
 const handleStartDateChange = (val: string | null) => {
-  emit('update:tempFilteredValue', props.config.prop[0], val || '');
+  emit('update:tempFilteredValue', config.value.prop[0], val || '');
 };
 
 /** 处理结束日期变更 */
 const handleEndDateChange = (val: string | null) => {
-  emit('update:tempFilteredValue', props.config.prop[1], val || '');
+  emit('update:tempFilteredValue', config.value.prop[1], val || '');
 };
 </script>

package/src/components/EditableTable/types/index.ts

@@ -36,11 +36,20 @@ export interface IFilterSelect {
 }
 
 /** 筛选组件 - 日期范围（拆分两个日期选择器） */
-export interface IFilterDoubleDatePicker {
+export interface IFilterDoubleDatePickerBase {
   type: 'doubleDatePicker',
   prop: [string, string],
   label?: string,
-	pickerOptions?: DatePicker['pickerOptions']
+}
+
+export interface IFilterDoubleDatePicker extends IFilterDoubleDatePickerBase {
+	startOptions?: DatePicker['pickerOptions'],
+  endOptions?: DatePicker['pickerOptions'],
+}
+
+export interface IFilterDoubleDatePickerLimit extends IFilterDoubleDatePickerBase {
+  /** 限制天数范围 */
+  limit?: number
 }
 
 /** 筛选组件 - 月日选择器 */
@@ -66,7 +75,7 @@ export interface IFilterSolt {
   active: () => boolean
 }
 
-export type FilterItem = IFilterInput | IFilterSelect | IFilterDoubleDatePicker | IFilterMonthDayPicker | IFilterColorRadio | IFilterSolt
+export type FilterItem = IFilterInput | IFilterSelect | IFilterDoubleDatePicker | IFilterDoubleDatePickerLimit | IFilterMonthDayPicker | IFilterColorRadio | IFilterSolt
 
 /** 筛选组件类型 */
 export type FilterListType = Array<FilterItem>

package/src/components/SearchForm/index.vue

@@ -8,7 +8,7 @@
       v-for="({
         isEmpty = true, key, type, prop, label, placeholder, candidate, filterable=false, withoutAll=false, collapseTags=false,
         clearable=false, multiple=false, multipleLimit=0, changeCb, inputLimitCallback, slotName, dateType='date',
-        doubleIsInline = true, maxlength = 255,
+        doubleIsInline = true, maxlength = 255, datePickerOptions, doubleDatePickerStartOptions, doubleDatePickerEndOptions, doubleDatePickerLimit
       }) in config"
       :key="label"
       :label="showLabel ? label : ''"
@@ -72,6 +72,7 @@
         :placeholder="dateType == 'date' ? placeholder || '选择日期' : '选择日期范围'"
         start-placeholder="开始日期"
         end-placeholder="结束日期"
+        :picker-options="datePickerOptions"
       />
       <div
         v-if="type === 'doubleDatePicker'"
@@ -84,7 +85,9 @@
           value-format="yyyy-MM-dd"
           format="yyyy-MM-dd"
           type="date"
+          :editable="false"
           :placeholder="(placeholder || [])[0] || '开始日期'"
+          :picker-options="doubleDatePickerStartOptions || genStartDateDisabledOptions(formData[prop[1]], doubleDatePickerLimit)"
         />
         <el-date-picker
           @input="val => handleInput(val, prop[1], '', key)"
@@ -93,7 +96,9 @@
           value-format="yyyy-MM-dd"
           format="yyyy-MM-dd"
           type="date"
+          :editable="false"
           :placeholder="(placeholder || [])[1] || '结束日期'"
+          :picker-options="doubleDatePickerEndOptions || genEndDateDisabledOptions(formData[prop[0]], doubleDatePickerLimit)"
         />
         <el-checkbox
           :value="checkedIds[key]"
@@ -124,6 +129,8 @@
 </template>
 
 <script>
+import { genStartDateDisabledOptions, genEndDateDisabledOptions } from '../helper';
+
 export default {
   name: 'SearchForm',
   props: {
@@ -187,6 +194,8 @@ export default {
     this.initialData = Object.freeze({ ...this.formData })
   },
   methods: {
+    genStartDateDisabledOptions,
+    genEndDateDisabledOptions,
     handleInput (val, prop, inputLimitCallback, key) {
       if (inputLimitCallback && !inputLimitCallback(val)) return false
       if (val) {

package/src/components/SearchForm/types/index.ts

@@ -1,3 +1,5 @@
+import { DatePicker } from "element-ui/types/element-ui"
+
 type BaseOption = {
   label: string
   prop: string
@@ -37,6 +39,7 @@ type SelectOption = BaseOption & {
 type DatePickerOption = BaseOption & {
   type: 'datePicker'
   dateType?: string
+  datePickerOptions?: DatePicker['pickerOptions']
 }
 
 type BaseDoubleOption = Omit<BaseOption, 'prop'> & {
@@ -49,15 +52,25 @@ type DoubleInputOption = BaseDoubleOption & {
   inputLimitCallback?: (value: string) => boolean
 }
 
-type DoubleDatePickerOption = BaseDoubleOption & {
+type DoubleDatePickerOptionBase = BaseDoubleOption & {
   type: 'doubleDatePicker'
   isEmpty?: boolean
 }
 
+type DoubleDatePickerOption = DoubleDatePickerOptionBase & {
+  doubleDatePickerStartOptions?: DatePicker['pickerOptions']
+  doubleDatePickerEndOptions?: DatePicker['pickerOptions']
+}
+
+type DoubleDatePickerOptionLimit = DoubleDatePickerOptionBase & {
+  doubleDatePickerLimit?: number
+}
+
 export type SearchFormConfigOption =
   | InputOption
   | SelectOption
   | DatePickerOption
   | DoubleInputOption
   | DoubleDatePickerOption
+  | DoubleDatePickerOptionLimit
   | SlotOption

package/src/components/helper.ts

@@ -0,0 +1,37 @@
+import dayjs from "dayjs";
+
+/** 开始日期禁用配置 */
+export function genStartDateDisabledOptions(endDate: string, limit: number = 0) {
+  return {
+    disabledDate: (time: Date) => {
+      if (!endDate) return false;
+      
+      const currentDate = dayjs(time);
+      const baseOption = currentDate.isAfter(dayjs(endDate), 'day');
+
+      if (!limit) {
+        return baseOption
+      }
+
+      return baseOption || currentDate.isBefore(dayjs(endDate).subtract(limit - 1, 'day'), 'day');
+    }
+  };
+}
+
+/** 结束日期禁用配置 */
+export function genEndDateDisabledOptions(startDate: string, limit: number = 0) {
+  return {
+    disabledDate: (time: Date) => {
+      if (!startDate) return false;
+      
+      const currentDate = dayjs(time);
+      const baseOption = currentDate.isBefore(dayjs(startDate), 'day');
+
+      if (!limit) {
+        return baseOption
+      }
+      
+      return baseOption || currentDate.isAfter(dayjs(startDate).add(limit - 1, 'day'), 'day');
+    }
+  };
+}