feat: 个人中心头像处理

package.json

@@ -59,6 +59,7 @@
     "@umijs/route-utils": "^1.0.33",
     "ahooks": "^2.10.0",
     "antd": "4.16.12",
+    "antd-img-crop": "^3.16.0",
     "classnames": "^2.2.6",
     "crypto-js": "^4.0.0",
     "dayjs": "^1.10.4",

src/components/RightContent/AvatarDropdown.tsx

@@ -8,6 +8,7 @@ import HeaderDropdown from '../HeaderDropdown'
 import styles from './index.less'
 import { clearAuthCache, removeToken } from '@/utils/auth'
 import ws from '@/utils/ws'
+import { isDevMode } from '@/utils/env'
 
 export type GlobalHeaderRightProps = {
   menu?: boolean
@@ -86,10 +87,10 @@ const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({ menu }) => {
 
   const menuHeaderDropdown = (
     <Menu className={styles.menu} selectedKeys={[]} onClick={onMenuClick}>
-      {/* <Menu.Item key="settings">
+      <Menu.Item key="settings">
         <SettingOutlined />
         个人设置
-      </Menu.Item> */}
+      </Menu.Item>
       {/* {menu && (
         <Menu.Item key="settings">
           <SettingOutlined />
@@ -111,7 +112,10 @@ const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({ menu }) => {
         <Avatar
           size="small"
           className={styles.avatar}
-          src={`http://cld.smartcost.com.cn${currentUser.avatar}_2.jpg`}
+          src={
+            (isDevMode() ? 'http://cld2qa.com' : 'http://zhcld.com') +
+            (currentUser?.avatar ? currentUser.avatar : '/global/img/avtra_2.jpg')
+          }
           alt="avatar"
         />
         <span className={`${styles.name} anticon`}>{currentUser.username}</span>

src/components/RightContent/Book/components/UserList/index.tsx

@@ -1,3 +1,4 @@
+import { isDevMode } from '@/utils/env'
 import { useState, useRef } from 'react'
 import { useIntl } from 'umi'
 import './index.less'
@@ -68,7 +69,10 @@ const UesrList: React.FC<UserListProps> = ({ onlineList }) => {
                       <span
                         className="w-8 h-8 rounded-1/2 block"
                         style={{
-                          backgroundImage: `url(http://cld.smartcost.com.cn${item.avatar}_2.jpg)`,
+                          backgroundImage: `url(${
+                            (isDevMode() ? 'http://cld2qa.com' : 'http://zhcld.com') +
+                            (item.avatar ? item.avatar : '/global/img/avtra_2.jpg')
+                          })`,
                           backgroundSize: 'cover'
                         }}
                       />

src/pages/User/Account/Settings/components/AvatarView.jsx

@@ -0,0 +1,71 @@
+import styles from './BaseView.less'
+import { useState, useEffect } from 'react'
+import ImgCrop from 'antd-img-crop'
+import { Upload } from 'antd'
+import { UploadOutlined } from '@ant-design/icons'
+import { getToken } from '@/utils/auth'
+
+const AvatarView = ({ avatar, setAvatar }) => {
+  const [fileList, setFileList] = useState([])
+
+  useEffect(() => {
+    if (avatar) {
+      setFileList([
+        {
+          uid: '-1',
+          name: 'image.png',
+          status: 'done',
+          url: avatar
+        }
+      ])
+    }
+  }, [avatar])
+  const onChange = ({ file }) => {
+    setFileList([file])
+    if (file.status === 'done') {
+      setAvatar(file.response.data)
+    }
+  }
+
+  const onPreview = async file => {
+    let src = file.url
+    if (!src) {
+      src = await new Promise(resolve => {
+        const reader = new FileReader()
+        reader.readAsDataURL(file.originFileObj)
+        reader.onload = () => resolve(reader.result)
+      })
+    }
+    const image = new Image()
+    image.src = src
+    const imgWindow = window.open(src)
+    imgWindow.document.write(image.outerHTML)
+  }
+  return (
+    <>
+      <div className={styles.avatar_title}>头像</div>
+      {/* <div className={styles.avatar}>
+      <img src={avatar} alt="avatar" />
+    </div> */}
+      <ImgCrop rotate>
+        <Upload
+          action="/api/staff/upload/avatar"
+          listType="picture-card"
+          fileList={fileList}
+          onChange={onChange}
+          maxCount={1}
+          headers={{
+            Authorization: `bearer ${getToken()}`
+          }}
+          onPreview={onPreview}
+        >
+          <div className={styles.button_view}>
+            <UploadOutlined />
+          </div>
+        </Upload>
+      </ImgCrop>
+    </>
+  )
+}
+
+export default AvatarView

src/pages/User/Account/Settings/components/BaseView.jsx

@@ -1,11 +1,9 @@
 import React, { useState, useEffect, useRef } from 'react'
-import { Button, Col, message, Row, Tabs, Upload } from 'antd'
+import { Col, message, Row, Tabs } from 'antd'
 import ProForm, {
   ProFormDatePicker,
   ProFormSelect,
   ProFormRadio,
-  ProFormUploadDragger,
-  ProFormUploadButton,
   ProFormText
 } from '@ant-design/pro-form'
 import styles from './BaseView.less'
@@ -14,9 +12,10 @@ import {
   householdRegistrationOptions,
   marriageOptions
 } from '@/components/EditableForm/src/useOptions'
-import { UploadOutlined } from '@ant-design/icons'
 import { queryStaffOwner, updateBaseStaff, updateFinanceStaff } from '@/services/user'
 import consts from '@/consts'
+import AvatarView from './AvatarView'
+import { isDevMode } from '@/utils/env'
 
 const { TabPane } = Tabs
 
@@ -29,23 +28,6 @@ const { TabPane } = Tabs
 //   }
 //   callback()
 // }
-// 头像组件 方便以后独立，增加裁剪之类的功能
-const AvatarView = ({ avatar }) => (
-  <>
-    <div className={styles.avatar_title}>头像</div>
-    <div className={styles.avatar}>
-      <img src={avatar} alt="avatar" />
-    </div>
-    <Upload showUploadList={false}>
-      <div className={styles.button_view}>
-        <Button>
-          <UploadOutlined />
-          更换头像
-        </Button>
-      </div>
-    </Upload>
-  </>
-)
 
 const BaseView = () => {
   const baseRef = useRef(null)
@@ -65,6 +47,9 @@ const BaseView = () => {
     }
     initData()
   }, [])
+  const avatar =
+    (isDevMode() ? 'http://cld2qa.com' : 'http://zhcld.com') +
+    (staff?.avatar2 ? staff?.avatar2 : '/global/img/avtra_2.jpg')
   return (
     <Tabs defaultActiveKey="1">
       <TabPane tab="基本信息" key="1">
@@ -87,6 +72,7 @@ const BaseView = () => {
                 }
               }}
             >
+              <ProFormText name="avatar" hidden />
               <Row>
                 <Col span={12}>
                   <ProFormText disabled name="jobNumber" label="工号" placeholder="" />
@@ -182,11 +168,14 @@ const BaseView = () => {
             </ProForm>
           </div>
           <div className={styles.right}>
-            <AvatarView avatar={''} />
+            <AvatarView
+              avatar={avatar}
+              setAvatar={avatar2 => baseRef?.current.setFieldsValue({ avatar: avatar2 })}
+            />
           </div>
         </div>
       </TabPane>
-      <TabPane tab="证件信息" key="2">
+      {/* <TabPane tab="证件信息" key="2">
         <div className={styles.baseView}>
           <div className="w-1/2">
             <ProForm
@@ -227,7 +216,7 @@ const BaseView = () => {
             </ProForm>
           </div>
         </div>
-      </TabPane>
+      </TabPane> */}
       <TabPane tab="财务信息" key="3">
         <div className={styles.baseView}>
           <div className="w-3/4">

src/pages/User/Account/Settings/index.jsx

@@ -9,8 +9,8 @@ const { Item } = Menu
 
 const Settings = () => {
   const menuMap = {
-    base: '基本设置',
-    wxNotice: '微信通知'
+    base: '基本设置'
+    // wxNotice: '微信通知'
   }
 
   const [initConfig, setInitConfig] = useState({