@titaui/pc 1.7.21 → 1.7.25

package/src/components/form/form-fields/group/index.tsx

@@ -11,6 +11,7 @@ interface IProps {
   require?: boolean;
   width?: number;
   children?: ReactElement;
+  className?: any;
   direction?: "horizontal" | "vertical";
 }
 
@@ -18,15 +19,14 @@ const FieldGroup = (props: IProps, ref) => {
   const {
     label = "",
     direction = "vertical",
-    // onChange,
-    // values,
+    className,
     children,
   } = props;
 
   useImperativeHandle(ref, () => ({}));
 
   return (
-    <div className={classNames(precls, `${precls}--${direction}`)}>
+    <div className={classNames(precls,className, `${precls}--${direction}`)}>
       <div className={`${precls}__label`}>{label}</div>
       <div className={`${precls}__content`}>
         {React.Children.map(children, (child) => {

package/src/components/menus/components/menu-tree/tree-node/index.scss

@@ -19,6 +19,7 @@
   &-indent {
     display: inline-block;
     width: 16px;
+    min-width: 16px;
   }
   &-title {
     font-size: 14px;
@@ -36,7 +37,7 @@
     font-size: 14px;
     line-height: 22px;
     color: #141c28;
-    font-weight: 500;
+    font-weight: 600;
   }
 }
 

package/src/components/okr-detail/components/okr-tree/tree-node/e-node/e-project.js

@@ -70,7 +70,7 @@ export default props => {
 
       <span className={classNames(`${preCls}__e-project-node-actions-user`)}>
         {/* <TextAvatar name={user.name} id={user.userId} width={76} editable onEditUser={onEditUserHandler} /> */}
-        <Avatar.Text name={data.principalUser.name} id={data.principalUser.userId} width={64} extraCls={isGray&&`${preCls}__e-project-node-gray`} />
+        <Avatar.Text name={data?.principalUser?.name} id={data?.principalUser?.userId} width={64} extraCls={isGray&&`${preCls}__e-project-node-gray`} />
       </span>
 
       <span className={classNames(`${preCls}__e-project-node-actions-date`)}>

package/src/components/okr-detail/components/okr-tree/tree-node/e-node/e-task-level2.js

@@ -218,8 +218,8 @@ export default (props) => {
           className={classNames(`${preCls}__e-task-level2-node-actions-user`)}
         >
           <Avatar.Text
-            name={user.name}
-            id={user.userId}
+            name={user?.name}
+            id={user?.userId}
             width={64}
             editable={hasAuth}
             onEditUser={onEditUserHandler}

package/src/components/okr-detail/components/okr-tree/tree-node/e-node/e-task.js

@@ -219,8 +219,8 @@ export default (props) => {
       <span className={classNames(`${preCls}__e-task-node-actions`)}>
         <span className={classNames(`${preCls}__e-task-node-actions-user`)}>
           <Avatar.Text
-            name={user.name}
-            id={user.userId}
+            name={user?.name}
+            id={user?.userId}
             width={64}
             editable={hasEditAuth}
             onEditUser={onEditUserHandler}

package/src/components/okr-share/index.tsx

@@ -8,7 +8,7 @@ import './index.scss';
 interface Props {
   closeModal: Function;
   getModalRef: Function;
-  data: ShareData;
+  data: any;
 }
 
 const ShareContent = function({ closeModal, getModalRef, data }: Props) {
@@ -41,23 +41,10 @@ const ShareContent = function({ closeModal, getModalRef, data }: Props) {
     </Queue>
   );
 };
-export interface ShareData {
-  okrName: string;
-  okrId: number;
-  krs: string[];
-  user: {
-    name: string;
-    userId: number;
-    departmentName: string;
-    departmentId: number;
-    avatar: {
-      color: string;
-      src?: string;
-    };
-  };
-}
+
 interface ShareProps {
-  data: ShareData;
+  shareComponent
+  data: any;
   visible:boolean;
   onClose: () => void
 }

package/src/components/scrollbar/index.tsx

@@ -11,13 +11,14 @@ interface Props {
 }
 
 export default (props: Props) => {
-  const { children, style } = props;
+  const { children, style,...restProps } = props;
 
   // @ts-ignore
   return <SimpleBar
     className={classNames(preCls)}
     timeout={800}
     style={style}
+    {...restProps}
   >
     {children}
   </SimpleBar>

package/src/components/select-tags/index.scss

@@ -1,4 +1,6 @@
-.titaui-select {
+.titaui-select-tags {
+  display: flex;
+
   .rc-select-single:not(.rc-select-customize-input) .rc-select-selector {
     border: 1px solid #DFE3EA;
   }
@@ -18,6 +20,10 @@
     display: none;
   }
 
+  .rc-select-multiple .rc-select-selector .rc-select-selection-overflow {
+    overflow: hidden;
+  }
+
   .rc-select-single:not(.rc-select-customize-input) .rc-select-selector .rc-select-selection-search-input {
     display: none;
   }
@@ -46,6 +52,8 @@
     height: unset;
     padding: 7px 12px 0;
     border: 1px solid #DFE3EA;
+    max-height: 116px;
+    overflow: auto;
   }
 
   .rc-select-multiple .rc-select-selector .rc-select-selection-overflow-item {

package/src/components/select-tags/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState, useEffect, useRef } from "react";
+import React, { FC, useState } from "react";
 import Select, { Option } from "rc-select";
 import classNames from "classnames";
 import "rc-select/assets/index.less";
@@ -11,7 +11,7 @@ interface DataProps {
 
 interface Props {
   data: DataProps[];
-  name?:any;
+  name?: any;
   selected: any;
   onChange: Function;
   mode?: any | "single" | "multiple";
@@ -19,10 +19,10 @@ interface Props {
   placeholder?: string;
   className?: any;
   noBorder?: boolean;
-  suffix?:string;
+  suffix?: string;
 }
 
-const preCls = "titaui-select";
+const preCls = "titaui-select-tags";
 
 const SelectTags: FC<Props> = ({
   selected = [],
@@ -31,26 +31,23 @@ const SelectTags: FC<Props> = ({
   style = { width: "200px" },
   mode = "single",
   className,
-  placeholder='请选择',
+  placeholder = "请选择",
   name,
   noBorder,
   ...restProps
 }) => {
-
   const [value, setValue] = useState(selected);
 
   const onhandleChange = (value, options) => {
-    onChange && onChange(value, options,name);
+    onChange && onChange(value, options, name);
     setValue(value);
   };
 
   return (
     <div className={preCls}>
       <Select
-        className={classNames(className,{[`${preCls}-noborder`]: noBorder},)}
-        dropdownClassName={classNames(
-          `titaui-dropDown`,
-        {
+        className={classNames(className, { [`${preCls}-noborder`]: noBorder })}
+        dropdownClassName={classNames(`titaui-dropDown`, {
           [`${preCls}-hasSelectItem`]: mode === "multiple",
         })}
         value={value}
@@ -75,7 +72,6 @@ const SelectTags: FC<Props> = ({
         })}
       </Select>
     </div>
-
   );
 };
 

package/src/components/weekly-report/board.tsx

@@ -0,0 +1,25 @@
+import React, { ReactElement } from 'react'
+
+interface Props {
+  percent: number
+}
+const preCls = 'weekly-report-card-board'
+
+function Board({percent}: Props): ReactElement {
+  return (
+    <div className={preCls}>
+      <div className={preCls+'__done'}>
+        <div className={preCls+'__undone'}style={{transform:`rotate(${percent/100 * 180}deg)`}}/>
+        <div className={preCls+'__space'} style={{transform:'rotate(45deg)'}}/>
+        <div className={preCls+'__space'} />
+        <div className={preCls+'__space'} style={{transform:'rotate(-45deg)'}}/>
+      </div>
+      
+      <div className={preCls+'__center'}>
+        <div>{percent}%</div>
+      </div>
+    </div>
+  )
+}
+
+export default Board

package/src/components/weekly-report/card.tsx

@@ -0,0 +1,125 @@
+import React, { forwardRef, ReactElement, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import html2Canvas from 'html2canvas'
+import Board from './board';
+import { getLoginUserInfo } from '../../utils/helpers';
+import { drawAvatar } from './common-painter/darwAvatar';
+import drawName from './common-painter/drawName';
+import Statistics from './statistics';
+import {isWx} from '../../utils/bs-global'
+import './index.scss';
+import { rpost } from '../../utils/request';
+
+const preCls = 'weekly-report-card';
+
+interface Props {}
+const getImageBase64ByUrl = toUserId => {
+  return rpost('v1')(`okr/share/getBase64Str`, { toUserId })
+    .then(getBase64Str => {
+      return getBase64Str.Data;
+    })
+}
+function Card({}: Props,ref): ReactElement {
+  const [avatarSrc, setAvatarSrc] = useState<string>();
+  const [nameSrc,setNameSrc] = useState<string>()
+  const loginUserInfo = getLoginUserInfo();
+  const cardRef = useRef()
+  useImperativeHandle(ref,()=>({
+    getImage: async function(){
+      return new Promise(res => {
+        let shareContent = cardRef.current, //需要截图的包裹的（原生的）DOM 对象
+        // @ts-ignore
+        width = 375,          //获取dom 宽度
+        // @ts-ignore
+        height = 710,        //获取dom 高度
+        canvas = document.createElement("canvas"), //创建一个canvas节点
+        scale = 2;                                 //定义任意放大倍数 支持小数
+        canvas.width = width * scale;              //定义canvas 宽度 * 缩放
+        canvas.height = height * scale;            //定义canvas高度 *缩放
+        // @ts-ignore
+        canvas.style.width = width + "px";
+        // @ts-ignore
+        canvas.style.height = height + "px";
+        // @ts-ignore
+        let opts = {
+          backgroundColor: null, // 背景透明
+          scale: scale,          // 添加的scale 参数
+          canvas: canvas,        // 自定义 canvas
+          logging: false,        // 日志开关，便于查看html2canvas的内部执行流程
+          width: width,          // dom 原始宽度
+          height: height,
+          useCORS: true          // 【重要】开启跨域配置
+        }
+        html2Canvas(cardRef.current as any, opts).then(canvas => {
+          let imgUrl = canvas.toDataURL('image/png'); //得到图片的base64编码数据
+          res(imgUrl)
+        })
+      })
+      
+    }
+  }),[])
+  useEffect(() => {
+    if (isWx()) {
+      window['WWOpenData'] && window['WWOpenData'].enableCanvasSharing && window['WWOpenData'].enableCanvasSharing()
+    }
+    if (loginUserInfo.UserAvatar.HasAvatar) {
+      getImageBase64ByUrl(loginUserInfo.Id).then((data) =>
+        drawAvatar(
+          {
+            name: loginUserInfo.Name,
+            userId: loginUserInfo.Id,
+            color: loginUserInfo.UserAvatar.Color,
+          },
+          'data:image/jpeg;base64,' + data.obj,
+        ),
+      ).then(setAvatarSrc);
+    }else {
+      drawAvatar(
+        {
+          name: loginUserInfo.Name,
+          userId: loginUserInfo.Id,
+          color: loginUserInfo.UserAvatar.Color,
+        },
+        '',
+      ).then(setAvatarSrc);
+    }
+    drawName(loginUserInfo.Name,loginUserInfo.Id).then(setNameSrc)
+    return () => {
+      if (isWx()) {
+        window['WWOpenData'] && window['WWOpenData'].disableCanvasSharing && window['WWOpenData'].disableCanvasSharing()
+      }
+    }
+  }, []);
+
+  return (
+      <div className={preCls + '-content'} ref={cardRef}>
+        <img className={preCls + '__title'} src={require('./img/title.png')} />
+        <div className={preCls + '__date-range'}>6月7日-6月11日</div>
+        <div className={preCls + '__shadow'} />
+        <img className={preCls + '__laba'} src={require('./img/laba.png')}/>
+        <img className={preCls + '__bofang'} src={require('./img/bofang.png')}/>
+        <div className={preCls + '__body'}>
+          <div className={preCls + '__avatar'}>
+            <img src={avatarSrc} />
+          </div>
+          <img className={preCls + '__userName'} src={nameSrc}/>
+          <img className={preCls + '__quote'} src={require('./img/quote.png')} alt="" />
+          <div className={preCls + '__text'}>
+            坚持每周反馈才是真正的优秀真正的优秀
+          </div>
+          <Board percent={80} />
+          <div className={preCls + '__comparison'}>
+            OKR 完成度
+            <img className={preCls + '__direction'} src={require('./img/up.png')} alt="" />
+            <span style={{color:'#4DC591'}}>20%</span>
+          </div>
+          <div className={preCls + '__colleague'}>
+            恭喜超越了 <span>80%</span> 的同事
+          </div>
+          <Statistics/>
+        </div>
+        <img className={preCls + '__bottom'} src={require('./img/bottom.png')}/>
+      </div>
+  );
+}
+
+export default forwardRef(Card);

package/src/components/weekly-report/common-painter/darwAvatar.ts

@@ -0,0 +1,81 @@
+import openDataPainter from "./openDataPainter";
+import setSize from "./setSize";
+import { drawImage } from "./utils";
+
+interface avatarParms {
+  url?: string;
+  color?: string;
+  name: string;
+  id: number;
+  width: number;
+  height: number;
+  x: number;
+  y: number;
+  maxNameWidth?: number;
+}
+export async function drawAvatar(shareData, avatar: string) {
+  if (window['WWOpenData'] && window['WWOpenData'].initCanvas) {
+    window['WWOpenData'].initCanvas()
+  }
+  const canvas = document.createElement('canvas');
+  let ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
+  setSize(canvas, ctx, 72, 72);
+  ctx.beginPath();
+  await draw(ctx, {
+    width: 72,
+    height: 72,
+    x: 0,
+    y: 0,
+    url: avatar,
+    name: shareData.name,
+    id: shareData.userId,
+    color: shareData.color
+  });
+  const dataUrl = canvas.toDataURL();
+
+  return dataUrl;
+}
+ async function draw (ctx: CanvasRenderingContext2D, params: avatarParms):Promise<number> {
+  ctx.save();
+  ctx.beginPath();
+  ctx.arc(
+    params.width / 2 + params.x,
+    params.height / 2 + params.y,
+    params.width / 2,
+    0,
+    Math.PI * 2,
+    false,
+  );
+  ctx.clip();
+  ctx.closePath();
+  params.url ? await drawImageAvatar(ctx, params) : await drawTextAvatar(ctx, params);
+  ctx.restore();
+  return params.y + params.height;
+  
+}
+function drawImageAvatar(ctx: CanvasRenderingContext2D, avatar: avatarParms) {
+  return  drawImage(ctx,avatar.url as string,avatar.x,avatar.y,avatar.width,avatar.height)
+}
+function drawTextAvatar(ctx: CanvasRenderingContext2D, avatar: avatarParms) {
+  console.log('text')
+  const maxNameWidth = avatar.maxNameWidth || 28;
+  return new Promise<void>(async resolve => {
+    ctx.fillStyle = avatar.color as string;
+    ctx.fill();
+
+    ctx.closePath();
+    ctx.fillStyle = 'white';
+    ctx.font = '14px arial';
+    ctx.textBaseline = 'bottom';
+    let namePainter = await openDataPainter(ctx,{id:avatar.id,name:avatar.name,type:'userName'},22,maxNameWidth);
+    const { width, height } = namePainter;
+  
+    namePainter.draw(
+      ctx,
+      avatar.x + avatar.width / 2 - width / 2,
+      avatar.y + avatar.height / 2 - height / 2,
+    );
+    ctx.closePath();
+    resolve();
+  });
+}

package/src/components/weekly-report/common-painter/drawName.ts

@@ -0,0 +1,19 @@
+import openDataPainter from "./openDataPainter";
+import setSize from "./setSize";
+
+export default async function(name,id){
+  const canvas = document.createElement('canvas');
+  let ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
+  setSize(canvas, ctx, 295, 24);
+  ctx.beginPath();
+  const lineHeight = 24;
+  ctx.font = `bold 16px/${lineHeight}px arial,sans-serif`;
+  ctx.fillStyle = '#141C28';
+  ctx.textBaseline='middle';
+  const painter = await openDataPainter(ctx, {name,id,type:'userName'},24,295);
+  let x = (295 - (painter.width)) / 2
+  painter.draw(ctx,x,0)
+  const dataUrl = canvas.toDataURL();
+
+  return dataUrl;
+}

package/src/components/weekly-report/common-painter/openDataPainter.ts

@@ -0,0 +1,47 @@
+import { getOpenId } from "&/components/common/openData";
+import { isWx } from "&/components/helper";
+
+
+interface openDataParam {
+  id: number; name: string; type: 'userName' | 'departmentName'
+}
+
+export default async function (
+  ctx: CanvasRenderingContext2D,
+  openDataParams: openDataParam,
+  lineHeight: number,
+  maxWidth: number = Infinity
+) {
+  let name = openDataParams.name
+  if (isWx()) {
+    name = await getOpenData(openDataParams)
+  }
+  const { width } = ctx.measureText(name);
+  let actualWidth = Math.min(width, maxWidth)
+  return {
+    width: actualWidth,
+    height: lineHeight,
+    draw: function (ctx: CanvasRenderingContext2D, x: number, y: number) {
+      ctx.save()
+      ctx.textBaseline = 'middle';
+      ctx.beginPath();
+      ctx.rect(x, y, actualWidth, lineHeight);
+      ctx.clip();
+      ctx.fillText(name, x, y + lineHeight / 2);
+      ctx.closePath()
+      ctx.restore()
+    }
+  }
+}
+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)
+    })
+  })
+}

package/src/components/weekly-report/common-painter/setSize.ts

@@ -0,0 +1,12 @@
+export default function (canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D, width, height) {
+  const devicePixelRatio = window.devicePixelRatio || 1;
+  const data = ctx.getImageData(0, 0, canvas.width, canvas.height);
+  //要将 canvas 的宽高设置成容器宽高的 2 倍
+  canvas.width = width * devicePixelRatio;
+  canvas.height = height * devicePixelRatio;
+  canvas.style.width = width + 'px';
+  canvas.style.height = height + 'px';
+  //然后将画布缩放，将图像放大两倍画到画布上
+  ctx.scale(devicePixelRatio, devicePixelRatio);
+  ctx.putImageData(data, 0, 0);
+}

package/src/components/weekly-report/common-painter/utils.ts

@@ -0,0 +1,83 @@
+export function drawImage(
+  ctx: CanvasRenderingContext2D,
+  url: string,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+) {
+  return new Promise<void>(res => {
+    const img = new Image();
+    img.src = url;
+    img.onload = function () {
+      ctx.drawImage(img, x, y, width, height);
+      res();
+    };
+  });
+}
+export function drawTextMiddle(
+  ctx: CanvasRenderingContext2D,
+  text: string,
+  x: number,
+  y: number,
+  lineHeight: number,
+  maxWidth?: number,
+  textAlign?: 'left' | 'center'
+) {
+  ctx.textBaseline = 'middle';
+  if (!maxWidth) {
+
+    ctx.fillText(text, x, y + lineHeight / 2);
+    return y + lineHeight;
+  }
+  const lines = breakLinesForCanvas(ctx, text, maxWidth);
+  lines.forEach((l) => {
+    const { width } = ctx.measureText(l)
+    let left = x;
+    if (textAlign == 'center' && maxWidth) {
+      console.log(maxWidth, width)
+      left = (maxWidth - width) / 2 + x
+    }
+    ctx.fillText(l, left, y + lineHeight / 2);
+
+    y = y + lineHeight;
+  })
+  return y
+}
+function findBreakPoint(text, width, context) {
+  var min = 0;
+  var max = text.length - 1;
+
+  while (min <= max) {
+    var middle = Math.floor((min + max) / 2);
+    var middleWidth = context.measureText(text.substr(0, middle)).width;
+    var oneCharWiderThanMiddleWidth = context.measureText(text.substr(0, middle + 1)).width;
+    if (middleWidth <= width && oneCharWiderThanMiddleWidth > width) {
+      return middle;
+    }
+    if (middleWidth < width) {
+      min = middle + 1;
+    } else {
+      max = middle - 1;
+    }
+  }
+
+  return -1;
+}
+
+export function breakLinesForCanvas(ctx: CanvasRenderingContext2D, text: string, width: number) {
+  var result: string[] = [];
+  var breakPoint = 0;
+
+
+  while ((breakPoint = findBreakPoint(text, width, ctx)) !== -1) {
+    result.push(text.substr(0, breakPoint));
+    text = text.substr(breakPoint);
+  }
+
+  if (text) {
+    result.push(text);
+  }
+
+  return result;
+}