Skip to content

Commit c26bb7c

Browse files
committed
添加 Dialog 组件
ActionButton ToolButton 添加dialog属性 添加 BaseForm 组件 Grid 添加 DataVuex属性
1 parent f6c54dc commit c26bb7c

38 files changed

+183491
-256
lines changed
40.8 KB
Loading
55.9 KB
Loading

docs/components.md

Lines changed: 108 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,24 @@
66
className('class-1 class-2');
77
style(['width'=>'100px']);
88
```
9+
## 基础表单
10+
11+
可实现简单的表单,不带模型
12+
13+
![image-20200331141335210](components.assets/image-20200331141335210.png)
14+
15+
```php
16+
$baseForm = new BaseForm();//实例化
17+
$baseForm->action(route("order-express"));//设置表单提交地址,POST请求
18+
$baseForm->emit("closeDialog");//设置表单提交成功触发事件
19+
$baseForm->emit("tableReload");
20+
$baseForm->addValue("order_no", $actions->getRow()->order_no);//添加表单域的值
21+
$baseForm->item("express_company", "物流公司")->required();//添加可编辑字段,用法模型表单一样
22+
$baseForm->item("express_no", "物流单号")->required();
23+
```
24+
25+
26+
927
## 展示组件
1028

1129
### Card 卡片
@@ -16,8 +34,6 @@ style(['width'=>'100px']);
1634
Card::make()->content();
1735
```
1836

19-
20-
2137
### Steps 步骤条
2238

2339
引导用户按照流程完成任务的分步导航条,可根据实际应用场景设定步骤,步骤不得少于 2 步。
@@ -86,6 +102,8 @@ Alert::make("title","desc");
86102

87103
### Tag 标签
88104

105+
更多属性请查看element-ui文档
106+
89107
```php
90108
Tag::make();
91109
```
@@ -181,6 +199,9 @@ Tag::make()->href("http://www.baidu.com");
181199
#### 图标类名
182200

183201
可直接使用内置 [Icon 图标](https://element.eleme.cn/#/zh-CN/component/icon),或使用自定义图标
202+
203+
更多属性请查看element-ui文档
204+
184205
```php
185206
Tag::make()->icon('el-icon-platform-eleme');
186207
//OR
@@ -192,21 +213,37 @@ Tag::make()->icon('iconfont my-icon-name');
192213
Avatar::make();
193214
```
194215
### Image 图片
195-
可显示单张或多张图片,支持大图预览
216+
可显示单张或多张图片,支持大图预览,更多属性请查看element-ui文档
196217
```php
197218
Image::make();
198219
```
199220
### Icon 图标
221+
222+
更多属性请查看element-ui文档
223+
200224
```php
201225
Icon::make()
202226
```
203227

228+
### Dialog 对话框
229+
230+
目前此组件不能单独使用,需配合其他组件使用,如`ActionButton``ToolbarButton`
231+
232+
```php
233+
Dialog::make()
234+
->.....//更多属性请查看element-ui文档
235+
->slot(function(Content $content){//弹窗内容组件,闭包传入一个content组件
236+
237+
});
238+
```
239+
240+
204241

205242
### 操作组件
206243

207244
#### ActionButton
208245

209-
可用于vue路由导航,异步请求,连接跳转 操作
246+
可用于vue路由导航,异步请求,连接跳转,dialog 操作
210247

211248
```php
212249
ActionButton::make("ActionName")
@@ -215,24 +252,67 @@ ActionButton::make("ActionName")
215252
->message("确认操作提示信息")
216253
->handler("route")
217254
->uri("WeChat/manage/{app_id}")//路径,{xxx}会被自动替换成当前行的对应值,支持 ?x=x 参数
255+
->dialog(function($dialog){//返回dialog实例
256+
257+
})
218258
//调用代码
219259
$grid->actions(function (Grid\Actions $actions) {
220260
$actions->add(...);
221261
});
222262
```
223263

264+
265+
266+
Dialog代码示例
267+
268+
![image-20200331142220245](components.assets/image-20200331142220245.png)
269+
270+
```php
271+
$actions->add(ActionButton::make("发货")->order(4)->dialog(function (Dialog $dialog) use ($actions) {
272+
$dialog->title("订单发货")->showClose(false)->width('500px');
273+
$dialog->slot(function (Content $content) use ($actions) {
274+
$baseForm = new BaseForm();
275+
$baseForm->action(route("order-express"));
276+
$baseForm->emit("closeDialog");
277+
$baseForm->emit("tableReload");
278+
$baseForm->addValue("order_no", $actions->getRow()->order_no);
279+
$baseForm->item("express_company", "物流公司")->required();
280+
$baseForm->item("express_no", "物流单号")->required();
281+
$content->row($baseForm);
282+
});
283+
}));
284+
```
285+
286+
这里的dialog展示的是一个表单,当然你可以展示任意组件
287+
288+
289+
224290
### 工具栏组件
225291

226292
#### ToolButton
227293

228-
可用于vue路由导航,异步请求,连接跳转 操作
294+
可用于vue路由导航,异步请求,连接跳转 , Dialog
295+
296+
297+
298+
普通演示
229299

230300
```php
231301
Grid\Tools\ToolButton::make("同步粉丝")
232302
->handler("request") // 类型 request|route|link
233303
->uri("") //路径
234304
```
235305

306+
Dialog演示,Dialog属性请参考
307+
308+
```php
309+
$toolbars->addRight(Grid\Tools\ToolButton::make("采集")->dialog(function (Dialog $dialog){
310+
$dialog->slot(function (Content $content) {
311+
$content->row(Alert::make("123456"));
312+
});
313+
}));
314+
```
315+
236316
其他属性可参考 `el-button`
237317

238318
## 表单组件
@@ -241,6 +321,8 @@ Grid\Tools\ToolButton::make("同步粉丝")
241321

242322
### Radio 单选框
243323

324+
更多属性请查看element-ui文档
325+
244326
```php
245327
RadioGroup::make(1, [
246328
Radio::make(1, "公众号"),
@@ -250,6 +332,8 @@ RadioGroup::make(1, [
250332

251333
### Checkbox 多选框
252334

335+
更多属性请查看element-ui文档
336+
253337
```php
254338
CheckboxGroup::make()->options([
255339
Checkbox::make(value,name),
@@ -259,12 +343,16 @@ CheckboxGroup::make()->options([
259343

260344
### Input 输入框
261345

346+
更多属性请查看element-ui文档
347+
262348
```
263349
Input::make()
264350
```
265351

266352
### InputNumber 计数器
267353

354+
更多属性请查看element-ui文档
355+
268356
```
269357
InputNumber::make()
270358
```
@@ -289,6 +377,8 @@ Select::make()
289377
Select::make()->filterable()->remote($remoteUrl)
290378
```
291379

380+
更多属性请查看element-ui文档
381+
292382
### Cascader 级联选择器
293383

294384
当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择
@@ -342,37 +432,50 @@ $form->item("goods_class_path", "产品分类")->displayComponent(function () {
342432
Cascader::make()->panel(true)
343433
```
344434

435+
更多属性请查看element-ui文档
436+
345437
### Switch 开关
346438

347439
```php
348440
CSwitch::make()
349441
```
350442

443+
更多属性请查看element-ui文档
444+
351445
### Slider 滑块
352446

353447
```php
354448
Slider::make()
355449
```
356450

451+
更多属性请查看element-ui文档
452+
357453
### TimePicker 时间选择器
358454

359455
```php
360456
TimePicker::make()
361457
```
362458

459+
更多属性请查看element-ui文档
460+
363461
### DatePicker 日期选择器
364462

365463
```php
366464
DatePicker::make()
367465
```
368466

467+
更多属性请查看element-ui文档
468+
369469
### DateTimePicker 日期时间选择器
370470

371471
```php
372472
DateTimePicker::make()
373473
```
374474

475+
更多属性请查看element-ui文档
476+
375477
### Upload 上传
478+
376479
通过以下的调用来生成上传组件
377480
```php
378481
$form->item('avatar', '头像')->displayComponent(Upload::make()->pictureCard()->avatar()->path('avatar')->uniqueName())

docs/custom.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -627,6 +627,12 @@ this.$bus.emit("tableSetLoading",false);
627627
this.$bus.emit("pageReload");
628628
```
629629

630+
关闭Dialog
631+
632+
```php
633+
this.$bus.emit("closeDialog");
634+
```
635+
630636

631637

632638
更多事件正在开发中......

docs/grid.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -149,6 +149,14 @@ $grid->model()->with(['roles:id,name', 'roles.permissions', 'roles.menus']);
149149
$grid->defaultSort('id', 'asc');
150150
```
151151

152+
### 数据状态保存
153+
154+
把数据存入vue,默认为不保存
155+
156+
```php
157+
$grid->dataVuex();
158+
```
159+
152160
### 分页
153161

154162
设置 Table 的分页属性,默认`[10, 20, 30, 40, 50, 100]`

public/0.js

Lines changed: 59691 additions & 1 deletion
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)