feat(@vben/web-antd): 优化部门模块

apps/web-antd/src/adapter/vxe-table.ts

@@ -5,9 +5,10 @@ import { h } from 'vue';
 import { IconifyIcon } from '@vben/icons';
 import { $te } from '@vben/locales';
 import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';
-import { isFunction, isString } from '@vben/utils';
+import { get, isFunction, isString } from '@vben/utils';
 
-import { Button, Image, Popconfirm, Switch } from 'ant-design-vue';
+import { objectOmit } from '@vueuse/core';
+import { Button, Image, Popconfirm, Switch, Tag } from 'ant-design-vue';
 
 import { $t } from '#/locales';
 
@@ -51,6 +52,25 @@ setupVbenVxeTable({
       },
     });
 
+    vxeUI.renderer.add('CellTag', {
+      renderTableDefault({ options, props }, { column, row }) {
+        const value = get(row, column.field);
+        const tagOptions = options ?? [
+          { color: 'success', label: $t('common.enabled'), value: true },
+          { color: 'error', label: $t('common.disabled'), value: false },
+        ];
+        const tagItem = tagOptions.find((item) => item.value === value);
+        return h(
+          Tag,
+          {
+            ...props,
+            ...objectOmit(tagItem ?? {}, ['label']),
+          },
+          { default: () => tagItem?.label ?? value },
+        );
+      },
+    });
+
     // 表格配置项可以用 cellRender: { name: 'CellLink' },
     vxeUI.renderer.add('CellLink', {
       renderTableDefault(renderOpts) {

apps/web-antd/src/api/core/dept.ts

@@ -21,34 +21,34 @@ export namespace DeptApi {
   }
 }
 
-// 添加区域
+// 添加部门
 export function createDept(data: DeptApi.Dept) {
-  return requestClient.post(`/api/rest/dept`, data);
+  return requestClient.post(`/rest/dept`, data);
 }
 
-// 更新区域信息
+// 更新部门信息
-export function updateDept(data: DeptApi.DeptRecord) {
+export function updateDept(id: string, data: DeptApi.DeptRecord) {
-  return requestClient.patch(`/api/rest/dept/${data.id}`, data);
+  return requestClient.patch(`/rest/dept/${id}`, data);
 }
 
-// 删除区域
+// 删除部门
 export function removeDept(id: string) {
-  return requestClient.delete(`/api/rest/dept/${id}`);
+  return requestClient.delete(`/rest/dept/${id}`);
 }
 
-// 模糊查询获取区域列表
+// 模糊查询获取部门列表
 export function queryDeptList(data: DeptApi.DeptRecord) {
-  return requestClient.get('/api/rest/dept', { data });
+  return requestClient.get('/rest/dept', { data });
 }
 
-// 获取区域列表
+// 获取部门列表
 export function deptList() {
-  return requestClient.get(`/api/rest/dept`);
+  return requestClient.get(`/rest/dept`);
 }
 
 // 启用状态
 export function enabledDept(id: string) {
-  return requestClient.patch(`/api/rest/dept/toggle/${id}`, id);
+  return requestClient.patch(`/rest/dept/toggle/${id}`, id);
 }
 
 export function getAllDeptTree(id?: number | string) {
@@ -56,7 +56,7 @@ export function getAllDeptTree(id?: number | string) {
 }
 
 // export function getDeptTree(params?: Partial<DeptRecord>) {
-//   return axios.get<DeptRecord[]>(`/api/dept/trees`, {
+//   return axios.get<DeptRecord[]>(`/dept/trees`, {
 //     params,
 //     paramsSerializer: (obj) => {
 //       return qs.stringify(obj);
@@ -64,7 +64,7 @@ export function getAllDeptTree(id?: number | string) {
 //   });
 // }
 // export function listDepts(params?: ListParams<Partial<DeptRecord>>) {
-//   return axios.get<DeptRecord[]>(`/api/dept`, {
+//   return axios.get<DeptRecord[]>(`/dept`, {
 //     params,
 //     paramsSerializer: (obj) => {
 //       return qs.stringify(obj);
@@ -72,5 +72,5 @@ export function getAllDeptTree(id?: number | string) {
 //   });
 // }
 // export function queryDepts(params?: ListParams<Partial<DeptRecord>>) {
-//   return queryList(`/api/dept`, params);
+//   return queryList(`/dept`, params);
 // }

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

@@ -37,13 +37,13 @@ export function useSchema(): VbenFormSchema[] {
       componentProps: {
         buttonStyle: 'solid',
         options: [
-          { label: $t('common.enabled'), value: 1 },
+          { label: $t('common.enabled'), value: true },
-          { label: $t('common.disabled'), value: 0 },
+          { label: $t('common.disabled'), value: false },
         ],
         optionType: 'button',
       },
-      defaultValue: 1,
+      defaultValue: true,
-      fieldName: 'status',
+      fieldName: 'enabled',
       label: '状态',
     },
     {
@@ -78,8 +78,10 @@ export function useColumns(
       width: 150,
     },
     {
-      cellRender: { name: 'CellTag' },
+      cellRender: {
-      field: 'enable',
+        name: 'CellTag',
+      },
+      field: 'enabled',
       title: '状态',
       width: 100,
     },
@@ -88,6 +90,10 @@ export function useColumns(
       title: '创建时间',
       width: 180,
     },
+    {
+      field: 'remark',
+      title: '备注',
+    },
     {
       align: 'right',
       cellRender: {

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

@@ -100,7 +100,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
     proxyConfig: {
       ajax: {
         query: async (_params) => {
-          return await getAllDeptTree(1);
+          const res = await getAllDeptTree(1);
+          return {
+            items: res,
+          };
         },
       },
     },

apps/web-antd/src/views/user/index.vue

@@ -1,78 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-
-import { getAllDeptTree, queryUserList } from '#/api';
-
-import UserTableView from './user-table-view.vue';
-
-const generateFormModel = () => {
-  return {
-    id: '',
-    username: '',
-    name: '',
-    phone: '',
-    email: '',
-    createdTime: [],
-    enableState: '',
-    deptId: '',
-    page: 1,
-    current: 1,
-    size: 10,
-  };
-};
-const treeData = ref([]);
-
-const renderData = ref([]);
-const formModel = ref(generateFormModel());
-// const deptOptions = ref([]);
-
-const getDeptData = async () => {
-  try {
-    treeData.value = await getAllDeptTree(0);
-  } catch {}
-};
-
-const getUserTableData = async (params: any) => {
-  try {
-    const res = await queryUserList(params);
-    renderData.value = res.records;
-  } catch {}
-};
-
-// 查询
-const search = () => {
-  getUserTableData({
-    // ...pagination,
-    ...formModel.value,
-  });
-};
-
-// const handleSelectDept = (id: any[]) => {
-//   const [deptId] = id;
-//   formModel.value.deptId = deptId;
-//   search();
-// };
-
-const handleSelectUser = (data: any) => {
-  formModel.value = data;
-  search();
-};
-
-getUserTableData({ page: 1, size: 10, current: 1 });
-getDeptData();
-</script>
-
-<template>
-  <div class="px-1">
-    <div class="mt-5 flex flex-col lg:flex-row">
-      <!--      <div class="mr-4 w-full lg:w-1/4">-->
-      <!--        <UserDeptTree :treeData="treeData" @select="handleSelectDept" />-->
-      <!--      </div>-->
-      <div class="w-full">
-        <UserTableView :render-data="renderData" @change="handleSelectUser" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped></style>