@titaui/pc 1.7.63 → 1.7.67

package/src/pages/home/components/data-list/index.scss

@@ -0,0 +1,165 @@
+.homepage-datalist {
+  background-color: #f7f9fb;
+  height: calc(100vh - 41px);
+  overflow: auto;
+  padding: 14px 20px;
+  box-sizing: border-box;
+  div {
+    // box-sizing: border-box;
+  }
+  &__header {
+    height: 24px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #6f7886;
+    line-height: 24px;
+    b {
+      margin: 0 10px;
+      display: inline-block;
+      width: 1px;
+      height: 18px;
+      transform: translateY(5px);
+      background: linear-gradient(180deg, rgba(191, 199, 213, 0) 0%, #bfc7d5 50%, rgba(240, 242, 245, 0) 100%);
+    }
+    &--back {
+      color: #6f7886;
+      display: inline-block;
+      .tu-icon-fanhui {
+        color: #6f7886;
+        width: 14px;
+        height: 14px;
+        margin-right: 5px;
+      }
+      &:hover {
+        color: #2879ff;
+        .tu-icon-fanhui {
+          color: #2879ff;
+        }
+      }
+    }
+  }
+  &__main {
+    margin-top: 14px;
+    width: 100%;
+    min-height: calc(100vh - 110px);
+    background: #ffffff;
+    box-shadow: 0px 0px 8px 0px rgba(127, 145, 180, 0.1);
+    border-radius: 6px;
+    padding: 20px 24px 26px;
+    box-sizing: border-box;
+    position: relative;
+    &__navSelecter {
+      height: 24px;
+      display: flex;
+      justify-content: start;
+      align-items: center;
+      &--type {
+        width: 58px;
+        position: relative;
+        &--text {
+          width: 58px;
+          position: absolute;
+          left: 60%;
+          top: 50%;
+          transform: translate(-50%, -46%);
+          height: 18px;
+          font-size: 12px;
+          font-weight: 400;
+          color: #3f4755;
+          line-height: 18px;
+          .tu-icon-arrow-down1 {
+            margin-left: 4px;
+            width: 8px;
+            height: 8px;
+          }
+        }
+        &:hover > div {
+          color: #2879ff;
+          .tu-icon-arrow-down1 {
+            color: #2879ff;
+          }
+        }
+      }
+      b {
+        margin: 0 10px;
+        display: inline-block;
+        width: 2px;
+        height: 18px;
+        background: linear-gradient(180deg, rgba(191, 199, 213, 0) 0%, #bfc7d5 50%, rgba(240, 242, 245, 0) 100%);
+      }
+      &--cycle {
+        height: 30px;
+        font-size: 12px;
+        font-weight: 400;
+        color: #3f4755;
+        line-height: 30px;
+        cursor: pointer;
+        .tu-icon-arrow-down1 {
+          width: 8px;
+          height: 8px;
+        }
+        &:hover {
+          color: #2879ff;
+          .tu-icon-arrow-down1 {
+            color: #2879ff;
+          }
+        }
+      }
+    }
+    &__listEmpty {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      & > img {
+        width: 125px;
+        height: 128px;
+      }
+      &--text {
+        margin-top: 10px;
+        height: 20px;
+        font-size: 14px;
+        font-weight: 400;
+        color: #3f4755;
+        line-height: 20px;
+        text-align: center;
+      }
+      &--link {
+        display: block;
+        margin-top: 10px;
+        height: 22px;
+        font-size: 14px;
+        font-weight: 400;
+        color: #2879ff;
+        line-height: 22px;
+        text-align: center;
+        & > b {
+          width: 16px;
+          height: 16px;
+          color: #2879ff;
+          margin-right: 8px;
+        }
+        &:hover {
+          color: #5c8eff;
+          & > b {
+            color: #5c8eff;
+          }
+        }
+      }
+    }
+    &__listLoading {
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      margin: auto;
+      width: 100px;
+      height: 29px;
+      & > img {
+        width: 100px;
+        height: 29px;
+      }
+    }
+  }
+}

package/src/pages/home/components/data-list/index.tsx

@@ -0,0 +1,75 @@
+import React, { useState, useEffect, Fragment } from "react";
+import HomeDataTable from "./table";
+import HomeNavSelector from './nav-selector'
+// import Pagination from '../../../../components/pagination'
+import './index.scss'
+
+const preCls = 'homepage-datalist'
+
+
+export interface CycleTime {
+  name: string;
+  yearNum: string;
+  cycleType: string;
+  yqmNum: string;
+}
+
+const HomePageDataList = () => {
+
+  const [source, setSource] = useState('')//从url中获取页面来源
+  const [type, setType] = useState('')//从url中获取查找类型
+  const [cycleTime, setCycleTime] = useState<CycleTime>({ name: '全部周期', yearNum: '2021', cycleType: '-1', yqmNum: '0' })//周期时间
+
+  const typeMap = new Map()
+  typeMap.set('all', '全部')
+  typeMap.set('hadNotAlign', '未对齐')
+  typeMap.set('hadAlign', '已对齐')
+  typeMap.set('hadNotUpdate', '未更新')
+  typeMap.set('hadUpdate', '已更新')
+  typeMap.set('normalOkr', '正常')
+  typeMap.set('riskOkr', '有风险')
+  typeMap.set('dalyOkr', '已延期')
+  typeMap.set('endOkr', '已结束')
+
+
+  useEffect(() => {
+    const query = window.location.hash.split('?')[1]//将hash后的以#分开，取后面
+    const arr = query ? query.split("&") : [];//以&分割成数组
+    for (let item of arr) {
+      const [key, value] = item.split('=')//以等号分割
+      if (key === 'source') {
+        setSource(value)
+      }
+      if (key === 'type') {
+        setType(value)
+      }
+    }
+  }, [])
+
+
+  return (
+    <div className={`${preCls}`}>
+      <div className={`${preCls}__header`}>
+        {/* 为什么inline不可以？ */}
+        <a href='#homepage' className={`${preCls}__header--back`} >
+          <span className="tu-icon-fanhui" />
+          返回
+        </a>
+        <b />
+        {source === 'align' && 'OKR 对齐'}
+        {source === 'update' && 'OKR 更新'}
+        {source === 'target' && '我的OKR'}
+      </div>
+      <div className={`${preCls}__main`}>
+        <HomeNavSelector
+          source={source}
+          typeMap={typeMap} type={type} setType={setType}
+          cycleTime={cycleTime} setCycleTime={setCycleTime}
+        />
+        <HomeDataTable source={source} type={type} cycleTime={cycleTime} />
+      </div>
+    </div>
+  )
+}
+
+export default HomePageDataList

package/src/pages/home/components/data-list/nav-selector/index.tsx

@@ -0,0 +1,148 @@
+import React from "react";
+import SearchDropdown from '../../../../../components/search-dropdown'
+import PeriodSelector from '../../../../../components/period-selector'
+
+import { CycleTime } from '../index'
+
+interface Props {
+  type: string;
+  source: string;
+  setType: Function;
+  cycleTime: CycleTime;
+  setCycleTime: Function;
+  typeMap: Map<string, string>;
+}
+
+const preCls = 'homepage-datalist'
+
+const HomeNavSelector = (props: Props) => {
+
+  const { type, source, setType, cycleTime, setCycleTime, typeMap } = props
+
+  const onPeriodChange = (cycle) => {
+    const { annualNum, cycleType, yqmNum } = cycle
+    switch (cycleType) {
+      case '-1':
+        setCycleTime({
+          name: '全部周期',
+          cycleType: cycleType,
+          yearNum: annualNum,
+          yqmNum: yqmNum
+        })
+        break
+      case '0':
+        setCycleTime({
+          name: '自定义',
+          yearNum: annualNum,
+          cycleType: cycleType,
+          yqmNum: yqmNum
+        })
+        break
+      case '1':
+        setCycleTime({
+          name: `${annualNum}年`,
+          yearNum: annualNum,
+          cycleType: cycleType,
+          yqmNum: yqmNum
+        })
+        break
+      case '2':
+        setCycleTime({
+          name: `第${numberToWord(yqmNum)}季度`,
+          yearNum: annualNum,
+          cycleType: cycleType,
+          yqmNum: yqmNum
+        })
+        break
+      case '3':
+        setCycleTime({
+          name: `${yqmNum}月`,
+          yearNum: annualNum,
+          cycleType: cycleType,
+          yqmNum: yqmNum
+        })
+        break
+      case '4': 
+        setCycleTime({
+          name: `${yqmNum}-${(Number(yqmNum) + 1) % 12 || 12}月`,
+          yearNum: annualNum,
+          cycleType: cycleType,
+          yqmNum: yqmNum
+        })
+      break;
+      case '5': 
+        setCycleTime({
+          name: `${yqmNum == 1 ? '上' : '下'}半年`,
+          yearNum: annualNum,
+          cycleType: cycleType,
+          yqmNum: yqmNum
+        })
+      break;
+    }
+  }
+
+  const numberToWord = (num) => {
+    const arr = ['一', '二', '三', '四']
+    return arr[num - 1]
+  }
+
+  return (
+    <div className={`${preCls}__main__navSelecter`}>
+      <div className={`${preCls}__main__navSelecter--type`} >
+        <div style={{ opacity: 0, zIndex: 10, position: 'relative' }}>
+          {
+            source === 'align' &&
+            <SearchDropdown value={type} onChange={setType} >
+              <SearchDropdown.Option value="all">全部</SearchDropdown.Option>
+              <SearchDropdown.Option value='hadNotAlign'>未对齐</SearchDropdown.Option>
+              <SearchDropdown.Option value='hadAlign'>已对齐</SearchDropdown.Option>
+            </SearchDropdown>
+          }
+          {
+            source === 'update' &&
+            <SearchDropdown value={type} onChange={setType} >
+              <SearchDropdown.Option value="all">全部</SearchDropdown.Option>
+              <SearchDropdown.Option value='hadNotUpdate'>未更新</SearchDropdown.Option>
+              <SearchDropdown.Option value='hadUpdate'>已更新</SearchDropdown.Option>
+            </SearchDropdown>
+          }
+          {
+            source === 'target' &&
+            <SearchDropdown value={type} onChange={setType} >
+              <SearchDropdown.Option value="all">全部</SearchDropdown.Option>
+              <SearchDropdown.Option value='normalOkr'>正常</SearchDropdown.Option>
+              <SearchDropdown.Option value='riskOkr'>有风险</SearchDropdown.Option>
+              <SearchDropdown.Option value='dalyOkr'>已延期</SearchDropdown.Option>
+              <SearchDropdown.Option value='endOkr'>已结束</SearchDropdown.Option>
+            </SearchDropdown>
+          }
+        </div>
+        <div className={`${preCls}__main__navSelecter--type--text`}>
+          {typeMap.get(type)}<span className="tu-icon-arrow-down1" />
+        </div>
+      </div>
+
+      <b />
+
+      <PeriodSelector
+        selected={cycleTime ? {
+          annualNum: cycleTime.yearNum,
+          cycleType: cycleTime.cycleType,
+          yqmNum: cycleTime.yqmNum,
+        }:{
+          annualNum: '2021',
+          cycleType: '-1',
+          yqmNum: '0',
+        }}
+        onChange={(cycle: { annualNum: string, cycleType: string, yqmNum: string }) => onPeriodChange(cycle)}
+        yearsRange={[2018, 2030]}
+      >
+        <div className={`${preCls}__main__navSelecter--cycle`}>
+          {cycleTime.name} <span className="tu-icon-arrow-down1" />
+        </div>
+      </PeriodSelector>
+    </div>
+  )
+}
+
+export default HomeNavSelector

package/src/pages/home/components/data-list/table/columns/createDate.tsx

@@ -0,0 +1,13 @@
+import React, { ReactElement } from 'react'
+
+function CreateDate({ createDate }): ReactElement {
+
+  const date = new Date(createDate.replace(/-/g, '/').split('T').join(' ').split('.')[0])
+  return (
+    <div >
+      {createDate ? `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}` : '-'}
+    </div>
+  )
+}
+
+export default CreateDate

package/src/pages/home/components/data-list/table/columns/cycleTime.tsx

@@ -0,0 +1,14 @@
+import React, { ReactElement } from 'react'
+
+const preCls = "home-page-data-list-columns__cycletime";
+
+
+function CycleTime({ children }) {
+  return (
+    <div className={`${preCls}`}>
+      {children}
+    </div>
+  )
+}
+
+export default CycleTime

package/src/pages/home/components/data-list/table/columns/index.scss

@@ -0,0 +1,119 @@
+.home-page-data-list-columns {
+  &__okrname {
+    line-height: 22px;
+    height: 22px;
+    display: flex;
+    align-items: center;
+    &__tagO {
+      width: 24px;
+      height: 24px;
+      text-align: center;
+      line-height: 24px;
+      background: rgba(40, 121, 255, 0.1);
+      border-radius: 12px;
+      font-size: 16px;
+      font-weight: 600;
+      color: #2879ff;
+      margin-right: 4px;
+    }
+    &__tagKR {
+      margin-left: 28px;
+      height: 18px;
+      font-size: 12px;
+      color: #2879ff;
+      text-align: center;
+      line-height: 18px;
+      margin-right: 8px;
+    }
+    &__contentO,
+    &__contentKR {
+      flex: 1;
+      width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-size: 14px;
+      font-weight: 600;
+      color: #3f4755;
+      cursor: pointer;
+      &:hover {
+        color: #2879ff;
+      }
+    }
+  }
+  &__cycletime {
+    height: 22px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #3f4755;
+    line-height: 22px;
+  }
+
+  &__user {
+    &__name {
+      color: #3f4755;
+    }
+  }
+
+  &__progress {
+    display: flex;
+    align-items: center;
+    &__prgress__tag {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      margin-right: 8px;
+    }
+  }
+
+  &__updatetime {
+    height: 22px;
+    font-size: 14px;
+    font-weight: 400;
+
+    line-height: 22px;
+  }
+
+  &__tag {
+    display: inline-block;
+    height: 24px;
+    line-height: 24px;
+    border-radius: 12px;
+    padding: 0 8px;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 22px;
+    &--green {
+      color: #5ad8a6;
+      background-color: #e2fbf1;
+    }
+    &--red {
+      color: #f05e5e;
+      background-color: #fdeeee;
+    }
+  }
+
+  &__link {
+    color: #2879ff !important;
+    &:hover {
+      color: #5c8eff !important;
+    }
+  }
+
+  &__krname {
+    line-height: 22px;
+    height: 22px;
+    display: flex;
+    align-items: center;
+    &__tag {
+      font-size: 12px;
+      color: #2879ff;
+      margin-right: 8px;
+    }
+    &__name {
+      flex: 1;
+      width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}

package/src/pages/home/components/data-list/table/columns/index.tsx

@@ -0,0 +1,96 @@
+import React from 'react'
+import LinkColumn from './link';
+import OkrNameColumn from "./okrName";
+import ProgressAndRiskColumn from './progressAndRisk';
+import TagColumn from './tag';
+import UserColumn from './user';
+import CycleTime from './cycleTime'
+import UpdateTime from './updateTime'
+import CreateDate from './createDate'
+
+export const okrAlignColumns = [{
+  title: '名称',
+  width: '38%',
+  render: (data) => <OkrNameColumn onClick={data.behave}>{data.okrName}</OkrNameColumn>
+}, {
+  title: '周期时间',
+  width: '19%',
+  render: (data) => <CycleTime>{data.cycleTime}</CycleTime>
+}, {
+  title: '负责人',
+  width: '12%',
+  render: (data) => <UserColumn userInfo={data.userInfo} />
+}, {
+  title: '风险/进度',
+  width: '12%',
+  render: (data) => <ProgressAndRiskColumn status={data.status} progress={data.progress} riskLevel={data.riskLevel} />
+}, {
+  title: '状态',
+  width: '12%',
+  render: (data) => <TagColumn color={data.typeName === '已对齐' ? "green" : 'red'}>
+    {data.typeName}
+  </TagColumn>
+}, {
+  title: '操作',
+  width: '7%',
+  render: (data) => <LinkColumn onClick={data.behave} >
+    {data.typeName === '已对齐' ? '查看详情' : '去对齐'}
+  </LinkColumn>
+}]
+
+export const okrUpdateColumns = [{
+  title: '名称',
+  width: '38%',
+  render: (data) => <OkrNameColumn onClick={data.behave} type={data.okrType}>{data.okrName}</OkrNameColumn>
+}, {
+  title: '周期时间',
+  width: '19%',
+  render: (data) => <CycleTime>{data.cycleTime}</CycleTime>
+}, {
+  title: '负责人',
+  width: '12%',
+  render: (data) => <UserColumn userInfo={data.userInfo} />
+}, {
+  title: '风险/进度',
+  width: '12%',
+  render: (data) => <ProgressAndRiskColumn status={data.status} progress={data.progress} riskLevel={data.riskLevel} />
+}, {
+  title: '最近更新',
+  width: '12%',
+  render: (data) => <UpdateTime updateTime={data.updateTime} />
+}, {
+  title: '操作',
+  width: '7%',
+  render: (data) =>
+    <LinkColumn onClick={data.behave}>
+      {data.typeName === '已更新' ? '查看详情' : '去更新'}
+    </LinkColumn >
+}]
+
+export const myOkrColumns = [{
+  title: '名称',
+  width: '38%',
+  render: (data) => <OkrNameColumn onClick={data.behave} type={data.okrType}>{data.okrName}</OkrNameColumn>
+}, {
+  title: '周期时间',
+  width: '19%',
+  render: (data) => <CycleTime>{data.cycleTime}</CycleTime>
+}, {
+  title: '负责人',
+  width: '12%',
+  render: (data) => <UserColumn userInfo={data.userInfo} />
+}, {
+  title: '风险/进度',
+  width: '12%',
+  render: (data) => <ProgressAndRiskColumn status={data.status} progress={data.progress} riskLevel={data.riskLevel} />
+}, {
+  title: '最近更新',
+  width: '12%',
+  render: (data) => <UpdateTime updateTime={data.updateTime} />
+}, {
+  title: '创建日期',
+  width: '7%',
+  render: (data) => <CreateDate createDate={data.createDate} />
+}
+
+]

package/src/pages/home/components/data-list/table/columns/krName.tsx

@@ -0,0 +1,17 @@
+import React, { ReactElement } from 'react'
+
+interface Props {
+  name
+}
+const preCls = "home-page-data-list-columns__krname";
+
+function KrNameColumn({ name }: Props): ReactElement {
+  return (
+    <div className={preCls}>
+      <span className={preCls + '__tag'}>KR</span>
+      <span className={preCls + '__name'}>{name}</span>
+    </div>
+  )
+}
+
+export default KrNameColumn

package/src/pages/home/components/data-list/table/columns/link.tsx

@@ -0,0 +1,15 @@
+import React, { ReactElement } from 'react'
+
+interface Props {
+  onClick: React.MouseEventHandler<HTMLAnchorElement>
+}
+
+const LinkColumn: React.FC<Props> = ({ onClick, children }) => {
+  return (
+    <a onClick={onClick} className="home-page-data-list-columns__link" >
+      {children}
+    </a >
+  )
+}
+
+export default LinkColumn

package/src/pages/home/components/data-list/table/columns/okrName.tsx

@@ -0,0 +1,27 @@
+import React, { Fragment } from "react";
+import "./index.scss";
+
+const preCls = "home-page-data-list-columns__okrname";
+
+
+
+const OkrNameColumn = ({ children, type = 'O', onClick }) => {
+  return (
+    <div className={preCls} onClick={onClick}>
+      {type === 'O'
+        && <Fragment>
+          <div className={`${preCls}__tagO`}>O</div>
+          <span className={`${preCls}__contentO`}>{children}</span>
+        </Fragment>
+      }
+      {type === 'KR'
+        && <Fragment>
+          <div className={`${preCls}__tagKR`}>KR</div>
+          <span className={`${preCls}__contentKR`}>{children}</span>
+        </Fragment>
+      }
+    </div>
+  );
+};
+
+export default OkrNameColumn;