| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449 |
- import { getCurrentInstance, toRefs, ref, computed, watch, unref } from 'vue';
- import { getKeysMap, getRowIdentity, toggleRowStatus, getColumnById, getColumnByKey, orderBy } from '../util.mjs';
- import useExpand from './expand.mjs';
- import useCurrent from './current.mjs';
- import useTree from './tree.mjs';
- import { hasOwn, isString, isArray } from '@vue/shared';
- import { castArray } from 'lodash-unified';
- const sortData = (data, states) => {
- const sortingColumn = states.sortingColumn;
- if (!sortingColumn || isString(sortingColumn.sortable)) {
- return data;
- }
- return orderBy(data, states.sortProp, states.sortOrder, sortingColumn.sortMethod, sortingColumn.sortBy);
- };
- const doFlattenColumns = (columns) => {
- const result = [];
- columns.forEach((column) => {
- if (column.children && column.children.length > 0) {
- result.push.apply(result, doFlattenColumns(column.children));
- } else {
- result.push(column);
- }
- });
- return result;
- };
- function useWatcher() {
- var _a;
- const instance = getCurrentInstance();
- const { size: tableSize } = toRefs((_a = instance.proxy) == null ? void 0 : _a.$props);
- const rowKey = ref(null);
- const data = ref([]);
- const _data = ref([]);
- const isComplex = ref(false);
- const _columns = ref([]);
- const originColumns = ref([]);
- const columns = ref([]);
- const fixedColumns = ref([]);
- const rightFixedColumns = ref([]);
- const leafColumns = ref([]);
- const fixedLeafColumns = ref([]);
- const rightFixedLeafColumns = ref([]);
- const updateOrderFns = [];
- const leafColumnsLength = ref(0);
- const fixedLeafColumnsLength = ref(0);
- const rightFixedLeafColumnsLength = ref(0);
- const isAllSelected = ref(false);
- const selection = ref([]);
- const reserveSelection = ref(false);
- const selectOnIndeterminate = ref(false);
- const selectable = ref(null);
- const filters = ref({});
- const filteredData = ref(null);
- const sortingColumn = ref(null);
- const sortProp = ref(null);
- const sortOrder = ref(null);
- const hoverRow = ref(null);
- const selectedMap = computed(() => {
- return rowKey.value ? getKeysMap(selection.value, rowKey.value) : void 0;
- });
- watch(data, () => {
- var _a2;
- if (instance.state) {
- scheduleLayout(false);
- const needUpdateFixed = instance.props.tableLayout === "auto";
- if (needUpdateFixed) {
- (_a2 = instance.refs.tableHeaderRef) == null ? void 0 : _a2.updateFixedColumnStyle();
- }
- }
- }, {
- deep: true
- });
- const assertRowKey = () => {
- if (!rowKey.value)
- throw new Error("[ElTable] prop row-key is required");
- };
- const updateChildFixed = (column) => {
- var _a2;
- (_a2 = column.children) == null ? void 0 : _a2.forEach((childColumn) => {
- childColumn.fixed = column.fixed;
- updateChildFixed(childColumn);
- });
- };
- const updateColumns = () => {
- _columns.value.forEach((column) => {
- updateChildFixed(column);
- });
- fixedColumns.value = _columns.value.filter((column) => [true, "left"].includes(column.fixed));
- const selectColumn = _columns.value.find((column) => column.type === "selection");
- let selectColFixLeft;
- if (selectColumn && selectColumn.fixed !== "right" && !fixedColumns.value.includes(selectColumn)) {
- const selectColumnIndex = _columns.value.indexOf(selectColumn);
- if (selectColumnIndex === 0 && fixedColumns.value.length) {
- fixedColumns.value.unshift(selectColumn);
- selectColFixLeft = true;
- }
- }
- rightFixedColumns.value = _columns.value.filter((column) => column.fixed === "right");
- const notFixedColumns = _columns.value.filter((column) => (selectColFixLeft ? column.type !== "selection" : true) && !column.fixed);
- originColumns.value = Array.from(fixedColumns.value).concat(notFixedColumns).concat(rightFixedColumns.value);
- const leafColumns2 = doFlattenColumns(notFixedColumns);
- const fixedLeafColumns2 = doFlattenColumns(fixedColumns.value);
- const rightFixedLeafColumns2 = doFlattenColumns(rightFixedColumns.value);
- leafColumnsLength.value = leafColumns2.length;
- fixedLeafColumnsLength.value = fixedLeafColumns2.length;
- rightFixedLeafColumnsLength.value = rightFixedLeafColumns2.length;
- columns.value = Array.from(fixedLeafColumns2).concat(leafColumns2).concat(rightFixedLeafColumns2);
- isComplex.value = fixedColumns.value.length > 0 || rightFixedColumns.value.length > 0;
- };
- const scheduleLayout = (needUpdateColumns, immediate = false) => {
- if (needUpdateColumns) {
- updateColumns();
- }
- if (immediate) {
- instance.state.doLayout();
- } else {
- instance.state.debouncedUpdateLayout();
- }
- };
- const isSelected = (row) => {
- if (selectedMap.value) {
- return !!selectedMap.value[getRowIdentity(row, rowKey.value)];
- } else {
- return selection.value.includes(row);
- }
- };
- const clearSelection = () => {
- isAllSelected.value = false;
- const oldSelection = selection.value;
- selection.value = [];
- if (oldSelection.length) {
- instance.emit("selection-change", []);
- }
- };
- const cleanSelection = () => {
- var _a2, _b;
- let deleted;
- if (rowKey.value) {
- deleted = [];
- const childrenKey = (_b = (_a2 = instance == null ? void 0 : instance.store) == null ? void 0 : _a2.states) == null ? void 0 : _b.childrenColumnName.value;
- const dataMap = getKeysMap(data.value, rowKey.value, true, childrenKey);
- for (const key in selectedMap.value) {
- if (hasOwn(selectedMap.value, key) && !dataMap[key]) {
- deleted.push(selectedMap.value[key].row);
- }
- }
- } else {
- deleted = selection.value.filter((item) => !data.value.includes(item));
- }
- if (deleted.length) {
- const newSelection = selection.value.filter((item) => !deleted.includes(item));
- selection.value = newSelection;
- instance.emit("selection-change", newSelection.slice());
- }
- };
- const getSelectionRows = () => {
- return (selection.value || []).slice();
- };
- const toggleRowSelection = (row, selected, emitChange = true, ignoreSelectable = false) => {
- var _a2, _b, _c, _d;
- const treeProps = {
- children: (_b = (_a2 = instance == null ? void 0 : instance.store) == null ? void 0 : _a2.states) == null ? void 0 : _b.childrenColumnName.value,
- checkStrictly: (_d = (_c = instance == null ? void 0 : instance.store) == null ? void 0 : _c.states) == null ? void 0 : _d.checkStrictly.value
- };
- const changed = toggleRowStatus(selection.value, row, selected, treeProps, ignoreSelectable ? void 0 : selectable.value, data.value.indexOf(row), rowKey.value);
- if (changed) {
- const newSelection = (selection.value || []).slice();
- if (emitChange) {
- instance.emit("select", newSelection, row);
- }
- instance.emit("selection-change", newSelection);
- }
- };
- const _toggleAllSelection = () => {
- var _a2, _b;
- const value = selectOnIndeterminate.value ? !isAllSelected.value : !(isAllSelected.value || selection.value.length);
- isAllSelected.value = value;
- let selectionChanged = false;
- let childrenCount = 0;
- const rowKey2 = (_b = (_a2 = instance == null ? void 0 : instance.store) == null ? void 0 : _a2.states) == null ? void 0 : _b.rowKey.value;
- const { childrenColumnName } = instance.store.states;
- const treeProps = {
- children: childrenColumnName.value,
- checkStrictly: false
- };
- data.value.forEach((row, index) => {
- const rowIndex = index + childrenCount;
- if (toggleRowStatus(selection.value, row, value, treeProps, selectable.value, rowIndex, rowKey2)) {
- selectionChanged = true;
- }
- childrenCount += getChildrenCount(getRowIdentity(row, rowKey2));
- });
- if (selectionChanged) {
- instance.emit("selection-change", selection.value ? selection.value.slice() : []);
- }
- instance.emit("select-all", (selection.value || []).slice());
- };
- const updateAllSelected = () => {
- var _a2;
- if (((_a2 = data.value) == null ? void 0 : _a2.length) === 0) {
- isAllSelected.value = false;
- return;
- }
- const { childrenColumnName } = instance.store.states;
- let rowIndex = 0;
- let selectedCount = 0;
- const checkSelectedStatus = (data2) => {
- var _a3;
- for (const row of data2) {
- const isRowSelectable = selectable.value && selectable.value.call(null, row, rowIndex);
- if (!isSelected(row)) {
- if (!selectable.value || isRowSelectable) {
- return false;
- }
- } else {
- selectedCount++;
- }
- rowIndex++;
- if (((_a3 = row[childrenColumnName.value]) == null ? void 0 : _a3.length) && !checkSelectedStatus(row[childrenColumnName.value])) {
- return false;
- }
- }
- return true;
- };
- const isAllSelected_ = checkSelectedStatus(data.value || []);
- isAllSelected.value = selectedCount === 0 ? false : isAllSelected_;
- };
- const getChildrenCount = (rowKey2) => {
- var _a2;
- if (!instance || !instance.store)
- return 0;
- const { treeData } = instance.store.states;
- let count = 0;
- const children = (_a2 = treeData.value[rowKey2]) == null ? void 0 : _a2.children;
- if (children) {
- count += children.length;
- children.forEach((childKey) => {
- count += getChildrenCount(childKey);
- });
- }
- return count;
- };
- const updateFilters = (column, values) => {
- const filters_ = {};
- castArray(column).forEach((col) => {
- filters.value[col.id] = values;
- filters_[col.columnKey || col.id] = values;
- });
- return filters_;
- };
- const updateSort = (column, prop, order) => {
- if (sortingColumn.value && sortingColumn.value !== column) {
- sortingColumn.value.order = null;
- }
- sortingColumn.value = column;
- sortProp.value = prop;
- sortOrder.value = order;
- };
- const execFilter = () => {
- let sourceData = unref(_data);
- Object.keys(filters.value).forEach((columnId) => {
- const values = filters.value[columnId];
- if (!values || values.length === 0)
- return;
- const column = getColumnById({
- columns: columns.value
- }, columnId);
- if (column && column.filterMethod) {
- sourceData = sourceData.filter((row) => {
- return values.some((value) => column.filterMethod.call(null, value, row, column));
- });
- }
- });
- filteredData.value = sourceData;
- };
- const execSort = () => {
- var _a2;
- data.value = sortData((_a2 = filteredData.value) != null ? _a2 : [], {
- sortingColumn: sortingColumn.value,
- sortProp: sortProp.value,
- sortOrder: sortOrder.value
- });
- };
- const execQuery = (ignore = void 0) => {
- if (!(ignore == null ? void 0 : ignore.filter)) {
- execFilter();
- }
- execSort();
- };
- const clearFilter = (columnKeys) => {
- const { tableHeaderRef } = instance.refs;
- if (!tableHeaderRef)
- return;
- const panels = Object.assign({}, tableHeaderRef.filterPanels);
- const keys = Object.keys(panels);
- if (!keys.length)
- return;
- if (isString(columnKeys)) {
- columnKeys = [columnKeys];
- }
- if (isArray(columnKeys)) {
- const columns_ = columnKeys.map((key) => getColumnByKey({
- columns: columns.value
- }, key));
- keys.forEach((key) => {
- const column = columns_.find((col) => col.id === key);
- if (column) {
- column.filteredValue = [];
- }
- });
- instance.store.commit("filterChange", {
- column: columns_,
- values: [],
- silent: true,
- multi: true
- });
- } else {
- keys.forEach((key) => {
- const column = columns.value.find((col) => col.id === key);
- if (column) {
- column.filteredValue = [];
- }
- });
- filters.value = {};
- instance.store.commit("filterChange", {
- column: {},
- values: [],
- silent: true
- });
- }
- };
- const clearSort = () => {
- if (!sortingColumn.value)
- return;
- updateSort(null, null, null);
- instance.store.commit("changeSortCondition", {
- silent: true
- });
- };
- const {
- setExpandRowKeys,
- toggleRowExpansion,
- updateExpandRows,
- states: expandStates,
- isRowExpanded
- } = useExpand({
- data,
- rowKey
- });
- const {
- updateTreeExpandKeys,
- toggleTreeExpansion,
- updateTreeData,
- updateKeyChildren,
- loadOrToggle,
- states: treeStates
- } = useTree({
- data,
- rowKey
- });
- const {
- updateCurrentRowData,
- updateCurrentRow,
- setCurrentRowKey,
- states: currentData
- } = useCurrent({
- data,
- rowKey
- });
- const setExpandRowKeysAdapter = (val) => {
- setExpandRowKeys(val);
- updateTreeExpandKeys(val);
- };
- const toggleRowExpansionAdapter = (row, expanded) => {
- const hasExpandColumn = columns.value.some(({ type }) => type === "expand");
- if (hasExpandColumn) {
- toggleRowExpansion(row, expanded);
- } else {
- toggleTreeExpansion(row, expanded);
- }
- };
- return {
- assertRowKey,
- updateColumns,
- scheduleLayout,
- isSelected,
- clearSelection,
- cleanSelection,
- getSelectionRows,
- toggleRowSelection,
- _toggleAllSelection,
- toggleAllSelection: null,
- updateAllSelected,
- updateFilters,
- updateCurrentRow,
- updateSort,
- execFilter,
- execSort,
- execQuery,
- clearFilter,
- clearSort,
- toggleRowExpansion,
- setExpandRowKeysAdapter,
- setCurrentRowKey,
- toggleRowExpansionAdapter,
- isRowExpanded,
- updateExpandRows,
- updateCurrentRowData,
- loadOrToggle,
- updateTreeData,
- updateKeyChildren,
- states: {
- tableSize,
- rowKey,
- data,
- _data,
- isComplex,
- _columns,
- originColumns,
- columns,
- fixedColumns,
- rightFixedColumns,
- leafColumns,
- fixedLeafColumns,
- rightFixedLeafColumns,
- updateOrderFns,
- leafColumnsLength,
- fixedLeafColumnsLength,
- rightFixedLeafColumnsLength,
- isAllSelected,
- selection,
- reserveSelection,
- selectOnIndeterminate,
- selectable,
- filters,
- filteredData,
- sortingColumn,
- sortProp,
- sortOrder,
- hoverRow,
- ...expandStates,
- ...treeStates,
- ...currentData
- }
- };
- }
- export { useWatcher as default };
- //# sourceMappingURL=watcher.mjs.map
|