@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.
@@ -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
+ }