exchange

src/pages/integralMall/exchangeRecords.jsx

@@ -1,246 +1,131 @@
-import React from 'react';
-import { Form, Input, Button, Icon, Select, DatePicker, Table } from 'antd';
+import React, { useState, useEffect } from 'react';
+import { Form, Input, Button, Icon, Select, DatePicker, Table, Pagination } from 'antd';
 import { FormattedMessage } from 'umi-plugin-react/locale';
 import styles from '../style/GoodsList.less';
+import router from 'umi/router';
+import moment from 'moment';
+import BuildSelect from '../../components/SelectButton/BuildSelect'
+
+import request from '../../utils/request'
 
 /**
   @param {*} props
   @returns
  */
 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)
-}
-// 兑换时间 组件
-class DateRange extends React.Component {
-  state = {
-    startValue: null,
-    endValue: null,
-    endOpen: false,
-  };
-
-  disabledStartDate = startValue => {
-    const { endValue } = this.state;
-    if (!startValue || !endValue) {
-      return false;
-    }
-    return startValue.valueOf() > endValue.valueOf();
-  };
-
-  disabledEndDate = endValue => {
-    const { startValue } = this.state;
-    if (!endValue || !startValue) {
-      return false;
-    }
-    return endValue.valueOf() <= startValue.valueOf();
-  };
-
-  onChange = (field, value) => {
-    this.setState({
-      [field]: value,
-    });
-
-  };
-  onStartChange = value => {
-    this.onChange('startValue', value);
-    console.log(value, "startValue")
-  };
+const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
 
-  onEndChange = value => {
-    this.onChange('endValue', value);
-    console.log(value, "endValue")
-  };
+function record(props) {
+  const { getFieldDecorator } = props.form
 
-  handleStartOpenChange = open => {
-    if (!open) {
-      this.setState({ endOpen: true });
-    }
-  };
-  handleEndOpenChange = open => {
-    this.setState({ endOpen: open });
-  };
-  render() {
-    const { startValue, endValue, endOpen } = this.state;
-    return (
-      <div>
-        <span style={{ marginRight: '14px' }}>兑换时间</span>
-        <DatePicker
-          disabledDate={this.disabledStartDate}
-          format="YYYY-MM-DD"
-          value={startValue}
-          placeholder="开始时间"
-          onChange={this.onStartChange}
-          onOpenChange={this.handleStartOpenChange}
-          style={{ marginRight: '14px' }}
-        />
-        <DatePicker
-          disabledDate={this.disabledEndDate}
-          format="YYYY-MM-DD"
-          value={endValue}
-          placeholder="结束时间"
-          onChange={this.onEndChange}
-          open={endOpen}
-          onOpenChange={this.handleEndOpenChange}
-        />
-      </div>
-    );
+  // 获取初始化数据
+  const [ data, setData ] = useState({})
+
+  useEffect(() => {
+    getList({ pageNum: 1, pageSize: 10 });
+  },[])
+
+  // 查询列表
+  const getList = (params) => {
+    request({
+        url: '/api/admin/taPointsExchange',
+        method: 'GET',
+        params: { ...params },
+    }).then((data) => {
+        setData(data)
+    })
   }
-}
-// 兑换时间 组件  end
-// 领取时间 组件 
-class DateRange2 extends React.Component {
-  state = {
-    startValue2: null,
-    endValue2: null,
-    endOpen2: false,
-  };
-
-  disabledStartDate2 = startValue2 => {
-    const { endValue2 } = this.state;
-    if (!startValue2 || !endValue2) {
-      return false;
-    }
-    return startValue2.valueOf() > endValue2.valueOf();
-  };
-
-  disabledEndDate2 = endValue2 => {
-    const { startValue2 } = this.state;
-    if (!endValue2 || !startValue2) {
-      return false;
-    }
-    return endValue2.valueOf() <= startValue2.valueOf();
-  };
-
-  onChange = (field, value) => {
-    this.setState({
-      [field]: value,
+  
+  // 提交事件
+  const handleSubmit = (e, props) => {
+    e.preventDefault();
+    props.form.validateFields((err, values) => {
+      if (!err) {
+        let {exchangeTime,receiveTime, ...submitValue} = values
+        if(null != exchangeTime && exchangeTime.length > 0){
+          const [startCreateDate, endCreateDate] = exchangeTime
+          submitValue.startCreateDate = moment(startCreateDate).format('YYYY-MM-DD');
+          submitValue.endCreateDate = moment(endCreateDate).format('YYYY-MM-DD');
+        }else{
+          submitValue.startCreateDate = null
+          submitValue.endCreateDate = null
+        }
+        
+        if(null != receiveTime && receiveTime.length > 0){
+          const [startVerifyDate, endVerifyDate] = receiveTime
+          submitValue.startVerifyDate = moment(startVerifyDate).format('YYYY-MM-DD');
+          submitValue.endVerifyDate = moment(endVerifyDate).format('YYYY-MM-DD');
+        }else{
+          submitValue.startVerifyDate = null
+          submitValue.endVerifyDate = null
+        }
+        
+        console.log(submitValue)
+        getList({ pageNum: 1, pageSize: 10, ...submitValue })
+      }
     });
-  };
-  onStartChange2 = value => {
-    this.onChange('startValue2', value);
-    console.log(value, "startValue2")
-  };
-
-  onEndChange2 = value => {
-    this.onChange('endValue2', value);
-    console.log(value, "endValue2")
-  };
-
-  handleStartOpenChange2 = open => {
-    if (!open) {
-      this.setState({ endOpen2: true });
-    }
-  };
-  handleEndOpenChange2 = open => {
-    this.setState({ endOpen2: open });
-  };
-  render() {
-    const { startValue2, endValue2, endOpen2 } = this.state;
-    return (
-      <div>
-        <span style={{ marginRight: '14px' }}>领取时间</span>
-        <DatePicker
-          disabledDate={this.disabledStartDate2}
-          format="YYYY-MM-DD"
-          value={startValue2}
-          placeholder="开始时间"
-          onChange={this.onStartChange2}
-          onOpenChange={this.handleStartOpenChange2}
-          style={{ marginRight: '14px' }}
-        />
-        <DatePicker
-          disabledDate={this.disabledEndDate2}
-          format="YYYY-MM-DD"
-          value={endValue2}
-          placeholder="结束时间"
-          onChange={this.onEndChange2}
-          open={endOpen2}
-          onOpenChange={this.handleEndOpenChange2}
-        />
-      </div>
-    );
   }
-}
-// 领取时间 组件  end
-const dataSource = [
-  {
-    key: '1',
-    img: 'http://img0.imgtn.bdimg.com/it/u=4246326797,2657995307&fm=26&gp=0.jpg',
-    name: '华为P30 Pro',
-  },
-  {
-    key: '2',
-    img: '',
-    name: '大米',
-  },
-];
-
-const columns = [
 
-  {
-    title: '用户姓名',
-    dataIndex: 'name',
-    key: 'name',
-    align: 'center',
-
-  },
-  {
-    title: '用户类型',
-    dataIndex: 'type',
-    key: 'type',
-    align: 'center',
-  },
-  {
-    title: '手机号',
-    dataIndex: 'phone',
-    key: 'phone',
-    align: 'center',
-  },
-  {
-    title: '商品图片',
-    dataIndex: 'img',
-    key: 'img',
-    align: 'center',
-    render: (text, record) => <img src={record.img} className={styles.touxiang} />,
-  },
-  {
-    title: '商品名称',
-    dataIndex: 'goodName',
-    key: 'goodName',
-    align: 'center',
-  },
-  {
-    title: '兑换时间',
-    dataIndex: 'time',
-    key: 'time',
-    align: 'center',
-  },
-  {
-    title: '领取时间',
-    dataIndex: 'time2',
-    key: 'time2',
-    align: 'center',
-  },
-  {
-    title: '状态',
-    dataIndex: 'state',
-    key: 'state',
-    align: 'center',
-  },
-];
+  const changePageNum = (pageNumber) => {
+    getList({ pageNum: pageNumber, pageSize: 10 })
+  }
 
-function record(props) {
-  const { getFieldDecorator } = props.form
+  const columns = [
+
+    {
+      title: '用户姓名',
+      dataIndex: 'personName',
+      key: 'personName',
+      align: 'center',
+    },
+    {
+      title: '用户类型',
+      dataIndex: 'personType',
+      key: 'personType',
+      align: 'center',
+      render: (personType)=> <><span>{personType === 'Realty Consultant' ? '置业顾问' : personType === 'Sales Executive' ? '销售主管' : personType === 'estate agent' ? '经纪人' : ''}</span></>
+    },
+    {
+      title: '手机号',
+      dataIndex: 'phone',
+      key: 'phone',
+      align: 'center',
+    },
+    {
+      title: '商品图片',
+      dataIndex: 'image',
+      key: 'image',
+      align: 'center',
+      render: (text, record) => <img src={record.image} className={styles.touxiang} />,
+    },
+    {
+      title: '商品名称',
+      dataIndex: 'targetName',
+      key: 'targetName',
+      align: 'center',
+    },
+    {
+      title: '兑换时间',
+      dataIndex: 'createDate',
+      key: 'createDate',
+      align: 'center',
+      render: (createDate) => <><span>{moment(createDate).format('YYYY-MM-DD HH:mm')}</span></>
+    },
+    {
+      title: '领取时间',
+      dataIndex: 'verifyDate',
+      key: 'verifyDate',
+      align: 'center',
+      render: (verifyDate) => <><span>{verifyDate != null ? moment(verifyDate).format('YYYY-MM-DD HH:mm') : ''}</span></>
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      align: 'center',
+      render: (status)=> <><span>{status == 1 ? '已领取' : '未领取'}</span></>
+    },
+  ];
 
   return (
 
@@ -248,7 +133,7 @@ function record(props) {
       <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
         <div style={{ display: 'flex' }}>
           <Form.Item>
-            {getFieldDecorator('name')(
+            {getFieldDecorator('personName')(
               <Input
                 prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
                 placeholder="用户姓名"
@@ -264,7 +149,7 @@ function record(props) {
             )}
           </Form.Item>
           <Form.Item>
-            {getFieldDecorator('goodName')(
+            {getFieldDecorator('targetName')(
               <Input
                 prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
                 placeholder="商品名称"
@@ -272,36 +157,43 @@ function record(props) {
             )}
           </Form.Item>
           <Form.Item>
-            {getFieldDecorator('type')(
-              <Select style={{ width: '220px' }} placeholder="用户类型" onChange={handleSelectChange}>
-                <Option value="2">置业顾问</Option>
-                <Option value="1">销售主管</Option>
-                <Option value="0">经纪人</Option>
+            {getFieldDecorator('personType')(
+              <Select style={{ width: '220px' }} placeholder="用户类型">
+                <Option value="Realty Consultant">置业顾问</Option>
+                <Option value="Sales Executive">销售主管</Option>
+                <Option value="estate agent">经纪人</Option>
               </Select>,
             )}
           </Form.Item>
           <Form.Item>
-            {getFieldDecorator('state')(
-              <Select style={{ width: '220px' }} placeholder="状态" onChange={handleSelectChange}>
+            {getFieldDecorator('status')(
+              <Select style={{ width: '220px' }} placeholder="状态">
                 <Option value="1">已领取</Option>
                 <Option value="0">未领取</Option>
               </Select>,
             )}
           </Form.Item>
+          <Form.Item>
+            {getFieldDecorator('exchangeTime')(
+              <RangePicker placeholder={['兑换开始时间','兑换结束时间']}/>
+            )}
+          </Form.Item>
+          <Form.Item>
+            {getFieldDecorator('receiveTime')(
+              <RangePicker placeholder={['领取开始时间','领取结束时间']}/>
+            )}
+          </Form.Item>
           <Form.Item>
             <Button type="primary" htmlType="submit" className={styles.searchBtn}>
               搜索
           </Button>
           </Form.Item>
         </div>
-        <Form.Item>
-          <DateRange />
-        </Form.Item>
-        <Form.Item>
-          <DateRange2 />
-        </Form.Item>
       </Form>
-      <Table style={{ marginTop: '40px' }} dataSource={dataSource} columns={columns} />
+      <Table dataSource={data.records} columns={columns} pagination={false} />
+      <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
+        <Pagination showQuickJumper defaultCurrent={1} total={data.total} onChange={changePageNum} />
+      </div>
     </>
   )
 }