backend-management-ui 1.3.2 → 1.3.4
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 +294 -295
- package/backend-management-ui.common.js +1785 -69
- package/backend-management-ui.common.js.map +1 -1
- package/backend-management-ui.css +1 -0
- package/backend-management-ui.umd.js +1735 -19
- package/backend-management-ui.umd.js.map +1 -1
- package/backend-management-ui.umd.min.js +8 -2
- package/backend-management-ui.umd.min.js.map +1 -1
- package/package.json +27 -18
- package/demo.html +0 -1
package/README.md
CHANGED
|
@@ -62,185 +62,185 @@ export default {
|
|
|
62
62
|
#### 典型编辑型表单
|
|
63
63
|
|
|
64
64
|
``` js
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
65
|
+
<ui-form :model="searchForm" :formConfig="formConfig" label-width="100px" ></ui-form>
|
|
66
|
+
<script>
|
|
67
|
+
export default {
|
|
68
|
+
data() {
|
|
69
|
+
return {
|
|
70
|
+
searchForm: {
|
|
71
|
+
orderNo: null,
|
|
72
|
+
status: null
|
|
73
|
+
},
|
|
74
|
+
formConfig: [
|
|
75
|
+
{
|
|
76
|
+
label: '订单号',
|
|
77
|
+
prop: 'orderNo',
|
|
78
|
+
component: 'el-input'
|
|
73
79
|
},
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
options: [
|
|
85
|
-
{label: '成功', value: 0},
|
|
86
|
-
{label: '失败', value: 1}
|
|
87
|
-
]
|
|
88
|
-
}
|
|
89
|
-
]
|
|
90
|
-
}
|
|
80
|
+
{
|
|
81
|
+
label: '状态',
|
|
82
|
+
prop: 'status',
|
|
83
|
+
component: 'el-select',
|
|
84
|
+
options: [
|
|
85
|
+
{label: '成功', value: 0},
|
|
86
|
+
{label: '失败', value: 1}
|
|
87
|
+
]
|
|
88
|
+
}
|
|
89
|
+
]
|
|
91
90
|
}
|
|
92
91
|
}
|
|
93
|
-
|
|
92
|
+
}
|
|
93
|
+
</script>
|
|
94
94
|
```
|
|
95
95
|
|
|
96
96
|
#### 典型展示表单
|
|
97
97
|
|
|
98
98
|
``` js
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
99
|
+
<ui-form :model="searchForm" :formConfig="formConfig" label-width="100px" :showOperateBtn="false">
|
|
100
|
+
<template #item-orderNo="{ item, model, index }">
|
|
101
|
+
<span>{{ model.orderNo }}</span>
|
|
102
|
+
</template>
|
|
103
|
+
<template #item-status="{ model }">
|
|
104
|
+
<span>{{ model.status }}</span>
|
|
105
|
+
</template>
|
|
106
|
+
</ui-form>
|
|
107
|
+
<script>
|
|
108
|
+
export default {
|
|
109
|
+
data() {
|
|
110
|
+
return {
|
|
111
|
+
searchForm: {
|
|
112
|
+
orderNo: "订单好xx",
|
|
113
|
+
status: "成功"
|
|
114
|
+
},
|
|
115
|
+
formConfig: [
|
|
116
|
+
{
|
|
117
|
+
label: '订单号',
|
|
118
|
+
prop: 'orderNo',
|
|
114
119
|
},
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
{
|
|
121
|
-
label: '状态',
|
|
122
|
-
prop: 'status',
|
|
123
|
-
}
|
|
124
|
-
]
|
|
125
|
-
}
|
|
120
|
+
{
|
|
121
|
+
label: '状态',
|
|
122
|
+
prop: 'status',
|
|
123
|
+
}
|
|
124
|
+
]
|
|
126
125
|
}
|
|
127
126
|
}
|
|
128
|
-
|
|
127
|
+
}
|
|
128
|
+
</script>
|
|
129
129
|
```
|
|
130
130
|
|
|
131
131
|
#### 下拉类型接口获取数据
|
|
132
132
|
|
|
133
133
|
``` js
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
134
|
+
// 或者 :apiMapConfig="{ status: statusApi }"
|
|
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>
|
|
140
|
+
import { statusApi } from "@/api/status"
|
|
141
|
+
<script>
|
|
142
|
+
export default {
|
|
143
|
+
data() {
|
|
144
|
+
return {
|
|
145
|
+
searchForm: {
|
|
146
|
+
orderNo: null,
|
|
147
|
+
status: null
|
|
148
|
+
},
|
|
149
|
+
formConfig: [
|
|
150
|
+
{
|
|
151
|
+
label: '订单号',
|
|
152
|
+
prop: 'orderNo',
|
|
153
|
+
component: 'el-input'
|
|
148
154
|
},
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
}
|
|
155
|
-
{
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
page: 1,
|
|
165
|
-
pageSize: 10,
|
|
166
|
-
}
|
|
167
|
-
} */}
|
|
168
|
-
}
|
|
169
|
-
]
|
|
170
|
-
}
|
|
155
|
+
{
|
|
156
|
+
label: '状态',
|
|
157
|
+
prop: 'status',
|
|
158
|
+
component: 'el-select',
|
|
159
|
+
api: statusApi,
|
|
160
|
+
{/* 或者 */}
|
|
161
|
+
{/* api: {
|
|
162
|
+
url: statusApi,
|
|
163
|
+
params: {
|
|
164
|
+
page: 1,
|
|
165
|
+
pageSize: 10,
|
|
166
|
+
}
|
|
167
|
+
} */}
|
|
168
|
+
}
|
|
169
|
+
]
|
|
171
170
|
}
|
|
172
171
|
}
|
|
173
|
-
|
|
172
|
+
}
|
|
173
|
+
</script>
|
|
174
174
|
```
|
|
175
175
|
|
|
176
176
|
#### 其他用法
|
|
177
177
|
|
|
178
178
|
``` js
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
179
|
+
// Form Attributes/Methods直接传
|
|
180
|
+
<ui-form :model="searchForm" :formConfig="formConfig" inline label-width="100px">
|
|
181
|
+
</ui-form>
|
|
182
|
+
<script>
|
|
183
|
+
export default {
|
|
184
|
+
data() {
|
|
185
|
+
return {
|
|
186
|
+
searchForm: {
|
|
187
|
+
orderNo: "订单好xx",
|
|
188
|
+
status: "成功"
|
|
189
|
+
},
|
|
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
|
+
}
|
|
208
|
+
{
|
|
209
|
+
label: '订单号',
|
|
210
|
+
prop: 'orderNo',
|
|
211
|
+
component: 'el-input',
|
|
212
|
+
{/* Form-Item Attributes */}
|
|
213
|
+
formItemAttrs: {
|
|
214
|
+
"label-width": "120px",
|
|
215
|
+
size: "small"
|
|
216
|
+
},
|
|
189
217
|
},
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
format: "yyyy年MM月",
|
|
199
|
-
clearable: false, // 所有的表单组件如果有clearable，默认是true
|
|
218
|
+
{
|
|
219
|
+
label: '状态',
|
|
220
|
+
prop: 'status',
|
|
221
|
+
component: 'el-select',
|
|
222
|
+
{/* 表单组件属性 */}
|
|
223
|
+
attrs: {
|
|
224
|
+
style: {
|
|
225
|
+
width: "200px", // 默认220px
|
|
200
226
|
},
|
|
227
|
+
filterable: true,
|
|
201
228
|
events: {
|
|
202
|
-
{/* el-date-picker的原生组件事件 */}
|
|
203
229
|
change: (val) => {
|
|
204
230
|
console.log(val)
|
|
205
|
-
},
|
|
206
|
-
},
|
|
207
|
-
}
|
|
208
|
-
{
|
|
209
|
-
label: '订单号',
|
|
210
|
-
prop: 'orderNo',
|
|
211
|
-
component: 'el-input',
|
|
212
|
-
{/* Form-Item Attributes */}
|
|
213
|
-
formItemAttrs: {
|
|
214
|
-
"label-width": "120px",
|
|
215
|
-
size: "small"
|
|
216
|
-
},
|
|
217
|
-
},
|
|
218
|
-
{
|
|
219
|
-
label: '状态',
|
|
220
|
-
prop: 'status',
|
|
221
|
-
component: 'el-select',
|
|
222
|
-
{/* 表单组件属性 */}
|
|
223
|
-
attrs: {
|
|
224
|
-
style: {
|
|
225
|
-
width: "200px", // 默认220px
|
|
226
|
-
},
|
|
227
|
-
filterable: true,
|
|
228
|
-
events: {
|
|
229
|
-
change: (val) => {
|
|
230
|
-
console.log(val)
|
|
231
|
-
}
|
|
232
231
|
}
|
|
233
|
-
}
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
232
|
+
}
|
|
233
|
+
},
|
|
234
|
+
{/* options有长度时不会触发api */}
|
|
235
|
+
options: [
|
|
236
|
+
{ label: "成功", value: 0 }
|
|
237
|
+
]
|
|
238
|
+
}
|
|
239
|
+
]
|
|
241
240
|
}
|
|
242
241
|
}
|
|
243
|
-
|
|
242
|
+
}
|
|
243
|
+
</script>
|
|
244
244
|
```
|
|
245
245
|
|
|
246
246
|
#### props & slots & methods
|
|
@@ -262,7 +262,7 @@ export default {
|
|
|
262
262
|
###### formConfig配置项
|
|
263
263
|
|
|
264
264
|
| name | 说明 | 类型 | 可选值 | 默认值 |
|
|
265
|
-
| ----------- | -------------------
|
|
265
|
+
| ----------- | ------------------- | ------- | --------- | ----------- |
|
|
266
266
|
| label | 表单说明项 | string | - | - |
|
|
267
267
|
| prop | 表单绑定的字段 | string | 必传 | - |
|
|
268
268
|
| component | 绑定的组件, 当字段有插槽时不触发 | string | 组件名 | el-input |
|
|
@@ -285,6 +285,7 @@ export default {
|
|
|
285
285
|
| search | 搜索按钮点击触发调用的方法 |
|
|
286
286
|
| reset | 重置按钮点击触发调用的方法 |
|
|
287
287
|
|
|
288
|
+
---------------------------------------
|
|
288
289
|
|
|
289
290
|
### ui-table 表格
|
|
290
291
|
|
|
@@ -295,113 +296,113 @@ export default {
|
|
|
295
296
|
#### 表格用法
|
|
296
297
|
|
|
297
298
|
``` js
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
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
|
|
299
|
+
<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">
|
|
300
|
+
<template #header-test4>
|
|
301
|
+
<div>表头插槽</div>
|
|
302
|
+
</template>
|
|
303
|
+
<template #test4="{ row }">
|
|
304
|
+
<div>单元格插槽{{row.test4}}</div>
|
|
305
|
+
</template>
|
|
306
|
+
<template #operation="{ row }">
|
|
307
|
+
<ui-btns :btns="operateBtns" :context="row" />
|
|
308
|
+
</template>
|
|
309
|
+
</ui-table>
|
|
310
|
+
<script>
|
|
311
|
+
export default {
|
|
312
|
+
data() {
|
|
313
|
+
return {
|
|
314
|
+
loading: false,
|
|
315
|
+
tableColumns: [
|
|
316
|
+
{
|
|
317
|
+
label: "测试1",
|
|
318
|
+
prop: "test1",
|
|
319
|
+
"min-width": 150,
|
|
320
|
+
"show-overflow-tooltip": true,
|
|
321
|
+
fixed: "left",
|
|
372
322
|
},
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
323
|
+
{
|
|
324
|
+
label: "测试render一大一小的两行数据",
|
|
325
|
+
prop: "test2",
|
|
326
|
+
"min-width": 150,
|
|
327
|
+
"show-overflow-tooltip": true,
|
|
328
|
+
render: ({ row, column, $h, index }) => {
|
|
329
|
+
const { test2, test2Code } = row;
|
|
330
|
+
return $h("div", { style: { width: "100%" } }, [
|
|
331
|
+
$h("div", { class: "bm-table-cell" }, test2),
|
|
332
|
+
$h("div", { style: { color: "#AAAAAA", fontSize: "12px" } }, test2Code),
|
|
333
|
+
]);
|
|
334
|
+
}, // 单元格render形式
|
|
335
|
+
},
|
|
336
|
+
{
|
|
337
|
+
label: "测试组件",
|
|
338
|
+
prop: "test3",
|
|
339
|
+
width: 200,
|
|
340
|
+
component: 'Status', // 单元格使用component组件形式时，默认会把row，column，index 传入组件
|
|
341
|
+
componentProps: { statusName: "test3" }, // componentProps组件需要的参数
|
|
342
|
+
{/* componentEvents: {
|
|
343
|
+
change: (val) => {},
|
|
344
|
+
...
|
|
345
|
+
} // 组件的事件，如果有的话 */}
|
|
346
|
+
},
|
|
347
|
+
{
|
|
348
|
+
label: "测试4",
|
|
349
|
+
prop: "test4",
|
|
350
|
+
width: 100,
|
|
351
|
+
formatter: (val, row, index) => val || "-", // 单元格内容格式化
|
|
352
|
+
},
|
|
353
|
+
{
|
|
354
|
+
headerSlot: true, // 表头使用插槽
|
|
355
|
+
prop: "test5",
|
|
356
|
+
slot: true // 单元格插槽形式
|
|
357
|
+
},
|
|
358
|
+
{
|
|
359
|
+
label: "测试5-可点击的单元格", // 默认active样式
|
|
360
|
+
prop: "test5",
|
|
361
|
+
width: 100,
|
|
362
|
+
clickable: true, // 一直可点击
|
|
363
|
+
|
|
364
|
+
{/* 或者使用条件判断
|
|
365
|
+
clickableClass: ({row}, col) => row[col.prop] > 0 */}
|
|
366
|
+
onCellClick: ({row, col, index}) => {} // 单元格可点击时触发的方法
|
|
367
|
+
}
|
|
368
|
+
],
|
|
369
|
+
tableData: [],
|
|
370
|
+
pagination: {
|
|
371
|
+
pageNum: 1,
|
|
372
|
+
pageSize: 10
|
|
399
373
|
},
|
|
400
|
-
|
|
401
|
-
|
|
374
|
+
total: 0,
|
|
375
|
+
operateBtns: [
|
|
376
|
+
{
|
|
377
|
+
label: "详情",
|
|
378
|
+
type: "text",
|
|
379
|
+
action: (params) => {
|
|
380
|
+
|
|
381
|
+
},
|
|
382
|
+
},
|
|
383
|
+
{
|
|
384
|
+
label: "操作记录",
|
|
385
|
+
type: "text",
|
|
386
|
+
action: ({ context }) => {
|
|
387
|
+
this.currentRow = context;
|
|
388
|
+
this.getOperateLogInfo();
|
|
389
|
+
},
|
|
390
|
+
},
|
|
391
|
+
],
|
|
392
|
+
currentRow: null
|
|
402
393
|
}
|
|
394
|
+
},
|
|
395
|
+
methods: {
|
|
396
|
+
init() {},
|
|
397
|
+
handleChangePagination(pagination) {
|
|
398
|
+
this.pagination = pagination
|
|
399
|
+
this.init()
|
|
400
|
+
},
|
|
401
|
+
handleSelectionChange(selection) {},
|
|
402
|
+
getOperateLogInfo() {}
|
|
403
403
|
}
|
|
404
|
-
|
|
404
|
+
}
|
|
405
|
+
</script>
|
|
405
406
|
```
|
|
406
407
|
|
|
407
408
|
|
|
@@ -430,6 +431,7 @@ export default {
|
|
|
430
431
|
| change-page | 修改pageNum的方法 | pageNum |
|
|
431
432
|
| change-pagination | 修改pageSize和pageNum的方法 | pagination |
|
|
432
433
|
|
|
434
|
+
-------------------------------
|
|
433
435
|
|
|
434
436
|
### ui-btns
|
|
435
437
|
使用el-button进行的二次封装
|
|
@@ -441,8 +443,8 @@ export default {
|
|
|
441
443
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|
442
444
|
| -------- | ----------- | -------- | ------ | --------- |
|
|
443
445
|
| btns | 按钮数组 | array | - | - |
|
|
444
|
-
| disabledAll | 禁用所有按钮 | boolean | - | false
|
|
445
|
-
| context | 上下文 | object/array/string/ number/ boolean | null |
|
|
446
|
+
| disabledAll | 禁用所有按钮 | boolean | - | false |
|
|
447
|
+
| context | 上下文 | object/array/string/ number/ boolean | - | null |
|
|
446
448
|
|
|
447
449
|
##### btns
|
|
448
450
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|
@@ -452,15 +454,14 @@ export default {
|
|
|
452
454
|
| action | 点击事件 | function | - | - |
|
|
453
455
|
| eventName | 点击事件的方法名，会emit出去eventName事件，action和eventName一起存在时会重复触发 | string | - |
|
|
454
456
|
|
|
457
|
+
-------------------------------
|
|
455
458
|
|
|
456
459
|
### Status
|
|
457
460
|
|
|
458
461
|
基本用法
|
|
459
462
|
|
|
460
463
|
```js
|
|
461
|
-
<
|
|
462
|
-
<Status status-name="待提交" />
|
|
463
|
-
</template>
|
|
464
|
+
<Status status-name="待提交" />
|
|
464
465
|
```
|
|
465
466
|
|
|
466
467
|
#### props
|
|
@@ -470,6 +471,7 @@ export default {
|
|
|
470
471
|
| row | 传进来的整条数据 | object | - | {} |
|
|
471
472
|
| statusName | 状态值，当row有传值时这个字段会被当做字段名 | string | 必传 | -|
|
|
472
473
|
|
|
474
|
+
-------------------------------
|
|
473
475
|
|
|
474
476
|
### ui-dialog
|
|
475
477
|
|
|
@@ -478,35 +480,33 @@ export default {
|
|
|
478
480
|
基本用法
|
|
479
481
|
|
|
480
482
|
```js
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
return {
|
|
500
|
-
show: false,
|
|
501
|
-
}
|
|
502
|
-
},
|
|
503
|
-
methods: {
|
|
504
|
-
handleClose() {},
|
|
505
|
-
handleCancel() {},
|
|
506
|
-
handleCancel() {},
|
|
483
|
+
<ui-dialog
|
|
484
|
+
:visible.sync="show"
|
|
485
|
+
title="弹框标题"
|
|
486
|
+
confirm-text="确认"
|
|
487
|
+
width="60%"
|
|
488
|
+
show-cancel
|
|
489
|
+
@close="handleClose"
|
|
490
|
+
@cancel="handleCancel"
|
|
491
|
+
@confirm="handleConfirm"
|
|
492
|
+
>
|
|
493
|
+
弹框内容
|
|
494
|
+
</ui-dialog>
|
|
495
|
+
|
|
496
|
+
<script>
|
|
497
|
+
export default {
|
|
498
|
+
data() {
|
|
499
|
+
return {
|
|
500
|
+
show: false,
|
|
507
501
|
}
|
|
502
|
+
},
|
|
503
|
+
methods: {
|
|
504
|
+
handleClose() {},
|
|
505
|
+
handleCancel() {},
|
|
506
|
+
handleCancel() {},
|
|
508
507
|
}
|
|
509
|
-
|
|
508
|
+
}
|
|
509
|
+
</script>
|
|
510
510
|
```
|
|
511
511
|
|
|
512
512
|
#### props
|
|
@@ -535,32 +535,31 @@ export default {
|
|
|
535
535
|
| close | 关闭弹框的回调 | - |
|
|
536
536
|
| 其他事件同el-dialog | - | - |
|
|
537
537
|
|
|
538
|
-
|
|
539
|
-
|
|
538
|
+
-----------------------------------
|
|
540
539
|
|
|
541
540
|
## 使用时可能存在的项目不支持可选链和空值合并运算符的报错问题
|
|
542
541
|
|
|
543
542
|
安装必要的依赖
|
|
544
543
|
|
|
545
544
|
```js
|
|
546
|
-
|
|
545
|
+
npm install @babel/plugin-proposal-optional-chaining @babel/plugin-proposal-nullish-coalescing-operator --save-dev
|
|
547
546
|
```
|
|
548
547
|
|
|
549
548
|
.babelrc 或者 babel.config.js 文件 plugins字段添加
|
|
550
549
|
|
|
551
550
|
```js
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
551
|
+
plugins: [
|
|
552
|
+
..., // 原有配置
|
|
553
|
+
"@babel/plugin-proposal-optional-chaining",
|
|
554
|
+
"@babel/plugin-proposal-nullish-coalescing-operator"
|
|
555
|
+
]
|
|
557
556
|
````
|
|
558
557
|
|
|
559
558
|
文件 vue.config.js 新增指定babel去处理包里面的es6+语法
|
|
560
559
|
|
|
561
560
|
```js
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
561
|
+
module.exports = {
|
|
562
|
+
..., // 原有配置
|
|
563
|
+
transpileDependencies: ["backend-management-ui"]
|
|
564
|
+
}
|
|
566
565
|
```
|