router

config/config.js

@@ -30,11 +30,11 @@ const plugins = [
       // },
       pwa: pwa
         ? {
-            workboxPluginMode: 'InjectManifest',
-            workboxOptions: {
-              importWorkboxFrom: 'local',
-            },
-          }
+          workboxPluginMode: 'InjectManifest',
+          workboxOptions: {
+            importWorkboxFrom: 'local',
+          },
+        }
         : false, // default close dll, because issue https://github.com/ant-design/ant-design-pro/issues/4665
       // dll features https://webpack.js.org/plugins/dll-plugin/
       // dll: {
@@ -124,18 +124,6 @@ export default {
                 },
               ],
             },
-            // {
-            //   path: '/welcome2',
-            //   name: '首页2',
-            //   component: '../layouts/BlankLayout',
-            //   routes:[
-            //     {
-            //       path: '/welcome3',
-            //       name: '首页3',
-            //       component: './Welcome',
-            //     },
-            //   ]
-            // },
             {
               path: '/integralMall',
               name: '积分商城',
@@ -146,6 +134,11 @@ export default {
                   name: '商品列表',
                   component: './integralMall/GoodsList',
                 },
+                {
+                  path: '/integralMall/editGoods',
+                  name: '',
+                  component: './integralMall/editGoods',
+                },
               ],
             },
             {

src/pages/integralMall/GoodsList.jsx

@@ -1,72 +1,45 @@
 import React from 'react';
-import { Input, Menu, Dropdown, Button, Icon, message, Table, Divider, Tag, Pagination, Modal } from 'antd';
+import { Form, Input, Button, Icon, Select, message, Table, Divider, Tag, Pagination, Modal } from 'antd';
 import { FormattedMessage } from 'umi-plugin-react/locale';
 import styles from '../style/GoodsList.less';
+import router from 'umi/router';
 
-class StateDropdown extends React.Component {
-  state = {
-    goodState: '状态',
-  }
-
-  render() {
-
-    const menu = (
-      <Menu onClick={this.handleMenuClick}>
-        <Menu.Item key="1">
-          上架
-        </Menu.Item>
-        <Menu.Item key="2">
-          下架
-        </Menu.Item>
-      </Menu>
-    );
-    return (
-      < Dropdown overlay={menu} className={styles.searchItem} >
-        <Button>
-          {this.state.goodState} <Icon type="down" />
-        </Button>
-      </Dropdown>
-    )
-  }
-  handleMenuClick = e => {
-    this.setState({
-      goodState: e.item.props.children,
-    });
-
-  }
-};
-class App extends React.Component {
-  state = {
-    good: '请选择',
-  }
+const { Option } = Select;
+// 提交事件
+function handleSubmit(e, props) {
+  e.preventDefault();
+  props.form.validateFields((err, values) => {
+    if (!err) {
+      console.log('提交数据: ', values)
+    }
+  });
+}
+// Change 事件
+function handleSelectChange(props) {
+  console.log(props)
+}
 
-  render() {
+// 分页
+function onChange(pageNumber) {
+  console.log('Page: ', pageNumber);
+}
+// 跳转到编辑商品
+function toEditGoods() {
+  router.push({
+    pathname: '/integralMall/editGoods',
+    query: {
+      a: 'b',
+    },
+  });
+}
 
-    const menu = (
-      <Menu onClick={this.handleMenuClick}>
-        <Menu.Item key="1">
-          上架2
-        </Menu.Item>
-        <Menu.Item key="2">
-          下架2
-        </Menu.Item>
-      </Menu>
-    );
-    return (
-      < Dropdown overlay={menu} className={styles.searchItem} >
-        <Button>
-          {this.state.good} <Icon type="down" />
-        </Button>
-      </Dropdown>
-    )
-  }
-  handleMenuClick = e => {
-    this.setState({
-      good: e.item.props.children,
-    });
+/**
+ *
+ *
+ * @param {*} props
+ * @returns
+ */
 
-  }
-};
 const dataSource = [
   {
     key: '1',
@@ -147,20 +120,67 @@ function confirm() {
   });
 
 }
-export default () => (
-  <>
-    <div className={styles.searchBox}>
-      <Input placeholder="商品名称" className={styles.searchItem} />
-      <StateDropdown />
-      <App />
-      <Input placeholder="最小积分" className={styles.searchItem} />
-      <Input placeholder="最大积分" className={styles.searchItem} />
-      <Button type="primary" className={styles.searchBtn}>
-        查询
-      </Button>
-    </div>
-    <Button type="primary" className={styles.addBtn}>新增</Button>
-    <Table dataSource={dataSource} columns={columns} />
+function header(props) {
+  const { getFieldDecorator } = props.form
+  return (
+
+    <>
+      <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
+        <Form.Item>
+          {getFieldDecorator('name')(
+            <Input
+              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+              placeholder="商品名称"
+            />,
+          )}
+        </Form.Item>
+        <Form.Item>
+          {getFieldDecorator('goodState')(
+            <Select style={{ width: '180px' }} placeholder="状态" onChange={handleSelectChange}>
+              <Option value="1">上架</Option>
+              <Option value="0">下架</Option>
+            </Select>,
+          )}
+        </Form.Item>
+        <Form.Item>
+          {getFieldDecorator('isMain')(
+            <Select style={{ width: '180px' }} placeholder="所属项目" onChange={handleSelectChange}>
+              <Option value="1">首页推荐</Option>
+              <Option value="0">首页未推荐</Option>
+            </Select>,
+          )}
+        </Form.Item>
+        <Form.Item>
+          {getFieldDecorator('min')(
+            <Input
+              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+              placeholder="最小积分"
+            />,
+          )}
+        </Form.Item>
+        <Form.Item>
+          {getFieldDecorator('max')(
+            <Input
+              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+              placeholder="最大积分"
+            />,
+          )}
+        </Form.Item>
+        <Form.Item>
+          <Button type="primary" htmlType="submit" className={styles.searchBtn}>
+            搜索
+          </Button>
+        </Form.Item>
+      </Form>
+      <Button type="primary" className={styles.addBtn} onClick={toEditGoods}>新增</Button>
+      <Table dataSource={dataSource} columns={columns} />
+      {/* 分页 */
+      /* <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
+        <Pagination showQuickJumper defaultCurrent={1} total={500} onChange={onChange} />
+      </div> */}
+    </>
+  )
+}
+const WrappedHeader = Form.create({ name: 'header' })(header);
 
-  </>
-);
+export default WrappedHeader

src/pages/integralMall/editGoods.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Form, Input, Button, Icon, Select } from 'antd';
+import { FormattedMessage } from 'umi-plugin-react/locale';
+import styles from '../style/GoodsList.less';
+
+
+
+/**
+ *
+ *
+ * @param {*} props
+ * @returns
+ */
+
+
+function header(props) {
+  const { getFieldDecorator } = props.form
+  return (
+
+    <>
+     <div>编辑商品</div>
+    </>
+  )
+}
+const WrappedHeader = Form.create({ name: 'header' })(header);
+
+export default WrappedHeader

src/pages/style/GoodsList.less

@@ -1,20 +1,3 @@
-.searchBox {
-  font-size: 30px;
-  color: red;
-  display: flex;
-  display: flex;
-  justify-items: center;
-  align-items: center;
-  justify-content: space-between;
-  .searchItem {
-    min-width: 200px;
-    margin-right: 20px;
-    text-align: left;
-    .anticon-down {
-      float: right !important;
-    }
-  }
-}
 .addBtn {
   padding: 0 30px;
   height: 36px;