@titaui/pc 1.9.19 → 1.9.23

package/src/components/tooltip/tooltip-text/index.tsx

@@ -11,18 +11,18 @@ interface ITooltipTextProps {
   minusWidth?: number;
   overlayClassName?: string;
   mouseEnterDelay?: number;
-  
 }
 
 const TooltipText: FC<ITooltipTextProps> = ({
   text,
-  overlayText="",
+  overlayText = "",
   maxWidth = 0,
   exClass,
   isPercent = false,
   minusWidth = 0,
   overlayClassName = "",
   mouseEnterDelay = 0,
+  children,
 }) => {
   const [hasTooltip, setHasTooltip] = useState(false);
   const domRef = useRef<any>();
@@ -59,7 +59,7 @@ const TooltipText: FC<ITooltipTextProps> = ({
       {hasTooltip && (
         <Tooltip
           overlayClassName={overlayClassName}
-          overlay={!!overlayText?overlayText:text}
+          overlay={overlayText ? overlayText : text}
           placement="top"
           mouseEnterDelay={mouseEnterDelay}
         >
@@ -69,18 +69,20 @@ const TooltipText: FC<ITooltipTextProps> = ({
               maxWidth: isPercent ? `calc(100% - ${minusWidth}px)` : maxWidth,
             }}
           >
-            {text}
+            {children ? children : text}
           </span>
         </Tooltip>
       )}
       {!hasTooltip && (
-        <span className={`tooltip-text-wrapper ${exClass}`}>{text}</span>
+        <span className={`tooltip-text-wrapper ${exClass}`}>
+          {children ? children : text}
+        </span>
       )}
       <span
         className={`tooltip-text-wrapper tooltip-text-wrapper--hidden ${exClass}`}
         ref={domRef}
       >
-        {text}
+        {children ? children : text}
       </span>
       {isPercent && (
         <span

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

@@ -1,15 +1,17 @@
-import React, { useState, forwardRef, useImperativeHandle } from 'react';
-import classNames from 'classnames';
+import React, { useState, forwardRef, useImperativeHandle, useEffect } from 'react';
 import ChooseTree from '../../select-tree/choose-tree';
 import Popup from '../../../popup';
 import { TreeNodeContext } from '../../context';
 import { CommonContext } from '../../context';
-import { getDuties } from '../../request-apis';
+import Loading from '../../loading';
+import { SinglePersonalLayout } from '../../layout';
+import SelectorInput from '../../../selector-input';
+import { getDuties,searchDuties } from '../../request-apis';
 
 import '../../index.scss';
 import './index.scss';
 
-const preCls = 'perspm-duties-selector';
+// const preCls = 'perspm-duties-selector';
 
 interface Props {
   onSelect?: Function;
@@ -37,6 +39,39 @@ export default forwardRef((props: Props, ref) => {
   } = props;
 
   const [visible, setVisible] = useState(false);
+  const [searchKey, setSearchKey] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [dutiesData,setDutiesData] = useState([])
+
+    // 获取数据的API
+  const searchTreeData = () => {
+
+    return searchDuties({
+      searchKey,
+    }).then(res => {
+      if(!!res.Code){
+        let data = res.Data.map(it => {
+          return {
+            'key': `${it.code}`,
+            'id': `${it.id}`,
+            'pid': `-1`,
+            'nodeType': 'duties',
+            'isLeaf': true,
+            'data': { ...it }
+          };
+        })
+        setDutiesData(data)
+      }
+    }).catch(err=>{
+      console.log(err)
+    });
+  }
+
+  useEffect(() => {
+    if (!searchKey) return;
+    setLoading(true);
+    searchTreeData().then(() => setLoading(false));
+  }, [searchKey]);
 
   const onGetTreeData = () => {
     return getDuties().then(duties => {
@@ -63,20 +98,45 @@ export default forwardRef((props: Props, ref) => {
     setVisible(false);
   }
 
-  const popup = <div className={classNames(preCls)}>
-    <div className={classNames(`${preCls}__inner`)}>
-      <TreeNodeContext.Provider value={{}}>
-        <ChooseTree
-          onSelect={onSelectHandler}
-          asyncData={true}
-          multiple={false}
-          getTreeData={onGetTreeData}
-          itemHeight={itemHeight}
-          height={height}
-          virtual={true}
-        />
-      </TreeNodeContext.Provider>
-    </div>
+  const onSearchChangeHandler = val => {
+    setSearchKey(val);
+  };
+
+
+  const popup = <div>
+      <SinglePersonalLayout>
+        <SelectorInput onChange={onSearchChangeHandler} />
+        {!!searchKey ? (
+          loading ? (
+            <Loading />
+          ) : (
+          <div>
+            <TreeNodeContext.Provider value={{}}>
+            <ChooseTree
+              multiple={false}
+              treeData={dutiesData}
+              asyncData={false}
+              onSelect={onSelectHandler}
+              virtual={true}
+              height={height-44}
+            />
+          </TreeNodeContext.Provider>
+          </div>
+          )
+        ) : (
+          <TreeNodeContext.Provider value={{}}>
+            <ChooseTree
+              onSelect={onSelectHandler}
+              asyncData={true}
+              multiple={false}
+              getTreeData={onGetTreeData}
+              itemHeight={itemHeight}
+              height={height-44}
+              virtual={true}
+            />
+          </TreeNodeContext.Provider>
+        )}
+      </SinglePersonalLayout>
   </div>;
 
   return <CommonContext.Provider value={{}}>

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

@@ -124,4 +124,11 @@ export const getDuties = () => {
     .then(res => {
       return res.data;
     })
+}
+
+export const searchDuties = ({searchKey}) => {
+  return axios.get(`${requestDomain()}/api/v1/${tenantId}/${userId}/position/search?status=1&pageNum=1&pageSize=100&filter=${searchKey}`)
+    .then(res => {
+      return res.data;
+    })
 }

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

@@ -1,58 +1,79 @@
 import React, { FC, useState, useEffect } from "react";
-import { getUserInfoFun } from '../../request-api';
+import { getUserInfoFun } from "../../request-api";
 import { RectBtn } from "../../../../components/button";
-import EditModle from '../edit-base-info';
-import {OpenUserName} from '../../../../utils/open-data'
+import EditModle from "../edit-base-info";
+import { OpenUserName } from "../../../../utils/open-data";
+import { getLocale } from "../../../../utils/getLocale";
 import "./index.scss";
 
 const prefix = "titaui-personal-info-base-info";
 
 const BaseInfo: FC = () => {
-  const [userInfo, setUserInfo] = useState({ name: "", email: "", mobile: "", userId: '' });
+  const [userInfo, setUserInfo] = useState({
+    name: "",
+    email: "",
+    mobile: "",
+    userId: "",
+  });
   const [visible, setVisible] = useState(false);
 
   const handleClickEdit = () => {
     setVisible(true);
-  }
+  };
 
   const handleCancelEdit = () => {
     setVisible(false);
-  }
+  };
 
   const handleSuccessEditBaseInfo = (userInfo) => {
-    setUserInfo({...userInfo});
-  }
+    setUserInfo({ ...userInfo });
+  };
 
   useEffect(() => {
-		getUserInfoFun().then((resp) => {
-			if (resp.Code === 1 && resp.Data) {        
-				setUserInfo({ ...resp.Data, position: resp.Data.positionCode });
-			}
-		});
-	}, []);
+    getUserInfoFun().then((resp) => {
+      if (resp.Code === 1 && resp.Data) {
+        setUserInfo({ ...resp.Data, position: resp.Data.positionCode });
+      }
+    });
+  }, []);
 
   return (
     <div className={prefix}>
       <div className={`${prefix}__header`}>
-        <span className={`${prefix}__header-title`}>{getLocale('Per_Ass_New_title_text_BasicIn')}</span>
+        <span className={`${prefix}__header-title`}>
+          {getLocale("Per_Ass_New_title_text_BasicIn")}
+        </span>
         <RectBtn
           type={"primary"}
-          text={getLocale('Mod_Editor')}
+          text={getLocale("Mod_Editor")}
           onClick={handleClickEdit}
         />
-        <EditModle visible={visible} onCancel={handleCancelEdit} handleSuccessEditBaseInfo={handleSuccessEditBaseInfo} info={userInfo}/>
+        <EditModle
+          visible={visible}
+          onCancel={handleCancelEdit}
+          handleSuccessEditBaseInfo={handleSuccessEditBaseInfo}
+          info={userInfo}
+        />
       </div>
       <div className={`${prefix}__form`}>
-        <div className={`${prefix}__form-title`}>姓名</div>
-        <span className={`${prefix}__form-value`}><OpenUserName id={userInfo.userId} name={userInfo.name} /></span>
+        <div className={`${prefix}__form-title`}>
+          {getLocale("Mod_UserName")}
+        </div>
+        <span className={`${prefix}__form-value`}>
+          <OpenUserName id={userInfo.userId} name={userInfo.name} />
+        </span>
       </div>
       <div className={`${prefix}__form`}>
         <div className={`${prefix}__form-title`}>手机号码</div>
-        <span className={`${prefix}__form-value`}>{userInfo.mobile ? userInfo.mobile : "未设置"}</span>
+        <span className={`${prefix}__form-value`}>
+          {userInfo.mobile ? userInfo.mobile : getLocale('Data_Notset')}
+        </span>
       </div>
       <div className={`${prefix}__form`}>
         <div className={`${prefix}__form-title`}>电子邮箱</div>
-        <span className={`${prefix}__form-value`}>{userInfo.email ? userInfo.email : "未设置"}</span>
+        <span className={`${prefix}__form-value`}>
+          {userInfo.email ? userInfo.email : getLocale('Data_Notset')}
+        </span>
       </div>
     </div>
   );

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

@@ -1,172 +1,182 @@
-import React, { useState, useRef, useEffect } from 'react';
-import Form from '../../../../components/form';
-import { getUserInfoFun, saveUserInfo } from '../../request-api';
-import Toast from '../../../../components/toast';
-import Dialog from '../../../../components/dialog';
-import './index.scss';
+import React, { useState, useRef, useEffect } from "react";
+import Form from "../../../../components/form";
+import { getUserInfoFun, saveUserInfo } from "../../request-api";
+import Toast from "../../../../components/toast";
+import Dialog from "../../../../components/dialog";
+import { getLocale } from "../../../../utils/getLocale";
+import { i18nLimitCharacters } from "../../../../utils/i18n-front-translate"
+import "./index.scss";
 
 const { Fields } = Form;
 
-const prefix = "titaui-edit-personal-info"
+const prefix = "titaui-edit-personal-info";
 
 const EditBaseInfo = (props) => {
-	const { visible, onCancel, handleSuccessEditBaseInfo, info } = props;
+  const { visible, onCancel, handleSuccessEditBaseInfo, info } = props;
 
-	const modalRef = useRef<any>();
+  const modalRef = useRef<any>();
   const formContainerRef = useRef<any>();
-	const formRef = useRef<any>();
+  const formRef = useRef<any>();
 
-	const [ isDisable, setIsDisable ] = useState(false);
-	const [ isEdit, setIsEdit ] = useState(false);
-	const [ userInfo, setUserInfo ] = useState({ name: '', email: '', mobile: '' });
+  const [isDisable, setIsDisable] = useState(false);
+  const [isEdit, setIsEdit] = useState(false);
+  const [userInfo, setUserInfo] = useState({ name: "", email: "", mobile: "" });
 
-	const handleNameChange = (value) => {
-		setUserInfo({
-			...userInfo,
-			name: value || ''
-		});
-    if(value.length > 50 || value.length === 0) {
+  const handleNameChange = (value) => {
+    setUserInfo({
+      ...userInfo,
+      name: value || "",
+    });
+    if (value.length > 50 || value.length === 0) {
       setIsDisable(true);
     } else {
       setIsDisable(false);
     }
-		setIsEdit(true);
-	};
+    setIsEdit(true);
+  };
 
-	const handlePhoneChange = (value) => {
-		setUserInfo({
-			...userInfo,
-			mobile: value || ''
-		});
-    if(value.length !== 11 ) {
+  const handlePhoneChange = (value) => {
+    setUserInfo({
+      ...userInfo,
+      mobile: value || "",
+    });
+    if (value.length !== 11) {
       setIsDisable(true);
-    }else {
+    } else {
       setIsDisable(false);
     }
-		setIsEdit(true);
-	};
+    setIsEdit(true);
+  };
 
-	const handleEmailChange = (value) => {
-		setUserInfo({
-			...userInfo,
-			email: value || ''
-		});
-		setIsEdit(true);
-	};
+  const handleEmailChange = (value) => {
+    setUserInfo({
+      ...userInfo,
+      email: value || "",
+    });
+    setIsEdit(true);
+  };
 
-	const handleSaveUserInfo = () => {
-		if (!userInfo.mobile || !userInfo.name || userInfo.name.length > 50) {
+  const handleSaveUserInfo = () => {
+    if (!userInfo.mobile || !userInfo.name || userInfo.name.length > 50) {
       setIsDisable(true);
-			return;
-		} else {
-			saveUserInfo({ data: userInfo }).then((resp) => {
-				if (resp.Code === 1) {
-					Toast.Success('更新成功', { canClose: false });
+      return;
+    } else {
+      saveUserInfo({ data: userInfo }).then((resp) => {
+        if (resp.Code === 1) {
+          Toast.Success(getLocale('Per_Ma_form_Updatesuc'), { canClose: false });
           handleSuccessEditBaseInfo(userInfo);
           onCancel();
-				} else {
-					Toast.Error(resp.Message, { canClose: false });
-				}
-			});
-		}
-	};
+        } else {
+          Toast.Error(resp.Message, { canClose: false });
+        }
+      });
+    }
+  };
 
-	useEffect(() => {
-		getUserInfoFun().then((resp) => {
-			if (resp.Code === 1 && resp.Data) {
-				setUserInfo({ ...resp.Data, position: resp.Data.positionCode });
-			}
-		});
-	}, []);
+  useEffect(() => {
+    getUserInfoFun().then((resp) => {
+      if (resp.Code === 1 && resp.Data) {
+        setUserInfo({ ...resp.Data, position: resp.Data.positionCode });
+      }
+    });
+  }, []);
 
-	return (
-		<Dialog
-			visible={visible}
-			ref={modalRef}
-			width={480}
-			mask
-			centered
-			title={'基本信息设置'}
-			noHeadLine
-			maskClosable={false}
-			onClose={() => {
-        onCancel();        
-        setUserInfo({name: info.name, mobile: info.mobile, email:info.email})
+  return (
+    <Dialog
+      visible={visible}
+      ref={modalRef}
+      width={480}
+      mask
+      centered
+      title={"基本信息设置"}
+      noHeadLine
+      maskClosable={false}
+      onClose={() => {
+        onCancel();
+        setUserInfo({
+          name: info.name,
+          mobile: info.mobile,
+          email: info.email,
+        });
       }}
-			onCancel={() => {
+      onCancel={() => {
         onCancel();
-        setUserInfo({name: info.name, mobile: info.mobile, email:info.email})
+        setUserInfo({
+          name: info.name,
+          mobile: info.mobile,
+          email: info.email,
+        });
       }}
-			okText="确定"
-			noFooterLine
-			onOk={handleSaveUserInfo}
-			disabled={isDisable}
-		>
+      okText={getLocale('Mod_Determiness')}
+      noFooterLine
+      onOk={handleSaveUserInfo}
+      disabled={isDisable}
+    >
       <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: '姓名不能为空',
-						test: /\S/
-					},
-					{
-						tip: '姓名只能为中文，英文字母和数字及下划线的组合',
-						test: /^((?!(\uff08|\uff09)).)*$/g
-					},
-          {
-            tip: `姓名不能超过${50}个字`,
-            test: /^[\s\S]{0,50}$/,
-          },
-				]}
-				value={userInfo.name}
-				onChange={handleNameChange}
-			/>
-			<Fields.Input
-				name="phone"
-				type="text"
-				label={'手机号码'}
-				placeholder={'请输入手机号'}
-				require
-        layout="row"
-				value={userInfo.mobile}
-				verifies={[
-					{
-						tip: '手机号不能为空',
-						test: /^[\s\S]+$/
-					},
-					{
-						tip: '格式错误，海外手机格式如：(+852)52345678',
-						test: /^1[3456789]\d{9}$/
-					}
-				]}
-				onChange={handlePhoneChange}
-			/>
-			<Fields.Input
-				name="email"
-				type="text"
-				label={'邮箱'}
-				value={userInfo.email}
-        layout="row"
-				placeholder={'请输入邮箱'}
-				verifies={[
-					{
-						tip: '邮箱格式错误',
-						test: /^([a-zA-Z0-9_-]|\.)+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
-					}
-				]}
-				onChange={handleEmailChange}
-			/>
-      </Form>
-			</div>
-		</Dialog>
-	);
+        <Form ref={formRef} getFormContainer={() => formContainerRef.current}>
+          <Fields.Input
+            name={"name"}
+            label={getLocale('Mod_UserName')}
+            placeholder={getLocale('Perf_Indica_Pop_text_Name')}
+            type="text"
+            require
+            layout="row"
+            verifies={[
+              {
+                tip: getLocale('OKR_MyO_Ew_Namecant'),
+                test: /^[\s\S]+$/,
+              },
+              {
+                tip: "姓名只能为中文，英文字母和数字及下划线的组合",
+                test: /^((?!(\uff08|\uff09)).)*$/g,
+              },
+              {
+                tip: i18nLimitCharacters(50),
+                test: /^[\s\S]{0,50}$/,
+              },
+            ]}
+            value={userInfo.name}
+            onChange={handleNameChange}
+          />
+          <Fields.Input
+            name="phone"
+            type="text"
+            label={"手机号码"}
+            placeholder={getLocale('Pro_page_Ext_Tab_PhoneNumber')}
+            require
+            layout="row"
+            value={userInfo.mobile}
+            verifies={[
+              {
+                tip: "手机号不能为空",
+                test: /^[\s\S]+$/,
+              },
+              {
+                tip: "格式错误，海外手机格式如：(+852)52345678",
+                test: /^1[3456789]\d{9}$/,
+              },
+            ]}
+            onChange={handlePhoneChange}
+          />
+          <Fields.Input
+            name="email"
+            type="text"
+            label={getLocale('OKR_MyO_Ew_Mail')}
+            value={userInfo.email}
+            layout="row"
+            placeholder={getLocale('Pro_page_Ext_Tab_Inpuyouremail')}
+            verifies={[
+              {
+                tip: getLocale('OKR_MyO_Ew_Emailfor'),
+                test: /^([a-zA-Z0-9_-]|\.)+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
+              },
+            ]}
+            onChange={handleEmailChange}
+          />
+        </Form>
+      </div>
+    </Dialog>
+  );
 };
 
 export default EditBaseInfo;

package/src/utils/i18n-front-translate.ts

@@ -0,0 +1,8 @@
+import { isEn } from "./getLocale";
+export const i18nLimitCharacters = (length) => {
+  if (isEn) {
+    return `Up to ${length} characters can be entered`;
+  } else {
+    return `最多可输入${length}个字`;
+  }
+};