$Explorer.js 41 KB

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