ant design pro 6.0列表渲实践demo

news2024/11/17 19:50:59

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,
};

效果图

在这里插入图片描述

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1697569.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

JAVA方法引用,异常,File,IO流知识总结

文章目录 JAVA第六周学习笔记方法引用引用静态方法引用成员方法引用构造方法其他调用方式使用类名引用成员方法引用数组的构造方法 异常作用处理方式常见成员方法抛出异常finally自定义异常 File路径构造方法**判断、获取****创建 、删除****获取并遍历**练习 IO流体系字节流Fi…

软件设计师备考笔记(十):网络与信息安全基础知识

文章目录 一、网络概述二、网络互连硬件&#xff08;一&#xff09;网络的设备&#xff08;二&#xff09;网络的传输介质&#xff08;三&#xff09;组建网络 三、网络协议与标准&#xff08;一&#xff09;网络的标准与协议&#xff08;二&#xff09;TCP/IP协议簇 四、Inter…

Linux基础(八):计算机基础概论

本篇博客简单介绍计算机的基础知识&#xff0c;为后续学习做个铺垫。 目录 一、计算机的基本组成 1.1 计算机组成五大部件 1.1.1 运算器&#xff08;Arithmetic Logic Unit&#xff0c;ALU&#xff09; 1.1.2控制器 &#xff08;Control Unit&#xff0c;CU&#xff09; …

详解 Cookies 和 WebStorage

Cookies 和 WebStorage Cookies 和 WebStorageCookies简要介绍操作 Cookies&#xff08;document.cookie&#xff09;不足之处 WebStorage简要介绍LocalStorage Vs. SessionStorage操作 WebStorage 三种数据存储方式的对比分析共性差异 REFERENCES Cookies 和 WebStorage Cook…

某钢铁企业数字化转型规划案例(114页PPT)

案例介绍&#xff1a; 该钢铁企业的数字化转型案例表明&#xff0c;数字化转型是钢铁企业应对市场竞争、提高生产效率、降低成本、优化资源配置和降低能耗排放的重要手段。通过引入先进的技术和管理理念&#xff0c;加强员工培训和人才引进&#xff0c;企业可以成功实现数字化…

【Java】欸...?我学集合框架?真的假的?

【Java】欸…&#xff1f;我学集合框架&#xff1f;真的假的&#xff1f; Java集合框架 概述 Java集合框架主要由以下几个部分组成&#xff1a; 接口&#xff08;Interfaces&#xff09;&#xff1a;定义了集合的基本操作&#xff0c;如添加、删除、遍历等。实现&#xff0…

【wiki知识库】01.wiki知识库前后端项目搭建(SpringBoot+Vue3)

&#x1f4dd;个人主页&#xff1a;哈__ 期待您的关注 &#x1f33c;环境准备 想要搭建自己的wiki知识库&#xff0c;要提前搭建好自己的开发环境&#xff0c;后端我使用的是SpringBoot&#xff0c;前端使用的是Vue3&#xff0c;采用前后端分离的技术实现。同时使用了Mysql数…

2 使用香橙派AIpro报错 No module named ‘acllite utils‘

当使用jupyter运行香橙派的notebooks下面的案例的时候启动使用jupyter lab 然后自动跳转到jupyter页面。如下图: 这是自动跳转过来的。然后运行下面的包的导入后报错: 报错为No module named ‘acllite utils’,那么我们打开notebooks文件夹下面的start_notebooks.sh文件:…

【全开源】多功能投票小程序(ThinkPHP+FastAdmin+Uniapp)

打造高效、便捷的投票体验 一、引言 在数字化快速发展的今天&#xff0c;投票作为一种常见的决策方式&#xff0c;其便捷性和效率性显得尤为重要。为了满足不同场景下的投票需求&#xff0c;我们推出了这款多功能投票小程序系统源码。该系统源码设计灵活、功能丰富&#xff0…

分享:怎么才能保证大数据查询的准确性?

随着大数据应用到金融风控领域&#xff0c;大数据越来越重要了&#xff0c;很多朋友在查大数据的时候都会遇到一个问题&#xff0c;那就是自己查询的大数据什么信息都没有&#xff0c;要么就是很少&#xff0c;这是什么原因呢?要怎么才能保证大数据查询的准确性呢?下面小编就…

有什么免费视频翻译软件?安利5款视频翻译软件给你

随着“跨文化交流”话题的热度不断攀升&#xff0c;越来越多的视频内容跨越国界&#xff0c;触及全球观众。 在这一趋势下&#xff0c;视频翻译行业迎来了巨大的发展机遇。然而&#xff0c;面对众多的视频翻译工具&#xff0c;如何挑选出最合心意的那款呢&#xff1f; 现在&a…

RPA+AI 应用案例集合:自动推流直播

使用场景&#xff1a; 自动定时推流直播 使用技术&#xff1a; python playwright 每个解决一个小问题 During handling of the above exception, another exception occurred:Traceback (most recent call last): File "D:\pythonTryEverything\putdonwphone\not_watch_…

Vue.Draggable:强大的Vue拖放组件技术探索

一、引言 随着前端技术的不断发展&#xff0c;拖放&#xff08;Drag-and-Drop&#xff09;功能已经成为许多Web应用不可或缺的一部分。Vue.js作为现代前端框架的佼佼者&#xff0c;为开发者提供了丰富的生态系统和强大的工具链。Vue.Draggable作为基于Sortable.js的Vue拖放组件…

代码随想录算法训练营第三十五天 | 122.买卖股票的最佳时机 II、55.跳跃游戏、45.跳跃游戏 II

目录 122.买卖股票的最佳时机 思路 代码 55.跳跃游戏 思路 代码 45.跳跃问题 II 思路 代码 122.买卖股票的最佳时机 本题解法很巧妙&#xff0c;大家可以看题思考一下&#xff0c;在看题解。 代码随想录 思路 贪心这种东西&#xff0c;毫无章法可言&#xff0c; 完全…

c++引用和内联函数

一、引用 1.引用概念 引用不是新定义一个变量&#xff0c;而是给已存在变量取了一个别名&#xff0c;编译器不会为引用变量开辟内存空 间&#xff0c;它和它引用的变量共用同一块内存空间。&#xff08;引用类型必须和引用实体是同种类型的&#xff09;&#xff0c;如&#x…

漫谈企业信息化安全-综述

一、前言 一直以来想写一些文章&#xff0c;谈一谈企业信息化过程中的安全问题及对策。 随着信息技术的不断发展和普及&#xff0c;特别是今年来移动办公、云服务等等新的工作模式和新的信息技术的应用&#xff0c;企业信息化已经成为提升竞争力、促进创新和发展的重要途径。…

QT小项目:实现远程登录数据库功能(下一章实现主界面菜单设计)

一、环境 1、下载 vs_redist.x64和mysql-connector-c8.0.27-winx64.msi(这个依赖于前者)。 mysql-connector-c8.0.27-winx64.msi vs_redist.x64 二、将程序的数据库登录部分修改 1、这里新增一个控件方便客户端输入ip地址 2、打包项目&#xff0c;步骤参考 QT 项目打包 3、将…

揭秘 淘宝死店采集私信筛选,号称日赚500+

淘宝死店采集工具为电子商务创业者揭示了一个领域的新机遇&#xff0c;通过提供一系列深入分析和资源挖掘的功能&#xff0c;展现了从失败中寻找成功之道的独特方法论。以下是如何通过这种工具寻找电商平台中的隐含机会的几个关键方面&#xff1a; 分析失败的深层原因&#x…

AbMole - 肿瘤发展与免疫器官的“舞蹈”:一场细胞层面的时间赛跑

在生物医学领域&#xff0c;肿瘤与免疫系统之间的相互作用一直是研究的热点话题。肿瘤细胞不是孤立存在的&#xff0c;它们与宿主的免疫系统进行着一场复杂的“舞蹈”。 最近&#xff0c;一项发表在《Molecular & Cellular Proteomics》杂志上的研究&#xff0c;为我们揭开…

kube-apiserver内存占用过多 go tool pprof 入门

目录 环境问题排查1、kube-apiserver %CPU 146 正常&#xff0c;%MEM 高达70&#xff0c;&#xff0c;load average 400&#xff0c;出现kswapd0进程。2、k describe node 看到 SystemOOM3、是否大量连接导致&#xff1f;4、通过prom查看指标5、访问K8s API6、pprof 火焰图 解决…