feat: add a demo that jump to details (#3502)

* feat: add a demo that jump to details

* feat: hide progress in coi

* remove trigger config

* remove fetchDepth: 1

* refactor: userinfo and application  from api

* style: fix code style

azure-pipelines.yml

@@ -7,11 +7,6 @@ name: ant design pro
 trigger:
   - master
 
-resources:
-  repositories:
-    - repository: self
-      fetchDepth: 1
-
 jobs:
   - job: lintAndBuild
 
@@ -19,11 +14,15 @@ jobs:
       vmImage: 'Ubuntu-16.04'
 
     steps:
+      - checkout: self
+        clean: false
       - script: yarn install
         displayName: install
       - script: npm run lint
         displayName: lint
       - script: npm run build
+        env:
+          PROGRESS: none
         displayName: build
 
   - job: test
@@ -38,6 +37,8 @@ jobs:
       - script: yarn install
         displayName: install
       - script: npm run test:all
+        env:
+          PROGRESS: none
         displayName: test
 
   - job: Windows
@@ -52,6 +53,8 @@ jobs:
       - script: npm run lint
         displayName: lint
       - script: npm run build
+        env:
+          PROGRESS: none
         displayName: build
 
   - job: MacOS
@@ -65,5 +68,7 @@ jobs:
         displayName: install
       - script: npm run lint
         displayName: lint
-      - script: npm run build
+      - script: npm run
+        env:
+          PROGRESS: none
         displayName: build

config/router.config.js

@@ -147,6 +147,12 @@ export default [
             name: 'basic',
             component: './Profile/BasicProfile',
           },
+          {
+            path: '/profile/basic/:id',
+            name: 'basic',
+            hideInMenu: true,
+            component: './Profile/BasicProfile',
+          },
           {
             path: '/profile/advanced',
             name: 'advanced',

mock/profile.js

@@ -1,3 +1,5 @@
+import mockjs from 'mockjs';
+
 const basicGoods = [
   {
     id: '1234561',
@@ -140,19 +142,36 @@ const advancedOperation3 = [
     memo: '-',
   },
 ];
-
-const getProfileBasicData = {
-  basicGoods,
-  basicProgress,
-};
-
 const getProfileAdvancedData = {
   advancedOperation1,
   advancedOperation2,
   advancedOperation3,
 };
 
+const { Random } = mockjs;
+
 export default {
   'GET /api/profile/advanced': getProfileAdvancedData,
-  'GET /api/profile/basic': getProfileBasicData,
+  'GET /api/profile/basic': (req, res) => {
+    const { id } = req.query;
+    const application = {
+      id,
+      status: '已取货',
+      orderNo: Random.id(),
+      childOrderNo: Random.id(),
+    };
+    const userInfo = {
+      name: Random.cname(),
+      tel: '18100000000',
+      delivery: '菜鸟物流',
+      addr: '浙江省杭州市西湖区万塘路18号',
+      remark: '备注',
+    };
+    res.json({
+      userInfo,
+      application,
+      basicGoods,
+      basicProgress,
+    });
+  },
 };

src/pages/List/TableList.js

@@ -1,6 +1,7 @@
 import React, { PureComponent, Fragment } from 'react';
 import { connect } from 'dva';
 import moment from 'moment';
+import router from 'umi/router';
 import {
   Row,
   Col,
@@ -292,6 +293,7 @@ class TableList extends PureComponent {
     {
       title: '规则名称',
       dataIndex: 'name',
+      render: text => <a onClick={() => this.previewItem(text)}>{text}</a>,
     },
     {
       title: '描述',
@@ -381,6 +383,10 @@ class TableList extends PureComponent {
     });
   };
 
+  previewItem = id => {
+    router.push(`/profile/basic/${id}`);
+  };
+
   handleFormReset = () => {
     const { form, dispatch } = this.props;
     form.resetFields();

src/pages/Profile/BasicProfile.js

@@ -47,15 +47,18 @@ const progressColumns = [
 }))
 class BasicProfile extends Component {
   componentDidMount() {
-    const { dispatch } = this.props;
+    const { dispatch, match } = this.props;
+    const { params } = match;
+
     dispatch({
       type: 'profile/fetchBasic',
+      payload: params.id || '1000000000',
     });
   }
 
   render() {
-    const { profile, loading } = this.props;
-    const { basicGoods, basicProgress } = profile;
+    const { profile = {}, loading } = this.props;
+    const { basicGoods = [], basicProgress = [], userInfo = {}, application = {} } = profile;
     let goodsData = [];
     if (basicGoods.length) {
       let num = 0;
@@ -142,21 +145,21 @@ class BasicProfile extends Component {
       },
     ];
     return (
-      <PageHeaderWrapper title="基础详情页">
+      <PageHeaderWrapper title="基础详情页" loading={loading}>
         <Card bordered={false}>
           <DescriptionList size="large" title="退款申请" style={{ marginBottom: 32 }}>
-            <Description term="取货单号">1000000000</Description>
-            <Description term="状态">已取货</Description>
-            <Description term="销售单号">1234123421</Description>
-            <Description term="子订单">3214321432</Description>
+            <Description term="取货单号">{application.id}</Description>
+            <Description term="状态">{application.status}</Description>
+            <Description term="销售单号">{application.orderNo}</Description>
+            <Description term="子订单">{application.childOrderNo}</Description>
           </DescriptionList>
           <Divider style={{ marginBottom: 32 }} />
           <DescriptionList size="large" title="用户信息" style={{ marginBottom: 32 }}>
-            <Description term="用户姓名">付小小</Description>
-            <Description term="联系电话">18100000000</Description>
-            <Description term="常用快递">菜鸟仓储</Description>
-            <Description term="取货地址">浙江省杭州市西湖区万塘路18号</Description>
-            <Description term="备注">无</Description>
+            <Description term="用户姓名">{userInfo.name}</Description>
+            <Description term="联系电话">{userInfo.tel}</Description>
+            <Description term="常用快递">{userInfo.delivery}</Description>
+            <Description term="取货地址">{userInfo.addr}</Description>
+            <Description term="备注">{userInfo.remark}</Description>
           </DescriptionList>
           <Divider style={{ marginBottom: 32 }} />
           <div className={styles.title}>退货商品</div>

src/pages/Profile/models/profile.js

@@ -11,8 +11,8 @@ export default {
   },
 
   effects: {
-    *fetchBasic(_, { call, put }) {
-      const response = yield call(queryBasicProfile);
+    *fetchBasic({ payload }, { call, put }) {
+      const response = yield call(queryBasicProfile, payload);
       yield put({
         type: 'show',
         payload: response,

src/services/api.js

@@ -58,8 +58,8 @@ export async function queryTags() {
   return request('/api/tags');
 }
 
-export async function queryBasicProfile() {
-  return request('/api/profile/basic');
+export async function queryBasicProfile(id) {
+  return request(`/api/profile/basic?id=${id}`);
 }
 
 export async function queryAdvancedProfile() {