machinery-admin/src/pages/Machinery/GIS/components/WorkListModel.jsx

import {
  Button,
  Modal,
  DatePicker,
} from 'antd';
import { useState, useRef } from 'react';
import PageTable from '@/components/PageTable';
import moment from 'moment';
import { history } from 'umi';
import { getJobList } from '@/services/job'

const formatterTime = (val) => {
  return val ? moment(val).format('YYYY-MM-DD HH:mm') : '';
};
const { RangePicker } = DatePicker;
export default (props) => {
  const { editModal, onCancel, machineryId } = props
  const actionRef = useRef();

  const [start, setStartDate] = useState()
  const [end, setEndDate] = useState()
  const handelChange = (date, dateStrings) => {
    setStartDate(dateStrings[0])
    setEndDate(dateStrings[1])
  }
  const Reset = () => {
    setStartDate()
    setEndDate()
    actionRef.current.reload();
  }
  const goDetail = (id) => {
    history.push(`./GIS/detail.jsx?id=` + id);
  }

  const columns = [
    {
      title: '订单号',
      dataIndex: 'orderNo',
      key: 'orderNo',
      search: false
    },
    {
      title: '农机手',
      dataIndex: 'workerName',
      key: 'workerName',
      search: false
    },
    {
      title: '作业时间',
      dataIndex: 'endDate',
      key: 'endDate',
      render: (t, render) => formatterTime(render.startDate) + ' ~ ' + formatterTime(render.endDate),
      renderFormItem: (_, record) => <RangePicker placeholder={['开始日期', '结束日期']} format='YYYY-MM-DD' onChange={handelChange} />
    },
    {
      title: '操作',
      valueType: 'option',
      render: (_, record) => [
        <Button
          style={{ padding: 0 }}
          type="link"
          key={1}
          onClick={() => goDetail(record.jobId)}
        >
          查看GIS
        </Button>
      ],
    }
  ]
  return (
    <Modal
      forceRender
      width='1024px'
      title='农机GIS列表'
      visible={editModal}
      onCancel={onCancel}
      destroyOnClose={true}
      footer={null}
    >
      <PageTable
        request={getJobList}
        actionRef={actionRef}
        columns={columns}
        rowKey="jobId"
        options={false}
        params={{ machineryId: machineryId, start, end }}
        onReset={Reset}
      />
    </Modal>
  )
}