feat(@vben/web-antd): 优化部门管理

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

@@ -4,10 +4,26 @@ import type { VbenFormSchema } from '#/adapter/form';
 import type { OnActionClickFn } from '#/adapter/vxe-table';
 import type { DeptApi } from '#/api';
 
+import { ref } from 'vue';
+
 import { z } from '#/adapter/form';
 import { getAllDeptTree } from '#/api';
 import { $t } from '#/locales';
 
+const treeData = ref([]);
+
+function transformToTreeData(data: any) {
+  return data.map((item) => ({
+    value: item.id,
+    label: item.name,
+    ...(item.children && { children: transformToTreeData(item.children) }),
+  }));
+}
+
+// 使用示例
+getAllDeptTree(1).then((res) => {
+  treeData.value = transformToTreeData(res);
+});
 /**
  * 获取编辑表单的字段配置。如果没有使用多语言，可以直接export一个数组常量
  */
@@ -20,10 +36,11 @@ export function useSchema(): VbenFormSchema[] {
       rules: z.string(),
     },
     {
-      component: 'ApiTreeSelect',
+      component: 'TreeSelect',
       componentProps: {
         allowClear: true,
-        api: getAllDeptTree(1),
+        // api: getAllDeptTree(1),
+        treeData,
         class: 'w-full',
         labelField: 'name',
         valueField: 'id',
@@ -60,6 +77,38 @@ export function useSchema(): VbenFormSchema[] {
   ];
 }
 
+// export function useGridFormSchema(): VbenFormSchema[] {
+//   return [
+//     {
+//       component: 'Input',
+//       fieldName: 'name',
+//       label: '部门名称',
+//     },
+//     {
+//       component: 'Select',
+//       componentProps: {
+//         allowClear: true,
+//         options: [
+//           { label: $t('common.enabled'), value: true },
+//           { label: $t('common.disabled'), value: false },
+//         ],
+//       },
+//       fieldName: 'enable',
+//       label: '状态',
+//     },
+//     // {
+//     //   component: 'Input',
+//     //   fieldName: 'remark',
+//     //   label: '备注',
+//     // },
+//     // {
+//     //   component: 'RangePicker',
+//     //   fieldName: 'createTime',
+//     //   label: '创建时间',
+//     // },
+//   ];
+// }
+
 /**
  * 获取表格列配置
  * @description 使用函数的形式返回列数据而不是直接export一个Array常量，是为了响应语言切换时重新翻译表头
@@ -85,15 +134,16 @@ export function useColumns(
       title: '状态',
       width: 100,
     },
-    {
-      field: 'createTime',
-      title: '创建时间',
-      width: 180,
-    },
     {
       field: 'remark',
       title: '备注',
     },
+    {
+      field: 'createTime',
+      slots: { default: 'createTime' },
+      title: '创建时间',
+      width: 180,
+    },
     {
       align: 'right',
       cellRender: {

apps/web-antd/src/views/dept/list.vue

@@ -9,6 +9,7 @@ import { Page, useVbenModal } from '@vben/common-ui';
 import { Plus } from '@vben/icons';
 
 import { Button, message } from 'ant-design-vue';
+import dayjs from 'dayjs';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getAllDeptTree, removeDept } from '#/api';
@@ -89,6 +90,10 @@ function onActionClick({ code, row }: OnActionClickParams<DeptApi.Dept>) {
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
+  // formOptions: {
+  //   fieldMappingTime: [['createTime', ['startTime', 'endTime']]],
+  //   schema: useGridFormSchema(),
+  // },
   gridEvents: {},
   gridOptions: {
     columns: useColumns(onActionClick),
@@ -138,6 +143,9 @@ function refreshGrid() {
           {{ $t('ui.actionTitle.create', ['部门']) }}
         </Button>
       </template>
+      <template #createTime="{ row }">
+        {{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm') }}
+      </template>
     </Grid>
   </Page>
 </template>