71 lines
12 KiB
JavaScript
71 lines
12 KiB
JavaScript
layui.define(["jquery","dropdown","table","form"],function(C){"use strict";var O=layui.dropdown,u=layui.table,a=layui.jquery,E=layui.form,k="dropdownTable",S={version:"1.0.4",config:{selectType:"radio",emptyMsg:"点击此处选择"},index:layui[k]?layui[k].index+1e4:0,set:function(e){var o,r;this.config=a.extend(!0,{},that.config,e);let t=this.config,l=t.selectType,i={type:l,fixed:"left"};return((r=(o=t==null?void 0:t.selectTable)==null?void 0:o.cols)!=null?r:[[]]).forEach(f=>{JSON.stringify(f).indexOf(JSON.stringify(i))<0&&f.splice(0,0,i)}),that}},v=function(){let e=this,t=e.config,l=t.id||e.index;return v.that[l]=e,{config:t,reload:function(i){e.reload.call(e,i)}}},x=function(e){var r,f;let t=++S.index;this.index=t,this.tableId="dropdown-select-table-"+t,this.dropdownId="dropdown-"+t,this.config=a.extend(!0,{},S.config,e,{selectedIds:[],selectedDisplayValues:[]});let l=this.config,i=l.selectType,n={type:i,fixed:"left"},o=(f=(r=l==null?void 0:l.selectTable)==null?void 0:r.cols)!=null?f:[[]];i==="checkbox"&&o.forEach(d=>{JSON.stringify(d).indexOf(JSON.stringify(n))<0&&d.splice(0,0,n)}),this.render()};x.prototype.reloadSelectTable=function(e){let t=this.config;layui.each(e,function(l,i){layui.type(i)==="array"&&delete t.selectTable[l]}),a.extend(!0,t.selectTable,e),this.clearSelected()},x.prototype.clearSelected=function(){let e=this.config,t=e.bindInput;a(t).val(""),a(t)[0].dataset.displayValue="",a.extend(e,{selectedIds:[],selectedDisplayValues:[]}),this.setSelectedDisplayAndValue()},x.prototype.render=function(){let e=this,t=e.config;(t.elem=a(t.elem))[0]&&(e.initElemArea(),e.iniDropdown())},x.prototype.initElemArea=function(){var w,V,D;let e=this,t=this.config,l=t.elem,i=(V=(w=this.config)==null?void 0:w.searchName)!=null?V:"keywords";a(l).css({display:"inline-block",width:"80%",height:"100%","min-height":"35px",border:"1px solid #eee","line-height":"35px","box-sizing":"border-box",padding:"0 10px",cursor:"pointer"}),a(l).hover(()=>{a(l).css({"border-color":"#e2e2e2"})},()=>{a(l).css({"border-color":"#eee"})});let n=a("<button type='button' class='layui-btn layui-btn-primary'>选择</button>");n.css({display:"inline-block",width:"20%","min-width":"45px",height:"100%","box-sizing":"border-box","font-size":"12px",padding:"0","line-height":"36px"}),(D=t==null?void 0:t.needPopup)==null||D?a(l).after(n):a(l).css({width:"100%"});let o=`
|
||
<div class="select-container" >
|
||
<div class="layui-row">
|
||
<div class="layui-col-md7 table-container">
|
||
<div class="layui-bg-green header">
|
||
<div class="layui-font-14">选择</div>
|
||
<form class="layui-form" style="float: right;" lay-filter="data-table-search-form">
|
||
<div class="layui-form-item" style="margin:0;">
|
||
<div class="layui-input-inline">
|
||
<input type="text" id="data_table_${i}" name="data_table_${i}" placeholder="请输入您要搜索的内容" class="layui-input">
|
||
</div>
|
||
<div class="layui-inline">
|
||
<button id="data-table-search-button" type="button" class="layui-btn layui-btn-primary" style="background-color:white"><i class="layui-icon layui-icon-search"></i></button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<!--表格-->
|
||
<div class="table-item">
|
||
<table class="layui-hide" id="data-table" lay-filter="data-table"></table>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md5 table-container">
|
||
<div class="layui-bg-green header">
|
||
<div class="layui-font-14">选择结果</div>
|
||
</div>
|
||
|
||
<div class="table-item">
|
||
<table class="layui-hide" id="selected-table" lay-filter="selected-table"></table>
|
||
<script type="text/html" id="selected-table-opt-bar">
|
||
<div class="layui-clear-space">
|
||
<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">移除</a>
|
||
</div>
|
||
<\/script>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<style>
|
||
.select-container{
|
||
width:100%;
|
||
padding:10px;
|
||
box-sizing:border-box;
|
||
}
|
||
|
||
.table-container {
|
||
box-sizing: border-box;
|
||
padding-right: 10px;
|
||
}
|
||
|
||
.table-container>.header {
|
||
width: 100%;
|
||
display: table;
|
||
padding: 5px 10px;
|
||
box-sizing: border-box;
|
||
min-height: 50px;
|
||
}
|
||
|
||
.table-container>.header>* {
|
||
display: table-cell;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.table-container>.table-item {
|
||
margin-top: 20px;
|
||
}
|
||
</style>
|
||
`;n.click(()=>{layer.open({title:"选择",type:1,area:["70%","80%"],maxmin:!0,btn:["确认","取消"],content:o,success:()=>{f(),r(),b(),I(),d()},yes:s=>{var T;let c=(T=u.getData("selected-table"))!=null?T:[],h=c.map(m=>m.id);t.selectedIds=h,t.selectedDisplayValues=c.map(m=>m.displayValue),e.setSelectedDisplayAndValue(),layer.close(s);let g=t.onSelected;a.isFunction(g)&&g(h)}})});function r(){let s={id:"data-table",elem:"#data-table",done:function(h){y()}},c=a.extend({},t.selectTable,s);u.render(c)}function f(){u.render({elem:"#selected-table",cols:[[{field:"id",title:"ID",width:80,sort:!0},{field:"displayValue",title:"值"},{field:"originValue",title:"原始值",hide:!0},{fixed:"right",title:"操作",width:70,toolbar:"#selected-table-opt-bar"}]],data:[]})}function d(){a("#data-table-search-button").click(()=>{let s={},c=a("#data_table_"+i).val();s[i]=c,u.reloadData("data-table",{page:{curr:1},where:s})})}function b(){u.on("row(data-table)",s=>{let c=s.data;p({id:c[t.selectTable.uniqueId],displayValue:c[t.selectTable.displayField],originValue:JSON.stringify(c)})}),u.on("tool(selected-table)",s=>{s.event==="del"&&(s.del(),y())})}function p(s){var h;let c=(h=u.getData("selected-table"))!=null?h:[];c.map(g=>g.id).includes(s.id)?c=c.filter(g=>g.id!==s.id):(t.selectType==="radio"&&(c=[]),c.push(s)),u.reload("selected-table",{data:c}),y()}function y(){var h,g;let s=((h=u.getData("selected-table"))!=null?h:[]).map(T=>T.id+"");((g=u.getData("data-table"))!=null?g:[]).forEach((T,m)=>{t.selectType==="checkbox"?u.setRowChecked("data-table",{type:"checkbox",index:m,checked:s.includes(T.id+"")}):s.includes(T.id+"")&&u.setRowChecked("data-table",{type:"radio",index:m,checked:!0})})}function I(){var g,T;let s=t.bindInput,c=(g=a(s).val())!=null?g:"",h=(T=a(s)[0].dataset.displayValue)!=null?T:"";t.selectedIds=c.split("$").filter(m=>m!==""),t.selectedDisplayValues=h.split("$").filter(m=>m!==""),t.selectedIds.forEach((m,F)=>{p({id:m,displayValue:t.selectedDisplayValues[F]})})}},x.prototype.iniDropdown=function(){var i,n;let e=this,t=e.config,l=t.elem;O.render({id:(i=t.id)!=null?i:e.index,elem:l,trigger:"click",content:e.iniSelectTableHtml(),style:(n=t==null?void 0:t.style)!=null?n:"min-width:450px;box-sizing:border-box; padding:10px;width:"+a(l).width()+"px",ready:()=>{e.iniSelectTable(),e.bindRowCheckToSelectTable(),e.bindSelectBoxEventToSelectTable(),e.bindSearchToSelectTable()}})},x.prototype.iniSelectTableHtml=function(){var o,r;let e=this.index,t=this.tableId,l=(r=(o=this.config)==null?void 0:o.searchName)!=null?r:"keywords",i="select-table-search-"+e,n="select-table-search-button-"+e;return a.extend(this.config,{selectTableSearchFormId:i,selectTableSearchButtonId:n}),['<div class="chosen-window">','<script type="text/html" id="'+i+'">','<form class="layui-form layui-row">','<div class="layui-inline">','<div class="layui-input-inline">','<input type="text" name="'+l+'" placeholder="请输入要搜索的内容" class="layui-input">',"</div>","</div>",'<div class="layui-inline"><button class="layui-btn" lay-submit lay-filter="'+n+'">搜索</button></div>',"</form>","<\/script>",'<table class="layui-hide" id="'+t+'" lay-filter="'+t+'"></table>',"</div>"].join("")},x.prototype.iniSelectTable=function(){let e=this,t=e.config,l=e.tableId,i=t.selectTable,n={id:l,elem:"#"+l,toolbar:"#"+t.selectTableSearchFormId,defaultToolbar:["filter"],done:function(r){e.iniDefaultSelected(r.data)}},o=a.extend({},i,n);u.render(o)},x.prototype.iniDefaultSelected=function(e=[]){var b,p;let t=this,l=t.tableId,i=t.config,n=i.selectType,o=i.bindInput,r=(b=a(o).val())!=null?b:"",f=(p=a(o)[0].dataset.displayValue)!=null?p:"";if(i.selectedIds=r.split("$").filter(y=>y!==""),i.selectedDisplayValues=f.split("$").filter(y=>y!==""),e.length===0){t.setSelectedDisplayAndValue();return}u.setRowChecked(l,{index:"all",checked:!1});let d=i.selectedIds;if(d.length>0){let y=e.map(I=>I[i.selectTable.uniqueId].toString());if(n==="radio"&&d.length===1){let I=y.indexOf(d[0].toString());I>=0&&u.setRowChecked(l,{type:n,index:I,checked:!0})}else y.forEach(function(I,w){u.setRowChecked(l,{type:n,index:w,checked:d.includes(I)})})}t.setSelectedDisplayAndValue()},x.prototype.bindSelectBoxEventToSelectTable=function(){let e=this,t=e.config,l=t.selectType,i=t.selectTable.uniqueId,n=t.selectTable.displayField,o=e.tableId;l==="radio"?u.on("radio("+o+")",function(d){r(d.checked,d.data)}):u.on("checkbox("+o+")",function(d){let b=d.type,p=d.checked;b==="all"&&u.getData(o).forEach(function(y){f(p,y)}),b==="one"&&f(p,d.data)});function r(d,b){let p=b[i].toString();e.config.selectedIds=[],e.config.selectedDisplayValues=[],d&&(e.config.selectedIds.push(p),e.config.selectedDisplayValues.push(b[n])),e.setSelectedDisplayAndValue()}function f(d,b){let p=b[i].toString();if(d&&!e.config.selectedIds.includes(p)&&(e.config.selectedIds.push(p),e.config.selectedDisplayValues.push(b[n])),!d){let y=e.config.selectedIds.indexOf(p);p>-1&&(e.config.selectedIds.splice(y,1),e.config.selectedDisplayValues.splice(y,1))}e.setSelectedDisplayAndValue()}},x.prototype.bindRowCheckToSelectTable=function(){let e=this,t=e.tableId,l=e.config,i=l.selectType,n=l.selectTable.uniqueId,o=l.selectTable.displayField;u.on("row("+t+")",function(r){let f=r.data[n].toString(),d;if(!e.config.selectedIds.includes(f))i==="radio"&&(e.config.selectedIds=[],e.config.selectedDisplayValues=[]),e.config.selectedIds.push(f),e.config.selectedDisplayValues.push(r.data[o]),d=!0;else{let p=e.config.selectedIds.indexOf(f);e.config.selectedIds.splice(p,1),e.config.selectedDisplayValues.splice(p,1),d=!1}r.setRowChecked({type:i,checked:d});let b=l.onSelected;d&&a.isFunction(b)&&b(new Array(r.data[l.selectTable.uniqueId])),e.setSelectedDisplayAndValue()})},x.prototype.bindSearchToSelectTable=function(){let e=this.tableId,t=this.config.selectTableSearchButtonId;E.on("submit("+t+")",function(l){return u.reloadData(e,{page:{curr:1},where:l.field}),!1})},x.prototype.setSelectedDisplayAndValue=function(){var d;let e=this,t=e.tableId,l=e.config,i=l.elem,n=l.bindInput,o=(d=l==null?void 0:l.selectedIds)!=null?d:[],r=l.selectedDisplayValues,f=l.emptyMsg;i.find("span").remove(),o.length>0&&o.length===r.length?o.forEach((b,p)=>{let y=r[p],I=a('<span style="margin-left:5px;color:#fff" data-selected-id="'+b+'">×<span>'),w=['<span class="layui-badge layui-bg-green">'+y,"</span>"].join(""),V=a(w).append(I);V.attr({style:"margin-left:5px;font-size:14px;padding:4px 6px"}),I.on("mouseenter mouseleave",function(D){let s=D.type,c=s==="mouseleave"?"white":"red";a(this).attr({style:"color:"+c+";margin-left:5px;cursor:pointer"})}),I.on("click",function(){let D=this,s=u.getData(t).map(g=>g[l.selectTable.uniqueId]),c=D.dataset.selectedId,h=e.config.selectedIds.indexOf(c);e.config.selectedIds.splice(h,1),e.config.selectedDisplayValues.splice(h,1),s.includes(c)&&(l.selectType==="radio"?u.setRowChecked(t,{type:"radio",index:"all",checked:!1}):u.setRowChecked(t,{type:l.selectType,index:s.indexOf(c),checked:!1})),e.setSelectedDisplayAndValue()}),i.append(V)}):i.append('<span class="layui-font-gray layui-font-14" style="margin-left:5px;">'+f+"</span>"),a(n).val(o.join("$")),a(n)[0].dataset.displayValue=r.join("$")},v.that={},v.getThis=function(e){let t=v.that[e];return t||hint.error(e?k+" instance with ID '"+e+"' not found":"ID argument required"),t},S.reloadSelectTable=function(e,t){let l=v.getThis(e);return l.reloadSelectTable(t),v.call(l)},S.clearSelected=function(e){v.getThis(e).clearSelected()},S.render=function(e){let t=new x(e);return S.index===1&&console.log("欢迎使用Hg科技的dropdownTable组件，version:"+S.version+",期待您的建议！"),t.iniDefaultSelected(),v.call(t)},C(k,S)});
|