Skip to content

Y
yudao-cloud
提交 92b5f6ba authored 作者: YunaiV's avatar YunaiV
浏览文件
操作

前端：商品添加。提交部分，让小范帮忙看看~

上级 ecc5cf88
隐藏空白字符变更
内嵌 并排
正在显示 包含 476 行增加 和 77 行删除
admin-web/src/components/Product/ProductAttrSelectFormItem.js 0 → 100644
浏览文件 @ 92b5f6ba
import React, {PureComponent} from "react";
import {Select} from "antd";
const Option = Select.Option;
export default class ProductAttrSelectFormItem extends PureComponent {
handleSelectAttr = (value, option) => {
// console.log(value);
// console.log(option);
// debugger;
const { dispatch, index } = 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: index,
attr: {
id: option.props.value,
name: option.props.children,
values: []
}
},
});
}
handleSelectAttrValue = (values, options) => {
let attrValues = [];
const { dispatch, index } = 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('-'));
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: index,
attrValues: attrValues,
},
});
// debugger;
// console.log(value);
}
render() {
const {attr, allAttrTree, selectedAttrIds, index} = this.props;
// console.log('i: ' + i);
// 1. 规格
let attrOptions = [];
// allAttrTree.unshift(attr);
// debugger;
for (let j in allAttrTree) {
let allAttr = allAttrTree[j];
if (selectedAttrIds.has(allAttr.id) && allAttr.id !== attr.id) {
continue;
}
attrOptions.push(<Option key={`option-attr-${index}-${allAttr.id}`} value={allAttr.id}>{allAttr.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-${index}-${attrValue.id}`}
value={attrValue.id + ''}>{attrValue.name}</Option>); // + '' 的原因是，多选必须是字符串
}
}
// 3. 拼装最终，添加到 attrTreeHTML 中
return <div key={`div-attr-${index}`}>
<Select key={`select-attr-${index}`} style={{width: 120}} placeholder='请选择规格' onChange={this.handleSelectAttr}>
{attrOptions}
</Select>
<Select key={`select-attr-value-${index}`} mode={"tags"} style={{width: 260}} placeholder='请选择规格值'
onChange={this.handleSelectAttrValue}>
{attrValueOptions}
</Select>
</div>;
}
}
\ No newline at end of file
admin-web/src/components/Product/ProductSkuAddOrUpdateTable.js 0 → 100644
浏览文件 @ 92b5f6ba
import React, {PureComponent} from "react";
import {InputNumber, Select, Table} from "antd";
import Input from "antd/es/input";
const Option = Select.Option;
class SkuInputNumber extends PureComponent {
handleChange = value => {
// debugger;
const { dispatch, index, dataIndex } = this.props;
if (dataIndex === 'price') {
dispatch({
type: 'productSpuAddOrUpdate/inputSkuPrice',
payload: {
index: index,
price: value
},
});
} else if (dataIndex === 'quantity') {
dispatch({
type: 'productSpuAddOrUpdate/inputSkuQuantity',
payload: {
index: index,
quantity: value
},
});
}
}
render() {
return <InputNumber placeholder="请输入" onChange={this.handleChange} />
}
}
export default class ProductSkuAddOrUpdateTable extends PureComponent {
render() {
let that = this;
// debugger;
// console.log('ProductSkuAddOrUpdateTable');
const {attrTree, skus, dispatch} = this.props;
let columns = [];
for (let i in attrTree) {
let attr = attrTree[i];
columns.push({
title: attr.name,
dataIndex: 'attrs[i]',
render(value, record) {
return record.attrs[i].name;
}
})
}
columns.push({
title: '价格',
dataIndex: 'price',
render(value, record, index) {
let props = {
record: record,
index: index,
dispatch: dispatch,
dataIndex: 'price'
};
return <SkuInputNumber {...props} />;
}
});
columns.push({
title: '库存',
dataIndex: 'quantity',
render(value, record, index) {
let props = {
record: record,
index: index,
dispatch: dispatch,
dataIndex: 'quantity'
};
return <SkuInputNumber {...props} />;
}
});
return <Table columns={columns} dataSource={skus} rowKey="index" />;
// return <div />;
}
}
\ No newline at end of file
admin-web/src/locales/zh-CN/menu.js
浏览文件 @ 92b5f6ba
......@@ -44,4 +44,9 @@ export default {
'menu.account.settings': '个人设置',
'menu.account.trigger': '触发报错',
'menu.account.logout': '退出登录',
// 商品相关
'menu.product': '商品管理',
'menu.product.product-spu-list': '商品管理',
'menu.product.product-spu-add': '商品添加',
'menu.product.product-category-list': '商品分类',
};
admin-web/src/models/product/productSpuAddOrUpdate.js
浏览文件 @ 92b5f6ba
import { message } from 'antd';
import { productCategoryTree, productCategoryAdd, productCategoryUpdate, productCategoryUpdateStatus, productCategoryDelete } from '../../services/product';
import { productCategoryTree, productSpuAdd, productCategoryUpdate, productCategoryUpdateStatus, productCategoryDelete } from '../../services/product';
export default {
namespace: 'productSpuAddOrUpdate',
......@@ -15,6 +15,16 @@ export default {
// name: //
// }]
// }
],
skus: [
// {
// attrs: [{
// id: // 规格值编号
// name: // 规格值名
// }],
// price: // 价格
// quantity: // 数量
// }
]
},
......@@ -63,7 +73,7 @@ export default {
*addAttr({ payload }, { call, put }) {
// const { queryParams } = payload;
// const response = yield call(productCategoryTree, queryParams);
message.info('调试：添加规格成功!');
// message.info('调试：添加规格成功!');
yield put({
type: 'addAttrSuccess',
payload: {
......@@ -74,12 +84,46 @@ export default {
*selectAttr({ payload }, { call, put }) {
// const { queryParams } = payload;
// const response = yield call(productCategoryTree, queryParams);
message.info('调试：添加规格成功!');
// message.info('调试：选择规格成功!');
yield put({
type: 'selectAttrSuccess',
payload: payload,
});
},
*selectAttrValues({ payload }, { call, put }) {
// const { queryParams } = payload;
// const response = yield call(productCategoryTree, queryParams);
// message.info('调试：选择规格值成功!');
yield put({
type: 'selectAttrValueSuccess',
payload: payload,
});
},
*inputSkuPrice({ payload }, { call, put }) {
// debugger;
yield put({
type: 'inputSkuPriceSuccess',
payload: payload,
});
},
*inputSkuQuantity({ payload }, { call, put }) {
// debugger;
yield put({
type: 'inputSkuQuantitySuccess',
payload: payload,
});
},
*add({ payload }, { call, put }) {
const { callback, body } = payload;
const response = yield call(productSpuAdd, body);
if (callback) {
callback(response);
}
yield put({
type: 'tree',
payload: {},
});
},
},
reducers: {
......@@ -99,6 +143,62 @@ export default {
...state
}
},
selectAttrValueSuccess(state, {payload}) {
// debugger;
// console.log(state);
state.attrTree[payload.attrIndex].values = payload.attrValues;
// 生成 skus 值
let skus = [];
let skuSize = 1;
for (let i in state.attrTree) { // 先计算 sku 数量
let attr = state.attrTree[i];
skuSize = skuSize * attr.values.length;
}
// console.log('skuSize: ' + skuSize);
for (let i = 0; i < skuSize; i++) { // 初始化 sku 格子
skus.push({
attrs: [],
price: undefined,
quantity: undefined,
});
}
for (let i = 0; i < state.attrTree.length; i++) { // 初始化 sku 格子里的 attrs
for (let j = 0; j < skuSize; j++) {
// let values = state.attrTree[i].values;
// let attr = values[j % values.length];
// skus[i].attrs.push({
// id: attr.id,
// name: attr.name,
// });
let values = state.attrTree[i].values;
let attr = values[j % values.length];
skus[j].attrs.push({
id: attr.id,
name: attr.name,
});
}
}
state.skus = skus;
// debugger;
// console.l og('skus: ' + skus);
return {
...state
}
},
inputSkuPriceSuccess(state, {payload}) {
// debugger;
state.skus[payload.index].price = payload.price;
return {
...state
}
},
inputSkuQuantitySuccess(state, {payload}) {
// debugger;
state.skus[payload.index].quantity = payload.quantity;
return {
...state
}
},
treeSuccess(state, { payload }) {
return {
...state,
......
admin-web/src/pages/Product/ProductSpuAddOrUpdate.js
浏览文件 @ 92b5f6ba
......@@ -7,6 +7,8 @@ import {Card, Form, Input, Radio, Button, Table, Select} from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import styles from './ProductSpuAddOrUpdate.less';
import ProductAttrSelectFormItem from "../../components/Product/ProductAttrSelectFormItem";
import ProductSkuAddOrUpdateTable from "../../components/Product/ProductSkuAddOrUpdateTable";
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
......@@ -19,7 +21,8 @@ const Option = Select.Option;
productAttrList,
productSpuAddOrUpdate,
allAttrTree: productAttrList.tree,
attrTree: productSpuAddOrUpdate.attrTree
attrTree: productSpuAddOrUpdate.attrTree,
skus: productSpuAddOrUpdate.skus,
}))
@Form.create()
......@@ -44,18 +47,18 @@ class ProductSpuAddOrUpdate extends Component {
});
}
handleSubmit = e => {
const { dispatch, form } = this.props;
e.preventDefault();
form.validateFieldsAndScroll((err, values) => {
if (!err) {
dispatch({
type: 'form/submitRegularForm',
payload: values,
});
}
});
}
// handleSubmit = e => {
// const { dispatch, form } = this.props;
// e.preventDefault();
// form.validateFieldsAndScroll((err, values) => {
// if (!err) {
// dispatch({
// type: 'form/submitRegularForm',
// payload: values,
// });
// }
// });
// }
handleAddAttr = e => {
// alert('你猜');
......@@ -67,74 +70,171 @@ class ProductSpuAddOrUpdate extends Component {
});
}
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);
handleSubmit = e => {
debugger;
dispatch({
type: 'productSpuAddOrUpdate/selectAttr',
payload: {
attrIndex: attrIndex,
attr: {
id: option.props.value,
name: option.props.children,
}
},
e.preventDefault();
const { skus, dispatch } = this.props;
// 生成 skuStr 格式
let skuStr = []; // 因为提交是字符串格式
for (let i in skus) {
let sku = skus[i];
if (!sku.price || !sku.quantity) {
continue;
}
let newAttr = {
attrs: [],
price: sku.price,
quantity: sku.quantity,
}
for (let j in sku.attrs) {
newAttr.attrs.push(sku.attrs[j].id);
}
skuStr.push(newAttr);
}
if (skuStr.length === 0) {
alert('请设置商品规格！');
return;
}
this.props.form.validateFields((err, values) => {
if (!err) {
dispatch({
type: 'productSpuAddOrUpdate/add',
payload: {
body: {
...values,
skuStr: JSON.stringify(skuStr)
}
},
});
}
});
// 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, data, attrTree, allAttrTree } = this.props;
const that = this;
// 规格明细
const columns = [
{
title: '颜色',
dataIndex: 'price'
},
{
title: '价格',
dataIndex: 'price',
render(val) {
return <span>{status[val]}</span>;
},
},
{
title: '库存',
dataIndex: 'quantity',
}
];
const { form, skus, attrTree, allAttrTree, dispatch } = this.props;
// const that = this;
// 添加规格
// debugger;
let attrTreeHTML = [];
if (attrTree && attrTree.length > 0) {
// 已选择的的规格集合
let selectedAttrIds = new Set();
for (let i in attrTree) {
let attr = attrTree[i];
// console.log('i: ' + i);
// 1. 规格
let options = [];
for (let j in allAttrTree) {
let attr = allAttrTree[j];
options.push(<Option key={`option-attr-${i}-${attr.id}`} value={attr.id}>{attr.name}</Option>);
}
// 2. 规格值
// 3. 拼装最终，添加到 attrTreeHTML 中
attr = <div key={`div-attr-${i}`}>
<Select key={`select-attr-${i}`} style={{ width: 120 }} placeholder='请选择规格' onChange={that.handleSelectAttr}>
{options}
</Select>
</div>;
attrTreeHTML.push(attr);
selectedAttrIds.add(attr.id);
}
// 创建每个规格下拉框的 HTML
for (let i in attrTree) {
let attr = attrTree[i];
let itemProps = {
attr: attr,
allAttrTree: allAttrTree,
dispatch: dispatch,
selectedAttrIds: selectedAttrIds,
index: i // 位置。不然无法正确修改 Model 指定位置的数据
};
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,
skus: skus,
dispatch: dispatch,
};
// console.log(productSkuProps);
return (
<PageHeaderWrapper title="">
......@@ -189,13 +289,12 @@ class ProductSpuAddOrUpdate extends Component {
</div>
)}
</FormItem>
{/*<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="规格明细">*/}
{/*{form.getFieldDecorator('visible', {*/}
{/*initialValue: 1, // TODO 修改*/}
{/*})(*/}
{/*<Table defaultExpandAllRows={true} columns={columns} rowKey="id" />*/}
{/*)}*/}
{/*</FormItem>*/}
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="规格明细">
{/*<Table defaultExpandAllRows={true} columns={columns} rowKey="id" />*/}
<ProductSkuAddOrUpdateTable {...productSkuProps} />
<Button type="primary" htmlType="submit" style={{ marginLeft: 8 }} onSubmit={this.handleSubmit}>保存</Button>
</FormItem>
</Form>
</Card>
</PageHeaderWrapper>
......
admin-web/src/services/product.js
浏览文件 @ 92b5f6ba
......@@ -44,6 +44,13 @@ export async function productSpuPage(params) {
});
}
export async function productSpuAdd(params) {
return request(`/product-api/admins/spu/add?${stringify(params)}`, {
method: 'POST',
body: {},
});
}
// product attr + attr value
export async function productAttrTree(params) {
......
product/product-application/src/main/java/cn/iocoder/mall/product/application/controller/admins/AdminsProductSpuController.java
浏览文件 @ 92b5f6ba
......@@ -52,7 +52,7 @@ public class AdminsProductSpuController {
@RequestParam("sellPoint") String sellPoint,
@RequestParam("description") String description,
@RequestParam("cid") Integer cid,
@RequestParam("picURLs") List<String> picUrls,
@RequestParam("picUrls") List<String> picUrls,
@RequestParam("visible") Boolean visible,
@RequestParam("skuStr") String skuStr) { // TODO 芋艿，因为考虑不使用 json 接受参数，所以这里手动转。
// 创建 ProductSpuAddDTO 对象
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论