ProSearch 查询表单

TIP

• ProSearch 是继承自 ProForm 专用于搜索场景，通过 JSON Schema 配置查询字段，自动渲染"查询"、"重置"、"展开/收起"按钮，开箱即用

基本使用

基本配置化查询表单

tsx

import { ProSearch } from "@lite-code/pro-shineout";

export default () => {
  return (
    <ProSearch
      column={3}
      onReset={() => {
        console.log("onReset");
      }}
      defaultValue={{
        input: "标题信息"
      }}
      onSearch={async (v) => {
        await new Promise((res) => setTimeout(res, 1000));
        console.log("onSearch", v);
      }}
      schema={[
        {
          type: "Input",
          name: "input",
          label: "标题",
          span: 4,
          required: true,
          tooltip: "这个是提示信息"
        },
        {
          type: "InputNumber",
          name: "inputNumber",
          span: 6,
          label: "数字",
        },
        {
          type: "Select",
          name: "select",
          label: "下拉选",
          span: 6,
          props: {
            data: [
              { label: "选项1", value: 1 },
              { label: "选项2", value: 2 },
            ],
          },
        },

        {
          type: "Select",
          name: "selectMore",
          label: "多选",
          span: 8,
          props: {
            multiple: true,
            data: [
              { label: "选项1", value: 1 },
              { label: "选项2", value: 2 },
              { label: "选项3", value: 3 },
              { label: "选项4", value: 4 },
              { label: "选项5", value: 5 },
              { label: "选项6", value: 6 },
            ],
          },
        },
        {
          type: "DatePicker",
          name: "datePicker",
          label: "日期",
        },
      ]}
    />
  );
};

隐藏部分查询条件

设置 showCount 属性默认展开的个数

tsx

import { ProSearch } from '@lite-code/pro-shineout'

export default () => {
  return (
    <ProSearch
      column={3}
      showCount={2}
      defaultExpand={false}
      onSearch={async (v) => {
        await new Promise((res) => setTimeout(res, 1000));
        console.log("onSearch", v);
      }}
      schema={[
        {
          type: 'Input',
          name: 'input',
          label: '输入框',
        },
        {
          type: 'InputNumber',
          name: 'inputNumber',
          label: '数字',
          props: {
            min: 1,
            max: 999,
          },
        },
        {
          type: 'Select',
          name: 'select',
          label: '下拉选',
          props: {
            data: [
              { label: '选项1', value: 1 },
              { label: '选项2', value: 2 },
            ],
          },
        },
        {
          type: 'DatePicker',
          name: 'datePicker',
          label: '日期区间',
          span: 16,
          props: {
            range: true,
          },
        },
      ]}
    />
  )
}

onChange 触发查询

在 item 中设置了 autoSearch 可以在 onChange 事件自动触发查询，且开启了遮罩避免请求竞争问题

tsx

import { ProSearch } from "@lite-code/pro-shineout";

export default () => {
  return (
    <ProSearch
      column={3}
      onReset={() => {
        console.log("onReset");
      }}
      onSearch={async (v) => {
        await new Promise((res) => setTimeout(res, 1000));
        console.log("onSearch", v);
      }}
      schema={[
        {
          type: "Input",
          name: "input",
          label: "输入框",
        },
        {
          type: "InputNumber",
          name: "inputNumber",
          label: "数字",
          props: {
            min: 1,
            max: 999,
          },
        },
        {
          type: "Select",
          name: "select",
          label: "下拉选",
          props: {
            data: [
              { label: "选项1", value: 1 },
              { label: "选项2", value: 2 },
            ],
          },
        },
        {
          type: "RadioGroup",
          name: "radio",
          label: "单选组件",
          autoSearch: true,
          props: {
            data: [
              { label: "选项1", value: 1 },
              { label: "选项2", value: 2 },
            ],
          },
        },
        {
          type: "CheckGroup",
          name: "check",
          label: "复选组件",
          autoSearch: true,
          props: {
            data: [
              { label: "选项1", value: 1 },
              { label: "选项2", value: 2 },
            ],
          },
        },
      ]}
    />
  );
};

API

继承 ProForm 额外的属性描述

属性名	描述	类型	默认值	是否必需
onSearch	查询事件	(v: any) => Promise<void>	无	否
onReset	重置事件	() => void	无	否
defaultExpand	是否默认展开	boolean	无	否
showCount	展示的个数	number	无	否