$Explorer.js 41 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035
  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. debugger;
  219. var key = this.searchInputNode.get("value");
  220. var isSearchElement = true;
  221. this.searching = false;
  222. if (key){
  223. if (key!==this.options.lp.searchText){
  224. if (this.currentItem) isSearchElement = this.currentItem.unSelected();
  225. if (isSearchElement){
  226. this._listElementByKey(function(json){
  227. if (this.currentItem) this.currentItem.unSelected();
  228. this.clear();
  229. json.data.each(function(itemData){
  230. var item = this._newElement(itemData, this);
  231. item.load();
  232. }.bind(this));
  233. this.searching = true;
  234. }.bind(this), null, key);
  235. }else{
  236. this.app.notice(this.options.lp.elementSave, "error", this.propertyContentNode);
  237. }
  238. }else{
  239. if (this.currentItem) isSearchElement = this.currentItem.unSelected();
  240. if (isSearchElement){
  241. this.clear();
  242. this.reloadElements();
  243. }else{
  244. this.app.notice(this.options.lp.elementSave, "error", this.propertyContentNode);
  245. }
  246. }
  247. }else{
  248. if (this.currentItem) isSearchElement = this.currentItem.unSelected();
  249. if (isSearchElement){
  250. this.clear();
  251. this.reloadElements();
  252. }else{
  253. this.app.notice(this.options.lp.elementSave, "error", this.propertyContentNode);
  254. }
  255. }
  256. },
  257. resizePropertyContentNode: function(){
  258. var size = this.node.getSize();
  259. var tSize = this.propertyTitleNode.getSize();
  260. var mtt = this.propertyTitleNode.getStyle("margin-top").toFloat();
  261. var mbt = this.propertyTitleNode.getStyle("margin-bottom").toFloat();
  262. var mtc = this.propertyContentNode.getStyle("margin-top").toFloat();
  263. var mbc = this.propertyContentNode.getStyle("margin-bottom").toFloat();
  264. var height = size.y-tSize.y-mtt-mbt-mtc-mbc;
  265. this.propertyContentNode.setStyle("height", height);
  266. tSize = this.toolbarNode.getSize();
  267. mtt = this.toolbarNode.getStyle("margin-top").toFloat();
  268. mbt = this.toolbarNode.getStyle("margin-bottom").toFloat();
  269. mtc = this.toolbarNode.getStyle("margin-top").toFloat();
  270. mbc = this.toolbarNode.getStyle("margin-bottom").toFloat();
  271. height = size.y-tSize.y-mtt-mbt-mtc-mbc;
  272. this.listScrollNode.setStyle("height", ""+height+"px");
  273. if (this.pingyinNode){
  274. this.setPingyinNodePosition();
  275. this.pingyinNode.setStyle("height", ""+size.y+"px");
  276. }
  277. },
  278. loadScroll: function(){
  279. MWF.require("MWF.widget.ScrollBar", function(){
  280. var _self = this;
  281. new MWF.widget.ScrollBar(this.listScrollNode, {
  282. "style":"xApp_Organization_Explorer",
  283. "where": "before",
  284. "distance": 100,
  285. "friction": 4,
  286. "axis": {"x": false, "y": true},
  287. "onScroll": function(y){
  288. if( _self.searching )return;
  289. var scrollSize = _self.listScrollNode.getScrollSize();
  290. var clientSize = _self.listScrollNode.getSize();
  291. var scrollHeight = scrollSize.y-clientSize.y;
  292. if (y+200>scrollHeight) {
  293. if (!_self.isElementLoaded) _self.loadElements();
  294. }
  295. }
  296. });
  297. // new MWF.widget.ScrollBar(this.propertyContentNode, {
  298. // "style":"xApp_Organization_Explorer", "where": "before", "distance": 100, "friction": 4, "axis": {"x": false, "y": true}
  299. // });
  300. }.bind(this));
  301. },
  302. loadResize: function(){
  303. this.propertyResize = new Drag(this.resizeBarNode,{
  304. "snap": 1,
  305. "onStart": function(el, e){
  306. var x = e.event.clientX;
  307. var y = e.event.clientY;
  308. el.store("position", {"x": x, "y": y});
  309. var size = this.listAreaNode.getSize();
  310. el.store("initialWidth", size.x);
  311. }.bind(this),
  312. "onDrag": function(el, e){
  313. var x = e.event.clientX;
  314. // var y = e.event.y;
  315. var bodySize = this.node.getSize();
  316. var position = el.retrieve("position");
  317. var initialWidth = el.retrieve("initialWidth").toFloat();
  318. var dx = position.x.toFloat()-x.toFloat();
  319. var width = initialWidth-dx;
  320. if (width> bodySize.x/1.5) width = bodySize.x/1.5;
  321. if (width<300) width = 300;
  322. this.listAreaNode.setStyle("width", width+1);
  323. this.propertyAreaNode.setStyle("margin-left", width);
  324. }.bind(this)
  325. });
  326. },
  327. getPageNodeCount: function(){
  328. var size = this.listScrollNode.getSize();
  329. return (size.y / 50).toInt() + 5;
  330. },
  331. loadList: function(){
  332. this.loadElements();
  333. this.continueLoadFun = this.continueLoad.bind(this);
  334. this.app.addEvent("resize", this.continueLoadFun);
  335. },
  336. continueLoad: function(){
  337. if (this.elements.length<this.getPageNodeCount()){
  338. this.loadElements(true);
  339. }
  340. },
  341. reloadElements : function(){
  342. this.elements = [];
  343. this.clear();
  344. this.loadElements();
  345. },
  346. loadElements: function(addToNext){
  347. if (!this.isElementLoaded){
  348. if (!this.loaddingElement){
  349. this.loaddingElement = true;
  350. var count = this.getPageNodeCount();
  351. this._listElementNext(this.getLastLoadedElementId(), count, function(json){
  352. if (json.data.length){
  353. this.loadListContent(json.data);
  354. this.loaddingElement = false;
  355. if (json.data.length<count){
  356. this.isElementLoaded = true;
  357. this.app.notice(this.options.lp.elementLoaded, "ok", this.listScrollNode, {"x": "center", "y": "bottom"});
  358. }else{
  359. if (this.loadElementQueue>0){
  360. this.loadElementQueue--;
  361. this.loadElements();
  362. }
  363. }
  364. }else{
  365. if (!this.elements.length){
  366. //this.setNoGroupNoticeArea();
  367. }else{
  368. this.app.notice(this.options.lp.elementLoaded, "ok", this.listScrollNode, {"x": "center", "y": "bottom"});
  369. }
  370. this.isElementLoaded = true;
  371. this.loaddingElement = false;
  372. }
  373. }.bind(this));
  374. }else{
  375. if (addToNext) this.loadElementQueue++;
  376. }
  377. }
  378. },
  379. getLastLoadedElementId: function(){
  380. return (this.elements.length) ? this.elements[this.elements.length-1].data.id : "";
  381. },
  382. loadListContent: function(data){
  383. data.each(function(itemData, i){
  384. var item = this._newElement(itemData, this, i);
  385. this.elements.push(item);
  386. item.load();
  387. if (this.elements.length===1) item.selected();
  388. }.bind(this));
  389. },
  390. setNoElementNoticeArea: function(){
  391. //没有数据时的提示
  392. },
  393. checkDeleteElements: function(item){
  394. if (this.deleteElements.length){
  395. if (!this.deleteElementsNode){
  396. this.deleteElementsNode = new Element("div", {"styles": this.css.deleteElementsNode}).inject(this.node);
  397. this.deleteElementsDeleteNode = new Element("div", {"styles": this.css.deleteElementsDeleteNode,"text": this.options.lp.deleteElements}).inject(this.deleteElementsNode);
  398. this.deleteElementsCancelNode = new Element("div", {"styles": this.css.deleteElementsCancelNode,"text": this.options.lp.deleteElementsCancel}).inject(this.deleteElementsNode);
  399. this.deleteElementsDeleteNode.addEvent("click", function(e){this.deleteSelectedElements(e);}.bind(this));
  400. this.deleteElementsCancelNode.addEvent("click", function(e){this.deleteSelectedElementsCancel(e);}.bind(this));
  401. }
  402. this.deleteElementsNode.position({
  403. relativeTo: (item) ? item.node : this.toolbarNode,
  404. position: "topRight",
  405. edge: "topLeft"
  406. });
  407. }else{
  408. if (this.deleteElementsNode){
  409. this.deleteElementsNode.destroy();
  410. this.deleteElementsNode = null;
  411. delete this.deleteElementsNode;
  412. }
  413. }
  414. },
  415. deleteSelectedElements: function(e){
  416. var _self = this;
  417. this.app.confirm("infor", e, this.options.lp.deleteElementsTitle, this.options.lp.deleteElementsConfirm, 300, 120, function(){
  418. var deleted = [];
  419. var doCount = 0;
  420. var readyCount = _self.deleteElements.length;
  421. var errorText = "";
  422. var complete;
  423. complete = function () {
  424. if (doCount === readyCount) {
  425. if (errorText) {
  426. _self.app.notice(errorText, "error", _self.propertyContentNode, {x: "left", y: "top"});
  427. }
  428. }
  429. };
  430. _self.deleteElements.each(function(element){
  431. element["delete"](function(){
  432. deleted.push(element);
  433. doCount++;
  434. if (_self.deleteElements.length===doCount){
  435. _self.deleteElements = _self.deleteElements.filter(function (item) {
  436. return !deleted.contains(item);
  437. });
  438. _self.checkDeleteElements();
  439. }
  440. complete();
  441. }, function(error){
  442. errorText = (errorText) ? errorText+"<br/><br/>"+error : error;
  443. doCount++;
  444. if (_self.deleteElements.length !== doCount) {
  445. } else {
  446. _self.deleteElements = _self.deleteElements.filter(function (item) {
  447. return !deleted.contains(item);
  448. });
  449. _self.checkDeleteElements();
  450. }
  451. complete();
  452. });
  453. });
  454. this.close();
  455. }, function(){
  456. this.close();
  457. });
  458. },
  459. deleteSelectedElementsCancel: function() {
  460. while (this.deleteElements.length){
  461. var element = this.deleteElements[0];
  462. element.setUndelete();
  463. //if (element.deleteNode) element.deleteNode.click();
  464. if (this.currentItem!==element){
  465. element.contentNode.setStyles(element.style.contentNode);
  466. if (element.data.id) element.actionNode.fade("out");
  467. }
  468. }
  469. this.checkDeleteElements();
  470. },
  471. destroy: function(){
  472. if (this.hidePingyinFun) this.app.content.removeEvent("mousedown", this.hidePingyinFun);
  473. if (this.resizePropertyContentNodeFun) this.app.removeEvent("resize", this.resizePropertyContentNodeFun);
  474. if (this.continueLoadFun) this.app.removeEvent("resize", this.continueLoadFun);
  475. if (this.removePingyinFun) this.app.removeEvent("queryClose", this.removePingyinFun);
  476. MWF.release(this);
  477. },
  478. _isActionManager: function(){
  479. return MWF.AC.isOrganizationManager();
  480. },
  481. _listElementNext: function(lastid, count, callback){
  482. this.actions.listPersonNext(lastid, count, function(json){
  483. if (callback) {
  484. callback.apply(this, [json]);
  485. }
  486. }.bind(this));
  487. },
  488. _newElement: function(data, explorer, i){
  489. return new MWF.xApplication.Org.PersonExplorer.Person(data, explorer, this.isEditor, i);
  490. },
  491. _listElementByKey: function(callback, failure, key){
  492. this.actions.listPersonByKey(function(json){
  493. if (callback) {
  494. callback.apply(this, [json]);
  495. }
  496. }.bind(this), failure, key);
  497. },
  498. _getAddElementData: function(){
  499. return {
  500. "employee": "",
  501. "password": "",
  502. "display": "",
  503. "qq": "",
  504. "mail": "",
  505. "weixin": "",
  506. "weibo": "",
  507. "mobile": "",
  508. "name": "",
  509. "controllerList": []
  510. };
  511. },
  512. getContentStyle: function(contentNode, node){
  513. var position = this.propertyContentNode.getPosition(this.propertyContentNode.getOffsetParent());
  514. var size = this.propertyContentNode.getSize();
  515. contentNode.position({"relativeTo": node,"position": "upperLeft","edge": "upperLeft"});
  516. return {
  517. "top": ""+position.y+"px",
  518. "left": ""+position.x+"px",
  519. "height": ""+size.y+"px",
  520. "width": ""+size.x+"px"
  521. };
  522. },
  523. openPerson: function(data, node){
  524. this.openContent("PersonExplorer", "PersonContent", data, node);
  525. },
  526. openGroup: function(data, node){
  527. this.openContent("GroupExplorer", "GroupContent", data, node);
  528. },
  529. openUnit: function(data, node){
  530. this.openContent("UnitExplorer", "UnitContent", data, node);
  531. },
  532. openRole: function(data, node){
  533. this.openContent("RoleExplorer", "RoleContent", data, node);
  534. },
  535. openContent: function(explorerClazz, contentClazz, data, node){
  536. MWF.xDesktop.requireApp("Org", explorerClazz, function(){
  537. var contentNode = new Element("div", {"styles": this.css.popContentNode}).inject(this.propertyContentNode, "top");
  538. var to = this.getContentStyle(contentNode, node);
  539. var resize = true;
  540. new Fx.Morph(contentNode, {
  541. "duration": 300,
  542. "transition": Fx.Transitions.Expo.easeOut
  543. }).start(to).chain(function(){
  544. content.setContentSize();
  545. resize = false;
  546. contentNode.setStyles({"position": "static","width": "100%","height": "100%"});
  547. }.bind(this));
  548. var item = {
  549. "explorer": this,
  550. "style": this.css.item,
  551. "data": data,
  552. "isEdit": false,
  553. "refresh": function(){},
  554. "propertyContentNode": contentNode
  555. };
  556. var content = new MWF.xApplication.Org[explorerClazz][contentClazz](item, true);
  557. var timeoutResize = function(){
  558. content.setContentSize();
  559. if (resize)window.setTimeout(function(){timeoutResize();}, 30);
  560. };
  561. window.setTimeout(function(){timeoutResize();}, 30);
  562. }.bind(this));
  563. }
  564. });
  565. MWF.xApplication.Org.$Explorer.Item = new Class({
  566. //Extends: MWF.xApplication.Organization.GroupExplorer.Group,
  567. initialize: function(data, explorer, isEditor, i){
  568. this.i = i;
  569. this.data = data;
  570. this.explorer = explorer;
  571. this.listNode = this.explorer.listNode;
  572. this.propertyContentNode = this.explorer.propertyContentNode;
  573. this.initStyle();
  574. this.selectedAttributes = [];
  575. this.isEdit = false;
  576. this.isEditor = isEditor;
  577. this.deleteSelected = false;
  578. },
  579. initStyle: function(){
  580. this.style = this.explorer.css.item;
  581. },
  582. refresh: function(){
  583. this.iconNode.getElement("img").set("src", this._getIcon());
  584. this._loadTextNode();
  585. if (this.content){
  586. if (this.content.titleInfor) this.content.titleInfor.refresh();
  587. if (this.content.bottomInfor) this.content.bottomInfor.refresh();
  588. }
  589. this.addActions();
  590. },
  591. load: function(){
  592. this.node = new Element("div", {"styles": this.style.node}).inject(this.listNode);
  593. // if (this.i<10){
  594. // var r = (59+((255-59)*this.i)/10).toInt();
  595. // var g = (118+((255-118)*this.i)/10).toInt();
  596. // var b = (182+((255-182)*this.i)/10).toInt();
  597. // this.node.setStyle("background-color", "rgb("+r+","+g+","+b+")");
  598. // }
  599. this.contentNode = new Element("div", {"styles": this.style.contentNode}).inject(this.node);
  600. this.iconNode = new Element("div", {"styles": this.style.iconNode}).inject(this.contentNode);
  601. var src = this._getIcon();
  602. var img = new Element("img", {
  603. "styles": this.style.iconImgNode,
  604. "src": src
  605. }).inject(this.iconNode);
  606. this.actionNode = new Element("div", {"styles": this.style.actionNode}).inject(this.contentNode);
  607. this.textNode = new Element("div", {"styles": this.style.textNode}).inject(this.contentNode);
  608. this._loadTextNode();
  609. this.setNewItem();
  610. this.node.inject(this.listNode);
  611. this.addActions();
  612. this.setEvent();
  613. },
  614. setNewItem: function(){
  615. if (!this.created){
  616. if (!this.data.id){
  617. this.created = false;
  618. this.contentNode.setStyles(this.style.contentNodeNew);
  619. }else {
  620. this.created = true;
  621. this.contentNode.setStyles(this.style.contentNode);
  622. }
  623. }
  624. },
  625. addActions: function(){
  626. if (this.isEditor){
  627. if (this.data.id){
  628. if (this.data.control.allowDelete){
  629. if (!this.deleteNode){
  630. this.deleteNode = new Element("div", {"styles": this.style.actionDeleteNode}).inject(this.actionNode);
  631. this.deleteNode.addEvent("click", function(e){
  632. if (!this.notDelete){
  633. if (!this.deleteSelected){
  634. this.setDelete();
  635. }else{
  636. this.setUndelete();
  637. }
  638. }
  639. e.stopPropagation();
  640. }.bind(this));
  641. if (this.explorer.currentItem===this){
  642. if (this.deleteNode) this.deleteNode.setStyles(this.style.actionDeleteNode_selected);
  643. }
  644. }
  645. }
  646. }
  647. }
  648. },
  649. setDelete: function(){
  650. this.actionNode.fade("in");
  651. this.deleteNode.setStyles(this.style.actionDeleteNode_delete);
  652. this.contentNode.setStyles(this.style.contentNode_delete);
  653. this.textNode.setStyles(this.style.textNode);
  654. this.explorer.deleteElements.push(this);
  655. this.deleteSelected = true;
  656. this.explorer.checkDeleteElements(this);
  657. },
  658. setUndelete: function(){
  659. this.actionNode.fade("out");
  660. if (this.explorer.currentItem!==this){
  661. this.deleteNode.setStyles(this.style.actionDeleteNode);
  662. this.contentNode.setStyles(this.style.contentNode);
  663. this.textNode.setStyles(this.style.textNode);
  664. }else{
  665. this.contentNode.setStyles(this.style.contentNode_selected);
  666. this.textNode.setStyles(this.style.textNode_selected);
  667. this.actionNode.setStyles(this.style.actionNode_selected);
  668. if (this.deleteNode) this.deleteNode.setStyles(this.style.actionDeleteNode_selected);
  669. }
  670. this.explorer.deleteElements.erase(this);
  671. this.deleteSelected = false;
  672. this.explorer.checkDeleteElements(this);
  673. },
  674. setEvent: function(){
  675. this.contentNode.addEvents({
  676. "mouseover": function(e){
  677. if (this.explorer.currentItem!==this && !this.deleteSelected){
  678. this.contentNode.setStyles(this.style.nodeOver);
  679. if (!this.deleteSelected) if (this.data.id) this.actionNode.fade("in");
  680. }
  681. }.bind(this),
  682. "mouseout": function(e){
  683. if (this.explorer.currentItem!==this && !this.deleteSelected){
  684. this.contentNode.setStyles(this.style.contentNode);
  685. if (!this.deleteSelected) if (this.data.id) this.actionNode.fade("out");
  686. }
  687. }.bind(this),
  688. "click": function(e){
  689. if (!this.deleteSelected){
  690. if (this.explorer.currentItem){
  691. if (this.explorer.currentItem.unSelected()){
  692. this.selected();
  693. }else{
  694. this.explorer.app.notice(this.explorer.options.lp.elementSave, "error", this.propertyContentNode);
  695. }
  696. }else{
  697. this.selected();
  698. }
  699. }
  700. }.bind(this)
  701. });
  702. },
  703. unSelected: function(){
  704. if (this.content.baseInfor.mode==="edit") return false;
  705. if (!this.deleteSelected){
  706. this.explorer.currentItem = null;
  707. this.contentNode.setStyles(this.style.contentNode);
  708. this.textNode.setStyles(this.style.textNode);
  709. this.actionNode.setStyles(this.style.actionNode);
  710. if (this.deleteNode) this.deleteNode.setStyles(this.style.actionDeleteNode);
  711. }
  712. this.clearItemProperty();
  713. return true;
  714. },
  715. clearItemProperty: function(){
  716. this.explorer.propertyTitleNode.empty();
  717. if (this.content) this.content.destroy();
  718. this.explorer.propertyContentNode.empty();
  719. },
  720. selected: function(){
  721. this.explorer.currentItem = this;
  722. this.contentNode.setStyles(this.style.contentNode_selected);
  723. this.textNode.setStyles(this.style.textNode_selected);
  724. this.actionNode.setStyles(this.style.actionNode_selected);
  725. if (this.deleteNode) this.deleteNode.setStyles(this.style.actionDeleteNode_selected);
  726. this.showItemProperty();
  727. },
  728. editBaseInfor: function(){
  729. this.content.edit();
  730. },
  731. showItemProperty: function(){
  732. this.content = new MWF.xApplication.Org.PersonExplorer.PersonContent(this);
  733. },
  734. destroy: function(){
  735. if (this.explorer.currentItem===this){
  736. this.explorer.currentItem = null;
  737. this.clearItemProperty();
  738. }
  739. this.node.destroy();
  740. delete this;
  741. },
  742. "delete": function(success, failure){
  743. this.explorer.actions.deletePerson(this.data.id, function(){
  744. this.destroy();
  745. if (success) success();
  746. }.bind(this), function(xhr, text, error){
  747. var errorText = error;
  748. if (xhr) errorText = xhr.responseText;
  749. MWF.xDesktop.notice("error", {x: "right", y:"top"}, "request json error: "+errorText);
  750. if (failure) failure();
  751. });
  752. },
  753. _loadTextNode: function(){
  754. this.textNode.set({"text": this.data.name});
  755. },
  756. _getIcon: function(nocache){
  757. var url = (this.data.id) ? this.explorer.actions.getPersonIcon(this.data.id) : "../x_component_Org/$Explorer/default/icon/man.png";
  758. return (nocache) ? url+"?"+(new Date().getTime()) : url;
  759. //return (this.data.id) ? this.explorer.actions.getPersonIcon(this.data.id) : "../x_component_Org/$Explorer/default/icon/man.png";
  760. // var src = "data:image/png;base64,"+this.data.icon;
  761. // if (!this.data.icon){
  762. // if (this.data.genderType==="f"){
  763. // src = "../x_component_Org/$Explorer/default/icon/female24.png"
  764. // }else{
  765. // src = "../x_component_Org/$Explorer/default/icon/man24.png"
  766. // }
  767. // }
  768. // return src;
  769. }
  770. });
  771. MWF.xApplication.Org.$Explorer.ItemContent = new Class({
  772. initialize: function (item, isClose) {
  773. this.item = item;
  774. this.isClose = isClose;
  775. this.explorer = this.item.explorer;
  776. this.contentNode = this.item.propertyContentNode;
  777. this.style = this.item.style.person;
  778. this.load();
  779. },
  780. _getData: function(callback){
  781. this.data = this.item.data;
  782. if (callback) callback();
  783. },
  784. load: function(){
  785. this.titleContentNode = new Element("div").inject(this.contentNode);
  786. this.propertyContentScrollNode = new Element("div", {"styles": {"overflow": "hidden"}}).inject(this.contentNode);
  787. this.propertyContentNode = new Element("div", {"styles": {"overflow": "hidden"}}).inject(this.propertyContentScrollNode);
  788. this.bottomContentNode = new Element("div").inject(this.contentNode);
  789. this._getData(function(){
  790. this.explorer.propertyTitleNode.set("text", this.data.name);
  791. this._showItemPropertyTitle();
  792. this.loadItemPropertyTab(function(){
  793. this._loadTabs();
  794. this._loadContent();
  795. if (this.propertyTab.pages.length) this.propertyTab.pages[0].showTabIm();
  796. }.bind(this));
  797. this._showItemPropertyBottom();
  798. this.setContentSizeFun = this.setContentSize.bind(this);
  799. this.setContentSize();
  800. this.explorer.app.addEvent("resize", this.setContentSizeFun);
  801. new MWF.widget.ScrollBar(this.propertyContentScrollNode, {
  802. "style":"xApp_Organization_Explorer", "where": "before", "distance": 100, "friction": 4, "axis": {"x": false, "y": true}
  803. });
  804. }.bind(this));
  805. //this.showItemPropertyTitle();
  806. },
  807. setContentSize: function(){
  808. var size = this.contentNode.getSize();
  809. var titleSize = this.titleContentNode.getSize();
  810. var bottomSize = this.bottomContentNode.getSize();
  811. var y = size.y-titleSize.y-bottomSize.y;
  812. this.propertyContentScrollNode.setStyle("height", ""+y+"px")
  813. },
  814. loadItemPropertyTab: function(callback){
  815. this.propertyTabContainerNode = new Element("div", {"styles": this.item.style.tabTitleNode}).inject(this.propertyContentNode, "top");
  816. MWF.require("MWF.widget.Tab", function(){
  817. this.propertyTab = new MWF.widget.Tab(this.propertyContentNode, {"style": "org"});
  818. this.propertyTab.load();
  819. this.propertyTab.tabNodeContainer.inject(this.propertyTabContainerNode);
  820. if (callback) callback();
  821. }.bind(this));
  822. },
  823. edit: function(){
  824. if (this.baseInfor) this.baseInfor.edit();
  825. },
  826. destroy: function(){
  827. if (this.setContentSizeFun) this.explorer.app.removeEvent("resize", this.setContentSizeFun);
  828. if (this.titleInfor) this.titleInfor.destroy();
  829. if (this.bottomInfor) this.bottomInfor.destroy();
  830. if (this.baseInfor) this.baseInfor.destroy();
  831. this.contentNode.empty();
  832. MWF.release(this);
  833. },
  834. _showItemPropertyTitle: function(){
  835. this.titleInfor = new MWF.xApplication.Org.$Explorer.ItemContent.TitleInfor(this);
  836. },
  837. _showItemPropertyBottom: function(){
  838. this.bottomInfor = new MWF.xApplication.Org.$Explorer.ItemContent.BottmInfor(this);
  839. },
  840. _loadTabs: function(){},
  841. _loadContent: function(){}
  842. });
  843. MWF.xApplication.Org.$Explorer.ItemContent.TitleInfor = new Class({
  844. initialize: function (content) {
  845. this.content = content;
  846. this.item = content.item;
  847. this.data = this.content.data;
  848. this.explorer = this.item.explorer;
  849. this.contentNode = this.content.titleContentNode;
  850. this.style = this._getStyle();
  851. this.load();
  852. },
  853. _getStyle: function(){
  854. return this.item.style.person;
  855. },
  856. load: function(){
  857. this.titleBgNode = new Element("div", {"styles": this.style.titleBgNode}).inject(this.contentNode);
  858. this.titleNode = new Element("div", {"styles": this.style.titleNode}).inject(this.titleBgNode);
  859. this.setBackground();
  860. this.titleInforNode = new Element("div#titleInfor", {"styles": this.style.titleInforNode}).inject(this.titleNode);
  861. this.titleInforLeftNode = new Element("div", {"styles": this.style.titleInforLeftNode}).inject(this.titleInforNode);
  862. this.titleInforRightNode = new Element("div", {"styles": this.style.titleInforRightNode}).inject(this.titleInforNode);
  863. this.loadLeftInfor();
  864. this.loadRightInfor();
  865. this.loadAction();
  866. if (this.content.isClose) this.createCloseNode();
  867. },
  868. createCloseNode: function(){
  869. this.closeNode = new Element("div", {"styles": this.style.titleCloseNode}).inject(this.titleBgNode);
  870. this.closeNode.addEvents({
  871. "mousedown": function(){this.closeNode.setStyles(this.style.titleCloseNode_down)}.bind(this),
  872. "mouseup": function(){this.closeNode.setStyles(this.style.titleCloseNode)}.bind(this),
  873. "click": function(){
  874. var node = this.content.contentNode;
  875. this.content.destroy();
  876. node.destroy();
  877. node = null;
  878. }.bind(this)
  879. });
  880. },
  881. setBackground: function(){
  882. this.titleBgNode.setStyle("background-image", "url(../x_component_Org/$Explorer/"+this.explorer.app.options.style+"/icon/person_bg_bg.png)");
  883. this.titleNode.setStyle("background-image", "url(../x_component_Org/$Explorer/"+this.explorer.app.options.style+"/icon/person_bg.png)");
  884. },
  885. loadLeftInfor: function(){
  886. if (!this.iconAreaNode) this.iconAreaNode = new Element("div", {"styles": this.style.titleInforIconAreaNode}).inject(this.titleInforLeftNode);
  887. if (!this.iconNode) this.iconNode = new Element("img", {"styles": this.style.titleInforIconNode}).inject(this.iconAreaNode);
  888. this.iconNode.set("src", this._getIcon());
  889. },
  890. _getIcon: function(nocache){
  891. var url = (this.data.id) ? this.explorer.actions.getPersonIcon(this.data.id) : "../x_component_Org/$Explorer/default/icon/man.png";
  892. return (nocache) ? url+"?"+(new Date().getTime()) : url;
  893. // var src = "data:image/png;base64,"+this.data.icon;
  894. // if (!this.data.icon){
  895. // if (this.data.genderType==="f"){
  896. // src = "../x_component_Org/$Explorer/default/icon/female.png"
  897. // }else{
  898. // src = "../x_component_Org/$Explorer/default/icon/man.png"
  899. // }
  900. // }
  901. // return src;
  902. },
  903. loadRightInfor: function(){
  904. var text = this.data.name+((this.data.employee) ? "("+this.data.employee+")" : "");
  905. if (!this.nameNode) this.nameNode = new Element("div", {"styles": this.style.titleInforNameNode}).inject(this.titleInforRightNode);
  906. if (!this.signatureNode) this.signatureNode = new Element("div", {"styles": this.style.titleInforSignatureNode}).inject(this.titleInforRightNode);
  907. this.nameNode.set("text", text);
  908. this.signatureNode.set("text", (this.data.signature || "" ));
  909. },
  910. refresh: function(){
  911. this.loadLeftInfor();
  912. this.loadRightInfor();
  913. },
  914. loadAction: function(){},
  915. destroy: function(){
  916. this.contentNode.empty();
  917. MWF.release(this);
  918. }
  919. });
  920. MWF.xApplication.Org.$Explorer.ItemContent.BottomInfor = new Class({
  921. initialize: function (content) {
  922. this.content = content;
  923. this.item = content.item;
  924. this.data = this.content.data;
  925. this.explorer = this.item.explorer;
  926. this.contentNode = this.content.bottomContentNode;
  927. this.style = this._getStyle();
  928. this.load();
  929. },
  930. _getStyle: function(){
  931. return this.item.style.person;
  932. },
  933. load: function(){
  934. this.readContentNode = new Element("div", {"styles": this.style.baseReadNode}).inject(this.contentNode);
  935. this.addInforList();
  936. },
  937. addInfor: function(text){
  938. return new Element("div", {"styles": this.style.baseReadContentNode, "text": text}).inject(this.readContentNode);
  939. },
  940. addInforList: function(){},
  941. refresh: function(){
  942. this.readContentNode.empty();
  943. this.addInforList();
  944. },
  945. destroy: function(){
  946. this.readContentNode.empty();
  947. this.readContentNode.destroy();
  948. MWF.release(this);
  949. }
  950. });