@titaui/pc 1.7.49 → 1.7.53

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

@@ -0,0 +1,28 @@
+export const SortTypeMap = {
+  'orderBySystem': {         // 系统默认排序
+    'up': 1,
+    'down': 1
+  },
+  'orderByCreateDate': {     // 创建时间
+    'up': 6,
+    'down': 7
+  },
+  'orderByStartDate': {      // 开始时间
+    'up': 2,
+    'down': 3
+  },
+  'orderByEndDate': {        // 结束时间
+    'up': 4,
+    'down': 5
+  }
+}
+
+export const EStatusMap =  {
+  all: '0,1,2,3,4,6',
+  unstart: '0',       // 未开始
+  doing: '1',         // 进行中
+  finish: '2',        // 已结束
+  delay: '3',         // 已延迟
+  cancel: '4',        // 已取消
+  pause: '6'          // 暂停中
+}

package/src/components/okr-detail/e-list/images/add.svg

@@ -0,0 +1,19 @@
+
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 59 (86127) - https://sketch.com -->
+    <title>Rectangle 22</title>
+    <desc>Created with Sketch.</desc>
+    <g id="邀请链接" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="查看所有切图备份" transform="translate(-74.000000, -810.000000)">
+            <g id="lanhu-icon-Slicing" transform="translate(74.000000, 810.000000)">
+                <g id="编组">
+                    <g>
+                        <rect id="Rectangle-22" x="0" y="0" width="16" height="16"></rect>
+                        <path d="M11.8138722,4.1564356 C12.1248419,4.45510955 12.0461513,4.87646596 11.5778003,5.42050481 L9.957,7.292 L9.96208507,7.29785195 L9.34381056,7.97705533 L10.5275641,9.29955421 C9.62103577,10.1948797 8.68380513,10.9110677 7.71587218,11.4481179 C6.74793922,11.9851682 5.50931516,12.1302557 4,11.8833803 L8.895,6.342 L8.8920585,6.33949814 L10.5566117,4.54345794 C11.0838156,3.9867691 11.5029024,3.85776165 11.8138722,4.1564356 Z" id="Combined-Shape" fill="#FFFFFF" transform="translate(8.000000, 8.000000) rotate(2.000000) translate(-8.000000, -8.000000) "></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/okr-detail/e-list/images/connect.svg

@@ -0,0 +1,19 @@
+
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 59 (86127) - https://sketch.com -->
+    <title>Rectangle 22</title>
+    <desc>Created with Sketch.</desc>
+    <g id="邀请链接" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="查看所有切图备份" transform="translate(-74.000000, -810.000000)">
+            <g id="lanhu-icon-Slicing" transform="translate(74.000000, 810.000000)">
+                <g id="编组">
+                    <g>
+                        <rect id="Rectangle-22" x="0" y="0" width="16" height="16"></rect>
+                        <path d="M11.8138722,4.1564356 C12.1248419,4.45510955 12.0461513,4.87646596 11.5778003,5.42050481 L9.957,7.292 L9.96208507,7.29785195 L9.34381056,7.97705533 L10.5275641,9.29955421 C9.62103577,10.1948797 8.68380513,10.9110677 7.71587218,11.4481179 C6.74793922,11.9851682 5.50931516,12.1302557 4,11.8833803 L8.895,6.342 L8.8920585,6.33949814 L10.5566117,4.54345794 C11.0838156,3.9867691 11.5029024,3.85776165 11.8138722,4.1564356 Z" id="Combined-Shape" fill="#FFFFFF" transform="translate(8.000000, 8.000000) rotate(2.000000) translate(-8.000000, -8.000000) "></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/okr-detail/e-list/images/line-down-arrow.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="8px" height="8px" viewBox="0 0 8 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>线性下拉-向下</title>
+    <g id="icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="OKR地图-icon" transform="translate(-934.000000, -158.000000)" fill-rule="nonzero">
+            <g id="线性下拉-向下" transform="translate(934.000000, 158.000000)">
+                <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="8" height="8"></rect>
+                <path d="M7.83793274,1.92223277 C7.62162238,1.70592241 7.265971,1.70592241 7.04966064,1.92223277 L4.00008275,4.97181066 L0.950504859,1.92223277 C0.734194503,1.70592241 0.378543122,1.70592241 0.162232766,1.92223277 C-0.0540775888,2.13854312 -0.0540775888,2.4941945 0.162232766,2.71050486 L3.6059467,6.1542188 C3.82225706,6.37052915 4.17790844,6.37052915 4.3942188,6.1542188 L7.83660568,2.71183192 C8.05424309,2.4941945 8.05424309,2.13854312 7.83793274,1.92223277 Z" id="路径" fill="#3F4755"></path>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/okr-detail/e-list/images/order-default.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="8px" height="14px" viewBox="0 0 8 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>黑色</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="任务-交互说明" transform="translate(-768.000000, -275.000000)" fill="#89919F" fill-rule="nonzero">
+            <g id="编组-12" transform="translate(668.000000, 218.000000)">
+                <g id="---" transform="translate(24.000000, 16.000000)">
+                    <g id="排序箭头上" transform="translate(73.000000, 41.000000)">
+                        <g id="黑色" transform="translate(3.500000, 0.875000)">
+                            <path d="M6.87099323,3.5270979 L3.87444543,0.170454545 C3.67292321,-0.0568181818 3.32244979,-0.0568181818 3.1296894,0.170454545 L0.133141602,3.5270979 C-0.164760811,3.85052448 0.0718087519,4.375 0.5011387,4.375 L6.4942343,4.375 C6.93232608,4.375 7.16013381,3.85052448 6.87099323,3.5270979 Z" id="路径"></path>
+                            <path d="M6.87099323,11.4020979 L3.87444543,8.04545455 C3.67292321,7.81818182 3.32244979,7.81818182 3.1296894,8.04545455 L0.133141602,11.4020979 C-0.164760811,11.7255245 0.0718087519,12.25 0.5011387,12.25 L6.4942343,12.25 C6.93232608,12.25 7.16013381,11.7255245 6.87099323,11.4020979 Z" id="路径" transform="translate(3.500000, 10.062500) rotate(-180.000000) translate(-3.500000, -10.062500) "></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/okr-detail/e-list/images/order-down.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="8px" height="14px" viewBox="0 0 8 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>下蓝</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="任务-交互说明" transform="translate(-814.000000, -275.000000)" fill-rule="nonzero">
+            <g id="下蓝" transform="translate(818.000000, 282.375000) scale(1, -1) translate(-818.000000, -282.375000) translate(814.500000, 275.875000)">
+                <path d="M6.87099323,3.5270979 L3.87444543,0.170454545 C3.67292321,-0.0568181818 3.32244979,-0.0568181818 3.1296894,0.170454545 L0.133141602,3.5270979 C-0.164760811,3.85052448 0.0718087519,4.375 0.5011387,4.375 L6.4942343,4.375 C6.93232608,4.375 7.16013381,3.85052448 6.87099323,3.5270979 Z" id="路径" fill="#2879FF"></path>
+                <path d="M6.87099323,11.4020979 L3.87444543,8.04545455 C3.67292321,7.81818182 3.32244979,7.81818182 3.1296894,8.04545455 L0.133141602,11.4020979 C-0.164760811,11.7255245 0.0718087519,12.25 0.5011387,12.25 L6.4942343,12.25 C6.93232608,12.25 7.16013381,11.7255245 6.87099323,11.4020979 Z" id="路径" fill="#89919F" transform="translate(3.500000, 10.062500) rotate(-180.000000) translate(-3.500000, -10.062500) "></path>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/okr-detail/e-list/images/order-up.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="8px" height="14px" viewBox="0 0 8 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>上蓝</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="任务-交互说明" transform="translate(-814.000000, -275.000000)" fill-rule="nonzero">
+            <g id="上蓝" transform="translate(814.500000, 275.875000)">
+                <path d="M6.87099323,3.5270979 L3.87444543,0.170454545 C3.67292321,-0.0568181818 3.32244979,-0.0568181818 3.1296894,0.170454545 L0.133141602,3.5270979 C-0.164760811,3.85052448 0.0718087519,4.375 0.5011387,4.375 L6.4942343,4.375 C6.93232608,4.375 7.16013381,3.85052448 6.87099323,3.5270979 Z" id="路径" fill="#2879FF"></path>
+                <path d="M6.87099323,11.4020979 L3.87444543,8.04545455 C3.67292321,7.81818182 3.32244979,7.81818182 3.1296894,8.04545455 L0.133141602,11.4020979 C-0.164760811,11.7255245 0.0718087519,12.25 0.5011387,12.25 L6.4942343,12.25 C6.93232608,12.25 7.16013381,11.7255245 6.87099323,11.4020979 Z" id="路径" fill="#89919F" transform="translate(3.500000, 10.062500) rotate(-180.000000) translate(-3.500000, -10.062500) "></path>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/okr-detail/e-list/images/vertical-line.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1px" height="18px" viewBox="0 0 1 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>矩形</title>
+    <defs>
+        <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-1">
+            <stop stop-color="#BFC7D5" stop-opacity="0" offset="0%"></stop>
+            <stop stop-color="#BFC7D5" offset="49.7439823%"></stop>
+            <stop stop-color="#F0F2F5" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="目标推屏--E执行" transform="translate(-693.000000, -201.000000)" fill="url(#linearGradient-1)">
+            <g id="居中弹窗" transform="translate(546.000000, 0.000000)">
+                <g id="筛选" transform="translate(32.000000, 201.000000)">
+                    <polygon id="矩形" transform="translate(115.500000, 9.000000) rotate(-90.000000) translate(-115.500000, -9.000000) " points="106.5 8.5 124.5 8.5 124.5 9.5 106.5 9.5"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

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

@@ -0,0 +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,
+  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";
+
+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 [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({
+        okrId,
+        noteOrder,
+        selectName,
+        checkedStatus,
+        users: selectUsers,
+        "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]);
+
+  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>
+            <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>
+                );
+              })}
+            </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

@@ -0,0 +1,23 @@
+.okr-detail-e {
+  padding-bottom: 60px;
+  .e__divider {
+    height: 8px;
+    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/precls.js

@@ -0,0 +1 @@
+export default ''

package/src/components/okr-detail/e-list/search-form/fields/e-order.js

@@ -0,0 +1,101 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import DropSelector, { Item } from '../../../../drop-selector';
+import DownArrowSvg from '../../images/line-down-arrow.svg';
+
+import '../index.scss';
+import './index.scss';
+
+const preCls = 'ode-search-form';
+
+const OrderItem = props => {
+  const { name, label, order } = props;
+  return <span key={name} className={classNames(`${preCls}__field-order-item`)}>
+    <span className={classNames(`${preCls}__field-order-item-text`)}>{label}</span>
+    <span className={classNames(`${preCls}__field-order-item-o`, {
+      [`${preCls}__field-order-item-o-up`]: order == 'up',
+      [`${preCls}__field-order-item-o-down`]: order == 'down'
+    })} />
+  </span>
+}
+
+const toggleSortState = (state, setState) => {
+  if (state === 'up') {
+    setState('down');
+  } else {
+    setState('up');
+  }
+}
+
+export default props => {
+  const { orderBy, equal, selectName, setSelectName, noteOrder, setNoteOrder } = props;
+
+  const [orderByCreateDate, setOrderByCreateDate] = useState();
+  const [orderByStartDate, setOrderByStartDate] = useState();
+  const [orderByEndDate, setOrderByEndDate] = useState();
+
+  const clearState = (name) => {
+    if (name === "orderByCreateDate") {
+      setOrderByStartDate(undefined);
+      setOrderByEndDate(undefined);
+    } else if (name === "orderByStartDate") {
+      setOrderByCreateDate(undefined);
+      setOrderByEndDate(undefined);
+    } else if (name === 'orderByEndDate') {
+      setOrderByStartDate(undefined);
+      setOrderByCreateDate(undefined);
+    } else {
+      setOrderByCreateDate(undefined);
+      setOrderByStartDate(undefined);
+      setOrderByEndDate(undefined);
+    }
+  }
+
+  const onChangeHandler = (name, checked) => {
+    clearState(name);
+    if (name === "orderByCreateDate") {
+      toggleSortState(orderByCreateDate, setOrderByCreateDate);
+      toggleSortState(orderByCreateDate, setNoteOrder);
+    } else if (name === "orderByStartDate") {
+      toggleSortState(orderByStartDate, setOrderByStartDate);
+      toggleSortState(orderByStartDate, setNoteOrder);
+    } else if (name === 'orderByEndDate') {
+      toggleSortState(orderByEndDate, setOrderByEndDate);
+      toggleSortState(orderByEndDate, setNoteOrder);
+    }
+    setSelectName(name);
+  }
+
+  useEffect(() => {
+    clearState(selectName);
+    if (selectName === "orderByCreateDate") {
+      setOrderByCreateDate(noteOrder);
+    } else if (selectName === "orderByStartDate") {
+      setOrderByStartDate(noteOrder);
+    } else if (selectName === 'orderByEndDate') {
+      setOrderByEndDate(noteOrder);
+    }
+  }, [selectName, noteOrder])
+
+  return <div className={`${preCls}__field`}>
+    <DropSelector
+      onChange={onChangeHandler}
+      popupPlacement={'bottomLeft'}
+      checked={['orderBySystem']}
+      trigger={<div className={classNames(`${preCls}__field-order`)}>默认排序 <i className={'tu-icon-arrow-down'}/></div>}
+    >
+      <Item name="orderBySystem">
+        <span className={selectName === 'orderBySystem' ? classNames(`${preCls}__select-item--selected`) : ''}>系统默认排序</span>
+      </Item>
+      <Item name="orderByCreateDate" onClick={onChangeHandler}>
+        <OrderItem order={orderByCreateDate} label="创建时间" />
+      </Item>
+      <Item name="orderByStartDate" onClick={onChangeHandler}>
+        <OrderItem order={orderByStartDate} label="开始时间" />
+      </Item>
+      <Item name="orderByEndDate" onClick={onChangeHandler}>
+        <OrderItem order={orderByEndDate} label="结束时间" />
+      </Item>
+    </DropSelector>
+  </div>
+}

package/src/components/okr-detail/e-list/search-form/fields/e-status.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import classNames from 'classnames';
+import DropSelector, { Item } from '../../../../drop-selector';
+import DownArrowSvg from '../../images/line-down-arrow.svg';
+
+import '../index.scss';
+
+const preCls = 'ode-search-form';
+
+export default (props) => {
+  const { checkedStatus, setCheckedStatus } = props;
+
+  const onItemClickHandler = (name, isChecked) => {
+    if (name == 'all' && isChecked) return setCheckedStatus(['all', 'unstart', 'doing', 'finish', 'delay', 'cancel', 'pause']);
+    else if (name == 'all' && !isChecked) return setCheckedStatus([]);
+    let newChecked = [...checkedStatus];
+    if (newChecked.indexOf(name) != -1) {
+      newChecked = newChecked.filter(itname => itname != name);
+      newChecked = newChecked.filter(itname => itname != 'all');
+    } else {
+      newChecked.push(name);
+      if (!newChecked.includes('all') && newChecked.length === 6) {
+        newChecked = ['all', 'unstart', 'doing', 'finish', 'delay', 'cancel', 'pause']
+      }
+    }
+    setCheckedStatus(newChecked);
+  }
+
+  return <div className={`${preCls}__field`}>
+    <DropSelector
+      multi={true}
+      checked={checkedStatus}
+      popupPlacement={'bottomLeft'}
+      hideOnChange={false}
+      onChange={onItemClickHandler}
+      limitHeight={false}
+      trigger={<div className={classNames(`${preCls}__field-status`)}>状态 <i className={'tu-icon-arrow-down'}/></div>}
+    >
+      <Item name="all">全部状态</Item>
+      <Item name="unstart">未开始</Item>
+      <Item name="doing">进行中</Item>
+      <Item name="finish">已结束</Item>
+      <Item name="delay">已延迟</Item>
+      <Item name="cancel">已取消</Item>
+      <Item name="pause">暂停中</Item>
+    </DropSelector>
+  </div>
+}

package/src/components/okr-detail/e-list/search-form/fields/e-user.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import classNames from 'classnames';
+import FieldTreeSelector from '../../../../user-selector/export-modules/field-tree-selector';
+import '../index.scss';
+
+const preCls = 'ode-search-form';
+
+export default ({ selectUsers, setSelectUsers }) => {
+
+  const onSelectUser = (node) => {
+    setSelectUsers(node.users);
+  }
+
+  return <div className={`${preCls}__field`}>
+    <FieldTreeSelector
+      multiple={true}
+      selectNodes={{ 'users': selectUsers }}
+      onOk={onSelectUser}
+      position="bottomLeft"
+      disabledDepartSelect={true}
+      panes={{ 'depart': true, 'group': false }}
+    >
+      <div className={classNames(`${preCls}__field-user`)}>人员 <i className={'tu-icon-arrow-down'} /></div>
+    </FieldTreeSelector>
+  </div >
+}

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

@@ -0,0 +1,34 @@
+
+.ode-search-form {
+  &__field-order-item {
+    display: inline-block;
+    position: relative;
+    width: 100%;
+    user-select: none;
+
+    &-text {
+      display: inline-block;
+    }
+
+    &-o {
+      display: inline-block;
+      position: absolute;
+      height: 100%;
+      width: 10px;
+      right: 0px;
+      top: 0;
+      background: url(../../images/order-default.svg) transparent no-repeat 50% 50%;
+    }
+
+    &-o-up {
+      background: url(../../images/order-up.svg) transparent no-repeat 50% 50%;
+    }
+
+    &-o-down {
+      background: url(../../images/order-down.svg) transparent no-repeat 50% 50%;
+    }
+  }
+  &__select-item--selected {
+    color: #2879FF;
+  }
+}