@titaui/pc 1.7.18 → 1.7.22

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;
 }

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,83 +1,112 @@
-.rc-select-single:not(.rc-select-customize-input) .rc-select-selector {
-  border: 1px solid #DFE3EA;
-}
+.titaui-select-tags {
+  display: flex;
+  .rc-select-single:not(.rc-select-customize-input) .rc-select-selector {
+    border: 1px solid #DFE3EA;
+  }
 
-.rc-select-focused{
-  .rc-select-selector{
-    border: 1px solid #DFE3EA !important;
+  .rc-select-focused {
+    .rc-select-selector {
+      border: 1px solid #DFE3EA !important;
+    }
   }
-}
-.rc-select-selection-item-remove{
-  display: flex;
-  align-items: center;
-}
-.rc-select-multiple .rc-select-selector .rc-select-selection-search-input {
-  display: none;
-}
 
-.rc-select-single:not(.rc-select-customize-input) .rc-select-selector .rc-select-selection-search-input{
-  display: none;
-}
+  .rc-select-selection-item-remove {
+    display: flex;
+    align-items: center;
+  }
 
-.rc-select-single .rc-select-selector .rc-select-selection-item, .rc-select-single .rc-select-selector .rc-select-selection-placeholder{
-  top: unset;
-  left: 12px;
-}
+  .rc-select-multiple .rc-select-selector .rc-select-selection-search-input {
+    display: none;
+  }
 
-.rc-select-single .rc-select-selector{
-  align-items: center;
-}
+  .rc-select-single:not(.rc-select-customize-input) .rc-select-selector .rc-select-selection-search-input {
+    display: none;
+  }
 
-.rc-select-selector{
-  cursor: pointer;
-  padding: 0 12px;
-  background: #FFFFFF;
-  border-radius: 8px;
-  border: 1px solid #DFE3EA;
-  height: 36px;
-  box-sizing: border-box;
-}
-.rc-select-multiple .rc-select-selector {
-  height: unset;
-  padding: 7px 12px 0;
-  border: 1px solid #DFE3EA;
-}
-.rc-select-multiple .rc-select-selector .rc-select-selection-overflow-item {
-  display: flex;
-  align-items: center;
-  margin-bottom: 7px;
-}
-.rc-select-multiple .rc-select-selector .rc-select-selection-placeholder{
-  line-height: 1;
-  margin-bottom: 7px;
-  position: relative;
-  top: -2px;
-}
+  .rc-select-single .rc-select-selector .rc-select-selection-item,
+  .rc-select-single .rc-select-selector .rc-select-selection-placeholder {
+    top: unset;
+    left: 12px;
+  }
 
-.rc-select-selection-item-content{
-  margin-right: 8px;
-}
+  .rc-select-single .rc-select-selector {
+    align-items: center;
+  }
 
-.rc-select-multiple .rc-select-selector .rc-select-selection-item {
-  font-size: 12px;
-  flex: none;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  background: #F0F4FA;
-  border-radius: 10px;
-  margin-right: 2px;
-  padding: 0 5px 0 10px;
-  .tu-icon-cross{
+  .rc-select-selector {
     cursor: pointer;
-    color:#a4acB9;
-    font-size: 14px;
+    padding: 0 12px;
+    background: #FFFFFF;
+    border-radius: 8px;
+    border: 1px solid #DFE3EA;
+    height: 36px;
+    box-sizing: border-box;
+  }
+
+  .rc-select-multiple .rc-select-selector {
+    height: unset;
+    padding: 7px 12px 0;
+    border: 1px solid #DFE3EA;
+  }
+
+  .rc-select-multiple .rc-select-selector .rc-select-selection-overflow-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 7px;
+  }
+
+  .rc-select-multiple .rc-select-selector .rc-select-selection-placeholder {
+    line-height: 1;
+    margin-bottom: 7px;
+    position: relative;
+    top: -2px;
+  }
+
+  .rc-select-selection-item-content {
+    margin-right: 8px;
+  }
+
+  .rc-select-multiple .rc-select-selector .rc-select-selection-item {
+    font-size: 12px;
+    flex: none;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    background: #F0F4FA;
+    border-radius: 10px;
+    margin-right: 2px;
+    padding: 0 5px 0 10px;
+
+    .tu-icon-cross {
+      cursor: pointer;
+      color: #a4acB9;
+      font-size: 14px;
+    }
+  }
+
+  .titaui-select-noborder {
+    .rc-select-selector {
+      border: none !important;
+      height: 22px;
+      line-height: 1;
+    }
+  }
+
+  .rc-select-arrow {
+    font-size: 16px;
+    transform: scale(0.5);
+  }
+
+  .rc-select-show-arrow .rc-select-arrow {
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    right: 12px;
+    height: 22px;
   }
 }
-.rc-select-item {
-  font-size: 14px;
-}
-.rc-select-dropdown{
+
+.titaui-dropDown {
   z-index: 2000;
   box-sizing: border-box;
   padding: 16px 6px;
@@ -85,48 +114,43 @@
   box-shadow: 0px 4px 12px 0px rgba(127, 145, 180, 0.2);
   border: 1px solid #F0F2F5;
   border-radius: 8px;
-}
 
-.rc-select-item-option{
-  height: 36px;
-  line-height: 36px;
-  cursor: pointer;
-}
-.rc-select-item-option-selected {
+  .rc-select-item {
+    font-size: 14px;
+    padding: 7px 6px;
+  }
 
-  color: #2879FF;
-}
-.rc-select-item-option-active {
-  border-radius: 8px;
-  color: #2879FF;
-  background: #F7F8FA;
-}
+  .rc-select-item-option {
+    height: 36px;
+    box-sizing: border-box;
+    line-height: 36px;
+    cursor: pointer;
+  }
 
-.rc-select-arrow{
-  font-size: 16px;
-  transform: scale(0.5);
-}
-.rc-select-show-arrow .rc-select-arrow {
-  top: 0;
-  bottom: 0;
-  margin: auto;
-  right: 12px;
-  height: 22px;
-}
+  .rc-select-item-option-selected {
 
-.rc-select-item-option-state{
-  display: none;
-}
+    color: #2879FF;
+  }
 
-.titaui-select-hasSelectItem{
-  .rc-select-item-option-state{
-    display: block;
+  .rc-select-item-option-content {
+    line-height: 24px;
+  }
+
+  .rc-select-item-option-active {
+    border-radius: 8px;
+    color: #2879FF;
+    background: #F7F8FA;
+  }
+
+
+
+  .rc-select-item-option-state {
+    display: none;
   }
 }
-.titaui-select-noborder{
-  .rc-select-selector{
-    border: none !important;
-    height: 22px;
-    line-height: 1;
+
+.titaui-select-hasSelectItem {
+  .rc-select-item-option-state {
+    display: block;
   }
 }