backend-management-ui 1.7.9 → 1.7.11
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 +248 -237
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,9 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
一个基于 ElementUI 封装的 Vue2 后台管理组件库，简化后台开发中表格、表单、弹窗、按钮组、虚拟下拉框等高频组件的使用。
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
现有组件：ui-form、ui-table、ui-btns、ui-dialog、ui-virtual-select、status
|
|
6
6
|
|
|
7
7
|
## 特性
|
|
8
|
+
|
|
8
9
|
- 基于ElementUI的二次封装，完全兼容ElementUI原有API与功能，无需额外适配
|
|
9
10
|
- 极简配置化开发：表格 / 表单 / 按钮组等组件通过 JSON 配置快速生成，无需重复写模板
|
|
10
11
|
- 高频业务场景全覆盖：内置配置化表格、表单、按钮组、虚拟滚动下拉框等核心组件
|
|
@@ -12,6 +13,7 @@
|
|
|
12
13
|
- 基于 ElSelect + vue-virtual-scroll-list 实现海量数据下拉选择，解决大数据渲染卡顿问题
|
|
13
14
|
|
|
14
15
|
## 安装
|
|
16
|
+
|
|
15
17
|
npm 安装
|
|
16
18
|
|
|
17
19
|
`npm install backend-management-ui --save`
|
|
@@ -29,6 +31,7 @@ yarn 安装
|
|
|
29
31
|
`npm install vue-virtual-scroll-list --save`
|
|
30
32
|
|
|
31
33
|
## 快速上手
|
|
34
|
+
|
|
32
35
|
全局引入
|
|
33
36
|
|
|
34
37
|
``` js
|
|
@@ -71,69 +74,75 @@ export default {
|
|
|
71
74
|
#### 典型编辑型表单
|
|
72
75
|
|
|
73
76
|
``` js
|
|
74
|
-
<
|
|
77
|
+
<template>
|
|
78
|
+
<ui-form :model="searchForm" :formConfig="formConfig" label-width="100px"></ui-form>
|
|
79
|
+
</template>
|
|
80
|
+
|
|
75
81
|
<script>
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
+
export default {
|
|
83
|
+
data() {
|
|
84
|
+
return {
|
|
85
|
+
searchForm: {
|
|
86
|
+
orderNo: null,
|
|
87
|
+
status: null
|
|
88
|
+
},
|
|
89
|
+
formConfig: [
|
|
90
|
+
{
|
|
91
|
+
label: '订单号',
|
|
92
|
+
prop: 'orderNo',
|
|
93
|
+
component: 'el-input'
|
|
82
94
|
},
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
options: [
|
|
94
|
-
{label: '成功', value: 0},
|
|
95
|
-
{label: '失败', value: 1}
|
|
96
|
-
]
|
|
97
|
-
}
|
|
98
|
-
]
|
|
99
|
-
}
|
|
95
|
+
{
|
|
96
|
+
label: '状态',
|
|
97
|
+
prop: 'status',
|
|
98
|
+
component: 'el-select',
|
|
99
|
+
options: [
|
|
100
|
+
{label: '成功', value: 0},
|
|
101
|
+
{label: '失败', value: 1}
|
|
102
|
+
]
|
|
103
|
+
}
|
|
104
|
+
]
|
|
100
105
|
}
|
|
101
106
|
}
|
|
107
|
+
}
|
|
102
108
|
</script>
|
|
103
109
|
```
|
|
104
110
|
|
|
105
111
|
#### 典型展示表单
|
|
106
112
|
|
|
107
113
|
``` js
|
|
108
|
-
<
|
|
109
|
-
<
|
|
110
|
-
|
|
114
|
+
<template>
|
|
115
|
+
<ui-form :model="searchForm" :formConfig="formConfig" label-width="100px" :showOperateBtn="false">
|
|
116
|
+
<template #item-orderNo="{ item, model, index }">
|
|
117
|
+
<span>{{ model.orderNo }}</span>
|
|
118
|
+
</template>
|
|
119
|
+
<template #item-status="{ model }">
|
|
120
|
+
<span>{{ model.status }}</span>
|
|
121
|
+
</template>
|
|
122
|
+
</ui-form>
|
|
111
123
|
</template>
|
|
112
|
-
|
|
113
|
-
<span>{{ model.status }}</span>
|
|
114
|
-
</template>
|
|
115
|
-
</ui-form>
|
|
124
|
+
|
|
116
125
|
<script>
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
126
|
+
export default {
|
|
127
|
+
data() {
|
|
128
|
+
return {
|
|
129
|
+
searchForm: {
|
|
130
|
+
orderNo: "订单好xx",
|
|
131
|
+
status: "成功"
|
|
132
|
+
},
|
|
133
|
+
formConfig: [
|
|
134
|
+
{
|
|
135
|
+
label: '订单号',
|
|
136
|
+
prop: 'orderNo',
|
|
123
137
|
},
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
{
|
|
130
|
-
label: '状态',
|
|
131
|
-
prop: 'status',
|
|
132
|
-
}
|
|
133
|
-
]
|
|
134
|
-
}
|
|
138
|
+
{
|
|
139
|
+
label: '状态',
|
|
140
|
+
prop: 'status',
|
|
141
|
+
}
|
|
142
|
+
]
|
|
135
143
|
}
|
|
136
144
|
}
|
|
145
|
+
}
|
|
137
146
|
</script>
|
|
138
147
|
```
|
|
139
148
|
|
|
@@ -146,39 +155,40 @@ export default {
|
|
|
146
155
|
<el-button type="primary">导出</el-button>
|
|
147
156
|
</template>
|
|
148
157
|
</ui-form>
|
|
149
|
-
|
|
158
|
+
|
|
150
159
|
<script>
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
160
|
+
import { statusApi } from "@/api/status"
|
|
161
|
+
export default {
|
|
162
|
+
data() {
|
|
163
|
+
return {
|
|
164
|
+
searchForm: {
|
|
165
|
+
orderNo: null,
|
|
166
|
+
status: null
|
|
167
|
+
},
|
|
168
|
+
formConfig: [
|
|
169
|
+
{
|
|
170
|
+
label: '订单号',
|
|
171
|
+
prop: 'orderNo',
|
|
172
|
+
component: 'el-input'
|
|
157
173
|
},
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
}
|
|
164
|
-
{
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
page: 1,
|
|
174
|
-
pageSize: 10,
|
|
175
|
-
}
|
|
176
|
-
} */}
|
|
177
|
-
}
|
|
178
|
-
]
|
|
179
|
-
}
|
|
174
|
+
{
|
|
175
|
+
label: '状态',
|
|
176
|
+
prop: 'status',
|
|
177
|
+
component: 'el-select',
|
|
178
|
+
api: statusApi,
|
|
179
|
+
{/* 或者 */}
|
|
180
|
+
{/* api: {
|
|
181
|
+
url: statusApi,
|
|
182
|
+
params: {
|
|
183
|
+
page: 1,
|
|
184
|
+
pageSize: 10,
|
|
185
|
+
}
|
|
186
|
+
} */}
|
|
187
|
+
}
|
|
188
|
+
]
|
|
180
189
|
}
|
|
181
190
|
}
|
|
191
|
+
}
|
|
182
192
|
</script>
|
|
183
193
|
```
|
|
184
194
|
|
|
@@ -189,66 +199,66 @@ import { statusApi } from "@/api/status"
|
|
|
189
199
|
<ui-form :model="searchForm" :formConfig="formConfig" inline label-width="100px">
|
|
190
200
|
</ui-form>
|
|
191
201
|
<script>
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
202
|
+
export default {
|
|
203
|
+
data() {
|
|
204
|
+
return {
|
|
205
|
+
searchForm: {
|
|
206
|
+
orderNo: "订单好xx",
|
|
207
|
+
status: "成功"
|
|
208
|
+
},
|
|
209
|
+
formConfig: [
|
|
210
|
+
{
|
|
211
|
+
label: "月份区间",
|
|
212
|
+
prop: "dates",
|
|
213
|
+
component: "el-date-picker",
|
|
214
|
+
attrs: {
|
|
215
|
+
type: "month",
|
|
216
|
+
"value-format": "yyyy-MM",
|
|
217
|
+
format: "yyyy年MM月",
|
|
218
|
+
clearable: false, // 所有的表单组件如果有clearable，默认是true
|
|
219
|
+
},
|
|
220
|
+
events: {
|
|
221
|
+
{/* el-date-picker的原生组件事件 */}
|
|
222
|
+
change: (val) => {
|
|
223
|
+
console.log(val)
|
|
224
|
+
},
|
|
225
|
+
},
|
|
226
|
+
}
|
|
227
|
+
{
|
|
228
|
+
label: '订单号',
|
|
229
|
+
prop: 'orderNo',
|
|
230
|
+
component: 'el-input',
|
|
231
|
+
{/* Form-Item Attributes */}
|
|
232
|
+
formItemAttrs: {
|
|
233
|
+
"label-width": "120px",
|
|
234
|
+
size: "small"
|
|
235
|
+
},
|
|
198
236
|
},
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
format: "yyyy年MM月",
|
|
208
|
-
clearable: false, // 所有的表单组件如果有clearable，默认是true
|
|
237
|
+
{
|
|
238
|
+
label: '状态',
|
|
239
|
+
prop: 'status',
|
|
240
|
+
component: 'el-select',
|
|
241
|
+
{/* 表单组件属性 */}
|
|
242
|
+
attrs: {
|
|
243
|
+
style: {
|
|
244
|
+
width: "200px", // 默认220px
|
|
209
245
|
},
|
|
246
|
+
filterable: true,
|
|
210
247
|
events: {
|
|
211
|
-
{/* el-date-picker的原生组件事件 */}
|
|
212
248
|
change: (val) => {
|
|
213
249
|
console.log(val)
|
|
214
|
-
},
|
|
215
|
-
},
|
|
216
|
-
}
|
|
217
|
-
{
|
|
218
|
-
label: '订单号',
|
|
219
|
-
prop: 'orderNo',
|
|
220
|
-
component: 'el-input',
|
|
221
|
-
{/* Form-Item Attributes */}
|
|
222
|
-
formItemAttrs: {
|
|
223
|
-
"label-width": "120px",
|
|
224
|
-
size: "small"
|
|
225
|
-
},
|
|
226
|
-
},
|
|
227
|
-
{
|
|
228
|
-
label: '状态',
|
|
229
|
-
prop: 'status',
|
|
230
|
-
component: 'el-select',
|
|
231
|
-
{/* 表单组件属性 */}
|
|
232
|
-
attrs: {
|
|
233
|
-
style: {
|
|
234
|
-
width: "200px", // 默认220px
|
|
235
|
-
},
|
|
236
|
-
filterable: true,
|
|
237
|
-
events: {
|
|
238
|
-
change: (val) => {
|
|
239
|
-
console.log(val)
|
|
240
|
-
}
|
|
241
250
|
}
|
|
242
|
-
}
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
251
|
+
}
|
|
252
|
+
},
|
|
253
|
+
{/* options有长度时不会触发api */}
|
|
254
|
+
options: [
|
|
255
|
+
{ label: "成功", value: 0 }
|
|
256
|
+
]
|
|
257
|
+
}
|
|
258
|
+
]
|
|
250
259
|
}
|
|
251
260
|
}
|
|
261
|
+
}
|
|
252
262
|
</script>
|
|
253
263
|
```
|
|
254
264
|
|
|
@@ -317,104 +327,103 @@ import { statusApi } from "@/api/status"
|
|
|
317
327
|
</template>
|
|
318
328
|
</ui-table>
|
|
319
329
|
<script>
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
},
|
|
332
|
-
{
|
|
333
|
-
label: "测试render一大一小的两行数据",
|
|
334
|
-
prop: "test2",
|
|
335
|
-
"min-width": 150,
|
|
336
|
-
"show-overflow-tooltip": true,
|
|
337
|
-
render: ({ row, column, $h, index }) => {
|
|
338
|
-
const { test2, test2Code } = row;
|
|
339
|
-
return $h("div", { style: { width: "100%" } }, [
|
|
340
|
-
$h("div", { class: "bm-table-cell" }, test2),
|
|
341
|
-
$h("div", { style: { color: "#AAAAAA", fontSize: "12px" } }, test2Code),
|
|
342
|
-
]);
|
|
343
|
-
}, // 单元格render形式
|
|
344
|
-
},
|
|
345
|
-
{
|
|
346
|
-
label: "测试组件",
|
|
347
|
-
prop: "test3",
|
|
348
|
-
width: 200,
|
|
349
|
-
component: 'Status', // 单元格使用component组件形式时，默认会把row，column，index 传入组件
|
|
350
|
-
componentProps: { statusName: "test3" }, // componentProps组件需要的参数
|
|
351
|
-
{/* componentEvents: {
|
|
352
|
-
change: (val) => {},
|
|
353
|
-
...
|
|
354
|
-
} // 组件的事件，如果有的话 */}
|
|
355
|
-
},
|
|
356
|
-
{
|
|
357
|
-
label: "测试4",
|
|
358
|
-
prop: "test4",
|
|
359
|
-
width: 100,
|
|
360
|
-
formatter: (val, row, index) => val || "-", // 单元格内容格式化
|
|
361
|
-
},
|
|
362
|
-
{
|
|
363
|
-
headerSlot: true, // 表头使用插槽
|
|
364
|
-
prop: "test5",
|
|
365
|
-
slot: true // 单元格插槽形式
|
|
366
|
-
},
|
|
367
|
-
{
|
|
368
|
-
label: "测试5-可点击的单元格", // 默认active样式
|
|
369
|
-
prop: "test5",
|
|
370
|
-
width: 100,
|
|
371
|
-
clickable: true, // 一直可点击
|
|
372
|
-
|
|
373
|
-
{/* 或者使用条件判断
|
|
374
|
-
clickableClass: ({row}, col) => row[col.prop] > 0 */}
|
|
375
|
-
onCellClick: ({row, col, index}) => {} // 单元格可点击时触发的方法
|
|
376
|
-
}
|
|
377
|
-
],
|
|
378
|
-
tableData: [],
|
|
379
|
-
pagination: {
|
|
380
|
-
pageNum: 1,
|
|
381
|
-
pageSize: 10
|
|
330
|
+
export default {
|
|
331
|
+
data() {
|
|
332
|
+
return {
|
|
333
|
+
loading: false,
|
|
334
|
+
tableColumns: [
|
|
335
|
+
{
|
|
336
|
+
label: "测试1",
|
|
337
|
+
prop: "test1",
|
|
338
|
+
"min-width": 150,
|
|
339
|
+
"show-overflow-tooltip": true,
|
|
340
|
+
fixed: "left",
|
|
382
341
|
},
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
342
|
+
{
|
|
343
|
+
label: "测试render一大一小的两行数据",
|
|
344
|
+
prop: "test2",
|
|
345
|
+
"min-width": 150,
|
|
346
|
+
"show-overflow-tooltip": true,
|
|
347
|
+
render: ({ row, column, $h, index }) => {
|
|
348
|
+
const { test2, test2Code } = row;
|
|
349
|
+
return $h("div", { style: { width: "100%" } }, [
|
|
350
|
+
$h("div", { class: "bm-table-cell" }, test2),
|
|
351
|
+
$h("div", { style: { color: "#AAAAAA", fontSize: "12px" } }, test2Code),
|
|
352
|
+
]);
|
|
353
|
+
}, // 单元格render形式
|
|
354
|
+
},
|
|
355
|
+
{
|
|
356
|
+
label: "测试组件",
|
|
357
|
+
prop: "test3",
|
|
358
|
+
width: 200,
|
|
359
|
+
component: 'Status', // 单元格使用component组件形式时，默认会把row，column，index 传入组件
|
|
360
|
+
componentProps: { statusName: "test3" }, // componentProps组件需要的参数
|
|
361
|
+
{/* componentEvents: {
|
|
362
|
+
change: (val) => {},
|
|
363
|
+
...
|
|
364
|
+
} // 组件的事件，如果有的话 */}
|
|
365
|
+
},
|
|
366
|
+
{
|
|
367
|
+
label: "测试4",
|
|
368
|
+
prop: "test4",
|
|
369
|
+
width: 100,
|
|
370
|
+
formatter: (val, row, index) => val || "-", // 单元格内容格式化
|
|
371
|
+
},
|
|
372
|
+
{
|
|
373
|
+
headerSlot: true, // 表头使用插槽
|
|
374
|
+
prop: "test5",
|
|
375
|
+
slot: true // 单元格插槽形式
|
|
376
|
+
},
|
|
377
|
+
{
|
|
378
|
+
label: "测试5-可点击的单元格", // 默认active样式
|
|
379
|
+
prop: "test5",
|
|
380
|
+
width: 100,
|
|
381
|
+
clickable: true, // 一直可点击
|
|
382
|
+
|
|
383
|
+
{/* 或者使用条件判断
|
|
384
|
+
clickableClass: ({row}, col) => row[col.prop] > 0 */}
|
|
385
|
+
onCellClick: ({row, col, index}) => {} // 单元格可点击时触发的方法
|
|
386
|
+
}
|
|
387
|
+
],
|
|
388
|
+
tableData: [],
|
|
389
|
+
pagination: {
|
|
390
|
+
pageNum: 1,
|
|
391
|
+
pageSize: 10
|
|
409
392
|
},
|
|
410
|
-
|
|
411
|
-
|
|
393
|
+
total: 0,
|
|
394
|
+
operateBtns: [
|
|
395
|
+
{
|
|
396
|
+
label: "详情",
|
|
397
|
+
type: "text",
|
|
398
|
+
action: (params) => {
|
|
399
|
+
|
|
400
|
+
},
|
|
401
|
+
},
|
|
402
|
+
{
|
|
403
|
+
label: "操作记录",
|
|
404
|
+
type: "text",
|
|
405
|
+
action: ({ context }) => {
|
|
406
|
+
this.currentRow = context;
|
|
407
|
+
this.getOperateLogInfo();
|
|
408
|
+
},
|
|
409
|
+
},
|
|
410
|
+
],
|
|
411
|
+
currentRow: null
|
|
412
412
|
}
|
|
413
|
+
},
|
|
414
|
+
methods: {
|
|
415
|
+
init() {},
|
|
416
|
+
handleChangePagination(pagination) {
|
|
417
|
+
this.pagination = pagination
|
|
418
|
+
this.init()
|
|
419
|
+
},
|
|
420
|
+
handleSelectionChange(selection) {},
|
|
421
|
+
getOperateLogInfo() {}
|
|
413
422
|
}
|
|
423
|
+
}
|
|
414
424
|
</script>
|
|
415
425
|
```
|
|
416
426
|
|
|
417
|
-
|
|
418
427
|
#### props & slots & methods
|
|
419
428
|
|
|
420
429
|
##### props
|
|
@@ -486,18 +495,18 @@ import { statusApi } from "@/api/status"
|
|
|
486
495
|
</ui-dialog>
|
|
487
496
|
|
|
488
497
|
<script>
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
}
|
|
494
|
-
},
|
|
495
|
-
methods: {
|
|
496
|
-
handleClose() {},
|
|
497
|
-
handleCancel() {},
|
|
498
|
-
handleCancel() {},
|
|
498
|
+
export default {
|
|
499
|
+
data() {
|
|
500
|
+
return {
|
|
501
|
+
show: false,
|
|
499
502
|
}
|
|
503
|
+
},
|
|
504
|
+
methods: {
|
|
505
|
+
handleClose() {},
|
|
506
|
+
handleCancel() {},
|
|
507
|
+
handleCancel() {},
|
|
500
508
|
}
|
|
509
|
+
}
|
|
501
510
|
</script>
|
|
502
511
|
```
|
|
503
512
|
|
|
@@ -538,17 +547,19 @@ import { statusApi } from "@/api/status"
|
|
|
538
547
|
<ui-virtual-select v-model="select" multiple filterable :options="options"/>
|
|
539
548
|
|
|
540
549
|
<script>
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
}
|
|
550
|
+
export default {
|
|
551
|
+
data() {
|
|
552
|
+
return {
|
|
553
|
+
select: []
|
|
554
|
+
options: Array.from({ length: 1000 }, (_, index) => ({ label: `${index + 1}虚拟滚动数据`, value: index + 1 }))
|
|
547
555
|
}
|
|
548
556
|
}
|
|
557
|
+
}
|
|
549
558
|
</script>
|
|
550
559
|
```
|
|
551
560
|
|
|
561
|
+
-------------------
|
|
562
|
+
|
|
552
563
|
#### props
|
|
553
564
|
|
|
554
565
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|