149 lines
4.7 KiB
JavaScript
149 lines
4.7 KiB
JavaScript
import React, {PureComponent} from "react";
|
||
import {Select} from "antd";
|
||
|
||
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 {
|
||
|
||
handleSelectAttr = (value, option) => {
|
||
debugger;
|
||
// 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: []
|
||
}
|
||
},
|
||
});
|
||
};
|
||
|
||
render() {
|
||
const {attr, allAttrTree, selectedAttrIds, index, dispatch} = 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 中
|
||
// debugger;
|
||
let attrValues = []; // 选中的规格值集合
|
||
for (let i in attr.values) {
|
||
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}`}>
|
||
<Select key={`select-attr-${index}`} showSearch optionFilterProp="children" style={{width: 120}} placeholder='请选择规格' value={attr.id} onChange={this.handleSelectAttr} onSearch={this.handleSearchAttr}>
|
||
{attrOptions}
|
||
</Select>
|
||
<AttrValueSelect {...attrValueSelectProps} />
|
||
</div>;
|
||
}
|
||
|
||
}
|