dataSchema add showType=file

Author: jiangxy

src/components/DBTable/InnerTable.js

@@ -210,6 +210,8 @@ class InnerTable extends React.PureComponent {
       // 对于某些showType我会给个默认的render
       else if (field.showType === 'image') {
         col.render = this.renderImage;
+      } else if (field.showType === 'file') {
+        col.render = this.renderFile;
       }
     });
     return tableSchema;
@@ -250,6 +252,33 @@ class InnerTable extends React.PureComponent {
   cancelPreview = () => {
     this.setState({previewVisible: false});
   };
+
+  /**
+   * 针对file字段的render方法
+   *
+   * @param text
+   * @returns {*}
+   */
+  renderFile = (text) => {
+    if (Utils.isString(text) && text.length > 0) {
+      // 单个文件, 显示为超链接
+      return <a href={text} target="_blank">{text.substr(text.lastIndexOf('/') + 1)}</a>;
+    } else if (text instanceof Array) {
+      if (text.length === 0) {
+        return null;
+      }
+      // 多个文件, 显示为一组超链接
+      const urlArray = [];
+      urlArray.push(<a key={0} href={text[0]} target="_blank">{text[0].substr(text[0].lastIndexOf('/') + 1)}</a>);
+      for (let i = 1; i < text.length; i++) {
+        urlArray.push(<br key={ -1 - i }/>);
+        urlArray.push(<a key={i} href={text[i]} target="_blank">{text[i].substr(text[i].lastIndexOf('/') + 1)}</a>);
+      }
+      return <div>{urlArray}</div>
+    } else {
+      return text;
+    }
+  };
   /*END*/
 
 
@@ -445,7 +474,7 @@ class InnerTable extends React.PureComponent {
       // 这里有个问题, 更新的时候, 某个字段后端接收到了null, 到底是忽略这个字段还是将字段更新为null(默认值)? 用过mybatis的应该能明白啥意思
       // 这个问题貌似是无解的, 在后端字段只有null/not null两种状态, 而前端可以用3种状态: undefined表示不更新, null表示更新为null, 其他值表示更新为特定的值
       // 只能认为undefined/null都对应于后端的null
-      // 换句话说, 如果DB里某个字段已经有值了, 就不可能再修改为null了, 即使建表时是允许null的. 最多更新成空字符串.
+      // 换句话说, 如果DB里某个字段已经有值了, 就不可能再修改为null了, 即使建表时是允许null的. 最多更新成空字符串. 除非跟后端约定一个特殊的值去表示null.
       // 一般情况下这不会有什么影响, 但某些corner case里可能有bug...
 
       // 另外, 要理解antd form的取值逻辑. antd的form是controlled components, 只有当FormItem变化时才会取到值(通过onChange方法), 否则对应的key就是undefined

src/components/DBTable/InnerTableSchemaUtils.js

@@ -8,7 +8,7 @@ import {
   InputNumber,
   Checkbox
 } from 'antd';
-import ImageUploader from '../ImageUploader';
+import FileUploader from '../FileUploader';
 import moment from 'moment';
 import Logger from '../../utils/Logger';
 
@@ -105,6 +105,8 @@ const SchemaUtils = {
         return this.transformTextArea(field);
       case 'image':
         return this.transformImage(field);
+      case 'file':
+        return this.transformFile(field);
       default:
         return this.transformNormal(field);
     }
@@ -226,7 +228,25 @@ const SchemaUtils = {
       initialValue: forUpdate ? undefined : field.defaultValue,
       rules: forUpdate ? field.$$updateValidator : field.validator,
     })(
-      <ImageUploader max={field.max} url={field.url} sizeLimit={field.sizeLimit}/>
+      <FileUploader max={field.max} url={field.url} sizeLimit={field.sizeLimit} accept={field.accept}
+                    placeholder={field.placeholder} type="image"/>
+    ), field);
+  },
+
+  /**
+   * 转换为文件上传组件
+   *
+   * @param field
+   * @returns {XML}
+   */
+  transformFile(field) {
+    logger.debug('transform field %o to file component', field);
+    return this.colWrapper((getFieldDecorator, forUpdate) => getFieldDecorator(field.key, {
+      initialValue: forUpdate ? undefined : field.defaultValue,
+      rules: forUpdate ? field.$$updateValidator : field.validator,
+    })(
+      <FileUploader max={field.max} url={field.url} sizeLimit={field.sizeLimit} accept={field.accept}
+                    placeholder={field.placeholder}/>
     ), field);
   },
 

src/components/ImageUploader/index.js src/components/FileUploader/index.js

@@ -1,39 +1,41 @@
 import React from 'react';
-import {Upload, Icon, Modal, message} from 'antd';
+import {Upload, Icon, Modal, message, Button, Tooltip} from 'antd';
 import globalConfig from '../../config.js';
 import Utils from '../../utils';
 import Logger from '../../utils/Logger.js';
 import './index.less';
 
-const logger = Logger.getLogger('ImageUploader');
+const logger = Logger.getLogger('FileUploader');
 
 /**
- * 图片上传组件, 样式基本是从antd官网抄过来的
+ * 文件上传组件, 样式基本是从antd官网抄过来的
+ * 可以上传图片, 也可以上传普通文件, 样式会不一样, 通过props中传入的type字段判断
  *
  * 这个组件可以配合antd的FormItem使用, 以后可以参考
  */
-class ImageUploader extends React.Component {
+class FileUploader extends React.Component {
 
   // 注意这个组件不能做成PureComponent, 会有bug, 因为上传的过程中会不断触发onChange, 进而导致状态不断变化
 
   state = {
-    previewVisible: false,  // 是否显示预览
+    previewVisible: false,  // 是否显示图片预览modal
     previewImage: '',  // 要预览的图片
     fileList: [],  // 已经上传的文件列表
   };
 
-  // 上传按钮, 每次render的时候重新定义也可以, 但感觉拿出来只定义一次更好
-  uploadButton = (
-    <div>
-      <Icon type="plus"/>
-      <div className="ant-upload-text">上传图片</div>
-    </div>
-  );
-
   componentWillMount() {
-    const {defaultValue, max, url} = this.props;
+    const {defaultValue, max, url, type} = this.props;
+    // 当前是要上传图片还是普通图片? 会影响后续的很多东西
+    const forImage = type === 'image';
+    if (forImage) {
+      this.listType = 'picture-card';  // 对于图片类型的上传, 要显示缩略图
+    } else {
+      this.listType = 'text';  // 对于其他类型的上传, 只显示个文件名就可以了
+    }
+
     // 组件第一次加载的时候, 设置默认值
     this.forceUpdateStateByValue(defaultValue, max);
+
     // 是否自定义了图片上传的路径
     if (url) {
       if (url.startsWith('http')) {
@@ -42,10 +44,31 @@ class ImageUploader extends React.Component {
         this.uploadUrl = `${globalConfig.getAPIPath()}${url}`;
       }
     } else {
-      this.uploadUrl = `${globalConfig.getAPIPath()}${globalConfig.upload.image}`;  // 默认路径
+      this.uploadUrl = `${globalConfig.getAPIPath()}${forImage ? globalConfig.upload.image : globalConfig.upload.file}`;  // 默认上传接口
+    }
+
+    // 上传时的文件大小限制
+    if (this.props.sizeLimit) {
+      this.sizeLimit = this.props.sizeLimit;
+    } else {
+      // 默认的大小限制
+      if (forImage) {
+        this.sizeLimit = globalConfig.upload.imageSizeLimit;
+      } else {
+        this.sizeLimit = globalConfig.upload.fileSizeLimit;
+      }
+    }
+
+    // 允许上传的文件类型
+    if (this.props.accept) {
+      this.accept = this.props.accept;
+    } else if (forImage) {
+      this.accept = '.jpg,.png,.gif,.jpeg';  // 上传图片时有默认的accept
     }
 
-    logger.debug('image upload url = %s', this.uploadUrl);
+    logger.debug('type = %s, upload url = %s, sizeLimit = %d, accept = %s', type, this.uploadUrl, this.sizeLimit, this.accept);
+
+    this.forImage = forImage;
   }
 
   componentWillReceiveProps(nextProps) {
@@ -113,7 +136,7 @@ class ImageUploader extends React.Component {
     if (Utils.isString(value) && value.length > 0) {
       this.state.fileList.push({
         uid: -1,
-        name: value.substr(value.lastIndexOf('/')),  // 取url中的最后一部分作为文件名, 不过这个名字其实没啥用...
+        name: value.substr(value.lastIndexOf('/') + 1),  // 取url中的最后一部分作为文件名
         status: 'done',
         url: value,
       });
@@ -123,15 +146,15 @@ class ImageUploader extends React.Component {
         // 但如果传进来一个数组, 就只取第一个元素
         this.state.fileList.push({
           uid: -1,
-          name: value[0].substr(value[0].lastIndexOf('/')),
+          name: value[0].substr(value[0].lastIndexOf('/') + 1),
           status: 'done',
           url: value[0],
         });
       } else {
         for (let i = 0; i < value.length; i++) {
           this.state.fileList.push({
             uid: -1 - i,
-            name: value[i].substr(value[i].lastIndexOf('/')),
+            name: value[i].substr(value[i].lastIndexOf('/') + 1),
             status: 'done',
             url: value[i],
           });
@@ -147,11 +170,9 @@ class ImageUploader extends React.Component {
    * @returns {boolean}
    */
   beforeUpload = (file) => {
-    const sizeLimit = this.props.sizeLimit || globalConfig.upload.imageSizeLimit;
-    logger.debug('sizeLimit = %d', sizeLimit);
-    if (sizeLimit) {
-      if (file.size / 1024 > sizeLimit) {
-        message.error(`图片过大，最大只允许${sizeLimit}KB`);
+    if (this.sizeLimit) {
+      if (file.size / 1024 > this.sizeLimit) {
+        message.error(`${this.forImage ? '图片' : '文件'}过大，最大只允许${this.sizeLimit}KB`);
         return false;
       }
     }
@@ -187,31 +208,31 @@ class ImageUploader extends React.Component {
     // 还要自己处理一下fileList
     for (const tmp of fileList) {
       if (tmp.status === 'done' && !tmp.url && tmp.response && tmp.response.success) {
-        tmp.url = tmp.response.data;  // 服务端返回的图片地址
+        tmp.url = tmp.response.data;  // 服务端返回的url
       }
     }
 
     // 上传失败
     if (file.status === 'error') {
       // debug模式下, 上传是必定失败的, 为了测试用, 给一个默认图片
       if (globalConfig.debug) {
-        message.info('debug模式下使用测试图片', 2.5);
+        message.info(`debug模式下使用测试${this.forImage ? '图片' : '文件'}`, 2.5);
         fileList.push({
           uid: Date.now(),
-          name: 'avatar.jpg',
+          name: this.forImage ? 'avatar.jpg' : 'mapreduce-osdi04.pdf',
           status: 'done',
-          url: 'http://jxy.me/about/avatar.jpg',
+          url: this.forImage ? 'http://jxy.me/about/avatar.jpg' : 'https://static.googleusercontent.com/media/research.google.com/zh-CN//archive/mapreduce-osdi04.pdf',
         });
         this.notifyFileChange();
       } else {
-        message.error(`图片${file.name}上传失败`, 2.5);
+        message.error(`${file.name}上传失败`, 2.5);
       }
     }
     // 上传成功 or 删除图片
     else if (file.status === 'done' || file.status === 'removed') {
       this.notifyFileChange();
     }
-    // 其实还有正在上传(uploading)的状态, 不过这里不关心
+    // 其实还有正在上传(uploading)/错误(error)的状态, 不过这里不关心
 
     // 注意对于controlled components而言, 这步setState必不可少
     // 见https://github.com/ant-design/ant-design/issues/2423
@@ -251,52 +272,95 @@ class ImageUploader extends React.Component {
     }
   };
 
+  /**
+   * 上传按钮的样式, 跟文件类型/当前状态都有关
+   */
+  renderUploadButton() {
+    const {fileList} = this.state;
+    const disabled = fileList.length >= this.props.max;
+
+    if (this.forImage) {
+      const button = (<div>
+        <Icon type="plus"/>
+        <div className="ant-upload-text">上传图片</div>
+      </div>);
+      // 对于图片而言, 如果文件数量达到max, 上传按钮直接消失
+      if (disabled) {
+        return null;
+      }
+      // 是否有提示语
+      if (this.props.placeholder) {
+        return <Tooltip title={this.props.placeholder} mouseLeaveDelay={0}>
+          {button}
+        </Tooltip>;
+      } else {
+        return button;
+      }
+    } else {
+      // 对于普通文件而言, 如果数量达到max, 上传按钮不可用
+      const button = <Button disabled={disabled}><Icon type="upload"/> 上传</Button>;
+      // 是否要有提示语
+      if (this.props.placeholder && !disabled) {
+        return <Tooltip title={this.props.placeholder} mouseLeaveDelay={0}>
+          {button}
+        </Tooltip>;
+      } else {
+        return button;
+      }
+    }
+  }
+
 
   render() {
     const {previewVisible, previewImage, fileList} = this.state;
 
     // 我本来是写成accept="image/*"的, 但chrome下有些bug, 要很久才能弹出文件选择框
-    // 只能用后缀名的写法了, 只支持常见的图片格式
+    // 只能用后缀名的写法了
     return (
       <div>
         <Upload
           action={this.uploadUrl}
-          listType="picture-card"
+          listType={this.listType}
           fileList={fileList}
-          onPreview={this.handlePreview}
+          onPreview={this.forImage ? this.handlePreview : undefined}
           onChange={this.handleChange}
           beforeUpload={this.beforeUpload}
-          accept=".jpg,.png,.gif,.jpeg"
+          accept={this.accept}
           withCredentials={globalConfig.isCrossDomain()}
         >
-          {fileList.length >= this.props.max ? null : this.uploadButton}
+          {this.renderUploadButton()}
         </Upload>
+        {/*只有上传图片时才需要这个预览modal*/}
+        {this.forImage &&
         <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
-          <img alt="加载失败" style={{ width: '100%' }} src={previewImage}/>
-        </Modal>
+          <img alt="图片加载失败" style={{ width: '100%' }} src={previewImage}/>
+        </Modal>}
       </div>
     );
   }
 
 }
 
-ImageUploader.propTypes = {
-  max: React.PropTypes.number.isRequired,  // 最多可以上传几张图片
-  sizeLimit: React.PropTypes.number,  // 图片的大小限制, 单位KB
-  onChange: React.PropTypes.func,  // 图片上传后的回调函数, 传入参数是图片的url
-  defaultValue: React.PropTypes.oneOfType([  // 默认值, 可以是单张图片, 也可以是一组图片
+FileUploader.propTypes = {
+  max: React.PropTypes.number.isRequired,  // 最多可以上传文件数量
+  sizeLimit: React.PropTypes.number,  // 大小限制, 单位KB
+  onChange: React.PropTypes.func,  // 上传后的回调函数
+  defaultValue: React.PropTypes.oneOfType([  // 默认值, 可以是单个文件, 也可以是一组文件
     React.PropTypes.string,
     React.PropTypes.array,
   ]),
   value: React.PropTypes.oneOfType([  // 受控组件
     React.PropTypes.string,
     React.PropTypes.array,
   ]),
-  url: React.PropTypes.string,  // 自定义图片的上传地址
+  url: React.PropTypes.string,  // 自定义上传接口
+  type: React.PropTypes.string,  // type=image表示上传图片, 否则上传普通文件
+  accept: React.PropTypes.string,  // 上传时允许选择的文件类型, 例子:".jpg,.png,.gif"
+  placeholder: React.PropTypes.string,  // 提示语
 };
 
-ImageUploader.defaultProps = {
-  max: 1,  // 默认只上传一张图片
+FileUploader.defaultProps = {
+  max: 1,  // 默认只能上传一个文件
 };
 
-export default ImageUploader;
+export default FileUploader;

src/components/ImageUploader/index.less src/components/FileUploader/index.less

@@ -44,8 +44,12 @@ module.exports = {
   },
 
   upload: {  // 上传相关配置
+    // 上传图片和上传普通文件分别配置
     image: '/uploadImage',  // 默认的上传图片接口
     imageSizeLimit: 1500,  // 默认的图片大小限制, 单位KB
+
+    file: '/uploadFile',  // 默认的上传文件的接口
+    fileSizeLimit: 10240,  // 默认的文件大小限制, 单位KB
   },
 
   sidebar: {  // 侧边栏相关配置