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

src/api/system/menu.js

@@ -51,6 +51,15 @@ export function updateMenu(data) {
   })
 }
 
+// 保存菜单排序
+export function updateMenuSort(data) {
+  return request({
+    url: '/system/menu/updateSort',
+    method: 'put',
+    data: data
+  })
+}
+
 // 删除菜单
 export function delMenu(menuId) {
   return request({

src/views/system/dept/index.vue

@@ -167,7 +167,7 @@ const title = ref("")
 const deptOptions = ref([])
 const isExpandAll = ref(true)
 const refreshTable = ref(true)
-const originalOrders = ref({});
+const originalOrders = ref({})
 
 const data = reactive({
   form: {},

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 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"
 import IconSelect from "@/components/IconSelect"
 
@@ -305,6 +318,7 @@ const menuOptions = ref([])
 const isExpandAll = ref(false)
 const refreshTable = ref(true)
 const iconSelectRef = ref(null)
+const originalOrders = ref({})
 
 const data = reactive({
   form: {},
@@ -326,6 +340,7 @@ function getList() {
   loading.value = true
   listMenu(queryParams.value).then(response => {
     menuList.value = proxy.handleTree(response.data, "menuId")
+    recordOriginalOrders(menuList.value)
     loading.value = false
   })
 }
@@ -438,6 +453,43 @@ function submitForm() {
   })
 }
 
+
+/** 递归记录原始排序 */
+function recordOriginalOrders(list) {
+  list.forEach(item => {
+    originalOrders.value[item.menuId] = item.orderNum
+    if (item.children && item.children.length) {
+      recordOriginalOrders(item.children)
+    }
+  })
+}
+
+/** 保存排序 */
+function handleSaveSort() {
+  const changedMenuIds = []
+  const changedOrderNums = []
+  const collectChanged = (list) => {
+    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) {
   proxy.$modal.confirm('是否确认删除名称为"' + row.menuName + '"的数据项?').then(function() {