Skip to content

Commit

Permalink
编辑产品页面与后台接口对接完
Browse files Browse the repository at this point in the history
  • Loading branch information
@shen100
shen100 committed May 15, 2017
1 parent 8546b1b commit 89c08bb
Show file tree
Hide file tree
Showing 4 changed files with 109 additions and 22 deletions.
44 changes: 44 additions & 0 deletions nodejs/static/javascripts/admin/actions/product/requestSaveProduct.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import {
REQUEST_SAVE_PRODUCT,
REQUEST_SAVE_PRODUCT_SUCCESS,
} from '../../constants';

function receive(data) {
return {
type : REQUEST_SAVE_PRODUCT_SUCCESS,
product : data.product
};
}

export default function(product) {
return dispatch => {
var url = pageConfig.apiPath + '/admin/product/update';
var categories = [];
for (var i = 0; i < product.categories.length; i++) {
categories.push({
id: parseInt(product.categories[i].split('-')[1])
});
}
var reqData ={
id : product.id,
name : product.name,
categories : categories,
status : parseInt(product.status),
originalPrice : product.originalPrice,
price : product.price,
remark : product.remark,
detail : product.detail
};
return fetch(url, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(reqData)
})
.then(response => response.json())
.then(json => dispatch(receive(json.data)));
};
};

4 changes: 4 additions & 0 deletions nodejs/static/javascripts/admin/constants/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,10 @@ export const REQUEST_HOT_PRODUCT_LIST = 'requestHotProductList';

export const REQUEST_PRODUCT_LIST = 'requestProductList';

export const REQUEST_SAVE_PRODUCT = 'requestSaveProduct';

export const REQUEST_SAVE_PRODUCT_SUCCESS = 'requestSaveProductSuccess';

export const CHANGE_PRODUCT_STATUS = 'changeProductStatus';

export const REQUEST_CATEGORY_LIST = 'requestCategoryList';
Expand Down
74 changes: 53 additions & 21 deletions nodejs/static/javascripts/admin/containers/product/EditProduct.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
} from 'antd';

import requestProduct from '../../actions/product/requestProduct';
import requestSaveProduct from '../../actions/product/requestSaveProduct';
import requestCategoryList from '../../actions/category/requestCategoryList';
import Software from '../Software';
import utils from '../../utils';
Expand All @@ -25,9 +26,17 @@ import '../../../../styles/admin/product/editProduct.css';
class EditProduct extends Component {
constructor(props) {
super(props);
this.onNameBlur = this.onNameBlur.bind(this);
this.onCategoriesChange = this.onCategoriesChange.bind(this);
this.onOriginalPriceBlur = this.onOriginalPriceBlur.bind(this);
this.onPriceBlur = this.onPriceBlur.bind(this);
this.onRemarkBlur = this.onRemarkBlur.bind(this);
this.onStatusChange = this.onStatusChange.bind(this);
this.onSubmit = this.onSubmit.bind(this);

this.state = {
productId : this.props.routeParams.id,
parents : [], //父分类
categories : [], //产品所属的分类
name : '',
detail : '',
originalPrice : 0,
Expand Down Expand Up @@ -85,15 +94,15 @@ class EditProduct extends Component {
componentWillReceiveProps(nextProps) {
var product = nextProps.data.product;
if (product) {
var parents = [];
var categories = [];
for (var i = 0; i < product.categories.length; i++) {
var parentId = product.categories[i].parentId;
var id = product.categories[i].id;
parents.push(parentId + '-' + id);
categories.push(parentId + '-' + id);
}
this.setState({
productId : product.id,
parents : parents, //父分类
categories : categories,
name : product.name,
detail : product.detail,
originalPrice : product.originalPrice,
Expand All @@ -104,20 +113,43 @@ class EditProduct extends Component {
this.loadUEditor();
}
}
onNameChange() {
this.refs.nameInput;
onNameBlur(event) {
this.setState({ name: event.target.value });
}
onParentsChange(value) {
this.setState({ parents: value });
onCategoriesChange(value) {
this.setState({ categories: value });
}
onOriginalPriceChange(price) {
onOriginalPriceBlur(event) {
var price = event.target.value;
price = Number(price);
this.setState({ originalPrice: price });
}
onPriceChange(price) {
onPriceBlur(event) {
var price = event.target.value;
price = Number(price);
this.setState({ price: price });
}
onStatusChange(stauts) {
this.setState({ stauts: stauts });
onRemarkBlur(event) {
this.setState({ remark: event.target.value });
}
onStatusChange(status) {
this.setState({ status: status });
}
onSubmit() {
if (!this.state.ueditor) {
return;
}
const { dispatch } = this.props;
dispatch(requestSaveProduct({
id : this.state.productId,
name : this.state.name,
categories : this.state.categories,
status : this.state.status,
originalPrice : this.state.originalPrice,
price : this.state.price,
remark : this.state.remark,
detail : this.state.ueditor.getContent()
}));
}
render() {
let { data } = this.props;
Expand Down Expand Up @@ -158,8 +190,8 @@ class EditProduct extends Component {

const treeProps = {
treeData,
value : this.state.parents,
onChange : this.onParentsChange.bind(this),
value : this.state.categories,
onChange : this.onCategoriesChange,
multiple : true,
treeCheckable: true,
showCheckedStrategy: TreeSelect.SHOW_PARENT,
Expand All @@ -179,26 +211,26 @@ class EditProduct extends Component {
isLoading ? null :
<Form>
<FormItem {...formItemLayout} label="商品名称">
<Input ref="nameInput" defaultValue={name} onBlur={this.onNameChange}/>
<Input defaultValue={name} onBlur={this.onNameBlur}/>
</FormItem>
<FormItem {...formItemLayout} label="父分类">
<FormItem {...formItemLayout} label="商品分类">
<TreeSelect {...treeProps} />
</FormItem>
<FormItem {...formItemLayout} label="父分类">
<FormItem {...formItemLayout} label="商品状态">
<Select defaultValue={status} style={{ width: 120 }} onChange={this.onStatusChange}>
<Select.Option value="3">等待上架</Select.Option>
<Select.Option value="1">上架</Select.Option>
<Select.Option value="2">下架</Select.Option>
</Select>
</FormItem>
<FormItem {...formItemLayout} label="原价">
<InputNumber min={0} max={100} defaultValue={originalPrice} step={0.1} onChange={this.onOriginalPriceChange} />
<InputNumber min={0} max={100} defaultValue={originalPrice} step={0.1} onBlur={this.onOriginalPriceBlur} />
</FormItem>
<FormItem {...formItemLayout} label="促销价">
<InputNumber min={0} max={100} defaultValue={price} step={0.1} onChange={this.onPriceChange} />
<InputNumber min={0} max={100} defaultValue={price} step={0.1} onBlur={this.onPriceBlur} />
</FormItem>
<FormItem {...formItemLayout} label="备注">
<Input type="textarea" defaultValue={remark} rows={4} />
<Input type="textarea" defaultValue={remark} rows={4} onBlur={this.onRemarkBlur}/>
</FormItem>
<FormItem {...editorLayout} label="商品详情">
<div>
Expand All @@ -210,7 +242,7 @@ class EditProduct extends Component {
</div>
</Col>
<Col span={24} className="submit-box">
<Button type="primary" size="large">保存</Button>
<Button onClick={this.onSubmit} type="primary" size="large">保存</Button>
<Button className="submit-cancel-btn" size="large">取消</Button>
</Col>
</Row>
Expand Down
9 changes: 8 additions & 1 deletion nodejs/static/javascripts/admin/reducers/product.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@ import {
REQUEST_PRODUCT,
REQUEST_PRODUCT_SUCCESS,
REQUEST_CATEGORY_LIST,
REQUEST_CATEGORY_LIST_SUCCESS
REQUEST_CATEGORY_LIST_SUCCESS,
REQUEST_SAVE_PRODUCT_SUCCESS
} from '../constants';

let initState = {
Expand Down Expand Up @@ -54,6 +55,12 @@ export default (state = initState, action) => {
product: action.product
};
}
case REQUEST_SAVE_PRODUCT_SUCCESS: {
return {
...state,
product: action.product
};
}
case REQUEST_CATEGORY_LIST: {
return {
...state,
Expand Down

0 comments on commit 89c08bb

Please sign in to comment.