💥 feat(department): Add user selection for department leader and upda… (#64)

Author: lwnmengjing

config/routes.ts

@@ -125,31 +125,31 @@ export default [
   },
   {
     icon: 'table',
-    path: '/department',
+    path: '/departments',
     routes: [
       {
-        path: '/department',
+        path: '/departments',
         hideInMenu: true,
         component: './Department',
       },
       {
-        path: '/department/:id',
+        path: '/departments/:id',
         hideInMenu: true,
         component: './Department',
       },
     ],
   },
   {
     icon: 'table',
-    path: '/post',
+    path: '/posts',
     routes: [
       {
-        path: '/post',
+        path: '/posts',
         hideInMenu: true,
         component: './Post',
       },
       {
-        path: '/post/:id',
+        path: '/posts/:id',
         hideInMenu: true,
         component: './Post',
       },

src/locales/en-US/pages.ts

@@ -176,6 +176,7 @@ export default {
   'pages.accessToken.settings.longTime': 'Long time',
   'pages.email.settings.title': 'Email Settings',
   'pages.security.settings.changePassword': 'Change Password',
+  'pages.department.leader.placeholder': 'Please select leader',
   /****************** field ******************/
   'pages.fields.namespace': 'Namespace',
   'pages.fields.cluster': 'Cluster',

src/locales/zh-CN/pages.ts

@@ -160,6 +160,7 @@ export default {
   'pages.accessToken.settings.longTime': '长期',
   'pages.email.settings.title': '邮件设置',
   'pages.security.settings.changePassword': '修改密码',
+  'pages.department.leader.placeholder': '请选择负责人',
   /****************** field ******************/
   'pages.fields.namespace': '命名空间',
   'pages.fields.cluster': '集群',

src/pages/Department/index.tsx

@@ -5,7 +5,7 @@ import { PlusOutlined } from '@ant-design/icons';
 import type { ActionType, ProColumns, ProDescriptionsItemProps } from '@ant-design/pro-components';
 import { PageContainer, ProDescriptions, ProTable } from '@ant-design/pro-components';
 import { FormattedMessage, history, Link, useIntl, useParams } from '@umijs/max';
-import { Button, Drawer, message, Popconfirm, TreeSelect } from 'antd';
+import { Button, Drawer, message, Popconfirm, TreeSelect, Select } from 'antd';
 import { DataNode } from 'antd/es/tree';
 import React, { useEffect, useRef, useState } from 'react';
 import { fieldIntl } from '@/util/fieldIntl';
@@ -17,9 +17,11 @@ import {
   putDepartmentsId,
 } from '@/services/admin/department';
 import { statusOptions } from '@/util/statusOptions';
+import { getUsers } from '@/services/admin/user';
 
 const TableList: React.FC = () => {
   const [showDetail, setShowDetail] = useState<boolean>(false);
+  const [userOptions, setUserOptions] = useState<{ label: string; value: string }[]>([]);
 
   const actionRef = useRef<ActionType>();
   const [currentRow, setCurrentRow] = useState<API.Role>();
@@ -79,6 +81,23 @@ const TableList: React.FC = () => {
     {
       title: fieldIntl(intl, 'leaderID'),
       dataIndex: 'leaderID',
+      render: (_, record) => {
+        const leader = userOptions.find((user) => user.value === record.leaderID);
+        return leader?.label || '-';
+      },
+      renderFormItem: () => (
+        <Select
+          showSearch
+          placeholder={intl.formatMessage({
+            id: 'pages.department.leader.placeholder',
+            defaultMessage: '请选择负责人',
+          })}
+          options={userOptions}
+          filterOption={(input, option) =>
+            (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
+          }
+        />
+      ),
     },
     {
       title: fieldIntl(intl, 'phone'),
@@ -136,14 +155,14 @@ const TableList: React.FC = () => {
       hideInDescriptions: true,
       hideInForm: true,
       render: (_, record) => [
-        <Access key="/department/edit">
-          <Link to={`/department/${record.id}`} key="edit">
+        <Access key="/departments/edit">
+          <Link to={`/departments/${record.id}`} key="edit">
             <Button key="edit">
               <FormattedMessage id="pages.title.edit" defaultMessage="Edit" />
             </Button>
           </Link>
         </Access>,
-        <Access key="/department/delete">
+        <Access key="/departments/delete">
           <Popconfirm
             key="delete"
             title={intl.formatMessage({
@@ -224,6 +243,20 @@ const TableList: React.FC = () => {
     }
   }, [id]);
 
+  useEffect(() => {
+    // 获取用户列表用于选择负责人
+    getUsers({ pageSize: 1000 }).then((res) => {
+      if (res.data) {
+        setUserOptions(
+          res.data.map((user) => ({
+            label: user.name || user.username || '',
+            value: user.id || '',
+          })),
+        );
+      }
+    });
+  }, []);
+
   return (
     <PageContainer title={indexTitle(id)}>
       <ProTable<API.Department, API.getDepartmentsParams>
@@ -239,8 +272,8 @@ const TableList: React.FC = () => {
         type={id ? 'form' : 'table'}
         onSubmit={id ? onSubmit : undefined}
         toolBarRender={() => [
-          <Access key="/department/create">
-            <Link to="/department/create" key="create">
+          <Access key="/departments/create">
+            <Link to="/departments/create" key="create">
               <Button type="primary" key="create">
                 <PlusOutlined /> <FormattedMessage id="pages.table.new" defaultMessage="New" />
               </Button>

src/pages/Post/index.tsx

@@ -13,7 +13,7 @@ import { statusOptions } from '@/util/statusOptions';
 import { deletePostsId, getPosts, getPostsId, postPosts, putPostsId } from '@/services/admin/post';
 import { dataScopeOptions } from '@/util/dataScopeOptions';
 
-const Index: React.FC = () => {
+const TableList: React.FC = () => {
   const [showDetail, setShowDetail] = useState<boolean>(false);
 
   const actionRef = useRef<ActionType>();
@@ -103,14 +103,14 @@ const Index: React.FC = () => {
       hideInDescriptions: true,
       hideInForm: true,
       render: (_, record) => [
-        <Access key="/post/edit">
-          <Link to={`/post/${record.id}`} key="edit">
+        <Access key="/posts/edit">
+          <Link to={`/posts/${record.id}`} key="edit">
             <Button key="edit">
               <FormattedMessage id="pages.title.edit" defaultMessage="Edit" />
             </Button>
           </Link>
         </Access>,
-        <Access key="/post/delete">
+        <Access key="/posts/delete">
           <Popconfirm
             key="delete"
             title={intl.formatMessage({
@@ -206,12 +206,12 @@ const Index: React.FC = () => {
         type={id ? 'form' : 'table'}
         onSubmit={id ? onSubmit : undefined}
         toolBarRender={() => [
-          <Access key="/post/create">
-            <Link to="/post/create" key="create">
-              <Button type="primary" key="create">
+          <Access key="/posts/create">
+            <Button type="primary" key="create">
+              <Link type="primary" to="/posts/create" key="/posts/create">
                 <PlusOutlined /> <FormattedMessage id="pages.table.new" defaultMessage="New" />
-              </Button>
-            </Link>
+              </Link>
+            </Button>
           </Access>,
         ]}
         form={
@@ -265,4 +265,4 @@ const Index: React.FC = () => {
   );
 };
 
-export default Index;
+export default TableList;

src/pages/Role/index.tsx

@@ -209,7 +209,7 @@ const TableList: React.FC = () => {
 
   return (
     <PageContainer title={indexTitle(id)}>
-      <ProTable<API.Role, API.Page>
+      <ProTable<API.Role, API.getRolesParams>
         headerTitle={intl.formatMessage({
           id: 'pages.role.list.title',
           defaultMessage: 'Role List',
@@ -238,9 +238,12 @@ const TableList: React.FC = () => {
                   return res;
                 },
               }
-            : undefined
+            : {
+                initialValues: {
+                  status: 'enabled',
+                },
+              }
         }
-        // @ts-ignore
         request={getRoles}
         columns={columns}
       />