index.tsx 3.91 KB
Newer Older
陈帅's avatar
陈帅 committed
1 2
import { Button, Card, Col, Icon, Row, Steps } from 'antd';
import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
陈帅's avatar
陈帅 committed
3
import React, { Fragment } from 'react';
陈帅's avatar
陈帅 committed
4

陈帅's avatar
陈帅 committed
5
import { GridContent } from '@ant-design/pro-layout';
陈帅's avatar
陈帅 committed
6
import Result from './Result';
陈帅's avatar
陈帅 committed
7
import styles from './index.less';
8

afc163's avatar
afc163 committed
9
const { Step } = Steps;
10 11

const desc1 = (
陈帅's avatar
陈帅 committed
12
  <div className={styles.title}>
ddcat1115's avatar
ddcat1115 committed
13
    <div style={{ margin: '8px 0 4px' }}>
14
      <FormattedMessage id="BLOCK_NAME.success.step1-operator" defaultMessage="Qu Lili" />
陈帅's avatar
陈帅 committed
15
      <Icon style={{ marginLeft: 8, color: '#00A0E9' }} type="dingding-o" />
16 17 18 19 20 21
    </div>
    <div>2016-12-12 12:32</div>
  </div>
);

const desc2 = (
22
  <div style={{ fontSize: 12, position: 'relative', left: 42, textAlign: 'left' }}>
ddcat1115's avatar
ddcat1115 committed
23
    <div style={{ margin: '8px 0 4px' }}>
24
      <FormattedMessage id="BLOCK_NAME.success.step2-operator" defaultMessage="Zhou Maomao" />
陈帅's avatar
陈帅 committed
25
      <Icon type="dingding-o" style={{ color: '#00A0E9', marginLeft: 8 }} />
26
    </div>
jim's avatar
jim committed
27
    <div>
张秀玲's avatar
张秀玲 committed
28
      <a href="">
29
        <FormattedMessage id="BLOCK_NAME.success.step2-extra" defaultMessage="Urge" />
张秀玲's avatar
张秀玲 committed
30
      </a>
jim's avatar
jim committed
31
    </div>
32 33 34 35
  </div>
);

const extra = (
陈帅's avatar
陈帅 committed
36
  <Fragment>
陈帅's avatar
陈帅 committed
37
    <div className={styles['head-title']}>
38
      <FormattedMessage id="BLOCK_NAME.success.operate-title" defaultMessage="Project Name" />
39
    </div>
ddcat1115's avatar
ddcat1115 committed
40 41
    <Row style={{ marginBottom: 16 }}>
      <Col xs={24} sm={12} md={12} lg={12} xl={6}>
陈帅's avatar
陈帅 committed
42
        <span>
43
          <FormattedMessage id="BLOCK_NAME.success.operate-id" defaultMessage="Project ID:" />
张秀玲's avatar
张秀玲 committed
44
        </span>
ddcat1115's avatar
ddcat1115 committed
45 46 47
        23421
      </Col>
      <Col xs={24} sm={12} md={12} lg={12} xl={6}>
陈帅's avatar
陈帅 committed
48
        <span>
49
          <FormattedMessage id="BLOCK_NAME.success.principal" defaultMessage="Principal:" />
张秀玲's avatar
张秀玲 committed
50
        </span>
51
        <FormattedMessage id="BLOCK_NAME.success.step1-operator" defaultMessage="Qu Lili" />
ddcat1115's avatar
ddcat1115 committed
52 53
      </Col>
      <Col xs={24} sm={24} md={24} lg={24} xl={12}>
陈帅's avatar
陈帅 committed
54
        <span>
张秀玲's avatar
张秀玲 committed
55
          <FormattedMessage
56
            id="BLOCK_NAME.success.operate-time"
张秀玲's avatar
张秀玲 committed
57 58 59
            defaultMessage="Effective time:"
          />
        </span>
ddcat1115's avatar
ddcat1115 committed
60 61
        2016-12-12 ~ 2017-12-12
      </Col>
62
    </Row>
ddcat1115's avatar
ddcat1115 committed
63
    <Steps style={{ marginLeft: -42, width: 'calc(100% + 84px)' }} progressDot current={1}>
张秀玲's avatar
张秀玲 committed
64 65 66
      <Step
        title={
          <span style={{ fontSize: 14 }}>
67
            <FormattedMessage id="BLOCK_NAME.success.step1-title" defaultMessage="Create project" />
张秀玲's avatar
张秀玲 committed
68 69 70 71 72 73 74 75
          </span>
        }
        description={desc1}
      />
      <Step
        title={
          <span style={{ fontSize: 14 }}>
            <FormattedMessage
76
              id="BLOCK_NAME.success.step2-title"
张秀玲's avatar
张秀玲 committed
77 78 79 80 81 82 83 84 85 86
              defaultMessage="Departmental preliminary review"
            />
          </span>
        }
        description={desc2}
      />
      <Step
        title={
          <span style={{ fontSize: 14 }}>
            <FormattedMessage
87
              id="BLOCK_NAME.success.step3-title"
张秀玲's avatar
张秀玲 committed
88 89 90 91 92 93 94 95
              defaultMessage="Financial review"
            />
          </span>
        }
      />
      <Step
        title={
          <span style={{ fontSize: 14 }}>
96
            <FormattedMessage id="BLOCK_NAME.success.step4-title" defaultMessage="Finish" />
张秀玲's avatar
张秀玲 committed
97 98 99
          </span>
        }
      />
100
    </Steps>
陈帅's avatar
陈帅 committed
101
  </Fragment>
102 103 104
);

const actions = (
陈帅's avatar
陈帅 committed
105
  <Fragment>
张秀玲's avatar
张秀玲 committed
106
    <Button type="primary">
107
      <FormattedMessage id="BLOCK_NAME.success.btn-return" defaultMessage="Back to list" />
张秀玲's avatar
张秀玲 committed
108 109
    </Button>
    <Button>
110
      <FormattedMessage id="BLOCK_NAME.success.btn-project" defaultMessage="View project" />
张秀玲's avatar
张秀玲 committed
111 112
    </Button>
    <Button>
113
      <FormattedMessage id="BLOCK_NAME.success.btn-print" defaultMessage="Print" />
张秀玲's avatar
张秀玲 committed
114
    </Button>
陈帅's avatar
陈帅 committed
115
  </Fragment>
116 117 118
);

export default () => (
陈帅's avatar
陈帅 committed
119 120 121 122 123 124 125 126 127 128 129 130
  <GridContent>
    <Card bordered={false}>
      <Result
        type="success"
        title={formatMessage({ id: 'BLOCK_NAME.success.title' })}
        description={formatMessage({ id: 'BLOCK_NAME.success.description' })}
        extra={extra}
        actions={actions}
        style={{ marginTop: 48, marginBottom: 16 }}
      />
    </Card>
  </GridContent>
131
);