From 3dba400a80c0af641bdd382dc642e21790741d4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=8D=E5=81=9A=E7=A0=81=E5=86=9C?= <599854767@qq.com>
Date: Sun, 24 Sep 2023 16:54:00 +0800
Subject: [PATCH] =?UTF-8?q?:zap:=E8=8F=9C=E5=8D=95=E7=AE=A1=E7=90=86?=
=?UTF-8?q?=E6=9B=BF=E6=8D=A2=E6=88=90vxe-table?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
package.json | 6 +-
src/main.js | 3 +-
src/views/system/menu/index.vue | 142 +++++++++++++++++---------------
src/vxe-tb.js | 51 ++++++++++++
vite/plugins/index.js | 7 +-
5 files changed, 138 insertions(+), 71 deletions(-)
create mode 100644 src/vxe-tb.js
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 @@
-
-
-
-
- {{ $t(scope.row.menuNameKey) }}
-
-
- {{ scope.row.menuName }}
-
-
-
-
-
-
-
-
-
-
+ :loading="loading"
+ :tree-config="{
+ transform: true,
+ rowField: 'menuId',
+ parentField: 'parentId'
+ }"
+ :scroll-y="{ enabled: true, gt: 20 }"
+ :data="menuList">
+
+
+
+
+
{{ $t('m.link') }}
{{ $t('m.menu') }}
{{ $t('m.directory') }}
{{ $t('m.button') }}
-
-
+
+
- {{ scope.row.orderNum }}
+ {{ scope.row.orderNum }}
-
-
-
-
+
+
+
+
-
-
+
+
-
-
+
+
{{ parseTime(scope.row.createTime) }}
-
-
+
+
-
-
-
+
+
+
+
+
-
-
+
+
-
@@ -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
+}