OpenGitLink
/
yudao-cloud
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

前端：商品编辑，部分逻辑

This commit is contained in:
YunaiV 2019-05-02 12:47:25 +08:00
parent 788d6c381a
commit e05f19ddc6
9 changed files with 243 additions and 198 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -92,6 +92,11 @@ export default [
name: 'product-spu-add',
component: './Product/ProductSpuAddOrUpdate',
},
{
path: '/product/product-spu-update',
name: 'product-spu-update',
component: './Product/ProductSpuAddOrUpdate',
},
{
path: '/product/product-category-list',
name: 'product-category-list',

3
admin-web/src/components/Image/PicturesWall.js
View File

@ -6,6 +6,9 @@ import {Icon, Modal, Upload} from "antd";
import styles from './PicturesWall.less';
/**
* 照片墙，带有上传图片到七牛。
*/
class PicturesWall extends React.Component {
state = {
token: undefined, // 七牛 token

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

@ -48,6 +48,7 @@ export default {
'menu.product': '商品管理',
'menu.product.product-spu-list': '商品管理',
'menu.product.product-spu-add': '商品添加',
'menu.product.product-spu-update': '商品编辑',
'menu.product.product-category-list': '商品分类',
// 订单
'menu.order': '订单管理',

4
admin-web/src/models/product/productAttrList.js
View File

@ -1,5 +1,5 @@
import { message } from 'antd';
import { productSpuPage, productAttrTree, productCategoryUpdate, productCategoryUpdateStatus, productCategoryDelete } from '../../services/product';
import { productAttrTree } from '../../services/product';
export default {
namespace: 'productAttrList',
@ -54,7 +54,7 @@ export default {
*tree({ payload }, { call, put }) {
const { queryParams } = payload;
const response = yield call(productAttrTree, queryParams);
message.info('查询成功!');
// message.info('查询成功!');
yield put({
type: 'treeSuccess',
payload: {

155
admin-web/src/models/product/productSpuAddOrUpdate.js
View File

@ -1,12 +1,24 @@
import { message } from 'antd';
import { productCategoryTree, productSpuAdd, productCategoryUpdate, productCategoryUpdateStatus, productCategoryDelete } from '../../services/product';
import {
productCategoryTree,
productSpuAdd,
productCategoryUpdate,
productCategoryUpdateStatus,
productCategoryDelete,
productSpuInfo
} from '../../services/product';
export default {
namespace: 'productSpuAddOrUpdate',
state: {
list: [],
attrTree: [
// list: [],
loading: false,
spu: { // 商品 SPU
},
attrTree: [ // 商品规格
// {
// id: //
// name: //
@ -16,7 +28,7 @@ export default {
// }]
// }
],
skus: [
skus: [ // 商品 SKU
// {
// attrs: [{
// id: // 规格值编号
@ -29,17 +41,6 @@ export default {
},
effects: {
// *add({ payload }, { call, put }) {
// const { callback, body } = payload;
// const response = yield call(productCategoryAdd, body);
// if (callback) {
// callback(response);
// }
// yield put({
// type: 'tree',
// payload: {},
// });
// },
// *update({ payload }, { call, put }) {
// const { callback, body } = payload;
// const response = yield call(productCategoryUpdate, body);
@ -51,25 +52,87 @@ export default {
// payload: {},
// });
// },
// *updateStatus({ payload }, { call, put }) {
// const { callback, body } = payload;
// const response = yield call(productCategoryUpdateStatus, body);
// if (callback) {
// callback(response);
// }
// yield put({
// type: 'tree',
// payload: {},
// });
// },
// *delete({ payload }, { call, put }) {
// const response = yield call(productCategoryDelete, payload);
// message.info('删除成功!');
// yield put({
// type: 'tree',
// payload: {},
// });
// },
*info({ payload }, { call, put }) {
// 显示加载中
yield put({
type: 'changeLoading',
payload: true,
});
// 请求
const response = yield call(productSpuInfo, {
id: payload,
});
// 响应
let skus = [];
let attrTree = [];
// SKU
for (let i in response.data.skus) {
let sku = response.data.skus[i];
// 处理 sku
{
let attrs = [];
for (let j in sku.attrs) {
let attr = sku.attrs[j];
attrs.push({
id: attr.attrValueId,
name: attr.attrValueName,
});
}
let newSku = {
...sku,
attrs,
};
skus.push(newSku);
}
// 处理 attrTree
{
for (let j in sku.attrs) {
// debugger;
let attr = sku.attrs[j];
let attrTreeNode = undefined;
for (let k in attrTree) {
let item = attrTree[k];
if (item.id === attr.attrId) {
attrTreeNode = item;
break;
}
}
if (!attrTreeNode) {
attrTreeNode = {
id: attr.attrId,
name: attr.attrName,
values: [{
id: attr.attrValueId,
name: attr.attrValueName,
}]
};
attrTree.push(attrTreeNode);
} else {
// let values = attrTreeNode.values;
// for (let k in ) {
//
// }
}
}
}
}
// debugger;
yield put({
type: 'setAll',
payload: {
spu: response.data,
skus: skus,
attrTree: attrTree,
},
});
// 隐藏加载中
yield put({
type: 'changeLoading',
payload: false,
});
},
*addAttr({ payload }, { call, put }) {
// const { queryParams } = payload;
// const response = yield call(productCategoryTree, queryParams);
@ -212,11 +275,31 @@ export default {
...state
}
},
treeSuccess(state, { payload }) {
clear(state, {payload}) {
return {
...state,
skus: [],
attrTree: [],
}
},
changeLoading(state, { payload }) {
return {
...state,
listLoading: payload,
};
},
// 设置所有属性
setAll(state, { payload }) {
return {
...state,
...payload,
};
},
}
// treeSuccess(state, { payload }) {
// return {
// ...state,
// ...payload,
// };
// },
},
};

5
admin-web/src/models/product/productSpuList.js
View File

@ -55,6 +55,11 @@ export default {
// const { callback, body } = payload;
yield put(routerRedux.replace('/product/product-spu-add'));
},
*redirectToUpdate({ payload }, { call, put }) {
// const { callback, body } = payload;
debugger;
yield put(routerRedux.replace('/product/product-spu-update?id=' + payload));
},
*page({ payload }, { call, put }) {
// const { queryParams } = payload;
const response = yield call(productSpuPage, payload);

251
admin-web/src/pages/Product/ProductSpuAddOrUpdate.js
View File

@ -5,7 +5,7 @@ import React, {PureComponent, Fragment, Component} from 'react';
// import fs from 'fs';
import { connect } from 'dva';
import moment from 'moment';
import {Card, Form, Input, Radio, Button, Modal, Select, Upload, Icon} from 'antd';
import {Card, Form, Input, Radio, Button, Modal, Select, Upload, Icon, Spin} from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
// import * as qiniu from 'qiniu-js'
@ -14,7 +14,7 @@ import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import styles from './ProductSpuAddOrUpdate.less';
import ProductAttrSelectFormItem from "../../components/Product/ProductAttrSelectFormItem";
import ProductSkuAddOrUpdateTable from "../../components/Product/ProductSkuAddOrUpdateTable";
import {fileGetQiniuToken} from "../../services/admin";
// import {fileGetQiniuToken} from "../../services/admin";
import PicturesWall from "../../components/Image/PicturesWall";
const FormItem = Form.Item;
@ -22,12 +22,14 @@ const RadioGroup = Radio.Group;
const Option = Select.Option;
// roleList
@connect(({ productSpuList, productAttrList, productSpuAddOrUpdate, loading }) => ({
@connect(({ productAttrList, productSpuAddOrUpdate, }) => ({
// list: productSpuList.list.spus,
// loading: loading.models.productSpuList,
productAttrList,
productSpuAddOrUpdate,
allAttrTree: productAttrList.tree,
loading: productSpuAddOrUpdate.loading,
spu: productSpuAddOrUpdate.spu,
attrTree: productSpuAddOrUpdate.attrTree,
skus: productSpuAddOrUpdate.skus,
}))
@ -35,15 +37,26 @@ const Option = Select.Option;
@Form.create()
class ProductSpuAddOrUpdate extends Component {
state = {
modalVisible: false,
// modalVisible: false,
modalType: 'add', //add update
initValues: {},
roleAssignVisible: false,
roleAssignRecord: {},
// initValues: {},
};
componentDidMount() {
const { dispatch } = this.props;
// 判断是否是更新
const params = new URLSearchParams(this.props.location.search);
if (params.get("id")) {
let id = params.get("id");
this.setState({
modalType: 'update',
})
dispatch({
type: 'productSpuAddOrUpdate/info',
payload: parseInt(id),
})
}
// 获得规格列表
dispatch({
type: 'productAttrList/tree',
payload: {
@ -52,6 +65,10 @@ class ProductSpuAddOrUpdate extends Component {
pageSize: 10,
},
});
// 重置表单
dispatch({
type: 'productSpuAddOrUpdate/clear',
})
}
handleAddAttr = e => {
@ -62,7 +79,7 @@ class ProductSpuAddOrUpdate extends Component {
payload: {
},
});
}
};
handleSubmit = e => {
e.preventDefault();
@ -110,59 +127,11 @@ class ProductSpuAddOrUpdate extends Component {
}
});
// console.log(fields);
}
// handleSelectAttr = (value, option) => {
// // console.log(value);
// // console.log(option);
// // debugger;
// const { dispatch } = this.props;
// let attrIndex = option.key.substring(option.key.indexOf('option-attr-') + 'option-attr-'.length, option.key.lastIndexOf('-'));
// // console.log('attrIndex: ' + attrIndex);
// // debugger;
// dispatch({
// type: 'productSpuAddOrUpdate/selectAttr',
// payload: {
// attrIndex: attrIndex,
// attr: {
// id: option.props.value,
// name: option.props.children,
// values: []
// }
// },
// });
// }
//
// handleSelectAttrValue = (values, options) => {
// let attrValues = [];
// const { dispatch } = this.props;
// debugger;
// // console.log('x' + this.children[0]);
// let firstOption = this.children[0];
// // let attrIndex = firstOption.key.substring(firstOption.key.indexOf('option-attr-value-') + 'option-attr-value-'.length, firstOption.key.lastIndexOf('-'));
// let attrIndex = 0;
// for (let i in options) {
// let option = options[i];
// attrValues.push({
// id: parseInt(option.props.value),
// name: option.props.children,
// });
// }
// dispatch({
// type: 'productSpuAddOrUpdate/selectAttrValues',
// payload: {
// attrIndex: attrIndex,
// attrValues: attrValues,
// },
// });
// // debugger;
//
// // console.log(value);
// }
};
render() {
// debugger;
const { form, skus, attrTree, allAttrTree, dispatch } = this.props;
const { form, skus, attrTree, allAttrTree, loading, spu, dispatch } = this.props;
// const that = this;
// 添加规格
@ -188,47 +157,7 @@ class ProductSpuAddOrUpdate extends Component {
attrTreeHTML.push(<ProductAttrSelectFormItem {...itemProps} />);
}
}
// if (attrTree && attrTree.length > 0) {
// for (let i in attrTree) {
// let attr = attrTree[i];
// // console.log('i: ' + i);
// // 1. 规格
// let attrOptions = [];
// for (let j in allAttrTree) {
// let attr = allAttrTree[j];
// attrOptions.push(<Option key={`option-attr-${i}-${attr.id}`} value={attr.id}>{attr.name}</Option>);
// }
// // 2. 规格值
// let attrValueOptions = [];
// // debugger;
// if (attr.id) {
// // 2.1 先招到规格值的数组
// let attrValues = [];
// for (let j in allAttrTree) {
// let allAttr = allAttrTree[j];
// if (attr.id === allAttr.id) {
// attrValues = allAttr.values;
// break;
// }
// }
// // 2.2 生成规格值的 HTML
// for (let j in attrValues) {
// let attrValue = attrValues[j];
// attrValueOptions.push(<Option key={`option-attr-value-${i}-${attrValue.id}`} value={attrValue.id + ''}>{attrValue.name}</Option>); // + '' 的原因是，多选必须是字符串
// }
// }
// // 3. 拼装最终，添加到 attrTreeHTML 中
// attr = <div key={`div-attr-${i}`}>
// <Select key={`select-attr-${i}`} style={{ width: 120 }} placeholder='请选择规格' onChange={that.handleSelectAttr}>
// {attrOptions}
// </Select>
// <Select key={`select-attr-value-${i}`} mode={"tags"} style={{ width: 260 }} placeholder='请选择规格值' onChange={that.handleSelectAttrValue}>
// {attrValueOptions}
// </Select>
// </div>;
// attrTreeHTML.push(attr);
// }
// }
// 规格明细
let productSkuProps = {
attrTree: attrTree,
@ -239,66 +168,70 @@ class ProductSpuAddOrUpdate extends Component {
return (
<PageHeaderWrapper title="">
<Card bordered={false}>
<Form onSubmit={this.handleSubmit} hideRequiredMark style={{ marginTop: 8 }}>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="商品名">
{form.getFieldDecorator('name', {
rules: [{ required: true, message: '请输入商品名！', min: 2 }],
initialValue: '', // TODO 修改
})(<Input placeholder="请输入" />)}
</FormItem>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="商品卖点">
{form.getFieldDecorator('sellPoint', {
rules: [{ required: true, message: '请输入商品卖点！' }],
initialValue: '', // TODO 修改
})(<Input placeholder="请输入" />)}
</FormItem>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="分类编号">
{form.getFieldDecorator('cid', {
rules: [{ required: true, message: '请输入分类编号！' }],
initialValue: '', // TODO 修改 // TODO 芋艿，和面做成下拉框
})(<Input placeholder="请输入" />)}
</FormItem>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="商品主图"
extra="建议尺寸：800*800PX，单张大小不超过 2M，最多可上传 10 张">
{/*{form.getFieldDecorator('picUrls', {*/}
{/* initialValue: '', // TODO 修改 // TODO 芋艿，做成上传组件*/}
{/*})(<Input placeholder="请输入" />)}*/}
<PicturesWall ref="picturesWall" maxLength={10} />
</FormItem>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="是否上架">
{form.getFieldDecorator('visible', {
initialValue: 1, // TODO 修改
})(
<RadioGroup>
<Radio value={1}>是</Radio>
<Radio value={2}>否</Radio>
</RadioGroup>
)}
</FormItem>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="商品规格">
{form.getFieldDecorator('visible', {
initialValue: 1, // TODO 修改
})(
<div>
{attrTreeHTML}
<Button onClick={this.handleAddAttr}>添加规格项目</Button>
</div>
)}
</FormItem>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="规格明细">
{/*<Table defaultExpandAllRows={true} columns={columns} rowKey="id" />*/}
<ProductSkuAddOrUpdateTable {...productSkuProps} />
</FormItem>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="商品描述">
{form.getFieldDecorator('description', {
rules: [{ required: true, message: '请输入商品描述！' }],
initialValue: '', // TODO 修改
})(<Input.TextArea placeholder="请输入" />)}
<Button type="primary" htmlType="submit" style={{ marginLeft: 8 }} onSubmit={this.handleSubmit}>保存</Button>
</FormItem>
</Form>
</Card>
<Spin spinning={loading}>
<Card bordered={false}>
<Form onSubmit={this.handleSubmit} hideRequiredMark style={{ marginTop: 8 }}>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="商品名">
{form.getFieldDecorator('name', {
rules: [{ required: true, message: '请输入商品名！', min: 2 }],
initialValue: spu.name,
})(<Input placeholder="请输入" />)}
</FormItem>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="商品卖点">
{form.getFieldDecorator('sellPoint', {
rules: [{ required: true, message: '请输入商品卖点！' }],
initialValue: spu.sellPoint,
})(<Input placeholder="请输入" />)}
</FormItem>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="分类编号">
{form.getFieldDecorator('cid', {
rules: [{ required: true, message: '请输入分类编号！' }],
initialValue: spu.cid, // TODO 芋艿，和面做成下拉框
})(<Input placeholder="请输入" />)}
</FormItem>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="商品主图"
extra="建议尺寸：800*800PX，单张大小不超过 2M，最多可上传 10 张">
{/*{form.getFieldDecorator('picUrls', {*/}
{/* initialValue: '', // TODO 修改 // TODO 芋艿，做成上传组件*/}
{/*})(<Input placeholder="请输入" />)}*/}
<PicturesWall ref="picturesWall" maxLength={10} />
</FormItem>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="是否上架">
{form.getFieldDecorator('visible', {
initialValue: spu.visible,
})(
<RadioGroup>
<Radio value={true}>是</Radio>
<Radio value={false}>否</Radio>
</RadioGroup>
)}
</FormItem>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="商品规格">
{form.getFieldDecorator('visible', {
initialValue: 1, // TODO 修改
})(
<div>
{attrTreeHTML}
<Button onClick={this.handleAddAttr}>添加规格项目</Button>
</div>
)}
</FormItem>
{
attrTree.length > 0 ? <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="规格明细">
{/*<Table defaultExpandAllRows={true} columns={columns} rowKey="id" />*/}
<ProductSkuAddOrUpdateTable {...productSkuProps} />
</FormItem> : ''
}
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="商品描述">
{form.getFieldDecorator('description', {
rules: [{ required: true, message: '请输入商品描述！' }],
initialValue: spu.description, // TODO 修改
})(<Input.TextArea placeholder="请输入" />)}
<Button type="primary" htmlType="submit" style={{ marginLeft: 8 }} onSubmit={this.handleSubmit}>保存</Button>
</FormItem>
</Form>
</Card>
</Spin>
</PageHeaderWrapper>
);
}

11
admin-web/src/pages/Product/ProductSpuList.js
View File

@ -47,6 +47,14 @@ class ProductSpuList extends PureComponent {
});
};
redirectToUpdate = (spuId) => {
const { dispatch } = this.props;
dispatch({
type: 'productSpuList/redirectToUpdate',
payload: spuId,
});
};
render() {
// debugger;
const { list, data } = this.props;
@ -103,7 +111,8 @@ class ProductSpuList extends PureComponent {
width: 200,
render: (text, record) => (
<Fragment>
<a onClick={() => this.handleModalVisible(true, 'update', record)}>更新</a>
{/*<a onClick={() => this.handleModalVisible(true, 'update', record)}>更新</a>*/}
<a onClick={() => this.redirectToUpdate(record.id)}>更新</a>
</Fragment>
),
},

6
admin-web/src/services/product.js
View File

@ -52,6 +52,12 @@ export async function productSpuAdd(params) {
});
}
export async function productSpuInfo(params) {
return request(`/product-api/admins/spu/info?${stringify(params)}`, {
method: 'GET',
});
}
// product attr + attr value
export async function productAttrTree(params) {