部门管理支持批量保存排序

src/api/system/dept.ts

@@ -1,5 +1,5 @@
 import request from '@/utils/request'
-import type { DeptQueryParams, SysDept, AjaxResult } from '@/types'
+import type { DeptQueryParams, SysDept, DeptSortParams, AjaxResult } from '@/types'
 
 // 查询部门列表
 export function listDept(query?: DeptQueryParams): Promise<AjaxResult<SysDept[]>> {
@@ -44,6 +44,15 @@ export function updateDept(data: SysDept): Promise<AjaxResult> {
   })
 }
 
+// 保存部门排序
+export function updateDeptSort(data: DeptSortParams): Promise<AjaxResult> {
+  return request({
+    url: '/system/dept/updateSort',
+    method: 'put',
+    data: data
+  })
+}
+
 // 删除部门
 export function delDept(deptId: number): Promise<AjaxResult> {
   return request({

src/types/api/system/dept.ts

@@ -8,6 +8,12 @@ export interface DeptQueryParams {
   status?: string;
 }
 
+/** 保存部门排序参数 */
+export interface DeptSortParams {
+  deptIds: string
+  orderNums: string
+}
+
 /** 部门信息 */
 export interface SysDept extends BaseEntity {
   /** 部门编号 */
@@ -28,4 +34,6 @@ export interface SysDept extends BaseEntity {
   email?: string;
   /** 状态（0正常 1停用） */
   status?: '0' | '1';
+  /** 子部门 */
+  children?: SysDept[];
 }

src/views/system/dept/index.vue

@@ -36,6 +36,15 @@
                v-hasPermi="['system:dept:add']"
             >新增</el-button>
          </el-col>
+         <el-col :span="1.5">
+            <el-button
+               type="warning"
+               plain
+               icon="Check"
+               @click="handleSaveSort"
+               v-hasPermi="['system:dept:edit']"
+            >保存排序</el-button>
+         </el-col>
          <el-col :span="1.5">
             <el-button
                type="info"
@@ -56,7 +65,11 @@
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
       >
          <el-table-column prop="deptName" label="部门名称" width="260"></el-table-column>
-         <el-table-column prop="orderNum" label="排序" width="200"></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="status" label="状态" width="100">
             <template #default="scope">
                <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
@@ -141,7 +154,7 @@
 </template>
 
 <script setup lang="ts" name="Dept">
-import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/system/dept"
+import { listDept, getDept, delDept, addDept, updateDept, updateDeptSort, listDeptExcludeChild } from "@/api/system/dept"
 import type { SysDept, DeptQueryParams } from '@/types/api/system/dept'
 import type { TreeSelect } from '@/types/api/common'
 
@@ -156,6 +169,7 @@ const title = ref<string>("")
 const deptOptions = ref<TreeSelect[]>([])
 const isExpandAll = ref<boolean>(true)
 const refreshTable = ref<boolean>(true)
+const originalOrders = ref<Record<number, number>>({})
 
 const data = reactive({
   form: {} as SysDept,
@@ -179,6 +193,7 @@ function getList() {
   loading.value = true
   listDept(queryParams.value).then(response => {
     deptList.value = proxy.handleTree(response.data, "deptId")
+    recordOriginalOrders(deptList.value)
     loading.value = false
   })
 }
@@ -271,6 +286,42 @@ function submitForm() {
   })
 }
 
+/** 递归记录原始排序 */
+function recordOriginalOrders(list: SysDept[]) {
+  list.forEach(item => {
+    originalOrders.value[item.deptId] = item.orderNum
+    if (item.children && item.children.length) {
+      recordOriginalOrders(item.children)
+    }
+  })
+}
+
+/** 保存排序 */
+function handleSaveSort() {
+  const changedDeptIds: number[] = []
+  const changedOrderNums: number[] = []
+  const collectChanged = (list: SysDept[]) => {
+    list.forEach(item => {
+      if (String(originalOrders.value[item.deptId!]) !== String(item.orderNum)) {
+        changedDeptIds.push(item.deptId!)
+        changedOrderNums.push(item.orderNum!)
+      }
+      if (item.children && item.children.length) {
+        collectChanged(item.children)
+      }
+    })
+  }
+  collectChanged(deptList.value)
+  if (changedDeptIds.length === 0) {
+   proxy.$modal.msgWarning("未检测到排序修改")
+    return
+  }
+  updateDeptSort({ deptIds: changedDeptIds.join(","), orderNums: changedOrderNums.join(",") }).then(() => {
+   proxy.$modal.msgSuccess("排序保存成功")
+    recordOriginalOrders(deptList.value)
+  })
+}
+
 /** 删除按钮操作 */
 function handleDelete(row: SysDept) {
   proxy.$modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项?').then(function() {