backend-management-ui 1.2.3 → 1.3.1
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.
- package/README.md +362 -17
- package/backend-management-ui.common.js +696 -5
- package/backend-management-ui.common.js.map +1 -1
- package/backend-management-ui.umd.js +696 -5
- package/backend-management-ui.umd.js.map +1 -1
- package/backend-management-ui.umd.min.js +2 -2
- package/backend-management-ui.umd.min.js.map +1 -1
- package/package.json +2 -3
package/README.md
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
一个基于 ElementUI 封装的 Vue2 后台管理组件库，简化后台开发中表格、表单、弹窗、按钮组、虚拟下拉框等高频组件的使用。
|
|
4
4
|
|
|
5
|
+
现有组件 ui-form、ui-table、ui-btns、ui-dialog、Status
|
|
6
|
+
|
|
5
7
|
## 特性
|
|
6
8
|
- 基于ElementUI的二次封装，无缝兼容ElementUI原有功能
|
|
7
9
|
- 简化配置：表格/表单/按钮组通过配置快速生成，无需重复写模板
|
|
@@ -19,7 +21,7 @@ yarn 安装
|
|
|
19
21
|
|
|
20
22
|
## 快速上手
|
|
21
23
|
全局引入
|
|
22
|
-
|
|
24
|
+
|
|
23
25
|
``` js
|
|
24
26
|
// main.js
|
|
25
27
|
import Vue from 'vue'
|
|
@@ -32,19 +34,18 @@ Vue.use(BackendManagementUI) // 全局注册所有组件
|
|
|
32
34
|
```
|
|
33
35
|
|
|
34
36
|
按需引入
|
|
35
|
-
|
|
37
|
+
|
|
36
38
|
```js
|
|
37
39
|
// main.js
|
|
38
40
|
import Vue from 'vue'
|
|
39
|
-
import {
|
|
41
|
+
import { UiForm } from 'backend-management-ui'
|
|
40
42
|
// 全局注册单个组件
|
|
41
|
-
Vue.component('
|
|
43
|
+
Vue.component('UiForm', UiForm)
|
|
42
44
|
|
|
43
45
|
// 组件内
|
|
44
|
-
import {
|
|
46
|
+
import { UiForm } from 'backend-management-ui'
|
|
45
47
|
export default {
|
|
46
48
|
components: {
|
|
47
|
-
UiTable,
|
|
48
49
|
UiForm
|
|
49
50
|
}
|
|
50
51
|
}
|
|
@@ -53,13 +54,13 @@ export default {
|
|
|
53
54
|
## 组件示例和文档
|
|
54
55
|
|
|
55
56
|
### ui-form 表单
|
|
57
|
+
|
|
56
58
|
使用el-form进行的二次封装
|
|
57
59
|
|
|
58
60
|
基本用法
|
|
59
61
|
|
|
60
62
|
#### 典型编辑型表单
|
|
61
63
|
|
|
62
|
-
``` markdown
|
|
63
64
|
``` js
|
|
64
65
|
<ui-form :model="searchForm" :formConfig="formConfig" label-width="100px" ></ui-form>
|
|
65
66
|
<script>
|
|
@@ -93,7 +94,7 @@ export default {
|
|
|
93
94
|
```
|
|
94
95
|
|
|
95
96
|
#### 典型展示表单
|
|
96
|
-
|
|
97
|
+
|
|
97
98
|
``` js
|
|
98
99
|
<ui-form :model="searchForm" :formConfig="formConfig" label-width="100px" :showOperateBtn="false">
|
|
99
100
|
<template #item-orderNo="{ item, model, index }">
|
|
@@ -129,10 +130,13 @@ export default {
|
|
|
129
130
|
|
|
130
131
|
#### 下拉类型接口获取数据
|
|
131
132
|
|
|
132
|
-
``` markdown
|
|
133
133
|
``` js
|
|
134
134
|
// 或者 :apiMapConfig="{ status: statusApi }"
|
|
135
|
-
<ui-form :model="searchForm" :formConfig="formConfig" label-width="100px"
|
|
135
|
+
<ui-form :model="searchForm" :formConfig="formConfig" label-width="100px" >
|
|
136
|
+
<template #customBtn>
|
|
137
|
+
<el-button type="primary">导出</el-button>
|
|
138
|
+
</template>
|
|
139
|
+
</ui-form>
|
|
136
140
|
import { statusApi } from "@/api/status"
|
|
137
141
|
<script>
|
|
138
142
|
export default {
|
|
@@ -170,10 +174,10 @@ export default {
|
|
|
170
174
|
```
|
|
171
175
|
|
|
172
176
|
#### 其他用法
|
|
173
|
-
|
|
177
|
+
|
|
174
178
|
``` js
|
|
175
179
|
// Form Attributes/Methods直接传
|
|
176
|
-
<ui-form :model="searchForm" :formConfig="formConfig" inline
|
|
180
|
+
<ui-form :model="searchForm" :formConfig="formConfig" inline label-width="100px">
|
|
177
181
|
</ui-form>
|
|
178
182
|
<script>
|
|
179
183
|
export default {
|
|
@@ -184,6 +188,23 @@ export default {
|
|
|
184
188
|
status: "成功"
|
|
185
189
|
},
|
|
186
190
|
formConfig: [
|
|
191
|
+
{
|
|
192
|
+
label: "月份区间",
|
|
193
|
+
prop: "dates",
|
|
194
|
+
component: "el-date-picker",
|
|
195
|
+
attrs: {
|
|
196
|
+
type: "month",
|
|
197
|
+
"value-format": "yyyy-MM",
|
|
198
|
+
format: "yyyy年MM月",
|
|
199
|
+
clearable: false, // 所有的表单组件如果有clearable，默认是true
|
|
200
|
+
},
|
|
201
|
+
events: {
|
|
202
|
+
{/* el-date-picker的原生组件事件 */}
|
|
203
|
+
change: (val) => {
|
|
204
|
+
console.log(val)
|
|
205
|
+
},
|
|
206
|
+
},
|
|
207
|
+
}
|
|
187
208
|
{
|
|
188
209
|
label: '订单号',
|
|
189
210
|
prop: 'orderNo',
|
|
@@ -204,7 +225,16 @@ export default {
|
|
|
204
225
|
width: "200px", // 默认220px
|
|
205
226
|
},
|
|
206
227
|
filterable: true,
|
|
207
|
-
|
|
228
|
+
events: {
|
|
229
|
+
change: (val) => {
|
|
230
|
+
console.log(val)
|
|
231
|
+
}
|
|
232
|
+
}
|
|
233
|
+
},
|
|
234
|
+
{/* options有长度时不会触发api */}
|
|
235
|
+
options: [
|
|
236
|
+
{ label: "成功", value: 0 }
|
|
237
|
+
]
|
|
208
238
|
}
|
|
209
239
|
]
|
|
210
240
|
}
|
|
@@ -213,9 +243,324 @@ export default {
|
|
|
213
243
|
</script>
|
|
214
244
|
```
|
|
215
245
|
|
|
246
|
+
#### props & slots & methods
|
|
247
|
+
|
|
248
|
+
##### props
|
|
249
|
+
|
|
250
|
+
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|
251
|
+
| --------- | ----------- | -------- | ------ | --------- |
|
|
252
|
+
| formRef | form的实例 | string | - | formRef |
|
|
253
|
+
| model | 表单数据绑定对象 | object | - | {} |
|
|
254
|
+
| formConfig | 表单配置项 | array | - | - |
|
|
255
|
+
| showOperateBtn | 是否展示操作按钮 | boolean | - | true |
|
|
256
|
+
| defaultBtn | 是否使用默认按钮 | boolean | - | true |
|
|
257
|
+
| searchBtnText | 搜索按钮的文案 | string | - | 查询 |
|
|
258
|
+
| resetBtnText | 重置按钮的文案 | string | - | 重置 |
|
|
259
|
+
| apiMapConfig | api配置项 | object | - | - |
|
|
260
|
+
|
|
261
|
+
|
|
262
|
+
###### formConfig配置项
|
|
263
|
+
|
|
264
|
+
| name | 说明 | 类型 | 可选值 | 默认值 |
|
|
265
|
+
| ----------- | ------------------- | ------- | --------- | ----------- |
|
|
266
|
+
| label | 表单说明项 | string | - | - |
|
|
267
|
+
| prop | 表单绑定的字段 | string | 必传 | - |
|
|
268
|
+
| component | 绑定的组件, 当字段有插槽时不触发 | string | 组件名 | el-input |
|
|
269
|
+
| formItemAttrs | el-form-item的属性项 | object | - | - |
|
|
270
|
+
| attrs | 表单组件的属性和事件，当字段有插槽时不触发 | object | - | { style: { width: "220px" }} |
|
|
271
|
+
| api | 组件为el-select/el-radio-group/virtual-select类型时不使用插槽且需要初始化时传入的api | object/ string | - | - |
|
|
272
|
+
| options | 组件类型同上，当options有长度时api和apiMapConfig不会触发 | array | - | - |
|
|
273
|
+
|
|
274
|
+
|
|
275
|
+
|
|
276
|
+
##### slots
|
|
277
|
+
| name | 说明 |
|
|
278
|
+
| ------ | ------ |
|
|
279
|
+
| customBtn | 操作项的自定义的插槽 |
|
|
280
|
+
| item-[prop字段名] | 表单组件的插槽 |
|
|
281
|
+
|
|
282
|
+
##### methods
|
|
283
|
+
| 方法名 | 说明 |
|
|
284
|
+
| ----- | ---- |
|
|
285
|
+
| search | 搜索按钮点击触发调用的方法 |
|
|
286
|
+
| reset | 重置按钮点击触发调用的方法 |
|
|
287
|
+
|
|
288
|
+
|
|
289
|
+
### ui-table 表格
|
|
290
|
+
|
|
291
|
+
使用el-table进行的二次封装
|
|
292
|
+
|
|
293
|
+
基本用法
|
|
294
|
+
|
|
295
|
+
#### 表格用法
|
|
296
|
+
|
|
297
|
+
``` js
|
|
298
|
+
<ui-table show-selection show-operation :loading="loading" :table-columns="tableColumns" :data="tableData" :pagination-config="pagination" :total="total" :operation-config="{ width: 140 }" @change-pagination="handleChangePagination" @selectionChange="handleSelectionChange">
|
|
299
|
+
<template #header-test4>
|
|
300
|
+
<div>表头插槽</div>
|
|
301
|
+
</template>
|
|
302
|
+
<template #test4="{ row }">
|
|
303
|
+
<div>单元格插槽{{row.test4}}</div>
|
|
304
|
+
</template>
|
|
305
|
+
<template #operation="{ row }">
|
|
306
|
+
<ui-btns :btns="operateBtns" :context="row" />
|
|
307
|
+
</template>
|
|
308
|
+
</ui-table>
|
|
309
|
+
<script>
|
|
310
|
+
export default {
|
|
311
|
+
data() {
|
|
312
|
+
return {
|
|
313
|
+
loading: false,
|
|
314
|
+
tableColumns: [
|
|
315
|
+
{
|
|
316
|
+
label: "测试1",
|
|
317
|
+
prop: "test1",
|
|
318
|
+
"min-width": 150,
|
|
319
|
+
"show-overflow-tooltip": true,
|
|
320
|
+
fixed: "left",
|
|
321
|
+
},
|
|
322
|
+
{
|
|
323
|
+
label: "测试render一大一小的两行数据",
|
|
324
|
+
prop: "test2",
|
|
325
|
+
"min-width": 150,
|
|
326
|
+
"show-overflow-tooltip": true,
|
|
327
|
+
render: ({ row, column, $h, index }) => {
|
|
328
|
+
const { test2, test2Code } = row;
|
|
329
|
+
return $h("div", { style: { width: "100%" } }, [
|
|
330
|
+
$h("div", { class: "bm-table-cell" }, test2),
|
|
331
|
+
$h("div", { style: { color: "#AAAAAA", fontSize: "12px" } }, test2Code),
|
|
332
|
+
]);
|
|
333
|
+
}, // 单元格render形式
|
|
334
|
+
},
|
|
335
|
+
{
|
|
336
|
+
label: "测试组件",
|
|
337
|
+
prop: "test3",
|
|
338
|
+
width: 200,
|
|
339
|
+
component: 'Status', // 单元格使用component组件形式时，默认会把row，column，index 传入组件
|
|
340
|
+
componentProps: { statusName: "test3" }, // componentProps组件需要的参数
|
|
341
|
+
{/* componentEvents: {
|
|
342
|
+
change: (val) => {},
|
|
343
|
+
...
|
|
344
|
+
} // 组件的事件，如果有的话 */}
|
|
345
|
+
},
|
|
346
|
+
{
|
|
347
|
+
label: "测试4",
|
|
348
|
+
prop: "test4",
|
|
349
|
+
width: 100,
|
|
350
|
+
formatter: (val, row, index) => val || "-", // 单元格内容格式化
|
|
351
|
+
},
|
|
352
|
+
{
|
|
353
|
+
headerSlot: true, // 表头使用插槽
|
|
354
|
+
prop: "test5",
|
|
355
|
+
slot: true // 单元格插槽形式
|
|
356
|
+
},
|
|
357
|
+
{
|
|
358
|
+
label: "测试5-可点击的单元格", // 默认active样式
|
|
359
|
+
prop: "test5",
|
|
360
|
+
width: 100,
|
|
361
|
+
clickable: true, // 一直可点击
|
|
362
|
+
|
|
363
|
+
{/* 或者使用条件判断
|
|
364
|
+
clickableClass: ({row}, col) => row[col.prop] > 0 */}
|
|
365
|
+
onCellClick: ({row, col, index}) => {} // 单元格可点击时触发的方法
|
|
366
|
+
}
|
|
367
|
+
],
|
|
368
|
+
tableData: [],
|
|
369
|
+
pagination: {
|
|
370
|
+
pageNum: 1,
|
|
371
|
+
pageSize: 10
|
|
372
|
+
},
|
|
373
|
+
total: 0,
|
|
374
|
+
operateBtns: [
|
|
375
|
+
{
|
|
376
|
+
label: "详情",
|
|
377
|
+
type: "text",
|
|
378
|
+
action: (params) => {
|
|
379
|
+
|
|
380
|
+
},
|
|
381
|
+
},
|
|
382
|
+
{
|
|
383
|
+
label: "操作记录",
|
|
384
|
+
type: "text",
|
|
385
|
+
action: ({ context }) => {
|
|
386
|
+
this.currentRow = context;
|
|
387
|
+
this.getOperateLogInfo();
|
|
388
|
+
},
|
|
389
|
+
},
|
|
390
|
+
],
|
|
391
|
+
currentRow: null
|
|
392
|
+
}
|
|
393
|
+
},
|
|
394
|
+
methods: {
|
|
395
|
+
init() {},
|
|
396
|
+
handleChangePagination(pagination) {
|
|
397
|
+
this.pagination = pagination
|
|
398
|
+
this.init()
|
|
399
|
+
},
|
|
400
|
+
handleSelectionChange(selection) {},
|
|
401
|
+
getOperateLogInfo() {}
|
|
402
|
+
}
|
|
403
|
+
}
|
|
404
|
+
</script>
|
|
405
|
+
```
|
|
406
|
+
|
|
407
|
+
|
|
408
|
+
#### props & slots & methods
|
|
409
|
+
|
|
410
|
+
##### props
|
|
411
|
+
|
|
412
|
+
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|
413
|
+
| --------- | ----------- | -------- | ------ | --------- |
|
|
414
|
+
| data | 表格数据 | array | - | [] |
|
|
415
|
+
| tableColumns | 表格配置项 | array | - | [] |
|
|
416
|
+
| loading | 表格加载 | boolean | - | false |
|
|
417
|
+
| showSelection | 是否展示勾选框 | boolean | - | false |
|
|
418
|
+
| showIndex | 是否展示序号列 | boolean | - | false |
|
|
419
|
+
| indexConfig | 序号列配置项 | object | - | { type: "index", label: "序号", width: 55, fixed: "left", align: "center", } |
|
|
420
|
+
| showOperation | 是否展示操作列 | boolean | - | false |
|
|
421
|
+
| operationConfig | 操作列配置项 | object | - | { label: "操作", prop:"operation", width: 180, fixed: "right", align: "center", } |
|
|
422
|
+
| showPagination | 是否展示分页 | boolean | - | true |
|
|
423
|
+
| paginationConfig | 分页配置项 | object | - | { pageNum: 1, pageSize: 10 } |
|
|
424
|
+
| total | 数据总条数 | number | - | 0 |
|
|
425
|
+
|
|
426
|
+
##### methods
|
|
427
|
+
| 方法名 | 说明 | 参数 |
|
|
428
|
+
| ----- | ---- | ---- |
|
|
429
|
+
| change-size | 修改pageSize的方法 | pageSize |
|
|
430
|
+
| change-page | 修改pageNum的方法 | pageNum |
|
|
431
|
+
| change-pagination | 修改pageSize和pageNum的方法 | pagination |
|
|
432
|
+
|
|
433
|
+
|
|
434
|
+
### ui-btns
|
|
435
|
+
使用el-button进行的二次封装
|
|
436
|
+
|
|
437
|
+
基本用法见table示例
|
|
438
|
+
|
|
439
|
+
#### props
|
|
440
|
+
|
|
441
|
+
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|
442
|
+
| -------- | ----------- | -------- | ------ | --------- |
|
|
443
|
+
| btns | 按钮数组 | array | - | - |
|
|
444
|
+
| disabledAll | 禁用所有按钮 | boolean | - | false |
|
|
445
|
+
| context | 上下文 | object/array/string/ number/ boolean | null |
|
|
446
|
+
|
|
447
|
+
##### btns
|
|
448
|
+
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|
449
|
+
| -------- | ----------- | -------- | ------ | --------- |
|
|
450
|
+
| 参数同el-button，disabled除外 | - | - | - | - |
|
|
451
|
+
| disabled | 当前按钮的禁用状态 | boolean/function | - | false |
|
|
452
|
+
| action | 点击事件 | function | - | - |
|
|
453
|
+
| eventName | 点击事件的方法名，会emit出去eventName事件，action和eventName一起存在时会重复触发 | string | - |
|
|
454
|
+
|
|
455
|
+
|
|
456
|
+
### Status
|
|
457
|
+
|
|
458
|
+
基本用法
|
|
459
|
+
|
|
460
|
+
```js
|
|
461
|
+
<template>
|
|
462
|
+
<Status status-name="待提交" />
|
|
463
|
+
</template>
|
|
464
|
+
```
|
|
465
|
+
|
|
466
|
+
#### props
|
|
467
|
+
|
|
468
|
+
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|
469
|
+
| -------- | ----------- | -------- | ------ | --------- |
|
|
470
|
+
| row | 传进来的整条数据 | object | - | {} |
|
|
471
|
+
| statusName | 状态值，当row有传值时这个字段会被当做字段名 | string | 必传 | -|
|
|
472
|
+
|
|
473
|
+
|
|
474
|
+
### ui-dialog
|
|
475
|
+
|
|
476
|
+
使用el-dialog进行的二次封装
|
|
477
|
+
|
|
478
|
+
基本用法
|
|
479
|
+
|
|
480
|
+
```js
|
|
481
|
+
<template>
|
|
482
|
+
<ui-dialog
|
|
483
|
+
:visible.sync="show"
|
|
484
|
+
title="弹框标题"
|
|
485
|
+
confirm-text="确认"
|
|
486
|
+
width="60%"
|
|
487
|
+
show-cancel
|
|
488
|
+
@close="handleClose"
|
|
489
|
+
@cancel="handleCancel"
|
|
490
|
+
@confirm="handleConfirm"
|
|
491
|
+
>
|
|
492
|
+
弹框内容
|
|
493
|
+
</ui-dialog>
|
|
494
|
+
</template>
|
|
495
|
+
|
|
496
|
+
<script>
|
|
497
|
+
export default {
|
|
498
|
+
data() {
|
|
499
|
+
return {
|
|
500
|
+
show: false,
|
|
501
|
+
}
|
|
502
|
+
},
|
|
503
|
+
methods: {
|
|
504
|
+
handleClose() {},
|
|
505
|
+
handleCancel() {},
|
|
506
|
+
handleCancel() {},
|
|
507
|
+
}
|
|
508
|
+
}
|
|
509
|
+
</script>
|
|
510
|
+
```
|
|
511
|
+
|
|
216
512
|
#### props
|
|
217
513
|
|
|
218
|
-
| 参数
|
|
219
|
-
|
|
|
220
|
-
|
|
|
221
|
-
|
|
|
514
|
+
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|
515
|
+
| -------- | ----------- | -------- | ------ | --------- |
|
|
516
|
+
| visible | 是否显示 Dialog，支持 .sync 修饰符 | boolean | - | false |
|
|
517
|
+
| title | 弹框标题 | string | - | 弹框标题 |
|
|
518
|
+
| width | 弹框宽度 | string | - | 50% |
|
|
519
|
+
| closeOnClickModal | 是否可以通过点击蒙层关闭弹框 | boolean | - | false |
|
|
520
|
+
| closeOnPressEscape | 是否可以通过按下 ESC 关闭弹框 | boolean | - | false |
|
|
521
|
+
| defaultFooter | 是否使用默认的弹框footer（即只有取消和确定按钮） | boolean | - | true |
|
|
522
|
+
| showCancel | 是否展示取消按钮, defaultFooter为true时可用 | boolean | - | false |
|
|
523
|
+
| cancelText | 取消按钮的文案 | string | - | 取消 |
|
|
524
|
+
| showConfirm | 是否展示确定按钮，defaultFooter为true时可用 | boolean | - | true |
|
|
525
|
+
| confirmText | 确定按钮的文案 | string | - | 确定 |
|
|
526
|
+
| customFooter | 是否使用自定的弹框footer | boolean | - | false |
|
|
527
|
+
| 其他参数同el-dialog | - | - | - | - |
|
|
528
|
+
|
|
529
|
+
#### methods
|
|
530
|
+
|
|
531
|
+
| 方法名 | 说明 | 参数 |
|
|
532
|
+
| ----- | ---- | ---- |
|
|
533
|
+
| cancel | 取消按钮点击的回调 | - |
|
|
534
|
+
| confirm | 确定按钮点击的回调 | - |
|
|
535
|
+
| close | 关闭弹框的回调 | - |
|
|
536
|
+
| 其他事件同el-dialog | - | - |
|
|
537
|
+
|
|
538
|
+
|
|
539
|
+
|
|
540
|
+
|
|
541
|
+
## 使用时可能存在的项目不支持可选链和空值合并运算符的报错问题
|
|
542
|
+
|
|
543
|
+
安装必要的依赖
|
|
544
|
+
|
|
545
|
+
```js
|
|
546
|
+
npm install @babel/plugin-proposal-optional-chaining @babel/plugin-proposal-nullish-coalescing-operator --save-dev
|
|
547
|
+
```
|
|
548
|
+
|
|
549
|
+
.babelrc 或者 babel.config.js 文件 plugins字段添加
|
|
550
|
+
|
|
551
|
+
```js
|
|
552
|
+
plugins: [
|
|
553
|
+
..., // 原有配置
|
|
554
|
+
"@babel/plugin-proposal-optional-chaining",
|
|
555
|
+
"@babel/plugin-proposal-nullish-coalescing-operator"
|
|
556
|
+
]
|
|
557
|
+
````
|
|
558
|
+
|
|
559
|
+
文件 vue.config.js 新增指定babel去处理包里面的es6+语法
|
|
560
|
+
|
|
561
|
+
```js
|
|
562
|
+
module.exports = {
|
|
563
|
+
..., // 原有配置
|
|
564
|
+
transpileDependencies: ["backend-management-ui"]
|
|
565
|
+
}
|
|
566
|
+
```
|