Center.js 6.89 KB
Newer Older
ddcat1115's avatar
ddcat1115 committed
1 2 3 4 5
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Link, routerRedux, Route, Switch, Redirect } from 'dva/router';
import { Card, Row, Col, Icon, Avatar, Tag, Divider, Spin, Input } from 'antd';
import { getRoutes } from '../../../utils/utils';
愚道's avatar
愚道 committed
6
import GridContent from '../../layouts/GridContent';
ddcat1115's avatar
ddcat1115 committed
7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
import styles from './Center.less';

@connect(({ list, loading, user, project }) => ({
  list,
  listLoading: loading.effects['list/fetch'],
  currentUser: user.currentUser,
  currentUserLoading: loading.effects['user/fetchCurrent'],
  project,
  projectLoading: loading.effects['project/fetchNotice'],
}))
export default class Center extends PureComponent {
  state = {
    newTags: [],
    inputVisible: false,
    inputValue: '',
jim's avatar
jim committed
22
  };
ddcat1115's avatar
ddcat1115 committed
23 24 25

  componentDidMount() {
    const { dispatch } = this.props;
陈帅's avatar
陈帅 committed
26
    dispatch({
ddcat1115's avatar
ddcat1115 committed
27 28 29 30 31 32 33 34 35 36 37 38 39
      type: 'user/fetchCurrent',
    });
    dispatch({
      type: 'list/fetch',
      payload: {
        count: 8,
      },
    });
    dispatch({
      type: 'project/fetchNotice',
    });
  }

jim's avatar
jim committed
40
  onTabChange = key => {
ddcat1115's avatar
ddcat1115 committed
41 42 43 44 45 46 47 48 49 50 51 52 53 54
    const { dispatch, match } = this.props;
    switch (key) {
      case 'articles':
        dispatch(routerRedux.push(`${match.url}/articles`));
        break;
      case 'applications':
        dispatch(routerRedux.push(`${match.url}/applications`));
        break;
      case 'projects':
        dispatch(routerRedux.push(`${match.url}/projects`));
        break;
      default:
        break;
    }
jim's avatar
jim committed
55
  };
ddcat1115's avatar
ddcat1115 committed
56 57 58

  showInput = () => {
    this.setState({ inputVisible: true }, () => this.input.focus());
jim's avatar
jim committed
59
  };
ddcat1115's avatar
ddcat1115 committed
60

jim's avatar
jim committed
61
  saveInputRef = input => {
ddcat1115's avatar
ddcat1115 committed
62
    this.input = input;
jim's avatar
jim committed
63
  };
ddcat1115's avatar
ddcat1115 committed
64

jim's avatar
jim committed
65
  handleInputChange = e => {
ddcat1115's avatar
ddcat1115 committed
66
    this.setState({ inputValue: e.target.value });
jim's avatar
jim committed
67
  };
ddcat1115's avatar
ddcat1115 committed
68 69 70 71 72 73 74 75 76 77 78 79 80

  handleInputConfirm = () => {
    const { state } = this;
    const { inputValue } = state;
    let { newTags } = state;
    if (inputValue && newTags.filter(tag => tag.label === inputValue).length === 0) {
      newTags = [...newTags, { key: `new-${newTags.length}`, label: inputValue }];
    }
    this.setState({
      newTags,
      inputVisible: false,
      inputValue: '',
    });
jim's avatar
jim committed
81
  };
ddcat1115's avatar
ddcat1115 committed
82 83 84

  render() {
    const { newTags, inputVisible, inputValue } = this.state;
jim's avatar
jim committed
85 86 87 88 89 90 91 92 93 94 95
    const {
      list: { list },
      listLoading,
      currentUser,
      currentUserLoading,
      project: { notice },
      projectLoading,
      match,
      routerData,
      location,
    } = this.props;
ddcat1115's avatar
ddcat1115 committed
96 97
    const routes = getRoutes(match.path, routerData);

jim's avatar
jim committed
98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123
    const operationTabList = [
      {
        key: 'articles',
        tab: (
          <span>
            文章 <span style={{ fontSize: 14 }}>(8)</span>
          </span>
        ),
      },
      {
        key: 'applications',
        tab: (
          <span>
            应用 <span style={{ fontSize: 14 }}>(8)</span>
          </span>
        ),
      },
      {
        key: 'projects',
        tab: (
          <span>
            项目 <span style={{ fontSize: 14 }}>(8)</span>
          </span>
        ),
      },
    ];
ddcat1115's avatar
ddcat1115 committed
124 125

    return (
陈帅's avatar
陈帅 committed
126
      <GridContent className={styles.userCenter}>
ddcat1115's avatar
ddcat1115 committed
127 128
        <Row gutter={24}>
          <Col lg={7} md={24}>
jim's avatar
jim committed
129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198
            <Card bordered={false} style={{ marginBottom: 24 }} loading={currentUserLoading}>
              {currentUser && Object.keys(currentUser).length ? (
                <div>
                  <div className={styles.avatarHolder}>
                    <img alt="" src={currentUser.avatar} />
                    <div className={styles.name}>{currentUser.name}</div>
                    <div>{currentUser.signature}</div>
                  </div>
                  <div className={styles.detail}>
                    <p>
                      <i className={styles.title} />
                      {currentUser.title}
                    </p>
                    <p>
                      <i className={styles.group} />
                      {currentUser.group}
                    </p>
                    <p>
                      <i className={styles.address} />
                      {currentUser.geographic.province.label}
                      {currentUser.geographic.city.label}
                    </p>
                  </div>
                  <Divider dashed />
                  <div className={styles.tags}>
                    <div className={styles.tagsTitle}>标签</div>
                    {currentUser.tags
                      .concat(newTags)
                      .map(item => <Tag key={item.key}>{item.label}</Tag>)}
                    {inputVisible && (
                      <Input
                        ref={this.saveInputRef}
                        type="text"
                        size="small"
                        style={{ width: 78 }}
                        value={inputValue}
                        onChange={this.handleInputChange}
                        onBlur={this.handleInputConfirm}
                        onPressEnter={this.handleInputConfirm}
                      />
                    )}
                    {!inputVisible && (
                      <Tag
                        onClick={this.showInput}
                        style={{ background: '#fff', borderStyle: 'dashed' }}
                      >
                        <Icon type="plus" />
                      </Tag>
                    )}
                  </div>
                  <Divider style={{ marginTop: 16 }} dashed />
                  <div className={styles.team}>
                    <div className={styles.teamTitle}>团队</div>
                    <Spin spinning={projectLoading}>
                      <Row gutter={36}>
                        {notice.map(item => (
                          <Col key={item.id} lg={24} xl={12}>
                            <Link to={item.href}>
                              <Avatar size="small" src={item.logo} />
                              {item.member}
                            </Link>
                          </Col>
                        ))}
                      </Row>
                    </Spin>
                  </div>
                </div>
              ) : (
                'loading...'
              )}
ddcat1115's avatar
ddcat1115 committed
199 200 201 202 203 204 205 206 207 208 209 210
            </Card>
          </Col>
          <Col lg={17} md={24}>
            <Card
              className={styles.tabsCard}
              bordered={false}
              tabList={operationTabList}
              activeTabKey={location.pathname.replace(`${match.path}/`, '')}
              onTabChange={this.onTabChange}
              loading={listLoading}
            >
              <Switch>
jim's avatar
jim committed
211 212 213 214 215 216 217 218 219
                {routes.map(item => (
                  <Route
                    key={item.key}
                    path={item.path}
                    render={props => <item.component {...props} list={list} />}
                    exact={item.exact}
                  />
                ))}
                <Redirect exact from="/account/center" to="/account/center/articles" />
ddcat1115's avatar
ddcat1115 committed
220 221 222 223 224
                <Redirect to="/exception/404" />
              </Switch>
            </Card>
          </Col>
        </Row>
陈帅's avatar
陈帅 committed
225
      </GridContent>
ddcat1115's avatar
ddcat1115 committed
226 227 228
    );
  }
}