@lx-frontend/wrap-element-ui 1.0.0-beta.8 → 1.0.1-7.beta-2

package/src/components/EditableTable/useColumnHeaderOperation.ts

@@ -1,326 +0,0 @@
-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,
-  }
-}

package/src/components/EditableTable/useViewSetting.ts

@@ -1,119 +0,0 @@
-import { ref, nextTick, watch, ComputedRef, Ref, onMounted, computed } from "vue"
-import { IColumnConfig, IProps } from "./types"
-
-interface IViewSettingParams {
-  tableDomRef: any
-  showingColumns: Ref<string[]>
-  actualColumns: ComputedRef<IColumnConfig[]>
-  props: IProps
-}
-
-export default function useViewSetting({ tableDomRef, showingColumns, actualColumns, props }: IViewSettingParams) {
-  const viewSettingDragSortOptions = ref<IColumnConfig[]>([]);
-  const columnsToBeShown = ref<string[]>([]); // 显示设置弹窗中勾选的列
-  const viewSettingVisible = ref(false);
-  const leftFixedColumnCount = ref(0);
-  const tempLeftFixedColumnCount = ref(0);
-
-  const storageKey = computed(() => `@lx-frontend/wrap-element-ui/table_setting_cloumns/${props.settingStorgeKey || (location.pathname === '/' ? location.hash : location.pathname)}`);
-
-  const saveSettingToStorge = () => localStorage.setItem(storageKey.value, JSON.stringify({
-    showingColumns: showingColumns.value,
-    leftFixedColumnCount: leftFixedColumnCount.value
-  }));
-
-  watch(
-    () => props.columnConfig,
-    (val) => {
-      const _keys = new Set(props.columnConfig.map(c => (c.prop)));
-      const _cache = localStorage.getItem(storageKey.value);
-      const setColumns = () => (showingColumns.value = val.filter(v => !v.defaultHide).map(c => c.prop));
-      if (!_cache) {
-        setColumns();
-        leftFixedColumnCount.value = props.leftFixedCount as number;
-      } else {
-        try {
-          // 缓存数据字段可能随着更新导致对不上，清理无效数据，防止出问题
-          const cache = JSON.parse(_cache);
-          if (!cache.showingColumns || !Array.isArray(cache.showingColumns)) {
-            setColumns();
-          } else {
-            showingColumns.value = cache.showingColumns.filter(key => _keys.has(key));
-          }
-          const _leftFixedColumnCount = Number(cache?.leftFixedColumnCount)
-          leftFixedColumnCount.value = isNaN(_leftFixedColumnCount) ? (props.leftFixedCount as number) : _leftFixedColumnCount;
-          // 写入清理后的数据
-          saveSettingToStorge();
-        } catch (error) {
-          console.error(error);
-          localStorage.removeItem(storageKey.value);
-          setColumns();
-        }
-      }
-    },
-    { immediate: true }
-  )
-
-  watch(
-    () => columnsToBeShown.value,
-    (val) => {
-      viewSettingDragSortOptions.value = props.columnConfig
-        .filter(c => val.includes(c.prop));
-      if (tempLeftFixedColumnCount.value > val.length) tempLeftFixedColumnCount.value = val.length
-    },
-    { immediate: true }
-  )
-
-  watch(
-    () => showingColumns.value,
-    (val) => {
-      // 只要正在显示的列发生变化，dialog中的显示项也要同步变化，反之不然
-      columnsToBeShown.value = [...val];
-    },
-    { immediate: true }
-  )
-
-  onMounted(() => {
-    leftFixedColumnCount.value = props.leftFixedCount as number;
-  })
-
-  const handleViewSettingShow = () => {
-    viewSettingDragSortOptions.value = actualColumns.value
-      .filter(c => columnsToBeShown.value.includes(c.prop));
-    tempLeftFixedColumnCount.value = leftFixedColumnCount.value;
-    viewSettingVisible.value = true;
-  }
-
-  const handleViewSettingClose = () => {
-    viewSettingVisible.value = false;
-    // 恢复显示的列
-    showingColumns.value = actualColumns.value.map(c => c.prop);
-  }
-
-  const handleViewSettingConfirm = async () => {
-    viewSettingVisible.value = false;
-    showingColumns.value = viewSettingDragSortOptions.value.map(c => c.prop);
-    leftFixedColumnCount.value = tempLeftFixedColumnCount.value;
-    saveSettingToStorge()
-    await nextTick();
-    tableDomRef.value?.doLayout();
-  }
-
-  const handleInputTempLeftFixedColumnCount = (value: string) => {
-    const _value = Number(value)
-    if (isNaN(_value)) return
-    tempLeftFixedColumnCount.value = Math.max(0, Math.min(columnsToBeShown.value.length, Math.floor(_value)))
-  }
-
-  return {
-    viewSettingDragSortOptions,
-    columnsToBeShown,
-    viewSettingVisible,
-    leftFixedColumnCount,
-    tempLeftFixedColumnCount,
-    handleInputTempLeftFixedColumnCount,
-    handleViewSettingShow,
-    handleViewSettingClose,
-    handleViewSettingConfirm
-  }
-}