安装

npm i @beisen-cmps/italent-create-summary -S

前提

使用

import * as React from 'react';
import AtOther,{AtOtherPreview} from '../../src';

interface IUserInfo{
  Id:number
}

interface Props{

}

const Demo:React.FC<Props> = props=>{
  let wrapArea = React.useRef<HTMLDivElement>(null);
  let [width,setWidth] = React.useState<number>(100)
  const [otherUsers,setOtherUsers] = React.useState<IUserInfo[]>([]);//@Ta人可见

  function changeWidth(){
    //窗口拖拽，重新计算宽度
    setWidth(100)
  }

  const onDeleteUser = React.useCallback((id:number)=>{
    let index = otherUsers.findIndex(ou=>ou.Id === id)
    setOtherUsers([
      ...otherUsers.slice(0,index),
      ...otherUsers.slice(index+1)
    ])
  },[otherUsers])

  const selectOther = React.useCallback((users:IUserInfo[])=>{//添加
    let nextUsers = otherUsers.concat(users);
    let res:IUserInfo[] = [], obj = {};
    //去重
    nextUsers.forEach(u=>{
      if(!obj[u.Id]){
        obj[u.Id] = true;
        res.push(u);
      }
    })
    setOtherUsers(res)
  },[otherUsers])

  return <div ref={wrapArea}>
    <AtOther changeWidth={changeWidth} width={width} selectedUser={otherUsers} 
    onDeleteUser={onDeleteUser} selectOther={selectOther}/>
    <AtOtherPreview width={width} viewPersonNum={200} selectedUser={otherUsers} />
  </div>
}

export default Demo;

参数

  lateSubmit:'晚于每周五 17:00 为延迟提交',//最晚提交提示
  title:'2019年5月第四周',//创建标题
  weekRange:'05/20 - 05/26',//创建副标题
  simplePlaceHolder:'快来记录你的工作成果吧，不断的总结成为更优秀的自己～',//简单模式下的placeHolder
  isCreate:true,//是否是创建
  createTitle:['本周工作总结','下周安排计划'],//标题文本
  summary:'',//总计
  plan:'',//计划
  uploadFileUrl:'',//附件上传地址
  atachments:[],//附件
  viewScope:[{ value:'0', label: '公开', isSelected:true },
    { value:'1', label: '指定部门可见', isSelected:false },
    { value:'2', label: '仅自己可见', isSelected:false }],//可见范围
  others:[],//at谁可见
  hideDraft:false,//显示保存草稿按钮
  hideCancel:false,//显示取消按钮
  onCancel:()=>{console.log('cancel')},//取消
  onDraft:()=>{console.log('saveDraft')},//保存草稿
  onSubmit:()=>{console.log('submit')},//提交

描述

仅支持react16。