feat: space member batch create

src/common/model/space/member/SpaceMember.ts

@@ -2,16 +2,9 @@ import BaseEntity from '../../base/BaseEntity';
 import User from '../../user/User';
 import { SpaceMemberRole } from './SpaceMemberRole';
 import Filter from '../../base/filter/Filter';
-import SortFilter from '../../base/filter/SortFilter';
 import InputFilter from '../../base/filter/InputFilter';
 import SafeUtil from '../../../util/SafeUtil';
 
-export interface SpaceMemberFormValues {
-  spaceUuid: string;
-  userUuid: string;
-  role: SpaceMemberRole;
-  uuid: string | null;
-}
 export default class SpaceMember extends BaseEntity {
   spaceUuid: string | null = null;
   userUuid: string | null = null;
@@ -40,7 +33,7 @@ export default class SpaceMember extends BaseEntity {
     ];
   }
 
-  getForm(): SpaceMemberFormValues {
+  getForm() {
     return {
       spaceUuid: this.spaceUuid!,
       userUuid: this.userUuid!,
@@ -49,6 +42,29 @@ export default class SpaceMember extends BaseEntity {
     };
   }
 
+  httpCreate(
+    body: {
+      spaceUuid: string;
+      userUuids: string;
+      role: SpaceMemberRole;
+    },
+    successCallback?: any
+  ) {
+    this.httpPost(this.getUrlCreate(), body, successCallback);
+  }
+
+  httpEdit(
+    body: {
+      uuid: string;
+      spaceUuid: string;
+      userUuid: string;
+      role: SpaceMemberRole;
+    },
+    successCallback?: any
+  ) {
+    this.httpPost(this.getUrlEdit(), body, successCallback);
+  }
+
   httpMine(spaceUuid: string, successCallback?: any, errorCallback?: any) {
     this.httpGet(
       SpaceMember.URL_SPACE_MEMBER_MINE,

src/pages/space/member/List.tsx

@@ -1,9 +1,7 @@
 import TankComponent from '../../../common/component/TankComponent';
 import { Link, RouteComponentProps } from 'react-router-dom';
 import Pager from '../../../common/model/base/Pager';
-import SpaceMember, {
-  SpaceMemberFormValues,
-} from '../../../common/model/space/member/SpaceMember';
+import SpaceMember from '../../../common/model/space/member/SpaceMember';
 import Lang from '../../../common/model/global/Lang';
 import { Button, Modal, Table, Tag, Tooltip, Typography } from 'antd';
 import TankTitle from '../../widget/TankTitle';
@@ -25,7 +23,7 @@ import {
 } from '@ant-design/icons';
 import Color from '../../../common/model/base/option/Color';
 import MessageBoxUtil from '../../../common/util/MessageBoxUtil';
-import ModalForm from './widget/ModalForm';
+import ModalForm, { SpaceMemberModalFormValues } from './widget/ModalForm';
 
 interface IProps
   extends RouteComponentProps<{
@@ -41,7 +39,7 @@ export default class SpaceMemberList extends TankComponent<IProps, IState> {
   modalState: {
     visible: boolean;
     mode: 'create' | 'edit';
-    initialValues?: SpaceMemberFormValues;
+    targetSpaceMember?: SpaceMember;
   } = {
     visible: false,
     mode: 'create',
@@ -74,7 +72,7 @@ export default class SpaceMemberList extends TankComponent<IProps, IState> {
     this.modalState = {
       visible: true,
       mode: 'edit',
-      initialValues: spaceMember.getForm(),
+      targetSpaceMember: spaceMember,
     };
     this.updateUI();
   }
@@ -94,18 +92,38 @@ export default class SpaceMemberList extends TankComponent<IProps, IState> {
     });
   }
 
-  handleConfirmModalForm(values: SpaceMemberFormValues) {
+  handleConfirmModalForm(values: SpaceMemberModalFormValues) {
     const spaceMember = new SpaceMember();
-    spaceMember.spaceUuid = this.spaceUuid;
-    spaceMember.assign(values);
-    spaceMember.httpSave(
-      () => {
-        MessageBoxUtil.success(Lang.t('operationSuccess'));
-        this.refresh();
-      },
-      null,
-      () => this.handleHideModalForm()
-    );
+    const body = {
+      spaceUuid: this.spaceUuid,
+      role: values.role,
+    };
+    if (this.modalState.mode === 'edit') {
+      spaceMember.httpEdit(
+        {
+          ...body,
+          uuid: this.modalState.targetSpaceMember?.uuid!,
+          userUuid: values.userUuids.join(','),
+        },
+        () => {
+          MessageBoxUtil.success(Lang.t('operationSuccess'));
+          this.handleHideModalForm();
+          this.refresh();
+        }
+      );
+    } else {
+      spaceMember.httpCreate(
+        {
+          ...body,
+          userUuids: values.userUuids.join(','),
+        },
+        () => {
+          MessageBoxUtil.success(Lang.t('operationSuccess'));
+          this.handleHideModalForm();
+          this.refresh();
+        }
+      );
+    }
   }
 
   handleHideModalForm() {
@@ -218,7 +236,7 @@ export default class SpaceMemberList extends TankComponent<IProps, IState> {
         {modalState.visible && (
           <ModalForm
             mode={modalState.mode}
-            initialValues={modalState.initialValues}
+            targetSpaceMember={modalState.targetSpaceMember}
             onOk={this.handleConfirmModalForm.bind(this)}
             onCancel={() => this.handleHideModalForm()}
           />

src/pages/space/member/widget/ModalForm.tsx

@@ -2,22 +2,37 @@ import Lang from '../../../../common/model/global/Lang';
 import { Form, Input, Modal, Select } from 'antd';
 import React, { useEffect, useRef, useState } from 'react';
 import { FORM_LAYOUT } from '../../../../common/const/Form';
-import { SpaceMemberFormValues } from '../../../../common/model/space/member/SpaceMember';
-import { SpaceMemberRoleList } from '../../../../common/model/space/member/SpaceMemberRole';
+import SpaceMember from '../../../../common/model/space/member/SpaceMember';
+import {
+  SpaceMemberRole,
+  SpaceMemberRoleList,
+} from '../../../../common/model/space/member/SpaceMemberRole';
 import Pager from '../../../../common/model/base/Pager';
 import User from '../../../../common/model/user/User';
 
+export interface SpaceMemberModalFormValues {
+  userUuids: string[];
+  role: SpaceMemberRole;
+}
+
 interface Props {
   mode: 'create' | 'edit';
-  initialValues?: SpaceMemberFormValues;
-  onOk: (values: SpaceMemberFormValues) => void;
+  targetSpaceMember?: SpaceMember;
+  onOk: (values: SpaceMemberModalFormValues) => void;
   onCancel: () => void;
 }
-const ModalForm = ({ mode, initialValues, onOk, onCancel }: Props) => {
+const ModalForm = ({ mode, targetSpaceMember, onOk, onCancel }: Props) => {
   const isCreate = mode === 'create';
   const userPager = useRef(new Pager<User>(null, User, 100));
-  const [form] = Form.useForm<SpaceMemberFormValues>();
+  const [form] = Form.useForm<SpaceMemberModalFormValues>();
   const [userList, setUserList] = useState<User[]>([]); // 用户列表
+  const initialValues: SpaceMemberModalFormValues | undefined =
+    targetSpaceMember
+      ? {
+          userUuids: [targetSpaceMember.userUuid!],
+          role: targetSpaceMember.role!,
+        }
+      : undefined;
 
   useEffect(() => {
     refresh();
@@ -49,12 +64,8 @@ const ModalForm = ({ mode, initialValues, onOk, onCancel }: Props) => {
         onFinish={onOk}
         initialValues={initialValues}
       >
-        {/*编辑时暂存uuid*/}
-        <Form.Item name="uuid" hidden>
-          <Input />
-        </Form.Item>
         <Form.Item
-          name="userUuid"
+          name="userUuids"
           label={Lang.t('space.member')}
           rules={[{ required: true, message: Lang.t('selectRequired') }]}
         >
@@ -63,6 +74,7 @@ const ModalForm = ({ mode, initialValues, onOk, onCancel }: Props) => {
               label: item.username,
               value: item.uuid,
             }))}
+            mode="multiple"
             placeholder={Lang.t('space.memberTip')}
             disabled={!isCreate}
             showSearch