235 lines
9.7 KiB
JavaScript
235 lines
9.7 KiB
JavaScript
import React, { Fragment } from 'react';
|
||
import { Modal, Tooltip } from 'antd';
|
||
import { letterList, judgeList } from '../../constant';
|
||
import './index.less';
|
||
export default function RepeatContentBox(props) {
|
||
const { isShowModalBox, repeatInfo, repeatQuestionsType } = props;
|
||
// const { isShowModalBox, repeatQuestionsType } = props;
|
||
// const repeatInfo = {
|
||
// repeatSubjectName:
|
||
// 'Chrome如Chrome如何支持小于12px的字？Chrome如何支持小于12px的字？Chrome如何支持小于12px的字？Chrome如何支持小于12px的字？何支持小于12px的字？',
|
||
// repeatSubjectAnswe:
|
||
// 'Chrome如何支持小于12px的字？Chrome如何支持小于12px的字？Chrome如何支持小于12px的字？Chrome如何支持小于12px的字？Chrome如何支持小于12px的字？Chrome如何支持小于12px的字？',
|
||
// repeatSetterErp: 'suchunping3',
|
||
// repeatSetterName: '苏春萍',
|
||
// };
|
||
|
||
// const repeatInfo = {
|
||
// repeatSubjectName:
|
||
// 'Chrome如Chrome如何支持小于12px的字？Chrome如何支持小于12px的字？Chrome如何支持小于12px的字？Chrome如何支持小于12px的字？何支持小于12px的字？',
|
||
// repeatOptionList: [
|
||
// {
|
||
// isCorrect: '',
|
||
// optionContent: 'Chrome如何支持小于12px的字？Chrome如何支持小于12px的',
|
||
// optionType: 1,
|
||
// },
|
||
// {
|
||
// isCorrect: '',
|
||
// optionContent: 'Chrome如何支持小于12px的字？Chrome如何支持小于12px的',
|
||
// optionType: 2,
|
||
// },
|
||
// {
|
||
// isCorrect: 1,
|
||
// optionContent: 'Chrome如何支持小于12px的字？Chrome如何支持小于12px的',
|
||
// optionType: 3,
|
||
// },
|
||
// ],
|
||
// repeatSetterErp: 'suchunping3',
|
||
// repeatSetterName: '苏春萍',
|
||
// };
|
||
/**
|
||
* 确认录入
|
||
*/
|
||
const onSubmitRepeatModal = (e) => {
|
||
props.handleSubmitRepeatModal && props.handleSubmitRepeatModal();
|
||
};
|
||
/**
|
||
* 取消录入
|
||
*/
|
||
const onCancelRepeatModal = () => {
|
||
props.handleCancelRepeatModal && props.handleCancelRepeatModal();
|
||
};
|
||
|
||
const renderRepeat = (type, repeatInfo) => {
|
||
switch (type) {
|
||
case 1:
|
||
return renderBriefQuestions(repeatInfo);
|
||
case 2:
|
||
case 3:
|
||
return renderSelectQuestions(type, repeatInfo);
|
||
case 4:
|
||
return renderJudgeQuestions(repeatInfo);
|
||
}
|
||
};
|
||
|
||
/**
|
||
* 展示重复内容-问答型
|
||
* @returns
|
||
*/
|
||
const renderBriefQuestions = (repeatInfo) => {
|
||
return (
|
||
<div className="repeat-content-box">
|
||
<div className="repeat-subject-box">
|
||
<div className="repeat-subject-title">问答题</div>
|
||
<div className="repeat-subject-text">{repeatInfo.repeatSubjectName}</div>
|
||
</div>
|
||
<div className="repeat-subject-box">
|
||
<div className="repeat-subject-title">参考答案</div>
|
||
<div
|
||
className="repeat-subject-text"
|
||
dangerouslySetInnerHTML={{
|
||
__html: repeatInfo.repeatSubjectAnswe,
|
||
}}></div>
|
||
</div>
|
||
<div className="repeat-subject-box repeat-subject-info-box">
|
||
<div className="repeat-subject-title">来自</div>
|
||
<Tooltip
|
||
title={repeatInfo.repeatSetterErp}
|
||
placement="right"
|
||
style={{ fontSize: 14 }}>
|
||
{repeatInfo.repeatSetterName}
|
||
</Tooltip>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
/**
|
||
* 展示重复内容-单选/多选
|
||
* @returns
|
||
*/
|
||
const renderSelectQuestions = (type, repeatInfo) => {
|
||
// 过滤获得正确选项
|
||
let repeatRightKey = repeatInfo?.repeatOptionList?.filter((item) => item.isCorrect === 1);
|
||
return (
|
||
<div className="repeat-content-box">
|
||
<div className="repeat-subject-box">
|
||
<div className="repeat-subject-title">{type === 2 ? '单选题' : '多选题'}</div>
|
||
<div className="repeat-subject-text">{repeatInfo.repeatSubjectName}</div>
|
||
</div>
|
||
{repeatInfo?.repeatOptionList?.length > 0 && (
|
||
<div className="repeat-subject-box">
|
||
<div className="repeat-subject-title">选项内容</div>
|
||
<div className="repeat-subject-list">
|
||
{repeatInfo.repeatOptionList.map((item, index) => {
|
||
return (
|
||
<div
|
||
className="repeat-subject-item"
|
||
key={`repeat_option_${index}`}>
|
||
{/* <div className="repeat-subject-label">
|
||
{letterList[item.optionType]}
|
||
</div> */}
|
||
<div
|
||
className="repeat-subject-text"
|
||
dangerouslySetInnerHTML={{
|
||
__html: item.optionContent,
|
||
}}></div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
)}
|
||
{repeatRightKey?.length > 0 && (
|
||
<div className="repeat-subject-box">
|
||
<div className="repeat-subject-title">答案</div>
|
||
<div className="repeat-subject-list">
|
||
{repeatRightKey.map((item, index) => {
|
||
return (
|
||
<span key={`repeat_answe_${index}`}>
|
||
{letterList[item.optionType]}{' '}
|
||
</span>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
)}
|
||
{!!repeatInfo.repeatSubjectAnswe && (
|
||
<div className="repeat-subject-box">
|
||
<div className="repeat-subject-title">题目解析</div>
|
||
<div
|
||
className="repeat-subject-text"
|
||
dangerouslySetInnerHTML={{
|
||
__html: repeatInfo.repeatSubjectAnswe,
|
||
}}></div>
|
||
</div>
|
||
)}
|
||
<div className="repeat-subject-box repeat-subject-info-box">
|
||
<div className="repeat-subject-title">来自</div>
|
||
<Tooltip
|
||
title={repeatInfo.repeatSetterErp}
|
||
placement="right"
|
||
style={{ fontSize: 14 }}>
|
||
{repeatInfo.repeatSetterName}
|
||
</Tooltip>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
/**
|
||
* 展示重复内容-判断
|
||
* @returns
|
||
*/
|
||
const renderJudgeQuestions = (repeatInfo) => {
|
||
return (
|
||
<div className="repeat-content-box">
|
||
<div className="repeat-subject-box">
|
||
<div className="repeat-subject-title">判断题</div>
|
||
<div className="repeat-subject-text">{repeatInfo.repeatSubjectName}</div>
|
||
</div>
|
||
<div className="repeat-subject-box">
|
||
<div className="repeat-subject-title">答案</div>
|
||
<div className="repeat-subject-list">
|
||
{judgeList[repeatInfo.repeatIsCorrect]}
|
||
</div>
|
||
</div>
|
||
{!!repeatInfo.repeatSubjectAnswe && (
|
||
<div className="repeat-subject-box">
|
||
<div className="repeat-subject-title">题目解析</div>
|
||
<div
|
||
className="repeat-subject-text"
|
||
dangerouslySetInnerHTML={{
|
||
__html: repeatInfo.repeatSubjectAnswe,
|
||
}}></div>
|
||
</div>
|
||
)}
|
||
<div className="repeat-subject-box repeat-subject-info-box">
|
||
<div className="repeat-subject-title">来自</div>
|
||
<Tooltip
|
||
title={repeatInfo.repeatSetterErp}
|
||
placement="right"
|
||
style={{ fontSize: 14 }}>
|
||
{repeatInfo.repeatSetterName}
|
||
</Tooltip>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
return (
|
||
<Modal
|
||
className="repeat-content-repeat-box"
|
||
visible={isShowModalBox}
|
||
title={
|
||
<Fragment>
|
||
<span
|
||
style={{
|
||
color: 'rgba(60, 110, 238, 0.8)',
|
||
fontSize: 50,
|
||
marginRight: 10,
|
||
}}>
|
||
{repeatInfo.repeatRate || '10%'}
|
||
</span>
|
||
重复率
|
||
</Fragment>
|
||
}
|
||
onOk={onSubmitRepeatModal}
|
||
onCancel={onCancelRepeatModal}
|
||
okText="确认录入"
|
||
cancelText="取消录入">
|
||
{renderRepeat(repeatQuestionsType, repeatInfo)}
|
||
</Modal>
|
||
);
|
||
}
|