mixin.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338
  1. import XEUtils from 'xe-utils';
  2. import { getColumnList } from '../../src/util';
  3. function calcMaxHeight($xeTable) {
  4. const $xeGantt = $xeTable.$xeGantt;
  5. const reactData = $xeTable;
  6. const { customStore } = reactData;
  7. let wrapperEl = $xeTable.$refs.refElem;
  8. // 判断面板不能大于表格高度
  9. let tableHeight = 0;
  10. if ($xeGantt) {
  11. const ganttContainerElem = $xeGantt.$refs.refGanttContainerElem;
  12. if (ganttContainerElem) {
  13. wrapperEl = ganttContainerElem;
  14. }
  15. }
  16. if (wrapperEl) {
  17. tableHeight = wrapperEl.clientHeight - 28;
  18. }
  19. customStore.maxHeight = Math.max(88, tableHeight);
  20. }
  21. function emitCustomEvent($xeTable, type, evnt) {
  22. const $xeGrid = $xeTable.$xeGrid;
  23. const $xeGantt = $xeTable.$xeGantt;
  24. const comp = $xeGrid || $xeGantt || $xeTable;
  25. comp.dispatchEvent('custom', { type }, evnt);
  26. }
  27. export default {
  28. methods: {
  29. _getCustomVisible() {
  30. const $xeTable = this;
  31. const reactData = $xeTable;
  32. const { customStore } = reactData;
  33. return customStore.visible;
  34. },
  35. _openCustom() {
  36. const $xeTable = this;
  37. const reactData = $xeTable;
  38. const { initStore, customStore } = reactData;
  39. customStore.visible = true;
  40. initStore.custom = true;
  41. $xeTable.handleUpdateCustomColumn();
  42. $xeTable.checkCustomStatus();
  43. calcMaxHeight($xeTable);
  44. return $xeTable.$nextTick().then(() => calcMaxHeight($xeTable));
  45. },
  46. _closeCustom() {
  47. const $xeTable = this;
  48. const reactData = $xeTable;
  49. const { customStore } = reactData;
  50. const customOpts = $xeTable.computeCustomOpts;
  51. if (customStore.visible) {
  52. customStore.visible = false;
  53. if (!customOpts.immediate) {
  54. $xeTable.handleCustom();
  55. }
  56. }
  57. return $xeTable.$nextTick();
  58. },
  59. _toggleCustom() {
  60. const $xeTable = this;
  61. const reactData = $xeTable;
  62. const { customStore } = reactData;
  63. if (customStore.visible) {
  64. return $xeTable.closeCustom();
  65. }
  66. return $xeTable.openCustom();
  67. },
  68. _saveCustom() {
  69. const $xeTable = this;
  70. const reactData = $xeTable;
  71. const internalData = $xeTable;
  72. const { customColumnList, aggHandleFields, rowGroupList } = reactData;
  73. const customOpts = $xeTable.computeCustomOpts;
  74. const { allowVisible, allowSort, allowFixed, allowResizable, allowGroup, allowValues } = customOpts;
  75. XEUtils.eachTree(customColumnList, (column, index, items, path, parentColumn) => {
  76. if (parentColumn) {
  77. // 更新子列信息
  78. column.fixed = parentColumn.fixed;
  79. }
  80. else {
  81. if (allowSort) {
  82. const sortIndex = index + 1;
  83. column.renderSortNumber = sortIndex;
  84. }
  85. if (allowFixed) {
  86. column.fixed = column.renderFixed;
  87. }
  88. }
  89. if (allowResizable) {
  90. if (column.renderVisible && (!column.children || column.children.length)) {
  91. if (column.renderResizeWidth !== column.renderWidth) {
  92. column.resizeWidth = column.renderResizeWidth;
  93. column.renderWidth = column.renderResizeWidth;
  94. }
  95. }
  96. }
  97. if (allowVisible) {
  98. column.visible = column.renderVisible;
  99. }
  100. if (allowGroup && allowValues) {
  101. column.aggFunc = column.renderAggFn;
  102. }
  103. });
  104. reactData.isCustomStatus = true;
  105. if (allowGroup && allowValues && !!$xeTable.handlePivotTableAggregateData) {
  106. if (rowGroupList.length !== aggHandleFields.length || rowGroupList.some((conf, i) => conf.field !== aggHandleFields[i])) {
  107. // 更新数据分组
  108. if (aggHandleFields.length) {
  109. $xeTable.setRowGroups(aggHandleFields);
  110. }
  111. else {
  112. $xeTable.clearRowGroups();
  113. }
  114. }
  115. else if (allowValues) {
  116. // 更新聚合函数
  117. $xeTable.handleUpdateAggData();
  118. }
  119. }
  120. if (allowSort) {
  121. internalData.collectColumn = customColumnList;
  122. }
  123. return $xeTable.saveCustomStore('confirm');
  124. },
  125. _cancelCustom() {
  126. const $xeTable = this;
  127. const reactData = $xeTable;
  128. const { customColumnList, customStore } = reactData;
  129. const { oldSortMaps, oldFixedMaps, oldVisibleMaps } = customStore;
  130. const customOpts = $xeTable.computeCustomOpts;
  131. const { allowVisible, allowSort, allowFixed, allowResizable } = customOpts;
  132. XEUtils.eachTree(customColumnList, column => {
  133. const colid = column.getKey();
  134. const visible = !!oldVisibleMaps[colid];
  135. const fixed = oldFixedMaps[colid] || '';
  136. if (allowVisible) {
  137. column.renderVisible = visible;
  138. column.visible = visible;
  139. }
  140. if (allowFixed) {
  141. column.renderFixed = fixed;
  142. column.fixed = fixed;
  143. }
  144. if (allowSort) {
  145. column.renderSortNumber = oldSortMaps[colid] || 0;
  146. }
  147. if (allowResizable) {
  148. column.renderResizeWidth = column.renderWidth;
  149. }
  150. }, { children: 'children' });
  151. return $xeTable.$nextTick();
  152. },
  153. _resetCustom(options) {
  154. const $xeTable = this;
  155. const reactData = $xeTable;
  156. const internalData = $xeTable;
  157. const { rowGroupList } = reactData;
  158. const { collectColumn } = internalData;
  159. const customOpts = $xeTable.computeCustomOpts;
  160. const { checkMethod } = customOpts;
  161. const opts = Object.assign({
  162. visible: true,
  163. resizable: options === true,
  164. fixed: options === true,
  165. sort: options === true,
  166. aggFunc: options === true
  167. }, options);
  168. const allCols = [];
  169. XEUtils.eachTree(collectColumn, (column) => {
  170. if (opts.resizable) {
  171. column.resizeWidth = 0;
  172. }
  173. if (opts.fixed) {
  174. column.fixed = column.defaultFixed;
  175. }
  176. if (opts.sort) {
  177. column.renderSortNumber = column.sortNumber;
  178. column.parentId = column.defaultParentId;
  179. }
  180. if (!checkMethod || checkMethod({ $table: $xeTable, column })) {
  181. column.visible = column.defaultVisible;
  182. }
  183. if (opts.aggFunc) {
  184. column.aggFunc = column.defaultAggFunc;
  185. column.renderAggFn = column.defaultAggFunc;
  186. }
  187. column.renderResizeWidth = column.renderWidth;
  188. allCols.push(column);
  189. });
  190. if (opts.sort) {
  191. const newCollectCols = XEUtils.toArrayTree(XEUtils.orderBy(allCols, 'renderSortNumber'), { key: 'id', parentKey: 'parentId', children: 'children' });
  192. internalData.collectColumn = newCollectCols;
  193. internalData.tableFullColumn = getColumnList(newCollectCols);
  194. }
  195. reactData.isCustomStatus = false;
  196. return $xeTable.handleCustom().then(() => {
  197. if (opts.aggFunc && $xeTable.handlePivotTableAggregateData) {
  198. const rowGroupFields = $xeTable.computeRowGroupFields;
  199. if (rowGroupFields ? rowGroupFields.length : rowGroupList.length) {
  200. if (rowGroupFields && rowGroupFields.length) {
  201. $xeTable.setRowGroups(rowGroupFields);
  202. }
  203. else {
  204. $xeTable.clearRowGroups();
  205. }
  206. }
  207. else {
  208. $xeTable.handleUpdateAggData();
  209. }
  210. }
  211. $xeTable.saveCustomStore('reset');
  212. });
  213. },
  214. _toggleCustomAllCheckbox() {
  215. const { customStore } = this;
  216. const isAll = !customStore.isAll;
  217. return this.setCustomAllCheckbox(isAll);
  218. },
  219. _setCustomAllCheckbox(checked) {
  220. const $xeTable = this;
  221. const reactData = $xeTable;
  222. const { customStore } = reactData;
  223. const { customColumnList } = reactData;
  224. const customOpts = $xeTable.computeCustomOpts;
  225. const { checkMethod, visibleMethod } = customOpts;
  226. const isAll = !!checked;
  227. if (customOpts.immediate) {
  228. XEUtils.eachTree(customColumnList, (column) => {
  229. if (visibleMethod && !visibleMethod({ $table: $xeTable, column })) {
  230. return;
  231. }
  232. if (checkMethod && !checkMethod({ $table: $xeTable, column })) {
  233. return;
  234. }
  235. column.visible = isAll;
  236. column.renderVisible = isAll;
  237. column.halfVisible = false;
  238. });
  239. customStore.isAll = isAll;
  240. reactData.isCustomStatus = true;
  241. $xeTable.handleCustom();
  242. $xeTable.saveCustomStore('update:visible');
  243. }
  244. else {
  245. XEUtils.eachTree(customColumnList, (column) => {
  246. if (visibleMethod && !visibleMethod({ $table: $xeTable, column })) {
  247. return;
  248. }
  249. if (checkMethod && !checkMethod({ $table: $xeTable, column })) {
  250. return;
  251. }
  252. column.renderVisible = isAll;
  253. column.halfVisible = false;
  254. });
  255. customStore.isAll = isAll;
  256. }
  257. $xeTable.checkCustomStatus();
  258. },
  259. checkCustomStatus() {
  260. const $xeTable = this;
  261. const reactData = $xeTable;
  262. const internalData = $xeTable;
  263. const { customStore } = reactData;
  264. const { collectColumn } = internalData;
  265. const customOpts = $xeTable.computeCustomOpts;
  266. const { checkMethod } = customOpts;
  267. customStore.isAll = collectColumn.every((column) => (checkMethod ? !checkMethod({ $table: $xeTable, column }) : false) || column.renderVisible);
  268. customStore.isIndeterminate = !customStore.isAll && collectColumn.some((column) => (!checkMethod || checkMethod({ $table: $xeTable, column })) && (column.renderVisible || column.halfVisible));
  269. },
  270. emitCustomEvent(type, evnt) {
  271. const $xeTable = this;
  272. const $xeGrid = $xeTable.$xeGrid;
  273. const $xeGantt = $xeTable.$xeGantt;
  274. const comp = $xeGrid || $xeGantt || $xeTable;
  275. comp.dispatchEvent('custom', { type }, evnt);
  276. },
  277. triggerCustomEvent(evnt) {
  278. const $xeTable = this;
  279. const reactData = $xeTable;
  280. const { customStore } = reactData;
  281. if (customStore.visible) {
  282. this.closeCustom();
  283. emitCustomEvent($xeTable, 'close', evnt);
  284. }
  285. else {
  286. customStore.btnEl = evnt.target;
  287. this.openCustom();
  288. emitCustomEvent($xeTable, 'open', evnt);
  289. }
  290. },
  291. customOpenEvent(evnt) {
  292. const $xeTable = this;
  293. const reactData = $xeTable;
  294. const { customStore } = reactData;
  295. if (customStore.visible) {
  296. customStore.activeBtn = true;
  297. customStore.btnEl = evnt.target;
  298. $xeTable.openCustom();
  299. emitCustomEvent($xeTable, 'open', evnt);
  300. }
  301. },
  302. customCloseEvent(evnt) {
  303. const $xeTable = this;
  304. const reactData = $xeTable;
  305. const { customStore } = reactData;
  306. if (customStore.visible) {
  307. customStore.activeBtn = false;
  308. $xeTable.closeCustom();
  309. emitCustomEvent($xeTable, 'close', evnt);
  310. }
  311. },
  312. handleUpdateCustomColumn() {
  313. const $xeTable = this;
  314. const reactData = $xeTable;
  315. const internalData = $xeTable;
  316. const { customStore } = reactData;
  317. const { collectColumn } = internalData;
  318. if (customStore.visible) {
  319. const sortMaps = {};
  320. const fixedMaps = {};
  321. const visibleMaps = {};
  322. XEUtils.eachTree(collectColumn, column => {
  323. const colid = column.getKey();
  324. column.renderFixed = column.fixed;
  325. column.renderVisible = column.visible;
  326. column.renderResizeWidth = column.renderWidth;
  327. sortMaps[colid] = column.renderSortNumber;
  328. fixedMaps[colid] = column.fixed;
  329. visibleMaps[colid] = column.visible;
  330. });
  331. customStore.oldSortMaps = sortMaps;
  332. customStore.oldFixedMaps = fixedMaps;
  333. customStore.oldVisibleMaps = visibleMaps;
  334. reactData.customColumnList = collectColumn.slice(0);
  335. }
  336. }
  337. }
  338. };