Skip to content

Commit ba13af6

Browse files
author
hikki
committed
beta 点线面
1 parent 4ba9f4a commit ba13af6

File tree

2 files changed

+93
-35
lines changed

2 files changed

+93
-35
lines changed

‎ComponentViewer.php

Lines changed: 66 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44

55
use Encore\Admin\Actions\RowAction;
66
use Encore\Admin\Admin;
7+
use Encore\Admin\Form;
78
use Encore\Admin\Grid;
89
use Encore\Admin\Layout\Content;
910
use Illuminate\Http\Request;
@@ -14,6 +15,63 @@
1415
*/
1516
class ComponentViewer
1617
{
18+
/**
19+
* 点
20+
* @param Form $form
21+
* @param $column
22+
* @param $title
23+
* @param array $select
24+
* @param array $selected
25+
*/
26+
public static function makeComponentDot(Form $form,$column,$title,$select=[],$selected=[])
27+
{
28+
$select =self::safeJson($select);
29+
$selected=self::safeJson($selected);
30+
$form->html(<<<EOF
31+
<div id="{$column}"></div>
32+
<script>
33+
new Promise((resolve, reject) => {
34+
while (true){
35+
if(document.getElementById('{$column}') instanceof HTMLElement){
36+
return resolve();
37+
}
38+
}
39+
}).then(function() {
40+
componentDot("{$column}",JSON.parse('$selected'),JSON.parse('$select'));
41+
});
42+
</script>
43+
EOF
44+
,$title);
45+
}
46+
47+
/**
48+
* @param Form $form
49+
* @param $column
50+
* @param $title
51+
* @param $setting
52+
* @param array $data
53+
*/
54+
public static function makeComponentLine(Form $form,$column,$title,array $setting,array $data=[])
55+
{
56+
$setting = self::safeJson($setting);
57+
$data = self::safeJson($data);
58+
$form->html(<<<EOF
59+
<div id="{$column}"></div>
60+
<script>
61+
new Promise((resolve, reject) => {
62+
while (true){
63+
if(document.getElementById('{$column}') instanceof HTMLElement){
64+
return resolve();
65+
}
66+
}
67+
}).then(function() {
68+
componentLine("{$column}",JSON.parse('$setting'),JSON.parse('$data'));
69+
});
70+
</script>
71+
EOF
72+
,$title);
73+
}
74+
1775
/**
1876
* 创建弹窗新增表单-按钮
1977
* @param Grid $grid
@@ -55,7 +113,7 @@ public static function makeEditFormAction(Grid $grid)
55113
Admin::script(<<<EOF
56114
$('.CEForm').click(function(){
57115
let url = '{$url}' + '/'+this.getAttribute('data-id') + '/edit';
58-
componentPlane(url,'PUT');
116+
componentPlane(url);
59117
});
60118
EOF
61119
);
@@ -85,7 +143,7 @@ public static function _makeEditFormAction(Grid &$grid)
85143
Admin::script(<<<EOF
86144
$('.CEForm').click(function(){
87145
let url = '{$url}' + '/'+this.getAttribute('data-id') + '/edit';
88-
componentPlane(url,'PUT');
146+
componentPlane(url);
89147
});
90148
EOF
91149
);
@@ -111,11 +169,16 @@ public static function makeForm(Content $content)
111169
public static function result($success=true,$message='OK',$data=[])
112170
{
113171
return response()->json([
114-
'code'=>$success?1:0,
172+
'code'=>$success?0:1,
115173
'data'=>$data,
116174
'message'=>$message
117175
],200)
118176
->header('Content-Type','application/json;charset=utf-8')
119177
->header('Access-Control-Allow-Origin', '*');
120178
}
179+
180+
private static function safeJson(array $data)
181+
{
182+
return strip_tags(json_encode($data,JSON_UNESCAPED_UNICODE|JSON_HEX_QUOT|JSON_HEX_TAG|JSON_HEX_AMP|JSON_HEX_APOS));
183+
}
121184
}

‎component.js

Lines changed: 27 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
let _componentCommonBlock = {
1+
2+
let _componentMegaBlock = {
23
_loadingSvg:"<svg version=\"1.1\" style='width: 100%;height:100px' xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n" +
34
" width=\"40px\" height=\"40px\" viewBox=\"0 0 40 40\" enable-background=\"new 0 0 40 40\" xml:space=\"preserve\">\n" +
45
" <path opacity=\"0.2\" fill=\"#000\" d=\"M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946\n" +
@@ -25,16 +26,14 @@ let _componentCommonBlock = {
2526
xhr.open(method, url, true);
2627
xhr.timeout = 30000;
2728
var token= document.querySelector('meta[name="csrf-token"]').getAttribute('content');
28-
xhr.setRequestHeader("Content-type", "application/text;charset=UTF-8");
2929
xhr.setRequestHeader("X-CSRF-TOKEN", token);
3030
if(method == 'GET'){
3131
xhr.responseType = "text";
3232
xhr.send(null);
3333
}else {
34-
xhr.setRequestHeader('Content-type', 'application/json;charset=UTF-8');
3534
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
3635
xhr.responseType = "json";
37-
xhr.send(JSON.stringify(data));
36+
xhr.send(data);
3837
}
3938
xhr.onreadystatechange = function () {
4039
if (xhr.readyState == xhr.DONE && xhr.status == 200) {
@@ -49,7 +48,7 @@ let _componentCommonBlock = {
4948
};
5049

5150
function _componentAlert(message,time=1,callback=function () {}) {
52-
var div = document.createElement('div');
51+
let div = document.createElement('div');
5352
div.innerHTML = message;
5453
let w = window.innerWidth/2 - 140;
5554
let h = window.innerHeight/2 - 145;
@@ -66,33 +65,33 @@ function _componentAlert(message,time=1,callback=function () {}) {
6665

6766
function componentDot(name,selected,options) {
6867
function tagSelect() {
69-
var cdom = this.cloneNode(true);
68+
let cdom = this.cloneNode(true);
7069
cdom.addEventListener('click',tagCancel);
7170
document.getElementById(name+'-select').appendChild(cdom);
7271
this.remove();
7372
addVal();
7473
}
7574
function tagCancel() {
76-
var cdom = this.cloneNode(true);
75+
let cdom = this.cloneNode(true);
7776
cdom.addEventListener('click',tagSelect);
7877
document.getElementById(name+'-content').appendChild(cdom);
7978
this.remove();
8079
addVal();
8180
}
8281
function addVal() {
83-
var val = '';
82+
let val = '';
8483
document.getElementById(name+'-select').childNodes.forEach(function (n) {
8584
val += parseInt(n.getAttribute('data-id'))+",";
8685
});
8786
val = val.replace(/,$/g, '');
8887
dataInput.value = val
8988
}
90-
var DOM = document.getElementById(name);
91-
var selected_dom = '';
92-
var options_dom = '';
93-
var selected_tag = '';
89+
let DOM = document.getElementById(name);
90+
let selected_dom = '';
91+
let options_dom = '';
92+
let selected_tag = '';
9493

95-
for(var i in options){
94+
for(let i in options){
9695
if(selected.indexOf(parseInt(i)) > -1){
9796
selected_dom+= "<div class='btn btn-success btn-sm v-tag' data-id='"+i+"'>"+options[i].name+"</div>";
9897
selected_tag+= i + ',';
@@ -101,7 +100,7 @@ function componentDot(name,selected,options) {
101100
options_dom+= "<div class='btn btn-primary btn-sm v-tag' data-id='"+i+"'>"+options[i].name+"</div>";
102101
}
103102

104-
var html = '<style>.v-tag{margin-right: 4px;margin-bottom: 4px}</style>'+
103+
let html = '<style>.v-tag{margin-right: 4px;margin-bottom: 4px}</style>'+
105104
'<div style="width: 100%;display: grid; grid-template-rows: 42px 140px;border: 1px solid #ccc;border-radius: 5px">' +
106105
'<div style="display:flex;background: #e1ffa8bf;"><div style="width:120px;background: #e1ffa8bf;">' +
107106
'<input id="'+name+'-search" type="text" class="form-control" placeholder="搜索名称"></div>' +
@@ -111,22 +110,23 @@ function componentDot(name,selected,options) {
111110
options_dom +
112111
'</div>' +
113112
'</div>';
114-
DOM.innerHTML = html;
113+
DOM.insertAdjacentHTML('afterbegin',html);
114+
115115
/*hidden data container*/
116-
var dataInput = document.createElement('input');
116+
let dataInput = document.createElement('input');
117117
dataInput.setAttribute('name',name);
118118
dataInput.setAttribute('type','hidden');
119119
dataInput.value = '';
120120
DOM.appendChild(dataInput);
121121

122-
_componentCommonBlock._nodesBindEvent(document.getElementById(name+'-select').getElementsByClassName("v-tag"),'click',tagCancel);
123-
_componentCommonBlock._nodesBindEvent(document.getElementById(name+'-content').getElementsByClassName("v-tag"),'click',tagSelect);
122+
_componentMegaBlock._nodesBindEvent(document.getElementById(name+'-select').getElementsByClassName("v-tag"),'click',tagCancel);
123+
_componentMegaBlock._nodesBindEvent(document.getElementById(name+'-content').getElementsByClassName("v-tag"),'click',tagSelect);
124124
document.getElementById(name+'-search').addEventListener('input',function () {
125-
var search = this.value;
125+
let search = this.value;
126126
if(search == ''){
127127
return;
128128
}
129-
var contentDom = document.getElementById(name+'-content');
129+
let contentDom = document.getElementById(name+'-content');
130130
for (let element of contentDom.getElementsByClassName("v-tag")){
131131
if(element.innerText.indexOf(search) != -1){
132132
contentDom.insertBefore(element,contentDom.firstChild);
@@ -205,9 +205,9 @@ function componentLine(name,columns,data) {
205205
head += '<th style="width: 30px"></th></tr>';
206206
foot += '<th style="width: 30px" class="JsonTableInsert"></th></tr>';
207207

208-
dom.innerHTML = '<style>#'+name+' tbody::-webkit-scrollbar { width: 0 !important }</style>' +
208+
dom.insertAdjacentHTML('afterbegin','<style>#'+name+' tbody::-webkit-scrollbar { width: 0 !important }</style>' +
209209
'<table class="table table-striped table-bordered table-hover table-responsive">'+
210-
'<thead>'+head+'</thead></table>';
210+
'<thead>'+head+'</thead></table>');
211211
/*hidden data container*/
212212
var dataInput = document.createElement('input');
213213
dataInput.setAttribute('name',name);
@@ -316,7 +316,7 @@ function componentPlane(url,method='POST'){
316316
_loadingNode:null,
317317
_request: function (url) {
318318
this._loading();
319-
_componentCommonBlock._request(url,'GET',{},function (response) {
319+
_componentMegaBlock._request(url,'GET',{},function (response) {
320320
Form._loading(true);
321321
$('.modal-body').append(response);
322322
$('.modal-body button[type="submit"]').click(function (){
@@ -328,16 +328,10 @@ function componentPlane(url,method='POST'){
328328
obj.setAttribute('disabled','disabled');
329329
obj.innerText = '提交中...';
330330
let form = Form._modalBodyNode.getElementsByTagName('form')[0];
331-
let data = {};
332331
let formdata = new FormData(form);
333-
formdata.forEach((value, key) => {
334-
if (!data[key]) {
335-
data[key] = formdata.getAll(key).length > 1 ? formdata.getAll(key) : formdata.get(key);
336-
}
337-
});
338332

339-
_componentCommonBlock._request(url,method,data,function (response) {
340-
if(response.code == 1) {
333+
_componentMegaBlock._request(url,method,formdata,function (response) {
334+
if(response.code == 0) {
341335
window.location.reload();
342336
}else{
343337
_componentAlert(response.message,3,function () {
@@ -368,7 +362,7 @@ function componentPlane(url,method='POST'){
368362
if (this._loadingNode instanceof HTMLElement) {
369363
return;
370364
}
371-
let svg = _componentCommonBlock._loadingSvg;
365+
let svg = _componentMegaBlock._loadingSvg;
372366
let loading = document.createElement('div');
373367
loading.style = 'width: 100%;height: 100px;';
374368
loading.innerHTML = svg;
@@ -430,3 +424,4 @@ function componentPlane(url,method='POST'){
430424

431425

432426

427+

0 commit comments

Comments
 (0)