useGridFilters.ts 4.15 KB
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { ITextFilterParams, IFilterOptionDef, IDateFilterParams } from 'ag-grid-community'

/**
 * 下拉选项类型定义
 * @author zzy
 */
export interface SelectOption {
  value: string | number | boolean
  text: string
}

export const useGridFilters = () => {
  const { t } = useI18n()

  const containsFilterParams = computed<ITextFilterParams>(() => ({
    filterOptions: [
      'contains',
      'equals',
      'notEqual',
    ],
    buttons: ["reset", "apply"]
  }))

  /**
   * 生成下拉选择筛选参数(基于 agTextColumnFilter,适用于 Community 版本)
   * @param options 下拉选项数组,包含 value 和 text 属性
   * @returns ITextFilterParams 筛选参数配置
   * @author zzy
   */
  const createSelectFilterParams = (options: SelectOption[]): ITextFilterParams => {
    // 选项为空时使用默认的 equals 筛选
    if (!options || options.length === 0) {
      return {
        filterOptions: ['equals', 'notEqual'],
        buttons: ["reset", "apply"],
        maxNumConditions: 1
      }
    }
    // 将选项转换为自定义筛选选项(服务端筛选,客户端不过滤)
    const filterOptions: IFilterOptionDef[] = [
      // 添加"请选择"空选项
      {
        displayKey: '',
        displayName: t('grid.filter.pleaseSelect'),
        predicate: () => true,
        numberOfInputs: 0 as const
      },
      ...options.map(opt => ({
        displayKey: String(opt.value),
        displayName: opt.text,
        predicate: () => true,
        numberOfInputs: 0 as const
      }))
    ]
    return {
      filterOptions,
      buttons: ["reset", "apply"],
      maxNumConditions: 1
    } as ITextFilterParams
  }
  const dateFilterParams = computed<IDateFilterParams>(() => ({
    filterOptions: [
      'inRange'
    ],
    buttons: ["reset", "apply"],
    browserDatePicker: true,
    maxNumConditions: 1,
  }))

  const gridLocaleText = computed(() => ({
    // Filter
    contains: t('grid.filter.contains'),
    notContains: t('grid.filter.notContains'),
    equals: t('grid.filter.equals'),
    notEqual: t('grid.filter.notEqual'),
    startsWith: t('grid.filter.startsWith'),
    endsWith: t('grid.filter.endsWith'),
    blank: t('grid.filter.blank'),
    notBlank: t('grid.filter.notBlank'),
    lessThan: t('grid.filter.lessThan'),
    greaterThan: t('grid.filter.greaterThan'),
    inRange: t('grid.filter.inRange'),
    applyFilter: t('grid.filter.applyFilter'),
    clearFilter: t('grid.filter.clearFilter'),
    resetFilter: t('grid.filter.resetFilter'),
    filterOoo: t('grid.filter.filterOoo'),
    andCondition: t('grid.filter.andCondition'),
    orCondition: t('grid.filter.orCondition'),
    true: t('grid.filter.true'),
    false: t('grid.filter.false'),
    empty: t('grid.filter.empty'),
    // Pagination
    page: t('grid.pagination.page'),
    to: t('grid.pagination.to'),
    of: t('grid.pagination.of'),
    more: t('grid.pagination.more'),
    next: t('grid.pagination.next'),
    last: t('grid.pagination.last'),
    first: t('grid.pagination.first'),
    previous: t('grid.pagination.previous'),

    // Toolbar
    columns: t('grid.toolbar.columns'),
    filters: t('grid.toolbar.filters'),
    pivot: t('grid.toolbar.pivot'),
    toolPanel: t('grid.toolbar.toolPanel'),
    pinColumn: t('grid.toolbar.pinColumn'),
    valueAggregation: t('grid.toolbar.valueAggregation'),
    autosizeThiscolumn: t('grid.toolbar.autosizeThiscolumn'),
    autosizeAllColumns: t('grid.toolbar.autosizeAllColumns'),
    groupBy: t('grid.toolbar.groupBy'),
    ungroupBy: t('grid.toolbar.ungroupBy'),
    resetColumns: t('grid.toolbar.resetColumns'),
    expandAll: t('grid.toolbar.expandAll'),
    collapseAll: t('grid.toolbar.collapseAll'),
    export: t('grid.toolbar.export'),
    csvExport: t('grid.toolbar.csvExport'),
    excelExport: t('grid.toolbar.excelExport'),

    // General
    loadingOoo: t('grid.general.loadingOoo'),
    noRowsToShow: t('grid.general.noRowsToShow'),
    selectAll: t('grid.general.selectAll'),
    searchOoo: t('grid.general.searchOoo'),

  }))

  return {
    containsFilterParams,
    dateFilterParams,
    gridLocaleText,
    createSelectFilterParams,
  }
}