Skip to content

Latest commit

 

History

History
202 lines (180 loc) · 6.93 KB

搜索框规范.md

File metadata and controls

202 lines (180 loc) · 6.93 KB

定义说明

需求说明

http://jira.example.cn/browse/QT-2456 记得结合这两个文档进行查看。

代码中的定义说明

目前很多页面的list页面都已经有，不过还没处于最优最完善阶段。 想偷懒，就得做到智能化。 所以 search_form 的规则改造还在进行中。

bi 系统中的定义说明（开发中）

该字段为一个对象数组，存储全部搜索条件的定义，前端会根据约好的规则按照定义的顺序输出搜索条件，会和代码中的基本一致，不过这里必须不能使用 render / hiddenRule 等 function 规则的属性，做到这些属性使用规则定义。

各种类型的搜索展现

字段说明

  • type ： 搜索的类型，[input|select|foreign|date_range|area] 默认类型为 input 。如果没输入或者其他没定义到的值，那就渲染成 input 类型。

input 类型的

  • input|name|学生姓名 ：代表增加一个搜索名称为 name 的 input 输入框
  • input|full_name|班级全程 ： 代表增加一个搜索名称为 full_name 的 input 输入框
  • input|student$name|学生姓名 ： 代表增加一个搜索名称为 stutent.name 的 input 输入框

例子

[
  {
    type: 'input',
    dataIndex: 'name',
    label: '姓名',
    props: {
      placeholder: '学生姓名搜索',
    },
  },
  {
    type: 'input',
    dataIndex: 'teacher.name',
    label: '姓名',
    props: {
      placeholder: '教师姓名搜索',
    },
  },
]

select 类型的

  • select|gender|性别|__global.gender ： 代表一个 __global.gender 字典的 select 搜索框，其搜索字段名为 gender。
  • select|district_type|城镇类型|departments.district_type ： 代表一个 district_type 字典的搜索框，其中 options 的值从 departments.district_type 中获取（可能是 EDITABLE_DICT， 可能是 CONSTANTS, 可能是 DICT 中）。
  • select|status|书籍状态|books.status ： 代表一个书籍状态的搜索框，搜索名为 status 。

例子

[
  {
    type: 'select',
    dataIndex: 'gender',
    label: '性别',
    dict: '__global.gender',
    render: () => {
      // 这个只是创建之后的使用示例，在实际中，需要自动创建 render 属性给该搜索条件。
      return (<Select
        allowClear
        placeholder="选择">
        {Filters.dict(['__global', 'gender']).map((elem) => {
          return (
            <Select.Option
              value={elem.value}
              key={`options_${elem.value}`}>
              {elem.label}
            </Select.Option>
          );
        })}
      </Select>);
    },

  },
  {
    type: 'select',
    dataIndex: 'district_type',
    label: '城镇类型',
    dict: 'departments.district_type',
    props: {
      placeholder: '教师姓名搜索',
    },
  },
  {
    type: 'select',
    dataIndex: 'status',
    label: '书籍状态',
    dict: 'books.status',
    props: {
      placeholder: '教师姓名搜索',
    },
  },
]

外键选择

  • foreign|student_id|学生|student ：代表 student 表格的外键选择，下拉的内容从 student 表格中获取，搜索key 为 student_id
  • foreign|id|班级|classes ：代表 classes 表格的外键选择，下拉的内容从 classes 表格中获取， 搜索 key 为 id
  • 其他规则待完善，这个比较复杂，基本上是参考 ComponentsForm.ForeignSelectGraphql 这个组件的接口。

例子

[
  {
    type: 'foreign',
    dataIndex: 'student_id',
    label: '报读学生',
    table: 'student',
    props: {
      // 一堆props
    },
    render: () => {
      // 这个只是创建之后的使用示例，在实际中，需要自动创建 render 属性给该搜索条件。
      return (<ComponentsForm.ForeignSelectGraphql {...props} {...一堆配置那边的属性} />);
    },

  },
  {
    type: 'foreign',
    dataIndex: 'id',
    label: '班级',
    table: 'classes',
    props: {
      placeholder: '教师姓名搜索',
      // 一堆props
    },
  },
]

时间的选择

  • day|issue_date|出版时间 ： 标识一个时间搜索框，精确到几号，search_method 为 =
  • year|issue_date|出版时间 ： 标识一个时间搜索框，精确到某一年， search_method 为 =
  • month|issue_date|出版时间 ： 标识一个时间搜索框，精确到某一月份， search_method 为 =
  • minute|pay_time|创建时间 ： 标识一个时间搜索框，精确到某分钟， search_method 为 =
  • hour|pay_time|创建时间 ： 假的，实在想不出为什么要搜索几点的东西。不支持
  • HHmm|duty_time|值班时间: 只是单纯的选择某时某分，例如 09:00 开始值班的选择， search_method 为 = ，value 为format 的形式，如 0900
  • range_*: 前面的几个，前面全部加上 range 前缀，就变成是时间区间选择， search_method 为 >= 和 <= 的集合
  • date_range|birthday|出生日期|YYYY-MM-DD HH:mm ： 出生日期的区间选择， 第四项为 format ， 如果 format 中存在 HH 和 mm , 就加多分钟的选择。
  • date|datexxx|某天|YYYY-MM-DD： 某天的选择， 第四项为 format ， 如果 format 中存在 HH 和 mm , 就加多分钟的选择。注意这个，搜索的时候传输的是 = ，所以不要乱使用这个在页面搜索。

例子

[
  {
    type: 'date_range',
    dataIndex: 'birthday',
    label: '出生日期',
    render: () => {
      // 这个只是创建之后的使用示例，在实际中，需要自动创建 render 属性给该搜索条件。
      const showTime = /HH/.test(format) && /mm/.test(format);
      return (<ComponentsForm.DateRange {...props} showTime={showTime} />)
    }
  }
]

地区的选择

  • area|city_id|城市|pid:620000000000 ：地区选择，其 options 的值为 pid=620700000000 的元素
  • area|district_id|县区|form_value:city_id ：地区选择，假设表单中 city_id 的值为 620700000000 ， 其 options 的值就为该搜索 pid=620700000000 的元素，根据 form_value 中指向的字段的值进行动态变更。（目前第四项这个可能会变）

例子

[
  {
    type: 'area',
    dataIndex: 'city_id',
    pid: '620000000000',
    props: {
      // 一堆其他 ComponentsForm.AreaSelect 支持的 props 。
    },
    render: () => {
      // 这个只是创建之后的使用示例，在实际中，需要自动创建 render 属性给该搜索条件。
      return (<ComponentsForm.AreaSelect {...props} {...一堆配置那边的属性} />);
    },

  },
  {
    type: 'area',
    dataIndex: 'district_id',
    label: '县区',
    pid_from_form: 'pid',
    props: {
      placeholder: '地区搜索',
      // 一堆props
    },
    render: () => {
      // 这个只是创建之后的使用示例，在实际中，需要自动创建 render 属性给该搜索条件。
      const areaParentId = form.getFieldValue(pid_from_form)
      return (<ComponentsForm.AreaSelect {...props} {...一堆配置那边的属性} areaParentId={areaParentId} />);
    },
  },
]