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

src/api/system/dept.js

@@ -43,6 +43,15 @@ export function updateDept(data) {
   })
 }
 
+// 保存部门排序
+export function updateDeptSort(data) {
+  return request({
+    url: '/system/dept/updateSort',
+    method: 'put',
+    data: data
+  })
+}
+
 // 删除部门
 export function delDept(deptId) {
   return request({

src/views/lock.vue

@@ -34,7 +34,6 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
 import useUserStore from '@/store/modules/user'
 import useLockStore from '@/store/modules/lock'

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 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"
 
 const { proxy } = getCurrentInstance()
 const { sys_normal_disable } = proxy.useDict("sys_normal_disable")
@@ -154,6 +167,7 @@ const title = ref("")
 const deptOptions = ref([])
 const isExpandAll = ref(true)
 const refreshTable = ref(true)
+const originalOrders = ref({});
 
 const data = reactive({
   form: {},
@@ -177,6 +191,7 @@ function getList() {
   loading.value = true
   listDept(queryParams.value).then(response => {
     deptList.value = proxy.handleTree(response.data, "deptId")
+    recordOriginalOrders(deptList.value)
     loading.value = false
   })
 }
@@ -269,6 +284,42 @@ function submitForm() {
   })
 }
 
+/** 递归记录原始排序 */
+function recordOriginalOrders(list) {
+  list.forEach(item => {
+    originalOrders.value[item.deptId] = item.orderNum
+    if (item.children && item.children.length) {
+      recordOriginalOrders(item.children)
+    }
+  })
+}
+
+/** 保存排序 */
+function handleSaveSort() {
+  const changedDeptIds = []
+  const changedOrderNums = []
+  const collectChanged = (list) => {
+    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) {
   proxy.$modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项?').then(function() {