|
|
import React, { useRef } from 'react';
|
|
|
import { history } from 'umi';
|
|
|
import { ProFormInstance, ProFormRadio } from '@ant-design/pro-form';
|
|
|
import ProForm, {
|
|
|
StepsForm,
|
|
|
ProFormText,
|
|
|
ProFormDatePicker,
|
|
|
ProFormSelect,
|
|
|
ProFormTextArea,
|
|
|
ProFormCheckbox,
|
|
|
ProFormDateRangePicker,
|
|
|
} from '@ant-design/pro-form';
|
|
|
import ProCard from '@ant-design/pro-card';
|
|
|
import { Button, Checkbox, Col, Divider, List, Menu, message, Radio, Row, Space, Typography } from 'antd';
|
|
|
import { PageContainer } from '@ant-design/pro-layout';
|
|
|
import ProDescriptions from '@ant-design/pro-descriptions';
|
|
|
import styles from './index.less'
|
|
|
import { MailOutlined, AppstoreOutlined } from '@ant-design/icons';
|
|
|
|
|
|
const waitTime = (time: number = 100) => {
|
|
|
return new Promise((resolve) => {
|
|
|
setTimeout(() => {
|
|
|
resolve(true);
|
|
|
}, time);
|
|
|
});
|
|
|
};
|
|
|
const numbers = [];
|
|
|
for(let i=0;i<50;i++){
|
|
|
numbers.push({id: `${i}`})
|
|
|
}
|
|
|
export default () => {
|
|
|
const formRef = useRef<ProFormInstance>();
|
|
|
|
|
|
return (
|
|
|
<PageContainer content={''} extraContent={''}>
|
|
|
<ProCard className={styles.examinationrules}>
|
|
|
<StepsForm<{
|
|
|
name: string;
|
|
|
}>
|
|
|
formRef={formRef}
|
|
|
onFinish={async () => {
|
|
|
await waitTime(1000);
|
|
|
message.success('提交成功');
|
|
|
}}
|
|
|
formProps={{
|
|
|
layout: "horizontal",
|
|
|
labelCol: { span: 8 },
|
|
|
wrapperCol: { span: 12 },
|
|
|
validateMessages: {
|
|
|
required: '此项为必填项',
|
|
|
},
|
|
|
}}
|
|
|
>
|
|
|
<StepsForm.StepForm<{
|
|
|
name: string;
|
|
|
}>
|
|
|
name="base"
|
|
|
title="模拟考试基本信息"
|
|
|
stepProps={{
|
|
|
description: false,
|
|
|
}}
|
|
|
onFinish={async () => {
|
|
|
console.log(formRef.current?.getFieldsValue());
|
|
|
await waitTime(2000);
|
|
|
return true;
|
|
|
}}
|
|
|
>
|
|
|
<Row gutter={24}>
|
|
|
<Col lg={24} md={24} sm={24}>
|
|
|
<ProFormText
|
|
|
name="name"
|
|
|
label="考试名称"
|
|
|
width="md"
|
|
|
// tooltip="最长为 6 位汉字，需要与考生身份证一致"
|
|
|
placeholder="请输入名称"
|
|
|
// rules={[{ required: true }]}
|
|
|
// value="锦书"
|
|
|
// disabled
|
|
|
/>
|
|
|
|
|
|
<ProFormSelect
|
|
|
width="md"
|
|
|
options={[
|
|
|
{
|
|
|
value: '1',
|
|
|
label: '主题1',
|
|
|
},
|
|
|
{
|
|
|
value: '2',
|
|
|
label: '主题3',
|
|
|
},
|
|
|
]}
|
|
|
name="unusedMode"
|
|
|
label="关联主题"
|
|
|
/>
|
|
|
<ProFormText name="time" label="考试时长" tooltip="限制考试时长的情况下，用户考试中离开，倒计时不会停止。"/>
|
|
|
|
|
|
</Col>
|
|
|
</Row>
|
|
|
|
|
|
</StepsForm.StepForm>
|
|
|
|
|
|
<StepsForm.StepForm<{
|
|
|
checkbox: string;
|
|
|
}>
|
|
|
name="object"
|
|
|
title="组卷"
|
|
|
stepProps={{
|
|
|
description: false,
|
|
|
}}
|
|
|
onFinish={async () => {
|
|
|
console.log(formRef.current?.getFieldsValue());
|
|
|
return true;
|
|
|
}}
|
|
|
>
|
|
|
<div style={{margin:'0'}}>
|
|
|
<Typography style={{padding:24, fontSize: 24, textAlign: 'center'}}>生涯规划师初级认证考试</Typography>
|
|
|
{/** 一旦录入另一项将禁用，清空组卷后可选另一项 */}
|
|
|
<Radio.Group value={1} onChange={()=>{}} style={{ marginBottom: 16 }}>
|
|
|
<Radio.Button value={1}>手动组卷</Radio.Button>
|
|
|
<Radio.Button value={2}>系统组卷</Radio.Button>
|
|
|
</Radio.Group>
|
|
|
<Divider style={{margin:'6px 0', opacity: 0.5}}/>
|
|
|
<Row>
|
|
|
<Col span={18} style={{background:'#ffffff', padding:0}}>
|
|
|
<ProCard
|
|
|
title="一. 单选题 （共50分，每题1分）"
|
|
|
extra={false}
|
|
|
split='vertical'
|
|
|
bordered
|
|
|
headerBordered
|
|
|
>
|
|
|
<Space direction="vertical" style={{width:'100%', padding: '24px 48px'}}>
|
|
|
|
|
|
<Typography style={{marginBottom:16, fontSize:18}}>
|
|
|
4. 以下哪些是符合法律规定的 ？
|
|
|
</Typography>
|
|
|
<Radio.Group onChange={()=>{return true}} value={0} size="large">
|
|
|
<Space direction="vertical" style={{fontSize:16}}>
|
|
|
<Radio value={1} style={{padding:5, fontSize:16}}>A. 单位在试用期辞退员工</Radio>
|
|
|
<Radio value={2} style={{padding:5, fontSize:16}}>B. 社会中介收取中介费</Radio>
|
|
|
<Radio value={3} style={{padding:5, fontSize:16}}>C. 单位不缴纳五险一金</Radio>
|
|
|
<Radio value={4} style={{padding:5, fontSize:16}}>D. 要求员工支付押金</Radio>
|
|
|
</Space>
|
|
|
</Radio.Group>
|
|
|
|
|
|
<Typography style={{marginBottom:16, fontSize:18}}>
|
|
|
5. 以下哪些是不符合法律规定的(多选) ？
|
|
|
</Typography>
|
|
|
<Checkbox.Group onChange={()=>{return true}}>
|
|
|
<Space direction="vertical" style={{}}>
|
|
|
<Checkbox value={1} style={{padding:5, fontSize:16}}>A. 单位在试用期辞退员工</Checkbox>
|
|
|
<Checkbox value={2} style={{padding:5, fontSize:16}}>B. 社会中介收取中介费</Checkbox>
|
|
|
<Checkbox value={3} style={{padding:5, fontSize:16}}>C. 单位不缴纳五险一金</Checkbox>
|
|
|
<Checkbox value={4} style={{padding:5, fontSize:16}}>D. 要求员工支付押金</Checkbox>
|
|
|
</Space>
|
|
|
</Checkbox.Group>
|
|
|
|
|
|
<Typography style={{marginBottom:16, fontSize:18}}>
|
|
|
6. 单位在试用期辞退员工是符合法律规定的 ？
|
|
|
</Typography>
|
|
|
<Radio.Group onChange={()=>{return true}} value={0} size="large">
|
|
|
<Space direction="vertical" style={{fontSize:16}}>
|
|
|
<Radio value={1} style={{padding:5, fontSize:16}}>正确</Radio>
|
|
|
<Radio value={2} style={{padding:5, fontSize:16}}>错误</Radio>
|
|
|
</Space>
|
|
|
</Radio.Group>
|
|
|
</Space>
|
|
|
</ProCard>
|
|
|
</Col>
|
|
|
<Col span={6} style={{paddingLeft:24}}>
|
|
|
<div style={{background:'#ffffff', padding:24}}>
|
|
|
<Space direction="vertical" style={{width:'100%'}}>
|
|
|
<strong>试卷信息与设置</strong>
|
|
|
<Typography>共 {} 题 {} 分</Typography>
|
|
|
<Divider style={{margin:'6px 0', opacity: 0.5}}/>
|
|
|
<Space direction="vertical">
|
|
|
<Typography>单选题 共 {} 题 {} 分</Typography>
|
|
|
<Typography>多选题 共 {} 题 {} 分</Typography>
|
|
|
<Typography>判断题 共 {} 题 {} 分</Typography>
|
|
|
</Space>
|
|
|
<Divider style={{margin:'6px 0', opacity: 0.5}}/>
|
|
|
<Button size="large" block>选择试题</Button>
|
|
|
<Button size="large" type="primary" block>保存试卷</Button>
|
|
|
</Space>
|
|
|
</div>
|
|
|
</Col>
|
|
|
</Row>
|
|
|
</div>
|
|
|
</StepsForm.StepForm>
|
|
|
|
|
|
<StepsForm.StepForm
|
|
|
name="time"
|
|
|
title="完成"
|
|
|
stepProps={{
|
|
|
description: false,
|
|
|
}}
|
|
|
onFinish={async () => {
|
|
|
console.log(formRef.current?.getFieldsValue());
|
|
|
// 跳转到指定路由
|
|
|
history.push('/examinationrules/normal');
|
|
|
return true;
|
|
|
}}
|
|
|
>
|
|
|
|
|
|
<Row gutter={24}>
|
|
|
<Col lg={12} md={12} sm={12} offset={8}>
|
|
|
<ProDescriptions
|
|
|
layout='horizontal'
|
|
|
column={1}
|
|
|
//actionRef={actionRef}
|
|
|
title="模拟考试"
|
|
|
request={async () => {
|
|
|
return Promise.resolve({
|
|
|
success: true,
|
|
|
data: { id: '这是一段文本', object:'', date: '2020-07-30 08:00', duration:'', grade:100, through:'>60', learn: '>20 min', times: 2 },
|
|
|
});
|
|
|
}}
|
|
|
extra={false}
|
|
|
>
|
|
|
<ProDescriptions.Item dataIndex="id" hideInDescriptions />
|
|
|
<ProDescriptions.Item dataIndex="object" label="考试名称" valueType="text" />
|
|
|
<ProDescriptions.Item dataIndex="date" label="关联培训主题" valueType="text" />
|
|
|
<ProDescriptions.Item dataIndex="duration" label="考试时长" valueType="text" />
|
|
|
|
|
|
<ProDescriptions.Item dataIndex="grade" label="考试信息" valueType="text" />
|
|
|
|
|
|
<ProDescriptions.Item dataIndex="through" label="通过标准" valueType="text" />
|
|
|
<ProDescriptions.Item dataIndex="times" label="考试次数" valueType="text" />
|
|
|
</ProDescriptions>
|
|
|
</Col>
|
|
|
</Row>
|
|
|
</StepsForm.StepForm>
|
|
|
</StepsForm>
|
|
|
</ProCard>
|
|
|
</PageContainer>
|
|
|
|
|
|
);
|
|
|
}; |
