# 前端自定义框架-通用信息

**Repository Path**: wangdenuan/infrastructure-common

## Basic Information

- **Project Name**: 前端自定义框架-通用信息
- **Description**: 前端自定义框架的公共信息部分，包括字段、视图等结构定义。
- **Primary Language**: TypeScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-09-27
- **Last Updated**: 2022-09-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# infrastructure-common

前端自定义框架的公共信息部分，包括字段、视图等结构定义。

## 使用

## 字段

基本格式参见[src/base/field.ts](src/base/field.ts)，一个字段包含如下属性：

```json
{
    "name": "字段的Json名称",
    "type": "字段类型",
    "option": {
        "xxx": "xxxxx"
    },
    "viewOption": {
        "xxx": "xxxxx"
    }
}
```

其中，基础配置信息(option)，属于字段的基础属性，在不同视图中结构是一致的；而视图配置信息(viewOption)，在不同的视图中，是不同的。参见下方的[通用视图配置信息](#通用视图配置信息)说明。

### 通用基础配置信息

| 名称 | 类型 | 默认值 | 描述 |
| :-: | :-: | :-: | :- |
| label | string | - | 字段的可读性文字名称 |
| description | string | - | 描述性文字，用于帮助信息的展示 |

### 通用视图配置信息

目前包括四种视图，不同的视图，有着不同的配置信息，部分字段可能在某种视图中也有单独的视图配置信息。

[修改视图](src/base/field_modify.ts)：

| 名称 | 类型 | 默认值 | 描述 |
| :-: | :-: | :-: | :- |
| showInCreate | bool | true | 是否在新建中展示 |
| showInEdit | bool | true | 是否在编辑中展示 |
| required | bool | false | (新建) 是否是必填项 |
| readonly | bool | false | (编辑) 是否是只读(不可修改) |
| defaultValue | any | - | (新建) 默认值 |
| validate | (value: any) => [success: boolean, errorMessage: string] | 校验函数，返回是否成功和错误信息 |

[列表视图](src/base/field_list.ts)：

| 名称 | 类型 | 默认值 | 描述 |
| :-: | :-: | :-: | :- |
| showInList | bool | true | 是否展示 |
| colSpan | number | - | 列栅格宽度(0-24)，为0表示隐藏列 |

[详情视图](src/base/field_detail.ts)：

| 名称 | 类型 | 默认值 | 描述 |
| :-: | :-: | :-: | :- |
| showInDetail | bool | true | 是否展示 |
| span | number | 1 | 视图占用几个详细项的位置 |

[搜索视图](src/base/field_search.ts)：

| 名称 | 类型 | 默认值 | 描述 |
| :-: | :-: | :-: | :- |
| showInSearch | bool | true | 是否展示 |
| defaultValue | any | - | 默认值 |

### 数字(digit)

自定义基础配置信息：

| 名称 | 类型 | 默认值 | 描述 |
| :-: | :-: | :-: | :- |
| step | number | 1 | 调整步长，在新建/编辑等视图，手动调整时的单次增量 |
| precision | number | 0 | 小数显示精度。比如值为2，则表示显示两位小数 |
| ratio | number | 1 | 数值系数，在获取和返回value时的加权系数。比如为100时，保存到结果中的值需要乘以100，从已有数据中提取的值需要除以100 |
| max | number | - | 最大值 |
| min | number | - | 最小值 |
| unitLabel | string | - | 单位 |

### 文本(text)

自定义基础配置信息：

| 名称 | 类型 | 默认值 | 描述 |
| :-: | :-: | :-: | :- |
| numberOfLine | number | 1 | 展示的行数，如果大于1，表示为多行文本 |
| placeholder | string | - | 提示文本 |
| maxLength | number | 0 | 最大长度，0不限制 |
| unitLabel | string | - | 单位 |

### 布尔开关(switch)

自定义基础配置信息：

| 名称 | 类型 | 默认值 | 描述 |
| :-: | :-: | :-: | :- |
| useRadio | boolean | true | 使用Radio控件还是Switch控件 |
| trueLabel | string | 是 | 布尔值真值对应的标签 |
| falseLabel | string | 否 | 布尔值假值对应的标签 |
| unitLabel | string | - | 单位 |

### 日期时间(datetime)

自定义基础配置信息：

| 名称 | 类型 | 默认值 | 描述 |
| :-: | :-: | :-: | :- |
| hasDate | boolean | true | 是否包含日期信息，不能与hasTime同时为false |
| hasTime | boolean | true | 是否包含时间信息，不能与hasDate同时为false |
| useTimestamp | boolean | true | 是否使用时间戳表示数据 |
| useSecond | boolean | true | 是否使用秒来表示数据，仅当useTimestamp=true时有意义。如果为false，则使用毫秒表示数据 |
| dateFormat | string | - | 日期时间格式化的格式 |
| placeholder | string | - | 提示文本 |

自定义搜索视图配置信息：

| 名称 | 类型 | 默认值 | 描述 |
| :-: | :-: | :-: | :- |
| isSection | boolean | true | 是否是区间选择，如果为false，则只选择单个时间 |
| startTimeValue | string \| number | - | 开始时间默认值，支持时间描述/时间戳格式 |
| endTimeValue | string \| number | - | 结束时间默认值，支持时间描述/时间戳格式 |

## 发布

首先登陆`npmjs.org`：

```shell
npm login --registry https://registry.npmjs.org/
```

然后运行：

```shell
npm run build
npm publish --access=public
```