You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
100 lines
3.1 KiB
100 lines
3.1 KiB
import CategorySelect from '@/components/CategorySelect';
|
|
import { getTopicDetailUsingGET } from '@/services/luigi/topic';
|
|
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
|
|
import { DrawerForm, ProFormText } from '@ant-design/pro-form';
|
|
import { Button, Col, Form, message, Row } from 'antd';
|
|
import React, { useRef } from 'react';
|
|
|
|
import { saveTopicUsingPOST } from '@/services/luigi/topic';
|
|
|
|
const formItemLayout = {
|
|
labelCol: { span: 4 },
|
|
wrapperCol: { span: 14 },
|
|
};
|
|
|
|
import type { ProFormInstance } from '@ant-design/pro-form';
|
|
const TopicForm: React.FC<{
|
|
trigger: JSX.Element;
|
|
formTitle: string;
|
|
topicId?: number;
|
|
refresh?: () => void;
|
|
}> = (props) => {
|
|
const formRef = useRef<ProFormInstance<API.PoemBo>>();
|
|
return (
|
|
<DrawerForm<API.TopicDetail>
|
|
title={props.formTitle}
|
|
formRef={formRef}
|
|
layout="horizontal"
|
|
{...formItemLayout}
|
|
trigger={props.trigger}
|
|
autoFocusFirstInput
|
|
drawerProps={{
|
|
destroyOnClose: true,
|
|
}}
|
|
onVisibleChange={async (visible: boolean) => {
|
|
if (!visible || !props.topicId) {
|
|
return;
|
|
}
|
|
const response = await getTopicDetailUsingGET({ id: props.topicId });
|
|
if (response.data) {
|
|
formRef.current?.setFieldsValue(response.data);
|
|
}
|
|
}}
|
|
onFinish={async (values) => {
|
|
const categoryList: API.Category[] | undefined = values.categoryList;
|
|
if (categoryList) {
|
|
const ids = categoryList.map((x) => x.id);
|
|
const cids = JSON.stringify(ids);
|
|
values.cids = cids;
|
|
}
|
|
const rsp = await saveTopicUsingPOST({ ...values, id: props.topicId });
|
|
if (rsp.code) {
|
|
message.success('提交成功');
|
|
if (props.refresh) {
|
|
props.refresh();
|
|
}
|
|
return true;
|
|
}
|
|
return false;
|
|
}}
|
|
>
|
|
<ProFormText width="md" name="title" label="标题" placeholder="请输入" />
|
|
<Form.List name="categoryList">
|
|
{(fields, { add, remove }, { errors }) => (
|
|
<>
|
|
<Form.Item label="分类" required={true}>
|
|
{fields.map((field) => (
|
|
<Row key={field.key}>
|
|
<Col span={10}>
|
|
<Form.Item {...field} key={field.key}>
|
|
<CategorySelect />
|
|
</Form.Item>
|
|
</Col>
|
|
<Col offset={1}>
|
|
<MinusCircleOutlined
|
|
className="dynamic-delete-button"
|
|
onClick={() => remove(field.name)}
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
))}
|
|
<Form.Item>
|
|
<Button
|
|
type="dashed"
|
|
onClick={() => add()}
|
|
style={{ width: '60%' }}
|
|
icon={<PlusOutlined />}
|
|
>
|
|
添加分类
|
|
</Button>
|
|
<Form.ErrorList errors={errors} />
|
|
</Form.Item>
|
|
</Form.Item>
|
|
</>
|
|
)}
|
|
</Form.List>
|
|
</DrawerForm>
|
|
);
|
|
};
|
|
|
|
export default TopicForm;
|
|
|