@titaui/pc 1.7.17 → 1.7.21

package/src/components/create-okr-modal/index.tsx

@@ -67,7 +67,7 @@ interface Props {
   userInfo?: UserInfoObj;
   onSuccess?: Function;
   onClose?: Function;
-  isPerformance?: boolean;
+  isHiddenCreatedCard?: boolean;
   handleCreatedClose?:Function;
   visible?: boolean;
 }
@@ -80,7 +80,7 @@ const initOCheckResult = OCheckTarget.map((item) => {
 });
 
 function CreateOkrModal(
-  { initCycle, userInfo, onSuccess, isPerformance = false, handleCreatedClose = () => {}, visible = false,onClose = () => {}}: Props,
+  { initCycle, userInfo, onSuccess, isHiddenCreatedCard = false, handleCreatedClose = () => {}, visible = false,onClose = () => {}}: Props,
   ref: Ref<CreateOkrRefObject>
 ) {
   const [isVisible, setVisible] = useState(visible);
@@ -199,7 +199,7 @@ function CreateOkrModal(
     setCreatedSuccessInfo(data);
     if (
       !localStorage.getItem(`dontShowValue${userId}`) &&
-      !isPerformance &&
+      !isHiddenCreatedCard &&
       !isApplyTpl
     ) {
       setShowCreatedSuccessInfo(true);
@@ -278,7 +278,7 @@ function CreateOkrModal(
       return;
     }
     hideCreateOkrModal();
-    if (onSuccess || !isPerformance) {
+    if (onSuccess || !isHiddenCreatedCard) {
       // 带上超过创建okr人数的计算值
       const krNum = krDatas.length;
       let krTotalLength = 0;
@@ -692,7 +692,7 @@ function CreateOkrModal(
           </Wrapper>
         </Modal>
       </div>
-      {!isApplyTpl && !isPerformance && showCreatedSuccessInfo ? (
+      {!isApplyTpl && !isHiddenCreatedCard && showCreatedSuccessInfo ? (
         <CreateSuccessCmpWrapper>
           <CreateSuccessCmp
             tipIndex={tipIndex}
@@ -705,7 +705,7 @@ function CreateOkrModal(
         </CreateSuccessCmpWrapper>
       ) : null}
       {/* 如果 isVisible 是 hidden，则因为无法获取到样式截取不到图片导致下载下来白图*/}
-      {!isApplyTpl && !isPerformance && showCreatedSuccessInfo ? (
+      {!isApplyTpl && !isHiddenCreatedCard && showCreatedSuccessInfo ? (
         <div className="download-dom--hidden">
           <CreateSuccessCmp
             tipIndex={tipIndex}

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

@@ -23,6 +23,9 @@
       color: #2879ff;
       font-weight: 500;
     }
+    .titaui-menus-tree__sub-menu-item-node-title{
+      color: #2879ff;
+    }
   }
   .rc-tree-indent {
     display: none;

package/src/components/menus/export-modules/manage-menus/index.tsx

@@ -23,7 +23,7 @@ interface TreeNode {
 
 const preCls = "titaui-menus";
 
-const expandedKeys = ["okr"]
+const expandedKeys = ["okr"];
 
 const ManageMenus = (props: Props) => {
   const { history } = props;

package/src/components/nav-top/components/user-own-menu/utils.ts

@@ -40,7 +40,7 @@ export const getOwnSet = () => {
       id: "role",
       url: "tu-icon-gongsi",
       title: "企业管理规定",
-      objUrl: `${apiServer}/u/${userId}/Home#/enterprise/manage`,
+      objUrl: `${apiServer}/u/${userId}/Home#/enterprise/manage?reactRouterName=okr`,
     },
   ];
 

package/src/components/okr-detail/e-list/index.js

@@ -1,104 +1,155 @@
-import React, { useState, useEffect } from 'react';
-import SearchForm from './search-form';
-import OkrTree from '../components/okr-tree';
-import { getKrsByCondition } from '../request-apis';
-import { formatEListDataToSelectTree, formatCondition } from './util';
-import { EListContext } from '../context';
-import PaddingLayout from '../components/padding-layout';
-import Loading from '../loading';
-import { getUserInfo } from '../../../utils/bs-global';
-import './index.scss';
+import React, { useState, useEffect } from "react";
+import SearchForm from "./search-form";
+import OkrTree from "../components/okr-tree";
+import { getKrsByCondition } from "../request-apis";
+import {
+  formatEListDataToSelectTree,
+  formatCondition,
+  getIfInitCondition,
+} from "./util";
+import { EListContext } from "../context";
+import PaddingLayout from "../components/padding-layout";
+import Loading from "../loading";
+import { getUserInfo } from "../../../utils/bs-global";
+import ConditionRender from "../../condition-render";
+import EmptyPng from './images/e-list-empty.png';
+import "./index.scss";
 
-const preCls = 'okr-detail-e';
+const preCls = "okr-detail-e";
 
-export default props => {
+export default (props) => {
   const { okrId } = props;
 
   const loginUser = getUserInfo().Id;
   const hasCondition = localStorage.getItem(`hasRememberCondition${loginUser}`);
 
-  const [krList, setKrList] = useState([])
-  const [checkedStatus, setCheckedStatus] = useState(hasCondition ? JSON.parse(localStorage.getItem(`okrDrawerECheckedStatus${loginUser}`)) : []);
-  const [selectUsers, setSelectUsers] = useState(hasCondition ? JSON.parse(localStorage.getItem(`okrDrawerESelectUsers${loginUser}`)) : []);
-  const [selectName, setSelectName] = useState(hasCondition ? localStorage.getItem(`okrDrawerESelectName${loginUser}`) : 'orderBySystem');
-  const [noteOrder, setNoteOrder] = useState(hasCondition ? localStorage.getItem(`okrDrawerENoteOrder${loginUser}`) : null);
+  const [krList, setKrList] = useState([]);
+  const [checkedStatus, setCheckedStatus] = useState(
+    hasCondition
+      ? JSON.parse(localStorage.getItem(`okrDrawerECheckedStatus${loginUser}`))
+      : []
+  );
+  const [selectUsers, setSelectUsers] = useState(
+    hasCondition
+      ? JSON.parse(localStorage.getItem(`okrDrawerESelectUsers${loginUser}`))
+      : []
+  );
+  const [selectName, setSelectName] = useState(
+    hasCondition
+      ? localStorage.getItem(`okrDrawerESelectName${loginUser}`)
+      : "orderBySystem"
+  );
+  const [noteOrder, setNoteOrder] = useState(
+    hasCondition
+      ? localStorage.getItem(`okrDrawerENoteOrder${loginUser}`)
+      : null
+  );
   const [searchKey, setSearchKey] = useState();
   const [oEList, setOEList] = useState([]);
   const [expandedKrEs, setExpandedKrEs] = useState([]);
   const [expandedOEs, setExpandedOEs] = useState([]);
   const [loading, setLoading] = useState(true);
+  const [totalDataNum, setTotalDataNum] = useState(0);
 
   const getKrEsData = () => {
     setLoading(true);
     getKrsByCondition({
       okrId,
-      'condition': formatCondition({
+      "condition": formatCondition({
         okrId,
         noteOrder,
         selectName,
         checkedStatus,
         users: selectUsers,
-        'keyWord': searchKey
-      })
-    }).then(krs => {
-      const formatKrs = formatEListDataToSelectTree(krs, okrId);
-      const expandedKrEs = (formatKrs.krsEList || []).map(it => it.key);
-      const expandedOEs = (formatKrs.oEList[0] || []).map(it => it.key);
+        "keyWord": searchKey,
+      }),
+    }).then((krs) => {
+      const formatKrs = formatEListDataToSelectTree(
+        krs,
+        okrId,
+        getIfInitCondition(selectName, checkedStatus, selectUsers, searchKey)
+      );
+      const expandedKrEs = (formatKrs.krsEList || []).map((it) => it.key);
+      const expandedOEs = (formatKrs.oEList[0] || []).map((it) => it.key);
       setExpandedKrEs(expandedKrEs);
       setExpandedOEs(expandedOEs);
       setKrList(formatKrs.krsEList);
       setOEList(formatKrs.oEList);
       setLoading(false);
-    })
-  }
+    });
+  };
 
   useEffect(() => {
     getKrEsData();
   }, [noteOrder, searchKey, selectName, checkedStatus, selectUsers]);
 
-  return <EListContext.Provider
-    value={{
-      'refreshEList': getKrEsData
-    }}
-  >
-    <div className={preCls}>
-      <PaddingLayout>
-        <SearchForm
-          checkedStatus={checkedStatus}
-          setCheckedStatus={setCheckedStatus}
-          selectName={selectName}
-          setSelectName={setSelectName}
-          noteOrder={noteOrder}
-          setNoteOrder={setNoteOrder}
-          setSearchKey={setSearchKey}
-          selectUsers={selectUsers}
-          setSelectUsers={setSelectUsers}
-          okrId={okrId}
-        />
-      </PaddingLayout>
+  useEffect(() => {
+    const oElistLength = oEList[0] && oEList[0].length || 0;
+    setTotalDataNum(krList.length + oElistLength);
+  }, [krList, oEList]);
+
+  return (
+    <EListContext.Provider
+      value={{
+        "refreshEList": getKrEsData,
+      }}
+    >
+      <div className={preCls}>
+        <PaddingLayout>
+          <SearchForm
+            checkedStatus={checkedStatus}
+            setCheckedStatus={setCheckedStatus}
+            selectName={selectName}
+            setSelectName={setSelectName}
+            noteOrder={noteOrder}
+            setNoteOrder={setNoteOrder}
+            setSearchKey={setSearchKey}
+            selectUsers={selectUsers}
+            setSelectUsers={setSelectUsers}
+            okrId={okrId}
+          />
+        </PaddingLayout>
 
-      {!loading ?
-        <React.Fragment>
-          {krList.map((kr, index) => {
-            return <React.Fragment>
-              <PaddingLayout padding={`0 32px 0 18px`}>
-                <OkrTree data={[kr]} defaultExpandedKeys={expandedKrEs} />
-              </PaddingLayout>
-              {
-                // kr左后一个节点 && 没有 OE 时，不显示横线
-                !((index + 1 == krList.length) && oEList.length == 0) &&
-                <div className="e__divider"></div>
-              }
-            </React.Fragment>
-          })}
+        {!loading ? (
+          <React.Fragment>
+            <ConditionRender condition={totalDataNum !== 0}>
+              {krList.map((kr, index) => {
+                return (
+                  <React.Fragment>
+                    <PaddingLayout padding={`0 32px 0 18px`}>
+                      <OkrTree data={[kr]} defaultExpandedKeys={expandedKrEs} />
+                    </PaddingLayout>
+                    {
+                      // kr左后一个节点 && 没有 OE 时，不显示横线
+                      !(index + 1 == krList.length && oEList.length == 0) && (
+                        <div className="e__divider"></div>
+                      )
+                    }
+                  </React.Fragment>
+                );
+              })}
 
-          {oEList.map((kr) => {
-            return <PaddingLayout padding={`0 32px 0 18px`}>
-              <OkrTree data={kr} defaultExpandedKeys={expandedOEs} />
-            </PaddingLayout>
-          })}
-        </React.Fragment>
-        : <Loading type="panel" />}
-    </div>
-  </EListContext.Provider>
-}
+              {oEList.map((kr) => {
+                return (
+                  <PaddingLayout padding={`0 32px 0 18px`}>
+                    <OkrTree data={kr} defaultExpandedKeys={expandedOEs} />
+                  </PaddingLayout>
+                );
+              })}
+            </ConditionRender>
+            <ConditionRender condition={totalDataNum === 0}>
+              <div className={`${preCls}__empty`}>
+                <img className={`${preCls}__empty-img`} src={EmptyPng}/>
+                <span className={`${preCls}__empty-text`}>
+                  没有搜索到符合条件的E-执行
+                </span>
+              </div>
+            </ConditionRender>
+          </React.Fragment>
+        ) : (
+          <Loading type="panel" />
+        )}
+      </div>
+    </EListContext.Provider>
+  );
+};

package/src/components/okr-detail/e-list/index.scss

@@ -2,7 +2,22 @@
   padding-bottom: 60px;
   .e__divider {
     height: 8px;
-    background: #F0F2F5;
+    background: #f0f2f5;
     margin: 10px 32px;
   }
-}
+  &__empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 117px;
+    font-size: 14px;
+    &-img {
+      width: 128px;
+    }
+    &-text {
+      color: #3f4755;
+      line-height: 22px;
+      margin-top: 20px;
+    }
+  }
+}

package/src/components/okr-detail/e-list/util.ts

@@ -51,33 +51,52 @@ export const getETreeNode = (tasks, isFirstLevel, createUserId,krUser) => {
   })
 }
 
-export const formatTreeDataToNode = (tree) => {
-  return tree.map((item, index) => {
-    return {
-      'key': item.mileStoneId,
-      'index': index,
-      'title': item.mileStoneId !== 0 ? item.mileStoneName : '目标下的其他执行',
-      'nodeType': 'e-kr',
-      'isLeaf': false,
-      'children': getETreeNode(item.tasks, true, item.createUserId,item.user),
-      'data': { ...item },
-      'isOTask': item.mileStoneId === 0
-    }
-  })
+export const formatTreeDataToNode = (tree, isInitCondition) => {
+  if(isInitCondition) {
+    return tree.map((item, index) => {
+      return {
+        'key': item.mileStoneId,
+        'index': index,
+        'title': item.mileStoneId !== 0 ? item.mileStoneName : '目标下的其他执行',
+        'nodeType': 'e-kr',
+        'isLeaf': false,
+        'children': getETreeNode(item.tasks, true, item.createUserId,item.user),
+        'data': { ...item },
+        'isOTask': item.mileStoneId === 0
+      }
+    })
+  } else {
+    const result: any = [];
+    tree.forEach((item, index) => {
+      if (item.tasks && item.tasks.length > 0) {
+        result.push({
+          'key': item.mileStoneId,
+          'index': index,
+          'title': item.mileStoneId !== 0 ? item.mileStoneName : '目标下的其他执行',
+          'nodeType': 'e-kr',
+          'isLeaf': false,
+          'children': getETreeNode(item.tasks, true, item.createUserId,item.user),
+          'data': { ...item },
+          'isOTask': item.mileStoneId === 0
+        })
+      }
+    })
+    return result;
+  }
 }
 
-export const formatEListDataToSelectTree = (data, workId) => {
+export const formatEListDataToSelectTree = (data, workId, isInitCondition) => {
   const tree = data.map(item => {
     return {
       ...item,
       'tasks': toTree(item.tasks)
     }
   })
-  const formatKrsTreeDataToNode = formatTreeDataToNode(tree.filter(d => d.mileStoneId !== 0));
-  const formatOTreeDataToNode = formatTreeDataToNode(tree.filter(d => d.mileStoneId === 0));
+  const formatKrsTreeDataToNode = formatTreeDataToNode(tree.filter(d => d.mileStoneId !== 0), isInitCondition);
+  const formatOTreeDataToNode = formatTreeDataToNode(tree.filter(d => d.mileStoneId === 0), isInitCondition);
   const result =  {
     'krsEList': formatKrsTreeDataToNode,
-    'oEList': formatOTreeDataToNode.length > 0 ? [formatTreeDataToNode(tree.filter(d => d.mileStoneId === 0))] : [[{
+    'oEList': isInitCondition && formatOTreeDataToNode.length === 0 ? [[{
       'key': 0,
       'index': 0,
       'title': '目标下的其他执行',
@@ -99,7 +118,7 @@ export const formatEListDataToSelectTree = (data, workId) => {
         mileStoneId: 0
       },
       'isOTask': true
-    }]]
+    }]] : [formatOTreeDataToNode]
   }
   return result;
 }
@@ -142,4 +161,11 @@ export const formatCondition = ({okrId, noteOrder, selectName, checkedStatus, us
     }))
   }
 
+}
+
+export const getIfInitCondition = (selectName, checkedStatus, users, keyWord) => {
+  if (keyWord || selectName !== 'orderBySystem' || checkedStatus.length !== 0 || users.length !== 0) {
+    return false;
+  }
+  return true;
 }