ErpPage

开发

yarn install
yarn dev

打包

yarn install

启动演示

cd exmaple
yarn install
yarn dev

TODO

2026-01-05

1. column_list中缺少 编辑视图 - 【字段权限】的字段开关；
2. column_list 是否有字段icon的设置？
3. 视图编辑-【数据过滤】，如何确定可用于过滤的字段，通过 allow_conditions 是否为空判断么？
4. 视图编辑-【基本信息】，如何确定哪些字段支持二级分组，该分组字段如何排序；
5. 测试数据中 allow_order 似乎无效，allow_order = 0时仍有 order。脏数据
6. 部分Field类型定义不明确，readme中的搜索条件与allow_conditions中不一致。例如： DateField props_type 缺少 【精度】 配置（已有的format是显示格式）；ImageField/FileField 缺上传接口。
7. 现有接口 type_props 没有数据，且类型定义有异常，当前是[],期望Record<string,any>。
8. adminapi/view_manage/add，adminapi/view_manage/del 新建/删除 接口 目前没有效果
9. 如何获取视图元数据（新增时需要 视图元数据）

column_list 结构参考：

type Column = {
  name: string; // 字段名
  title: string; // 字段标题
  icon: string; // 字段图标
  type: FieldType; //字段类型
  type_props: Record<string, any>; //字段属性
  group: boolean; // 是否支持分组

  accessible: boolean; //是否有字段权限
  searchable: boolean; //是否用于搜索
  search_index: number; //搜索字段顺序
  search_visible: boolean; //搜索字段可见性
  search_locked: boolean; //搜索字段是否锁定
  search_default: string; //搜索字段的默认值

  filterable: boolean; //是否用于数据过滤
  filter_index: number; //过滤条件的顺序
  filter_condition: [Operator, any]; //过滤条件 e.g. ['eq',1]; ['between_int',[1,2]]
  filter_operators: Operator[]; //支持的操作符
  filter_default_operator: Operator; //默认操作符

  sortable: boolean; //是否用于排序;
  sort_order: "asc" | "desc"; //排序方向;
  sort_index: number; // 排序字段顺序
  sort_type?: "numeric" | "alphabet"; //排序类型，可选，可通过 type 预先定义

  index: number; //在表格中的显示顺序
  visible: boolean; //表格中的可见性
  editable_visible: boolean; //是否允许管理员编辑显隐藏 当隐藏字段或表格强制展示字段时可通过该字段控制
  fixed: "left" | "right"; //表格中的冻结位置
  width: number; //展示宽度

  editable: boolean; //能否编辑值
  form_editable: boolean; // 表单中是否能编辑 用于由系统生成的字段 控制用户无法编辑
  form_visible: boolean; // 表单可见性
  form_index: number; // 表单顺序
  form_colspan: number; // 表单中所占的列数
};

SourceOptions 自定义数据源

interface SourceOptions<T> extends ApiType {
  page(data: Record<string, any>): Promise<{ list: T[]; total: number }>;

  edit(data: T): Promise<any>;

  query(id: number): Promise<T>;

  remove(id: number): Promise<any>;

  [key: string]: (...args: any[]) => Promise<any>;
}

Components

| 组件 | 功能 | 备注 | | --------------------- | ------------ | ---- | | Config | 全局配置组件 | | Provider | view配置组件 | | Search | 搜索组件 | | ViewGroup | 二级分组 | | ViewsTab | 视图切换tab | | Table | 数据表 | | TableSortControl | 表格排序控制 | | TableRowHeightControl | 表格行高控制 | | TableFieldsControl | 表格字段控制 | | ColumnRenderer | 自定义列渲染 |

FAQ

字段类型 type_props

通用属性

interface CommonProps {
  required: boolean; // 是否必填
  placeholder: string; // 提示词
  description: string; // 描述
  default: any; // 默认值
  readonly: boolean; // 只读
}

1. 文本类型 (text)

支持搜索条件：等于 , 不等于 , 模糊匹配 , 为空 , 不为空

interface TextField {
  type: "text";
  form_visible: 0 | 1; // 在表单中是否显示 1-显示 0-不显示
  type_props: {
    readonly: boolean; // 只读
    required: boolean; // 是否必填
    placeholder: string; // 提示词
    description: string; // 提示说明
    max_length: number; // 最大长度
    multiple_line: boolean; // 多行文本
  };
}

2. 数字类型 (number)

支持搜索条件：等于 , 不等于 , 大于 , 大于等于 , 小于 , 小于等于 , 模糊匹配 , 为空 , 不为空 , 数值范围

interface NumberField {
  type: "number";
  form_visible: 0 | 1; // 在表单中是否显示 1-显示 0-不显示
  type_props: {
    readonly: boolean; // 只读
    required: boolean; // 是否必填
    placeholder: string; // 提示词
    description: string; // 提示说明
    thousand_separator: boolean; // 显示千分位分割符
    decimal_places: number; // 小数位数
  };
}

3. 时间类型 (date)

支持搜索条件：等于 , 不等于 , 大于 , 大于等于 , 小于 , 小于等于 , 模糊匹配 , 为空 , 不为空 , 时间范围 , 动态时间范围

展示以 format 格式显示，提交时间戳（10位数）

interface DateField {
  type: "date";
  form_visible: 0 | 1; // 在表单中是否显示 1-显示 0-不显示
  type_props: {
    format: string; // 时间格式，如 "YYYY-MM-DD HH:mm:ss"
    readonly: boolean; // 只读
    required: boolean; // 是否必填
    placeholder: string; // 提示词
    description: string; // 提示说明
  };
}

4. 附件类型 (file)

支持搜索条件： 为空 , 不为空

数据格式：

[
  {
    "type": "image", // 文件类型：pdf|image|video|cad|excel|word|txt|ppt
    "url": "", // 文件存储地址
    "size": 0 // 文件大小（字节）
  }
]

interface FileField {
  type: "file";
  form_visible: 0 | 1; // 在表单中是否显示 1-显示 0-不显示
  type_props: {
    readonly: boolean; // 只读
    required: boolean; // 是否必填
    placeholder: string; // 提示词
    description: string; // 提示说明
  };
}

5. 图片类型 (image)

支持搜索条件： 为空 , 不为空

数据格式：["图片地址1", "图片地址2"]

interface ImageField {
  type: "image";
  form_visible: 0 | 1; // 在表单中是否显示 1-显示 0-不显示
  type_props: {
    readonly: boolean; // 只读
    required: boolean; // 是否必填
    placeholder: string; // 提示词
    description: string; // 提示说明
  };
}

6. 超链接类型 (link)

支持搜索条件： 为空 , 不为空

数据格式：链接地址1

interface LinkField {
  type: "link";
  form_visible: 0 | 1; // 在表单中是否显示 1-显示 0-不显示
  type_props: {
    readonly: boolean; // 只读
    required: boolean; // 是否必填
    placeholder: string; // 提示词
    description: string; // 提示说明
  };
}

7. 单选框类型 (radio)

支持搜索条件： 等于 , 不等于 , 为空 , 不为空 , 包含 , 不包含

interface RadioField {
  type: "radio";
  form_visible: 0 | 1; // 在表单中是否显示 1-显示 0-不显示
  type_props: {
    readonly: boolean; // 只读
    required: boolean; // 是否必填
    placeholder: string; // 提示词
    description: string; // 提示说明
    display_mode: "dropdown" | "tile" | "list"; // 展示方式：下拉|平铺|列表
    options: Array<{
      value: string; // 选项值
      color?: string; // 选项颜色
    }>;
  };
}

8. 多选框类型 (checkbox)

支持搜索条件： 等于 , 不等于 , 为空 , 不为空 , 包含 , 不包含

数据格式：["参数1", "参数2"]

interface CheckboxField {
  type: "checkbox";
  form_visible: 0 | 1; // 在表单中是否显示 1-显示 0-不显示
  type_props: {
    readonly: boolean; // 只读
    required: boolean; // 是否必填
    placeholder: string; // 提示词
    description: string; // 提示说明
    display_mode: "dropdown" | "tile" | "list"; // 展示方式：下拉|平铺|列表
    options: Array<{
      value: string; // 选项值
      color?: string; // 选项颜色
    }>;
  };
}

9. 关联对象类型 (model)

支持搜索条件： 等于 , 不等于 , 为空 , 不为空 , 包含 , 不包含

数据格式：关联对象的主键值

interface ModelField {
  type: "model";
  form_visible: 0 | 1; // 在表单中是否显示 1-显示 0-不显示
  type_props: {
    readonly: boolean; // 只读
    required: boolean; // 是否必填
    placeholder: string; // 提示词
    description: string; // 提示说明
    model: string; // 模型名称，如 "user"
    model_key: string; // 关联模型索引（由系统生成）
    display_field: string; // 显示字段，如 "nickname.name"
    search_field: string; // 搜索字段（由系统生成）
  };
}

10. 坐标类型 (coord)

支持搜索条件： 为空 , 不为空

数据格式："2.2945,48.8584" （经度,纬度）

interface CoordField {
  type: "coord";
  form_visible: 0 | 1; // 在表单中是否显示 1-显示 0-不显示
  type_props: {
    readonly: boolean; // 只读
    required: boolean; // 是否必填
    placeholder: string; // 提示词
    description: string; // 提示说明
  };
}