@titaui/pc 1.7.100 → 1.8.2

package/src/components/upload-photo-modal/index.tsx

@@ -0,0 +1,236 @@
+import React, { useState, useRef } from 'react';
+import classNames from 'classnames';
+import Cropper from 'react-cropper';
+import 'cropperjs/dist/cropper.css';
+import Toast from '../../components/toast';
+import ConditionRender from '../condition-render';
+import { saveUserInfo, saveTenantLogo, saveBrowserIcon } from './request-api';
+import Dialog from '../../components/dialog';
+import { List } from './constant'
+import './index.scss';
+
+const preCls = 'tita-ui-change-person-photo';
+
+interface Props {
+  visible: boolean;
+	type: string; // person enterprise browser
+  onCancel: Function;
+}
+
+const ChangePhoto = (props: Props) => {
+	const { visible, onCancel, type = 'browser' } = props;
+
+	const modalRef = useRef<any>();
+
+	const [ image, setImage ] = useState();
+	const [ cropper, setCropper ] = useState<any>();
+	const [ cropData, setCropData ] = useState('#');
+	const [ userInfo, setUserInfo ] = useState({ Avatar: '' });
+  const [item] = useState(List.find(item => item.id === type));
+
+	const cropperRef = useRef<HTMLImageElement>(null);
+
+	const onChange = (e: any) => {
+		e.preventDefault();
+		let files;
+		if (e.dataTransfer) {
+			files = e.dataTransfer.files;
+		} else if (e.target) {
+			files = e.target.files;
+		}
+		const reader = new FileReader();
+		reader.onload = () => {
+			setImage(reader.result as any);      
+		};
+		reader.readAsDataURL(files[0]);
+	};
+
+	const onCrop = () => {
+		const imageElement: any = cropperRef.current;
+		const cropper: any = imageElement.cropper;
+		setCropData(cropper.getCroppedCanvas().toDataURL());
+		setUserInfo(cropper.getCroppedCanvas().toDataURL());
+
+    let base64Url = cropper.getCroppedCanvas().toDataURL();
+    //将base64转换成blob
+    let FileOrBlob = dataURLtoBlob(base64Url);
+    //添加到formdata
+    let formData = new FormData();
+    formData.append('file', FileOrBlob, "file_" + Date.parse(new Date()) + ".png");
+    setCropper(formData)
+	};
+
+  const dataURLtoBlob = (urlData) => {
+    var bytes = window.atob(urlData.split(',')[1]);   
+    var ab = new ArrayBuffer(bytes.length);
+    var ia = new Uint8Array(ab);
+    for (var i = 0; i < bytes.length; i++) {
+      ia[i] = bytes.charCodeAt(i);
+    }
+    return new Blob([ab], { type: 'image/png' });
+  }
+
+	const handleSaveUserInfo = () => {
+		if (!image) {
+			return;
+		} else {
+			saveUserInfo({ data: userInfo }).then((resp) => {
+				if (resp.Code === 1) {
+					Toast.Success('保存成功', { canClose: false });
+					onCancel();
+				} else {
+					Toast.Error(resp.Message, { canClose: false });
+				}
+			});
+		}
+	};
+  const handleSaveInfo =  () => {
+    if (!image) {
+      return;
+    } else {      
+      saveTenantLogo( cropData ).then((resp) => {
+        if (resp.Code === 1) {
+          Toast.Success('保存成功', { canClose: false });
+          onCancel();
+        } else {
+          Toast.Error(resp.Message, { canClose: false });
+        }
+      });
+    }
+  };
+
+  const handleBrowserIconSaveInfo =  () => {
+    if (!image) {
+      return;
+    } else { 
+      console.log(cropper);
+            
+      saveBrowserIcon( cropper ).then((resp) => {
+        if (resp.Code === 1) {
+          Toast.Success('保存成功', { canClose: false });
+          onCancel();
+        } else {
+          Toast.Error(resp.Message, { canClose: false });
+        }
+      });
+    }
+  };
+
+	return (
+		<Dialog
+			visible={visible}
+			ref={modalRef}
+			width={480}
+			mask
+			centered
+			title={'上传头像'}
+			noHeadLine
+			maskClosable={false}
+			onClose={onCancel}
+			onCancel={onCancel}
+			okText="保存"
+			noFooterLine
+			onOk={handleBrowserIconSaveInfo}
+		>
+			<div className={preCls}>
+				{!image ? 
+					<div className={`${preCls}__upload`}>
+						<div className={`${preCls}__upload-preview`}>
+							<div className={`${preCls}__upload-right`}>
+								<i className={classNames(`${preCls}__upload-right-icon`, 'tu-icon-upload')} />
+								<input
+									type="file"
+									onChange={onChange}
+									className={`${preCls}__upload-right-input`}
+									accept={item?.accept}
+								/>
+								<span className={`${preCls}__upload-right-title`}>点击上传</span>
+								<ConditionRender condition={type === 'person'}>
+									<span className={`${preCls}__upload-right-tips`}>
+										{item?.tips}
+									</span>
+								</ConditionRender>
+								<ConditionRender condition={type === 'enterprise'}>
+									<span className={`${preCls}__upload-right-tips`}>
+                  {item?.tips}
+									</span>
+								</ConditionRender>
+								<ConditionRender condition={type === 'browser'}>
+									<span className={`${preCls}__upload-right-tips`}>{item?.tips}</span>
+								</ConditionRender>
+							</div>
+						</div>
+						<div className={`${preCls}__upload-left`}>
+							<ConditionRender condition={type === 'person'}>
+								<div className={`${preCls}__upload-left-box1`} />
+								<div className={`${preCls}__upload-left-box2`} />
+								<div className={`${preCls}__upload-left-box3`} />
+							</ConditionRender>
+							<ConditionRender condition={type === 'enterprise'}>
+								<div className={`${preCls}__upload-left-box`} />
+								<span className={`${preCls}__upload-left-preview`}>{item?.previewTitle}</span>
+							</ConditionRender>
+							<ConditionRender condition={type === 'browser'}>
+								<div className={`${preCls}__upload-left-box`} />
+								<span className={`${preCls}__upload-left-preview`}>{item?.previewTitle}</span>
+							</ConditionRender>
+						</div>
+					</div>
+         :
+					<div className={`${preCls}__img`}>
+						<Cropper
+							src={image}
+							style={{ height: 240, width: 240 }}
+							background={false}
+							responsive={true}
+							autoCropArea={item?.autoCropArea}
+							checkOrientation={true}
+							minCropBoxHeight={10}
+							minCropBoxWidth={10}
+							initialAspectRatio={item?.initialAspectRatio}
+							guides={true}
+							preview=".img-preview"
+							ref={cropperRef}
+							// onInitialized={(instance) => {
+							// 	setCropper(instance);
+							// }}
+							crop={onCrop}
+						/>
+						<div className={classNames(`${preCls}__preview-box`, {[`${preCls}__preview-box-bgc`]:type === "enterprise"}, {[`${preCls}__preview-box-browser`]:type === "browser"})}>
+              <ConditionRender condition={type === "person"}>
+							<img src={cropData} className={`${preCls}__preview-box1`} />
+							<img src={cropData} className={`${preCls}__preview-box2`} />
+							<img src={cropData} className={`${preCls}__preview-box3`} />
+              </ConditionRender>
+              <ConditionRender condition={type === "enterprise"}>
+                <img src={cropData} className={`${preCls}__preview-enterprise-img`}/>
+                <span className={`${preCls}__preview-enterprise-title`}>{item?.previewTitle}</span>
+              </ConditionRender>
+              <ConditionRender condition={type === "browser"}>
+                <img src={cropData} className={`${preCls}__preview-browser-img`}/>
+                <span className={`${preCls}__preview-browser-name`}>一体化人才管理云平台</span>
+                <span className={`${preCls}__preview-browser-title`}>{item?.previewTitle}</span>
+              </ConditionRender>
+						</div>
+					</div>
+          }
+				<div className={`${preCls}__title`}>
+					<input
+						accept={item?.accept}
+						type="file"
+						onChange={onChange}
+						className={classNames(`${preCls}__title-input`, { [`${preCls}__title-input--show`]: image })}
+					/>
+					<span className={classNames(`${preCls}__title-again`, { [`${preCls}__title-again--show`]: image })}>
+						重新上传
+					</span>
+					<ConditionRender condition={type === 'person'}>
+						<span className={`${preCls}__title-preview`}>{item?.previewTitle}</span>
+					</ConditionRender>
+				</div>
+			</div>
+		</Dialog>
+	);
+};
+
+export default ChangePhoto;

package/src/components/upload-photo-modal/request-api.ts

@@ -0,0 +1,23 @@
+import qs from "qs";
+import { rput, rpost } from "../../utils/request";
+import { getUserInfo } from "../../utils/bs-global";
+
+export const getUserInfoFun = () => {
+  return rpost("v1")(`manage/user/profile?toUserId=${getUserInfo().Id}`);
+};
+
+export const saveUserInfo = ({ data }) => {
+  return rput("v1")("manage/user/update", data, {
+    "headers": { "Content-Type": "application/x-www-form-urlencoded" },
+    "transformRequest": qs.stringify,
+  });
+};
+
+export const saveTenantLogo = (params)  => {
+  return rpost("v1")("tenant/update/logo", params);
+}
+
+export const saveBrowserIcon = (params)  => {
+  return rpost("v1")("tenant/update/browerIcon", params);
+}
+

package/src/components/user-selector/category-selector-panel/depart-tree.tsx

@@ -26,19 +26,20 @@ export default (props: Props) => {
     departOnly,
     sourceFrom,
     auth,
+    authType,
     isGetRoot,
     disabledDepartSelect,
   } = useContext(CommonContext);
 
   const onGetDepartTreeData = () => {
     return getTreeData('-1', {
-      departOnly, auth, isGetRoot, sourceFrom,
+      departOnly, auth, authType, isGetRoot, sourceFrom,
     });
   }
 
   const onLoadDepartNodes = nodeId => {
     return getTreeData(nodeId, {
-      departOnly, auth, isGetRoot, sourceFrom,
+      departOnly, auth, authType, isGetRoot, sourceFrom,
       'isLoadNodes': true
     });
   }

package/src/components/user-selector/export-modules/field-tree-selector/index.scss

@@ -65,6 +65,6 @@
     background: #ffffff;
     box-shadow: 0px 4px 12px 0px rgba(127, 145, 180, 0.2);
     border: 1px solid #f0f2f5;
-    border-radius: 4px;
+    border-radius: 12px;
   }
 }

package/src/components/user-selector/export-modules/field-tree-selector/index.tsx

@@ -47,6 +47,7 @@ export interface PropsInterface {
   sourceFrom?: string;
   departOnly?: boolean;
   auth?: boolean;
+  authType?: string;
   placeholder?: string;
   getDepartRoot?: Function;
   destroyPopupOnHide?: boolean;
@@ -92,6 +93,7 @@ export default forwardRef((props: PropsInterface, ref) => {
     departOnly,
     auth = false, // 数据权限
     placeholder = getLocale('Mod_Pleaseselect'),
+    authType,
     getDepartRoot,
     destroyPopupOnHide = true,
     forceRender = false,
@@ -259,6 +261,7 @@ export default forwardRef((props: PropsInterface, ref) => {
         sourceFrom,
         departOnly,
         auth,
+        authType,
         isGetRoot,
         disabledDepartSelect,
         panes,

package/src/components/user-selector/request-apis.js

@@ -120,7 +120,7 @@ export const searchGroups = ({ searchKey }) => {
 }
 
 export const getDuties = () => {
-  return axios.get(`${requestDomain()}/api/v1/${tenantId}/${userId}/position/getAll`)
+  return axios.get(`${requestDomain()}/api/v1/${tenantId}/${userId}/position/get?status=1&pageNum=1&pageSize=100`)
     .then(res => {
       return res.data;
     })

package/src/components/word-cloud/index.js

@@ -49,7 +49,7 @@ export default props => {
       style={{ 'display': isShow ? 'unset' : 'none' }}
       className={classNames('titaui-wordcloud')}
     >
-      <div className={classNames('titaui-wordcloud__title')}>企业关注热点</div>
+      <div className={classNames('titaui-wordcloud__title')}>{getLocale('HP_Hotcompanies')}</div>
       <canvas ref={canvas} id="worldcloud-titaui-home-canvas" width="235" height="223"></canvas>
     </div>
   </React.Fragment>

package/src/components-v1/userSelector/components/MultiMode/CommonList.tsx

@@ -111,7 +111,7 @@ export default class CommonList extends PureComponent<Props,State> {
           !hasUser && !pending &&
           <EmptyWrapper>
             <img src={require('../../assets/emptyImg.png')} width="100px"/>
-            <ListEmptyText>这里什么都没有...</ListEmptyText>
+            <ListEmptyText>{getLocale('Mod_ThereNothing')}...</ListEmptyText>
           </EmptyWrapper>
         }
       </ListWrapper>

package/src/components-v1/userSelector/components/MultiMode/DepartmentList.tsx

@@ -70,7 +70,7 @@ export default class DepartmentList extends PureComponent<Props, State> {
           {!trees.length && (
             <EmptyWrapper>
               <img src={require('../../assets/emptyImg.png')} width='100px' />
-              <ListEmptyText>这里什么都没有...</ListEmptyText>
+              <ListEmptyText>{getLocale('Mod_ThereNothing')}...</ListEmptyText>
             </EmptyWrapper>
           )}
         </PerfectScrollbar>

package/src/components-v1/userSelector/components/MultiMode/SubsList.tsx

@@ -54,7 +54,7 @@ export default class CommonList extends PureComponent<Props,State> {
           !hasUser && 
           <EmptyWrapper>
             <img src={require('../../assets/emptyImg.png')} width="100px"/>
-            <ListEmptyText>这里什么都没有...</ListEmptyText>
+            <ListEmptyText>{getLocale('Mod_ThereNothing')}...</ListEmptyText>
           </EmptyWrapper>
         }
       </ListWrapper>

package/src/components-v1/userSelector/components/SingleMode.tsx

@@ -121,7 +121,7 @@ export default class SingleMode extends PureComponent<Props,State> {
           !users.length && !pending ? 
           <EmptyWrapper>
             <img src={require('../assets/emptyImg.png')} width="100px"/>
-            <ListEmptyText>这里什么都没有...</ListEmptyText>
+            <ListEmptyText>{getLocale('Mod_ThereNothing')}...</ListEmptyText>
           </EmptyWrapper>:
           <SingleList>
             {

package/src/index.js

@@ -85,3 +85,4 @@ export { default as requestApi } from "./utils/request";
 export { default as PointDemo} from './components/point-demo';
 export { default as Scrollbar } from './components/scrollbar';
 export { default as WeeklyReport} from './components/weekly-report';
+export { default as UploadPhotoModal } from './components/upload-photo-modal';

package/src/pages/home/components/data-list/index.tsx

@@ -25,8 +25,8 @@ const HomePageDataList = () => {
   typeMap.set('all', getLocale('Mod_all'))
   typeMap.set('hadNotAlign', getLocale('OKR_Db_Unaligned'))
   typeMap.set('hadAlign', getLocale('OKR_Db_Aligned'))
-  typeMap.set('hadNotUpdate', '未更新')
-  typeMap.set('hadUpdate', '已更新')
+  typeMap.set('hadNotUpdate', getLocale('HP_Notupdated'))
+  typeMap.set('hadUpdate', getLocale('HP_Updated'))
   typeMap.set('normalOkr', getLocale('OKR_MyO_Pop_Upd_Notrack'))
   typeMap.set('riskOkr', getLocale('OKR_MyO_Pop_Upd_Atrisk'))
   typeMap.set('dalyOkr', getLocale('OKR_MyO_Pop_Upd_Postoned'))

package/src/pages/home/components/data-list/nav-selector/index.tsx

@@ -102,8 +102,8 @@ const HomeNavSelector = (props: Props) => {
             source === 'update' &&
             <SearchDropdown value={type} onChange={setType} >
               <SearchDropdown.Option value="all">{getLocale('Mod_all')}</SearchDropdown.Option>
-              <SearchDropdown.Option value='hadNotUpdate'>未更新</SearchDropdown.Option>
-              <SearchDropdown.Option value='hadUpdate'>已更新</SearchDropdown.Option>
+              <SearchDropdown.Option value='hadNotUpdate'>{getLocale('HP_Notupdated')}</SearchDropdown.Option>
+              <SearchDropdown.Option value='hadUpdate'>{getLocale('HP_Updated')}</SearchDropdown.Option>
             </SearchDropdown>
           }
           {

package/src/pages/home/components/data-list/table/columns/index.tsx

@@ -64,7 +64,7 @@ export const okrUpdateColumns = [{
   width: '7%',
   render: (data) =>
     <LinkColumn onClick={data.behave}>
-      {data.typeName === '已更新' ? getLocale('Mod_Checkdetails') : getLocale('OKR_OKRW_Gotoupdate')}
+      {data.typeName === getLocale('HP_Updated') ? getLocale('Mod_Checkdetails') : getLocale('OKR_OKRW_Gotoupdate')}
     </LinkColumn >
 }]
 

package/src/pages/home/components/guide/index.tsx

@@ -1,8 +1,9 @@
 import { getUserInfo } from "../../../../utils/bs-global";
 import React, { ReactElement, useState, useEffect } from "react";
 import Queue from "rc-queue-anim";
-import "./index.scss";
+import { getLocale } from "../../../../utils/getLocale";
 import HomeGuideStepItem from "./stepItem";
+import "./index.scss";
 
 interface Props {}
 
@@ -28,7 +29,7 @@ function HomePageGuide({}: Props): ReactElement {
           onClick={() => setVisible(true)}
         >
           <i className="tu-icon-T-zhinan" />
-          如何使用 Tita
+            {getLocale('HP_HowTita')}
         </div>
       )}
       {visible && (
@@ -40,30 +41,30 @@ function HomePageGuide({}: Props): ReactElement {
             />
             <div className={prefixCls + "__guide-steps"}>
               <div className={prefixCls + "__guide-title"}>
-                四步上手 Tita OKR
+                {getLocale('HP_FourstepsTita')}
               </div>
               <HomeGuideStepItem
-                title="设定 OKR"
+                title={getLocale('HP_DevelopOKR')}
                 step={1}
-                linkName="教程: 如何在 Tita 上设定 OKR"
+                linkName={getLocale('HP_Tut_developOKRs')}
                 href="https://club.tita.com/18150.html"
               />
               <HomeGuideStepItem
-                title="对齐 OKR"
+                title={getLocale('HP_AlignmentOKR')}
                 step={2}
-                linkName="教程: 如何在 Tita 上对齐 OKR"
+                linkName={getLocale('HP_TutalignmentOKR')}
                 href="https://club.tita.com/18150.html"
               />
               <HomeGuideStepItem
-                title="任务执行支撑目标达成"
+                title={getLocale('HP_Taskachievement')}
                 step={3}
-                linkName="教程: 如何在 Tita 上分解任务"
+                linkName={getLocale('HP_TuttasksonTita')}
                 href="https://club.tita.com/18165.html"
               />
               <HomeGuideStepItem
-                title="更新进度"
+                title={getLocale('HP_UpdateProgress')}
                 step={4}
-                linkName="教程: 如何在 Tita 上更新 OKR"
+                linkName={getLocale('HP_TutOKRonTita')}
                 href="https://club.tita.com/18179.html"
                 isFinalStep
               />
@@ -74,7 +75,7 @@ function HomePageGuide({}: Props): ReactElement {
                 target="_blank"
               >
                 <i className="tu-icon-shoushi" />
-                更多产品培训课程
+                {getLocale('HP_Morecourses')}
               </a>
             </div>
           </div>

package/src/pages/home/components/header/index.tsx

@@ -1,5 +1,6 @@
 import React, { ReactElement } from 'react'
 import Tabs,{ TabPane }  from '../../../../components/tabs'
+import { getLocale } from '../../../../utils/getLocale'
 import "./index.scss"
 
 interface Props {
@@ -10,7 +11,7 @@ function Header({}: Props): ReactElement {
   return (
     <div className="tita-tab-header">
       <Tabs size={"big"}>
-        <TabPane tab="我的" tabKey="my"></TabPane>
+        <TabPane tab={getLocale('HP_My')} tabKey="my"></TabPane>
       </Tabs>
     </div>
   )

package/src/pages/home-page-data-list/index.tsx

@@ -28,8 +28,8 @@ const HomePageDataList = () => {
   typeMap.set('all', getLocale('Mod_all'));
   typeMap.set('hadNotAlign', getLocale('OKR_Db_Unaligned'));
   typeMap.set('hadAlign', getLocale('OKR_Db_Aligned'));
-  typeMap.set('hadNotUpdate', '未更新');
-  typeMap.set('hadUpdate', '已更新');
+  typeMap.set('hadNotUpdate', getLocale('HP_Notupdated'));
+  typeMap.set('hadUpdate', getLocale('HP_Updated'));
   typeMap.set('normalOkr', getLocale('OKR_MyO_Pop_Upd_Notrack'));
   typeMap.set('riskOkr', getLocale('OKR_MyO_Pop_Upd_Atrisk'));
   typeMap.set('dalyOkr', getLocale('OKR_MyO_Pop_Upd_Postoned'));

package/src/pages/personal-info/components/base-info/index.scss

@@ -5,7 +5,6 @@
   padding: 20px 32px;
   font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica,
     sans-serif, PingFang SC, Microsoft YaHei;
-  height: 100%;
   &__header {
     display: flex;
     align-items: center;
@@ -31,8 +30,38 @@
         top: 3px;
       }
     }
+    &-btn {
+      width: 64px;
+      height: 28px;
+      box-sizing: border-box;
+      padding: 3px 18px;
+      background: rgba(40, 121, 255, 0.2);
+      border-radius: 14px;
+      font-size: 14px;
+      color: #2879FF;
+      line-height: 22px;
+      cursor: pointer;
+      &:hover {
+        color: #fff;
+        background-color: #2879ff;
+      }
+    }
   }
   &__form {
     width: 342px;
   }
+  .form-field-input__border {
+    padding: 0;
+    border: none;
+    background-color: #fff;
+  }
+  .form-field-input__label-text {
+    font-weight: 600;
+  }
+  .form-field-input__input {
+    background-color: #fff;
+  }
+  .form-field-input__border--disabled input:disabled {
+    background-color: #fff;
+  }
 }