ProTable 页面模板
最基础的ProTable页面模板，快速构建主页。
jsx
import React, { useState, useRef } from 'react';
import ProTable from '@ant-design/pro-table';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { handleTableResponse } from '@/utils/utils';
import { queryPageList } from './service';

const Index = () => {
  const formRef = useRef();
  const actionRef = useRef();

  

  const columns = [];

  return (
    <>
      <PageHeaderWrapper>
        <ProTable
        headerTitle=""
        toolBarRender={() => [
        ]}
        actionRef={actionRef}
        formRef={formRef}
        columns={columns}
        rowKey="id"
        defaultSize="small"
        search={{ labelWidth: 'auto' }}
        beforeSearchSubmit={(params) => {
          return {
            searchObject: params,
          };
        }}
        request={async (params) => {
          const res = await queryPageList(params);
          return handleTableResponse({ actionRef, res });
        }}
        pagination={{
          defaultPageSize: 10,
          showSizeChanger: true,
        }}
        form={{
          ignoreRules: false,
          validateTrigger: ['onBlur', 'onChange'],
        }}
      />
    </PageHeaderWrapper>
    
    </>
  );
};

export default Index;
更新时间：2024-12-04
Modal 弹窗模板
最基础的Modal弹窗模板，内容自定义。

1. 导入语句

jsx
import NewModal from './components/NewModal';

2. 状态定义

jsx
const [newModalOpen, setNewModalOpen] = useState(false);
const [newModalValue, setNewModalValue] = useState({});

const newModalCancel = () => {
  setNewModalOpen(false);
};

const handleNewModal = (record = {}) => {
  setNewModalValue(record);
  setNewModalOpen(true);
};

3. 组件渲染

jsx
{newModalOpen && (
  <NewModal
    newModalOpen={newModalOpen}
    newModalCancel={newModalCancel}
    newModalValue={newModalValue}
  />
)}

4. Modal组件

jsx
import React, { useEffect, useState } from 'react';
import { Modal, Form, message, Spin } from 'antd';


const NewModal = (props) => {
  const { newModalOpen, newModalCancel,newModalValue  } = props;
  const [loading, setLoading] = useState(false);

  return (
    <Modal
      width={600}
      destroyOnClose
      maskClosable={false}
      okButtonProps={{ loading }}
      title={'弹窗'}
      open={newModalOpen}
      onCancel={newModalCancel}
      onOk={async () => {
        newModalCancel();
      }}
      okText="确定"
      cancelText="取消"
    >
    </Modal>
  );
};

export default NewModal;
更新时间：2024-12-04
Drawer 抽屉模板
最基础的Drawer抽屉模板，内容自定义。

1. 导入语句

jsx
import NewDrawer from './components/NewDrawer';

2. 状态定义

jsx
const [newDrawerOpen, setNewDrawerOpen] = useState(false);
const [newDrawerValue, setNewDrawerValue] = useState({});

const newDrawerCancel = () => {
  setNewDrawerOpen(false);
};

const handleNewDrawer = (record = {}) => {
  setNewDrawerValue(record);
  setNewDrawerOpen(true);
};

3. 组件渲染

jsx
{newDrawerOpen && (
  <NewDrawer
    newDrawerOpen={newDrawerOpen}
    newDrawerCancel={newDrawerCancel}
    newDrawerValue={newDrawerValue}
  />
)}

4. Drawer组件

jsx
import React, { useEffect, useState } from 'react';
import { Drawer, Form, message, Spin, Space, Button } from 'antd';


const NewDrawer = (props) => {
  const { newDrawerOpen, newDrawerCancel, newDrawerValue,  } = props;
  const [loading, setLoading] = useState(false);

  return (
    <Drawer
      width={600}
      destroyOnClose
      maskClosable={false}
      title={'抽屉'}
      open={newDrawerOpen}
      onClose={newDrawerCancel}
    >
    </Drawer>
  );
};

export default NewDrawer;
更新时间：2024-12-13