Browse Source

系统菜单管理优化

master
陈薪名 1 year ago
parent
commit
8c480d4237
  1. 128
      src/views/system/menu/index.vue

128
src/views/system/menu/index.vue

@ -25,10 +25,10 @@
<Icon class="mr-5px" icon="ep:plus" />
新增
</el-button>
<el-button type="danger" @click="toggleExpandAll">
<!-- <el-button type="danger" @click="toggleExpandAll">
<Icon class="mr-5px" icon="ep:sort" />
展开/折叠
</el-button>
</el-button> -->
<el-button @click="refreshMenu">
<Icon class="mr-5px" icon="ep:refresh" />
刷新菜单缓存
@ -39,7 +39,20 @@
<!-- 列表 -->
<ContentWrap>
<el-table v-if="refreshTable" v-loading="loading" :data="list" :default-expand-all="isExpandAll" row-key="id">
<el-table-v2
v-model:expanded-row-keys="expandedRowKeys"
v-if="refreshTable"
v-loading="loading"
:expand-column-key="expandColumnKey"
:columns="columns"
:data="list"
:width="1600"
:height="600"
@row-expand="onRowExpanded"
@expanded-rows-change="onExpandedRowsChange"
fixed
/>
<!-- <el-table v-if="refreshTable" v-loading="loading" :data="list" :default-expand-all="isExpandAll" row-key="id">
<el-table-column :show-overflow-tooltip="true" label="菜单名称" prop="name" width="250" />
<el-table-column align="center" label="图标" prop="icon" width="100">
<template #default="scope">
@ -72,19 +85,21 @@
</el-button>
</template>
</el-table-column>
</el-table>
</el-table> -->
</ContentWrap>
<!-- 表单弹窗添加/修改 -->
<MenuForm ref="formRef" @success="getList" />
</template>
<script lang="ts" setup>
<script lang="tsx" setup>
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { handleTree } from '@/utils/tree'
import { handleTree, unflatten } from '@/utils/tree'
import * as MenuApi from '@/api/system/menu'
import MenuForm from './MenuForm.vue'
import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
import { getInfo } from '@/api/login'
import Icon from '@/components/Icon/src/Icon.vue'
import { ElButton } from 'element-plus'
defineOptions({ name: 'SystemMenu' })
@ -102,6 +117,12 @@ const queryFormRef = ref() // 搜索的表单
const isExpandAll = ref(false) //
const refreshTable = ref(true) //
const expandedRowKeys = ref<string[]>([])
const expandColumnKey = ref('name')
/** 查询列表 */
const getList = async () => {
loading.value = true
@ -166,8 +187,99 @@ const handleDelete = async (id: number) => {
} catch { }
}
//
const columns = ref<any>([{
key: '1',
dataKey: '2',
title: '3',
width: 250,
}])
const generateColumns = [{
key: 'name',
dataKey: 'name',
title: '菜单名称',
width: 200,
},{
key: 'icon',
dataKey: 'icon',
title: '图标',
width: 100,
cellRenderer: ({ cellData: icon }) => <Icon icon={icon} />
},{
key: 'sort',
dataKey: 'sort',
title: '排序',
width: 150,
},{
key: 'permission',
dataKey: 'permission',
title: '权限标识',
width: 250,
},{
key: 'path',
dataKey: 'path',
title: '组件路径',
width: 250,
},{
key: 'componentName',
dataKey: 'componentName',
title: '组件名称',
width: 250,
},{
key: 'status',
dataKey: 'status',
title: '状态',
width: 100,
cellRenderer: ({ cellData: status }) => <dict-tag type={DICT_TYPE.COMMON_STATUS} value={status} />
},{
key: 'ation',
dataKey: 'ation',
title: '操作',
width: 250,
cellRenderer: ({ rowData }) => (
<>
<ElButton link type={'primary'} onClick={()=>{openForm('update', rowData.id)}}>
<Icon icon="ep:edit" />
修改
</ElButton>
<ElButton link type={'primary'} onClick={()=>{openForm('create', undefined, rowData.id)}}>
<Icon icon="ep:plus" />
新增
</ElButton>
<ElButton link type={'danger'} onClick={()=>{handleDelete(rowData.id)}}>
<Icon icon="ep:delete" />
删除
</ElButton>
</>
),
// v-hasPermi={['system:menu:update']}
// v-hasPermi={['system:menu:create']}
// v-hasPermi={['system:menu:delete']}
}]
const onRowExpanded = () => {
}
const onExpandedRowsChange = () => {
}
// const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
// Array.from({ length }).map((_, columnIndex) => ({
// ...props,
// key: `${prefix}${columnIndex}`,
// dataKey: `${prefix}${columnIndex}`,
// title: `Column ${columnIndex}`,
// width: 150,
// }))
/** 初始化 **/
onMounted(() => {
getList()
onMounted(async () => {
await getList()
console.log(127, list)
columns.value = generateColumns
})
</script>

Loading…
Cancel
Save