feats

src/components/XForm/ImageUpload.jsx

@@ -1,10 +1,14 @@
 import React from 'react';
 import { Upload, Icon, message } from 'antd';
 import './style.less';
+import { uploaderProps } from '../../utils/upload';
+
+
 
 class ImageUpload extends React.Component {
   state = {
-    loading: false
+    loading: false,
+    imageUrl: undefined,
   };
 
   handleChange = info => {
@@ -14,13 +18,19 @@ class ImageUpload extends React.Component {
     }
 
     if (info.file.status === "done") {
-      const imageUrl = info.response.url
-
       this.setState({
-        loading: false
+        loading: false,
       })
 
-      this.props.onChange(imageUrl)
+      if (info.file.response && info.file.response.url) {
+        this.setState({
+          imageUrl: info.file.response.thumbUrl,
+        });
+
+        if (typeof this.props.onChange === 'function') {
+          this.props.onChange(info.file.response.url);
+        }
+      }
     }
   };
 
@@ -35,16 +45,16 @@ class ImageUpload extends React.Component {
 
     return (
       <Upload
-        name="avatar"
         listType="picture-card"
         className="avatar-uploader"
         showUploadList={false}
-        action={this.props.action}
         beforeUpload={this.props.beforeUpload}
         onChange={this.handleChange}
+
+        {...uploaderProps}
       >
-        {value ? (
-          <img src={value} alt="avatar" style={{ width: "100%" }} />
+        {(this.state.imageUrl || value) ? (
+          <img src={this.state.imageUrl || value} alt="avatar" style={{ width: "100%" }} />
         ) : (
           uploadButton
         )}

src/components/XForm/WrapperForm.jsx

@@ -50,7 +50,8 @@ class WrapperForm extends React.Component {
     let FieldSubmit = null
     let FieldCancel = null
     if (submitBtn !== false) {
-      FieldSubmit = <Button htmlType="submit" type="primary">提交</Button>
+      const submitProps = typeof this.props.submitting === undefined ? {} : { loading: this.props.submitting }
+      FieldSubmit = <Button htmlType="submit" type="primary" {...submitBtn}>提交</Button>
     }
     if (cancelBtn !== false) {
       FieldCancel = <Button htmlType="button" onClick={this.handleCancel} style={{ marginLeft: '48px' }}>取消</Button>
@@ -75,7 +76,8 @@ class WrapperForm extends React.Component {
 }
 
 WrapperForm.propTypes = {
-  fields: PropTypes.array.isRequired
+  fields: PropTypes.array.isRequired,
+  submitting: PropTypes.bool,
 }
 
 export default WrapperForm;

src/components/XForm/WrapperItem.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import {
   Form,
   Input,
@@ -41,7 +41,7 @@ const tailFormItemLayout = {
   },
 };
 
-const WrapperItem = (props) => {
+const WrapperItem = (props, ref) => {
   const {
     form,
     label,
@@ -81,12 +81,12 @@ const WrapperItem = (props) => {
   // 没有类型与组件, 生成隐藏字段
   if (!type && !render) {
     getFieldDecorator(name, config);
-    return <></>;
+    return null;
   }
 
   const SelectOpts = (dict || []).map((item, index) => (<Option value={item.value}>{item.name}</Option>))
 
-  let Field = <></>;
+  let Field = null;
   if (render) {
     Field = typeof render === 'function' ? render(props) : render
   } else {
@@ -126,16 +126,16 @@ const WrapperItem = (props) => {
     }
   }
 
-  if (!label && !name && !action) return Field;
+  if (!label && !name && !action) return <Field ref={ref} />;
   
   const itemProps = action ? { ...restProps, ...tailFormItemLayout } : restProps
 
   return (
-    <Item label={label} {...itemProps}>
+    <Item label={label} {...itemProps} ref={ref}>
       {action ? Field : getFieldDecorator(name, config)(Field)}
     </Item>
   )
 };
 
-export default WrapperItem;
+export default forwardRef(WrapperItem);
 export { FieldTypes };

src/components/XForm/index.jsx

@@ -3,5 +3,7 @@ import { Form } from 'antd';
 import WrapperForm from './WrapperForm';
 import { FieldTypes } from './WrapperItem';
 
-export default Form.create()(WrapperForm);
+const XForm = Form.create()(WrapperForm);
+
+export default XForm;
 export { FieldTypes };

src/models/login.js

@@ -38,8 +38,6 @@ const Model = {
         }
       }
 
-      console.log('----------> redirect ')
-
       yield put(routerRedux.replace(redirect || '/'));
     },
 

src/pages/UserManage/Editor/Menus.jsx

@@ -0,0 +1,109 @@
+import React, { useState, useEffect } from 'react';
+import { Checkbox, Card, Button, notification } from 'antd';
+import { fetch, apis } from '../../../utils/request';
+
+const getModules = fetch(apis.member.menus);
+const authorizeMenus = fetch(apis.member.authorize);
+
+const gridStyle = {
+  width: '25%',
+  textAlign: 'center',
+};
+
+const Menus = (props) => {
+  const [menus, setMenus] = useState([])
+  const [checkOpts, setCheckOptions] = useState({checkedList: [], indeterminate: true, checkAll: false})
+
+  const user = props.data || {}
+
+  useEffect(() => {
+    if (user && user.userId) {
+      getModules({ params: {userId: user.userId} }).then((list) => {
+        let checkedList = []
+        const modules = (list || []).map(item => {
+          if (item.hasRights) {
+            checkedList.push(item.menuId)
+          }
+  
+          return {
+            label: item.name,
+            value: item.menuId,
+          }
+        })
+  
+        setMenus(modules);
+        setCheckOptions({
+          checkedList,
+          indeterminate: !!checkedList.length && checkedList.length < modules.length,
+          checkAll: checkedList.length === modules.length
+        })
+      }).catch(x => x)
+    }
+  }, [user.userId])
+
+  const handleChange = (checkedList) => {
+    setCheckOptions({
+      checkedList,
+      indeterminate: !!checkedList.length && checkedList.length < menus.length,
+      checkAll: checkedList.length === menus.length
+    })
+  }
+
+  const checkAllChange = (e) => {
+    setCheckOptions({
+      checkedList: e.target.checked ? menus.map(x => x.value) : [],
+      indeterminate: false,
+      checkAll: e.target.checked,
+    })
+  }
+
+  const CheckAll = (
+    <Checkbox
+      indeterminate={checkOpts.indeterminate}
+      onChange={checkAllChange}
+      checked={checkOpts.checkAll}
+    > 全选 </Checkbox>
+  )
+
+  const handleSubmit = () => {
+    const data = {
+      userId: user.userId,
+      menus: checkOpts.checkedList
+    }
+
+    authorizeMenus({ data }).then(() => {
+      notification.success({ message: '更新授权成功' })
+    }).catch(x => x)
+  }
+
+  const handleCancel = () => {
+    if (typeof props.onCancel === 'function') {
+      props.onCancel()
+    }
+  }
+
+  return (
+    <div>
+      <Card title="开通权限" extra={CheckAll} bordered={false}>
+        <Checkbox.Group
+          value={checkOpts.checkedList}
+          onChange={handleChange}
+        >
+          {menus.map((menu, inx) => {
+            return (
+              <Card.Grid hoverable={false} style={gridStyle} key={inx}>
+                <Checkbox value={menu.value}>{menu.label}</Checkbox>
+              </Card.Grid>
+            )
+          })}
+        </Checkbox.Group>
+      </Card>
+      <div style={{ padding: '36px 100px' }}>
+        <Button type="primary" onClick={handleSubmit}>提交</Button>
+        <Button style={{ marginLeft: '36px' }} onClick={handleCancel}>取消</Button>
+      </div>
+    </div>
+  );
+}
+
+export default Menus;

src/pages/UserManage/Editor/Miniapp.jsx

@@ -0,0 +1,159 @@
+import React, { useState } from 'react';
+import { Button, Row, Col, Input, InputNumber, notification } from 'antd';
+import XForm, { FieldTypes } from '../../../components/XForm';
+import Style from '../style.less';
+import { fetch, apis } from '../../../utils/request';
+
+const saveMiniapp = fetch(apis.member.miniapp);
+
+const TplItem = React.forwardRef((props, ref) => {
+  const [val, setVal] = useState({
+    tplId: undefined,
+    fieldNum: undefined,
+    ...props.value || {}
+  })
+
+  const handleChange = field => e => {
+    const newVal = { ...val, [`${field}`]: (e.target ? e.target.value : e) }
+    setVal(newVal)
+
+    if (typeof props.onChange === 'function') {
+      props.onChange(newVal)
+    }
+  }
+
+  return (
+    <Input.Group compact ref={ref}>
+      <Input style={{ width: '70%' }} value={val.tplId} placeholder="消息模板ID" onChange={handleChange('tplId')}></Input>
+      <InputNumber style={{ width: '30%' }} value={val.fieldNum} placeholder="字段数" onChange={handleChange('fieldNum')}></InputNumber>
+    </Input.Group>
+  );
+})
+
+const Miniapp = (props) => {
+  const user = props.data || {}
+  const appdata = user.miniapp || {};
+  const noticeTPL = (appdata.tpls || []).filter(x => x.tplType === 'notice')[0] || {}
+
+  const checkMiniapp = () => {
+  }
+
+  const fields = [
+    {
+      label: '名称',
+      name: 'name',
+      type: FieldTypes.Text,
+      value: appdata.name,
+      rules: [{required: true, message: '请填写小程序名称'}]
+    },
+    {
+      label: 'APPID',
+      name: 'miniappId',
+      type: FieldTypes.Text,
+      value: appdata.miniappId,
+      rules: [
+        { required: true, message: '请填写 APPID' },
+        { pattern: /^[a-zA-Z0-9]+$/, message: 'APPID 只能由字母与数字组成' }
+      ]
+    },
+    {
+      label: 'Secret',
+      name: 'secret',
+      type: FieldTypes.Text,
+      value: appdata.secret,
+      rules: [
+        { required: true, message: '请填写 Secret' },
+        { pattern: /^[a-zA-Z0-9]+$/, message: 'APPID 只能由字母与数字组成' }
+      ]
+    },
+    {
+      label: 'Token',
+      name: 'token',
+      value: appdata.token,
+      type: FieldTypes.Text,
+      rules: [
+        { pattern: /^[a-zA-Z0-9]+$/, message: 'token 只能由字母与数字组成' }
+      ]
+    },
+    // {
+    //   label: '业务受理',
+    //   name: 'mainbiz',
+    //   render: <TplItem />
+    // },
+    // {
+    //   label: '新客户通知',
+    //   name: 'newCustomer',
+    //   render: <TplItem />
+    // },
+    {
+      label: '消息通知',
+      name: 'notice',
+      render: () => <TplItem />,
+      value: noticeTPL,
+    },
+    {
+      action: true,
+      render: () => {
+        return (
+          <div className={Style['flex-box']}>
+            <div className={Style['flex-item']}>
+              <img src="" alt="" style={{ width: '128px' }}/>
+            </div>
+            <div className={Style['flex-auto']}>
+              <Button type="primary" ghost onClick={checkMiniapp}>验证</Button>
+            </div>
+          </div>
+        )
+      }
+    },
+  ]
+
+  const handleSubmit = val => {
+    // 校验字段
+    const { mainbiz, newCustomer, notice, ...otherData} = val
+
+    // if (mainbiz.tplId && !mainbiz.fieldNum) {
+    //   notification.error({ message: '请填写业务受理消息模板字段数' })
+    //   return
+    // }
+    
+    // if (newCustomer.tplId && !newCustomer.fieldNum) {
+    //   notification.error({ message: '请填写新客户通知模板字段数' })
+    //   return
+    // }
+    
+    if (notice.tplId && !notice.fieldNum) {
+      notification.error({ message: '请填写消息通知模板字段数' })
+      return
+    }
+
+    const tpls = [
+      {
+        ...notice,
+        ...(appdata.tpls || []).filter(x => x.tplType === 'notice')[0] || {},
+        tplType: 'notice'
+      }
+    ]
+
+    const data = {
+      ...appdata,
+      ...otherData,
+      orgId: user.orgId,
+      tpls,
+    }
+
+    saveMiniapp({ data }).then(() => {
+      notification.success({ message: '保存小程序信息成功' })
+    }).catch(x => x)
+  }
+
+  const handleCancel = () => {
+    if (typeof props.onCancel === 'function') {
+      props.onCancel()
+    }
+  }
+
+  return (<XForm onSubmit={handleSubmit} onCancel={handleCancel} fields={fields}></XForm>)
+}
+
+export default Miniapp;

src/pages/UserManage/Editor/User.jsx

@@ -1,49 +1,105 @@
-import React from 'react';
-import { Button } from 'antd';
+import React, { useState, useEffect } from 'react';
+import { Button, notification } from 'antd';
+import md5 from 'md5';
+import moment from 'moment';
+import router from 'umi/router';
 import XForm, { FieldTypes } from '../../../components/XForm';
+import { fetch, apis } from '../../../utils/request';
+
+const defaultPass = '123456';
+const saveUser = fetch(apis.member.save)
+const updateUser = fetch(apis.member.update)
 
 export default (props) => {
+  const [data, setData] = useState({})
+  const [submitting, setSubmitting] = useState(false)
+  const user = props.data;
+
   const fields = [
     {
       label: '公司名称',
       name: 'orgName',
-      type: FieldTypes.Text
+      type: FieldTypes.Text,
+      value: user.orgName,
     },
     {
-      label: '用户名称',
-      name: 'name',
-      type: FieldTypes.Text
+      label: '公司水印',
+      name: 'waterMark',
+      type: FieldTypes.ImageUploader,
+      value: user.waterMark,
     },
     {
-      label: '登录名称',
-      name: 'loginName',
+      label: '用户名称',
+      name: 'userName',
       type: FieldTypes.Text,
-      placeholder: '不填, 默认使用手机号'
+      rules: [
+        {required: true, message: '请填写用户名称'}
+      ],
+      value: user.userName,
     },
     {
       label: '手机号',
       name: 'phone',
       type: FieldTypes.Text,
       rules: [
-        {required: true, message: '请填写手机号'}
-      ]
+        {required: true, message: '请填写手机号'},
+        {len: 11, message: '手机号格式不正确'}
+      ],
+      value: user.phone,
+    },
+    {
+      label: '登录名称',
+      name: 'loginName',
+      type: FieldTypes.Text,
+      placeholder: '不填, 默认使用手机号',
+      extra: `默认登录密码 ${defaultPass}`,
+      value: user.loginName,
     },
     {
       label: '头像',
       name: 'avatar',
       type: FieldTypes.ImageUploader,
-      extra: '建议图片大小 128 * 128'
+      extra: '建议图片大小 128 * 128',
+      value: user.avatar,
     },
     {
       label: '有效期',
       name: 'expDate',
       type: FieldTypes.DatePicker,
+      rules: [
+        {required: true, message: '请选择有效期'}
+      ],
+      value: moment(user.expDate),
     },
   ]
 
   const handleSubmit = val => {
-    window.console.log('submit data --->', val)
+    const data = {
+      ...val,
+      loginName: val.loginName || val.phone,
+      loginPassword: md5(defaultPass),
+    }
+
+    setSubmitting(true)
+    if (user && user.userId) {
+      updateUser({ urlData: { id: user.userId }, data: { ...user, ...data } }).then((user) => {
+        setSubmitting(false)
+        notification.success({message: '编辑信息成功'})
+      }).catch(() => setSubmitting(false))
+    } else {
+      saveUser({ data }).then((user) => {
+        setSubmitting(false)
+        notification.success({message: '新建信息成功'})
+      }).catch(() => setSubmitting(false))
+      router.push(`/member/edit/${user.userId}`)
+    }
+  }
+
+  const handleCancel = () => {
+    if (typeof props.onCancel === 'function') {
+      props.onCancel()
+    }
   }
 
-  return (<XForm onSubmit={handleSubmit} fields={fields}></XForm>)
+  return (<XForm onSubmit={handleSubmit} onCancel={handleCancel} fields={fields} submitting={submitting}></XForm>)
 }

src/pages/UserManage/Editor/index.jsx

@@ -1,28 +1,57 @@
 import React, { useState, useEffect } from 'react';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
-import { Radio } from 'antd';
+import { Radio, Button } from 'antd';
+import { router } from 'umi';
 import User from './User';
+import MiniApp from './Miniapp';
+import Menus from './Menus';
+import { fetch, apis } from '../../../utils/request';
 
-import request from '../../../utils/request';
-import apis from '../../../services/apis';
+const getUser = fetch(apis.member.get);
 
 export default (props) => {
-  const [ tab, changeTab ] = useState(1);
+  const [ tab, changeTab ] = useState(props.location.query.tab - 0 || 1);
+  const [ user, setUser ] = useState({});
+  const handleRadioChange = e => {
+    if (user.userId) {
+      changeTab(e.target.value)
+    }
+  }
 
-  // useEffect(() => {
-  //   request({ ...apis.user.current }).then()
-  // })
+  useEffect(() => {
+    if (props.match.params.id) {
+      getUser({ urlData: { id: props.match.params.id } }).then((user) => {
+        // user 中包含 miniapp 信息
+        setUser(user);
+      }).catch(() => {})
+    }
+  }, [props.match.params.id])
+
+  const handleCancel = (currentTab) => () => {
+    if (currentTab === 1) {
+      gotoList()
+    } else {
+      changeTab(1)
+    }
+  }
+
+  const gotoList = () => {
+    router.push('/member')
+  }
 
   return (
-    <PageHeaderWrapper>
-      <div>
-        <Radio.Group value={tab} buttonStyle="solid" onChange={e => changeTab(e.target.value)}>
+    <PageHeaderWrapper extra={<Button type="primary" ghost size="small" icon="close" onClick={gotoList}></Button> }>
+      <div style={{ marginBottom: '24px' }}>
+        <Radio.Group value={tab} buttonStyle="solid" onChange={handleRadioChange}>
           <Radio.Button value={1}>主信息</Radio.Button>
           <Radio.Button value={2}>小程序</Radio.Button>
+          <Radio.Button value={3}>开通权限</Radio.Button>
         </Radio.Group>
       </div>
-      <div>
-        { tab === 1 ? <User /> : null}
+      <div style={{ width: '680px', margin: '0 auto' }}>
+        { tab === 1 ? <User data={user} {...props} onCancel={handleCancel(1)}/> : null}
+        { tab === 2 ? <MiniApp data={user} {...props} onCancel={handleCancel(2)}/> : null}
+        { tab === 3 ? <Menus data={user} {...props} onCancel={handleCancel(3)}/> : null}
       </div>
     </PageHeaderWrapper>
   );

src/pages/UserManage/index.jsx

@@ -1,61 +1,150 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
-import { Card, Button, Icon, Tooltip } from 'antd';
+import { Pagination, Card, Button, Icon, Tooltip, notification, Modal } from 'antd';
+import router from 'umi/router';
+import moment from 'moment';
+import className from 'classnames';
 import Cell from '../../components/Cell';
 import Style from './style.less';
+import { fetch, apis } from '../../utils/request';
 
 const { Meta } = Card;
 
+const getMembers = fetch(apis.member.list);
+const turnMember = fetch(apis.member.turn);
+const resetMemberPassword = fetch(apis.member.resetPass);
+
 const lineTextStyle = {
   marginBottom: 0,
   lineHeight: '1.8em'
 }
 
+const colorDanger = '#ff7875';
+const colorSucces = '#449d44';
+
+const Warn = (props) => <span style={{ color: colorDanger }}>{props.children}</span>
+const ABCol = (props) => (
+  <div className={className(Style['flex-box'])} style={lineTextStyle}>
+    <div className={className(Style['flex-item'])} style={{ width: '30%' }}>{props.header}</div>
+    <div className={className(Style['flex-auto'])}>{props.children}</div>
+  </div>
+)
+
 export default (props) => {
+  const [members, setMembers] = useState([]);
+  const [pageNavi, setPageNavi] = useState({ current: 1, pageSize: 10, total: 0 })
+
+  useEffect(() => {
+    getMembers({ params: { pageNum: pageNavi.current, pageSize: pageNavi.pageSize } }).then((dt) => {
+      const { records, ...pagenavi } = dt || {};
+      setMembers(records);
+      setPageNavi({
+        ...pageNavi,
+        ...pagenavi
+      })
+    }).catch()
+  }, []);
 
   const CardBody = (cbProps) => {
+    const handleSwitch = (on) => () => {
+      if (!on) {
+        Modal.confirm({
+          title: '确定禁用当前用户?',
+          onOk() {
+            turnMember({ urlData: { type: 'off', id: cbProps.userId } }).then(() => {
+              notification.success({ message: '禁用成功'})
+            }).catch()
+          },
+        });
+      } else {
+        turnMember({ urlData: { type: 'on', id: cbProps.userId } }).then(() => {
+          notification.success({ message: '开启成功'})
+        }).catch()
+      }
+    }
+
     return (
       <>
         <Cell action={
-          cbProps.status ?
-            (<Button type="link">开启<Icon type="check-circle" /></Button>) :
-            (<Button type="link">关闭<Icon type="delete" /></Button>)
+          cbProps.status != 1 ?
+            (<Button type="link" onClick={handleSwitch(true)} style={{ color: colorSucces }}>开启<Icon type="check" /></Button>) :
+            (<Button type="link" onClick={handleSwitch(false)} style={{ color: colorDanger }}>关闭<Icon type="delete" /></Button>)
           }>
           <h3>南京楼市</h3>
         </Cell>
         <div>
-          <p style={lineTextStyle}>联系人 : 曹建芳</p>
-          <p style={lineTextStyle}>手机号 : 187 5565 6565</p>
-          <p style={lineTextStyle}>小程序 : 南京楼市</p>
-          <p style={lineTextStyle}>服务到期时间 : 2019-09-24</p>
+          <ABCol header={'联系人'}>{cbProps.userName}</ABCol>
+          <ABCol header={'手机号'}>{cbProps.phone}</ABCol>
+          <ABCol header={'小程序'}>{cbProps.miniappId ? cbProps.miniappName : <Warn>未设置</Warn>}</ABCol>
+          <ABCol header={'服务到期时间'}>{cbProps.expData ? moment(cbProps.expData).format('YYYY-MM-DD') : <Warn>未设置</Warn>}</ABCol>
         </div>
       </>
     )
   }
+  
+  const createUser = () => {
+    router.push('/member/new');
+  }
+
+  const handleSizeChange = e => {
+
+  }
+
+  const handlePageChange = e => {
+
+  }
+
+  const gotoDetail = (member, tab) => () => {
+    router.push(`/member/edit/${member.userId}?tab=${tab || 1}`)
+  }
+
+  const resetPassword = (member) => () => {
+    Modal.confirm({
+      title: '确定重置当前用户密码?',
+      onOk() {
+        resetMemberPassword({ urlData: {id: member.userId}}).then((message) => {
+          notification.success({ message })
+        }).catch()
+      },
+    });
+  }
 
   return (
-    <PageHeaderWrapper>
+    <PageHeaderWrapper extra={<Button type="primary" icon="plus" onClick={createUser}>新建</Button>}>
       <div className={Style['flex-box']}>
-        <div className={Style['flex-item']}>
-          <Card
-            style={{width: '560px', boxShadow:'3px 3px 5px #ccc', borderRadius: '12px', overflow: 'hidden'}}
-            cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
-            actions={[
-              <Tooltip title="编辑">
-                <Icon type="edit" key="edit" />
-              </Tooltip>,
-              <Tooltip title="权限分配">
-                <Icon type="setting" key="rights" />
-              </Tooltip>,
-              <Tooltip title="重置密码">
-                <Icon type="block" key="resetpass" />
-              </Tooltip>
-            ]}
-          >
-            <CardBody/>
-          </Card>
-        </div>
+        {
+          members.map((member, inx) => {
+            return (
+              <div className={className(Style['flex-item'], Style.member)} key={inx}>
+                <Card
+                  style={{width: '360px', boxShadow:'3px 3px 5px #ccc', borderRadius: '12px', overflow: 'hidden'}}
+                  cover={<div className={Style.square} style={{ width: '100%', background: `no-repeat center/80% url(${member.qrCode})` }} />}
+                  actions={[
+                    <Tooltip title="编辑">
+                      <Icon type="edit" key="edit" onClick={gotoDetail(member)}/>
+                    </Tooltip>,
+                    <Tooltip title="权限分配">
+                      <Icon type="setting" key="rights" onClick={gotoDetail(member, 3)}/>
+                    </Tooltip>,
+                    <Tooltip title="重置密码">
+                      <Icon type="block" key="resetpass" onClick={resetPassword(member)}/>
+                    </Tooltip>
+                  ]}
+                >
+                  <CardBody {...member}/>
+                </Card>
+              </div>
+            );
+          })
+        }
       </div>
+      <Pagination
+        showSizeChanger
+        current={pageNavi.current}
+        total={pageNavi.total}
+        onChange={handlePageChange}
+        onShowSizeChange={handleSizeChange}
+      />
     </PageHeaderWrapper>
   )
 }

src/pages/UserManage/style.less

@@ -9,4 +9,14 @@
   .flex-auto {
     flex: auto;
   }
-}
+}
+
+.member {
+  margin-bottom: 36px;
+  margin-right: 24px;
+}
+
+.square {
+  height: 0;
+  padding-bottom : 80%;
+}

src/services/apis.js

@@ -14,7 +14,51 @@ const apis = {
       url: `${prefix}/signout`,
       method: 'POST',
     },
-  }
+  },
+  member: {
+    list: {
+      url: `${prefix}/taUser`,
+      method: 'GET',
+    },
+    get: {
+      url: `${prefix}/taUser/:id`,
+      method: 'GET',
+    },
+    save: {
+      url: `${prefix}/taUser`,
+      method: 'POST',
+    },
+    update: {
+      url: `${prefix}/taUser/:id`,
+      method: 'PUT',
+    },
+    miniapp: {
+      url: `${prefix}/taMiniapp`,
+      method: 'POST',
+    },
+    menus: {
+      url: `${prefix}/sysmodules`,
+      method: 'GET',
+    },
+    authorize: {
+      url: `${prefix}/sysmodules`,
+      method: 'POST',
+    },
+    turn: {
+      url: `${prefix}/turn/taUser/:id/:type`,
+      method: 'PUT',
+    },
+    resetPass: {
+      url: `${prefix}/password/taUser/:id`,
+      method: 'PUT',
+    },
+  },
+  image: {
+    upload: {
+      url: `${prefix}/antd/image`,
+      method: 'POST',
+    }
+  },
 }
 
 export default apis;

src/utils/request.js

@@ -4,6 +4,8 @@
  */
 import request from 'umi-request';
 import { notification } from 'antd';
+import apis from '../services/apis';
+
 const codeMessage = {
   200: '服务器成功返回请求的数据。',
   201: '新建或修改数据成功。',
@@ -25,7 +27,7 @@ const codeMessage = {
 const replaceURLParams = (url, params = {}) => {
   return Object.keys(params).reduce((acc, k) => { // 此方法对每个元素进行处理
     const re = new RegExp(`:${k}(?!w)`, 'i')
-    return acc.replace(re, args[k])
+    return acc.replace(re, params[k])
   }, url)
 }
 
@@ -78,7 +80,7 @@ request.interceptors.response.use(async (response, options) => {
         throw new Error(message);
       }
 
-      if (data.token) {
+      if (data && data.token) {
         window.localStorage.setItem('x-token', data.token)
       }
 
@@ -92,6 +94,9 @@ request.interceptors.response.use(async (response, options) => {
   }
 });
 
+
+const fetch = api => options => request(api.url, {...api, ...options || {}})
+
 export default config => {
   if (typeof config === 'string') {
     return request(config);
@@ -100,3 +105,5 @@ export default config => {
     return request(url, options);
   }
 };
+
+export { fetch, apis }

src/utils/upload.js

@@ -0,0 +1,11 @@
+import apis from '../services/apis';
+
+const uploaderProps = {
+  name: 'file',
+  action: apis.image.upload.url,
+  headers: {
+    Authorization: `Bearer ${window.localStorage.getItem('x-token')}`
+  }
+}
+
+export { uploaderProps }