Skip to content

Commit 0897b1f

Browse files
author
hikki
committed
beta
1 parent 8f7733f commit 0897b1f

File tree

3 files changed

+160
-148
lines changed

3 files changed

+160
-148
lines changed

‎ComponentViewer.php

Lines changed: 36 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -10,31 +10,53 @@
1010

1111
class ComponentViewer
1212
{
13+
public static function makeAddFormAction(Grid\Tools $tools){
14+
$url = Request::capture()->getPathInfo();
15+
Admin::script(<<<EOF
16+
$('.CAForm').click(function(){
17+
componentForm('{$url}/create');
18+
});
19+
EOF
20+
);
21+
$tools->append(new
22+
class extends RowAction
23+
{
24+
public function render()
25+
{
26+
return <<<EOF
27+
<div class="btn-group pull-right grid-create-btn" style="margin-right: 10px">
28+
<a href='javascript:void(0);' class="btn btn-sm btn-success CAForm" title="新增">
29+
<i class="fa fa-plus"></i><span class="hidden-xs">&nbsp;&nbsp;新增</span>
30+
</a>
31+
</div>
32+
EOF;
33+
}
34+
});
35+
}
36+
37+
/**
38+
* @param Grid $grid
39+
*/
1340
public static function makeEditFormAction(Grid &$grid)
1441
{
1542
$grid->actions(function ($actions) {
1643
$actions->disableEdit();
1744
$url = Request::capture()->getPathInfo();
1845
Admin::script(<<<EOF
19-
componentForm.make = function () {
20-
componentForm._clear();
21-
componentForm._createModal();
22-
let url = componentForm.url + '/'+this.getAttribute('data-id') + '/edit';
23-
componentForm._createBox(url);
24-
}
25-
componentForm.apply('CEForm','{$url}');
46+
$('.CEForm').click(function(){
47+
let url = '{$url}' + '/'+this.getAttribute('data-id') + '/edit';
48+
componentForm(url,'PUT');
49+
});
2650
EOF
2751
);
2852

2953
$actions->add(new
3054
class extends RowAction
3155
{
32-
public $name = '修改';
33-
3456
public function render()
3557
{
3658
$id = $this->getKey();
37-
return "<a href='javascript:void(0);' class='CEForm' data-id='$id', class=>{$this->name()}</a>";
59+
return "<a href='javascript:void(0);' class='CEForm' data-id='$id'>修改</a>";
3860
}
3961
});
4062
});
@@ -50,13 +72,10 @@ public static function _makeEditFormAction(Grid &$grid)
5072
$actions->disableEdit();
5173
$url = Request::capture()->getPathInfo();
5274
Admin::script(<<<EOF
53-
componentForm.make = function () {
54-
componentForm._clear();
55-
componentForm._createModal();
56-
let url = componentForm.url + '/'+this.getAttribute('data-id') + '/edit';
57-
componentForm._createBox(url);
58-
}
59-
componentForm.apply('CEForm','{$url}');
75+
$('.CEForm').click(function(){
76+
let url = '{$url}' + '/'+this.getAttribute('data-id') + '/edit';
77+
componentForm(url,'PUT');
78+
});
6079
EOF
6180
);
6281
$id = $actions->getKey();

‎component.js

Lines changed: 123 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -45,85 +45,6 @@ let _componentCommonBlock = {
4545
xhr.onerror = function (e) {
4646
console.log(e)
4747
};
48-
},
49-
_componentFormConstruct:function (obj) {
50-
obj._createBox = function (url) {
51-
let box = document.createElement("div");
52-
box.className = "box grid-box";
53-
let box_body = document.createElement("div");
54-
box_body.className = "box-body table-responsive no-padding";
55-
56-
box.append(box_body);
57-
this._boxNode = box;
58-
this._boxBodyNode = box_body;
59-
this._request(url);
60-
return;
61-
};
62-
obj._loading = function(remove=false){
63-
if(remove){
64-
this._modalBodyNode.removeChild(this._loadingNode);
65-
this._loadingNode = null;
66-
return;
67-
}
68-
if(this._loadingNode instanceof HTMLElement){
69-
return;
70-
}
71-
let svg = _componentCommonBlock._loadingSvg;
72-
let loading = document.createElement('div');
73-
loading.style = 'width: 100%;height: 100px;';
74-
loading.innerHTML = svg;
75-
this._loadingNode = loading;
76-
let firstChild = this._modalBodyNode.childNodes[0];
77-
if(firstChild instanceof HTMLElement){
78-
this._modalBodyNode.insertBefore(loading,firstChild);
79-
return;
80-
}
81-
this._modalBodyNode.append(loading);
82-
};
83-
obj._createModal = function () {
84-
//modal
85-
let modal = document.createElement("div");
86-
modal.setAttribute('class', 'modal grid-modal in');
87-
modal.setAttribute('tabindex', '-1');
88-
modal.setAttribute('role', 'dialog');
89-
modal.style = 'display: block;';
90-
91-
//modal_dialog
92-
let mod_dialog = document.createElement("div");
93-
mod_dialog.setAttribute('class', 'modal-dialog modal-lg');
94-
mod_dialog.setAttribute('role', 'document');
95-
mod_dialog.style = 'width:'+window.innerWidth*0.8 + 'px';
96-
//modal_content
97-
let modal_content = document.createElement("div");
98-
modal_content.className = "modal-content";
99-
100-
//header
101-
let modal_header = document.createElement("div");
102-
modal_header.className = 'modal-header';
103-
modal_header.style = 'background-color:#ffffff;padding: 3px;display: flex;justify-content:flex-end;';
104-
//X
105-
let X = document.createElement('i');
106-
X.setAttribute('class','fa fa-close');
107-
X.setAttribute('style','cursor: pointer');
108-
109-
X.addEventListener('click', function () {
110-
document.body.removeChild(modal);
111-
});
112-
113-
let modal_body = document.createElement('div');
114-
modal_body.className = "modal-body";
115-
modal_body.style = 'background-color:#f4f4f4;padding:0;overflow-y:auto;height:'+window.innerHeight*0.8 + 'px';
116-
117-
this._modalBodyNode = modal_body;
118-
this._loading();
119-
//create modal
120-
modal_header.append(X);
121-
modal_content.append(modal_header);
122-
modal_content.append(modal_body);
123-
mod_dialog.append(modal_content);
124-
modal.appendChild(mod_dialog);
125-
document.body.append(modal);
126-
};
12748
}
12849
};
12950

@@ -358,56 +279,131 @@ function componentJsonTable(name,columns,data) {
358279
dom.getElementsByClassName('JsonTableInsert')[0].appendChild(i);
359280
}
360281

361-
let componentForm = {
362-
url: '',
363-
apply:function(name,url){
364-
this.url = url;
365-
_componentCommonBlock._componentFormConstruct(this);
366-
_componentCommonBlock._nodesBindEvent(document.getElementsByClassName(name),'click',this.make);
367-
},
368-
make:function () {
369-
componentForm._clear();
370-
componentForm._createModal();
371-
componentForm._createBox(componentForm.url);
372-
},
373-
_clear:function(){
374-
componentForm._modalBodyNode = null;
375-
componentForm._boxNode = null;
376-
componentForm._boxBodyNode = null;
377-
componentForm._tableNode = null;
378-
componentForm._loadingNode = null;
379-
},
380-
_modalBodyNode:null,
381-
_boxNode:null,
382-
_boxBodyNode: null,
383-
_tableNode: null,
384-
_loadingNode:null,
385-
_request: function (url) {
386-
this._loading();
387-
_componentCommonBlock._request(url,'GET',{},function (response) {
388-
componentForm._loading(true);
389-
$('.modal-body').append(response);
390-
$('.modal-body button[type="submit"]').click(function (){
391-
componentForm._submitEvent(this,url)
282+
function componentForm(url,method='POST'){
283+
let Form = {
284+
make:function (url) {
285+
this._clear();
286+
this._createModal();
287+
this._createBox(url);
288+
},
289+
_clear:function(){
290+
this._modalBodyNode = null;
291+
this._boxNode = null;
292+
this._boxBodyNode = null;
293+
this._tableNode = null;
294+
this._loadingNode = null;
295+
},
296+
_modalBodyNode:null,
297+
_boxNode:null,
298+
_boxBodyNode: null,
299+
_tableNode: null,
300+
_loadingNode:null,
301+
_request: function (url) {
302+
this._loading();
303+
_componentCommonBlock._request(url,'GET',{},function (response) {
304+
Form._loading(true);
305+
$('.modal-body').append(response);
306+
$('.modal-body button[type="submit"]').click(function (){
307+
Form._submitEvent(this,url)
308+
});
392309
});
393-
});
394-
},
395-
_submitEvent:function (obj,url) {
396-
obj.setAttribute('disabled','disabled');
397-
obj.innerText = '提交中...';
398-
let form = componentForm._modalBodyNode.getElementsByTagName('form')[0];
399-
let data = {};
400-
let formdata = new FormData(form);
401-
formdata.forEach((value, key) => {
402-
if (!data[key]) {
403-
data[key] = formdata.getAll(key).length > 1 ? formdata.getAll(key) : formdata.get(key);
310+
},
311+
_submitEvent:function (obj,url) {
312+
obj.setAttribute('disabled','disabled');
313+
obj.innerText = '提交中...';
314+
let form = Form._modalBodyNode.getElementsByTagName('form')[0];
315+
let data = {};
316+
let formdata = new FormData(form);
317+
formdata.forEach((value, key) => {
318+
if (!data[key]) {
319+
data[key] = formdata.getAll(key).length > 1 ? formdata.getAll(key) : formdata.get(key);
320+
}
321+
});
322+
323+
_componentCommonBlock._request(url,method,data,function (response) {
324+
window.location.reload();
325+
});
326+
},
327+
_createBox: function (url) {
328+
let box = document.createElement("div");
329+
box.className = "box grid-box";
330+
let box_body = document.createElement("div");
331+
box_body.className = "box-body table-responsive no-padding";
332+
333+
box.append(box_body);
334+
this._boxNode = box;
335+
this._boxBodyNode = box_body;
336+
this._request(url);
337+
return;
338+
},
339+
_loading: function (remove = false) {
340+
if (remove && this._loadingNode) {
341+
this._modalBodyNode.removeChild(this._loadingNode);
342+
this._loadingNode = null;
343+
return;
404344
}
405-
});
406-
_componentCommonBlock._request(url,'PUT',data,function (response) {
407-
window.location.reload();
408-
});
409-
}
410-
};
345+
if (this._loadingNode instanceof HTMLElement) {
346+
return;
347+
}
348+
let svg = _componentCommonBlock._loadingSvg;
349+
let loading = document.createElement('div');
350+
loading.style = 'width: 100%;height: 100px;';
351+
loading.innerHTML = svg;
352+
this._loadingNode = loading;
353+
let firstChild = this._modalBodyNode.childNodes[0];
354+
if (firstChild instanceof HTMLElement) {
355+
this._modalBodyNode.insertBefore(loading, firstChild);
356+
return;
357+
}
358+
this._modalBodyNode.append(loading);
359+
},
360+
_createModal: function () {
361+
//modal
362+
let modal = document.createElement("div");
363+
modal.setAttribute('class', 'modal grid-modal in');
364+
modal.setAttribute('tabindex', '-1');
365+
modal.setAttribute('role', 'dialog');
366+
modal.style = 'display: block;';
367+
368+
//modal_dialog
369+
let mod_dialog = document.createElement("div");
370+
mod_dialog.setAttribute('class', 'modal-dialog modal-lg');
371+
mod_dialog.setAttribute('role', 'document');
372+
mod_dialog.style = 'width:' + window.innerWidth * 0.8 + 'px';
373+
//modal_content
374+
let modal_content = document.createElement("div");
375+
modal_content.className = "modal-content";
376+
377+
//header
378+
let modal_header = document.createElement("div");
379+
modal_header.className = 'modal-header';
380+
modal_header.style = 'background-color:#ffffff;padding: 3px;display: flex;justify-content:flex-end;';
381+
//X
382+
let X = document.createElement('i');
383+
X.setAttribute('class', 'fa fa-close');
384+
X.setAttribute('style', 'cursor: pointer');
385+
386+
X.addEventListener('click', function () {
387+
document.body.removeChild(modal);
388+
});
389+
390+
let modal_body = document.createElement('div');
391+
modal_body.className = "modal-body";
392+
modal_body.style = 'background-color:#f4f4f4;padding:0;overflow-y:auto;height:' + window.innerHeight * 0.8 + 'px';
393+
394+
this._modalBodyNode = modal_body;
395+
this._loading();
396+
//create modal
397+
modal_header.append(X);
398+
modal_content.append(modal_header);
399+
modal_content.append(modal_body);
400+
mod_dialog.append(modal_content);
401+
modal.appendChild(mod_dialog);
402+
document.body.append(modal);
403+
}
404+
};
405+
Form.make(url)
406+
}
411407

412408

413409

‎content.blade.php

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,6 @@
66
</div>
77
{!! Admin::script() !!}
88

9-
<script>
10-
function LA() {}
11-
LA.token = "{{ csrf_token() }}";
12-
</script>
9+
1310

1411

0 commit comments

Comments
 (0)