MultipleSelector.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407
  1. MWF.xApplication.Selector = MWF.xApplication.Selector || {};
  2. MWF.xDesktop.requireApp("Selector", "lp."+MWF.language, null, false);
  3. //MWF.xDesktop.requireApp("Selector", "Actions.RestActions", null, false);
  4. MWF.xApplication.Selector.MultipleSelector = new Class({
  5. Extends: MWF.widget.Common,
  6. Implements: [Options, Events],
  7. options: {
  8. "style": "default",
  9. "types" : [],
  10. "count": 0,
  11. "title": "Select",
  12. "groups": [], //选person, group, role 时的范围
  13. "roles": [], //选选person, group, role 时的范围
  14. "units": [], //选 company, department, duty, identity 时的范围
  15. "values" : [],
  16. "zIndex": 1000,
  17. "expand": true
  18. },
  19. initialize: function(container, options){
  20. this.setOptions(options);
  21. this.path = "/x_component_Selector/$Selector/";
  22. this.cssPath = "/x_component_Selector/$Selector/"+this.options.style+"/css.wcss";
  23. this._loadCss();
  24. this.container = $(container);
  25. this.lp = MWF.xApplication.Selector.LP;
  26. this.lastPeople = "";
  27. this.pageCount = "13";
  28. this.selectedItems = [];
  29. this.selectedItemsObject = {};
  30. this.items = [];
  31. this.selectors = {};
  32. },
  33. load: function(){
  34. if (layout.mobile){
  35. this.loadMobile();
  36. }else{
  37. this.loadPc();
  38. }
  39. this.fireEvent("load");
  40. },
  41. loadMobile: function(){
  42. this.container.mask({
  43. "destroyOnHide": true,
  44. "style": this.css.maskNode
  45. });
  46. this.node = new Element("div", {"styles": this.css.containerNodeMobile});
  47. this.node.setStyle("z-index", this.options.zIndex.toInt()+1);
  48. this.node.setStyle("height", ( document.body.getSize().y ) + "px");
  49. this.titleNode = new Element("div", {
  50. "styles": this.css.titleNodeMobile
  51. }).inject(this.node);
  52. this.titleCancelActionNode = new Element("div", {
  53. "styles": this.css.titleCancelActionNodeMobile,
  54. "text": MWF.SelectorLP.back
  55. }).inject(this.titleNode);
  56. this.titleOkActionNode = new Element("div", {
  57. "styles": this.css.titleOkActionNodeMobile,
  58. "text": MWF.SelectorLP.ok
  59. }).inject(this.titleNode);
  60. this.titleTextNode = new Element("div", {
  61. "styles": {
  62. "margin": "0px 50px",
  63. "height": "40px",
  64. "padding": "0px 10px",
  65. "color": "#FFF",
  66. "font-weight": "bold",
  67. "font-size": "14px",
  68. "line-height": "40px"
  69. //"overflow" : "hidden"
  70. }
  71. //"text": this.options.title
  72. }).inject(this.titleNode);
  73. this.contentNode = new Element("div", {
  74. "styles": this.css.contentNode
  75. }).inject(this.node);
  76. debugger;
  77. var size = document.body.getSize();
  78. //var height = size.y-40;
  79. var height = size.y;
  80. this.contentNode.setStyle("height", ""+height+"px");
  81. this.contentNode.setStyle("margin-top", "2px");
  82. this.loadContent();
  83. this.node.inject(document.body);
  84. this.node.setStyles({
  85. "top": "0px",
  86. "left": "0px"
  87. });
  88. this.setEvent();
  89. },
  90. loadPc: function(){
  91. this.css.maskNode["z-index"] = this.options.zIndex;
  92. var position = this.container.getPosition(this.container.getOffsetParent());
  93. this.container.mask({
  94. "destroyOnHide": true,
  95. "style": this.css.maskNode,
  96. "useIframeShim": true,
  97. "iframeShimOptions": {"browsers": true},
  98. "onShow": function(){
  99. this.shim.shim.setStyles({
  100. "opacity": 0,
  101. "top": ""+position.y+"px",
  102. "left": ""+position.x+"px"
  103. });
  104. }
  105. });
  106. // this.container.setStyle("z-index", this.options.zIndex);
  107. this.node = new Element("div", {
  108. "styles": (this.options.count.toInt()==1) ? this.css.containerNodeSingle_multiple : this.css.containerNode_multiple
  109. });
  110. this.node.setStyle("z-index", this.options.zIndex.toInt()+1);
  111. this.titleNode = new Element("div", {
  112. "styles": this.css.titleNode
  113. }).inject(this.node);
  114. this.titleActionNode = new Element("div", {
  115. "styles": this.css.titleActionNode
  116. }).inject(this.titleNode);
  117. this.titleTextNode = new Element("div", {
  118. "styles": this.css.titleTextNode,
  119. "text": this.options.title
  120. }).inject(this.titleNode);
  121. this.contentNode = new Element("div", {
  122. "styles": this.css.contentNode
  123. }).inject(this.node);
  124. this.loadContent();
  125. this.actionNode = new Element("div", {
  126. "styles": this.css.actionNode
  127. }).inject(this.node);
  128. if (this.options.count.toInt()==1) this.actionNode.setStyle("text-align", "center");
  129. this.loadAction();
  130. this.node.inject(this.container);
  131. this.node.position({
  132. relativeTo: this.container,
  133. position: "center",
  134. edge: "center"
  135. });
  136. var size = this.container.getSize();
  137. var nodeSize = this.node.getSize();
  138. this.node.makeDraggable({
  139. "handle": this.titleNode,
  140. "limit": {
  141. "x": [0, size.x-nodeSize.x],
  142. "y": [0, size.y-nodeSize.y]
  143. }
  144. });
  145. this.setEvent();
  146. },
  147. setEvent: function(){
  148. if (this.titleActionNode){
  149. this.titleActionNode.addEvent("click", function(){
  150. this.close();
  151. }.bind(this));
  152. }
  153. if (this.titleCancelActionNode){
  154. this.titleCancelActionNode.addEvent("click", function(){
  155. this.close();
  156. }.bind(this));
  157. }
  158. if (this.titleOkActionNode){
  159. this.titleOkActionNode.addEvent("click", function(){
  160. this.fireEvent("complete", [this.getSelectedItems(), this.getSelectedItemsObject() ]);
  161. this.close();
  162. }.bind(this));
  163. }
  164. },
  165. close: function(){
  166. this.fireEvent("close");
  167. this.node.destroy();
  168. this.container.unmask();
  169. MWF.release(this);
  170. delete this;
  171. },
  172. loadAction: function(){
  173. this.okActionNode = new Element("button", {
  174. "styles": this.css.okActionNode,
  175. "text": "确 定"
  176. }).inject(this.actionNode);
  177. this.cancelActionNode = new Element("button", {
  178. "styles": this.css.cancelActionNode,
  179. "text": "取 消"
  180. }).inject(this.actionNode);
  181. this.okActionNode.addEvent("click", function(){
  182. this.fireEvent("complete", [this.getSelectedItems(), this.getSelectedItemsObject() ]);
  183. this.close();
  184. }.bind(this));
  185. this.cancelActionNode.addEvent("click", function(){this.fireEvent("cancel"); this.close();}.bind(this));
  186. },
  187. loadContent: function(){
  188. if (layout.mobile){
  189. MWF.require("MWF.widget.Tab", function(){
  190. this.tab = new MWF.widget.Tab(this.titleTextNode, {"style": "orgMobile" });
  191. this.tab.load();
  192. this.tab.contentNodeContainer.inject(this.contentNode);
  193. }.bind(this), false);
  194. }else{
  195. MWF.require("MWF.widget.Tab", function(){
  196. this.tab = new MWF.widget.Tab(this.contentNode, {"style": "default" });
  197. this.tab.load();
  198. }.bind(this), false);
  199. }
  200. this.options.types.each( function( type, index ){
  201. var pageNode = new Element( "div" ).inject( this.contentNode );
  202. var tab = this.tab.addTab( pageNode, this.lp[type], false );
  203. var t = type.capitalize();
  204. if ((type.toLowerCase()==="unit") && (this.options.unitType)){
  205. t = "UnitWithType";
  206. }
  207. if ((type.toLowerCase()==="identity") && ((this.options.dutys) && this.options.dutys.length)){
  208. t = "IdentityWidthDuty";
  209. }
  210. MWF.xDesktop.requireApp("Selector", t, function(){
  211. var options = Object.clone( this.options );
  212. options.values = this.getValueByType( this.options.values, type );
  213. //options.values = [];
  214. //if( options.multipleValues[type] ){
  215. // options.values = options.multipleValues[type];
  216. //}
  217. //if( options[type+"Values"] && options[type+"Values"].length ){
  218. // options.values = options.values.concat( options[type+"Values"] )
  219. //}
  220. //
  221. //options.names = [];
  222. //if( options.multipleNames[type] ){
  223. // options.names = options.multipleNames[type];
  224. //}
  225. //if( options[type+"Names"] && options[type+"Names"].length ){
  226. // options.names = options.names.concat( options[type+"Names"] )
  227. //}
  228. this.selectors[t] = new MWF.xApplication.Selector[t](this.container, options );
  229. this.selectors[t].loadContent( pageNode );
  230. if( layout.mobile ){
  231. var size = this.container.getSize();
  232. var height = size.y-40-20-6 - 20; //80;
  233. if(this.selectors[t].selectNode){
  234. this.selectors[t].selectNode.setStyle("height", ""+height+"px");
  235. }
  236. height = size.y-40-20-78 - 20; //80;
  237. var itemAreaScrollNode = this.selectors[t].itemAreaScrollNode;
  238. if( itemAreaScrollNode ){
  239. itemAreaScrollNode.setStyle("height", ""+height+"px");
  240. }
  241. if( t.toLowerCase() == "person" || t.toLowerCase() == "group" ){
  242. var startY=0, y=0;
  243. itemAreaScrollNode.addEvents({
  244. 'touchstart' : function( ev ){
  245. var touch = ev.touches[0]; //获取第一个触点
  246. startY = Number(touch.pageY); //页面触点Y坐标
  247. }.bind(this),
  248. 'touchmove' : function(ev){
  249. var touch = ev.touches[0]; //获取第一个触点
  250. y = Number(touch.pageY); //页面触点Y坐标
  251. }.bind(this),
  252. 'touchend' : function( ev ){
  253. if (startY - y > 10) { //向上滑动超过10像素
  254. var obj = this.selectors.Person;
  255. obj._scrollEvent( obj.itemAreaScrollNode.scrollTop + 100 );
  256. }
  257. startY = 0;
  258. y = 0;
  259. }.bind(this)
  260. })
  261. }
  262. }
  263. if( index == 0 )tab.showIm();
  264. }.bind(this));
  265. }.bind(this));
  266. },
  267. getValueByType : function( values, type ){
  268. var result = [];
  269. values = typeOf( values == "array" ) ? values : [values];
  270. values.each( function( data ){
  271. if( typeOf( data ) == "string" ){
  272. var dn = data;
  273. }else{
  274. var dn = data.distinguishedName;
  275. }
  276. if (dn && type ){
  277. var flag = dn.substr(dn.length-1, 1);
  278. switch (flag.toLowerCase()){
  279. case "i":
  280. if( type == "identity" )result.push( data );
  281. break;
  282. case "p":
  283. if( type == "person" )result.push( data );
  284. break;
  285. case "u":
  286. if( type == "unit" )result.push( data );
  287. break;
  288. case "g":
  289. if( type == "group" )result.push( data );
  290. break;
  291. case "r":
  292. if( type == "role" )result.push( data );
  293. break;
  294. default:
  295. if( type == "person" )result.push( data );
  296. break;
  297. //result.push( data );
  298. }
  299. }else{
  300. //result.push( data );
  301. }
  302. });
  303. return result;
  304. },
  305. getSelectedItems : function(){
  306. this.selectedItems = [];
  307. for( var key in this.selectors ){
  308. var selector = this.selectors[key];
  309. if( selector.selectedItems && selector.selectedItems.length > 0 ){
  310. this.selectedItems = this.selectedItems.concat( selector.selectedItems );
  311. }
  312. }
  313. return this.selectedItems;
  314. },
  315. getSelectedItemsObject : function(){
  316. this.selectedItemsObject = {};
  317. for( var key in this.selectors ){
  318. var selector = this.selectors[key];
  319. if( selector.selectedItems && selector.selectedItems.length > 0 ){
  320. this.selectedItemsObject[key.toLowerCase()] = selector.selectedItems;
  321. }
  322. }
  323. return this.selectedItemsObject;
  324. }
  325. });
  326. MWF.xApplication.Selector.MultipleSelector.Filter = new Class({
  327. Implements: [Options, Events],
  328. options: {
  329. "types" : [],
  330. "groups": [], //选person, group, role 时的范围
  331. "roles": [], //选选person, group, role 时的范围
  332. "units": [], //选 company, department, duty, identity 时的范围
  333. },
  334. initialize: function(value, options){
  335. this.setOptions(options);
  336. this.value = value;
  337. this.orgAction = MWF.Actions.get("x_organization_assemble_control");
  338. this.selectors = {};
  339. this.options.types.each( function( type, index ){
  340. var t = type.capitalize();
  341. if ((type.toLowerCase()==="unit") && (this.options.unitType)){
  342. t = "UnitWithType";
  343. }
  344. if ((type.toLowerCase()==="identity") && ((this.options.dutys) && this.options.dutys.length)){
  345. t = "IdentityWidthDuty";
  346. }
  347. MWF.xDesktop.requireApp("Selector", t, function(){
  348. this.selectors[t] = new MWF.xApplication.Selector[t].Filter(this.value, options);
  349. }.bind(this), false);
  350. }.bind(this));
  351. },
  352. filter: function(value, callback){
  353. this.value = value;
  354. var key = this.value;
  355. this.filterData = [];
  356. this.filterCount = 0;
  357. for (i in this.selectors){
  358. this.selectors[i].filter(value, function(data){
  359. this.filterData = this.filterData.concat(data);
  360. this.filterCount++;
  361. this.endFilter(callback);
  362. }.bind(this))
  363. }
  364. //
  365. // this.orgAction.listPersonByKey(function(json){
  366. // data = json.data;
  367. // if (callback) callback(data)
  368. // }.bind(this), failure, key);
  369. },
  370. endFilter: function(callback){
  371. if (this.filterCount>=Object.keys(this.selectors).length){
  372. if (callback) callback(this.filterData);
  373. }
  374. }
  375. });