96 lines
2.7 KiB
TypeScript
96 lines
2.7 KiB
TypeScript
|
// import React, { useState } from 'react';
|
|||
|
|
// import { Form, Select, Input } from 'antd';
|
|||
|
|
// import axios from 'axios';
|
|||
|
|
|
|||
|
|
// const { Option } = Select;
|
|||
|
|
|
|||
|
|
// // 假数据
|
|||
|
|
// const fakePostsData = Array.from({ length: 15 }, (_, index) => ({
|
|||
|
|
// id: index + 1,
|
|||
|
|
// type: 'Lecture',
|
|||
|
|
// name: `Lecture ${index + 1}`,
|
|||
|
|
// description: `This is lecture number ${index + 1}`,
|
|||
|
|
// }));
|
|||
|
|
|
|||
|
|
// // 模拟获取数据的函数
|
|||
|
|
// async function fetchPosts(query = '') {
|
|||
|
|
// // 在实际应用中，这里应该是一个真实的API调用
|
|||
|
|
// return fakePostsData.filter(post =>
|
|||
|
|
// post.name.toLowerCase().includes(query.toLowerCase()) ||
|
|||
|
|
// post.description.toLowerCase().includes(query.toLowerCase())
|
|||
|
|
// );
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
// const PostSelector = ({ value, onChange }) => {
|
|||
|
|
// const [posts, setPosts] = useState([]);
|
|||
|
|
// const [searchValue, setSearchValue] = useState('');
|
|||
|
|
|
|||
|
|
// const handleSearch = async (query) => {
|
|||
|
|
// setSearchValue(query);
|
|||
|
|
// const result = await fetchPosts(query);
|
|||
|
|
// setPosts(result);
|
|||
|
|
// };
|
|||
|
|
|
|||
|
|
// const handlePostChange = (selectedIds) => {
|
|||
|
|
// onChange(selectedIds); // 更新父组件的状态
|
|||
|
|
// };
|
|||
|
|
|
|||
|
|
// const renderOption = (post) => (
|
|||
|
|
// <Option key={post.id} value={post.id.toString()}>
|
|||
|
|
// {post.name} - {post.description}
|
|||
|
|
// </Option>
|
|||
|
|
// );
|
|||
|
|
|
|||
|
|
// return (
|
|||
|
|
// <Select
|
|||
|
|
// mode="multiple" // 支持多选
|
|||
|
|
// showSearch
|
|||
|
|
// placeholder="请选择或搜索讲座"
|
|||
|
|
// optionFilterProp="children"
|
|||
|
|
// onSearch={handleSearch}
|
|||
|
|
// filterOption={false} // 禁用默认过滤，因为我们已经在 onSearch 中实现了自定义过滤
|
|||
|
|
// notFoundContent={''}
|
|||
|
|
// style={{ width: '100%' }}
|
|||
|
|
// value={value || []}
|
|||
|
|
// onChange={handlePostChange}
|
|||
|
|
// >
|
|||
|
|
// {posts.map(renderOption)}
|
|||
|
|
// </Select>
|
|||
|
|
// );
|
|||
|
|
// };
|
|||
|
|
|
|||
|
|
// const PostForm = () => {
|
|||
|
|
// const [form] = Form.useForm();
|
|||
|
|
|
|||
|
|
// const onFinish = (values) => {
|
|||
|
|
// console.log('Received values of form: ', values);
|
|||
|
|
// };
|
|||
|
|
|
|||
|
|
// return (
|
|||
|
|
// <Form
|
|||
|
|
// form={form}
|
|||
|
|
// name="postForm"
|
|||
|
|
// onFinish={onFinish}
|
|||
|
|
// initialValues={{
|
|||
|
|
// postIds: [], // 初始值为空数组
|
|||
|
|
// }}
|
|||
|
|
// >
|
|||
|
|
// <Form.Item
|
|||
|
|
// name="postIds"
|
|||
|
|
// label="选择讲座"
|
|||
|
|
// rules={[{ required: true, message: '请选择至少一个讲座!' }]}
|
|||
|
|
// >
|
|||
|
|
// <PostSelector
|
|||
|
|
// value={form.getFieldValue('postIds')}
|
|||
|
|
// onChange={(selectedIds) => form.setFieldsValue({ postIds: selectedIds })}
|
|||
|
|
// />
|
|||
|
|
// </Form.Item>
|
|||
|
|
|
|||
|
|
// <Form.Item>
|
|||
|
|
// <button type="submit">提交</button>
|
|||
|
|
// </Form.Item>
|
|||
|
|
// </Form>
|
|||
|
|
// );
|
|||
|
|
// };
|
|||
|
|
|
|||
|
|
// export default PostForm;
|