@ttkj/avue 2.10.11 → 2.10.12
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +2 -24
- package/package.json +2 -1
- package/types/README.md +48 -0
- package/types/avue.d.ts +33 -0
- package/types/crud/column.d.ts +383 -0
- package/types/crud/index.d.ts +263 -0
- package/types/crud/option.d.ts +376 -0
- package/types/crud/refs/dialog-form.d.ts +36 -0
- package/types/form/column.d.ts +300 -0
- package/types/form/index.d.ts +63 -0
- package/types/form/option.d.ts +167 -0
- package/types/global-component/dialog-form.d.ts +57 -0
- package/types/global-component/export.d.ts +23 -0
- package/types/global-component/image-cropper.d.ts +142 -0
- package/types/global-component/image-preview.d.ts +52 -0
- package/types/global-component/watermark.d.ts +37 -0
- package/types/global.d.ts +315 -0
- package/types/index.d.ts +4 -0
@@ -0,0 +1,263 @@
|
|
1
|
+
import { VNode } from 'vue';
|
2
|
+
import { ElPagination } from 'element-ui/types/pagination';
|
3
|
+
import { cellCallbackParams, rowCallbackParams, SummaryMethodParams } from 'element-ui/types/table';
|
4
|
+
import { ElForm } from 'element-ui/types/form';
|
5
|
+
import { ElTable } from 'element-ui/types/element-ui';
|
6
|
+
import { ElUploadInternalRawFile } from 'element-ui/types/upload';
|
7
|
+
|
8
|
+
import { AvueComponent, Obj } from '../global';
|
9
|
+
import { CrudOption } from './option';
|
10
|
+
import { AvueCrudColumn } from './column';
|
11
|
+
import { AvueCrudDialogForm } from './refs/dialog-form';
|
12
|
+
|
13
|
+
/** 表单打开类型 */
|
14
|
+
export type AvueCrudFormMode = 'add' | 'edit' | 'view';
|
15
|
+
|
16
|
+
/** 权限类型 */
|
17
|
+
export type AvueCrudPermission =
|
18
|
+
| 'addBtn'
|
19
|
+
| 'addRowBtn'
|
20
|
+
| 'excelBtn'
|
21
|
+
| 'printBtn'
|
22
|
+
| 'refreshBtn'
|
23
|
+
| 'columnBtn'
|
24
|
+
| 'filterBtn'
|
25
|
+
| 'menu'
|
26
|
+
| 'viewBtn'
|
27
|
+
| 'editBtn'
|
28
|
+
| 'saveBtn'
|
29
|
+
| 'copyBtn'
|
30
|
+
| 'delBtn'
|
31
|
+
| 'selectClearBtn';
|
32
|
+
|
33
|
+
/** 表格Refs */
|
34
|
+
export interface AvueCrudRefs<T = Obj> {
|
35
|
+
/**
|
36
|
+
* 搜索组件
|
37
|
+
* @description 包含了search、prop+'SearchLabel'、prop+'Search'、searchMenu插槽
|
38
|
+
*/
|
39
|
+
headerSearch: VNode;
|
40
|
+
/**
|
41
|
+
* 顶部菜单组件
|
42
|
+
* @description 包含了menuLeft和menuRight插槽
|
43
|
+
*/
|
44
|
+
headerMenu: VNode;
|
45
|
+
/**
|
46
|
+
* 表格表单组件
|
47
|
+
* @description 用于行编辑时表单校验
|
48
|
+
*/
|
49
|
+
cellForm: ElForm;
|
50
|
+
/**
|
51
|
+
* 默认列组件
|
52
|
+
* @description 表格的默认列(序号、折叠面板、选择框),包含了expand插槽
|
53
|
+
*/
|
54
|
+
columnDefault: VNode;
|
55
|
+
/** 表格组件 */
|
56
|
+
table: ElTable;
|
57
|
+
/** 分页组件 */
|
58
|
+
tablePage: ElPagination;
|
59
|
+
/** 内置弹窗组件 */
|
60
|
+
dialogForm: AvueCrudDialogForm<T>;
|
61
|
+
/** 列显隐组件 */
|
62
|
+
dialogColumn: VNode;
|
63
|
+
/** 导出数据组件 */
|
64
|
+
dialogExcel: VNode;
|
65
|
+
/** 过滤器组件 */
|
66
|
+
dialogFilter: VNode;
|
67
|
+
}
|
68
|
+
|
69
|
+
/** 表格组件 */
|
70
|
+
export declare class AvueCrud<T = Obj, S = Partial<T>> extends AvueComponent {
|
71
|
+
// ========== 属性 ==========
|
72
|
+
/**
|
73
|
+
* 打开前的回调,会暂停Dialog的打开
|
74
|
+
* @param done 用于关闭Dialog
|
75
|
+
* @param type 当前窗口的类型
|
76
|
+
*/
|
77
|
+
beforeOpen: (done: Function, type: string) => void;
|
78
|
+
/**
|
79
|
+
* 关闭前的回调,会暂停Dialog的关闭
|
80
|
+
* @param done 用于关闭Dialog
|
81
|
+
* @param type 当前窗口的类型
|
82
|
+
*/
|
83
|
+
beforeClose: (done: Function, type: string) => void;
|
84
|
+
/** 单元格的 className 的回调方法,也可以使用字符串为所有单元格设置一个固定的 className。 */
|
85
|
+
cellClassName: string | ((param: cellCallbackParams) => string);
|
86
|
+
/** 表格数据 */
|
87
|
+
data: T[];
|
88
|
+
/** 默认配置 */
|
89
|
+
config: Obj;
|
90
|
+
/** 分页的变量(需要sync修饰符) */
|
91
|
+
page: ElPagination;
|
92
|
+
/** 搜索的变量(需要sync修饰符) */
|
93
|
+
search: S;
|
94
|
+
/** 表头单元格的 className 的回调方法,也可以使用字符串为所有表头单元格设置一个固定的 className。 */
|
95
|
+
headerCellClassName: string | ((param: cellCallbackParams) => string);
|
96
|
+
/** 组件配置属性 */
|
97
|
+
option: CrudOption;
|
98
|
+
/** 行的 className 的回调方法,也可以使用字符串为所有行设置一个固定的 className。 */
|
99
|
+
rowClassName: string | ((param: rowCallbackParams) => string);
|
100
|
+
/** 合并行或列的计算方法 */
|
101
|
+
spanMethod: (param: rowCallbackParams) => { rowspan: number; colspan: number } | number[];
|
102
|
+
/** 自定义的合计计算方法 */
|
103
|
+
summaryMethod: (param: SummaryMethodParams) => any[];
|
104
|
+
/** 表格等待框的控制 */
|
105
|
+
tableLoading = false;
|
106
|
+
/**
|
107
|
+
* 文件上传前的回调,会暂停文件上传
|
108
|
+
* @param file 上传的文件
|
109
|
+
* @param done 用于继续文件上传
|
110
|
+
* @param loading 用于中断操作
|
111
|
+
*/
|
112
|
+
uploadBefore: (file: ElUploadInternalRawFile, done: Function, loading: Function) => void;
|
113
|
+
// TODO upload-after/upload-delete/upload-preview/upload-error/upload-exceed
|
114
|
+
// ========== 方法 ==========
|
115
|
+
/** 初始化数据字典 */
|
116
|
+
dicInit(type?: 'cascader'): void;
|
117
|
+
/**
|
118
|
+
* 移除表单项的校验结果。
|
119
|
+
* @param {string | string[]} [props] 传入待移除的表单项的 prop 属性或者 prop 组成的数组,如不传则移除整个表单的校验结果
|
120
|
+
*/
|
121
|
+
clearValidate(props?: string | string[]): void;
|
122
|
+
/** 打开表单新增窗口 */
|
123
|
+
rowAdd(): void;
|
124
|
+
/** 表单保存调用 */
|
125
|
+
rowSave(): void;
|
126
|
+
/** 表单更新调用 */
|
127
|
+
rowUpdate(): void;
|
128
|
+
/**
|
129
|
+
* 关闭内置的表单弹窗
|
130
|
+
* @since 2.5.1
|
131
|
+
*/
|
132
|
+
closeDialog(): void;
|
133
|
+
/**
|
134
|
+
* 获取prop的ref对象
|
135
|
+
* @param prop 表单项的 prop 属性
|
136
|
+
*/
|
137
|
+
getPropRef(prop: keyof AvueCrudRefs<T>): ReturnType<AvueCrudRefs<T>>;
|
138
|
+
/**
|
139
|
+
* 打开表单查看窗口
|
140
|
+
* @param row 表单数据
|
141
|
+
* @param index 表单所在行
|
142
|
+
*/
|
143
|
+
rowView(row: T, index: number): void;
|
144
|
+
/**
|
145
|
+
* 打开表单编辑窗口
|
146
|
+
* @param row 表单数据
|
147
|
+
* @param index 表单所在行
|
148
|
+
*/
|
149
|
+
rowEdit(row: T, index: number): void;
|
150
|
+
/**
|
151
|
+
* 将行数据复制,并打开新增窗口
|
152
|
+
* @param row 表单数据
|
153
|
+
* @since 2.6.14
|
154
|
+
*/
|
155
|
+
rowCopy(row: T): void;
|
156
|
+
/**
|
157
|
+
* 打开行编辑
|
158
|
+
* @param row 表单数据
|
159
|
+
* @param index 表单所在行
|
160
|
+
*/
|
161
|
+
rowCell(row: T, index: number): void;
|
162
|
+
/**
|
163
|
+
* 删除表单
|
164
|
+
* @param row 表单数据
|
165
|
+
* @param index 表单所在行
|
166
|
+
*/
|
167
|
+
rowDel(row: T, index: number): void;
|
168
|
+
/** 打印表格 */
|
169
|
+
rowPrint(): void;
|
170
|
+
/** 导出表格 */
|
171
|
+
rowExcel(): void;
|
172
|
+
/** 清空表单数据 */
|
173
|
+
resetForm(): void;
|
174
|
+
/**
|
175
|
+
* 用于单选表格,设定某一行为选中行,如果调用时不加参数,则会取消目前高亮行的选中状态。
|
176
|
+
* @param {object} [row] 需要高亮的行
|
177
|
+
*/
|
178
|
+
setCurrentRow(row?: T): void;
|
179
|
+
/** 用于多选表格,清空用户的选择 */
|
180
|
+
selectClear(): void;
|
181
|
+
/** 清空搜索栏目的值 */
|
182
|
+
searchReset(): void;
|
183
|
+
/**
|
184
|
+
* 用于多选表格,切换选中状态。如果调用时不加参数,则会清空用户的选择。
|
185
|
+
* @param rows 需要切换选中状态的行
|
186
|
+
*/
|
187
|
+
toggleSelection(rows?: T[]): void;
|
188
|
+
/** 用于多选表格,切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中) */
|
189
|
+
toggleRowSelection(row: T, select?: boolean): void;
|
190
|
+
/** 用于可展开表格与树形表格,切换某一行的展开状态,如果使用了第二个参数,则是设置这一行展开与否(expanded 为 true 则展开) */
|
191
|
+
toggleRowExpansion(row: T, expanded?: boolean): void;
|
192
|
+
/** 动态计算表格高度 */
|
193
|
+
getTableHeight(): void;
|
194
|
+
/** 对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时,可能需要调用此方法 */
|
195
|
+
doLayout(): void;
|
196
|
+
/** 列初始化 */
|
197
|
+
columnInit(): void;
|
198
|
+
/** 刷新表格 */
|
199
|
+
refreshTable(callback?: Function): void;
|
200
|
+
/**
|
201
|
+
* 根据主键ID查找数据
|
202
|
+
* @description 此处的数据来源为crud组件中传入的data值,当ID为数据项中某个children中的值时,parent即为该数据项,parentList为该数据项的children,否则parent为undefined,parentList为传入的data
|
203
|
+
* @since 2.9.4
|
204
|
+
*/
|
205
|
+
findData: (id: string | number) =>
|
206
|
+
| {
|
207
|
+
/** 查找到的数据 */
|
208
|
+
item: T;
|
209
|
+
/** 数据的序号 */
|
210
|
+
index: number;
|
211
|
+
/** 上级数据列表 */
|
212
|
+
parentList: T[];
|
213
|
+
/** 上级数据 */
|
214
|
+
parent?: T;
|
215
|
+
}
|
216
|
+
| {};
|
217
|
+
/** 组件Refs */
|
218
|
+
$refs: AvueCrudRefs<T>;
|
219
|
+
}
|
220
|
+
|
221
|
+
/** 通用插槽 */
|
222
|
+
export interface CrudNormalScope<T = Obj> {
|
223
|
+
/** 数据 */
|
224
|
+
row: T;
|
225
|
+
/** 数据所在行序号 */
|
226
|
+
index: number;
|
227
|
+
/** 大小 */
|
228
|
+
size: AvueComponentSize;
|
229
|
+
/** 文字 */
|
230
|
+
label: string;
|
231
|
+
}
|
232
|
+
|
233
|
+
/** 通用搜索插槽 */
|
234
|
+
export interface CrudSearchFormNormalScope<T = any, R = Obj> {
|
235
|
+
/** 数据,与search相同 */
|
236
|
+
row: R;
|
237
|
+
/** 数据,与row相同 */
|
238
|
+
search: R;
|
239
|
+
/** 表单值 */
|
240
|
+
value: T;
|
241
|
+
/** 列配置 */
|
242
|
+
column: Obj;
|
243
|
+
/** 大小 */
|
244
|
+
size: AvueComponentSize;
|
245
|
+
/** 是否禁用 */
|
246
|
+
disabled: boolean;
|
247
|
+
/** 数据字典 */
|
248
|
+
dic?: Obj[];
|
249
|
+
}
|
250
|
+
|
251
|
+
/** 通用表单插槽 */
|
252
|
+
export interface CrudFormNormalScope<T = any> {
|
253
|
+
/** 表单值 */
|
254
|
+
value: T;
|
255
|
+
/** 列配置 */
|
256
|
+
column: AvueCrudColumn;
|
257
|
+
/** 大小 */
|
258
|
+
size: AvueComponentSize;
|
259
|
+
/** 是否禁用 */
|
260
|
+
disabled: boolean;
|
261
|
+
/** 表单弹窗类型 */
|
262
|
+
type: AvueCrudFormMode;
|
263
|
+
}
|
@@ -0,0 +1,376 @@
|
|
1
|
+
import { AvueAlignment, AvueMenuType, AvueComponentSize, Obj } from '../global';
|
2
|
+
import { FormBaseOption, FormColumnOption } from '../form/option';
|
3
|
+
import { AvueCrudColumn } from './column';
|
4
|
+
|
5
|
+
/** 表格组件基础配置属性 */
|
6
|
+
export interface CrudBaseOption {
|
7
|
+
// ======== 表格基础配置 ========
|
8
|
+
/** 表格标题 */
|
9
|
+
title: string;
|
10
|
+
/** 表头标题所用的HTML标签, 默认: 'h2' */
|
11
|
+
titleSize: string;
|
12
|
+
/** 表头对齐方式, 默认: 'center' */
|
13
|
+
headerAlign: AvueAlignment;
|
14
|
+
/** 表格列齐方式, 默认: 'center' */
|
15
|
+
align: AvueAlignment;
|
16
|
+
/** 表格边框, 默认: false */
|
17
|
+
border: boolean;
|
18
|
+
/** 表格高度差(主要用于减去其他部分让表格高度自适应) */
|
19
|
+
calcHeight?: number;
|
20
|
+
/** 列显隐按钮, 默认: true */
|
21
|
+
columnBtn: boolean;
|
22
|
+
/** 列显隐按钮, 默认: 'el-icon-s-operation' */
|
23
|
+
columnBtnIcon: string;
|
24
|
+
/** 表格的排序字段 */
|
25
|
+
defaultSort?: {
|
26
|
+
/** 默认排序字段 */
|
27
|
+
prop: string;
|
28
|
+
/** 排序方式 */
|
29
|
+
order: string;
|
30
|
+
};
|
31
|
+
/** 空数据时显示的文本内容,也可以通过slot="empty"设置, 默认: '暂无数据' */
|
32
|
+
emptyText: string;
|
33
|
+
/** 是列的宽度是否自撑开属性, 默认: true */
|
34
|
+
fit: boolean;
|
35
|
+
/** 表格高度 */
|
36
|
+
height?: number | 'auto';
|
37
|
+
/** 头部显隐, 默认: true */
|
38
|
+
header: boolean;
|
39
|
+
/** 是否显示表格序号(根据分页会自动计算,比如每页10行,到了第二页就会从11开始记数, 默认: false */
|
40
|
+
index: boolean;
|
41
|
+
/** 序号的标题, 默认: '#' */
|
42
|
+
indexLabel: string;
|
43
|
+
/** 序号的宽度, 默认: 50 */
|
44
|
+
indexWidth: number;
|
45
|
+
/** 序号是否冻结, 默认: 'left' */
|
46
|
+
indexFixed: boolean | AvueAlignment;
|
47
|
+
/** 行数据的 Key的主键,用于其他相关操作, 默认: 'id' */
|
48
|
+
rowKey: string;
|
49
|
+
/** 设置 indeterminate 状态,只负责样式控制 如果选择一半,不会出现半选, 默认: false */
|
50
|
+
indeterminate: boolean;
|
51
|
+
/** 表格最大高度 */
|
52
|
+
maxHeight?: number;
|
53
|
+
/** 字段排序, 默认: 0 */
|
54
|
+
order?: number;
|
55
|
+
/** 是否显示表格的表头, 默认: true */
|
56
|
+
showHeader: boolean;
|
57
|
+
/** 控件大小 */
|
58
|
+
size: AvueComponentSize;
|
59
|
+
/** 是否显示表格的斑马条纹, 默认: false */
|
60
|
+
stripe: boolean;
|
61
|
+
// ======== 表格分页配置 ========
|
62
|
+
/**
|
63
|
+
* 是否显示分页, 默认: true
|
64
|
+
* @since 2.8.11
|
65
|
+
*/
|
66
|
+
page: boolean;
|
67
|
+
/**
|
68
|
+
* 只有一页时是否隐藏分页, 默认: false
|
69
|
+
* @since 2.4.1
|
70
|
+
*/
|
71
|
+
simplePage: boolean;
|
72
|
+
// ======== 表格合计配置 ========
|
73
|
+
/** 是否在表尾显示合计行, 默认: false */
|
74
|
+
showSummary: boolean;
|
75
|
+
/** 表格合计需要配置的字段 */
|
76
|
+
sumColumnList: {
|
77
|
+
/** prop属性值 */
|
78
|
+
name: string;
|
79
|
+
/**
|
80
|
+
* 统计类型
|
81
|
+
* @description count: label的值+数据总数; avg: 平均值 sum: 合计
|
82
|
+
*/
|
83
|
+
type: 'count' | 'avg' | 'sum';
|
84
|
+
/** 数据的小数位数, 默认: 2 */
|
85
|
+
decimals?: number;
|
86
|
+
/** 自定义前缀 */
|
87
|
+
label?: string;
|
88
|
+
}[];
|
89
|
+
// ======== 表格行折叠配置 ========
|
90
|
+
/** 是否展开折叠行, 默认: false */
|
91
|
+
expand: boolean;
|
92
|
+
/** 是否展开折叠行宽度, 默认: 60 */
|
93
|
+
expandWidth: number;
|
94
|
+
/** 是否展开折叠行冻结, 默认: 'left' */
|
95
|
+
expandFixed: boolean | AvueAlignment;
|
96
|
+
/** 是否默认展开所有行,"expand"为true的时候有效, 默认: false */
|
97
|
+
defaultExpandAll: boolean;
|
98
|
+
/** 可以通过该属性设置目前的展开行,需要设置 rowKey 属性才能使用,该属性为展开行的 keys 数组。 */
|
99
|
+
expandRowKeys: any[];
|
100
|
+
// ======== 表格树配置 ========
|
101
|
+
/**
|
102
|
+
* 是否为表格树,若无配置,判断数据项中是否包含children,若包含,则为true, 默认: false
|
103
|
+
* @since 2.5.0
|
104
|
+
*/
|
105
|
+
tree: boolean;
|
106
|
+
/**
|
107
|
+
* 是否开启懒加载,通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点, 默认: false
|
108
|
+
* @since 2.3.0
|
109
|
+
*/
|
110
|
+
lazy: boolean;
|
111
|
+
/**
|
112
|
+
* 行数据的 上级Key的主键,用于树其他相关操作, 默认: 'parentId'
|
113
|
+
* @since 2.6.15
|
114
|
+
*/
|
115
|
+
rowParentKey: string;
|
116
|
+
// ======== 其他配置 ========
|
117
|
+
/** 是否开启表格排序, 默认: false */
|
118
|
+
sortable: boolean;
|
119
|
+
}
|
120
|
+
|
121
|
+
/** 表格行勾选配置 */
|
122
|
+
export interface CurdSelectionOption<T = Obj> {
|
123
|
+
/** 行可勾选, 默认: false */
|
124
|
+
selection: boolean;
|
125
|
+
/** 行可勾选的宽度, 默认: 50 */
|
126
|
+
selectionWidth: number;
|
127
|
+
/** 行可勾选是否冻结, 默认: 'left' */
|
128
|
+
selectionFixed: boolean | AvueAlignment;
|
129
|
+
/** 行可勾选是否显示tip信息, 默认: true */
|
130
|
+
tip: boolean;
|
131
|
+
/**
|
132
|
+
* 仅对 selection为true 的列有效,类型为 Function,Function 的返回值用来决定这一行的 CheckBox 是否可以勾选
|
133
|
+
* @param row 所在行数据
|
134
|
+
* @param index 行号
|
135
|
+
*/
|
136
|
+
selectable: (row: T, index: number) => boolean;
|
137
|
+
/** 仅对 selection为true 的列有效,为 true 则会在数据更新之后保留之前选中的数据(需指定 rowKey), 默认: true */
|
138
|
+
reserveSelection: boolean;
|
139
|
+
/** 清空选中按钮(当selection为true起作用), 默认: true */
|
140
|
+
selectClearBtn: boolean;
|
141
|
+
}
|
142
|
+
|
143
|
+
/** 表格组件菜单栏配置 */
|
144
|
+
export interface CurdMenuOption {
|
145
|
+
/** 是否显示操作菜单栏, 默认: true */
|
146
|
+
menu: boolean;
|
147
|
+
/** 操作菜单栏的宽度, 默认: 220 */
|
148
|
+
menuWidth: number;
|
149
|
+
/** 手机端时操作菜单栏的宽度, 默认: 100 */
|
150
|
+
menuXsWidth: number;
|
151
|
+
/**
|
152
|
+
* 菜单栏标题对齐方式, 默认: 'center'
|
153
|
+
* @since 2.6.0
|
154
|
+
*/
|
155
|
+
menuHeaderAlign: AvueAlignment;
|
156
|
+
/** 菜单栏对齐方式, 默认: 'center' */
|
157
|
+
menuAlign: AvueAlignment;
|
158
|
+
/** 操作栏菜单按钮类型, 默认: 'text' */
|
159
|
+
menuType: AvueMenuType;
|
160
|
+
/** 菜单下拉按钮的文字,仅在menuType为'menu'时生效, 默认: '功能' */
|
161
|
+
menuBtnTitle: string;
|
162
|
+
/** 操作列的文字, 默认: '操作' */
|
163
|
+
menuTitle: string;
|
164
|
+
/** 操作列是否冻结, 默认: 'right' */
|
165
|
+
menuFixed: boolean | 'left' | 'right';
|
166
|
+
/**
|
167
|
+
* 操作按钮排序,未列入的按钮会按默认顺序放在最后
|
168
|
+
* @description
|
169
|
+
* 默认排序:'viewBtn','editBtn','copyBtn','delBtn'
|
170
|
+
* 行编辑模式默认排序:'editBtn','viewBtn','copyBtn','delBtn'
|
171
|
+
* @since 2.10.10
|
172
|
+
*/
|
173
|
+
menuBtnSort: ('viewBtn' | 'editBtn' | 'copyBtn' | 'delBtn')[];
|
174
|
+
}
|
175
|
+
|
176
|
+
/** 表格操作按钮及对应功能配置 */
|
177
|
+
export interface CrudActionOption {
|
178
|
+
// ==== menuLeft ====
|
179
|
+
/** 是否显示新增按钮, 默认: true */
|
180
|
+
addBtn: boolean;
|
181
|
+
/** 新增按钮, 默认: '新 增' */
|
182
|
+
addBtnText: string;
|
183
|
+
/** 自定义过滤按钮图标, 默认: 'el-icon-plus' */
|
184
|
+
addBtnIcon: string;
|
185
|
+
/** 新增窗口标题文案, 默认: '新 增' */
|
186
|
+
addTitle: string;
|
187
|
+
/**
|
188
|
+
* 是否显示新增行按钮, 默认: false
|
189
|
+
*
|
190
|
+
* tip: 该按钮的功能为点击后在表格中新增一行
|
191
|
+
* @since 2.6.9
|
192
|
+
*/
|
193
|
+
addRowBtn: boolean;
|
194
|
+
// ==== menuRight ====
|
195
|
+
/** 是否显示保存按钮, 默认: true */
|
196
|
+
saveBtn: boolean;
|
197
|
+
/** 弹出框为新增时保存按钮标题, 默认: '新 增' */
|
198
|
+
saveBtnText: string;
|
199
|
+
/** 弹出框为新增时保存按钮图标, 默认: 'el-icon-circle-plus-outline' */
|
200
|
+
saveBtnIcon: string;
|
201
|
+
/** 是否显示日期组件按钮, 默认: false */
|
202
|
+
dateBtn: boolean;
|
203
|
+
/** 日期控件默认的值, 默认: false */
|
204
|
+
dateDefault: boolean;
|
205
|
+
/** 是否显示Excel打印按钮, 默认: false */
|
206
|
+
excelBtn: boolean;
|
207
|
+
/** Excel打印按钮文案, 默认: '导出' */
|
208
|
+
excelBtnText: string;
|
209
|
+
/** Excel打印按钮图标, 默认: 'el-icon-download' */
|
210
|
+
excelBtnIcon: string;
|
211
|
+
/** 是否显示自定义过滤按钮, 默认: false */
|
212
|
+
filterBtn: boolean;
|
213
|
+
/** 自定义过滤按钮图标, 默认: 'el-icon-tickets' */
|
214
|
+
filterBtnIcon: string;
|
215
|
+
/** 是否显示打印按钮, 默认: false */
|
216
|
+
printBtn: boolean;
|
217
|
+
/** 打印按钮文案, 默认: '打印' */
|
218
|
+
printBtnText: string;
|
219
|
+
/** 打印按钮图标, 默认: 'el-icon-printer' */
|
220
|
+
printBtnIcon: string;
|
221
|
+
/** 是否显示刷新按钮, 默认: true */
|
222
|
+
refreshBtn: boolean;
|
223
|
+
/** 自定义过滤按钮图标, 默认: 'el-icon-refresh' */
|
224
|
+
refreshBtnIcon: string;
|
225
|
+
/** 是否显示搜索显隐按钮, 默认: true */
|
226
|
+
searchShowBtn: boolean;
|
227
|
+
/** 搜索按钮图标, 默认: 'el-icon-search' */
|
228
|
+
searchBtnIcon: string;
|
229
|
+
}
|
230
|
+
|
231
|
+
/** 表格行操作按钮及对应功能配置 */
|
232
|
+
export interface CrudRowActionOption {
|
233
|
+
// ======== 表格弹窗操作 ========
|
234
|
+
// ==== 复制新增功能 ====
|
235
|
+
/** 是否显示复制新增按钮, 默认: false */
|
236
|
+
copyBtn: boolean;
|
237
|
+
/** 复制新增按钮文案, 默认: '复 制' */
|
238
|
+
copyBtnText: string;
|
239
|
+
/** 复制新增按钮图标, 默认: 'el-icon-document-add' */
|
240
|
+
copyBtnIcon: string;
|
241
|
+
// ==== 编辑功能 ====
|
242
|
+
/** 是否显示行内编辑按钮, 默认: true */
|
243
|
+
editBtn: boolean;
|
244
|
+
/** 编辑按钮文案, 默认: '编辑' */
|
245
|
+
editBtnText: string;
|
246
|
+
/** 编辑按钮图标, 默认: 'el-icon-edit' */
|
247
|
+
editBtnIcon: string;
|
248
|
+
/** 编辑窗口标题文案, 默认: '编 辑' */
|
249
|
+
editTitle: string;
|
250
|
+
/** 是否显示更新按钮, 默认: true */
|
251
|
+
updateBtn: boolean;
|
252
|
+
/** 弹出框为编辑时保存按钮标题, 默认: '修 改' */
|
253
|
+
updateBtnText: string;
|
254
|
+
/** 弹出框为编辑时保存按钮图标, 默认: 'el-icon-circle-check' */
|
255
|
+
updateBtnIcon: string;
|
256
|
+
// ==== 查看功能 ====
|
257
|
+
/** 是否显示查看按钮, 默认: false */
|
258
|
+
viewBtn: boolean;
|
259
|
+
/** 查看按钮文案, 默认: '查看' */
|
260
|
+
viewBtnText: string;
|
261
|
+
/** 查看按钮图标, 默认: 'el-icon-view' */
|
262
|
+
viewBtnIcon: string;
|
263
|
+
/** 查看窗口标题文案, 默认: '查 看' */
|
264
|
+
viewTitle: string;
|
265
|
+
// ==== 删除功能 ====
|
266
|
+
/** 是否显示删除按钮, 默认: true */
|
267
|
+
delBtn: boolean;
|
268
|
+
/** 删除按钮文案, 默认: '删 除' */
|
269
|
+
delBtnText: string;
|
270
|
+
/** 删除按钮图标, 默认: 'el-icon-delete' */
|
271
|
+
delBtnIcon: string;
|
272
|
+
// ======== 表格行内操作 ========
|
273
|
+
/** 表格单元格可编辑(当column中有搜索的属性中有cell为true的属性启用,只对type为select和input有作用), 默认: false */
|
274
|
+
cellBtn: boolean;
|
275
|
+
/** 是否显示行编辑取消按钮, 默认: true */
|
276
|
+
cancelBtn: boolean;
|
277
|
+
/** 编辑取消按钮文案, 默认: '取 消' */
|
278
|
+
cancelBtnText: string;
|
279
|
+
/** 删除按钮图标, 默认: 'el-icon-circle-close' */
|
280
|
+
cancelBtnIcon: string;
|
281
|
+
}
|
282
|
+
|
283
|
+
/** 表格组件_弹窗组件配置 */
|
284
|
+
export interface CrudDialogOption<T = Obj> extends FormBaseOption, Omit<FormColumnOption<T>, 'column'> {
|
285
|
+
// ======== 弹窗配置 ========
|
286
|
+
/** 是否为全屏Dialog, 默认: false */
|
287
|
+
dialogFullscreen: boolean;
|
288
|
+
/** 是否可以通过按下ESC关闭Dialog, 默认: true */
|
289
|
+
dialogEscape: boolean;
|
290
|
+
/** 是否可以通过点击modal关闭Dialog, 默认: true */
|
291
|
+
dialogClickModal: boolean;
|
292
|
+
/** 是否显示关闭按钮, 默认: true */
|
293
|
+
dialogCloseBtn: boolean;
|
294
|
+
/** 是否需要遮罩层, 默认: true */
|
295
|
+
dialogModal: boolean;
|
296
|
+
/** 弹出表单的弹窗具体顶部的距离(px), 默认: '0' */
|
297
|
+
dialogTop: string | number;
|
298
|
+
/** 弹出表单的类型, 默认: dialog */
|
299
|
+
dialogType: 'dialog' | 'drawer';
|
300
|
+
/** 弹出表单的弹窗宽度, 默认: '60%' */
|
301
|
+
dialogWidth: string;
|
302
|
+
/**
|
303
|
+
* 是否允许拖拽, 默认: true
|
304
|
+
* @since 2.9.0
|
305
|
+
*/
|
306
|
+
dialogDrag: boolean;
|
307
|
+
// ======== 弹窗表单配置 ========
|
308
|
+
/**
|
309
|
+
* 弹出表单按钮组的位置, 默认: 'right'
|
310
|
+
* @deprecated 2.7.9
|
311
|
+
*/
|
312
|
+
menuPosition: AvueAlignment;
|
313
|
+
/**
|
314
|
+
* 弹出表单按钮组的位置, 默认: 'right'
|
315
|
+
* @since 2.7.9
|
316
|
+
*/
|
317
|
+
dialogMenuPosition: AvueAlignment;
|
318
|
+
}
|
319
|
+
|
320
|
+
/** 表格组件_搜索组件配置 */
|
321
|
+
export interface CrudSearchOption {
|
322
|
+
/** 首次加载是否显示搜索, 默认: true */
|
323
|
+
searchShow: boolean;
|
324
|
+
/** 回车提交表单, 默认: true */
|
325
|
+
searchEnter: boolean;
|
326
|
+
/** 是否展示半收缩按钮, 默认: undefined */
|
327
|
+
searchIcon: boolean;
|
328
|
+
/** 展示半收缩按钮的个数, 默认: 2 */
|
329
|
+
searchIndex: number;
|
330
|
+
/** 搜索项的长度, 默认: 6 */
|
331
|
+
searchSpan: number;
|
332
|
+
/** 搜索项之间的间距, 默认: 20 */
|
333
|
+
searchGutter: number;
|
334
|
+
/** 搜索项label的宽度, 默认: 80 */
|
335
|
+
searchLabelWidth: number;
|
336
|
+
/** 搜索项label的定位, 默认: 'right' */
|
337
|
+
searchLabelPosition: AvueAlignment;
|
338
|
+
/** 在显示复选框的情况下,是否严格的遵循父子不互相关联的做法,对cascader|tree类型组件生效, 默认: false */
|
339
|
+
searchCheckStrictly: boolean;
|
340
|
+
/** 搜索按钮的长度, 默认: 6 */
|
341
|
+
searchMenuSpan: number;
|
342
|
+
/**
|
343
|
+
* 搜索按钮的位置, 默认: 'center'
|
344
|
+
* @since 2.7.9
|
345
|
+
*/
|
346
|
+
searchMenuPosition: AvueAlignment;
|
347
|
+
/**
|
348
|
+
* 组件尺寸
|
349
|
+
* @since 2.7.9
|
350
|
+
*/
|
351
|
+
searchSize: AvueComponentSize;
|
352
|
+
/** 搜索按钮文案, 默认: '搜索' */
|
353
|
+
searchBtnText: string;
|
354
|
+
/** 搜索按钮图标, 默认: 'el-icon-search' */
|
355
|
+
searchBtnIcon: string;
|
356
|
+
/** 是否显示搜索按钮, 默认: true */
|
357
|
+
searchBtn: boolean;
|
358
|
+
/** 是否显示清空按钮, 默认: true */
|
359
|
+
emptyBtn: boolean;
|
360
|
+
/** 清空按钮文案, 默认: '清空' */
|
361
|
+
emptyBtnText: string;
|
362
|
+
/** 清空按钮图标, 默认: 'el-icon-delete' */
|
363
|
+
emptyBtnIcon: string;
|
364
|
+
}
|
365
|
+
|
366
|
+
/** 表格组件配置属性 */
|
367
|
+
export type CrudOption<T = Obj> = Partial<CrudBaseOption> &
|
368
|
+
Partial<CurdSelectionOption<T>> &
|
369
|
+
Partial<CurdMenuOption> &
|
370
|
+
Partial<CrudActionOption> &
|
371
|
+
Partial<CrudRowActionOption> &
|
372
|
+
Partial<CrudDialogOption> &
|
373
|
+
Partial<CrudSearchOption> & {
|
374
|
+
/** 表格列配置属性*/
|
375
|
+
column?: AvueCrudColumn<T>[];
|
376
|
+
};
|
@@ -0,0 +1,36 @@
|
|
1
|
+
// 引入定义
|
2
|
+
import { AvueForm } from '../../form';
|
3
|
+
import { AvueCrudFormMode } from '../index';
|
4
|
+
|
5
|
+
/** 表格组件表单弹窗 */
|
6
|
+
export declare class AvueCrudDialogForm<T = Obj> {
|
7
|
+
// ========== 方法 ==========
|
8
|
+
/**
|
9
|
+
* 表单提交
|
10
|
+
* @since 2.8.18
|
11
|
+
*/
|
12
|
+
submit(): void;
|
13
|
+
/**
|
14
|
+
* 清空表单数据
|
15
|
+
* @since 2.8.18
|
16
|
+
*/
|
17
|
+
reset(): void;
|
18
|
+
/** 切换弹窗全屏模式 */
|
19
|
+
handleFullScreen(): void;
|
20
|
+
/**
|
21
|
+
* 关闭弹窗
|
22
|
+
* @param row 弹窗对应行的数据
|
23
|
+
* @description 若row为空,则仅关闭弹窗;否则,视弹窗类型(add/edit)对表格数据进行更新(根据表格rowKey确定的主键查找对应行数据,存在则替换,不存在则添加一行)
|
24
|
+
*/
|
25
|
+
closeDialog(row?: T): void;
|
26
|
+
/**
|
27
|
+
* 打开弹窗
|
28
|
+
* @param type 弹窗类型
|
29
|
+
*/
|
30
|
+
show(type: AvueCrudFormMode): void;
|
31
|
+
/** 组件Refs */
|
32
|
+
$refs: {
|
33
|
+
/** 表单实例 */
|
34
|
+
tableForm: AvueForm<T>;
|
35
|
+
};
|
36
|
+
}
|