ant design pro 6.0列表渲实践demo

已于 2024-05-26 16:42:51 修改
阅读量265 收藏 4
点赞数 10
分类专栏： React 文章标签： javascript 前端 react.js
于 2024-05-26 16:30:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nxg0916/article/details/139201298
版权

ant design pro 用户列表渲实践

用户页面：

src\pages\Admin\User\index.tsx

import { PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns, ProDescriptionsItemProps } from '@ant-design/pro-components';
import {
    PageContainer,
    ProDescriptions,
    ProTable,
} from '@ant-design/pro-components';
import { Button, Drawer, Modal, message,Spin  } from 'antd';

import React, { useEffect, useRef, useState,useCallback } from 'react';

import CreateModal from "./components/CreateModal";
import UpdateModal from "./components/UpdateModal";
import ReadModal from "./components/ReadModal";

import {
    addUserByUsingPOST,
    deleteUserByUsingPOST,
    updateUserByUsingPOST,
    listUserVOByPageUsingGET,
} from "@/services/user/userController";
import { useModel } from "@umijs/max";

import { BASEENTITYCOLUMN, UPDATEUSERCOLUMN, USERPAGESIZE,USERENTITYCOLUMN } from "@/constant/user";


/**
 * 用户管理
 * @returns
 */
const UserManager: React.FC = () => {

    /**
  * @en-US Pop-up window of new window
  * @zh-CN 新建窗口的弹窗
  *  */
    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<UserEntityAPI.UserVO>();

    const [readModalOpen, handleReadModalOpen] = useState<boolean>(false);

    //分页
    const [formValue, setFormValue] = useState<UserEntityAPI.UserVO[]>([]);
    const [total, setTotal] = useState<number>(0)
    const [isLoading, setIsLoading] = useState(true);

    //获取用户信息
    const getFormInfo = async (pageNum = 1, pageSize = USERPAGESIZE) => {
        const res = await listUserVOByPageUsingGET({
            pageNum: pageNum,
            pageSize: pageSize,
            // userId: "userId",
            // userType: 'sys_user',
        })
        setTotal(res?.total || 0)
        // console.log(res?.data);
        setFormValue(res?.data || []);
        setIsLoading(false);
    }

    //点击详情
    const readClickStatus = useCallback((record:UserEntityAPI.UserVO) => {
        handleReadModalOpen(true);
        setCurrentRow(record);
      }, [handleReadModalOpen, setCurrentRow]);

      //点击修改
      const updateClickStatus = useCallback((record:UserEntityAPI.UserVO) => {
        handleUpdateModalOpen(true);
        setCurrentRow(record);
      }, [handleUpdateModalOpen, setCurrentRow]);


      //点击添加
    const handleAdd = async (fields: UserEntityAPI.userAddRquestParams) => {
        const hide = message.loading('正在添加');
        try {
            await addUserByUsingPOST({
                ...fields,
                userType: 'sys_user',
            });
            hide();
            await getFormInfo();
            actionRef?.current?.reload()
            message.success('添加成功');
            if (createModalOpen) handleModalOpen(false);
            return true;
        } catch (error: any) {
            hide();
            message.error("添加失败", error?.message);
            return false;
        }
    };

    /**
      *  Delete node
      * @zh-CN 删除用户
      *
      * @param selectedRow
      */
    const handleRemove = async (selectedRow: UserEntityAPI.DeleteRequestParams) => {
        const hide = message.loading('正在删除');
        if (!selectedRow) return true;
        try {
            await deleteUserByUsingPOST({
                userId: selectedRow.userId,
            });
            hide();
            await getFormInfo();
            actionRef?.current?.reload()
            message.success('删除成功');
            return true;
        } catch (error: any) {
            hide();
            message.error("删除失败", error?.message);
            return false;
        }
    };

    //初始化
    useEffect(() => {
        // console.log("useEffect");
        getFormInfo();
        // console.log("构造函数执行完，formValue状态变化后：", formValue)
    }, []);

    //如果网络请求数据还没拿到，就先 加载中  转圈
    if (isLoading) {
        return <Spin />
    }

    /**
     * @en-US Update node
     * @zh-CN 更新用户
     *
     * @param fields
     */
    const handleUpdate = async (fields: UserEntityAPI.UserUpdateRequestParams) => {
        if (!currentRow) {
            return;
        }
        const hide = message.loading('更新中');
        try {
            await updateUserByUsingPOST({
                userId: currentRow.userId,
                ...fields,
            });
            hide();
            message.success('更新成功');
            handleUpdateModalOpen(false);
            await getFormInfo();
            actionRef?.current?.reload()
            return true;
        } catch (error) {
            hide();
            message.error('更新失败');
            return false;
        }
    };

    const columns: ProColumns<UserEntityAPI.UserVO>[] = [
        ...BASEENTITYCOLUMN,
        {
            title: '操作',
            dataIndex: 'option',
            valueType: 'option',
            render: (_, record) => [
                <Button
                    color={"blue"}
                    type={"link"}
                    key="detail"
                    onClick={() => {
                        // handleModalOpen(true);
                        // setCurrentRow(record);
                        readClickStatus(record);
                        // history.push(`/receive/record?childrenId=${record?.id}`)
                    }}
                >
                    详情
                </Button>,
                <a
                    key="modify"
                    onClick={() => {
                        // handleUpdateModalOpen(true);
                        // setCurrentRow(record);
                        updateClickStatus(record);
                    }}
                >
                    修改
                </a>,
                <Button
                    type={"text"}
                    danger={true}
                    key="config"
                    onClick={() => {
                        //提示是否删除
                        Modal.confirm({
                            title: '删除',
                            content: '确定删除吗？',
                            onOk: () => {
                                handleRemove(record)
                            }
                        })
                    }}
                >
                    删除
                </Button>,
            ],
        },
    ];
    //UPDATEUSERCOLUMN
    const updateColumn: ProColumns<UserEntityAPI.UserUpdateRequestParams>[] = [
        ...UPDATEUSERCOLUMN,
    ];

    return (
        <PageContainer>
            <ProTable<UserEntityAPI.UserVO, UserEntityAPI.PageParams>
                key="main"
                pagination={{
                    total,
                    pageSize: USERPAGESIZE,
                    onChange: async (pageNum, pageSize) => {
                        await getFormInfo(pageNum, pageSize);
                    },
                }}
                headerTitle={'用户信息'}
                actionRef={actionRef}
                rowKey="key"
                search={{
                    labelWidth: 120,
                }}
                toolBarRender={() => [
                    <Button
                        type="primary"
                        key="primary"
                        onClick={() => {
                            handleModalOpen(true);
                        }}
                    >
                        <PlusOutlined /> 新建用户
                    </Button>,
                ]}
                request={async () => ({
                    data: formValue || {},
                })}
                columns={columns}
                rowSelection={{
                    onChange: (e) => {
                        console.log("rowSelection")
                        // setSelectedRows(selectedRowKeys);
                        console.log(e);
                    },
                }}
            />
            <UpdateModal
                columns={updateColumn}
                onSubmit={async (values: UserEntityAPI.UserUpdateRequestParams) => { handleUpdate(values) }}
                onCancel={() => {
                    handleUpdateModalOpen(false);
                    if (!showDetail) {
                        setCurrentRow(undefined);
                    }
                }}
                visible={updateModalOpen}
                values={currentRow || {}}
            />

            <Drawer
                key="drawer"
                width={600}
                open={showDetail}
                onClose={() => {
                    setCurrentRow(undefined);
                    setShowDetail(false);
                }}
                closable={false}
            >
                {currentRow?.userName && (
                    <ProDescriptions<UserEntityAPI.UserVO>
                        column={2}
                        title={currentRow?.userName}
                        request={async () => ({
                            data: currentRow || {},
                        })}
                        params={{
                            id: currentRow?.userName,
                        }}
                        columns={columns as ProDescriptionsItemProps<UserEntityAPI.UserVO>[]}
                    />
                )}
            </Drawer>
            <CreateModal columns={updateColumn} onCancel={() => { handleModalOpen(false) }}
                onSubmit={async (values: UserEntityAPI.UserUpdateRequestParams) => {
                    await handleAdd(values)
                }} visible={createModalOpen} file={false} />

            <Drawer width={640}
                placement="right"
                closable={false}
                onClose={ ()=> {
                    setCurrentRow(undefined);
                    handleReadModalOpen(false)}
                }
                open={readModalOpen}>
                    <ReadModal EntityItem={currentRow} EntityColumns={USERENTITYCOLUMN}/>

            </Drawer>

        </PageContainer>
    );
}

export default UserManager;

组件

src\pages\Admin\User\components\ReadModal.tsx

import React, { useState } from 'react';
import type { DescriptionsProps } from 'antd';
import {ProColumns} from "@ant-design/pro-components";
import {ProDescriptions} from "@ant-design/pro-descriptions";
import { Avatar, Col, Divider, Drawer, List, Row,Descriptions} from 'antd';
import { USERENTITYCOLUMN } from '@/constant/user';

export type Props = {
    EntityItem: UserEntityAPI.UserVO;
    EntityColumns: ProColumns<UserEntityAPI.UserVO>[];
    visible: boolean;
  };


/**
 * 用户详情组件
 * @param props  用户详情组件
 * @returns     
 */
const ReadModal: React.FC<Props> = (props) => {
    const {EntityItem,EntityColumns} = props;
    //描述组件：用于展示用户信息
    let items: DescriptionsProps['items'] = [];
//     if(userEntityItem){
//     items = [
//         {
//           key: '1',
//           label: 'UserName',
//           children: userEntityItem.userName,
//         },
//         {
//           key: '2',
//           label: '手机号码',
//           children:  userEntityItem.photoNumber,
//         },
//         {
//             key: '2',
//             label: '性别',
//             children:  userEntityItem.sex,
//           },
//           {
//             key: '2',
//             label: 'nickName',
//             children:  userEntityItem.nickName,
//           },
//     ];
// }

//描述列表组件
  return (
    <>
      <ProDescriptions dataSource={EntityItem} columns={EntityColumns}/>
    </>
  );
};

export default ReadModal;

src\pages\Admin\User\components\CreateModal.tsx

import '@umijs/max';
import React from 'react';
import {Form,Modal} from "antd";
import {ProColumns, ProTable} from "@ant-design/pro-table/lib";
import MyUploadFile from "@/components/UploadFile";
export type Props = {
  columns: ProColumns<UserEntityAPI.UserUpdateRequestParams>[];
  onCancel: () => void;
  onSubmit: (values: UserEntityAPI.UserUpdateRequestParams) => Promise<void>;
  visible: boolean;
  file?: boolean;
};
const CreateModal: React.FC<Props> = (props) => {
  const {columns, visible, onSubmit, onCancel, file} = props;

  return (
    <Modal open={visible} onCancel={()=> onCancel?.()} footer={null}>
      {/* <div style={{ marginLeft: "20px", marginRight: "10px"}}>
        {file ? (
          <Form requiredMark={true}>
            上传附件:&nbsp;&nbsp;&nbsp;&nbsp;<MyUploadFile />
          </Form>
        ) : null}
      </div> */}
      <br/>
      <ProTable
        type={"form"}
        columns={columns}
        onSubmit={async (value: UserEntityAPI.UserUpdateRequestParams) => {
          onSubmit?.(value);
        }}
      />
    </Modal>
  );
};
export default CreateModal;

src\pages\Admin\User\components\UpdateModal.tsx

import '@umijs/max';
import React, {useEffect, useRef} from 'react';
import {Modal} from "antd";
import {ProColumns, ProTable} from "@ant-design/pro-table/lib";
import {ProFormInstance} from "@ant-design/pro-form";

export type Props = {
  values: UserEntityAPI.UserUpdateRequestParams;
  columns: ProColumns<UserEntityAPI.UserUpdateRequestParams>[];
  onCancel: () => void;
  onSubmit: (values: UserEntityAPI.UserUpdateRequestParams) => Promise<void>;
  visible: boolean;
};
const UpdateModal: React.FC<Props> = (props) => {
  const {columns, visible, onSubmit, onCancel,values} = props;
  const formRef = useRef<ProFormInstance>();
  useEffect(()=>{
    formRef.current?.setFieldsValue(values)
  })
  return (
    <Modal open={visible} onCancel={()=> onCancel?.()} footer={null}>
      <ProTable
        type={"form"}
        columns={columns}
        formRef={formRef}
        onSubmit={async (value: UserEntityAPI.UserUpdateRequestParams)=>{
          onSubmit?.(value)
        }}
      />
    </Modal>
  );
};
export default UpdateModal;

常量

src\constant\user.tsx


import { ProColumns } from "@ant-design/pro-components";
import type { DescriptionsProps } from 'antd';
export const SYSTEM_LOGO = "https://avatars.githubusercontent.com/u/103118339?v=4";
export const PAGESIZE = 3;
export const USERPAGESIZE = 6;
export const NEWSAVATAR = "https://hzh-1318734603.cos.ap-shanghai.myqcloud.com/%E6%96%B0%E9%97%BB.jpg";

export const BASEENTITYCOLUMN: ProColumns<UserEntityAPI.UserVO>[] = [
  {
    title: 'id',
    dataIndex: 'userId',
    valueType: 'index',
  },
  {
    title: '用户名',
    dataIndex: 'userName',
    valueType: 'text',
    formItemProps: {
      rules: [{
        required: true,
        message: "请输入用户名",
      }]
    }
  },
  // {
  //   title: '密码（8位以上不包含特殊字符）',
  //   hideInTable:true,
  //   hideInSearch:true,
  //   dataIndex: 'password',
  //   valueType: 'text',
  //   formItemProps: {
  //     rules: [{
  //       required: true,
  //       message: "请输入密码",
  //     },{
  //       type: "string",
  //       min: 8,
  //       message: "密码小于8位",
  //     },
  //       {
  //         pattern: /^[a-zA-Z0-9]+$/,
  //         message: "不允许包含特殊字符",
  //       }]
  //   }
  // },
  {
    title: '昵称',
    dataIndex: 'nickName',
    valueType: 'text',
    formItemProps: {
      rules: [{
        required: true,
        message: "请输入姓名",
      }]
    }
  },
  {
    title: '用户类型',
    dataIndex: 'userType',
    valueType: 'text',
    valueEnum: {
      'sys_user': {
        text: '系统用户',
        status: 'Success',
      },
      'general_user': {
        text: '普通用户',
        status: 'Success',
      },
    },
  },
  {
    title: '性别',
    dataIndex: 'sex',
    hideInTable: false,
    valueType: 'text',
    valueEnum: {
      '0': {
        text: '男',
        status: 'Success',
      },
      '1': {
        text: '女',
        status: 'Success',
      },
    },
  },
  {
    title: '角色',
    dataIndex: 'userRole',
    hideInForm: true,
    valueEnum: {
      'admin': {
        text: '管理员',
        status: 'Success',
      },
      'children': {
        text: '用户',
        status: 'Success',
      },
    },
  },
  {
    title: '状态',
    dataIndex: 'status',
    hideInTable: true,
    valueType: 'text',
    valueEnum: {
      '0': {
        text: '正常',
        status: 'Success',
      },
      '1': {
        text: '禁用',
        status: 'Success',
      },
    },
  },
  {
    title: '手机号码',
    dataIndex: 'phoneNumber',
    hideInTable: true,
    valueType: 'text',
  },
  {
    title: '最后登录ip',
    dataIndex: 'loginIp',
    hideInTable: true,
    valueType: 'text',
  },
  {
    title: '最后登录时间',
    dataIndex: 'loginTime',
    hideInTable: true,
    valueType: 'text',
    sorter: (a, b) => a.loginTime - b.loginTime,
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    valueType: 'dateTime',
    hideInForm: true,
    sorter: (a, b) => a.createTime - b.createTime,
  },
  {
    title: '备注',
    dataIndex: 'remark',
    hideInTable: true,
    valueType: 'textarea',
  },
]


export const UPDATEUSERCOLUMN: ProColumns<UserEntityAPI.UserUpdateRequestParams>[] = [
  {
    title: 'id',
    dataIndex: 'userId',
    valueType: 'index',
  },
  {
    title: '用户名',
    dataIndex: 'userName',
    valueType: 'text',
    formItemProps: {
      rules: [{
        required: true,
        message: "请输入用户名",
      }]
    }
  },
  {
    title: '昵称',
    dataIndex: 'nickName',
    valueType: 'text',
    formItemProps: {
      rules: [{
        required: true,
        message: "请输入姓名",
      }]
    }
  },
  {
    title: '性别',
    dataIndex: 'sex',
    hideInTable: false,
    valueType: 'text',
    valueEnum: {
      '0': {
        text: '男',
        status: 'Success',
      },
      '1': {
        text: '女',
        status: 'Success',
      },
    },
  },
  {
    title: '角色',
    dataIndex: 'admin',
    hideInForm: true,
    valueEnum: {
      'true': {
        text: '超级管理员',
        status: 'Success',
      },
      'false': {
        text: '用户',
        status: 'Success',
      },
    },
  },
  {
    title: '手机号码',
    dataIndex: 'phoneNumber',
    hideInTable: true,
    valueType: 'text',
  },
  {
    title: '邮箱',
    dataIndex: 'email',
    hideInTable: true,
    valueType: 'text',
  },
  {
    title: '状态',
    dataIndex: 'status',
    hideInTable: true,
    valueType: 'text',
    valueEnum: {
      '0': {
        text: '正常',
        status: 'Success',
      },
      '1': {
        text: '禁用',
        status: 'Success',
      },
    },
  },
  {
    title: '备注',
    dataIndex: 'remark',
    hideInTable: true,
    valueType: 'textarea',
  },
]

/**
 * title: '文本',
          key: 'text',
          dataIndex: 'id',
          ellipsis: true,
          copyable: true,
 */
export const USERENTITYCOLUMN: ProColumns<UserEntityAPI.UserVO>[] = [
  {
    title: '用户id',
    key: "text",
    dataIndex: 'userId',
    ellipsis: true,
    copyable: true,
  },
  {
    title: '用户名',
    dataIndex: 'userName',
    valueType: 'text',
  },
  {
    title: '昵称',
    dataIndex: 'nickName',
    valueType: 'text',
  },
  {
    title: '性别',
    dataIndex: 'sex',
    hideInTable: false,
    valueType: 'text',
    valueEnum: {
      '0': {
        text: '男',
        status: 'Success',
      },
      '1': {
        text: '女',
        status: 'Success',
      },
    },
  },
  {
    title: '角色',
    key: 'userRole',
    dataIndex: 'admin',
    valueType: 'select',
    valueEnum: {
      'true': {
        text: '管理员',
        status: 'Success',
      },
      'children': {
        text: '用户',
        status: 'Success',
      },
    },
  },
  {
    title: '手机号码',
    dataIndex: 'phoneNumber',
    hideInTable: false,
    valueType: 'text',
  },
  {
    title: '邮箱',
    dataIndex: 'email',
    hideInTable: false,
    valueType: 'text',
  },
  {
    title: '状态',
    dataIndex: 'status',
    hideInTable: false,
    valueType: 'text',
    valueEnum: {
      '0': {
        text: '正常',
        status: 'Success',
      },
      '1': {
        text: '禁用',
        status: 'Success',
      },
    },
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    hideInTable: false,
    valueType: 'date',
    fieldProps: {
      format: 'YYYY.MM.DD',
    },
  },
  {
    title: '创建人',
    dataIndex: 'createBy',
    hideInTable: false,
    valueType: 'text',
  },
  {
    title: '修改时间',
    dataIndex: 'updateTime',
    hideInTable: false,
    valueType: 'text',
  },
  {
    title: '修改人',
    dataIndex: 'updateBy',
    hideInTable: false,
    valueType: 'text',
  },
  {
    title: '最后登录ip',
    dataIndex: 'loginIp',
    hideInTable: false,
    valueType: 'text',
  },
  {
    title: '最后登录时间',
    dataIndex: 'loginTime',
    hideInTable: false,
    valueType: 'date',
    fieldProps: {
      format: 'YYYY.MM.DD',
    },
  },
  {
    title: '备注',
    dataIndex: 'remark',
    hideInTable: false,
    valueType: 'textarea',
  },
]

API接口

用户接口
src\services\user\userController.ts

import { request } from '@umijs/max';


/** listUserVOByPage POST /api/user/list */

export async function listUserVOByPageUsingGET(
  params: UserEntityAPI.BaseUserRequestPageParams,
  options?: { [key: string]: any },
): Promise<UserEntityAPI.BaseResponsePageUserVO> {
  return request<UserEntityAPI.BaseResponsePageUserVO>('/api/user/list', {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
    },
    params: params,
    ...(options || {}),
  });
}

/** addUser POST /api/user/add */
export async function addUserByUsingPOST(
  body: UserEntityAPI.userAddRquestParams, 
  options?: { [key: string]: any }) {
  return request<UserEntityAPI.BaseResponse>('/api/user/add', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    data: body,
    ...(options || {}),
  });
}

/** deleteUser POST /api/user/delete */
export async function deleteUserByUsingPOST(
  body: UserEntityAPI.DeleteRequestParams,
  options?: { [key: string]: any },
) {
  return request<UserEntityAPI.BaseResponse>('/api/user/del', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    data: body,
    ...(options || {}),
  });
}

/** updateUser POST /api/user/update */
export async function updateUserByUsingPOST(
  body: UserEntityAPI.UserUpdateRequestParams,
  options?: { [key: string]: any },
) {
  return request<UserEntityAPI.BaseResponse>('/api/user/update', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    data: body,
    ...(options || {}),
  });
}

/** updateUser POST /api/user/update */
export async function updateUserPasswordByUsingPOST(
  body: UserEntityAPI.UpdatePasswordRequestParams,
  options?: { [key: string]: any },
) {
  return request<UserEntityAPI.BaseResponse>('/api/profile/updatePwd', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    data: body,
    ...(options || {}),
  });
}

export async function updateProfileByUsingPOST(
  body: UserEntityAPI.UserUpdateRequestParams,
  options?: { [key: string]: any },
) {
  return request<UserEntityAPI.BaseResponse>('/api/profile/update', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    data: body,
    ...(options || {}),
  });
}

类型
src\services\user\typings.d.ts

/**
 * @description 用户管理
 */
declare namespace UserEntityAPI {

    /**
     * 基本请求响应参数
     */
    type BaseResponse = {
        code?: number;
        data?: any;
        msg?: string;
    };


    /**
     * 用户分页请求参数
     * @name BaseUserRequestPageParams
     * @description 用户分页请求参数
     * @typedef BaseUserRequestPageParams
     * @property {Integer} id - 用户ID
     * @property {string} userId - 用户ID
     */
    type BaseUserRequestPageParams = {
        pageSize?: number;
        pageNum?: number;
        orderByColumn?: string;
        isAsc?: string;

        id?: number;
        userId?: string;
        userName?: string;
        userType?: string;
        nickName?: string;
        phoneNumber?: string;
        email?: string;
    }


    /**
      * userList
      * @name userList
      * @description 获取用户列表
      * @request GET:/api/user/list
      * @response `200` `userList`
      * @throws 400
      * @throws 500
      * @throws default
      */
    export type BaseResponsePageUserVO = {
        data?: UserVO[];
        total?: number;
        code?: number;
        msg?: string;
    }

    /**
      * 分页查询参数
      * @name PageParams
      * @description 分页查询参数
      * @typedef PageParams
      * @property {Integer} pageSize - 分页大小
      * @property {Integer} pageNum - 当前页数
      * @property {string} orderByColumn - 排序列
      * @property {string} isAsc - 排序的方向desc或者asc
      */
    type PageParams = {
        pageSize?: Integer;
        pageNum?: Integer;
        // orderByColumn?: string;
        // isAsc?: string;
    };

    /**
     * 查询用户个人信息
     * @name userInfo
     * @description 查询用户个人信息
     */
    type UserVO = {
        avatar?: string;
        createBy?: string;
        createTime?: Date;
        delFlag?: string;
        email?: string;
        loginIp?: string;
        loginTime?: Date;
        nickName?: string;
        phoneNumber?: string;
        remark?: string;
        sex?: string;
        status?: string;
        updateBy?: string;
        updateTime?: string;
        userId?: number;
        userName?: string;
        userType?: string;

        roles: any;
        roleIds: string[];
        roleId: string;
        admin: boolean;
    };

    /**
      * 用户添加参数
      * @name userAddParams
      * @description 用户添加参数
      * @typedef userAddParams
      * @property {Integer} userId - 用户ID
      * @property {string} userName - 用户名
      * @property {string} userType - 用户类型
      * @property {string} nickName - 昵称
      * @property {string} phoneNumber - 手机号
      * @property {string} email - 邮箱
      * @property {string} avatar - 头像
      * @property {string} createBy - 创建者
      * @property {Date} createTime - 创建时间
      */
    export type userAddRquestParams = {
        userId?: number;
        userName?: string;
        userType?: string;
        nickName?: string;
        phoneNumber?: string;
        email?: string;
        avatar?: string;
        // createBy?: string;
        // createTime?: string;
        delFlag?: string;
        // loginIp?: string;
        // loginTime?: Date;
        remark?: string;
        sex?: string;
        status?: string;
        // updateBy?: string;
        // updateTime?: string;
    }

    /**
     * 删除用户请求参数
     * @name DeleteRequest
     * @description 删除用户请求参数
     * @typedef DeleteRequest
     * @property {Integer} id - 用户ID
     */
    type DeleteRequestParams = {
        userId?: number;
    };
    // type DeleteRequestParams = {
    //   userIds?: number[];
    // };

    /**
     * 更新用户请求参数
     * @name UserUpdateRequestParams
     * @description 更新用户请求参数
     */
    type UserUpdateRequestParams = {
        userId?: number;
        userName?: string;
        userType?: string;
        nickName?: string;
        phoneNumber?: string;
        email?: string;
        avatar?: string;
        // createBy?: string;
        // createTime?: Date;
        delFlag?: string;
        // loginIp?: string;
        // loginTime?: Date;
        remark?: string;
        sex?: string;
      };

     /**
      * 修改密码请求参数
      * @name UpdatePasswordRequestParams
      * @description 修改密码请求参数
      * @typedef UpdatePasswordRequestParams
      * @property {string} oldPassword - 旧密码
      * @property {string} newPassword - 新密码
      */ 
    type UpdatePasswordRequestParams = {
        oldPassword?: string;
        newPassword?: string;
        newPasswordAgain?: string;
    };

    /**
     * --------------------------------------example----------------------------------------------------
     */



}

src\services\user\index.ts

import * as userController from './userController';
export default {
  userController,
};

效果图

在这里插入图片描述

查看详情：
在这里插入图片描述

新增：
在这里插入图片描述
修改：
在这里插入图片描述

所遇所思
关注
  • 10
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
ant design pro动态菜单
03-30
在Ant Design Pro中实现动态菜单是一项常见的需求，尤其是在构建企业级后台管理系统时。Ant Design Pro是一个基于Ant Design和React的高级UI框架，它提供了一系列组件和解决方案，帮助开发者快速搭建和定制后台应用...
ant design pro 入门demo
03-02
通过分析和实践这个入门Demo，你可以逐步掌握Ant Design Pro的使用，并将其应用于实际项目中，提升你的前端开发能力。记得不断查阅官方文档，同时参与社区讨论，以便及时获取最新的开发技巧和最佳实践。
ant-design 中的卡片样式
qq_39990827的博客
06-06 1万+
代码样式： <template> <div style="background-color: #ececec; padding: 20px;"> <a-row> <a-card title="Card title" :bordered=false> <p>card co...
Ant Design 中List 列表的使用
热门推荐
Gloria的博客
01-12 4万+
**Ant Design 中List 列表的使用**实现的功能List列表样式部分List列表的APIPagination分页 API![在这里插入图片描述](https://img-blog.csdnimg.cn/20190110150541651.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_...
如何实现ant desgin of Angular 的卡片列表
记而行之，薪火已承
07-08 500
<nz-content>Content <div nz-row [nzGutter]="8"> <div *ngFor="let item of cardList let i=index"> <div nz-col [nzSpan]="8"> <nz-card nzTitle="Card title"> ...
antdpro学习笔记（一）
taylorzun的博客
08-29 1万+
在玩了一段时间antd后，又发现他还有个antdpro版，相比较而言后者功能更强大一些，对比一下在官网的演示demo就可以发现，后者的功能更偏向于实用方向以及对业务处理方面。而且在代码的实现方式上两者也有很大区别。本文不作比较，只是记录上手antdpro的过程及自己的理解。 1.项目的入口为src/index.js文件： import './polyfill'; import dva fro...
Ant Design Pro 前端初始化模板
06-26
该模板由Ant Design Pro官网下载并做了简单修改（只移除了国际化），其它未改。 建议从Ant Design Pro官网下载，并结合《Java知识点整理 12 — 前端 Ant Design Pro 初始化模板使用》这篇文章搭配使用，进行模板的...
AntDesignPro开发手册.doc
12-13
AntDesignPro 开发手册 AntDesignPro 是一个前端设计解决方案，由蚂蚁金服体验技术部出品/维护。核心技术组成包括 ES2015+ JavaScript 语言的新标准、React 用于构建用户界面的 JavaScript 库、dva 是基于(redux...
HTML_表单 和 表单案例
secret010的博客
07-05 246
【代码】HTML_表单 和 表单案例。
Vue前端打包
weixin_63680330的博客
07-04 326
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
什么是防抖和节流？如何理解它们并在不同的场景条件下灵活运用？
最新发布
Vinca@的博客
07-08 500
防抖（Debouncing）和节流（Throttling）是两种常见的性能优化技术，常用于控制某些操作（例如事件处理器）的频率，从而减少资源消耗并提高性能。防抖：在事件停止触发后的指定时间内执行函数。适用于需要等用户停止操作后再处理事件的场景。节流：在指定时间间隔内最多执行一次函数。适用于需要限制函数执行频率的场景。滚动停止后的操作：使用防抖。滚动过程中的持续操作：使用节流。根据具体需求选择适合的优化技术可以有效提高应用性能和用户体验。
Vue 3集成krpano 全景图展示
Mr丶GUO
07-06 345
Vue 3集成krpano 全景图展示，需要借助官方工具进行制作注意事项：vue@cli3没有static，需要放在public目录下。
lightchart 和百度echarts 有什么区别, 各自优势是什么
huanghm88的专栏
07-08 126
总体而言，Lightchart和百度Echarts都是强大的图表库，选择使用哪个取决于具体的需求和个人偏好。如果您对界面简洁和定制化有较高要求，可以选择Lightchart；社区活跃：百度Echarts拥有广泛的用户群体和开发者社区，用户可以通过社区获取到丰富的文档、教程和示例，解决问题和获取帮助。易于使用：Lightchart提供了方便易用的API和丰富的文档和示例，使用户能够快速上手并灵活使用图表库。成熟稳定：百度Echarts已经发布了多个版本，经过了长时间的发展和优化，具有较高的稳定性和可靠性。
JS混淆基本类型和原理
朴拙科技的博客
07-06 556
混淆技术为JS代码提供了一定程度的保护，但同时也给代码的维护和逆向工程带来了挑战。了解和掌握这些混淆技术的原理和解析方法，可以帮助开发者更好地保护或理解JS代码。然而，需要注意的是，混淆并不是万无一失的安全措施，它更多的是增加了攻击者理解代码的难度。在进行逆向工程时，应始终遵守法律法规，尊重知识产权，不要用于非法目的。
vue3+ts项目中.env配置环境变量与情景配置
我愿化作繁星
07-03 934
就是在编码过程中应用这些自定义环境变量的时候，给出的智能提示。src目录下创建一个或者env.d.ts文件src同级别types目录下创建文件env.d.ts// 更多环境变量...在文件中专门用于处理项目src文件中的TypeScript配置文件，include配置项加入文件：(会提示自定义设置的环境变量)// ...// 第一种方式对应配置"vite-env.d.ts", // 或者 "env.d.ts"// 第二种方式对应配置。
vue2 img src 无法显示问题
guoruijun_2012_4的专栏
07-05 175
3、import这样写。2、data这样定义。
【VUE】 深入理解 Vue 动态路由：简介、实际开发场景与代码示例
九日的博客
07-04 376
在传统的路由配置中，我们需要在初始化 Vue 实例时定义所有的路由。但在实际应用中，特别是涉及权限管理、模块懒加载等场景，我们可能需要根据用户的权限或其它条件动态添加或修改路由。Vue Router 提供的动态路由功能正是为了解决这些问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

所遇所思

你的鼓励将是我的原动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值