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

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

@@ -3,40 +3,44 @@ import {Select} from "antd";
 
 const Option = Select.Option;
 
-export default class ProductAttrSelectFormItem extends PureComponent {
+class AttrValueSelect extends Select {
+
+  handleSelectAttrValue = (value, option) => {
 
-  handleSelectAttr = (value, option) => {
-    // 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: []
-        }
-      },
-    });
   };
 
-  handleSelectAttrValue = (values, options) => {
+  render() {
+    const {index, attrValues, attrValueOptions, attr} = this.props;
+
+    const handleChangeAttrValue = async (values, options) => {
       let attrValues = [];
-    const { dispatch, index } = this.props;
+      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: parseInt(option.props.value),
+          id: attrValueId,
           name: option.props.children,
         });
       }
@@ -50,10 +54,43 @@ export default class ProductAttrSelectFormItem extends PureComponent {
       // 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} = 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>;
   }
 

admin-web/src/defaultSettings.js

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

admin-web/src/layouts/UserLayout.js

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

admin-web/src/models/product/productAttrList.js

 import { message } from 'antd';
-import { productAttrTree } from '../../services/product';
+import { productAttrTree, productAttrValueAdd } from '../../services/product';
 
 export default {
   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: {

admin-web/src/pages/Product/ProductSpuAddOrUpdate.js

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

admin-web/src/pages/document.ejs

@@ -7,7 +7,7 @@
       name="viewport"
       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" />
   </head>
   <body>

admin-web/src/services/product.js

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