feat：完善 dept 部门 30%（列表）

apps/web-antd/src/api/system/dept/index.ts

@@ -0,0 +1,47 @@
+import { requestClient } from '#/api/request';
+
+export namespace SystemDeptApi {
+  /** 部门信息 */
+  export interface SystemDept {
+    id?: number;
+    name: string;
+    parentId?: number;
+    status: number;
+    sort: number;
+    leaderUserId: number;
+    phone: string;
+    email: string;
+    createTime: Date;
+    children?: SystemDept[];
+  }
+}
+
+/** 查询部门（精简)列表 */
+export async function getSimpleDeptList() {
+  return requestClient.get<SystemDeptApi.SystemDept[]>('/system/dept/simple-list');
+}
+
+/** 查询部门列表 */
+export async function getDeptList() {
+  return requestClient.get('/system/dept/list');
+}
+
+/** 查询部门详情 */
+export async function getDept(id: number) {
+  return requestClient.get<SystemDeptApi.SystemDept>(`/system/dept/get?id=${id}`);
+}
+
+/** 新增部门 */
+export async function createDept(data: SystemDeptApi.SystemDept) {
+  return requestClient.post('/system/dept/create', data);
+}
+
+/** 修改部门 */
+export async function updateDept(data: SystemDeptApi.SystemDept) {
+  return requestClient.put('/system/dept/update', data);
+}
+
+/** 删除部门 */
+export async function deleteDept(id: number) {
+  return requestClient.delete(`/system/dept/delete?id=${id}`);
+}

apps/web-antd/src/views/system/dept/data.ts

@@ -1,18 +1,30 @@
 import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
-
 import type { VbenFormSchema } from '#/adapter/form';
 import type { OnActionClickFn } from '#/adapter/vxe-table';
-// import type { SystemDeptApi } from '#/api/system/dept';
+import type { SystemDeptApi } from '#/api/system/dept';
 
 import { z } from '#/adapter/form';
-// import { getDeptList } from '#/api/system/dept';
+import { getDeptList } from '#/api/system/dept';
 import { $t } from '#/locales';
+import { DICT_TYPE } from '#/utils/dict';
 
-/**
+/** 获取编辑表单的字段配置 */
- * 获取编辑表单的字段配置。如果没有使用多语言，可以直接export一个数组常量
+// TODO @芋艿：表单的整理
- */
 export function useSchema(): VbenFormSchema[] {
   return [
+    {
+      component: 'ApiTreeSelect',
+      componentProps: {
+        allowClear: true,
+        api: getDeptList,
+        class: 'w-full',
+        labelField: 'name',
+        valueField: 'id',
+        childrenField: 'children'
+      },
+      fieldName: 'parentId',
+      label: '上级部门',
+    },
     {
       component: 'Input',
       fieldName: 'name',
@@ -25,19 +37,6 @@ export function useSchema(): VbenFormSchema[] {
           $t('ui.formRules.maxLength', [$t('system.dept.deptName'), 20]),
         ),
     },
-    // {
-    //   component: 'ApiTreeSelect',
-    //   componentProps: {
-    //     allowClear: true,
-    //     api: getDeptList,
-    //     class: 'w-full',
-    //     labelField: 'name',
-    //     valueField: 'id',
-    //     childrenField: 'children',
-    //   },
-    //   fieldName: 'pid',
-    //   label: $t('system.dept.parentDept'),
-    // },
     {
       component: 'RadioGroup',
       componentProps: {
@@ -69,11 +68,7 @@ export function useSchema(): VbenFormSchema[] {
   ];
 }
 
-/**
+/** 获取表格列配置 */
- * 获取表格列配置
- * @description 使用函数的形式返回列数据而不是直接export一个Array常量，是为了响应语言切换时重新翻译表头
- * @param onActionClick 表格操作按钮点击事件
- */
 export function useColumns(
   onActionClick?: OnActionClickFn<SystemDeptApi.SystemDept>,
 ): VxeTableGridOptions<SystemDeptApi.SystemDept>['columns'] {
@@ -82,31 +77,39 @@ export function useColumns(
       align: 'left',
       field: 'name',
       fixed: 'left',
-      title: $t('system.dept.deptName'),
+      title: '部门名称',
       treeNode: true,
-      width: 150,
+      minWidth: 150,
+    },
+    // TODO @芋艿：需要通过 userList 翻译
+    {
+      field: 'leader',
+      title: '负责人',
+      minWidth: 150,
     },
     {
-      cellRender: { name: 'CellTag' },
+      field: 'sort',
+      title: '排序',
+      minWidth: 100,
+    },
+    {
+      cellRender: { name: 'CellDict', props: { type: DICT_TYPE.COMMON_STATUS } },
       field: 'status',
-      title: $t('system.dept.status'),
+      title: '状态',
-      width: 100,
+      minWidth: 100,
     },
     {
       field: 'createTime',
-      title: $t('system.dept.createTime'),
+      title: '创建时间',
-      width: 180,
+      minWidth: 180,
-    },
+      formatter: 'formatDateTime',
-    {
-      field: 'remark',
-      title: $t('system.dept.remark'),
     },
     {
       align: 'right',
       cellRender: {
         attrs: {
           nameField: 'name',
-          nameTitle: $t('system.dept.name'),
+          nameTitle: '部门',
           onClick: onActionClick,
         },
         name: 'CellOperation',
@@ -128,8 +131,8 @@ export function useColumns(
       fixed: 'right',
       headerAlign: 'center',
       showOverflow: false,
-      title: $t('system.dept.operation'),
+      title: '操作',
-      width: 200,
+      minWidth: 200,
     },
   ];
 }

apps/web-antd/src/views/system/dept/index.vue

@@ -1,18 +1,14 @@
 <script lang="ts" setup>
-import type {
+import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
-  OnActionClickParams,
+import type { SystemDeptApi } from '#/api/system/dept';
-  VxeTableGridOptions,
+
-} from '#/adapter/vxe-table';
+import { $t } from '#/locales';
-// import type { SystemDeptApi } from '#/api/system/dept';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteDept, getDeptList } from '#/api/system/dept';
 
 import { Page, useVbenModal } from '@vben/common-ui';
-import { Plus } from '@vben/icons';
-
 import { Button, message } from 'ant-design-vue';
-
+import { Plus } from '@vben/icons';
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
-// import { deleteDept, getDeptList } from '#/api/system/dept';
-import { $t } from '#/locales';
 
 import { useColumns } from './data';
 import Form from './modules/form.vue';
@@ -22,40 +18,30 @@ const [FormModal, formModalApi] = useVbenModal({
   destroyOnClose: true,
 });
 
-/**
+/** 编辑部门 */
- * 编辑部门
- * @param row
- */
 function onEdit(row: SystemDeptApi.SystemDept) {
   formModalApi.setData(row).open();
 }
 
-/**
+/** 添加下级部门 */
- * 添加下级部门
- * @param row
- */
 function onAppend(row: SystemDeptApi.SystemDept) {
   formModalApi.setData({ pid: row.id }).open();
 }
 
-/**
+/** 创建新部门 */
- * 创建新部门
- */
 function onCreate() {
   formModalApi.setData(null).open();
 }
 
-/**
+/** 删除部门 */
- * 删除部门
- * @param row
- */
 function onDelete(row: SystemDeptApi.SystemDept) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
     duration: 0,
     key: 'action_process_msg',
   });
-  deleteDept(row.id)
+  // TODO @芋艿：改成 await 写法
+  deleteDept(row.id as number)
     .then(() => {
       message.success({
         content: $t('ui.actionMessage.deleteSuccess', [row.name]),
@@ -68,9 +54,7 @@ function onDelete(row: SystemDeptApi.SystemDept) {
     });
 }
 
-/**
+/** 表格操作按钮的回调函数 */
- * 表格操作按钮的回调函数
- */
 function onActionClick({
   code,
   row,
@@ -114,19 +98,20 @@ const [Grid, gridApi] = useVbenVxeGrid({
       zoom: true,
     },
     treeConfig: {
-      parentField: 'pid',
+      parentField: 'parentId',
       rowField: 'id',
-      transform: false,
+      transform: true,
+      expandAll: true,
     },
   } as VxeTableGridOptions,
 });
 
-/**
+/** 刷新表格 */
- * 刷新表格
- */
 function refreshGrid() {
   gridApi.query();
 }
+// TODO @芋艿：展开/折叠所有
+// TODO @芋艿：刷新后，就折叠起来了！
 </script>
 <template>
   <Page auto-content-height>
@@ -135,7 +120,7 @@ function refreshGrid() {
       <template #toolbar-tools>
         <Button type="primary" @click="onCreate">
           <Plus class="size-5" />
-          {{ $t('ui.actionTitle.create', [$t('system.dept.name')]) }}
+          {{ $t('ui.actionTitle.create', ['部门']) }}
         </Button>
       </template>
     </Grid>

apps/web-antd/src/views/system/dept/modules/form.vue

@@ -1,14 +1,13 @@
 <script lang="ts" setup>
-// import type { SystemDeptApi } from '#/api/system/dept';
+import type { SystemDeptApi } from '#/api/system/dept';
 
 import { computed, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
-
 import { Button } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
-// import { createDept, updateDept } from '#/api/system/dept';
+import { createDept, updateDept } from '#/api/system/dept';
 import { $t } from '#/locales';
 
 import { useSchema } from '../data';
@@ -17,8 +16,8 @@ const emit = defineEmits(['success']);
 const formData = ref<SystemDeptApi.SystemDept>();
 const getTitle = computed(() => {
   return formData.value?.id
-    ? $t('ui.actionTitle.edit', [$t('system.dept.name')])
+    ? $t('ui.actionTitle.edit', ['部门'])
-    : $t('ui.actionTitle.create', [$t('system.dept.name')]);
+    : $t('ui.actionTitle.create', ['部门']);
 });
 
 const [Form, formApi] = useVbenForm({
@@ -32,6 +31,7 @@ function resetForm() {
   formApi.setValues(formData.value || {});
 }
 
+// TODO @芋艿：这里没接入
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     const { valid } = await formApi.validate();
@@ -50,11 +50,13 @@ const [Modal, modalApi] = useVbenModal({
     }
   },
   onOpenChange(isOpen) {
+    // TODO @芋艿：这里也改下
     if (isOpen) {
       const data = modalApi.getData<SystemDeptApi.SystemDept>();
       if (data) {
-        if (data.pid === 0) {
+        // TODO @芋艿：要不要做这个处理？
-          data.pid = undefined;
+        if (data.parentId === 0) {
+          data.parentId = undefined;
         }
         formData.value = data;
         formApi.setValues(formData.value);