diff --git a/admin-web/src/models/product/productAttrList.js b/admin-web/src/models/product/productAttrList.js
new file mode 100644
index 000000000..f4b00059e
--- /dev/null
+++ b/admin-web/src/models/product/productAttrList.js
@@ -0,0 +1,75 @@
+import { message } from 'antd';
+import { productSpuPage, productAttrTree, productCategoryUpdate, productCategoryUpdateStatus, productCategoryDelete } from '../../services/product';
+
+export default {
+  namespace: 'productAttrList',
+
+  state: {
+    list: [],
+  },
+
+  effects: {
+    // *add({ payload }, { call, put }) {
+    //   const { callback, body } = payload;
+    //   const response = yield call(productCategoryAdd, body);
+    //   if (callback) {
+    //     callback(response);
+    //   }
+    //   yield put({
+    //     type: 'tree',
+    //     payload: {},
+    //   });
+    // },
+    // *update({ payload }, { call, put }) {
+    //   const { callback, body } = payload;
+    //   const response = yield call(productCategoryUpdate, body);
+    //   if (callback) {
+    //     callback(response);
+    //   }
+    //   yield put({
+    //     type: 'tree',
+    //     payload: {},
+    //   });
+    // },
+    // *updateStatus({ payload }, { call, put }) {
+    //   const { callback, body } = payload;
+    //   const response = yield call(productCategoryUpdateStatus, body);
+    //   if (callback) {
+    //     callback(response);
+    //   }
+    //   yield put({
+    //     type: 'tree',
+    //     payload: {},
+    //   });
+    // },
+    // *delete({ payload }, { call, put }) {
+    //   const response = yield call(productCategoryDelete, payload);
+    //   message.info('删除成功!');
+    //   yield put({
+    //     type: 'tree',
+    //     payload: {},
+    //   });
+    // },
+
+    *tree({ payload }, { call, put }) {
+      const { queryParams } = payload;
+      const response = yield call(productAttrTree, queryParams);
+      message.info('查询成功!');
+      yield put({
+        type: 'treeSuccess',
+        payload: {
+          tree: response.data,
+        },
+      });
+    },
+  },
+
+  reducers: {
+    treeSuccess(state, { payload }) {
+      return {
+        ...state,
+        ...payload,
+      };
+    },
+  },
+};
diff --git a/admin-web/src/models/product/productSpuAddOrUpdate.js b/admin-web/src/models/product/productSpuAddOrUpdate.js
new file mode 100644
index 000000000..af7409534
--- /dev/null
+++ b/admin-web/src/models/product/productSpuAddOrUpdate.js
@@ -0,0 +1,94 @@
+import { message } from 'antd';
+import { productCategoryTree, productCategoryAdd, productCategoryUpdate, productCategoryUpdateStatus, productCategoryDelete } from '../../services/product';
+
+export default {
+  namespace: 'productSpuAddOrUpdate',
+
+  state: {
+    list: [],
+    attrTree: [{
+
+    }
+      // {
+      //   id: //
+      //   name: //
+      //   values: [{
+      //      id: //
+      //      name: //
+      //   }]
+      // }
+    ]
+  },
+
+  effects: {
+    // *add({ payload }, { call, put }) {
+    //   const { callback, body } = payload;
+    //   const response = yield call(productCategoryAdd, body);
+    //   if (callback) {
+    //     callback(response);
+    //   }
+    //   yield put({
+    //     type: 'tree',
+    //     payload: {},
+    //   });
+    // },
+    // *update({ payload }, { call, put }) {
+    //   const { callback, body } = payload;
+    //   const response = yield call(productCategoryUpdate, body);
+    //   if (callback) {
+    //     callback(response);
+    //   }
+    //   yield put({
+    //     type: 'tree',
+    //     payload: {},
+    //   });
+    // },
+    // *updateStatus({ payload }, { call, put }) {
+    //   const { callback, body } = payload;
+    //   const response = yield call(productCategoryUpdateStatus, body);
+    //   if (callback) {
+    //     callback(response);
+    //   }
+    //   yield put({
+    //     type: 'tree',
+    //     payload: {},
+    //   });
+    // },
+    // *delete({ payload }, { call, put }) {
+    //   const response = yield call(productCategoryDelete, payload);
+    //   message.info('删除成功!');
+    //   yield put({
+    //     type: 'tree',
+    //     payload: {},
+    //   });
+    // },
+    *addAttr({ payload }, { call, put }) {
+      // const { queryParams } = payload;
+      // const response = yield call(productCategoryTree, queryParams);
+      message.info('调试：添加规格成功!');
+      yield put({
+        type: 'addAttrSuccess',
+        payload: {
+          attrAdd: {},
+        },
+      });
+    },
+  },
+
+  reducers: {
+    addAttrSuccess(state, {payload}) {
+      // debugger;
+      console.log(state.attrTree);
+      state.attrTree.push(payload.attrAdd);
+      return {
+        ...state
+      }
+    },
+    treeSuccess(state, { payload }) {
+      return {
+        ...state,
+        ...payload,
+      };
+    },
+  },
+};
diff --git a/admin-web/src/pages/Product/ProductSpuAddOrUpdate.js b/admin-web/src/pages/Product/ProductSpuAddOrUpdate.js
index 4a3f26a02..77bf53911 100644
--- a/admin-web/src/pages/Product/ProductSpuAddOrUpdate.js
+++ b/admin-web/src/pages/Product/ProductSpuAddOrUpdate.js
@@ -3,19 +3,21 @@
 import React, { PureComponent, Fragment } from 'react';
 import { connect } from 'dva';
 import moment from 'moment';
-import {Card, Form, Input, Radio, Button, Table, Divider} from 'antd';
+import {Card, Form, Input, Radio, Button, Table, Select} from 'antd';
 import PageHeaderWrapper from '@/components/PageHeaderWrapper';
 
 import styles from './ProductSpuAddOrUpdate.less';
 
 const FormItem = Form.Item;
 const RadioGroup = Radio.Group;
+const Option = Select.Option;
 
 // roleList
-@connect(({ productSpuList, loading }) => ({
-  productSpuList,
-  list: productSpuList.list.spus,
-  loading: loading.models.productSpuList,
+@connect(({ productSpuList, productAttrList, productSpuAddOrUpdate, loading }) => ({
+  // list: productSpuList.list.spus,
+  // loading: loading.models.productSpuList,
+  allAttrTree: productAttrList.tree,
+  attrTree: productSpuAddOrUpdate.attrTree
 }))
 
 @Form.create()
@@ -31,7 +33,7 @@ class ProductSpuAddOrUpdate extends PureComponent {
   componentDidMount() {
     const { dispatch } = this.props;
     dispatch({
-      type: 'productSpuList/page',
+      type: 'productAttrList/tree',
       payload: {
         name: '',
         pageNo: 0,
@@ -53,9 +55,19 @@ class ProductSpuAddOrUpdate extends PureComponent {
     });
   }
 
+  handleAddAttr = e => {
+    // alert('你猜');
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'productSpuAddOrUpdate/addAttr',
+      payload: {
+      },
+    });
+  }
+
   render() {
     // debugger;
-    const { form, data } = this.props;
+    const { form, data, attrTree } = this.props;
 
     // 规格明细
     const columns = [
@@ -76,6 +88,28 @@ class ProductSpuAddOrUpdate extends PureComponent {
       }
     ];
 
+    // 添加规格
+    // debugger;
+    let attrTreeHTML = [];
+    if (attrTree && attrTree.length > 0) {
+      for (let i in attrTree) {
+        let attr = attrTree[i];
+        attr = <div>
+          <Select defaultValue="lucy" style={{ width: 120 }}>
+            {
+
+            }
+            <Option value="jack">Jack</Option>
+            <Option value="lucy">Lucy</Option>
+            <Option value="disabled" disabled>Disabled</Option>
+            <Option value="Yiminghe">yiminghe</Option>
+          </Select>
+        </div>;
+        attrTreeHTML.push(attr);
+        // debugger;
+      }
+    }
+
     return (
       <PageHeaderWrapper title="">
         <Card bordered={false}>
@@ -123,16 +157,19 @@ class ProductSpuAddOrUpdate extends PureComponent {
               {form.getFieldDecorator('visible', {
                 initialValue: 1, // TODO 修改
               })(
-                <Button>添加规格项目</Button>
-              )}
-            </FormItem>
-            <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="规格明细">
-              {form.getFieldDecorator('visible', {
-                initialValue: 1, // TODO 修改
-              })(
-                <Table defaultExpandAllRows={true} columns={columns} rowKey="id" />
+                <div>
+                  {attrTreeHTML}
+                  <Button onClick={this.handleAddAttr}>添加规格项目</Button>
+                </div>
               )}
             </FormItem>
+            {/*<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="规格明细">*/}
+              {/*{form.getFieldDecorator('visible', {*/}
+                {/*initialValue: 1, // TODO 修改*/}
+              {/*})(*/}
+                {/*<Table defaultExpandAllRows={true} columns={columns} rowKey="id" />*/}
+              {/*)}*/}
+            {/*</FormItem>*/}
           </Form>
         </Card>
       </PageHeaderWrapper>
diff --git a/admin-web/src/services/product.js b/admin-web/src/services/product.js
index 1981c18d3..c0a51274e 100644
--- a/admin-web/src/services/product.js
+++ b/admin-web/src/services/product.js
@@ -36,10 +36,18 @@ export async function productCategoryDelete(params) {
     });
 }
 
-// product spu
+// product spu + sku
 
 export async function productSpuPage(params) {
   return request(`/product-api/admins/spu/page?${stringify(params)}`, {
     method: 'GET',
   });
+}
+
+// product attr + attr value
+
+export async function productAttrTree(params) {
+  return request(`/product-api/admins/attr/tree?${stringify(params)}`, {
+    method: 'GET',
+  });
 }
\ No newline at end of file