@lx-frontend/wrap-element-ui 1.0.19-beta.1 → 1.0.19-beta.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lx-frontend/wrap-element-ui",
-  "version": "1.0.19-beta.1",
+  "version": "1.0.19-beta.11",
   "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/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

@@ -161,10 +161,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
@@ -174,6 +174,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属性不为空数组时展示。编辑状态下隐藏 -->
@@ -394,6 +404,12 @@ interface IEmits {
   (e: 'search', param: Record<string, any>): void
   /** 排序 */
   (e: 'sort-change', param: { order: 'descending' | 'ascending' | null, prop: string }): void
+  /** 筛选条件打开 */
+  (e: 'open-filter', prop: string): void
+  /** 重置筛选 */
+  (e: 'reset-filter', prop: string): void
+  /** 筛选条件确认 */
+  (e: 'confirm-filter', prop: string): void
 }
 
 const props = withDefaults(defineProps<IProps>(), {
@@ -601,6 +617,21 @@ const handleSelectionChange = (e) => {
   emit('selection-change', e);
 };
 
+const handleOpenFilter = (column: IColumnConfig) => {
+  handleHeaderPopoverShow(column)
+  emit('open-filter', column.prop);
+}
+
+const handleResetFilter = (column: IColumnConfig) => {
+  handleHeaderOperationReset(column)
+  emit('reset-filter', column.prop);
+}
+
+const handleConfirmFilter = (column: IColumnConfig) => {
+  handleHeaderOperationConfirm(column)
+  emit('confirm-filter', column.prop);
+}
+
 const bizViewSettingDialogRef = ref(null as unknown as InstanceType<typeof BizViewSettingDialog>)
 const handleViewSettingShow = () => bizViewSettingDialogRef.value.open()
 

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

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

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