comic-plus
Version:
<p align="center"> <img width="200px" src="./logo.png"/> </p>
174 lines (173 loc) • 5.54 kB
JavaScript
import { ref, computed, reactive, watch } from "vue";
import "../../../../utils/config.mjs";
import { isArray } from "../../../../utils/typescript.mjs";
import "@vueuse/core";
const useTable = (tableData, { props, columns, emit }) => {
const renderData = ref([]);
const hasExpandColumn = computed(() => {
var _a;
return !!((_a = columns.value) == null ? void 0 : _a.find((v) => v.type === "expand"));
});
const treeChildrenKeyName = computed(() => {
var _a;
return ((_a = props.treeProps) == null ? void 0 : _a["children"]) ?? "children";
});
const treeHasChildrenKeyName = computed(() => {
var _a;
return ((_a = props.treeProps) == null ? void 0 : _a["hasChildren"]) ?? "hasChildren";
});
const firstDefaultColumnIndex = computed(() => columns.value.findIndex((v) => v.type === "default"));
const isTreeNode = computed(() => {
var _a;
return ((_a = props.data) == null ? void 0 : _a.some((row) => row[treeChildrenKeyName.value] || row[treeHasChildrenKeyName.value])) && !!props.rowKey;
});
const getDeptParentShows = (data) => {
let result = [];
let current = renderData.value.find((v) => v._key === data._parentKey);
if (current) {
result.push(current.show);
current._parentKey && result.push(...getDeptParentShows(current));
}
return result;
};
const updateRowShow = (key) => {
let current = renderData.value.find((v) => v._key === key);
if (current) {
current.show = !current.show;
}
for (let i = 0; i < renderData.value.length; i++) {
let data = renderData.value[i];
if (data._parentKey) {
let shows = getDeptParentShows(data);
data.display = shows.every((v) => v);
}
}
};
const changeShowMore = (data) => {
if (props.lazy && !data.hasChildren()) {
data.loading = true;
props.load(data.row, resolve);
} else {
updateRowShow(data._key);
}
function resolve(arr) {
let renderArr = arr.map((item) => createRowData({ data: item, level: data._level + 1, parentKey: data._key }));
let insetIdx = renderData.value.findIndex((v) => v._key === data._key);
renderData.value.splice(insetIdx + 1, 0, ...renderArr);
data.loading = false;
updateRowShow(data._key);
}
};
const isTreeExpand = (data) => {
return !!data[treeChildrenKeyName.value] && isArray(data[treeChildrenKeyName.value]) && data[treeChildrenKeyName.value].length > 0 || data[treeHasChildrenKeyName.value];
};
const createRowData = ({ data, level, parentKey }) => {
let result = {
row: data,
selection: false,
expand: () => hasExpandColumn.value,
display: !parentKey
};
if (props.rowKey) {
result = {
...result,
_key: data[props.rowKey] ?? JSON.stringify(data),
_parentKey: parentKey,
_level: level,
display: !parentKey,
show: false,
treeExpand: isTreeExpand(data),
hasChildren: () => renderData.value.some((v) => v._parentKey === data[props.rowKey]),
loading: false
};
}
return result;
};
function setTableDatas(data, level, parentKey) {
let { rowKey } = props;
let $obj = createRowData({ data, level, parentKey });
let result = [$obj];
if (isTreeNode.value && rowKey) {
const childrens = data[treeChildrenKeyName.value] ?? [];
if (childrens.length > 0) {
for (let i = 0; i < childrens.length; i++) {
const item = childrens[i];
let $child = createRowData({ data: item, level: level + 1, parentKey: data[rowKey] });
if (item[treeChildrenKeyName.value]) {
result.push(...setTableDatas(item, level + 1, data[rowKey]));
} else {
result.push($child);
}
}
}
}
return result;
}
const updateTableData = () => {
var _a;
let level = 0;
renderData.value = (_a = props.data) == null ? void 0 : _a.reduce((result, data) => {
return [...result, ...setTableDatas(data, level)];
}, []);
};
const isAllSelected = computed(() => {
return renderData.value.length > 0 && renderData.value.every((v) => v.selection);
});
const indeterminate = computed(() => {
return renderData.value.length > 0 && renderData.value.some((v) => v.selection);
});
const emitSelectRow = () => {
let selectRows = renderData.value.filter((v) => v.selection).map((v) => v.row);
emit("select-row", selectRows);
};
const selectAll = (value) => {
renderData.value.forEach((row) => {
row.selection = value;
});
emitSelectRow();
};
const selectRow = (data, value) => {
data.selection = value;
emitSelectRow();
};
const rowSelection = reactive({
newRow: null,
oldRow: null,
newIdx: -1,
oldIdx: -1
});
const clickRow = (value, idx) => {
if (!props.highlightCurrentRow) return;
rowSelection.oldRow = rowSelection.newRow;
rowSelection.oldIdx = rowSelection.newIdx;
rowSelection.newRow = value;
rowSelection.newIdx = idx;
emit("current-change", rowSelection.newRow, rowSelection.oldRow);
};
watch(
() => tableData,
() => {
updateTableData();
},
{ deep: true }
);
updateTableData();
return {
renderData,
rowSelection,
isAllSelected,
indeterminate,
treeChildrenKeyName,
treeHasChildrenKeyName,
firstDefaultColumnIndex,
isTreeNode,
selectAll,
selectRow,
clickRow,
updateRowShow,
changeShowMore
};
};
export {
useTable
};