BasicProfile finsh

BasicProfile/src/components/DescriptionList/Description.tsx

+import React from 'react';
+import { Col } from 'antd';
+import styles from './index.less';
+import responsive from './responsive';
+import { ColProps } from 'antd/es/col';
+
+export interface DescriptionProps extends ColProps {
+  column?: number;
+  key?: string | number;
+  style?: React.CSSProperties;
+  term?: React.ReactNode;
+}
+
+const Description: React.SFC<DescriptionProps> = props => {
+  const { term, column = 3, children, ...restProps } = props;
+  return (
+    <Col {...responsive[column]} {...restProps}>
+      {term && <div className={styles.term}>{term}</div>}
+      {children !== null && children !== undefined && (
+        <div className={styles.detail}>{children}</div>
+      )}
+    </Col>
+  );
+};
+
+export default Description;

BasicProfile/src/components/DescriptionList/DescriptionList.tsx

+import React from 'react';
+import classNames from 'classnames';
+import { Row } from 'antd';
+import styles from './index.less';
+import Description, { DescriptionProps } from './Description';
+
+export interface DescriptionListProps {
+  className?: string;
+  col?: number;
+  description?: DescriptionProps[];
+  gutter?: number;
+  layout?: 'horizontal' | 'vertical';
+  size?: 'large' | 'small';
+  style?: React.CSSProperties;
+  title?: React.ReactNode;
+}
+
+const DescriptionList: React.SFC<DescriptionListProps> & {
+  Description: typeof Description;
+} = ({
+  className,
+  title,
+  col = 3,
+  layout = 'horizontal',
+  gutter = 32,
+  children,
+  size,
+  ...restProps
+}) => {
+  const clsString = classNames(styles.descriptionList, styles[layout], className, {
+    [styles.small]: size === 'small',
+    [styles.large]: size === 'large',
+  });
+  const column = col > 4 ? 4 : col;
+  return (
+    <div className={clsString} {...restProps}>
+      {title ? <div className={styles.title}>{title}</div> : null}
+      <Row gutter={gutter}>
+        {React.Children.map(children, (child: any) =>
+          child ? React.cloneElement(child, { column }) : child
+        )}
+      </Row>
+    </div>
+  );
+};
+
+DescriptionList.Description = Description;
+
+export default DescriptionList;

BasicProfile/src/components/DescriptionList/index.less

+@import '~antd/lib/style/themes/default.less';
+
+.descriptionList {
+  // offset the padding-bottom of last row
+  :global {
+    .ant-row {
+      margin-bottom: -16px;
+      overflow: hidden;
+    }
+  }
+  // fix margin top error of following descriptionList
+  & + & {
+    :global {
+      .ant-row {
+        margin-top: 16px;
+      }
+    }
+  }
+
+  .title {
+    margin-bottom: 16px;
+    color: @heading-color;
+    font-weight: 500;
+    font-size: 14px;
+  }
+
+  .term {
+    display: table-cell;
+    padding-bottom: 16px;
+    color: @heading-color;
+    // Line-height is 22px IE dom height will calculate error
+    line-height: 20px;
+    white-space: nowrap;
+
+    &::after {
+      position: relative;
+      top: -0.5px;
+      margin: 0 8px 0 2px;
+      content: ':';
+    }
+  }
+
+  .detail {
+    display: table-cell;
+    width: 100%;
+    padding-bottom: 16px;
+    color: @text-color;
+    line-height: 20px;
+  }
+
+  &.small {
+    // offset the padding-bottom of last row
+    :global {
+      .ant-row {
+        margin-bottom: -8px;
+      }
+    }
+    // fix margin top error of following descriptionList
+    & + .descriptionList {
+      :global {
+        .ant-row {
+          margin-top: 8px;
+        }
+      }
+    }
+    .title {
+      margin-bottom: 12px;
+      color: @text-color;
+    }
+    .term,
+    .detail {
+      padding-bottom: 8px;
+    }
+  }
+
+  &.large {
+    .title {
+      font-size: 16px;
+    }
+  }
+
+  &.vertical {
+    .term {
+      display: block;
+      padding-bottom: 8px;
+    }
+
+    .detail {
+      display: block;
+    }
+  }
+}

BasicProfile/src/components/DescriptionList/index.tsx

+import DescriptionList from './DescriptionList';
+
+export default DescriptionList;

BasicProfile/src/components/DescriptionList/responsive.tsx

+export default {
+  1: { xs: 24 },
+  2: { xs: 24, sm: 12 },
+  3: { xs: 24, sm: 12, md: 8 },
+  4: { xs: 24, sm: 12, md: 6 },
+};

BasicProfile/src/components/PageHeaderWrapper/index.js

-import React from 'react';
-import { FormattedMessage } from 'umi-plugin-react/locale';
-import Link from 'umi/link';
-import { PageHeader } from 'ant-design-pro';
-import styles from './index.less';
-
-const PageHeaderWrapper = ({ children, contentWidth, wrapperClassName, top, ...restProps }) => (
-  <div style={{ margin: '-24px -24px 0' }} className={wrapperClassName}>
-    <PageHeader
-      wide={contentWidth === 'Fixed'}
-      home={<FormattedMessage id="BLOCK_NAME.menu.home" defaultMessage="Home" />}
-      key="pageheader"
-      {...restProps}
-      linkElement={Link}
-      itemRender={item => {
-        if (item.locale) {
-          return <FormattedMessage id={item.locale} defaultMessage={item.title} />;
-        }
-        return item.title;
-      }}
-    />
-    {children ? <div className={styles.content}>{children}</div> : null}
-  </div>
-);
-
-export default PageHeaderWrapper;

BasicProfile/src/components/PageHeaderWrapper/index.tsx

+import React from 'react';
+import { RouteContext } from '@ant-design/pro-layout';
+import { PageHeader } from 'antd';
+import styles from './index.less';
+
+interface IPageHeaderWrapperProps {
+  content?: React.ReactNode;
+  title: React.ReactNode;
+}
+
+const PageHeaderWrapper: React.SFC<IPageHeaderWrapperProps> = ({
+  children,
+  content,
+  ...restProps
+}) => (
+  <RouteContext.Consumer>
+    {value => (
+      <div style={{ margin: '-24px -24px 0' }}>
+        <PageHeader {...restProps} {...value}>
+          {content}
+        </PageHeader>
+        {children ? <div className={styles.content}>{children}</div> : null}
+      </div>
+    )}
+  </RouteContext.Consumer>
+);
+
+export default PageHeaderWrapper;

BasicProfile/src/data.d.ts

+export interface BasicGood {
+  id: string;
+  name: string;
+  barcode: string;
+  price: string;
+  num: string | number;
+  amount: string | number;
+}
+
+export interface BasicProgress {
+  key: string;
+  time: string;
+  rate: string;
+  status: string;
+  operator: string;
+  cost: string;
+}
+
+export interface BasicProfileDataType {
+  basicGoods: BasicGood[];
+  basicProgress: BasicProgress[];
+}

BasicProfile/src/index.js → BasicProfile/src/index.tsx

 import React, { Component } from 'react';
 import { connect } from 'dva';
 import { Card, Badge, Table, Divider } from 'antd';
-import { DescriptionList } from 'ant-design-pro';
+import DescriptionList from './components/DescriptionList';
 import PageHeaderWrapper from './components/PageHeaderWrapper';
 import styles from './style.less';
-
+import { BasicProfileDataType, BasicGood } from './data';
+import { Dispatch } from 'redux';
 const { Description } = DescriptionList;
 
 const progressColumns = [
@@ -22,7 +23,7 @@ const progressColumns = [
     title: '状态',
     dataIndex: 'status',
     key: 'status',
-    render: text =>
+    render: (text: string) =>
       text === 'success' ? (
         <Badge status="success" text="成功" />
       ) : (
@@ -41,11 +42,33 @@ const progressColumns = [
   },
 ];
 
-@connect(({ BLOCK_NAME_CAMEL_CASE, loading }) => ({
-  BLOCK_NAME_CAMEL_CASE,
-  loading: loading.effects['BLOCK_NAME_CAMEL_CASE/fetchBasic'],
-}))
-class PAGE_NAME_UPPER_CAMEL_CASE extends Component {
+interface PAGE_NAME_UPPER_CAMEL_CASEProps {
+  loading: boolean;
+  dispatch: Dispatch;
+  BLOCK_NAME_CAMEL_CASE: BasicProfileDataType;
+}
+interface PAGE_NAME_UPPER_CAMEL_CASEState {
+  visible: boolean;
+}
+
+@connect(
+  ({
+    BLOCK_NAME_CAMEL_CASE,
+    loading,
+  }: {
+    BLOCK_NAME_CAMEL_CASE: BasicProfileDataType;
+    loading: {
+      effects: { [key: string]: boolean };
+    };
+  }) => ({
+    BLOCK_NAME_CAMEL_CASE,
+    loading: loading.effects['BLOCK_NAME_CAMEL_CASE/fetchBasic'],
+  })
+)
+class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
+  PAGE_NAME_UPPER_CAMEL_CASEProps,
+  PAGE_NAME_UPPER_CAMEL_CASEState
+> {
   componentDidMount() {
     const { dispatch } = this.props;
     dispatch({
@@ -56,7 +79,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component {
   render() {
     const { BLOCK_NAME_CAMEL_CASE, loading } = this.props;
     const { basicGoods, basicProgress } = BLOCK_NAME_CAMEL_CASE;
-    let goodsData = [];
+    let goodsData: typeof basicGoods = [];
     if (basicGoods.length) {
       let num = 0;
       let amount = 0;
@@ -68,12 +91,14 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component {
         id: '总计',
         num,
         amount,
-      });
+      } as BasicGood);
     }
-    const renderContent = (value, row, index) => {
+    const renderContent = (value: any, row: any, index: any) => {
       const obj = {
         children: value,
-        props: {},
+        props: {} as {
+          colSpan?: number;
+        },
       };
       if (index === basicGoods.length) {
         obj.props.colSpan = 0;
@@ -85,7 +110,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component {
         title: '商品编号',
         dataIndex: 'id',
         key: 'id',
-        render: (text, row, index) => {
+        render: (text: React.ReactNode, row: any, index: number) => {
           if (index < basicGoods.length) {
             return <a href="">{text}</a>;
           }
@@ -113,15 +138,15 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component {
         title: '单价',
         dataIndex: 'price',
         key: 'price',
-        align: 'right',
+        align: 'right' as 'left' | 'right' | 'center',
         render: renderContent,
       },
       {
         title: '数量（件）',
         dataIndex: 'num',
         key: 'num',
-        align: 'right',
-        render: (text, row, index) => {
+        align: 'right' as 'left' | 'right' | 'center',
+        render: (text: React.ReactNode, row: any, index: number) => {
           if (index < basicGoods.length) {
             return text;
           }
@@ -132,8 +157,8 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component {
         title: '金额',
         dataIndex: 'amount',
         key: 'amount',
-        align: 'right',
-        render: (text, row, index) => {
+        align: 'right' as 'left' | 'right' | 'center',
+        render: (text: React.ReactNode, row: any, index: number) => {
           if (index < basicGoods.length) {
             return text;
           }

BasicProfile/src/model.js → BasicProfile/src/model.ts

 import { queryBasicProfile } from './service';
+import { BasicGood } from './data';
+import { Reducer } from 'redux';
+import { EffectsCommandMap } from 'dva';
+import { AnyAction } from 'redux';
 
-export default {
+export interface IStateType {
+  basicGoods: BasicGood[];
+}
+
+export type Effect = (
+  action: AnyAction,
+  effects: EffectsCommandMap & { select: <T>(func: (state: IStateType) => T) => T }
+) => void;
+
+export interface ModelType {
+  namespace: string;
+  state: IStateType;
+  effects: {
+    fetchBasic: Effect;
+  };
+  reducers: {
+    show: Reducer<IStateType>;
+  };
+}
+
+const Model: ModelType = {
   namespace: 'BLOCK_NAME_CAMEL_CASE',
 
   state: {
@@ -26,3 +50,5 @@ export default {
     },
   },
 };
+
+export default Model;

package.json

 {
   "private": true,
   "scripts": {
-    "dev": "cross-env PAGES_PATH='BasicList/src' umi dev",
+    "dev": "cross-env PAGES_PATH='BasicProfile/src' umi dev",
     "lint:style": "stylelint \"src/**/*.less\" --syntax less",
     "lint": "eslint --ext .js src mock tests && npm run lint:style",
     "lint:fix": "eslint --fix --ext .js src mock tests && npm run lint:style",