@titaui/pc 1.8.1 → 1.8.2

package/src/components/okr-progress/util.ts

@@ -1,3 +1,4 @@
+import { getLocale } from '../../utils/getLocale';
 // @ts-nocheck
 export const isPrincipal = (principalUser) => {
   return window.BSGlobal["loginUserInfo"].Id === principalUser.userId;
@@ -11,5 +12,5 @@ export const getToNowTime = (time) => {
   if (diffSecond < 60 * 60 * 24 * 7) {
     return '';
   }
-  return `距上次更新${Math.floor(diffSecond / 60 / 60 / 24)}天`
+  return `${getLocale('OKR_MyO_Pr_Butt_Lastupd')}${Math.floor(diffSecond / 60 / 60 / 24)}${getLocale('OKR_MyO_Pr_Butt_dayago')}`
 }

package/src/components/okr-progress-detail/index.tsx

@@ -1,18 +1,19 @@
-import React, { FC, useMemo, useCallback, useState } from 'react';
+import React, { FC, useMemo, useCallback, useState } from "react";
 // @ts-ignore
-import LeftQuotoSvg from './img/progress-left-quoto.svg';
+import LeftQuotoSvg from "./img/progress-left-quoto.svg";
 // @ts-ignore
-import RightQuotoSvg from './img/progress-right-quoto.svg';
+import RightQuotoSvg from "./img/progress-right-quoto.svg";
 // @ts-ignore
-import DelaySvg from './img/progress-delay.svg';
+import DelaySvg from "./img/progress-delay.svg";
 // @ts-ignore
-import NormalSvg from './img/progress-normal.svg';
+import NormalSvg from "./img/progress-normal.svg";
 // @ts-ignore
-import RiskSvg from './img/progress-risk.svg';
+import RiskSvg from "./img/progress-risk.svg";
 // @ts-ignore
-import EndSvg from './img/progress-end.svg';
-import './index.scss';
-import { getProgressState, getTimeString } from './utils';
+import EndSvg from "./img/progress-end.svg";
+import { getProgressState, getTimeString } from "./utils";
+import { getLocale } from "../../utils/getLocale";
+import "./index.scss";
 
 interface IDetailProps {
   riskLevel: string;
@@ -35,96 +36,150 @@ const StateIconMapping = {
   delay: DelaySvg,
   normal: NormalSvg,
   risk: RiskSvg,
-  end: EndSvg
-}
+  end: EndSvg,
+};
 
-const $prefix = 'okr-progress-item';
+const $prefix = "okr-progress-item";
 
-const Detail: FC<IDetailProps> = ({ id, riskLevel, oStatus = 1, title, percent, oldPercent, content, time, canEdit = false, onEditProgress, onDeleteProgress, rightTip, showPercent = true, canDel = false }) => {
-  
+const Detail: FC<IDetailProps> = ({
+  id,
+  riskLevel,
+  oStatus = 1,
+  title,
+  percent,
+  oldPercent = 0,
+  content,
+  time,
+  canEdit = false,
+  onEditProgress,
+  onDeleteProgress,
+  rightTip,
+  showPercent = true,
+  canDel = false,
+}) => {
   const [isMouseEnterDetail, setIsMouseEnterDetail] = useState(false);
   const nowTime = useMemo(() => {
     return new Date();
-  }, [])
+  }, []);
 
   const renderPercentDiffer = useMemo(() => {
     const progressIsAdvance = percent > oldPercent;
     return (
       <span>
-        {percent === oldPercent ? null : 
-          <span className={`${$prefix}__percent-differ-icon ${progressIsAdvance ? `${$prefix}__percent--advance` : `${$prefix}__percent--delay`}`}>
-            {progressIsAdvance ? <i className='tu-icon-simple-sort-up' /> : <i className='tu-icon-simple-sort-down'/>}{Math.abs(percent - oldPercent)}%
+        {percent === oldPercent ? null : (
+          <span
+            className={`${$prefix}__percent-differ-icon ${
+              progressIsAdvance
+                ? `${$prefix}__percent--advance`
+                : `${$prefix}__percent--delay`
+            }`}
+          >
+            {progressIsAdvance ? (
+              <i className="tu-icon-simple-sort-up" />
+            ) : (
+              <i className="tu-icon-simple-sort-down" />
+            )}
+            {Math.abs(percent - oldPercent)}%
           </span>
-        }
+        )}
       </span>
-    )
-  }, [percent, oldPercent])
+    );
+  }, [percent, oldPercent]);
 
   const handleEditProgress = useCallback(() => {
-    onEditProgress && onEditProgress(id, content)
-  }, [onEditProgress])
+    onEditProgress && onEditProgress(id, content);
+  }, [onEditProgress]);
 
   const handleDeleteProgress = useCallback(() => {
-    onDeleteProgress && onDeleteProgress(id)
-  }, [onDeleteProgress])
+    onDeleteProgress && onDeleteProgress(id);
+  }, [onDeleteProgress]);
 
   const handleMouseEnterDetail = useCallback(() => {
-    setIsMouseEnterDetail(true)
-  }, [])
+    setIsMouseEnterDetail(true);
+  }, []);
 
   const handleMouseLeaveDetail = useCallback(() => {
-    setIsMouseEnterDetail(false)
-  }, [])
+    setIsMouseEnterDetail(false);
+  }, []);
 
   return (
     <div className={`${$prefix}-wrapper`}>
       <div>
         <div className={`${$prefix}-content__header`}>
-          <img className={`${$prefix}-content__icon-state`} src={StateIconMapping[getProgressState(oStatus, riskLevel)]}/>
+          <img
+            className={`${$prefix}-content__icon-state`}
+            src={StateIconMapping[getProgressState(oStatus, riskLevel)]}
+          />
           <span>{title}</span>
-          {showPercent ? <span className={`${$prefix}__percent`}>
-            {percent}% 
-            {renderPercentDiffer}
-          </span> : null}
+          {showPercent ? (
+            <span className={`${$prefix}__percent`}>
+              {percent}%{renderPercentDiffer}
+            </span>
+          ) : null}
           <span className={`${$prefix}__right-tip`}>{rightTip}</span>
         </div>
         <div className={`${$prefix}-content__body-wrapper`}>
-          <div 
-            className={`${$prefix}-content__body ${canEdit ? `${$prefix}-content--edit` : ''}`}
+          <div
+            className={`${$prefix}-content__body ${
+              canEdit ? `${$prefix}-content--edit` : ""
+            }`}
             onMouseEnter={handleMouseEnterDetail}
             onMouseLeave={handleMouseLeaveDetail}
           >
             <div className={`${$prefix}-content__body-top`}>
-              {content && content.trim() ? <img className={`${$prefix}-content__icon-left-quoto`} src={LeftQuotoSvg}/> : null}
+              {content && content.trim() ? (
+                <img
+                  className={`${$prefix}-content__icon-left-quoto`}
+                  src={LeftQuotoSvg}
+                />
+              ) : null}
               <span className={`${$prefix}__content`}>
                 {content && content.trim()}
               </span>
             </div>
             <div className={`${$prefix}__content-bottom`}>
-              <span>
-                {getTimeString(time, nowTime)}
-              </span>
-              {canEdit && isMouseEnterDetail ? 
-              <span className={`${$prefix}__bottom-func-btns`}>
-                <span className={`${$prefix}__bottom-btn--edit`} onClick={handleEditProgress}>
-                  <i className={`tu-icon-bianji3 ${$prefix}__bottom-btn-icon`}/>编辑
-                </span>
-                {canEdit && canDel && <span className={`${$prefix}__bottom-divider`}></span>}
-                {canDel && (
-                  <span className={`${$prefix}__bottom-btn--delete`} onClick={handleDeleteProgress}>
-                    <i className={`tu-icon-shanchu ${$prefix}__bottom-btn-icon`}/>删除
+              <span>{getTimeString(time, nowTime)}</span>
+              {canEdit && isMouseEnterDetail ? (
+                <span className={`${$prefix}__bottom-func-btns`}>
+                  <span
+                    className={`${$prefix}__bottom-btn--edit`}
+                    onClick={handleEditProgress}
+                  >
+                    <i
+                      className={`tu-icon-bianji3 ${$prefix}__bottom-btn-icon`}
+                    />
+                    {getLocale("Mod_Editor")}
                   </span>
-                )}
-              </span> : null}
+                  {canEdit && canDel && (
+                    <span className={`${$prefix}__bottom-divider`}></span>
+                  )}
+                  {canDel && (
+                    <span
+                      className={`${$prefix}__bottom-btn--delete`}
+                      onClick={handleDeleteProgress}
+                    >
+                      <i
+                        className={`tu-icon-shanchu ${$prefix}__bottom-btn-icon`}
+                      />
+                      {getLocale("Mod_Delete")}
+                    </span>
+                  )}
+                </span>
+              ) : null}
             </div>
           </div>
           <div className={`${$prefix}-content__right-block`}>
-            {content && content.trim() ? <img className={`${$prefix}-content__icon-right-quoto`} src={RightQuotoSvg} /> : null}
+            {content && content.trim() ? (
+              <img
+                className={`${$prefix}-content__icon-right-quoto`}
+                src={RightQuotoSvg}
+              />
+            ) : null}
           </div>
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default Detail;
+export default Detail;

package/src/components/okr-progress-detail/utils.ts

@@ -1,8 +1,9 @@
+import { getLocale } from "../../utils/getLocale";
 import { OkrRiskMapping } from "./constant";
 
 export const getTimeString = (time: string, nowTime): string => {
   if (!time) {
-    return '暂未更新';
+    return getLocale('OKR_MyO_KRP_Notupdated');
   }
   const timeDateObj = new Date(time);
   const timeMilliSecond = timeDateObj.getTime();
@@ -18,7 +19,7 @@ export const getTimeString = (time: string, nowTime): string => {
   
   const secondDiff = Math.floor((nowMilliSecond - timeMilliSecond) / 1000);
   if (secondDiff <= 3) {
-    return '刚刚';
+    return getLocale('Pro_page_Int_Justnow');
   }
   if (secondDiff < 60) {
     return `${secondDiff}秒前`;
@@ -30,7 +31,7 @@ export const getTimeString = (time: string, nowTime): string => {
     return `${Math.floor(secondDiff / (60 * 60))}小时前`;
   }
   if (secondDiff < 60 * 60 * 24 * 2 && nowDate - 1 === timeDate) {
-    return `昨天 ${timeHours + ':' + timeMinutes}`;
+    return `${getLocale('OKR_MyO_Pr_Text_Yesterday')} ${timeHours + ':' + timeMinutes}`;
   }
   if (secondDiff < 60 * 60 * 24 * 3 && nowDate - 2 === timeDate) {
     return `前天 ${timeHours + ':' + timeMinutes}`;

package/src/components/okr-progress-modal/helper.js

@@ -1,75 +1,115 @@
 import React, { Fragment } from 'react';
+import { getLocale } from '../../utils/getLocale';
 
-export const O_SETTING = {
-  settingTitle: '目标完成度自动更新设置',
-  switchLabel: '设置目标完成度自动更新',
-  options: [
-    {
-      label: '根据关键成果KR完成度自动更新',
-      key: 1,
-      tooltip: '选择后，目标完成度不可编辑，由系统根据关键成果KR完成度自动计算',
+export const getO_SETTING = () => {
+  return {
+    settingTitle: getLocale('OKR_MyO_Pop_Upd_Setmatically'),
+    switchLabel: getLocale('OKR_MyO_Pop_Upd_Setmatically'),
+    options: [
+      {
+        label: getLocale('OKR_MyO_Pop_Upd_Autup'),
+        key: 1,
+        tooltip: getLocale('OKR_MyO_Pop_Upd_KRCompletion'),
+      },
+      {
+        label: getLocale('OKR_MyO_Pop_Upd_Autcom'),
+        key: 2,
+        tooltip: getLocale('OKR_MyO_Pop_Upd_SubO'),
+      },
+    ],
+    getRecommandText: (autoUpdate = true, updateWay = 1, recommandProgressObj) => {
+      if (autoUpdate) {
+        if (updateWay == 1) return <span className='auto-update__recommand-tip'>{getLocale('OKR_MyO_Pop_Upd_Automatic')}</span>;
+        if (updateWay == 2) return <span className='auto-update__recommand-tip'>{getLocale('OKR_MyO_calculationSubO')}</span>;
+      } else {
+        const { childOkrProgress, childkrProgress } = recommandProgressObj;
+        const textArr = [];
+        childkrProgress !== -1 && textArr.push(`${getLocale('OKR_MyO_Pop_Upd_KRCom')}${childkrProgress}${getLocale('OKR_MyO_Pop_Upd_Percentage')}`);
+        childOkrProgress !== -1 && textArr.push(`子目标完成度${childOkrProgress}${getLocale('OKR_MyO_Pop_Upd_Percentage')}`);
+        if (textArr.length == 0) return '';
+        return (
+          <Fragment>
+            <span className='auto-update__recommand-icon'>{getLocale('Per_Ass_Pop_title_Recommend')}</span>
+            <span className='auto-update__recommand-tip'>（{textArr.join('，')}）</span>
+          </Fragment>
+        );
+      }
     },
-    {
-      label: '根据子目标完成度自动更新',
-      key: 2,
-      tooltip: '选择后，目标完成度不可编辑，由系统根据子目标完成度自动计算',
-    },
-  ],
-  getRecommandText: (autoUpdate = true, updateWay = 1, recommandProgressObj) => {
-    if (autoUpdate) {
-      if (updateWay == 1) return <span className='auto-update__recommand-tip'>系统根据KR完成度和权重自动计算</span>;
-      if (updateWay == 2) return <span className='auto-update__recommand-tip'>系统根据子目标完成度自动计算</span>;
-    } else {
-      const { childOkrProgress, childkrProgress } = recommandProgressObj;
-      const textArr = [];
-      childkrProgress !== -1 && textArr.push(`KR完成度${childkrProgress}%`);
-      childOkrProgress !== -1 && textArr.push(`子目标完成度${childOkrProgress}%`);
-      if (textArr.length == 0) return '';
-      return (
-        <Fragment>
-          <span className='auto-update__recommand-icon'>推荐</span>
-          <span className='auto-update__recommand-tip'>（{textArr.join('，')}）</span>
-        </Fragment>
-      );
-    }
-  },
+  }
 };
 
-export const KR_SETTING = {
-  settingTitle: 'KR 完成度自动更新设置',
-  switchLabel: '设置 KR 完成度自动更新',
-  options: [
-    {
-      label: '根据任务和项目完成度自动更新',
-      key: 1,
-      tooltip: '选择后，KR完成度不可编辑，由系统根据KR下任务和项目完成度自动计算',
-    },
-    {
-      label: '根据子目标完成度自动更新',
-      key: 2,
-      tooltip: '选择后，KR完成度不可编辑，由系统根据子目标完成度自动计算',
+export const getKR_SETTING = () => {
+  return {
+    settingTitle: getLocale('OKR_MyO_KRCompletion'),
+    switchLabel: getLocale('OKR_MyO_SetKRcompletion'),
+    options: [
+      {
+        label: getLocale('OKR_MyO_Updatetask'),
+        key: 1,
+        tooltip: getLocale('OKR_MyO_AeKRcompletionde'),
+      },
+      {
+        label: getLocale('OKR_MyO_Pop_Upd_Autcom'),
+        key: 2,
+        tooltip: getLocale('OKR_MyO_KRcompletionde'),
+      },
+    ],
+    getRecommandText: (autoUpdate = true, updateWay = 1, recommandProgressObj) => {
+      if (autoUpdate) {
+        if (updateWay == 1) return <span className='auto-update__recommand-tip'>{getLocale('OKR_MyO_Automatic')}</span>;
+        if (updateWay == 2) return <span className='auto-update__recommand-tip'>{getLocale('OKR_MyO_calculationSubO')}</span>;
+      } else {
+        const { childOkrProgress, childEProgress } = recommandProgressObj;
+        const textArr = [];
+        childEProgress !== -1 && textArr.push(`${getLocale('OKR_MyO_Ecompletion')}${childEProgress}${getLocale('OKR_MyO_Pop_Upd_Percentage')}`);
+        childOkrProgress !== -1 && textArr.push(`子目标完成度${childOkrProgress}${getLocale('OKR_MyO_Pop_Upd_Percentage')}`);
+        if (textArr.length == 0) return '';
+        return (
+          <Fragment>
+            <span className='auto-update__recommand-icon'>{getLocale('Per_Ass_Pop_title_Recommend')}</span>
+            <span className='auto-update__recommand-tip' style={{ marginLeft: 0}}>({textArr.join('，')})</span>
+          </Fragment>
+        );
+      }
     },
-  ],
-  getRecommandText: (autoUpdate = true, updateWay = 1, recommandProgressObj) => {
-    if (autoUpdate) {
-      if (updateWay == 1) return <span className='auto-update__recommand-tip'>系统根据任务和项目完成度自动计算</span>;
-      if (updateWay == 2) return <span className='auto-update__recommand-tip'>系统根据子目标完成度自动计算</span>;
-    } else {
-      const { childOkrProgress, childEProgress } = recommandProgressObj;
-      const textArr = [];
-      childEProgress !== -1 && textArr.push(`E执行完成度${childEProgress}%`);
-      childOkrProgress !== -1 && textArr.push(`子目标完成度${childOkrProgress}%`);
-      if (textArr.length == 0) return '';
-      return (
-        <Fragment>
-          <span className='auto-update__recommand-icon'>推荐</span>
-          <span className='auto-update__recommand-tip' style={{ marginLeft: 0}}>({textArr.join('，')})</span>
-        </Fragment>
-      );
-    }
-  },
+  }
 };
 
 export const transProgress = (progress) => {
   return progress == -1 ? 0: progress;
 }
+
+export const getKrOptions = () => [
+  {
+    id: 1,
+    color: '#2879ff',
+    text: getLocale('OKR_MyO_Pop_Upd_Notrack'),
+  },
+  {
+    id: 2,
+    color: '#F6BD16',
+    text: getLocale('OKR_MyO_Pop_Upd_Atrisk'),
+  },
+  {
+    id: 3,
+    color: '#F05E5E',
+    text: getLocale('OKR_MyO_Pop_Upd_Postoned'),
+  },
+];
+export const getOptions = () => [
+  {
+    id: 6,
+    color: '#2879ff',
+    text: getLocale('OKR_MyO_Pop_Upd_Notrack'),
+  },
+  {
+    id: 2,
+    color: '#F6BD16',
+    text: getLocale('OKR_MyO_Pop_Upd_Atrisk'),
+  },
+  {
+    id: 3,
+    color: '#F05E5E',
+    text: getLocale('OKR_MyO_Pop_Upd_Postoned'),
+  },
+];

package/src/components/okr-progress-modal/index.tsx

@@ -4,49 +4,16 @@ import { Input, Modal, Tooltip } from 'tita-ui';
 import  Switch  from '../switch';
 import classNames from 'classnames';
 import Textarea from './textarea';
-import { O_SETTING, KR_SETTING, transProgress } from './helper';
+import { getO_SETTING, getKR_SETTING, transProgress, getKrOptions, getOptions } from './helper';
 import { ErrorTip, List, Item, Icon, Options, OptionsWrapper } from './style';
 import { IRecommandProgressObj, OptionsObj, IProgressModalProps } from './interface';
+import { getLocale } from '../../utils/getLocale';
 import './index.scss';
 
-const krOptions: OptionsObj[] = [
-  {
-    id: 1,
-    color: '#2879ff',
-    text: '正常',
-  },
-  {
-    id: 2,
-    color: '#F6BD16',
-    text: '有风险',
-  },
-  {
-    id: 3,
-    color: '#F05E5E',
-    text: '已延期',
-  },
-];
-const options: OptionsObj[] = [
-  {
-    id: 6,
-    color: '#2879ff',
-    text: '正常',
-  },
-  {
-    id: 2,
-    color: '#F6BD16',
-    text: '有风险',
-  },
-  {
-    id: 3,
-    color: '#F05E5E',
-    text: '已延期',
-  },
-];
 const ProgressModal: React.FC<IProgressModalProps> = props => {
   const { maxLength, okrInfo, onClose, onOk, title, visible, isKr } = props;
 
-  const configure = isKr ? KR_SETTING : O_SETTING;
+  const configure = isKr ? getKR_SETTING() : getO_SETTING();
 
   const reg = /^[0-9]*[1-9][0-9]*$/;
   const [errorProgress, setErrorProgress] = useState(false);
@@ -103,12 +70,10 @@ const ProgressModal: React.FC<IProgressModalProps> = props => {
       <span
         className='auto-update__item-label'
         style={{ alignSelf: 'flex-start', marginTop: '10px' }}
-      >
-        进展
-      </span>
+      >{getLocale('Feed_Tab_Title_Progress')}</span>
       <Textarea
         hasError={errorRemark}
-        placeholder='请输入进展'
+        placeholder={getLocale('OKR_MyO_Pop_Upd_Pleprogress')}
         style={{
           flex: 1,
           height: '75px',
@@ -132,7 +97,7 @@ const ProgressModal: React.FC<IProgressModalProps> = props => {
 
   const onOkHandler = () => {
     onOk({
-      progress: progress + '%',
+      progress: progress + getLocale('OKR_MyO_Pop_Upd_Percentage'),
       progressDescription,
       riskLevel: selected,
       updateProgressWay: autoUpdate ? updateWay : 0,
@@ -151,6 +116,8 @@ const ProgressModal: React.FC<IProgressModalProps> = props => {
       className="common-modal"
       maskClosable={false}
       onCancel={onCancelHandler}
+      okText={getLocale('OKR_MyO_Butt_Determine')}
+      cancelText={getLocale('Mod_Cancel')}
       onOk={onOkHandler}
       okDisabled={errorProgress || errorRemark}
       title={title}
@@ -159,7 +126,7 @@ const ProgressModal: React.FC<IProgressModalProps> = props => {
     >
       <List>
         <Item>
-          <span className='auto-update__item-label'>完成度</span>
+          <span className='auto-update__item-label'>{getLocale('OKR_MyO_Pop_Upd_Progress')}</span>
           <div className='auto-update__item-progress'>
             <Input
               type='number'
@@ -176,18 +143,16 @@ const ProgressModal: React.FC<IProgressModalProps> = props => {
                 'auto-update__item-progress-input__suffix--disabled': autoUpdate,
               })}
             >
-              %
+              {getLocale('OKR_MyO_Pop_Upd_Percentage')}
             </span>
           </div>
           <span>{configure.getRecommandText(autoUpdate, updateWay, recommandProgressObj)}</span>
-          <ErrorTip className={`error-progress ${errorProgress ? 'slideIn' : ''}`}>
-            请输入大于0的整数
-          </ErrorTip>
+          <ErrorTip className={`error-progress ${errorProgress ? 'slideIn' : ''}`}>{getLocale('OKR_MyO_KRP_Please0')}</ErrorTip>
         </Item>
         <Item>
-          <span className='auto-update__item-label'>状态</span>
+          <span className='auto-update__item-label'>{getLocale('Mod_States')}</span>
           <OptionsWrapper>
-            {(isKr ? krOptions : options).map((option: OptionsObj) => (
+            {(isKr ? getKrOptions() : getOptions()).map((option: OptionsObj) => (
               <Options key={option.id} onClick={() => setSelected(option.id)}>
                 <Icon
                   color={option.color}
@@ -248,7 +213,7 @@ const ProgressModal: React.FC<IProgressModalProps> = props => {
             )}
             onClick={() => setSettingFold(!settingFolded)}
           >
-            {settingFolded ? '收起' : configure.settingTitle}
+            {settingFolded ? getLocale('Mod_Fold') : configure.settingTitle}
           </span>
         </div>
       </List>
@@ -257,7 +222,7 @@ const ProgressModal: React.FC<IProgressModalProps> = props => {
 };
 
 ProgressModal.defaultProps = {
-  title: '更新完成度',
+  title: getLocale('OKR_MyO_Prog_Butt_Update'),
   maxLength: 500,
 };