ProfileBasic,Exception500 to umi3 (#235)

* feat: remove Exception500/locales

* feat: ProfileBasic to umi3

ProfileBasic/src/_mock.ts

@@ -76,11 +76,15 @@ const basicProgress = [
   },
 ];
 
-const getProfileBasicData = {
-  basicGoods,
-  basicProgress,
-};
+function getProfileBasic(_: Request, res: Response) {
+  return res.json({
+    data: {
+      basicProgress,
+      basicGoods,
+    },
+  });
+}
 
 export default {
-  'GET  /api/profile/basic': getProfileBasicData,
+  'GET  /api/profile/basic': getProfileBasic,
 };

ProfileBasic/src/data.d.ts

@@ -15,8 +15,3 @@ export interface BasicProgress {
   operator: string;
   cost: string;
 }
-
-export interface BasicProfileDataType {
-  basicGoods: BasicGood[];
-  basicProgress: BasicProgress[];
-}

ProfileBasic/src/index.tsx

@@ -1,9 +1,8 @@
-import { Badge, Card, Descriptions, Divider, Table } from 'antd';
-import React, { Component } from 'react';
-
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
-import { connect, Dispatch } from 'umi';
-import { BasicProfileDataType } from './data.d';
+import { Badge, Card, Descriptions, Divider, Table } from 'antd';
+import React, { FC } from 'react';
+import { useRequest } from 'umi';
+import { queryBasicProfile } from './service';
 import styles from './style.less';
 
 const progressColumns = [
@@ -41,169 +40,143 @@ const progressColumns = [
   },
 ];
 
-interface PAGE_NAME_UPPER_CAMEL_CASEProps {
-  loading: boolean;
-  dispatch: Dispatch<any>;
-  BLOCK_NAME_CAMEL_CASE: BasicProfileDataType;
-}
-interface PAGE_NAME_UPPER_CAMEL_CASEState {
-  visible: boolean;
-}
+const PAGE_NAME_UPPER_CAMEL_CASE: FC = () => {
+  const { data, loading } = useRequest(() => {
+    return queryBasicProfile();
+  });
 
-class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
-  PAGE_NAME_UPPER_CAMEL_CASEProps,
-  PAGE_NAME_UPPER_CAMEL_CASEState
-> {
-  componentDidMount() {
-    const { dispatch } = this.props;
-    dispatch({
-      type: 'BLOCK_NAME_CAMEL_CASE/fetchBasic',
+  const { basicGoods, basicProgress } = data || {
+    basicGoods: [],
+    basicProgress: [],
+  };
+  let goodsData: typeof basicGoods = [];
+  if (basicGoods.length) {
+    let num = 0;
+    let amount = 0;
+    basicGoods.forEach((item) => {
+      num += Number(item.num);
+      amount += Number(item.amount);
+    });
+    goodsData = basicGoods.concat({
+      id: '总计',
+      num,
+      amount,
     });
   }
-
-  render() {
-    const { BLOCK_NAME_CAMEL_CASE, loading } = this.props;
-    const { basicGoods, basicProgress } = BLOCK_NAME_CAMEL_CASE;
-    let goodsData: typeof basicGoods = [];
-    if (basicGoods.length) {
-      let num = 0;
-      let amount = 0;
-      basicGoods.forEach((item) => {
-        num += Number(item.num);
-        amount += Number(item.amount);
-      });
-      goodsData = basicGoods.concat({
-        id: '总计',
-        num,
-        amount,
-      });
-    }
-    const renderContent = (value: any, row: any, index: any) => {
-      const obj: {
-        children: any;
-        props: { colSpan?: number };
-      } = {
-        children: value,
-        props: {},
-      };
-      if (index === basicGoods.length) {
-        obj.props.colSpan = 0;
-      }
-      return obj;
+  const renderContent = (value: any, row: any, index: any) => {
+    const obj: {
+      children: any;
+      props: { colSpan?: number };
+    } = {
+      children: value,
+      props: {},
     };
-    const goodsColumns = [
-      {
-        title: '商品编号',
-        dataIndex: 'id',
-        key: 'id',
-        render: (text: React.ReactNode, row: any, index: number) => {
-          if (index < basicGoods.length) {
-            return <a href="">{text}</a>;
-          }
-          return {
-            children: <span style={{ fontWeight: 600 }}>总计</span>,
-            props: {
-              colSpan: 4,
-            },
-          };
-        },
-      },
-      {
-        title: '商品名称',
-        dataIndex: 'name',
-        key: 'name',
-        render: renderContent,
-      },
-      {
-        title: '商品条码',
-        dataIndex: 'barcode',
-        key: 'barcode',
-        render: renderContent,
-      },
-      {
-        title: '单价',
-        dataIndex: 'price',
-        key: 'price',
-        align: 'right' as 'left' | 'right' | 'center',
-        render: renderContent,
+    if (index === basicGoods.length) {
+      obj.props.colSpan = 0;
+    }
+    return obj;
+  };
+
+  const goodsColumns = [
+    {
+      title: '商品编号',
+      dataIndex: 'id',
+      key: 'id',
+      render: (text: React.ReactNode, row: any, index: number) => {
+        if (index < basicGoods.length) {
+          return <a href="">{text}</a>;
+        }
+        return {
+          children: <span style={{ fontWeight: 600 }}>总计</span>,
+          props: {
+            colSpan: 4,
+          },
+        };
       },
-      {
-        title: '数量（件）',
-        dataIndex: 'num',
-        key: 'num',
-        align: 'right' as 'left' | 'right' | 'center',
-        render: (text: React.ReactNode, row: any, index: number) => {
-          if (index < basicGoods.length) {
-            return text;
-          }
-          return <span style={{ fontWeight: 600 }}>{text}</span>;
-        },
+    },
+    {
+      title: '商品名称',
+      dataIndex: 'name',
+      key: 'name',
+      render: renderContent,
+    },
+    {
+      title: '商品条码',
+      dataIndex: 'barcode',
+      key: 'barcode',
+      render: renderContent,
+    },
+    {
+      title: '单价',
+      dataIndex: 'price',
+      key: 'price',
+      align: 'right' as 'left' | 'right' | 'center',
+      render: renderContent,
+    },
+    {
+      title: '数量（件）',
+      dataIndex: 'num',
+      key: 'num',
+      align: 'right' as 'left' | 'right' | 'center',
+      render: (text: React.ReactNode, row: any, index: number) => {
+        if (index < basicGoods.length) {
+          return text;
+        }
+        return <span style={{ fontWeight: 600 }}>{text}</span>;
       },
-      {
-        title: '金额',
-        dataIndex: 'amount',
-        key: 'amount',
-        align: 'right' as 'left' | 'right' | 'center',
-        render: (text: React.ReactNode, row: any, index: number) => {
-          if (index < basicGoods.length) {
-            return text;
-          }
-          return <span style={{ fontWeight: 600 }}>{text}</span>;
-        },
+    },
+    {
+      title: '金额',
+      dataIndex: 'amount',
+      key: 'amount',
+      align: 'right' as 'left' | 'right' | 'center',
+      render: (text: React.ReactNode, row: any, index: number) => {
+        if (index < basicGoods.length) {
+          return text;
+        }
+        return <span style={{ fontWeight: 600 }}>{text}</span>;
       },
-    ];
-    return (
-      <PageHeaderWrapper>
-        <Card bordered={false}>
-          <Descriptions title="退款申请" style={{ marginBottom: 32 }}>
-            <Descriptions.Item label="取货单号">1000000000</Descriptions.Item>
-            <Descriptions.Item label="状态">已取货</Descriptions.Item>
-            <Descriptions.Item label="销售单号">1234123421</Descriptions.Item>
-            <Descriptions.Item label="子订单">3214321432</Descriptions.Item>
-          </Descriptions>
-          <Divider style={{ marginBottom: 32 }} />
-          <Descriptions title="用户信息" style={{ marginBottom: 32 }}>
-            <Descriptions.Item label="用户姓名">付小小</Descriptions.Item>
-            <Descriptions.Item label="联系电话">18100000000</Descriptions.Item>
-            <Descriptions.Item label="常用快递">菜鸟仓储</Descriptions.Item>
-            <Descriptions.Item label="取货地址">浙江省杭州市西湖区万塘路18号</Descriptions.Item>
-            <Descriptions.Item label="备注">无</Descriptions.Item>
-          </Descriptions>
-          <Divider style={{ marginBottom: 32 }} />
-          <div className={styles.title}>退货商品</div>
-          <Table
-            style={{ marginBottom: 24 }}
-            pagination={false}
-            loading={loading}
-            dataSource={goodsData}
-            columns={goodsColumns}
-            rowKey="id"
-          />
-          <div className={styles.title}>退货进度</div>
-          <Table
-            style={{ marginBottom: 16 }}
-            pagination={false}
-            loading={loading}
-            dataSource={basicProgress}
-            columns={progressColumns}
-          />
-        </Card>
-      </PageHeaderWrapper>
-    );
-  }
-}
+    },
+  ];
 
-export default 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'],
-  }),
-)(PAGE_NAME_UPPER_CAMEL_CASE);
+  return (
+    <PageHeaderWrapper>
+      <Card bordered={false}>
+        <Descriptions title="退款申请" style={{ marginBottom: 32 }}>
+          <Descriptions.Item label="取货单号">1000000000</Descriptions.Item>
+          <Descriptions.Item label="状态">已取货</Descriptions.Item>
+          <Descriptions.Item label="销售单号">1234123421</Descriptions.Item>
+          <Descriptions.Item label="子订单">3214321432</Descriptions.Item>
+        </Descriptions>
+        <Divider style={{ marginBottom: 32 }} />
+        <Descriptions title="用户信息" style={{ marginBottom: 32 }}>
+          <Descriptions.Item label="用户姓名">付小小</Descriptions.Item>
+          <Descriptions.Item label="联系电话">18100000000</Descriptions.Item>
+          <Descriptions.Item label="常用快递">菜鸟仓储</Descriptions.Item>
+          <Descriptions.Item label="取货地址">浙江省杭州市西湖区万塘路18号</Descriptions.Item>
+          <Descriptions.Item label="备注">无</Descriptions.Item>
+        </Descriptions>
+        <Divider style={{ marginBottom: 32 }} />
+        <div className={styles.title}>退货商品</div>
+        <Table
+          style={{ marginBottom: 24 }}
+          pagination={false}
+          loading={loading}
+          dataSource={goodsData}
+          columns={goodsColumns}
+          rowKey="id"
+        />
+        <div className={styles.title}>退货进度</div>
+        <Table
+          style={{ marginBottom: 16 }}
+          pagination={false}
+          loading={loading}
+          dataSource={basicProgress}
+          columns={progressColumns}
+        />
+      </Card>
+    </PageHeaderWrapper>
+  );
+};
+
+export default PAGE_NAME_UPPER_CAMEL_CASE;