渠道添加

src/pages/channel/addChannel.jsx

@@ -1,37 +1,64 @@
-import React from 'react';
-import { Form, Select, Input, Button } from 'antd';
+import React, { useState, useEffect } from 'react';
+import { Input, Menu, Dropdown, Button, Icon, message, Table, Divider, Tag, Select, Form, Alert } from 'antd';
+import { FormattedMessage } from 'umi-plugin-react/locale';
 import channels from './channelList.less';
+import router from 'umi/router';
+import request from '../../utils/request'
 
 const { TextArea } = Input;
 const { Option } = Select;
 
-class App extends React.Component {
-  handleSubmit = e => {
+const header = props => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [data, setData] = useState({ channelNmae: [], result: [] })
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+
+  // useEffect(() => {
+  //   addChannel({ pageNum: 1, pageSize: 10 })
+  // }, [])
+
+  function addChannel(params) {
+      request({
+        url: '/api/admin/channel',
+        method: 'POST',
+        data: { ...params },
+    // eslint-disable-next-line no-shadow
+    }).then(data => {
+        console.log(data)
+        setData(data)
+         // eslint-disable-next-line no-unused-expressions
+         router.go(-1)
+    })
+  }
+
+  function handleSubmit(e) {
     e.preventDefault();
-    this.props.form.validateFields((err, values) => {
-      console.log('Form.Item', values.note)
+    props.form.validateFields((err, values) => {
       if (!err) {
-       alert('Received values of form: ', values);
+        console.log('Received values of form: ', values);
+        // eslint-disable-next-line max-len
+        addChannel({ channelName: values.channelName, channelContact: values.channelContact, contactTel: values.contactTel })
       }
     });
-  };
+  }
+
+  const { getFieldDecorator } = props.form;
 
-  render() {
-    const { getFieldDecorator } = this.props.form;
-    return (
-      <Form labelCol={{ span: 7 }} wrapperCol={{ span: 12 }} onSubmit={this.handleSubmit}>
+  return (
+  <>
+        <Form labelCol={{ span: 7 }} wrapperCol={{ span: 12 }} onSubmit={handleSubmit}>
         <Form.Item label="渠道名称">
-          {getFieldDecorator('note', {
+          {getFieldDecorator('channelName', {
             rules: [{ required: true, message: '请输入渠道名称' }],
           })(<Input className={channels.inpuit} / >)}
         </Form.Item>
         <Form.Item label="联系人">
-          {getFieldDecorator('note2', {
+          {getFieldDecorator('channelContact', {
             rules: [{ required: true, message: ' 请输入联系人' }],
           })(<Input className={channels.inpuit} />)}
         </Form.Item>
         <Form.Item label="联系电话">
-          {getFieldDecorator('note3', {
+          {getFieldDecorator('contactTel', {
             rules: [{ required: true, message: '请输入联系电话' }],
           })(<Input className={channels.inpuit} />)}
         </Form.Item>
@@ -42,19 +69,14 @@ class App extends React.Component {
           <Button type="primary" htmlType="submit">
             保存
           </Button>
-          <Button className={channels.formButton} type="primary" htmlType="submit">
+          <Button className={channels.formButton} onClick = {() => router.go(-1)} type="primary" htmlType="submit">
             取消
           </Button>
         </Form.Item>
       </Form>
-    );
-  }
+  </>
+)
 }
 
-const WrappedApp = Form.create({ name: 'coordinated' })(App);
-
-export default () => (
-  <>
-    <WrappedApp />
-  </>
-);
+const WrappedNormalLoginForm = Form.create({ name: 'header' })(header);
+export default WrappedNormalLoginForm

src/pages/channel/channelList.jsx

@@ -6,27 +6,7 @@ import router from 'umi/router';
 import request from '../../utils/request'
 
 const { Option } = Select;
-function handleChange(value) {
-  console.log(`selected ${value}`);
-}
-
 
-const menu = (
-  <Menu onClick={handleMenuClick}>
-    <Menu.Item key="1">
-      <Icon type="user" />
-      1st menu item
-    </Menu.Item>
-    <Menu.Item key="2">
-      <Icon type="user" />
-      2nd menu item
-    </Menu.Item>
-    <Menu.Item key="3">
-      <Icon type="user" />
-      3rd item
-    </Menu.Item>
-  </Menu>
-);
 // const dataSource = [
 //   {
 //     key: '1',
@@ -117,45 +97,63 @@ function toEditGoods() {
 
 const header = props => {
   // eslint-disable-next-line react-hooks/rules-of-hooks
-  const [data, setData] = useState({ records: [] })
-//   const [page, changePage] = useState({})
+  const [data, setData] = useState({ channelNmae: [], result: [] })
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  // const [queryData, setQueryData] = useState({ pageNum: 1, pageSize: 10 })
+  //   const [page, changePage] = useState({})
   // eslint-disable-next-line react-hooks/rules-of-hooks
   useEffect(() => {
-    request({
-        url: '/api/admin/channel',
-        method: 'GET',
-        params: { pageNum: 1, pageSize: 10 },
-    // eslint-disable-next-line no-shadow
-    }).then(data => {
-        console.log(data)
-        setData(data)
-    })
+    getList({ pageNum: 1, pageSize: 10 })
   }, [])
 
+  function getList(params) {
+    request({
+      url: '/api/admin/channel',
+      method: 'GET',
+      params: { ...params },
+  // eslint-disable-next-line no-shadow
+  }).then(data => {
+      console.log(data)
+      setData(data)
+  })
+  }
+  // value 的值
+  function handleChange(value) {
+    // setQueryData({ ...queryData, channelId: value });
+    localStorage.setItem('value', value);
+  }
+  // 查询
+  function queryList() {
+    getList({ pageNum: 1, pageSize: 10, channelId: localStorage.getItem('value') })
+  }
+ // 重置
+ function reset() {
+  getList({ pageNum: 1, pageSize: 10 })
+ }
   return (
     <>
       <div className={channels.searchBox}>
         <dvi>
           <span className={channels.selectName}>渠道名称</span>
           <Select defaultValue="请选择" style={{ width: 180 }} onChange={handleChange}>
-              {data.records.map(Item =>
+          <option value="">全部</option>
+              {data.channelNmae.map(Item =>
                 <Option value={ Item.channelId }> { Item.channelName } </Option>,
               )}
               {/* {listItems} */}
           </Select>
 
         </dvi>
-        <Button className={channels.about} onClick={ header }>查询</Button>
+        <div >
+        <Button style ={{ backgroundColor: '#00bfff' } } onClick={() => queryList() }>查询</Button>
+        <Button onClick={() => reset() }>重置</Button>
+        </div>
       </div>
       <Button className={channels.addBtn} onClick={toEditGoods}>新增</Button>
-      <Table dataSource={data.records} columns={columns} />
+      <Table dataSource={data.result.records} columns={columns} />
   </>
   )
 }
 
-function handleMenuClick(e) {
-  message.info('Click on menu item.');
-  console.log('click', e);
-}
 
 export default header