合并

src/pages/channel/brokerList.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Input, Menu, Dropdown, Button, Icon, message, Table, Divider, Tag, Select } from 'antd';
+import { Input, Menu, Dropdown, Button, Icon, message, Table, Divider, Tag, Select, Form } from 'antd';
 import { FormattedMessage } from 'umi-plugin-react/locale';
 import channels from './channelList.less';
 import router from 'umi/router';
@@ -125,45 +125,64 @@ const header = props => {
       // eslint-disable-next-line react-hooks/rules-of-hooks
       getListBroker({ pageNum: pageNumber, pageSize: 10 })
     }
-    // 获取input的值
-    function onInputChangeName (e) {
-      // const InputValue = e.target.name.x.value;
-      setQueryData({ ...queryData, name: e.target.value })
-   }
+  //   // 获取input的值
+  //   function onInputChangeName (e) {
+  //     // const InputValue = e.target.name.x.value;
+  //     setQueryData({ ...queryData, name: e.target.value })
+  //  }
 
-   function onInputChangePhone (e) {
-    // const InputValue = e.target.name.x.value;
-    setQueryData({ ...queryData, phone: e.target.value })
-  }
-  function refurbishList () {
-    getListBroker({ pageNum: 1, pageSize: 10 })
-  }
+  //  function onInputChangePhone (e) {
+  //   // const InputValue = e.target.name.x.value;
+  //   setQueryData({ ...queryData, phone: e.target.value })
+  // }
+  // function refurbishList () {
+  //   getListBroker({ pageNum: 1, pageSize: 10 })
+  // }
   // eslint-disable-next-line no-undef
-  function handleClick() {
-    alert('11', this)
-    console.log('this is:', this);
+  // function handleClick() {
+  //   alert('11', this)
+  //   console.log('this is:', this);
+  // }
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    props.form.validateFields((err, values) => {
+      console.log('values', values)
+      if (!err) {
+        console.log('values', values)
+        getListBroker({ ...queryData, pageNum: 1, pageSize: 10, channelId: props.location.query.id, name: values.name, phone: values.phone })
+      }
+    });
   }
+
+  function handleReset() {
+    props.form.resetFields();
+    getListBroker({ pageNum: 1, pageSize: 10, channelId: props.location.query.id })
+  }
+  const { getFieldDecorator } = props.form;
 return (
   <>
-    <div className={ channels.searchBox }>
-      <div style = {{ marginLeft: '-5px' }}>
-        <span className={ channels.selectName }>姓名</span>
-        <Input onChange = { onInputChangeName } style ={{ width: 150 }} />
-        <span className={ channels.selectName }>电话</span>
-        <Input onChange = { onInputChangePhone } style ={{ width: 150 }} />
-      </div>
-      <div>
-      <Button type="primary" onClick={() => queryList() }>查询</Button>
-      {/* <Button onClick={() => refurbishList() }>重置</Button> */}
-    </div>
-    </div>
-    <Table style={{marginTop:'40px'}} dataSource={data.list} columns={columns} pagination={{ pageSize: 10, total: data.total, onChange }} rowKey="brokerList"/>
+   <Form layout="inline" onSubmit={handleSubmit}>
+   <Form.Item label="姓名">
+          {getFieldDecorator('name', {
+          })(<Input/>)}
+        </Form.Item>
+    <Form.Item label="电话">
+      {getFieldDecorator('phone', {
+      })(<Input/>)}
+    </Form.Item>
+    <Form.Item >
+   <Button type="primary" htmlType="submit" >保存</Button>
+     <Button onClick={handleReset} style={{ marginLeft: 18 }}>重置</Button>
+    </Form.Item>
+   </Form>
+    <Table style={{ marginTop: '40px' }} dataSource={data.list} columns={columns} pagination={{ pageSize: 10, total: data.total, onChange }} rowKey="brokerList"/>
   </>
 )
 }
-
+const WrappedNormalLoginForm = Form.create({ name: 'header' })(header);
 function handleMenuClick(e) {
   message.info('Click on menu item.');
   console.log('click', e);
 }
-export default header
+export default WrappedNormalLoginForm