@titaui/pc 1.7.101 → 1.8.3

package/src/components/nav-top/components/user-message/components/empty/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import empty from '../../images/empty-img.svg';
 import ConditionRender from '../../../../../condition-render';
+import { getLocale } from '../../../../../../utils/getLocale';
 import './index.scss';
 
 const preCls = 'titaui-user-message-msg-empty';
@@ -12,10 +13,10 @@ const Empty = (props) => {
 	return (
 		<div className={classNames(`${preCls}__empty`)}>
 			<img src={empty} />
-			<div className={classNames(`${preCls}__empty-text`)}>暂时没有需要处理的消息哦～</div>
+			<div className={classNames(`${preCls}__empty-text`)}>{getLocale('Menu_Title_NoNews')}</div>
 			<ConditionRender condition={tabPath !== null}>
 				<a target="_blank" href={tabPath} className={classNames(`${preCls}__empty-all`)}>
-					查看全部消息
+					{getLocale('Menu_Title_ViewNews')}
 				</a>
 			</ConditionRender>
 		</div>

package/src/components/nav-top/components/user-message/msg/index.tsx

@@ -73,7 +73,7 @@ const UserMessage = (props) => {
             tab={
               <TabTitle
                 data={(getData("messageIndicator"))-(getData("mLeaveandComment"))}
-                title="通知"
+                title={getLocale('Menu_Title_Notice')}
                 tab={"informs"}
               />
             }

package/src/components/table/index.js

@@ -183,6 +183,7 @@ export default props => {
           }
         </div>
         {!!total&&<Pagination
+          className={classNames({[`${preCls}__pagination-only-one`]:pageSize>total})}
           pageSize={pageSize}
           total={total}
           current={pageNum}

package/src/components/table/index.scss

@@ -104,4 +104,9 @@
       font-size: 12px;
     }
   }
+  &__pagination-only-one{
+    .titaui-pagination__select-selector{
+      margin-right: 26px;
+    }
+  }
 }

package/src/components/upload/index.tsx

@@ -170,8 +170,8 @@ export default class Upload extends PureComponent<Props, State> {
         return;
       };
       uploadStartFiles.push(uploadStartFile);
-      this._dealUploadStart(uploadStartFiles); // 处理开始上传的文件
-      formData.append('file', element);
+      this._dealUploadStart(uploadStartFiles); // 处理开始上传的文件      
+      formData.append('file', element);      
       let url = action || getApiUrl(`Upload/PostFiles?format=json&timestamp=${timestamp}`);
       this._dealUploadXHRRequest(formData, url, uploadStartFile);
     });
@@ -196,7 +196,7 @@ export default class Upload extends PureComponent<Props, State> {
     let xhr = uploadStartFile.requestXHR;
     xhr.onreadystatechange = () => {
       if (xhr.readyState == 4 && xhr.status == 200) {
-        let result = Object.assign({}, { ...JSON.parse(xhr.responseText).Result[0] }); // 上传成功接口返回数据
+        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上传失败
@@ -226,7 +226,7 @@ export default class Upload extends PureComponent<Props, State> {
         }
       });
       this.setState({ uploadSuccessFiles });
-    };
+    };    
     xhr.open('POST', url, true);
     xhr.send(formData); //开始上传，发送form数据
   };

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

@@ -0,0 +1,27 @@
+
+export const List = [
+	{
+		id: 'person',
+		accept: '.jpg,.jpeg,.gif,.png',
+		autoCropArea: 0.5,
+		initialAspectRatio: 1,
+		tips: '仅支持 jpg、jpeg、gif、png 格式 建议图片最小尺寸 150*150px',
+		previewTitle: '预览',
+	},
+  {
+		id: 'enterprise',
+		accept: '.jpg,.jpeg,.gif,.png',
+		autoCropArea: 1,
+		initialAspectRatio: 5,
+		tips: '建议 logo 尺寸 400*80 logo 最佳适配颜色为白色 仅支持 jpg、jpeg、gif、png 格式',
+		previewTitle: 'logo 预览',
+	},
+  {
+		id: 'browser',
+		accept: '',
+		autoCropArea: 0.5,
+		initialAspectRatio: 1,
+		tips: '图标尺寸 18*18，超过将被浏览器压缩',
+		previewTitle: '浏览器图标预览',
+	}
+];

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

@@ -0,0 +1,258 @@
+.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: 1px;
+        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;
+        width: 56px;
+        height: 22px;
+        position: absolute;
+        left: 124px;
+      }
+    }
+    &-again {
+      margin-left: 92px;
+      margin-top: 8px;
+      font-size: 14px;
+      font-weight: 400;
+      color: #bfc7d5;
+      line-height: 22px;
+      &--show {
+        cursor: pointer;
+        color: #2879ff;
+        &:hover {
+          color: #DFE3EA;
+        }
+      }
+      &--hover {
+        color: #DFE3EA;
+      }
+    }
+    &-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,331 @@
+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 [fileName, setFileName] = useState('')
+
+	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;
+		}
+    setFileName(files[0].name)
+		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, fileName);
+    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;