fantasy-ngzorro 1.5.25 → 1.5.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/README.md +696 -807
  2. package/bundles/fantasy-ngzorro.umd.js +429 -20
  3. package/bundles/fantasy-ngzorro.umd.js.map +1 -1
  4. package/bundles/fantasy-ngzorro.umd.min.js +1 -1
  5. package/bundles/fantasy-ngzorro.umd.min.js.map +1 -1
  6. package/esm2015/fantasy-ngzorro.js +22 -20
  7. package/esm2015/hd-component.module.js +3 -1
  8. package/esm2015/hd-detail-lines-page/hd-detail-lines-page.component.js +329 -0
  9. package/esm2015/hd-detail-lines-page/hd-detail-lines-page.module.js +20 -0
  10. package/esm2015/hd-status/hd-status.service.js +2 -2
  11. package/esm5/fantasy-ngzorro.js +22 -20
  12. package/esm5/hd-component.module.js +3 -1
  13. package/esm5/hd-detail-lines-page/hd-detail-lines-page.component.js +395 -0
  14. package/esm5/hd-detail-lines-page/hd-detail-lines-page.module.js +24 -0
  15. package/esm5/hd-status/hd-status.service.js +2 -2
  16. package/fantasy-ngzorro.d.ts +21 -19
  17. package/fantasy-ngzorro.metadata.json +1 -1
  18. package/fesm2015/fantasy-ngzorro.js +341 -2
  19. package/fesm2015/fantasy-ngzorro.js.map +1 -1
  20. package/fesm5/fantasy-ngzorro.js +409 -2
  21. package/fesm5/fantasy-ngzorro.js.map +1 -1
  22. package/hd-detail-lines-page/hd-detail-lines-page.component.d.ts +54 -0
  23. package/hd-detail-lines-page/hd-detail-lines-page.module.d.ts +2 -0
  24. package/package.json +1 -1
package/README.md CHANGED
@@ -2,382 +2,412 @@
2
2
 
3
3
  # Fantasy-Ngzorro
4
4
 
5
- ## 更新记录
6
-
7
- | 更新人 | 更新时间 | 更新内容 |
8
- | ------ | --------- | ------------------------------------------------------------ |
9
- | MC | 2023-2-10 | 1、Readme文件目录结构创建 <br/>2、新增按钮、按钮组、通用表格、筛选器、状态、详情头、详情单头、详情明细相关文档。 |
10
- | MC | 2023-2-13 | 1、新增表单、明细表单、间隔、小标题相关文档<br/>2、所有组件字段增加必填选项。 |
11
- | | | |
5
+ 基于 **Angular 8** + **ng-zorro-antd 8.5.x** 的业务组件库，封装按钮、表格、表单、详情页等常用 UI 模式。
6
+
7
+ ## 组件一览
8
+
9
+ | 序号 | 选择器 | 说明 |
10
+ | ---- | ------ | ---- |
11
+ | 1 | `hd-button` | 按钮 |
12
+ | 2 | `hd-button-group` | 按钮组（左右布局） |
13
+ | 3 | `hd-space` | 间隔占位 |
14
+ | 4 | `hd-tip` | 小标题 |
15
+ | 5 | `hd-status` | 状态标签 |
16
+ | 6 | `hd-popconfirm` | 气泡确认框 |
17
+ | 7 | `hd-filter` | 筛选器 |
18
+ | 8 | `hd-current-table` | 通用表格（自定义列模板） |
19
+ | 9 | `hd-table` | 增强表格（列配置、排序、列缓存） |
20
+ | 10 | `hd-form` | 表单 |
21
+ | 11 | `hd-form-lines` | 明细表单（可编辑表格） |
22
+ | 12 | `hd-detail-tip` | 详情头 |
23
+ | 13 | `hd-detail-form` | 详情单头 |
24
+ | 14 | `hd-detail-lines` | 详情明细（前端分页 / 搜索） |
25
+ | 15 | `hd-detail-lines-page` | 详情明细（服务端分页） |
26
+ | 16 | `hd-log` | 操作日志 |
27
+
28
+ > 配置类型（SelectOption、FormItem、HdTableColumn 等）见 [附录：公共配置类型](#附录公共配置类型)。
12
29
 
30
+ ## 更新记录
13
31
 
32
+ | 更新人 | 更新时间 | 更新内容 |
33
+ | ------ | -------- | -------- |
34
+ | MC | 2023-2-10 | Readme 创建；按钮、按钮组、通用表格、筛选器、状态、详情头、详情单头、详情明细文档 |
35
+ | MC | 2023-2-13 | 表单、明细表单、间隔、小标题文档；组件字段增加必填说明 |
36
+ | — | 2026-5-20 | 补充 hd-table、hd-detail-lines-page 等组件；完善公共子类型（SelectOption、FormItem 等）文档 |
14
37
 
15
38
  ## 前言
16
39
 
17
- > 1、文档中的插槽概念借用vue中的插槽，在angular里面体现出来就是模板 #template。
18
- >
19
- > 2、事件传递建议使用bind(this)绑定自定义的函数去实现方法, 而不是箭头函数。示例：onChangeEvent: this.formInputChange.bind(this)
20
- >
21
- > 3、运行本地服务之后，访问demo路由即可查看具体交互
40
+ > 1. 文档中的「插槽」对应 Angular 的模板 `#template`（`ng-template` + `@ContentChild`）。
41
+ > 2. 事件回调建议使用 `bind(this)`，示例：`onChangeEvent: this.formInputChange.bind(this)`。
42
+ > 3. 本地运行 `npm start`，访问 `http://localhost:13000` 查看 Demo 交互。
43
+ > 4. 业务模块引入：`import { FantasyNgzorroModule } from 'fantasy-ngzorro'`。
22
44
 
45
+ ### 公共导出
23
46
 
47
+ | 模块 | 说明 |
48
+ | ---- | ---- |
49
+ | `ColWidth` | 列宽常量 |
50
+ | `Page<T>` | 分页数据结构 |
51
+ | `Utils` | 精度计算工具 |
52
+ | `HdTableColumn` / `FormLine` / `Filter` 等 | 各组件配置类型，详见 [附录：公共配置类型](#附录公共配置类型) |
24
53
 
25
- ## 1、按钮(hd-button)
54
+ ---
26
55
 
27
- ### 效果图
28
-
29
- ![hd-button](../../../../../海鼎/code/fantasy-ngzorro-project/projects/fantasy-ngzorro/readme/img/hd-button.png)
56
+ ## 1、按钮（hd-button）
30
57
 
31
58
  ### 示例
32
59
 
33
60
  ```html
34
- <hd-button type="primary">查询</hd-button>
61
+ <hd-button type="primary" (clickAction)="search()">查询</hd-button>
62
+ <hd-button type="default" [loading]="loading" (clickAction)="save()">保存</hd-button>
35
63
  ```
36
64
 
37
- ### 说明
65
+ ### 参数
38
66
 
39
- | 参数 | 类型 | 默认值 | 说明 |
40
- | -------- | ------ | ------- | ------------------------------------------------------------ |
41
- | loading | boolen | false | 加载中 |
42
- | type | string | default | primary \| dashed \| danger \| default \| link \| submit \| reset \| add (其中add类型会默认增加加号) |
43
- | disabled | boolen | False | 按钮是否禁用 |
67
+ | 参数 | 类型 | 默认值 | 说明 |
68
+ | ---- | ---- | ------ | ---- |
69
+ | type | string | default | primary \| dashed \| danger \| default \| link \| reset \| add |
70
+ | size | string | normal | 按钮尺寸 |
71
+ | loading | boolean | false | 加载中（与 loading 配合时必须用 clickAction） |
72
+ | disabled | boolean | false | 是否禁用 |
73
+ | clickAction | EventEmitter | — | 点击事件 |
44
74
 
45
75
  ### 注意点
46
76
 
47
- - 为防止回车触发表单提交事件，禁止使用submit类型的按钮，请使用普通按钮+click事件触发表单提交!
48
-
49
-
77
+ - **禁止**使用 `type="submit"`，请用普通按钮 + `clickAction` 触发表单提交。
78
+ - 设置了 `loading` 的按钮必须用 `(clickAction)`，不能用 `(click)`。
50
79
 
51
- ## 2、按钮组(hd-button-group)
80
+ ---
52
81
 
53
- ### 效果图
54
-
55
- ![hd-button-group](../../../../../海鼎/code/fantasy-ngzorro-project/projects/fantasy-ngzorro/readme/img/hd-button-group.png)
82
+ ## 2、按钮组（hd-button-group）
56
83
 
57
84
  ### 示例
58
85
 
59
86
  ```html
60
87
  <hd-button-group>
61
88
  <ng-template #buttonGroupLeft>
62
- <hd-button type="add">add</hd-button>
63
- <hd-button type="default">default</hd-button>
64
- <hd-button type="default">default</hd-button>
65
- <hd-button type="default">default</hd-button>
89
+ <hd-button type="add">新增</hd-button>
66
90
  </ng-template>
67
91
  <ng-template #buttonGroupRight>
68
- <hd-button type="default">default</hd-button>
92
+ <hd-button type="default">导出</hd-button>
69
93
  </ng-template>
70
94
  </hd-button-group>
71
95
  ```
72
96
 
73
- ### 说明
97
+ ### 插槽
74
98
 
75
- | 参数 | 类型 | 说明 |
76
- | ---------------- | ------------------------------- | -------------- |
77
- | buttonGroupLeft | @ContentChild TemplateRef<void> | 按钮组左侧插槽 |
78
- | buttonGroupRight | @ContentChild TemplateRef<void> | 按钮组右侧插槽 |
99
+ | 插槽 | 说明 |
100
+ | ---- | ---- |
101
+ | buttonGroupLeft | 左侧按钮区 |
102
+ | buttonGroupRight | 右侧按钮区 |
79
103
 
80
- ### 注意点
104
+ 按钮间距自动 12px。
105
+
106
+ ---
107
+
108
+ ## 3、间隔（hd-space）
109
+
110
+ ### 示例
81
111
 
82
- - hd-button-group中的按钮会自动增加间距12px
112
+ ```html
113
+ <hd-space background="#fff" type="row" size="12"></hd-space>
114
+ ```
115
+
116
+ | 参数 | 类型 | 默认值 | 说明 |
117
+ | ---- | ---- | ------ | ---- |
118
+ | background | string | inherit | 背景色 |
119
+ | type | string | row | row \| column |
120
+ | size | number | — | 高度或宽度（px） |
121
+
122
+ ---
123
+
124
+ ## 4、小标题（hd-tip）
83
125
 
126
+ ### 示例
84
127
 
128
+ ```html
129
+ <hd-tip title="基本信息" [fontSize]="14"></hd-tip>
130
+ <hd-tip title="新增" [showIcon]="false" [fontSize]="16"></hd-tip>
131
+ ```
85
132
 
86
- ## 3、通用表格(hd-current-table)
133
+ | 参数 | 类型 | 默认值 | 说明 |
134
+ | ---- | ---- | ------ | ---- |
135
+ | title | string | — | 标题文案 |
136
+ | showIcon | boolean | true | 是否显示左侧竖线 |
137
+ | fontSize | number | — | 字体大小 |
87
138
 
88
- ### 效果图
139
+ ---
89
140
 
90
- ![hd-current-table](../../../../../海鼎/code/fantasy-ngzorro-project/projects/fantasy-ngzorro/readme/img/hd-current-table.png)
141
+ ## 5、状态（hd-status）
91
142
 
92
143
  ### 示例
93
144
 
94
145
  ```html
95
- <hd-current-table #hdCurrentTable [(tablePageIndex)]="pageIndex" [(tablePageSize)]="pageSize" [scroll]="{x: '600px'}" [tableData]="page" (tableSearchEvent)="search($event)" showSelected selectField="billNumber" (selectEvent)="selectResult($event)">
96
- <ng-template #tableTotal>
97
- <nz-alert nzType="info" [nzMessage]="nzAlertTotal" nzShowIcon></nz-alert>
98
- <ng-template #nzAlertTotal>
99
- <span>已选择{{ tableSelectList.length }}项服务</span>&nbsp;&nbsp;
100
- <span>调用总计：36.4万</span>&nbsp;&nbsp;
101
- <span class="common-btn-group">
102
- <a (click)="hdCurrentTable.resetStatus()">清空</a>
103
- </span>
104
- </ng-template>
105
- </ng-template>
146
+ <hd-status status="initial">未审核</hd-status>
147
+ <hd-status status="audited">已审核</hd-status>
148
+ <hd-status status="received">已收货</hd-status>
149
+ ```
150
+
151
+ | 参数 | 类型 | 说明 |
152
+ | ---- | ---- | ---- |
153
+ | status | string | 状态值，匹配 `hd-status.service.ts` 中 `statusToColor` 配置 |
154
+
155
+ 匹配时不区分大小写。新增状态请在 `statusToColor` 中配置颜色。
156
+
157
+ ---
158
+
159
+ ## 6、气泡确认（hd-popconfirm）
160
+
161
+ ### 示例
162
+
163
+ ```html
164
+ <hd-popconfirm message="确认删除该记录吗？" (confirmOption)="onConfirm()" (cancelOption)="onCancel()">
165
+ </hd-popconfirm>
166
+ ```
167
+
168
+ | 参数 | 类型 | 说明 |
169
+ | ---- | ---- | ---- |
170
+ | message | string | 提示文案 |
171
+ | confirmOption | EventEmitter | 点击确认 |
172
+ | cancelOption | EventEmitter | 点击取消 |
173
+
174
+ ---
175
+
176
+ ## 7、筛选器（hd-filter）
177
+
178
+ ### 示例
179
+
180
+ ```html
181
+ <hd-filter [filterList]="filterList" (searchEvent)="filterChange($event)" (resetEvent)="resetFilterChange($event)">
182
+ </hd-filter>
183
+ ```
184
+
185
+ | 参数 | 类型 | 说明 |
186
+ | ---- | ---- | ---- |
187
+ | filterList | Array\<Filter\> | 筛选项配置 |
188
+ | searchEvent | EventEmitter | 查询，带回筛选数据 |
189
+ | resetEvent | EventEmitter | 重置 |
190
+
191
+ #### Filter 配置
192
+
193
+ 筛选项使用 [Filter](#filter筛选项) 类型，下拉/数字/级联等子配置见 [SelectOption](#selectoption下拉选项配置)、[InputNumber](#inputnumber数字输入配置)、[CascaderOption](#cascaderoption级联选择配置)。
194
+
195
+ ---
196
+
197
+ ## 8、通用表格（hd-current-table）
198
+
199
+ 适用于**完全自定义**表头、表体模板的列表页。
200
+
201
+ ### 示例
202
+
203
+ ```html
204
+ <hd-current-table #hdCurrentTable [(tablePageIndex)]="pageIndex" [(tablePageSize)]="pageSize"
205
+ [scroll]="{x: '600px'}" [tableData]="page" [tableLoading]="loading"
206
+ (tableSearchEvent)="search($event)" showSelected selectField="billNumber"
207
+ (selectEvent)="selectResult($event)">
208
+ <ng-template #tableTotal>...</ng-template>
106
209
  <ng-template #tableHead>
107
- <th nzLeft="40px" style="width: 100px">配送单号</th>
108
- <th>收货日期</th>
210
+ <th>配送单号</th>
109
211
  <th>状态</th>
110
- <th nzRight="0px">操作</th>
111
212
  </ng-template>
112
213
  <ng-template #tableBody let-data>
113
- <!-- 父页面自己的样式，不允许用行内样式，全都定义class写到css文件中，颜色、字号等属性用通用文件中的变量，不允许直接写颜色值 -->
114
- <td nzLeft="40px" style="width: 100px" class="common-billNumber"><a>{{ data.billNumber || '&lt;空&gt;' }}</a></td>
115
- <td>{{ data.distDate || '&lt;空&gt;' }}</td>
116
- <td>
117
- <hd-status [status]="'initial'">未审核</hd-status>
118
- </td>
119
- <td nzRight="0px" style="width: 200px">
120
- <span class="common-btn-group">
121
- <a>复制</a>
122
- <a>修改详情</a>
123
- <a>修改日期</a>
124
- <a class="common-danger-btn">删除</a>
125
- </span>
126
- </td>
214
+ <td>{{ data.billNumber }}</td>
215
+ <td><hd-status [status]="data.state">{{ data.stateText }}</hd-status></td>
127
216
  </ng-template>
128
217
  </hd-current-table>
129
218
  ```
130
219
 
131
- ```tsx
132
- // 通用表格的相关变量
133
- page: Page<any> = new Page<any>();
220
+ ```typescript
221
+ page: Page<any> = new Page();
134
222
  pageIndex = 1;
135
223
  pageSize = 10;
136
- loading: boolean = false;
137
- tableSelectList: Array<any> = [];
138
-
139
- // 表格的查询事件
140
- search(reset: boolean = false): void {
141
- if (reset) {
142
- this.pageIndex = 1;
143
- }
224
+ loading = false;
144
225
 
226
+ search(reset = false) {
227
+ if (reset) { this.pageIndex = 1; }
145
228
  this.queryFilter.pageNumber = this.pageIndex - 1;
146
229
  this.queryFilter.pageSize = this.pageSize;
147
-
148
230
  this.loading = true;
149
- this.hdDemoService.queryDemo(this.queryFilter).subscribe(
150
- result => {
151
- this.loading = false;
152
- this.page = result;
153
- }, error => {
154
- this.loading = false;
155
- }
231
+ this.service.query(this.queryFilter).subscribe(
232
+ result => { this.loading = false; this.page = result; },
233
+ () => { this.loading = false; }
156
234
  );
157
235
  }
158
-
159
- /**
160
- * 表格的选择事件
161
- * @param selectList 勾选的所有的数据集合
162
- */
163
- selectResult(selectList?: any) {
164
- // 拿到勾选的所有的数据
165
- // console.log('selectList', selectList);
166
- this.tableSelectList = selectList;
167
- }
168
236
  ```
169
237
 
170
- ### 说明
171
-
172
- | 参数 | 类型 | 默认值 | 说明 |
173
- | ------------------------ | ------------------------------ | --------------- | ------------------------------------------------------------ |
174
- | *tableData | Page<any> | | 表格源数据 |
175
- | scroll | { [*key*: string]: string } | { x: '1150px' } | 滚动参数 |
176
- | *tablePageIndex | number | | 当前页码（双向绑定） |
177
- | *tablePageSize | number | | 每页展示的数据量（双向绑定） |
178
- | *tableSearchEvent | EventEmitter<reset: boolen> | | 表格更换tablePageIndex、tablePageSize触发函数，emit重置标识 |
179
- | showSelected | boolean | false | 是否开启勾选功能 |
180
- | selectEvent | EventEmitter<array> | | 勾选状态改变触发函数，emit已勾选数组 |
181
- | selectField | string | billNumber | 与showSelected配合使用，勾选判断逻辑的关键词（传入源数据中的主键字段） |
182
- | tableHead | @ContentChild TemplateRef<any> | | 表格头插槽 |
183
- | tableBody | @ContentChild TemplateRef<any> | | 表格数据主体插槽 |
184
- | tableTotal | @ContentChild TemplateRef<any> | | 表格顶部合计插槽 |
185
- | showTableTotal（弃用） | boolean | False | 是否显示底部合计区域 |
186
- | tableTotalOption（弃用） | Array<TableTotalOption> | | 底部合计区域的合计字段选项集合 |
238
+ | 参数 | 类型 | 默认值 | 说明 |
239
+ | ---- | ---- | ------ | ---- |
240
+ | tableData | Page\<any\> | — | 分页数据 |
241
+ | tablePageIndex | number | 1 | 当前页（双向绑定） |
242
+ | tablePageSize | number | 10 | 每页条数（双向绑定） |
243
+ | tableLoading | boolean | false | 加载状态 |
244
+ | tableSearchEvent | EventEmitter | — | 翻页 / 改 pageSize 触发，参数 reset 表示是否重置到第一页 |
245
+ | scroll | object | { x: '1150px' } | 横向滚动 |
246
+ | showSelected | boolean | false | 是否显示勾选列 |
247
+ | selectField | string | billNumber | 勾选主键字段 |
248
+ | selectEvent | EventEmitter | — | 勾选变化 |
249
+ | tableHead / tableBody / tableTotal | TemplateRef | — | 表头 / 表体 / 顶部合计插槽 |
187
250
 
188
- ### 注意点
251
+ ---
252
+
253
+ ## 9、增强表格（hd-table）
254
+
255
+ 在通用表格基础上支持**列配置渲染**、**排序**、**列宽/顺序/pageSize 本地缓存**、**设置列**等能力。列表页**优先推荐使用**。
189
256
 
190
- - 如果发现tableSearchEvent绑定的函数当tablePageSize改变时会触发两次，请不要惊慌，这是ngzorro8.5.x版本的bug，不会影响使用体验，只会额外调用一次接口，浪费些性能。
257
+ ### 示例
258
+
259
+ ```html
260
+ <hd-table #hdTable [(tablePageIndex)]="pageIndex" [(tablePageSize)]="pageSize"
261
+ [tableCols]="tableCols" [tableData]="page" [tableLoading]="loading"
262
+ (tableSearchEvent)="search($event)" showSelected showOperateColWarpButton
263
+ selectField="billNumber" (selectEvent)="selectResult($event)"
264
+ uuid="74907b48-1b17-4e51-9fa9-81fd0ac94051"
265
+ (sortEvent)="sortEvent($event)" (tablePageSizeChangeEvent)="search(true)">
266
+ <ng-template #tableLeftButton>
267
+ <hd-button type="default" (clickAction)="search()">刷新</hd-button>
268
+ </ng-template>
269
+ <ng-template #tableRightButton>
270
+ <hd-button type="default">导出</hd-button>
271
+ </ng-template>
272
+ <ng-template #tableTotal>...</ng-template>
273
+ </hd-table>
274
+ ```
275
+
276
+ ```typescript
277
+ tableCols: HdTableColumn[] = [{
278
+ title: '配送单号',
279
+ name: 'billNumber',
280
+ fixed: 'left',
281
+ click: (line) => { /* 点击行 */ }
282
+ }, {
283
+ title: '状态',
284
+ name: 'state',
285
+ width: ColWidth.enumColWidth,
286
+ render: (line) => line.state === 'received' ? '已收货' : '未收货'
287
+ }, {
288
+ title: '操作',
289
+ name: 'operate',
290
+ width: ColWidth.operateColWidth,
291
+ btnList: [{ name: '删除', showConfirm: true, click: (line) => this.remove(line) }]
292
+ }];
293
+ ```
191
294
 
295
+ | 参数 | 类型 | 默认值 | 说明 |
296
+ | ---- | ---- | ------ | ---- |
297
+ | tableCols | HdTableColumn[] | [] | 列配置 |
298
+ | tableData | Page\<any\> | — | 分页数据 |
299
+ | tablePageIndex / tablePageSize | number | — | 分页（双向绑定） |
300
+ | tableLoading | boolean | false | 加载状态 |
301
+ | tableSearchEvent | EventEmitter | — | 翻页查询 |
302
+ | sortEvent | EventEmitter | — | 排序 |
303
+ | selectEvent | EventEmitter | — | 勾选变化 |
304
+ | showSelected | boolean | false | 勾选列 |
305
+ | showOperateColWarpButton | boolean | false | 展开/缩略显示换行列 |
306
+ | showTableTotal | boolean | false | 底部合计行 |
307
+ | tableTotalOption | HdTableTotalOption[] | — | 合计配置 |
308
+ | isFirstEntrySearch | boolean | — | 首次进入是否自动查询 |
309
+ | isCrossPageSelect | boolean | — | 跨页勾选 |
310
+ | uuid | string | — | 列缓存唯一标识（必填，用于 IndexedDB 缓存） |
311
+ | tableLeftButton / tableRightButton / tableTotal | TemplateRef | — | 工具栏插槽 |
192
312
 
313
+ #### HdTableColumn 配置
193
314
 
194
- ## 4、筛选器(hd-filter)
315
+ 列定义见 [HdTableColumn](#hdtablecolumn表格列)、[OperateBtn](#operatebtn操作列按钮)、[HdTableTotalOption](#hdtabletotaloptionhd-table-底部合计)。
195
316
 
196
- ### 效果图
317
+ ---
197
318
 
198
- ![hd-filter](../../../../../海鼎/code/fantasy-ngzorro-project/projects/fantasy-ngzorro/readme/img/hd-filter.png)
319
+ ## 10、表单（hd-form）
199
320
 
200
321
  ### 示例
201
322
 
202
- ```js
203
- <hd-filter [filterList]="filterList" (searchEvent)="search(true, $event)"></hd-filter>
323
+ ```html
324
+ <hd-form [formList]="formInput" (changeEvent)="formChangeEvent($event)"></hd-form>
204
325
  ```
205
326
 
206
- ```tsx
207
- filterList: Array<Filter> = [];
208
- filterListTemplate: Array<Filter> = [{
209
- type: FilterListType.Input,
327
+ ```typescript
328
+ formInput: FormItem[] = [{
329
+ type: FormListType.Input,
210
330
  label: '配送单号',
211
- name: 'billNumberEq',
212
- value: '',
213
- onChangeEvent: (item) => {
214
- console.log('item', item);
215
- }
216
- }, {
217
- type: FilterListType.Select,
218
- label: '单项选择器测试测',
219
- name: 'selectValue',
220
- value: true,
221
- selectOption: {
222
- value: 'value',
223
- label: 'label',
224
- selectList: [{
225
- value: true,
226
- label: '是是是是是是是是是是是是是是是是是是是是是是'
227
- }, {
228
- value: false,
229
- label: '否'
230
- }]
231
- },
232
- onChangeEvent: (item) => {
233
- console.log('item', item);
234
- }
235
- }, {
236
- type: FilterListType.MultipleSelect,
237
- label: '多项选择器选择',
238
- name: 'multipleSelectValue',
239
- value: null,
240
- onChangeEvent: (item) => {
241
- console.log('onChangeEvent', item);
242
- },
243
- onSearchEvent: (item) => {
244
- console.log('onSearchEvent', item);
245
- },
246
- selectOption: {
247
- value: 'value',
248
- label: 'label',
249
- selectList: [{
250
- value: '01',
251
- label: '第一个第一个第一个第一个第一个'
252
- }, {
253
- value: '02',
254
- label: '第二个'
255
- }, {
256
- value: '03',
257
- label: '第三个'
258
- }, {
259
- value: '04',
260
- label: '第四个'
261
- }]
262
- }
263
- }, {
264
- type: FilterListType.Select,
265
- label: '测试label',
266
- name: 'selectValue1',
267
- value: null,
268
- selectOption: {
269
- value: 'productCode',
270
- label: 'productName',
271
- showLabelAndValue: true,
272
- selectList: []
273
- },
274
- onSearchEvent: (item, selectOption) => {
275
- console.log('onSearchEvent', item);
276
- console.log('selectOption', selectOption);
277
- // 在这里去调接口查数据 定时器模拟调接口
278
- setTimeout(() => {
279
- selectOption.selectList = [{
280
- productCode: '123213213',
281
- productName: '测试商品1'
282
- }, {
283
- productCode: 'qwertyuiop',
284
- productName: '测试商品2'
285
- }]
286
- }, 1000);
287
- }
331
+ name: 'billNumber',
332
+ require: true,
333
+ width: 2,
334
+ onChangeEvent: this.formInputChange.bind(this)
288
335
  }, {
289
- type: FilterListType.Date,
290
- label: '单个日期选择',
291
- name: 'dateValue',
292
- value: '2020-1-2'
336
+ type: FormListType.Select,
337
+ label: '是否启用',
338
+ name: 'enabled',
339
+ width: 1,
340
+ selectOption: { value: 'value', label: 'label', selectList: [...] }
293
341
  }, {
294
- type: FilterListType.DateRange,
295
- label: '日期范围选择',
296
- name: 'dateRangeValue',
297
- value: ['2020-1-2', '2020-1-2']
342
+ type: FormListType.InputNumber,
343
+ label: '数量',
344
+ name: 'qty',
345
+ inputNumber: { min: 0, max: 9999, step: 1, precision: 2 }
298
346
  }];
299
347
 
300
- // 查询、重置按钮触发函数
301
- filterChange(filter?: any) {
302
- console.log('filter',filter);
303
- if (filter) {
304
- this.queryFilter = filter;
305
- // 因为更改了filter 需要清空所有的勾选 触发组件的重置事件
306
- this.hdCurrentTable.resetStatus();
307
- this.search(true);
308
- }
348
+ formChangeEvent(validateForm: FormGroup) {
349
+ this.validateHdForm = validateForm;
309
350
  }
310
351
  ```
311
352
 
312
- ### 说明
313
-
314
- | 参数 | 类型 | 默认值 | 说明 |
315
- | ----------- | -------------- | ------ | -------------------------------------- |
316
- | filterList | Array<Filter> | | 所有的筛选器空间数据 |
317
- | searchEvent | EventEmitter<> | | 查询、重置按钮触发函数，带回筛选器数据 |
353
+ | 参数 | 类型 | 说明 |
354
+ | ---- | ---- | ---- |
355
+ | formList | FormItem[] | 表单项配置 |
356
+ | changeEvent | EventEmitter | 表单值变化，返回 FormGroup |
318
357
 
319
- #### Filter
320
-
321
- | 参数 | 类型 | 默认值 | 说明 |
322
- | ------------- | ----------------------------------------------------------- | ------ | ------------------------------------------------------------ |
323
- | *type | FilterListType | | 控件类型 Input \| Select \| Date \| DateRange \| MultipleSelect |
324
- | *label | string | | 控件前文案 |
325
- | *name | string | | 字段名称 |
326
- | placeholder | string | | 输入框提示文案 |
327
- | value | string \| boolen \| number \| Array<string \| Date> \| null | null | 初始值 |
328
- | selectOption | SelectOption | | select选择器选项配置 |
329
- | onSearchEvent | EventEmitter<> | | select选择器搜索事件 可用于更新备选集合 |
330
- | onChangeEvent | EventEmitter<> | | 控件的值改变事件 可用于控件间联动 |
331
-
332
- #### SelectOption
333
-
334
- | 参数 | 类型 | 默认值 | 说明 |
335
- | -------------------------- | ---------- | ------ | ------------------------------------------------------ |
336
- | *label | string | | label字段，取selectList数组中的某个字段作为选择器label |
337
- | *value | string | | Value字段，取selectList数组中的某个字段作为选择器value |
338
- | *selectList | Array<any> | | 选项列表 |
339
- | showLabelAndValue | boolean | false | 选项同时展示label和value，格式：[value]label |
340
- | hdDropdownMatchSelectWidth | boolean | false | 选择框长度是否和控件长度保持一致，默认不保持 |
341
-
342
- ### 注意点
358
+ #### FormItem 配置
343
359
 
344
- - 事件函数如果内部语句过多，请使用bind（this）方法，示例：onChangeEvent: this.formInputChange.bind(this)
360
+ 表单项使用 [FormItem](#formitem表单项) 类型，下拉/数字等子配置见 [SelectOption](#selectoption下拉选项配置)、[InputNumber](#inputnumber数字输入配置)。
345
361
 
346
- ## 5、状态(hd-status)
362
+ ---
347
363
 
348
- ### 效果图
364
+ ## 11、明细表单（hd-form-lines）
349
365
 
350
- ![hd-button](../../../../../海鼎/code/fantasy-ngzorro-project/projects/fantasy-ngzorro/readme/img/hd-status.png)
366
+ 可编辑的明细行表格，支持键盘导航、行内搜索、合计等。
351
367
 
352
368
  ### 示例
353
369
 
354
370
  ```html
355
- <hd-status status="initial">未审核</hd-status>
356
- <hd-status status="audited">已审核</hd-status>
357
- <hd-status status="picking">拣货中</hd-status>
358
- <hd-status status="partshipped">部分收货</hd-status>
359
- <hd-status status="received">已收货</hd-status>
360
- <hd-status status="deleted">已删除</hd-status>
361
- <hd-status status="shipped">已配送</hd-status>
371
+ <hd-form-lines #hdFormLines showSearch showKeyboardOperateTip
372
+ [formLines]="formLines" [formLinesData]="formLinesData"
373
+ [operateButtons]="['add', 'delete']" [allowEmpty]="false"
374
+ (changeEvent)="formLinesChangeEvent($event)">
375
+ </hd-form-lines>
362
376
  ```
363
377
 
364
- ### 说明
378
+ | 参数 | 类型 | 默认值 | 说明 |
379
+ | ---- | ---- | ------ | ---- |
380
+ | formLines | FormLine[] | — | 列定义 |
381
+ | formLinesData | any[] | — | 行数据 |
382
+ | operateButtons | string[] | ['add','delete'] | 操作按钮 |
383
+ | showDeleteConfirm | boolean | false | 删除前确认 |
384
+ | showSearch | boolean | false | 行内搜索 |
385
+ | showKeyboardOperateTip | boolean | false | 键盘操作提示 |
386
+ | showLineNumber | boolean | true | 序号列 |
387
+ | allowEmpty | boolean | true | 是否允许空表 |
388
+ | showTotal | boolean | false | 合计行 |
389
+ | totalOption / columnsNumber | — | — | 合计配置 |
390
+ | scroll | object | { x: '1px' } | 横向滚动 |
391
+ | changeEvent | EventEmitter | — | 表单变化 |
392
+ | deleteLastLineEvent | EventEmitter | — | 删除最后一行 |
365
393
 
366
- | 参数 | 类型 | 说明 |
367
- | ------ | ------ | ------ |
368
- | status | string | 状态值 |
394
+ #### FormLine 配置
369
395
 
370
- ### 注意点
396
+ 明细列使用 [FormLine](#formline明细表单项) 类型，含 [ColorOption](#coloroption)、[ExplainOption](#explainoption) 及表格型 [SelectOption](#selectoption下拉选项配置)。
371
397
 
372
- - state需要在hd-status.service.ts中的statusToColor添加值，选择对应的颜色
398
+ ---
373
399
 
400
+ 开启 `showKeyboardOperateTip` 后支持 `[↑][↓][←][→]`、`Enter` 在单元格间跳转；InputNumber 上下键用于跳转，不触发 step 增减。
374
401
 
402
+ #### 暴露方法
375
403
 
376
- ## 6、详情头(hd-detail-tip)
404
+ ```typescript
405
+ this.hdFormLines.getValid(); // 获取整表校验状态
406
+ ```
377
407
 
378
- ### 效果图
408
+ ---
379
409
 
380
- ![hd-button](../../../../../海鼎/code/fantasy-ngzorro-project/projects/fantasy-ngzorro/readme/img/hd-detail-tip.png)
410
+ ## 12、详情头（hd-detail-tip）
381
411
 
382
412
  ### 示例
383
413
 
@@ -385,25 +415,16 @@ filterChange(filter?: any) {
385
415
  <hd-detail-tip state="shipped" stateText="配送中" billNumber="202111030001"></hd-detail-tip>
386
416
  ```
387
417
 
388
- ### 说明
389
-
390
- | 参数 | 类型 | 说明 |
391
- | ---------- | ------ | -------- |
392
- | state | string | 状态值 |
393
- | stateText | string | 状态文案 |
394
- | billNumber | string | 单号 |
395
-
396
- ### 注意点
397
-
398
- - state需要在hd-status.service.ts中的statusToColor添加值，选择对应的颜色
399
-
400
-
401
-
402
- ## 7、详情单头(hd-detail-form)
418
+ | 参数 | 类型 | 说明 |
419
+ | ---- | ---- | ---- |
420
+ | state | string | 状态值 |
421
+ | stateText | string | 状态文案 |
422
+ | billNumber | string | 单号 |
423
+ | tip | string | 前缀文案，默认「详情」 |
403
424
 
404
- ### 效果图
425
+ ---
405
426
 
406
- ![hd-button](../../../../../海鼎/code/fantasy-ngzorro-project/projects/fantasy-ngzorro/readme/img/hd-detail-form.png)
427
+ ## 13、详情单头（hd-detail-form）
407
428
 
408
429
  ### 示例
409
430
 
@@ -411,564 +432,432 @@ filterChange(filter?: any) {
411
432
  <hd-detail-form [formCols]="formCols"></hd-detail-form>
412
433
  ```
413
434
 
414
- ```tsx
415
- // 详情页面单头组件数据
416
- formCols: Array<HdOption> = [
417
- {
418
- label: '收货单号收货单号收货单号',
419
- value: '202111030001'
420
- },
421
- {
422
- label: '收货单号',
423
- value: '202111030001'
424
- },
425
- {
426
- label: '收货单号',
427
- value: '202111030001'
428
- },
429
- {
430
- label: '收货单号',
431
- value: ''
432
- },
433
- {
434
- label: '收货单号',
435
- value: '202111030001'
436
- },
437
- {
438
- label: '备注',
439
- value: '字数很多字数很多字数很多字数很多202111030001字数很多字数很多字数很多字数很多202111030001字数很多字数很多字数很多字数很多202111030001'
440
- },
435
+ ```typescript
436
+ formCols: HdOption[] = [
437
+ { label: '收货单号', value: '202111030001' },
438
+ { label: '备注', value: '...' }
441
439
  ];
442
440
  ```
443
441
 
444
- ### 说明
442
+ | 参数 | 类型 | 说明 |
443
+ | ---- | ---- | ---- |
444
+ | formCols | HdOption[] | 展示字段，见 [HdOption](#hdoption键值展示项) |
445
445
 
446
- | 参数 | 类型 | 说明 |
447
- | -------- | -------------------- | ------------ |
448
- | formCols | Array<{label,value}> | 展示的列数组 |
446
+ ---
449
447
 
448
+ ## 14、详情明细（hd-detail-lines）
450
449
 
450
+ 详情页只读/轻编辑明细表格，支持**前端分页**和**行内搜索**。
451
451
 
452
- ## 8、详情明细(hd-detail-lines)
452
+ ### 示例
453
+
454
+ ```html
455
+ <!-- 带搜索 + 前端分页 -->
456
+ <hd-detail-lines showSearch [lines]="lines" [scroll]="{x: '1150px'}">
457
+ <ng-template #detailLineHead>...</ng-template>
458
+ <ng-template #detailLineBody let-data let-index="index">...</ng-template>
459
+ </hd-detail-lines>
453
460
 
454
- ### 效果图
461
+ <!-- 勾选 + 合计 + 前端分页 -->
462
+ <hd-detail-lines [lines]="lines" showSelected selectField="uuid"
463
+ hdFrontPagination showTotal columnsNumber="4" [totalOption]="detailLinesTotalOption"
464
+ (selectEvent)="selectResultLines($event)">
465
+ ...
466
+ </hd-detail-lines>
467
+ ```
455
468
 
456
- ![hd-button](../../../../../海鼎/code/fantasy-ngzorro-project/projects/fantasy-ngzorro/readme/img/hd-detail-lines.png)
469
+ | 参数 | 类型 | 默认值 | 说明 |
470
+ | ---- | ---- | ------ | ---- |
471
+ | lines | any[] | — | 明细数据 |
472
+ | scroll | object | { x: '1px' } | 横向滚动 |
473
+ | showSearch | boolean | false | 行内搜索 |
474
+ | searchFields | string[] | [] | 搜索字段，空则搜全部字段 |
475
+ | hdFrontPagination | boolean | false | 前端分页 |
476
+ | showSelected | boolean | false | 勾选 |
477
+ | selectField | string | billNumber | 勾选主键 |
478
+ | selectedField | string | — | 初始勾选标记字段 |
479
+ | selectEvent | EventEmitter | — | 勾选变化 |
480
+ | allowDrop | boolean | false | 拖拽排序 |
481
+ | showTotal | boolean | false | 合计行 |
482
+ | columnsNumber | number | — | 总列数（含合计） |
483
+ | totalOption | TotalOption[] | — | 合计配置，见 [TotalOption](#totaloption明细合计行) |
484
+ | detailLineHead / detailLineBody | TemplateRef | — | 表头 / 表体插槽 |
485
+
486
+ ---
487
+
488
+ ## 15、详情明细-服务端分页（hd-detail-lines-page）
489
+
490
+ 与 `hd-detail-lines` 模板用法相同，但**不做内部分页和搜索**，分页由父组件控制（对齐 `hd-table`）。
457
491
 
458
492
  ### 示例
459
493
 
460
494
  ```html
461
- <hd-detail-lines [scroll]="{x: '1150px'}" selectField="uuid" (selectEvent)="selectResultLines($event)"
462
- [lines]="lines" showSelected columnsNumber="4" showTotal [totalOption]="detailLinesTotalOption">
495
+ <hd-detail-lines-page [scroll]="{x: '1150px'}"
496
+ [lines]="detailLinesPageData.content"
497
+ [tableData]="detailLinesPageData"
498
+ [tableLoading]="detailLinesPageLoading"
499
+ [tablePageIndex]="detailLinesPageIndex"
500
+ [tablePageSize]="detailLinesPageSize"
501
+ (tablePageIndexChange)="onDetailLinesPageIndexChange($event)"
502
+ (tablePageSizeChange)="onDetailLinesPageSizeChange($event)">
463
503
  <ng-template #detailLineHead>
464
504
  <th style="width: 40px">序号</th>
465
505
  <th style="width: 150px">商品编码</th>
466
506
  <th>商品名称</th>
467
- <th style="width: 80px" nzRight="0">操作</th>
468
507
  </ng-template>
469
- <ng-template #detailLineBody let-data>
470
- <td style="width: 40px">{{ data.lineNumber || '&lt;空&gt;' }}</td>
471
- <td style="width: 150px">
472
- <span *ngIf="!modifyFlag;else modifyTmp">{{ data.productCode || '&lt;空&gt;' }}</span>
473
- <ng-template #modifyTmp>
474
- <input nz-input placeholder="请输入商品编码" [(ngModel)]="data.productCode" />
475
- </ng-template>
476
- </td>
477
- <td>{{ data.productName || '&lt;空&gt;' }}</td>
478
- <td style="width: 80px" nzRight="0">
479
- <span class="common-btn-group">
480
- <a>详情</a>
481
- <a class="common-danger-btn">删除</a>
482
- </span>
483
- </td>
508
+ <ng-template #detailLineBody let-data let-index="index">
509
+ <td>{{ index + 1 }}</td>
510
+ <td>{{ data.productCode }}</td>
511
+ <td>{{ data.productName }}</td>
484
512
  </ng-template>
485
- </hd-detail-lines>
513
+ </hd-detail-lines-page>
486
514
  ```
487
515
 
488
- ```tsx
489
- detailLinesTotalOption = [{
490
- insertIndex: 1,
491
- insertValue: 100
492
- },{
493
- insertIndex: 2,
494
- insertValue: 200,
495
- align: 'right'
496
- }]
497
-
498
- /**
499
- * 明细的选择事件
500
- * @param selectList 勾选的所有的数据集合
501
- */
502
- selectResultLines(selectList?: any) {
503
- // 拿到勾选的所有的数据
504
- // console.log('selectResultLines', selectList);
516
+ ```typescript
517
+ detailLinesPageData: Page<any> = new Page();
518
+ detailLinesPageIndex = 1;
519
+ detailLinesPageSize = 5;
520
+ detailLinesPageLoading = false;
521
+
522
+ loadDetailLinesPage(reset = false) {
523
+ if (reset) { this.detailLinesPageIndex = 1; }
524
+ this.detailLinesPageLoading = true;
525
+ this.service.queryLines({
526
+ pageNumber: this.detailLinesPageIndex - 1,
527
+ pageSize: this.detailLinesPageSize
528
+ }).subscribe(result => {
529
+ this.detailLinesPageData = result;
530
+ this.detailLinesPageLoading = false;
531
+ });
505
532
  }
506
- ```
507
533
 
508
- ### 说明
534
+ onDetailLinesPageIndexChange(pageIndex: number) {
535
+ this.detailLinesPageIndex = pageIndex;
536
+ this.loadDetailLinesPage();
537
+ }
509
538
 
510
- | 参数 | 类型 | 默认值 | 说明 |
511
- | -------------- | ------------------------------ | ---------- | ------------------------------------------------------------ |
512
- | *lines | Array<any> | | 接口返回的源数据 |
513
- | showTotal | boolean | false | 是否显示合计 |
514
- | columnsNumber | number \| string | | 列数（detailLineHead中所有的列数） |
515
- | totalOption | Array<TotalOption> | | 合计列选项 |
516
- | showSelected | boolean | false | 是否开启勾选功能 |
517
- | selectEvent | EventEmitter<array> | | 勾选状态改变触发函数，emit已勾选数组 |
518
- | selectField | string | billNumber | 与showSelected配合使用，勾选判断逻辑的关键词（传入源数据中的主键字段） |
519
- | detailLineHead | @ContentChild TemplateRef<any> | | 表格头插槽 |
520
- | detailLineBody | @ContentChild TemplateRef<any> | | 表格数据主体插槽 |
539
+ onDetailLinesPageSizeChange(pageSize: number) {
540
+ this.detailLinesPageSize = pageSize;
541
+ this.loadDetailLinesPage(true);
542
+ }
543
+ ```
521
544
 
522
- #### TotalOption
545
+ | 参数 | 类型 | 默认值 | 说明 |
546
+ | ---- | ---- | ------ | ---- |
547
+ | lines | any[] | [] | 当前页数据（也可用 tableData.content） |
548
+ | tableData | Page\<any\> | — | 分页对象，提供 totalElements |
549
+ | tablePageIndex / tablePageSize | number | 1 / 10 | 分页 |
550
+ | tableLoading | boolean | false | 加载状态 |
551
+ | tablePageIndexChange | EventEmitter | — | 页码变化 |
552
+ | tablePageSizeChange | EventEmitter | — | 每页条数变化（组件内会重置到第 1 页） |
553
+ | pageChange | EventEmitter | — | 任意分页变化 |
554
+ | showSelected / allowDrop / showTotal 等 | — | — | 同 hd-detail-lines |
523
555
 
524
- | 参数 | 类型 | 说明 |
525
- | ----------- | ------ | ----------------------------------- |
526
- | insertIndex | number | 插入下标 |
527
- | insertValue | any | 插入值 |
528
- | align | string | 列对齐方式 left \| right \| center |
556
+ 模板中 `index` 为**全局序号**：`(pageIndex - 1) * pageSize + 行号`。
529
557
 
558
+ ### 与 hd-detail-lines 选型
530
559
 
560
+ | 场景 | 推荐组件 |
561
+ | ---- | -------- |
562
+ | 数据量小、前端筛选/分页 | hd-detail-lines |
563
+ | 接口分页、数据量大 | hd-detail-lines-page |
531
564
 
532
- ## 9、表单(hd-form)
565
+ ---
533
566
 
534
- ### 效果图
567
+ ## 16、操作日志（hd-log）
535
568
 
536
- ![hd-button](../../../../../海鼎/code/fantasy-ngzorro-project/projects/fantasy-ngzorro/readme/img/hd-form.png)
569
+ 基于 `hd-detail-lines` 封装的日志展示，内置列：时间、操作人、事件、描述。
537
570
 
538
571
  ### 示例
539
572
 
540
573
  ```html
541
- <hd-form [formList]="formInput" (changeEvent)="formChangeEvent($event)"></hd-form>
574
+ <hd-log [logs]="logs"></hd-log>
542
575
  ```
543
576
 
544
- ```tsx
545
- validateHdForm: FormGroup;
546
- formInput: Array<FormItem> = [{
547
- type: FormListType.Input,
548
- label: '配送单号',
549
- name: 'billNumberEq',
550
- require: true,
551
- width: 2,
552
- value: '',
553
- maxLength: 10,
554
- color: 'blue',
555
- // 事件传递的建议写法, 建议使用bind(this), 而不是箭头函数
556
- onChangeEvent: this.formInputChange.bind(this)
557
- }, {
558
- type: FormListType.ViewDom,
559
- label: '学校',
560
- name: 'school',
561
- width: 2,
562
- value: '[T8888]测试用中学'
563
- }, {
564
- type: FormListType.Select,
565
- label: '单项选择器选择',
566
- name: 'selectValue',
567
- value: 'qwer',
568
- require: true,
569
- defaultLabel: '组件外默认的选项',
570
- width: 2,
571
- onChangeEvent: (item) => {
572
- console.log('onChangeEvent', item);
573
- console.log('测试this', this);
574
- this.validateHdForm.get('qwer').setValue(true);
575
- },
576
- onSearchEvent: (item) => {
577
- console.log('onSearchEvent', item);
578
- },
579
- selectOption: {
580
- value: 'value',
581
- label: 'label',
582
- showLabelAndValue: true, // 使用此配置，最后展示为[value]label
583
- selectList: [{
584
- value: true,
585
- label: '是'
586
- }, {
587
- value: false,
588
- label: '否'
589
- }]
590
- }
591
- }, {
592
- type: FormListType.MultipleSelect,
593
- label: '多项选择器选择',
594
- name: 'multipleSelectValue',
595
- value: ['05', '06'],
596
- require: true,
597
- defaultLabel: ['第五个', '第六个'],
598
- width: 2,
599
- onChangeEvent: (item) => {
600
- console.log('onChangeEvent', item);
601
- },
602
- onSearchEvent: (item) => {
603
- console.log('onSearchEvent', item);
604
- },
605
- selectOption: {
606
- value: 'value',
607
- label: 'label',
608
- selectList: [{
609
- value: '01',
610
- label: '第一个'
611
- }, {
612
- value: '02',
613
- label: '第二个'
614
- }, {
615
- value: '03',
616
- label: '第三个'
617
- }, {
618
- value: '04',
619
- label: '第四个'
620
- }]
621
- }
622
- }, {
623
- type: FormListType.Date,
624
- label: '单个日期选择选择',
625
- name: 'dateValue',
626
- width: 1,
627
- value: '2020-1-2'
628
- }, {
629
- type: FormListType.DateRange,
630
- label: '日期范围选择',
631
- require: true,
632
- width: 1,
633
- name: 'dateRangeValue',
634
- value: ['2020-1-2', '2020-1-2']
635
- }, {
636
- type: FormListType.InputNumber,
637
- label: '数字输入',
638
- require: true,
639
- width: 1,
640
- name: 'inputNumberValue',
641
- value: null,
642
- disabled: false,
643
- color: 'red'
644
- }, {
645
- type: FormListType.TextArea,
646
- label: '备注',
647
- require: true,
648
- name: 'remark',
649
- width: 4,
650
- value: '这是个备注'
651
- }];
652
-
653
-
654
- /**
655
- * form组件值改变函数
656
- * @param validateForm form组件返回的表单对象
657
- */
658
- formChangeEvent(validateForm: any) {
659
- this.validateHdForm = validateForm;
660
- // console.log('form组件返回',this.validateHdForm.getRawValue());
577
+ | 参数 | 类型 | 说明 |
578
+ | ---- | ---- | ---- |
579
+ | logs | any[] | 日志列表，字段：`createInfo.operateTime`、`createInfo.operatorName`、`event`、`describe` |
580
+
581
+ 也可作为 Modal 内容组件使用（`entryComponents: HdLogComponent`）。
582
+
583
+ ---
584
+
585
+ ## 附录：公共配置类型
586
+
587
+ 以下类型在 `hd-filter`、`hd-form`、`hd-form-lines`、`hd-table` 等组件中复用。
588
+
589
+ ### SelectOption（下拉选项配置）
590
+
591
+ 用于 `Filter.selectOption`、`FormItem.selectOption`、`FormLine.selectOption`。
592
+
593
+ | 参数 | 类型 | 默认值 | 说明 |
594
+ | ---- | ---- | ------ | ---- |
595
+ | label | string | — | selectList 中作为显示文案的字段名 |
596
+ | value | string | — | selectList 中作为绑定值的字段名 |
597
+ | selectList | any[] | — | 静态选项列表 |
598
+ | selectListName | string | — | 选项来自行数据某字段时使用（配合 hide 字段） |
599
+ | showLabelAndValue | boolean | false | 选项展示为 `[value]label` |
600
+ | hdDropdownMatchSelectWidth | boolean | false | 下拉宽度是否与控件一致 |
601
+ | hdServerSearch | boolean | false | 是否远程搜索 |
602
+ | hdShowSearch | boolean | true | 是否可搜索 |
603
+ | hdAllowClear | boolean | true | 是否允许清空 |
604
+ | hdShowItemCode | boolean | false | 已选展示是否带 `[value]` 前缀 |
605
+ | tableColumns | SelectOptionTableColumn[] | — | 表格型下拉列配置（商品选择器等） |
606
+
607
+ ```typescript
608
+ selectOption: {
609
+ value: 'productCode',
610
+ label: 'productName',
611
+ showLabelAndValue: true,
612
+ hdServerSearch: true,
613
+ selectList: [],
614
+ tableColumns: [
615
+ { width: ColWidth.codeNameColWidth, label: '商品', name: 'product',
616
+ render: (line) => `[${line.productCode}] ${line.productName}` },
617
+ { width: ColWidth.enumColWidth, label: '规格', name: 'specification' }
618
+ ]
661
619
  }
662
620
  ```
663
621
 
664
- ### 说明
665
-
666
- | 参数 | 类型 | 默认值 | 说明 |
667
- | --------------- | --------------- | ------ | -------------------------------- |
668
- | formInput | Array<FormItem> | | 表单控件数组 |
669
- | formChangeEvent | EventEmitter<> | | 表单值改变事件，返回当前表单内容 |
670
-
671
- #### TotalOption
672
-
673
- | 参数 | 类型 | 说明 |
674
- | ------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
675
- | *type | FormListType | 控件类型 Input \| Select \| Date \| DateRange \| MultipleSelect \| TextArea \| InputNumber \| ViewDom（单纯的显示控件） |
676
- | *label | string | 文本 |
677
- | *name | string | 字段名 |
678
- | require | boolen | 是否必填 |
679
- | placeholder | string | 输入框提示文案 |
680
- | width | number | 占据的列数。默认1 |
681
- | value | string \| boolen \| number \| Array<Date> \| Array<string> \| null | 值 |
682
- | disabled | boolen | 是否禁用 |
683
- | color | string | 控件文本颜色 |
684
- | hide | boolean | 是否为隐藏字段，仅用于填充表单的字段，不显示在页面上 |
685
- | maxLength | number | input控件的输入长度 |
686
- | selectOption | SelectOption | 控件为Select时，选项列表 |
687
- | inputNumber | InputNumber | number组件的选项，min、max、step |
688
- | onChangeEvent | Function | 控件的值改变事件 可用于控件间联动 |
689
- | onSearchEvent | Function | select选择器搜索事件 可用于更新备选集合 |
690
- | defaultLabel | string \| Array<string> | select选择器不初始化的时候可以使用defaultLabel搭配value，设置默认值 |
691
-
692
- #### InputNumber
693
-
694
- | 参数 | 类型 | 默认值 | 说明 |
695
- | ---- | ------ | -------- | ------ |
696
- | min | number | 0 | 最小值 |
697
- | max | number | 99999999 | 最大值 |
698
- | step | number | 1 | 步阶 |
699
-
700
- #### SelectOption
701
-
702
- | 参数 | 类型 | 默认值 | 说明 |
703
- | -------------------------- | ---------- | ------ | ------------------------------------------------------ |
704
- | *label | string | | label字段，取selectList数组中的某个字段作为选择器label |
705
- | *value | string | | Value字段，取selectList数组中的某个字段作为选择器value |
706
- | *selectList | Array<any> | | 选项列表 |
707
- | showLabelAndValue | boolean | false | 选项同时展示label和value，格式：[value]label |
708
- | hdDropdownMatchSelectWidth | boolean | false | 选择框长度是否和控件长度保持一致，默认不保持 |
709
-
710
- ## 10、明细表单(hd-form-lines)
711
-
712
- ### 效果图
713
-
714
- ![hd-button](../../../../../海鼎/code/fantasy-ngzorro-project/projects/fantasy-ngzorro/readme/img/hd-form-lines.png)
715
-
716
- ### 示例
717
-
718
- ```html
719
- <hd-form-lines [formLines]="formLines" [operateButtons]="['delete']" showDeleteConfirm [formLinesData]="formLinesData" (changeEvent)="formLinesChangeEvent($event)"></hd-form-lines>
720
- ```
721
-
722
- ```tsx
723
- validateHdFormLines: FormGroup;
724
- formLines: Array<FormLine> = [{
725
- type: FormLineType.Select,
726
- label: '商品',
727
- name: 'productCode',
728
- require: true,
729
- onChangeEvent: (item, line: FormGroup) => {
730
- // 列之间的交互赋值等等
731
- console.log('item', item);
732
- console.log('测试this', line);
733
- if (item) {
734
- line.get('productSpec').setValue(12);
735
- line.get('money').setValue(22);
736
- }
737
- },
738
- onSearchEvent: (item) => {
739
- console.log('onSearchEvent', item);
740
- // 在这里去调接口查数据
741
- this.formLines[0].selectOption.selectList = [{
742
- productCode: '03',
743
- productName: '第三个'
744
- }, {
745
- productCode: '04',
746
- productName: '第四个'
747
- }]
748
- console.log('formLines', this.formLines);
749
- },
750
- selectOption: {
751
- value: 'productCode',
752
- label: 'productName',
753
- showLabelAndValue: true,
754
- selectList: [{
755
- productCode: '01',
756
- productName: '第一个'
757
- }, {
758
- productCode: '02',
759
- productName: '第二个'
760
- }]
761
- }
762
- },{
763
- type: FormLineType.MultipleSelect,
764
- label: '多项选择器选择',
765
- name: 'multipleSelectValue',
766
- require: true,
767
- onChangeEvent: (item) => {
768
- console.log('onChangeEvent', item);
769
- },
770
- onSearchEvent: (item) => {
771
- console.log('onSearchEvent', item);
772
- },
773
- selectOption: {
774
- value: 'multipleSelectValue',
775
- label: 'multipleSelectValueLabel',
776
- selectList: [{
777
- multipleSelectValue: '01',
778
- multipleSelectValueLabel: '第一个'
779
- }, {
780
- multipleSelectValue: '02',
781
- multipleSelectValueLabel: '第二个'
782
- }, {
783
- multipleSelectValue: '03',
784
- multipleSelectValueLabel: '第三个'
785
- }, {
786
- multipleSelectValue: '04',
787
- multipleSelectValueLabel: '第四个'
788
- }]
789
- }
790
- }, {
791
- type: FormLineType.Input,
792
- label: '测试输入框',
793
- name: 'testInput',
794
- maxLength: 10,
795
- explainOption: {
796
- show: true,
797
- name: 'explain',
798
- color: 'red'
799
- },
800
- onChangeEvent: (item, line: FormGroup) => {
801
- // 这里利用隐藏属性 根据line里面的相关字段 去判断是否需要展示出来
802
- if(line.get('hideQuantity').value === 100 && item){
803
- line.get('explain').setValue('这是一个测试文案qaq');
804
- }else{
805
- line.get('explain').setValue('');
806
- }
807
- },
808
- }, {
809
- type: FormLineType.InputNumber,
810
- label: '测试输入框1',
811
- name: 'testInput1',
812
- maxLength: 10,
813
- colorOption: {
814
- name: 'inputColor',
815
- color: 'red'
816
- },
817
- onChangeEvent: (item, line: FormGroup) => {
818
- // 这里利用隐藏属性 根据line里面的相关字段 去判断是否需要展示出来
819
- if(line.get('testInput1').value >= 50 && item){
820
- line.get('inputColor').setValue('red');
821
- }else{
822
- line.get('inputColor').setValue(null);
823
- }
824
- },
825
- }, {
826
- type: FormLineType.ViewDom,
827
- label: '规格',
828
- name: 'productSpec'
829
- }, {
830
- type: FormLineType.ViewDom,
831
- label: '金额',
832
- name: 'money',
833
- preserveNumber: 1
834
- }, {
835
- type: FormLineType.ViewDom,
836
- label: '价格',
837
- align: 'right',
838
- name: 'price',
839
- preserveNumber: 2
840
- }, {
841
- type: FormLineType.ViewDom,
842
- label: '数量',
843
- name: 'quantity'
844
- }, {
845
- type: FormLineType.ViewDom,
846
- label: '隐藏数量',
847
- hide: true,
848
- name: 'hideQuantity'
849
- }, {
850
- type: FormLineType.ViewDom,
851
- label: '隐藏的说明',
852
- hide: true,
853
- name: 'explain'
854
- }, {
855
- type: FormLineType.ViewDom,
856
- label: '隐藏的颜色，用于表示',
857
- hide: true,
858
- name: 'inputColor'
859
- }];
622
+ ### SelectOptionTableColumn（表格型下拉列）
623
+
624
+ | 参数 | 类型 | 说明 |
625
+ | ---- | ---- | ---- |
626
+ | width | number | 列宽（px），参考 `ColWidth` |
627
+ | label | string | 表头文案 |
628
+ | name | string | selectList item 字段名 |
629
+ | render | (line) => string | 自定义渲染，优先级高于 name |
630
+ | icons | SelectOptionTableColumnIcon[] | 图标列（如推荐、协采标签） |
631
+
632
+ ### SelectOptionTableColumnIcon（表格型下拉图标列）
633
+
634
+ | 参数 | 类型 | 说明 |
635
+ | ---- | ---- | ---- |
636
+ | iconName | string | `hd-select-close`（禁用）、`hd-select-purchase`（协）、`hd-recommend-star`、`hd-img-star` |
637
+ | fieldName | string | selectList item 中控制显示的布尔字段 |
638
+
639
+ ### InputNumber（数字输入配置）
640
+
641
+ 用于 `Filter.inputNumber`、`FormItem.inputNumber`、`FormLine.inputNumber`。
642
+
643
+ | 参数 | 类型 | 默认值 | 说明 |
644
+ | ---- | ---- | ------ | ---- |
645
+ | min | number | 0 | 最小值 |
646
+ | max | number | 99999999 | 最大值 |
647
+ | step | number | 1 | 步进值 |
648
+ | precision | number | 4 | 小数精度 |
649
+ | nzFormatter | Function | — | 展示格式化 |
650
+ | nzParser | Function | — | 输入解析 |
651
+
652
+ ### CascaderOption（级联选择配置）
653
+
654
+ | 参数 | 类型 | 说明 |
655
+ | ---- | ---- | ---- |
656
+ | options | any[] | 级联数据源（ng-zorro cascader 格式） |
657
+
658
+ ### HdOption（键值展示项）
659
+
660
+ 用于 `hd-detail-form` 的 `formCols`。
661
+
662
+ | 参数 | 类型 | 说明 |
663
+ | ---- | ---- | ---- |
664
+ | label | string | 标签 |
665
+ | value | any | 值 |
666
+ | color | string | 文字颜色 |
667
+ | hide | boolean | 是否隐藏 |
668
+ | clickText | string | 可点击文案 |
669
+ | click | (value) => void | 点击回调 |
670
+
671
+ ### Filter（筛选项）
672
+
673
+ | 参数 | 类型 | 默认值 | 说明 |
674
+ | ---- | ---- | ------ | ---- |
675
+ | type | FilterListType | — | 控件类型 |
676
+ | label | string | — | 标签 |
677
+ | name | string | — | 字段名（提交给后端的 key） |
678
+ | value | any | null | 初始值 |
679
+ | placeholder | string | — | 占位符 |
680
+ | require | boolean | false | 是否必填 |
681
+ | show | boolean | — | 是否显示 |
682
+ | selectOption | SelectOption | — | Select / MultipleSelect 配置 |
683
+ | inputNumber | InputNumber | — | InputNumber 配置 |
684
+ | cascaderOption | CascaderOption | — | Cascader 配置 |
685
+ | showTime | boolean | false | Date 是否含时间 |
686
+ | hdDisabledDate | Function | — | 不可选日期 `(date) => boolean` |
687
+ | onChangeEvent | Function | — | 值变化 |
688
+ | onSearchEvent | Function | — | 下拉搜索 |
689
+ | onBlurEvent | Function | — | 失焦 |
690
+ | onChangeEventDebounceTime | number | — | change 防抖（ms） |
691
+ | onSearchEventEventDebounceTime | number | — | search 防抖（ms） |
692
+
693
+ #### FilterListType 枚举
694
+
695
+ `Input` \| `Select` \| `MultipleSelect` \| `Date` \| `DateRange` \| `Cascader` \| `Month` \| `InputNumber`
696
+
697
+ ### FormItem（表单项）
698
+
699
+ | 参数 | 类型 | 默认值 | 说明 |
700
+ | ---- | ---- | ------ | ---- |
701
+ | type | FormListType | — | 控件类型 |
702
+ | label / name | string | — | 标签 / 字段名 |
703
+ | require | boolean | false | 是否必填 |
704
+ | width | number | 1 | 占据列数（总宽 4 列） |
705
+ | hide | boolean | false | 隐藏字段 |
706
+ | value | any | null | 初始值 |
707
+ | placeholder | string | — | 占位符 |
708
+ | disabled | boolean | — | 是否禁用 |
709
+ | color / labelColor | string | — | 控件 / 标签颜色 |
710
+ | maxLength | number | — | Input 最大长度 |
711
+ | textAreaRows | number | — | TextArea 行数 |
712
+ | explain | string | — | label 下方说明 |
713
+ | showTime | boolean | false | Date 含时间 |
714
+ | format | string | — | 时间格式化 |
715
+ | selectOption | SelectOption | — | 下拉配置 |
716
+ | inputNumber | InputNumber | — | 数字框配置 |
717
+ | cascaderOption | CascaderOption | — | 级联配置 |
718
+ | defaultLabel | string \| string[] | — | Select 默认展示文案 |
719
+ | hdDisabledDate | Function | — | 不可选日期 |
720
+ | validatorKeys | ValidatorKey[] | — | 校验键 |
721
+ | validator | ValidatorFn | — | 自定义校验 |
722
+ | onChangeEvent / onSearchEvent | Function | — | 值变化 / 下拉搜索 |
723
+ | onChangeEventDebounceTime | number | — | change 防抖（ms） |
724
+ | onSearchEventEventDebounceTime | number | — | search 防抖（ms） |
725
+
726
+ #### FormListType 枚举
727
+
728
+ `Input` \| `Select` \| `MultipleSelect` \| `Date` \| `DateRange` \| `TextArea` \| `InputNumber` \| `ViewDom` \| `Switch` \| `Time` \| `Cascader`
729
+
730
+ #### ValidatorKey
731
+
732
+ | 参数 | 类型 | 说明 |
733
+ | ---- | ---- | ---- |
734
+ | key | string | 校验规则 key |
735
+ | label | string | 校验失败提示 |
736
+
737
+ ### FormLine（明细表单项）
738
+
739
+ 在 FormItem 基础上用于行内编辑，额外字段：
740
+
741
+ | 参数 | 类型 | 默认值 | 说明 |
742
+ | ---- | ---- | ------ | ---- |
743
+ | type | FormLineType | — | 控件类型 |
744
+ | align | string | — | 列对齐 |
745
+ | hideViewDomValue | boolean | false | ViewDom 隐藏 value |
746
+ | isSelect | boolean | — | 聚焦后全选内容 |
747
+ | preserveNumber | number | — | ViewDom 小数位 |
748
+ | disabled | boolean | — | 是否禁用 |
749
+ | style | object | — | 列样式 |
750
+ | canSearch | boolean | false | hide 字段参与搜索 |
751
+ | explainOption / explainOptionRight | ExplainOption | — | 说明文字 |
752
+ | colorOption | ColorOption | — | 动态颜色 |
753
+ | selectOption | SelectOption | — | 含 tableColumns 表格下拉 |
754
+ | onChangeEventDebounceTime | number | — | change 防抖（ms） |
755
+
756
+ #### FormLineType 枚举
757
+
758
+ `Input` \| `Select` \| `Date` \| `DateRange` \| `TextArea` \| `InputNumber` \| `MultipleSelect` \| `ViewDom` \| `Switch` \| `Time`
759
+
760
+ #### ColorOption / ExplainOption
761
+
762
+ | ColorOption | ExplainOption |
763
+ | ----------- | ------------- |
764
+ | name：hide 字段名存颜色 | show：是否显示 |
765
+ | color：默认颜色 | name：hide 字段名存文案 |
766
+ | | color：文字颜色 |
767
+
768
+ #### FormLine 事件签名
769
+
770
+ ```typescript
771
+ onChangeEvent: (value, line: FormGroup) => void
772
+ onSearchEvent: (keyword, line?: FormGroup) => void
860
773
  ```
861
774
 
862
- ### 说明
863
-
864
- | 参数 | 类型 | 默认值 | 说明 |
865
- | ----------------- | --------------- | ---------------- | ------------------------------------------------------------ |
866
- | formInput | Array<FormItem> | | 表单控件数组 |
867
- | operateButtons | Array<string> | ['add','delete'] | 操作按钮组，默认有添加和删除，如传入['delete']则不显示新增按钮 |
868
- | showDeleteConfirm | boolen | false | 删除按钮是否显示确认提示框 |
869
- | formChangeEvent | EventEmitter<> | | 表单值改变事件，返回当前表单内容 |
870
-
871
- #### TotalOption
872
-
873
- | 参数 | 类型 | 说明 |
874
- | -------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
875
- | *type | FormListType | 控件类型 Input \| Select \| Date \| DateRange \| MultipleSelect \| TextArea \| InputNumber \| ViewDom（单纯的显示控件） |
876
- | *label | string | 文本 |
877
- | *name | string | 字段名 |
878
- | placeholder | string | 输入框提示文案 |
879
- | require | boolen | 是否必填 |
880
- | width | number | 占据的列数。默认1 |
881
- | value | string \| boolen \| number \| Array<Date> \| Array<string> \| null | 值 |
882
- | align | string | 列对齐方式，'left' \| 'right' \| 'center' |
883
- | isSelect | boolean | 输入框等是否允许点击之后全选内容，默认不允许 |
884
- | colorOption | ColorOption | 颜色选项 |
885
- | explainOption | ExplainOption | 说明字段 |
886
- | hide | boolean | 是否为隐藏字段，仅用于填充表单的字段，不显示在页面上 |
887
- | maxLength | number | input控件的输入长度 |
888
- | selectOption | SelectOption | 控件为Select时，选项列表 |
889
- | inputNumber | InputNumber | number组件的选项，min、max、step |
890
- | onChangeEvent | Function | 控件的值改变事件 可用于控件间联动 |
891
- | onSearchEvent | Function | select选择器搜索事件 可用于更新备选集合 |
892
- | defaultLabel | any | select选择器不初始化的时候可以使用defaultLabel搭配value，设置默认值 |
893
- | preserveNumber | number | 需要保留小数的列的位数 |
894
-
895
- #### ColorOption
896
-
897
- | 参数 | 类型 | 说明 |
898
- | ----- | ------ | ---- |
899
- | *name | string | 字段 |
900
- | color | string | 颜色 |
901
-
902
- #### ExplainOption
903
-
904
- | 参数 | 类型 | 说明 |
905
- | ----- | ------ | -------- |
906
- | *name | string | 字段 |
907
- | *show | string | 是否显示 |
908
- | color | string | 颜色 |
909
-
910
- #### InputNumber
911
-
912
- | 参数 | 类型 | 默认值 | 说明 |
913
- | ---- | ------ | -------- | ------ |
914
- | min | number | 0 | 最小值 |
915
- | max | number | 99999999 | 最大值 |
916
- | step | number | 1 | 步阶 |
917
-
918
- #### SelectOption
919
-
920
- | 参数 | 类型 | 默认值 | 说明 |
921
- | -------------------------- | ---------- | ------ | ------------------------------------------------------------ |
922
- | *label | string | | label字段，取selectList数组中的某个字段作为选择器label |
923
- | *value | string | | Value字段，取selectList数组中的某个字段作为选择器value |
924
- | selectList | Array<any> | | 选项列表 |
925
- | selectListName | String | | 选项列表为数据object的某个字段的时候，增加hide viewdom，selectListName设置为该hide viewdom的name |
926
- | showLabelAndValue | boolean | false | 选项同时展示label和value，格式：[value]label |
927
- | hdDropdownMatchSelectWidth | boolean | false | 选择框长度是否和控件长度保持一致，默认不保持 |
928
-
929
- ## 11、间隔(hd-space)
930
-
931
- ### 效果图(组件间的空白区域)
932
-
933
- ![hd-button](../../../../../海鼎/code/fantasy-ngzorro-project/projects/fantasy-ngzorro/readme/img/hd-space.png)
934
-
935
- ### 示例
936
-
937
- ```html
938
- <hd-space background="#fff" type="row" size="12"></hd-space>
775
+ ### HdTableColumn（表格列）
776
+
777
+ | 参数 | 类型 | 默认值 | 说明 |
778
+ | ---- | ---- | ------ | ---- |
779
+ | title / name | string | — | 列标题 / 字段名 |
780
+ | width / minWidth | number | — | 列宽 / 最小列宽 |
781
+ | align | string | left | 对齐方式 |
782
+ | color | string | — | 文字颜色 |
783
+ | fixed / fixedWidth | — | — | 固定列 |
784
+ | isShow | boolean | true | 设置列可见性 |
785
+ | canSort / canWarp | boolean | false | 排序 / 换行 |
786
+ | render / click | Function | — | 渲染 / 点击 |
787
+ | btnList | OperateBtn[] | — | 操作按钮 |
788
+
789
+ #### OperateBtn（操作列按钮）
790
+
791
+ | 参数 | 类型 | 默认值 | 说明 |
792
+ | ---- | ---- | ------ | ---- |
793
+ | name | string | — | 按钮文案 |
794
+ | showConfirm | boolean | false | popconfirm 确认 |
795
+ | isRepeat | boolean | false | 与其他按钮互斥显示 |
796
+ | click | (line) => void | — | 点击回调 |
797
+ | permission | (line) => boolean | — | 是否显示 |
798
+
799
+ #### HdTableTotalOption（hd-table 底部合计）
800
+
801
+ | 参数 | 类型 | 说明 |
802
+ | ---- | ---- | ---- |
803
+ | columnNumber | number | 总列数 |
804
+ | insertIndex | number | 插入列下标 |
805
+ | insertName | string | 合计字段名 |
806
+
807
+ #### TotalOption（明细合计行）
808
+
809
+ 用于 `hd-detail-lines`、`hd-detail-lines-page`、`hd-form-lines`。
810
+
811
+ | 参数 | 类型 | 说明 |
812
+ | ---- | ---- | ---- |
813
+ | insertIndex | number | 插入列下标（从 1 开始） |
814
+ | insertValue | any | 合计值 |
815
+ | align | string | 对齐方式 |
816
+ | showDecimal | boolean | 始终显示小数 |
817
+ | isHide | boolean | 隐藏该合计列 |
818
+
819
+ #### TableTotalOption（hd-current-table 合计，已弃用）
820
+
821
+ | 参数 | 类型 | 说明 |
822
+ | ---- | ---- | ---- |
823
+ | columnNumber | number | 总列数 |
824
+ | insertIndex | number | 插入列下标 |
825
+ | insertName | string | 合计字段名 |
826
+
827
+ ---
828
+
829
+ ## 附录：ColWidth 列宽常量
830
+
831
+ ```typescript
832
+ import { ColWidth } from 'fantasy-ngzorro';
833
+
834
+ ColWidth.tableImageColWidth // 25 表格单图标
835
+ ColWidth.tableTwoImageColWidth // 40 表格双图标（Select 表格下拉）
836
+ ColWidth.billNumberColWidth // 150 单号
837
+ ColWidth.nameColWidth // 150 名称
838
+ ColWidth.codeColWidth // 100 代码
839
+ ColWidth.codeNameColWidth // 200 [code]name
840
+ ColWidth.enumColWidth // 100 枚举
841
+ ColWidth.dateColWidth // 100 日期
842
+ ColWidth.dateTimeColWidth // 150 日期时间
843
+ ColWidth.dateRangeWidth // 200 日期范围
844
+ ColWidth.operateColWidth // 150 操作列
845
+ ColWidth.numberColWidth // 100 数字
846
+ ColWidth.remarkColWidth // 250 备注
847
+ ColWidth.fixColWidth // 150 通用固定宽
848
+ ColWidth.maxColWidth // 350 超长省略展开
939
849
  ```
940
850
 
941
- ### 说明
942
-
943
- | 参数 | 类型 | 默认值 | 说明 |
944
- | ---------- | --------- | --------- | ----------------------- |
945
- | background | string | 'inherit' | 加载中 |
946
- | type | SpaceType | | 类型，'row' \| 'column' |
947
- | size | number | | 高度 \| 宽度 |
948
-
949
- ## 12、小标题(hd-tip)
950
-
951
- ### 效果图
952
-
953
- ![hd-button](../../../../../海鼎/code/fantasy-ngzorro-project/projects/fantasy-ngzorro/readme/img/hd-tip.png)
954
-
955
- ### 示例
956
-
957
- ```html
958
- <hd-tip title="基本信息" [fontSize]="14"></hd-tip>
959
- <hd-tip title="新增" [showIcon]="false" [fontSize]="16"></hd-tip>
851
+ ## 附录：Page 分页结构
852
+
853
+ ```typescript
854
+ class Page<T> {
855
+ totalPages: number;
856
+ totalElements: number;
857
+ pageNumber: number; // 从 0 开始
858
+ pageSize: number;
859
+ hasContent: boolean;
860
+ hasNext: boolean;
861
+ content: T[];
862
+ }
960
863
  ```
961
-
962
- ### 说明
963
-
964
- | 参数 | 类型 | 默认值 | 说明 |
965
- | -------- | ------ | ------ | ---------------------- |
966
- | showIcon | boolen | true | 是否显示前面的竖线icon |
967
- | fontSize | number | | 字体大小 |
968
- | title | string | False | 标题文案 |
969
-
970
- ## TODO
971
-
972
- - [x] 文档示例
973
- - [x] 更新记录
974
- - [x]