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

admin-web/src/components/Product/ProductAttrSelectFormItem.js

@@ -3,9 +3,72 @@ 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;
@@ -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() {
-    const {attr, allAttrTree, selectedAttrIds, index} = this.props;
+    const {attr, allAttrTree, selectedAttrIds, index, dispatch} = this.props;
     // console.log('i: ' + i);
     // 1. 规格
     let attrOptions = [];
@@ -92,14 +129,19 @@ export default class ProductAttrSelectFormItem extends PureComponent {
     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}`} 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}
       </Select>
-      <Select key={`select-attr-value-${index}`} mode={"tags"} style={{width: 260}} value={attrValues} placeholder='请选择规格值'
-              onChange={this.handleSelectAttrValue}>
-        {attrValueOptions}
-      </Select>
+      <AttrValueSelect {...attrValueSelectProps} />
     </div>;
   }