Skip to content

Commit ca5cd8f

Browse files
author
hikki
committed
1.7
1 parent 96efe49 commit ca5cd8f

File tree

1 file changed

+91
-30
lines changed

1 file changed

+91
-30
lines changed

‎resources/assets/component.js

Lines changed: 91 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -70,49 +70,42 @@ function _componentAlert(message, time = 1, callback = function () {
7070

7171
class ComponentDot {
7272
constructor(name, selected, select) {
73+
this.name = name;
7374
this.DOM = document.getElementById(name);
74-
let selected_dom = '';
75-
let select_dom = '';
76-
for (let i in select) {
77-
if (selected[i]) {
78-
selected_dom += `<div class='dlp dlp-text dlp-label' data-id='${i}' title="${select[i]}">${select[i]}</div>`;
79-
continue;
80-
}
81-
select_dom += `<div class='dlp dlp-text dlp-label' data-id='${i}' title="${select[i]}">${select[i]}</div>`;
82-
}
83-
75+
this.make(selected, select);
8476
this.selected_data = Object.keys(selected);
8577
this.select_data = this.selected_data.map((x) => x);
86-
let select_str = JSON.stringify(this.select_data);
8778
this.insert_data = [];
8879
this.delete_data = [];
89-
let html = `<div class="dlp-dot" ><div class="dot-top"><input type="text" class="dlp dot-search" placeholder="搜索名称"><div id="${name}-select" class="dot-selected dlp-scroll">${selected_dom}</div></div><div class="dot-select dlp-scroll">${select_dom}</div></div>
90-
<input name="${name}[data]" value='${select_str}' type="hidden"><input name="${name}[insert]" value="[]" type="hidden"><input name="${name}[delete]" value="[]" type="hidden">`;
91-
this.DOM.insertAdjacentHTML('afterbegin', html);
92-
this.SELECT_DOM = document.querySelector(`#${name} .dot-selected`);
93-
this.CONTENT_DOM = document.querySelector(`#${name} .dot-select`);
94-
this.dataDOM = document.querySelector(`input[name='${name}[data]']`);
95-
this.insertDOM = document.querySelector(`input[name='${name}[insert]']`);
96-
this.deleteDOM = document.querySelector(`input[name='${name}[delete]']`);
9780

9881
for (let element of this.SELECT_DOM.getElementsByClassName("dlp-label")) {
9982
element.addEventListener('click', this.tagCancel.bind(this, element),false);
10083
}
10184
for (let element of this.CONTENT_DOM.getElementsByClassName("dlp-label")) {
10285
element.addEventListener('click', this.tagSelect.bind(this, element),false);
10386
}
104-
var object = this;
105-
document.querySelector(`#${name} .dot-search`).addEventListener('input', function () {
106-
let search = this.value;
107-
if (search == '') {
108-
return;
109-
}
110-
for (let element of object.CONTENT_DOM.getElementsByClassName("dlp-label")) {
111-
if (element.innerText.indexOf(search) != -1) {
112-
object.CONTENT_DOM.insertBefore(element, object.CONTENT_DOM.firstChild);
113-
}
87+
this.search();
88+
}
89+
90+
make(selected, select){
91+
let selected_dom = '';
92+
let select_dom = '';
93+
for (let i in select) {
94+
if (selected[i]) {
95+
selected_dom += `<div class='dlp dlp-text dlp-label' data-id='${i}' title="${select[i]}">${select[i]}</div>`;
96+
continue;
11497
}
115-
},false);
98+
select_dom += `<div class='dlp dlp-text dlp-label' data-id='${i}' title="${select[i]}">${select[i]}</div>`;
99+
}
100+
101+
let html = `<div class="dlp-dot" ><div class="dot-top"><input type="text" class="dlp dot-search" placeholder="搜索名称"><div id="${this.name}-select" class="dot-selected dlp-scroll">${selected_dom}</div></div><div class="dot-select dlp-scroll">${select_dom}</div></div>
102+
<input name="${this.name}[data]" value='${JSON.stringify(this.select_data)}' type="hidden"><input name="${this.name}[insert]" value="[]" type="hidden"><input name="${this.name}[delete]" value="[]" type="hidden">`;
103+
this.DOM.insertAdjacentHTML('afterbegin', html);
104+
this.SELECT_DOM = document.querySelector(`#${this.name} .dot-selected`);
105+
this.CONTENT_DOM = document.querySelector(`#${this.name} .dot-select`);
106+
this.dataDOM = document.querySelector(`input[name='${this.name}[data]']`);
107+
this.insertDOM = document.querySelector(`input[name='${this.name}[insert]']`);
108+
this.deleteDOM = document.querySelector(`input[name='${this.name}[delete]']`);
116109
}
117110

118111
tagSelect(element) {
@@ -167,6 +160,74 @@ class ComponentDot {
167160
}
168161
}
169162
}
163+
164+
search(){
165+
var object = this;
166+
document.querySelector(`#${this.name} .dot-search`).addEventListener('input', function () {
167+
let search = this.value;
168+
if (search == '') {
169+
return;
170+
}
171+
for (let element of object.CONTENT_DOM.getElementsByClassName("dlp-label")) {
172+
if (element.innerText.indexOf(search) != -1) {
173+
object.CONTENT_DOM.insertBefore(element, object.CONTENT_DOM.firstChild);
174+
}
175+
}
176+
},false);
177+
}
178+
}
179+
180+
class ComponentCascadeDot {
181+
constructor(name, selected, select) {
182+
this.name = name;
183+
this.DOM = document.getElementById(name);
184+
this.selected_data = selected;
185+
this.select_data = select;
186+
this.make().makeSelect();
187+
}
188+
189+
make(){
190+
let html = `<div class="dlp-dot" ><div class="dot-top"><input type="text" class="dlp dot-search" placeholder="搜索名称"><div id="${this.name}-select" class="dot-selected dlp-scroll"></div></div><div class="dot-select dlp-scroll"></div></div>
191+
<input name="${this.name}[data]" value="[]" type="hidden"><input name="${this.name}[insert]" value="[]" type="hidden"><input name="${this.name}[delete]" value="[]" type="hidden">`;
192+
this.DOM.insertAdjacentHTML('afterbegin', html);
193+
this.SELECT_DOM = document.querySelector(`#${this.name} .dot-selected`);
194+
this.CONTENT_DOM = document.querySelector(`#${this.name} .dot-select`);
195+
this.dataDOM = document.querySelector(`input[name='${this.name}[data]']`);
196+
this.insertDOM = document.querySelector(`input[name='${this.name}[insert]']`);
197+
this.deleteDOM = document.querySelector(`input[name='${this.name}[delete]']`);
198+
return this;
199+
}
200+
201+
makeSelect(){
202+
this.dimensional = 0;
203+
this.dimensional_data = {};
204+
205+
this.makeDimensional(this.select_data);
206+
console.log(this.dimensional_data);
207+
console.log(this.dimensional)
208+
}
209+
210+
makeDimensional(data,dimension=0){
211+
if(Array.isArray(data)){
212+
for (let k in data){
213+
this.makeDimensional(data[k],dimension);
214+
}
215+
return;
216+
}
217+
if(!Array.isArray(this.dimensional_data[dimension.toString()])){
218+
this.dimensional_data[dimension.toString()] = [data];
219+
}else {
220+
this.dimensional_data[dimension.toString()].push(data);
221+
}
222+
if(!data.hasOwnProperty('nodes')){
223+
if(dimension>this.dimensional)this.dimensional=dimension;
224+
return;
225+
}
226+
if(Array.isArray(data.nodes) == true && data.nodes.length > 0){
227+
dimension++;
228+
this.makeDimensional(data.nodes,dimension);
229+
}
230+
}
170231
}
171232

172233
class ComponentLine {

0 commit comments

Comments
 (0)