菜单管理

src/views/auth/menu/index.vue

@@ -1,101 +1,38 @@
 <template>
-    <div class="default-main">
-        <TableHeader>
-            <template v-slot:operation>
-                <el-button :icon="Plus" type="primary" @click="addMenu">新增</el-button>
-            </template>
-        </TableHeader>
-        <Table ref="tableRef" />
-        <popupForm ref="popupRef"></popupForm>
+    <div class='default-main' style='display: flex' v-loading='loading'>
+        <Menu style='width: 500px' @init='init' @select='select' :menu-data='menuData' />
+        <Api style='width: calc(100% - 500px)' @init='init' :id='selectedId' />
     </div>
 </template>
-<script setup lang="ts">
-import { Plus } from '@element-plus/icons-vue'
-import { ref, onMounted, provide } from 'vue'
-import TableStore from '@/utils/tableStore'
-import Table from '@/components/table/index.vue'
-import TableHeader from '@/components/table/header/index.vue'
-import popupForm from './popupForm.vue'
-import { useNavTabs } from '@/stores/navTabs'
-import {  delMenu } from '@/api/systerm'
+<script setup lang='ts'>
+import { functionTree } from '@/api/user-boot/function'
+import Menu from './menu.vue'
+import Api from './api.vue'
+import { provide, reactive, ref } from 'vue'
 
 defineOptions({
     name: 'auth/menu'
 })
-const tableRef = ref()
-const popupRef = ref()
-const navTabs = useNavTabs()
-const tableStore = new TableStore({
-    showPage: false,
-    url: '/user-boot/function/functionTree',
-    column: [
-        { title: '菜单名称', field: 'title', align: 'left', treeNode: true },
-        {
-            title: '图标',
-            field: 'icon',
-            align: 'center',
-            width: '60',
-            render: 'icon'
-        },
-        {
-            title: '操作',
-            align: 'center',
-            width: '130',
-            render: 'buttons',
-            buttons: [
-                {
-                    name: 'edit',
-                    title: '编辑',
-                    type: 'primary',
-                    icon: 'el-icon-EditPen',
-                    render: 'tipButton',
-                    click: row => {
-                        popupRef.value.open('编辑菜单', row)
-                    }
-                },
-                {
-                    name: 'del',
-                    title: '删除',
-                    type: 'danger',
-                    icon: 'el-icon-Delete',
-                    render: 'confirmButton',
-                    popconfirm: {
-                        confirmButtonText: '确认',
-                        cancelButtonText: '取消',
-                        confirmButtonType: 'danger',
-                        title: '确定删除该菜单吗？'
-                    },
-                    click: row => {
-                        delMenu(row.id).then(() => {
-                            tableStore.index()
-                        })
-                    }
-                }
-            ]
-        }
-    ],
-    loadCallback:()=>{
-        // 过滤数组中type等于1的数据，children下钻
-        const filterData = (arr:any[])=>{
-            return  arr.filter((item:any)=>{
-                if (item.children.length) {
-                    item.children = filterData(item.children)
-                }
-                return item.type != 1
-            })
-        }
-        tableStore.table.data = filterData(tableStore.table.data)
-    }
-})
-provide('tableStore', tableStore)
-
-onMounted(() => {
-    tableStore.table.ref = tableRef.value
-    tableStore.index()
-    tableStore.table.loading = false
-})
-const addMenu = () => {
-    console.log(popupRef)
-    popupRef.value.open('新增菜单')
+const menuData = ref<any[]>([])
+const selectedId = ref('')
+const loading = ref(true)
+const select = (id: string) => {
+    selectedId.value = id
 }
+const filterData = (arr: any[]) => {
+    return arr.filter((item: any) => {
+        if (item.children.length) {
+            item.children = filterData(item.children)
+        }
+        return item.type === 0
+    })
+}
+const init = () => {
+    loading.value = true
+    functionTree().then(res => {
+        menuData.value = filterData(res.data)
+        loading.value = false
+    })
+}
+init()
 </script>