Skip to content

Commit df9ec2f

Browse files
author
hikki
committed
1.4
1 parent 43b630b commit df9ec2f

File tree

2 files changed

+73
-57
lines changed

2 files changed

+73
-57
lines changed

‎resources/assets/component.js

Lines changed: 33 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -55,16 +55,16 @@ class ComponentDot {
5555
insert_data;
5656
delete_data;
5757

58-
constructor(name, selected, options) {
58+
constructor(name, selected, select) {
5959
this.DOM = document.getElementById(name);
6060
let selected_dom = '';
61-
let options_dom = '';
62-
for (let i in options) {
61+
let select_dom = '';
62+
for (let i in select) {
6363
if (selected[i]) {
64-
selected_dom += `<div class='btn btn-success btn-sm v-tag' style='margin-right: 4px;margin-bottom: 4px' data-id='${i}'>${options[i]}</div>`;
64+
selected_dom += `<div class='btn btn-success btn-sm v-tag' style='margin-right: 4px;margin-bottom: 4px' data-id='${i}'>${select[i]}</div>`;
6565
continue;
6666
}
67-
options_dom += `<div class='btn btn-primary btn-sm v-tag' style='margin-right: 4px;margin-bottom: 4px' data-id='${i}'>${options[i]}</div>`;
67+
select_dom += `<div class='btn btn-primary btn-sm v-tag' style='margin-right: 4px;margin-bottom: 4px' data-id='${i}'>${select[i]}</div>`;
6868
}
6969

7070
this.selected_data = Object.keys(selected);
@@ -77,7 +77,7 @@ class ComponentDot {
7777
<input id="${name}-search" type="text" class="form-control" placeholder="搜索名称"></div>
7878
<div id="${name}-select" style="width:100%;overflow: auto;border-bottom: 1px solid #ccc;padding: 3px;border-radius: 0 0 0 14px;background: #ffffffbf;">${selected_dom}</div>
7979
</div><div id="${name}-content" style="overflow-y: auto;padding: 3px;background: #e1ffa8bf;">
80-
${options_dom}</div></div>
80+
${select_dom}</div></div>
8181
<input name="${name}[data]" value='${select_str}' type="hidden">
8282
<input name="${name}[insert]" value="[]" type="hidden">
8383
<input name="${name}[delete]" value="[]" type="hidden">`;
@@ -131,9 +131,7 @@ class ComponentDot {
131131
this.select_data.push(id);
132132
this.dataDOM.value = JSON.stringify(this.select_data);
133133
}
134-
console.log(this.selected_data.indexOf(id))
135134
if (this.selected_data.indexOf(id) == -1 && this.insert_data.indexOf(id) == -1) {
136-
console.log(9)
137135
this.insert_data.push(id);
138136
this.insertDOM.value = JSON.stringify(this.insert_data);
139137
}
@@ -171,19 +169,19 @@ class ComponentLine {
171169
NAME;
172170
COLUMNS;
173171
DATA;
174-
SETTINGS;
172+
OPTIONS;
175173
DATA_INPUT;
176174
SORTABLE;
177175

178-
constructor(name, columns, data, settings) {
176+
constructor(name, columns, data, options) {
179177
this.DOM = document.getElementById(name);
180178
this.NAME = name;
181179
this.COLUMNS = columns;
182180
this.DATA = data;
183-
this.SETTINGS = Object.assign({
181+
this.OPTIONS = Object.assign({
184182
sortable: true,
185183
delete: true,
186-
}, settings || {});
184+
}, options || {});
187185
/*head foot*/
188186
let foot = this.makeHead();
189187
/*hidden data container*/
@@ -263,12 +261,12 @@ class ComponentLine {
263261
let td = document.createElement('td');
264262
object.operateButton(td);
265263
tr.appendChild(td);
266-
tbody.setAttribute('style', 'display:block;height:100%;overflow-y:scroll');
267264
tbody.appendChild(tr);
268265
records.push(record);
269266
object.DATA = records;
270267
object.DATA_INPUT.value = JSON.stringify(records);
271268
});
269+
tbody.setAttribute('style', 'display:block;height:100%;overflow-y:scroll');
272270
tbody.setAttribute('sortable-list','sortable-list');
273271
this.TBODY_DOM = tbody;
274272
this.TABLE_DOM.appendChild(tbody);
@@ -311,7 +309,11 @@ class ComponentLine {
311309
object.DATA.push(insert);
312310
object.DATA_INPUT.value = JSON.stringify(object.DATA);
313311
object.TBODY_DOM.scrollTop = object.TBODY_DOM.scrollHeight;
314-
object.SORTABLE.resetContainer();
312+
if(object.DATA.length==2){
313+
object.SORTABLE = new ComponentSortable(object.TBODY_DOM);
314+
}else if(object.DATA.length>2) {
315+
object.SORTABLE.action();
316+
}
315317
},false);
316318
this.DOM.getElementsByClassName('JsonTableInsert')[0].appendChild(i);
317319
}
@@ -349,15 +351,15 @@ class ComponentLine {
349351

350352
operateButton(td) {
351353
var object = this;
352-
if(this.SETTINGS.sortable) {
354+
if(this.OPTIONS.sortable) {
353355
let M = document.createElement('i');
354356
M.setAttribute('class', 'fa fa-arrows');
355357
M.setAttribute('style', 'cursor: pointer;margin-right:5px;');
356358
M.setAttribute('sortable-handle', 'sortable-handle');
357359
td.appendChild(M);
358360
}
359361

360-
if(this.SETTINGS.delete) {
362+
if(this.OPTIONS.delete) {
361363
let D = document.createElement('i');
362364
D.setAttribute('class', 'fa fa-trash');
363365
D.setAttribute('style', 'cursor: pointer');
@@ -374,6 +376,7 @@ class ComponentLine {
374376
tbody.childNodes[node].setAttribute('data-key', node);
375377
}
376378
}
379+
object.SORTABLE.action();
377380
}, false);
378381
td.appendChild(D);
379382
}
@@ -383,7 +386,7 @@ class ComponentLine {
383386
sortAble(){
384387
var object = this;
385388
setTimeout(function () {
386-
object.SORTABLE = new Sortable(object.TBODY_DOM);
389+
object.SORTABLE = new ComponentSortable(object.TBODY_DOM);
387390
});
388391
}
389392
}
@@ -395,7 +398,7 @@ class ComponentPlane {
395398
URL;
396399
XHR_URL;
397400
METHOD;
398-
SETTINGS;
401+
OPTIONS;
399402
CALLBACK;
400403
_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"
401404
width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
@@ -406,12 +409,15 @@ class ComponentPlane {
406409
C22.32,8.481,24.301,9.057,26.013,10.047z"><animateTransform attributeType="xml"attributeName="transform"
407410
type="rotate"from="0 20 20"to="360 20 20"dur="0.5s"repeatCount="indefinite"/></path></svg>`;
408411

409-
constructor(url, xhr_url = '', method = 'POST', callback = null,settings = []) {
412+
constructor(url, xhr_url = '', method = 'POST', callback = null,options = {}) {
410413
this.URL = url;
411414
this.XHR_URL = xhr_url;
412415
this.METHOD = method;
413416
this.CALLBACK = callback;
414-
this.SETTINGS = settings;
417+
this.OPTIONS = Object.assign({
418+
W: 0.8,
419+
H: 0.8,
420+
}, options);
415421

416422
this.makeModal();
417423
this.makeContent();
@@ -428,7 +434,7 @@ class ComponentPlane {
428434
let mod_dialog = document.createElement("div");
429435
mod_dialog.setAttribute('class', 'modal-dialog modal-lg');
430436
mod_dialog.setAttribute('role', 'document');
431-
mod_dialog.style = `width:${window.innerWidth*0.8}px`;
437+
mod_dialog.style = `width:${window.innerWidth*this.OPTIONS.W}px`;
432438
/*modal_content*/
433439
let modal_content = document.createElement("div");
434440
modal_content.className = "modal-content";
@@ -448,7 +454,8 @@ class ComponentPlane {
448454
},false);
449455
let modal_body = document.createElement('div');
450456
modal_body.className = "modal-body";
451-
modal_body.style = 'background-color:#f4f4f4;padding:0;overflow-y:auto;max-height:' + window.innerHeight * 0.8 + 'px;min-height:' + window.innerHeight * 0.4 + 'px;';
457+
modal_body.style = 'background-color:#f4f4f4;padding:0;overflow-y:auto;max-height:' +
458+
window.innerHeight * this.OPTIONS.H + 'px;min-height:' + window.innerHeight * this.OPTIONS.H / 2 + 'px;';
452459

453460
this.MODEL_BODY_DOM = modal_body;
454461
/*create modal*/
@@ -516,7 +523,8 @@ class ComponentPlane {
516523
}
517524
}
518525

519-
class Sortable {
526+
/*拖拽排序控件*/
527+
class ComponentSortable {
520528
list_height;
521529
constructor(list, options) {
522530
this.list = (typeof list === 'string')
@@ -533,27 +541,20 @@ class Sortable {
533541
animationEasing: 'ease-out',
534542
}, options || {});
535543

544+
this.resetContainer();
536545
this.dragStart = this.dragStart.bind(this);
537546
this.dragMove = this.dragMove.bind(this);
538547
this.dragEnd = this.dragEnd.bind(this);
539-
if(this.items[this.items.length-1].offsetTop > this.list.offsetHeight){
540-
this.list_height = this.list.scrollHeight;
541-
}else {
542-
this.list_height = this.items[this.items.length-1].offsetTop;
543-
}
544548
this.list.addEventListener('touchstart', this.dragStart, false);
545549
this.list.addEventListener('mousedown', this.dragStart, false);
546550
}
547551

548552
resetContainer(){
549-
this.items = Array.from(this.list.children);
550553
if(this.items[this.items.length-1].offsetTop > this.list.offsetHeight){
551554
this.list_height = this.list.scrollHeight;
552555
}else {
553556
this.list_height = this.items[this.items.length-1].offsetTop;
554557
}
555-
this.list.addEventListener('touchstart', this.dragStart, false);
556-
this.list.addEventListener('mousedown', this.dragStart, false);
557558
}
558559

559560
dragStart(e) {
@@ -574,7 +575,7 @@ class Sortable {
574575
if (!this.handle) return;
575576
this.list.style.position = 'relative';
576577
this.item.classList.add('is-dragging')
577-
578+
if(!this.items[1])return;
578579
this.itemHeight = this.items[1].offsetTop;
579580
this.listHeight = this.list_height;
580581
this.startTouchY = this.getDragY(e);

‎src/DLPViewer.php

Lines changed: 40 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ public static function makeComponentDot(Form $form, string $column, string $titl
5454
* @param string $column 数据字段名
5555
* @param string $title 名称
5656
* @param array $data 数据
57-
* @param array $settings 配置项
57+
* @param array $settings 配置项[setting,...]
5858
* $settings = [
5959
* 'columns'=>[
6060
* 'name' => ['name' => '名称', 'type' => 'input'],
@@ -64,13 +64,18 @@ public static function makeComponentDot(Form $form, string $column, string $titl
6464
* 'strict'=>false, boolean json严格模式消除json敏感字符问题 (选填)
6565
* 'width'=>'100%', string 容器宽度设置 (选填)
6666
* 'height'=>'450px', string 容器高度设置 (选填)
67+
* 'options'=>[
68+
* 'sortable'=>true,
69+
* 'delete'=>true
70+
* ] array 多列操作设置 (选填)
6771
* ]
6872
*/
6973
public static function makeComponentLine(Form $form, string $column, string $title, array $data = [], array $settings = [])
7074
{
7175
$strict = isset($settings['strict']) && $settings['strict'] ? true : false;
7276
$width = isset($settings['width']) ? $settings['width'] : '100%';
7377
$hight = isset($settings['height']) ? $settings['height'] : '450px';
78+
$options = isset($settings['options']) ? json_encode($settings['options']) : '[]';
7479
if (!isset($settings['columns'])) return;
7580
$columns = $settings['columns'];
7681
if ($strict) {
@@ -80,7 +85,7 @@ public static function makeComponentLine(Form $form, string $column, string $tit
8085
}
8186
$columns = json_encode($columns, JSON_UNESCAPED_UNICODE | JSON_HEX_QUOT | JSON_HEX_APOS);
8287
Admin::script(<<<EOF
83-
new ComponentLine("{$column}",JSON.parse('{$columns}'),JSON.parse('{$data}'));
88+
new ComponentLine("{$column}",JSON.parse('{$columns}'),JSON.parse('{$data}'),JSON.parse('{$options}'));
8489
EOF
8590
);
8691
$form->html("<div id='{$column}' style='width:{$width};height:{$hight};'></div>", $title);
@@ -89,24 +94,27 @@ public static function makeComponentLine(Form $form, string $column, string $tit
8994
/**
9095
* 头部-多操作添加
9196
* @param Grid $grid
92-
* @param array $settings [setting,...]
93-
* setting.document_id 自定义节点ID
94-
* setting.title 自定义按钮名
95-
* setting.url 加载页地址
96-
* setting.xhr_url ajax提交地址
97-
* setting.method ajax提交方法
97+
* @param array $settings 配置项[setting,...]
98+
* settings.document_id dom节点id (必须填)
99+
* settings.title 自定义按钮名 (必须填)
100+
* settings.url 加载页地址 url/{id}加参数匹配id (必须填)
101+
* settings.xhr_url ajax提交地址 url/{id}加参数匹配id (选填)
102+
* settings.method ajax提交方法 (选填)
103+
* settings.options 弹窗配置项 (选填)
104+
* options = ['W'=>0.8,'H'=>0.8]
98105
*/
99106
public static function makeHeadPlaneAction(Grid $grid, array $settings = [
100-
['document_id' => '', 'title' => '', 'url' => '', 'xhr_url' => '', 'method' => 'POST']
107+
['document_id' => '', 'title' => '', 'url' => '', 'xhr_url' => '', 'method' => 'POST', 'options' => []]
101108
])
102109
{
103110
$script = '';
104111
foreach ($settings as $setting) {
105112
$xhr_url = isset($setting['xhr_url']) ? $setting['xhr_url'] : $setting['url'];
106113
$method = isset($setting['method']) ? $setting['method'] : 'POST';
114+
$options = isset($setting['options']) ? json_encode($setting['options']) : '[]';
107115
$script .= <<<EOF
108116
$('#{$setting['document_id']}').click(function(){
109-
new ComponentPlane('{$setting['url']}','{$xhr_url}','{$method}');
117+
new ComponentPlane('{$setting['url']}','{$xhr_url}','{$method}',null,JSON.parse('{$options}'));
110118
});
111119
EOF;
112120
Admin::script($script);
@@ -139,27 +147,30 @@ public function render()
139147
* 列-多操作添加
140148
* @param Grid $grid
141149
* @param array $settings [setting,...]
142-
* setting.document_class 自定义类名
143-
* setting.title 自定义按钮名
144-
* setting.url 加载页地址 url/{id}加参数匹配id
145-
* setting.xhr_url ajax提交地址 url/{id}加参数匹配id
146-
* setting.method ajax提交方法
150+
* setting.document_class dom节点classname (必须填)
151+
* setting.title 自定义按钮名 (必须填)
152+
* setting.url 加载页地址 url/{id}加参数匹配id (必须填)
153+
* setting.xhr_url ajax提交地址 url/{id}加参数匹配id (选填)
154+
* setting.method ajax提交方法 (选填)
155+
* setting.options 弹窗配置项 (选填)
156+
* options = ['W'=>0.8,'H'=>0.8]
147157
* @param array $disable ['view','edit','delete']
148158
*/
149159
public static function makeRowPlaneAction(Grid $grid, array $settings = [
150-
['document_class' => '', 'title' => '', 'url' => '', 'xhr_url' => '', 'method' => 'POST']
160+
['document_class' => '', 'title' => '', 'url' => '', 'xhr_url' => '', 'method' => 'POST', 'options' => []]
151161
], array $disable = [])
152162
{
153163
$script = '';
154164
foreach ($settings as $setting) {
155165
$url = $setting['url'];
156166
$method = isset($setting['method']) ? $setting['method'] : 'POST';
157167
$xhr_url = isset($setting['xhr_url']) ? $setting['xhr_url'] : $url;
168+
$options = isset($setting['options']) ? json_encode($setting['options']) : '[]';
158169
$script .= <<<EOF
159170
$('.{$setting['document_class']}').click(function(){
160171
let url = '$url'.replace('{id}',$(this).attr('data-id'));
161172
let xhr_url = '$xhr_url'.replace('{id}',$(this).attr('data-id'));
162-
new ComponentPlane(url,xhr_url,'{$method}');
173+
new ComponentPlane(url,xhr_url,'{$method}',null,JSON.parse('{$options}'));
163174
});
164175
EOF;
165176
}
@@ -193,29 +204,33 @@ public function render()
193204
}
194205

195206
/**
196-
* 列-多操作添加 (旧版图标按钮模式)
207+
* 列-多操作添加 (旧版图标按钮模式)
197208
* @param Grid $grid
198209
* @param array $settings [setting,...]
199-
* setting.document_class 自定义类名
200-
* setting.title 自定义按钮名 (图标css类 fa-edit fa-...)
201-
* setting.url 加载页地址
202-
* setting.xhr_url ajax提交地址
203-
* setting.method ajax提交方法
210+
* setting.document_class dom节点classname (必须填)
211+
* setting.title 自定义按钮名 (必须填)
212+
* setting.url 加载页地址 url/{id}加参数匹配id (必须填)
213+
* setting.xhr_url ajax提交地址 url/{id}加参数匹配id (选填)
214+
* setting.method ajax提交方法 (选填)
215+
* setting.options 弹窗配置项 (选填)
216+
* options = ['W'=>0.8,'H'=>0.8]
204217
* @param array $disable ['view','edit','delete']
205218
*/
206219
public static function _makeRowPlaneAction(Grid $grid, array $settings = [
207-
['document_class' => '', 'title' => '', 'url' => '', 'xhr_url' => '', 'method' => 'POST']
220+
['document_class' => '', 'title' => '', 'url' => '', 'xhr_url' => '', 'method' => 'POST', 'options' => []]
208221
], array $disable = [])
209222
{
210223
$script = '';
211224
foreach ($settings as $setting) {
212225
$url = $setting['url'];
213226
$method = isset($setting['method']) ? $setting['method'] : 'POST';
214227
$xhr_url = isset($setting['xhr_url']) ? $setting['xhr_url'] : $url;
228+
$options = isset($setting['options']) ? json_encode($setting['options']) : '[]';
215229
$script .= <<<EOF
216230
$('.{$setting['document_class']}').click(function(){
217231
let url = '$url'.replace('{id}',$(this).attr('data-id'));
218-
new ComponentPlane(url,'{$xhr_url}','{$method}');
232+
let xhr_url = '$xhr_url'.replace('{id}',$(this).attr('data-id'));
233+
new ComponentPlane(url,xhr_url,'{$method}',null,JSON.parse('{$options}'));
219234
});
220235
EOF;
221236
}

0 commit comments

Comments
 (0)