系统菜单管理优化

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(() => {
+onMounted(async () => {
-  getList()
+  await getList()
+  console.log(127, list)
+  columns.value = generateColumns
+
 })
 </script>