@lx-frontend/wrap-element-ui 1.0.1-beta.2 → 1.0.1-beta.4

package/src/components/EditableTable/useColumnHeaderOperation.ts

@@ -1,188 +1,326 @@
-import { computed, ref, watch, nextTick } from "vue"
-import { IColumnConfig, IProps } from './types';
-
-interface IUseColumnHeaderOperationParams {
-  props: IProps
-  tableDomRef: any
-  sortFilterPopoverRef: any
-}
-
-export default function useColumnHeaderOperation({props, tableDomRef, sortFilterPopoverRef}: IUseColumnHeaderOperationParams) {
-
-  // column如果有sortable属性，点击列头部，会直接触发排序，为了在弹窗点确定时再触发排序，需要阻止点击立即排序
-  // 所以，初始渲染时，将sortable设置为false，在触发排序逻辑时再设置成真实的值，再利用el-table自身的排序逻辑触发排序
-  const inSorting = ref(false);
-
-  // 生效中的排序配置
-  const sortType = ref<'ascending' | 'descending' | null>(null);
-  const sortingColumn = ref<IColumnConfig | null>(null);
-
-  // 临时的排序配置
-  const tempSortType = ref<'ascending' | 'descending' | null>(null);
-  const tempSortingColumn = ref<IColumnConfig | null>(null);
-
-  // 生效中的过滤配置 和 临时过滤配置
-  const filteredValue = ref<Record<string, string[]>>({});
-  const tempFilteredValue = ref<Record<string, string[]>>({});
-
-  // 生效中的统计配置 和 临时统计配置
-  const tempSummaryList = ref<string[]>([]);
-  const summaryList = ref<string[]>([]);
-
-  // 生效中的搜索配置 和 临时搜索配置
-  const searchValue = ref<Record<string, string>>({});
-  const tempSearchValue = ref<Record<string, string>>({});
-
-  const isColumnFiltering = computed(() => Object.keys(tempFilteredValue.value).some(k => tempFilteredValue.value[k]?.length));
-
-  const showColumnHeadSortIcon = (column: IColumnConfig) => column.filters || column.isColumnSortable || column.isColumnSearchAble || column.summary;
-
-  watch(
-    () => props.columnConfig,
-    (val) => {
-      filteredValue.value = val.reduce((prev, curr) => ({...prev, [curr.prop]: []}), {});
-      tempFilteredValue.value = { ...filteredValue.value };
-    },
-    { immediate: true }
-  )
-
-  const tableSummaryMethod = (param) => {
-    const { columns, data } = param;
-    const sums: (string | number)[] = []
-    columns.forEach((column, index) => {
-      if (index === 0) {
-        sums[index] = '合计';
-        return;
-      }
-      if (!summaryList.value.includes(column.property)) {
-        sums[index] = '';
-      } else {
-        const values = data.map(item => item[column.property]);
-        // 找到对应列的summaryMethod函数
-        const summaryMethod = props.columnConfig.find(c => c.prop === column.property)?.summaryMethod ?? (() => '');
-        sums[index] = summaryMethod(values);
-      }
-    })
-  
-    return sums
-  }
-
-  const isColumnHeadActive = (column: IColumnConfig) => {
-    return filteredValue.value[column.prop]?.length ||
-      sortingColumn.value?.prop === column.prop ||
-      searchValue.value[column.prop] || 
-      summaryList.value.includes(column.prop);
-  }
-
-  const handleHeaderPopoverShow = (column) => {
-    // 关闭其他的排序和筛选弹窗（理论上不写也能关闭其他，但是就是有些列会出现两个弹窗同时出现的情况）
-    closeSortAndFilterPopover(column.prop);
-    tempFilteredValue.value = { ...filteredValue.value };
-    tempSearchValue.value = { ...searchValue.value };
-    tempSortType.value = sortType.value;
-    tempSortingColumn.value = sortingColumn.value ? { ...sortingColumn.value } as IColumnConfig : null;
-    // 临时合计项设置成实际的合计项
-    tempSummaryList.value = [ ...summaryList.value ];
-  }
-
-  const closeSortAndFilterPopover = (exceptProp?: string) => {
-    sortFilterPopoverRef.value?.forEach((item: any) => {
-      if (!exceptProp || exceptProp !== item.$el.dataset.prop) {
-        item.doClose();
-      }
-    });
-  }
-
-  const handleSort = (type: 'ascending' | 'descending', column) => {
-    tempSortType.value = type;
-    tempSortingColumn.value = column;
-  }
-
-  const handleHeaderOperationConfirm = async (scope) => {
-    summaryList.value = [ ...tempSummaryList.value ];
-    sortingColumn.value = tempSortingColumn.value ? {...tempSortingColumn.value} : null;
-    sortType.value = tempSortType.value;
-    if (sortingColumn.value) {
-      // 恢复列配置的sortable属性，只有列配置的sortable为true，才能用下面的sort方法
-      inSorting.value = true;
-      await nextTick();
-      tableDomRef.value?.sort(sortingColumn.value.prop, sortType.value);
-      inSorting.value = false
-    }
-
-    filteredValue.value = { ...tempFilteredValue.value };
-    searchValue.value = { ...tempSearchValue.value };
-
-    filterColumns(scope.store);
-
-    closeSortAndFilterPopover();
-    await nextTick()
-    tableDomRef.value?.doLayout();
-  }
-
-  const handleHeaderOperationReset = async (column, scope) => {
-    if (sortingColumn.value && sortingColumn.value.prop === column.prop) {
-      tableDomRef.value?.clearSort();
-      sortingColumn.value = null;
-      sortType.value = null;
-    }
-
-    // 合计
-    summaryList.value = summaryList.value.filter(item => item !== column.prop);
-
-    filteredValue.value[column.prop] = [];
-    searchValue.value[column.prop] = '';
-    filterColumns(scope.store);
-
-    closeSortAndFilterPopover();
-    await nextTick();
-    tableDomRef.value?.doLayout();
-  }
-
-  const filterColumns = (store) => {
-    store.states.columns.forEach(column => {
-      if (filteredValue.value[column.property]) {
-        store.commit('filterChange', {
-          column,
-          values: filteredValue.value[column.property],
-        });
-      }
-    });
-
-    // 根据searchValue过滤数据
-    const data = store.states.data.filter(item => {
-      const flag = Object.keys(searchValue.value)
-        .filter(key => searchValue.value[key])
-        .reduce((pre, key) => {
-          const value = searchValue.value[key];
-
-          return pre && item[key] && `${item[key]}`.indexOf(value) > -1;
-        }, true);
-
-      return flag;
-    });
-
-    store.states.data = data;
-  }
-
-  return {
-    isColumnHeadActive,
-    handleHeaderPopoverShow,
-    handleSort,
-    handleHeaderOperationConfirm,
-    handleHeaderOperationReset,
-    summaryList,
-    tableSummaryMethod,
-    filteredValue,
-    showColumnHeadSortIcon,
-    tempSortingColumn,
-    tempSearchValue,
-    tempFilteredValue,
-    tempSummaryList,
-    tempSortType,
-    sortingColumn,
-    isColumnFiltering,
-    searchValue,
-    inSorting
-  }
+import { computed, ref, watch, nextTick, Ref } from "vue"
+import { IColumnConfig, IEmits, IProps } from './types';
+
+interface IUseColumnHeaderOperationParams {
+  props: IProps
+  tableDomRef: any
+  sortFilterPopoverRef: any
+  emit: IEmits;
+  showingColumns: Ref<string[]>
+}
+
+export default function useColumnHeaderOperation({ props, tableDomRef, sortFilterPopoverRef, emit, showingColumns }: IUseColumnHeaderOperationParams) {
+
+  // column如果有sortable属性，点击列头部，会直接触发排序，为了在弹窗点确定时再触发排序，需要阻止点击立即排序
+  // 所以，初始渲染时，将sortable设置为false，在触发排序逻辑时再设置成真实的值，再利用el-table自身的排序逻辑触发排序
+  const inSorting = ref(false);
+
+  // 生效中的排序配置
+  const sortType = ref<'ascending' | 'descending' | null>(null);
+  const sortingColumn = ref<IColumnConfig | null>(null);
+
+  // 临时的排序配置
+  const tempSortType = ref<'ascending' | 'descending' | null>(null);
+  const tempSortingColumn = ref<IColumnConfig | null>(null);
+
+  // 生效中的过滤配置 和 临时过滤配置
+  const filteredValue = ref<Record<string, string | number | number[] | string[]>>({});
+  const tempFilteredValue = ref<Record<string, string | number | number[] | string[]>>({});
+
+  // 生效中的统计配置 和 临时统计配置
+  const tempSummaryList = ref<string[]>([]);
+  const summaryList = ref<string[]>([]);
+
+  // 生效中的搜索配置 和 临时搜索配置
+  const searchValue = ref<Record<string, string>>({});
+  const tempSearchValue = ref<Record<string, string>>({});
+
+  const isColumnFiltering = computed(() => Object.keys(tempFilteredValue.value).some(k => {
+    if (!Array.isArray(tempFilteredValue.value[k])) return tempFilteredValue.value[k]
+    return tempFilteredValue.value[k]?.length;
+  }));
+
+  const showColumnHeadSortIcon = (column: IColumnConfig) => column.filters || column.isColumnSortable || column.search || column.summary;
+
+  watch(
+    () => props.columnConfig,
+    (val) => {
+      filteredValue.value = val.reduce((prev, curr) => ({ ...prev, [curr.prop]: [] }), {});
+      tempFilteredValue.value = { ...filteredValue.value };
+    },
+    { immediate: true }
+  )
+
+  const tableSummaryMethod = (param) => {
+    const { columns, data } = param;
+    const sums: (string | number)[] = []
+    columns.forEach((column, index) => {
+      if (index === 0) {
+        sums[index] = '合计';
+        return;
+      }
+      if (!summaryList.value.includes(column.property)) {
+        sums[index] = '';
+      } else {
+        const values = data.map(item => item[column.property]);
+        // 找到对应列的summaryMethod函数
+        const summaryMethod = props.columnConfig.find(c => c.prop === column.property)?.summaryMethod ?? (() => '');
+        sums[index] = summaryMethod(values);
+      }
+    })
+
+    return sums
+  }
+
+  const isColumnHeadActive = (column: IColumnConfig) => {
+    return (
+      column.filters && (Array.isArray(column.filters)
+        ? (filteredValue.value[column.prop] as any[]).length
+        : 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]
+      ) ||
+      sortingColumn.value?.prop === column.prop ||
+      summaryList.value.includes(column.prop);
+  }
+
+  const handleHeaderPopoverShow = (column) => {
+    // 关闭其他的排序和筛选弹窗（理论上不写也能关闭其他，但是就是有些列会出现两个弹窗同时出现的情况）
+    closeSortAndFilterPopover(column.prop);
+    tempFilteredValue.value = { ...filteredValue.value };
+    tempSearchValue.value = { ...searchValue.value };
+    tempSortType.value = sortType.value;
+    tempSortingColumn.value = sortingColumn.value ? { ...sortingColumn.value } as IColumnConfig : null;
+    // 临时合计项设置成实际的合计项
+    tempSummaryList.value = [...summaryList.value];
+  }
+
+  const closeSortAndFilterPopover = (exceptProp?: string) => {
+    sortFilterPopoverRef.value?.forEach((item: any) => {
+      if (!exceptProp || exceptProp !== item.$el.dataset.prop) {
+        item.doClose();
+      }
+    });
+  }
+
+  const handleSort = (type: 'ascending' | 'descending', column) => {
+    tempSortType.value = type;
+    tempSortingColumn.value = column;
+  }
+
+  const columnMap = computed(() => {
+    const obj: Record<string, IColumnConfig> = {}
+    props.columnConfig.forEach(column => {
+      obj[column.prop] = column
+    })
+    return obj
+  })
+
+  const emitSearch = () => {
+    const params: Record<string, any> = {};
+    // 仅提交显示的列的相关数据
+    showingColumns.value.forEach(prop => {
+      const column = columnMap.value[prop]
+      if (column.filters) {
+        params[prop] = filteredValue.value[prop]
+      }
+      if (column.search) {
+        if (Array.isArray(column.search)) {
+          column.search.forEach(v => {
+            params[v.prop] = searchValue.value[v.prop]
+          })
+        } else {
+          params[prop] = searchValue.value[prop]
+        }
+      }
+    })
+
+    Object.keys(params).forEach(key => {
+      if (params[key] === undefined) delete params[key]
+    })
+
+    emit('search', params);
+  };
+
+  const handleHeaderOperationConfirm = async (column: IColumnConfig, scope) => {
+    if (column.search) {
+      // 校验
+      if (Array.isArray(column.search)) {
+        let validate = true;
+        column.search.forEach(v => {
+          if (!tempSearchValue.value[v.prop]) tempSearchValue.value[v.prop] = ''
+          if (!validate) return
+          if (v.validator) {
+            const result = v.validator(tempSearchValue.value[v.prop]);
+            if (validate && !result) validate = false;
+          }
+        })
+        // 校验未通过
+        if (!validate) return
+      } else {
+        if (!tempSearchValue.value[column.prop]) tempSearchValue.value[column.prop] = ''
+      }
+    }
+
+    summaryList.value = [...tempSummaryList.value];
+    sortingColumn.value = tempSortingColumn.value ? { ...tempSortingColumn.value } : null;
+    sortType.value = tempSortType.value;
+
+    if (sortingColumn.value) { // 确认时提交排序
+      if (props.localSort) {
+        // 恢复列配置的sortable属性，只有列配置的sortable为true，才能用下面的sort方法
+        inSorting.value = true;
+        await nextTick();
+        tableDomRef.value?.sort(sortingColumn.value.prop, sortType.value);
+        inSorting.value = false
+      } else {
+        emit('sort-change', { order: sortType.value, prop: sortingColumn.value.prop });
+      }
+    }
+
+    filteredValue.value = { ...tempFilteredValue.value };
+    searchValue.value = { ...tempSearchValue.value };
+
+    emitSearch();
+
+    filterColumns(scope.store);
+
+    closeSortAndFilterPopover();
+    await nextTick()
+    tableDomRef.value?.doLayout();
+  }
+
+  const clearSort = () => {
+    sortingColumn.value = null;
+    sortType.value = null;
+    if (props.localSort) { // 前端过滤
+      tableDomRef.value?.clearSort();
+    } else { // 接口过滤
+      emit('sort-change', { order: null, prop: '' });
+    }
+  }
+
+  const setSort = (params: { order: 'ascending' | 'descending', prop: string }) => {
+    const column = props.columnConfig.find(c => c.prop === params.prop);
+    if (column) {
+      sortingColumn.value = column;
+      sortType.value = params.order;
+      if (props.localSort) {
+        tableDomRef.value?.sort(params.prop, params.order);
+      }
+    }
+  }
+
+  const handleHeaderOperationReset = async (column: IColumnConfig, scope) => {
+    if (sortingColumn.value && sortingColumn.value.prop === column.prop) {
+      clearSort();
+    }
+
+    // 合计
+    summaryList.value = summaryList.value.filter(item => item !== column.prop);
+
+    if (column.filters) {
+      filteredValue.value[column.prop] = Array.isArray(column.filters)
+        ? []
+        : column.filters.default ?? []
+    }
+    if (column.search) {
+      if (!Array.isArray(column.search)) {
+        searchValue.value[column.prop] = '';
+      } else {
+        column.search.forEach(v => {
+          searchValue.value[v.prop] = '';
+        })
+      }
+    }
+
+    emitSearch();
+
+    filterColumns(scope.store);
+
+    closeSortAndFilterPopover();
+    await nextTick();
+    tableDomRef.value?.doLayout();
+  }
+
+  const filterColumns = (store) => {
+    if (!props.localFilter) return
+    store.states.columns.forEach(column => {
+      if (filteredValue.value[column.property]) {
+        store.commit('filterChange', {
+          column,
+          values: filteredValue.value[column.property],
+        });
+      }
+    });
+
+    // 根据searchValue过滤数据
+    const data = store.states.data.filter(item => {
+      const flag = Object.keys(searchValue.value)
+        .filter(key => searchValue.value[key])
+        .reduce((pre, key) => {
+          const value = searchValue.value[key];
+
+          return pre && item[key] && `${item[key]}`.indexOf(value) > -1;
+        }, true);
+
+      return flag;
+    });
+
+    store.states.data = data;
+  }
+
+  const setSearchParams = (params: Record<string, any>) => {
+    const _searchValue = {};
+    const _filteredValue = {};
+
+    // 设置搜索和过滤参数时，如果使用 showingColumns 遍历，会导致通过外部设置未显示的列的搜索和过滤参数丢失
+    props.columnConfig.forEach(column => {
+      if (column.search) {
+        if (Array.isArray(column.search)) {
+          column.search.forEach(v => {
+            _searchValue[v.prop] = params[v.prop];
+          });
+        } else {
+          _searchValue[column.prop] = params[column.prop] ?? '';
+        }
+      }
+      if (column.filters) {
+        const value = params[column.prop] ?? (Array.isArray(column.filters) ? [] : column.filters.default);
+        _filteredValue[column.prop] = value;
+      }
+    })
+
+    searchValue.value = { ...searchValue.value, ..._searchValue }
+    filteredValue.value = { ...filteredValue.value, ..._filteredValue }
+  }
+
+  return {
+    setSort,
+    clearSort,
+    setSearchParams,
+    isColumnHeadActive,
+    handleHeaderPopoverShow,
+    handleSort,
+    handleHeaderOperationConfirm,
+    handleHeaderOperationReset,
+    summaryList,
+    tableSummaryMethod,
+    filteredValue,
+    showColumnHeadSortIcon,
+    tempSortingColumn,
+    tempSearchValue,
+    tempFilteredValue,
+    tempSummaryList,
+    tempSortType,
+    sortingColumn,
+    isColumnFiltering,
+    searchValue,
+    inSorting,
+  }
 }