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

package/package.json

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

@@ -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

@@ -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>