root/ludu-cloud
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 2 Wiki Activity

前端：商品编辑，部分逻辑，解决 sku 编辑的 bug 。

Browse Source
This commit is contained in:
YunaiV 2019-05-02 20:18:40 +08:00
parent e05f19ddc6
commit 91d475034c
8 changed files with 107 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -137,6 +137,25 @@ class PicturesWall extends React.Component {
return urls;
};
setUrls = (urls) => {
// let urls = this.props.urls;
if (urls) {
let fileList = [];
for (let i in urls) {
let url = urls[i];
fileList.push({
uid: -i,
name: url,
status: 'done',
url,
});
}
this.setState({
fileList: fileList,
})
}
};
render() {
const { previewVisible, previewImage, fileList } = this.state;
const uploadButton = (
@ -168,7 +187,8 @@ class PicturesWall extends React.Component {
};
PicturesWall.propTypes = {
maxLength: Number,
maxLength: Number, // 最大照片墙图片数量
// urls: String[], // 初始图片列表
};
export default PicturesWall;

11
admin-web/src/components/Product/ProductAttrSelectFormItem.js
View File

@ -24,7 +24,7 @@ export default class ProductAttrSelectFormItem extends PureComponent {
}
},
});
}
};
handleSelectAttrValue = (values, options) => {
let attrValues = [];
@ -87,11 +87,16 @@ export default class ProductAttrSelectFormItem extends PureComponent {
}
}
// 3. 拼装最终，添加到 attrTreeHTML 中
// debugger;
let attrValues = []; // 选中的规格值集合
for (let i in attr.values) {
attrValues.push(attr.values[i].id + ''); // Select 传入数组时，如果不 + '' ，选不中。
}
return <div key={`div-attr-${index}`}>
<Select key={`select-attr-${index}`} style={{width: 120}} placeholder='请选择规格' onChange={this.handleSelectAttr}>
<Select key={`select-attr-${index}`} style={{width: 120}} placeholder='请选择规格' value={attr.id} onChange={this.handleSelectAttr}>
{attrOptions}
</Select>
<Select key={`select-attr-value-${index}`} mode={"tags"} style={{width: 260}} placeholder='请选择规格值'
<Select key={`select-attr-value-${index}`} mode={"tags"} style={{width: 260}} value={attrValues} placeholder='请选择规格值'
onChange={this.handleSelectAttrValue}>
{attrValueOptions}
</Select>

9
admin-web/src/components/Product/ProductSkuAddOrUpdateTable.js
View File

@ -29,7 +29,8 @@ class SkuInputNumber extends PureComponent {
}
render() {
return <InputNumber placeholder="请输入" onChange={this.handleChange} />
const { value } = this.props;
return <InputNumber placeholder="请输入" value={value} onChange={this.handleChange} />
}
}
@ -60,7 +61,8 @@ export default class ProductSkuAddOrUpdateTable extends PureComponent {
record: record,
index: index,
dispatch: dispatch,
dataIndex: 'price'
dataIndex: 'price',
value: record.price,
};
return <SkuInputNumber {...props} />;
}
@ -73,7 +75,8 @@ export default class ProductSkuAddOrUpdateTable extends PureComponent {
record: record,
index: index,
dispatch: dispatch,
dataIndex: 'quantity'
dataIndex: 'quantity',
value: record.quantity,
};
return <SkuInputNumber {...props} />;
}

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

@ -1,12 +1,10 @@
import { message } from 'antd';
import {
productCategoryTree,
productSpuAdd,
productCategoryUpdate,
productCategoryUpdateStatus,
productCategoryDelete,
productSpuUpdate,
productSpuInfo
} from '../../services/product';
import {bool} from "prop-types";
export default {
namespace: 'productSpuAddOrUpdate',
@ -52,7 +50,7 @@ export default {
// payload: {},
// });
// },
*info({ payload }, { call, put }) {
*info({ payload, callback }, { call, put }) {
// 显示加载中
yield put({
type: 'changeLoading',
@ -109,10 +107,20 @@ export default {
};
attrTree.push(attrTreeNode);
} else {
// let values = attrTreeNode.values;
// for (let k in ) {
//
// }
let attrValueExists = false;
let values = attrTreeNode.values;
for (let k in values) {
if (values[k].id === attr.attrValueId) {
attrValueExists = true;
break;
}
}
if (!attrValueExists) {
values.push({
id: attr.attrValueId,
name: attr.attrValueName,
});
}
}
}
}
@ -127,6 +135,11 @@ export default {
},
});
// 如果有回调，则执行回调方法
if (callback) {
callback(response.data);
}
// 隐藏加载中
yield put({
type: 'changeLoading',
@ -190,7 +203,7 @@ export default {
},
*update({ payload }, { call, put }) {
const { callback, body } = payload;
const response = yield call(productSpuAdd, body);
const response = yield call(productSpuUpdate, body);
if (callback) {
callback(response);
}
@ -238,7 +251,13 @@ export default {
quantity: undefined,
});
}
// let interval = skuSize; // 该间隔，用于下面规格组合
for (let i = 0; i < state.attrTree.length; i++) { // 初始化 sku 格子里的 attrs
if (i === 1) {
// debugger;
}
let values = state.attrTree[i].values;
let interval = skuSize / values.length;
for (let j = 0; j < skuSize; j++) {
// let values = state.attrTree[i].values;
// let attr = values[j % values.length];
@ -246,8 +265,8 @@ export default {
// id: attr.id,
// name: attr.name,
// });
let values = state.attrTree[i].values;
let attr = values[j % values.length];
// let attr = values[j % values.length];
let attr = values[parseInt(j / interval)];
skus[j].attrs.push({
id: attr.id,
name: attr.name,

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

@ -10,28 +10,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);
// if (callback) {
// callback(response);
// }
// yield put({
// type: 'tree',
// payload: {},
// });
// },
// *updateStatus({ payload }, { call, put }) {
// const { callback, body } = payload;
// const response = yield call(productCategoryUpdateStatus, body);

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

@ -44,16 +44,21 @@ class ProductSpuAddOrUpdate extends Component {
componentDidMount() {
const { dispatch } = this.props;
const that = this;
// 判断是否是更新
const params = new URLSearchParams(this.props.location.search);
if (params.get("id")) {
let id = params.get("id");
this.setState({
modalType: 'update',
id: id,
})
dispatch({
type: 'productSpuAddOrUpdate/info',
payload: parseInt(id),
callback: function (data) {
that.refs.picturesWall.setUrls(data.picUrls); // TODO 后续找找，有没更合适的做法
}
})
}
// 获得规格列表
@ -84,8 +89,9 @@ class ProductSpuAddOrUpdate extends Component {
handleSubmit = e => {
e.preventDefault();
const { skus, dispatch } = this.props;
const { modalType, id } = this.state;
// 获得图片
let picUrls = this.refs.picturesWall.getUrls();
let picUrls = this.refs.picturesWall.getUrls(); // TODO 芋艿，后续找找其他做法
if (picUrls.length === 0) {
alert('请必须上传一张图片！');
return;
@ -113,7 +119,9 @@ class ProductSpuAddOrUpdate extends Component {
}
// debugger;
this.props.form.validateFields((err, values) => {
debugger;
if (!err) {
if (modalType === 'add') {
dispatch({
type: 'productSpuAddOrUpdate/add',
payload: {
@ -124,6 +132,19 @@ class ProductSpuAddOrUpdate extends Component {
}
},
});
} else if (modalType === 'update') {
dispatch({
type: 'productSpuAddOrUpdate/update',
payload: {
body: {
...values,
id,
picUrls: picUrls.join(','),
skuStr: JSON.stringify(skuStr)
}
},
});
}
}
});
// console.log(fields);

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

@ -39,7 +39,6 @@ export async function productCategoryDelete(params) {
// product spu + sku
export async function productSpuPage(params) {
debugger;
return request(`/product-api/admins/spu/page?${stringify(params)}`, {
method: 'GET',
});
@ -52,6 +51,13 @@ export async function productSpuAdd(params) {
});
}
export async function productSpuUpdate(params) {
return request(`/product-api/admins/spu/update?${stringify(params)}`, {
method: 'POST',
body: {},
});
}
export async function productSpuInfo(params) {
return request(`/product-api/admins/spu/info?${stringify(params)}`, {
method: 'GET',

2
product/product-application/src/main/java/cn/iocoder/mall/product/application/controller/admins/AdminsProductSpuController.java
View File

@ -84,7 +84,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 接受参数，所以这里手动转。
// 创建 ProductSpuUpdateDTO 对象