前端:商品编辑,部分逻辑,解决 sku 编辑的 bug 。
This commit is contained in:
parent
942d2c0634
commit
582837fee0
@ -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>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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
|
||||||
|
@ -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>*/}
|
||||||
|
@ -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: {
|
||||||
|
@ -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="规格明细">
|
||||||
|
@ -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>
|
||||||
|
@ -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: {},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user