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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lx-frontend/wrap-element-ui",
-  "version": "1.0.21-beta.1",
+  "version": "1.0.21-beta.2",
   "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="genStartDateDisabledOptions(tempFilteredValue[config.prop[1]], config.limit)"
         @input="handleStartDateChange"
       />
       <el-date-picker
         v-bind="datePickerCommonProps"
         placeholder="结束日期"
         :value="tempFilteredValue[config.prop[1]]"
-        :picker-options="endDateDisabledOptions"
+        :picker-options="genEndDateDisabledOptions(tempFilteredValue[config.prop[0]], config.limit)"
         @input="handleEndDateChange"
       />
     </div>
@@ -24,10 +24,8 @@
 </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 { genStartDateDisabledOptions, genEndDateDisabledOptions } from '../../../helper';
 
 interface IFilterDoubleDatePickerProps {
   /** 日期选择器配置 */
@@ -51,34 +49,6 @@ 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 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 handleStartDateChange = (val: string | null) => {
   emit('update:tempFilteredValue', props.config.prop[0], val || '');

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

@@ -40,7 +40,9 @@ export interface IFilterDoubleDatePicker {
   type: 'doubleDatePicker',
   prop: [string, string],
   label?: string,
-	pickerOptions?: DatePicker['pickerOptions']
+	pickerOptions?: DatePicker['pickerOptions'],
+  /** 限制天数范围 */
+  limit?: number
 }
 
 /** 筛选组件 - 月日选择器 */

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, doubleDatePickerLimit
       }) in config"
       :key="label"
       :label="showLabel ? label : ''"
@@ -84,7 +84,9 @@
           value-format="yyyy-MM-dd"
           format="yyyy-MM-dd"
           type="date"
+          :editable="false"
           :placeholder="(placeholder || [])[0] || '开始日期'"
+          :picker-options="genStartDateDisabledOptions(formData[prop[1]], doubleDatePickerLimit)"
         />
         <el-date-picker
           @input="val => handleInput(val, prop[1], '', key)"
@@ -93,7 +95,9 @@
           value-format="yyyy-MM-dd"
           format="yyyy-MM-dd"
           type="date"
+          :editable="false"
           :placeholder="(placeholder || [])[1] || '结束日期'"
+          :picker-options="genEndDateDisabledOptions(formData[prop[0]], doubleDatePickerLimit)"
         />
         <el-checkbox
           :value="checkedIds[key]"
@@ -124,6 +128,8 @@
 </template>
 
 <script>
+import { genStartDateDisabledOptions, genEndDateDisabledOptions } from '../helper';
+
 export default {
   name: 'SearchForm',
   props: {
@@ -187,6 +193,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/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');
+    }
+  };
+}