Skip to content

Commit 01f271f

Browse files
author
hikki
committed
v5.1
1 parent 4a556bb commit 01f271f

File tree

4 files changed

+187
-44
lines changed

4 files changed

+187
-44
lines changed

readme.md

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,79 @@
1717
|-参考样例.Test
1818
| |-example 组件样例
1919
| |-CascadeLineController 级联管理器 接口样例
20+
21+
22+
### [demo样例参见](https://codepen.io/ydtg1993-the-bashful/pen/rNdWade)
2023

2124
### 安装
2225
```shell script
2326
composer require dlp/component-js
27+
```
28+
### 发布
29+
```shell script
2430
php artisan vendor:publish --provider="DLP\DLPServiceProvider" --force
2531
```
2632

33+
### 使用
34+
<table>
35+
<tr>
36+
<th style="text-align:left;">名称</td>
37+
<th style="text-align:left;">数据</td>
38+
<th style="text-align:left;">描述</td>
39+
<th style="text-align:left;">调用</td>
40+
</tr>
41+
<tr>
42+
<td style="text-align:left;">多选择器</td>
43+
<td style="text-align:left;">一维数组<br/>[id=>val,id2=>val2...]</td>
44+
<td style="text-align:left;">多选择器<br/>多选择数量可设限制数<br/>模式切换:经典 下拉列表</td>
45+
<td style="text-align:left;"><a target="_blank" href='https://github.com/laravel-admin-extensions/component-js/blob/main/test/example.php#L129'>$form->Dot</a><br/><br/><b>直接调用</b>:<br/><a target="_blank" href='https://github.com/laravel-admin-extensions/component-js/blob/main/src/Widget/Dot.php#L36'>Dot::panel</a></td>
46+
</tr>
47+
<tr>
48+
<td style="text-align:left;">级联多选择器</td>
49+
<td style="text-align:left;">链表多维数组 <a target="_blank" href='https://github.com/laravel-admin-extensions/component-js/blob/main/test/example.php#L248'>参考结构</a>
50+
<br/>
51+
<a target="_blank" href='https://github.com/laravel-admin-extensions/component-js/blob/main/test/example.php#L146'>数据辅助组装</a><br/>
52+
</td>
53+
<td style="text-align:left;">支持右键全选,取消<br/>多选择数量可设限制<br/>适用于无限分类,地区选择</td>
54+
<td style="text-align:left;"><a target="_blank" href='https://github.com/laravel-admin-extensions/component-js/blob/main/test/example.php#L144'>$form->CascadeDot</a><br/><br/><b>直接调用</b>:<br/><a target="_blank" href='https://github.com/laravel-admin-extensions/component-js/blob/main/src/Widget/CascadeDot.php#L40'>CascadeDot::panel</a></td>
55+
</tr>
56+
<tr>
57+
<td style="text-align:left;">级联管理器</td>
58+
<td style="text-align:left;">链表多维数组 <a target="_blank" href='https://github.com/laravel-admin-extensions/component-js/blob/main/test/example.php#L248'>参考结构</a>
59+
<br/>
60+
<a target="_blank" href='https://github.com/laravel-admin-extensions/component-js/blob/main/test/example.php#L192'>数据辅助组装</a><br/>
61+
</td>
62+
<td style="text-align:left;">右键新增,修改,删除 操作节点<br/><a target="_blank" href='https://github.com/laravel-admin-extensions/component-js/blob/main/test/CascadeLineController.php#L13'>需要实现的接口抽象类CascadeLineTrait</a> <br/><br/>example参考<a target="_blank" href='https://github.com/laravel-admin-extensions/component-js/blob/main/test/CascadeLineController.php#L8'>test\CascadeLineController</a></td>
63+
<td style="text-align:left;"><a target="_blank" href='https://github.com/laravel-admin-extensions/component-js/blob/main/test/example.php#L190'>$form->CascadeLine</a><br/><br/><b>直接调用</b>:<br/><a target="_blank" href='https://github.com/laravel-admin-extensions/component-js/blob/main/src/Widget/CascadeLine.php#L40'>CascadeLine::panel</a></td>
64+
</tr>
65+
<tr>
66+
<td style="text-align:left;">列表控件</td>
67+
<td style="text-align:left;">二维数组<br/>[[col=>val,col2=>val2,...],...]</td>
68+
<td style="text-align:left;">支持拖拽排序 类似JSON组件</td>
69+
<td style="text-align:left;"><a target="_blank" href='https://github.com/laravel-admin-extensions/component-js/blob/main/test/example.php#L162'>$form->Linear</a><br/><br/><b>直接调用</b>:<br/><a target="_blank" href='https://github.com/laravel-admin-extensions/component-js/blob/main/src/Widget/Linear.php#L48'>Linear::panel</a></td>
70+
</tr>
71+
<tr>
72+
<td style="text-align:left;">弹出层组件</td>
73+
<td style="text-align:left;"></td>
74+
<td style="text-align:left;">异步弹窗:表单页 自定义页</td>
75+
<td style="text-align:left;">
76+
<ul>
77+
例.新增表单
78+
<li><a target="_blank" href='https://github.com/laravel-admin-extensions/component-js/blob/main/test/example.php#L53'>grid头创建新增按钮</a></li>
79+
<li><a target="_blank" href='https://github.com/laravel-admin-extensions/component-js/blob/main/test/example.php#L78'>create渲染</a></li>
80+
<li><a target="_blank" href='https://github.com/laravel-admin-extensions/component-js/blob/main/test/example.php#L82'>数据处理store</a></li>
81+
</ul>
82+
<ul>
83+
例.修改表单
84+
<li><a target="_blank" href='https://github.com/laravel-admin-extensions/component-js/blob/main/test/example.php#L68'>grid行创建修改按钮</a></li>
85+
<li><a target="_blank" href='https://github.com/laravel-admin-extensions/component-js/blob/main/test/example.php#L101'>edit渲染</a></li>
86+
<li><a target="_blank" href='https://github.com/laravel-admin-extensions/component-js/blob/main/test/example.php#L105'>数据处理update</a></li>
87+
</ul>
88+
<ul>
89+
例.自定义页
90+
<li><a target="_blank" href='https://github.com/laravel-admin-extensions/component-js/blob/main/test/example.php#L69'>grid行创建按钮</a></li>
91+
<li><a target="_blank" href='https://github.com/laravel-admin-extensions/component-js/blob/main/test/example.php#L210'>自定义页内容</a></li>
92+
</ul>
93+
</tr>
94+
</table>
95+

resources/assets/component.css

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -177,7 +177,7 @@
177177
flex-wrap: wrap;
178178
padding: 0;
179179
border-radius: 3px;
180-
background: #ffffff;
180+
background: #ededed;
181181
width: 100%;
182182
}
183183
.dlp-dot-menu>.menu-list .dot-search{height: 24px}
@@ -197,8 +197,8 @@
197197
justify-content: center;
198198
align-items: center;
199199
}
200-
.dlp-dot-menu>.menu-list .option:hover,.dlp-dot-menu>.menu-list .option-active{background: #ededed}
201-
.dlp-dot-menu .search-box{height: 26px;padding: 2px}
200+
.dlp-dot-menu>.menu-list .option:hover,.dlp-dot-menu>.menu-list .option-active{background: #dbdbdb}
201+
.dlp-dot-menu .search-box{width: 100%;height: 26px;padding: 2px}
202202
.dlp-dot-menu .search-box>input{
203203
border: 1px solid #bdbdbd;
204204
}
@@ -352,7 +352,7 @@
352352
-webkit-overflow-scrolling: touch;
353353
outline: 0;
354354
}
355-
#dlp-plane .plane-header,.dot-cascade-panel>.plane-header{
355+
.plane-header,.dot-cascade-panel>.plane-header{
356356
background-color: rgb(44 44 44);
357357
padding: 3px;
358358
display: flex;
@@ -372,14 +372,13 @@
372372
display: inline-block;
373373
vertical-align: bottom;
374374
}
375-
#dlp-plane .plane-body,.dot-cascade-panel>.plane-body{
375+
.plane-body,.dot-cascade-panel>.plane-body{
376376
background-color: #ffffff;
377377
padding: 0;
378378
overflow-y: auto;
379379
border-radius: 0 0 3px 3px;
380380
box-shadow: 0 .4rem 1.2rem rgba(0,0,0,.4)!important;
381381
position: relative!important;
382-
min-height: 70px;
383382
}
384383
.dot-cascade-panel>.plane-body{
385384
height: calc(100% - 23px);

resources/assets/component.js

Lines changed: 111 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,10 @@ window._component = {
1010
<path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/>
1111
<path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"/>
1212
</svg>`,
13-
close: `<svg style="vertical-align: middle;" width="14" height="14" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="white" stroke-width="2.5" d="M16,16 L4,4"></path><path fill="none" stroke="white" stroke-width="2.5" d="M16,4 L4,16"></path></svg>`,
13+
close: `<svg style="vertical-align: middle;" width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="white" stroke-width="2.5" d="M16,16 L4,4"></path><path fill="none" stroke="white" stroke-width="2.5" d="M16,4 L4,16"></path></svg>`,
14+
aspect: `<svg xmlns="http://www.w3.org/2000/svg" style="vertical-align: middle;" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
15+
<path fill="#ffffff" d="M0 12.5v-9A1.5 1.5 0 0 1 1.5 2h13A1.5 1.5 0 0 1 16 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 12.5zM2.5 4a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 1 0V5h2.5a.5.5 0 0 0 0-1h-3zm11 8a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-1 0V11h-2.5a.5.5 0 0 0 0 1h3z"/>
16+
</svg>`,
1417
check: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
1518
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
1619
</svg>`,
@@ -143,6 +146,51 @@ window._component = {
143146
if (typeof callback === 'function') callback();
144147
}, time * 1000);
145148
},
149+
dialog:function(info,width,height){
150+
let gauze = document.createElement('div');
151+
gauze.className = 'dlp-plane-gauze';
152+
let box = document.createElement('div');
153+
if (width) {
154+
box.style.width = width;
155+
}else {
156+
box.style.width = '450px';
157+
}
158+
let top;
159+
if(height){
160+
top = (window.innerHeight - height - 24) / 2;
161+
}else {
162+
top = (window.innerHeight - 94) / 2;
163+
}
164+
box.style.margin = `${top}px auto`;
165+
let header = document.createElement('div');
166+
header.className = 'dlp plane-header';
167+
/*X*/
168+
let X = document.createElement('i');
169+
X.insertAdjacentHTML('afterbegin', _component.close);
170+
X.addEventListener('click', () => {
171+
if (this.DOM instanceof HTMLElement) {
172+
this.DOM.remove();
173+
}
174+
if (document.getElementById('kvFileinputModal') instanceof HTMLElement) {
175+
document.getElementById('kvFileinputModal').remove();
176+
}
177+
}, false);
178+
header.append(X);
179+
let body = document.createElement('div');
180+
body.className = 'plane-body';
181+
if(height){
182+
body.style.height = height;
183+
}else {
184+
body.style.height = '70px';
185+
}
186+
body.insertAdjacentHTML("afterbegin",`<p>哈哈哈哈哈哈哈哈哈</p>`);
187+
188+
box.append(header);
189+
box.append(body);
190+
gauze.append(box);
191+
this.DOM = gauze;
192+
document.body.append(gauze);
193+
},
146194
contextmenu: function (event, list, options = {}) {
147195
options = Object.assign({
148196
W: '70px'
@@ -251,7 +299,7 @@ window.ComponentDot = class {
251299
this.DOM.addEventListener("contextmenu", (e) => {
252300
e.preventDefault();
253301
});
254-
this.menu = Object.assign({mode: false, placeholder: '未选择', height: '150px',toward:true}, menu);
302+
this.menu = Object.assign({mode: false, placeholder: '未选择', height: '150px'}, menu);
255303
selected = selected.filter(d=>{
256304
if(select[d] === undefined)return false;
257305
return true;
@@ -377,15 +425,6 @@ window.ComponentDot = class {
377425
});
378426

379427
this.DOM.append(menu);
380-
if(this.menu.toward === false){
381-
menu_list.style.display = 'flex';
382-
menu_list.style.top = `-${menu_list.clientHeight}px`;
383-
menu_list.style.height = `${menu_list.clientHeight}px`;
384-
menu_list.style.flexDirection = 'column-reverse';
385-
menu_list.style.display = 'none';
386-
}else {
387-
menu_list.style.flexDirection = 'column';
388-
}
389428
this.DOM.insertAdjacentHTML('beforeend', `<input name="${this.name}[select]" value='${JSON.stringify(selected)}' type="hidden"><input name="${this.name}[insert]" value="[]" type="hidden"><input name="${this.name}[delete]" value="[]" type="hidden">`);
390429
this.SELECTED_DOM = document.querySelector(`#${this.name} .dlp-dot-menu-select`).firstElementChild;
391430
this.CONTENT_DOM = document.querySelector(`#${this.name} .list`);
@@ -526,7 +565,10 @@ window.ComponentCascadeDot = class {
526565
console.error('CascadeDot param selected and select must be array!');
527566
return;
528567
}
529-
568+
selected = selected.filter(d=>{
569+
if(select[d] === undefined)return false;
570+
return true;
571+
});
530572
this.name = name;
531573
this.limit = limit;
532574
this.DOM = document.getElementById(name);
@@ -820,40 +862,42 @@ window.ComponentCascadeDot = class {
820862
this.CONTENT_DOM.parentNode.append(this.SELECT_COVER_DOM);
821863
}
822864
this.dimensional_data.forEach((data, stack) => {
823-
data.forEach((d, k) => {
824-
if (d.val.indexOf(search.value) === -1 && search.value.indexOf(d.val) === -1) return;
825-
if (Array.isArray(this.COVER_STACK_HASH_DOM[stack]) && this.COVER_STACK_HASH_DOM[stack].indexOf(d.key) !== -1) return;
826-
this.searchPushTag(stack,d,k);
827-
});
865+
this.searchPushTag(search, data, stack);
828866
});
829867
}
830868

831869
searchCoverClick(stack, data, dom) {
832870
if (data.nodes !== null) {
833871
let nextStack = stack + 1;
834-
if(Array.isArray(this.dimensional_data[nextStack])) {
835-
this.SELECT_COVER_DOM.childNodes[nextStack].innerHTML = '';
836-
this.dimensional_data[nextStack].forEach((d, k) => {
837-
if (data.nodes.includes(d.key)) this.searchPushTag(nextStack, d, k);
838-
});
839-
}
872+
Array.isArray(this.dimensional_data[nextStack]) &&
873+
this.searchPushTag(data.nodes, this.dimensional_data[nextStack], nextStack);
840874
return;
841875
}
842876
(dom instanceof HTMLElement) && dom.click();
843877
}
844878

845-
searchPushTag(stack,d,k) {
846-
let div = document.createElement('div');
847-
div.className = 'dlp dlp-text dlp-label';
848-
div.insertAdjacentHTML('beforeend', `<i class="left"></i><span>${d.val}</span><i class="right"></i>`);
849-
if (d.nodes !== null)div.querySelector('i.left').insertAdjacentHTML('afterbegin', _component.caret_right);
850-
div.addEventListener('click', () => this.searchCoverClick(stack, d, this.STACKS[stack].childNodes[k]));
851-
this.SELECT_COVER_DOM.childNodes[stack].prepend(div);
852-
if (!Array.isArray(this.COVER_STACK_HASH_DOM[stack])) {
853-
this.COVER_STACK_HASH_DOM[stack] = [d.key];
854-
return;
855-
}
856-
this.COVER_STACK_HASH_DOM[stack].push(d.key);
879+
searchPushTag(search, data, stack) {
880+
data.forEach((d, k) => {
881+
if (Array.isArray(search)) {
882+
if (search.indexOf(d.key) === -1) return;
883+
} else {
884+
if (d.val.indexOf(search.value) === -1 && search.value.indexOf(d.val) === -1) return;
885+
}
886+
if (Array.isArray(this.COVER_STACK_HASH_DOM[stack]) && this.COVER_STACK_HASH_DOM[stack].indexOf(d.key) !== -1) return;
887+
let div = document.createElement('div');
888+
div.className = 'dlp dlp-text dlp-label';
889+
div.insertAdjacentHTML('afterbegin', '<i class="left"></i>');
890+
div.textContent = d.val;
891+
div.insertAdjacentHTML('beforeend', '<i class="right"></i>');
892+
if (d.nodes !== null) div.querySelector('i.left').insertAdjacentHTML('afterbegin', _component.caret_right);
893+
div.addEventListener('click', () => this.searchCoverClick(stack, d, this.STACKS[stack].childNodes[k]));
894+
this.SELECT_COVER_DOM.childNodes[stack].prepend(div);
895+
if (!Array.isArray(this.COVER_STACK_HASH_DOM[stack])) {
896+
this.COVER_STACK_HASH_DOM[stack] = [d.key];
897+
return;
898+
}
899+
this.COVER_STACK_HASH_DOM[stack].push(d.key);
900+
});
857901
}
858902

859903
checkAll(stack, nodes, check) {
@@ -1320,6 +1364,9 @@ window.ComponentLine = class {
13201364
};
13211365

13221366
window.ComponentPlane = class {
1367+
WIDTH;
1368+
HEIGHT;
1369+
FULLSCREEN;
13231370
constructor(url, xhr = {}, options = {}) {
13241371
if(document.querySelector('#dlp-plane') instanceof HTMLElement)return;
13251372
this.URL = url;
@@ -1336,6 +1383,7 @@ window.ComponentPlane = class {
13361383
top: '30px',
13371384
left: 'auto'
13381385
}, options);
1386+
this.FULLSCREEN = false;
13391387
this.makeModal();
13401388
this.makeContent();
13411389
}
@@ -1353,13 +1401,40 @@ window.ComponentPlane = class {
13531401
if(height>= (window.innerHeight - 25)) height = window.innerHeight - 25;
13541402
height += 'px';
13551403
}
1404+
this.WIDTH = width;
1405+
this.HEIGHT = height;
13561406
let margin = this.OPTIONS.top + ' ' + this.OPTIONS.left;
13571407
let html = `<div id="dlp-plane" class="dlp-plane-gauze"><div style="width: ${width};margin: ${margin}"><div class="dlp plane-header"></div><div class="plane-body dlp-scroll" style="height:${height};"></div></div></div>`;
13581408
document.body.insertAdjacentHTML('beforeEnd', html);
13591409
this.DOM = document.getElementById('dlp-plane');
1410+
/*F*/
1411+
let F = document.createElement('i');
1412+
F.style.marginRight = '10px';
1413+
F.insertAdjacentHTML('afterbegin', _component.aspect);
1414+
F.addEventListener('click', () => {
1415+
if (this.FULLSCREEN === false){
1416+
this.FULLSCREEN = true;
1417+
this.DOM.firstChild.style.width = '100%';
1418+
this.DOM.firstChild.style.margin = '0';
1419+
this.DOM.querySelector('.plane-body').style.height = (window.innerHeight - 25)+'px';
1420+
}else {
1421+
this.FULLSCREEN = false;
1422+
this.DOM.firstChild.style.width = this.WIDTH;
1423+
this.DOM.firstChild.style.marginTop = this.OPTIONS.top;
1424+
if(this.OPTIONS.left === 'auto'){
1425+
this.DOM.firstChild.style.margin = `${this.OPTIONS.top} auto`;
1426+
}else {
1427+
this.DOM.firstChild.style.marginTop = this.OPTIONS.top;
1428+
this.DOM.firstChild.style.marginLeft = this.OPTIONS.left;
1429+
}
1430+
this.DOM.querySelector('.plane-body').style.height = this.HEIGHT;
1431+
}
1432+
}, false);
1433+
this.DOM.querySelector('.plane-header').append(F);
13601434
/*X*/
13611435
let X = document.createElement('i');
13621436
X.insertAdjacentHTML('afterbegin', _component.close);
1437+
X.style.marginRight = '5px';
13631438
X.addEventListener('click', () => {
13641439
if (this.DOM instanceof HTMLElement) {
13651440
this.DOM.remove();
@@ -2525,4 +2600,4 @@ window.ComponentCascadeLine = class {
25252600
this.dimensional_data[stack].splice(d, 1);
25262601
});
25272602
}
2528-
};
2603+
};

src/DLPServiceProvider.php

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@ public function boot(DLP $extension)
2929
}
3030

3131
Admin::booting(function () {
32-
Admin::css('vendor/dlp/component.min.css?v5.0');
33-
Admin::headerJs('vendor/dlp/component.min.js?v5.0');
32+
Admin::css('vendor/dlp/component.min.css?v5.1');
33+
Admin::headerJs('vendor/dlp/component.min.js?v5.1');
3434
Form::extend('Dot', Dot::class);
3535
Form::extend('CascadeDot', CascadeDot::class);
3636
Form::extend('Linear', Linear::class);

0 commit comments

Comments
 (0)