前端:商品编辑,部分逻辑,解决 sku 编辑的 bug 。

This commit is contained in:
YunaiV 2019-05-02 23:48:20 +08:00
parent 942d2c0634
commit 582837fee0
7 changed files with 113 additions and 45 deletions

View File

@ -3,9 +3,72 @@ import {Select} from "antd";
const Option = Select.Option; const Option = Select.Option;
class AttrValueSelect extends Select {
handleSelectAttrValue = (value, option) => {
};
render() {
const {index, attrValues, attrValueOptions, attr} = this.props;
const handleChangeAttrValue = async (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];
// TODO 芋艿,这个做法很不优雅,后面看俺。需要问下 answer 。
let attrValueId = undefined;
if (option.key.indexOf('option-attr-value-') === -1) {
await dispatch({
type: 'productAttrList/addValue',
payload: {
attrId: attr.id,
name: option.props.children,
},
callback: function (data) {
attrValueId = data.id;
}
});
} else {
attrValueId = parseInt(option.props.value);
}
// 添加到 attrValues 中。
// debugger;
attrValues.push({
id: attrValueId,
name: option.props.children,
});
}
dispatch({
type: 'productSpuAddOrUpdate/selectAttrValues',
payload: {
attrIndex: index,
attrValues: attrValues,
},
});
// debugger;
// console.log(value);
};
return <Select key={`select-attr-value-${index}`} mode={"tags"} style={{width: 260}} value={attrValues}
placeholder='请选择规格值'
onChange={handleChangeAttrValue} onSelect={this.handleSelectAttrValue}>
{attrValueOptions}
</Select>;
}
}
export default class ProductAttrSelectFormItem extends PureComponent { export default class ProductAttrSelectFormItem extends PureComponent {
handleSelectAttr = (value, option) => { handleSelectAttr = (value, option) => {
debugger;
// console.log(value); // console.log(value);
// console.log(option); // console.log(option);
// debugger; // debugger;
@ -26,34 +89,8 @@ export default class ProductAttrSelectFormItem extends PureComponent {
}); });
}; };
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() { render() {
const {attr, allAttrTree, selectedAttrIds, index} = this.props; const {attr, allAttrTree, selectedAttrIds, index, dispatch} = this.props;
// console.log('i: ' + i); // console.log('i: ' + i);
// 1. 规格 // 1. 规格
let attrOptions = []; let attrOptions = [];
@ -92,14 +129,19 @@ export default class ProductAttrSelectFormItem extends PureComponent {
for (let i in attr.values) { for (let i in attr.values) {
attrValues.push(attr.values[i].id + ''); // Select 传入数组时,如果不 + '' ,选不中。 attrValues.push(attr.values[i].id + ''); // Select 传入数组时,如果不 + '' ,选不中。
} }
let attrValueSelectProps = {
index: index,
attrValues: attrValues,
dispatch: dispatch,
attrValueOptions: attrValueOptions,
attr: attr,
};
// TODO BUG ,规格不能搜索添加
return <div key={`div-attr-${index}`}> return <div key={`div-attr-${index}`}>
<Select key={`select-attr-${index}`} style={{width: 120}} placeholder='请选择规格' value={attr.id} onChange={this.handleSelectAttr}> <Select key={`select-attr-${index}`} showSearch optionFilterProp="children" style={{width: 120}} placeholder='请选择规格' value={attr.id} onChange={this.handleSelectAttr} onSearch={this.handleSearchAttr}>
{attrOptions} {attrOptions}
</Select> </Select>
<Select key={`select-attr-value-${index}`} mode={"tags"} style={{width: 260}} value={attrValues} placeholder='请选择规格值' <AttrValueSelect {...attrValueSelectProps} />
onChange={this.handleSelectAttrValue}>
{attrValueOptions}
</Select>
</div>; </div>;
} }

View File

@ -9,7 +9,7 @@ module.exports = {
menu: { menu: {
disableLocal: false, disableLocal: false,
}, },
title: '商城管理平台', title: '一个商城管理平台',
pwa: true, pwa: true,
// your iconfont Symbol Scrip Url // your iconfont Symbol Scrip Url
// eg//at.alicdn.com/t/font_1039637_btcrd5co4w.js // eg//at.alicdn.com/t/font_1039637_btcrd5co4w.js

View File

@ -61,7 +61,7 @@ class UserLayout extends Component {
<div className={styles.header}> <div className={styles.header}>
<Link to="/"> <Link to="/">
<img alt="logo" className={styles.logo} src={logo} /> <img alt="logo" className={styles.logo} src={logo} />
<span className={styles.title}>商城管理平台</span> <span className={styles.title}>一个商城管理平台</span>
</Link> </Link>
</div> </div>
{/*<div className={styles.desc}>TODO....</div>*/} {/*<div className={styles.desc}>TODO....</div>*/}

View File

@ -1,5 +1,5 @@
import { message } from 'antd'; import { message } from 'antd';
import { productAttrTree } from '../../services/product'; import { productAttrTree, productAttrValueAdd } from '../../services/product';
export default { export default {
namespace: 'productAttrList', namespace: 'productAttrList',
@ -62,6 +62,29 @@ export default {
}, },
}); });
}, },
*addValue({ payload, callback }, { call, put }) {
// debugger;
// const {queryParams} = payload;
const response = yield call(productAttrValueAdd, payload);
// message.info('查询成功!');
// yield put({
// type: 'treeSuccess',
// payload: {
// tree: response.data,
// },
// });
if (response.code === 0) {
// 刷新规格列表
yield put({
type: 'tree',
payload: {},
});
// 回调方法
if (callback) {
callback(response.data);
}
}
}
}, },
reducers: { reducers: {

View File

@ -119,7 +119,7 @@ class ProductSpuAddOrUpdate extends Component {
} }
// debugger; // debugger;
this.props.form.validateFields((err, values) => { this.props.form.validateFields((err, values) => {
debugger; // debugger;
if (!err) { if (!err) {
if (modalType === 'add') { if (modalType === 'add') {
dispatch({ dispatch({
@ -228,14 +228,10 @@ class ProductSpuAddOrUpdate extends Component {
)} )}
</FormItem> </FormItem>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="商品规格"> <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="商品规格">
{form.getFieldDecorator('visible', {
initialValue: 1, // TODO 修改
})(
<div> <div>
{attrTreeHTML} {attrTreeHTML}
<Button onClick={this.handleAddAttr}>添加规格项目</Button> <Button onClick={this.handleAddAttr}>添加规格项目</Button>
</div> </div>
)}
</FormItem> </FormItem>
{ {
attrTree.length > 0 ? <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="规格明细"> attrTree.length > 0 ? <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="规格明细">

View File

@ -7,7 +7,7 @@
name="viewport" name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/> />
<title>商城管理平台</title> <title>一个商城管理平台</title>
<link rel="icon" href="/favicon.png" type="image/x-icon" /> <link rel="icon" href="/favicon.png" type="image/x-icon" />
</head> </head>
<body> <body>

View File

@ -71,3 +71,10 @@ export async function productAttrTree(params) {
method: 'GET', method: 'GET',
}); });
} }
export async function productAttrValueAdd(params) {
return request(`/product-api/admins//attr_value/add?${stringify(params)}`, {
method: 'POST',
body: {},
});
}