diff --git a/package.json b/package.json index cefe6db..b9f0ab1 100644 --- a/package.json +++ b/package.json @@ -40,15 +40,19 @@ "vue-clipboard3": "^2.0.0", "vue-cropper": "1.0.2", "vue-i18n": "9.2.2", - "vue-router": "^4.2.2" + "vue-router": "^4.2.2", + "vxe-table": "^4.5.12", + "xe-utils": "^3.5.13" }, "devDependencies": { "@vitejs/plugin-vue": "^4.2.3", "@vue/compiler-sfc": "^3.3.4", + "consola": "^3.2.3", "sass": "1.45.0", "unplugin-auto-import": "0.5.3", "vite": "^4.3.9", "vite-plugin-compression": "^0.3.6", + "vite-plugin-style-import": "^2.0.0", "vite-plugin-svg-icons": "1.0.5", "vite-plugin-vue-setup-extend": "^0.4.0" } diff --git a/src/main.js b/src/main.js index 138aa50..77cfd7f 100644 --- a/src/main.js +++ b/src/main.js @@ -8,6 +8,7 @@ import '@/assets/styles/index.scss' // global css import App from './App' import router from './router' import directive from './directive' // directive +import vxetb from './vxe-tb' // 注册指令 import plugins from './plugins' // plugins import { downFile } from '@/utils/request' @@ -70,5 +71,5 @@ app.component('svg-icon', SvgIcon) app.component('ZrDialog', Dialog) directive(app) - +vxetb(app) app.use(pinia).use(router).use(plugins).use(ElementPlus, {}).use(elementIcons).use(vueI18n).mount('#app') diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue index 36d2acd..210822f 100644 --- a/src/views/system/menu/index.vue +++ b/src/views/system/menu/index.vue @@ -44,78 +44,68 @@ - - - - - - - - - + :loading="loading" + :tree-config="{ + transform: true, + rowField: 'menuId', + parentField: 'parentId' + }" + :scroll-y="{ enabled: true, gt: 20 }" + :data="menuList"> + + + + + - - + + - - - - + + + + - - + + - - + + - - + + - - + + - @@ -332,7 +322,6 @@ import { addMenu, delMenu, getMenu, listMenu, updateMenu, changeMenuSort as changeSort, listMenuById } from '@/api/system/menu' import SvgIcon from '@/components/SvgIcon' import IconSelect from '@/components/IconSelect' - const { proxy } = getCurrentInstance() var dictParams = [{ dictType: 'sys_show_hide' }, { dictType: 'sys_normal_disable' }] @@ -386,7 +375,7 @@ function getList(type) { if (queryParams.value.parentId != undefined || queryParams.value.menuName != undefined) { queryParams.value.menuTypeIds = '' } else { - queryParams.value.menuTypeIds = 'M,C' + queryParams.value.menuTypeIds = 'M,C,F' } listMenu(queryParams.value).then((response) => { menuList.value = response.data @@ -451,11 +440,26 @@ function handleAdd(row) { } /** 展开/折叠操作 */ function toggleExpandAll() { - refreshTable.value = false + // refreshTable.value = false isExpandAll.value = !isExpandAll.value - nextTick(() => { - refreshTable.value = true - }) + // nextTick(() => { + // refreshTable.value = true + // }) + const $table = listRef.value + if ($table) { + if (isExpandAll.value) { + $table.setAllTreeExpand(true) + } else { + $table.clearTreeExpand() + } + } +} +const hasExpandRow = (row) => { + const $table = listRef.value + if ($table) { + return $table.isTreeExpandByRow(row) + } + return false } /** 修改按钮操作 */ async function handleUpdate(row) { @@ -546,23 +550,25 @@ const loadMenu = (row, treeNode, resolve) => { function refreshMenu(pid) { loading.value = true // console.log(loadNodeMap) - if (loadNodeMap.size > 0) { - const hasNode = loadNodeMap.has(pid) - if (hasNode) { - const { row, treeNode, resolve } = loadNodeMap.get(pid) - proxy.$refs.listRef.store.states.lazyTreeNodeMap[pid] = [] - loadMenu(row, treeNode, resolve) - } - loading.value = false - } else { - getList() - } + // if (loadNodeMap.size > 0) { + // const hasNode = loadNodeMap.has(pid) + // if (hasNode) { + // const { row, treeNode, resolve } = loadNodeMap.get(pid) + // proxy.$refs.listRef.store.states.lazyTreeNodeMap[pid] = [] + // loadMenu(row, treeNode, resolve) + // } + // loading.value = false + // } else { + // getList() + // } + getList() } -// listMenu({ menuTypeIds: 'M,C' }).then((response) => { -// menuQueryOptions.value = response.data -// }) +listMenu({ menuTypeIds: 'M,C' }).then((response) => { + menuQueryOptions.value = response.data +}) // 首次列表加载（只加载一层） -getList(1) +// getList(1) +handleQuery() diff --git a/src/vxe-tb.js b/src/vxe-tb.js new file mode 100644 index 0000000..e32ffd9 --- /dev/null +++ b/src/vxe-tb.js @@ -0,0 +1,51 @@ +// import XEUtils from 'xe-utils' +import { + // 全局对象 + // VXETable, + Icon, + Column, + // 表格 + Tooltip, + Table +} from 'vxe-table' +import 'vxe-table/styles/cssvar.scss' + +export default function useTable(app) { + // 表格功能 + // app.use(Filter) + // .use(Edit) + // .use(Menu) + // .use(Export) + // .use(Keyboard) + // .use(Validator) + + // 可选组件 + app + .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) +} diff --git a/vite/plugins/index.js b/vite/plugins/index.js index 30db38a..87e35d5 100644 --- a/vite/plugins/index.js +++ b/vite/plugins/index.js @@ -4,6 +4,7 @@ import createAutoImport from './auto-import' import createSvgIcon from './svg-icon' import createCompression from './compression' import createSetupExtend from './setup-extend' +import { createStyleImportPlugin, VxeTableResolve } from 'vite-plugin-style-import' export default function createVitePlugins(viteEnv, isBuild = false) { const vitePlugins = [vue()] @@ -11,5 +12,9 @@ export default function createVitePlugins(viteEnv, isBuild = false) { vitePlugins.push(createSetupExtend()) vitePlugins.push(createSvgIcon(isBuild)) isBuild && vitePlugins.push(...createCompression(viteEnv)) + + vitePlugins.push(createStyleImportPlugin({ + resolves: [VxeTableResolve()] + })) return vitePlugins -} \ No newline at end of file +}