@titaui/pc 1.9.53 → 1.9.57

package/src/components/okrcase-library-card/index.tsx

@@ -1,11 +1,9 @@
-import React, {
-  useState, useCallback, useRef, useEffect,
-} from "react";
-import firework from "../firework";
-import { postApply, postLike } from "../okrcase-library/server/network.js";
-import { CardItem } from "../okrcase-library";
-import { getLocale } from "../../utils/getLocale";
-import "../okrcase-library/index.scss";
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+import firework from '../firework';
+import { postApply, postLike } from '../okrcase-library/server/network.js';
+import { CardItem } from '../okrcase-library';
+import { getLocale } from '../../utils/getLocale';
+import '../okrcase-library/index.scss';
 
 interface Props {
   onApplyTpl: Function;
@@ -13,11 +11,9 @@ interface Props {
   index: number;
 }
 
-function OkrCaseCard(props: Props) {
+const OkrCaseCard = (props: Props) => {
   const { onApplyTpl, cardInfo, index } = props;
-  const {
-    parentName, name, subelements, usedNum, id, isLike, like,
-  } = cardInfo;
+  const { parentName, name, subelements, usedNum, id, isLike, like } = cardInfo;
 
   const [likeNum, setLikeNum] = useState(like);
   const [hasLike, setHasLike] = useState(isLike);
@@ -25,7 +21,7 @@ function OkrCaseCard(props: Props) {
 
   const [isApplyBtnShow, setIsApplyBtnShow] = useState(false);
   // const [isBlue, setIsBlue] = useState(index % 4 > 1 ? true : false)
-  const isBlue = index % 4 > 1;
+  const isBlue = index % 4 > 1 ? true : false;
   const likeRef = useRef<any>();
 
   useEffect(() => {
@@ -37,15 +33,15 @@ function OkrCaseCard(props: Props) {
   const setFirework = useCallback(() => {
     const { x, y } = (likeRef.current as any).getBoundingClientRect();
     firework({
-      x,
-      y,
+      x: x,
+      y: y,
       images: [
-        require("../okrcase-library/image/thumb-up.svg"),
-        require("../okrcase-library/image/666.svg"),
-        require("../okrcase-library/image/bixin.svg"),
-        require("../okrcase-library/image/fighting.svg"),
-        require("../okrcase-library/image/nice.svg"),
-        require("../okrcase-library/image/welldone.svg"),
+        require('../okrcase-library/image/thumb-up.svg'),
+        require('../okrcase-library/image/666.svg'),
+        require('../okrcase-library/image/bixin.svg'),
+        require('../okrcase-library/image/fighting.svg'),
+        require('../okrcase-library/image/nice.svg'),
+        require('../okrcase-library/image/welldone.svg'),
       ],
     });
   }, []);
@@ -67,12 +63,12 @@ function OkrCaseCard(props: Props) {
     postApply(id);
     onApplyTpl(cardInfo);
     // @ts-ignore
-    window.titaTracker
+    window.titaTracker &&
       // @ts-ignore
-      && window.titaTracker("action").record({
-        action: getLocale("Per_Ass_Pop_button_Apply"),
-        actionGroup: getLocale("OKR_OKRex_Casebase"),
-        productName: getLocale("OKR_OKRex_Casebase"),
+      window.titaTracker('action').record({
+        action: getLocale('Per_Ass_Pop_button_Apply'),
+        actionGroup: getLocale('OKR_OKRex_Casebase'),
+        productName: getLocale('OKR_OKRex_Casebase'),
       });
   };
 
@@ -86,35 +82,31 @@ function OkrCaseCard(props: Props) {
         className={`okr-cases-library__cardList__card__title
             ${
               isBlue
-                ? "okr-cases-library__cardList__card__title-blue"
-                : "okr-cases-library__cardList__card__title-red"
+                ? 'okr-cases-library__cardList__card__title-blue'
+                : 'okr-cases-library__cardList__card__title-red'
             }`}
       >
         <div className="okr-cases-library__cardList__card__title__label">
-          「
-          {parentName}
-          」
+          「{parentName}」
         </div>
         <div className="okr-cases-library__cardList__card__title__name">
-          O
-          {" "}
-          {name}
+          O {name}
         </div>
-        <div
-          className={`okr-cases-library__cardList__card__title__btn 
+        {
+          <div
+            className={`okr-cases-library__cardList__card__title__btn 
                 ${
-                  isApplyBtnShow
-                  && "okr-cases-library__cardList__card__title__btn-show"
+                  isApplyBtnShow &&
+                  'okr-cases-library__cardList__card__title__btn-show'
                 }
                 ${
                   isBlue
-                    ? "okr-cases-library__cardList__card__title__btn-blue"
-                    : "okr-cases-library__cardList__card__title__btn-red"
+                    ? 'okr-cases-library__cardList__card__title__btn-blue'
+                    : 'okr-cases-library__cardList__card__title__btn-red'
                 }`}
-          onClick={() => handleApplyBtnClick(id)}
-        >
-          {getLocale("Per_Ass_Pop_button_Apply")}
-        </div>
+            onClick={() => handleApplyBtnClick(id)}
+          >{getLocale('Per_Ass_Pop_button_Apply')}</div>
+        }
       </div>
       <div className="okr-cases-library__cardList__card__content">
         {subelements.map((item, krindex) => (
@@ -124,33 +116,28 @@ function OkrCaseCard(props: Props) {
           >
             <div
               style={{
-                color: isBlue ? "#2879FF" : "#F05E5E",
-                float: "left",
-                marginRight: "5px",
+                color: isBlue ? '#2879FF' : '#F05E5E',
+                float: 'left',
+                marginRight: '5px',
               }}
             >
-              KR
-              {krindex + 1}
-              {" "}
+              KR{krindex + 1}{' '}
             </div>
-            <div style={{ float: "left", width: "calc(100% - 36px)" }}>
-              {" "}
+            <div style={{ float: 'left', width: 'calc(100% - 36px)' }}>
+              {' '}
               {item.name}
             </div>
           </div>
         ))}
       </div>
       <div className="okr-cases-library__cardList__card__footer">
-        <div>
-          {usedNumber}
-          次套用
-        </div>
+        <div>{usedNumber}次套用</div>
         <div>
           {hasLike ? (
             <img
-              src={require("../okrcase-library/image/thumb-up.svg")}
+              src={require('../okrcase-library/image/thumb-up.svg')}
               onClick={() => handleLikeClick(hasLike, id)}
-              style={{ cursor: "pointer" }}
+              style={{ cursor: 'pointer' }}
             />
           ) : (
             <span
@@ -164,6 +151,6 @@ function OkrCaseCard(props: Props) {
       </div>
     </div>
   );
-}
+};
 
 export default OkrCaseCard;

package/src/components/open-data-painter/index.ts

@@ -4,60 +4,60 @@ import { isWx } from "../../utils/bs-global";
 interface openDataParam {
   id: number;
   name: string;
-  type: "userName" | "departmentName"
+  type: 'userName' | 'departmentName'
 }
-export default async function (
+export default async function(
   ctx: CanvasRenderingContext2D,
   openDataParams: openDataParam,
   lineHeight: number,
-  maxWidth:number = Infinity,
+  maxWidth:number = Infinity
 ) {
-  let { name } = openDataParams;
-  if (isWx()) {
-    name = await getOpenData(openDataParams);
+  let name = openDataParams.name
+  if(isWx()){
+     name = await getOpenData(openDataParams)
   }
-  const { width } = ctx.measureText(name);
-  const actualWidth = Math.min(width, maxWidth);
+  const {width} = ctx.measureText(name);
+  let actualWidth = Math.min(width,maxWidth)
   return {
     width: actualWidth,
     height: lineHeight,
-    draw(ctx:CanvasRenderingContext2D, x:number, y:number) {
-      ctx.save();
-      ctx.textBaseline = "middle";
+    draw: function(ctx:CanvasRenderingContext2D,x:number,y:number){
+      ctx.save()
+      ctx.textBaseline='middle';
       ctx.beginPath();
-      ctx.rect(x, y, actualWidth, lineHeight);
+      ctx.rect(x,y,actualWidth,lineHeight);
       ctx.clip();
-      ctx.fillText(name, x, y + lineHeight / 2);
-      ctx.closePath();
-      ctx.restore();
-    },
-  };
+      ctx.fillText(name,x,y+lineHeight/2);
+      ctx.closePath()
+      ctx.restore()
+    }
+  }
 }
-export const getOpenData = ({ id, name, type }:openDataParam) => {
-  const openId = getOpenId(id, type);
-  if (!window.WWOpenData || !openId) return Promise.resolve(name);
+export const getOpenData = ({id,name,type}:openDataParam) => {
+  const openId = getOpenId(id,type)
+  if(!window['WWOpenData']||!openId) return Promise.resolve(name)
   return new Promise<string>((resolve, reject) => {
-    window.WWOpenData.prefetch({ items: [{ id: openId, type }] }, (err, data) => {
-      if (err) {
-        return reject(err);
-      }
-      resolve(data.items[0].data);
-    });
-  });
-};
+    window['WWOpenData'].prefetch({items:[{ id:openId,type }]}, (err, data) => {
+        if (err) {
+            return reject(err)
+        }
+        resolve(data.items[0].data)
+    })
+})
+}
 
 export const setSize = (canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D, width, height) => {
   const devicePixelRatio = window.devicePixelRatio || 1;
   const data = ctx.getImageData(0, 0, width, height);
-  // 要将 canvas 的宽高设置成容器宽高的 2 倍
+  //要将 canvas 的宽高设置成容器宽高的 2 倍
   canvas.width = width * devicePixelRatio;
   canvas.height = height * devicePixelRatio;
-  canvas.style.width = `${width}px`;
-  canvas.style.height = `${height}px`;
-  // 然后将画布缩放，将图像放大两倍画到画布上
+  canvas.style.width = width + 'px';
+  canvas.style.height = height + 'px';
+  //然后将画布缩放，将图像放大两倍画到画布上
   ctx.scale(devicePixelRatio, devicePixelRatio);
   ctx.putImageData(data, 0, 0);
-};
+}
 
 export const fittingString = (_ctx, str, maxWidth) => {
   let strWidth = _ctx.measureText(str).width;
@@ -65,11 +65,12 @@ export const fittingString = (_ctx, str, maxWidth) => {
   const ellipsisWidth = _ctx.measureText(ellipsis).width;
   if (strWidth <= maxWidth || maxWidth <= ellipsisWidth) {
     return str;
+  } else {
+    var len = str.length;
+    while (strWidth >= maxWidth - ellipsisWidth && len-- > 0) {
+      str = str.slice(0, len);
+      strWidth = _ctx.measureText(str).width;
+    }
+    return str + ellipsis;
   }
-  let len = str.length;
-  while (strWidth >= maxWidth - ellipsisWidth && len-- > 0) {
-    str = str.slice(0, len);
-    strWidth = _ctx.measureText(str).width;
-  }
-  return str + ellipsis;
 };

package/src/components/operation-records/OperationRecordItem.tsx

@@ -1,9 +1,7 @@
-import React, { Component } from "react";
-import ToolTip from "@beisen-phoenix/tooltip";
-import {
-  OperationRecordItemWrapper, OperationContentWrapper, OperationPublisher, OperationContent, OperationRecordItemDate, OperationRecordItemDot, OperationRecordItemLine,
-} from "./style";
-import { OpenUserName, parseString } from "../../utils/open-data";
+import React, { Component } from 'react'
+import ToolTip from '@beisen-phoenix/tooltip'
+import { OperationRecordItemWrapper, OperationContentWrapper, OperationPublisher, OperationContent, OperationRecordItemDate, OperationRecordItemDot, OperationRecordItemLine } from './style'
+import { OpenUserName, parseString } from '../../utils/open-data'
 
 interface Props {
   className?: string
@@ -11,26 +9,24 @@ interface Props {
 }
 
 export default class OperationRecordItem extends Component<Props> {
+
   render() {
-    const { operationTrack, className } = this.props;
+    const { operationTrack, className } = this.props
     return (
-      <OperationRecordItemWrapper className={[className, "clearfix"].join(" ")}>
+      <OperationRecordItemWrapper className={[className, 'clearfix'].join(' ')}>
         <OperationRecordItemDate>
-          <span style={{ color: operationTrack.f_month ? "#99a3ad" : "transparent" }}>
-            {operationTrack.f_month ? operationTrack.f_month : "00/00"}
-&nbsp;
-          </span>
+          <span style={{ color: operationTrack.f_month ? '#99a3ad' : 'transparent' }}>{operationTrack.f_month ? operationTrack.f_month : '00/00'}&nbsp;</span>
           <span className="date-time">{operationTrack.f_time}</span>
         </OperationRecordItemDate>
         <OperationContentWrapper>
           <ToolTip title={<OpenUserName name={operationTrack.publishUser.name} id={operationTrack.publishUser.userId} />} extraCls="cooperation__tooltip">
             <OperationPublisher><OpenUserName name={operationTrack.publishUser.name} id={operationTrack.publishUser.userId} /></OperationPublisher>
           </ToolTip>
-          <OperationContent>{parseString(operationTrack.content)}</OperationContent>
+          <OperationContent >{parseString(operationTrack.content)}</OperationContent>
         </OperationContentWrapper>
-        <OperationRecordItemDot className="operation__dot" />
-        <OperationRecordItemLine className="operation__line" />
+        <OperationRecordItemDot className="operation__dot"></OperationRecordItemDot>
+        <OperationRecordItemLine className="operation__line"></OperationRecordItemLine>
       </OperationRecordItemWrapper>
-    );
+    )
   }
 }

package/src/components/operation-records/index.tsx

@@ -1,12 +1,10 @@
-import React, { PureComponent } from "react";
-import moment from "moment";
-import { getApiUrl2, taker } from "../../utils/request-v1"; // 请求相关
-import { OperationData } from "./mockData";
-import OperationRecordItem from "./OperationRecordItem";
-import {
-  OperationRecordWrapper, OperationRecordTotal, OperationRecordList, OperationDateYearWrapper, OperationDateYear, OperationDateYearDot, OperationDateYearLine, Dd,
-} from "./style";
-import { getLocale } from "../../utils/getLocale";
+import React, { PureComponent } from 'react'
+import moment from 'moment'
+import { getApiUrl2, taker } from '../../utils/request-v1' // 请求相关
+import { OperationData } from './mockData'
+import OperationRecordItem from './OperationRecordItem'
+import { OperationRecordWrapper, OperationRecordTotal, OperationRecordList, OperationDateYearWrapper, OperationDateYear, OperationDateYearDot, OperationDateYearLine, Dd } from './style'
+import { getLocale } from '../../utils/getLocale'
 
 interface Props {
   className?: string
@@ -23,28 +21,27 @@ interface State {
 
 export default class OperationRecord extends PureComponent<Props, State> {
   constructor(props: Props) {
-    super(props);
+    super(props)
     this.state = {
       operationTrackList: [],
       operationTrackTotal: 0,
       isShowAllOperationRecord: false,
-    };
+    }
   }
 
   componentDidMount() {
-    const { feedId, commentCount } = this.props;
+    const { feedId, commentCount } = this.props
     if (feedId) {
-      this.getFeedInfo(feedId, commentCount);
+      this.getFeedInfo(feedId, commentCount)
     }
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
     if (prevProps.feedId != this.props.feedId) {
-      const { feedId, commentCount } = this.props;
-      this.getFeedInfo(feedId, commentCount);
+      const { feedId, commentCount } = this.props
+      this.getFeedInfo(feedId, commentCount)
     }
   }
-
   /**
  *获取feed信息
  * @feed_id
@@ -52,123 +49,117 @@ export default class OperationRecord extends PureComponent<Props, State> {
  * @memberof Cooperation
  */
   getFeedInfo = (feedId: string, commentCount: number) => {
-    const url = getApiUrl2(`user/feed/GetById?feed_id=${feedId}&comment_count=${commentCount}`);
-    taker(url, "GET").then((res) => {
+    let url = getApiUrl2(`user/feed/GetById?feed_id=${feedId}&comment_count=${commentCount}`)
+    taker(url, 'GET').then(res => {
       if (res.Code === 1) {
-        const data = res.Data.feedOperations;
-        const newOperationTrackList = this.formatCommentsDate(data.comments ? data.comments : []);
+        let data = res.Data.feedOperations
+        let newOperationTrackList = this.formatCommentsDate(data.comments ? data.comments : [])
         this.setState({
           operationTrackList: newOperationTrackList,
-          operationTrackTotal: data.total,
-        });
+          operationTrackTotal: data.total
+        })
       }
-    }).catch((err) => {
-      console.log("OperationRecord -> err", err);
+    }).catch(err => {
+      console.log('OperationRecord -> err', err);
       if (this.props.mockData) {
-        const newOperationTrackList = this.formatCommentsDate(OperationData);
+        let newOperationTrackList = this.formatCommentsDate(OperationData)
         this.setState({
           operationTrackList: newOperationTrackList,
-          operationTrackTotal: OperationData.length,
-        });
+          operationTrackTotal: OperationData.length
+        })
       }
-    });
-  };
+    })
+  }
 
   // 处理操作记录月份显示
   formatCommentsDate = (comments) => {
-    const thisYear = moment().year(); // 获取当前年份
+    let thisYear = moment().year() // 获取当前年份
 
-    const new_data: any[] = [];
-    let new_year: string | null = null;
-    let new_year_data: any[] = [];
-    let tag_month: string | null = null;
+    let new_data: any[] = []
+    let new_year: string | null = null
+    let new_year_data: any[] = []
+    let tag_month: string | null = null
 
     for (let i = 0; i < comments.length; i++) {
-      const item = comments[i];
-      const mCreatDate = moment(item.createDate, "YYYY/MM/DD HH:mm");
-      const f_year = mCreatDate.format("YYYY");
-      const f_month = mCreatDate.format("MM/DD");
-      const f_time = mCreatDate.format("HH:mm");
+      let item = comments[i];
+      let mCreatDate = moment(item['createDate'], 'YYYY/MM/DD HH:mm')
+      let f_year = mCreatDate.format('YYYY')
+      let f_month = mCreatDate.format('MM/DD')
+      let f_time = mCreatDate.format('HH:mm')
 
-      item.f_year = (i == 0 && Number(f_year) == thisYear) ? f_year : mCreatDate.format("YYYY/MM/DD");
-      item.f_time = f_time;
+      item['f_year'] = (i == 0 && Number(f_year) == thisYear) ? f_year : mCreatDate.format('YYYY/MM/DD')
+      item['f_time'] = f_time
 
-      // 如果和上一条是数据是同一条，不显示月、日
+      //如果和上一条是数据是同一条，不显示月、日
 
       if (f_year !== new_year) {
-        tag_month = f_month;
-        item.f_month = f_month;
+        tag_month = f_month
+        item['f_month'] = f_month
 
-        new_year = f_year;
-        new_year_data = [];
-        new_year_data.push(item);
+        new_year = f_year
+        new_year_data = []
+        new_year_data.push(item)
         new_data.push({
-          year: new_year,
-          data: new_year_data,
-          thisYear: (Number(f_year) == thisYear),
-        });
+          'year': new_year,
+          'data': new_year_data,
+          'thisYear': (Number(f_year) == thisYear) ? true : false
+        })
       } else {
         if (tag_month == f_month) {
-          item.f_month = null;
+          item['f_month'] = null;
         } else {
           tag_month = f_month;
-          item.f_month = f_month;
+          item['f_month'] = f_month
         }
-        new_year_data.push(item);
+        new_year_data.push(item)
       }
     }
-    return new_data;
-  };
+    return new_data
+  }
 
   handlerSwitchShowRecord = () => {
-    const { feedId, commentCount } = this.props; // 默认展示条数
-    const { operationTrackTotal } = this.state; // 记录总数
-    let { isShowAllOperationRecord } = this.state;
-    isShowAllOperationRecord = !isShowAllOperationRecord;
-    isShowAllOperationRecord ? this.getFeedInfo(feedId, operationTrackTotal) : this.getFeedInfo(feedId, commentCount);
-    this.setState({ isShowAllOperationRecord });
-  };
+    const { feedId, commentCount } = this.props  // 默认展示条数
+    const { operationTrackTotal } = this.state // 记录总数
+    let isShowAllOperationRecord = this.state.isShowAllOperationRecord
+    isShowAllOperationRecord = !isShowAllOperationRecord
+    isShowAllOperationRecord ? this.getFeedInfo(feedId, operationTrackTotal) : this.getFeedInfo(feedId, commentCount)
+    this.setState({ isShowAllOperationRecord })
+  }
+
 
   render() {
-    const { className } = this.props;
-    const { isShowAllOperationRecord, operationTrackList, operationTrackTotal } = this.state;
+    const { className } = this.props
+    const { isShowAllOperationRecord, operationTrackList, operationTrackTotal } = this.state
     return (
       <OperationRecordWrapper className={className}>
         <OperationRecordTotal>
-          <p className={isShowAllOperationRecord ? "tu-icon-angles-up" : "tu-icon-angles-down"} onMouseDown={() => this.handlerSwitchShowRecord()}>
-            {getLocale("OKR_MyO_KRP_Alloperations")}
-&nbsp;
-            <span>{operationTrackTotal}</span>
-          </p>
+          <p className={isShowAllOperationRecord ? "tu-icon-angles-up" : "tu-icon-angles-down"} onMouseDown={() => this.handlerSwitchShowRecord()}>{getLocale('OKR_MyO_KRP_Alloperations')}&nbsp;<span>{operationTrackTotal}</span></p>
         </OperationRecordTotal>
         <OperationRecordList>
           <dl>
             {
-              operationTrackList.length > 0 && operationTrackList.map((element, index: number) => (
-                <Dd className={["tu-font-a2", (operationTrackList.length === 1 && element.thisYear) ? "one_tkfb" : ""].join(" ")} key={index}>
+              operationTrackList.length > 0 && operationTrackList.map((element, index: number) => {
+                return <Dd className={['tu-font-a2', (operationTrackList.length === 1 && element.thisYear) ? 'one_tkfb' : ''].join(' ')} key={index}>
                   {
                     element.year && (
                       <OperationDateYearWrapper className="operation__date__container">
-                        <OperationDateYear>
-                          <span>
-                            {element.year}
-                            年
-                          </span>
-                        </OperationDateYear>
-                        <OperationDateYearDot />
-                        <OperationDateYearLine />
+                        <OperationDateYear><span>{element.year}年</span></OperationDateYear>
+                        <OperationDateYearDot></OperationDateYearDot>
+                        <OperationDateYearLine></OperationDateYearLine>
                       </OperationDateYearWrapper>
                     )
                   }
                   {
-                    element.data.map((item, index: number) => <OperationRecordItem operationTrack={item} key={item.commentId} />)
+                    element.data.map((item, index: number) => {
+                      return <OperationRecordItem operationTrack={item} key={item.commentId} />
+                    })
                   }
                 </Dd>
-              ))
+              })
             }
           </dl>
         </OperationRecordList>
       </OperationRecordWrapper>
-    );
+    )
   }
 }