parent
5c87f54246
commit
77df9d7c01
@ -0,0 +1,114 @@
|
||||
/** 试题答案选项添加/编辑*/
|
||||
//import { AlignLeftOutlined, PlusOutlined } from '@ant-design/icons';
|
||||
import { Switch, Button, Card, Col, List, Menu, Progress, Row, Typography, Space, Divider, Radio, Checkbox, Tag, Dropdown, Upload, Modal, Form, Input } from 'antd';
|
||||
import { PageContainer } from '@ant-design/pro-layout';
|
||||
//import { useRequest } from 'umi';
|
||||
//import { queryFakeList } from './service';
|
||||
//import type { CardListItemDataType } from './data';
|
||||
import styles from '../style.less';
|
||||
//import SubMenu from 'antd/lib/menu/SubMenu';
|
||||
//import ProCard from '@ant-design/pro-card';
|
||||
import ProList from '@ant-design/pro-list';
|
||||
import { ReactText, useEffect, useRef, useState } from 'react';
|
||||
import { PlusOutlined, DeleteOutlined, DownloadOutlined, UploadOutlined, EditOutlined, EyeOutlined, EyeInvisibleOutlined, DownOutlined, MinusCircleOutlined } from '@ant-design/icons';
|
||||
import { useParams, useRequest, history, useRouteMatch } from 'umi';
|
||||
import { queryCourseView } from '@/pages/course/option/service';
|
||||
import { queryQuestionById, queryQuestionList, queryQuestionType } from '@/pages/questionbank/service';
|
||||
import ProForm, { ProFormSelect } from '@ant-design/pro-form';
|
||||
import ProTable, { ActionType, ProColumns } from '@ant-design/pro-table';
|
||||
|
||||
|
||||
|
||||
//const { Paragraph } = Typography;
|
||||
const formItemLayout = {
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 4 },
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 20 },
|
||||
},
|
||||
};
|
||||
const formItemLayoutWithOutLabel = {
|
||||
wrapperCol: {
|
||||
xs: { span: 24, offset: 0 },
|
||||
sm: { span: 20, offset: 4 },
|
||||
},
|
||||
};
|
||||
console.log('first');
|
||||
const AnswersSelector = () => {
|
||||
|
||||
return (
|
||||
<Form.List
|
||||
name="names"
|
||||
rules={[
|
||||
{
|
||||
validator: async (_, names) => {
|
||||
if (!names || names.length < 2) {
|
||||
return Promise.reject(new Error('At least 2 passengers'));
|
||||
}
|
||||
},
|
||||
},
|
||||
]}
|
||||
>
|
||||
{(fields, { add, remove }, { errors }) => (
|
||||
<>
|
||||
{fields.map((field, index) => (
|
||||
<Form.Item
|
||||
{...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
|
||||
label={index === 0 ? 'Passengers' : ''}
|
||||
required={false}
|
||||
key={field.key}
|
||||
>
|
||||
<Form.Item
|
||||
{...field}
|
||||
validateTrigger={['onChange', 'onBlur']}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
whitespace: true,
|
||||
message: "Please input passenger's name or delete this field.",
|
||||
},
|
||||
]}
|
||||
noStyle
|
||||
>
|
||||
<Input placeholder="passenger name" style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
{fields.length > 1 ? (
|
||||
<MinusCircleOutlined
|
||||
className="dynamic-delete-button"
|
||||
onClick={() => remove(field.name)}
|
||||
/>
|
||||
) : null}
|
||||
</Form.Item>
|
||||
))}
|
||||
<Form.Item>
|
||||
<Button
|
||||
type="dashed"
|
||||
onClick={() => add()}
|
||||
style={{ width: '60%' }}
|
||||
icon={<PlusOutlined />}
|
||||
>
|
||||
Add field
|
||||
</Button>
|
||||
<Button
|
||||
type="dashed"
|
||||
onClick={() => {
|
||||
add('The head item', 0);
|
||||
}}
|
||||
style={{ width: '60%', marginTop: '20px' }}
|
||||
icon={<PlusOutlined />}
|
||||
>
|
||||
Add field at head
|
||||
</Button>
|
||||
<Form.ErrorList errors={errors} />
|
||||
</Form.Item>
|
||||
</>
|
||||
)}
|
||||
</Form.List>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
export default AnswersSelector;
|
||||
Loading…
Reference in new issue