个人信息

.eslintrc.js

@@ -10,6 +10,6 @@ module.exports = {
     'no-template-curly-in-string': 0,
     'no-param-reassign': 0,
     'no-unused-expressions': 0,
-    'no-unused-var': 0
+    'no-unused-vars': 0
   }
 };

src/components/Common/Form/index.jsx

@@ -87,6 +87,10 @@ const SageForm = (props, ref) => {
   const {
     formFields,
     colNum = 1,
+    showSubmitButton = false,
+    tailLayout = {
+      wrapperCol: { offset: 4, span: 20 }
+    },
     ...formProps
   } = props
 
@@ -144,6 +148,10 @@ const SageForm = (props, ref) => {
       formItemProps.wrapperCol = item.wrapperCol
     }
 
+    if (item.dependencies) {
+      formItemProps.dependencies = item.dependencies
+    }
+
     switch (item.type) {
       case 'select':
         formCompnentNode = (
@@ -241,6 +249,18 @@ const SageForm = (props, ref) => {
       <Row span={24}>
         {formNode}
       </Row>
+      {
+        showSubmitButton ?
+        <Row span={24}>
+          <Col span={24}>
+            <Form.Item {...tailLayout}>
+              <Button type="primary" htmlType="submit">
+                保存
+              </Button>
+            </Form.Item>
+          </Col>
+        </Row> : null
+      }
     </Form>
   )
 }

src/models/user.js

@@ -20,7 +20,7 @@ const UserModel = {
         const userInfo = response.data
 
         userInfo.name = userInfo.loginName || '创世者'
-        userInfo.avatar = 'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png'
+        userInfo.avatar = `/ebd/sys/file/showImage?imageId=${userInfo.user.headImage}`
 
         yield put({
           type: 'saveCurrentUser',

src/pages/user/center/index.jsx

-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import { PageHeaderWrapper } from '@ant-design/pro-layout'
-import { Card } from 'antd'
+import { Card, Tabs } from 'antd'
 import { connect } from 'umi'
-import { SageLayoutLR } from '@/components/Common'
-import { getUserDetail } from '@/pages/user/manage/service'
+import { SageLayoutLR, SageForm, SageMessage } from '@/components/Common'
+import { mobile, email } from '@/utils/verify'
+import { updateUser, modifyPwd } from '@/pages/user/manage/service'
 
 import style from './style.less'
 
+const { TabPane } = Tabs;
+
 const Center = (props) => {
 
   const [userDetail, setUserDetail] = useState({})
 
-  const requestCenterInfo = async () => {
-    const res = await getUserDetail({id: props.user.currentUser.userId})
+  const formRef = useRef()
+  const formRef2 = useRef()
+  // const requestCenterInfo = async () => {
+  //   const res = await getUserDetail({id: props.user.currentUser.userId})
+  //   if (res.isSuccess) {
+  //     setUserDetail(res.data)
+  //   }
+  // }
+
+  // 表单字段设置
+  const formFields = [
+    {
+      name: 'personName',
+      label: '用户名',
+      type: 'input',
+      rules: [{ required: true }],
+      props: {
+        style: {width: '300px'}
+      }
+    },
+    {
+      name: 'mobile',
+      label: '手机号',
+      type: 'input',
+      rules: [
+        { required: true },
+        { pattern: mobile, message: '请输入正确的手机号' }
+      ],
+      props: {
+        style: {width: '300px'}
+      }
+    },
+    {
+      name: 'email',
+      label: '邮箱',
+      type: 'input',
+      rules: [
+        // { required: true },
+        { pattern: email, message: '请输入正确的邮箱' }
+      ],
+      props: {
+        style: {width: '300px'}
+      }
+    },
+    {
+      name: 'sex',
+      label: '性别',
+      type: 'radio',
+      initialValue: '1',
+      options: [
+        { value: '1', text: '男' },
+        { value: '0', text: '女' },
+      ]
+    }
+  ]
+
+  const doSave = async (values) => {
+    const formData = Object.assign({}, values)
+
+    formData.loginId = userDetail.loginId
+    const res = await updateUser(formData)
+
+    if (res.isSuccess) {
+      SageMessage.success('保存成功')
+      window.location.reload()
+    }
+  }
+
+  const onFinish = (values) => {
+    doSave(values)
+  }
+
+  const onFinishFailed = ({ values }) => {
+    console.log(values)
+  }
+
+  // 表单字段设置
+  const formFields2 = [
+    {
+      name: 'oldPwd',
+      label: '旧密码',
+      type: 'input',
+      rules: [
+        { required: true, message: '请输入旧密码' }
+      ],
+      props: {
+        type: 'password',
+        style: {width: '300px'}
+      }
+    },
+    {
+      name: 'newPwd',
+      label: '新密码',
+      type: 'input',
+      rules: [
+        { required: true, message: '请输入新密码' }
+      ],
+      props: {
+        type: 'password',
+        style: {width: '300px'}
+      }
+    },
+    {
+      name: 'confirmPwd',
+      label: '确认密码',
+      dependencies: ['newPwd'],
+      type: 'input',
+      rules: [
+        { required: true, message: '请确认新密码' },
+        ({ getFieldValue }) => ({
+          validator(rule, value) {
+            if (!value || getFieldValue('newPwd') === value) {
+              return Promise.resolve();
+            }
+            return Promise.reject('新密码不一致!');
+          },
+        }),
+      ],
+      props: {
+        type: 'password',
+        style: {width: '300px'}
+      }
+    }
+  ]
+
+  const doSave2 = async (values) => {
+    const formData = Object.assign({}, values)
+
+    // formData.loginId = userDetail.loginId
+    const res = await modifyPwd(formData)
+
     if (res.isSuccess) {
-      setUserDetail(res.data)
+      SageMessage.success('修改密码成功')
+      window.location.reload()
     }
   }
 
+  const onFinish2 = (values) => {
+    doSave2(values)
+  }
+
+  const onFinishFailed2 = ({ values }) => {
+    console.log(values)
+  }
+
   useEffect(() => {
-    requestCenterInfo()
+    const data = props.user.currentUser.user
+    setUserDetail(data)
+    formRef.current.setFieldsValue({
+      personName: data.personName,
+      mobile: data.mobile,
+      email: data.email,
+      sex: data.sex,
+    })
   }, [])
 
   return (
@@ -31,10 +179,29 @@ const Center = (props) => {
           <Card title="个人信息" size="small" style={{ height: '100%' }}>
             <div>
               <div className={style["center-avator"]}>
-                <img src="" width="120" height="120" />
+                <img src={`/ebd/sys/file/showImage?imageId=${userDetail.headImage}`} width="120" height="120" />
               </div>
               <div className={style["user-info"]}>
-                <div></div>
+                <div className={style["user-info-item"]}>
+                  <div className={style["user-info-item-left"]}>登录名</div>
+                  <div className={style["user-info-item-right"]}>{userDetail.mobile}</div>
+                </div>
+                <div className={style["user-info-item"]}>
+                  <div className={style["user-info-item-left"]}>用户名</div>
+                  <div className={style["user-info-item-right"]}>{userDetail.personName}</div>
+                </div>
+                <div className={style["user-info-item"]}>
+                  <div className={style["user-info-item-left"]}>所属部门</div>
+                  <div className={style["user-info-item-right"]}>{userDetail.orgnName}</div>
+                </div>
+                <div className={style["user-info-item"]}>
+                  <div className={style["user-info-item-left"]}>用户邮箱</div>
+                  <div className={style["user-info-item-right"]}>{userDetail.email}</div>
+                </div>
+                <div className={style["user-info-item"]}>
+                  <div className={style["user-info-item-left"]}>入职时间</div>
+                  <div className={style["user-info-item-right"]}>{userDetail.entryTime}</div>
+                </div>
               </div>
             </div>
           </Card>
@@ -42,7 +209,36 @@ const Center = (props) => {
         right={
           <div style={{ paddingLeft: 12, height: '100%' }}>
             <Card title="基本资料" size="small" style={{ height: '100%' }}>
-              修改密码
+              <Tabs defaultActiveKey="1">
+                <TabPane tab="基本资料" key="1">
+                  <SageForm
+                    ref={formRef}
+                    labelCol={ {span: 3 }}
+                    wrapperCol={ {span: 21} }
+                    formFields={formFields}
+                    onFinish={onFinish}
+                    onFinishFailed={onFinishFailed}
+                    showSubmitButton
+                    tailLayout={{
+                      wrapperCol: { offset: 3, span: 21 }
+                    }}
+                  />
+                </TabPane>
+                <TabPane tab="修改密码" key="2">
+                  <SageForm
+                    ref={formRef2}
+                    labelCol={ {span: 3 }}
+                    wrapperCol={ {span: 21} }
+                    formFields={formFields2}
+                    onFinish={onFinish2}
+                    onFinishFailed={onFinishFailed2}
+                    showSubmitButton
+                    tailLayout={{
+                      wrapperCol: { offset: 3, span: 21 }
+                    }}
+                  />
+                </TabPane>
+              </Tabs>
             </Card>
           </div>
 
@@ -53,4 +249,4 @@ const Center = (props) => {
   )
 }
 
-export default connect(({user}) => ({user}))(Center)
+export default connect(({ user }) => ({ user }))(Center)

src/pages/user/center/style.less

 .center-avator {
   margin: 12px 0;
   text-align: center;
+  img {
+    border-radius: 50%;
+  }
+}
+
+.user-info-item {
+  padding: 11px 0;
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid #f0f3f4;
+  font-size: 13px;
+  color: #303133;
 }

src/pages/user/manage/service.js

@@ -40,3 +40,10 @@ export function openOrClose(params) {
     data: { ...params },
   })
 }
+
+export function modifyPwd(params) {
+  return request(`/${requestPrefix}/party/modifyPwd`, {
+    method: 'POST',
+    data: { ...params },
+  })
+}