前言

最近把新的後臺系統寫好了..用的是上篇文章的技術棧(mobx+react16);

但是感覺mobx沒有想象中的好用,看到umi 2.x了.就著手又開始重構了...

仔細梳理了下上個系統,發現可以抽離的東西不少

此篇文章是我針對我們的搜尋條件抽離的一個元件,僅供參考...

調整記錄

2018-11-15 :
- new : reset表單props回撥,呼叫則取預設不帶引數的列表
- new : 待渲染的子元件佈局規格的傳入, responsive這個欄位(放在待渲染的json)
2018-11-16 :
- fixed: Input控制元件輸入一個字元自動失焦點的問題(Math.random的鍋)
- new : InputNumber元件引入,搜尋條件也有可能是搜尋ID的..純數字!!
- new : 引入lodash的isEqual進行物件深度比對,降低state的合併次數,減少re-render
2018-11-19 :
- new : 表單提交前,value為空陣列不返回,字串value清除兩邊的空格
2018-11-20:
- new : props.children傳入改造,新增style
2018-11-30:
- new : 新增一個開啟自動觸發提交的props(除了input輸入,其他選擇性的控制項會直接觸發)
2019-1-9:
- new : 若是元件沒有新增getFieldDecorator的rules條件,則把下margin去掉

效果圖

響應式傳入

React 折騰記 - (6) 基於React 16.x+ Antd 3.封裝的一個宣告式的查詢元件(實用強大)

摺疊展開搜尋條件,預設六個隱藏展開按鈕,大於則顯示(點選直接取資料來源的長度)

傳遞子元件作為搜尋按鈕區域

統一變動控制元件的規格

重置表單

子元件引入自身響應式條件(會話狀態,按鈕太多,等分會造成各種換行,不舒服)

非`Input`的控制元件,自動觸發表單提交, `props`的`autoSearch`為`true`

僅有一個非`Input`控制元件的時候,去除卡片效果

抽離思路及實現

思路

合併props傳遞的值,儘可能的減少傳遞的東西(在元件內部實現預設值合併),把渲染的子元件通過遍歷json去實現;
整個查詢區域用的antd表單元件,聚合所有表單資料(自動雙向繫結,設定預設值等);
為了降低複雜度,子元件不考慮dva來維護狀態,純靠props和state構建,然後統一把構建的表單資料向父級暴露..
內部的state預設初始化都為空[antd對於日期控制元件使用null來置空],外部初始化可以用getFieldDecorator的initialValue,已經暴露

實現的功能

使用姿勢

  <AdvancedSearchForm data={searchItem}  getSearchFormData={this.searchList} resetSearchForm={this.resetSearchList}  accumulate="3">
              <Button type="dashed" icon="download" style={{ marginLeft: 8 }} htmlType="submit">
                下載報表
              </Button>
   </AdvancedSearchForm>
複製程式碼

支援的props

根據ctype渲染的控制元件有Input,Button,Select,DatePicker,Cascader,Radio

允許傳遞的props有四個個,部分props有預設值,傳遞的會合並進去

欄位	型別	解釋
`data`	陣列物件[obj]	資料來源(構建)
`accumulate`	字串	超過多少個摺疊起來
`responseLayout`	物件	傳遞物件,響應式
`csize`	字串	控制元件大小設定,`small(小)`, `default(預設)`
`getSearchFormData`	函式	回撥函式,拿到表單的資料
`resetSearchForm`	函式	回撥函式,當重置表單資料的時候
`autoSearch`	布林值	啟動非`input`的控制元件自動觸發提交的props函式

資料來源格式

data的資料格式基本和antd要求的格式一致,除了個別用來判斷或者渲染子元件的,

欄位解釋:

ctype(controller-type:控制元件型別) ==> string
attr(控制元件支援的屬性) ==> object
field(受控表單控制元件的配置項) ==> object
responsive(子元件自身佈局) ==> object

 searchItem: [
        {
          ctype: 'dayPicker',
          attr: {
            placeholder: '查詢某天',
          },
          field: {
            label: '日活',
            value: 'activeData',
          },
        },
        {
          ctype: 'monthPicker',
          attr: {
            placeholder: '查詢月份資料',
          },
          field: {
            label: '月活',
            value: 'activeData',
          },
        },
        {
          ctype: 'radio',
          field: {
            label: '裝置型別',
            value: 'platformId',
            params: {
              initialValue: '',
            },
          },
          selectOptionsChildren: [
            {
              label: '全部',
              value: '',
            },
            {
              label: '未知裝置',
              value: '0',
            },
            {
              label: 'Android',
              value: '1',
            },
            {
              label: 'IOS',
              value: '2',
            },
          ],
        },
         {
          ctype: 'radio',
          responsive: {
            md:24,
            xl:12,
            xxl:8
          },
          field: {
            label: '會話狀態',
            value: 'chatStatus',
            params: {
              initialValue: '',
            },
          },
          selectOptionsChildren: [
            {
              label: '全部',
              value: '',
            },
            {
              label: '正常',
              value: '1',
            },
            {
              label: '使用者刪除',
              value: '2',
            },
            {
              label: '系統刪除',
              value: '3',
            },
            {
              label: '會話過期',
              value: '4',
            },
          ],
        },
        {
          ctype: 'cascader',
          field: {
            label: '排序',
            value: 'sorter',
          },
          selectOptionsChildren: [
            {
              label: '根據登入時間',
              value: 'loginAt',
              children: [
                {
                  label: '升序',
                  value: 'asc',
                },
                {
                  label: '降序',
                  value: 'desc',
                },
              ],
            },
            {
              label: '根據註冊時間',
              value: 'createdAt',
              children: [
                {
                  label: '升序',
                  value: 'asc',
                },
                {
                  label: '降序',
                  value: 'desc',
                },
              ],
            },
          ],
        },
      ],
複製程式碼

實現程式碼

AdvancedSearchForm

index.js


/*
 * @Author: CRPER
 * @LastEditors: CRPER
 * @Github: https://github.com/crper
 * @Motto: 折騰是一種樂趣，求知是一種追求。不懂就學,懂則分享。
 * @Description: 列表表單查詢元件
 */
import React, { PureComponent } from 'react';
import {
  Form,
  Row,
  Col,
  Input,
  Button,
  Select,
  DatePicker,
  Card,
  Cascader,
  Radio,
  Icon,
  Divider,
  InputNumber,
} from 'antd';

// lodash 深比較
import isEqual from 'lodash/isEqual';

// antd
const { MonthPicker, RangePicker } = DatePicker;
const Option = Select.Option;
const FormItem = Form.Item;
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;

@Form.create({
  onValuesChange: (props, changedValues, allValues) => {
    const { data, autoSearch } = props;
    // 傳入的空間必須存在, 否則不可能觸發自動提交表單的props
    if (data && Array.isArray(data) && data.length > 0 && autoSearch) {
      let autoSearchField = [];
      data.map(item => {
        const {
          ctype,
          field: { value: fieldName },
        } = item;
        if (ctype !== 'input' && ctype !== 'inputNum') {
          autoSearchField.push(fieldName);
        }
      });
      let keys = Object.keys(changedValues);
      if (autoSearchField.indexOf(keys[0]) !== -1) {
        if (changedValues[keys[0]]) {
          props.getSearchFormData(changedValues);
        } else {
          props.resetSearchForm();
        }
      }
    }
  },
})
class AdvancedSearchForm extends PureComponent {
  state = {
    expand: false,
    factoryData: [
      {
        ctype: 'input',
        attr: {
          placeholder: '請輸入查詢內容...',
        },
        field: {
          label: '',
          value: '',
        },
      },
      {
        ctype: 'inputNum',
        attr: {
          placeholder: '請輸入ID查詢...',
          min: 0,
        },
        field: {
          label: '',
          value: '',
        },
      },
      {
        ctype: 'select',
        attr: {
          placeholder: '請選擇查詢項',
          allowClear: true,
        },
        selectOptionsChildren: [],
        field: {
          label: '',
          value: '',
          params: {
            initialValue: '',
          },
        },
      },
      {
        ctype: 'cascader',
        attr: {
          placeholder: '請選擇查詢項',
          allowClear: true,
        },
        selectOptionsChildren: [],
        field: {
          label: '',
          value: [],
          params: {
            initialValue: [],
          },
        },
      },
      {
        ctype: 'dayPicker',
        attr: {
          placeholder: '請選擇日期',
          allowClear: true,
          format: 'YYYY-MM-DD',
        },
        field: {
          label: '',
          value: '',
          params: {
            initialValue: null,
          },
        },
      },
      {
        ctype: 'monthPicker',
        attr: {
          placeholder: '請選擇月份',
          allowClear: true,
          format: 'YYYY-MM',
        },
        field: {
          label: '',
          value: '',
          params: {
            initialValue: null,
          },
        },
      },
      {
        ctype: 'timerangePicker',
        attr: {
          placeholder: '請選擇日期返回',
          allowClear: true,
        },
        field: {
          label: '',
          value: '',
          params: {
            initialValue: [null, null],
          },
        },
      },
      {
        ctype: 'radio',
        attr: {},
        field: {
          label: '',
          value: '',
          params: {
            initialValue: '',
          },
        },
      },
    ],
  };

  // 獲取props並且合併
  static getDerivedStateFromProps(nextProps, prevState) {
    // 若是props和快取state一致,則不更新state
    if (isEqual(prevState.prevData, nextProps.data)) {
      return null;
    }
    /**
     * data: 構建的資料
     * single: 單一選擇,會禁用其他輸入框
     */
    const { factoryData } = prevState;
    const { data, csize } = nextProps;

    let newData = [];
    if (data && Array.isArray(data) && data.length > 0) {
      // 合併傳入的props
      data.map(item => {
        // 若是有外部傳入全域性控制表單控制元件大小的則應用
        if (csize && typeof csize === 'string') {
          item.attr = {
            ...item.attr,
            size: csize,
          };
        }
        const { ctype, attr, field, ...rest } = item;
        let combindData = {};
        factoryData.map(innerItem => {
          if (item.ctype === innerItem.ctype) {
            const {
              ctype: innerCtype,
              attr: innerAttr,
              field: innerField,
              ...innerRest
            } = innerItem;
            combindData = {
              ctype: item.ctype,
              attr: {
                ...innerAttr,
                ...attr,
              },
              field: {
                ...innerField,
                ...field,
              },
              ...innerRest,
              ...rest,
            };
          }
        });
        newData.push(combindData);
      });

      // 返回合併後的資料,比如mode,渲染的資料這些
      return { data: newData, prevData: nextProps.data };
    }

    return null;
  }

  // 清除表單資料中字串的兩邊的空格
  // 若是key為空陣列則跳過
  removeNotNeedValue = obj => {
    // 判斷必須為obj
    if (!(Object.prototype.toString.call(obj) === '[object Object]')) {
      return {};
    }

    let tempObj = {};
    for (let [key, value] of Object.entries(obj)) {
      let tmpValue = value;
      if (Array.isArray(value) && value.length <= 0) {
        continue;
      }
      if (tmpValue && !(Object.prototype.toString.call(tmpValue) === '[object Function]')) {
        if (typeof value === 'string') {
          value = value.trim();
        }
      }
      tempObj[key] = value;
    }
    return tempObj;
  };

  // 提交表單
  handleSearch = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      // 表單表單不報錯,且props有傳遞的情況下,才返回表單資料
      if (!err && this.props.getSearchFormData) {
        // 字串型別全部去除兩邊的空格
        let form_data = this.removeNotNeedValue(values);
        this.props.getSearchFormData(form_data);
      }
    });
  };

  // 重置表單
  handleReset = () => {
    this.props.form.resetFields();
    // 若是有回撥函式,則返回空物件
    if (this.props.resetSearchForm) {
      this.props.resetSearchForm(null);
    }
  };

  // 生成 Form.Item
  getFields = () => {
    const { data } = this.state;
    const children = [];
    if (data) {
      for (let i = 0; i < data.length; i++) {
        // 若是控制元件的名字丟.亦或filed的欄位名或之值丟失則不渲染該元件
        // 若是為select或cascader沒有子元件資料也跳過
        const {
          ctype,
          field: { value, label },
          selectOptionsChildren,
        } = data[i];
        if (
          !ctype ||
          !value ||
          !label ||
          ((ctype === 'select' || ctype === 'cascader') &&
            selectOptionsChildren &&
            selectOptionsChildren.length < 1)
        )
          continue;

        // 渲染元件
        let formItem = this.renderItem({
          ...data[i],
          itemIndex: i,
        });

        // 快取元件資料
        children.push(formItem);
      }
      return children;
    } else {
      return [];
    }
  };

  // 合併響應式props
  combindResponseLayout = (responsive = {}) => {
    // 從父元件接受的佈局姿勢
    const { responseLayout } = this.props;

    // responsive 是子元件自身的響應式佈局

    // 響應式
    return {
      xs: 24,
      sm: 24,
      md: 12,
      lg: 8,
      xxl: 6,
      ...responseLayout,
      ...responsive,
    };
  };

  // 計算外部傳入需要顯示隱藏的個數
  countHidden = () => {
    const { data, accumulate } = this.props;
    return this.state.expand ? data.length : accumulate ? accumulate : 8;
  };

  // 判斷需要渲染的元件
  renderItem = data => {
    const { getFieldDecorator } = this.props.form;

    const { ctype, field, attr, itemIndex, responsive } = data;

    // responsive 是子元件自身的響應式佈局
    const ResponseLayout = this.combindResponseLayout(responsive);

    const count = this.countHidden();

    const isRules =
      field.params &&
      field.params.rules &&
      Array.isArray(field.params.rules) &&
      field.params.rules.length > 0;

    switch (ctype) {
      case 'input':
        return (
          <Col
            {...ResponseLayout}
            style={{ display: itemIndex < count ? 'block' : 'none' }}
            key={itemIndex}
          >
            <FormItem label={field.label} style={isRules ? null : { marginBottom: 0 }}>
              {getFieldDecorator(field.value, field.params ? field.params : {})(
                <Input {...attr} />
              )}
            </FormItem>
          </Col>
        );
      case 'inputNum':
        return (
          <Col
            {...ResponseLayout}
            style={{ display: itemIndex < count ? 'block' : 'none' }}
            key={itemIndex}
          >
            <FormItem label={field.label} style={isRules ? null : { marginBottom: 0 }}>
              {getFieldDecorator(field.value, field.params ? field.params : {})(
                <InputNumber {...attr} style={{ width: '100%' }} />
              )}
            </FormItem>
          </Col>
        );

      case 'select':
        return (
          <Col
            {...ResponseLayout}
            style={{ display: itemIndex < count ? 'block' : 'none' }}
            key={itemIndex}
          >
            <FormItem label={field.label} style={isRules ? null : { marginBottom: 0 }}>
              {getFieldDecorator(field.value, field.params ? field.params : {})(
                <Select {...attr}>
                  {data.selectOptionsChildren &&
                    data.selectOptionsChildren.length > 0 &&
                    data.selectOptionsChildren.map((optionItem, index) => (
                      <Option value={optionItem.value} key={index}>
                        {optionItem.label}
                      </Option>
                    ))}
                </Select>
              )}
            </FormItem>
          </Col>
        );
      case 'cascader':
        return (
          <Col
            {...ResponseLayout}
            style={{ display: itemIndex < count ? 'block' : 'none' }}
            key={itemIndex}
          >
            <FormItem label={field.label} style={isRules ? null : { marginBottom: 0 }}>
              {getFieldDecorator(field.value, field.params ? field.params : {})(
                <Cascader {...attr} options={data.selectOptionsChildren} />
              )}
            </FormItem>
          </Col>
        );

      case 'dayPicker':
        return (
          <Col
            {...ResponseLayout}
            style={{ display: itemIndex < count ? 'block' : 'none' }}
            key={itemIndex}
          >
            <FormItem label={field.label} style={isRules ? null : { marginBottom: 0 }}>
              {getFieldDecorator(field.value, field.params ? field.params : {})(
                <DatePicker {...attr} />
              )}
            </FormItem>
          </Col>
        );

      case 'monthPicker':
        return (
          <Col
            {...ResponseLayout}
            style={{ display: itemIndex < count ? 'block' : 'none' }}
            key={itemIndex}
          >
            <FormItem label={field.label} style={isRules ? null : { marginBottom: 0 }}>
              {getFieldDecorator(field.value, field.params ? field.params : {})(
                <MonthPicker {...attr} />
              )}
            </FormItem>
          </Col>
        );

      case 'timerangePicker':
        attr.placeholder = Array.isArray(attr.placeholder)
          ? attr.placeholder
          : ['開始日期', '結束日期'];
        return (
          <Col
            {...ResponseLayout}
            style={{ display: itemIndex < count ? 'block' : 'none' }}
            key={itemIndex}
          >
            <FormItem label={field.label} style={isRules ? null : { marginBottom: 0 }}>
              {getFieldDecorator(field.value, field.params ? field.params : {})(
                <RangePicker {...attr} />
              )}
            </FormItem>
          </Col>
        );

      case 'datePicker':
        return (
          <Col
            {...ResponseLayout}
            style={{ display: itemIndex < count ? 'block' : 'none' }}
            key={itemIndex}
          >
            <FormItem label={field.label} style={isRules ? null : { marginBottom: 0 }}>
              {getFieldDecorator(field.value, field.params ? field.params : {})(
                <DatePicker {...attr} />
              )}
            </FormItem>
          </Col>
        );
      case 'radio':
        return (
          <Col
            {...ResponseLayout}
            style={{ display: itemIndex < count ? 'block' : 'none' }}
            key={itemIndex}
          >
            <FormItem label={field.label} style={isRules ? null : { marginBottom: 0 }}>
              {getFieldDecorator(field.value, field.params ? field.params : {})(
                <RadioGroup {...attr}>
                  {data.selectOptionsChildren &&
                    data.selectOptionsChildren.length > 0 &&
                    data.selectOptionsChildren.map((optionItem, index) => (
                      <RadioButton value={optionItem.value} key={index}>
                        {optionItem.label}
                      </RadioButton>
                    ))}
                </RadioGroup>
              )}
            </FormItem>
          </Col>
        );

      default:
        return null;
    }
  };

  // 摺疊搜尋框條件
  toggle = () => {
    const { expand } = this.state;
    this.setState({ expand: !expand });
  };

  render() {
    const { expand } = this.state;
    const { data, accumulate, children } = this.props;
    const isRnderToggleIcon = accumulate
      ? (data && data.length) > accumulate
        ? true
        : false
      : data.length > 8;

    // 克隆子元件並且新增自己要新增的特性
    const PropsBtn = React.Children.map(this.props.children, child =>
      React.cloneElement(child, {
        style: {
          marginLeft: 8,
        },
      })
    );

    // 若是搜尋條件僅有一個情況
    const hideSearchBtn =
      data.length === 1 && data[0].ctype !== 'input' && data[0].ctype !== 'inputNum';
    const { loading = false } = this.props;
    return (
      <Form className="ant-advanced-search-form" onSubmit={this.handleSearch}>
        {hideSearchBtn ? (
          <div>{this.getFields()}</div>
        ) : (
          <Card
            size="small"
            title="查詢條件"
            extra={
              <>
                {children ? (
                  <>
                    {children}
                    <Divider type="vertical" />
                  </>
                ) : null}
                <Button type="primary" htmlType="submit" loading={loading}>
                  搜尋結果
                </Button>
                <Button style={{ marginLeft: 8 }} onClick={this.handleReset}>
                  清空條件
                </Button>
              </>
            }
            style={{ width: '100%' }}
          >
            <Row gutter={24} type="flex" justify="start">
              {this.getFields()}
            </Row>
            {isRnderToggleIcon ? (
              <Row gutter={24} type="flex" justify="center">
                <a onClick={this.toggle}>
                  {expand ? '收起' : '展開'} <Icon type={expand ? 'up' : 'down'} />
                </a>
              </Row>
            ) : null}
          </Card>
        )}
      </Form>
    );
  }
}

export default AdvancedSearchForm;





複製程式碼

index.css


// 列表搜尋區域
.ant-advanced-search-form {
  border-radius: 6px;
}

.ant-advanced-search-form .ant-form-item {
  display: flex;
  flex-wrap: wrap;
}

.ant-advanced-search-form .ant-form-item-control-wrapper {
  flex: 1;
}

複製程式碼

總結

溫馨提示

沒用prop-types, 感覺沒必要...(若是用ts的小夥伴,執行時型別推斷比這個強大的多,還不會打包冗餘程式碼)
沒釋出npm , 只是提供我寫的思路,對您有沒有幫助,見仁見智
依賴moment,antd,lodash

可以自行擴充的點

比如垂直展示
比如表單校驗(關聯搜尋條件[就是必須有前置條件才能搜尋])

學無止境,任重而道遠...

有不對之處盡請留言,會及時修正,謝謝閱讀

React 折騰記 - (6) 基於React 16.x+ Antd 3.封裝的一個宣告式的查詢元件(實用強大)

前言

效果圖