1.ui渲染

  1. //src/paperWork.tsx
  3. import React from 'react';
  4. import { Button ,Alert } from 'antd';
  5. import ProTable from '@ant-design/pro-table';
  6. import { PlusOutlined } from '@ant-design/icons';
  7. import { PageHeaderWrapper } from '@ant-design/pro-layout';
  8. const data = [
  9.   { id: 1, title: 'toodlist列表', status: 0 },
  10.   { id: 2, title: 'toodlist添加', status: 1 },
  11.   { id: 3, title: 'toodlist编辑', status: 2 },
  12.   { id: 4, title: 'toodlist修改状态', status: 0 },
  13.   { id: 5, title: 'toodlist列表', status: 0 },
  14.   { id: 6, title: 'toodlist添加', status: 1 },
  15. ];
  17. const  status=[
  18.   <Alert message="待办" type="info" showIcon />,
  19.   <Alert message="已完成" type="success" showIcon />,
  20.   <Alert message="已取消" type="error" showIcon />,
  22. ]
  23. const columns = [
  24.   {
  25.     title: 'ID',
  26.     dataIndex: 'id',
  27.   },
  28.   {
  29.     title: '标题',
  30.     dataIndex: 'title',
  31.   },
  32.   {
  33.     title: '状态',
  34.     dataIndex: 'status',
  35.     render:(_,record)=>{
  36.       return status[record.status]
  37.     }
  38.   },
  39.   {
  40.     title: '修改状态',
  41.     render: () => [<a>待办</a>, <a>完成</a>,<a>取消</a>],
  42.   },
  43. ];
  44. const PeperWork = () => {
  45.   return (
  46.     <PageHeaderWrapper>
  47.       <ProTable
  48.         columns={columns}
  49.         rowKey="key"
  50.         pagination={{
  51.           showQuickJumper: true,
  52.         }}
  53.         dataSource={data}
  54.         search={false}
  55.         dateFormatter="string"
  56.         headerTitle="待办事项列表"
  57.         toolBarRender={() => [
  58.           ,
  59.           <Button type="primary" key="primary">
  60.             <PlusOutlined /> 新建
  61.           </Button>,
  62.         ]}
  63.       />
  64.     </PageHeaderWrapper>
  65.   );
  66. };
  68. export default PeperWork;

2.请求数据

2.1设置mock数据

  1. //mock/todo.ts
  2. export default {
  3.     '/api/todo': [
  4.         { id: 1, title: 'toodlist列表', status: 0 },
  5.         { id: 2, title: 'toodlist添加', status: 1 },
  6.         { id: 3, title: 'toodlist编辑', status: 2 },
  7.         { id: 4, title: 'toodlist修改状态', status: 0 },
  8.         { id: 5, title: 'toodlist列表', status: 0 },
  9.         { id: 6, title: 'toodlist添加', status: 1 },
  10.       ]
  11. }

2.2请求数据

  1. //src/services/todo.ts
  2. import request from '@/utils/request';
  3. export async function getTodolistDatas(): Promise<any> {
  4.     return request('/api/todo');
  5.   }

2.3在组件中使用

  1. import React, { useEffect, useState } from 'react';
  2. import { Button, Alert } from 'antd';
  3. import ProTable from '@ant-design/pro-table';
  4. import { PlusOutlined } from '@ant-design/icons';
  5. import { PageHeaderWrapper } from '@ant-design/pro-layout';
  6. import { getTodolistDatas } from '@/services/todo';
  7. const status = [
  8.   <Alert message="待办" type="info" showIcon />,
  9.   <Alert message="已完成" type="success" showIcon />,
  10.   <Alert message="已取消" type="error" showIcon />,
  11. ];
  12. const columns = [
  13.   {
  14.     title: 'ID',
  15.     dataIndex: 'id',
  16.   },
  17.   {
  18.     title: '标题',
  19.     dataIndex: 'title',
  20.   },
  21.   {
  22.     title: '状态',
  23.     dataIndex: 'status',
  24.     render: (_, record) => {
  25.       return status[record.status];
  26.     },
  27.   },
  28.   {
  29.     title: '修改状态',
  30.     render: () => [<a>待办</a>, <a>完成</a>, <a>取消</a>],
  31.   },
  32. ];
  33. const PeperWork = () => {
  34.   const [data, setData] = useState([]);
  35.   useEffect(async () => {
  36.     const resdata = await getTodolistDatas();
  38.     setData(resdata);
  39.   }, []);
  40.   return (
  41.     <PageHeaderWrapper>
  42.       <ProTable
  43.         columns={columns}
  44.         rowKey="key"
  45.         pagination={{
  46.           showQuickJumper: true,
  47.         }}
  48.         dataSource={data}
  49.         search={false}
  50.         dateFormatter="string"
  51.         headerTitle="待办事项列表"
  52.         toolBarRender={() => [
  53.           ,
  54.           <Button type="primary" key="primary">
  55.             <PlusOutlined /> 新建
  56.           </Button>,
  57.         ]}
  58.       />
  59.     </PageHeaderWrapper>
  60.   );
  61. };
  63. export default PeperWork;

3.使用model共享数据

3.1设置model

  1. //models/todo.ts
  2. import { Effect,Reducer} from 'umi'
  3. interface IndexModelState {
  4.    name: any;
  5.  }
  6. interface todolistlType {
  7.    namespace :string,
  8.    state:{
  9.     todoList:any[]
  10.    },
  11.    effects: {
  12.     getTodolist: Effect
  13.    },
  14.     reducers:{
  15.         setTodolist: Reducer<IndexModelState>;
  16.     }
  17.  }
  18. const todoList:todolistlType ={
  19.     namespace:'todo',
  20.     state:{
  21.      todoList:[]
  22.     },
  23.     effects:{
  24.    *getTodolist({},{call,put}){
  25.       //调用方法获取数据
  26.       const resData=yield call(getTodolistDatas)
  27.       yield put({
  28.             type:'setTodolist',
  29.             payload:resData
  30.       })
  31.    }
  32.     },
  33.     reducers:{
  34.         setTodolist(state:any,action:any){
  35.             return {
  36.                 ...state,
  37.                 todoList:action.payload
  38.             }
  39.          }
  40.     }
  41. }
  42. export default todoList;

3.2第一个组件中使用

  1. //components/GlobalHeader/AvatarDropdown.tsx
  2. import {
  3.   LogoutOutlined,
  4.   SettingOutlined,
  5.   UserOutlined,
  6.   MenuUnfoldOutlined,
  7. } from '@ant-design/icons';
  8. import { Avatar, Menu, Spin, Badge } from 'antd';
  9. import React from 'react';
  10. import type { ConnectProps } from 'umi';
  11. import { history, connect } from 'umi';
  12. import type { ConnectState } from '@/models/connect';
  13. import type { CurrentUser } from '@/models/user';
  14. import HeaderDropdown from '../HeaderDropdown';
  15. import styles from './index.less';
  17. export type GlobalHeaderRightProps = {
  18.   currentUser?: CurrentUser;
  19.   menu?: boolean;
  20.   todo: any;
  21.   dispatch: () => any;
  22. } & Partial<ConnectProps>;
  24. class AvatarDropdown extends React.Component<GlobalHeaderRightProps> {
  25.   onMenuClick = (event: {
  26.     key: React.Key;
  27.     keyPath: React.Key[];
  28.     item: React.ReactInstance;
  29.     domEvent: React.MouseEvent<HTMLElement>;
  30.   }) => {
  31.     const { key } = event;
  32.     //根据key值判断跳转到哪个页面
  33.     if (key === 'todo') {
  34.       history.push('/paperWork');
  35.       return;
  36.     }
  37.     if (key === 'logout') {
  38.       const { dispatch } = this.props;
  40.       if (dispatch) {
  41.         dispatch({
  42.           type: 'login/logout',
  43.         });
  44.       }
  46.       return;
  47.     }
  49.     history.push(`/account/${key}`);
  50.   };
  51. //派发触发函数
  52.   componentDidMount() {
  53.     this.props.dispatch({
  54.       type: 'todo/getTodolist',
  55.       payload: null,
  56.     });
  59.   }
  60.   render(): React.ReactNode {
  61.     //这里进行筛选
  62.     const num=this.props.todo.todoList.filter((item:any)=>item.status===0).length
  63.     const {
  64.       currentUser = {
  65.         avatar: '',
  66.         name: '',
  67.       },
  68.       menu,
  69.     } = this.props;
  70.     const menuHeaderDropdown = (
  71.       <Menu className={styles.menu} selectedKeys={[]} onClick={this.onMenuClick}>
  72.         {menu && (
  73.           <Menu.Item key="center">
  74.             <UserOutlined />
  75.             个人中心
  76.           </Menu.Item>
  77.         )}
  78.         {menu && (
  79.           <Menu.Item key="settings">
  80.             <SettingOutlined />
  81.             个人设置
  82.           </Menu.Item>
  83.         )}
  84.         {menu && <Menu.Divider />}
  85.         <Menu.Item key="todo">
  86.           <MenuUnfoldOutlined />
  87.           待办事项
  88.           {/* 这里使用redux中的数据 */}
  89.           <Badge count={num} offset={[10, 0]} />
  90.         </Menu.Item>
  91.         <Menu.Item key="logout">
  92.           <LogoutOutlined />
  93.           退出登录
  94.         </Menu.Item>
  95.       </Menu>
  96.     );
  97.     return currentUser && currentUser.name ? (
  98.       <HeaderDropdown overlay={menuHeaderDropdown}>
  99.         <span className={`${styles.action} ${styles.account}`}>
  100.           <Avatar size="small" className={styles.avatar} src={currentUser.avatar} alt="avatar" />
  101.           <span className={`${styles.name} anticon`}>
  102.             {currentUser.name} <Badge count={num} dot={true} />
  103.           </span>
  104.         </span>
  105.       </HeaderDropdown>
  106.     ) : (
  107.       <span className={`${styles.action} ${styles.account}`}>
  108.         <Spin
  109.           size="small"
  110.           style={{
  111.             marginLeft: 8,
  112.             marginRight: 8,
  113.           }}
  114.         />
  115.       </span>
  116.     );
  117.   }
  118. }
  119. //这里进行连接
  120. export default connect(({ user, todo }: ConnectState) => ({
  121.   currentUser: user.currentUser,
  122.   todo,
  123. }))(AvatarDropdown);

3.3在第二个组件中实现数据共享

使用过一次触发后就不需要在使用dispatch进行触发了

  1. //pages/PaperWork/index.tsx
  2. import React from 'react';
  3. import { Button, Alert } from 'antd';
  4. import ProTable from '@ant-design/pro-table';
  5. import { PlusOutlined } from '@ant-design/icons';
  6. import { PageHeaderWrapper } from '@ant-design/pro-layout';
  7. import { connect } from 'umi';
  8. const status = [
  9.   <Alert message="待办" type="info" showIcon />,
  10.   <Alert message="已完成" type="success" showIcon />,
  11.   <Alert message="已取消" type="error" showIcon />,
  12. ];
  13. const columns = [
  14.   {
  15.     title: 'ID',
  16.     dataIndex: 'id',
  17.   },
  18.   {
  19.     title: '标题',
  20.     dataIndex: 'title',
  21.   },
  22.   {
  23.     title: '状态',
  24.     dataIndex: 'status',
  25.     render: (_:any, record:any) => {
  26.       return status[record.status];
  27.     },
  28.   },
  29.   {
  30.     title: '修改状态',
  31.     render: () => [<a key={0}>待办</a>, <a key={1}>完成</a>, <a key={2}>取消</a>]
  32.   },
  33. ];
  34. const PeperWork = (props:any) => {
  36.   return (
  37.     <PageHeaderWrapper>
  38.       <ProTable
  39.         columns={columns}
  40.         rowKey="key"
  41.         pagination={{
  42.           showQuickJumper: true,
  43.         }}
  44.         dataSource={props.todo.todoList}
  45.         search={false}
  46.         dateFormatter="string"
  47.         headerTitle="待办事项列表"
  48.         toolBarRender={() => [
  49.           ,
  50.           <Button type="primary" key="primary">
  51.             <PlusOutlined /> 新建
  52.           </Button>,
  53.         ]}
  54.       />
  55.     </PageHeaderWrapper>
  56.   );
  57. };
  59. export default connect(({todo}:any)=>({todo}))(PeperWork);

4.添加数据

4.1mock数据

  1. //mock/todo.ts
  2. let list:{}[] =[
  3.     { id: 1, title: 'toodlist列表', status: 0 },
  4.     { id: 2, title: 'toodlist添加', status: 1 },
  5.     { id: 3, title: 'toodlist编辑', status: 2 },
  6.     { id: 4, title: 'toodlist修改状态', status: 0 },
  7.     { id: 5, title: 'toodlist列表', status: 0 },
  8.     { id: 6, title: 'toodlist添加', status: 1 },
  9.   ]
  10. export default {
  11.     'GET /api/todo': list,
  12.     'POST /api/posttodo':(req:any,ret:any)=>{
  13.          //添加todo
  14.          const item={
  15.              id:list.length+1,
  16.              title:req.body.todoList,
  17.              status:0
  18.          }
  19.          list.push(item)
  20.          let res={
  21.              code:201,
  22.              message:'添加待办事项成功'
  23.          }
  24.          ret.send(res)
  25.     }
  26. }

4.2发送请求

  1. import request from '@/utils/request';
  4. export async function getTodolistDatas(): Promise<any> {
  5.     return request('/api/todo');
  6.   }
  8.   //这里是发送请求
  9.   export async function postTodolistDatas(params:any): Promise<any> {
  11.     return request.post('/api/posttodo',{data:params});
  12.   }

4.3组件使用

  1. //pages/PaperWork/index.tsx
  2. import React, { useState } from 'react';
  3. import { Button, Alert, Modal, message } from 'antd';
  4. import ProTable from '@ant-design/pro-table';
  5. import { PlusOutlined } from '@ant-design/icons';
  6. import { PageHeaderWrapper } from '@ant-design/pro-layout';
  7. import { connect } from 'umi';
  8. import ProForm, { ProFormText} from '@ant-design/pro-form';
  9. import {postTodolistDatas}from "@/services/todo"
  10. const status = [
  11.   <Alert message="待办" type="info" showIcon />,
  12.   <Alert message="已完成" type="success" showIcon />,
  13.   <Alert message="已取消" type="error" showIcon />,
  14. ];
  15. const columns = [
  16.   {
  17.     title: 'ID',
  18.     dataIndex: 'id',
  19.   },
  20.   {
  21.     title: '标题',
  22.     dataIndex: 'title',
  23.   },
  24.   {
  25.     title: '状态',
  26.     dataIndex: 'status',
  27.     render: (_: any, record: any) => {
  28.       return status[record.status];
  29.     },
  30.   },
  31.   {
  32.     title: '修改状态',
  33.     render: () => [<a key={0}>待办</a>, <a key={1}>完成</a>, <a key={2}>取消</a>],
  34.   },
  35. ];
  37. const PeperWork = (props: any) => {
  38.   const [modelFlag, setModel] = useState<boolean>(false);
  40.   const formHandle = () => {
  41.     setModel(true);
  42.   };
  44.   const cancelhandle = () => {
  45.     setModel(false);
  46.   };
  48.   const sumbmithandle=async(val:any)=>{
  49.     const res=await postTodolistDatas(val)
  50.     if(res.code===201){
  51.       props.dispatch({
  52.         type:'todo/getTodolist',
  53.         payload:null
  54.       })
  55.       message.success(res.message)
  56.       setModel(false);
  57.     }
  58.     else{
  59.       message.error(res.message)
  60.     }
  62.   }
  63.   return (
  64.     <PageHeaderWrapper>
  65.       <ProTable
  66.         columns={columns}
  67.         rowKey="key"
  68.         pagination={{
  69.           showQuickJumper: true,
  70.         }}
  71.         dataSource={props.todo.todoList}
  72.         search={false}
  73.         dateFormatter="string"
  74.         headerTitle="待办事项列表"
  75.         toolBarRender={() => [
  76.           ,
  77.           <Button type="primary" key="primary" onClick={formHandle}>
  78.             <PlusOutlined /> 新建
  79.           </Button>,
  80.         ]}
  81.       />
  83.       <Modal footer={null} onCancel={cancelhandle} title="待办事项列表" visible={modelFlag}>
  84.       <ProForm onFinish={(values:any)=>{sumbmithandle(values)}}>
  85.       <ProFormText name="todoList" label="标题" rules={[{ required: true }]} />
  86.     </ProForm>
  87.       </Modal>
  88.     </PageHeaderWrapper>
  89.   );
  90. };
  92. export default connect(({ todo }: any) => ({ todo }))(PeperWork);

5.修改状态

5.1 mock数据

  1. //mock/todo.ts
  2. interface listObjectType{
  3.     id:number,
  4.     title:string,
  5.     status:number
  6. }
  7. let list:listObjectType[] =[
  8.     { id: 1, title: 'toodlist列表', status: 0 },
  9.     { id: 2, title: 'toodlist添加', status: 1 },
  10.     { id: 3, title: 'toodlist编辑', status: 2 },
  11.     { id: 4, title: 'toodlist修改状态', status: 0 },
  12.     { id: 5, title: 'toodlist列表', status: 0 },
  13.     { id: 6, title: 'toodlist添加', status: 1 },
  14.   ]
  16. export default {
  17.     'GET /api/todo': list,
  18.     'POST /api/posttodo':(req:any,ret:any)=>{
  19.          //添加todo
  20.          const item={
  21.              id:list.length+1,
  22.              title:req.body.todoList,
  23.              status:0
  24.          }
  25.          list.push(item)
  26.          let res={
  27.              code:201,
  28.              message:'添加待办事项成功'
  29.          }
  30.          ret.send(res)
  31.     },
  32.   //修改操作
  33.     'PUT /api/modify':(req:any,ret:any)=>{
  34.         //筛选操作
  35.        const {id,status}=req.body
  36.         list.map((item,index)=>{
  37.             if(item.id===id){
  38.                 list[index].status=status
  39.             }
  40.         })
  41.         let res={
  42.             code:201,
  43.             message:'修改办事项成功'
  44.         }
  45.         ret.send(res)
  46.    }
  47. }

5.2请求数据

  1. //services/todo.ts
  2. import request from '@/utils/request';
  5. export async function getTodolistDatas(): Promise<any> {
  6.     return request('/api/todo');
  7.   }
  9.   export async function postTodolistDatas(params:any): Promise<any> {
  11.     return request.post('/api/posttodo',{data:params});
  12.   }
  13. //发送修改请求操作
  14.   export async function modifyTodolistDatas(params:any): Promise<any> {
  16.     return request.put('/api/modify',{data:params});
  17.   }

5.3在组件中使用

  1. import React, { useState } from 'react';
  2. import { Button, Alert, Modal, message } from 'antd';
  3. import ProTable from '@ant-design/pro-table';
  4. import { PlusOutlined } from '@ant-design/icons';
  5. import { PageHeaderWrapper } from '@ant-design/pro-layout';
  6. import { connect } from 'umi';
  7. import ProForm, { ProFormText } from '@ant-design/pro-form';
  8. import { postTodolistDatas,modifyTodolistDatas } from '@/services/todo';
  10. const PeperWork = (props: any) => {
  11.   const [modelFlag, setModel] = useState<boolean>(false);
  13.   const formHandle = () => {
  14.     setModel(true);
  15.   };
  17.   const cancelhandle = () => {
  18.     setModel(false);
  19.   };
  21.   const sumbmithandle = async (val: any) => {
  22.     const res = await postTodolistDatas(val);
  23.     if (res.code === 201) {
  24.       props.dispatch({
  25.         type: 'todo/getTodolist',
  26.         payload: null,
  27.       });
  28.       message.success(res.message);
  29.       setModel(false);
  30.     } else {
  31.       message.error(res.message);
  32.     }
  33.   };
  35.   const status = [
  36.     <Alert message="待办" type="info" showIcon />,
  37.     <Alert message="已完成" type="success" showIcon />,
  38.     <Alert message="已取消" type="error" showIcon />,
  39.   ];
  41.   const columns = [
  42.     {
  43.       title: 'ID',
  44.       dataIndex: 'id',
  45.     },
  46.     {
  47.       title: '标题',
  48.       dataIndex: 'title',
  49.     },
  50.     {
  51.       title: '状态',
  52.       dataIndex: 'status',
  53.       render: (_: any, record: any) => {
  54.         return status[record.status];
  55.       },
  56.     },
  57.     {
  58.       title: '修改状态',
  59.       render: (_: any, record: any) => {
  60.         let editOption = [];
  61.         //这里是修改中状态
  62.         if(record.status !== 0){
  63.           editOption.push(<a key={0} style={{ marginRight: 20}} onClick={()=>changeStatus(record.id,0)}>待办</a>);
  64.         }
  65.         if( record.status !==1){
  66.           editOption.push(<a key={1}  style={{ marginRight: 20}} onClick={()=>changeStatus(record.id,1)}>完成</a>);
  67.         }
  68.         if(record.status !== 2){
  69.           editOption.push(<a key={2}  style={{marginRight: 20}} onClick={()=>changeStatus(record.id,2)}>取消</a>);
  70.         }
  71.         return editOption
  72.       },
  73.     },
  74.   ];
  75.   //这里是发送请求改变状态
  76.   const changeStatus=async(id:any,status:any)=>{
  77.     //  修改状态，调用seivice
  78.     const res=await modifyTodolistDatas({
  79.       id,
  80.       status
  81.     })
  82.     if(res.code===201){
  83.       props.dispatch({
  84.         type: 'todo/getTodolist',
  85.         payload: null,
  86.       });
  87.       message.success(res.message);
  88.     }
  89.     else{
  90.       message.error(res.message);
  91.     }
  93.     //判断执行结果
  95.   }
  96.   return (
  97.     <PageHeaderWrapper>
  98.       <ProTable
  99.         columns={columns}
  100.         rowKey="key"
  101.         pagination={{
  102.           showQuickJumper: true,
  103.         }}
  104.         dataSource={props.todo.todoList}
  105.         search={false}
  106.         dateFormatter="string"
  107.         headerTitle="待办事项列表"
  108.         toolBarRender={() => [
  109.           ,
  110.           <Button type="primary" key="primary" onClick={formHandle}>
  111.             <PlusOutlined /> 新建
  112.           </Button>,
  113.         ]}
  114.       />
  116.       <Modal footer={null} onCancel={cancelhandle} title="待办事项列表" visible={modelFlag}>
  117.         <ProForm
  118.           onFinish={(values: any) => {
  119.             sumbmithandle(values);
  120.           }}
  121.         >
  122.           <ProFormText name="todoList" label="标题" rules={[{ required: true }]} />
  123.         </ProForm>
  124.       </Modal>
  125.     </PageHeaderWrapper>
  126.   );
  127. };
  129. export default connect(({ todo }: any) => ({ todo }))(PeperWork);