规格页面，列表

admin-web/config/router.config.js

@@ -125,6 +125,11 @@ export default [
             name: 'product-brand-list',
             component: './Product/ProductBrandList',
           },
+          {
+            path: '/product/product-attr-list',
+            name: 'product-attr-list',
+            component: './Product/ProductAttrList',
+          },
         ],
       },
       // promotion

admin-web/src/locales/zh-CN/menu.js

@@ -52,6 +52,8 @@ export default {
   'menu.product.product-spu-update': '商品编辑',
   'menu.product.product-category-list': '商品分类',
   'menu.product.product-brand-list': '商品品牌',
+  'menu.product.product-attr-list': '规格管理',
+
   // 订单
   'menu.order': '订单管理',
   'menu.order.order-list': '订单管理',

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

@@ -1,11 +1,14 @@
 import { message } from 'antd';
-import { productAttrTree, productAttrValueAdd } from '../../services/product';
+import { productAttrTree, productAttrValueAdd, productAttrPage } from '../../services/product';
+import PaginationHelper from '../../../helpers/PaginationHelper';
 
 export default {
   namespace: 'productAttrList',
 
   state: {
     list: [],
+    attrData: [],
+    pagination: PaginationHelper.defaultPaginationConfig,
   },
 
   effects: {
@@ -51,6 +54,21 @@ export default {
     //   });
     // },
 
+    *page({ payload }, { call, put }) {
+      const result = yield call(productAttrPage, payload);
+      let attrData = {};
+      if (result.code === 0) {
+        attrData = result.data;
+      }
+      yield put({
+        type: 'save',
+        payload: {
+          attrData,
+          pagination: PaginationHelper.formatPagination(attrData, payload),
+        },
+      });
+    },
+
     *tree({ payload }, { call, put }) {
       const { queryParams } = payload;
       const response = yield call(productAttrTree, queryParams);
@@ -84,10 +102,16 @@ export default {
           callback(response.data);
         }
       }
-    }
+    },
   },
 
   reducers: {
+    save(state, action) {
+      return {
+        ...state,
+        ...action.payload,
+      };
+    },
     treeSuccess(state, { payload }) {
       return {
         ...state,

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

@@ -0,0 +1,158 @@
+import React, { PureComponent, Fragment, Component } from 'react';
+import { Form, Card, Table, Button, Divider, Modal, Input } from 'antd';
+import moment from 'moment';
+import { connect } from 'dva';
+import PageHeaderWrapper from '@/components/PageHeaderWrapper';
+import PaginationHelper from '../../../helpers/PaginationHelper';
+import styles from './ProductAttrList.less';
+
+const FormItem = Form.Item;
+const CreateForm = Form.create()(props => {
+  const { modalVisible, form, handleAdd, handleModalVisible, modalType, initValues } = props;
+
+  const okHandle = () => {
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+      let pid = fieldsValue.pid;
+      if (fieldsValue.pid) {
+        pid = pid.split('-')[1];
+        fieldsValue.pid = pid;
+      }
+      form.resetFields();
+      handleAdd({
+        fields: fieldsValue,
+        modalType,
+        initValues,
+      });
+    });
+  };
+
+  const selectStyle = {
+    width: 200,
+  };
+
+  function onTypeChange(event) {
+    initValues.type = parseInt(event.target.value);
+  }
+
+  const title = modalType === 'add' ? '添加规格' : '编辑规格';
+  const okText = modalType === 'add' ? '添加' : '编辑';
+  return (
+    <Modal
+      destroyOnClose
+      title={title}
+      visible={modalVisible}
+      onOk={okHandle}
+      okText={okText}
+      onCancel={() => handleModalVisible()}
+    >
+      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="规格名称">
+        {form.getFieldDecorator('name', {
+          initialValue: initValues ? initValues.name : null,
+          rules: [{ required: true, message: '请输入规格名称！', min: 2 }],
+        })(<Input placeholder="规格名称" />)}
+      </FormItem>
+    </Modal>
+  );
+});
+
+@connect(({ productAttrList, loading }) => ({
+  productAttrList,
+  attrData: productAttrList.attrData,
+  loading: loading.models.productAttrList,
+}))
+@Form.create()
+export default class ProductAttrList extends PureComponent {
+  state = {
+    modalVisible: false,
+    modalType: 'add', //add or update
+    initValues: {},
+  };
+
+  componentDidMount() {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'productAttrList/page',
+      payload: {
+        ...PaginationHelper.defaultPayload,
+      },
+    });
+  }
+
+  handleModalVisible = (flag, modalType, initValues) => {
+    this.setState({
+      modalVisible: !!flag,
+      initValues: initValues || {},
+      modalType: modalType || 'add',
+    });
+  };
+
+  render() {
+    const { attrData, productAttrList, loading, pagination } = this.props;
+    const columns = [
+      {
+        title: '规格名称',
+        dataIndex: 'name',
+      },
+      {
+        title: '状态',
+        dataIndex: 'status',
+        render: val => <span>{val === 1 ? '开启' : '禁用'}</span>,
+      },
+      {
+        title: '创建时间',
+        dataIndex: 'createTime',
+        sorter: true,
+        render: val => <span>{moment(val).format('YYYY-MM-DD')}</span>,
+      },
+      {
+        title: '操作',
+        render: (text, record) => (
+          <Fragment>
+            <a onClick={() => this.handleModalVisible(true, 'update', record)}>编辑</a>
+            <Divider type="vertical" />
+            <a className={styles.tableDelete} onClick={() => this.handleDelete(record)}>
+              删除
+            </a>
+          </Fragment>
+        ),
+      },
+    ];
+
+    const { modalVisible, modalType, initValues } = this.state;
+
+    const parentMethods = {
+      handleAdd: this.handleAdd,
+      handleModalVisible: this.handleModalVisible,
+      modalType,
+      initValues,
+    };
+
+    return (
+      <PageHeaderWrapper>
+        <Card>
+          <div className={styles.tableList}>
+            <div className={styles.tableListOperator}>
+              <Button
+                icon="plus"
+                type="primary"
+                onClick={() => this.handleModalVisible(true, 'add', {})}
+              >
+                新建规格
+              </Button>
+            </div>
+          </div>
+          <Table
+            defaultExpandAllRows={true}
+            columns={columns}
+            dataSource={attrData.attrs ? attrData.attrs : []}
+            rowKey="id"
+            loading={loading}
+            pagination={pagination}
+          />
+        </Card>
+        {modalVisible ? <CreateForm {...parentMethods} modalVisible={modalVisible} /> : null}
+      </PageHeaderWrapper>
+    );
+  }
+}

admin-web/src/pages/Product/ProductAttrList.less

@@ -0,0 +1,11 @@
+@import '~antd/lib/style/themes/default.less';
+@import '~@/utils/utils.less';
+
+.tableList {
+  .tableListOperator {
+    margin-bottom: 16px;
+    button {
+      margin-right: 8px;
+    }
+  }
+}

admin-web/src/services/product.js

@@ -85,6 +85,12 @@ export async function productSpuInfo(params) {
 
 // product attr + attr value
 
+export async function productAttrPage(params) {
+  return request(`/product-api/admins/attr/page?${stringify(params)}`, {
+    method: 'GET',
+  });
+}
+
 export async function productAttrTree(params) {
   return request(`/product-api/admins/attr/tree?${stringify(params)}`, {
     method: 'GET',
@@ -116,12 +122,12 @@ export async function productBrandUpdate(params) {
 
 export async function productBrandGet(params) {
   return request(`/product-api/admins/brand/get?${stringify(params)}`, {
-    method: 'GET'
+    method: 'GET',
   });
 }
 
 export async function productBrandPage(params) {
   return request(`/product-api/admins/brand/page?${stringify(params)}`, {
-    method: 'GET'
+    method: 'GET',
   });
 }

product/product-service-impl/src/main/java/cn/iocoder/mall/product/service/ProductAttrServiceImpl.java

@@ -72,7 +72,7 @@ public class ProductAttrServiceImpl implements ProductAttrService {
     public ProductAttrPageBO getProductAttrPage(ProductAttrPageDTO productAttrPageDTO) {
         ProductAttrPageBO productAttrPageBO = new ProductAttrPageBO();
         // 查询分页数据
-        int offset = productAttrPageDTO.getPageNo() * productAttrPageDTO.getPageSize();
+        int offset = (productAttrPageDTO.getPageNo()-1) * productAttrPageDTO.getPageSize();
         productAttrPageBO.setAttrs(ProductAttrConvert.INSTANCE.convert(productAttrMapper.selectListByNameLike(productAttrPageDTO.getName(),
                 offset, productAttrPageDTO.getPageSize())));
         // 查询分页总数

system/system-application/src/main/java/cn/iocoder/mall/admin/application/controller/admins/AdminController.java

@@ -91,7 +91,7 @@ public class AdminController {
     }
 
     // =========== 管理员管理 API ===========
-
+    //TODO 目前需要增加搜索所有子部门的用户
     @GetMapping("/page")
     @RequiresPermissions("system.admin.page")
     @ApiOperation(value = "管理员分页")

system/system-application/src/main/java/cn/iocoder/mall/admin/application/controller/admins/DeptmentController.java

@@ -49,7 +49,7 @@ public class DeptmentController {
     public CommonResult<List<DeptmentVO>> treeAll(){
         List<DeptmentBO> list = deptmentService.getAllDeptments();
         List<DeptmentVO> voList = DeptmentConvert.INSTANCE.convert(list);
-        Map<Integer, DeptmentVO> nodeMap = calaNodeMap(voList);
+        Map<Integer, DeptmentVO> nodeMap = calcNodeMap(voList);
         // 获得到所有的根节点
         List<DeptmentVO> rootNodes = nodeMap.values().stream()
                 .filter(node -> node.getPid().equals(ResourceConstants.PID_ROOT))
@@ -64,7 +64,7 @@ public class DeptmentController {
         PageResult<DeptmentVO> voPageResult = DeptmentConvert.INSTANCE.convert(pageResult);
         List<DeptmentBO> list = deptmentService.getAllDeptments();
         List<DeptmentVO> voList = DeptmentConvert.INSTANCE.convert(list);
-        Map<Integer, DeptmentVO> nodeMap = calaNodeMap(voList);
+        Map<Integer, DeptmentVO> nodeMap = calcNodeMap(voList);
         voPageResult.getList().forEach(d->{
             d.setChildren(nodeMap.get(d.getId()).getChildren());
         });
@@ -97,7 +97,7 @@ public class DeptmentController {
         ));
     }
 
-    private Map<Integer, DeptmentVO> calaNodeMap(List<DeptmentVO> voList){
+    private Map<Integer, DeptmentVO> calcNodeMap(List<DeptmentVO> voList){
         Map<Integer, DeptmentVO> nodeMap = voList.stream().collect(Collectors.toMap(e->e.getId(), e->e));
 
         nodeMap.values().stream()