【后台管理系统】—— Ant Design Pro组件使用（一）

一、搜索Search

    

• 搜索框

  <Search placeholder="请输入关键字" 
          defaultValue={kw && kw != 'null' ? kw : ''}
          className={styles.search} 
          onChange={() => this.handleKwChange()} 
          onSearch={(e) => this.handleSearch(e)}
  />

• 引入工具方法：去掉收尾空格

  import {trimStr} from '@/utils/utils';
  
  // utils.js
  export function trimStr(str){
    return str.replace(/(^\s*)|(\s*$)/g,"");
  }

• 搜索按钮触发搜索方法，输入内容改变自动搜索

  handleSearch = e => {
      const { dispatch } = this.props;
      const { currentPage } = this.state;
      let kw = trimStr(e);
      this.setState({ keyword : kw });
      dispatch({
        type: 'newMallOrder/fetch',
        payload: {
          currentPage,
          e: {
            keyword: kw
          },
          showCount: 10
        },
      });
    };
  
    handleKwChange = () => {
      const { dispatch } = this.props;
      const { currentPage } = this.state;
      if(event && event.target && event.target.value){
        let value = event.target.value;
        this.handleSearch(value)
      }else{
        dispatch({
          type: 'newMallOrder/fetch',
          payload: {
            currentPage,
            e: {
              keyword: null
            },
            showCount: 10
          },
        });
      }
    }

 

二、选择器Select & TreeSelect

        

• 表单中嵌入Select选择器

  <FormItem>
       {getFieldDecorator('tempTypeId',{
            initialValue: 0
       })(
        <Select placeholder="请选择" style={
       { width: '100%' }} 
                onChange={
       this.handleTempType}>
            <Option value={0}>H5在线编辑</Option>
            <Option value={1}>贺卡</Option>
            <Option value={2}>海报</Option>
            <Option value={3}>壁纸</Option>
            <Option value={4}>全部</Option>
        </Select>
       )}
  </FormItem>

  选择方法：

  handleTempType = value => {
      const { dispatch } = this.props;
      const { keyword } = this.state;
  
      this.setState({
        tempType: tempTypeMap[value]
      })
      dispatch({
        type: 'temp/fetch',
        payload: {
          currentPage: 1,
          e: {
            keyword: keyword,
            subjectClass: tempTypeMap[value]
          },
          showCount: 2
        }
      });
      dispatch({
        type: 'temp/fetchType',
        payload: {
          ofClass: tempTypeMap[value]
        },
        callback: (res) => {
          if(res.code == 200){
             let typeList = res.data;  // 获取联动选择框的数据
    
             typeList.forEach((typeItem, index) => {
                dispatch({
                  type: 'temp/fetchThirdType',
                  payload: typeItem.id,
                  callback: (res) => {
                      if(res.code == 200 && res.data.length){
                         typeList[index].list = res.data;
                      }
                  }
                })
             })
             setTimeout(() => this.setState({ typeList }), 0)
          }
        }
      });
    }

• 联动选择的第一个选择框的父级数据

  let ParentTypeData = [
      {
        title: 'H5在线编辑',
        value: 0,
        key: 0,
      },
      {
        title: '贺卡',
        value: 1,
        key: 1,
      },
      {
        title: '海报',
        value: 2,
        key: 2,
      },
      {
        title: '壁纸',
        value: 3,
        key: 3,
      },
      {
        title: '全部',
        value: 4,
        key: 4,
      },
    ];

• 处理获取到的联动选择第二个选择框的数据为TreeSelect需要的数据格式

  let typeData = [];
  const typeTree = (typeList, typeData) => {
        if(typeList.length) {
          for(let i=0; i<typeList.length; i++){
            typeData[i] = {
              title: typeList[i].kind,
              value: typeList[i].id,
              key: typeList[i].id
            }
            //二级分类
            if(typeList[i].list){
              typeData[i].children = [];
              typeTree(typeList[i].list, typeData[i].children)
            }
          }
        }
    }
  typeTree(typeList, typeData);

• 表单中嵌入TreeSelect选择器

   <FormItem label="主题类别" {...formLayout}>
           <TreeSelect
                 defaultValue={tempType == null ? 4 : tempTypeMap.indexOf(tempType)}
                 value={parentTypeId}
                 style={
       {display: `${editDisable ? 'none' : 'inline-block'}`, width: '47%', marginRight: '6%'}}
                 dropdownStyle={
       { maxHeight: 400, overflow: 'auto' }}
                 treeData={ParentTypeData}
                 placeholder="请选择"
                 onChange={handleParentType}
             />
            {form.getFieldDecorator('typeIds', {
                 rules: [{ type:"array", required: true, message: '请选择主题类别'}],
                 initialValue: detail.types && detail.types.length
                              ? detail.types.map((type) => type.id)
                              : []
            })(
            <TreeSelect
                 multiple   // 多选
                 style={
       {width: `${editDisable ? '100%' : '47%'}`}}