菜单管理支持批量保存排序

src/api/system/menu.ts

@@ -1,5 +1,5 @@
 import request from '@/utils/request'
-import type { MenuQueryParams, SysMenu, TreeSelect, AjaxResult, RoleMenuTreeselectResult } from '@/types'
+import type { MenuQueryParams, SysMenu, MenuSortParams, TreeSelect, AjaxResult, RoleMenuTreeselectResult } from '@/types'
 
 // 查询菜单列表
 export function listMenu(query?: MenuQueryParams): Promise<AjaxResult<SysMenu[]>> {
@@ -52,6 +52,15 @@ export function updateMenu(data: SysMenu): Promise<AjaxResult> {
   })
 }
 
+// 保存菜单排序
+export function updateMenuSort(data: MenuSortParams): Promise<AjaxResult> {
+  return request({
+    url: '/system/menu/updateSort',
+    method: 'put',
+    data: data
+  })
+}
+
 // 删除菜单
 export function delMenu(menuId: number): Promise<AjaxResult> {
   return request({

src/types/api/system/menu.ts

@@ -40,6 +40,14 @@ export interface SysMenu extends BaseEntity {
   visible?: '0' | '1';
   /** 状态（0正常 1停用） */
   status?: '0' | '1';
+  /** 子菜单 */
+  children?: SysMenu[];
+}
+
+/** 保存菜单排序参数 */
+export interface MenuSortParams {
+  menuIds: string
+  orderNums: string
 }
 
 export interface RoleMenuTreeselectResult extends AjaxResult {

src/views/system/menu/index.vue

@@ -36,6 +36,15 @@
                v-hasPermi="['system:menu:add']"
             >新增</el-button>
          </el-col>
+         <el-col :span="1.5">
+            <el-button
+               type="warning"
+               plain
+               icon="Check"
+               @click="handleSaveSort"
+               v-hasPermi="['system:menu:edit']"
+            >保存排序</el-button>
+         </el-col>
          <el-col :span="1.5">
             <el-button 
                type="info"
@@ -61,7 +70,11 @@
                <svg-icon :icon-class="scope.row.icon" />
             </template>
          </el-table-column>
-         <el-table-column prop="orderNum" label="排序" width="60"></el-table-column>
+         <el-table-column prop="orderNum" label="排序" width="200">
+            <template #default="scope">
+               <el-input-number v-model="scope.row.orderNum" controls-position="right" :min="0" style="width: 88px" />
+            </template>
+         </el-table-column>
          <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="status" label="状态" width="80">
@@ -289,7 +302,7 @@
 </template>
 
 <script setup lang="ts" name="Menu">
-import { addMenu, delMenu, getMenu, listMenu, updateMenu } from "@/api/system/menu"
+import { addMenu, delMenu, getMenu, listMenu, updateMenu, updateMenuSort, } from "@/api/system/menu"
 import SvgIcon from "@/components/SvgIcon/index.vue"
 import IconSelect from "@/components/IconSelect/index.vue"
 import type { SysMenu, MenuQueryParams } from '@/types/api/system/menu'
@@ -306,6 +319,7 @@ const menuOptions = ref<any[]>([])
 const isExpandAll = ref<boolean>(false)
 const refreshTable = ref<boolean>(true)
 const iconSelectRef = ref<any | null>(null)
+const originalOrders = ref<Record<number, number>>({})
 
 const data = reactive({
   form: {} as SysMenu,
@@ -327,6 +341,7 @@ function getList() {
   loading.value = true
   listMenu(queryParams.value).then(response => {
     menuList.value = proxy.handleTree(response.data, "menuId")
+    recordOriginalOrders(menuList.value)
     loading.value = false
   })
 }
@@ -439,6 +454,42 @@ function submitForm() {
   })
 }
 
+/** 递归记录原始排序 */
+function recordOriginalOrders(list: SysMenu[]) {
+  list.forEach(item => {
+    originalOrders.value[item.menuId] = item.orderNum
+    if (item.children && item.children.length) {
+      recordOriginalOrders(item.children)
+    }
+  })
+}
+
+/** 保存排序 */
+function handleSaveSort() {
+  const changedMenuIds: number[] = []
+  const changedOrderNums: number[] = []
+  const collectChanged = (list: SysMenu[]) => {
+    list.forEach(item => {
+      if (String(originalOrders.value[item.menuId!]) !== String(item.orderNum)) {
+        changedMenuIds.push(item.menuId!)
+        changedOrderNums.push(item.orderNum!)
+      }
+      if (item.children && item.children.length) {
+        collectChanged(item.children)
+      }
+    })
+  }
+  collectChanged(menuList.value)
+  if (changedMenuIds.length === 0) {
+   proxy.$modal.msgWarning("未检测到排序修改")
+    return
+  }
+  updateMenuSort({ menuIds: changedMenuIds.join(","), orderNums: changedOrderNums.join(",") }).then(() => {
+   proxy.$modal.msgSuccess("排序保存成功")
+    recordOriginalOrders(menuList.value)
+  })
+}
+
 /** 删除按钮操作 */
 function handleDelete(row: SysMenu) {
   proxy.$modal.confirm('是否确认删除名称为"' + row.menuName + '"的数据项?').then(function() {