bunny筆記|React+Ant Design pro框架實(shí)現(xiàn)Admin頁面的功能(新增、刪除、修改數(shù)據(jù)、查詢列表等功能)，采用mock模擬后端返回的數(shù)據(jù)處理

需求分析

需求:（1）在左側(cè)菜單新增自己對(duì)應(yīng)名詞的菜單--例： 老師列表-張三（2）添加對(duì)應(yīng)菜單的頁面，老師列表頁，提供老師信息的查詢，新增功能

列表查詢頁

分兩部分：搜索區(qū)域（對(duì)應(yīng)參數(shù)入?yún)ⅲ?列表區(qū)域（對(duì)應(yīng)響應(yīng)參數(shù)）
要求：包含參數(shù)中要求的控件組件，最終發(fā)起請(qǐng)求的參數(shù)齊全，響應(yīng)成功展示正常即可

新增頁面

新增頁面以彈窗形式完成
要求：包含參數(shù)中要求的控件組件，最終發(fā)起請(qǐng)求的參數(shù)齊全

查詢接口

import {addTea, getTeaList} from '@/services/ant-design-pro/api';
addTea為新增老師接口， getTeaList為查詢列表接口

查詢列表接口參數(shù)


image.png

新增老師接口參數(shù)(入?yún)?


image.png

查詢老師列表響應(yīng)體

{
success：true,
pageSize: 5,
total:100,
data：[
{name:‘張三’,
iPhone:10086,
type:1,
timeList: [1651110000000，1651110314000]，
onJob:true，
remarks: “張三是個(gè)好老師”
}
], //數(shù)組中的對(duì)象為Teacher
}

Teacher對(duì)象字段


image.png

image.png

新增老師響應(yīng)體

{
status：200,
}

功能實(shí)現(xiàn)

實(shí)現(xiàn)新增
image.png
實(shí)現(xiàn)刪除/修改、查詢
image.png
實(shí)現(xiàn)對(duì)列表的搜索查詢功能
image.png

高級(jí)表格自帶的其它功能

image.png
例1：

index.tsx頁面代碼

import React, { useState, useRef } from 'react';
import { PlusOutlined, EllipsisOutlined } from '@ant-design/icons';
import { Button, message, Menu, Dropdown, Form } from 'antd';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import request from 'umi-request';
import ProForm, {
  ModalForm,
  ProFormText,
  ProFormTextArea,
  ProFormSelect,
  ProFormDateTimePicker,
} from '@ant-design/pro-form';
import { useIntl } from 'umi';
import { addTea, getTeaList } from '@/services/ant-design-pro/api';
import '@ant-design/pro-table/dist/table.css';
import type { RecordKey } from '@ant-design/pro-utils/lib/useEditableArray';

const columns: ProColumns<API.teaListItem>[] = [
  {
    dataIndex: 'index',
    valueType: 'indexBorder',
    width: 48,
  },
  {
    title: '名稱',
    dataIndex: 'name',
    copyable: true,
    ellipsis: true,
    formItemProps: {
    },
  },
  {
    title: '手機(jī)號(hào)',
    dataIndex: 'iPhone',
    copyable: true,
    ellipsis: true,
  },
  {
    disable: true,
    title: '老師類型',
    dataIndex: 'type',
    filters: true,
    onFilter: true,
    valueType: 'select',
    valueEnum: {
      0: {
        text: '語文',
      },
      1: {
        text: '數(shù)學(xué)',
      },
      2: {
        text: '英語',
      },
    },
  },
  {
    disable: true,
    title: '是否在職',
    dataIndex: 'onJob',
    filters: true,
    onFilter: true,
    hideInSearch: true,
    valueType: 'select',
    valueEnum: {
      true: {
        text: '是',
        status: 'Success',
      },
      false: {
        text: '否',
        status: 'Error',
      },
    },
  },
  {
    title: '創(chuàng)建時(shí)間',
    key: 'createTime',
    dataIndex: 'createTime',
    valueType: 'dateTime',
    sorter: true,
    search: {
      transform: (value) => {
        return {
          createTime: new Date(value).getTime(),
        };
      },
    },
  },
  {
    title: '結(jié)束時(shí)間',
    key: 'endTime',
    dataIndex: 'endTime',
    valueType: 'dateTime',
    sorter: true,
    search: {
      transform: (value) => {
        return {
          endTime: new Date(value).getTime(),
        };
      },
    },
  },
  {
    disable: true,
    title: '備注',
    dataIndex: 'remarks',
    search: false,
    renderFormItem: (_, { defaultRender }) => {
      return defaultRender(_);
    },
  },
  {
    title: '操作',
    valueType: 'option',
    key: 'option',
    render: (text, record, _, action) => [
      <a
        key="editable"
        onClick={() => {
          action?.startEditable?.(record.key);
        }}
      >
        編輯
      </a>,
    ],
  },
];

const menu = (
  <Menu>
    <Menu.Item key="1">1st item</Menu.Item>
    <Menu.Item key="2">2nd item</Menu.Item>
    <Menu.Item key="3">3rd item</Menu.Item>
  </Menu>
);

/**
 * handleAdd
 * @param fields
 */
const handleAdd = async (fields: API.teaListItem) => {
  const hide = message.loading('正在添加');
  // handleList(fields)
  try {
    await addTea({ ...fields });
    hide();
    message.success('Added successfully');
    return true;
  } catch (error) {
    hide();
    message.error('Adding failed, please try again!');
    return false;
  }
};
getTeaList;

const hyhList: React.FC = () => {
  const actionRef = useRef<ActionType>();
  const [createModalVisible, handleModalVisible] = useState<boolean>(false);
  const [form] = Form.useForm();
  const intl = useIntl();
  return (
    <ProTable<API.teaListItem>
      columns={columns}
      actionRef={actionRef}
      cardBordered
      request={async (params = {}, sort, filter) => {
        console.log(sort, filter);
        console.log(params, '***params');
        let listdata: any;
        listdata = await request<{
          data: API.teaListItem[];
        }>('/api/tea/List', {
          params,
        });
        return Promise.resolve(listdata);
      }}
      editable={{
        type: 'multiple',
        onSave: (key: RecordKey, row: API.teaListItem) => {
          console.log(key, row, 'onSave');
          return Promise.resolve();
        },
        onDelete: (key: RecordKey, row: API.teaListItem) => {
          console.log(key, row, 'onDelete');
          return Promise.resolve();
        },
      }}
      columnsState={{
        persistenceKey: 'pro-table-singe-demos',
        persistenceType: 'localStorage',
        onChange(value) {
          console.log('value: ', value);
        },
      }}
      rowKey="key"
      search={{
        labelWidth: 'auto',
      }}
      pagination={{
        pageSize: 5,
        onChange: (page) => console.log(page),
      }}
      dateFormatter="string"
      headerTitle="高級(jí)表格"
      toolBarRender={() => [
        <Button
          key="button"
          icon={<PlusOutlined />}
          type="primary"
          onClick={() => {
            handleModalVisible(true);
          }}
        >
          新增老師
        </Button>,
        <Dropdown key="menu" overlay={menu}>
          <Button>
            <EllipsisOutlined />
          </Button>
        </Dropdown>,
        <ModalForm
          title={intl.formatMessage({
            id: 'pages.searchTable.createForm.newRule',
            defaultMessage: 'New rule',
          })}
          width="400px"
          visible={createModalVisible}
          onVisibleChange={handleModalVisible}
          form={form}
          onFinish={async (value) => {
            //debugger;
            const success = await handleAdd(value as API.teaListItem);
            if (success) {
              handleModalVisible(false);
              if (actionRef.current) {
                actionRef.current.reload();
                form.resetFields();
              }
            }
          }}
        >
          <ProForm.Group>
            <ProFormText
              width="sm"
              name="name"
              label="老師名稱"
              tooltip="最長為 6 位"
              placeholder="請(qǐng)輸入老師名稱"
            />

            <ProFormText width="sm" name="iPhone" label="手機(jī)號(hào)碼" placeholder="請(qǐng)輸入手機(jī)號(hào)" />
          </ProForm.Group>
          <ProForm.Group>
            <ProFormSelect
              request={async () => [
                {
                  value: 0,
                  label: '數(shù)學(xué)',
                },
                {
                  value: 1,
                  label: '語文',
                },
                {
                  value: 2,
                  label: '英語',
                },
              ]}
              width="xs"
              name="type"
              label="請(qǐng)選擇老師類型"
            />
            <ProFormSelect
              request={async () => [
                {
                  value: 'true',
                  label: '是',
                },
                {
                  value: 'false',
                  label: '否',
                },
              ]}
              width="xs"
              name="onJob"
              label="請(qǐng)選擇是否在任職"
            />
            <ProFormDateTimePicker
              name="createTime"
              label="請(qǐng)選擇創(chuàng)建時(shí)間"
              transform={(value) => {
                return {
                  createTime: Date.parse(value),
                };
              }}
              rules={[{ required: true, message: 'Please select your country!' }]}
            />
            <ProFormDateTimePicker
              name="endTime"
              label="請(qǐng)選擇結(jié)束時(shí)間"
              transform={(value) => {
                return {
                  endTime: Date.parse(value),
                };
              }}
              rules={[{ required: true, message: 'Please select your country!' }]}
            />
          </ProForm.Group>
          <ProFormTextArea
            width="md"
            name="remarks"
            label="備注信息"
            placeholder="請(qǐng)輸入備注信息"
          />
        </ModalForm>,
      ]}
    />
  );
};
export default hyhList;

api配置

import { request } from 'umi';
import requestumi from 'umi-request';

/** 新增老師 /api/addTea */
export async function addTea(options?: { [key: string]: any }) {
  console.log(options);
  return requestumi<{
    data: [];
  }>('/api/tea/add', {
    method: 'POST',
    params: {
      ...options,
    },
    ...(options || {}),
  });
}

export async function getTeaList(options?: { [key: string]: any }) {
  return requestumi<API.teaListItem>('/api/tea/list', {
    method: 'GET',
    params: {
      ...options,
    },
    ...(options || {}),
  });
}

mock數(shù)據(jù)處理

import { Request, Response } from 'express';
import { parse } from 'url';

// mock tableListDataSource
const genList = (current: number, pageSize: number) => {
  const tableListDataSource: API.teaListItem[] = [];

  for (let i = 0; i < pageSize; i += 1) {
    const index = (current - 1) * 10 + i;
    tableListDataSource.push({
      key: index,
      onJob: i % 6 === 0,
      name: `張三 ${index}`,
      iPhone: Math.floor(Math.random() * 1000),
      type: i % 3,
      remarks: '這是一段描述',
      createTime: new Date().getTime(),
      endTime: new Date().getTime(),
    });
  }
  tableListDataSource.reverse();
  return tableListDataSource;
};

let tableListDataSource = genList(1, 100);

function getTeaList(req: Request, res: Response, u: string) {
  let realUrl = u;
  if (!realUrl || Object.prototype.toString.call(realUrl) !== '[object String]') {
    realUrl = req.url;
  }
  const { current = 1, pageSize = 10 } = req.query;
  const params = parse(realUrl, true).query as unknown as API.PageParams &
    API.teaListItem &
    API.RuleListItem & {
      sorter: any;
      filter: any;
    };

  let dataSource = [...tableListDataSource].slice(
    ((current as number) - 1) * (pageSize as number),
    (current as number) * (pageSize as number),
  );
  if (params.sorter) {
    const sorter = JSON.parse(params.sorter);
    dataSource = dataSource.sort((prev, next) => {
      let sortNumber = 0;
      Object.keys(sorter).forEach((key) => {
        if (sorter[key] === 'descend') {
          if (prev[key] - next[key] > 0) {
            sortNumber += -1;
          } else {
            sortNumber += 1;
          }
          return;
        }
        if (prev[key] - next[key] > 0) {
          sortNumber += 1;
        } else {
          sortNumber += -1;
        }
      });
      return sortNumber;
    });
  }
  if (params.filter) {
    const filter = JSON.parse(params.filter as any) as {
      [key: string]: string[];
    };
    if (Object.keys(filter).length > 0) {
      dataSource = dataSource.filter((item) => {
        return Object.keys(filter).some((key) => {
          if (!filter[key]) {
            return true;
          }
          if (filter[key].includes(`${item[key]}`)) {
            return true;
          }
          return false;
        });
      });
    }
  }
  //搜索查詢
  if (params.name) {
    dataSource = dataSource.filter((data) => data?.name?.includes(params.name || ''));
  }
  if (params.iPhone) {
    dataSource = dataSource.filter((data) =>
      data?.iPhone?.toString().includes(params.iPhone.toString()),
    );
  }
  if (params.type) {
    dataSource = dataSource.filter((data) =>
      data?.type?.toString().includes(params.type.toString()),
    );
  }
  if (params.createTime) {
    dataSource = dataSource.filter(
      (data) => data?.createTime,
      // data?.createTime >= params.createTime,
    );
  }
  if (params.endTime) {
    dataSource = dataSource.filter(
      (data) => data?.endTime,
      //data?.endTime <= params.endTime,
    );
  }
  const result = {
    data: dataSource,
    total: tableListDataSource.length,
    success: true,
    pageSize,
    current: parseInt(`${params.current}`, 10) || 1,
  };

  return res.json(result);
}

function addTea(req: Request, res: Response, u: string, b: Request) {
  let realUrl = u;
  if (!realUrl || Object.prototype.toString.call(realUrl) !== '[object String]') {
    realUrl = req.url;
  }

  const { pageSize = 1 } = req.query;
  const params = parse(realUrl, true).query as unknown as API.PageParams &
    API.teaListItem &
    API.RuleListItem & {
      sorter: any;
      filter: any;
    };

  let dataSource = [...tableListDataSource];

  for (let i = 0; i < pageSize; i += 1) {
    tableListDataSource.unshift({
      key: tableListDataSource.length,
      onJob: params.onJob,
      name: params.name,
      iPhone: params.iPhone,
      type: params.type,
      remarks: params.remarks,
      createTime: new Date().setTime(params.createTime),
      endTime: new Date().setTime(params.endTime),
    });
  }
  const resultes = {
    data: dataSource,
    total: tableListDataSource.length,
    success: true,
    pageSize,
    current: parseInt(`${params.current}`, 10) || 1,
  };

  return res.json({ status: 200, data: resultes });
}

export default {
  'GET /api/tea/List': getTeaList,
  'POST /api/tea/add': addTea,
};

typing.d.ts 類型聲明文件

declare namespace API {
  type teaListItem = {
    key: index,
    onJob: boolean,
    name: string,
    iPhone: number,
    type: number,
    remarks: string,
    createTime: number,
    endTime: number,
  };
}

proxy.ts文件

export default {
  dev: {
    '/api/': {
      // 要代理的地址
      //target: 'https://preview.pro.ant.design',
      changeOrigin: true,
    },
}};

routes.ts文件

export default [
{
    name: 'bunny.list',
    icon: 'table',
    path: '/hyhList',
    component: './hyhList',
  },]

menu.ts文件(位置：src/locales/zh-CN/..)

export default {
'menu.bunny.list': '老師列表-bunny',
}

另一個(gè)比較簡單的寫法，也是實(shí)現(xiàn)admin新增頁面，實(shí)現(xiàn)增刪改查的，與上面的相比差一些，可以用作比較，有異同之處。例2：

api-代碼
//--查詢列表 mock獲取-- (ok)
export const getTeaList = async (params: any) => {
  return request('/api/list', { params: params })
}

//--新增老師接口 mock獲取--(ok)
export const addTea = async (params: any) => {
  console.log(params);
  return request('/api/add', {
    params: params
  })
}
mock-代碼
//方法一：指定給定返回?cái)?shù)據(jù)的參數(shù)
// let list = [
//   {
//     id: 1,
//     name: 'bunny',
//     iPhone: '86688',
//     type: '數(shù)學(xué)',
//     createTime: 1650931200000,
//     endTime: 1651276800000,
//     onJob: 'true',
//     remarks: '他是一位好老師',
//   },
// ]

//方法二：通過for循環(huán)push上去
const genList = (current: number, pageSize: number) => {
  let list = []
  for (let i = 0; i < pageSize; i += 1) {
    const index = (current - 1) * 10 + i;
    list.push({
      id: index,
      onJob: i % 6 === 0,
      name: `bunny ${index}`,
      iPhone: Math.floor(Math.random() * 1000),
      type: i % 3,
      remarks: '描述說明...',
      createTime: new Date().getTime(),
      endTime: new Date().getTime(),
    });
  }
  list.reverse();
  return list;
};
let list = genList(1, 100);
export default {
  'GET /api/list': (req: any, res: any) => {
    let query = req.query;
    //過濾查詢
    let dataListSource: any
    function filterQuery(list: any) {
      let dataList: any[] = []
      for (let i in query) {
        let lists = list.filter((item: any) => {
          return item[i] === query[i]
        })
        dataList = [...dataList, ...lists]
        dataListSource = dataList
      }
      res.json({ status: 200, data: Array.from(new Set(dataList)), pageSize: 5, total: list.length })
    }

    if (JSON.stringify(query) === '{}') {
      res.json({ status: 200, data: list, pageSize: 5, total: list.length })
    } else {
      //過濾查詢
      filterQuery(list)
    }
  },
  'GET /api/add': (req: any, res: any) => {
    //添加name
    // console.log(req);
    // res.end('ok')
    // res.end(JSON.stringify(req.body)) //req.body 拿到j(luò)son數(shù)據(jù)
    let timeFun = (tiems: string) => {
      let d = new Date(tiems)
      let k = d.getTime()
      console.log(k)
      return k
    }
    const item: any = {
      id: list.length + 1,
      name: req.query.name,
      iPhone: req.query.iPhone,
      type: Number(req.query.type),
      createTime: timeFun(req.query.createTime),
      endTime: timeFun(req.query.endTime),
      onJob: req.query.onJob,
      remarks: req.query.remarks,
    }
    list.unshift(item)
    //list.push(item)
    // res.end({ status: 200 })
    res.json({ status: 200, data: list })
  }
}
index.tsx-代碼

import { PlusOutlined, EllipsisOutlined } from '@ant-design/icons';
import { Button, Menu, Dropdown, message } from 'antd';
import type { ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { useState, useEffect } from 'react';
import ProForm, {
 ModalForm, ProFormText, ProFormDateRangePicker, ProFormSelect,
} from '@ant-design/pro-form';
import { addTea, getTeaList } from '@/services/ant-design-pro/api'
import type { RecordKey } from '@ant-design/pro-utils/lib/useEditableArray';
import request from 'umi-request';

type TeacherIssueItem = {
 name: string;//名稱
 iPhone: number;//手機(jī)號(hào)
 type: number;//老師類型（狀態(tài)）
 createTime: number;//創(chuàng)建時(shí)間
 endTime: number;//結(jié)束時(shí)間
 onJob: boolean;//是否在職
 remarks: string;//備注
 id: number;
};

const columns: ProColumns<TeacherIssueItem>[] = [
 {
   dataIndex: 'index',
   valueType: 'indexBorder',
   width: 48,
 },
 {
   title: '名 稱',
   dataIndex: 'name',
   copyable: true,
   ellipsis: true,
 },
 {
   title: '手機(jī)號(hào)',
   dataIndex: 'iPhone',
   copyable: true,
   ellipsis: true,
 },
 {
   disable: true,
   title: '老師類型',
   dataIndex: 'type',
   filters: true,
   onFilter: true,
   valueType: 'select',
   valueEnum: {
     all: { text: '全部', status: 'Default' },
     0: {
       text: '語文',
     },
     1: {
       text: '數(shù)學(xué)',
     },
     2: {
       text: '英語',
     },
   },
 },
 {
   title: '創(chuàng)建時(shí)間',
   key: 'showTime',
   dataIndex: 'createTime',
   valueType: 'dateTime',
   sorter: true,
   hideInSearch: true,
 },
 {
   title: '創(chuàng)建時(shí)間',
   dataIndex: 'createTime',
   valueType: 'dateRange',
   hideInTable: true,
   search: {
     transform: (value) => {
       return {
         startTime: value[0],
         endTime: value[1],
       };
     },
   },
 },
 {
   title: '結(jié)束時(shí)間',
   key: 'showTime',
   dataIndex: 'endTime',
   valueType: 'dateTime',
   sorter: true,
   hideInSearch: true,
 },
 {
   title: '結(jié)束時(shí)間',
   dataIndex: 'endTime',
   valueType: 'dateRange',
   hideInTable: true,
   hideInSearch: true,
   search: {
     transform: (value) => {
       return {
         startTime: value[0],
         endTime: value[1],
       };
     },
   },
 },
 {
   disable: true,
   title: '是否在職',
   dataIndex: 'onJob',
   filters: true,
   onFilter: true,
   hideInSearch: true,
   valueType: 'select',
   valueEnum: {
     true: {
       text: '是',
       status: 'Success',
     },
     false: {
       text: '否',
       status: 'Error',
     },
   },
 },
 {
   title: '備 注',
   dataIndex: 'remarks',
   hideInSearch: true,
   copyable: true,
   ellipsis: true,
 },
 {
   title: '操作列表',
   valueType: 'option',
   key: 'option',
   render: (text, record, _, action) => [
     <a
       key="editable"
       onClick={() => {
         action?.startEditable?.(record.id);
       }}
     >
       編輯
     </a>,
   ],
 },
];

const menu = (
 <Menu>
   <Menu.Item key="1">1st item</Menu.Item>
   <Menu.Item key="2">2nd item</Menu.Item>
   <Menu.Item key="3">3rd item</Menu.Item>
 </Menu>
);

// 數(shù)據(jù)過濾
function filterData(lists: any) {
 // lists.forEach((ele: any) => {
 //   switch (ele.type) {
 //     case 1:
 //       ele.type = '數(shù)學(xué)'
 //       break;
 //     case 2:
 //       ele.type = '語文'
 //       break;
 //     case 3:
 //       ele.type = '英語'
 //       break;
 //     case null:
 //       ele.type = '--'
 //     default:
 //       break;
 //   }
 // })
 return lists
}

export default () => {
 let [list, setList] = useState([]);

 useEffect(async () => {
   if (list.length <= 0) {
     let lists = await getTeaList({})
     setList(filterData(lists.data))
   }
 }, [])

 // //--新增老師數(shù)據(jù)請(qǐng)求--
 const handleForm = async (values: any) => {
   console.log(values, "values");

   //獲取表單新增的數(shù)據(jù)
   let obj = {
     createTime: values.contractTime ? values.contractTime[0] : '--',
     endTime: values.contractTime ? values.contractTime[1] : '--',
     name: values.name ? values.name : '--',
     type: values.type ? values.type : '--',
     iPhone: values.iPhone ? values.iPhone : '--',
     onJob: values.onJob ? values.onJob : '--',
     remarks: values.remarks ? values.remarks : '--'
   }

   // 請(qǐng)求獲取響應(yīng)數(shù)據(jù),并將新增的數(shù)據(jù)返回到api接口給后端存儲(chǔ)
   const res = await addTea(obj)

   //如果響應(yīng)狀態(tài)為200，則是獲取成功。添加成功后要刷新列表數(shù)據(jù)
   if (res.status = 200) {
     //獲取最新的列表數(shù)據(jù)
     let lists = await getTeaList({})
     //將數(shù)據(jù)更新渲染出來
     setList(filterData(lists.data))
     message.success(res.message)
   } else {
     message.error(res.message)
   }
   return true
 }

 //--添加--搜索
 const beforeSearchSubmit = (val: any) => {
   getTeaList({ ...val }).then((res) => {
     setList(filterData(res.data))
   })
 }
 return (
   <ProTable<TeacherIssueItem>
     columns={columns}
     cardBordered
     dataSource={list}
     // request={ async() =>list}
     // request={async (params) => {
     //   console.log(params, "params");
     //   let data: any
     //   data = await request('/api/List');
     //   console.log(data, "data");//data:[Array]
     //   return Promise.resolve(data);//將列表渲染到頁面
     //   // return request<{
     //   // }>('/api/List', {
     //   // }).then((res) => {
     //   //   console.log(res, ".then的res");//data:[Array]
     //   // });
     // }}
     editable={{
       type: 'multiple',
       onSave: (key: RecordKey, row: TeacherIssueItem & {
         index?: number | undefined;
       }) => {
         console.log(key, row, 'onSave');
         return Promise.resolve();
       },
       onDelete: (key: RecordKey, row: TeacherIssueItem & {
         index?: number | undefined;
       }
       ) => {
         console.log(key, row, 'onDelete');
         return Promise.resolve();
       }
     }}
     columnsState={{
       persistenceKey: 'pro-table-singe-demos',
       persistenceType: 'localStorage',
       onChange(value) {
         console.log('value: ', value);
       },
     }}
     beforeSearchSubmit={beforeSearchSubmit}
     rowKey="id"
     search={{
       labelWidth: 'auto',
     }}
     form={{
       // 由于配置了 transform，提交的參與與定義的不同這里需要轉(zhuǎn)化一下
       syncToUrl: (values, type) => {
         if (type === 'get') {
           return {
             ...values,
             //開始時(shí)間
             createTime: [values.startTime, values.endTime],
           };
         }
         return values;
       },
     }}
     pagination={{
       pageSize: 5,
       onChange: (page) => console.log(page)
       // onChange: onChange,
     }}
     dateFormatter="string"
     headerTitle="高級(jí)表格"
     toolBarRender={() => [
       <ModalForm<{
         name: string;
         iPhone: number;
       }>
         title="新增老師"
         trigger={
           <Button key="button" icon={<PlusOutlined />} type="primary">
             新增老師
           </Button>
         }
         autoFocusFirstInput
         modalProps={{
           onCancel: () => console.log('run'),
         }}
         submitTimeout={2000}
         onFinish={value => handleForm(value)}
       >
         <ProForm.Group>
           <ProFormText
             width="sm"
             name="name"
             label="老師名稱"
             tooltip="最長為 6 位"
             placeholder="請(qǐng)輸入老師名稱"
           />

           <ProFormText width="sm" name="iPhone" label="手機(jī)號(hào)碼" placeholder="請(qǐng)輸入手機(jī)號(hào)" />
         </ProForm.Group>
         <ProForm.Group>
           <ProFormSelect
             request={async () => [
               {
                 value: 1,
                 label: '數(shù)學(xué)',
               },
               {
                 value: 2,
                 label: '語文',
               },
               {
                 value: 3,
                 label: '英語',
               },
             ]}
             width="xs"
             name="type"
             label="請(qǐng)選擇老師類型"
           />
           <ProFormSelect
             request={async () => [
               {
                 value: 'true',
                 label: '是',
               },
               {
                 value: 'false',
                 label: '否',
               }
             ]}
             width="xs"
             name="onJob"
             label="請(qǐng)選擇是否在任職"
           />
           <ProFormDateRangePicker name="contractTime" label="請(qǐng)選擇起始和結(jié)束時(shí)間" />
         </ProForm.Group>
         <ProForm.Group>
           <ProFormText width="xl" name="remarks" label="備注信息" placeholder="請(qǐng)輸入備注信息" />
         </ProForm.Group>
       </ModalForm>,
       <Dropdown key="menu" overlay={menu}>
         <Button>
           <EllipsisOutlined />
         </Button>
       </Dropdown>,
     ]}
   />
 );
};

其它小知識(shí)點(diǎn)的筆記

1. 請(qǐng)求接口，響應(yīng)數(shù)據(jù)

(1).then和await的區(qū)別：

      request={async (params) => {
        console.log(params, "params");
        return request<{
        }>('/api/List', {
        //  params,//去掉傳參
        }).then((res) => {
          console.log(res, ".then的res");
        });
      }}
image.png
      request={async (params) => {
        console.log(params, "params");
        let data: any
        data = await request('/api/List');
        console.log(data, "data");//data:[Array]
        return Promise.resolve(data);//將列表渲染到頁面

        // return request<{
        // }>('/api/List', {
        // }).then((res) => {
        //   console.log(res, ".then的res");
        // });
      }}
image.png
也可以用表單自帶的dataSource來獲取請(qǐng)求的數(shù)據(jù)，如例2里就是這樣實(shí)現(xiàn)的。

--

2. 使用antd實(shí)現(xiàn) 表單輸入完成后重置默認(rèn)狀態(tài)（也就是清空原來已經(jīng)輸入的值）

import {  Form } from 'antd';
const hyhList: React.FC = () => {
  const [form] = Form.useForm();//重置表格
  return (
    <ProTable<API.teaListItem>
        <ModalForm
          form={form}；//新增
          onFinish={async (value) => {
            if (success) {
                form.resetFields();//重置
              }
            }
         </ModalForm>
     </ProTable>
)
}
export default hyhList;

3. 使用mock轉(zhuǎn)化為時(shí)間戳

但是，這樣的話，在<ProFormDateTimePicker/>中點(diǎn)擊選擇時(shí)間，得到的時(shí)間的的字符串參數(shù)就是時(shí)間戳格式了。如下圖：

    let timeFun = (tiems: string) => {
      let d = new Date(tiems)
      let k = d.getTime()
      console.log(k)
      return k
    }
    const item: any = {
      createTime: timeFun(req.query.createTime),
      endTime: timeFun(req.query.endTime),
    }
image.png

但列表所得的時(shí)間格式是時(shí)間戳格式：

image.png

4.在新增表單中，獲取新增數(shù)據(jù)后轉(zhuǎn)化為時(shí)間戳再返回給mock處理時(shí)間轉(zhuǎn)化為時(shí)間日期格式再返回表單頁面

            <ProFormDateTimePicker
              name="createTime"
              label="請(qǐng)選擇創(chuàng)建時(shí)間"
              transform={(value) => {
                return {
                  createTime: Date.parse(value),
                };
              }}
              rules={[{ required: true, message: 'Please select your country!' }]}
            />
            <ProFormDateTimePicker
              name="endTime"
              label="請(qǐng)選擇結(jié)束時(shí)間"
              transform={(value) => {
                return {
                  endTime: Date.parse(value),
                };
              }}
              rules={[{ required: true, message: 'Please select your country!' }]}
            />
image.png
image.png

5. ProFormDateTimePicker和 fieldProps的使用

            <ProFormDateTimePicker
              name="createTime"
              label="請(qǐng)選擇創(chuàng)建時(shí)間"
              fieldProps={{
                format: (value) => value.format('YYYY-MM-DD'),
              }}
              rules={[{ required: true, message: 'Please select your country!' }]}
            />
            <ProFormDateTimePicker
              name="endTime"
              label="請(qǐng)選擇結(jié)束時(shí)間"
              fieldProps={{
                format: (value) => value.format('YYYY-MM-DD'),
              }}
              rules={[{ required: true, message: 'Please select your country!' }]}
            />

6. index.tsx的頁面結(jié)構(gòu)部署

image.png

7. 編輯的用法,實(shí)現(xiàn)刪除和保存

{
    title: '操作',
    valueType: 'option',
    key: 'option',
    render: (text, record, _, action) => [
      <a
        key="editable"
        onClick={() => {
          action?.startEditable?.(record.key);
        }}
      >
        編輯
      </a>,
    ],
  },

      editable={{
        type: 'multiple',
        onSave: (key: RecordKey, row: API.teaListItem) => {
          console.log(key, row, 'onSave');
          return Promise.resolve();
        },
        onDelete: (key: RecordKey, row: API.teaListItem) => {
          console.log(key, row, 'onDelete');
          return Promise.resolve();
        },
      }}

8. 想要新增的數(shù)據(jù)顯示在第一條 有兩種方式

(1)list.push({
//data數(shù)據(jù)...
})
list.reverse();
return list;

(2)直接把push()方法 改為 const item={//data數(shù)據(jù)...} list.unshift(item)

9.Hooks

9.其它嘛，多用多練，多多熟悉吧，一起加油吧~

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容