基于pro-components 生成CRUD-React代码

[zy7y]

No description provided.

[zy7y]

暂时无计划

[zy7y]

import { ActionType, ModalForm, PageContainer, ProColumns, ProDescriptions, ProDescriptionsItemProps, ProTable } from '@ant-design/pro-components';
import { Button, Drawer, message } from "antd"
import { PlusOutlined } from '@ant-design/icons';
import { useRef, useState } from 'react';

/**
 * @en-US Add node
 * @zh-CN 添加节点
 * @param fields
 */
const handleAdd = async (fields: any) => {
    const hide = message.loading('正在添加');
    try {
        // 添加数据接口
      await addRule({ ...fields });
      hide();
      message.success('Added successfully');
      return true;
    } catch (error) {
      hide();
      message.error('Adding failed, please try again!');
      return false;
    }
  };
  
  /**
   * @en-US Update node
   * @zh-CN 更新节点
   *
   * @param fields
   */
  const handleUpdate = async (fields: any) => {
    const hide = message.loading('Configuring');
    try {
        // 更新数据接口
      await updateRule({
        name: fields.name,
        desc: fields.desc,
        key: fields.key,
      });
      hide();
  
      message.success('Configuration is successful');
      return true;
    } catch (error) {
      hide();
      message.error('Configuration failed, please try again!');
      return false;
    }
  };
  
  /**
   *  Delete node
   * @zh-CN 删除节点
   *
   * @param selectedRows
   */
  const handleRemove = async (selectedRows: any[]) => {
    const hide = message.loading('正在删除');
    if (!selectedRows) return true;
    try {
        // 删除数据接口
      await removeRule({
        key: selectedRows.map((row) => row.key),
      });
      hide();
      message.success('Deleted successfully and will refresh soon');
      return true;
    } catch (error) {
      hide();
      message.error('Delete failed, please try again');
      return false;
    }
  };

export default () => {

    const [createModalOpen, handleModalOpen] = useState<boolean>(false);
    const [updateModalOpen, handleUpdateModalOpen] = useState<boolean>(false);
    
    const [showDetail, setShowDetail] = useState<boolean>(false);
    
    const actionRef = useRef<ActionType>();
    const [currentRow, setCurrentRow] = useState<any>();
    const [selectedRowsState, setSelectedRows] = useState<any[]>([]);
    
    const columns: ProColumns<any>[] = [
        {
            title: '序号',
            dataIndex: 'index',
            valueType: 'index',
            width: 50,
            fixed: 'left',
            align: 'center'
        },
        {
            title: '名称',
            dataIndex: 'name',
            width: 100,
            fixed: 'left',
            align: 'center'
        },
        {   
            title: '操作',
            dataIndex: 'option',
            valueType: 'option',
            render: (_, record) => [
              <a
                onClick={() => {
                  handleUpdateModalOpen(true);
                  setCurrentRow(record);
                }}
              >
                编辑
              </a>,
              <a onClick={() => {
                console.log(record)
              }}>
                删除
              </a>,
            ],
          },
    ]
    
    return <PageContainer>
        {/* 表格 */}
    <ProTable
    actionRef={actionRef}
    columns={columns}
    rowKey="key"
    search={{
      labelWidth: 120,
    }}
        toolBarRender={() => [
            <Button
                type="primary"
                key="primary"
                onClick={() => {
                    handleModalOpen(true);
                }}
            >
                <PlusOutlined />
                新增
            </Button>,
        ]}
    >

    </ProTable>
    {/* 表单 */}
    <ModalForm
        title={'创建'}
        width="400px"
        open={createModalOpen}
        onOpenChange={handleModalOpen}
        onFinish={async (value) => {
          const success = await handleAdd(value as any);
          if (success) {
            handleModalOpen(false);
            if (actionRef.current) {
              actionRef.current.reload();
            }
          }
        }}
      />
    {/* 详情页 */}
    <Drawer
        width={600}
        open={showDetail}
        onClose={() => {
          setCurrentRow(undefined);
          setShowDetail(false);
        }}
        closable={false}
      >
        {currentRow?.name && (
          <ProDescriptions<any>
            column={2}
            title={currentRow?.name}
            request={async () => ({
              data: currentRow || {},
            })}
            params={{
              id: currentRow?.name,
            }}
            columns={columns as ProDescriptionsItemProps<any>[]}
          />
        )}
      </Drawer>
</PageContainer>
}

表单项还需在封装， 暂停

[zy7y]

新版本基于 https://gitee.com/antdadmin/antd-crud 实现