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

package/package.json

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

package/src/components/EditableTable/bizHooks/useColumnHeaderOperation.ts

@@ -92,6 +92,10 @@ export function useColumnHeaderOperation({ props, tableDomRef, emit, showingColu
           return !!(filteredValue.value[item.prop] as any[]).length
         }
 
+        if (item.type === 'slot') {
+          return item.active()
+        }
+
         return !!filteredValue.value[item.prop]
       }
     )
@@ -139,15 +143,17 @@ export function useColumnHeaderOperation({ props, tableDomRef, emit, showingColu
     const params: Record<string, any> = {};
 
     const processFilter = (filters: FilterListType) => {
-      filters.forEach((item) => {
-        if (item.type === 'doubleDatePicker' || item.type === 'monthDayPicker') {
-          const [start, end] = item.prop
-          params[start] = filteredValue.value[start];
-          params[end] = filteredValue.value[end];
-        } else {
-          params[item.prop] = filteredValue.value[item.prop];
-        }
-      });
+      filters
+        .filter(item => item.type !== 'slot')
+        .forEach((item) => {
+          if (item.type === 'doubleDatePicker' || item.type === 'monthDayPicker') {
+            const [start, end] = item.prop
+            params[start] = filteredValue.value[start];
+            params[end] = filteredValue.value[end];
+          } else {
+            params[item.prop] = filteredValue.value[item.prop];
+          }
+        });
     }
 
     // 仅提交显示的列的相关数据
@@ -242,6 +248,7 @@ export function useColumnHeaderOperation({ props, tableDomRef, emit, showingColu
 
   function handleResetFilterValue (column: IColumnConfig) {
     (column.filters || [])
+      .filter(item => item.type !== 'slot')
       .forEach(
         (item) => {
           if (item.type === 'radio' || item.type === 'checkbox') {
@@ -287,6 +294,7 @@ export function useColumnHeaderOperation({ props, tableDomRef, emit, showingColu
     // 设置搜索和过滤参数时，如果使用 showingColumns 遍历，会导致通过外部设置未显示的列的搜索和过滤参数丢失
     [props.colorFilterConfig, ...props.columnConfig].forEach(column => {
       (column?.filters ?? [])
+        .filter(item => item.type !== 'slot')
         .forEach(
           (item) => {
             if (item.type === 'doubleDatePicker' || item.type === 'monthDayPicker') {

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/features/bizTableHeaderPopover/index.vue

@@ -40,7 +40,12 @@
           :key="index"
           class="editable-table-sort-filter__item editable-table__filter-group__filter"
         >
+          <slot
+            v-if="filterItem.type === 'slot'"
+            :name="filterItem.slotName"
+          />
           <component
+            v-else
             :is="componentMap[filterItem.type]"
             :config="filterItem"
             :temp-filtered-value="tempFilteredValue"
@@ -125,7 +130,7 @@ const emit = defineEmits<{
 }>()
 
 // 把 filterItem.type 映射到组件
-const componentMap: Record<FilterItem['type'], any> = {
+const componentMap: Record<Exclude<FilterItem['type'], 'slot'>, any> = {
   /** 输入框 */
   input: BizInputFilter,
   /** 日期范围 */

package/src/components/EditableTable/index.vue

@@ -162,10 +162,10 @@
             :temp-filtered-value="tempFilteredValue"
             @update:tempSummaryList="val => { tempSummaryList = val }"
             @update:tempFilteredValue="(key, value) => { $set(tempFilteredValue, key, value) }"
-            @popover-show="() => handleHeaderPopoverShow(column)"
+            @popover-show="() => handleOpenFilter(column)"
             @update:sort="handleSort"
-            @reset="() => handleHeaderOperationReset(column)"
-            @confirm="() => handleHeaderOperationConfirm(column)"
+            @reset="() => handleResetFilter(column)"
+            @confirm="() => handleConfirmFilter(column)"
           >
             <template #summay-item>
               <slot
@@ -175,6 +175,16 @@
                 {{ column.label }}
               </slot>
             </template>
+            <!-- 动态地将父组件传递的所有slot下发给孙子组件（biz-table-header-popover），以实现slot的透传 -->
+            <template
+              v-for="(_, name) in $slots"
+              #[name]="slotProps"
+            >
+              <slot
+                :name="name"
+                v-bind="slotProps || column"
+              />
+            </template>
           </biz-table-header-popover>
         </template>
         <!-- 默认操作按钮，defaultOperations属性不为空数组时展示。编辑状态下隐藏 -->
@@ -397,6 +407,12 @@ interface IEmits {
   (e: 'sort-change', param: { order: 'descending' | 'ascending' | null, prop: string }): void
   /** 双击某一行 */
   (e: 'row-dblclick', param: any): void
+  /** 筛选条件打开 */
+  (e: 'open-filter', prop: string): void
+  /** 重置筛选 */
+  (e: 'reset-filter', prop: string): void
+  /** 筛选条件确认 */
+  (e: 'confirm-filter', prop: string): void
 }
 
 const props = withDefaults(defineProps<IProps>(), {
@@ -565,7 +581,8 @@ const beforeDragStart = () => {
   return true;
 };
 
-// @ts-ignore
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore ts-plugin存在间歇性抛出「类型实例化过深，且可能无限」的错误
 useDragSort({
   emit,
   props,
@@ -609,6 +626,27 @@ const handleRowDblClick = (e) => {
   emit('row-dblclick', e);
 };
 
+const handleOpenFilter = (column: IColumnConfig) => {
+  emit('open-filter', column.prop);
+  nextTick(() => {
+    handleHeaderPopoverShow(column)
+  })
+}
+
+const handleResetFilter = (column: IColumnConfig) => {
+  emit('reset-filter', column.prop);
+  nextTick(() => {
+    handleHeaderOperationReset(column)
+  })
+}
+
+const handleConfirmFilter = (column: IColumnConfig) => {
+  emit('confirm-filter', column.prop);
+  nextTick(() => {
+    handleHeaderOperationConfirm(column)
+  })
+}
+
 const bizViewSettingDialogRef = ref(null as unknown as InstanceType<typeof BizViewSettingDialog>)
 const handleViewSettingShow = () => bizViewSettingDialogRef.value.open()
 

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
 }
 
 /** 筛选组件 - 月日选择器 */
@@ -60,7 +62,13 @@ export interface IFilterColorRadio {
   options: Array<IFilterSelectOptions & { color: string }>
 }
 
-export type FilterItem = IFilterInput | IFilterSelect | IFilterDoubleDatePicker | IFilterMonthDayPicker | IFilterColorRadio
+export interface IFilterSolt {
+  type: 'slot',
+  slotName: string,
+  active: () => boolean
+}
+
+export type FilterItem = IFilterInput | IFilterSelect | IFilterDoubleDatePicker | 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, 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');
+    }
+  };
+}