yudao
/
spring-cloud
mirror of https://gitee.com/zhijiantianya/yudao-cloud.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

- 添加订单取消 

- 优化订单列表
- 添加订单备注
pull/1/head
sin 2019-03-31 14:46:05 +08:00
parent 85a1be3998
commit 5b51d529de
18 changed files with 1438 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
admin-web/config/config.js
View File

@ -65,7 +65,7 @@ if (APP_TYPE === 'site') {
export default {
// add for transfer to umi
base: basePath,
publicPath: basePath,
// publicPath: basePath,
plugins,
define: {
APP_TYPE: APP_TYPE || '',

5
admin-web/config/router.config.js
View File

@ -69,6 +69,11 @@ export default [
name: 'order-list',
component: './Order/OrderList',
},
{
path: '/order/order-refunds',
name: 'order-refunds',
component: './Order/OrderRefunds',
},
],
},
// product

8
admin-web/src/components/OrderTable/index.js Normal file
View File

@ -0,0 +1,8 @@
// import React, { PureComponent } from 'react';
// import {} from 'antd';
//
// export default class OrderTable extends PureComponent {
// render() {
// return <div>cc</div>;
// }
// }

3
admin-web/src/locales/zh-CN/menu.js
View File

@ -52,6 +52,7 @@ export default {
// 订单
'menu.order': '订单管理',
'menu.order.order-list': '订单管理',
'menu.order.order-refunds': '退货维权',
// 营销相关
'menu.promotion.promotion-banner-list': 'Banner 管理'
'menu.promotion.promotion-banner-list': 'Banner 管理',
};

25
admin-web/src/models/order/orderDelivery.js Normal file
View File

@ -0,0 +1,25 @@
// import { cancelOrder } from '../../services/order';
//
// export default {
// namespace: 'orderDelivery',
//
// state: {
// orderId: 0,
// visible: false,
// },
//
// effects: {
// *getLogistics({ payload }, { call, put }) {},
// },
//
// reducers: {
// changeVisible(state, { payload }) {
// const { orderId, visible } = payload;
// return {
// ...state,
// orderId,
// visible,
// };
// },
// },
// };

66
admin-web/src/models/order/orderList.js
View File

@ -1,5 +1,11 @@
import { message } from 'antd';
import { orderPage, updateOrderItem, updateOrderItemPayAmount } from '../../services/order';
import {
orderPage,
updateOrderItem,
updateOrderItemPayAmount,
updateRemark,
cancelOrder,
} from '../../services/order';
export default {
namespace: 'orderList',
@ -18,6 +24,12 @@ export default {
orderId: 0,
orderItemId: 0,
searchParams: {},
remarkVisible: false,
remark: '',
orderCancelVisible: false,
orderCancelShowOther: false,
},
effects: {
@ -70,6 +82,40 @@ export default {
},
});
yield put({
type: 'queryPage',
payload: {
...searchParams,
},
});
},
*updateRemake({ payload }, { call, put }) {
const { searchParams, params } = payload;
yield call(updateRemark, params);
yield put({
type: 'changeRemakeVisible',
payload: {
remarkVisible: false,
},
});
yield put({
type: 'queryPage',
payload: {
...searchParams,
},
});
},
*cancelOrder({ payload }, { call, put }) {
const { searchParams, params } = payload;
yield call(cancelOrder, params);
yield put({
type: 'changeOrderCancelVisible',
payload: {
orderCancelVisible: false,
},
});
yield put({
type: 'queryPage',
payload: {
@ -99,5 +145,23 @@ export default {
...payload,
};
},
changeRemakeVisible(state, { payload }) {
return {
...state,
...payload,
};
},
changeOrderCancelVisible(state, { payload }) {
return {
...state,
...payload,
};
},
changeOrderCancelShowOther(state, { payload }) {
return {
...state,
...payload,
};
},
},
};

84
admin-web/src/pages/Order/OrderCancel.js Normal file
View File

@ -0,0 +1,84 @@
import React from 'react';
import { Form, Input, Modal } from 'antd';
import DictionarySelect from '@/components/Dictionary/DictionarySelect';
import dictionary from '@/utils/dictionary';
const FormItem = Form.Item;
// 订单 - 更新支付金额
const OrderCancel = Form.create()(props => {
const { form, dispatch, loading } = props;
const { orderId, orderCancelVisible, orderCancelShowOther, searchParams } = props.orderList;
const { getFieldDecorator } = props.form;
const handleOk = e => {
e.preventDefault();
form.validateFields((err, fields) => {
if (err) return;
dispatch({
type: 'orderList/cancelOrder',
payload: {
params: {
orderId,
reasons: fields.reasons,
otherReasons: fields.otherReasons,
},
searchParams,
},
});
});
};
const handleCancel = () => {
dispatch({
type: 'orderList/changeRemakeVisible',
payload: {
remarkVisible: false,
},
});
};
const handleReasonsChange = key => {
dispatch({
type: 'orderList/changeOrderCancelShowOther',
payload: {
orderCancelShowOther: key === '20',
},
});
};
return (
<Modal
destroyOnClose
title="取消订单"
visible={orderCancelVisible}
onOk={handleOk}
okText="保存"
onCancel={handleCancel}
confirmLoading={loading}
>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="原因">
{getFieldDecorator('reasons', {
rules: [{ required: true, message: '请选择取消原因！' }],
})(
<DictionarySelect
onChange={handleReasonsChange}
style={{ minWidth: '100%' }}
dicKey={dictionary.ORDER_CANCEL_REASONS}
/>
)}
</FormItem>
{orderCancelShowOther ? (
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="其他原因">
{getFieldDecorator('otherReasons', {
rules: [{ required: true, message: '请输填写退款原因！' }],
})(<Input.TextArea autosize={{ minRows: 3, maxRows: 6 }} placeholder="请输入退款原因" />)}
</FormItem>
) : (
''
)}
</Modal>
);
});
export default OrderCancel;

5
admin-web/src/pages/Order/OrderDelivery.js Normal file
View File

@ -0,0 +1,5 @@
// import React, { PureComponent } from 'react';
//
// class OrderDelivery extends PureComponent {}
//
// export default OrderDelivery;

691
admin-web/src/pages/Order/OrderDetails.js Normal file
View File

@ -0,0 +1,691 @@
import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import router from 'umi/router';
import {
Row,
Col,
Card,
Form,
Input,
Select,
Icon,
Button,
Dropdown,
Menu,
InputNumber,
DatePicker,
Modal,
message,
Badge,
Divider,
Steps,
Radio,
} from 'antd';
import StandardTable from '@/components/StandardTable';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import styles from './OrderDetails.less';
const FormItem = Form.Item;
const { Step } = Steps;
const { TextArea } = Input;
const { Option } = Select;
const RadioGroup = Radio.Group;
const getValue = obj =>
Object.keys(obj)
.map(key => obj[key])
.join(',');
const statusMap = ['default', 'processing', 'success', 'error'];
const status = ['关闭', '运行中', '已上线', '异常'];
const CreateForm = Form.create()(props => {
const { modalVisible, form, handleAdd, handleModalVisible } = props;
const okHandle = () => {
form.validateFields((err, fieldsValue) => {
if (err) return;
form.resetFields();
handleAdd(fieldsValue);
});
};
return (
<Modal
destroyOnClose
title="新建规则"
visible={modalVisible}
onOk={okHandle}
onCancel={() => handleModalVisible()}
>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="描述">
{form.getFieldDecorator('desc', {
rules: [{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 }],
})(<Input placeholder="请输入" />)}
</FormItem>
</Modal>
);
});
@Form.create()
class UpdateForm extends PureComponent {
static defaultProps = {
handleUpdate: () => {},
handleUpdateModalVisible: () => {},
values: {},
};
constructor(props) {
super(props);
this.state = {
formVals: {
name: props.values.name,
desc: props.values.desc,
key: props.values.key,
target: '0',
template: '0',
type: '1',
time: '',
frequency: 'month',
},
currentStep: 0,
};
this.formLayout = {
labelCol: { span: 7 },
wrapperCol: { span: 13 },
};
}
handleNext = currentStep => {
const { form, handleUpdate } = this.props;
const { formVals: oldValue } = this.state;
form.validateFields((err, fieldsValue) => {
if (err) return;
const formVals = { ...oldValue, ...fieldsValue };
this.setState(
{
formVals,
},
() => {
if (currentStep < 2) {
this.forward();
} else {
handleUpdate(formVals);
}
}
);
});
};
backward = () => {
const { currentStep } = this.state;
this.setState({
currentStep: currentStep - 1,
});
};
forward = () => {
const { currentStep } = this.state;
this.setState({
currentStep: currentStep + 1,
});
};
renderContent = (currentStep, formVals) => {
const { form } = this.props;
if (currentStep === 1) {
return [
<FormItem key="target" {...this.formLayout} label="监控对象">
{form.getFieldDecorator('target', {
initialValue: formVals.target,
})(
<Select style={{ width: '100%' }}>
<Option value="0">表一</Option>
<Option value="1">表二</Option>
</Select>
)}
</FormItem>,
<FormItem key="template" {...this.formLayout} label="规则模板">
{form.getFieldDecorator('template', {
initialValue: formVals.template,
})(
<Select style={{ width: '100%' }}>
<Option value="0">规则模板一</Option>
<Option value="1">规则模板二</Option>
</Select>
)}
</FormItem>,
<FormItem key="type" {...this.formLayout} label="规则类型">
{form.getFieldDecorator('type', {
initialValue: formVals.type,
})(
<RadioGroup>
<Radio value="0">强</Radio>
<Radio value="1">弱</Radio>
</RadioGroup>
)}
</FormItem>,
];
}
if (currentStep === 2) {
return [
<FormItem key="time" {...this.formLayout} label="开始时间">
{form.getFieldDecorator('time', {
rules: [{ required: true, message: '请选择开始时间！' }],
})(
<DatePicker
style={{ width: '100%' }}
showTime
format="YYYY-MM-DD HH:mm:ss"
placeholder="选择开始时间"
/>
)}
</FormItem>,
<FormItem key="frequency" {...this.formLayout} label="调度周期">
{form.getFieldDecorator('frequency', {
initialValue: formVals.frequency,
})(
<Select style={{ width: '100%' }}>
<Option value="month">月</Option>
<Option value="week">周</Option>
</Select>
)}
</FormItem>,
];
}
return [
<FormItem key="name" {...this.formLayout} label="规则名称">
{form.getFieldDecorator('name', {
rules: [{ required: true, message: '请输入规则名称！' }],
initialValue: formVals.name,
})(<Input placeholder="请输入" />)}
</FormItem>,
<FormItem key="desc" {...this.formLayout} label="规则描述">
{form.getFieldDecorator('desc', {
rules: [{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 }],
initialValue: formVals.desc,
})(<TextArea rows={4} placeholder="请输入至少五个字符" />)}
</FormItem>,
];
};
renderFooter = currentStep => {
const { handleUpdateModalVisible, values } = this.props;
if (currentStep === 1) {
return [
<Button key="back" style={{ float: 'left' }} onClick={this.backward}>
上一步
</Button>,
<Button key="cancel" onClick={() => handleUpdateModalVisible(false, values)}>
取消
</Button>,
<Button key="forward" type="primary" onClick={() => this.handleNext(currentStep)}>
下一步
</Button>,
];
}
if (currentStep === 2) {
return [
<Button key="back" style={{ float: 'left' }} onClick={this.backward}>
上一步
</Button>,
<Button key="cancel" onClick={() => handleUpdateModalVisible(false, values)}>
取消
</Button>,
<Button key="submit" type="primary" onClick={() => this.handleNext(currentStep)}>
完成
</Button>,
];
}
return [
<Button key="cancel" onClick={() => handleUpdateModalVisible(false, values)}>
取消
</Button>,
<Button key="forward" type="primary" onClick={() => this.handleNext(currentStep)}>
下一步
</Button>,
];
};
render() {
const { updateModalVisible, handleUpdateModalVisible, values } = this.props;
const { currentStep, formVals } = this.state;
return (
<Modal
width={640}
bodyStyle={{ padding: '32px 40px 48px' }}
destroyOnClose
title="规则配置"
visible={updateModalVisible}
footer={this.renderFooter(currentStep)}
onCancel={() => handleUpdateModalVisible(false, values)}
afterClose={() => handleUpdateModalVisible()}
>
<Steps style={{ marginBottom: 28 }} size="small" current={currentStep}>
<Step title="基本信息" />
<Step title="配置规则属性" />
<Step title="设定调度周期" />
</Steps>
{this.renderContent(currentStep, formVals)}
</Modal>
);
}
}
/* eslint react/no-multi-comp:0 */
@connect(({ rule, loading }) => ({
rule,
loading: loading.models.rule,
}))
@Form.create()
class TableList extends PureComponent {
state = {
modalVisible: false,
updateModalVisible: false,
expandForm: false,
selectedRows: [],
formValues: {},
stepFormValues: {},
};
columns = [
{
title: '规则名称',
dataIndex: 'name',
render: text => <a onClick={() => this.previewItem(text)}>{text}</a>,
},
{
title: '描述',
dataIndex: 'desc',
},
{
title: '服务调用次数',
dataIndex: 'callNo',
sorter: true,
render: val => `${val} 万`,
// mark to display a total number
needTotal: true,
},
{
title: '状态',
dataIndex: 'status',
filters: [
{
text: status[0],
value: 0,
},
{
text: status[1],
value: 1,
},
{
text: status[2],
value: 2,
},
{
text: status[3],
value: 3,
},
],
render(val) {
return <Badge status={statusMap[val]} text={status[val]} />;
},
},
{
title: '上次调度时间',
dataIndex: 'updatedAt',
sorter: true,
render: val => <span>{moment(val).format('YYYY-MM-DD HH:mm:ss')}</span>,
},
{
title: '操作',
render: (text, record) => (
<Fragment>
<a onClick={() => this.handleUpdateModalVisible(true, record)}>配置</a>
<Divider type="vertical" />
<a href="">订阅警报</a>
</Fragment>
),
},
];
componentDidMount() {
const { dispatch } = this.props;
dispatch({
type: 'rule/fetch',
});
}
handleStandardTableChange = (pagination, filtersArg, sorter) => {
const { dispatch } = this.props;
const { formValues } = this.state;
const filters = Object.keys(filtersArg).reduce((obj, key) => {
const newObj = { ...obj };
newObj[key] = getValue(filtersArg[key]);
return newObj;
}, {});
const params = {
currentPage: pagination.current,
pageSize: pagination.pageSize,
...formValues,
...filters,
};
if (sorter.field) {
params.sorter = `${sorter.field}_${sorter.order}`;
}
dispatch({
type: 'rule/fetch',
payload: params,
});
};
previewItem = id => {
router.push(`/profile/basic/${id}`);
};
handleFormReset = () => {
const { form, dispatch } = this.props;
form.resetFields();
this.setState({
formValues: {},
});
dispatch({
type: 'rule/fetch',
payload: {},
});
};
toggleForm = () => {
const { expandForm } = this.state;
this.setState({
expandForm: !expandForm,
});
};
handleMenuClick = e => {
const { dispatch } = this.props;
const { selectedRows } = this.state;
if (selectedRows.length === 0) return;
switch (e.key) {
case 'remove':
dispatch({
type: 'rule/remove',
payload: {
key: selectedRows.map(row => row.key),
},
callback: () => {
this.setState({
selectedRows: [],
});
},
});
break;
default:
break;
}
};
handleSelectRows = rows => {
this.setState({
selectedRows: rows,
});
};
handleSearch = e => {
e.preventDefault();
const { dispatch, form } = this.props;
form.validateFields((err, fieldsValue) => {
if (err) return;
const values = {
...fieldsValue,
updatedAt: fieldsValue.updatedAt && fieldsValue.updatedAt.valueOf(),
};
this.setState({
formValues: values,
});
dispatch({
type: 'rule/fetch',
payload: values,
});
});
};
handleModalVisible = flag => {
this.setState({
modalVisible: !!flag,
});
};
handleUpdateModalVisible = (flag, record) => {
this.setState({
updateModalVisible: !!flag,
stepFormValues: record || {},
});
};
handleAdd = fields => {
const { dispatch } = this.props;
dispatch({
type: 'rule/add',
payload: {
desc: fields.desc,
},
});
message.success('添加成功');
this.handleModalVisible();
};
handleUpdate = fields => {
const { dispatch } = this.props;
const { formValues } = this.state;
dispatch({
type: 'rule/update',
payload: {
query: formValues,
body: {
name: fields.name,
desc: fields.desc,
key: fields.key,
},
},
});
message.success('配置成功');
this.handleUpdateModalVisible();
};
renderSimpleForm() {
const {
form: { getFieldDecorator },
} = this.props;
return (
<Form onSubmit={this.handleSearch} layout="inline">
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={8} sm={24}>
<FormItem label="规则名称">
{getFieldDecorator('name')(<Input placeholder="请输入" />)}
</FormItem>
</Col>
<Col md={8} sm={24}>
<FormItem label="使用状态">
{getFieldDecorator('status')(
<Select placeholder="请选择" style={{ width: '100%' }}>
<Option value="0">关闭</Option>
<Option value="1">运行中</Option>
</Select>
)}
</FormItem>
</Col>
<Col md={8} sm={24}>
<span className={styles.submitButtons}>
<Button type="primary" htmlType="submit">
查询
</Button>
<Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
重置
</Button>
<a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
展开 <Icon type="down" />
</a>
</span>
</Col>
</Row>
</Form>
);
}
renderAdvancedForm() {
const {
form: { getFieldDecorator },
} = this.props;
return (
<Form onSubmit={this.handleSearch} layout="inline">
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={8} sm={24}>
<FormItem label="规则名称">
{getFieldDecorator('name')(<Input placeholder="请输入" />)}
</FormItem>
</Col>
<Col md={8} sm={24}>
<FormItem label="使用状态">
{getFieldDecorator('status')(
<Select placeholder="请选择" style={{ width: '100%' }}>
<Option value="0">关闭</Option>
<Option value="1">运行中</Option>
</Select>
)}
</FormItem>
</Col>
<Col md={8} sm={24}>
<FormItem label="调用次数">
{getFieldDecorator('number')(<InputNumber style={{ width: '100%' }} />)}
</FormItem>
</Col>
</Row>
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={8} sm={24}>
<FormItem label="更新日期">
{getFieldDecorator('date')(
<DatePicker style={{ width: '100%' }} placeholder="请输入更新日期" />
)}
</FormItem>
</Col>
<Col md={8} sm={24}>
<FormItem label="使用状态">
{getFieldDecorator('status3')(
<Select placeholder="请选择" style={{ width: '100%' }}>
<Option value="0">关闭</Option>
<Option value="1">运行中</Option>
</Select>
)}
</FormItem>
</Col>
<Col md={8} sm={24}>
<FormItem label="使用状态">
{getFieldDecorator('status4')(
<Select placeholder="请选择" style={{ width: '100%' }}>
<Option value="0">关闭</Option>
<Option value="1">运行中</Option>
</Select>
)}
</FormItem>
</Col>
</Row>
<div style={{ overflow: 'hidden' }}>
<div style={{ marginBottom: 24 }}>
<Button type="primary" htmlType="submit">
查询
</Button>
<Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
重置
</Button>
<a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
收起 <Icon type="up" />
</a>
</div>
</div>
</Form>
);
}
renderForm() {
const { expandForm } = this.state;
return expandForm ? this.renderAdvancedForm() : this.renderSimpleForm();
}
render() {
const {
rule: { data },
loading,
} = this.props;
const { selectedRows, modalVisible, updateModalVisible, stepFormValues } = this.state;
const menu = (
<Menu onClick={this.handleMenuClick} selectedKeys={[]}>
<Menu.Item key="remove">删除</Menu.Item>
<Menu.Item key="approval">批量审批</Menu.Item>
</Menu>
);
const parentMethods = {
handleAdd: this.handleAdd,
handleModalVisible: this.handleModalVisible,
};
const updateMethods = {
handleUpdateModalVisible: this.handleUpdateModalVisible,
handleUpdate: this.handleUpdate,
};
return (
<PageHeaderWrapper title="查询表格">
<Card bordered={false}>
<div className={styles.tableList}>
<div className={styles.tableListForm}>{this.renderForm()}</div>
<div className={styles.tableListOperator}>
<Button icon="plus" type="primary" onClick={() => this.handleModalVisible(true)}>
新建
</Button>
{selectedRows.length > 0 && (
<span>
<Button>批量操作</Button>
<Dropdown overlay={menu}>
<Button>
更多操作 <Icon type="down" />
</Button>
</Dropdown>
</span>
)}
</div>
<StandardTable
selectedRows={selectedRows}
loading={loading}
data={data}
columns={this.columns}
onSelectRow={this.handleSelectRows}
onChange={this.handleStandardTableChange}
/>
</div>
</Card>
<CreateForm {...parentMethods} modalVisible={modalVisible} />
{stepFormValues && Object.keys(stepFormValues).length ? (
<UpdateForm
{...updateMethods}
updateModalVisible={updateModalVisible}
values={stepFormValues}
/>
) : null}
</PageHeaderWrapper>
);
}
}
export default TableList;

49
admin-web/src/pages/Order/OrderDetails.less Normal file
View File

@ -0,0 +1,49 @@
@import '~antd/lib/style/themes/default.less';
@import '~@/utils/utils.less';
.tableList {
.tableListOperator {
margin-bottom: 16px;
button {
margin-right: 8px;
}
}
}
.tableListForm {
:global {
.ant-form-item {
display: flex;
margin-right: 0;
margin-bottom: 24px;
> .ant-form-item-label {
width: auto;
padding-right: 8px;
line-height: 32px;
}
.ant-form-item-control {
line-height: 32px;
}
}
.ant-form-item-control-wrapper {
flex: 1;
}
}
.submitButtons {
display: block;
margin-bottom: 24px;
white-space: nowrap;
}
}
@media screen and (max-width: @screen-lg) {
.tableListForm :global(.ant-form-item) {
margin-right: 24px;
}
}
@media screen and (max-width: @screen-md) {
.tableListForm :global(.ant-form-item) {
margin-right: 8px;
}
}

109
admin-web/src/pages/Order/OrderList.js
View File

@ -6,6 +6,8 @@ import { Button, Card, Col, Divider, Form, Input, Row, Tabs, DatePicker, List }
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import DictionaryText from '@/components/Dictionary/DictionaryText';
import OrderUpdatePayAmount from './OrderUpdatePayAmount';
import OrderRemark from './OrderRemark';
import OrderCancel from './OrderCancel';
import dictionary from '@/utils/dictionary';
import styles from './OrderList.less';
@ -14,8 +16,10 @@ const { RangePicker } = DatePicker;
const FormItem = Form.Item;
const { TabPane } = Tabs;
const OrderContent = orderItem => {
const { dispatch, skuName, skuImage, quantity, price, payAmount, createTime, status } = orderItem;
const OrderContent = props => {
const { dispatch, item } = props;
const { createTime, status, payAmount } = item;
const { name, mobile } = item.orderRecipient;
const handleUpdatePayAmount = updateOrderItem => {
dispatch({
@ -29,27 +33,58 @@ const OrderContent = orderItem => {
});
};
// const handleCancelOrder = ({ orderId }) => {
// dispatch({
// type: 'orderList/changeOrderCancelVisible',
// payload: {
// orderCancelVisible: true,
// orderId,
// },
// });
// };
//
// const handleRenderGoods = () => {};
const renderStatusButtons = () => {
let res = '';
if (status === 1) {
res = <Button>取消订单</Button>;
} else if (status === 2) {
res = <Button>发货</Button>;
}
return res;
};
const renderGoods = orderItems => {
return orderItems.map(({ skuName, skuImage, quantity, price }) => {
return (
<div className={styles.orderGoods}>
<img alt={skuName} className={`${styles.image}`} src={skuImage} />
<div className={styles.contentItem}>
<div>
<a>{skuName}</a>
</div>
<div>秋季精选</div>
</div>
<div className={styles.contentItem}>
<div>{quantity}件</div>
<div>
{price / 100} 元/{quantity * (price / 100)} 元
</div>
</div>
</div>
);
});
};
return (
<div className={styles.order}>
<img alt={skuName} className={`${styles.image}`} src={skuImage} />
<div className={styles.contentItem}>
<div className={styles.columnName}>(名称)</div>
<div>
<a>{skuName}</a>
</div>
<div>秋季精选</div>
<div className={`${styles.contentItem} ${styles.goodsContainer}`}>
{renderGoods(item.orderItems)}
</div>
<div className={styles.contentItem}>
<div className={styles.columnName}>(金额/物件)</div>
<div>{quantity}件</div>
<div>
{price / 100} 元/{quantity * (price / 100)} 元
</div>
</div>
<div className={styles.contentItem}>
<div className={styles.columnName}>(购买人)</div>
<div>范先生</div>
<div>13302926050</div>
<div>{name}</div>
<div>{mobile}</div>
</div>
<div className={styles.contentItem}>
<div className={styles.columnName}>(下单时间)</div>
@ -57,17 +92,16 @@ const OrderContent = orderItem => {
<div>&nbsp;</div>
</div>
<div className={styles.contentItem}>
<div className={styles.columnName}>(订单状态)</div>
<div>
<DictionaryText dicKey={dictionary.ORDER_STATUS} dicValue={status} />
</div>
<div>{[0, 1, 2].indexOf(status) ? <Button>取消订单</Button> : ''}</div>
<div>{renderStatusButtons()}</div>
</div>
<div className={styles.contentItem}>
<div className={styles.columnName}>(实付金额)</div>
<div>{payAmount / 100}元</div>
<div>
<a onClick={() => handleUpdatePayAmount(orderItem)}>修改价格</a>
<a onClick={() => handleUpdatePayAmount(props)}>修改价格</a>
</div>
</div>
</div>
@ -82,6 +116,18 @@ const OrderList = props => {
...pagination,
};
const handleRemakeClick = item => {
const { id, remark } = item;
dispatch({
type: 'orderList/changeRemakeVisible',
payload: {
remarkVisible: true,
orderId: id,
remark,
},
});
};
return (
<List
size="large"
@ -102,13 +148,11 @@ const OrderList = props => {
<div>
<a>查看详情</a>
<Divider type="vertical" />
<a>备注</a>
<a onClick={() => handleRemakeClick(item)}>备注</a>
</div>
</div>
{item.orderItems.map(orderItem => {
return <OrderContent key={orderItem.id} dispatch={dispatch} {...orderItem} />;
})}
<OrderContent item={item} dispatch={dispatch} />
</div>
</List.Item>
)}
@ -131,11 +175,9 @@ const SearchForm = Form.create()(props => {
form.validateFields((err, fields) => {
const buildTime = (fieldValue, key) => {
const res = {};
if (fieldValue) {
if (fieldValue && fieldValue.length >= 2) {
const keySuffix = key.substring(0, 1).toUpperCase() + key.substring(1);
// res[`start${keySuffix}`] = fieldValue[0].valueOf();
res[`start${keySuffix}`] = fieldValue[0].format('YYYY-MM-DD HH:mm:ss');
// res[`end${keySuffix}`] = fieldValue[1].valueOf();
res[`end${keySuffix}`] = fieldValue[1].format('YYYY-MM-DD HH:mm:ss');
}
return res;
@ -186,9 +228,6 @@ const SearchForm = Form.create()(props => {
<Col md={8} sm={24}>
<FormItem label="创建时间">{getFieldDecorator('createTime')(<RangePicker />)}</FormItem>
</Col>
<Col md={8} sm={24}>
<FormItem label="成交时间">{getFieldDecorator('closingTime')(<RangePicker />)}</FormItem>
</Col>
<Col md={8} sm={24}>
<span className={styles.submitButtons}>
<Button type="primary" htmlType="submit">
@ -234,9 +273,7 @@ class BasicList extends PureComponent {
});
};
handleEditorClick = () => {
console.info('edit');
};
handleEditorClick = () => {};
handleSearch = fields => {
const {
@ -287,6 +324,8 @@ class BasicList extends PureComponent {
</div>
<OrderUpdatePayAmount {...this.props} />
<OrderRemark {...this.props} />
<OrderCancel {...this.props} />
</PageHeaderWrapper>
);
}

29
admin-web/src/pages/Order/OrderList.less
View File

@ -239,6 +239,8 @@
// 订单content
.orderGroup {
@padding-slid: 10px;
@solid-color: rgba(167, 157, 160, 0.92);
@header-background: rgba(210, 219, 238, 0.99);
display: flex;
flex: 1;
@ -254,7 +256,26 @@
font-weight: bold;
font-size: 15px;
line-height: 35px;
background-color: #c0bfb9;
background-color: @header-background;
}
.goodsContainer {
:first-child {
border-top: none;
border-bottom: none;
}
:last-child {
border-bottom: none;
}
}
.orderGoods {
display: flex;
flex: 2;
flex-direction: row;
width: 500px;
border: 1px solid @solid-color;
}
.order {
@ -264,7 +285,7 @@
padding-right: @padding-slid;
padding-left: @padding-slid;
line-height: 100px;
border: 1px solid #c0bfb9;
border: 1px solid @solid-color;
.contentItem {
display: flex;
@ -285,8 +306,8 @@
}
.image {
width: 100px;
height: 100px;
width: 80px;
height: 80px;
}
}
}

321
admin-web/src/pages/Order/OrderRefunds.js Normal file
View File

@ -0,0 +1,321 @@
import React, { PureComponent } from 'react';
import moment from 'moment';
import { connect } from 'dva';
import { Button, Card, Col, Divider, Form, Input, Row, Tabs, DatePicker, List } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import DictionaryText from '@/components/Dictionary/DictionaryText';
import OrderUpdatePayAmount from './OrderUpdatePayAmount';
import OrderRemark from './OrderRemark';
import dictionary from '@/utils/dictionary';
import styles from './OrderList.less';
const { RangePicker } = DatePicker;
const FormItem = Form.Item;
const { TabPane } = Tabs;
const OrderContent = props => {
const {
dispatch,
skuName,
skuImage,
quantity,
price,
payAmount,
createTime,
status,
item,
} = props;
const { name, mobile } = item.orderLogistics;
const handleUpdatePayAmount = updateOrderItem => {
dispatch({
type: 'orderList/changePayAmountVisible',
payload: {
payAmountVisible: true,
payAmount: updateOrderItem.payAmount,
orderId: updateOrderItem.orderId,
orderItemId: updateOrderItem.id,
},
});
};
const renderStatusButtons = () => {
let res = '';
if (status === 1) {
res = <Button>取消订单</Button>;
} else if (status === 2) {
res = <Button>发货</Button>;
}
return res;
};
return (
<div className={styles.order}>
<img alt={skuName} className={`${styles.image}`} src={skuImage} />
<div className={styles.contentItem}>
<div>
<a>{skuName}</a>
</div>
<div>秋季精选</div>
</div>
<div className={styles.contentItem}>
<div>{quantity}件</div>
<div>
{price / 100} 元/{quantity * (price / 100)} 元
</div>
</div>
<div className={styles.contentItem}>
<div>{name}</div>
<div>{mobile}</div>
</div>
<div className={styles.contentItem}>
<div className={styles.columnName}>(下单时间)</div>
<div>{moment(createTime).format('YYYY-MM-DD HH:mm')}</div>
<div>&nbsp;</div>
</div>
<div className={styles.contentItem}>
<div>
<DictionaryText dicKey={dictionary.ORDER_STATUS} dicValue={status} />
</div>
<div>{renderStatusButtons()}</div>
</div>
<div className={styles.contentItem}>
<div className={styles.columnName}>(实付金额)</div>
<div>{payAmount / 100}元</div>
<div>
<a onClick={() => handleUpdatePayAmount(props)}>修改价格</a>
</div>
</div>
</div>
);
};
const OrderList = props => {
const { list, dispatch, loading } = props;
const { pagination, dataSource } = list;
const paginationProps = {
...pagination,
};
const handleRemakeClick = item => {
const { id, remark } = item;
dispatch({
type: 'orderList/changeRemakeVisible',
payload: {
remarkVisible: true,
orderId: id,
remark,
},
});
};
return (
<List
size="large"
rowKey="id"
loading={loading}
pagination={paginationProps}
dataSource={dataSource}
renderItem={item => (
<List.Item>
<div className={styles.orderGroup}>
<div className={styles.header}>
<div>
<span>订单号: {item.orderNo}</span>
<Divider type="vertical" />
<span>支付金额: {item.payAmount / 100} 元</span>
</div>
<div>
<a>查看详情</a>
<Divider type="vertical" />
<a onClick={() => handleRemakeClick(item)}>备注</a>
</div>
</div>
{item.orderItems.map(orderItem => {
return (
<OrderContent key={orderItem.id} item={item} dispatch={dispatch} {...orderItem} />
);
})}
</div>
</List.Item>
)}
/>
);
};
// SearchForm
const SearchForm = Form.create()(props => {
const {
form: { getFieldDecorator },
form,
handleSearch,
} = props;
const handleFormReset = () => {};
const onSubmit = e => {
e.preventDefault();
form.validateFields((err, fields) => {
const buildTime = (fieldValue, key) => {
const res = {};
if (fieldValue && fieldValue.length >= 2) {
const keySuffix = key.substring(0, 1).toUpperCase() + key.substring(1);
res[`start${keySuffix}`] = fieldValue[0].format('YYYY-MM-DD HH:mm:ss');
res[`end${keySuffix}`] = fieldValue[1].format('YYYY-MM-DD HH:mm:ss');
}
return res;
};
const timeFields = ['createTime', 'closingTime'];
const buildSearchParams = fields2 => {
let res = {};
Object.keys(fields).map(objectKey => {
const fieldValue = fields2[objectKey];
if (timeFields.indexOf(objectKey) !== -1) {
// 处理时间
res = {
...res,
...buildTime(fieldValue, objectKey),
};
} else if (fieldValue !== undefined) {
res[objectKey] = fieldValue;
}
return true;
});
return res;
};
const searchParams = buildSearchParams(fields);
if (handleSearch) {
handleSearch(searchParams);
}
});
};
return (
<Form onSubmit={onSubmit} layout="inline">
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={8} sm={24}>
<FormItem label="订单id">
{getFieldDecorator('id')(<Input placeholder="请输入订单id" />)}
</FormItem>
</Col>
<Col md={8} sm={24}>
<FormItem label="订单号">
{getFieldDecorator('orderNo')(<Input placeholder="请输入订单号" />)}
</FormItem>
</Col>
</Row>
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={8} sm={24}>
<FormItem label="创建时间">{getFieldDecorator('createTime')(<RangePicker />)}</FormItem>
</Col>
<Col md={8} sm={24}>
<span className={styles.submitButtons}>
<Button type="primary" htmlType="submit">
查询
</Button>
<Button style={{ marginLeft: 8 }} onClick={handleFormReset}>
重置
</Button>
</span>
</Col>
</Row>
</Form>
);
});
@connect(({ orderList, loading }) => ({
orderList,
list: orderList.list,
loading: loading.models.orderList,
}))
class BasicList extends PureComponent {
componentDidMount() {
const {
list: { pagination },
} = this.props;
this.queryList({
pageNo: pagination.current,
pageSize: pagination.pageSize,
});
}
queryList = params => {
const { dispatch } = this.props;
// 保存每次操作 searchParams
this.searchParams = params;
// dispatch
dispatch({
type: 'orderList/queryPage',
payload: {
...params,
},
});
};
handleEditorClick = () => {};
handleSearch = fields => {
const {
list: { pagination },
} = this.props;
this.queryList({
...fields,
pageNo: pagination.current,
pageSize: pagination.pageSize,
});
};
handleTabsChange = key => {
const params = {
...this.searchParams,
status: key,
};
this.queryList(params);
};
render() {
return (
<PageHeaderWrapper>
<div className={styles.standardList}>
<Card
className={styles.listCard}
bordered={false}
title="订单列表"
style={{ marginTop: 24 }}
bodyStyle={{ padding: '0 32px 40px 32px' }}
>
<div className={styles.tableListForm}>
<SearchForm {...this.props} handleSearch={this.handleSearch} />
</div>
<Tabs defaultActiveKey={null} onChange={this.handleTabsChange}>
<TabPane tab="全部" key={null} />
<TabPane tab="待付款" key={0} />
<TabPane tab="待发货" key={1} />
<TabPane tab="已发货" key={2} />
<TabPane tab="已完成" key={3} />
<TabPane tab="已关闭" key={4} />
</Tabs>
<OrderList {...this.props} handleEditorClick={this.handleEditorClick} />
</Card>
</div>
<OrderUpdatePayAmount {...this.props} />
<OrderRemark {...this.props} />
</PageHeaderWrapper>
);
}
}
export default BasicList;

56
admin-web/src/pages/Order/OrderRemark.js Normal file
View File

@ -0,0 +1,56 @@
import React from 'react';
import { Form, Input, Modal } from 'antd';
const FormItem = Form.Item;
// 订单 - 更新支付金额
const OrderRemark = Form.create()(props => {
const { dispatch, loading } = props;
const { orderId, remark, remarkVisible, searchParams } = props.orderList;
const { getFieldDecorator, getFieldsValue } = props.form;
const handleOk = e => {
e.preventDefault();
const fieldsValue = getFieldsValue();
dispatch({
type: 'orderList/updateRemake',
payload: {
params: {
remark: fieldsValue.remark,
orderId,
},
searchParams,
},
});
};
const handleCancel = () => {
dispatch({
type: 'orderList/changeRemakeVisible',
payload: {
remarkVisible: false,
},
});
};
return (
<Modal
destroyOnClose
title="添加备注信息"
visible={remarkVisible}
onOk={handleOk}
okText="保存"
onCancel={handleCancel}
confirmLoading={loading}
>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="备注">
{getFieldDecorator('remark', {
initialValue: remark,
})(<Input.TextArea autosize={{ minRows: 2, maxRows: 6 }} placeholder="请输入备注信息" />)}
</FormItem>
</Modal>
);
});
export default OrderRemark;

4
admin-web/src/pages/Order/OrderUpdatePayAmount.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import { Form, Input, Modal } from 'antd';
import { Form, InputNumber, Modal } from 'antd';
const FormItem = Form.Item;
@ -52,7 +52,7 @@ const OrderUpdatePayAmount = Form.create()(props => {
{ max: 10000, min: 0, message: '金额值 0 - 100000 元' },
],
initialValue: payAmount / 100,
})(<Input placeholder="请输入修改的金额" />)}
})(<InputNumber min={0} max={100000} placeholder="请输入修改的金额" />)}
</FormItem>
</Modal>
);

21
admin-web/src/services/order.js
View File

@ -14,6 +14,18 @@ export async function updateOrderItemPayAmount(params) {
});
}
export async function updateRemark(params) {
return request(`/order-api/admins/order/update_remark?${stringify(params)}`, {
method: 'PUT',
});
}
export async function cancelOrder(params) {
return request(`/order-api/admins/order/cancel_order?${stringify(params)}`, {
method: 'PUT',
});
}
export async function updateOrderItem(params) {
return request(`/order-api/admins/order_item/update?${stringify(params)}`, {
method: 'PUT',
@ -22,3 +34,12 @@ export async function updateOrderItem(params) {
},
});
}
export async function getLogistics(params) {
return request(`/order-api/admins/order_item/update?${stringify(params)}`, {
method: 'PUT',
body: {
...params,
},
});
}

1
admin-web/src/utils/dictionary.js
View File

@ -3,6 +3,7 @@
const DictionaryConstants = {
GENDER: 'gender',
ORDER_STATUS: 'order_status',
ORDER_CANCEL_REASONS: 'order_cancel_reasons',
};
export default DictionaryConstants;

8
admin-web/src/utils/request.qs.js
View File

@ -9,11 +9,9 @@ import qs from 'qs';
function filterEmptyStr(params) {
function filterObject(object) {
const res = {};
for (const key in params) {
const val = params[key];
if (typeof val === 'string' && val) {
res[key] = val;
} else {
for (const key in object) {
const val = object[key];
if (val !== undefined && val !== 'undefined' && val !== null && val !== 'null') {
res[key] = val;
}
}