From f649e4b910d2b6a138fa7b9fa93c5ca5f35769f9 Mon Sep 17 00:00:00 2001 From: ddcat1115 Date: Thu, 7 Sep 2017 01:45:15 +0800 Subject: [PATCH] add BasicProfile --- .roadhogrc.mock.js | 6 +- mock/profile.js | 100 ++++++++++- src/common/nav.js | 14 +- src/models/profile.js | 37 ++-- .../AdvancedProfile.js} | 24 +-- .../AdvancedProfile.less} | 0 src/routes/Profile/BasicProfile.js | 163 ++++++++++++++++++ src/routes/Profile/BasicProfile.less | 14 ++ src/services/api.js | 8 +- 9 files changed, 330 insertions(+), 36 deletions(-) rename src/routes/{Profile.js => Profile/AdvancedProfile.js} (92%) rename src/routes/{Profile.less => Profile/AdvancedProfile.less} (100%) create mode 100644 src/routes/Profile/BasicProfile.js create mode 100644 src/routes/Profile/BasicProfile.less diff --git a/.roadhogrc.mock.js b/.roadhogrc.mock.js index 811292f5..89fdc8e4 100644 --- a/.roadhogrc.mock.js +++ b/.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' }); diff --git a/mock/profile.js b/mock/profile.js index d2e6083d..7c24be1b 100644 --- a/mock/profile.js +++ b/mock/profile.js @@ -1,4 +1,82 @@ -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, }; diff --git a/src/common/nav.js b/src/common/nav.js index c928a0c9..9605d415 100644 --- a/src/common/nav.js +++ b/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', diff --git a/src/models/profile.js b/src/models/profile.js index 7c7a9a6d..73bdd782 100644 --- a/src/models/profile.js +++ b/src/models/profile.js @@ -1,29 +1,46 @@ -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, }; }, }, diff --git a/src/routes/Profile.js b/src/routes/Profile/AdvancedProfile.js similarity index 92% rename from src/routes/Profile.js rename to src/routes/Profile/AdvancedProfile.js index bf0a354b..8097854e 100644 --- a/src/routes/Profile.js +++ b/src/routes/Profile/AdvancedProfile.js @@ -1,9 +1,9 @@ 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: , tab2:
, tab3:
, }; diff --git a/src/routes/Profile.less b/src/routes/Profile/AdvancedProfile.less similarity index 100% rename from src/routes/Profile.less rename to src/routes/Profile/AdvancedProfile.less diff --git a/src/routes/Profile/BasicProfile.js b/src/routes/Profile/BasicProfile.js new file mode 100644 index 00000000..7e98c32b --- /dev/null +++ b/src/routes/Profile/BasicProfile.js @@ -0,0 +1,163 @@ +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' ? : + ), +}, { + 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 {text}; + } + return { + children: 总计, + 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 {text}; + }, + }, { + title: '金额', + dataIndex: 'amount', + key: 'amount', + render: (text, row, index) => { + if (index < basicGoods.length) { + return text; + } + return {text}; + }, + }]; + return ( + + + + 1000000000 + 已取货 + 1234123421 + 3214321432 + +
+ + 付小小 + 18100000000 + 菜鸟仓储 + 浙江省杭州市西湖区万塘路18号 + 没啥 + +
+
退货商品
+
+
退货进度
+
+ + + ); + } +} diff --git a/src/routes/Profile/BasicProfile.less b/src/routes/Profile/BasicProfile.less new file mode 100644 index 00000000..b9faee03 --- /dev/null +++ b/src/routes/Profile/BasicProfile.less @@ -0,0 +1,14 @@ +@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; +} diff --git a/src/services/api.js b/src/services/api.js index 39984bac..b6f485f9 100644 --- a/src/services/api.js +++ b/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) { -- GitLab