add BasicProfile

.roadhogrc.mock.js

@@ -3,7 +3,8 @@ import { getRule, postRule } from './mock/rule';
 import { getActivities, getNotice, getFakeList } from './mock/api';
 import { getFakeChartData } from './mock/chart';
 import { imgMap } from './mock/utils';
-import { getProfileData } from './mock/profile';
+import { getProfileBasicData } from './mock/profile';
+import { getProfileAdvancedData } from './mock/profile';
 import { getNotices } from './mock/notices';
 import { format, delay } from 'roadhog-api-doc';
 
@@ -63,7 +64,8 @@ const proxy = {
   }),
   'GET /api/fake_list': getFakeList,
   'GET /api/fake_chart_data': getFakeChartData,
-  'GET /api/profile': getProfileData,
+  'GET /api/profile/basic': getProfileBasicData,
+  'GET /api/profile/advanced': getProfileAdvancedData,
   'POST /api/login/account': (req, res) => {
     const { password, userName } = req.body;
     res.send({ status: password === '888888' && userName === 'admin' ? 'ok' : 'error', type: 'account' });

mock/profile.js

-const operation1 = [
+const basicGoods = [
+  {
+    id: '1234561',
+    name: '矿泉水 550ml',
+    barcode: '12421432143214321',
+    price: '2.00',
+    num: '1',
+    amount: '2.00',
+  },
+  {
+    id: '1234562',
+    name: '凉茶 300ml',
+    barcode: '12421432143214322',
+    price: '3.00',
+    num: '2',
+    amount: '6.00',
+  },
+  {
+    id: '1234563',
+    name: '好吃的薯片',
+    barcode: '12421432143214323',
+    price: '7.00',
+    num: '4',
+    amount: '28.00',
+  },
+  {
+    id: '1234564',
+    name: '特别好吃的蛋卷',
+    barcode: '12421432143214324',
+    price: '8.50',
+    num: '3',
+    amount: '25.50',
+  },
+];
+
+const basicProgress = [
+  {
+    key: '1',
+    time: '2017-10-01 14:10',
+    rate: '联系客户',
+    status: 'processing',
+    operator: '取货员 ID1234',
+    cost: '5mins',
+  },
+  {
+    key: '2',
+    time: '2017-10-01 14:05',
+    rate: '取货员出发',
+    status: 'success',
+    operator: '取货员 ID1234',
+    cost: '1h',
+  },
+  {
+    key: '3',
+    time: '2017-10-01 13:05',
+    rate: '取货员接单',
+    status: 'success',
+    operator: '取货员 ID1234',
+    cost: '5mins',
+  },
+  {
+    key: '4',
+    time: '2017-10-01 13:00',
+    rate: '申请审批通过',
+    status: 'success',
+    operator: '系统',
+    cost: '1h',
+  },
+  {
+    key: '5',
+    time: '2017-10-01 12:00',
+    rate: '发起退货申请',
+    status: 'success',
+    operator: '用户',
+    cost: '5mins',
+  },
+];
+
+const advancedOperation1 = [
   {
     key: 'op1',
     type: '订购关系生效',
@@ -41,7 +119,7 @@ const operation1 = [
   },
 ];
 
-const operation2 = [
+const advancedOperation2 = [
   {
     key: 'op1',
     type: '订购关系生效',
@@ -52,7 +130,7 @@ const operation2 = [
   },
 ];
 
-const operation3 = [
+const advancedOperation3 = [
   {
     key: 'op1',
     type: '创建订单',
@@ -63,12 +141,18 @@ const operation3 = [
   },
 ];
 
-export const getProfileData = {
-  operation1,
-  operation2,
-  operation3,
+export const getProfileBasicData = {
+  basicGoods,
+  basicProgress,
+};
+
+export const getProfileAdvancedData = {
+  advancedOperation1,
+  advancedOperation2,
+  advancedOperation3,
 };
 
 export default {
-  getProfileData,
+  getProfileBasicData,
+  getProfileAdvancedData,
 };

src/common/nav.js

@@ -12,7 +12,9 @@ import FilterCardList from '../routes/List/FilterCardList';
 import SearchList from '../routes/List/SearchList';
 import BasicList from '../routes/List/BasicList';
 
-import Profile from '../routes/Profile';
+import BasicProfile from '../routes/Profile/BasicProfile';
+import AdvancedProfile from '../routes/Profile/AdvancedProfile';
+
 import BasicForm from '../routes/Forms/BasicForm';
 import AdvancedForm from '../routes/Forms/AdvancedForm';
 import StepForm from '../routes/Forms/StepForm';
@@ -107,8 +109,16 @@ const data = [{
   }, {
     name: '详情页',
     path: 'profile',
-    component: Profile,
     icon: 'profile',
+    children: [{
+      name: '基础详情页',
+      path: 'basic',
+      component: BasicProfile,
+    }, {
+      name: '高级详情页',
+      path: 'advanced',
+      component: AdvancedProfile,
+    }],
   }, {
     name: '结果',
     path: 'result',

src/models/profile.js

-import { queryProfile } from '../services/api';
+import { queryBasicProfile, queryAdvancedProfile } from '../services/api';
 
 export default {
   namespace: 'profile',
 
   state: {
-    operation1: [],
-    operation2: [],
-    operation3: [],
-    loading: true,
+    basicGoods: [],
+    basicLoading: true,
+    advancedOperation1: [],
+    advancedOperation2: [],
+    advancedOperation3: [],
+    advancedLoading: true,
   },
 
   effects: {
-    *fetch({ payload }, { call, put }) {
+    *fetchBasic({ payload }, { call, put }) {
       yield put({
         type: 'changeLoading',
-        payload: true,
+        payload: { basicLoading: true },
       });
-      const response = yield call(queryProfile);
+      const response = yield call(queryBasicProfile);
       yield put({
         type: 'show',
         payload: response,
       });
       yield put({
         type: 'changeLoading',
-        payload: false,
+        payload: { basicLoading: false },
+      });
+    },
+    *fetchAdvanced({ payload }, { call, put }) {
+      yield put({
+        type: 'changeLoading',
+        payload: { advancedLoading: true },
+      });
+      const response = yield call(queryAdvancedProfile);
+      yield put({
+        type: 'show',
+        payload: response,
+      });
+      yield put({
+        type: 'changeLoading',
+        payload: { advancedLoading: false },
       });
     },
   },
@@ -38,7 +55,7 @@ export default {
     changeLoading(state, { payload }) {
       return {
         ...state,
-        loading: payload,
+        ...payload,
       };
     },
   },

src/routes/Profile.js → src/routes/Profile/AdvancedProfile.js

 import React, { Component } from 'react';
 import { connect } from 'dva';
 import { Button, Menu, Dropdown, Icon, Row, Col, Steps, Card, Popover, Badge, Table, Tooltip } from 'antd';
-import PageHeaderLayout from '../layouts/PageHeaderLayout';
-import DescriptionList from '../components/DescriptionList';
-import styles from './Profile.less';
+import PageHeaderLayout from '../../layouts/PageHeaderLayout';
+import DescriptionList from '../../components/DescriptionList';
+import styles from './AdvancedProfile.less';
 
 const { Step } = Steps;
 const { Description } = DescriptionList;
@@ -133,7 +133,7 @@ const columns = [{
 @connect(state => ({
   profile: state.profile,
 }))
-export default class Profile extends Component {
+export default class AdvancedProfile extends Component {
   state = {
     operationkey: 'tab1',
   }
@@ -141,7 +141,7 @@ export default class Profile extends Component {
   componentDidMount() {
     const { dispatch } = this.props;
     dispatch({
-      type: 'profile/fetch',
+      type: 'profile/fetchAdvanced',
     });
   }
 
@@ -151,24 +151,24 @@ export default class Profile extends Component {
 
   render() {
     const { profile } = this.props;
-    const { loading, operation1, operation2, operation3 } = profile;
+    const { advancedLoading, advancedOperation1, advancedOperation2, advancedOperation3 } = profile;
     const contentList = {
       tab1: <Table
         pagination={false}
-        loading={loading}
-        dataSource={operation1}
+        loading={advancedLoading}
+        dataSource={advancedOperation1}
         columns={columns}
       />,
       tab2: <Table
         pagination={false}
-        loading={loading}
-        dataSource={operation2}
+        loading={advancedLoading}
+        dataSource={advancedOperation2}
         columns={columns}
       />,
       tab3: <Table
         pagination={false}
-        loading={loading}
-        dataSource={operation3}
+        loading={advancedLoading}
+        dataSource={advancedOperation3}
         columns={columns}
       />,
     };

src/routes/Profile/BasicProfile.js

+import React, { Component } from 'react';
+import { connect } from 'dva';
+import { Card, Badge, Table } from 'antd';
+import PageHeaderLayout from '../../layouts/PageHeaderLayout';
+import DescriptionList from '../../components/DescriptionList';
+import styles from './BasicProfile.less';
+
+const { Description } = DescriptionList;
+
+const progressColumns = [{
+  title: '时间',
+  dataIndex: 'time',
+  key: 'time',
+}, {
+  title: '当前进度',
+  dataIndex: 'rate',
+  key: 'rate',
+}, {
+  title: '状态',
+  dataIndex: 'status',
+  key: 'status',
+  render: text => (
+    text === 'success' ? <Badge status="success" text="成功" /> : <Badge status="processing" text="进行中" />
+  ),
+}, {
+  title: '操作员ID',
+  dataIndex: 'operator',
+  key: 'operator',
+}, {
+  title: '耗时',
+  dataIndex: 'cost',
+  key: 'cost',
+}];
+
+@connect(state => ({
+  profile: state.profile,
+}))
+export default class BasicProfile extends Component {
+  componentDidMount() {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'profile/fetchBasic',
+    });
+  }
+
+  render() {
+    const { profile } = this.props;
+    const { basicGoods, basicProgress, basicLoading } = profile;
+    let goodsData = [];
+    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, row, index) => {
+      const obj = {
+        children: value,
+        props: {},
+      };
+      if (index === basicGoods.length) {
+        obj.props.colSpan = 0;
+      }
+      return obj;
+    };
+    const goodsColumns = [{
+      title: '商品编号',
+      dataIndex: 'id',
+      key: 'id',
+      render: (text, row, index) => {
+        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',
+      render: renderContent,
+    }, {
+      title: '数量（件）',
+      dataIndex: 'num',
+      key: 'num',
+      render: (text, row, index) => {
+        if (index < basicGoods.length) {
+          return text;
+        }
+        return <span style={{ fontWeight: 600 }}>{text}</span>;
+      },
+    }, {
+      title: '金额',
+      dataIndex: 'amount',
+      key: 'amount',
+      render: (text, row, index) => {
+        if (index < basicGoods.length) {
+          return text;
+        }
+        return <span style={{ fontWeight: 600 }}>{text}</span>;
+      },
+    }];
+    return (
+      <PageHeaderLayout title="基础详情页">
+        <Card bordered={false}>
+          <DescriptionList title="退款申请" style={{ marginBottom: 24 }}>
+            <Description term="取货单号">1000000000</Description>
+            <Description term="状态">已取货</Description>
+            <Description term="销售单号">1234123421</Description>
+            <Description term="子订单">3214321432</Description>
+          </DescriptionList>
+          <div className={styles.divider} />
+          <DescriptionList title="用户信息" style={{ marginBottom: 24 }}>
+            <Description term="用户姓名">付小小</Description>
+            <Description term="联系电话">18100000000</Description>
+            <Description term="常用快递">菜鸟仓储</Description>
+            <Description term="取货地址">浙江省杭州市西湖区万塘路18号</Description>
+            <Description term="备注">没啥</Description>
+          </DescriptionList>
+          <div className={styles.divider} />
+          <div className={styles.title}>退货商品</div>
+          <Table
+            style={{ marginBottom: 24 }}
+            pagination={false}
+            loading={basicLoading}
+            dataSource={goodsData}
+            columns={goodsColumns}
+            rowKey="id"
+          />
+          <div className={styles.title}>退货进度</div>
+          <Table
+            style={{ marginBottom: 24 }}
+            pagination={false}
+            loading={basicLoading}
+            dataSource={basicProgress}
+            columns={progressColumns}
+          />
+        </Card>
+      </PageHeaderLayout>
+    );
+  }
+}

src/routes/Profile/BasicProfile.less

+@import "~antd/lib/style/themes/default.less";
+
+.divider {
+  border: 0;
+  border-top: 1px solid @border-color-split;
+  height: 1px;
+  margin: 0 0 24px 0;
+}
+
+.title {
+  color: rgba(0, 0, 0, 0.85);
+  font-weight: 600;
+  margin-bottom: 16px;
+}

src/services/api.js

@@ -48,8 +48,12 @@ export async function queryTags() {
   return request('/api/tags');
 }
 
-export async function queryProfile() {
-  return request('/api/profile');
+export async function queryBasicProfile() {
+  return request('/api/profile/basic');
+}
+
+export async function queryAdvancedProfile() {
+  return request('/api/profile/advanced');
 }
 
 export async function queryFakeList(params) {