@titaui/pc 1.9.98 → 1.9.102

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

@@ -1,73 +0,0 @@
-import React from "react";
-import Switch from "../../../components/switch";
-import Tooltip from "../../../components/tooltip";
-import { OpenDepartmentName } from "../../../utils/open-data";
-import { getLocale } from "../../../utils/getLocale";
-import { precls } from "../precls";
-import "./index.scss";
-
-interface IProps {
-  onlyThisDept: boolean;
-  onChange: (flat: boolean) => void;
-  departmentName: string;
-  departmentId: number;
-}
-
-function 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 && getLocale("OKR_CompanyAll_Allobje")}
-              {departmentId != 0 && (
-                <OpenDepartmentName name={departmentName} id={departmentId} />
-              )}
-            </>
-          )}
-        />
-      </div>
-      {departmentId != 0 && (
-        <Switch
-          label={(
-            <span>
-              <Tooltip
-                overlay={getLocale("OKR_ComAll_Wswitchon")}
-                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,114 +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";
-import { getLocale } from "../../../utils/getLocale";
-
-function Filter(props: {
-  onSearch: Function
-}) {
-  const useLocalStorage = new LocalStorage();
-  const { onSearch } = props;
-  const [filterDrawerVisible, setFilterDrawerVisible] = useState(false);
-  const [filterNum, setFilterNum] = useState(() => {
-    let num = 0;
-    const values = useLocalStorage.getItem("okr-filter-values") || {
-      okrType: "",
-      okrClassify: "",
-      orderType: 2,
-    };
-    if (values.okrType) {
-      num += 1;
-    }
-    if (values.okrClassify) {
-      num += 1;
-    }
-    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) {
-      const newCycle = { annualNum, cycleType, yqmNum };
-      setCycle(newCycle);
-      onSearch(newCycle);
-    }
-  }, []);
-
-  const changeCycleUrl = (s) => {
-    const routerData = getQueryString();
-    const {
-      annualNum, cycleType, yqmNum, toUserId,
-    } = routerData;
-    if (!!annualNum && !!cycleType && !!yqmNum) {
-      const origin = window.location.href.split("?")[0];
-      const url = `${origin}?cycleType=${s.cycleType}&yqmNum=${s.yqmNum}&annualNum=${s.annualNum}&toUserId=${toUserId}`;
-      window.history.pushState("", "", url);
-    }
-  };
-
-  const handleChangeCycle = (s) => {
-    changeCycleUrl(s);
-    setCycle(s);
-    if (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`} />
-          <Tooltip overlay={getLocale("OKR_MyO_Text_Screening")} 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,164 +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 { getLocale } from "../../../utils/getLocale";
-import "./index.scss";
-
-function 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 = () => {
-    const rootNode = {
-      rootId: 0,
-      // @ts-ignore
-      rootName: window.BSGlobal.tenantInfo.Name || "",
-    };
-    const 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} />;
-    } if (relation == 2 || relation == 3) {
-      return <RelationTitle relation={relation} />;
-    } if (toUserId) {
-      return <UserTitle toUserId={toUserId} />;
-    } 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={getLocale("OKR_MyO_Text_Alignment")} 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,18 +0,0 @@
-import React from "react";
-import { precls } from "../precls";
-import { getLocale } from "../../../utils/getLocale";
-import "./index.scss";
-
-function RelationTitle({ relation }) {
-  const relationTitle = {
-    2: getLocale("OKR_Menu_Title_Collaborator"),
-    3: getLocale("OKR_Menu_Title_FollowingOKRs"),
-  };
-
-  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";
-
-function 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;
-  }
-}