feats

config/config.js

@@ -1,4 +1,5 @@
 import defaultSettings from './defaultSettings'; // https://umijs.org/config/
+import routes from './routes';
 
 import slash from 'slash2';
 import webpackPlugin from './plugin.config';
@@ -82,50 +83,7 @@ export default {
   },
   devtool: isAntDesignProPreview ? 'source-map' : false,
   // umi routes: https://umijs.org/zh/guide/router.html
-  routes: [
-    {
-      path: '/user',
-      component: '../layouts/UserLayout',
-      routes: [
-        {
-          name: 'login',
-          path: '/user/login',
-          component: './user/login',
-        },
-      ],
-    },
-    {
-      path: '/',
-      component: '../layouts/SecurityLayout',
-      routes: [
-        {
-          path: '/',
-          component: '../layouts/BasicLayout',
-          authority: ['admin', 'user'],
-          routes: [
-            {
-              path: '/',
-              redirect: '/org',
-            },
-            {
-              path: '/org',
-              name: '账户管理',
-              component: './UserManage',
-            },
-            {
-              component: './404',
-            },
-          ],
-        },
-        {
-          component: './404',
-        },
-      ],
-    },
-    {
-      component: './404',
-    },
-  ],
+  routes,
   // Theme for antd: https://ant.design/docs/react/customize-theme-cn
   theme: {
     'primary-color': primaryColor,
@@ -168,13 +126,13 @@ export default {
     basePath: '/',
   },
   chainWebpack: webpackPlugin,
-  /*
+
   proxy: {
-    '/server/api/': {
-      target: 'https://preview.pro.ant.design/',
+    '/api': {
+      target: 'http://localhost:8080/',
       changeOrigin: true,
-      pathRewrite: { '^/server': '' },
+      // pathRewrite: { '^/server': '' },
     },
-  },
-  */
+  }
+  
 };

config/routes.js

@@ -0,0 +1,54 @@
+export default [
+  {
+    path: '/user',
+    component: '../layouts/UserLayout',
+    routes: [
+      {
+        name: 'login',
+        path: '/user/login',
+        component: './user/login',
+      },
+    ],
+  },
+  {
+    path: '/',
+    component: '../layouts/SecurityLayout',
+    routes: [
+      {
+        path: '/',
+        component: '../layouts/BasicLayout',
+        authority: ['admin', 'user'],
+        routes: [
+          {
+            path: '/',
+            redirect: '/member',
+          },
+          {
+            path: '/member',
+            name: '账户管理',
+            component: './UserManage',
+          },
+          {
+            path: '/member/new',
+            name: '账户新增',
+            component: './UserManage/Editor',
+          },
+          {
+            path: '/member/edit/:id',
+            name: '账户编辑',
+            component: './UserManage/Editor',
+          },
+          {
+            component: './404',
+          },
+        ],
+      },
+      {
+        component: './404',
+      },
+    ],
+  },
+  {
+    component: './404',
+  },
+];

package.json

@@ -52,6 +52,7 @@
     "classnames": "^2.2.6",
     "dva": "^2.4.1",
     "lodash": "^4.17.11",
+    "md5": "^2.2.1",
     "moment": "^2.24.0",
     "omit.js": "^1.0.2",
     "path-to-regexp": "^3.0.0",

src/app.js

@@ -0,0 +1,8 @@
+export const dva = {
+  config: {
+    onError(e) {
+      e.preventDefault();
+      console.error(e.message);
+    },
+  },
+};

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/layouts/BasicLayout.jsx

@@ -113,7 +113,7 @@ const BasicLayout = props => {
       }}
       footerRender={footerRender}
       menuDataRender={menuDataRender}
-      formatMessage={formatMessage}
+      // formatMessage={formatMessage}
       rightContentRender={rightProps => <RightContent {...rightProps} />}
       {...props}
       {...settings}

src/layouts/SecurityLayout.jsx

@@ -25,11 +25,11 @@ class SecurityLayout extends React.Component {
     const { isReady } = this.state;
     const { children, loading, currentUser } = this.props;
 
-    if ((!currentUser.userid && loading) || !isReady) {
+    if ((!currentUser.userName && loading) || !isReady) {
       return <PageLoading />;
     }
 
-    if (!currentUser.userid) {
+    if (!currentUser.userName) {
       return <Redirect to="/user/login"></Redirect>;
     }
 

src/models/login.js

@@ -1,8 +1,11 @@
 import { routerRedux } from 'dva/router';
 import { stringify } from 'querystring';
-import { fakeAccountLogin, getFakeCaptcha } from '@/services/login';
 import { setAuthority } from '@/utils/authority';
 import { getPageQuery } from '@/utils/utils';
+
+import request from '../utils/request';
+import apis from '../services/apis';
+
 const Model = {
   namespace: 'login',
   state: {
@@ -10,34 +13,34 @@ const Model = {
   },
   effects: {
     *login({ payload }, { call, put }) {
-      const response = yield call(fakeAccountLogin, payload);
+      const response = yield call(request, { ...apis.user.login, data: payload });
       yield put({
         type: 'changeLoginStatus',
         payload: response,
       }); // Login successfully
 
-      if (response.status === 'ok') {
-        const urlParams = new URL(window.location.href);
-        const params = getPageQuery();
-        let { redirect } = params;
+      const urlParams = new URL(window.location.href);
+      const params = getPageQuery();
+      let { redirect } = params;
 
-        if (redirect) {
-          const redirectUrlParams = new URL(redirect);
+      if (redirect) {
+        const redirectUrlParams = new URL(redirect);
 
-          if (redirectUrlParams.origin === urlParams.origin) {
-            redirect = redirect.substr(urlParams.origin.length);
+        if (redirectUrlParams.origin === urlParams.origin) {
+          redirect = redirect.substr(urlParams.origin.length);
 
-            if (redirect.match(/^\/.*#/)) {
-              redirect = redirect.substr(redirect.indexOf('#') + 1);
-            }
-          } else {
-            window.location.href = redirect;
-            return;
+          if (redirect.match(/^\/.*#/)) {
+            redirect = redirect.substr(redirect.indexOf('#') + 1);
           }
+        } else {
+          window.location.href = redirect;
+          return;
         }
-
-        yield put(routerRedux.replace(redirect || '/'));
       }
+
+      console.log('----------> redirect ')
+
+      yield put(routerRedux.replace(redirect || '/'));
     },
 
     *getCaptcha({ payload }, { call }) {
@@ -62,7 +65,7 @@ const Model = {
   reducers: {
     changeLoginStatus(state, { payload }) {
       setAuthority(payload.currentAuthority);
-      return { ...state, status: payload.status, type: payload.type };
+      return { ...state, status: 'ok', type: payload.type };
     },
   },
 };

src/models/user.js

@@ -1,20 +1,15 @@
-import { queryCurrent, query as queryUsers } from '@/services/user';
+import request from '../utils/request';
+import apis from '../services/apis';
+
 const UserModel = {
   namespace: 'user',
   state: {
     currentUser: {},
   },
   effects: {
-    *fetch(_, { call, put }) {
-      const response = yield call(queryUsers);
-      yield put({
-        type: 'save',
-        payload: response,
-      });
-    },
-
     *fetchCurrent(_, { call, put }) {
-      const response = yield call(queryCurrent);
+      const response = yield call(request, apis.user.current);
+
       yield put({
         type: 'saveCurrentUser',
         payload: response,

src/pages/UserManage/Editor/User.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Button } from 'antd';
+import XForm, { FieldTypes } from '../../../components/XForm';
+
+export default (props) => {
+  const fields = [
+    {
+      label: '公司名称',
+      name: 'orgName',
+      type: FieldTypes.Text
+    },
+    {
+      label: '用户名称',
+      name: 'name',
+      type: FieldTypes.Text
+    },
+    {
+      label: '登录名称',
+      name: 'loginName',
+      type: FieldTypes.Text,
+      placeholder: '不填, 默认使用手机号'
+    },
+    {
+      label: '手机号',
+      name: 'phone',
+      type: FieldTypes.Text,
+      rules: [
+        {required: true, message: '请填写手机号'}
+      ]
+    },
+    {
+      label: '头像',
+      name: 'avatar',
+      type: FieldTypes.ImageUploader,
+      extra: '建议图片大小 128 * 128'
+    },
+    {
+      label: '有效期',
+      name: 'expDate',
+      type: FieldTypes.DatePicker,
+    },
+  ]
+
+  const handleSubmit = val => {
+    window.console.log('submit data --->', val)
+  }
+
+  return (<XForm onSubmit={handleSubmit} fields={fields}></XForm>)
+}

src/pages/UserManage/Editor/index.jsx

@@ -0,0 +1,29 @@
+import React, { useState, useEffect } from 'react';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { Radio } from 'antd';
+import User from './User';
+
+import request from '../../../utils/request';
+import apis from '../../../services/apis';
+
+export default (props) => {
+  const [ tab, changeTab ] = useState(1);
+
+  // useEffect(() => {
+  //   request({ ...apis.user.current }).then()
+  // })
+
+  return (
+    <PageHeaderWrapper>
+      <div>
+        <Radio.Group value={tab} buttonStyle="solid" onChange={e => changeTab(e.target.value)}>
+          <Radio.Button value={1}>主信息</Radio.Button>
+          <Radio.Button value={2}>小程序</Radio.Button>
+        </Radio.Group>
+      </div>
+      <div>
+        { tab === 1 ? <User /> : null}
+      </div>
+    </PageHeaderWrapper>
+  );
+}

src/pages/user/login/components/Login/index.jsx

@@ -39,10 +39,6 @@ class Login extends Component {
 
     if (form) {
       form.validateFields(
-        activeFields,
-        {
-          force: true,
-        },
         (err, values) => {
           if (onSubmit) {
             onSubmit(err, values);

src/pages/user/login/index.jsx

@@ -3,6 +3,7 @@ import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
 import React, { Component } from 'react';
 import Link from 'umi/link';
 import { connect } from 'dva';
+import md5 from 'md5';
 import LoginComponents from './components/Login';
 import styles from './style.less';
 const { Tab, UserName, Password, Mobile, Captcha, Submit } = LoginComponents;
@@ -23,13 +24,12 @@ class Login extends Component {
     });
   };
   handleSubmit = (err, values) => {
-    const { type } = this.state;
-
+    // const { type } = this.state;
     if (!err) {
       const { dispatch } = this.props;
       dispatch({
         type: 'login/login',
-        payload: { ...values, type },
+        payload: { ...values, password: md5(values.password) },
       });
     }
   };

src/services/apis.js

@@ -0,0 +1,20 @@
+const prefix = '/api/center'
+
+const apis = {
+  user: {
+    current: {
+      url: `${prefix}/current`,
+      method: 'GET',
+    },
+    login: {
+      url: `${prefix}/signin`,
+      method: 'POST',
+    },
+    logoff: {
+      url: `${prefix}/signout`,
+      method: 'POST',
+    },
+  }
+}
+
+export default apis;

src/utils/request.js

@@ -22,29 +22,6 @@ const codeMessage = {
   504: '网关超时。',
 };
 
-/**
- * 异常处理程序
- */
-const errorHandler = error => {
-  const { response } = error;
-
-  if (response && response.status) {
-    const errorText = codeMessage[response.status] || response.statusText;
-    const { status, url } = response;
-    notification.error({
-      message: `请求错误 ${status}: ${url}`,
-      description: errorText,
-    });
-  } else if (!response) {
-    notification.error({
-      description: '您的网络发生异常，无法连接服务器',
-      message: '网络异常',
-    });
-  }
-
-  return response;
-};
-
 const replaceURLParams = (url, params = {}) => {
   return Object.keys(params).reduce((acc, k) => { // 此方法对每个元素进行处理
     const re = new RegExp(`:${k}(?!w)`, 'i')
@@ -53,7 +30,7 @@ const replaceURLParams = (url, params = {}) => {
 }
 
 request.interceptors.request.use((url, options) => {
-  const { urlData, headers = {}, logout = false, ...opts } = 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}` } : {}
@@ -71,7 +48,8 @@ request.interceptors.request.use((url, options) => {
           ...authHeader,
           ...headers,
         },
-        errorHandler,
+        data,
+        requestType: data instanceof FormData ? 'form' : 'json',
         credentials: 'include', // 带 cookie
         interceptors: true
       },
@@ -80,20 +58,45 @@ request.interceptors.request.use((url, options) => {
 });
 
 request.interceptors.response.use(async (response, options) => {
-  const { code, data, message } = await response.clone().json();
-  if (code != 0 && code != 200) {
+  
+  if (response && response.status) {
+    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({
-      message: `请求错误`,
-      description: message,
+      description: '您的网络发生异常，无法连接服务器',
+      message: '网络异常',
     });
-    throw new Error(message);
-  }
-
-  if (data.token) {
-    window.localStorage.setItem('x-token', token)
   }
-
-  return response;
 });
 
-export default request;
+export default config => {
+  if (typeof config === 'string') {
+    return request(config);
+  } else {
+    const {url, ...options} = config;
+    return request(url, options);
+  }
+};