index.tsx

import React from 'react';
import type {ReactNode} from 'react'
import type { TableProps as AntTableProps } from 'antd/lib/table/Table'
import type { FormInstance } from 'antd/lib/form'
import { Form, Table, Card, Row, Col } from "antd";

import { createSearchForm } from './createForm'
import type { CreateFormProps } from './createForm'
import styles from "./index.less";

interface AutoTableProps extends AntTableProps<any> {
  form?: FormInstance;
  onValuesChange?: (name: any) => void;
  formData?: CreateFormProps[];
  colSpan?: { md?: number, xxl?: number };
  tableExtra?: ReactNode;
  tableTitle?: ReactNode;
}

const Index: React.FC<AutoTableProps> = (props) => {
  const { form, onValuesChange, formData, tableExtra, tableTitle, ...tableProps } = props;
  // const [visible, setVisible] = useState<boolean>(false)

  return (
    <div className="pos_full_page">
      <Card bodyStyle={{ padding: 0 }}>
        <Row style={{ padding: 10 }} gutter={[8, 8]}>
          <Col md={{ span: 24 }} xxl={{ span: (formData?.length || 0) > 5 ? 24 : 20 }}>
            <Form form={form} onValuesChange={onValuesChange} className={styles.search_left}>
              <Row style={{ width: '100%' }} gutter={[8, 8]}>
                {formData?.map((item) => (
                  <Col md={{ span: 6 }} xxl={{ span: 4 }} key={item.name}>{
                    createSearchForm(item)
                  }</Col>
                ))}
              </Row>
            </Form>
          </Col>
          <Col
            md={{ span: 24 }}
            xxl={{ span: (formData?.length || 0) > 5 ? 24 : 4 }}
            className={(formData?.length || 0) > 5 ? 'pos_aline' : 'pos_end'}
          >
            {tableExtra}
          </Col>
        </Row>
      </Card>
      <Card style={{ height: '100%' }} size="small">
        {tableTitle}
        <Table
          size="small"
          rowKey={(record) => record.id}
          {...tableProps}
          scroll={{ x: (tableProps?.columns?.length || 0) * 200 }}
        />

      </Card>
    </div>
  );
};

export default Index;