|
|
@ -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> |
|
|
|