【后台管理系统】—— 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%'}`}}
                 dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                 treeData={typeData}
                 placeholder="请选择"
                 disabled={editDisable}
                 onChange={handleTypeChange}
            />
         )}
  </FormItem>

三、图片视频音频上传Upload

• 弹框表单中上传一张图片、一个音频
  

1. 引入upload.js中封装的handImageUpload文件上传七牛云的方法

   import { handleImageUpload } from '@/utils/upload';
   
   // 预览文件时url前面需要加七牛云服务器前缀
   // eg:  'http://fileserver.liuliu123.cn/'
   import { setFileHost } from '@/utils/utils';

   upload.js

   var qiniu = require('qiniu-js')
   import axios from 'axios';
   import configs from '@/utils/env'
   import { message } from 'antd';
   
   //七牛云上传，input， onchange事件
   export function handleImageUpload(file, type, resName) {
       // console.log(file,'handleImageUpload')
       let suffix = file.type.split('/')[1];
   
       return new Promise(function(resolve, reject){
   
           if(!file) {
               reject('file is undefined')
           }
   
           function dataURItoBlob(base64Data) {
               var byteString;
               if(base64Data.split(',')[0].indexOf('base64') >= 0)
                   byteString = atob(base64Data.split(',')[1]);
               else
                   byteString = unescape(base64Data.split(',')[1]);
               var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
               var ia = new Uint8Array(byteString.length);
               for(var i = 0; i < byteString.length; i++) {
                   ia[i] = byteString.charCodeAt(i);
               }
               return new Blob([ia], {
                   type: mimeString
               });
           }
   
           function randomString(len) {
               len = len || 32;
               var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
               var maxPos = $chars.length;
               var pwd = '';
               for (let i = 0; i < len; i++) {
                   pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
               }
               return pwd;
           }
   
           var reader = new FileReader();
           reader.readAsDataURL(file);
           reader.onload = function(e) {
   
               var fileBlob =  dataURItoBlob(e.target.result);
               var key;
               switch(type){
                 case 'audio':
                   key = 'sys/file/music/' + resName + '.' + suffix;
                   break;
                 case 'video':
                   key = 'liveWallPaper/' + resName + '.' + suffix;
                   break;
                 case 'tutorial': //教程文件
                   key = 'sys/tutorial/' + new Date().getTime() + randomString(5) + '.' + suffix;
                   break;
                 case 'tutorialVideo': //针对IOS富文本视频显示问题单独处理教程视频
                   key = 'yihezo/' + new Date().getTime() +randomString(5) + '.' + suffix;
                   break;
                 default:
                   key = 'user/h5/' + new Date().getTime() +randomString(5) + '.' + suffix;
               }
   
               var putExtra = {
                   fname: file.name,
                   params: {},
                   mimeType: ["image/png", "image/jpeg", "image/jpg", "image/gif", "image/webp", "image/apng", "image/svg",
                              "audio/mp3", "audio/mp4", "audio/ogg", "audio/mpeg",
                              "video/mp4", "video/ogg", "video/webm"]
               };
   
               var config = {
                   useCdnDomain: true,
               };
   
               if(type == 'tutorialVideo' ){  //针对IOS富文本视频显示问题单独处理教程视频
                 axios.post(configs[process.env.API_ENV]['BG_SERVER']+'/file/qiniu/token/video', {
                   key: 'yihezo/' + new Date().getTime() +randomString(5)  //入参：教程视频的key
                 }, {
                   headers: {
                     AuthorizationToken: localStorage.getItem('login_token')
                   }
                 }).then(res =>{
                   let {data} = res;
                   if(data.code == 200) {
                     let token = data.data.token;
                     let observable = qiniu.upload(fileBlob, key, token, putExtra, config)
   
                     let subscription = observable.subscribe({next(res){
                         // console.log(res, 'loading')
                       }, error(res){
                         message.error('上传失败');
                       }, complete(res) {
                         resolve(res.key)
                       }})
                     //subscription.unsubscribe() // 上传取消
   
                   } else {
                     message.error('获取七牛云token失败');
                   }
                 }).catch(error => {
                   console.error(error)
                   reject(error)
                 })
   
               }else{
                 axios.post(configs[process.env.API_ENV]['BG_SERVER']+'/file/qiniu/token', {}, {
                   headers: {
                     AuthorizationToken: localStorage.getItem('login_token')
                   }
                 }).then(res =>{
                   let {data} = res;
                   if(data.code == 200) {
                     let token = data.data.token;
                     let observable = qiniu.upload(fileBlob, key, token, putExtra, config)
   
                     let subscription = observable.subscribe({next(res){
                         // console.log(res, 'loading')
                       }, error(res){
                         message.error('上传失败');
                       }, complete(res) {
                         resolve(res.key)
                       }})
                     //subscription.unsubscribe() // 上传取消
   
                   } else {
                     message.error('获取七牛云token失败');
                   }
                 }).catch(error => {
                   console.error(error)
                   reject(error)
                 })
               }
   
           }
       })
   
   }

2. state中定义初始值

   fileThumb: null,      // 存储上传七牛云后返回的图片url
   fileUri: null,        // 存储上传七牛云后返回的文件url
   fileVisible: false,   // 控制预览文件的弹框是否visible
   previewVisible: false,// 控制预览图片的弹框是否visible
   previewImage: '',     //预览要上传的图片和上传后的图片的url
   previewFile: ''       //预览要上传的图片和上传后的图片的url

3. 弹框表单中Upload组件

   // 上传按钮
   const ImgUpButton = (
        <div>
             <Icon type="plus" />
             <div className="ant-upload-text">Upload</div>
        </div>
   );
   
   const FileUpButton = (
         <Button>
             <Icon type="upload" /> Upload
         </Button>
    )

   <FormItem label="资源图片" {...this.formLayout}>
        {
             getFieldDecorator('thumb', {
                   rules: [{ required: true, message: '请上传图片' }],
                   initialValue: current.thumb ? [{     // 默认必须是数组
                          uid: '-1',
                          status: 'done',
                          name: current.resName,
                          url: `${setFileHost()+current.thumb}`,
                          thumbUrl: `${setFileHost()+current.thumb}`
                   }] : ""                              // 无值时必须是空串
             })(
             <div>
                   <Upload
                       accept="image/*"       // 限制上传的文件类型
                       action={(file) => handleImageUpload(file, 'image').then(res => {
                           const newFileThumb = [];
                           newFileThumb.push(res);
                           this.setState({
                             fileThumb: newFileThumb,
                           })
                        })}                             // 上传七牛云后存储url
                       listType="picture-card"
                       fileList={imgList}       //  显示的图片数组
                       onRemove={this.handleImgRemove}
                       onPreview={this.handleImgPreview}
                       onChange={this.handleImgChange}
                   >
                         {imgList.length >= 1 ? null : ImgUpButton}
                   </Upload>
                   <Modal visible={previewVisible} footer={null} onCancel={this.handleImgCancel}>
                     <img alt="资源图片" style={{ width: '100%' }} src={previewImage} />
                   </Modal>
                 </div>
               )}
             </FormItem>
             <FormItem label="资源文件" extra={resNameError || resName == null ? <span style={{color:'#1890FF'}}>请先输入资源名称</span> : ''} {...this.formLayout}>
               {getFieldDecorator('uri', {
                 rules: [{ required: true, message: '请上传文件' }],
                 initialValue: current.uri ? [{
                   uid: '-1',
                   status: 'done',
                   name: current.uri,
                   url: `${setFileHost()+current.uri}`
                 }] : ""
               })(
                 <div>
                   <Upload
                     accept="audio/mp3, audio/mp4, audio/ogg, audio/mpeg"
                     disabled={ resNameError || resName == null ? true : false }
                     action={(file) => handleImageUpload(file, 'audio', resName).then(res => {
                         const newFileUri = [];
                         newFileUri.push(res);
                         this.setState({
                           fileUri: newFileUri
                         })
                       })}
                     fileList={fileList}
                     onRemove={this.handleFileRemove}
                     onPreview={this.handleFilePreview}
                     onChange={this.handleFileChange}
                   >
                       {fileList.length >= 1 ? null : FileUpButton}
                   </Upload>
                   <Modal visible={fileVisible} footer={null} onCancel={this.handleFileCancel} style={{textAlign: 'center'}}>
                     <audio src={previewFile} style={{ width: '80%' }} controls="controls" autoPlay="autoplay">
                         您的浏览器不支持 audio 标签。
                     </audio>
                   </Modal>
               </div>
          )}
   </FormItem>

   // 上传图片 使用的方法
   // 删除、预览弹框关闭、预览图片url和预览弹框打开，存储改变的图片url
   handleImgRemove = () => {
       this.setState({
         imgList: [],
         fileThumb: [''],
       })
       return true
     }
   
   handleImgCancel = () => this.setState({ previewVisible: false })
   
   handleImgPreview = (file) => {
       this.setState({
         previewImage: file.url || file.thumbUrl,
         previewVisible: true,
       });
   }
   
   handleImgChange = ({ fileList }) => this.setState({ imgList: fileList })
   
   // 上传文件 使用的方法
   // 删除、预览弹框关闭、预览文件url和预览弹框打开，存储文件的图片url
   handleFileRemove = () => {
       this.setState({
         fileList: [],
         fileUri: [''],
       })
       return true
   }
   
   handleFileCancel = () => this.setState({ fileVisible: false })
   
   handleFilePreview = (file) => {
       file.url ?
       this.setState({
         previewFile: file.url,
         fileVisible: true,
       }) :
       message.error('请先保存');
   }
   
   handleFileChange = ({ fileList }) => this.setState({ fileList })

• 弹框表单中上传多张图片

1. 引入upload.js中封装的handImageUpload文件上传七牛云的方法

   import { handleImageUpload } from '@/utils/upload';
   import {setFileHost} from '@/utils/utils';

2. state中定义初始数据

   // 上传多张轮播图（可上传视频）
   imgList: [],
   fileThumbs: [],
   previewVisible: false,
   previewImage: '',
   
   //  上传一张图片
   introImgList: [],
   introFileThumb: '',
   introPreviewVisible: false,
   introPreviewImage: '',

3. showModal显示弹框的方法中: 处理获得的图片数组存入state

   showEditModal = item => {
       const { dispatch } = this.props;
   
       dispatch({
         type: 'project/fetchDetail',
         payload: {
             goodsId: item.id
         },
         callback: (res) => {
           if(res){
             this.setState({
               detail: res.data,
               imgList: res.data.rotationChart && res.data.rotationChart.length
                         ? this.initImgList(res.data) : "",    // Upload显示图片本地存储的图片url数组
               fileThumbs: res.data.rotationChart && res.data.rotationChart.length
                         ? this.initFileThumbs(res.data) : "", // 上传七牛云后存储的用于传给后端的图片url数组
               introImgList: res.data.introPic
                         ? [{
                           uid: '-1',
                           status: 'done',
                           name: res.data.introPic,
                           url: `${setFileHost()+res.data.introPic}`,
                           thumbUrl: `${setFileHost()+res.data.introPic}`
                         }] : '',
               introFileThumb: res.data.introPic ? res.data.introPic : '',
               current: item,
               addSubmit: false
             }, () => {
               this.setState({
                 visible: true
               })
             });
           }
         }
       })
   };

4. 弹框表单中嵌入Upload组件

    const ImgUpButton = (       //  上传图片的按钮
       <div>
         <Icon type="plus" />
         <div className="ant-upload-text">Upload</div>
       </div>
     );

   <FormItem label="产品图片" {...formLayout}>
       { getFieldDecorator('rotationChart', {
            rules: [{ required: true, message: '请上传1-7张图片'}],
            //  默认显示是图片数组，无值也是空数组
            initialValue: current && detail && detail.rotationChart && detail.rotationChart.length
                          ? initImgList(detail) : []
       })(
            <div>
                <Upload
                    accept="image/*"
                    // action={(file) => handleImageUpload(file, 'image').then(res => {
                    //    handleFileThumb(res, file, imgList)
                    //  })}
                    listType="picture-card"
                    fileList={imgList}
                    onPreview={handleImgPreview}
                    onRemove={handleImgRemove}
                    // beforeUpload上传前的处理函数： 嵌套handleImageUpload方法  （上传一张图片或一个文件时，如果需要上传前判断文件类型、文件大小也是这么做）
                    // 1.包含handleFileThumb方法，代替action实现上传七牛云服务器后存储state；2.同时将新的图片数组imgArray存入本地imgList改变Upload组件显示的图片
                    beforeUpload={beforeUpload}
                    // onChange={handleImgChange}
                >
                    {imgList.length >= 7 ? null : ImgUpButton}
                </Upload>
                <Modal visible={previewVisible} footer={null} onCancel={handleImgCancel} style={{textAlign: 'center'}}>
                    { previewType == 'liveWallPaper' ?
                      <video src={previewImage} style={{ width: '50%' }} controls="controls" autoPlay="autoplay">
                          您的浏览器不支持 video 标签。
                      </video>
                      : <img alt="产品图片" style={{ width: '100%' }} src={previewImage} />}
                 </Modal>
           </div>
       )}
   </FormItem>

5. 使用到的方法

   initImgList = (item) => {   // 处理Upload默认显示的数据
       let defaultImgList = [];
       item.rotationChart.forEach((imgListItem, index) => {
           defaultImgList.push ({
               uid: `${-1-index}`,
               status: 'done',
               name: item.name,
               url: imgListItem.img ? `${setFileHost()+imgListItem.img}` : '',
               thumbUrl: imgListItem.thumb ? `${setFileHost()+imgListItem.thumb}` : ''
           })
       })
       return defaultImgList
   }

   initFileThumbs = (item) => {  // 不更改不上传新的图片时默认向后端传的图片url数组
       let defaultFileThumbs = [];
       item.rotationChart.forEach((fileThumb, index) => {
         defaultFileThumbs[index] = fileThumb;
       })
       return defaultFileThumbs
   }

   handleFileThumb = (res, file, imgList) => {  // 更改fileThumbs数组
       let  { fileThumbs } = this.state;
       fileThumbs[imgList.length-1] = {
         img: res,
         index: imgList.length-1,
         type: file.type.split('/')[0],
         thumb: res
       };
       this.setState({
         fileThumbs
       })
   }

   // 关闭预览弹框
   handleImgCancel = () => this.setState({ previewVisible: false })
   
   // 显示预览弹框
   handleImgPreview = (file) => {
       this.setState({
         previewImage: file.url || file.thumbUrl,
         previewVisible: true,
       });
   }
   
   // 删除预览弹框
   handleImgRemove = (file)  => {
       const { fileThumbs, imgList } = this.state;
       let newList = [...imgList];
       let newFileThumbs = [...fileThumbs];
       newList.forEach((imgItem, index) => {
         if(imgItem.uid == file.uid){
           newList.splice(index, 1)
           newFileThumbs.splice(index, 1)
         }
       })
       this.setState({
         imgList: newList,
         fileThumbs: newFileThumbs
       }, () => {
         return true
       })
   }

   beforeUpload = (file) => {
         let type = file.type.split('/')[0];
         let name = file.name.split('.')[0];
   
         // 判断文件类型 -- 如果是视频url直接存入imgList，存入fileThumb
         if(type == 'video') {
           let imgArray = [...this.state.imgList];
           imgArray.push(file);
   
           handleImageUpload(file, 'video', name).then(res => {
             this.setState({
               imgList: imgArray
             })
             this.handleFileThumb(res, file, imgArray)
           })
         }else{
           // 如果是图片，使用react-cropper插件相关设置进行裁剪处理
           // 当打开同一张图片的时候清除上一次的缓存
           if (this.refs.cropper) {
             this.refs.cropper.reset();
           }
   
           var reader = new FileReader();
           const image = new Image();
           //因为读取文件需要时间,所以要在回调函数中使用读取的结果
           reader.readAsDataURL(file); //开始读取文件
   
           reader.onload = (e) => {
             image.src = reader.result;
             image.onload = () => {
             this.setState({
                 srcCropper: e.target.result, //cropper的图片路径
                 selectImgName: file.name, //文件名称
                 selectImgSize: (file.size / 1024 / 1024), //文件大小
                 selectImgSuffix: file.type.split("/")[1], //文件类型
                 editImageModalVisible: true, //打开控制裁剪弹窗的变量，为true即弹窗
            })
             if (this.refs.cropper) {
                 this.refs.cropper.replace(e.target.result);
             }
             }
           }
           return false;
         }
   }

• 不需要裁剪的使用beforeUpload判断文件大小的上传一张图片

  <FormItem label="人物介绍图片" {...formLayout}>
            {getFieldDecorator('introPic', {
               initialValue: current && detail && detail.introPic
                 ? [{
                   uid: '-1',
                   status: 'done',
                   name: detail.introPic,
                   url: `${setFileHost()+detail.introPic}`,
                   thumbUrl: `${setFileHost()+detail.introPic}`
                 }] : ''
             })(
               <div>
                 <Upload
                   accept="image/*"
                   // action={(file) => handleImageUpload(file, 'image').then(res => {
                   //    handleIntroFileThumb(res)
                   //  })}
                   listType="picture-card"
                   fileList={introImgList}
                   onPreview={handleIntroImgPreview}
                   onRemove={handleIntroImgRemove}
                   beforeUpload={beforeIntroUpload}
                   // onChange={handleIntroImgChange}
                 >
                   {introImgList.length >= 1 ? null : ImgUpButton}
                 </Upload>
                 <Modal visible={introPreviewVisible} footer={null} onCancel={handleIntroImgCancel} style={{textAlign: 'center'}}>
                   <img alt="人物介绍图片" style={{ width: '100%' }} src={introPreviewImage} />
                 </Modal>
               </div>
             )}
  </FormItem>

  beforeIntroUpload = (file) => {
      const isLt3M = file.size / 1024 / 1024 < 3;
      if (!isLt3M) { //添加文件限制
        message.error('文件大小不能超过3M');
        return false;
      }
      // console.log('file', file)
  
      handleImageUpload(file, 'image').then(res => {
        this.setState({              // 存入introImgList
          introImgList: [{
            uid: file.uid,
            status: 'done',
            name: file.name,
            url: `${setFileHost()+res}`,
            thumbUrl: `${setFileHost()+res}`
          }]
        })
        this.handleIntroFileThumb(res)   // 存入introFileThumbs
      })
  
      return true
    }

---

转载请注明出处