xs-manage/src/pages/integralMall/achieve.jsx

import React, { useState, useEffect } from 'react';
import { Form, Icon, Tabs, Table, Pagination, message, Modal } from 'antd';
import router from 'umi/router';
import moment from 'moment';
import AuthButton from '@/components/AuthButton';
import withActions from '@/components/ActionList';
import EditIcon from '@/components/EditIcon';
import apis from '../../services/apis';
import request from '../../utils/request';
import styles from '../style/GoodsList.less';
import Navigate from '@/components/Navigate';

const { TabPane } = Tabs;

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({ ...apis.integralMall.tdPointsRules, params: { ...params },}).then((data) => {
        console.log(data)
        setData(data)
    })
  }

  const changePageNum = (pageNumber) => {
    getList({ pageNum: pageNumber, pageSize: 10, type: carType })
  }


  // 提交事件
  const handleSubmit = (e, props) => {
    e.preventDefault();
    props.form.validateFields((err, values) => {
      if (!err) {
        getList({ pageNum: 1, pageSize: 10, ...values, type: carType})
      }
    });
  }

  const changeStatus = row => () => {
    const title = row.status === 1 ? '停用后用户操作将不再发放积分，请确认相关免责声明等文案已修订说明?':'启用后用户操作将发放积分'

    Modal.confirm({
      title,
      okText: '确认',
      cancelText: '取消',
      onOk() {
        request({ ...apis.integralMall.change, data: { ...row }}).then(data => {
          message.info('操作成功！')
          getList({ pageNum: 1, pageSize: 10, type: carType})
        })
      },
    });
  }

  const updateRules = (row) => () => {
    router.push({
      pathname: '/integralMall/editAchieve',
      query: {
        ruleId: row.ruleId
      },
    });
  }

const columns = [
    {
      title: '类型',
      dataIndex: 'ruleName',
      key: 'ruleName',
      align: 'center',
      render:  (x, row) => <Navigate onClick={updateRules(row)}>{row.ruleName}</Navigate>,
    },
    {
      title: '获取积分',
      dataIndex: 'pointsAmount',
      key: 'pointsAmount',
      align: 'center',
    },
    {
      title: '说明',
      dataIndex: 'remark',
      key: 'remark',
      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: withActions((x,row) => [
        <AuthButton name="admin.tdPointsRules.change.put" noRight={null}>
          <EditIcon type={row.status === 1 ? 'stop' : 'start'} text={row.status === 1 ? '停用' : '启用'} onClick={changeStatus(row)} />
        </AuthButton>,
        <AuthButton name="admin.tdPointsRules.put" noRight={null}>
          <EditIcon type="edit" text="编辑" onClick={updateRules(row)} />
        </AuthButton>,
      ]),
    },
  ];

  return (
    <>
      <Tabs onChange={callback} type="card">
        <TabPane tab="平台积分" key="platform">
          <Table rowKey="achieve" 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} current={data.current}/>
          </div>
        </TabPane>
        {/* <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 rowKey="achie" 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} current={data.current}/>
          </div>
        </TabPane> */}
      </Tabs>,
    </>
  )
}
const WrappedHeader = Form.create({ name: 'header' })(header);

export default WrappedHeader