4173264805
* chore: wip vxe-table * feat: add table demo * chore: follow ci recommendations to adjust details * chore: add custom-cell demo * feat: add custom-cell table demo * feat: add table from demo
123 lines
2.7 KiB
TypeScript
123 lines
2.7 KiB
TypeScript
import type { SetupVxeTable } from './types';
|
||
|
||
import { defineComponent, watch } from 'vue';
|
||
|
||
import { usePreferences } from '@vben/preferences';
|
||
import { useVbenForm } from '@vben-core/form-ui';
|
||
|
||
import {
|
||
VxeButton,
|
||
VxeButtonGroup,
|
||
// VxeFormGather,
|
||
// VxeForm,
|
||
// VxeFormItem,
|
||
VxeIcon,
|
||
VxeInput,
|
||
VxeLoading,
|
||
VxePager,
|
||
// VxeList,
|
||
// VxeModal,
|
||
// VxeOptgroup,
|
||
// VxeOption,
|
||
// VxePulldown,
|
||
// VxeRadio,
|
||
// VxeRadioButton,
|
||
// VxeRadioGroup,
|
||
VxeSelect,
|
||
VxeTooltip,
|
||
VxeUI,
|
||
// VxeSwitch,
|
||
// VxeTextarea,
|
||
} from 'vxe-pc-ui';
|
||
import enUS from 'vxe-pc-ui/lib/language/en-US';
|
||
|
||
// 导入默认的语言
|
||
import zhCN from 'vxe-pc-ui/lib/language/zh-CN';
|
||
import {
|
||
VxeColgroup,
|
||
VxeColumn,
|
||
VxeGrid,
|
||
VxeTable,
|
||
VxeToolbar,
|
||
} from 'vxe-table';
|
||
|
||
// 是否加载过
|
||
let isInit = false;
|
||
|
||
// eslint-disable-next-line import/no-mutable-exports
|
||
export let useTableForm: typeof useVbenForm;
|
||
|
||
// 部分组件，如果没注册，vxe-table 会报错，这里实际没用组件，只是为了不报错，同时可以减少打包体积
|
||
const createVirtualComponent = (name = '') => {
|
||
return defineComponent({
|
||
name,
|
||
});
|
||
};
|
||
|
||
export function initVxeTable() {
|
||
if (isInit) {
|
||
return;
|
||
}
|
||
|
||
VxeUI.component(VxeTable);
|
||
VxeUI.component(VxeColumn);
|
||
VxeUI.component(VxeColgroup);
|
||
VxeUI.component(VxeLoading);
|
||
VxeUI.component(VxeGrid);
|
||
VxeUI.component(VxeToolbar);
|
||
|
||
VxeUI.component(VxeButton);
|
||
VxeUI.component(VxeButtonGroup);
|
||
// VxeUI.component(VxeCheckbox);
|
||
// VxeUI.component(VxeCheckboxGroup);
|
||
VxeUI.component(createVirtualComponent('VxeForm'));
|
||
// VxeUI.component(VxeFormGather);
|
||
// VxeUI.component(VxeFormItem);
|
||
VxeUI.component(VxeIcon);
|
||
VxeUI.component(VxeInput);
|
||
// VxeUI.component(VxeList);
|
||
VxeUI.component(VxeLoading);
|
||
// VxeUI.component(VxeModal);
|
||
// VxeUI.component(VxeOptgroup);
|
||
// VxeUI.component(VxeOption);
|
||
VxeUI.component(VxePager);
|
||
// VxeUI.component(VxePulldown);
|
||
// VxeUI.component(VxeRadio);
|
||
// VxeUI.component(VxeRadioButton);
|
||
// VxeUI.component(VxeRadioGroup);
|
||
VxeUI.component(VxeSelect);
|
||
// VxeUI.component(VxeSwitch);
|
||
// VxeUI.component(VxeTextarea);
|
||
VxeUI.component(VxeTooltip);
|
||
|
||
isInit = true;
|
||
}
|
||
|
||
export function setupVbenVxeTable(setupOptions: SetupVxeTable) {
|
||
const { configVxeTable, useVbenForm } = setupOptions;
|
||
|
||
initVxeTable();
|
||
useTableForm = useVbenForm;
|
||
|
||
const preference = usePreferences();
|
||
|
||
const localMap = {
|
||
'zh-CN': zhCN,
|
||
'en-US': enUS,
|
||
};
|
||
|
||
watch(
|
||
[() => preference.theme.value, () => preference.locale.value],
|
||
([theme, locale]) => {
|
||
VxeUI.setTheme(theme === 'dark' ? 'dark' : 'light');
|
||
VxeUI.setI18n(locale, localMap[locale]);
|
||
VxeUI.setLanguage(locale);
|
||
},
|
||
{
|
||
immediate: true,
|
||
},
|
||
);
|
||
|
||
configVxeTable(VxeUI);
|
||
}
|