Skip to main content

基础表格 BaseList

BaseList 是一个功能强大、可复用的基础列表组件，集成了查询表单、功能操作区、分页、多选操作等常见数据展示功能。

✅ 表格 Demo 示例 （完整的增删改查）​

Base List

✅ 对话框：新增/修改 Demo 示例​

📚数据处理 wrap.jsx​

import React, { useEffect, useRef } from "react";

import message from "@/utils/message";

import { requestSaveUser, requestUpdateUser } from "@/services/user";

import Index from "./index";

function BannerListWrap({ data, onCancel, open, title }) {
const ref = useRef();

async function onSubmit(values) {
 if (values?.uuid) {
   //编辑  调用接口的方法需要自定义
   const res = await requestUpdateUser(values);

   if (res?.code === 200) {
     message.success(res?.msg);

     //关闭Modal
     onCancel();
   } else {
     message.error(res?.msg);
   }
 } else {
   //新增 调用接口的方法需要自定义
   values?.uuid && delete values["uuid"];

   const res = await requestSaveUser(values);

   if (res?.code === 200) {
     message.success(res?.msg);

     //关闭Modal
     onCancel();
   } else {
     message.error(res?.msg);
   }
 }
}

useEffect(() => {
 if (data) {
   ref.current?.form?.reset(data);
 } else {
   ref.current?.form?.reset(ref.current?.formDefaultValue);
 }
}, [data]);

return (
 <Index
   onCancel={onCancel}
   onSubmit={onSubmit}
   open={open}
   ref={ref}
   title={title}
 />
);
}

export default BannerListWrap;

📚 数据展示 index.jsx​

import React, { forwardRef, useImperativeHandle, useRef } from 'react';
import { useForm } from 'react-hook-form';

import { FormComponents } from '@/components/system/FormComponents';
import { Intl } from '@/components/system/Intl';
import { Modal } from '@/components/system/Modal';
import { Button } from '@/components/ui/Button';
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/Form';
import { Input } from '@/components/ui/Input';

function UserManageModal({ onSubmit = () => null, title = '', open = false, onCancel = () => void 0 }, ref) {
  const formDefaultValue = useRef({
    uuid: '',
    status: '1',
    mobile: '',
    email: '',
    username: '',
    raw_password: '',
    password: '',
    invite_code: '',
  });

  const form = useForm({
    defaultValues: formDefaultValue.current,
    mode: 'onChange', // 可以是 'onChange'、'onSubmit' 等
  });

  useImperativeHandle(ref, () => ({
    form,
    formDefaultValue,
  }));

  return (
    <Modal onCancel={onCancel} open={open} title={title} width={300}>
      {() => (
        <Form {...form}>
          <form className="space-y-6 flex flex-col rounded-md p-4" onSubmit={form.handleSubmit(onSubmit)}>
            <FormField
              control={form.control}
              name="uuid"
              render={({ field }) => (
                <FormItem>
                  <FormLabel></FormLabel>
                  <FormControl className="hidden">
                    <Input maxLength={20} {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name="status"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>{Intl.v('状态')}</FormLabel>
                  <FormControl>
                    <FormComponents init="SystemUserStatus" type="select" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name="mobile"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>{Intl.v('手机号')}</FormLabel>
                  <FormControl>
                    <Input maxLength={20} {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
              rules={{
                required: Intl.v('请输入手机号'),
              }}
            />

            <FormField
              control={form.control}
              name="email"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>{Intl.v('邮箱')}</FormLabel>
                  <FormControl>
                    <Input maxLength={20} {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
              rules={{
                required: Intl.v('请输入邮箱'),
              }}
            />

            <FormField
              control={form.control}
              name="username"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>{Intl.v('昵称')}</FormLabel>
                  <FormControl>
                    <Input maxLength={20} {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
              rules={{
                required: Intl.v('请输入昵称'),
              }}
            />

            <FormField
              control={form.control}
              name="raw_password"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>{Intl.v('密码')}</FormLabel>
                  <FormControl>
                    <Input maxLength={20} {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
              rules={{
                required: Intl.v('请输入密码'),
              }}
            />

            <FormField
              control={form.control}
              name="invite_code"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>{Intl.v('邀请码')}</FormLabel>
                  <FormControl>
                    <Input maxLength={20} {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
              rules={{
                required: Intl.v('请输入邀请码'),
              }}
            />

            <Button className="w-full">{Intl.v('保存')}</Button>
          </form>
        </Form>
      )}
    </Modal>
  );
}

export default forwardRef(UserManageModal);

✅ 对话框：查看 Demo 示例​

import React from 'react';

import { Intl } from '@/components/system/Intl';
import { Modal } from '@/components/system/Modal';

import styles from './index.scss';

function UserManageViewModal({ data = {}, title = '', open = false, onCancel = () => void 0 }) {
  return (
    <Modal onCancel={onCancel} open={open} title={title}>
      {() => (
        <div className={styles.UserManageViewModal}>
          <div>
            <label>{Intl.v('用户名')}</label>
            <div>{data.username}</div>
          </div>
        </div>
      )}
    </Modal>
  );
}

export default UserManageViewModal;

📦 Props 参数​

参数名类型默认值说明
serviceFunc(params, callback) => void() => {}数据请求函数，必须调用 callback({ dataSource, total }) 返回数据
functionControlTableTitlestring'查询表格'功能区域标题
columnsany[][]表格列配置，传入给 ListBody
optionButtonGroupReactNode[][]功能操作按钮组
searchParamListISearchParam[][]查询表单配置项
functionControlHidebooleanfalse是否隐藏功能操作栏
topPaginationbooleanfalse是否显示顶部分页
bottomPaginationbooleantrue是否显示底部分页
isShowRowTitleNamestring''多选项中用于显示的字段名（如 name）
noSearchbooleanfalse是否在初始化时禁止自动触发查询
classNamestring-自定义样式类名
openRowSelectionbooleanfalse是否启用多选行

🔧 方法（通过 ref 暴露）​

使用 ref 可以访问以下方法和状态：

const ref = useRef<any>();

<BaseList ref={ref} {...props} />;

// 访问方法
ref.current?.onSearch(); // 重新触发搜索
ref.current?.onChangeRowSelection('uuid1,uuid2'); // 删除多选项
console.log(ref.current?.state); // 获取当前状态
方法名说明
onSearch(condition?)手动触发查询（传参可覆盖）
onChangeRowSelection(ids)删除指定 uuid 的多选项
state当前组件内部状态

🧮 状态（state 类型）​

interface IStateProps {
  isHideFormItem: boolean;
  tableDensity: string;
  loading: boolean;
  dataSource: any[];
  selectedRows: any[];
  selectedRowKeys: any[];
  isShowRowTitleName: string;
  Condition: Record<string, any>;
  current: number;
  pageSize: number;
  total: number;
}