查询过滤条件

<app-filter-container 
  v-model="conditions" 								// 条件，最终填写的条件，将赋值到conditions中
  :loading="loading" 									// 是否显示loading,即loading状态
  :filters="defineFilters" 						// 过滤条件
  show-more 													// 是否显示展开/折叠按钮
  @search="search"></app-filter-container>

定义字符串条件

{
  type: EnumAppFilterType.string,
  label: "渠道编码",
  key: "realName",
  placeholder: "请输入姓名",
  visible: false,	// 默认是否展开，不填则展开
  options: {
    value: '' // 默认值
  }
}

定义boolean条件

{
  type: EnumAppFilterType.boolean,
  label: "是否启用",
  key: "status",
  visible: false,	// 默认是否展开，不填则展开
  options: {
    trueLabel: '启用',
    falseLabel: '禁用',
    autoSearch: true,
  }
}

定义数字范围条件

{
  type: EnumAppFilterType.numberrange,
  label: "数字范围",
  visible: false,	// 默认是否展开，不填则展开
  options: {
    keyMin: 'min',
    keyMax: 'max',
    valueMin: 0,
    valueMax: 100
  }
}

定义下拉框

// 枚举模式
{
  type: EnumAppFilterType.select,
  label: "下拉控件",
  key: "status",
  visible: false,	// 默认是否展开，默认为true
  options: {
    appSelectType: AppSelectType.enum, // 枚举
    data: TestEnum,
    autoSearch: false,	// 是否变更后自动查询
    multiple: true, // 是否多选
  }
}

// 下拉选项模式中的boolean选择
{
  type: EnumAppFilterType.select,
  label: "下拉控件",
  key: "status",
  visible: false,	// 默认是否展开，不填则展开
  placeholder: "请选择状态",
  options: {
    appSelectType: AppSelectType.boolean,
    trueLabel: '启用',
    falseLabel: '禁用',
    value: true, // 默认值, 不设置则为空
    autoSearch: true,	// 是否变更后自动查询
  }
}

// 网络模式
{
    type: EnumAppFilterType.select,
    label: "机台类型",
    key: "typeId",
    placeholder: "请输入机台类型",
    visible: false,	// 默认是否展开，不填则展开
    options: {
      appSelectType: AppSelectType.network,
      url: '/device/manager/machine/getbdszhmachinetypes',
      selectLabel: 'value',
      selectValue: 'key',
      filterable: true,
      autoSearch: false,	// 是否变更后自动查询
    }
  },

定义单个时间

{
    type: EnumAppFilterType.datetime,
    label: "时间控件",
    key: "status",
    placeholder: '请输入时间',
    visible: false,	// 默认是否展开，不填则展开
    options: {
      dateType: EnumDateType.date,
      value: '2023-01-01',
      format: 'YYYY-MM-DD', // 时间格式
      autoSearch: false,	// 是否变更后自动查询
    }
},

定义时间范围

{
    type: EnumAppFilterType.datetimerange,
    label: "时间范围",
    key: "status",
    visible: false,	// 默认是否展开，不填则展开
    options: {
      dateType: EnumDateType.daterange,
      keyMin: 'min',
      keyMax: 'max',
      format: 'YYYY-MM-DD HH:mm:ss',
      autoSearch: false,	// 是否变更后自动查询
      startPlaceholder: '开始时间',
      endPlaceholder: '结束时间',
    }
}

定义自动完成

const querySugguests = async (query: string, callback: (arg: any) => void) => {
  // ......查询
  callback(res)
},

{
    type: EnumAppFilterType.autocomplete,
    label: "自动完成",
    key: "status",
    visible: false,	// 默认是否展开，不填则展开
    options: {
      value: '',
      querySugguests: querySugguests
    }
}

定义级联选择

const data = [
  {
    value: '1',
    label: '广东省',
    children: [
      {
        value: '101',
        label: '广州市',
      },
      {
        value: '102',
        label: '番禺区',
      }
    ]
  },
  {
    value: '2',
    label: '湖南省',
    children: [
      {
        value: '201',
        label: '长沙市',
      },
      {
        value: '202',
        label: '湘潭市',
      }
    ]
  }
]
......
{
    type: EnumAppFilterType.cascader,
    label: "选择城市",
    key: "city",
    placeholder: '请选择城市',
    visible: false,	// 默认是否展开，不填则展开
    options: {
      value: [],
      autoSearch: false,	// 是否变更后自动查询
      data: data
    }
},

根据key获取组件

<app-filter-container ref="filterContainerRef"></app-filter-container>

// 获取组件
const getFilterContainer = () => {
  console.log('所有组件', filterContainerRef.value.getFilterComponents())
  console.log('获取组件ByKey', filterContainerRef.value.getFilterComponentByKey('name'))
}

// 清空值
const clear = () => {
  let component = filterContainerRef.value.getFilterComponentByKey('222')
  component.clear()
}

开启历史数据

<app-filter-container
    ......
    show-history
    :history-setting="historySetting"
    ......
@search="search"></app-filter-container>
 

const historySetting = ref(new AppHistoryData(id, label, url, style, filters))

// id: 唯一值，用于后期手动控制dialog
// label: 标题
// url: 历史数据对应的URL
// style: object， 样式
// filters: object 过滤条件

输入框开启历史输入数据（默认五条）

const filterConfig = {
  [
    key: ''
    label: '', 
    placeholder: '', 
    options: {
      value: '', 
      enableHistory: false, // 可选，是否启用历史记录
      historyScope: '', // 可选，历史记录隔离标识
      historyMax: 5, // 可选，最大历史记录条数，默认5
      historyKey: '' // 可选，自定义历史记录存储键名
    }
  ]
}