MultipleSelector.js 15 KB

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