@titaui/pc 1.7.13 → 1.7.17

package/src/components/okrcase-library/okrcases-components/caseLibrary-nav.tsx

@@ -0,0 +1,78 @@
+import React, { useState, useEffect, Fragment } from "react";
+import SlideInput from '../../slider-input'
+import { NavList, CardList } from '../index'
+
+interface Props {
+  navList: NavList;
+  isfix: boolean;
+  activeNavId: number;
+  handleNavItemClick: Function;
+  handleSearch: Function;
+  onClose?: Function;
+  secondNavList: NavList;
+  secondActiveNavId: number;
+  handleSecondNavItemClick: Function;
+  cardList: CardList;
+  fixNavTopScroll: number;
+}
+
+const CaseLibraryNav = (props: Props) => {
+
+  const { navList, isfix, activeNavId, handleNavItemClick, handleSearch,
+    onClose, secondNavList, secondActiveNavId, handleSecondNavItemClick, cardList, fixNavTopScroll } = props
+
+  const [isSearchOpen, setIsSearchOpen] = useState(false)
+
+  return (
+    <Fragment>
+      {isfix && <div style={{ height: '56px' }} id='NavAnchor' />}
+      <div className={`okr-cases-library__navFirst 
+            ${isfix && cardList.length && 'okr-cases-library__navFirst-fixed'}`}
+        style={{ top: fixNavTopScroll }}
+      >
+        {
+          navList.map((item) => (
+            <div className={`okr-cases-library__navFirst__item ${item.id === activeNavId && 'okr-cases-library__navFirst__item-active'} `}
+              key={item.id} onClick={() => handleNavItemClick(item.id)}
+            >{item.name}
+            </div>
+          ))
+        }
+        {isfix &&
+          <Fragment>
+            {isSearchOpen && <div className="transparent-mask" style={{ right: '220px' }} />}
+            <div className="okr-cases-library__navFirst-slideInput-wapper"
+              style={{ width: isSearchOpen ? '200px' : '32px', right: onClose ? '70px' : '20px' }}>
+              <SlideInput
+                style={{
+                  position: 'absolute',
+                  right: 0
+                }}
+                placeholder="请输入关键字来搜索"
+                onChange={handleSearch}
+                onActive={() => { setIsSearchOpen(true) }}
+                onClose={() => { setIsSearchOpen(false) }}
+              />
+            </div>
+          </Fragment>
+        }
+        {onClose && isfix && <div className="okr-cases-library__navFirst__closeBtn" onClick={() => onClose()}>
+          <div className="tu-icon-canceled" />
+        </div>}
+      </div >
+      {
+        (!!secondNavList.length) && <div className='okr-cases-library__navSecond'>
+          {
+            secondNavList.map((item) => (
+              <div className={`okr-cases-library__navSecond__item ${item.id === secondActiveNavId && 'okr-cases-library__navSecond__item-active'} `}
+                key={item.id} onClick={() => handleSecondNavItemClick(item.id, item.name)}
+              >{item.name} </div>
+            ))
+          }
+        </div>
+      }
+    </Fragment >
+  )
+}
+
+export default CaseLibraryNav

package/src/components/okrcase-library/okrcases-components/caseLibray-header.tsx

@@ -0,0 +1,46 @@
+import React, { useRef } from 'react';
+
+interface Props {
+  onClose?: Function;
+  handleSearch: Function;
+}
+
+const CaseLibraryHeader = (props: Props) => {
+  const { onClose, handleSearch } = props
+
+  const searchRef = useRef<any>()
+
+  const onhandleEnter = (e) => {
+    if (e.keyCode === 13) {
+      handleSearch(searchRef.current.value)
+    }
+  }
+
+  return (
+    <div className="okr-cases-library__header">
+
+      {/* <div className="okr-cases-library__header-mask" /> */}
+      <div className="okr-cases-library__header-light" />
+
+      <div className="okr-cases-library__header__search">
+        <input
+          className="okr-cases-library__header__search__input"
+          placeholder="搜索发现更多行业案例"
+          ref={searchRef}
+          onKeyDown={e => onhandleEnter(e)}
+        />
+        <div className="okr-cases-library__header__search__btn"
+          onClick={() => handleSearch(searchRef.current.value)}
+        >
+          <span className='tu-icon-search' /> 搜索
+        </div>
+      </div>
+      {onClose && <div className="okr-cases-library__header__closeBtn" onClick={() => onClose()}>
+        <div className="tu-icon-canceled" />
+      </div>}
+    </div>
+  )
+}
+
+
+export default CaseLibraryHeader

package/src/components/okrcase-library/okrcases-components/submitOkr-dialog.tsx

@@ -0,0 +1,190 @@
+import React, { useRef, useEffect, useState } from "react";
+import { postSurvey, getOkrOrderInfo, getOkrCaseProducts, postOkrCasesOrder } from '../server/network'
+import Toast from '../../toast';
+import { Modal } from 'tita-ui';
+import Dialog from '../../dialog'
+import Form from '../../form'
+const { Fields } = Form
+
+interface Props1 {
+  handleShowSubmitOkrWindow: Function;
+  isShowSubmitOkrWindow: boolean;
+  allViewAreaRef: any;
+}
+export const SubmitDialog = (props: Props1) => {
+
+  const { handleShowSubmitOkrWindow, isShowSubmitOkrWindow, allViewAreaRef } = props
+  const [type, setType] = useState('')
+  const [job, setJob] = useState('')
+  const [scene, setScene] = useState('')
+
+  const formRef = useRef<any>()
+
+  const onSubmitButtonClick = () => {
+    const body = {
+      type,
+      position: job,
+      scene
+    }
+    //校验
+    const err = formRef.current.verifing({ truonlyFirstErrore: false })
+    if (err.length) {
+      console.log(err);
+    } else {
+      postSurvey(body).then((res) => {
+        Toast.Success('发送成功')
+        handleShowSubmitOkrWindow(false)
+      }).catch(() => {
+        Toast.Warning('发送失败')
+      })
+    }
+
+  }
+
+
+  return (
+    <Dialog visible={isShowSubmitOkrWindow} noFooter width="480px" destroyOnClose noCloseIcon getContainer={() => allViewAreaRef.current}>
+      <div className="okr-cases-library__submitWindow">
+        <img src={require('../image/submit小驴.svg')} />
+        <div className="tu-icon-canceled" onClick={() => handleShowSubmitOkrWindow(false)} />
+        <Form ref={formRef}>
+          <Fields.Input
+            name="type"
+            label={"OKR 的类型"}
+            placeholder={"如销售团队"}
+            require={true}
+            verifies={[{
+              'tip': "OKR类型不能为空",
+              'test': /\S/,
+            }]}
+            onChange={setType}
+          />
+          <Fields.Input
+            name="job"
+            label={"OKR 的岗位"}
+            placeholder={"如销售VP"}
+            require={true}
+            verifies={[{
+              'tip': "OKR岗位不能为空",
+              'test': /\S/,
+            }]}
+            onChange={setJob}
+          />
+          <Fields.Textarea
+            name="scene"
+            label={'OKR 应用场景'}
+            placeholder='如销售VP针对 「如何管理好团队」这个问题，应该创建怎样的 目标及关键成果'
+            require={false}
+            onChange={setScene}
+            resizeType='none'
+            areaHeight={96}
+          />
+        </Form>
+        <div className="okr-cases-library__submitWindow-submitButton"
+          onClick={onSubmitButtonClick}>提交</div>
+      </div>
+    </Dialog>
+
+  )
+}
+
+interface Props2 {
+  isShowPayWindow: boolean;
+  handleShowPayWindow: Function;
+  allViewAreaRef: any;
+}
+
+
+export const PayDialog = (props: Props2) => {
+  const { isShowPayWindow, handleShowPayWindow, allViewAreaRef } = props
+
+  const getOrderInfoTimers = useRef(0);
+  const [price, setPrice] = useState();
+  const [packageId] = useState(() => {
+    //@ts-ignore
+    const { Version } = window.BSGlobal.tenantAuthentication;
+    //@ts-ignore
+    const { tenantType } = window.BSGlobal.tenantInfo;
+    // 外部注冊賬號使用的產品ID不同
+    if (Version == 1 && tenantType == 3) return 'D9E059E4-4303-4EE2-9275-AE2FA74BBAA6';
+    return '60AFAD35-5273-4A06-B2F4-9A3193096BE7'
+  });
+  const [orderId, setOrderId] = useState('');
+  const [payCode, setPayCode] = useState('directPay');
+  const [payName, setPayName] = useState('支付宝');
+
+  useEffect(() => {
+    // 获取OKR产品信息
+    getOkrCaseProducts(packageId).then(products => {
+      if (!products.length) return;
+      const { 'Id': productId, priceY, name } = products[0];
+
+      setPrice(priceY);
+
+      // 获取订单信息
+      postOkrCasesOrder({
+        'PackageId': packageId,
+        'Description': name,
+        'Products': [{
+          'ProductId': productId,
+          'Total': 1,
+        }]
+      }).then(orderInfo => {
+        const { 'Id': orderId, AliModel } = orderInfo;
+        const { PayCode, PayName } = AliModel;
+        setPayCode(PayCode);
+        setOrderId(orderId);
+        setPayName(PayName);
+      });
+    });
+  }, [])
+
+  //点击立即支付后，2分钟内，每个10s，循环获取订单信息
+  const loopOrderInfo = orderId => {
+    if (getOrderInfoTimers.current === 12) {
+      getOrderInfoTimers.current = 1
+    }
+    setTimeout(() => {
+      // 循环获取订单信息 2 分钟
+      if (getOrderInfoTimers.current < 12) {
+        getOkrOrderInfo(orderId).then(res => {
+          getOrderInfoTimers.current += 1;
+          //@ts-ignore
+          const { OrderStatus } = res
+          // 未支付成功重新获取订单
+          if (OrderStatus != 2) {
+            loopOrderInfo(orderId)
+          } else {
+            // 订单已支付
+            Modal.success({
+              'title': '支付成功',
+              'content': 'OKR案例库已开通',
+              'okText': '立即使用',
+              'onOk': async () => {
+                // 跳转页面
+                window.location.reload()
+              },
+            });
+          }
+        })
+      }
+    }, 10 * 1000); // 10s
+  }
+
+  return (
+    <Dialog visible={isShowPayWindow} noFooter width="480px" destroyOnClose noCloseIcon getContainer={() => allViewAreaRef.current}>
+      <div className="okr-cases-library__payWindow">
+        <img src={require('../image/支付背景浮出.png')} />
+        <div className="tu-icon-canceled" onClick={() => handleShowPayWindow(false)} style={{ width: '18px', height: '18px' }} />
+        <p className="okr-cases-library__payWindow__head">{price} 购买千份 OKR 案例库</p>
+        <p className="okr-cases-library__payWindow__detail">可查看 使用案例库所有行业的案例 <a href="https://club.tita.com/okr-examples" target="_blank">查看详情</a></p>
+        <div className="okr-cases-library__payWindow__amount">应付金额：<b><span style={{ fontSize: '32px' }}>19.8</span>元/年</b></div>
+        <a className="okr-cases-library__payWindow__payButton" onClick={() => loopOrderInfo(orderId)}
+          href={`/app/payorder?orderid=${orderId}&mobile=13552865071&defcode=${payCode}&defCodeName=${payName}&IsContactCustomerService=false`} target="_blank">
+          立即支付</a>
+      </div>
+    </Dialog>
+
+  )
+}
+

package/src/components/okrcase-library/server/network.js

@@ -0,0 +1,110 @@
+import { useState } from "react";
+import axios from 'axios';
+import { getApiUrl } from '../../../utils/request-v1';
+
+const labelUrl = getApiUrl('okrTemplate/getLabel');
+const caseUrl = getApiUrl('okrTemplate/getByLabel');
+const email_usUrl = getApiUrl('okrTemplate/sedEmail');
+const searchUrl = getApiUrl('okrTemplate/search');
+const surveyUrl = getApiUrl('okrTemplate/survey')
+const applyUrl = getApiUrl('okrTemplate/usedTemplate')
+const likeUrl = getApiUrl('okrTemplate/like')
+const articleUrl = getApiUrl('okrTemplate/article')
+const totalNumberUrl = getApiUrl('okrTemplate/allTemplateNum')
+const isHadBuyOKRcasesUrl = getApiUrl('PayService/buyOkrTemplate')
+const PayOrderUrl = getApiUrl('PayService/PayOrder')
+const ProductsUrl = getApiUrl('PayService/products')
+const OkrCasesOrderUrl = getApiUrl('PayService/CommitOrder')
+
+const pageParam = { pageSize: 10 }//一次加载的个数
+
+// 对象转 queryParams
+const queryParams = (params = {}) => {
+  let queryStr = '?';
+  for (const key in params) {
+    if (params.hasOwnProperty(key)) {
+      queryStr = queryStr + `${key}=${params[key]}&`;
+    }
+  }
+  return queryStr.length == 1 ? '' : queryStr.slice(0, -1)
+}
+
+//搜索
+export const postSearchCases = async (value = '', pageNum = 1) => {
+  const res = await axios.post(searchUrl, {
+    ...pageParam,
+    key: value,
+    pageNumber: pageNum
+  })
+  return res.data
+}
+
+// 请求案例
+export const postForCases = async (body = {}) => {
+  const res = await axios.post(caseUrl, { ...pageParam, ...body })
+  return res.data.Data
+}
+
+//请求标签信息
+export const getLabels = async (param = {}) => {
+  const res = await axios.get(labelUrl + queryParams({ ...param }))
+  return res.data.Data
+}
+
+//发送我想要的okr类型
+export const postSurvey = (body = {}) => {
+  return axios.post(surveyUrl, { ...body })
+}
+
+//套用接口
+export const postApply = (templateId) => {
+  return axios.post(applyUrl, { templateId })
+}
+
+//点赞接口
+export const postLike = (type, templateId) => {
+  return axios.post(likeUrl, { type, templateId })
+}
+
+//文章接口
+export const getEssay = async (activeNavId = 0) => {
+
+  const res = await axios.get(articleUrl + queryParams({
+    "labelId": activeNavId,
+    "pageNum": 0,
+    "pageSize": 0,
+  }))
+  return res.data.Data
+}
+
+//案例总数
+export const gettotalNumber = async () => {
+  const res = await axios.get(totalNumberUrl)
+  return res.data.Data.obj
+}
+
+//是否购买案例库
+export const getIsHadBuyOKRcases = async () => {
+  const res = await axios.get(isHadBuyOKRcasesUrl)
+  return res.data.Data
+}
+
+//获取产品信息
+export const getOkrCaseProducts = async (packageId) => {
+  const res = await axios.get(ProductsUrl + queryParams({ 'packageId': packageId }))
+  return res.data.Data
+}
+
+//提交订单
+export const postOkrCasesOrder = async (params = {}) => {
+  const res = await axios.post(OkrCasesOrderUrl, { ...params })
+
+  return res.data.Data
+}
+
+//获取订单信息 （通过state判断是否支付）
+export const getOkrOrderInfo = async (orderId) => {
+  const res = await axios.get(PayOrderUrl + queryParams({ 'order_id': orderId }))
+
+  return res.data.Data
+}

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

@@ -0,0 +1,157 @@
+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 '../okrcase-library/index.scss';
+
+interface Props {
+  onApplyTpl: Function;
+  cardInfo: CardItem;
+  index: number;
+}
+
+const OkrCaseCard = (props: Props) => {
+  const { onApplyTpl, cardInfo, index } = props;
+  const { parentName, name, subelements, usedNum, id, isLike, like } = cardInfo;
+
+  const [likeNum, setLikeNum] = useState(like);
+  const [hasLike, setHasLike] = useState(isLike);
+  const [usedNumber, setUsedNumber] = useState(usedNum);
+
+  const [isApplyBtnShow, setIsApplyBtnShow] = useState(false);
+  // const [isBlue, setIsBlue] = useState(index % 4 > 1 ? true : false)
+  const isBlue = index % 4 > 1 ? true : false;
+  const likeRef = useRef<any>();
+
+  useEffect(() => {
+    setLikeNum(like);
+    setHasLike(isLike);
+    setUsedNumber(usedNum);
+  }, []);
+
+  const setFirework = useCallback(() => {
+    const { x, y } = (likeRef.current as any).getBoundingClientRect();
+    firework({
+      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'),
+      ],
+    });
+  }, []);
+
+  const handleLikeClick = (isLike, id) => {
+    setHasLike(!hasLike);
+    if (isLike) {
+      postLike(0, id);
+      setLikeNum(likeNum - 1);
+    } else {
+      setLikeNum(likeNum + 1);
+      postLike(1, id);
+      setFirework();
+    }
+  };
+
+  const handleApplyBtnClick = (id) => {
+    setUsedNumber(usedNumber + 1);
+    postApply(id);
+    onApplyTpl(cardInfo);
+    // @ts-ignore
+    window.titaTracker &&
+      // @ts-ignore
+      window.titaTracker('action').record({
+        action: '套用',
+        actionGroup: '案例库',
+        productName: '案例库',
+      });
+  };
+
+  return (
+    <div
+      className="okr-cases-library__cardList__card"
+      onMouseEnter={() => setIsApplyBtnShow(true)}
+      onMouseLeave={() => setIsApplyBtnShow(false)}
+    >
+      <div
+        className={`okr-cases-library__cardList__card__title
+            ${
+              isBlue
+                ? 'okr-cases-library__cardList__card__title-blue'
+                : 'okr-cases-library__cardList__card__title-red'
+            }`}
+      >
+        <div className="okr-cases-library__cardList__card__title__label">
+          「{parentName}」
+        </div>
+        <div className="okr-cases-library__cardList__card__title__name">
+          O {name}
+        </div>
+        {
+          <div
+            className={`okr-cases-library__cardList__card__title__btn 
+                ${
+                  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'
+                }`}
+            onClick={() => handleApplyBtnClick(id)}
+          >
+            套用
+          </div>
+        }
+      </div>
+      <div className="okr-cases-library__cardList__card__content">
+        {subelements.map((item, krindex) => (
+          <div
+            className="okr-cases-library__cardList__card__content__kr"
+            key={krindex}
+          >
+            <div
+              style={{
+                color: isBlue ? '#2879FF' : '#F05E5E',
+                float: 'left',
+                marginRight: '5px',
+              }}
+            >
+              KR{krindex + 1}{' '}
+            </div>
+            <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>
+          {hasLike ? (
+            <img
+              src={require('../okrcase-library/image/thumb-up.svg')}
+              onClick={() => handleLikeClick(hasLike, id)}
+              style={{ cursor: 'pointer' }}
+            />
+          ) : (
+            <span
+              className="tu-icon-dianzan"
+              onClick={() => handleLikeClick(hasLike, id)}
+              ref={likeRef}
+            />
+          )}
+          {likeNum}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default OkrCaseCard;

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

@@ -0,0 +1,76 @@
+import { getOpenId } from "../../utils/open-data";
+import { isWx } from "../../utils/bs-global";
+
+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()
+    }
+  }
+}
+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)
+    })
+})
+}
+
+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.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);
+}
+
+export const fittingString = (_ctx, str, maxWidth) => {
+  let strWidth = _ctx.measureText(str).width;
+  const ellipsis = "…";
+  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;
+  }
+};

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

@@ -0,0 +1,32 @@
+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
+  operationTrack: any
+}
+
+export default class OperationRecordItem extends Component<Props> {
+
+  render() {
+    const { operationTrack, className } = this.props
+    return (
+      <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 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>
+        </OperationContentWrapper>
+        <OperationRecordItemDot className="operation__dot"></OperationRecordItemDot>
+        <OperationRecordItemLine className="operation__line"></OperationRecordItemLine>
+      </OperationRecordItemWrapper>
+    )
+  }
+}