菜单

src/api/modules/system/menu.js

@@ -0,0 +1,57 @@
+import { HcApi } from '../../request/index'
+
+export default {
+    //懒加载菜单列表
+    async getLazyList(form) {
+        return HcApi({
+            url: '/api/blade-system/menu/lazy-list',
+            method: 'get',
+            params: form,
+        }, false)
+    },
+    //全加载菜单树
+    async getMenuTree(tenantId) {
+        return HcApi({
+            url: '/api/blade-system/menu/tree',
+            method: 'get',
+            params: {
+                tenantId,
+            },
+        }, false)
+    },
+    //菜单详情
+    async detail(id) {
+        return HcApi({
+            url: '/api/blade-system/menu/detail',
+            method: 'get',
+            params: {
+                id,
+            },
+        }, false)
+    },
+    //新增和编辑菜单
+    async submit(form) {
+        return HcApi({
+            url: '/api/blade-system/menu/submit',
+            method: 'post',
+            data: form,
+        }, false)
+    },
+    //删除菜单
+    async del(ids) {
+        return HcApi({
+            url: '/api/blade-system/menu/remove',
+            method: 'post',
+            params: {
+                ids,
+            },
+        }, false)
+    },
+    async getLazyMenuList(form) {
+        return HcApi({
+            url: '/api/blade-system/menu/lazy-menu-list',
+            method: 'get',
+            params: form,
+        }, false)
+    },
+}

src/views/system/menu.vue

@@ -14,19 +14,15 @@
             </template>
             <template #header>
                 <div class="relative w-[300px]">
-                    <hc-search-input v-model="searchForm.queryValue" color="#151921" text="搜索" @search="searchClick" />
+                    <hc-search-input v-model="searchForm.name" color="#151921" text="搜索" @search="searchClick" />
                 </div>
             </template>
             <hc-table
                 :check-style="{ fixed: true, width: 29 }" :column="tableColumn" :datas="tableData"
                 :index-style="{ fixed: true, width: 60 }" :is-index="true" ui="no-border"
-                class="menu-page-table" has-children="hasChildren1" is-check border
+                class="menu-page-table" has-children="hasChildren1" is-check lazy border :load="tableLoad"
                 @selection-change="tableSelectionChange"
             >
-                <template #name="{ row }">
-                    <i v-if="row.source" :class="[`ri-${row?.source}`]" class="hc-icon-i table-menu-icon" />
-                    <span>{{ row.name }}</span>
-                </template>
                 <template #category="{ row }">
                     <span v-if="row.category === 1">菜单</span>
                     <span v-if="row.category === 2">按钮</span>
@@ -43,9 +39,6 @@
                     </el-link>
                 </template>
             </hc-table>
-            <template #action>
-                <hc-pages :pages="searchForm" @change="pageChange" />
-            </template>
         </hc-card>
     </div>
     <!-- 菜单新增编辑 -->
@@ -95,9 +88,21 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { HcDelMsg } from 'hc-vue3-ui'
 import config from '~src/config/index'
+import mainApi from '~api/system/menu'
+import { getArrValue } from 'js-fast-way'
+
+onMounted(() => {
+    getTableData()
+})
+
+//搜索表单
+const searchForm = ref({ name: null })
+const searchClick = ()=>{
+    getTableData()
+}
 
 const tableColumn = [
     { key: 'name', name: '菜单名称', minWidth: 260 },
@@ -108,33 +113,36 @@ const tableColumn = [
     { key: 'remark', name: '备注', minWidth: 200 },
     { key: 'action', name: '操作', width: 180, fixed: 'right', align: 'center' },
 ]
-const tableData = ref([
-    { name: 'admin', code: 'xxx', key3: '超级管理员' },
-    { key1: '13028304756', key2: 'aaa', key3: '角色' },
-])
+const tableData = ref([])
 
+//获取菜单数据
+const tableLoading = ref(false)
+const getTableData = async () => {
+    tableData.value = []
+    tableLoading.value = true
+    const { data } = await mainApi.getLazyList({
+        ...searchForm.value,
+        parentId: 0,
+    })
+    tableData.value = getArrValue(data)
+    tableLoading.value = false
+}
+
+//懒加载表格
+const tableLoad = async (row, node, resolve) => {
+    const { data } = await mainApi.getLazyList({
+        ...searchForm.value,
+        parentId: row.id,
+    })
+    resolve(getArrValue(data))
+}
 
 const tableCheckedKeys = ref([])
 //多选事件
 const tableSelectionChange = (rows) => {
     tableCheckedKeys.value = rows
 }
-//搜索表单
-const searchForm = ref({
-    queryValue: null, current: 1, size: 20, total: 0,
-})
-const searchClick = ()=>{
-
-}
-const getTableData = () => {
 
-}
-//分页被点击
-const pageChange = ({ current, size }) => {
-    searchForm.value.current = current
-    searchForm.value.size = size
-    getTableData()
-}
 //菜单数据弹窗
 const isCopy = ref(false)
 const menuDataModal = ref(false)