106 lines
2.6 KiB
TypeScript
106 lines
2.6 KiB
TypeScript
|
import { computed, nextTick, ref } from 'vue';
|
||
|
|
import { useI18n } from 'vue-i18n';
|
||
|
|
import cloneDeep from 'lodash/cloneDeep';
|
||
|
|
import Sortable from 'sortablejs';
|
||
|
|
import { TableColumnData } from '@arco-design/web-vue/es/table/interface';
|
||
|
|
|
||
|
|
type SizeProps = 'mini' | 'small' | 'medium' | 'large';
|
||
|
|
type Column = TableColumnData & { checked?: true };
|
||
|
|
|
||
|
|
export default function useTableOption() {
|
||
|
|
const { t } = useI18n();
|
||
|
|
const cloneColumns = ref<Column[]>([]);
|
||
|
|
const showColumns = ref<Column[]>([]);
|
||
|
|
const size = ref<SizeProps>('medium');
|
||
|
|
|
||
|
|
const densityList = computed(() => [
|
||
|
|
{
|
||
|
|
name: t('searchTable.size.mini'),
|
||
|
|
value: 'mini',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: t('searchTable.size.small'),
|
||
|
|
value: 'small',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: t('searchTable.size.medium'),
|
||
|
|
value: 'medium',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: t('searchTable.size.large'),
|
||
|
|
value: 'large',
|
||
|
|
},
|
||
|
|
]);
|
||
|
|
|
||
|
|
const handleSelectDensity = (
|
||
|
|
val: string | number | Record<string, any> | undefined,
|
||
|
|
e: Event
|
||
|
|
) => {
|
||
|
|
size.value = val as SizeProps;
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleChange = (
|
||
|
|
checked: boolean | (string | boolean | number)[],
|
||
|
|
column: Column,
|
||
|
|
index: number
|
||
|
|
) => {
|
||
|
|
if (!checked) {
|
||
|
|
cloneColumns.value = showColumns.value.filter(
|
||
|
|
(item) => item.dataIndex !== column.dataIndex
|
||
|
|
);
|
||
|
|
} else {
|
||
|
|
cloneColumns.value.splice(index, 0, column);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const exchangeArray = <T extends Array<any>>(
|
||
|
|
array: T,
|
||
|
|
beforeIdx: number,
|
||
|
|
newIdx: number,
|
||
|
|
isDeep = false
|
||
|
|
): T => {
|
||
|
|
const newArray = isDeep ? cloneDeep(array) : array;
|
||
|
|
if (beforeIdx > -1 && newIdx > -1) {
|
||
|
|
// 先替换后面的，然后拿到替换的结果替换前面的
|
||
|
|
newArray.splice(
|
||
|
|
beforeIdx,
|
||
|
|
1,
|
||
|
|
newArray.splice(newIdx, 1, newArray[beforeIdx]).pop()
|
||
|
|
);
|
||
|
|
}
|
||
|
|
return newArray;
|
||
|
|
};
|
||
|
|
|
||
|
|
const popupVisibleChange = (val: boolean) => {
|
||
|
|
if (val) {
|
||
|
|
nextTick(() => {
|
||
|
|
const el = document.getElementById('tableSetting') as HTMLElement;
|
||
|
|
const sortable = new Sortable(el, {
|
||
|
|
onEnd(e: any) {
|
||
|
|
const { oldIndex, newIndex } = e;
|
||
|
|
exchangeArray(cloneColumns.value, oldIndex, newIndex);
|
||
|
|
exchangeArray(showColumns.value, oldIndex, newIndex);
|
||
|
|
},
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const deepClone = (val: any) => {
|
||
|
|
cloneColumns.value = cloneDeep(val);
|
||
|
|
cloneColumns.value.forEach((item, index) => {
|
||
|
|
item.checked = true;
|
||
|
|
});
|
||
|
|
showColumns.value = cloneDeep(cloneColumns.value);
|
||
|
|
};
|
||
|
|
return {
|
||
|
|
cloneColumns,
|
||
|
|
showColumns,
|
||
|
|
size,
|
||
|
|
densityList,
|
||
|
|
handleSelectDensity,
|
||
|
|
handleChange,
|
||
|
|
exchangeArray,
|
||
|
|
popupVisibleChange,
|
||
|
|
deepClone,
|
||
|
|
};
|
||
|
|
}
|