AddTeacher.tsx 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. import { useIntl } from "react-intl";
  2. import { ProForm, ProFormSelect } from "@ant-design/pro-components";
  3. import { Button, message, Popover } from "antd";
  4. import { UserAddOutlined } from "@ant-design/icons";
  5. import { get } from "../../request";
  6. import type { IUserListResponse } from "../../api/Auth";
  7. interface IFormData {
  8. userId: string;
  9. }
  10. interface IWidget {
  11. groupId?: string;
  12. }
  13. const AddTeacherWidget = ({ _____groupId }: IWidget) => {
  14. const intl = useIntl();
  15. const form = (
  16. <ProForm<IFormData>
  17. onFinish={async (values: IFormData) => {
  18. // TODO
  19. console.log(values);
  20. message.success(intl.formatMessage({ id: "flashes.success" }));
  21. }}
  22. >
  23. <ProForm.Group>
  24. <ProFormSelect
  25. name="userId"
  26. label={intl.formatMessage({ id: "forms.fields.user.label" })}
  27. showSearch
  28. debounceTime={300}
  29. request={async ({ keyWord }) => {
  30. console.log("keyWord", keyWord);
  31. const json = await get<IUserListResponse>(`/v2/user?view=key&key=`);
  32. const userList = json.data.rows.map((item) => {
  33. return {
  34. value: item.id,
  35. label: `${item.userName}-${item.nickName}`,
  36. };
  37. });
  38. console.log("json", userList);
  39. return userList;
  40. }}
  41. placeholder={intl.formatMessage({ id: "forms.fields.user.required" })}
  42. rules={[
  43. {
  44. required: true,
  45. message: intl.formatMessage({
  46. id: "forms.message.user.required",
  47. }),
  48. },
  49. ]}
  50. />
  51. </ProForm.Group>
  52. </ProForm>
  53. );
  54. return (
  55. <Popover
  56. placement="bottom"
  57. arrowPointAtCenter
  58. content={form}
  59. trigger="click"
  60. >
  61. <Button icon={<UserAddOutlined />} key="add" type="primary">
  62. {intl.formatMessage({ id: "buttons.group.add.member" })}
  63. </Button>
  64. </Popover>
  65. );
  66. };
  67. export default AddTeacherWidget;