@titaui/pc 1.7.99 → 1.8.0

package/src/components/update-modal/index.tsx

@@ -1,7 +1,6 @@
 import React, { ReactElement, useState, useEffect, useCallback } from "react";
 import { Modal } from "tita-ui";
 import { getBSGlobal } from "../period-selector/helper";
-import { getLocale } from "../../utils/getLocale";
 import "./index.scss";
 import { cancelGuide } from "./request-api";
 
@@ -47,7 +46,7 @@ function UpdateModal({ updates = [], detailLink }: Props): ReactElement {
           target="_blank"
           className={preCls + "__detail-btn"}
         >
-          {getLocale('Per_Help_Button_Learnmore')}
+          了解更多
         </a>
       </div>
     </Modal>

package/src/components/upload/components/uploadedPreview.tsx

@@ -1,7 +1,6 @@
 import React, { PureComponent, Fragment } from 'react'
 import { Tooltip } from 'tita-ui';
 import { UploadResultObj } from '../type'
-import { getLocale } from '../../../utils/getLocale';
 import {
   PreviewContent,
   PreviewImageWrapper,
@@ -60,7 +59,7 @@ export default class UploadedPreview extends PureComponent<Props> {
       if (smallImageUrl && deleteable) { // 是图片且能删除
         return (
           [
-            <Tooltip content={getLocale('Mod_Preview')} container={document.body}>
+            <Tooltip content='预览' container={document.body}>
               <span className='upload-file-action-wrapper'>
                 <span className='tu-icon-yulan action-icon'
                   onMouseDown={() => onSubmit(index, 'preview')}>
@@ -68,7 +67,7 @@ export default class UploadedPreview extends PureComponent<Props> {
               </span>
             </Tooltip>
             ,
-            <Tooltip content={getLocale('Mod_Delete')} container={document.body}>
+            <Tooltip content='删除' container={document.body}>
               <span className='upload-file-action-wrapper'>
                 <span className='tu-icon-canceled action-icon delete'
                   onMouseDown={() => onSubmit(index, 'delete')}>
@@ -79,7 +78,7 @@ export default class UploadedPreview extends PureComponent<Props> {
         )
       } else if (!smallImageUrl && deleteable) { // 不是图片但能删除
         return (
-          <Tooltip content={getLocale('Mod_Delete')} container={document.body}>
+          <Tooltip content='删除' container={document.body}>
             <span className='upload-file-action-wrapper'>
               <span className='tu-icon-canceled action-icon delete'
                 onMouseDown={() => onSubmit(index, 'delete')}>
@@ -89,7 +88,7 @@ export default class UploadedPreview extends PureComponent<Props> {
         )
       } else if (smallImageUrl && !deleteable) { // 是图片不能删除
         return (
-          <Tooltip content={getLocale('Mod_Preview')} container={document.body}>
+          <Tooltip content='预览' container={document.body}>
             <span className='upload-file-action-wrapper'>
               <span className='tu-icon-magnifier-circle action-icon'
                 onMouseDown={() => onSubmit(index, 'preview')}>
@@ -102,7 +101,7 @@ export default class UploadedPreview extends PureComponent<Props> {
       }
     } else if (uploadStatus === 5) {
       return (
-        <Tooltip content={getLocale('Mod_Delete')} container={document.body}>
+        <Tooltip content='删除' container={document.body}>
           <span className='upload-file-action-wrapper'>
             <span className='tu-icon-canceled action-icon delete'
               onMouseDown={() => onSubmit(index, 'delete')}>
@@ -120,7 +119,7 @@ export default class UploadedPreview extends PureComponent<Props> {
               </span>
             </span>
           </Tooltip>
-          <Tooltip content={getLocale('Mod_Delete')} container={document.body}>
+          <Tooltip content='删除' container={document.body}>
             <span className='upload-file-action-wrapper'>
               <span className='tu-icon-canceled action-icon delete'
                 onMouseDown={() => onSubmit(index, 'delete')}>

package/src/components/upload/index.tsx

@@ -8,8 +8,7 @@ import UploadedPreview from './components/uploadedPreview';
 import { UploadResultObj, UploadFilesObj, _dealAttachmentType } from './type';
 import { UploadFormContainer } from './style';
 import ImgViewer from '../img-viewer';
-import { getPreviewImgs } from './util';
-import { getLocale } from '../../utils/getLocale';
+import { getPreviewImgs, isImg } from './util';
 
 interface Props {
   action?: string;
@@ -48,6 +47,8 @@ export default class Upload extends PureComponent<Props, State> {
   }
 
   static defaultProps = {
+    attachmentTipText:
+      '<p>支持拖拽上传</p><p>单次最多支持上传 20 个，总数不可超过 50 个</p><p>每个不超过 50MB</p>',
     fileNumLimit: 20,
     fileSizeLimit: 50,
     filesTotal: 50,
@@ -354,7 +355,7 @@ export default class Upload extends PureComponent<Props, State> {
   };
 
   render() {
-    const { children, className, style, attachmentTipText = getLocale('OKR_MyO_KRP_Draganddropu') } = this.props;
+    const { children, className, style, attachmentTipText } = this.props;
     const { uploadSuccessFiles } = this.state;
     return (
       <>

package/src/components/upload-photo-modal/constant.ts

@@ -0,0 +1,71 @@
+import { saveUserInfo, saveTenantLogo } from "./request-api";
+import Toast from '../../components/toast';
+
+export const List = [
+	{
+		id: 'person',
+		accept: '.jpg,.jpeg,.gif,.png',
+		autoCropArea: 0.5,
+		initialAspectRatio: 1,
+		tips: '仅支持 jpg、jpeg、gif、png 格式 建议图片最小尺寸 150*150px',
+		previewTitle: '预览',
+    handleSaveInfo: (data, onCancel, image) => {
+      if (!image) {
+        return;
+      } else {
+        saveUserInfo({ data: data }).then((resp) => {
+          if (resp.Code === 1) {
+            Toast.Success('保存成功', { canClose: false });
+            onCancel();
+          } else {
+            Toast.Error(resp.Message, { canClose: false });
+          }
+        });
+      }
+    },
+	},
+  {
+		id: 'enterprise',
+		accept: '.jpg,.jpeg,.gif,.png',
+		autoCropArea: 1,
+		initialAspectRatio: 5,
+		tips: '建议 logo 尺寸 400*80 logo 最佳适配颜色为白色 仅支持 jpg、jpeg、gif、png 格式',
+		previewTitle: 'logo 预览',
+    handleSaveInfo: (data, onCancel, image) => {
+      if (!image) {
+        return;
+      } else {
+        saveTenantLogo({ data: data }).then((resp) => {
+          if (resp.Code === 1) {
+            Toast.Success('保存成功', { canClose: false });
+            onCancel();
+          } else {
+            Toast.Error(resp.Message, { canClose: false });
+          }
+        });
+      }
+    },
+	},
+  {
+		id: 'browser',
+		accept: '',
+		autoCropArea: 0.5,
+		initialAspectRatio: 1,
+		tips: '图标尺寸 18*18，超过将被浏览器压缩',
+		previewTitle: '浏览器图标预览',
+    handleSaveInfo: (data, onCancel, image) => {
+      if (!image) {
+        return;
+      } else {
+        saveTenantLogo({ data: data }).then((resp) => {
+          if (resp.Code === 1) {
+            Toast.Success('保存成功', { canClose: false });
+            onCancel();
+          } else {
+            Toast.Error(resp.Message, { canClose: false });
+          }
+        });
+      }
+    },
+	}
+];

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

@@ -0,0 +1,248 @@
+.tita-ui-change-person-photo {
+  &__img {
+    display: flex;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 0 32px;
+    .cropper-wrap-box {
+      border-radius: 12px;
+    }
+    .cropper-canvas {
+      border-radius: 12px;
+    }
+    .cropper-crop {
+      border-radius: 12px;
+    }
+  }
+  &__upload {
+    display: flex;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 0 32px;
+
+    &-preview {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    &-right {
+      position: relative;
+      width: 240px;
+      height: 240px;
+      background: #f0f2f5;
+      border-radius: 12px;
+      box-sizing: border-box;
+      padding: 30px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      &-input {
+        position: absolute;
+        top: 76px;
+        width: 240px;
+        height: 60px;
+        opacity: 0;
+        cursor: pointer;
+      }
+      &-icon {
+        cursor: pointer;
+        margin-top: 46px;
+        font-size: 32px;
+        color: #2879ff;
+      }
+      &-title {
+        margin-top: 4px;
+        font-size: 12px;
+        font-weight: 400;
+        color: #2879ff;
+        line-height: 18px;
+        cursor: pointer;
+      }
+      &-tips {
+        margin-top: 8px;
+        font-size: 12px;
+        font-weight: 400;
+        color: #a4acb9;
+        line-height: 18px;
+        text-align: center;
+      }
+    }
+    &-left {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-left: 36px;
+      width: 136px;
+      height: 100%;
+      &-box1 {
+        width: 136px;
+        height: 136px;
+        background: #f0f2f5;
+        border-radius: 50%;
+      }
+      &-box2 {
+        width: 48px;
+        height: 48px;
+        background: #f0f2f5;
+        border-radius: 50%;
+        margin-top: 14px;
+      }
+      &-box3 {
+        width: 28px;
+        height: 28px;
+        background: #f0f2f5;
+        border-radius: 50%;
+        margin-top: 14px;
+      }
+      &-box {
+        width: 160px;
+        height: 32px;
+        background: #F0F2F5;
+        border-radius: 2px;
+        border: 1px solid #E9ECF0;
+      }
+      &-preview {
+        margin-top: 8px;
+        font-size: 14px;
+        font-weight: 400;
+        color: #3F4755;
+        line-height: 22px;
+      }
+    }
+  }
+  &__preview {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    overflow: hidden;
+    &-box {
+      position: relative;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      &-bgc {
+        width: 160px;
+        height: 32px;
+        background: #2879FF;
+        border-radius: 2px;
+        border: 1px solid #E9ECF0;
+      }
+      &-browser {
+        margin-left: 16px;
+        width: 176px;
+        height: 48px;
+        background: #F0F2F5;
+        border-radius: 2px;
+        border: 1px solid #E9ECF0;
+        background-image: url('./img/browser-preview-bgc.png');
+        background-size: 170px 28px;
+        background-position: center center;
+        background-repeat: no-repeat;
+      }
+    }
+    &-box1 {
+      width: 136px;
+      height: 136px;
+      border-radius: 50%;
+    }
+    &-box2 {
+      margin-top: 14px;
+      width: 48px;
+      height: 48px;
+      border-radius: 50%;
+    }
+    &-box3 {
+      margin-top: 14px;
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+    }
+    &-enterprise {
+      &-img {
+        position: absolute;
+        top: 2px;
+        right: 45px;
+        width: 70px;
+        height: 28px;
+      }
+      &-title {
+        margin-top: 36px;
+        font-size: 14px;
+        font-weight: 400;
+        color: #3F4755;
+        line-height: 22px;
+      }
+    }
+    &-browser {
+      &-img {
+        position: absolute;
+        top: 15px;
+        left: 16px;
+        width: 18px;
+        height: 18px;
+      }
+      &-name {
+        position: absolute;
+        top: 15px;
+        right:10px;
+        font-size: 12px;
+        font-weight: 400;
+        color: #3F4755;
+        line-height: 18px;
+      }
+      &-title {
+        margin-top: 58px;
+        font-size: 14px;
+        font-weight: 400;
+        color: #3F4755;
+        line-height: 22px;
+      }
+    }
+    &-title {
+      margin-top: 8px;
+      font-size: 14px;
+      font-weight: 400;
+      color: #6f7886;
+      line-height: 22px;
+    }
+  }
+  &__title {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 8px 32px 0 32px;
+    &-input {
+      display: none;
+      position: absolute;
+      width: 240px;
+      height: 30px;
+      &--show {
+        display: block;
+        opacity: 0;
+        cursor: pointer;
+      }
+    }
+    &-again {
+      margin-left: 92px;
+      margin-top: 8px;
+      font-size: 14px;
+      font-weight: 400;
+      color: #bfc7d5;
+      line-height: 22px;
+      &--show {
+        cursor: pointer;
+        color: #2879ff;
+      }
+    }
+    &-preview {
+      margin-right: 54px;
+      margin-top: 8px;
+      font-size: 14px;
+      font-weight: 400;
+      color: #6f7886;
+      line-height: 22px;
+    }
+  }
+}

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