# ErpPage

### 开发

```sh
yarn install
yarn dev
```

### 打包

```sh
yarn install

```

### 启动演示

```sh
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 结构参考：

```ts
type Column = {
  name: string; // 字段名 // address_id => row.address.name
  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; // 表单中所占的列数
};
```

```json

```

SourceOptions 自定义数据源

```ts
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

![img.png](./doc/img.png)

### 字段类型 type_props

#### 通用属性

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

#### 1. 文本类型 (text)

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

```typescript
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)

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

```typescript
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位数）

```typescript
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)

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

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

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

#### 5. 图片类型 (image)

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

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

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

#### 6. 超链接类型 (link)

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

> 数据格式：`链接地址1`

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

#### 7. 单选框类型 (radio)

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

```typescript
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"]`

```typescript
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)

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

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

```typescript
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. 关联属性
> 支持搜索条件： 等于 , 不等于 , 为空 , 不为空 , 模糊匹配
```typescript
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; // 搜索字段（由系统生成）
   };
}
```


#### 11. 坐标类型 (coord)

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

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

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