@titaui/pc 1.7.99 → 1.8.1

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

@@ -0,0 +1,330 @@
+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, saveUserPhoto } from './request-api';
+import Dialog from '../../components/dialog';
+import { List } from './constant'
+import './index.scss';
+import uuid from 'uuid';
+import { rput, rpost } from "../../utils/request";
+import axios from 'axios';
+import { getBSGlobal, getUserInfo, getTenantInfo } from '../../utils/bs-global';
+const apiServer = getBSGlobal("apiPath")
+const userid = getUserInfo().Id;
+const tenantId = getTenantInfo().Id
+
+
+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 [isEnter, setIsEnter] = useState(false);
+
+	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 dataURLtoFile = (dataurl, filename)  => {
+    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
+        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
+    while(n--){
+        u8arr[n] = bstr.charCodeAt(n);
+    }
+    return new File([u8arr], filename, {type:mime});
+}
+
+
+	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();
+
+    const newFile = dataURLtoFile(base64Url, 'test1234');
+    console.log(newFile);
+    
+
+    let formData = new FormData();
+
+    formData.append('file', newFile);
+
+    console.log(formData);
+    setCropper(formData);
+	};
+
+  const handleSaveInfo =  () => {
+    let timestamp = new Date().getTime(); // 给每个文件加一个时间戳
+    if (!image) {
+      return;
+    } else {
+      if(type === "person")  {
+        saveUserPhoto(cropper).then((resp) => {
+          if (resp.Code === 1) {
+            Toast.Success('保存成功', { canClose: false });
+            onCancel();
+          } else {
+            Toast.Error(resp.Message, { canClose: false });
+          }
+        });
+      } else if(type === "enterprise") {  
+        // console.log(cropper);
+              
+        saveTenantLogo( cropper ).then((resp) => {
+          if (resp.Code === 1) {
+            Toast.Success('保存成功', { canClose: false });
+            onCancel();
+          } else {
+            Toast.Error(resp.Message, { canClose: false });
+          }
+        });
+        // axios({headers: {
+        //   'Content-Type': 'multipart/form-data',
+        // },
+        // method: 'post',
+        // data: cropper,
+        // url: `${apiServer}/api/v1/${tenantId}/${userid}/tenant/update/logo?format=json&timestamp=${timestamp}`})
+        // dealSelectFiles(image)
+      }  else {
+        saveBrowserIcon( cropper ).then((resp) => {
+          if (resp.Code === 1) {
+            Toast.Success('保存成功', { canClose: false });
+            onCancel();
+          } else {
+            Toast.Error(resp.Message, { canClose: false });
+          }
+        });
+      }  
+    }
+  };
+
+  const [uploadSuccessFile, setUploadSuccessFile] = useState();
+
+
+  const dealSelectFiles = (uploadSelectFile) => {
+
+    let uploadStartFiles = []; // 开始上传的文件
+      let formData = new FormData(); // FormData 对象
+      let uploadStartFile;
+      let timestamp = new Date().getTime(); // 给每个文件加一个时间戳
+      // let uploadFileType = uploadSelectFile.name.substring(uploadSelectFile.name.lastIndexOf('.') + 1);
+
+      uploadStartFile = {
+        FileName: uploadSelectFile.name,
+        // FileType: _dealAttachmentType(uploadFileType).FileType,
+        FileSize: uploadSelectFile.size,
+        FileLastModified: uploadSelectFile.lastModified,
+        // IsImage: _dealAttachmentType(uploadFileType).IsImage,
+        percentComplete: 0,
+        uploadStatus: 1, // 开始上传
+        IsSuccess: false,
+        uid: uuid(),
+        _smallImageUrl: '',
+        _bigImageUrl: '',
+        MediaType: '',
+        UserId: 0,
+        MaxDocCount: 0,
+        DfsPath: '',
+        ClientUrl: '',
+        SmallImageUrl: '',
+        BigImageUrl: '',
+        DownloadUrl: '',
+        Msg: '',
+        AllowUploadAttachmentSize: 50,
+        Deleteable: true,
+        requestXHR: new XMLHttpRequest(), //在这创建是为了取消用
+      };
+
+      // uploadStartFiles.push(uploadStartFile);
+      // _dealUploadStart(uploadStartFiles); // 处理开始上传的文件
+      formData.append('file', uploadSelectFile);
+      let url = `${apiServer}/api/v1/${tenantId}/${userid}/tenant/update/logo`;
+      _dealUploadXHRRequest(formData, url, uploadStartFile);
+  };
+
+  /**
+   * 处理文件上传请求
+   *
+   * @formData
+   * @url 上传文件请求地址
+   * @uploadStartFile 上传的文件
+   *
+   * @memberof Upload
+   */
+  const _dealUploadXHRRequest = (formData: any, url: string, uploadStartFile) => {
+    let xhr = uploadStartFile.requestXHR;
+    xhr.onreadystatechange = () => {
+      if (xhr.readyState == 4 && xhr.status == 200) {
+        let result = Object.assign({}, { ...JSON.parse(xhr.responseText).Result[0] }); // 上传成功接口返回数据
+        result.percentComplete = 100;
+        result.IsSuccess = !!result.IsSuccess;
+        result.uploadStatus = result.IsSuccess ? 3 : 4; // 3上传成功；4上传失败
+        // _dealUploadSuccess({ ...uploadStartFile, ...result });
+      }
+    };
+    xhr.open('POST', url, true);
+    xhr.send(formData); //开始上传，发送form数据
+  };
+
+  const handleEnterAgain = () => {
+    setIsEnter(true);
+  }
+
+  const handleLeaveAgain = () => {
+    setIsEnter(false);
+  }
+
+	return (
+		<Dialog
+			visible={visible}
+			ref={modalRef}
+			width={480}
+			mask
+			centered
+			title={'上传头像'}
+			noHeadLine
+			maskClosable={false}
+			onClose={onCancel}
+			onCancel={onCancel}
+			okText="保存"
+			noFooterLine
+			onOk={handleSaveInfo}
+		>
+			<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 })}
+            onMouseEnter={handleEnterAgain}
+            onMouseLeave={handleLeaveAgain}
+					/>
+					<span className={classNames(`${preCls}__title-again`, { [`${preCls}__title-again--show`]: image },{ [`${preCls}__title-again--hover`]: isEnter })}>
+						重新上传
+					</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,33 @@
+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": "multipart/form-data"},
+    "transformRequest": qs.stringify,
+  });
+};
+
+export const saveUserPhoto = (params)  => {
+  return rpost("v1")("manage/user/avatar", params, {
+    "headers": { "Content-Type": "multipart/form-data"},
+  });
+}
+
+export const saveTenantLogo = (params)  => {
+  return rpost("v1")("tenant/update/logo", params, {
+    "headers": { "Content-Type": "multipart/form-data"},
+  });
+}
+
+export const saveBrowserIcon = (params)  => {
+  return rpost("v1")("tenant/update/browerIcon", params, {
+    "headers": { "Content-Type": "multipart/form-data"},
+  });
+}
+

package/src/components/upvote/attitude.ts

@@ -1,36 +1,32 @@
-import { getLocale } from "../../utils/getLocale";
-
-export default () => {
-  return [
-    {
-      type: 2,
-      tittle: getLocale('Pro_page_Int_Butt_Congratulate'),
-      img: require('./img/welldone.svg'),
-    },
-    {
-      type: 4,
-      tittle: getLocale('Pro_page_Int_Butt_Comeon'),
-      img: require('./img/fighting.svg'),
-    },
-    {
-      type: 3,
-      tittle: getLocale('Pro_page_Int_Butt_Finheart'),
-      img: require('./img/bixin.svg'),
-    },
-    {
-      type: 6,
-      tittle: '666',
-      img: require('./img/666.svg'),
-    },
-    {
-      type: 5,
-      tittle: getLocale('Pro_page_Int_Beinsightful'),
-      img: require('./img/nice.svg'),
-    },
-    {
-      type: 1,
-      tittle: getLocale('Mod_Kudos'),
-      img: require('./img/thumb-up.svg'),
-    },
-  ]
-};
+export default [
+  {
+    type: 2,
+    tittle: '祝贺',
+    img: require('./img/welldone.svg'),
+  },
+  {
+    type: 4,
+    tittle: '加油',
+    img: require('./img/fighting.svg'),
+  },
+  {
+    type: 3,
+    tittle: '比心',
+    img: require('./img/bixin.svg'),
+  },
+  {
+    type: 6,
+    tittle: '666',
+    img: require('./img/666.svg'),
+  },
+  {
+    type: 5,
+    tittle: '有见地',
+    img: require('./img/nice.svg'),
+  },
+  {
+    type: 1,
+    tittle: '点赞',
+    img: require('./img/thumb-up.svg'),
+  },
+];

package/src/components/upvote/index.tsx

@@ -7,12 +7,11 @@ import React, {
 } from "react";
 import firework from "../firework";
 import VoteSelector from "./selector";
-import getAttitudeArr from "./attitude";
+import attitudeArr from "./attitude";
 import classnames from "classnames";
 import { praise, cancelPraise } from "./request-apis";
 import UpvoteListModal from "./upvoteListModal";
 import Tooltip from "../tooltip";
-import { getLocale } from "../../utils/getLocale";
 import "./index.scss";
 
 interface Props {
@@ -31,7 +30,7 @@ interface Props {
 }
 
 const getBackgroundImage = (type) => {
-  let selected = getAttitudeArr().find((a) => a.type == type);
+  let selected = attitudeArr.find((a) => a.type == type);
   if (selected) {
     return {
       backgroundImage: `url(${selected.img})`,
@@ -67,7 +66,7 @@ function UpvoteButton({
     firework({
       x: x,
       y: y,
-      images: getAttitudeArr().map((a) => a.img),
+      images: attitudeArr.map((a) => a.img),
     });
   }, []);
   return (
@@ -132,7 +131,7 @@ function UpvoteButton({
           upvoteState.count > 0 && setModalVisible(true);
         }}
       >
-        <Tooltip overlay={getLocale('Tasks_Tab_MyS_Kudosrec')} placement="top">
+        <Tooltip overlay={"点赞记录"} placement="top">
           <span>
             {renderCount
               ? renderCount(upvoteState.type, upvoteState.count)
@@ -153,7 +152,7 @@ export const UpvoteButtonForFeed = (props: Props) => {
     <UpvoteButton
       {...props}
       renderBuntton={(type) => {
-        let text = !type ? getLocale('Mod_Kudos') : getLocale('Mod_Alreadyliked');
+        let text = !type ? "点赞" : "已赞";
         return (
           <div style={{ display: "flex", alignItems: "center" }}>
             <div
@@ -174,7 +173,7 @@ export const UpvoteButtonForFeed = (props: Props) => {
     />
   );
 };
-UpvoteButton.getAttitudes = () => getAttitudeArr().map(att => ({...att}))
+UpvoteButton.getAttitudes = () => attitudeArr.map(att => ({...att}))
 UpvoteButton.ForFeed = UpvoteButtonForFeed;
 
 export default UpvoteButton;

package/src/components/upvote/selector.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, cloneElement, useCallback, useRef } from 'react';
 import Trigger from 'rc-trigger';
 import Queue from 'rc-queue-anim';
-import getAttitudeArr from './attitude';
+import attitudeArr from './attitude';
 
 type alignType = 'right'|'center'|'left';
 interface Props {
@@ -96,7 +96,7 @@ const VoteSelector: React.FC<Props> = ({ getPopupContainer, children, onSelect,a
                 onMouseOut={hide}
                 className='feed-upvote-selector'
               >
-                {getAttitudeArr().map((att) => (
+                {attitudeArr.map((att) => (
                   <div
                     key={att.type}
                     className='feed-upvote-selector__item'

package/src/components/upvote/upvoteListModal.tsx

@@ -2,7 +2,6 @@ import React, { ReactElement, useCallback, useEffect, useRef, useState } from 'r
 import { Avatar, Modal } from 'tita-ui';
 import { getPriseList } from './request-apis';
 import { OpenUserName } from '../../utils/open-data';
-import { getLocale } from '../../utils/getLocale';
 
 interface Props {
   feedId: string;
@@ -75,7 +74,7 @@ function UpvoteListModal({ feedId, visible, onClose }) {
     visible={visible}
     className='pull-screen-ignore document-mouse-event-ignore'
     destroyOnClose
-    title={getLocale('Tasks_Tab_MyS_Kudosrec')}
+    title='点赞记录'
     height={480}
     width={480}
     onCancel={onClose}

package/src/components/user-selector/action-btns/btn-cancel.js

@@ -1,9 +1,8 @@
 import React from 'react';
-import {getLocale} from '../../../utils/getLocale';
 import './index.scss';
 
 export default props => {
   return <span className="persel-btn-cancel" onClick={props.onClick}>
-    <span>{getLocale('Mod_Cancel')}</span>
+    <span>取消</span>
   </span>
 }

package/src/components/user-selector/action-btns/btn-ok.js

@@ -1,9 +1,8 @@
 import React from 'react';
-import {getLocale} from '../../../utils/getLocale';
 import './index.scss';
 
 export default props => {
   return <span className="persel-btn-ok" onClick={props.onClick}>
-    <span>{getLocale('OKR_MyO_Butt_Determine')}</span>
+    <span>确定</span>
   </span>
 }

package/src/components/user-selector/category-selector-panel/index.tsx

@@ -1,12 +1,22 @@
 import React, { useContext, useState } from 'react';
 import Tabs, { TabPane } from '../../tabs';
-import { getPanesConfig } from '../constant';
 import { CommonContext } from '../context';
 import DepartTree from './depart-tree';
 import GroupTree from './group-tree';
 
 import './index.scss';
 
+const panesConfig = {
+  'depart': {
+    'label': '部门',
+    'Component': DepartTree
+  },
+  'group': {
+    'label': '群组',
+    'Component': GroupTree
+  }
+};
+
 interface Props {
   onSelect?: Function;
   selected?: any;
@@ -47,7 +57,7 @@ export default (props: Props) => {
         animated={{ 'inkBar': true, 'tabPane': true }}
       >
         {Object.keys(panes).map(panelKey => {
-          const { label, Component } = getPanesConfig()[panelKey]
+          const { label, Component } = panesConfig[panelKey]
           return <TabPane tab={label} key={panelKey}>
             {<Component
               onSelect={onSelect}
@@ -65,7 +75,7 @@ export default (props: Props) => {
       const panelKeys = Object.keys(panes);
       for (let i=0; i<panelKeys.length; i++) {
         if (panes[panelKeys[i]]) {
-          Component = getPanesConfig()[panelKeys[i]].Component;
+          Component = panesConfig[panelKeys[i]].Component;
           break;
         }
       }

package/src/components/user-selector/empty/group.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { isWechat } from '../../../utils/open-data';
-import {getLocale} from '../../../utils/getLocale';
+
 import './index.scss';
 
 export default () => {
@@ -16,7 +16,7 @@ export default () => {
         <div className="persel-empty">
           <span className="icon"></span>
         </div>
-        <div className='empty-tip'>{getLocale('OKR_MyO_Pop_Teamsettings')}</div>
+        <div className='empty-tip'>您可以根据团队设置群组，设置后可以为团队目标选择群组</div>
         <a href={url} target="_blank" className='add-group'>添加群组</a>
       </div>
     );

package/src/components/user-selector/empty/index.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import {getLocale} from '../../../utils/getLocale'
 import './index.scss';
 
 export default () => {
@@ -8,7 +7,7 @@ export default () => {
 		<div className="persel-empty">
 			<span className="icon"></span>
 		</div>
-		<span className='empty-tip'>{getLocale('OKR_MyO_Thnothinghere')}</span>
+		<span className='empty-tip'>这里什么都没有</span>
 	</div>
 	)
 }

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

@@ -14,7 +14,7 @@ import {
 import SelectorGenerater from './selector-generater';
 import Popup from "../../../popup";
 import { User } from "../../interface";
-import { getLocale } from "../../../../utils/getLocale";
+
 import "../../index.scss";
 import "./index.scss";
 
@@ -91,7 +91,7 @@ export default forwardRef((props: PropsInterface, ref) => {
     sourceFrom,
     departOnly,
     auth = false, // 数据权限
-    placeholder = getLocale('Mod_Pleaseselect'),
+    placeholder = "请选择",
     getDepartRoot,
     destroyPopupOnHide = true,
     forceRender = false,

package/src/components/user-selector/export-modules/multiple-user-selector--bak/index.js

@@ -3,7 +3,6 @@ import { CommonContext } from '../../context';
 import { OpenUserName, OpenDepartmentName, isWechat } from '../../../../utils/open-data';
 import MultiSelector from '../field-tree-selector/multiple-selector';
 import Popup from '../../../popup';
-import {getLocale} from '../../../../utils/getLocale';
 import classNames from 'classnames';
 
 import '../../index.scss';
@@ -20,7 +19,7 @@ export default forwardRef((props, ref) => {
     selectNodes = {},
     sourceFrom,
     auth = false, // 数据权限
-    placeholder = getLocale('Mod_Pleaseselect'),
+    placeholder = '请选择',
     // className,
     destroyPopupOnHide = true,
     forceRender = false,

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;
     })