space-form.tsx 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. import { addSpace, apiInterceptors } from '@/client/api';
  2. import { IStorage, StepChangeParams } from '@/types/knowledge';
  3. import { Button, Form, Input, Select, Spin } from 'antd';
  4. import { useEffect, useState } from 'react';
  5. import { useTranslation } from 'react-i18next';
  6. type FieldType = {
  7. spaceName: string;
  8. owner: string;
  9. description: string;
  10. storage: string;
  11. field: string;
  12. };
  13. type IProps = {
  14. handleStepChange: (params: StepChangeParams) => void;
  15. spaceConfig: IStorage | null;
  16. };
  17. export default function SpaceForm(props: IProps) {
  18. const { t } = useTranslation();
  19. const { handleStepChange, spaceConfig } = props;
  20. const [spinning, setSpinning] = useState<boolean>(false);
  21. const [storage, setStorage] = useState<string>();
  22. const [form] = Form.useForm();
  23. useEffect(() => {
  24. form.setFieldValue('storage', spaceConfig?.[0].name);
  25. setStorage(spaceConfig?.[0].name);
  26. }, [spaceConfig]);
  27. const handleStorageChange = (data: string) => {
  28. setStorage(data);
  29. };
  30. const handleFinish = async (fieldsValue: FieldType) => {
  31. const { spaceName, owner, description, storage, field } = fieldsValue;
  32. setSpinning(true);
  33. const vector_type = storage;
  34. const domain_type = field;
  35. const [_, data, res] = await apiInterceptors(
  36. addSpace({
  37. name: spaceName,
  38. vector_type: vector_type,
  39. owner,
  40. desc: description,
  41. domain_type: domain_type,
  42. }),
  43. );
  44. setSpinning(false);
  45. const is_financial = domain_type === 'FinancialReport';
  46. localStorage.setItem('cur_space_id', JSON.stringify(data));
  47. res?.success &&
  48. handleStepChange({
  49. label: 'forward',
  50. spaceName,
  51. pace: is_financial ? 2 : 1,
  52. docType: is_financial ? 'DOCUMENT' : '',
  53. });
  54. };
  55. return (
  56. <Spin spinning={spinning}>
  57. <Form
  58. form={form}
  59. size='large'
  60. className='mt-4'
  61. layout='vertical'
  62. name='basic'
  63. initialValues={{ remember: true }}
  64. autoComplete='off'
  65. onFinish={handleFinish}
  66. >
  67. <Form.Item<FieldType>
  68. label={t('Knowledge_Space_Name')}
  69. name='spaceName'
  70. rules={[
  71. { required: true, message: t('Please_input_the_name') },
  72. () => ({
  73. validator(_, value) {
  74. if (/[^\u4e00-\u9fa50-9a-zA-Z_-]/.test(value)) {
  75. return Promise.reject(new Error(t('the_name_can_only_contain')));
  76. }
  77. return Promise.resolve();
  78. },
  79. }),
  80. ]}
  81. >
  82. <Input className='h-12' placeholder={t('Please_input_the_name')} />
  83. </Form.Item>
  84. <Form.Item<FieldType>
  85. label={t('Storage')}
  86. name='storage'
  87. rules={[{ required: true, message: t('Please_select_the_storage') }]}
  88. >
  89. <Select className='mb-5 h-12' placeholder={t('Please_select_the_storage')} onChange={handleStorageChange}>
  90. {spaceConfig?.map((item: any) => {
  91. return (
  92. <Select.Option key={item.name} value={item.name}>
  93. {item.desc}
  94. </Select.Option>
  95. );
  96. })}
  97. </Select>
  98. </Form.Item>
  99. <Form.Item<FieldType>
  100. label={t('Domain')}
  101. name='field'
  102. rules={[{ required: true, message: t('Please_select_the_domain_type') }]}
  103. >
  104. <Select className='mb-5 h-12' placeholder={t('Please_select_the_domain_type')}>
  105. {spaceConfig
  106. ?.find((item: any) => item.name === storage)
  107. ?.domain_types.map((item: any) => {
  108. return (
  109. <Select.Option key={item.name} value={item.name}>
  110. {item.desc}
  111. </Select.Option>
  112. );
  113. })}
  114. </Select>
  115. </Form.Item>
  116. <Form.Item<FieldType>
  117. label={t('Description')}
  118. name='description'
  119. rules={[{ required: true, message: t('Please_input_the_description') }]}
  120. >
  121. <Input className='h-12' placeholder={t('Please_input_the_description')} />
  122. </Form.Item>
  123. <Form.Item>
  124. <Button type='primary' htmlType='submit'>
  125. {t('Next')}
  126. </Button>
  127. </Form.Item>
  128. </Form>
  129. </Spin>
  130. );
  131. }