重构：重构部门管理前端代码；新增修改部门、批量删除部门、查看部门详情功能（后端主要基于 CRUD 通用组件提供 API）

continew-admin-common/src/main/java/top/charles7c/cnadmin/common/annotation/CrudRequestMapping.java

@@ -37,7 +37,7 @@ public @interface CrudRequestMapping {
     /**
      * API 列表
      */
-    Api[] api() default {Api.PAGE, Api.DETAIL, Api.CREATE, Api.UPDATE, Api.DELETE};
+    Api[] api() default {Api.PAGE, Api.GET, Api.CREATE, Api.UPDATE, Api.DELETE};
 
     /**
      * API 枚举
@@ -58,7 +58,7 @@ public @interface CrudRequestMapping {
         /**
          * 详情
          */
-        DETAIL,
+        GET,
         /**
          * 新增
          */

continew-admin-common/src/main/java/top/charles7c/cnadmin/common/base/BaseController.java

@@ -93,12 +93,12 @@ public abstract class BaseController<S extends BaseService<V, D, Q, C>, V, D, Q,
      *            ID
      * @return 详情信息
      */
-    @Operation(summary = "查看数据详情")
+    @Operation(summary = "查看详情")
     @Parameter(name = "id", description = "ID", in = ParameterIn.PATH)
     @ResponseBody
     @GetMapping("/{id}")
-    protected R<D> detail(@PathVariable Long id) {
+    protected R<D> get(@PathVariable Long id) {
-        D detail = baseService.detail(id);
+        D detail = baseService.get(id);
         return R.ok(detail);
     }
 

continew-admin-common/src/main/java/top/charles7c/cnadmin/common/base/BaseService.java

@@ -64,7 +64,7 @@ public interface BaseService<V, D, Q, C extends BaseRequest> {
      *            ID
      * @return 详情信息
      */
-    D detail(Long id);
+    D get(Long id);
 
     /**
      * 新增

continew-admin-common/src/main/java/top/charles7c/cnadmin/common/base/BaseServiceImpl.java

@@ -76,7 +76,7 @@ public abstract class BaseServiceImpl<M extends BaseMapper<T>, T, V, D, Q, C ext
     }
 
     @Override
-    public D detail(Long id) {
+    public D get(Long id) {
         T entity = this.getById(id);
         return BeanUtil.copyProperties(entity, detailVoClass);
     }

continew-admin-common/src/main/java/top/charles7c/cnadmin/common/model/query/PageQuery.java

@@ -69,8 +69,8 @@ public class PageQuery implements Serializable {
     /** 默认页码：1 */
     private static final int DEFAULT_PAGE = 1;
 
-    /** 默认每页记录数：int 最大值 */
+    /** 默认每页记录数：10 */
-    private static final int DEFAULT_SIZE = Integer.MAX_VALUE;
+    private static final int DEFAULT_SIZE = 10;
     private static final String DELIMITER = ",";
 
     public PageQuery() {

continew-admin-system/src/main/java/top/charles7c/cnadmin/system/model/vo/DeptDetailVO.java

@@ -0,0 +1,75 @@
+/*
+ * Copyright (c) 2022-present Charles7c Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package top.charles7c.cnadmin.system.model.vo;
+
+import lombok.Data;
+import lombok.experimental.Accessors;
+
+import io.swagger.v3.oas.annotations.media.Schema;
+
+import top.charles7c.cnadmin.common.base.BaseDetailVO;
+import top.charles7c.cnadmin.common.enums.DisEnableStatusEnum;
+
+/**
+ * 部门详情信息
+ *
+ * @author Charles7c
+ * @since 2023/2/1 22:19
+ */
+@Data
+@Accessors(chain = true)
+@Schema(description = "部门详情信息")
+public class DeptDetailVO extends BaseDetailVO {
+
+    private static final long serialVersionUID = 1L;
+
+    /**
+     * 部门 ID
+     */
+    @Schema(description = "部门 ID")
+    private Long deptId;
+
+    /**
+     * 部门名称
+     */
+    @Schema(description = "部门名称")
+    private String deptName;
+
+    /**
+     * 上级部门 ID
+     */
+    @Schema(description = "上级部门 ID")
+    private Long parentId;
+
+    /**
+     * 部门排序
+     */
+    @Schema(description = "部门排序")
+    private Integer deptSort;
+
+    /**
+     * 描述
+     */
+    @Schema(description = "描述")
+    private String description;
+
+    /**
+     * 状态（1启用 2禁用）
+     */
+    @Schema(description = "状态（1启用 2禁用）")
+    private DisEnableStatusEnum status;
+}

continew-admin-system/src/main/java/top/charles7c/cnadmin/system/service/DeptService.java

@@ -23,6 +23,7 @@ import cn.hutool.core.lang.tree.Tree;
 import top.charles7c.cnadmin.common.base.BaseService;
 import top.charles7c.cnadmin.system.model.query.DeptQuery;
 import top.charles7c.cnadmin.system.model.request.DeptRequest;
+import top.charles7c.cnadmin.system.model.vo.DeptDetailVO;
 import top.charles7c.cnadmin.system.model.vo.DeptVO;
 
 /**
@@ -31,7 +32,7 @@ import top.charles7c.cnadmin.system.model.vo.DeptVO;
  * @author Charles7c
  * @since 2023/1/22 17:54
  */
-public interface DeptService extends BaseService<DeptVO, DeptVO, DeptQuery, DeptRequest> {
+public interface DeptService extends BaseService<DeptVO, DeptDetailVO, DeptQuery, DeptRequest> {
 
     /**
      * 构建树

continew-admin-system/src/main/java/top/charles7c/cnadmin/system/service/impl/DeptServiceImpl.java

@@ -33,7 +33,9 @@ import cn.hutool.core.bean.BeanUtil;
 import cn.hutool.core.collection.CollUtil;
 import cn.hutool.core.lang.tree.Tree;
 
+import top.charles7c.cnadmin.common.base.BaseDetailVO;
 import top.charles7c.cnadmin.common.base.BaseServiceImpl;
+import top.charles7c.cnadmin.common.base.BaseVO;
 import top.charles7c.cnadmin.common.enums.DisEnableStatusEnum;
 import top.charles7c.cnadmin.common.util.ExceptionUtils;
 import top.charles7c.cnadmin.common.util.TreeUtils;
@@ -43,6 +45,7 @@ import top.charles7c.cnadmin.system.mapper.DeptMapper;
 import top.charles7c.cnadmin.system.model.entity.DeptDO;
 import top.charles7c.cnadmin.system.model.query.DeptQuery;
 import top.charles7c.cnadmin.system.model.request.DeptRequest;
+import top.charles7c.cnadmin.system.model.vo.DeptDetailVO;
 import top.charles7c.cnadmin.system.model.vo.DeptVO;
 import top.charles7c.cnadmin.system.service.DeptService;
 import top.charles7c.cnadmin.system.service.UserService;
@@ -55,7 +58,7 @@ import top.charles7c.cnadmin.system.service.UserService;
  */
 @Service
 @RequiredArgsConstructor
-public class DeptServiceImpl extends BaseServiceImpl<DeptMapper, DeptDO, DeptVO, DeptVO, DeptQuery, DeptRequest>
+public class DeptServiceImpl extends BaseServiceImpl<DeptMapper, DeptDO, DeptVO, DeptDetailVO, DeptQuery, DeptRequest>
     implements DeptService {
 
     private final UserService userService;
@@ -71,6 +74,34 @@ public class DeptServiceImpl extends BaseServiceImpl<DeptMapper, DeptDO, DeptVO,
         return list;
     }
 
+    @Override
+    public DeptDetailVO get(Long id) {
+        DeptDetailVO deptDetailVO = super.get(id);
+        this.fillDetail(deptDetailVO);
+        return deptDetailVO;
+    }
+
+    @Override
+    @Transactional(rollbackFor = Exception.class)
+    public Long create(DeptRequest request) {
+        String deptName = request.getDeptName();
+        boolean isExist = this.checkDeptNameExist(deptName, request.getParentId(), null);
+        CheckUtils.throwIf(() -> isExist, String.format("新增失败，'%s'已存在", deptName));
+
+        // 保存部门信息
+        DeptDO deptDO = BeanUtil.copyProperties(request, DeptDO.class);
+        deptDO.setStatus(DisEnableStatusEnum.ENABLE);
+        baseMapper.insert(deptDO);
+        return deptDO.getDeptId();
+    }
+
+    @Override
+    @Transactional(rollbackFor = Exception.class)
+    public void delete(List<Long> ids) {
+        super.delete(ids);
+        baseMapper.delete(Wrappers.<DeptDO>lambdaQuery().in(DeptDO::getParentId, ids));
+    }
+
     @Override
     public List<DeptVO> buildListTree(List<DeptVO> list) {
         if (CollUtil.isEmpty(list)) {
@@ -133,27 +164,6 @@ public class DeptServiceImpl extends BaseServiceImpl<DeptMapper, DeptDO, DeptVO,
         });
     }
 
-    @Override
-    @Transactional(rollbackFor = Exception.class)
-    public Long create(DeptRequest request) {
-        String deptName = request.getDeptName();
-        boolean isExist = this.checkDeptNameExist(deptName, request.getParentId(), null);
-        CheckUtils.throwIf(() -> isExist, String.format("新增失败，'%s'已存在", deptName));
-
-        // 保存部门信息
-        DeptDO deptDO = BeanUtil.copyProperties(request, DeptDO.class);
-        deptDO.setStatus(DisEnableStatusEnum.ENABLE);
-        baseMapper.insert(deptDO);
-        return deptDO.getDeptId();
-    }
-
-    @Override
-    @Transactional(rollbackFor = Exception.class)
-    public void delete(List<Long> ids) {
-        super.delete(ids);
-        baseMapper.delete(Wrappers.<DeptDO>lambdaQuery().in(DeptDO::getParentId, ids));
-    }
-
     @Override
     public boolean checkDeptNameExist(String deptName, Long parentId, Long deptId) {
         return baseMapper.exists(Wrappers.<DeptDO>lambdaQuery().eq(DeptDO::getDeptName, deptName)
@@ -163,14 +173,30 @@ public class DeptServiceImpl extends BaseServiceImpl<DeptMapper, DeptDO, DeptVO,
     /**
      * 填充数据
      *
-     * @param deptVO
+     * @param baseVO
-     *            部门信息
+     *            待填充列表信息
      */
-    private void fill(DeptVO deptVO) {
+    private void fill(BaseVO baseVO) {
-        Long createUser = deptVO.getCreateUser();
+        Long createUser = baseVO.getCreateUser();
         if (createUser == null) {
             return;
         }
-        deptVO.setCreateUserString(ExceptionUtils.exToNull(() -> userService.getById(createUser)).getNickname());
+        baseVO.setCreateUserString(ExceptionUtils.exToNull(() -> userService.getById(createUser)).getNickname());
+    }
+
+    /**
+     * 填充详情数据
+     *
+     * @param baseDetailVO
+     *            待填充详情信息
+     */
+    private void fillDetail(BaseDetailVO baseDetailVO) {
+        this.fill(baseDetailVO);
+
+        Long updateUser = baseDetailVO.getUpdateUser();
+        if (updateUser == null) {
+            return;
+        }
+        baseDetailVO.setUpdateUserString(ExceptionUtils.exToNull(() -> userService.getById(updateUser)).getNickname());
     }
 }

continew-admin-ui/src/api/common/index.ts

@@ -3,7 +3,7 @@ import qs from 'query-string';
 import { DeptParams } from '@/api/system/dept';
 import { TreeNodeData } from '@arco-design/web-vue';
 
-export default function getDeptTree(params: DeptParams) {
+export default function listDeptTree(params: DeptParams) {
   return axios.get<TreeNodeData[]>('/common/tree/dept', {
     params,
     paramsSerializer: (obj) => {

continew-admin-ui/src/api/system/dept.ts

@@ -6,11 +6,13 @@ export interface DeptRecord {
   deptName: string;
   parentId?: number;
   deptSort: number;
-  description: string;
+  description?: string;
   status?: number;
-  createUserString: string;
+  createUserString?: string;
-  createTime: string;
+  createTime?: string;
-  children: Array<DeptRecord>,
+  updateUserString?: string;
+  updateTime?: string;
+  children?: Array<DeptRecord>,
 }
 
 export interface DeptParams {
@@ -18,7 +20,7 @@ export interface DeptParams {
   status?: number;
 }
 
-export function getDeptList(params: DeptParams) {
+export function listDept(params: DeptParams) {
   return axios.get<DeptRecord[]>('/system/dept/all', {
     params,
     paramsSerializer: (obj) => {
@@ -27,24 +29,18 @@ export function getDeptList(params: DeptParams) {
   });
 }
 
-export interface DeptReq {
+export function getDept(id: number) {
-  parentId: number;
+  return axios.get<DeptRecord>(`/system/dept/${id}`);
-  deptName: string;
-  deptSort: number;
-  description: string;
 }
-export function createDept(req: DeptReq) {
+
+export function createDept(req: DeptRecord) {
   return axios.post('/system/dept', req);
 }
 
-export interface UpdateDeptReq extends Partial<DeptReq> {
+export function updateDept(req: DeptRecord) {
-  deptId: number;
-  status?: number;
-}
-export function updateDept(req: UpdateDeptReq) {
   return axios.put(`/system/dept`, req);
 }
 
-export function deleteDept(ids: Array<number>) {
+export function deleteDept(ids: number | Array<number>) {
   return axios.delete(`/system/dept/${ids}`);
 }

continew-admin-ui/src/views/system/dept/index.vue

@@ -1,154 +1,71 @@
 <template>
   <div class="container">
     <Breadcrumb :items="['menu.system', 'menu.system.dept.list']" />
-    <a-card class="general-card">
+    <a-card class="general-card" :title="$t('menu.system.dept.list')">
       <a-row :gutter="20">
         <a-col>
-          <!-- 工具栏 -->
+          <!-- 搜索栏 -->
-          <div class="head-container">
+          <div class="query-container">
-            <a-form ref="queryFormRef" :model="queryFormData" layout="inline">
+            <a-form ref="queryRef" :model="queryParams" layout="inline">
               <a-form-item field="deptName" hide-label>
                 <a-input
-                  v-model="queryFormData.deptName"
+                  v-model="queryParams.deptName"
                   placeholder="输入部门名称搜索"
                   allow-clear
                   style="width: 150px"
-                  @press-enter="toQuery"
+                  @press-enter="handleQuery"
                 />
               </a-form-item>
               <a-form-item field="status" hide-label>
                 <a-select
-                  v-model="queryFormData.status"
+                  v-model="queryParams.status"
                   :options="statusOptions"
                   placeholder="状态搜索"
                   allow-clear
                   style="width: 150px"
                 />
               </a-form-item>
-              <a-button type="primary" @click="toQuery">
+              <a-form-item hide-label>
-                <template #icon>
+                <a-space>
-                  <icon-search />
+                  <a-button type="primary" @click="handleQuery">
-                </template>
+                    <template #icon><icon-search /></template>查询
-                查询
+                  </a-button>
-              </a-button>
+                  <a-button @click="resetQuery">
-              <a-button @click="resetQuery">
+                    <template #icon><icon-refresh /></template>重置
-                <template #icon>
+                  </a-button>
-                  <icon-refresh />
+                </a-space>
-                </template>
+              </a-form-item>
-                重置
-              </a-button>
             </a-form>
           </div>
 
-          <!-- 工具栏 -->
+          <!-- 操作栏 -->
           <a-row style="margin-bottom: 16px">
             <a-col :span="12">
               <a-space>
                 <a-button type="primary" @click="toCreate">
-                  <template #icon>
+                  <template #icon><icon-plus /></template>新增
-                    <icon-plus />
-                  </template>
-                  {{ $t('searchTable.operation.create') }}
                 </a-button>
-                <a-button
+                <a-button type="primary" status="danger" :disabled="multiple" @click="handleBatchDelete">
-                  type="primary"
+                  <template #icon><icon-delete /></template>删除
-                  status="success"
-                  disabled
-                  title="尚未开发"
-                >
-                  <template #icon>
-                    <icon-edit />
-                  </template>
-                  {{ $t('searchTable.operation.update') }}
-                </a-button>
-                <a-button
-                  type="primary"
-                  status="danger"
-                  disabled
-                  title="尚未开发"
-                >
-                  <template #icon>
-                    <icon-delete />
-                  </template>
-                  {{ $t('searchTable.operation.delete') }}
                 </a-button>
               </a-space>
             </a-col>
-            <a-col
+            <a-col :span="12" style="display: flex; align-items: center; justify-content: end">
-              :span="12"
+              <a-button type="primary" status="warning" disabled title="尚未开放">
-              style="display: flex; align-items: center; justify-content: end"
+                <template #icon><icon-download /></template>导出
-            >
-              <a-button
-                type="primary"
-                status="warning"
-                disabled
-                title="尚未开发"
-              >
-                <template #icon>
-                  <icon-download />
-                </template>
-                {{ $t('searchTable.operation.export') }}
               </a-button>
-              <a-tooltip :content="$t('searchTable.actions.refresh')">
-                <div class="action-icon" @click="toQuery">
-                  <icon-refresh size="18" />
-                </div>
-              </a-tooltip>
-              <a-dropdown @select="handleSelectDensity">
-                <a-tooltip :content="$t('searchTable.actions.density')">
-                  <div class="action-icon"><icon-line-height size="18" /></div>
-                </a-tooltip>
-                <template #content>
-                  <a-doption
-                    v-for="item in densityList"
-                    :key="item.value"
-                    :value="item.value"
-                    :class="{ active: item.value === size }"
-                  >
-                    <span>{{ item.name }}</span>
-                  </a-doption>
-                </template>
-              </a-dropdown>
-              <a-tooltip :content="$t('searchTable.actions.columnSetting')">
-                <a-popover
-                  trigger="click"
-                  position="bl"
-                  @popup-visible-change="popupVisibleChange"
-                >
-                  <div class="action-icon"><icon-settings size="18" /></div>
-                  <template #content>
-                    <div id="tableSetting">
-                      <div
-                        v-for="(item, index) in showColumns"
-                        :key="item.dataIndex"
-                        class="setting"
-                      >
-                        <div style="margin-right: 4px; cursor: move">
-                          <icon-drag-arrow />
-                        </div>
-                        <div>
-                          <a-checkbox
-                            v-model="item.checked"
-                            @change="handleChange($event, item as TableColumnData, index)"
-                          >
-                          </a-checkbox>
-                        </div>
-                        <div class="title">
-                          {{ item.title === '#' ? '序列号' : item.title }}
-                        </div>
-                      </div>
-                    </div>
-                  </template>
-                </a-popover>
-              </a-tooltip>
             </a-col>
           </a-row>
 
-          <!-- 表格渲染 -->
+          <!-- 列表区域 -->
           <a-table
             ref="tableRef"
-            :columns="cloneColumns as TableColumnData[]"
+            :data="deptList"
-            :data="renderData"
+            :row-selection="{
+              type: 'checkbox',
+              showCheckedAll: true,
+              onlyCurrent: false,
+            }"
             :pagination="false"
             :default-expand-all-rows="true"
             :hide-expand-button-on-empty="true"
@@ -156,116 +73,157 @@
             :bordered="false"
             :stripe="true"
             :loading="loading"
-            :size="size"
+            size="large"
+            @selection-change="handleSelectionChange"
           >
-            <template #status="{ record }">
+            <template #columns>
-              <a-switch
+              <a-table-column title="部门名称" data-index="deptName">
-                v-model="record.status"
+                <template #cell="{ record }">
-                :checked-value="1"
+                  <a-button type="text" size="small" @click="toDetail(record.deptId)">{{ record.deptName }}</a-button>
-                :unchecked-value="2"
-                @change="handleChangeStatus(record, record.status)"
-              />
-            </template>
-            <template #operations="{ record }">
-              <a-button
-                v-permission="['admin']"
-                type="text"
-                size="small"
-                disabled
-                title="尚未开发"
-              >
-                <template #icon>
-                  <icon-edit />
                 </template>
-                修改
+              </a-table-column>
-              </a-button>
+              <a-table-column title="部门排序" align="center" data-index="deptSort" />
-              <a-popconfirm content="确定删除吗，如果存在下级部门则一并删除，此操作不能撤销！" type="error" @ok="handleDelete(record)">
+              <a-table-column title="状态" align="center" data-index="status">
-                <a-button
+                <template #cell="{ record }">
-                  v-permission="['admin']"
+                  <a-switch
-                  type="text"
+                    v-model="record.status"
-                  size="small"
+                    :checked-value="1"
-                >
+                    :unchecked-value="2"
-                  <template #icon>
+                    @change="handleChangeStatus(record)"
-                    <icon-delete />
+                  />
-                  </template>
+                </template>
-                  删除
+              </a-table-column>
-                </a-button>
+              <a-table-column title="描述" data-index="description" />
-              </a-popconfirm>
+              <a-table-column title="创建人" data-index="createUserString" />
+              <a-table-column title="创建时间" data-index="createTime" />
+              <a-table-column title="操作" align="center">
+                <template #cell="{ record }">
+                  <a-button v-permission="['admin']" type="text" size="small" @click="toUpdate(record.deptId)">
+                    <template #icon><icon-edit /></template>修改
+                  </a-button>
+                  <a-popconfirm content="确定要删除当前选中的数据吗？如果存在下级部门则一并删除，此操作不能撤销！" type="warning" @ok="handleDelete([record.deptId])">
+                    <a-button v-permission="['admin']" type="text" size="small">
+                      <template #icon><icon-delete /></template>删除
+                    </a-button>
+                  </a-popconfirm>
+                </template>
+              </a-table-column>
             </template>
           </a-table>
 
-          <!-- 窗口 -->
+          <!-- 对话框区域 -->
           <a-modal
-            title="新增部门"
+            :title="title"
-            :width="570"
             :visible="visible"
+            :width="570"
             :mask-closable="false"
             unmount-on-close
+            render-to-body
             @ok="handleOk"
             @cancel="handleCancel"
           >
-            <a-form ref="formRef" :model="formData" :rules="rules">
+            <a-form ref="formRef" :model="form" :rules="rules">
-              <a-form-item
+              <a-form-item label="上级部门" field="parentId">
-                field="parentId"
-                :validate-trigger="['change', 'blur']"
-                label="上级部门"
-              >
                 <a-tree-select
-                  v-model="formData.parentId"
+                  v-model="form.parentId"
                   :data="treeData"
-                  :allow-search="true"
-                  :allow-clear="true"
-                  :filter-tree-node="filterDept"
-                  :fallback-option="false"
                   placeholder="请选择上级部门"
+                  allow-clear
+                  allow-search
+                  :filter-tree-node="filterDeptTree"
+                  :fallback-option="false"
                 />
               </a-form-item>
-              <a-form-item
+              <a-form-item label="部门名称" field="deptName">
-                field="deptName"
+                <a-input v-model="form.deptName" placeholder="请输入部门名称" size="large" />
-                :validate-trigger="['change', 'blur']"
-                label="部门名称"
-              >
-                <a-input
-                  v-model="formData.deptName"
-                  placeholder="请输入部门名称"
-                  size="large"
-                  allow-clear
-                >
-                </a-input>
               </a-form-item>
-              <a-form-item
+              <a-form-item label="部门排序" field="deptSort">
-                field="deptSort"
-                :validate-trigger="['change', 'blur']"
-                label="部门排序"
-              >
                 <a-input-number
-                  v-model="formData.deptSort"
+                  v-model="form.deptSort"
                   :min="1"
                   placeholder="请输入部门排序"
                   mode="button"
                   size="large"
-                >
+                />
-                </a-input-number>
               </a-form-item>
-              <a-form-item
+              <a-form-item label="描述" field="description">
-                field="description"
-                :validate-trigger="['change', 'blur']"
-                label="描述"
-              >
                 <a-textarea
-                  v-model="formData.description"
+                  v-model="form.description"
-                  placeholder="请输入描述"
-                  size="large"
                   :max-length="200"
-                  show-word-limit
+                  placeholder="请输入描述"
                   :auto-size="{
                     minRows:3,
                   }"
-                >
+                  show-word-limit
-                </a-textarea >
+                  size="large"
+                />
               </a-form-item>
             </a-form>
           </a-modal>
+
+          <!-- 抽屉区域 -->
+          <a-drawer
+            title="部门详情"
+            :visible="detailVisible"
+            :width="570"
+            :footer="false"
+            unmount-on-close
+            render-to-body
+            @cancel="handleDetailCancel"
+          >
+            <a-descriptions
+              title="基础信息"
+              :column="2"
+              bordered
+              size="large"
+            >
+              <a-descriptions-item label="部门名称">
+                <a-skeleton v-if="detailLoading" :animation="true">
+                  <a-skeleton-line :rows="1" />
+                </a-skeleton>
+                <span v-else>{{ dept.deptName }}</span>
+              </a-descriptions-item>
+              <a-descriptions-item label="状态">
+                <a-skeleton v-if="detailLoading" :animation="true">
+                  <a-skeleton-line :rows="1" />
+                </a-skeleton>
+                <span v-else>
+                  <a-tag v-if="dept.status === 1" color="green"><span class="circle pass"></span>启用</a-tag>
+                  <a-tag v-else color="red"><span class="circle fail"></span>禁用</a-tag>
+                </span>
+              </a-descriptions-item>
+              <a-descriptions-item label="创建人">
+                <a-skeleton v-if="detailLoading" :animation="true">
+                  <a-skeleton-line :rows="1" />
+                </a-skeleton>
+                <span v-else>{{ dept.createUserString }}</span>
+              </a-descriptions-item>
+              <a-descriptions-item label="创建时间">
+                <a-skeleton v-if="detailLoading" :animation="true">
+                  <a-skeleton-line :rows="1" />
+                </a-skeleton>
+                <span v-else>{{ dept.createTime }}</span>
+              </a-descriptions-item>
+              <a-descriptions-item label="修改人">
+                <a-skeleton v-if="detailLoading" :animation="true">
+                  <a-skeleton-line :rows="1" />
+                </a-skeleton>
+                <span v-else>{{ dept.updateUserString }}</span>
+              </a-descriptions-item>
+              <a-descriptions-item label="修改时间">
+                <a-skeleton v-if="detailLoading" :animation="true">
+                  <a-skeleton-line :rows="1" />
+                </a-skeleton>
+                <span v-else>{{ dept.updateTime }}</span>
+              </a-descriptions-item>
+              <a-descriptions-item label="描述">
+                <a-skeleton v-if="detailLoading" :animation="true">
+                  <a-skeleton-line :rows="1" />
+                </a-skeleton>
+                <span v-else>{{ dept.description }}</span>
+              </a-descriptions-item>
+            </a-descriptions>
+          </a-drawer>
         </a-col>
       </a-row>
     </a-card>
@@ -273,279 +231,254 @@
 </template>
 
 <script lang="ts" setup>
-  import { computed, nextTick, ref, watch } from 'vue';
+  import { getCurrentInstance, ref, toRefs, reactive, computed, nextTick, watch } from 'vue';
-  import useLoading from '@/hooks/loading';
+  import { SelectOptionData, TreeNodeData } from '@arco-design/web-vue';
-  import { FieldRule, Message, TableInstance, TreeNodeData } from '@arco-design/web-vue';
   import {
-    getDeptList,
     DeptRecord,
     DeptParams,
+    listDept,
+    getDept,
     createDept,
     updateDept,
     deleteDept,
   } from '@/api/system/dept';
-  import getDeptTree from '@/api/common';
+  import listDeptTree from '@/api/common';
-  import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
-  import { FormInstance } from '@arco-design/web-vue/es/form';
-  import { SelectOptionData } from '@arco-design/web-vue/es/select/interface';
-  import cloneDeep from 'lodash/cloneDeep';
-  import Sortable from 'sortablejs';
-  import { useI18n } from 'vue-i18n';
 
-  type SizeProps = 'mini' | 'small' | 'medium' | 'large';
+  const { proxy } = getCurrentInstance() as any;
-  type Column = TableColumnData & { checked?: true };
-  const cloneColumns = ref<Column[]>([]);
-  const showColumns = ref<Column[]>([]);
-  const size = ref<SizeProps>('large');
-  const { t } = useI18n();
-  const densityList = computed(() => [
-    {
-      name: t('searchTable.size.mini'),
-      value: 'mini',
-    },
-    {
-      name: t('searchTable.size.small'),
-      value: 'small',
-    },
-    {
-      name: t('searchTable.size.medium'),
-      value: 'medium',
-    },
-    {
-      name: t('searchTable.size.large'),
-      value: 'large',
-    },
-  ]);
-  const { loading, setLoading } = useLoading(true);
-  const tableRef = ref<TableInstance>();
-  const queryFormRef = ref<FormInstance>();
-  const queryFormData = ref({
-    deptName: undefined,
-    status: undefined,
-  });
-  const statusOptions = computed<SelectOptionData[]>(() => [
-    {
-      label: '启用',
-      value: 1,
-    },
-    {
-      label: '禁用',
-      value: 2,
-    },
-  ]);
 
-  // 查询
+  const deptList = ref<DeptRecord[]>([]);
-  const toQuery = () => {
+  const dept = ref<DeptRecord>({
-    fetchData({
-      ...queryFormData.value,
-    } as unknown as DeptParams);
-  };
-
-  // 重置
-  const resetQuery = async () => {
-    await queryFormRef.value?.resetFields();
-    await fetchData();
-  };
-
-  const renderData = ref<DeptRecord[]>([]);
-  const columns = computed<TableColumnData[]>(() => [
-    {
-      title: '部门名称',
-      dataIndex: 'deptName',
-    },
-    {
-      title: '部门排序',
-      dataIndex: 'deptSort',
-      align: 'center',
-    },
-    {
-      title: '状态',
-      dataIndex: 'status',
-      slotName: 'status',
-      align: 'center',
-    },
-    {
-      title: '描述',
-      dataIndex: 'description',
-    },
-    {
-      title: '创建人',
-      dataIndex: 'createUserString',
-    },
-    {
-      title: '创建时间',
-      dataIndex: 'createTime',
-    },
-    {
-      title: '操作',
-      slotName: 'operations',
-      align: 'center',
-    },
-  ]);
-
-  // 分页查询列表
-  const fetchData = async (
-    params: DeptParams = {
-      ...queryFormData.value
-    }
-  ) => {
-    setLoading(true);
-    try {
-      const { data } = await getDeptList(params);
-      renderData.value = data;
-    } finally {
-      setLoading(false);
-    }
-    setTimeout(() => {
-      tableRef.value?.expandAll();
-    }, 0);
-  };
-  fetchData();
-
-  // 改变状态
-  const handleChangeStatus = async (record: DeptRecord, val: number) => {
-    if (record.deptId) {
-      const res = await updateDept({ deptId: record.deptId, status: val });
-      if (res.success) {
-        Message.success(res.msg);
-      } else {
-        record.status = (record.status === 1) ? 2 : 1;
-      }
-    }
-  };
-
-  // 删除
-  const handleDelete = async (record: DeptRecord) => {
-    if (record.deptId) {
-      const res = await deleteDept([record.deptId]);
-      if (res.success) {
-        Message.success(res.msg);
-        await fetchData();
-      }
-    }
-  };
-
-  const handleSelectDensity = (
-    val: string | number | Record<string, any> | undefined,
-    e: Event
-  ) => {
-    size.value = val as SizeProps;
-  };
-
-  const handleChange = (
-    checked: boolean | (string | boolean | number)[],
-    column: Column,
-    index: number
-  ) => {
-    if (!checked) {
-      cloneColumns.value = showColumns.value.filter(
-        (item) => item.dataIndex !== column.dataIndex
-      );
-    } else {
-      cloneColumns.value.splice(index, 0, column);
-    }
-  };
-
-  const exchangeArray = <T extends Array<any>>(
-    array: T,
-    beforeIdx: number,
-    newIdx: number,
-    isDeep = false
-  ): T => {
-    const newArray = isDeep ? cloneDeep(array) : array;
-    if (beforeIdx > -1 && newIdx > -1) {
-      // 先替换后面的，然后拿到替换的结果替换前面的
-      newArray.splice(
-        beforeIdx,
-        1,
-        newArray.splice(newIdx, 1, newArray[beforeIdx]).pop()
-      );
-    }
-    return newArray;
-  };
-
-  const popupVisibleChange = (val: boolean) => {
-    if (val) {
-      nextTick(() => {
-        const el = document.getElementById('tableSetting') as HTMLElement;
-        const sortable = new Sortable(el, {
-          onEnd(e: any) {
-            const { oldIndex, newIndex } = e;
-            exchangeArray(cloneColumns.value, oldIndex, newIndex);
-            exchangeArray(showColumns.value, oldIndex, newIndex);
-          },
-        });
-      });
-    }
-  };
-
-  watch(
-    () => columns.value,
-    (val) => {
-      cloneColumns.value = cloneDeep(val);
-      cloneColumns.value.forEach((item, index) => {
-        item.checked = true;
-      });
-      showColumns.value = cloneDeep(cloneColumns.value);
-    },
-    { deep: true, immediate: true }
-  );
-
-  const visible = ref(false);
-  const type = ref('新增');
-  const treeData = ref<TreeNodeData[]>();
-  const formRef = ref<FormInstance>();
-  const formData = ref<DeptRecord>({
-    deptId: undefined,
     deptName: '',
-    parentId: undefined,
+    deptSort: 0,
-    deptSort: 999,
     description: '',
-    status: undefined,
+    status: 1,
     createUserString: '',
     createTime: '',
-    children: [],
+    updateUserString: '',
+    updateTime: '',
   });
-  const rules = computed((): Record<string, FieldRule[]> => {
+  const ids = ref<Array<number>>([]);
-    return {
+  const title = ref('');
-      deptName: [
+  const multiple = ref(true);
-        { required: true, message: '请输入部门名称' }
+  const loading = ref(false);
-      ],
+  const detailLoading = ref(false);
-      deptSort: [
+  const visible = ref(false);
-        { required: true, message: '请输入部门排序' }
+  const detailVisible = ref(false);
-      ],
+  const statusOptions = ref<SelectOptionData[]>([
-    };
+    { label: '启用', value: 1 },
+    { label: '禁用', value: 2 },
+  ]);
+  const treeData = ref<TreeNodeData[]>();
+
+  const data = reactive({
+    // 查询参数
+    queryParams: {
+      deptName: undefined,
+      status: undefined,
+    },
+    // 表单数据
+    form: {} as DeptRecord,
+    // 表单验证规则
+    rules: {
+      deptName: [{ required: true, message: '请输入部门名称' }],
+      deptSort: [{ required: true, message: '请输入部门排序' }],
+    },
   });
-  // 创建
+  const { queryParams, form, rules } = toRefs(data);
-  const toCreate = async () => {
+
-    visible.value = true;
+  /**
-    const { data } = await getDeptTree({});
+   * 查询列表
-    treeData.value = data;
+   *
+   * @param params 查询参数
+   */
+  const getList = (params: DeptParams = { ...queryParams.value }) => {
+    loading.value = true;
+    listDept(params).then((res) => {
+      deptList.value = res.data;
+      loading.value = false;
+      setTimeout(() => {
+        proxy.$refs.tableRef.expandAll();
+      }, 0);
+    });
   };
-  const filterDept = (searchValue: string, nodeData: TreeNodeData) => {
+  getList();
+
+  /**
+   * 多选
+   *
+   * @param rowKeys ID 列表
+   */
+  const handleSelectionChange = (rowKeys: Array<any>) => {
+    ids.value = rowKeys;
+    multiple.value = !rowKeys.length;
+  };
+
+  /**
+   * 修改状态
+   *
+   * @param record 记录信息
+   */
+  const handleChangeStatus = (record: DeptRecord) => {
+    const tip = record.status === 1 ? '启用' : '禁用';
+    updateDept(record).then((res) => {
+      proxy.$message.success(`${tip}成功`);
+    }).catch(() => {
+      record.status = (record.status === 1) ? 2 : 1;
+    });
+  };
+
+  /**
+   * 查询
+   */
+  const handleQuery = () => {
+    getList();
+  };
+
+  /**
+   * 重置
+   */
+  const resetQuery = () => {
+    proxy.$refs.queryRef.resetFields();
+    handleQuery();
+  };
+
+  /**
+   * 打开新增对话框
+   */
+  const toCreate = () => {
+    reset();
+    listDeptTree({}).then((res) => {
+      treeData.value = res.data;
+    });
+    title.value = '新增部门';
+    visible.value = true;
+  };
+
+  /**
+   * 打开修改对话框
+   *
+   * @param id ID
+   */
+  const toUpdate = async (id: number) => {
+    reset();
+    listDeptTree({}).then((res) => {
+      treeData.value = res.data;
+      title.value = '修改部门';
+      visible.value = true;
+    });
+    getDept(id).then((res) => {
+      form.value = res.data;
+    });
+  };
+
+  /**
+   * 查看详情
+   *
+   * @param id ID
+   */
+  const toDetail = async (id: number) => {
+    detailLoading.value = true;
+    detailVisible.value = true;
+    getDept(id).then((res) => {
+      dept.value = res.data;
+      detailLoading.value = false;
+    });
+  };
+
+  /**
+   * 重置表单
+   */
+  const reset = () => {
+    form.value = {
+      deptId: undefined,
+      deptName: '',
+      parentId: undefined,
+      deptSort: 999,
+      description: '',
+    };
+    proxy.$refs.formRef?.resetFields();
+  };
+
+  /**
+   * 过滤部门树
+   *
+   * @param searchValue 搜索值
+   * @param nodeData 节点值
+   */
+  const filterDeptTree = (searchValue: string, nodeData: TreeNodeData) => {
     if (nodeData.title) {
       return nodeData.title.toLowerCase().indexOf(searchValue.toLowerCase()) > -1;
     }
     return false;
   };
-  const handleOk = async () => {
+
-    const errors = await formRef.value?.validate();
+  /**
-    if (errors) return false;
+   * 确定
-    const res = await createDept({
+   */
-      parentId: formData.value.parentId || 0,
+  const handleOk = () => {
-      deptName: formData.value.deptName,
+    proxy.$refs.formRef.validate((valid: any) => {
-      deptSort: formData.value.deptSort,
+      if (!valid) {
-      description: formData.value.description,
+        if (form.value.deptId !== undefined) {
+          updateDept(form.value).then((res) => {
+            handleCancel();
+            getList();
+            proxy.$message.success(res.msg);
+          });
+        } else {
+          createDept(form.value).then((res) => {
+            handleCancel();
+            getList();
+            proxy.$message.success(res.msg);
+          });
+        }
+      }
     });
-    if (!res.success) return false;
-    Message.success(res.msg);
-    handleCancel();
-    await fetchData();
-    return true;
   };
+
+  /**
+   * 取消
+   */
   const handleCancel = () => {
     visible.value = false;
-    formRef.value?.resetFields();
+    proxy.$refs.formRef.resetFields();
+  };
+
+  /**
+   * 关闭详情
+   */
+  const handleDetailCancel = () => {
+    detailVisible.value = false;
+  };
+
+  /**
+   * 批量删除
+   */
+  const handleBatchDelete = () => {
+    if (ids.value.length === 0) {
+      proxy.$message.info('请选择要删除的数据！');
+    } else {
+      proxy.$modal.warning({
+        title: '警告',
+        titleAlign: 'start',
+        content: '确定要删除当前选中的数据吗？如果存在下级部门则一并删除，此操作不能撤销！',
+        hideCancel: false,
+        onOk: () => {
+          handleDelete(ids.value);
+        },
+      });
+    }
+  };
+
+  /**
+   * 删除
+   *
+   * @param ids ID 列表
+   */
+  const handleDelete = (ids: Array<number>) => {
+    deleteDept(ids).then((res) => {
+      proxy.$message.success(res.msg);
+      getList();
+    });
   };
 </script>
 
@@ -560,12 +493,8 @@
     padding: 0 20px 20px 20px;
   }
 
-  .general-card {
+  .query-container {
-    padding-top: 25px;
+    margin-bottom: 12px;
-  }
-
-  .head-container {
-    margin-bottom: 15px;
   }
 
   :deep(.arco-table-th) {

continew-admin-webapi/src/main/java/top/charles7c/cnadmin/webapi/controller/common/CommonController.java

@@ -53,7 +53,7 @@ public class CommonController {
     @Log(ignore = true)
     @Operation(summary = "查询部门树", description = "查询树结构的部门列表")
     @GetMapping("/tree/dept")
-    public R<List<Tree<Long>>> deptTree(@Validated DeptQuery query) {
+    public R<List<Tree<Long>>> listDeptTree(@Validated DeptQuery query) {
         List<DeptVO> list = deptService.list(query);
         List<Tree<Long>> deptTreeList = deptService.buildTree(list);
         return R.ok(deptTreeList);

continew-admin-webapi/src/main/java/top/charles7c/cnadmin/webapi/controller/system/DeptController.java

@@ -31,6 +31,7 @@ import top.charles7c.cnadmin.common.base.BaseController;
 import top.charles7c.cnadmin.common.model.vo.R;
 import top.charles7c.cnadmin.system.model.query.DeptQuery;
 import top.charles7c.cnadmin.system.model.request.DeptRequest;
+import top.charles7c.cnadmin.system.model.vo.DeptDetailVO;
 import top.charles7c.cnadmin.system.model.vo.DeptVO;
 import top.charles7c.cnadmin.system.service.DeptService;
 
@@ -42,8 +43,8 @@ import top.charles7c.cnadmin.system.service.DeptService;
  */
 @Tag(name = "部门管理 API")
 @RestController
-@CrudRequestMapping(value = "/system/dept", api = {Api.LIST, Api.DETAIL, Api.CREATE, Api.UPDATE, Api.DELETE})
+@CrudRequestMapping(value = "/system/dept", api = {Api.LIST, Api.GET, Api.CREATE, Api.UPDATE, Api.DELETE})
-public class DeptController extends BaseController<DeptService, DeptVO, DeptVO, DeptQuery, DeptRequest> {
+public class DeptController extends BaseController<DeptService, DeptVO, DeptDetailVO, DeptQuery, DeptRequest> {
 
     @Override
     @Operation(summary = "查询列表树")