From e1843dd8bd42d42f34880ccf50a2e24240494d56 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=B8=85?= <qixian.cs@outlook.com>
Date: Tue, 16 Apr 2019 18:00:27 +0800
Subject: [PATCH] BasicProfile finsh

---
 BasicProfile/src/{_mock.js => _mock.ts}       |  0
 .../DescriptionList/Description.tsx           | 26 ++++++
 .../DescriptionList/DescriptionList.tsx       | 49 ++++++++++
 .../src/components/DescriptionList/index.less | 92 +++++++++++++++++++
 .../src/components/DescriptionList/index.tsx  |  3 +
 .../components/DescriptionList/responsive.tsx |  6 ++
 .../src/components/PageHeaderWrapper/index.js | 26 ------
 .../components/PageHeaderWrapper/index.tsx    | 28 ++++++
 BasicProfile/src/data.d.ts                    | 22 +++++
 BasicProfile/src/{index.js => index.tsx}      | 61 ++++++++----
 BasicProfile/src/model.js                     | 28 ------
 BasicProfile/src/model.ts                     | 54 +++++++++++
 BasicProfile/src/{service.js => service.ts}   |  0
 package.json                                  |  2 +-
 14 files changed, 324 insertions(+), 73 deletions(-)
 rename BasicProfile/src/{_mock.js => _mock.ts} (100%)
 create mode 100644 BasicProfile/src/components/DescriptionList/Description.tsx
 create mode 100644 BasicProfile/src/components/DescriptionList/DescriptionList.tsx
 create mode 100644 BasicProfile/src/components/DescriptionList/index.less
 create mode 100644 BasicProfile/src/components/DescriptionList/index.tsx
 create mode 100644 BasicProfile/src/components/DescriptionList/responsive.tsx
 delete mode 100644 BasicProfile/src/components/PageHeaderWrapper/index.js
 create mode 100644 BasicProfile/src/components/PageHeaderWrapper/index.tsx
 create mode 100644 BasicProfile/src/data.d.ts
 rename BasicProfile/src/{index.js => index.tsx} (76%)
 delete mode 100644 BasicProfile/src/model.js
 create mode 100644 BasicProfile/src/model.ts
 rename BasicProfile/src/{service.js => service.ts} (100%)

diff --git a/BasicProfile/src/_mock.js b/BasicProfile/src/_mock.ts
similarity index 100%
rename from BasicProfile/src/_mock.js
rename to BasicProfile/src/_mock.ts
diff --git a/BasicProfile/src/components/DescriptionList/Description.tsx b/BasicProfile/src/components/DescriptionList/Description.tsx
new file mode 100644
index 00000000..d09ea52a
--- /dev/null
+++ b/BasicProfile/src/components/DescriptionList/Description.tsx
@@ -0,0 +1,26 @@
+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;
diff --git a/BasicProfile/src/components/DescriptionList/DescriptionList.tsx b/BasicProfile/src/components/DescriptionList/DescriptionList.tsx
new file mode 100644
index 00000000..d6806a73
--- /dev/null
+++ b/BasicProfile/src/components/DescriptionList/DescriptionList.tsx
@@ -0,0 +1,49 @@
+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;
diff --git a/BasicProfile/src/components/DescriptionList/index.less b/BasicProfile/src/components/DescriptionList/index.less
new file mode 100644
index 00000000..c3cf8e69
--- /dev/null
+++ b/BasicProfile/src/components/DescriptionList/index.less
@@ -0,0 +1,92 @@
+@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;
+    }
+  }
+}
diff --git a/BasicProfile/src/components/DescriptionList/index.tsx b/BasicProfile/src/components/DescriptionList/index.tsx
new file mode 100644
index 00000000..24ce8f7a
--- /dev/null
+++ b/BasicProfile/src/components/DescriptionList/index.tsx
@@ -0,0 +1,3 @@
+import DescriptionList from './DescriptionList';
+
+export default DescriptionList;
diff --git a/BasicProfile/src/components/DescriptionList/responsive.tsx b/BasicProfile/src/components/DescriptionList/responsive.tsx
new file mode 100644
index 00000000..a5aa73f7
--- /dev/null
+++ b/BasicProfile/src/components/DescriptionList/responsive.tsx
@@ -0,0 +1,6 @@
+export default {
+  1: { xs: 24 },
+  2: { xs: 24, sm: 12 },
+  3: { xs: 24, sm: 12, md: 8 },
+  4: { xs: 24, sm: 12, md: 6 },
+};
diff --git a/BasicProfile/src/components/PageHeaderWrapper/index.js b/BasicProfile/src/components/PageHeaderWrapper/index.js
deleted file mode 100644
index 9e839c45..00000000
--- a/BasicProfile/src/components/PageHeaderWrapper/index.js
+++ /dev/null
@@ -1,26 +0,0 @@
-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;
diff --git a/BasicProfile/src/components/PageHeaderWrapper/index.tsx b/BasicProfile/src/components/PageHeaderWrapper/index.tsx
new file mode 100644
index 00000000..065efffc
--- /dev/null
+++ b/BasicProfile/src/components/PageHeaderWrapper/index.tsx
@@ -0,0 +1,28 @@
+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;
diff --git a/BasicProfile/src/data.d.ts b/BasicProfile/src/data.d.ts
new file mode 100644
index 00000000..786f796d
--- /dev/null
+++ b/BasicProfile/src/data.d.ts
@@ -0,0 +1,22 @@
+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[];
+}
diff --git a/BasicProfile/src/index.js b/BasicProfile/src/index.tsx
similarity index 76%
rename from BasicProfile/src/index.js
rename to BasicProfile/src/index.tsx
index 864d3199..19265b5a 100644
--- a/BasicProfile/src/index.js
+++ b/BasicProfile/src/index.tsx
@@ -1,10 +1,11 @@
 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;
           }
diff --git a/BasicProfile/src/model.js b/BasicProfile/src/model.js
deleted file mode 100644
index 904733cc..00000000
--- a/BasicProfile/src/model.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { queryBasicProfile } from './service';
-
-export default {
-  namespace: 'BLOCK_NAME_CAMEL_CASE',
-
-  state: {
-    basicGoods: [],
-  },
-
-  effects: {
-    *fetchBasic(_, { call, put }) {
-      const response = yield call(queryBasicProfile);
-      yield put({
-        type: 'show',
-        payload: response,
-      });
-    },
-  },
-
-  reducers: {
-    show(state, { payload }) {
-      return {
-        ...state,
-        ...payload,
-      };
-    },
-  },
-};
diff --git a/BasicProfile/src/model.ts b/BasicProfile/src/model.ts
new file mode 100644
index 00000000..10816220
--- /dev/null
+++ b/BasicProfile/src/model.ts
@@ -0,0 +1,54 @@
+import { queryBasicProfile } from './service';
+import { BasicGood } from './data';
+import { Reducer } from 'redux';
+import { EffectsCommandMap } from 'dva';
+import { AnyAction } from 'redux';
+
+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: {
+    basicGoods: [],
+  },
+
+  effects: {
+    *fetchBasic(_, { call, put }) {
+      const response = yield call(queryBasicProfile);
+      yield put({
+        type: 'show',
+        payload: response,
+      });
+    },
+  },
+
+  reducers: {
+    show(state, { payload }) {
+      return {
+        ...state,
+        ...payload,
+      };
+    },
+  },
+};
+
+export default Model;
diff --git a/BasicProfile/src/service.js b/BasicProfile/src/service.ts
similarity index 100%
rename from BasicProfile/src/service.js
rename to BasicProfile/src/service.ts
diff --git a/package.json b/package.json
index d366bd1a..f1297438 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "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",
-- 
GitLab