@titaui/pc 1.8.2 → 1.8.6

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

@@ -160,7 +160,7 @@
     &-enterprise {
       &-img {
         position: absolute;
-        top: 2px;
+        top: 1px;
         right: 45px;
         width: 70px;
         height: 28px;
@@ -222,6 +222,10 @@
         display: block;
         opacity: 0;
         cursor: pointer;
+        width: 56px;
+        height: 22px;
+        position: absolute;
+        left: 124px;
       }
     }
     &-again {
@@ -234,6 +238,12 @@
       &--show {
         cursor: pointer;
         color: #2879ff;
+        &:hover {
+          color: #DFE3EA;
+        }
+      }
+      &--hover {
+        color: #DFE3EA;
       }
     }
     &-preview {

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

@@ -4,10 +4,16 @@ 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 { saveTenantLogo, saveBrowserIcon, saveUserPhoto } from './request-api';
 import Dialog from '../../components/dialog';
 import { List } from './constant'
 import './index.scss';
+import uuid from 'uuid';
+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';
 
@@ -22,99 +28,101 @@ const ChangePhoto = (props: Props) => {
 
 	const modalRef = useRef<any>();
 
-	const [ image, setImage ] = useState();
+	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) => {
+	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();
+		}    
+    setFileName(files[0].name)
+		const reader = new FileReader();    
 		reader.onload = () => {
-			setImage(reader.result as any);      
+			setImage(reader.result as any);            
 		};
 		reader.readAsDataURL(files[0]);
 	};
 
-	const onCrop = () => {
+
+  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());
+		const cropper: any = imageElement.cropper;    
 
+		setCropData(cropper.getCroppedCanvas().toDataURL());
+    
     let base64Url = cropper.getCroppedCanvas().toDataURL();
-    //将base64转换成blob
-    let FileOrBlob = dataURLtoBlob(base64Url);
-    //添加到formdata
+        
+    const newFile = dataURLtoFile(base64Url, fileName);    
+
     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' });
-  }
+    formData.append('file', newFile);
 
-	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 });
-				}
-			});
-		}
+    setCropper(formData);
 	};
+
   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 });
-        }
-      });
+    } 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") {  
+        saveTenantLogo( cropper ).then((resp) => {
+          if (resp.Code === 1) {
+            Toast.Success('保存成功', { canClose: false });
+            onCancel();
+          } else {
+            Toast.Error(resp.Message, { canClose: false });
+          }
+        });
+      }  else {
+        saveBrowserIcon( cropper ).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 });
-        }
-      });
-    }
-  };
+  const handleEnterAgain = () => {
+    setIsEnter(true);
+  }
+
+  const handleLeaveAgain = () => {
+    setIsEnter(false);
+  }
 
 	return (
 		<Dialog
@@ -130,7 +138,7 @@ const ChangePhoto = (props: Props) => {
 			onCancel={onCancel}
 			okText="保存"
 			noFooterLine
-			onOk={handleBrowserIconSaveInfo}
+			onOk={handleSaveInfo}
 		>
 			<div className={preCls}>
 				{!image ? 
@@ -185,15 +193,12 @@ const ChangePhoto = (props: Props) => {
 							responsive={true}
 							autoCropArea={item?.autoCropArea}
 							checkOrientation={true}
-							minCropBoxHeight={10}
-							minCropBoxWidth={10}
+							minCropBoxHeight={item?.minCropBoxHeight}
+							minCropBoxWidth={item?.minCropBoxWidth}
 							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"})}>
@@ -220,8 +225,10 @@ const ChangePhoto = (props: Props) => {
 						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 })}>
+					<span className={classNames(`${preCls}__title-again`, { [`${preCls}__title-again--show`]: image },{ [`${preCls}__title-again--hover`]: isEnter })}>
 						重新上传
 					</span>
 					<ConditionRender condition={type === 'person'}>

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

@@ -8,16 +8,26 @@ export const getUserInfoFun = () => {
 
 export const saveUserInfo = ({ data }) => {
   return rput("v1")("manage/user/update", data, {
-    "headers": { "Content-Type": "application/x-www-form-urlencoded" },
+    "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);
+  return rpost("v1")("tenant/update/logo", params, {
+    "headers": { "Content-Type": "multipart/form-data"},
+  });
 }
 
 export const saveBrowserIcon = (params)  => {
-  return rpost("v1")("tenant/update/browerIcon", params);
+  return rpost("v1")("tenant/update/browerIcon", params, {
+    "headers": { "Content-Type": "multipart/form-data"},
+  });
 }
 

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

@@ -0,0 +1,20 @@
+.titaui-edit-personal-info {
+  &__form {
+    .titaui-form {
+      box-sizing: border-box;
+      padding: 0 32px;
+    }
+    .form-field-input__label {
+      width: 62px;
+    }
+    .form-field-input__label-text {
+      font-size: 14px;
+      font-weight: 400;
+      color: #89919F;
+      line-height: 22px;
+    }
+    .rc-tooltip {
+      left:110.5px !important;
+    }
+  }
+}

package/src/pages/personal-info/components/edit-info/index.tsx

@@ -1,13 +1,21 @@
 import React, { useState, useRef, useEffect } from 'react';
+import Form from '../../../../components/form';
 import { getUserInfoFun, saveUserInfo } from '../../request-api';
 import Toast from '../../../../components/toast';
-import Input from './input';
+// import Input from './input';
 import Dialog from '../../../../components/dialog';
+import './index.scss';
+
+const { Fields } = Form;
+
+const prefix = "titaui-edit-personal-info"
 
 const EditBaseInfo = (props) => {
 	const { visible, onCancel } = props;
 
 	const modalRef = useRef<any>();
+  const formContainerRef = useRef<any>();
+	const formRef = useRef<any>();
 
 	const [ isDisable, setIsDisable ] = useState(false);
 	const [ isEdit, setIsEdit ] = useState(false);
@@ -92,12 +100,15 @@ const EditBaseInfo = (props) => {
 			onOk={handleSaveUserInfo}
 			disabled={isDisable}
 		>
-			<Input
+      <div className={`${prefix}__form`} ref={formContainerRef}>
+				<Form ref={formRef} getFormContainer={() => formContainerRef.current}>
+			<Fields.Input
 				name="name"
 				label={'姓名'}
 				placeholder={'请输入姓名'}
 				type="text"
 				require
+        layout="row"
 				verifies={[
 					{
 						tip: '姓名不能为空',
@@ -111,12 +122,13 @@ const EditBaseInfo = (props) => {
 				value={userInfo.name}
 				onChange={handleNameChange}
 			/>
-			<Input
+			<Fields.Input
 				name="phone"
 				type="text"
 				label={'手机号码'}
 				placeholder={'请输入手机号'}
 				require
+        layout="row"
 				value={userInfo.mobile}
 				verifies={[
 					{
@@ -130,12 +142,12 @@ const EditBaseInfo = (props) => {
 				]}
 				onChange={handlePhoneChange}
 			/>
-			<Input
+			<Fields.Input
 				name="email"
 				type="text"
 				label={'邮箱'}
 				value={userInfo.email}
-				require
+        layout="row"
 				placeholder={'请输入邮箱'}
 				verifies={[
 					{
@@ -145,6 +157,8 @@ const EditBaseInfo = (props) => {
 				]}
 				onChange={handleEmailChange}
 			/>
+      </Form>
+			</div>
 		</Dialog>
 	);
 };

package/yarn-error.log

@@ -0,0 +1,103 @@
+Arguments: 
+  /usr/local/bin/node /usr/local/bin/yarn
+
+PATH: 
+  /opt/homebrew/bin:/opt/homebrew/sbin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/Apple/usr/bin:/opt/homebrew/bin:/opt/homebrew/sbin
+
+Yarn version: 
+  1.22.10
+
+Node version: 
+  12.22.1
+
+Platform: 
+  darwin x64
+
+Trace: 
+  SyntaxError: /Users/yang/tita/titaui-pc/package.json: Unexpected token < in JSON at position 26
+      at JSON.parse (<anonymous>)
+      at /usr/local/lib/node_modules/yarn/lib/cli.js:1625:59
+      at Generator.next (<anonymous>)
+      at step (/usr/local/lib/node_modules/yarn/lib/cli.js:310:30)
+      at /usr/local/lib/node_modules/yarn/lib/cli.js:321:13
+
+npm manifest: 
+  {
+    "name": "@titaui/pc",
+  <<<<<<< HEAD
+    "version": "1.2.22",
+  =======
+    "version": "1.2.13",
+  >>>>>>> master
+    "nameCN": "",
+    "description": "",
+    "main": "src/index.js",
+    "scripts": {
+      "storybook": "start-storybook -p 6006 --no-dll",
+      "start": "dev_server=on webpack-dev-server --disableHostCheck=true --progress --colors  --config webpack-stories.config.js",
+      "build-storybook": "build-storybook --docs --no-dll",
+      "build:es": "babel src -d es --ignore **/__tests__",
+      "build:lib": "cross-env OUTPUT_MODULE=commonjs babel src -d lib --ignore **/__tests__",
+      "build:umd": "webpack --config ./.scripts/webpack.umd.js",
+      "build": "npm run build:lib && npm run build:es && npm run build:umd"
+    },
+    "author": "",
+    "license": "ISC",
+    "devDependencies": {
+      "del": "^6.0.0",
+      "gulp": "^3.x",
+      "gulp-autoprefixer": "^7.0.1",
+      "gulp-babel": "^8.0.0",
+      "gulp-concat": "^2.6.1",
+      "gulp-cssbeautify": "^3.0.0",
+      "gulp-cssnano": "^2.1.3",
+      "gulp-filesize": "0.0.6",
+      "gulp-postcss": "^9.0.0",
+      "gulp-rename": "^2.0.0",
+      "gulp-replace": "^1.0.0",
+      "gulp-sass": "^4.1.0",
+      "gulp-sourcemaps": "^2.6.5",
+      "sass-resources-loader": "^2.2.1"
+    },
+    "dependencies": {
+      "@titaui/dagre": "^0.8.8-pre",
+      "@titaui/rc-tree2": "^4.1.15",
+      "@titaui/rc-trigger": "^5.2.5",
+      "@titaui/react-flow-renderer": "9.5.4",
+      "@titaui/toast": "^1.0.0",
+      "axios": "^0.21.1",
+      "classnames": "^2.2.6",
+      "clone-deep": "^4.0.1",
+      "d3-cloud": "^1.2.5",
+      "dayjs": "^1.10.4",
+      "html2canvas": "^1.0.0-rc.7",
+      "moment": "^2.29.1",
+      "qs": "^6.10.1",
+      "rc-checkbox": "^2.3.2",
+      "rc-dialog": "8.5.2",
+      "rc-drawer": "^4.3.1",
+      "rc-input-number": "^5.0.0",
+      "rc-pagination": "^3.1.6",
+      "rc-queue-anim": "1.4.1",
+      "rc-select": "^12.1.7",
+      "rc-switch": "^3.2.2",
+      "rc-table": "^7.13.2",
+      "rc-tabs": "^11.7.3",
+      "rc-tooltip": "^5.1.1",
+      "rc-tree": "^4.1.5",
+      "rc-trigger": "^5.2.3",
+      "rc-upload": "^4.2.0-alpha.0",
+      "rc-util": "^5.13.1",
+      "react-collapse": "^5.1.0",
+      "react-perfect-scrollbar": "^1.5.2",
+      "url-parse": "^1.5.1",
+      "uuid": "^3.1.0",
+      "wordcloud": "^1.2.2"
+    }
+  }
+
+yarn manifest: 
+  No manifest
+
+Lockfile: 
+  No lockfile