000a4b38268b417b4e54bbce5a3eb083438bd09deab3482fb7d7298c558abe6e7c676d0c428dcbfae1ec01fb3ef6322ec74177f1634d375d4b90aa769b1bee 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449
  1. import { getCurrentInstance, toRefs, ref, computed, watch, unref } from 'vue';
  2. import { getKeysMap, getRowIdentity, toggleRowStatus, getColumnById, getColumnByKey, orderBy } from '../util.mjs';
  3. import useExpand from './expand.mjs';
  4. import useCurrent from './current.mjs';
  5. import useTree from './tree.mjs';
  6. import { hasOwn, isString, isArray } from '@vue/shared';
  7. import { castArray } from 'lodash-unified';
  8. const sortData = (data, states) => {
  9. const sortingColumn = states.sortingColumn;
  10. if (!sortingColumn || isString(sortingColumn.sortable)) {
  11. return data;
  12. }
  13. return orderBy(data, states.sortProp, states.sortOrder, sortingColumn.sortMethod, sortingColumn.sortBy);
  14. };
  15. const doFlattenColumns = (columns) => {
  16. const result = [];
  17. columns.forEach((column) => {
  18. if (column.children && column.children.length > 0) {
  19. result.push.apply(result, doFlattenColumns(column.children));
  20. } else {
  21. result.push(column);
  22. }
  23. });
  24. return result;
  25. };
  26. function useWatcher() {
  27. var _a;
  28. const instance = getCurrentInstance();
  29. const { size: tableSize } = toRefs((_a = instance.proxy) == null ? void 0 : _a.$props);
  30. const rowKey = ref(null);
  31. const data = ref([]);
  32. const _data = ref([]);
  33. const isComplex = ref(false);
  34. const _columns = ref([]);
  35. const originColumns = ref([]);
  36. const columns = ref([]);
  37. const fixedColumns = ref([]);
  38. const rightFixedColumns = ref([]);
  39. const leafColumns = ref([]);
  40. const fixedLeafColumns = ref([]);
  41. const rightFixedLeafColumns = ref([]);
  42. const updateOrderFns = [];
  43. const leafColumnsLength = ref(0);
  44. const fixedLeafColumnsLength = ref(0);
  45. const rightFixedLeafColumnsLength = ref(0);
  46. const isAllSelected = ref(false);
  47. const selection = ref([]);
  48. const reserveSelection = ref(false);
  49. const selectOnIndeterminate = ref(false);
  50. const selectable = ref(null);
  51. const filters = ref({});
  52. const filteredData = ref(null);
  53. const sortingColumn = ref(null);
  54. const sortProp = ref(null);
  55. const sortOrder = ref(null);
  56. const hoverRow = ref(null);
  57. const selectedMap = computed(() => {
  58. return rowKey.value ? getKeysMap(selection.value, rowKey.value) : void 0;
  59. });
  60. watch(data, () => {
  61. var _a2;
  62. if (instance.state) {
  63. scheduleLayout(false);
  64. const needUpdateFixed = instance.props.tableLayout === "auto";
  65. if (needUpdateFixed) {
  66. (_a2 = instance.refs.tableHeaderRef) == null ? void 0 : _a2.updateFixedColumnStyle();
  67. }
  68. }
  69. }, {
  70. deep: true
  71. });
  72. const assertRowKey = () => {
  73. if (!rowKey.value)
  74. throw new Error("[ElTable] prop row-key is required");
  75. };
  76. const updateChildFixed = (column) => {
  77. var _a2;
  78. (_a2 = column.children) == null ? void 0 : _a2.forEach((childColumn) => {
  79. childColumn.fixed = column.fixed;
  80. updateChildFixed(childColumn);
  81. });
  82. };
  83. const updateColumns = () => {
  84. _columns.value.forEach((column) => {
  85. updateChildFixed(column);
  86. });
  87. fixedColumns.value = _columns.value.filter((column) => [true, "left"].includes(column.fixed));
  88. const selectColumn = _columns.value.find((column) => column.type === "selection");
  89. let selectColFixLeft;
  90. if (selectColumn && selectColumn.fixed !== "right" && !fixedColumns.value.includes(selectColumn)) {
  91. const selectColumnIndex = _columns.value.indexOf(selectColumn);
  92. if (selectColumnIndex === 0 && fixedColumns.value.length) {
  93. fixedColumns.value.unshift(selectColumn);
  94. selectColFixLeft = true;
  95. }
  96. }
  97. rightFixedColumns.value = _columns.value.filter((column) => column.fixed === "right");
  98. const notFixedColumns = _columns.value.filter((column) => (selectColFixLeft ? column.type !== "selection" : true) && !column.fixed);
  99. originColumns.value = Array.from(fixedColumns.value).concat(notFixedColumns).concat(rightFixedColumns.value);
  100. const leafColumns2 = doFlattenColumns(notFixedColumns);
  101. const fixedLeafColumns2 = doFlattenColumns(fixedColumns.value);
  102. const rightFixedLeafColumns2 = doFlattenColumns(rightFixedColumns.value);
  103. leafColumnsLength.value = leafColumns2.length;
  104. fixedLeafColumnsLength.value = fixedLeafColumns2.length;
  105. rightFixedLeafColumnsLength.value = rightFixedLeafColumns2.length;
  106. columns.value = Array.from(fixedLeafColumns2).concat(leafColumns2).concat(rightFixedLeafColumns2);
  107. isComplex.value = fixedColumns.value.length > 0 || rightFixedColumns.value.length > 0;
  108. };
  109. const scheduleLayout = (needUpdateColumns, immediate = false) => {
  110. if (needUpdateColumns) {
  111. updateColumns();
  112. }
  113. if (immediate) {
  114. instance.state.doLayout();
  115. } else {
  116. instance.state.debouncedUpdateLayout();
  117. }
  118. };
  119. const isSelected = (row) => {
  120. if (selectedMap.value) {
  121. return !!selectedMap.value[getRowIdentity(row, rowKey.value)];
  122. } else {
  123. return selection.value.includes(row);
  124. }
  125. };
  126. const clearSelection = () => {
  127. isAllSelected.value = false;
  128. const oldSelection = selection.value;
  129. selection.value = [];
  130. if (oldSelection.length) {
  131. instance.emit("selection-change", []);
  132. }
  133. };
  134. const cleanSelection = () => {
  135. var _a2, _b;
  136. let deleted;
  137. if (rowKey.value) {
  138. deleted = [];
  139. const childrenKey = (_b = (_a2 = instance == null ? void 0 : instance.store) == null ? void 0 : _a2.states) == null ? void 0 : _b.childrenColumnName.value;
  140. const dataMap = getKeysMap(data.value, rowKey.value, true, childrenKey);
  141. for (const key in selectedMap.value) {
  142. if (hasOwn(selectedMap.value, key) && !dataMap[key]) {
  143. deleted.push(selectedMap.value[key].row);
  144. }
  145. }
  146. } else {
  147. deleted = selection.value.filter((item) => !data.value.includes(item));
  148. }
  149. if (deleted.length) {
  150. const newSelection = selection.value.filter((item) => !deleted.includes(item));
  151. selection.value = newSelection;
  152. instance.emit("selection-change", newSelection.slice());
  153. }
  154. };
  155. const getSelectionRows = () => {
  156. return (selection.value || []).slice();
  157. };
  158. const toggleRowSelection = (row, selected, emitChange = true, ignoreSelectable = false) => {
  159. var _a2, _b, _c, _d;
  160. const treeProps = {
  161. children: (_b = (_a2 = instance == null ? void 0 : instance.store) == null ? void 0 : _a2.states) == null ? void 0 : _b.childrenColumnName.value,
  162. checkStrictly: (_d = (_c = instance == null ? void 0 : instance.store) == null ? void 0 : _c.states) == null ? void 0 : _d.checkStrictly.value
  163. };
  164. const changed = toggleRowStatus(selection.value, row, selected, treeProps, ignoreSelectable ? void 0 : selectable.value, data.value.indexOf(row), rowKey.value);
  165. if (changed) {
  166. const newSelection = (selection.value || []).slice();
  167. if (emitChange) {
  168. instance.emit("select", newSelection, row);
  169. }
  170. instance.emit("selection-change", newSelection);
  171. }
  172. };
  173. const _toggleAllSelection = () => {
  174. var _a2, _b;
  175. const value = selectOnIndeterminate.value ? !isAllSelected.value : !(isAllSelected.value || selection.value.length);
  176. isAllSelected.value = value;
  177. let selectionChanged = false;
  178. let childrenCount = 0;
  179. const rowKey2 = (_b = (_a2 = instance == null ? void 0 : instance.store) == null ? void 0 : _a2.states) == null ? void 0 : _b.rowKey.value;
  180. const { childrenColumnName } = instance.store.states;
  181. const treeProps = {
  182. children: childrenColumnName.value,
  183. checkStrictly: false
  184. };
  185. data.value.forEach((row, index) => {
  186. const rowIndex = index + childrenCount;
  187. if (toggleRowStatus(selection.value, row, value, treeProps, selectable.value, rowIndex, rowKey2)) {
  188. selectionChanged = true;
  189. }
  190. childrenCount += getChildrenCount(getRowIdentity(row, rowKey2));
  191. });
  192. if (selectionChanged) {
  193. instance.emit("selection-change", selection.value ? selection.value.slice() : []);
  194. }
  195. instance.emit("select-all", (selection.value || []).slice());
  196. };
  197. const updateAllSelected = () => {
  198. var _a2;
  199. if (((_a2 = data.value) == null ? void 0 : _a2.length) === 0) {
  200. isAllSelected.value = false;
  201. return;
  202. }
  203. const { childrenColumnName } = instance.store.states;
  204. let rowIndex = 0;
  205. let selectedCount = 0;
  206. const checkSelectedStatus = (data2) => {
  207. var _a3;
  208. for (const row of data2) {
  209. const isRowSelectable = selectable.value && selectable.value.call(null, row, rowIndex);
  210. if (!isSelected(row)) {
  211. if (!selectable.value || isRowSelectable) {
  212. return false;
  213. }
  214. } else {
  215. selectedCount++;
  216. }
  217. rowIndex++;
  218. if (((_a3 = row[childrenColumnName.value]) == null ? void 0 : _a3.length) && !checkSelectedStatus(row[childrenColumnName.value])) {
  219. return false;
  220. }
  221. }
  222. return true;
  223. };
  224. const isAllSelected_ = checkSelectedStatus(data.value || []);
  225. isAllSelected.value = selectedCount === 0 ? false : isAllSelected_;
  226. };
  227. const getChildrenCount = (rowKey2) => {
  228. var _a2;
  229. if (!instance || !instance.store)
  230. return 0;
  231. const { treeData } = instance.store.states;
  232. let count = 0;
  233. const children = (_a2 = treeData.value[rowKey2]) == null ? void 0 : _a2.children;
  234. if (children) {
  235. count += children.length;
  236. children.forEach((childKey) => {
  237. count += getChildrenCount(childKey);
  238. });
  239. }
  240. return count;
  241. };
  242. const updateFilters = (column, values) => {
  243. const filters_ = {};
  244. castArray(column).forEach((col) => {
  245. filters.value[col.id] = values;
  246. filters_[col.columnKey || col.id] = values;
  247. });
  248. return filters_;
  249. };
  250. const updateSort = (column, prop, order) => {
  251. if (sortingColumn.value && sortingColumn.value !== column) {
  252. sortingColumn.value.order = null;
  253. }
  254. sortingColumn.value = column;
  255. sortProp.value = prop;
  256. sortOrder.value = order;
  257. };
  258. const execFilter = () => {
  259. let sourceData = unref(_data);
  260. Object.keys(filters.value).forEach((columnId) => {
  261. const values = filters.value[columnId];
  262. if (!values || values.length === 0)
  263. return;
  264. const column = getColumnById({
  265. columns: columns.value
  266. }, columnId);
  267. if (column && column.filterMethod) {
  268. sourceData = sourceData.filter((row) => {
  269. return values.some((value) => column.filterMethod.call(null, value, row, column));
  270. });
  271. }
  272. });
  273. filteredData.value = sourceData;
  274. };
  275. const execSort = () => {
  276. var _a2;
  277. data.value = sortData((_a2 = filteredData.value) != null ? _a2 : [], {
  278. sortingColumn: sortingColumn.value,
  279. sortProp: sortProp.value,
  280. sortOrder: sortOrder.value
  281. });
  282. };
  283. const execQuery = (ignore = void 0) => {
  284. if (!(ignore == null ? void 0 : ignore.filter)) {
  285. execFilter();
  286. }
  287. execSort();
  288. };
  289. const clearFilter = (columnKeys) => {
  290. const { tableHeaderRef } = instance.refs;
  291. if (!tableHeaderRef)
  292. return;
  293. const panels = Object.assign({}, tableHeaderRef.filterPanels);
  294. const keys = Object.keys(panels);
  295. if (!keys.length)
  296. return;
  297. if (isString(columnKeys)) {
  298. columnKeys = [columnKeys];
  299. }
  300. if (isArray(columnKeys)) {
  301. const columns_ = columnKeys.map((key) => getColumnByKey({
  302. columns: columns.value
  303. }, key));
  304. keys.forEach((key) => {
  305. const column = columns_.find((col) => col.id === key);
  306. if (column) {
  307. column.filteredValue = [];
  308. }
  309. });
  310. instance.store.commit("filterChange", {
  311. column: columns_,
  312. values: [],
  313. silent: true,
  314. multi: true
  315. });
  316. } else {
  317. keys.forEach((key) => {
  318. const column = columns.value.find((col) => col.id === key);
  319. if (column) {
  320. column.filteredValue = [];
  321. }
  322. });
  323. filters.value = {};
  324. instance.store.commit("filterChange", {
  325. column: {},
  326. values: [],
  327. silent: true
  328. });
  329. }
  330. };
  331. const clearSort = () => {
  332. if (!sortingColumn.value)
  333. return;
  334. updateSort(null, null, null);
  335. instance.store.commit("changeSortCondition", {
  336. silent: true
  337. });
  338. };
  339. const {
  340. setExpandRowKeys,
  341. toggleRowExpansion,
  342. updateExpandRows,
  343. states: expandStates,
  344. isRowExpanded
  345. } = useExpand({
  346. data,
  347. rowKey
  348. });
  349. const {
  350. updateTreeExpandKeys,
  351. toggleTreeExpansion,
  352. updateTreeData,
  353. updateKeyChildren,
  354. loadOrToggle,
  355. states: treeStates
  356. } = useTree({
  357. data,
  358. rowKey
  359. });
  360. const {
  361. updateCurrentRowData,
  362. updateCurrentRow,
  363. setCurrentRowKey,
  364. states: currentData
  365. } = useCurrent({
  366. data,
  367. rowKey
  368. });
  369. const setExpandRowKeysAdapter = (val) => {
  370. setExpandRowKeys(val);
  371. updateTreeExpandKeys(val);
  372. };
  373. const toggleRowExpansionAdapter = (row, expanded) => {
  374. const hasExpandColumn = columns.value.some(({ type }) => type === "expand");
  375. if (hasExpandColumn) {
  376. toggleRowExpansion(row, expanded);
  377. } else {
  378. toggleTreeExpansion(row, expanded);
  379. }
  380. };
  381. return {
  382. assertRowKey,
  383. updateColumns,
  384. scheduleLayout,
  385. isSelected,
  386. clearSelection,
  387. cleanSelection,
  388. getSelectionRows,
  389. toggleRowSelection,
  390. _toggleAllSelection,
  391. toggleAllSelection: null,
  392. updateAllSelected,
  393. updateFilters,
  394. updateCurrentRow,
  395. updateSort,
  396. execFilter,
  397. execSort,
  398. execQuery,
  399. clearFilter,
  400. clearSort,
  401. toggleRowExpansion,
  402. setExpandRowKeysAdapter,
  403. setCurrentRowKey,
  404. toggleRowExpansionAdapter,
  405. isRowExpanded,
  406. updateExpandRows,
  407. updateCurrentRowData,
  408. loadOrToggle,
  409. updateTreeData,
  410. updateKeyChildren,
  411. states: {
  412. tableSize,
  413. rowKey,
  414. data,
  415. _data,
  416. isComplex,
  417. _columns,
  418. originColumns,
  419. columns,
  420. fixedColumns,
  421. rightFixedColumns,
  422. leafColumns,
  423. fixedLeafColumns,
  424. rightFixedLeafColumns,
  425. updateOrderFns,
  426. leafColumnsLength,
  427. fixedLeafColumnsLength,
  428. rightFixedLeafColumnsLength,
  429. isAllSelected,
  430. selection,
  431. reserveSelection,
  432. selectOnIndeterminate,
  433. selectable,
  434. filters,
  435. filteredData,
  436. sortingColumn,
  437. sortProp,
  438. sortOrder,
  439. hoverRow,
  440. ...expandStates,
  441. ...treeStates,
  442. ...currentData
  443. }
  444. };
  445. }
  446. export { useWatcher as default };
  447. //# sourceMappingURL=watcher.mjs.map