前端:商品编辑,部分逻辑,解决 sku 编辑的 bug 。
parent
e05f19ddc6
commit
91d475034c
|
@ -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;
|
||||
|
|
|
@ -24,7 +24,7 @@ export default class ProductAttrSelectFormItem extends PureComponent {
|
|||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
handleSelectAttrValue = (values, options) => {
|
||||
let attrValues = [];
|
||||
|
@ -87,15 +87,20 @@ 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>
|
||||
</div>;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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} />;
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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,17 +119,32 @@ class ProductSpuAddOrUpdate extends Component {
|
|||
}
|
||||
// debugger;
|
||||
this.props.form.validateFields((err, values) => {
|
||||
debugger;
|
||||
if (!err) {
|
||||
dispatch({
|
||||
type: 'productSpuAddOrUpdate/add',
|
||||
payload: {
|
||||
body: {
|
||||
...values,
|
||||
picUrls: picUrls.join(','),
|
||||
skuStr: JSON.stringify(skuStr)
|
||||
}
|
||||
},
|
||||
});
|
||||
if (modalType === 'add') {
|
||||
dispatch({
|
||||
type: 'productSpuAddOrUpdate/add',
|
||||
payload: {
|
||||
body: {
|
||||
...values,
|
||||
picUrls: picUrls.join(','),
|
||||
skuStr: JSON.stringify(skuStr)
|
||||
}
|
||||
},
|
||||
});
|
||||
} else if (modalType === 'update') {
|
||||
dispatch({
|
||||
type: 'productSpuAddOrUpdate/update',
|
||||
payload: {
|
||||
body: {
|
||||
...values,
|
||||
id,
|
||||
picUrls: picUrls.join(','),
|
||||
skuStr: JSON.stringify(skuStr)
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
// console.log(fields);
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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 对象
|
||||
|
|
Loading…
Reference in New Issue