Umi +ant-design4 proComponent实践demo

拼搏现实的明天。 2023-01-17 12:54 203阅读 0赞

`创建umi脚手架`

yarn create @umijs/umi-app

`安装node_modules`

yarn

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9ubGluZU9r_size_16_color_FFFFFF_t_70]

// 每个包都是可以独立按需安装的 也可以yarn add @ant-design安装所有包
    yarn add @ant-design/pro-form --save
    yarn add @ant-design/pro-layout --save
    yarn add @ant-design/pro-table --save
    yarn add @ant-design/pro-list --save
    yarn add @ant-design/pro-descriptions --save
    yarn add @ant-design/pro-card --save
    yarn add @ant-design/pro-skeleton --save

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9ubGluZU9r_size_16_color_FFFFFF_t_70 1]

`案例示图`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9ubGluZU9r_size_16_color_FFFFFF_t_70 2]

`案例代码`

import React, {  useState } from 'react';
    import {  PlusOutlined } from '@ant-design/icons';
    import {  Button, Tabs, Tag, Space, message } from 'antd';
    import type {  ProDescriptionsItemProps } from '@ant-design/pro-descriptions';
    import ProDescriptions from '@ant-design/pro-descriptions';
    import type {  ProColumns } from '@ant-design/pro-table';
    import ProTable, {  TableDropdown } from '@ant-design/pro-table';
    import request from 'umi-request';
    
    type GithubIssueItem = { 
      url: string;
      id: number;
      number: number;
      title: string;
      labels: { 
        name: string;
        color: string;
      }[];
      state: string;
      comments: number;
      created_at: string;
      updated_at: string;
      closed_at?: string;
    };
    
    const columns: ProColumns<GithubIssueItem>[] = [
      { 
        title: '序号',
        dataIndex: 'index',
        width: 64,
        valueType: 'indexBorder',
      },
      { 
        title: '标题',
        dataIndex: 'title',
        copyable: true,
        ellipsis: true,
        search: false,
      },
      { 
        title: (_, type) => (type === 'table' ? '状态' : '列表状态'),
        dataIndex: 'state',
        initialValue: 'all',
        filters: true,
        onFilter: true,
        valueType: 'select',
        valueEnum: { 
          all: {  text: '全部', status: 'Default' },
          open: { 
            text: '未解决',
            status: 'Error',
          },
          closed: { 
            text: '已解决',
            status: 'Success',
          },
        },
      },
      { 
        title: '排序方式',
        key: 'direction',
        hideInTable: true,
        hideInDescriptions: true,
        dataIndex: 'direction',
        filters: true,
        onFilter: true,
        valueType: 'select',
        valueEnum: { 
          asc: '正序',
          desc: '倒序',
        },
      },
      { 
        title: '标签',
        dataIndex: 'labels',
        width: 120,
        render: (_, row) => (
          <Space>
            { row.labels.map(({  name, color }) => (
              <Tag color={ color} key={ name}>
                { name}
              </Tag>
            ))}
          </Space>
        ),
      },
      { 
        title: '创建时间',
        key: 'since',
        dataIndex: 'created_at',
        valueType: 'dateTime',
      },
      { 
        title: 'option',
        valueType: 'option',
        dataIndex: 'id',
        render: (text, row) => [
          <a href={ row.url} key="show" target="_blank" rel="noopener noreferrer">
            查看
          </a>,
          <TableDropdown
            key="more"
            onSelect={ (key) => message.info(key)}
            menus={ [
              {  key: 'copy', name: '复制' },
              {  key: 'delete', name: '删除' },
            ]}
          />,
        ],
      },
    ];
    
    export default () => { 
      const [type, setType] = useState('table');
      return (
        <>
          <Tabs activeKey={ type} onChange={ (e) => setType(e)}>
            <Tabs.TabPane tab="table" key="table" />
            <Tabs.TabPane tab="form" key="form" />
            <Tabs.TabPane tab="descriptions" key="descriptions" />
          </Tabs>
          { ['table', 'form'].includes(type) && (
            <ProTable<GithubIssueItem>
              columns={ columns}
              type={ type as 'table'}
              request={ async (params = { }) =>
                request<{ 
                  data: GithubIssueItem[];
                }>('https://proapi.azurewebsites.net/github/issues', { 
                  params,
                })
              }
              pagination={ { 
                pageSize: 5,
              }}
              rowKey="id"
              dateFormatter="string"
              headerTitle="查询 Table"
              toolBarRender={ () => [
                <Button key="3" type="primary">
                  <PlusOutlined />
                  新建
                </Button>,
              ]}
            />
          )}
          { type === 'descriptions' && (
            <ProDescriptions
              style={ { 
                background: '#fff',
              }}
              columns={ columns as ProDescriptionsItemProps<GithubIssueItem>[]}
              request={ async (params) => { 
                const msg = await request<{ 
                  data: GithubIssueItem[];
                }>('https://proapi.azurewebsites.net/github/issues', { 
                  params,
                });
                return { 
                  ...msg,
                  data: msg?.data[0],
                };
              }}
            />
          )}
        </>
      );
    };

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9ubGluZU9r_size_16_color_FFFFFF_t_70]: /images/20221021/1275f95c463b433287b2f665cd0dc805.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9ubGluZU9r_size_16_color_FFFFFF_t_70 1]: /images/20221021/fe078e32768d4a5faf8506bffd8aabe5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9ubGluZU9r_size_16_color_FFFFFF_t_70 2]: /images/20221021/80eafac5989b400d9ac5a30381b7c6db.png