Datepicker.RangePicker设置头部默认0:00:00 尾部默认23:59:59

 

SearchForm.tsx

 index.tsx

 

SearchForm.tsx

import React, { useEffect } from 'react';

import { useIntl } from 'umi';

import { Form, Input, Button, Row, Col, Select, DatePicker } from 'antd';

import { SearchOutlined } from '@ant-design/icons';

import moment from 'moment';

import { omit } from 'lodash';

interface SearchProps {

 onReset?: () => void;

 onSearch?: (value: any) => void;

 onAdd?: () => void;

}

const SearchForm: React.FC<SearchProps> = (props) => {

 const intl = useIntl();

 const [form] = Form.useForm();

 const { onReset, onSearch } = props;



 const mapToInterviewModel = (values: any) => {

  const { Operator, ModuleName, time } = values

  const [logStartTime, logEndTime] = time;

  return {

   ...omit(values, ['time']),

   logStartTime: moment(logStartTime).format('YYYY-MM-DD HH:mm:ss'),

   logEndTime: moment(logEndTime).format('YYYY-MM-DD HH:mm:ss'),

   Operator: Operator,

   ModuleName: ModuleName,

  };

 };



 return (

  <div

   style={{ background: '#fff', padding: '24px 24px 0 24px', fontSize: 16 }}

  >

   <Form

    form={form}

    onFinish={(values: any) => {

     if (typeof onSearch === 'function') {

      onSearch(mapToInterviewModel(values));

     }

    }}

   >

    <Row gutter={16}>

     <Col span={8}>

      <Form.Item

       name="time"

      >

       <DatePicker.RangePicker

        style={{ width: '100%' }}

        placeholder={['Start date', 'End date']}

        showTime={{

         hideDisabledOptions: true,

         defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],

        }}

        format="YYYY-MM-DD HH:mm:ss"

        separator="to"



       />

      </Form.Item>

     </Col>



     <Col span={4}>

      <Form.Item name="Operator">

       <Input placeholder="Operator" />

      </Form.Item>

     </Col>



     <Col span={4}>

      <Form.Item name="ModuleName">

       <Input placeholder="Module name" />

      </Form.Item>

     </Col>

     <Col span={6}>

      <Button

       style={{

        width: 88,

       }}

       htmlType="submit"

       type="primary"

      >

       Search

      </Button>

      <Button

       htmlType="button"

       type="ghost"

       style={{

        width: 88,

        border: '1px solid #4557ff',

        color: '#4557ff',

        marginLeft: 16,

       }}

       onClick={() => {

        form.resetFields();

        onReset?.();

       }}

      >

       Reset

      </Button>

     </Col>

    </Row>

   </Form>

  </div>

 );

};



export default SearchForm;



index.tsx

import React from 'react';

import { ConnectProps, connect, Dispatch, FormattedMessage } from 'umi';

import { message, Space, Table, Tooltip, } from 'antd';

import { BasicStateType } from '@/models/common.d';

import { Case } from '@typings/model';

import { ColumnsType } from 'antd/lib/table';

import styles from './index.less'

import moment from 'moment';

import SearchForm from './components/SearchForm';

import eyeImg from '@/assets/initiated/eye.png';

const DEFAULT_PAGE: number = 1;

const DEFAULT_PAGES: number = 10;

const DEFAULT_PAGE_SIZE: number = 10;

interface IndexPageState {

 page: number;

 pages: number;

 pageSize: number;

 queryPayload?: any;

 currentUser?: User;

}

interface IndexPageProps extends ConnectProps {

 Items: Syslog[];

 ItemsPerPage: number;

 TotalItems: number;

 TotalPages: number;

 CurrentPage: number;

 loading: boolean;

 dispatch: Dispatch;

}

class IndexPage extends React.Component<IndexPageProps, IndexPageState> {

 constructor(props: IndexPageProps) {

  super(props);

  this.state = {

   page: DEFAULT_PAGE,

   pages: DEFAULT_PAGES,

   pageSize: DEFAULT_PAGE_SIZE,

  }

 }



 componentDidMount = () => {

  this.onSearch()

 }

 onSearch = () => {

  const { page, pageSize, queryPayload } = this.state;

  console.log(queryPayload),



   this.props.dispatch({

    type: 'sysLogManagement/fetch',

    payload: {

     currenetPageIndex: page,

     pageSize: pageSize,

     filter: {

      StartDate: queryPayload?.logStartTime,

      EndDate:queryPayload?.logEndTime,

      Operator: queryPayload?.Operator,

      ModuleName: queryPayload?.ModuleName,

     },



    },

   });

 }



 onSearchFunc = () => {

  const { pages, pageSize, queryPayload } = this.state;

  this.props.dispatch({

   type: 'sysLogManagement/fetch',

   payload: {

    currenetPageIndex: pages,

    pageSize: pageSize,

    ...queryPayload,

   },

  });

 }



 handlePageChange = (page: number, pageSize: number): void => {

  this.setState({ page, pageSize }, () => {

   this.onSearch();

  });

 }

 columns: ColumnsType<Syslog> = [

  {

   title: 'Time',

   dataIndex: 'InputDate',

   key: 'Time',

   fixed: 'left',

  },

  {

   title: 'Operator',

   dataIndex: 'InputBy',

   key: 'Operator',

   // render: (value: any, record: Case, index: number) => '4h35min',

  },

  {

   title: 'Module name',

   dataIndex: 'ModuleName',

   key: 'Module',

   // render: (value: any, record: Case, index: number) => !value ? '/' : value.split('.')[0],

  },

  {

   title: 'Operation type',

   dataIndex: 'Type',

   key: 'type',

   // render: (value: any, record: Case, index: number) => !value ? '/' : moment(value).format('YYYY-MM-DD HH:mm:ss'),

  },

  // {

  //  title: 'Operation content',

  //  dataIndex: 'Description',

  //  key: 'Description',

  //  // render: (value: any, record: Case, index: number) => !value ? '/' : moment(value).format('YYYY-MM-DD HH:mm:ss'),

  // },

  {

   title: 'IP address',

   dataIndex: 'IP',

   key: 'address',

   // render: (value: any, record: Case, index: number) => !value ? '/' : moment(value).format('YYYY-MM-DD HH:mm:ss'),

  },

 ]

 render() {

  const { Items,

   ItemsPerPage,

   TotalItems,

   TotalPages,

   loading,

   CurrentPage, } = this.props;

  return (

   <section className={styles.log_list}>

    <SearchForm

     onReset={() => {

      location.reload()

     }}

     onSearch={(values) => {

      this.setState(

       {

        // queryPayload: {

        //  filter: {

        //   ...values,

        //  },

        // },

        page: DEFAULT_PAGE,

        queryPayload: values,

       },

       () => {

        this.onSearch()

       })

     }} />

    <div className={styles.log_list_content}>



     <div className="table_content">

      <Table<Syslog>

       rowKey={(record) => record.Id}

       columns={this.columns}

       dataSource={Items}

       loading={loading}

       pagination={{

        total: TotalItems,

        current: CurrentPage,

        pageSize: ItemsPerPage,

        // showTotal: (total) => (

        //  <FormattedMessage

        //   id={'table.pagination.total'}

        //   defaultMessage={`Total ${total} items`}

        //   values={{ total }}

        //  />

        // ),

       }}

       onChange={(pagination) => {

        const { current, pageSize } = pagination;

        this.handlePageChange(

         current ?? DEFAULT_PAGE,

         pageSize ?? DEFAULT_PAGE_SIZE

        );

       }}

      />

     </div>

    </div>

   </section>

  )

 }

}



export default connect(

 ({

  sysLogManagement

 }: {

  sysLogManagement: BasicStateType<Syslog>;

 }) => ({

  ...sysLogManagement,

 })

)(IndexPage);