@titaui/pc 1.7.45 → 1.7.49

package/src/pages/new-okr-list/header/depart-title.tsx

@@ -1,71 +0,0 @@
-import React from "react";
-import Switch from "../../../components/switch";
-import Tooltip from "../../../components/tooltip";
-import { OpenDepartmentName } from "../../../utils/open-data";
-import { precls } from "../precls";
-import "./index.scss";
-interface IProps {
-  onlyThisDept: boolean;
-  onChange: (flat: boolean) => void;
-  departmentName: string;
-  departmentId: number;
-}
-
-const DepartTitle = (props: IProps) => {
-  const {
-    onlyThisDept = false,
-    onChange,
-    departmentName,
-    departmentId,
-  } = props;
-
-  const handleOnChange = (val) => {
-    onChange && onChange(val);
-  };
-  return (
-    <div className={`${precls}__header-depart-title`}>
-      <div className={`${precls}__header-depart-title-icon`}>
-        {departmentId == 0 && <span className="tu-icon-OKR-gongsi-m" />}
-        {departmentId != 0 && (
-          <span className={`${precls}__header-depart-title--overflow`}>
-            <OpenDepartmentName name={departmentName} id={departmentId} />
-          </span>
-        )}
-      </div>
-      <div className={`${precls}__header-depart-title-name`}>
-        <Tooltip.Text
-          maxWidth={160}
-          text={
-            <>
-              {departmentId == 0 && '公司全部目标'}
-              {departmentId != 0 && (
-                <OpenDepartmentName name={departmentName} id={departmentId} />
-              )}
-            </>
-          }
-        />
-      </div>
-      {departmentId != 0 && (
-        <Switch
-          label={
-            <span>
-              <Tooltip
-                overlay="开关开启后，列表将不展示部门下所有子部门的数据"
-                placement="top"
-              >
-                <span
-                  className={`${precls}__header-depart-title__onlythisdept`}
-                >
-                  只看本部门
-                </span>
-              </Tooltip>
-            </span>
-          }
-          checked={onlyThisDept}
-          onChange={handleOnChange}
-        />
-      )}
-    </div>
-  );
-};
-export default DepartTitle;

package/src/pages/new-okr-list/header/filter.tsx

@@ -1,112 +0,0 @@
-import React, { useState,useEffect } from "react";
-import Tooltip from "../../../components/tooltip";
-import OkrFilterDrawer from "../../../components/okr-filter-drawer";
-import PeriodSelector  from "../../../components/period-selector";
-import { localStorage } from "../../../utils/local-storage";
-import { getQueryString } from "../../../utils/tools";
-import { precls } from "../precls";
-
-const Filter = (props) => {
-  const useLocalStorage = new localStorage();
-  const { onSearch } = props;
-  const [filterDrawerVisible, setFilterDrawerVisible] = useState(false);
-  const [filterNum, setFilterNum] = useState(() => {
-    let num = 0;
-    let values = useLocalStorage.getItem("okr-filter-values") || {
-      okrType: "",
-      okrClassify: "",
-      orderType: 2,
-    };
-    if (values.okrType) {
-      num++;
-    }
-    if (values.okrClassify) {
-      num++;
-    }
-    return num;
-  });
-  const [cycle, setCycle] = useState<any>(()=>{
-    const routerData = getQueryString()
-    const {annualNum,cycleType,yqmNum} = routerData
-    if(!!annualNum&&!!cycleType&&!!yqmNum){
-      return { annualNum,cycleType,yqmNum }
-    }
-    return useLocalStorage.getItem("okr-filter-cycle") || ""
-    }
-    
-  );
-
-  useEffect(()=>{
-    const routerData = getQueryString()
-    const {annualNum,cycleType,yqmNum} = routerData
-    if(!!annualNum&&!!cycleType&&!!yqmNum){
-      let cycle = {annualNum,cycleType,yqmNum}
-      setCycle(cycle)
-      onSearch(cycle)
-    }
-  },[])
-
-  const changeCycleUrl = (s) =>{
-    const routerData = getQueryString()
-    const {annualNum,cycleType,yqmNum,toUserId} = routerData
-    if(!!annualNum&&!!cycleType&&!!yqmNum){
-      let origin = window.location.href.split('?')[0]
-      let url = `${origin}?cycleType=${s.cycleType}&yqmNum=${s.yqmNum}&annualNum=${s.annualNum}&toUserId=${toUserId}`
-      history.pushState('','',url)
-    }
-  }
-  
-
-
-  const handleChangeCycle = (s) => {
-    changeCycleUrl(s)
-    setCycle(s);
-    onSearch &&
-      onSearch({
-        annualNum: s.annualNum,
-        cycleType: s.cycleType,
-        yqmNum: s.yqmNum,
-      });
-    useLocalStorage.setItem("okr-filter-cycle", s);
-  };
-  const openFilterDrawer = () => setFilterDrawerVisible(true);
-  return (
-    <div>
-      <div className={`${precls}__header-filter okr-list__twinkle`} >
-        <PeriodSelector
-          selected={cycle}
-          yearsRange={[2019, 2030]}
-          onChange={(s) => handleChangeCycle(s)}
-          noBorder
-          selectorClass={`${precls}__period-selector`}
-        />
-
-        <span className={`${precls}__header-filter-right`}>
-          <span className={`${precls}__header-filter-line`}></span>
-          <Tooltip overlay="筛选" placement="top">
-            <span
-              className={`tu-icon-shaixuan ${precls}__header-filter-shaixuan`}
-              onClick={openFilterDrawer}
-            />
-          </Tooltip>
-          {filterNum > 0 && (
-            <span
-              className={`${precls}__header-filter-right-num`}
-              onClick={openFilterDrawer}
-            >
-              {filterNum}
-            </span>
-          )}
-        </span>
-      </div>
-
-      <OkrFilterDrawer
-        visible={filterDrawerVisible}
-        setVisible={setFilterDrawerVisible}
-        onSearch={onSearch}
-        setFilterNum={setFilterNum}
-      />
-    </div>
-  );
-};
-export default Filter;

package/src/pages/new-okr-list/header/index.scss

@@ -1,168 +0,0 @@
-.tita-okr-list-v2__header {
-  display: flex;
-  margin-bottom: 16px;
-  justify-content: space-between;
-
-  &-left {
-    display: flex;
-    align-items: center;
-  }
-
-  &-right {
-    display: flex;
-    align-items: center;
-  }
-
-  &-item {
-    margin-right: 12px;
-  }
-
-  &-icon {
-    display: flex;
-    box-sizing: border-box;
-    justify-content: center;
-    align-items: center;
-    background: #fff;
-    box-shadow: 0px 0px 8px 0px rgba(127, 145, 180, 0.1);
-    width: 36px;
-    height: 36px;
-    border-radius: 18px;
-    font-size: 20px;
-
-    &:hover {
-      cursor: pointer;
-      color: #2879ff;
-    }
-  }
-
-  &-filter {
-    box-sizing: border-box;
-    height: 36px;
-    padding: 0 16px;
-    font-size: 14px;
-    background: #ffffff;
-    box-shadow: 0px 0px 8px 0px rgba(127, 145, 180, 0.1);
-    border-radius: 18px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    &-text {
-      display: flex;
-      align-items: center;
-      cursor: pointer;
-
-      &:hover {
-        color: #2879ff;
-      }
-    }
-
-    &-right {
-      position: relative;
-      display: flex;
-      align-items: center;
-      cursor: pointer;
-
-      &-num {
-        user-select: none;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        position: absolute;
-        top: -3px;
-        right: -7px;
-        width: 16px;
-        height: 16px;
-        background: #f7b500;
-        box-shadow: 0px 2px 4px 0px rgba(246, 189, 22, 0.4),
-          inset 0px 0px 2px 1px rgba(255, 255, 255, 0.5);
-        border-radius: 8px;
-        font-size: 12px;
-        font-family: ArialMT;
-        color: #ffffff;
-      }
-    }
-
-    &-line {
-      display: inline-block;
-      width: 1px;
-      height: 30px;
-      background: linear-gradient(
-        180deg,
-        #ffffff 0%,
-        #dfe3ea 49%,
-        #ffffff 100%
-      );
-      border-radius: 1px;
-      margin: 0 8px;
-    }
-
-    &-dropdown {
-      display: inline-block;
-      font-size: 16px;
-      transform: scale(0.5);
-      margin-left: 5px;
-    }
-
-    &-shaixuan {
-      font-size: 20px;
-
-      &:hover {
-        color: #2879ff;
-      }
-    }
-  }
-
-  &-relation-title {
-    color: #89919f;
-    font-size: 16px;
-  }
-
-  &-depart-title {
-    color: #3f4755;
-    font-size: 16px;
-    display: flex;
-    align-items: center;
-
-    &-icon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 36px;
-      height: 36px;
-      font-size: 16px;
-      color: #fff;
-      background: #5c8eff;
-      border-radius: 18px;
-      margin-right: 8px;
-    }
-
-    &-name {
-      max-width: 160px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    &--overflow {
-      white-space: nowrap;
-      margin: 10px;
-      box-sizing: border-box;
-      overflow: hidden;
-    }
-
-    &__onlythisdept {
-      margin-left: 20px;
-      color: #89919f;
-      font-size: 14px;
-    }
-  }
-}
-
-.tita-okr-list-v2__header-filter {
-  .titaui-period-selector button {
-    color: #374755;
-  }
-}
-.tita-okr-list-v2__period-selector {
-  border-radius: 12px !important;
-}

package/src/pages/new-okr-list/header/index.tsx

@@ -1,163 +0,0 @@
-import React, {
-  useState,
-  useContext,
-  useEffect,
-  forwardRef,
-  useImperativeHandle,
-  useRef,
-} from "react";
-import Tooltip from "../../../components/tooltip";
-import { getUserInfo } from "../../../utils/bs-global";
-import { precls } from "../precls";
-import KeywordSearch from "../keyword-search";
-import CreateOkr from "./create-okr";
-import UserTitle from "./user-title";
-import DepartTitle from "./depart-title";
-import RelationTitle from "./relation-title";
-import Filter from "./filter";
-import Comments from "./comments";
-import { Context } from "../context";
-import { getUserInfoById } from "../request-api";
-import "./index.scss";
-
-const Header = (props, ref) => {
-  const {
-    departmentName,
-    departmentId,
-    toUserId,
-    relation,
-    annualNum,
-    cycleType,
-    yqmNum,
-  } = useContext(Context);
-
-  const { onSearch, onFrontAddOKR } = props;
-
-  const [onlyThisDept, setOnlyThisDept] = useState(false);
-  const [init, setInit] = useState(false);
-  const [userInfo, setUserInfo] = useState();
-
-  useEffect(() => {
-    if (toUserId !== undefined || relation == 1) {
-      let userId = toUserId;
-      if (relation == 1) userId = getUserInfo().Id;
-      userId &&
-        getUserInfoById(userId).then((res) => {
-          setUserInfo(res.Data);
-        });
-    }
-  }, [toUserId, relation]);
-
-  useEffect(() => {
-    setInit(true);
-  }, []);
-
-  useEffect(() => {
-    init &&
-      onSearch({
-        onlyThisDept,
-      });
-  }, [onlyThisDept]);
-
-  const createOkrRef = useRef();
-
-  useImperativeHandle(ref, () => ({
-    openCreateModal: () => createOkrRef.current.openCreateModal(),
-    setCase: (data) => createOkrRef.current.setCase(data),
-  }));
-
-  const gotoOkrMap = () => {
-    let rootNode = {
-      rootId: 0,
-      //@ts-ignore
-      rootName: window.BSGlobal.tenantInfo.Name || "",
-    };
-    let level2Selected = {
-      id: 0,
-      //@ts-ignore
-      name: window.BSGlobal.tenantInfo.Name || "",
-    };
-    let searchType = "company";
-    if (departmentId && departmentId != -1) {
-      rootNode.rootId = departmentId;
-      rootNode.rootName = departmentName || "";
-      searchType = "depart";
-      level2Selected.id = departmentId;
-      level2Selected.name = departmentName || "";
-    }
-    if (toUserId) {
-      rootNode.rootId = toUserId;
-      rootNode.rootName = userInfo.name || "";
-      searchType = "user";
-      level2Selected.id = toUserId;
-      level2Selected.name = userInfo.name || "";
-    }
-    if (relation == 1) {
-      rootNode.rootId = getUserInfo().Id;
-      rootNode.rootName = getUserInfo().Name || "";
-      searchType = "user";
-      level2Selected.id = getUserInfo().Id;
-      level2Selected.name = getUserInfo().Name || "";
-    }
-    const urlQuery = [
-      `searchType=${searchType}`,
-      `period=${JSON.stringify({ cycleType, annualNum, yqmNum })}`,
-      `rootNode=${JSON.stringify(rootNode)}`,
-      `level2Selected=${JSON.stringify(level2Selected)}`,
-    ].join("&");
-    window.location.href = window.location.origin + `/#okr/map?${urlQuery}`;
-  };
-
-  const getTitle = () => {
-    if (relation == 1) {
-      return <UserTitle toUserId={getUserInfo().Id} />;
-    } else if (relation == 2 || relation == 3) {
-      return <RelationTitle relation={relation} />;
-    } else if (toUserId) {
-      return <UserTitle toUserId={toUserId} />;
-    } else if (departmentName) {
-      return (
-        <DepartTitle
-          onlyThisDept={onlyThisDept}
-          onChange={setOnlyThisDept}
-          departmentName={departmentName}
-          departmentId={departmentId}
-        />
-      );
-    }
-    return null;
-  };
-  return (
-    <div className={`${precls}__header`}>
-      <div className={`${precls}__header-left`}>
-        <div className={`${precls}__header-item`}>{getTitle()}</div>
-      </div>
-      <div className={`${precls}__header-right`}>
-        {departmentId == 0 && (
-          <div className={`${precls}__header-item`}>
-            <KeywordSearch onSearch={onSearch} />
-          </div>
-        )}
-        {relation != 2 &&
-        relation != 3 && ( // 我关注的 我参与的 没有创建按钮
-            <>
-              <div className={`${precls}__header-item`}>
-                <CreateOkr ref={createOkrRef} onFrontAddOKR={onFrontAddOKR} />
-              </div>
-              <div className={`${precls}__header-item`} onClick={gotoOkrMap}>
-                <Tooltip overlay="地图" placement="top">
-                  <span className={`${precls}__header-icon`}>
-                    <span className="tu-icon-yangshi-ditu" />
-                  </span>
-                </Tooltip>
-              </div>
-            </>
-          )}
-
-        <Comments toUserId={toUserId} relation={relation} userInfo={userInfo} />
-        <Filter onSearch={onSearch} />
-      </div>
-    </div>
-  );
-};
-export default forwardRef(Header);

package/src/pages/new-okr-list/header/relation-title.tsx

@@ -1,17 +0,0 @@
-import React from "react";
-import { precls } from "../precls";
-import "./index.scss";
-
-const RelationTitle = ({ relation }) => {
-  const relationTitle = {
-    "2": "我参与的",
-    "3": "我关注的",
-  };
-
-  return (
-    <div className={`${precls}__header-relation-title`}>
-      {relationTitle[relation]}
-    </div>
-  );
-};
-export default RelationTitle;

package/src/pages/new-okr-list/header/user-title.tsx

@@ -1,12 +0,0 @@
-import React from "react";
-import PhotoCard from "../../../components/photo-card";
-import "./index.scss";
-
-const UserTitle = ( { toUserId}) => {
-  // todo: 关注 ｜ 取消关注
-
-  if(!toUserId) return null;
-
-  return <div><PhotoCard userId={toUserId} /></div>;
-};
-export default UserTitle;

package/src/pages/new-okr-list/index.scss

@@ -1,22 +0,0 @@
-.tita-okr-list-v2 {
-  height: calc(100% - 20px);
-  overflow-y: scroll;
-  margin-right: -16px;
-  padding-right: 16px;
-
-  &__pagination {
-    margin: 12px 0;
-  }
-
-  &__loading {
-    height: 32px;
-    width: 80px;
-    background: url("./img/loading.gif") no-repeat;
-    background-size: contain;
-    margin: 200px auto;
-  }
-
-  .okr-list__empty-tip>img {
-    margin: 120px 0 26px;
-  }
-}