Skip to content

Commit 328b8cb

Browse files
SmallRuralDogSmallRuralDog
committed
BaseForm添加Tab分栏显示
1 parent 6cd674b commit 328b8cb

File tree

6 files changed

+145
-114
lines changed

6 files changed

+145
-114
lines changed

‎docs/components.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -317,6 +317,8 @@ BatchAction::make("加入活动")
317317
```php
318318
Grid\Tools\ToolButton::make("同步粉丝")
319319
->handler("request") // 类型 request|route|link
320+
->message("确认操作提示信息")
321+
->tooltip("气泡提示")
320322
->uri("") //路径
321323
```
322324

‎docs/form.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,18 @@ $form->disabled(true);
109109
$form->item('username', '用户名')
110110
```
111111

112+
### 设置TAB栏
113+
114+
用于分割表单字段，默认为`基本信息`
115+
116+
![image-20200509104203063](assets/image-20200509104203063.png)
117+
118+
```php
119+
$form->item('username', '用户名')->tab("用户信息");
120+
```
121+
122+
123+
112124
### 复制其他字段值
113125

114126
> 编辑时复制其他字段的值，例如在确认密码框时可以用到

‎public/1.js‎

Lines changed: 118 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,7 @@ __webpack_require__.r(__webpack_exports__);
110110
//
111111
//
112112
//
113+
//
113114

114115

115116
/* harmony default export */ __webpack_exports__["default"] = ({
@@ -259,139 +260,143 @@ var render = function() {
259260
[
260261
_c(
261262
"el-tabs",
262-
[
263-
_c(
263+
_vm._l(_vm.attrs.tabs, function(tab) {
264+
return _c(
264265
"el-tab-pane",
265-
{ attrs: { label: "基本信息" } },
266+
{ key: tab, attrs: { label: tab } },
266267
[
267268
_vm._l(_vm.attrs.formItems, function(item, index) {
268269
return [
269-
_c(
270-
"ItemIf",
271-
{
272-
key: index,
273-
attrs: {
274-
form_item: item,
275-
form_items: _vm.attrs.formItems,
276-
form_data: _vm.formData
277-
}
278-
},
279-
[
280-
item.topComponent
281-
? _c(item.topComponent.componentName, {
282-
tag: "component",
283-
attrs: { attrs: item.topComponent }
284-
})
285-
: _vm._e(),
286-
_vm._v(" "),
287-
_c(
288-
"el-form-item",
270+
tab == item.tab
271+
? _c(
272+
"ItemIf",
289273
{
274+
key: index,
290275
attrs: {
291-
label: item.label,
292-
prop: item.prop,
293-
"label-width": item.labelWidth,
294-
required: item.required,
295-
rules: item.rules,
296-
error: item.error,
297-
"show-message": item.showMessage,
298-
"inline-message": item.inlineMessage,
299-
size: item.size
276+
form_item: item,
277+
form_items: _vm.attrs.formItems,
278+
form_data: _vm.formData
300279
}
301280
},
302281
[
303-
[
304-
_c(
305-
"el-row",
282+
item.topComponent
283+
? _c(item.topComponent.componentName, {
284+
tag: "component",
285+
attrs: { attrs: item.topComponent }
286+
})
287+
: _vm._e(),
288+
_vm._v(" "),
289+
_c(
290+
"el-form-item",
291+
{
292+
attrs: {
293+
label: item.label,
294+
prop: item.prop,
295+
"label-width": item.labelWidth,
296+
required: item.required,
297+
rules: item.rules,
298+
error: item.error,
299+
"show-message": item.showMessage,
300+
"inline-message": item.inlineMessage,
301+
size: item.size
302+
}
303+
},
304+
[
306305
[
307306
_c(
308-
"el-col",
309-
{ attrs: { span: item.inputWidth } },
307+
"el-row",
310308
[
311-
item.relationName
312-
? [
313-
_c("ItemDiaplsy", {
314-
attrs: {
315-
form_item: item,
316-
form_items:
317-
_vm.attrs.formItems,
318-
form_data: _vm.formData
319-
},
320-
model: {
321-
value:
322-
_vm.formData[
323-
item.relationName
324-
][item.relationValueKey],
325-
callback: function($$v) {
326-
_vm.$set(
327-
_vm.formData[
328-
item.relationName
329-
],
330-
item.relationValueKey,
331-
$$v
332-
)
333-
},
334-
expression:
335-
"\n formData[item.relationName][item.relationValueKey]\n "
336-
}
337-
})
338-
]
339-
: [
340-
_c("ItemDiaplsy", {
341-
attrs: {
342-
form_item: item,
343-
form_data: _vm.formData
344-
},
345-
model: {
346-
value:
347-
_vm.formData[item.prop],
348-
callback: function($$v) {
349-
_vm.$set(
350-
_vm.formData,
351-
item.prop,
352-
$$v
353-
)
354-
},
355-
expression:
356-
"formData[item.prop]"
357-
}
358-
})
359-
],
360-
_vm._v(" "),
361-
item.help
362-
? _c("div", {
363-
staticClass: "form-item-help",
364-
domProps: {
365-
innerHTML: _vm._s(item.help)
366-
}
367-
})
368-
: _vm._e()
309+
_c(
310+
"el-col",
311+
{ attrs: { span: item.inputWidth } },
312+
[
313+
item.relationName
314+
? [
315+
_c("ItemDiaplsy", {
316+
attrs: {
317+
form_item: item,
318+
form_items:
319+
_vm.attrs.formItems,
320+
form_data: _vm.formData
321+
},
322+
model: {
323+
value:
324+
_vm.formData[
325+
item.relationName
326+
][
327+
item.relationValueKey
328+
],
329+
callback: function($$v) {
330+
_vm.$set(
331+
_vm.formData[
332+
item.relationName
333+
],
334+
item.relationValueKey,
335+
$$v
336+
)
337+
},
338+
expression:
339+
"\n formData[item.relationName][item.relationValueKey]\n "
340+
}
341+
})
342+
]
343+
: [
344+
_c("ItemDiaplsy", {
345+
attrs: {
346+
form_item: item,
347+
form_data: _vm.formData
348+
},
349+
model: {
350+
value:
351+
_vm.formData[item.prop],
352+
callback: function($$v) {
353+
_vm.$set(
354+
_vm.formData,
355+
item.prop,
356+
$$v
357+
)
358+
},
359+
expression:
360+
"formData[item.prop]"
361+
}
362+
})
363+
],
364+
_vm._v(" "),
365+
item.help
366+
? _c("div", {
367+
staticClass: "form-item-help",
368+
domProps: {
369+
innerHTML: _vm._s(item.help)
370+
}
371+
})
372+
: _vm._e()
373+
],
374+
2
375+
)
369376
],
370-
2
377+
1
371378
)
372-
],
373-
1
374-
)
375-
]
379+
]
380+
],
381+
2
382+
),
383+
_vm._v(" "),
384+
item.footerComponent
385+
? _c(item.footerComponent.componentName, {
386+
tag: "component",
387+
attrs: { attrs: item.footerComponent }
388+
})
389+
: _vm._e()
376390
],
377-
2
378-
),
379-
_vm._v(" "),
380-
item.footerComponent
381-
? _c(item.footerComponent.componentName, {
382-
tag: "component",
383-
attrs: { attrs: item.footerComponent }
384-
})
385-
: _vm._e()
386-
],
387-
1
388-
)
391+
1
392+
)
393+
: _vm._e()
389394
]
390395
})
391396
],
392397
2
393398
)
394-
],
399+
}),
395400
1
396401
),
397402
_vm._v(" "),

‎resources/js/components/form/BaseForm.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,10 @@
1919
:disabled="attrs.attrs.disabled"
2020
>
2121
<el-tabs>
22-
<el-tab-pane label="基本信息">
22+
<el-tab-pane :label="tab" v-for="tab in attrs.tabs" :key="tab">
2323
<template v-for="(item, index) in attrs.formItems">
2424
<ItemIf
25+
v-if="tab == item.tab"
2526
:key="index"
2627
:form_item="item"
2728
:form_items="attrs.formItems"

‎src/Components/Widgets/BaseForm.php‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ class BaseForm extends Component
1818
protected $formItems = [];
1919
protected $formItemsValue = [];
2020

21+
protected $tabs = [];
22+
2123
protected $action;
2224

2325

@@ -95,6 +97,12 @@ public function emit($name, $data = null)
9597
public function jsonSerialize()
9698
{
9799
$items = $this->formItems;
100+
101+
$this->tabs = collect($items)->map(function (FormItem $item){
102+
return $item->getTab();
103+
})->unique()->all();
104+
105+
98106
/**@var FormItem $item */
99107
foreach ($items as $item) {
100108
Arr::set($this->formItemsValue, $item->getProp(), $item->getDefaultValue());

‎src/Form/FormItem.php‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -239,6 +239,9 @@ public function serveRulesMessage($serveRulesMessage)
239239
public function defaultValue($defaultValue)
240240
{
241241
$this->defaultValue = $defaultValue;
242+
243+
if($this->component) $this->component->componentValue($defaultValue);
244+
242245
return $this;
243246
}
244247

0 commit comments

Comments
 (0)