@titaui/pc 1.7.49 → 1.7.53

package/src/components/okr-flow/open-data/index.js

@@ -0,0 +1,73 @@
+import React, { useRef, useEffect } from 'react';
+
+const WX_SOURCE = 860;
+const WX_UA_STR = 'micromessenger';
+
+const getGlobal = (key) => {
+  return window.BSGlobal[key];
+};
+
+export const getSource = () => getGlobal('tenantInfo').Source;
+
+export const isWechat = () => {
+  return getSource() == 860;
+}
+
+const getUA = () => navigator.userAgent.toLowerCase();
+
+export const getOpenId = (id, type) => {
+  let openIds;
+  if (type == 'userName') {
+    openIds = getGlobal('openIds');
+  } else if (type == 'departmentName') {
+    openIds = getGlobal('openDepartmentIds');
+  }
+  return openIds && openIds[id];
+}
+
+function openData(p) {
+  if (getSource() == WX_SOURCE || getUA().includes(WX_UA_STR)) {
+    return p => {
+      if (p.id === undefined) return p.name || null;
+      const openId = getOpenId(p.id, p.type);
+      if (!openId) return p.name || p.id || null;
+      const ref = useRef(null);
+      useEffect(() => {
+        window.WWOpenData && window.WWOpenData.bind(ref.current);
+      })
+      return (
+        <div
+          style={{
+            display: 'inline-block',
+            position: 'relative',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            verticalAlign: 'middle',
+          }}
+        >
+          <ww-open-data ref={ref} type={p.type} openid={openId} />
+          <div style={{
+            'position': 'absolute',
+            'top': 0,
+            'left': 0,
+            'right': 0,
+            'bottom': 0,
+            'zIndex': 1
+          }} />
+        </div>
+      );
+    }
+  } else {
+    return p => {
+      return p.name || p.id || null;
+    }
+  }
+}
+
+const getOpenData = openData();
+
+export const OpenUserName = (p) =>
+  getOpenData({ ...p, type: 'userName' })
+
+export const OpenDepartmentName = (p) =>
+  getOpenData({ ...p, type: 'departmentName' })

package/src/components/okr-flow/precls.js

@@ -0,0 +1 @@
+export default 'titaui-okr-flow';

package/src/components/okr-flow/request-apis.js

@@ -0,0 +1,53 @@
+import axios from 'axios';
+import qs from 'qs';
+
+export const tenantId = (window.BSGlobal && window.BSGlobal.tenantInfo.Id) || 0;
+export const userId = (window.BSGlobal && window.BSGlobal.loginUserInfo.Id) || 0;
+
+const requestDomain = () => {
+  if (!window.location.hostname.match(/dev/)) return '';
+  return 'https://www.tita.gift';
+};
+
+export const checkTenantOkrExist = async () => {
+  const result = await axios.get(`/api/v1/${tenantId}/${userId}/okr/map/exist`);
+  return result.data.Data;
+};
+
+export const searchOkrs = params => {
+  return axios
+    .post(`${requestDomain()}/api/v1/${tenantId}/${userId}/okr/search`, {
+      ...params,
+    })
+    .then(res => {
+      return res.data.Data;
+    });
+};
+
+export const expandNode = params => {
+  const { okrId = '', krId = '', childRoot = true, okrIdParent = 0,  currentOkrRole = true} = params;
+  return axios
+    .get(`${requestDomain()}/api/v1/${tenantId}/${userId}/okr/map/expand`, {
+      params: {
+        okrId,
+        krId,
+        childRoot, // true: 展开子节点, false: 展开父节点
+        okrIdParent, //  当前选中okr 或 当前选中kr 的okrId（kr的父节点是所属okr）
+        currentOkrRole // 查看权限
+      },
+    })
+    .then(res => {
+      return res.data.Data;
+    });
+};
+
+export const expandNodesByLevel = ({ level = 1, okrIds = [], showKr = 0 }) => {
+  // const queryStr = qs.stringify({ okrIds, level }, { arrayFormat: 'repeat' });
+  return axios.post(`${requestDomain()}/api/v1/${tenantId}/${userId}/okr/map/generalview`, {
+    okrIds,
+    level,
+    showKr
+  }).then(res => {
+    return res.data.Data;
+  });
+};

package/src/components/okr-flow/root-node/index.js

@@ -0,0 +1,142 @@
+import React, { useContext, useState, useEffect } from "react";
+import { Handle } from "@titaui/react-flow-renderer";
+import classNames from "classnames";
+
+import { OpenDepartmentName, OpenUserName } from "../open-data";
+import { CommonContext } from "../context";
+import preCls from "../precls";
+import "./index.scss";
+import { getOpenData, setSize } from "../../open-data-painter";
+import { isWx } from "../../../utils/bs-global";
+
+const RootNode = (props) => {
+  const {
+    data: { rootName = "", rootId = 0, avatar = {}, searchType },
+  } = props;
+
+  const [normalRootImg, setNormalRootImg] = useState("");
+  const [whiteRootImg, setWhiteImg] = useState("");
+  const [imgWidth, setImgWidth] = useState(0);
+
+  const { hasAvatar = false, color } = avatar;
+  const context = useContext(CommonContext);
+  const { direction, darkTheme } = context;
+
+  const getRootIcon = () => {
+    if (searchType == "company")
+      return (
+        <span className={classNames(`${preCls}--root-node-icon__company`)} />
+      );
+    if (searchType == "user") {
+      if (hasAvatar) {
+        return (
+          <img src={avatar.small} width={24} style={{ borderRadius: "50%" }} />
+        );
+      } else {
+        return (
+          <span
+            className={classNames(`${preCls}--root-node-icon__user`)}
+            style={{ backgroundColor: color }}
+          >
+            {/* <OpenUserName id={rootId} name={rootName} /> */}
+            {rootName[0]}
+          </span>
+        );
+      }
+    }
+    if (searchType == "depart") {
+      return (
+        <span className={classNames(`${preCls}--root-node-icon__normal`)}>
+          {/* <OpenDepartmentName id={rootId} name={rootName} /> */}
+          {rootName[0]}
+        </span>
+      );
+    }
+    return (
+      <span className={classNames(`${preCls}--root-node-icon__normal`)}>
+        {rootName[0]}
+      </span>
+    );
+  };
+
+  const getRootName = async () => {
+    let wxRootName = rootName;
+    if (isWx()) {
+      wxRootName = await getOpenData({
+        id: rootId,
+        name: rootName,
+        type: searchType == "user" ? "userName" : "departmentName",
+      });
+    }
+    generalCanvas("normal", wxRootName);
+    generalCanvas("white", wxRootName);
+  };
+
+  const generalCanvas = (type = "normal", rootName) => {
+    const canvas = document.createElement("canvas");
+    const font =
+      "normal 14px/24px Arial,Verdana,Helvetica Neue,Helvetica,sans-serif,PingFang SC,Microsoft YaHei";
+    let ctx = canvas.getContext("2d");
+    ctx.font = font;
+    // const fitStr = fittingString(ctx, rootName, 268);
+    const { width } = ctx.measureText(rootName);
+    const actualWidth = Math.min(width, 268)
+    setSize(canvas, ctx, actualWidth, 24); // 设置画布尺寸
+    setImgWidth(actualWidth);
+    ctx.textBaseline = "middle";
+    ctx.font = font;
+    ctx.fillStyle = type == "normal" ? "#6f7886" : "#FFFFFF";
+    ctx.fillText(rootName, 0, 12);
+    type == "normal"
+      ? setNormalRootImg(canvas.toDataURL())
+      : setWhiteImg(canvas.toDataURL());
+  };
+
+  useEffect(() => {
+    (searchType == "user" || searchType == "depart") &&
+      rootName.length &&
+      getRootName();
+  }, [rootName, rootId]);
+
+  return (
+    <div
+      className={classNames(
+        `${preCls}--root-node-wrapper`,
+        `${preCls}--root-node-wrapper__${direction}`
+      )}
+    >
+      <div className={classNames(`${preCls}--root-node`)}>
+        {getRootIcon()}
+        {searchType !== "user" && searchType !== "depart" && (
+          
+          <span className={classNames(`${preCls}--root-node-text`)}>
+            {rootName}
+          </span>
+        )}
+        {(searchType == "user" || searchType == "depart") && (
+          <img
+            src={darkTheme ? whiteRootImg : normalRootImg}
+            style={{ maxWidth: 268, marginLeft: 4 }}
+            width={imgWidth}
+          />
+        )}
+      </div>
+
+      {direction === "horizontal" && (
+        <Handle
+          type="source"
+          position="right"
+          style={{ visibility: "hidden", right: 0 }}
+        />
+      )}
+      {direction === "vertical" && (
+        <Handle
+          type="source"
+          position="bottom"
+          style={{ visibility: "hidden", bottom: 0 }}
+        />
+      )}
+    </div>
+  );
+};
+export default RootNode;

package/src/components/okr-flow/root-node/index.scss

@@ -0,0 +1,64 @@
+.titaui-okr-flow {
+  &--root-node {
+    padding: 5px 12px;
+    background: #f0f2f5;
+    border-radius: 16px;
+    color: #89919f;
+    &-icon {
+      &__company {
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+        line-height: 24px;
+        background-color: #2879ff;
+        background-image: url('../images/company.svg');
+        background-repeat: no-repeat;
+        background-position: 50%;
+        border-radius: 50%;
+        vertical-align: middle;
+      }
+      &__user, &__normal {
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+        line-height: 24px;
+        vertical-align: middle;
+        color: #fff;
+        text-align: center;
+        border-radius: 50%;
+        overflow: hidden;
+      }
+      &__normal {
+        background-color: #2879ff;
+      }
+    }
+    &-text {
+      display: inline-block;
+      margin-left: 4px;
+      vertical-align: middle;
+      line-height: normal;
+    }
+    &-wrapper {
+      width: 320px;
+      height: 96px;
+      display: flex;
+      &__horizontal {
+        align-items: center;
+        justify-content: flex-end;
+      }
+      &__vertical {
+        align-items: flex-end;
+        justify-content: center;
+      }
+    }
+
+  }
+}
+.titaui-okr-flow__dark {
+  .titaui-okr-flow{
+    &--root-node {
+      background: #3f4755;
+      color: #fff;
+    }
+  }
+}

package/src/components/okr-flow/utils/config.js

@@ -0,0 +1,8 @@
+export function getBSGlobal(name) {
+  return name ? BSGlobal && BSGlobal[name] : BSGlobal;
+}
+
+export const OkrTypeSetting = getBSGlobal('OkrAdvancedSetting').KRSetting.OkrTypeSetting;
+export const OkrClassifySetting = getBSGlobal('OkrAdvancedSetting').KRSetting.OkrClassify;
+
+export const KrWeightSetting = getBSGlobal('OkrAdvancedSetting').KRSetting.KrWeight;

package/src/components/okr-flow/utils/helper.js

@@ -0,0 +1,28 @@
+export const debounce = (func, wait, immediate) => {
+  var timeout, result;
+
+  var debounced = function() {
+    var context = this;
+    var args = arguments;
+
+    if (timeout) clearTimeout(timeout);
+
+    var later = function() {
+      timeout = null;
+      if (!immediate) result = func.apply(context, args);
+    };
+
+    var callNow = immediate && !timeout;
+    timeout = setTimeout(later, wait);
+    if (callNow) result = func.apply(this, args);
+
+    return result;
+  };
+
+  debounced.cancel = function() {
+    clearTimeout(timeout);
+    timeout = null;
+  };
+
+  return debounced;
+};

package/src/components/okr-flow/utils/index.js

@@ -0,0 +1,44 @@
+import { isNode } from '@titaui/react-flow-renderer';
+import dagre from '@titaui/dagre';
+
+import ChildNode from '../child-node';
+import RootNode from '../root-node';
+
+export const nodeTypes = {
+  ChildNode: ChildNode,
+  RootNode: RootNode,
+};
+
+
+export const getLayoutedElements = (elements, direction = 'horizontal') => {
+  const isHorizontal = direction === 'horizontal';
+
+  const nodeWidth = 320;
+  const nodeHeight = 96;
+  const dagreGraph = new dagre.graphlib.Graph();
+  dagreGraph.setDefaultEdgeLabel(() => ({}));
+  dagreGraph.setGraph({ rankdir: isHorizontal ? 'LR' : 'TB', ranksep: 80, nodesep: 12 });
+
+  elements.forEach(el => {
+    if (isNode(el)) {
+      dagreGraph.setNode(el.id, { width: nodeWidth, height: nodeHeight });
+    } else {
+      dagreGraph.setEdge(el.source, el.target);
+    }
+  });
+  dagre.layout(dagreGraph);
+  return elements.map(el => {
+    if (isNode(el)) {
+      const nodeWithPosition = dagreGraph.node(el.id);
+      el.targetPosition = isHorizontal ? 'left' : 'top';
+      el.sourcePosition = isHorizontal ? 'right' : 'bottom';
+      el.position = {
+        x: nodeWithPosition.x,
+        y: nodeWithPosition.y,
+      };
+    }
+
+    return el;
+  });
+};
+

package/src/components/okr-flow/utils/tree-handler.js

@@ -0,0 +1,244 @@
+import cloneDeep from 'clone-deep';
+import dayjs from 'dayjs';
+
+const insertSort = (arr, item) => {
+  if (!arr.length) return arr.splice(0, 0, item);
+  const { modelType } = item;
+  let index = arr.length;
+  if (modelType == 'kr') {
+    index = arr.findIndex(item => item.modelType == 'work');
+  }
+  if (index == -1) index = arr.length;
+
+  arr.splice(index, 0, item);
+};
+
+export const toTree = (data, showkr) => {
+  const cloneData = cloneDeep(data);
+  const map = {};
+  const res = [];
+  cloneData.forEach(item => (map[item.id] = item));
+  cloneData.forEach(item => {
+    const { modelType, data } = item;
+
+    let parent = undefined;
+    if (modelType == 'work') {
+      parent = showkr ? map[data.parentKrId || data.parentId] : map[data.parentId];
+    }
+    if (modelType == 'kr') {
+      parent = map[data.workId];
+    }
+    if (parent) {
+      if (!parent.children) parent.children = [];
+      insertSort(parent.children, item);
+    } else {
+      insertSort(res, item);
+    }
+  });
+  return res;
+};
+
+export const checkChildrenLevel = (item, goalLevel, curLevel) => {
+  const { children = [] } = item;
+  if (!children.length) return;
+
+  if (goalLevel == curLevel) {
+    item.children = [];
+  } else {
+    children.forEach(child => {
+      checkChildrenLevel(child, goalLevel, curLevel + 1);
+    });
+  }
+};
+
+export const buildTreeNodes = (nodes, goalLevel, showkr) => {
+  if (!nodes.length) return [];
+  // 生成树
+
+  const initRoots = toTree(nodes, showkr);
+  // 根据层级控制显示，多余的节点放在根节点上
+  for (let i = 0; i < initRoots.length; i++) {
+    checkChildrenLevel(initRoots[i], goalLevel, 1);
+  }
+
+  return initRoots;
+};
+
+// 取出所有返回节点，平铺
+export const formatNodes = (res, showkr, searchIds = []) => {
+  const nodes = [];
+  const { OkrModel = [], KrModel = [] } = res;
+  OkrModel &&
+    uniqueArray(OkrModel, 'workId').forEach(item => {
+      nodes.push({
+        id: item.workId,
+        data: item,
+        modelType: 'work',
+        isSearchRes: searchIds.includes(item.workId),
+      });
+    });
+  showkr && KrModel &&
+    uniqueArray(KrModel, 'mileStoneId').forEach(item => {
+      nodes.push({
+        id: item.mileStoneId,
+        data: item,
+        modelType: 'kr',
+      });
+    });
+  return nodes;
+};
+
+const flatTree = (current, elements, showkr, isParentExpand = true) => {
+  if (!current) return;
+
+  const { id, data, modelType, children = [], isSearchRes } = current;
+  if (modelType == 'root') {
+    elements.push({
+      id: id + '',
+      type: 'RootNode',
+      data,
+    });
+  } else {
+
+    let isChildExpand = false;
+    if (showkr) {
+      isChildExpand = children.length > 0;
+    } else {
+      let childTotal = children.filter(item => item.modelType == 'work').length;
+      let krChildTotal = children
+        .filter(item => item.modelType == 'kr')
+        .reduce((count, current) => {
+          return count = count + (current.children || []).length;
+        }, 0);
+      isChildExpand = childTotal + krChildTotal > 0
+    }
+
+    elements.push({
+      id: id + '',
+      type: 'ChildNode',
+      data: {
+        id,
+        data,
+        isParentExpand,
+        isChildExpand,
+        modelType,
+        isSearchRes,
+      },
+    });
+  }
+
+  if (children.length) {
+    children.forEach(child => {
+      if (!child) return;
+      const { modelType, children = [] } = child;
+      if (!showkr && modelType == 'kr') {
+        if (children.length > 0) {
+          children.forEach(sub => {
+            if (!sub) return;
+            elements.push({
+              id: `e${id}-${sub.id}`,
+              source: id + '',
+              target: sub.id + '',
+            });
+            flatTree(sub, elements, showkr, current.modelType == 'root' ? false : true);
+          });
+        }
+      } else {
+        elements.push({
+          id: `e${id}-${child.id}`,
+          source: id + '',
+          target: child.id + '',
+        });
+        flatTree(child, elements, showkr, current.modelType == 'root' ? false : true);
+      }
+    });
+  }
+};
+
+// tree to array
+export const transToMapData = (root, showkr) => {
+  const elements = [];
+  flatTree(root, elements, showkr);
+  return elements;
+};
+
+// 删除子节点
+export const deleteChildrenById = (node, parentId) => {
+  if (!node) return;
+  const { id, children = [] } = node;
+  if (parentId == id) {
+    node.children = [];
+  }
+  if (children.length > 0) {
+    children.forEach(child => {
+      child && deleteChildrenById(child, parentId);
+    });
+  }
+};
+
+const diff = (targetArr, source, sourceArr, sourceIndex) => {
+  const { id: sourceId, children: sourceChildren } = source;
+
+  targetArr.forEach((target, index) => {
+    const { id, children = [] } = target;
+    if (sourceId == id) {
+      targetArr[index] = source;
+      sourceArr[sourceIndex] = null;
+    } else if (children.length > 0) {
+      diff(children, source, sourceArr, sourceIndex);
+    }
+  });
+};
+
+// 对比更新
+export const diffAndUpdate = (targetArr, sourceArr) => {
+  sourceArr.map((source, index) => {
+    source && diff(targetArr, source, sourceArr, index);
+  });
+};
+
+export const findNode = (tree, targetId) => {
+  let target;
+  const search = (node, targetId) => {
+    if (!node) return;
+    const { id, children = [] } = node;
+    if (id == targetId) {
+      target = node;
+    } else if (children.length > 0) {
+      children.forEach(child => {
+        search(child, targetId);
+      });
+    }
+  };
+  search(tree, targetId);
+  return target;
+};
+
+export const deleteKrById = (targetId, current, currentIndex, parent) => {
+  const { id, children = [] } = current;
+  if (current && current.id == targetId) {
+    if (parent) {
+      try {
+        parent.data.counter.krTotal = parent.data.counter.krTotal - 1;
+      } catch (error) {
+        throw error;
+      }
+      parent.children.splice(currentIndex, 1, ...children);
+    }
+  } else {
+    if (children.length > 0) {
+      children.forEach((child, index) => {
+        deleteKrById(targetId, child, index, current);
+      });
+    }
+  }
+};
+
+export const uniqueArray = (arr, id) => {
+  var obj = {};
+  arr = arr.reduce(function (item, next) {
+    obj[next[id]] ? '' : (obj[next[id]] = true && item.push(next));
+    return item;
+  }, []);
+  return arr;
+};

package/src/components/okr-period-selector/index.scss

@@ -0,0 +1,35 @@
+.okr-detail-date-cycle-wrapper {
+  box-sizing: border-box;
+  padding: 15px 20px 20px;
+  width: 262px;
+}
+.okr-detail-date-cycle__date-line {
+  padding: 12px 0;
+  font-size: 12px;
+  color: #89919f;
+  line-height: 17px;
+  text-align: left;
+  span {
+    color: #3f4755;
+  }
+}
+
+.okr-detail-date-cycle__time {
+  .okr-detail-date-cycle__select-time-down-icon {
+    margin-left: 12px;
+    color: #BFC7D5;
+  }
+}
+.okr-detail-date-cycle__button {
+  border: 1px solid #e6eaef;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 3px;
+  padding: 0 12px;
+  &:hover {
+    cursor: pointer;
+    border: 1px solid #2879ff;
+  }
+}