diff --git a/yudao-ui-admin-vue3/package.json b/yudao-ui-admin-vue3/package.json index ca72ce7c1..12b6dabc0 100644 --- a/yudao-ui-admin-vue3/package.json +++ b/yudao-ui-admin-vue3/package.json @@ -51,7 +51,9 @@ "vue-i18n": "9.2.2", "vue-router": "^4.1.5", "vue-types": "^4.2.1", - "web-storage-cache": "^1.1.1" + "vxe-table": "^4.3.5", + "web-storage-cache": "^1.1.1", + "xe-utils": "^3.5.7" }, "devDependencies": { "@commitlint/cli": "^17.1.2", diff --git a/yudao-ui-admin-vue3/src/components/ProTable/index.ts b/yudao-ui-admin-vue3/src/components/ProTable/index.ts new file mode 100644 index 000000000..778514602 --- /dev/null +++ b/yudao-ui-admin-vue3/src/components/ProTable/index.ts @@ -0,0 +1,3 @@ +import ProTable from './src/ProTable.vue' + +export { ProTable } diff --git a/yudao-ui-admin-vue3/src/components/ProTable/src/ProTable.vue b/yudao-ui-admin-vue3/src/components/ProTable/src/ProTable.vue new file mode 100644 index 000000000..6921afcad --- /dev/null +++ b/yudao-ui-admin-vue3/src/components/ProTable/src/ProTable.vue @@ -0,0 +1,62 @@ + + + + + diff --git a/yudao-ui-admin-vue3/src/main.ts b/yudao-ui-admin-vue3/src/main.ts index 785f3e9e4..03369099d 100644 --- a/yudao-ui-admin-vue3/src/main.ts +++ b/yudao-ui-admin-vue3/src/main.ts @@ -16,6 +16,9 @@ import { setupGlobCom } from '@/components' // 引入element-plus import { setupElementPlus } from '@/plugins/elementPlus' +// 引入vxe-table +import { setupVxeTable } from '@/plugins/vxeTable' + // 引入全局样式 import '@/styles/index.less' @@ -44,6 +47,8 @@ const setupAll = async () => { setupElementPlus(app) + setupVxeTable(app) + setupRouter(app) setupAuth(app) diff --git a/yudao-ui-admin-vue3/src/plugins/vxeTable/index.ts b/yudao-ui-admin-vue3/src/plugins/vxeTable/index.ts new file mode 100644 index 000000000..8a8ce8c87 --- /dev/null +++ b/yudao-ui-admin-vue3/src/plugins/vxeTable/index.ts @@ -0,0 +1,120 @@ +import { App, unref } from 'vue' +import 'xe-utils' +import XEUtils from 'xe-utils' +import { i18n } from '@/plugins/vueI18n' +import zhCN from 'vxe-table/es/locale/lang/zh-CN' +import enUS from 'vxe-table/lib/locale/lang/en-US' +import { + // 全局对象 + VXETable, + + // 表格功能 + Filter, + Edit, + Menu, + Export, + Keyboard, + Validator, + + // 可选组件 + Icon, + Column, + Colgroup, + Grid, + Tooltip, + Toolbar, + Pager, + Form, + FormItem, + FormGather, + Checkbox, + CheckboxGroup, + Radio, + RadioGroup, + RadioButton, + Switch, + Input, + Select, + Optgroup, + Option, + Textarea, + Button, + Modal, + List, + Pulldown, + + // 表格 + Table +} from 'vxe-table' + +// 全局默认参数 +VXETable.setup({ + size: 'medium', // 全局尺寸 + version: 0, // 版本号,对于某些带数据缓存的功能有用到,上升版本号可以用于重置数据 + zIndex: 1008, // 全局 zIndex 起始值,如果项目的的 z-index 样式值过大时就需要跟随设置更大,避免被遮挡 + loadingText: '加载中...', // 全局loading提示内容,如果为null则不显示文本 + table: { + // 自动监听父元素的变化去重新计算表格 + autoResize: true, + emptyText: '暂无数据', + // 鼠标移到行是否要高亮显示 + highlightHoverRow: true + }, + pager: { + autoHidden: false, + perfect: true, + pageSize: 10, + pagerCount: 7, + pageSizes: [10, 15, 20, 50, 100], + layouts: ['PrevJump', 'PrevPage', 'Jump', 'PageCount', 'NextPage', 'NextJump', 'Sizes', 'Total'] + }, + input: { + clearable: true + }, + i18n: (key, args) => { + return unref(i18n.global.locale) === 'zh' + ? XEUtils.toFormatString(XEUtils.get(zhCN, key), args) + : XEUtils.toFormatString(XEUtils.get(enUS, key), args) + } +}) +export const setupVxeTable = (app: App) => { + // 表格功能 + app.use(Filter).use(Edit).use(Menu).use(Export).use(Keyboard).use(Validator) + + // 可选组件 + app + .use(Icon) + .use(Column) + .use(Colgroup) + .use(Grid) + .use(Tooltip) + .use(Toolbar) + .use(Pager) + .use(Form) + .use(FormItem) + .use(FormGather) + .use(Checkbox) + .use(CheckboxGroup) + .use(Radio) + .use(RadioGroup) + .use(RadioButton) + .use(Switch) + .use(Input) + .use(Select) + .use(Optgroup) + .use(Option) + .use(Textarea) + .use(Button) + .use(Modal) + .use(List) + .use(Pulldown) + + // 安装表格 + .use(Table) + + // 给 vue 实例挂载内部对象,例如: + // app.config.globalProperties.$XModal = VXETable.modal + // app.config.globalProperties.$XPrint = VXETable.print + // app.config.globalProperties.$XSaveFile = VXETable.saveFile + // app.config.globalProperties.$XReadFile = VXETable.readFile +} diff --git a/yudao-ui-admin-vue3/vite.config.ts b/yudao-ui-admin-vue3/vite.config.ts index 83b03c0bc..12d958c83 100644 --- a/yudao-ui-admin-vue3/vite.config.ts +++ b/yudao-ui-admin-vue3/vite.config.ts @@ -6,7 +6,7 @@ import WindiCSS from 'vite-plugin-windicss' import VueJsx from '@vitejs/plugin-vue-jsx' import EslintPlugin from 'vite-plugin-eslint' import VueI18n from '@intlify/vite-plugin-vue-i18n' -import { createStyleImportPlugin, ElementPlusResolve } from 'vite-plugin-style-import' +import { createStyleImportPlugin, ElementPlusResolve, VxeTableResolve } from 'vite-plugin-style-import' import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' import PurgeIcons from 'vite-plugin-purge-icons' import { createHtmlPlugin } from 'vite-plugin-html' @@ -56,13 +56,19 @@ export default ({ command, mode }: ConfigEnv): UserConfig => { VueJsx(), WindiCSS(), createStyleImportPlugin({ - resolves: [ElementPlusResolve()], + resolves: [ElementPlusResolve(),VxeTableResolve()], libs: [{ libraryName: 'element-plus', esModule: true, resolveStyle: (name) => { return `element-plus/es/components/${name.substring(3)}/style/css` } + },{ + libraryName: 'vxe-table', + esModule: true, + resolveStyle: (name) => { + return `vxe-table/es/${name}/style.css` + } }] }), EslintPlugin({