diff --git a/package.json b/package.json
index b0232da..7dd0f95 100644
--- a/package.json
+++ b/package.json
@@ -42,17 +42,21 @@
"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.14",
+ "xe-utils": "^3.5.14"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.2.3",
"@vue/compiler-sfc": "^3.3.4",
+ "consola": "^3.2.3",
"sass": "1.45.0",
"tailwindcss": "^3.3.3",
"typescript": "^5.2.2",
"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/assets/styles/variables.module.scss b/src/assets/styles/variables.module.scss
index 713ad7e..bab64cc 100644
--- a/src/assets/styles/variables.module.scss
+++ b/src/assets/styles/variables.module.scss
@@ -41,6 +41,18 @@ html.dark {
// --el-bg-color: #141414;
--base-color-white: #ffffff;
--base-text-color-rgba: #ffffff;
+
+ // vxe-table黑色样式
+ --vxe-font-color: #98989e;
+ --vxe-primary-color: #2c7ecf;
+ --vxe-icon-background-color: #98989e;
+ --vxe-table-font-color: #98989e;
+ --vxe-table-resizable-color: #95969a;
+ --vxe-table-header-background-color: #28282a;
+ --vxe-table-body-background-color: #151518;
+ --vxe-table-background-color: #4a5663;
+ --vxe-table-border-width: 1px;
+ --vxe-table-border-color: #37373a;
}
html.cafe {
filter: sepia(0.9) hue-rotate(315deg) brightness(0.9);
diff --git a/src/main.ts b/src/main.ts
index dbb32f8..ebd26e1 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -8,6 +8,7 @@ import '@/assets/styles/index.scss' // global css
import App from './App.vue'
import router from './router'
import directive from './directive' // directive
+import vxetb from './vxe-tb'
// 注册指令
import plugins from './plugins' // plugins
import { downFile } from '@/utils/request'
@@ -68,4 +69,5 @@ app.component('svg-icon', SvgIcon)
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 ce69afe..4ef7f9d 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -41,82 +41,78 @@
{{ $t('btn.expand') }}/{{ $t('btn.collapse') }}
-
+
-
-
-
-
- {{ $t(scope.row.menuNameKey) }}
-
-
- {{ scope.row.menuName }}
-
+ :loading="loading"
+ :column-config="{ resizable: true }"
+ :tree-config="{
+ parentField: 'parentId',
+ reserve: true
+ }"
+ :row-config="{
+ keyField: 'menuId'
+ }"
+ :scroll-y="{ enabled: true, gt: 20 }"
+ :data="menuList">
+
+
+
+
+
-
-
+
+
-
+ {{ $t('m.link') }}
+ {{ $t('m.menu') }}
+ {{ $t('m.directory') }}
+ {{ $t('m.button') }}
-
-
-
+
+
- {{ $t('m.link') }}
- {{ $t('m.menu') }}
- {{ $t('m.directory') }}
- {{ $t('m.button') }}
-
-
-
-
- {{ scope.row.orderNum }}
+ {{ scope.row.orderNum }}
-
-
-
-
+
+
+
+
-
-
+
+
-
-
+
+
{{ parseTime(scope.row.createTime) }}
-
-
+
+
-
-
-
+
+
+
+
+
-
-
+
+
-
-
+
@@ -164,17 +160,11 @@
-
-
-
-
-
-
+
-
-
+
-
+
@@ -187,6 +177,11 @@
+
+
+
+
+
@@ -232,7 +227,11 @@
{{ $t('m.componentPath') }}
-
+
+
+ src/views/
+
+
@@ -329,7 +328,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' }]
@@ -341,12 +339,9 @@ const title = ref('')
const menuOptions = ref([])
const menuQueryOptions = ref([])
const isExpandAll = ref(false)
-const refreshTable = ref(true)
-const showChooseIcon = ref(false)
const iconSelectRef = ref(null)
const menuRef = ref(null)
const listRef = ref(null)
-const loadNodeMap = new Map()
const state = reactive({
form: {},
queryParams: {
@@ -361,7 +356,7 @@ const state = reactive({
orderNum: [{ required: true, message: '菜单顺序不能为空', trigger: 'blur' }],
path: [
{ required: true, message: '路由地址不能为空', trigger: 'blur' },
- { pattern: /^[A-Za-z].+$/, message: '输入格式不正确，字母开头', trigger: 'blur' }
+ { pattern: /^[/A-Za-z].+$/, message: '输入格式不正确，字母开头', trigger: 'blur' }
],
visible: [{ required: true, message: '显示状态不能为空', trigger: 'blur' }]
},
@@ -374,19 +369,28 @@ proxy.getDicts(dictParams).then((response) => {
state[element.dictType] = element.list
})
})
+// 列显隐信息
+const columns = ref([
+ { label: `添加时间`, visible: false, prop: 'createTime' },
+ { label: `排序`, visible: false, prop: 'orderNum' }
+])
+const tableHeight = ref(document.documentElement.scrollHeight - 245 + 'px')
const { queryParams, form, rules, sys_show_hide, sys_normal_disable } = toRefs(state)
/** 查询菜单列表 */
-function getList() {
+function getList(type) {
loading.value = true
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
+ if (type == 1) {
+ menuQueryOptions.value = response.data
+ }
loading.value = false
})
}
@@ -417,15 +421,10 @@ function reset() {
}
proxy.resetForm('menuRef')
}
-/** 展示下拉图标 */
-function showSelectIcon() {
- iconSelectRef.value.reset()
- // showChooseIcon.value = true
-}
+
/** 选择图标 */
function selected(name) {
form.value.icon = name
- // showChooseIcon.value = false
}
/** 搜索按钮操作 */
function handleQuery() {
@@ -450,11 +449,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) {
@@ -535,27 +549,11 @@ function handleChangeSort(info) {
})
}
// ******************自定义编辑 end **********************
-const loadMenu = (row, treeNode, resolve) => {
- listMenuById(row.menuId).then((res) => {
- loadNodeMap.set(row.menuId, { row, treeNode, resolve })
- resolve(res.data)
- })
-}
// 刷新懒加载后的数据
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()
- }
+
+ getList()
}
listMenu({ menuTypeIds: 'M,C' }).then((response) => {
@@ -563,5 +561,6 @@ listMenu({ menuTypeIds: 'M,C' }).then((response) => {
})
// 首次列表加载（只加载一层）
-getList()
+// getList(1)
+handleQuery()
diff --git a/src/vxe-tb.ts b/src/vxe-tb.ts
new file mode 100644
index 0000000..a2deb1e
--- /dev/null
+++ b/src/vxe-tb.ts
@@ -0,0 +1,52 @@
+// 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)
+ .use(Icon)
+}
diff --git a/vite/plugins/index.js b/vite/plugins/index.js
index 30db38a..ec9d53c 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,11 @@ 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
+}