estateagents-admin-manager/src/pages/activity/drainage/DrainageList.jsx

import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Icon, Select, message, Table, Divider, Tag, Pagination, Modal, DatePicker } from 'antd';
import router from 'umi/router';
import { FormattedMessage } from 'umi-plugin-react/locale';
import styles from '../../style/GoodsList.less';
import apis from '../../../services/apis';
import request from '../../../utils/request';
import XForm, { FieldTypes } from '../../../components/XForm';
import moment from 'moment';
import AuthButton from '../../../components/AuthButton';

const toEditList = (row) => () => {
  router.push({
    pathname: '/activity/drainage/Detail',
    query: {
      drainageId: row.drainageId,
      name: row.name,
    },
  });
}

const header = (props) => {
  // const [data, setData] = useState({ data: [] })
  const [datas, setDatas] = useState([])//表格数据
  const [date, setDate] = useState({})
  const [formsdate, setFormsDate] = useState({})
  //   const [page, changePage] = useState({})
  useEffect(() => {

    gettaDrainage({ pageNum: 1, pageSize: 10 })
    setDate({
      ModalText: 'Content of the modal',
      visible: false,
      confirmLoading: false,
    })

  }, [])

  function gettaDrainage (params) {
    request({ ...apis.activity.taDrainage, params: params }).then((data) => {
      setDatas(data)
      console.log(data.records, '_213_')
    }).catch((err) => {
      console.log(err)
      message.info(err.msg || err.message)
    })
  }

  const deleteDrainage = (drainageIid) => () => {
    Modal.confirm({
      title: '确认删除该引流？',
      okText: '确认',
      cancelText: '取消',
      onOk () {
        request({ ...apis.activity.deletetaDrainage, urlData: { id: drainageIid }, }).then((data) => {
          message.info('操作成功！')
          gettaDrainage({ pageNum: 1, pageSize: 10 })
        }).catch((err) => {
          console.log('111111', err)
          // message.info(err.msg || err.message)
        })
      }
    });
  }

  const columns = [
    {
      title: 'H5项目编号',
      dataIndex: 'drainageId',
      key: 'drainageId',
      align: 'center',
    },
    {
      title: 'H5项目名称',
      dataIndex: 'name',
      key: 'name',
      align: 'center',
      render: (text, datas) => <>

        <div style={{ color: '#66B3FF' }} onClick={() => addshowModal(datas)} >{datas.name}</div>

      </>
    },
    {
      title: 'appid',
      dataIndex: 'appid',
      key: 'appid',
      align: 'center',
      // render: (text, datas) => <div style={ { color: '#66B3FF' } } onClick= {() => addshowModal(datas)} >{ datas.name }</div>, 
    },
    {
      title: 'secret',
      dataIndex: 'appSecret',
      key: 'appSecret',
      align: 'center',
      // render: (text, datas) => <div style={ { color: '#66B3FF' } } onClick= {() => addshowModal(datas)} >{ datas.name }</div>,
    },
    {
      title: '新建时间',
      dataIndex: 'createDate',
      key: 'createDate',
      align: 'center',
      render: (x, row) => (
        <>
          <span>{row.createDate && moment(row.createDate).format('YYYY-MM-DD hh:mm:ss')}</span>
        </>
      ),
    },
    {
      title: '截止时间',
      dataIndex: 'endDate',
      key: 'endDate',
      align: 'center',
      render: (x, row) => (
        <>
          <span>{row.endDate && moment(row.endDate).format('YYYY-MM-DD hh:mm:ss')}</span>
        </>
      ),
    },
    {
      title: '参与数',
      dataIndex: 'enlistNum',
      key: 'enlistNum',
      align: 'center',
      // render:
    },
    {
      title: '操作',
      key: 'action',
      align: 'center',
      render: (text, datas) => (
        <>
          <AuthButton name="admin.customer.recommend.edit.id.put" noRight={null}>
            <span style={{ right: '20px', top: '20px', fontSize: ' 0.106rem', zIndex: 1, color: '#FF7E48', cursor: 'pointer' }} onClick={toEditList(datas)}>
              查看详情
            </span>
          </AuthButton>
          <AuthButton name="admin.taDrainage.id.delete" noRight={null}>
            <span style={{ right: '20px', bottom: ' 10px', fontSize: ' 0.106rem', color: '#FF7E48', cursor: 'pointer', marginLeft: 20 }} onClick={deleteDrainage(datas.drainageId)}>
              删除
            </span>
          </AuthButton >
        </>
      ),
    },
  ];
  const Forms = props => {

    console.log(date, '---------------')
    console.log(formsdate.name, '---------------')
    console.log(formsdate, '22222222')


    const { formsDate } = props
    useEffect(() => {
      if (formsDate) {
        props.form.setFieldsValue({ name: formsdate.name, endDate: formsdate.endDate ? moment(formsdate.endDate, 'YYYY-MM-DD HH:mm') : null })
      }
    }, [formsDate])


    const handleSubmit = e => {
      e.preventDefault();
      props.form.validateFields((err, values) => {
        if (!err) {
          if (formsDate.drainageId) {
            // { ...apis.activity.deletetaDrainage,urlData: { id: drainageIid }, }
            request({ ...apis.activity.updatetaDrainage, urlData: { id: formsDate.drainageId }, data: values }).then((data) => {
              message.info('操作成功！')
              gettaDrainage({ pageNum: 1, pageSize: 10 })
              setDate({
                visible: false,
              });
            }).catch((err) => {
              console.log('111111', err)
              message.info(err.msg || err.message)
            })

          } else {

            request({ ...apis.activity.addtaDrainage, data: values }).then((data) => {
              message.info("操作成功")
              gettaDrainage({ pageNum: 1, pageSize: 10 })
              setDate({
                visible: false,
              });
            }).catch((err) => {
              message.error(err.msg || err.message)
            })
          }
        }
      });
    }

    const handleCancel = val => {
      setDate({
        visible: false,
      });
    }

    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 16,
          offset: 8,
        },
      },
    };

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };

    const { getFieldDecorator } = props.form;
    {/* <XForm onSubmit={handleSubmit} onCancel={handleCancel} fields={fields} ></XForm> */ }

    return <Form {...formItemLayout} onSubmit={handleSubmit}>


      <Form.Item label="H5项目名称">
        {getFieldDecorator('name')(
          <Input
            placeholder="请输入H5项目名称"
          />,
        )}
      </Form.Item>
      <Form.Item label="截止时间">
        {getFieldDecorator('endDate')(
          <DatePicker
          // prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
          // placeholder={formsdate.endDate}
          // value= formsdate.endDate ? moment(formsdate.endDate, 'YYYY-MM-DD HH:mm') : null
          />,
        )}
      </Form.Item>
      <Form.Item {...tailFormItemLayout}>
        <AuthButton name="admin.taDrainage.id.put" noRight={null}>
          <Button type="primary" htmlType="submit" className={styles.searchBtn} onClick>
            确定
    </Button>
        </AuthButton>
        <Button style={{ marginLeft: 8 }} onClick={handleCancel}>
          取消
      </Button>
      </Form.Item>
    </Form>

  }
  const Formss = Form.create({ name: 'Forms' })(Forms);



  //重置搜索
  function handleReset () {
    props.form.resetFields();
    gettaDrainage({ pageNum: 1, pageSize: 10 })
  }



  function addshowModal (datas) {

    // alert(datas.drainageId)
    console.log(datas, '22222222')
    setFormsDate({
      drainageId: datas.drainageId,
      name: datas.name,
      endDate: datas.endDate,
    })
    console.log(formsdate, '22222222')
    setDate({
      visible: true,
      title: "修改H5项目"
    });


    console.log('form :', props.form)


  };
  function showModal () {
    setFormsDate({
      drainageId: '',
      name: '',
      endDate: '',
    })
    setDate({
      visible: true,
      title: '新建H5项目'
    });
  };
  const changePageNum = pageNumber => {
    gettaDrainage({ pageNum: pageNumber, pageSize: 10 })
  }

  function handleOk () {


    setDate({
      ModalText: 'The modal will be closed after two seconds',
      confirmLoading: true,
    });
    function setTimeout () {
      setDate({
        visible: false,
        confirmLoading: false,
      });
    };
  };

  function handleCancel () {
    console.log('Clicked cancel button');
    setDate({
      visible: false,
    });
  };
  function handleSubmit (e) {
    e.preventDefault();
    props.form.validateFields((err, values) => {
      console.log('values', values)
      if (!err) {
        console.log('values', values)
        gettaDrainage({ pageNum: 1, pageSize: 10, ...values })
      }
    });
  }

  const { getFieldDecorator } = props.form;
  const { visible, confirmLoading, ModalText, title } = date;
  return (
    <>
      <div>
        <Form layout="inline" onSubmit={handleSubmit}>
          <Form.Item>
            {getFieldDecorator('drainageId')(
              <Input
                // prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
                placeholder="H5项目编号"
              />,
              // {getFieldDecorator('name', {
              // })(<Input/>)}
            )}
          </Form.Item>
          <Form.Item>
            {getFieldDecorator('name')(
              <Input
                // prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
                placeholder="H5项目名称"
              />,
            )}
          </Form.Item>
          <Form.Item >
            <Button type="primary" htmlType="submit" className={styles.searchBtn} onClick>
              搜索
          </Button>
            <Button style={{ marginLeft: 8 }} onClick={handleReset}>
              重置
            </Button>
          </Form.Item>
        </Form>
        <AuthButton name="admin.taDrainage.add.post" noRight={null}>
          <Button type="danger" className={styles.addBtn} onClick={showModal}>新增</Button>
        </AuthButton>
        <Modal
          title={title}

          visible={visible}
          //  onOk={handleOk}
          confirmLoading={confirmLoading}
          onCancel={handleCancel}
          footer={null}
        >
          <Formss formsDate={formsdate} />
        </Modal>
        <Table columns={columns} dataSource={datas.records} pagination={false} rowKey="drainageList" />
        <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
          <Pagination showQuickJumper defaultCurrent={1} total={datas.total} onChange={(e) => changePageNum(e)} current={datas.current} />
        </div>
      </div>
    </>
  )
}
const WrappedHeader = Form.create({ name: 'header' })(header);

export default WrappedHeader