积分商城

src/pages/integralMall/achieve.jsx

@@ -1,86 +1,134 @@
-import React from 'react';
-import { Form, Input, Button, Icon, Tabs, Row, Col, Table } from 'antd';
+import React, { useState, useEffect } from 'react';
+import { Form, Input, Button, Icon, Tabs, Row, Col, Table, Pagination, Alert, message } 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'
 
 const { TabPane } = Tabs;
-function callback(key) {
-  console.log(key);
+
+
+
+
+function header(props) {
+  const [ carType, setCarType ] = useState({})
+  const callback = (key) => {
+    setCarType(key)
+    getList({ pageNum: 1, pageSize: 10 , type: key});
+  }
+  
+// 获取初始化数据
+const [ data, setData ] = useState({})
+
+useEffect(() => {
+  getList({ pageNum: 1, pageSize: 10 , type: 'platform'});
+},[])
+
+// 查询列表
+const getList = (params) => {
+  request({
+      url: '/api/admin/tdPointsRules',
+      method: 'GET',
+      params: { ...params },
+  }).then((data) => {
+      console.log(data)
+      setData(data)
+  })
 }
 
-/**
- *
- *
- * @param {*} props
- * @returns
- */
-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 changePageNum = (pageNumber) => {
+  getList({ pageNum: pageNumber, pageSize: 10, type: carType })
+}
 
-const columns = [
-  {
-    title: '类型',
-    dataIndex: 'type',
-    key: 'type',
-    align: 'center',
-  },
-  {
-    title: '获取积分',
-    dataIndex: 'intergral',
-    key: 'intergral',
-    align: 'center',
-  },
-  {
-    title: '状态',
-    dataIndex: 'state',
-    key: 'state',
-    align: 'center',
-  },
-  {
-    title: '说明',
-    dataIndex: 'desc',
-    key: 'desc',
-    align: 'center',
-  },
-  {
-    title: '操作时间',
-    dataIndex: 'time',
-    key: 'time',
-    align: 'center',
-  },
-  {
-    title: '操作',
-    dataIndex: 'handle',
-    key: 'handle',
-    align: 'center',
-    render: () => <><span style={{ color: '#EF273A', marginRight: '20px' }} >停用<Icon type="stop" className={styles.shoppingCart} /></span><span style={{ color: '#EF273A', marginRight: '20px' }} >启用<Icon type="check-circle" className={styles.shoppingCart} /></span><span style={{ color: '#FF925C' }}>编辑<Icon type="form" className={styles.edit} /></span></>,
-  },
 
-];
+  // 提交事件
+  const handleSubmit = (e, props) => {
+    e.preventDefault();
+    props.form.validateFields((err, values) => {
+      if (!err) {
+        getList({ pageNum: 1, pageSize: 10, ...values, type: carType})
+      }
+    });
+  }
 
+  const changeStatus = (row) => () => {
+    request({
+      url: '/api/admin/tdPointsRules/change',
+      method: 'PUT',
+      data: { ...row },
+    }).then((data) => {
+      message.info('操作成功！')
+      getList({ pageNum: 1, pageSize: 10, type: carType})
+    })
+  }
+
+const columns = [
+    {
+      title: '类型',
+      dataIndex: 'ruleName',
+      key: 'ruleName',
+      align: 'center',
+    },
+    {
+      title: '获取积分',
+      dataIndex: 'pointsAmount',
+      key: 'pointsAmount',
+      align: 'center',
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      align: 'center',
+      render: (status) => <span>{status == 1 ? '启用' : '停用'}</span>
+    },
+    {
+      title: '操作时间',
+      dataIndex: 'updateDate',
+      key: 'updateDate',
+      align: 'center',
+      render: (updateDate) => <><span>{updateDate != null ? moment(updateDate).format('YYYY-MM-DD') : ''}</span></>
+    },
+    {
+      title: '操作',
+      dataIndex: 'handle',
+      key: 'handle',
+      align: 'center',
+      render: (x,row) => <><span style={{ color: '#EF273A', marginRight: '20px' }} onClick={changeStatus(row)}>{row.status == 1?'停用':'启用'}<Icon type="stop" className={styles.shoppingCart} /></span>
+                      <span style={{ color: '#FF925C' }}>{row.buildingId != null ? '编辑'`${<Icon type="form" className={styles.edit} />}` : ''}</span></>,
+    },
+  ];
 
-function header(props) {
   const { getFieldDecorator } = props.form
   return (
     <>
       <Tabs onChange={callback} type="card">
-        <TabPane tab="平台积分" key="1">
-          <Table style={{ marginTop: '40px' }} dataSource={dataSource} columns={columns} />
+        <TabPane tab="平台积分" key="platform">
+          <Table style={{ marginTop: '40px' }} 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>
         </TabPane>
-        <TabPane tab="项目积分" key="2">
-          <Table style={{ marginTop: '40px' }} dataSource={dataSource} columns={columns} />
+        <TabPane tab="项目积分" key="project">
+        <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
+            <Form.Item>
+              {getFieldDecorator('buildingId')(
+                <BuildSelect />,
+              )}
+            </Form.Item>
+             
+            <Form.Item>
+              <Button type="primary" htmlType="submit" className={styles.searchBtn}>
+                搜索
+              </Button>
+            </Form.Item>
+          </Form>
+          <Table style={{ marginTop: '40px' }} 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>
         </TabPane>
       </Tabs>,
     </>