$Explorer.js 41 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031
  1. MWF.require("MWF.widget.Tab", null, false);
  2. MWF.xDesktop.requireApp("Org", "List", null, false);
  3. MWF.xApplication.Org.$Explorer = new Class({
  4. Extends: MWF.widget.Common,
  5. Implements: [Options, Events],
  6. options: {
  7. "style": "default"
  8. },
  9. _loadPath: function(){
  10. this.path = "../x_component_Org/$Explorer/";
  11. this.cssPath = "../x_component_Org/$Explorer/"+this.options.style+"/css.wcss";
  12. },
  13. initialize: function(node, actions, options){
  14. this.setOptions(options);
  15. this._loadPath();
  16. this._loadCss();
  17. this.actions = actions;
  18. this.node = $(node);
  19. this.loaddingElement = false;
  20. this.elements = [];
  21. this.isElementLoaded = false;
  22. this.loadElementQueue = 0;
  23. this.deleteElements = [];
  24. },
  25. _loadLp: function(){
  26. this.options.lp = {
  27. "elementLoaded": this.app.lp.personLoaded,
  28. "search": this.app.lp.search,
  29. "searchText": this.app.lp.searchText,
  30. "elementSave": this.app.lp.personSave,
  31. "deleteElements": this.app.lp.deletePersons,
  32. "deleteElementsCancel": this.app.lp.deleteElementsCancel,
  33. "deleteElementsTitle": this.app.lp.deletePersonsTitle,
  34. "deleteElementsConfirm": this.app.lp.deletePersonsConfirm,
  35. "elementBaseText": this.app.lp.personBaseText,
  36. "elementName": this.app.lp.personName,
  37. "noSignature": this.app.lp.noSignature,
  38. "edit": this.app.lp.edit,
  39. "cancel": this.app.lp.cancel,
  40. "save": this.app.lp.save,
  41. "add": this.app.lp.add
  42. }
  43. },
  44. clear: function(){
  45. this.loaddingElement = false;
  46. this.isElementLoaded = false;
  47. this.loadElementQueue = 0;
  48. this.listNode.empty();
  49. },
  50. load: function(){
  51. this._loadLp();
  52. this.loadLayout();
  53. this.loadList();
  54. },
  55. loadLayout: function(){
  56. this.listAreaNode = new Element("div", {"styles": this.css.listAreaNode}).inject(this.node);
  57. this.propertyAreaNode = new Element("div", {"styles": this.css.propertyAreaNode}).inject(this.node);
  58. this.resizeBarNode = new Element("div", {"styles": this.css.resizeBarNode}).inject(this.propertyAreaNode);
  59. this.propertyNode = new Element("div", {"styles": this.css.propertyNode}).inject(this.propertyAreaNode);
  60. this.propertyTitleNode = new Element("div", {"styles": this.css.propertyTitleNode}).inject(this.propertyNode);
  61. this.propertyContentNode = new Element("div", {"styles": this.css.propertyContentNode}).inject(this.propertyNode);
  62. this.propertyContentNode.setStyle("-webkit-user-select", "text");
  63. this.node.addEvent("selectstart", function(e){
  64. this.propertyContentNode.setStyle("-webkit-user-select", "text");
  65. }.bind(this));
  66. this.toolbarNode = new Element("div", {"styles": this.css.toolbarNode}).inject(this.listAreaNode);
  67. this.listScrollNode = new Element("div", {"styles": this.css.listScrollNode}).inject(this.listAreaNode);
  68. this.listNode = new Element("div", {"styles": this.css.listNode}).inject(this.listScrollNode);
  69. this.loadToolbar();
  70. this.resizePropertyContentNodeFun = this.resizePropertyContentNode.bind(this);
  71. this.resizePropertyContentNodeFun();
  72. this.app.addEvent("resize", this.resizePropertyContentNodeFun);
  73. this.loadScroll();
  74. this.loadResize();
  75. },
  76. loadToolbar: function(){
  77. if (this._isActionManager()) {
  78. this.isEditor = true;
  79. this.addTopElementNode = new Element("div", {"styles": this.css.addTopGroupNode}).inject(this.toolbarNode);
  80. this.addTopElementNode.addEvent("click", function () {
  81. this.addTopElement();
  82. }.bind(this));
  83. }
  84. this.createSearchNode();
  85. this.loadPingyinArea();
  86. },
  87. loadPingyinArea: function(){
  88. this.pingyinAction = new Element("div", {"styles": this.css.pingyinAction}).inject(this.app.pingyinArea);
  89. this.pingyinAction.addEvent("click", function(e){
  90. if (!this.pingyinNode) this.createPingyinNode();
  91. if (this.pingyinMorph){
  92. if (!this.pingyinMorph.isRunning()){
  93. if (this.pingyinNode.getStyle("display")==="none"){
  94. this.showPingyin();
  95. }else{
  96. this.hidePingyin();
  97. }
  98. }
  99. }else{
  100. this.showPingyin();
  101. }
  102. }.bind(this));
  103. this.pingyinAction.addEvent("mousedown", function(e){e.stopPropagation();});
  104. this.hidePingyinFun = this.hidePingyin.bind(this);
  105. this.app.content.addEvent("mousedown", this.hidePingyinFun);
  106. this.removePingyinFun = this.removePingyin.bind(this);
  107. this.app.addEvent("queryClose", this.removePingyinFun);
  108. },
  109. removePingyin: function(){
  110. this.app.content.removeEvent("mousedown", this.hidePingyinFun);
  111. },
  112. hidePingyin: function(){
  113. if (this.pingyinNode){
  114. if (!this.pingyinMorph){
  115. this.pingyinMorph = new Fx.Morph(this.pingyinNode, {duration: 50, link: "chain"});
  116. }
  117. if (!this.pingyinMorph.isRunning()){
  118. if (this.pingyinNode.getStyle("display")!=="none"){
  119. this.pingyinMorph.start(this.css.pingyinNode).chain(function(){
  120. this.pingyinNode.setStyle("display", "none");
  121. }.bind(this));
  122. }
  123. }
  124. }
  125. },
  126. showPingyin: function(){
  127. this.resizePropertyContentNode();
  128. if (!this.pingyinMorph){
  129. this.pingyinMorph = new Fx.Morph(this.pingyinNode, {duration: 50, link: "chain"});
  130. }
  131. this.pingyinNode.setStyle("display", "block");
  132. this.pingyinMorph.start(this.css.pingyinNode_to).chain(function(){
  133. this.pingyinNode.setStyles(this.css.pingyinNode_to);
  134. }.bind(this));
  135. },
  136. setPingyinNodePosition: function(){
  137. this.pingyinNode.position({
  138. relativeTo: this.node,
  139. position: "leftTop",
  140. edge: "leftTop"
  141. });
  142. },
  143. createPingyinNode: function(){
  144. this.pingyinNode = new Element("div", {"styles": this.css.pingyinNode}).inject(this.node);
  145. this.pingyinNode.addEvent("mousedown", function(e){e.stopPropagation();});
  146. letters = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
  147. letters.each(function(l){
  148. var letterNode = new Element("div", {"styles": this.css.letterNode,"text": l}).inject(this.pingyinNode);
  149. letterNode.addEvents({
  150. "mouseover": function(e){
  151. e.target.setStyles(this.css.letterNode_over);
  152. }.bind(this),
  153. "mouseout": function(e){
  154. e.target.setStyles(this.css.letterNode);
  155. }.bind(this),
  156. "click": function(e){
  157. this.searchInputNode.set("value", e.target.get("text"));
  158. this.searchOrg();
  159. this.hidePingyin();
  160. }.bind(this)
  161. });
  162. }.bind(this));
  163. },
  164. addTopElement: function(){
  165. var isNewElement = true;
  166. if (this.currentItem) isNewElement = this.currentItem.unSelected();
  167. if (isNewElement){
  168. var newElementData = this._getAddElementData();
  169. var item = this._newElement(newElementData, this);
  170. item.load();
  171. item.selected();
  172. item.editBaseInfor();
  173. (new Fx.Scroll(this.listScrollNode)).toElementCenter(item.node);
  174. }else{
  175. this.app.notice(this.options.lp.elementSave, "error", this.propertyContentNode);
  176. }
  177. },
  178. createSearchNode: function(){
  179. this.searchNode = new Element("div", {"styles": this.css.searchNode}).inject(this.toolbarNode);
  180. this.searchButtonNode = new Element("div", {"styles": this.css.searchButtonNode,"title": this.options.lp.search}).inject(this.searchNode);
  181. this.searchButtonNode.addEvent("click", function(){this.searchOrg();}.bind(this));
  182. this.searchInputAreaNode = new Element("div", {"styles": this.css.searchInputAreaNode}).inject(this.searchNode);
  183. this.searchInputNode = new Element("input", {
  184. "type": "text",
  185. "value": this.options.lp.searchText,
  186. "styles": this.css.searchInputNode,
  187. //"x-webkit-speech": "1",
  188. "x-webkit-speech": "x-webkit-speech"
  189. }).inject(this.searchInputAreaNode);
  190. var _self = this;
  191. this.searchInputNode.addEvents({
  192. "focus": function(){if (this.value ===_self.options.lp.searchText) this.set("value", "");},
  193. "blur": function(){if (!this.value) this.set("value", _self.options.lp.searchText);},
  194. "keydown": function(e){
  195. if (e.code===13){
  196. this.searchOrg();
  197. e.preventDefault();
  198. }
  199. }.bind(this),
  200. "selectstart": function(e){e.preventDefault();},
  201. "change": function(){
  202. var key = this.searchInputNode.get("value");
  203. if (!key || key===this.options.lp.searchText) {
  204. if (this.currentItem){
  205. if (this.currentItem.unSelected()){
  206. this.clear();
  207. this.loadElements();
  208. }else{
  209. this.app.notice(this.options.lp.elementSave, "error", this.propertyContentNode);
  210. }
  211. }
  212. }
  213. }.bind(this)
  214. });
  215. this.searchButtonNode.addEvent("click", function(){this.searchOrg();}.bind(this));
  216. },
  217. searchOrg: function(){
  218. var key = this.searchInputNode.get("value");
  219. var isSearchElement = true;
  220. this.searching = false;
  221. if (key){
  222. if (key!==this.options.lp.searchText){
  223. if (this.currentItem) isSearchElement = this.currentItem.unSelected();
  224. if (isSearchElement){
  225. this._listElementByKey(function(json){
  226. if (this.currentItem) this.currentItem.unSelected();
  227. this.clear();
  228. json.data.each(function(itemData){
  229. var item = this._newElement(itemData, this);
  230. item.load();
  231. }.bind(this));
  232. this.searching = true;
  233. }.bind(this), null, key);
  234. }else{
  235. this.app.notice(this.options.lp.elementSave, "error", this.propertyContentNode);
  236. }
  237. }else{
  238. if (this.currentItem) isSearchElement = this.currentItem.unSelected();
  239. if (isSearchElement){
  240. this.clear();
  241. this.reloadElements();
  242. }else{
  243. this.app.notice(this.options.lp.elementSave, "error", this.propertyContentNode);
  244. }
  245. }
  246. }else{
  247. if (this.currentItem) isSearchElement = this.currentItem.unSelected();
  248. if (isSearchElement){
  249. this.clear();
  250. this.reloadElements();
  251. }else{
  252. this.app.notice(this.options.lp.elementSave, "error", this.propertyContentNode);
  253. }
  254. }
  255. },
  256. resizePropertyContentNode: function(){
  257. var size = this.node.getSize();
  258. var tSize = this.propertyTitleNode.getSize();
  259. var mtt = this.propertyTitleNode.getStyle("margin-top").toFloat();
  260. var mbt = this.propertyTitleNode.getStyle("margin-bottom").toFloat();
  261. var mtc = this.propertyContentNode.getStyle("margin-top").toFloat();
  262. var mbc = this.propertyContentNode.getStyle("margin-bottom").toFloat();
  263. var height = size.y-tSize.y-mtt-mbt-mtc-mbc;
  264. this.propertyContentNode.setStyle("height", height);
  265. tSize = this.toolbarNode.getSize();
  266. mtt = this.toolbarNode.getStyle("margin-top").toFloat();
  267. mbt = this.toolbarNode.getStyle("margin-bottom").toFloat();
  268. mtc = this.toolbarNode.getStyle("margin-top").toFloat();
  269. mbc = this.toolbarNode.getStyle("margin-bottom").toFloat();
  270. height = size.y-tSize.y-mtt-mbt-mtc-mbc;
  271. this.listScrollNode.setStyle("height", ""+height+"px");
  272. if (this.pingyinNode){
  273. this.setPingyinNodePosition();
  274. this.pingyinNode.setStyle("height", ""+size.y+"px");
  275. }
  276. },
  277. loadScroll: function(){
  278. MWF.require("MWF.widget.ScrollBar", function(){
  279. var _self = this;
  280. new MWF.widget.ScrollBar(this.listScrollNode, {
  281. "style":"xApp_Organization_Explorer",
  282. "where": "before",
  283. "distance": 100,
  284. "friction": 4,
  285. "axis": {"x": false, "y": true},
  286. "onScroll": function(y){
  287. if( _self.searching )return;
  288. var scrollSize = _self.listScrollNode.getScrollSize();
  289. var clientSize = _self.listScrollNode.getSize();
  290. var scrollHeight = scrollSize.y-clientSize.y;
  291. if (y+200>scrollHeight) {
  292. if (!_self.isElementLoaded) _self.loadElements();
  293. }
  294. }
  295. });
  296. // new MWF.widget.ScrollBar(this.propertyContentNode, {
  297. // "style":"xApp_Organization_Explorer", "where": "before", "distance": 100, "friction": 4, "axis": {"x": false, "y": true}
  298. // });
  299. }.bind(this));
  300. },
  301. loadResize: function(){
  302. this.propertyResize = new Drag(this.resizeBarNode,{
  303. "snap": 1,
  304. "onStart": function(el, e){
  305. var x = e.event.clientX;
  306. var y = e.event.clientY;
  307. el.store("position", {"x": x, "y": y});
  308. var size = this.listAreaNode.getSize();
  309. el.store("initialWidth", size.x);
  310. }.bind(this),
  311. "onDrag": function(el, e){
  312. var x = e.event.clientX;
  313. // var y = e.event.y;
  314. var bodySize = this.node.getSize();
  315. var position = el.retrieve("position");
  316. var initialWidth = el.retrieve("initialWidth").toFloat();
  317. var dx = position.x.toFloat()-x.toFloat();
  318. var width = initialWidth-dx;
  319. if (width> bodySize.x/1.5) width = bodySize.x/1.5;
  320. if (width<300) width = 300;
  321. this.listAreaNode.setStyle("width", width+1);
  322. this.propertyAreaNode.setStyle("margin-left", width);
  323. }.bind(this)
  324. });
  325. },
  326. getPageNodeCount: function(){
  327. var size = this.listScrollNode.getSize();
  328. return (size.y / 50).toInt() + 5;
  329. },
  330. loadList: function(){
  331. this.loadElements();
  332. this.continueLoadFun = this.continueLoad.bind(this);
  333. this.app.addEvent("resize", this.continueLoadFun);
  334. },
  335. continueLoad: function(){
  336. if (this.elements.length<this.getPageNodeCount()){
  337. this.loadElements(true);
  338. }
  339. },
  340. reloadElements : function(){
  341. this.elements = [];
  342. this.clear();
  343. this.loadElements();
  344. },
  345. loadElements: function(addToNext){
  346. if (!this.isElementLoaded){
  347. if (!this.loaddingElement){
  348. this.loaddingElement = true;
  349. var count = this.getPageNodeCount();
  350. this._listElementNext(this.getLastLoadedElementId(), count, function(json){
  351. if (json.data.length){
  352. this.loadListContent(json.data);
  353. this.loaddingElement = false;
  354. if (json.data.length<count){
  355. this.isElementLoaded = true;
  356. this.app.notice(this.options.lp.elementLoaded, "ok", this.listScrollNode, {"x": "center", "y": "bottom"});
  357. }else{
  358. if (this.loadElementQueue>0){
  359. this.loadElementQueue--;
  360. this.loadElements();
  361. }
  362. }
  363. }else{
  364. if (!this.elements.length){
  365. //this.setNoGroupNoticeArea();
  366. }else{
  367. this.app.notice(this.options.lp.elementLoaded, "ok", this.listScrollNode, {"x": "center", "y": "bottom"});
  368. }
  369. this.isElementLoaded = true;
  370. this.loaddingElement = false;
  371. }
  372. }.bind(this));
  373. }else{
  374. if (addToNext) this.loadElementQueue++;
  375. }
  376. }
  377. },
  378. getLastLoadedElementId: function(){
  379. return (this.elements.length) ? this.elements[this.elements.length-1].data.id : "";
  380. },
  381. loadListContent: function(data){
  382. data.each(function(itemData, i){
  383. var item = this._newElement(itemData, this, i);
  384. this.elements.push(item);
  385. item.load();
  386. if (this.elements.length===1) item.selected();
  387. }.bind(this));
  388. },
  389. setNoElementNoticeArea: function(){
  390. //没有数据时的提示
  391. },
  392. checkDeleteElements: function(item){
  393. if (this.deleteElements.length){
  394. if (!this.deleteElementsNode){
  395. this.deleteElementsNode = new Element("div", {"styles": this.css.deleteElementsNode}).inject(this.node);
  396. this.deleteElementsDeleteNode = new Element("div", {"styles": this.css.deleteElementsDeleteNode,"text": this.options.lp.deleteElements}).inject(this.deleteElementsNode);
  397. this.deleteElementsCancelNode = new Element("div", {"styles": this.css.deleteElementsCancelNode,"text": this.options.lp.deleteElementsCancel}).inject(this.deleteElementsNode);
  398. this.deleteElementsDeleteNode.addEvent("click", function(e){this.deleteSelectedElements(e);}.bind(this));
  399. this.deleteElementsCancelNode.addEvent("click", function(e){this.deleteSelectedElementsCancel(e);}.bind(this));
  400. }
  401. this.deleteElementsNode.position({
  402. relativeTo: (item) ? item.node : this.toolbarNode,
  403. position: "centerBottom",
  404. edge: "centerTop"
  405. });
  406. }else{
  407. if (this.deleteElementsNode){
  408. this.deleteElementsNode.destroy();
  409. this.deleteElementsNode = null;
  410. delete this.deleteElementsNode;
  411. }
  412. }
  413. },
  414. deleteSelectedElements: function(e){
  415. var _self = this;
  416. this.app.confirm("infor", e, this.options.lp.deleteElementsTitle, this.options.lp.deleteElementsConfirm, 300, 120, function(){
  417. var deleted = [];
  418. var doCount = 0;
  419. var readyCount = _self.deleteElements.length;
  420. var errorText = "";
  421. var complete;
  422. complete = function () {
  423. if (doCount === readyCount) {
  424. if (errorText) {
  425. _self.app.notice(errorText, "error", _self.propertyContentNode, {x: "left", y: "top"});
  426. }
  427. }
  428. };
  429. _self.deleteElements.each(function(element){
  430. element["delete"](function(){
  431. deleted.push(element);
  432. doCount++;
  433. if (_self.deleteElements.length===doCount){
  434. _self.deleteElements = _self.deleteElements.filter(function (item) {
  435. return !deleted.contains(item);
  436. });
  437. _self.checkDeleteElements();
  438. }
  439. complete();
  440. }, function(error){
  441. errorText = (errorText) ? errorText+"<br/><br/>"+error : error;
  442. doCount++;
  443. if (_self.deleteElements.length !== doCount) {
  444. } else {
  445. _self.deleteElements = _self.deleteElements.filter(function (item) {
  446. return !deleted.contains(item);
  447. });
  448. _self.checkDeleteElements();
  449. }
  450. complete();
  451. });
  452. });
  453. this.close();
  454. }, function(){
  455. this.close();
  456. });
  457. },
  458. deleteSelectedElementsCancel: function() {
  459. while (this.deleteElements.length){
  460. var element = this.deleteElements[0];
  461. element.setUndelete();
  462. //if (element.deleteNode) element.deleteNode.click();
  463. if (this.currentItem!==element){
  464. element.contentNode.setStyles(element.style.contentNode);
  465. if (element.data.id) element.actionNode.fade("out");
  466. }
  467. }
  468. this.checkDeleteElements();
  469. },
  470. destroy: function(){
  471. if (this.hidePingyinFun) this.app.content.removeEvent("mousedown", this.hidePingyinFun);
  472. if (this.resizePropertyContentNodeFun) this.app.removeEvent("resize", this.resizePropertyContentNodeFun);
  473. if (this.continueLoadFun) this.app.removeEvent("resize", this.continueLoadFun);
  474. if (this.removePingyinFun) this.app.removeEvent("queryClose", this.removePingyinFun);
  475. MWF.release(this);
  476. },
  477. _isActionManager: function(){
  478. return MWF.AC.isOrganizationManager();
  479. },
  480. _listElementNext: function(lastid, count, callback){
  481. this.actions.listPersonNext(lastid, count, function(json){
  482. if (callback) {
  483. callback.apply(this, [json]);
  484. }
  485. }.bind(this));
  486. },
  487. _newElement: function(data, explorer, i){
  488. return new MWF.xApplication.Org.PersonExplorer.Person(data, explorer, this.isEditor, i);
  489. },
  490. _listElementByKey: function(callback, failure, key){
  491. this.actions.listPersonByKey(function(json){
  492. if (callback) {
  493. callback.apply(this, [json]);
  494. }
  495. }.bind(this), failure, key);
  496. },
  497. _getAddElementData: function(){
  498. return {
  499. "employee": "",
  500. "password": "",
  501. "display": "",
  502. "qq": "",
  503. "mail": "",
  504. "weixin": "",
  505. "weibo": "",
  506. "mobile": "",
  507. "name": "",
  508. "controllerList": []
  509. };
  510. },
  511. getContentStyle: function(contentNode, node){
  512. var position = this.propertyContentNode.getPosition(this.propertyContentNode.getOffsetParent());
  513. var size = this.propertyContentNode.getSize();
  514. contentNode.position({"relativeTo": node,"position": "upperLeft","edge": "upperLeft"});
  515. return {
  516. "top": ""+position.y+"px",
  517. "left": ""+position.x+"px",
  518. "height": ""+size.y+"px",
  519. "width": ""+size.x+"px"
  520. };
  521. },
  522. openPerson: function(data, node){
  523. this.openContent("PersonExplorer", "PersonContent", data, node);
  524. },
  525. openGroup: function(data, node){
  526. this.openContent("GroupExplorer", "GroupContent", data, node);
  527. },
  528. openUnit: function(data, node){
  529. this.openContent("UnitExplorer", "UnitContent", data, node);
  530. },
  531. openContent: function(explorerClazz, contentClazz, data, node){
  532. MWF.xDesktop.requireApp("Org", explorerClazz, function(){
  533. var contentNode = new Element("div", {"styles": this.css.popContentNode}).inject(this.propertyContentNode, "top");
  534. var to = this.getContentStyle(contentNode, node);
  535. var resize = true;
  536. new Fx.Morph(contentNode, {
  537. "duration": 300,
  538. "transition": Fx.Transitions.Expo.easeOut
  539. }).start(to).chain(function(){
  540. content.setContentSize();
  541. resize = false;
  542. contentNode.setStyles({"position": "static","width": "100%","height": "100%"});
  543. }.bind(this));
  544. var item = {
  545. "explorer": this,
  546. "style": this.css.item,
  547. "data": data,
  548. "isEdit": false,
  549. "refresh": function(){},
  550. "propertyContentNode": contentNode
  551. };
  552. var content = new MWF.xApplication.Org[explorerClazz][contentClazz](item, true);
  553. var timeoutResize = function(){
  554. content.setContentSize();
  555. if (resize)window.setTimeout(function(){timeoutResize();}, 30);
  556. };
  557. window.setTimeout(function(){timeoutResize();}, 30);
  558. }.bind(this));
  559. }
  560. });
  561. MWF.xApplication.Org.$Explorer.Item = new Class({
  562. //Extends: MWF.xApplication.Organization.GroupExplorer.Group,
  563. initialize: function(data, explorer, isEditor, i){
  564. this.i = i;
  565. this.data = data;
  566. this.explorer = explorer;
  567. this.listNode = this.explorer.listNode;
  568. this.propertyContentNode = this.explorer.propertyContentNode;
  569. this.initStyle();
  570. this.selectedAttributes = [];
  571. this.isEdit = false;
  572. this.isEditor = isEditor;
  573. this.deleteSelected = false;
  574. },
  575. initStyle: function(){
  576. this.style = this.explorer.css.item;
  577. },
  578. refresh: function(){
  579. this.iconNode.getElement("img").set("src", this._getIcon());
  580. this._loadTextNode();
  581. if (this.content){
  582. if (this.content.titleInfor) this.content.titleInfor.refresh();
  583. if (this.content.bottomInfor) this.content.bottomInfor.refresh();
  584. }
  585. this.addActions();
  586. },
  587. load: function(){
  588. this.node = new Element("div", {"styles": this.style.node}).inject(this.listNode);
  589. // if (this.i<10){
  590. // var r = (59+((255-59)*this.i)/10).toInt();
  591. // var g = (118+((255-118)*this.i)/10).toInt();
  592. // var b = (182+((255-182)*this.i)/10).toInt();
  593. // this.node.setStyle("background-color", "rgb("+r+","+g+","+b+")");
  594. // }
  595. this.contentNode = new Element("div", {"styles": this.style.contentNode}).inject(this.node);
  596. this.iconNode = new Element("div", {"styles": this.style.iconNode}).inject(this.contentNode);
  597. var src = this._getIcon();
  598. var img = new Element("img", {
  599. "styles": this.style.iconImgNode,
  600. "src": src
  601. }).inject(this.iconNode);
  602. this.actionNode = new Element("div", {"styles": this.style.actionNode}).inject(this.contentNode);
  603. this.textNode = new Element("div", {"styles": this.style.textNode}).inject(this.contentNode);
  604. this._loadTextNode();
  605. this.setNewItem();
  606. this.node.inject(this.listNode);
  607. this.addActions();
  608. this.setEvent();
  609. },
  610. setNewItem: function(){
  611. if (!this.created){
  612. if (!this.data.id){
  613. this.created = false;
  614. this.contentNode.setStyles(this.style.contentNodeNew);
  615. }else {
  616. this.created = true;
  617. this.contentNode.setStyles(this.style.contentNode);
  618. }
  619. }
  620. },
  621. addActions: function(){
  622. if (this.isEditor){
  623. if (this.data.id){
  624. if (this.data.control.allowDelete){
  625. if (!this.deleteNode){
  626. this.deleteNode = new Element("div", {"styles": this.style.actionDeleteNode}).inject(this.actionNode);
  627. this.deleteNode.addEvent("click", function(e){
  628. if (!this.notDelete){
  629. if (!this.deleteSelected){
  630. this.setDelete();
  631. }else{
  632. this.setUndelete();
  633. }
  634. }
  635. e.stopPropagation();
  636. }.bind(this));
  637. if (this.explorer.currentItem===this){
  638. if (this.deleteNode) this.deleteNode.setStyles(this.style.actionDeleteNode_selected);
  639. }
  640. }
  641. }
  642. }
  643. }
  644. },
  645. setDelete: function(){
  646. this.actionNode.fade("in");
  647. this.deleteNode.setStyles(this.style.actionDeleteNode_delete);
  648. this.contentNode.setStyles(this.style.contentNode_delete);
  649. this.textNode.setStyles(this.style.textNode);
  650. this.explorer.deleteElements.push(this);
  651. this.deleteSelected = true;
  652. this.explorer.checkDeleteElements(this);
  653. },
  654. setUndelete: function(){
  655. this.actionNode.fade("out");
  656. if (this.explorer.currentItem!==this){
  657. this.deleteNode.setStyles(this.style.actionDeleteNode);
  658. this.contentNode.setStyles(this.style.contentNode);
  659. this.textNode.setStyles(this.style.textNode);
  660. }else{
  661. this.contentNode.setStyles(this.style.contentNode_selected);
  662. this.textNode.setStyles(this.style.textNode_selected);
  663. this.actionNode.setStyles(this.style.actionNode_selected);
  664. if (this.deleteNode) this.deleteNode.setStyles(this.style.actionDeleteNode_selected);
  665. }
  666. this.explorer.deleteElements.erase(this);
  667. this.deleteSelected = false;
  668. this.explorer.checkDeleteElements(this);
  669. },
  670. setEvent: function(){
  671. this.contentNode.addEvents({
  672. "mouseover": function(e){
  673. if (this.explorer.currentItem!==this && !this.deleteSelected){
  674. this.contentNode.setStyles(this.style.nodeOver);
  675. if (!this.deleteSelected) if (this.data.id) this.actionNode.fade("in");
  676. }
  677. }.bind(this),
  678. "mouseout": function(e){
  679. if (this.explorer.currentItem!==this && !this.deleteSelected){
  680. this.contentNode.setStyles(this.style.contentNode);
  681. if (!this.deleteSelected) if (this.data.id) this.actionNode.fade("out");
  682. }
  683. }.bind(this),
  684. "click": function(e){
  685. if (!this.deleteSelected){
  686. if (this.explorer.currentItem){
  687. if (this.explorer.currentItem.unSelected()){
  688. this.selected();
  689. }else{
  690. this.explorer.app.notice(this.explorer.options.lp.elementSave, "error", this.propertyContentNode);
  691. }
  692. }else{
  693. this.selected();
  694. }
  695. }
  696. }.bind(this)
  697. });
  698. },
  699. unSelected: function(){
  700. if (this.content.baseInfor.mode==="edit") return false;
  701. if (!this.deleteSelected){
  702. this.explorer.currentItem = null;
  703. this.contentNode.setStyles(this.style.contentNode);
  704. this.textNode.setStyles(this.style.textNode);
  705. this.actionNode.setStyles(this.style.actionNode);
  706. if (this.deleteNode) this.deleteNode.setStyles(this.style.actionDeleteNode);
  707. }
  708. this.clearItemProperty();
  709. return true;
  710. },
  711. clearItemProperty: function(){
  712. this.explorer.propertyTitleNode.empty();
  713. if (this.content) this.content.destroy();
  714. this.explorer.propertyContentNode.empty();
  715. },
  716. selected: function(){
  717. this.explorer.currentItem = this;
  718. this.contentNode.setStyles(this.style.contentNode_selected);
  719. this.textNode.setStyles(this.style.textNode_selected);
  720. this.actionNode.setStyles(this.style.actionNode_selected);
  721. if (this.deleteNode) this.deleteNode.setStyles(this.style.actionDeleteNode_selected);
  722. this.showItemProperty();
  723. },
  724. editBaseInfor: function(){
  725. this.content.edit();
  726. },
  727. showItemProperty: function(){
  728. this.content = new MWF.xApplication.Org.PersonExplorer.PersonContent(this);
  729. },
  730. destroy: function(){
  731. if (this.explorer.currentItem===this){
  732. this.explorer.currentItem = null;
  733. this.clearItemProperty();
  734. }
  735. this.node.destroy();
  736. delete this;
  737. },
  738. "delete": function(success, failure){
  739. this.explorer.actions.deletePerson(this.data.id, function(){
  740. this.destroy();
  741. if (success) success();
  742. }.bind(this), function(xhr, text, error){
  743. var errorText = error;
  744. if (xhr) errorText = xhr.responseText;
  745. MWF.xDesktop.notice("error", {x: "right", y:"top"}, "request json error: "+errorText);
  746. if (failure) failure();
  747. });
  748. },
  749. _loadTextNode: function(){
  750. this.textNode.set({"text": this.data.name});
  751. },
  752. _getIcon: function(nocache){
  753. var url = (this.data.id) ? this.explorer.actions.getPersonIcon(this.data.id) : "../x_component_Org/$Explorer/default/icon/man.png";
  754. return (nocache) ? url+"?"+(new Date().getTime()) : url;
  755. //return (this.data.id) ? this.explorer.actions.getPersonIcon(this.data.id) : "../x_component_Org/$Explorer/default/icon/man.png";
  756. // var src = "data:image/png;base64,"+this.data.icon;
  757. // if (!this.data.icon){
  758. // if (this.data.genderType==="f"){
  759. // src = "../x_component_Org/$Explorer/default/icon/female24.png"
  760. // }else{
  761. // src = "../x_component_Org/$Explorer/default/icon/man24.png"
  762. // }
  763. // }
  764. // return src;
  765. }
  766. });
  767. MWF.xApplication.Org.$Explorer.ItemContent = new Class({
  768. initialize: function (item, isClose) {
  769. this.item = item;
  770. this.isClose = isClose;
  771. this.explorer = this.item.explorer;
  772. this.contentNode = this.item.propertyContentNode;
  773. this.style = this.item.style.person;
  774. this.load();
  775. },
  776. _getData: function(callback){
  777. this.data = this.item.data;
  778. if (callback) callback();
  779. },
  780. load: function(){
  781. this.titleContentNode = new Element("div").inject(this.contentNode);
  782. this.propertyContentScrollNode = new Element("div", {"styles": {"overflow": "hidden"}}).inject(this.contentNode);
  783. this.propertyContentNode = new Element("div", {"styles": {"overflow": "hidden"}}).inject(this.propertyContentScrollNode);
  784. this.bottomContentNode = new Element("div").inject(this.contentNode);
  785. this._getData(function(){
  786. this.explorer.propertyTitleNode.set("text", this.data.name);
  787. this._showItemPropertyTitle();
  788. this.loadItemPropertyTab(function(){
  789. this._loadTabs();
  790. this._loadContent();
  791. if (this.propertyTab.pages.length) this.propertyTab.pages[0].showTabIm();
  792. }.bind(this));
  793. this._showItemPropertyBottom();
  794. this.setContentSizeFun = this.setContentSize.bind(this);
  795. this.setContentSize();
  796. this.explorer.app.addEvent("resize", this.setContentSizeFun);
  797. new MWF.widget.ScrollBar(this.propertyContentScrollNode, {
  798. "style":"xApp_Organization_Explorer", "where": "before", "distance": 100, "friction": 4, "axis": {"x": false, "y": true}
  799. });
  800. }.bind(this));
  801. //this.showItemPropertyTitle();
  802. },
  803. setContentSize: function(){
  804. var size = this.contentNode.getSize();
  805. var titleSize = this.titleContentNode.getSize();
  806. var bottomSize = this.bottomContentNode.getSize();
  807. var y = size.y-titleSize.y-bottomSize.y;
  808. this.propertyContentScrollNode.setStyle("height", ""+y+"px")
  809. },
  810. loadItemPropertyTab: function(callback){
  811. this.propertyTabContainerNode = new Element("div", {"styles": this.item.style.tabTitleNode}).inject(this.propertyContentNode, "top");
  812. MWF.require("MWF.widget.Tab", function(){
  813. this.propertyTab = new MWF.widget.Tab(this.propertyContentNode, {"style": "org"});
  814. this.propertyTab.load();
  815. this.propertyTab.tabNodeContainer.inject(this.propertyTabContainerNode);
  816. if (callback) callback();
  817. }.bind(this));
  818. },
  819. edit: function(){
  820. if (this.baseInfor) this.baseInfor.edit();
  821. },
  822. destroy: function(){
  823. if (this.setContentSizeFun) this.explorer.app.removeEvent("resize", this.setContentSizeFun);
  824. if (this.titleInfor) this.titleInfor.destroy();
  825. if (this.bottomInfor) this.bottomInfor.destroy();
  826. if (this.baseInfor) this.baseInfor.destroy();
  827. this.contentNode.empty();
  828. MWF.release(this);
  829. },
  830. _showItemPropertyTitle: function(){
  831. this.titleInfor = new MWF.xApplication.Org.$Explorer.ItemContent.TitleInfor(this);
  832. },
  833. _showItemPropertyBottom: function(){
  834. this.bottomInfor = new MWF.xApplication.Org.$Explorer.ItemContent.BottmInfor(this);
  835. },
  836. _loadTabs: function(){},
  837. _loadContent: function(){}
  838. });
  839. MWF.xApplication.Org.$Explorer.ItemContent.TitleInfor = new Class({
  840. initialize: function (content) {
  841. this.content = content;
  842. this.item = content.item;
  843. this.data = this.content.data;
  844. this.explorer = this.item.explorer;
  845. this.contentNode = this.content.titleContentNode;
  846. this.style = this._getStyle();
  847. this.load();
  848. },
  849. _getStyle: function(){
  850. return this.item.style.person;
  851. },
  852. load: function(){
  853. this.titleBgNode = new Element("div", {"styles": this.style.titleBgNode}).inject(this.contentNode);
  854. this.titleNode = new Element("div", {"styles": this.style.titleNode}).inject(this.titleBgNode);
  855. this.setBackground();
  856. this.titleInforNode = new Element("div#titleInfor", {"styles": this.style.titleInforNode}).inject(this.titleNode);
  857. this.titleInforLeftNode = new Element("div", {"styles": this.style.titleInforLeftNode}).inject(this.titleInforNode);
  858. this.titleInforRightNode = new Element("div", {"styles": this.style.titleInforRightNode}).inject(this.titleInforNode);
  859. this.loadLeftInfor();
  860. this.loadRightInfor();
  861. this.loadAction();
  862. if (this.content.isClose) this.createCloseNode();
  863. },
  864. createCloseNode: function(){
  865. this.closeNode = new Element("div", {"styles": this.style.titleCloseNode}).inject(this.titleBgNode);
  866. this.closeNode.addEvents({
  867. "mousedown": function(){this.closeNode.setStyles(this.style.titleCloseNode_down)}.bind(this),
  868. "mouseup": function(){this.closeNode.setStyles(this.style.titleCloseNode)}.bind(this),
  869. "click": function(){
  870. var node = this.content.contentNode;
  871. this.content.destroy();
  872. node.destroy();
  873. node = null;
  874. }.bind(this)
  875. });
  876. },
  877. setBackground: function(){
  878. this.titleBgNode.setStyle("background-image", "url(../x_component_Org/$Explorer/"+this.explorer.app.options.style+"/icon/person_bg_bg.png)");
  879. this.titleNode.setStyle("background-image", "url(../x_component_Org/$Explorer/"+this.explorer.app.options.style+"/icon/person_bg.png)");
  880. },
  881. loadLeftInfor: function(){
  882. if (!this.iconAreaNode) this.iconAreaNode = new Element("div", {"styles": this.style.titleInforIconAreaNode}).inject(this.titleInforLeftNode);
  883. if (!this.iconNode) this.iconNode = new Element("img", {"styles": this.style.titleInforIconNode}).inject(this.iconAreaNode);
  884. this.iconNode.set("src", this._getIcon());
  885. },
  886. _getIcon: function(nocache){
  887. var url = (this.data.id) ? this.explorer.actions.getPersonIcon(this.data.id) : "../x_component_Org/$Explorer/default/icon/man.png";
  888. return (nocache) ? url+"?"+(new Date().getTime()) : url;
  889. // var src = "data:image/png;base64,"+this.data.icon;
  890. // if (!this.data.icon){
  891. // if (this.data.genderType==="f"){
  892. // src = "../x_component_Org/$Explorer/default/icon/female.png"
  893. // }else{
  894. // src = "../x_component_Org/$Explorer/default/icon/man.png"
  895. // }
  896. // }
  897. // return src;
  898. },
  899. loadRightInfor: function(){
  900. var text = this.data.name+((this.data.employee) ? "("+this.data.employee+")" : "");
  901. if (!this.nameNode) this.nameNode = new Element("div", {"styles": this.style.titleInforNameNode}).inject(this.titleInforRightNode);
  902. if (!this.signatureNode) this.signatureNode = new Element("div", {"styles": this.style.titleInforSignatureNode}).inject(this.titleInforRightNode);
  903. this.nameNode.set("text", text);
  904. this.signatureNode.set("text", (this.data.signature || "" ));
  905. },
  906. refresh: function(){
  907. this.loadLeftInfor();
  908. this.loadRightInfor();
  909. },
  910. loadAction: function(){},
  911. destroy: function(){
  912. this.contentNode.empty();
  913. MWF.release(this);
  914. }
  915. });
  916. MWF.xApplication.Org.$Explorer.ItemContent.BottomInfor = new Class({
  917. initialize: function (content) {
  918. this.content = content;
  919. this.item = content.item;
  920. this.data = this.content.data;
  921. this.explorer = this.item.explorer;
  922. this.contentNode = this.content.bottomContentNode;
  923. this.style = this._getStyle();
  924. this.load();
  925. },
  926. _getStyle: function(){
  927. return this.item.style.person;
  928. },
  929. load: function(){
  930. this.readContentNode = new Element("div", {"styles": this.style.baseReadNode}).inject(this.contentNode);
  931. this.addInforList();
  932. },
  933. addInfor: function(text){
  934. return new Element("div", {"styles": this.style.baseReadContentNode, "text": text}).inject(this.readContentNode);
  935. },
  936. addInforList: function(){},
  937. refresh: function(){
  938. this.readContentNode.empty();
  939. this.addInforList();
  940. },
  941. destroy: function(){
  942. this.readContentNode.empty();
  943. this.readContentNode.destroy();
  944. MWF.release(this);
  945. }
  946. });