@lx-frontend/wrap-element-ui 1.0.10 → 1.0.11-beta.0

package/package.json

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

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

@@ -1,15 +1,14 @@
-import { computed, ref, watch, nextTick, Ref } from "vue"
+import { computed, nextTick, ref, Ref, watch } from 'vue'
 import { IColumnConfig, IEmits, IProps } from '../types';
 
 interface IUseColumnHeaderOperationParams {
   props: IProps
   tableDomRef: any
-  sortFilterPopoverRef: any
   emit: IEmits;
   showingColumns: Ref<string[]>
 }
 
-export function useColumnHeaderOperation({ props, tableDomRef, sortFilterPopoverRef, emit, showingColumns }: IUseColumnHeaderOperationParams) {
+export function useColumnHeaderOperation({ props, tableDomRef, emit, showingColumns }: IUseColumnHeaderOperationParams) {
 
   // column如果有sortable属性，点击列头部，会直接触发排序，为了在弹窗点确定时再触发排序，需要阻止点击立即排序
   // 所以，初始渲染时，将sortable设置为false，在触发排序逻辑时再设置成真实的值，再利用el-table自身的排序逻辑触发排序
@@ -85,11 +84,11 @@ export function useColumnHeaderOperation({ props, tableDomRef, sortFilterPopover
         : column.filters.type === 'radio'
           ? filteredValue.value[column.prop]
           : (filteredValue.value[column.prop] as any[]).length))
-      ) || (
-        !!(column.search
-          ? Array.isArray(column.search) && column.search?.some(v => searchValue.value[v.prop])
-          : searchValue.value[column.prop])
-      ) || hasPickerParams || sortingColumn.value?.prop === column.prop || summaryList.value.includes(column.prop);
+    ) || (
+      !!(column.search
+        ? Array.isArray(column.search) && column.search?.some(v => searchValue.value[v.prop])
+        : searchValue.value[column.prop])
+    ) || hasPickerParams || sortingColumn.value?.prop === column.prop || summaryList.value.includes(column.prop);
   }
 
   const handleHeaderPopoverShow = (column: IColumnConfig) => {
@@ -104,9 +103,9 @@ export function useColumnHeaderOperation({ props, tableDomRef, sortFilterPopover
   }
 
   const closeSortAndFilterPopover = (exceptProp?: string) => {
-    sortFilterPopoverRef.value?.forEach((item: any) => {
-      if (!exceptProp || exceptProp !== item.$el.dataset.prop) {
-        item.close();
+    document.querySelectorAll('span[data-popper-name]').forEach((item: any) => {
+      if (!exceptProp || exceptProp !== item.dataset.prop) {
+        item?.__vue__?.doClose();
       }
     });
   }
@@ -121,6 +120,7 @@ export function useColumnHeaderOperation({ props, tableDomRef, sortFilterPopover
     props.columnConfig.forEach(column => {
       obj[column.prop] = column
     })
+
     return obj
   })
 
@@ -147,8 +147,13 @@ export function useColumnHeaderOperation({ props, tableDomRef, sortFilterPopover
       }
     })
 
+    if (props.colorFilterConfig) {
+      const { prop } = props.colorFilterConfig
+      params[prop] = filteredValue.value[prop]
+    }
+
     Object.keys(params).forEach(key => {
-      if (params[key] === undefined) delete params[key]
+      if (params[key] === undefined || params[key] === null || params[key] === '') delete params[key]
     })
 
     emit('search', {
@@ -264,7 +269,6 @@ export function useColumnHeaderOperation({ props, tableDomRef, sortFilterPopover
       searchValue.value[column.doubleDatePicker.props[1]] = '';
     }
 
-
     emitSearch();
 
     filterColumns(scope.store);
@@ -326,6 +330,11 @@ export function useColumnHeaderOperation({ props, tableDomRef, sortFilterPopover
       }
     })
 
+    if (props.colorFilterConfig) {
+      const { prop, filters } = props.colorFilterConfig
+      _filteredValue[prop] = params[prop] ?? (Array.isArray(filters) ? [] : filters.default);
+    }
+
     searchValue.value = { ...searchValue.value, ..._searchValue }
     filteredValue.value = { ...filteredValue.value, ..._filteredValue }
   }

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

@@ -4,13 +4,18 @@
     placement="bottom"
     trigger="click"
     popper-class="editable-table-sort-filter"
+    data-popper-name="editable-table-sort-filter"
     :data-prop="column.prop"
     @show="() => emit('popover-show')"
   >
     <template slot="reference">
       <!-- 筛选中，或排序中，高亮 -->
       <span :class="['editable-table__sort-reference', headActive && 'editable-table__sort-reference--active']">
-        {{ column.label }}
+        <slot
+          v-if="column.customColorLabel"
+          name="custom"
+        />
+        <span v-else>{{ column.label }}</span>
         <div :class="['editable-table__sort-icon', headActive && 'editable-table__sort-icon--active']" />
       </span>
     </template>
@@ -75,7 +80,7 @@
           />
         </div>
       </div>
-      
+
       <div
         v-if="column.doubleDatePicker"
         class="editable-table-sort-filter__sort"

package/src/components/EditableTable/index.vue

@@ -99,12 +99,47 @@
       <!-- 颜色选择列 -->
       <el-table-column
         v-if="colorList && colorList.length > 0"
-        width="22px"
+        :width="colorFilterConfig ? '40px' : '22px'"
         class-name="editable-table__color-column no-inner-cell-border"
         :fixed="leftFixedColumnCount > 0 ? 'left' : false"
+        :filtered-value="filteredValue[colorFilterConfig?.prop]"
       >
-        <template #header>
-          <div class="editable-table__color-icon" />
+        <template #header="scope">
+          <div v-if="colorFilterConfig">
+            <biz-table-header-popover
+              :head-active="isColumnHeadActive(colorFilterConfig)"
+              :column="colorFilterConfig"
+              :showing-columns="showingColumns"
+              :temp-summary-list="tempSummaryList"
+              :temp-sorting-column="tempSortingColumn"
+              :temp-sort-type="tempSortType"
+              :temp-filtered-value="tempFilteredValue"
+              :temp-search-value="tempSearchValue"
+              @update:tempSummaryList="val => { tempSummaryList = val }"
+              @update:tempFilteredValue="(key, value) => { $set(tempFilteredValue, key, value) }"
+              @update:tempSearchValue="(key, value) => { $set(tempSearchValue, key, value) }"
+              @popover-show="() => handleHeaderPopoverShow(colorFilterConfig)"
+              @update:sort="(type) => handleSort(type, colorFilterConfig)"
+              @reset="() => handleHeaderOperationReset(colorFilterConfig, scope)"
+              @confirm="() => handleHeaderOperationConfirm(colorFilterConfig, scope)"
+            >
+              <template #custom>
+                <div class="editable-table__color-icon" />
+              </template>
+              <template #filter-item="item">
+                <slot
+                  :name="colorFilterConfig.prop + '-filter-item'"
+                  v-bind="item"
+                >
+                  {{ item.text }}
+                </slot>
+              </template>
+            </biz-table-header-popover>
+          </div>
+          <div
+            v-else
+            class="editable-table__color-icon"
+          />
         </template>
         <template #default="scope">
           <biz-color-select
@@ -128,7 +163,6 @@
           #header="scope"
         >
           <biz-table-header-popover
-            ref="sortFilterPopoverRef"
             :head-active="isColumnHeadActive(column)"
             :column="column"
             :showing-columns="showingColumns"
@@ -337,6 +371,8 @@ interface IProps {
   defaultOperations?: IDefaultOperationType[];
   /** 行背景色列表 */
   colorList?: IColorList;
+  /** 自定义颜色列的表头筛选 */
+  colorFilterConfig?: IColumnConfig;
   /** 左侧固定列数 */
   leftFixedCount?: number;
   /** 性能优化参数，调整拖拽的范围 */
@@ -391,6 +427,7 @@ const props = withDefaults(defineProps<IProps>(), {
   total: 0,
   defaultOperations: () => [],
   colorList: () => [],
+  colorFilterConfig: () => null,
   leftFixedCount: 1,
   dragSemiRange: 15,
   loading: false,
@@ -444,7 +481,6 @@ const actualColumns = computed(() => {
   return res;
 });
 
-const sortFilterPopoverRef = ref<any>(null);
 const tableDomRef = ref<any>(null);
 const currScope = ref<any>(null);
 
@@ -520,7 +556,6 @@ const {
   inSorting,
 } = useColumnHeaderOperation({
   tableDomRef,
-  sortFilterPopoverRef,
   props,
   emit,
   showingColumns,

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

@@ -33,10 +33,13 @@ type _IColumnConfigRequired = {
   formatter?: (row: any, column: IColumnConfig, value: any, index: number) => string | number;
   width?: number | string;
   minWidth?: number | string;
+  /** 是否开启日期范围选择器 */
   doubleDatePicker?: {
     props: [string, string],
     label: string,
-  }; // 是否开启日期范围选择器
+  };
+  /** 自定义颜色表头label */
+  customColorLabel?: boolean
 }
 
 export type IColumnConfigRequired = _IColumnConfigRequired & Partial<Omit<TableColumn, keyof _IColumnConfigRequired>>
@@ -108,6 +111,7 @@ export interface IProps {
   total: number;
   defaultOperations?: IDefaultOperationType[];
   colorList?: IColorList;
+  colorFilterConfig?: IColumnConfig
   leftFixedCount?: number;
   dragSemiRange?: number;
   loading?: boolean;