xform request

src/components/XForm/ImageUpload.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Upload, Icon, message } from 'antd';
+import './style.less';
+
+class ImageUpload extends React.Component {
+  state = {
+    loading: false
+  };
+
+  handleChange = info => {
+    if (info.file.status === "uploading") {
+      this.setState({ loading: true });
+      return;
+    }
+
+    if (info.file.status === "done") {
+      const imageUrl = info.response.url
+
+      this.setState({
+        loading: false
+      })
+
+      this.props.onChange(imageUrl)
+    }
+  };
+
+  render () {
+    const uploadButton = (
+      <div>
+        <Icon style={{ fontSize: '2em', color: '#aaa' }} type={this.state.loading ? "loading" : "plus"} />        
+      </div>
+    );
+
+    const value = this.props.value;
+
+    return (
+      <Upload
+        name="avatar"
+        listType="picture-card"
+        className="avatar-uploader"
+        showUploadList={false}
+        action={this.props.action}
+        beforeUpload={this.props.beforeUpload}
+        onChange={this.handleChange}
+      >
+        {value ? (
+          <img src={value} alt="avatar" style={{ width: "100%" }} />
+        ) : (
+          uploadButton
+        )}
+      </Upload>
+    );
+  }
+}
+
+export default ImageUpload;

src/components/XForm/README.md

@@ -0,0 +1,31 @@
+# XForm
+Antd Form 扩展
+
+## 使用说明
+
+```jsx
+import XForm, { FieldTypes } from '/path/to/XForm';
+
+const tplJSON = [
+  {},
+  {}
+]
+
+```
+
+通过 `json` 对象来实现自动构造 form 表单
+
+计划支持的属性
+
+[] label      显示的文字
+
+[] name       form name, 用于表单提交
+
+[] type       组件类型, 参见 FieldTypes
+
+[] rules      校验规则
+
+[] element    函数, 用于生成组件. (props) => <></> . 其中 props 包含 ...
+
+[] value      绑定的数据
+

src/components/XForm/WrapperForm.jsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Form, Button } from 'antd';
+import WrapperItem from './WrapperItem';
+
+const formItemLayout = {
+  labelCol: {
+    xs: { span: 24 },
+    sm: { span: 8 },
+  },
+  wrapperCol: {
+    xs: { span: 24 },
+    sm: { span: 16 },
+  },
+};
+
+class WrapperForm extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {}
+  }
+
+  handleSubmit = e => {
+    e.preventDefault();
+    this.props.form.validateFieldsAndScroll((err, values) => {
+      if (err) {
+        if (typeof this.props.onError === 'function') {
+          typeof this.props.onError(err)
+        } else {
+          window.console.error(err)
+        }
+      } else {
+        if (typeof this.props.onSubmit === 'function') {
+          typeof this.props.onSubmit(values)
+        }
+      }
+    });
+  }
+
+  handleCancel = e => {
+    e.preventDefault();
+
+    if (typeof this.props.onCancel === 'function') {
+      typeof this.props.onCancel()
+    }
+  }
+
+  renderDefaultAction = (submitBtn, cancelBtn) => {
+    let FieldSubmit = null
+    let FieldCancel = null
+    if (submitBtn !== false) {
+      FieldSubmit = <Button htmlType="submit" type="primary">提交</Button>
+    }
+    if (cancelBtn !== false) {
+      FieldCancel = <Button htmlType="button" onClick={this.handleCancel} style={{ marginLeft: '48px' }}>取消</Button>
+    }
+
+    return FieldSubmit || FieldCancel ? <WrapperItem action render={<>{FieldSubmit}{FieldCancel}</>} /> : null
+  }
+
+  render () {
+    const {fields, form, children, submitBtn, cancelBtn, ...formProps} = this.props;
+
+    const FeildItems = (fields || []).map((props, inx) => (<WrapperItem key={inx} {...props} form={form} />))
+    
+    return (
+      <Form {...formItemLayout} {...formProps} onSubmit={this.handleSubmit}>
+        {FeildItems}
+        {this.renderDefaultAction(submitBtn, cancelBtn)}
+        {children}
+      </Form>
+    );
+  }
+}
+
+WrapperForm.propTypes = {
+  fields: PropTypes.array.isRequired
+}
+
+export default WrapperForm;

src/components/XForm/WrapperItem.jsx

@@ -0,0 +1,141 @@
+import React from 'react';
+import {
+  Form,
+  Input,
+  InputNumber,
+  Checkbox,
+  Radio,
+  DatePicker,
+  TimePicker,
+  Select,
+} from 'antd';
+import ImageUploader from './ImageUpload';
+
+const Item = Form.Item
+const { Option } = Select;
+const { MonthPicker, RangePicker } = DatePicker
+
+const FieldTypes = {
+  Text: 'Text',
+  Password: 'Password',
+  Number: 'Number',
+  Switch: 'Switch',
+  TimePicker: 'TimePicker',
+  DatePicker: 'DatePicker',
+  RangePicker: 'RangePicker',
+  MonthPicker: 'MonthPicker',
+  Select: 'Select',
+  ImageUploader: 'ImageUploader',
+}
+
+const tailFormItemLayout = {
+  wrapperCol: {
+    xs: {
+      span: 24,
+      offset: 0,
+    },
+    sm: {
+      span: 16,
+      offset: 8,
+    },
+  },
+};
+
+const WrapperItem = (props) => {
+  const {
+    form,
+    label,
+    name,
+    type,
+    placeholder,
+    render,
+    rules,
+    value,
+    dict,
+    action,
+    props: fieldProps,
+    ...restProps
+  } = props;
+
+  const { getFieldDecorator } = form || {};
+
+  let config = {
+    rules,
+    initialValue: value
+  }
+
+  if (type === FieldTypes.Switch) {
+    config = {
+      ...config,
+      valuePropName: 'checked',
+    };
+  }
+  
+  if (type === FieldTypes.ImageUploader) {
+    config = {
+      ...config,
+      getValueFromEvent: x => x,
+    };
+  }
+
+  // 没有类型与组件, 生成隐藏字段
+  if (!type && !render) {
+    getFieldDecorator(name, config);
+    return <></>;
+  }
+
+  const SelectOpts = (dict || []).map((item, index) => (<Option value={item.value}>{item.name}</Option>))
+
+  let Field = <></>;
+  if (render) {
+    Field = typeof render === 'function' ? render(props) : render
+  } else {
+    switch (type) {
+      case FieldTypes.Text:
+        Field = <Input placeholder={placeholder} style={{ width: '100%' }} {...fieldProps}/>;
+        break;
+      case FieldTypes.Password:
+        Field = <Input.Password placeholder={placeholder} style={{ width: '100%' }} {...fieldProps}/>;
+        break;
+      case FieldTypes.Number:
+        Field = <InputNumber placeholder={placeholder} style={{ width: '100%' }} {...fieldProps}/>;
+        break;
+      case FieldTypes.Switch:
+        Field = <Switch {...fieldProps} />;
+        break;
+      case FieldTypes.TimePicker:
+        Field = <TimePicker {...fieldProps} style={{ width: '100%' }}/>;
+        break;
+      case FieldTypes.DatePicker:
+        Field = <DatePicker {...fieldProps} style={{ width: '100%' }}/>;
+        break;
+      case FieldTypes.RangePicker:
+        Field = <RangePicker {...fieldProps} style={{ width: '100%' }}/>;
+        break;
+      case FieldTypes.MonthPicker:
+        Field = <MonthPicker {...fieldProps} style={{ width: '100%' }}/>;
+        break;
+      case FieldTypes.Select:
+        Field = <Select placeholder={placeholder} style={{ width: '100%' }} {...fieldProps}>{SelectOpts}</Select>
+        break;
+      case FieldTypes.ImageUploader:
+        Field = <ImageUploader {...fieldProps}/>
+        break;
+      default:
+        throw new Error(`暂时不支持的组件类型: ${type}`)
+    }
+  }
+
+  if (!label && !name && !action) return Field;
+  
+  const itemProps = action ? { ...restProps, ...tailFormItemLayout } : restProps
+
+  return (
+    <Item label={label} {...itemProps}>
+      {action ? Field : getFieldDecorator(name, config)(Field)}
+    </Item>
+  )
+};
+
+export default WrapperItem;
+export { FieldTypes };

src/components/XForm/index.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import { Form } from 'antd';
+import WrapperForm from './WrapperForm';
+import { FieldTypes } from './WrapperItem';
+
+export default Form.create()(WrapperForm);
+export { FieldTypes };

src/components/XForm/style.less

@@ -0,0 +1,8 @@
+:global {
+  .avatar-uploader {
+    & > .ant-upload {
+      width: 128px;
+      height: 128px;
+    }
+  }
+}

src/pages/activity/ActivityList.jsx

@@ -1,10 +1,11 @@
 import React from 'react';
-import { Form, Input, Button, Icon, Select, message, Table, Divider, Tag, Pagination, Modal } from 'antd';
+import { Form, Input, Button, Icon, Select, message, Table, Divider, Tag, Pagination, Modal, DatePicker } from 'antd';
 import { FormattedMessage } from 'umi-plugin-react/locale';
 import styles from '../style/GoodsList.less';
 import router from 'umi/router';
 
 const { Option } = Select;
+const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
 // 提交事件
 function handleSubmit(e, props) {
   e.preventDefault();
@@ -55,39 +56,39 @@ const dataSource = [
 
 const columns = [
   {
-    title: '商品图片',
+    title: '活动标题',
     dataIndex: 'img',
     key: 'img',
     align: 'center',
     render: (text, record) => <img src={record.img} className={styles.touxiang} />,
   },
   {
-    title: '商品名称',
+    title: '活动时间',
     dataIndex: 'name',
     key: 'name',
     align: 'center',
 
   },
   {
-    title: '所属积分',
+    title: '已参加人数',
     dataIndex: 'integral',
     key: 'integral',
     align: 'center',
   },
   {
-    title: '总数量',
+    title: '阅读量',
     dataIndex: 'total',
     key: 'total',
     align: 'center',
   },
   {
-    title: '已兑换数量',
+    title: '转发量',
     dataIndex: 'exchanged',
     key: 'exchanged',
     align: 'center',
   },
   {
-    title: '剩余数量',
+    title: '收藏数',
     dataIndex: 'rest',
     key: 'rest',
     align: 'center',
@@ -127,17 +128,9 @@ const header = (props) => {
 
     <>
       <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
-        <Form.Item>
-          {getFieldDecorator('name')(
-            <Input
-              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
-              placeholder="商品名称"
-            />,
-          )}
-        </Form.Item>
         <Form.Item>
           {getFieldDecorator('goodState')(
-            <Select style={{ width: '180px' }} placeholder="状态" onChange={handleSelectChange}>
+            <Select style={{ width: '180px' }} placeholder="请选择城市" onChange={handleSelectChange}>
               <Option value="1">上架</Option>
               <Option value="0">下架</Option>
             </Select>,
@@ -145,26 +138,31 @@ const header = (props) => {
         </Form.Item>
         <Form.Item>
           {getFieldDecorator('isMain')(
-            <Select style={{ width: '180px' }} placeholder="所属项目" onChange={handleSelectChange}>
+            <Select style={{ width: '180px' }} placeholder="请选择项目" onChange={handleSelectChange}>
               <Option value="1">首页推荐</Option>
               <Option value="0">首页未推荐</Option>
             </Select>,
           )}
         </Form.Item>
         <Form.Item>
-          {getFieldDecorator('min')(
+          {getFieldDecorator('name')(
             <Input
               prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
-              placeholder="最小积分"
+              placeholder="请输入标题"
             />,
           )}
         </Form.Item>
         <Form.Item>
-          {getFieldDecorator('max')(
-            <Input
-              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
-              placeholder="最大积分"
-            />,
+          {getFieldDecorator('goodState')(
+            <Select style={{ width: '180px' }} placeholder="是否报名" onChange={handleSelectChange}>
+              <Option value="1">上架</Option>
+              <Option value="0">下架</Option>
+            </Select>,
+          )}
+        </Form.Item>
+        <Form.Item>
+          {getFieldDecorator('min')(
+            <DatePicker />
           )}
         </Form.Item>
         <Form.Item>

src/utils/request.js

@@ -2,7 +2,7 @@
  * request 网络请求工具
  * 更详细的 api 文档: https://github.com/umijs/umi-request
  */
-import { extend } from 'umi-request';
+import request from 'umi-request';
 import { notification } from 'antd';
 const codeMessage = {
   200: '服务器成功返回请求的数据。',
@@ -21,36 +21,82 @@ const codeMessage = {
   503: '服务不可用，服务器暂时过载或维护。',
   504: '网关超时。',
 };
-/**
- * 异常处理程序
- */
 
-const errorHandler = error => {
-  const { response } = error;
+const replaceURLParams = (url, params = {}) => {
+  return Object.keys(params).reduce((acc, k) => { // 此方法对每个元素进行处理
+    const re = new RegExp(`:${k}(?!w)`, 'i')
+    return acc.replace(re, args[k])
+  }, url)
+}
+
+request.interceptors.request.use((url, options) => {
+  const { urlData, headers = {}, logout = false, data, ...opts } = options
+  const apiURL = urlData ? replaceURLParams(url, urlData) : url
+  const token = window.localStorage.getItem('x-token')
+  const authHeader = token ? { Authorization: `Bearer ${token}` } : {}
+
+  if (logout) {
+    window.localStorage.removeItem('x-token')
+  }
 
+  return (
+    {
+      url: apiURL,
+      options: {
+        ...opts,
+        headers: {
+          ...authHeader,
+          ...headers,
+        },
+        data,
+        requestType: data instanceof FormData ? 'form' : 'json',
+        credentials: 'include', // 带 cookie
+        interceptors: true
+      },
+    }
+  );
+});
+
+request.interceptors.response.use(async (response, options) => {
+  
   if (response && response.status) {
-    const errorText = codeMessage[response.status] || response.statusText;
-    const { status, url } = response;
-    notification.error({
-      message: `请求错误 ${status}: ${url}`,
-      description: errorText,
-    });
+    if (response.status != 200) {
+      const errorText = codeMessage[response.status] || response.statusText;
+      const { status, url } = response;
+      notification.error({
+        message: `请求错误 ${status}: ${url}`,
+        description: errorText,
+      });
+      throw new Error(response.statusText);
+    } else {
+      const { code, data, message } = await response.clone().json();
+      if (code != 1000) {
+        notification.error({
+          message: `请求错误`,
+          description: message,
+        });
+        throw new Error(message);
+      }
+
+      if (data.token) {
+        window.localStorage.setItem('x-token', data.token)
+      }
+
+      return data;
+    }
   } else if (!response) {
     notification.error({
       description: '您的网络发生异常，无法连接服务器',
       message: '网络异常',
     });
   }
+});
 
-  return response;
+export default config => {
+  if (typeof config === 'string') {
+    return request(config);
+  } else {
+    const {url, ...options} = config;
+    return request(url, options);
+  }
 };
-/**
- * 配置request请求时的默认参数
- */
-
-const request = extend({
-  errorHandler,
-  // 默认错误处理
-  credentials: 'include', // 默认请求是否带上cookie
-});
-export default request;