feat: 增加练题
This commit is contained in:
秋水浮尘
@@ -1,341 +1,341 @@
|
||||
import React, { Component, Fragment, createRef } from 'react';
|
||||
import { Input, Modal, message, Spin } from 'antd';
|
||||
import { Input, Modal, message } from 'antd'
|
||||
import React, { Component, Fragment, createRef } from 'react'
|
||||
|
||||
import req from '@utils/request';
|
||||
import { debounce } from '@utils';
|
||||
import KindEditor from '../kind-editor';
|
||||
import RankLabelBox from '../rank-label-box';
|
||||
import RepeatContentBox from '../repeat-content-box';
|
||||
import { apiName } from '../../constant';
|
||||
import { debounce } from '@utils'
|
||||
import req from '@utils/request'
|
||||
import { apiName } from '../../constant'
|
||||
import QuestionEditor from '../question-editor'
|
||||
import './index.less';
|
||||
import RankLabelBox from '../rank-label-box'
|
||||
import RepeatContentBox from '../repeat-content-box'
|
||||
import './index.less'
|
||||
|
||||
export default class BriefQuestions extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
subjectName: '', // 题目
|
||||
isDisabledSubmit: true, //是否禁止输入
|
||||
isShowModalBox: false, // 是否展示重复率弹框
|
||||
isSubmit: true, // 是否支持提交
|
||||
};
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
subjectName: '', // 题目
|
||||
isDisabledSubmit: true, //是否禁止输入
|
||||
isShowModalBox: false, // 是否展示重复率弹框
|
||||
isSubmit: true // 是否支持提交
|
||||
}
|
||||
kindEditor = createRef();
|
||||
rankLabelBox = createRef();
|
||||
rankId = 1; //职级
|
||||
subjectAnswer = ''; // 答案
|
||||
firstCategoryValue = ''; // 一级分类的值
|
||||
secondCategoryValue = []; // 二级分类的值
|
||||
thirdCategoryValue = []; // 三级标签的值
|
||||
repeatInfo = {}; // 重复率
|
||||
}
|
||||
kindEditor = createRef()
|
||||
rankLabelBox = createRef()
|
||||
rankId = 1 //职级
|
||||
subjectAnswer = '' // 答案
|
||||
firstCategoryValue = '' // 一级分类的值
|
||||
secondCategoryValue = [] // 二级分类的值
|
||||
thirdCategoryValue = [] // 三级标签的值
|
||||
repeatInfo = {} // 重复率
|
||||
|
||||
/**
|
||||
* 输入题目
|
||||
* @param {*} e
|
||||
*/
|
||||
onChangeSubjectName = (e) => {
|
||||
let str = e.target.value.trim();
|
||||
this.setState(
|
||||
{
|
||||
subjectName: str,
|
||||
},
|
||||
() => {
|
||||
// this.rankLabelBox.getThirdCategoryList();
|
||||
let isDisabledSubmit = this.checkData();
|
||||
this.setState({
|
||||
isDisabledSubmit,
|
||||
});
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* 富文本编辑器
|
||||
* @param {*} e
|
||||
*/
|
||||
onChangeEditor = (e) => {
|
||||
this.subjectAnswer = e;
|
||||
let isDisabledSubmit = this.checkData();
|
||||
/**
|
||||
* 输入题目
|
||||
* @param {*} e
|
||||
*/
|
||||
onChangeSubjectName = e => {
|
||||
let str = e.target.value.trim()
|
||||
this.setState(
|
||||
{
|
||||
subjectName: str
|
||||
},
|
||||
() => {
|
||||
// this.rankLabelBox.getThirdCategoryList();
|
||||
let isDisabledSubmit = this.checkData()
|
||||
this.setState({
|
||||
isDisabledSubmit,
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 一次确认录入
|
||||
*/
|
||||
onSubmit = debounce(() => {
|
||||
console.log(this.rankId)
|
||||
const { subjectName, isDisabledSubmit, isSubmit } = this.state;
|
||||
if (isDisabledSubmit || !isSubmit) {
|
||||
return;
|
||||
}
|
||||
if (!isSubmit) {
|
||||
return;
|
||||
}
|
||||
if (!!!subjectName) {
|
||||
message.warning('请输入题目名称');
|
||||
return;
|
||||
}
|
||||
if (!!!this.subjectAnswer) {
|
||||
message.warning('请输入题目答案');
|
||||
return;
|
||||
}
|
||||
if (!!!this.firstCategoryValue) {
|
||||
message.warning('请选择一级分类');
|
||||
return;
|
||||
}
|
||||
if (this.secondCategoryValue.length <= 0) {
|
||||
message.warning('请选择二级分类');
|
||||
return;
|
||||
}
|
||||
if (this.thirdCategoryValue.length <= 0) {
|
||||
message.warning('请选择三级标签');
|
||||
return;
|
||||
}
|
||||
this.setState({
|
||||
isSubmit: false,
|
||||
});
|
||||
let params = {
|
||||
subjectName: subjectName,
|
||||
subjectDifficult: this.rankId,
|
||||
subjectType: 4,
|
||||
subjectScore: 1,
|
||||
subjectParse: '解析什么',
|
||||
subjectAnswer: this.subjectAnswer,
|
||||
categoryIds: this.secondCategoryValue.filter(item => item.active).map(t => t.id),
|
||||
labelIds: this.thirdCategoryValue.filter(item => item.active).map(t => t.id),
|
||||
};
|
||||
req({
|
||||
method: 'post',
|
||||
data: params,
|
||||
url: apiName.add,
|
||||
isDisabledSubmit
|
||||
})
|
||||
.then((res) => {
|
||||
this.setState({
|
||||
isSubmit: true,
|
||||
}, () => {
|
||||
this.successModalConfirm();
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
this.setState({
|
||||
isSubmit: true,
|
||||
});
|
||||
console.log(err);
|
||||
});
|
||||
});
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 校验是否支持点击按钮
|
||||
* @returns
|
||||
*/
|
||||
checkData = () => {
|
||||
const { subjectName } = this.state;
|
||||
let isDisabledSubmit = false;
|
||||
if (
|
||||
!!!subjectName ||
|
||||
!!!this.subjectAnswer ||
|
||||
!!!this.firstCategoryValue ||
|
||||
this.secondCategoryValue.length <= 0
|
||||
// ||
|
||||
// this.thirdCategoryValue.length <= 0
|
||||
) {
|
||||
isDisabledSubmit = true;
|
||||
}
|
||||
return isDisabledSubmit;
|
||||
};
|
||||
/**
|
||||
* 富文本编辑器
|
||||
* @param {*} e
|
||||
*/
|
||||
onChangeEditor = e => {
|
||||
this.subjectAnswer = e
|
||||
let isDisabledSubmit = this.checkData()
|
||||
this.setState({
|
||||
isDisabledSubmit
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 取消
|
||||
*/
|
||||
onCancel = () => {
|
||||
console.log(this.kindEditor)
|
||||
this.subjectAnswer = ''; // 答案
|
||||
this.rankId = 1;
|
||||
this.firstCategoryValue = '';
|
||||
this.secondCategoryValue = [];
|
||||
this.thirdCategoryValue = [];
|
||||
this.repeatInfo = {};
|
||||
this.kindEditor.current.onClear();
|
||||
this.rankLabelBox.current.initRankLabel();
|
||||
this.setState({
|
||||
subjectName: '',
|
||||
isShowModalBox: false,
|
||||
isSubmit: true, // 是否支持提交
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 重复率弹框-确认录入
|
||||
*/
|
||||
onSubmitRepeatModal = debounce(
|
||||
() => {
|
||||
let params = {
|
||||
docId: this.repeatInfo.repeatDocId,
|
||||
};
|
||||
req({
|
||||
method: 'post',
|
||||
data: params,
|
||||
url: apiName.addRepeatInterviewSubject,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.data) {
|
||||
this.successModalConfirm();
|
||||
} else {
|
||||
message.info('请再次确认');
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
message.error('请再次确认');
|
||||
});
|
||||
},
|
||||
300,
|
||||
true
|
||||
);
|
||||
|
||||
/**
|
||||
* 重复率弹框-取消录入
|
||||
*/
|
||||
onCancelRepeatModal = () => {
|
||||
this.repeatInfo = {};
|
||||
this.setState({
|
||||
isShowModalBox: false,
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 录入成功的弹框
|
||||
*/
|
||||
successModalConfirm = () => {
|
||||
Modal.confirm({
|
||||
title: (
|
||||
<div
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
color: 'rgba(60, 110, 238, 1)',
|
||||
fontSize: 16,
|
||||
}}>
|
||||
录入成功！贡献榜火力值 + 1
|
||||
</div>
|
||||
),
|
||||
closable: false,
|
||||
maskClosable: false,
|
||||
icon: ' ',
|
||||
onOk: this.onAgainSuccessModal,
|
||||
onCancel: this.onGoHomeSuccessModal,
|
||||
okText: '再录一题',
|
||||
cancelText: '去首页',
|
||||
className: 'questions-success-modal-confirm',
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 录入成功弹框-再来一题
|
||||
*/
|
||||
onAgainSuccessModal = () => {
|
||||
this.onCancel();
|
||||
};
|
||||
|
||||
/**
|
||||
* 录入成功弹框-去首页
|
||||
*/
|
||||
onGoHomeSuccessModal = () => {
|
||||
window.location.href = '/question-bank';
|
||||
};
|
||||
|
||||
/**
|
||||
* 分类选择
|
||||
* @param {*} e
|
||||
*/
|
||||
onChangeRankLabel = (firstCategoryValue, secondCategoryValue, thirdCategoryValue) => {
|
||||
this.firstCategoryValue = firstCategoryValue; // 一级分类的值
|
||||
this.secondCategoryValue = secondCategoryValue; // 二级分类的值
|
||||
this.thirdCategoryValue = thirdCategoryValue; // 三级标签的值
|
||||
let isDisabledSubmit = this.checkData();
|
||||
this.setState({
|
||||
isDisabledSubmit,
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 职级选择
|
||||
* @param {*} list
|
||||
*/
|
||||
handleChangeRank = (list) => {
|
||||
this.rankId = list[0].categoryId;
|
||||
let isDisabledSubmit = this.checkData();
|
||||
this.setState({
|
||||
isDisabledSubmit,
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { subjectName, isDisabledSubmit, isSubmit, isShowModalBox } = this.state;
|
||||
const { questionsType } = this.props;
|
||||
// this.successModalConfirm();
|
||||
|
||||
return (
|
||||
<Spin spinning={!isSubmit}>
|
||||
<Fragment>
|
||||
<div className="brief-questions-container">
|
||||
<div className="brief-questions-title">题目名称：</div>
|
||||
<div className="brief-questions-main">
|
||||
<Input
|
||||
placeholder="输入题目"
|
||||
className="brief-questions-input"
|
||||
value={subjectName}
|
||||
maxLength={64}
|
||||
onChange={this.onChangeSubjectName}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="brief-questions-container">
|
||||
<div className="brief-questions-title">题目答案：</div>
|
||||
{this.reanderAnser()}
|
||||
</div>
|
||||
<RankLabelBox
|
||||
subjectName={subjectName}
|
||||
onChangeRankLabel={this.onChangeRankLabel}
|
||||
handleChangeRank={this.handleChangeRank}
|
||||
ref={this.rankLabelBox}
|
||||
/>
|
||||
<div className="brief-questions-btns-container">
|
||||
<div className="brief-questions-btn" onClick={this.onCancel}>
|
||||
清空
|
||||
</div>
|
||||
<div
|
||||
className={`brief-questions-btn brief-questions-submit ${isDisabledSubmit && 'brief-questions-disabled-submit'
|
||||
}`}
|
||||
onClick={this.onSubmit}>
|
||||
提交
|
||||
</div>
|
||||
</div>
|
||||
<RepeatContentBox
|
||||
isShowModalBox={isShowModalBox}
|
||||
repeatQuestionsType={questionsType}
|
||||
repeatInfo={this.repeatInfo}
|
||||
handleSubmitRepeatModal={this.onSubmitRepeatModal}
|
||||
handleCancelRepeatModal={this.onCancelRepeatModal}
|
||||
/>
|
||||
</Fragment>
|
||||
</Spin>
|
||||
);
|
||||
/**
|
||||
* 一次确认录入
|
||||
*/
|
||||
onSubmit = debounce(() => {
|
||||
console.log(this.rankId)
|
||||
const { subjectName, isDisabledSubmit, isSubmit } = this.state
|
||||
if (isDisabledSubmit || !isSubmit) {
|
||||
return
|
||||
}
|
||||
if (!isSubmit) {
|
||||
return
|
||||
}
|
||||
if (!!!subjectName) {
|
||||
message.warning('请输入题目名称')
|
||||
return
|
||||
}
|
||||
if (!!!this.subjectAnswer) {
|
||||
message.warning('请输入题目答案')
|
||||
return
|
||||
}
|
||||
if (!!!this.firstCategoryValue) {
|
||||
message.warning('请选择一级分类')
|
||||
return
|
||||
}
|
||||
if (this.secondCategoryValue.length <= 0) {
|
||||
message.warning('请选择二级分类')
|
||||
return
|
||||
}
|
||||
if (this.thirdCategoryValue.length <= 0) {
|
||||
message.warning('请选择三级标签')
|
||||
return
|
||||
}
|
||||
this.setState({
|
||||
isSubmit: false
|
||||
})
|
||||
let params = {
|
||||
subjectName: subjectName,
|
||||
subjectDifficult: this.rankId,
|
||||
subjectType: 4,
|
||||
subjectScore: 1,
|
||||
subjectParse: '解析什么',
|
||||
subjectAnswer: this.subjectAnswer,
|
||||
categoryIds: this.secondCategoryValue.filter(item => item.active).map(t => t.id),
|
||||
labelIds: this.thirdCategoryValue.filter(item => item.active).map(t => t.id)
|
||||
}
|
||||
req({
|
||||
method: 'post',
|
||||
data: params,
|
||||
url: apiName.add
|
||||
})
|
||||
.then(res => {
|
||||
this.setState(
|
||||
{
|
||||
isSubmit: true
|
||||
},
|
||||
() => {
|
||||
this.successModalConfirm()
|
||||
}
|
||||
)
|
||||
})
|
||||
.catch(err => {
|
||||
this.setState({
|
||||
isSubmit: true
|
||||
})
|
||||
console.log(err)
|
||||
})
|
||||
})
|
||||
|
||||
/**
|
||||
* 问答题-答案
|
||||
*/
|
||||
reanderAnser = () => {
|
||||
return (
|
||||
<div className="brief-questions-main">
|
||||
<QuestionEditor
|
||||
onChange={this.onChangeEditor}
|
||||
ref={this.kindEditor}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
/**
|
||||
* 校验是否支持点击按钮
|
||||
* @returns
|
||||
*/
|
||||
checkData = () => {
|
||||
const { subjectName } = this.state
|
||||
let isDisabledSubmit = false
|
||||
if (
|
||||
!!!subjectName ||
|
||||
!!!this.subjectAnswer ||
|
||||
!!!this.firstCategoryValue ||
|
||||
this.secondCategoryValue.length <= 0
|
||||
// ||
|
||||
// this.thirdCategoryValue.length <= 0
|
||||
) {
|
||||
isDisabledSubmit = true
|
||||
}
|
||||
return isDisabledSubmit
|
||||
}
|
||||
|
||||
/**
|
||||
* 取消
|
||||
*/
|
||||
onCancel = () => {
|
||||
this.subjectAnswer = '' // 答案
|
||||
this.rankId = 1
|
||||
this.firstCategoryValue = ''
|
||||
this.secondCategoryValue = []
|
||||
this.thirdCategoryValue = []
|
||||
this.repeatInfo = {}
|
||||
this.kindEditor.current.onClear()
|
||||
this.rankLabelBox.current.initRankLabel()
|
||||
this.setState({
|
||||
subjectName: '',
|
||||
isShowModalBox: false,
|
||||
isSubmit: true // 是否支持提交
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 重复率弹框-确认录入
|
||||
*/
|
||||
onSubmitRepeatModal = debounce(
|
||||
() => {
|
||||
let params = {
|
||||
docId: this.repeatInfo.repeatDocId
|
||||
}
|
||||
req({
|
||||
method: 'post',
|
||||
data: params,
|
||||
url: apiName.addRepeatInterviewSubject
|
||||
})
|
||||
.then(res => {
|
||||
if (res.data) {
|
||||
this.successModalConfirm()
|
||||
} else {
|
||||
message.info('请再次确认')
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
message.error('请再次确认')
|
||||
})
|
||||
},
|
||||
300,
|
||||
true
|
||||
)
|
||||
|
||||
/**
|
||||
* 重复率弹框-取消录入
|
||||
*/
|
||||
onCancelRepeatModal = () => {
|
||||
this.repeatInfo = {}
|
||||
this.setState({
|
||||
isShowModalBox: false
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 录入成功的弹框
|
||||
*/
|
||||
successModalConfirm = () => {
|
||||
Modal.confirm({
|
||||
title: (
|
||||
<div
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
color: 'rgba(60, 110, 238, 1)',
|
||||
fontSize: 16
|
||||
}}
|
||||
>
|
||||
录入成功！贡献榜火力值 + 1
|
||||
</div>
|
||||
),
|
||||
closable: false,
|
||||
maskClosable: false,
|
||||
icon: ' ',
|
||||
onOk: this.onAgainSuccessModal,
|
||||
onCancel: this.onGoHomeSuccessModal,
|
||||
okText: '再录一题',
|
||||
cancelText: '去首页',
|
||||
className: 'questions-success-modal-confirm'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 录入成功弹框-再来一题
|
||||
*/
|
||||
onAgainSuccessModal = () => {
|
||||
this.onCancel()
|
||||
}
|
||||
|
||||
/**
|
||||
* 录入成功弹框-去首页
|
||||
*/
|
||||
onGoHomeSuccessModal = () => {
|
||||
window.location.href = '/question-bank'
|
||||
}
|
||||
|
||||
/**
|
||||
* 分类选择
|
||||
* @param {*} e
|
||||
*/
|
||||
onChangeRankLabel = (firstCategoryValue, secondCategoryValue, thirdCategoryValue) => {
|
||||
this.firstCategoryValue = firstCategoryValue // 一级分类的值
|
||||
this.secondCategoryValue = secondCategoryValue // 二级分类的值
|
||||
this.thirdCategoryValue = thirdCategoryValue // 三级标签的值
|
||||
let isDisabledSubmit = this.checkData()
|
||||
this.setState({
|
||||
isDisabledSubmit
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 职级选择
|
||||
* @param {*} list
|
||||
*/
|
||||
handleChangeRank = list => {
|
||||
this.rankId = list[0].categoryId
|
||||
let isDisabledSubmit = this.checkData()
|
||||
this.setState({
|
||||
isDisabledSubmit
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
const { subjectName, isDisabledSubmit, isSubmit, isShowModalBox } = this.state
|
||||
const { questionsType } = this.props
|
||||
// this.successModalConfirm();
|
||||
|
||||
return (
|
||||
// <Spin spinning={!isSubmit}>
|
||||
<Fragment>
|
||||
<div className='brief-questions-container'>
|
||||
<div className='brief-questions-title'>题目名称：</div>
|
||||
<div className='brief-questions-main'>
|
||||
<Input
|
||||
placeholder='输入题目'
|
||||
className='brief-questions-input'
|
||||
value={subjectName}
|
||||
maxLength={64}
|
||||
onChange={this.onChangeSubjectName}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='brief-questions-container'>
|
||||
<div className='brief-questions-title'>题目答案：</div>
|
||||
{this.reanderAnser()}
|
||||
</div>
|
||||
<RankLabelBox
|
||||
subjectName={subjectName}
|
||||
onChangeRankLabel={this.onChangeRankLabel}
|
||||
handleChangeRank={this.handleChangeRank}
|
||||
ref={this.rankLabelBox}
|
||||
/>
|
||||
<div className='brief-questions-btns-container'>
|
||||
<div className='brief-questions-btn' onClick={this.onCancel}>
|
||||
清空
|
||||
</div>
|
||||
<div
|
||||
className={`brief-questions-btn brief-questions-submit ${
|
||||
isDisabledSubmit && 'brief-questions-disabled-submit'
|
||||
}`}
|
||||
onClick={this.onSubmit}
|
||||
>
|
||||
提交
|
||||
</div>
|
||||
</div>
|
||||
<RepeatContentBox
|
||||
isShowModalBox={isShowModalBox}
|
||||
repeatQuestionsType={questionsType}
|
||||
repeatInfo={this.repeatInfo}
|
||||
handleSubmitRepeatModal={this.onSubmitRepeatModal}
|
||||
handleCancelRepeatModal={this.onCancelRepeatModal}
|
||||
/>
|
||||
</Fragment>
|
||||
// {/* </Spin> */}
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 问答题-答案
|
||||
*/
|
||||
reanderAnser = () => {
|
||||
return (
|
||||
<div className='brief-questions-main'>
|
||||
<QuestionEditor onChange={this.onChangeEditor} ref={this.kindEditor} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,327 +1,312 @@
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import { Input, Modal, message, Spin } from 'antd';
|
||||
import req from '@utils/request';
|
||||
import { debounce } from '@utils';
|
||||
import RankLabelBox from '../rank-label-box';
|
||||
import OptionInputBox from '../option-input-box';
|
||||
import RepeatContentBox from '../repeat-content-box';
|
||||
import { apiName } from '../../constant';
|
||||
import './index.less';
|
||||
import { debounce } from '@utils'
|
||||
import req from '@utils/request'
|
||||
import { Input, Modal, Spin, message } from 'antd'
|
||||
import React, { Component, Fragment, createRef } from 'react'
|
||||
import { apiName } from '../../constant'
|
||||
import OptionInputBox from '../option-input-box'
|
||||
import RankLabelBox from '../rank-label-box'
|
||||
import RepeatContentBox from '../repeat-content-box'
|
||||
import './index.less'
|
||||
export default class JudgeQuestions extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
subjectName: '', // 题目
|
||||
isDisabledSubmit: true, //是否禁止输入
|
||||
isShowModalBox: false, // 是否展示重复率弹框
|
||||
isSubmit: true, // 是否支持提交
|
||||
};
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
subjectName: '', // 题目
|
||||
isDisabledSubmit: true, //是否禁止输入
|
||||
isShowModalBox: false, // 是否展示重复率弹框
|
||||
isSubmit: true // 是否支持提交
|
||||
}
|
||||
rankLabelBox = RankLabelBox | null;
|
||||
optionInputBox = OptionInputBox | null;
|
||||
currentActive = []; // 当前选中的项
|
||||
scoreValue = ''; // 分数
|
||||
subjectAnalysis = ''; //试题解析
|
||||
rankId = 1; //职级
|
||||
firstCategoryValue = ''; // 一级分类的值
|
||||
secondCategoryValue = []; // 二级分类的值
|
||||
thirdCategoryValue = []; // 三级标签的值
|
||||
repeatInfo = {}; // 重复率
|
||||
}
|
||||
// rankLabelBox = RankLabelBox | null
|
||||
rankLabelBox = createRef()
|
||||
optionInputBox = OptionInputBox | null
|
||||
currentActive = [] // 当前选中的项
|
||||
scoreValue = '' // 分数
|
||||
subjectAnalysis = '' //试题解析
|
||||
rankId = 1 //职级
|
||||
firstCategoryValue = '' // 一级分类的值
|
||||
secondCategoryValue = [] // 二级分类的值
|
||||
thirdCategoryValue = [] // 三级标签的值
|
||||
repeatInfo = {} // 重复率
|
||||
|
||||
/**
|
||||
* 输入题目
|
||||
* @param {*} e
|
||||
*/
|
||||
onChangeSubjectName = (e) => {
|
||||
let str = e.target.value.trim();
|
||||
this.setState(
|
||||
{
|
||||
subjectName: str,
|
||||
},
|
||||
() => {
|
||||
this.rankLabelBox.getThirdCategoryList();
|
||||
let isDisabledSubmit = this.checkData();
|
||||
this.setState({
|
||||
isDisabledSubmit,
|
||||
});
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* 一次确认录入
|
||||
*/
|
||||
onSubmit = debounce(() => {
|
||||
const { subjectName, isDisabledSubmit, isSubmit } = this.state;
|
||||
if (isDisabledSubmit || !isSubmit) {
|
||||
return;
|
||||
}
|
||||
/**
|
||||
* 输入题目
|
||||
* @param {*} e
|
||||
*/
|
||||
onChangeSubjectName = e => {
|
||||
let str = e.target.value.trim()
|
||||
this.setState(
|
||||
{
|
||||
subjectName: str
|
||||
},
|
||||
() => {
|
||||
// this.rankLabelBox.getThirdCategoryList();
|
||||
let isDisabledSubmit = this.checkData()
|
||||
this.setState({
|
||||
isSubmit: false,
|
||||
});
|
||||
let params = {
|
||||
subjectName: subjectName,
|
||||
difficulty: this.rankId,
|
||||
subjectType: 3,
|
||||
subjectScore: this.scoreValue,
|
||||
subjectParse: this.subjectAnalysis,
|
||||
isCorrect: this.currentActive[0],
|
||||
categoryIds: this.secondCategoryValue,
|
||||
labelIds: this.thirdCategoryValue,
|
||||
};
|
||||
console.log('判断录入 ----', params);
|
||||
req({
|
||||
method: 'post',
|
||||
data: params,
|
||||
url: apiName.addInterviewSubject,
|
||||
isDisabledSubmit
|
||||
})
|
||||
.then((res) => {
|
||||
this.repeatInfo = {};
|
||||
if (res.data && res.data.insertStatus) {
|
||||
this.setState(
|
||||
{
|
||||
isSubmit: true,
|
||||
},
|
||||
() => {
|
||||
this.successModalConfirm();
|
||||
}
|
||||
);
|
||||
} else if (!res.data.insertStatus) {
|
||||
this.repeatInfo = {
|
||||
repeatDocId: res.data.docId, // 重复题目id
|
||||
repeatRate: res.data.repeatRate, // 重复率
|
||||
repeatIsCorrect: res.data.isCorrect, // 答案
|
||||
repeatSubjectName: res.data.subjectName, // 重复题目
|
||||
repeatSetterErp: res.data.subjectSetterErp, // 出题人erp
|
||||
repeatSetterName: res.data.subjectSetterName, // 出题人姓名
|
||||
};
|
||||
this.setState({
|
||||
isShowModalBox: true,
|
||||
isSubmit: true,
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
this.setState({
|
||||
isSubmit: true,
|
||||
});
|
||||
console.log(err);
|
||||
});
|
||||
});
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 校验是否支持点击按钮
|
||||
* @returns
|
||||
*/
|
||||
checkData = () => {
|
||||
const { subjectName } = this.state;
|
||||
let isDisabledSubmit = false;
|
||||
if (
|
||||
!!!subjectName ||
|
||||
this.currentActive?.length <= 0 ||
|
||||
!!!this.firstCategoryValue ||
|
||||
this.secondCategoryValue.length <= 0 ||
|
||||
this.thirdCategoryValue.length <= 0 ||
|
||||
!!!this.scoreValue
|
||||
) {
|
||||
isDisabledSubmit = true;
|
||||
}
|
||||
return isDisabledSubmit;
|
||||
};
|
||||
|
||||
/**
|
||||
* 取消
|
||||
*/
|
||||
onCancel = () => {
|
||||
this.currentActive = []; // 选项列表
|
||||
this.scoreValue = ''; // 分数
|
||||
this.subjectAnalysis = ''; //试题解析
|
||||
this.rankId = 1;
|
||||
this.firstCategoryValue = ''; // 一级分类的值
|
||||
this.secondCategoryValue = []; // 二级分类的值
|
||||
this.thirdCategoryValue = []; // 三级标签的值
|
||||
this.repeatInfo = {};
|
||||
this.rankLabelBox.initRankLabel();
|
||||
this.optionInputBox.handleClearOption();
|
||||
this.setState({
|
||||
subjectName: '',
|
||||
isShowModalBox: false,
|
||||
isSubmit: true, // 是否支持提交
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 重复率弹框-确认录入
|
||||
*/
|
||||
onSubmitRepeatModal = debounce(
|
||||
() => {
|
||||
let params = {
|
||||
docId: this.repeatInfo.repeatDocId,
|
||||
};
|
||||
req({
|
||||
method: 'post',
|
||||
data: params,
|
||||
url: apiName.addRepeatInterviewSubject,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.data) {
|
||||
this.successModalConfirm();
|
||||
} else {
|
||||
message.info('请再次确认');
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
message.error('请再次确认');
|
||||
});
|
||||
},
|
||||
300,
|
||||
true
|
||||
);
|
||||
|
||||
/**
|
||||
* 重复率弹框-取消录入
|
||||
*/
|
||||
onCancelRepeatModal = () => {
|
||||
this.repeatInfo = {};
|
||||
this.setState({
|
||||
isShowModalBox: false,
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 录入成功的弹框
|
||||
*/
|
||||
successModalConfirm = () => {
|
||||
Modal.confirm({
|
||||
title: (
|
||||
<div
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
color: 'rgba(60, 110, 238, 1)',
|
||||
fontSize: 16,
|
||||
}}>
|
||||
录入成功！贡献榜火力值 + 1
|
||||
</div>
|
||||
),
|
||||
closable: false,
|
||||
maskClosable: false,
|
||||
icon: ' ',
|
||||
onOk: this.onAgainSuccessModal,
|
||||
onCancel: this.onGoHomeSuccessModal,
|
||||
okText: '再录一题',
|
||||
cancelText: '去首页',
|
||||
className: 'questions-success-modal-confirm',
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 录入成功弹框-再来一题
|
||||
*/
|
||||
onAgainSuccessModal = () => {
|
||||
this.onCancel();
|
||||
};
|
||||
|
||||
/**
|
||||
* 录入成功弹框-去首页
|
||||
*/
|
||||
onGoHomeSuccessModal = () => {
|
||||
// this.onCancel();
|
||||
window.location.href = '/cms-supplier/question-bank';
|
||||
};
|
||||
|
||||
/**
|
||||
* 分类选择
|
||||
* @param {*} e
|
||||
*/
|
||||
onChangeRankLabel = (firstCategoryValue, secondCategoryValue, thirdCategoryValue) => {
|
||||
this.firstCategoryValue = firstCategoryValue; // 一级分类的值
|
||||
this.secondCategoryValue = secondCategoryValue; // 二级分类的值
|
||||
this.thirdCategoryValue = thirdCategoryValue; // 三级标签的值
|
||||
let isDisabledSubmit = this.checkData();
|
||||
this.setState({
|
||||
isDisabledSubmit,
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 职级选择
|
||||
* @param {*} list
|
||||
*/
|
||||
handleChangeRank = (list) => {
|
||||
this.rankId = list[0];
|
||||
let isDisabledSubmit = this.checkData();
|
||||
this.setState({
|
||||
isDisabledSubmit,
|
||||
});
|
||||
};
|
||||
/**
|
||||
* 选项操作
|
||||
* @param {*} currentActive 选项列表
|
||||
* @param {*} scoreValue 分值
|
||||
* @param {*} subjectAnalysis 解析
|
||||
*/
|
||||
handleChangeOption = (currentActive, scoreValue, subjectAnalysis) => {
|
||||
this.currentActive = currentActive;
|
||||
this.scoreValue = scoreValue;
|
||||
this.subjectAnalysis = subjectAnalysis;
|
||||
let isDisabledSubmit = this.checkData();
|
||||
this.setState({
|
||||
isDisabledSubmit,
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { subjectName, isDisabledSubmit, isSubmit, isShowModalBox } = this.state;
|
||||
const { questionsType } = this.props;
|
||||
return (
|
||||
<Spin spinning={!isSubmit}>
|
||||
<Fragment>
|
||||
<div className="judge-questions-container">
|
||||
<div className="judge-questions-title">题目名称：</div>
|
||||
<Input
|
||||
placeholder="输入题目"
|
||||
style={{ height: 48, width: '100%' }}
|
||||
value={subjectName}
|
||||
maxLength={64}
|
||||
onChange={(e) => this.onChangeSubjectName(e)}
|
||||
/>
|
||||
</div>
|
||||
<OptionInputBox
|
||||
ref={(ref) => {
|
||||
this.optionInputBox = ref;
|
||||
}}
|
||||
isJudge={true}
|
||||
handleChangeOption={this.handleChangeOption}
|
||||
/>
|
||||
<RankLabelBox
|
||||
ref={(ref) => {
|
||||
this.rankLabelBox = ref;
|
||||
}}
|
||||
subjectName={subjectName}
|
||||
onChangeRankLabel={this.onChangeRankLabel}
|
||||
handleChangeRank={this.handleChangeRank}
|
||||
/>
|
||||
<div className="judge-questions-btns-container">
|
||||
<div className="judge-questions-btn" onClick={this.onCancel}>
|
||||
清空
|
||||
</div>
|
||||
<div
|
||||
className={`judge-questions-btn judge-questions-submit ${isDisabledSubmit && 'judge-questions-disabled-submit'
|
||||
}`}
|
||||
onClick={this.onSubmit}>
|
||||
提交
|
||||
</div>
|
||||
</div>
|
||||
<RepeatContentBox
|
||||
isShowModalBox={isShowModalBox}
|
||||
repeatQuestionsType={questionsType}
|
||||
repeatInfo={this.repeatInfo}
|
||||
handleSubmitRepeatModal={this.onSubmitRepeatModal}
|
||||
handleCancelRepeatModal={this.onCancelRepeatModal}
|
||||
/>
|
||||
</Fragment>
|
||||
</Spin>
|
||||
);
|
||||
/**
|
||||
* 一次确认录入
|
||||
*/
|
||||
onSubmit = debounce(() => {
|
||||
const { subjectName, isDisabledSubmit, isSubmit } = this.state
|
||||
if (isDisabledSubmit || !isSubmit) {
|
||||
return
|
||||
}
|
||||
this.setState({
|
||||
isSubmit: false
|
||||
})
|
||||
let params = {
|
||||
subjectName: subjectName,
|
||||
subjectDifficult: this.rankId,
|
||||
subjectType: 3,
|
||||
subjectScore: this.scoreValue,
|
||||
subjectParse: this.subjectAnalysis,
|
||||
optionList: [{ isCorrect: this.currentActive[0] }],
|
||||
categoryIds: this.secondCategoryValue.filter(item => item.active).map(t => t.id),
|
||||
labelIds: this.thirdCategoryValue.filter(item => item.active).map(t => t.id)
|
||||
}
|
||||
console.log('判断录入 ----', params)
|
||||
req({
|
||||
method: 'post',
|
||||
data: params,
|
||||
url: apiName.add
|
||||
})
|
||||
.then(res => {
|
||||
this.setState(
|
||||
{
|
||||
isSubmit: true
|
||||
},
|
||||
() => {
|
||||
this.successModalConfirm()
|
||||
}
|
||||
)
|
||||
})
|
||||
.catch(err => {
|
||||
this.setState({
|
||||
isSubmit: true
|
||||
})
|
||||
console.log(err)
|
||||
})
|
||||
})
|
||||
|
||||
/**
|
||||
* 校验是否支持点击按钮
|
||||
* @returns
|
||||
*/
|
||||
checkData = () => {
|
||||
const { subjectName } = this.state
|
||||
let isDisabledSubmit = false
|
||||
if (
|
||||
!!!subjectName ||
|
||||
this.currentActive?.length <= 0 ||
|
||||
!!!this.firstCategoryValue ||
|
||||
this.secondCategoryValue.length <= 0 ||
|
||||
this.thirdCategoryValue.length <= 0 ||
|
||||
!!!this.scoreValue
|
||||
) {
|
||||
isDisabledSubmit = true
|
||||
}
|
||||
return isDisabledSubmit
|
||||
}
|
||||
|
||||
/**
|
||||
* 取消
|
||||
*/
|
||||
onCancel = () => {
|
||||
this.currentActive = [] // 选项列表
|
||||
this.scoreValue = '' // 分数
|
||||
this.subjectAnalysis = '' //试题解析
|
||||
this.rankId = 1
|
||||
this.firstCategoryValue = '' // 一级分类的值
|
||||
this.secondCategoryValue = [] // 二级分类的值
|
||||
this.thirdCategoryValue = [] // 三级标签的值
|
||||
this.repeatInfo = {}
|
||||
this.rankLabelBox.current.initRankLabel()
|
||||
this.optionInputBox.handleClearOption()
|
||||
this.setState({
|
||||
subjectName: '',
|
||||
isShowModalBox: false,
|
||||
isSubmit: true // 是否支持提交
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 重复率弹框-确认录入
|
||||
*/
|
||||
onSubmitRepeatModal = debounce(
|
||||
() => {
|
||||
let params = {
|
||||
docId: this.repeatInfo.repeatDocId
|
||||
}
|
||||
req({
|
||||
method: 'post',
|
||||
data: params,
|
||||
url: apiName.addRepeatInterviewSubject
|
||||
})
|
||||
.then(res => {
|
||||
if (res.data) {
|
||||
this.successModalConfirm()
|
||||
} else {
|
||||
message.info('请再次确认')
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
message.error('请再次确认')
|
||||
})
|
||||
},
|
||||
300,
|
||||
true
|
||||
)
|
||||
|
||||
/**
|
||||
* 重复率弹框-取消录入
|
||||
*/
|
||||
onCancelRepeatModal = () => {
|
||||
this.repeatInfo = {}
|
||||
this.setState({
|
||||
isShowModalBox: false
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 录入成功的弹框
|
||||
*/
|
||||
successModalConfirm = () => {
|
||||
Modal.confirm({
|
||||
title: (
|
||||
<div
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
color: 'rgba(60, 110, 238, 1)',
|
||||
fontSize: 16
|
||||
}}
|
||||
>
|
||||
录入成功！贡献榜火力值 + 1
|
||||
</div>
|
||||
),
|
||||
closable: false,
|
||||
maskClosable: false,
|
||||
icon: ' ',
|
||||
onOk: this.onAgainSuccessModal,
|
||||
onCancel: this.onGoHomeSuccessModal,
|
||||
okText: '再录一题',
|
||||
cancelText: '去首页',
|
||||
className: 'questions-success-modal-confirm'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 录入成功弹框-再来一题
|
||||
*/
|
||||
onAgainSuccessModal = () => {
|
||||
this.onCancel()
|
||||
}
|
||||
|
||||
/**
|
||||
* 录入成功弹框-去首页
|
||||
*/
|
||||
onGoHomeSuccessModal = () => {
|
||||
window.location.href = '/question-bank'
|
||||
}
|
||||
|
||||
/**
|
||||
* 分类选择
|
||||
* @param {*} e
|
||||
*/
|
||||
onChangeRankLabel = (firstCategoryValue, secondCategoryValue, thirdCategoryValue) => {
|
||||
this.firstCategoryValue = firstCategoryValue // 一级分类的值
|
||||
this.secondCategoryValue = secondCategoryValue // 二级分类的值
|
||||
this.thirdCategoryValue = thirdCategoryValue // 三级标签的值
|
||||
let isDisabledSubmit = this.checkData()
|
||||
this.setState({
|
||||
isDisabledSubmit
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 职级选择
|
||||
* @param {*} list
|
||||
*/
|
||||
handleChangeRank = list => {
|
||||
this.rankId = list[0]
|
||||
let isDisabledSubmit = this.checkData()
|
||||
this.setState({
|
||||
isDisabledSubmit
|
||||
})
|
||||
}
|
||||
/**
|
||||
* 选项操作
|
||||
* @param {*} currentActive 选项列表
|
||||
* @param {*} scoreValue 分值
|
||||
* @param {*} subjectAnalysis 解析
|
||||
*/
|
||||
handleChangeOption = (currentActive, scoreValue, subjectAnalysis) => {
|
||||
this.currentActive = currentActive
|
||||
this.scoreValue = scoreValue
|
||||
this.subjectAnalysis = subjectAnalysis
|
||||
let isDisabledSubmit = this.checkData()
|
||||
this.setState({
|
||||
isDisabledSubmit
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
const { subjectName, isDisabledSubmit, isSubmit, isShowModalBox } = this.state
|
||||
const { questionsType } = this.props
|
||||
return (
|
||||
<Spin spinning={!isSubmit}>
|
||||
<Fragment>
|
||||
<div className='judge-questions-container'>
|
||||
<div className='judge-questions-title'>题目名称：</div>
|
||||
<Input
|
||||
placeholder='输入题目'
|
||||
style={{ height: 48, width: '100%' }}
|
||||
value={subjectName}
|
||||
maxLength={64}
|
||||
onChange={e => this.onChangeSubjectName(e)}
|
||||
/>
|
||||
</div>
|
||||
<OptionInputBox
|
||||
ref={ref => {
|
||||
this.optionInputBox = ref
|
||||
}}
|
||||
isJudge={true}
|
||||
handleChangeOption={this.handleChangeOption}
|
||||
/>
|
||||
<RankLabelBox
|
||||
ref={this.rankLabelBox}
|
||||
subjectName={subjectName}
|
||||
onChangeRankLabel={this.onChangeRankLabel}
|
||||
handleChangeRank={this.handleChangeRank}
|
||||
/>
|
||||
<div className='judge-questions-btns-container'>
|
||||
<div className='judge-questions-btn' onClick={this.onCancel}>
|
||||
清空
|
||||
</div>
|
||||
<div
|
||||
className={`judge-questions-btn judge-questions-submit ${
|
||||
isDisabledSubmit && 'judge-questions-disabled-submit'
|
||||
}`}
|
||||
onClick={this.onSubmit}
|
||||
>
|
||||
提交
|
||||
</div>
|
||||
</div>
|
||||
<RepeatContentBox
|
||||
isShowModalBox={isShowModalBox}
|
||||
repeatQuestionsType={questionsType}
|
||||
repeatInfo={this.repeatInfo}
|
||||
handleSubmitRepeatModal={this.onSubmitRepeatModal}
|
||||
handleCancelRepeatModal={this.onCancelRepeatModal}
|
||||
/>
|
||||
</Fragment>
|
||||
</Spin>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,52 +1,52 @@
|
||||
.judge-questions-container {
|
||||
width: 1000px;
|
||||
// width: 1000px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 24px;
|
||||
padding-top: 36px;
|
||||
// label名字title
|
||||
.judge-questions-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 24px;
|
||||
padding-top: 36px;
|
||||
// label名字title
|
||||
.judge-questions-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
width: 140px;
|
||||
line-height: 40px;
|
||||
font-size: 16px;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
&:before {
|
||||
display: inline-block;
|
||||
margin-right: 4px;
|
||||
margin-top: 1px;
|
||||
color: #f5222d;
|
||||
font-size: 16px;
|
||||
content: '*';
|
||||
}
|
||||
justify-content: flex-end;
|
||||
width: 140px;
|
||||
line-height: 40px;
|
||||
font-size: 16px;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
&:before {
|
||||
display: inline-block;
|
||||
margin-right: 4px;
|
||||
margin-top: 1px;
|
||||
color: #f5222d;
|
||||
font-size: 16px;
|
||||
content: '*';
|
||||
}
|
||||
}
|
||||
}
|
||||
.judge-questions-btns-container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
margin: 20px auto;
|
||||
width: 952px;
|
||||
.judge-questions-btn {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
margin: 20px auto;
|
||||
width: 952px;
|
||||
.judge-questions-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 150px;
|
||||
height: 40px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.judge-questions-submit {
|
||||
margin-left: 40px;
|
||||
background-color: #4390f7;
|
||||
color: #fff;
|
||||
border: 1px solid #4390f7;
|
||||
}
|
||||
.judge-questions-disabled-submit {
|
||||
opacity: 0.5;
|
||||
}
|
||||
justify-content: center;
|
||||
width: 150px;
|
||||
height: 40px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.judge-questions-submit {
|
||||
margin-left: 40px;
|
||||
background-color: #4390f7;
|
||||
color: #fff;
|
||||
border: 1px solid #4390f7;
|
||||
}
|
||||
.judge-questions-disabled-submit {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,343 +1,366 @@
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import { Input, Modal, message, Spin } from 'antd';
|
||||
import _ from 'lodash';
|
||||
import req from '@utils/request';
|
||||
import { debounce } from '@utils';
|
||||
import KindEditor from '../kind-editor';
|
||||
import RankLabelBox from '../rank-label-box';
|
||||
import OptionInputBox from '../option-input-box';
|
||||
import RepeatContentBox from '../repeat-content-box';
|
||||
import { apiName } from '../../constant';
|
||||
import './index.less';
|
||||
import { debounce } from '@utils'
|
||||
import req from '@utils/request'
|
||||
import { Input, Modal, Spin, message } from 'antd'
|
||||
import React, { Component, Fragment, createRef } from 'react'
|
||||
import { apiName } from '../../constant'
|
||||
import OptionInputBox from '../option-input-box'
|
||||
import RankLabelBox from '../rank-label-box'
|
||||
import RepeatContentBox from '../repeat-content-box'
|
||||
import './index.less'
|
||||
|
||||
const defalutLabel = '请使用富文本编辑器输入选项内容';
|
||||
const defalutLabel = '请使用富文本编辑器输入选项内容'
|
||||
export default class MultipleQuestions extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
subjectName: '', // 题目
|
||||
isDisabledSubmit: true, //是否禁止输入
|
||||
isShowModalBox: false, // 是否展示重复率弹框
|
||||
isSubmit: true, // 是否支持提交
|
||||
};
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
subjectName: '', // 题目
|
||||
isDisabledSubmit: true, //是否禁止输入
|
||||
isShowModalBox: false, // 是否展示重复率弹框
|
||||
isSubmit: true // 是否支持提交
|
||||
}
|
||||
kindEditor = KindEditor | null;
|
||||
rankLabelBox = RankLabelBox | null;
|
||||
optionInputBox = OptionInputBox | null;
|
||||
currentActive = []; // 选项列表
|
||||
scoreValue = ''; // 分数
|
||||
subjectAnalysis = ''; //试题解析
|
||||
rankId = 1; //职级
|
||||
subjectAnswer = ''; // 选项内容
|
||||
firstCategoryValue = ''; // 一级分类的值
|
||||
secondCategoryValue = []; // 二级分类的值
|
||||
thirdCategoryValue = []; // 三级标签的值
|
||||
repeatInfo = {}; // 重复率
|
||||
}
|
||||
rankLabelBox = createRef()
|
||||
optionInputBox = OptionInputBox | null
|
||||
currentActive = [] // 选项列表
|
||||
scoreValue = '' // 分数
|
||||
subjectAnalysis = '' //试题解析
|
||||
rankId = 1 //职级
|
||||
subjectAnswer = '' // 选项内容
|
||||
firstCategoryValue = '' // 一级分类的值
|
||||
secondCategoryValue = [] // 二级分类的值
|
||||
thirdCategoryValue = [] // 三级标签的值
|
||||
repeatInfo = {} // 重复率
|
||||
|
||||
/**
|
||||
* 输入题目
|
||||
* @param {*} e
|
||||
*/
|
||||
onChangeSubjectName = (e) => {
|
||||
let str = e.target.value.trim();
|
||||
this.setState(
|
||||
{
|
||||
subjectName: str,
|
||||
},
|
||||
() => {
|
||||
this.rankLabelBox.getThirdCategoryList();
|
||||
let isDisabledSubmit = this.checkData();
|
||||
this.setState({
|
||||
isDisabledSubmit,
|
||||
});
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* 一次确认录入
|
||||
*/
|
||||
onSubmit = debounce(() => {
|
||||
const { subjectName, isDisabledSubmit, isSubmit } = this.state;
|
||||
if (isDisabledSubmit || !isSubmit) {
|
||||
return;
|
||||
}
|
||||
/**
|
||||
* 输入题目
|
||||
* @param {*} e
|
||||
*/
|
||||
onChangeSubjectName = e => {
|
||||
let str = e.target.value.trim()
|
||||
this.setState(
|
||||
{
|
||||
subjectName: str
|
||||
},
|
||||
() => {
|
||||
// this.rankLabelBox.getThirdCategoryList();
|
||||
let isDisabledSubmit = this.checkData()
|
||||
this.setState({
|
||||
isSubmit: false,
|
||||
});
|
||||
let params = {
|
||||
subjectName: subjectName,
|
||||
difficulty: this.rankId,
|
||||
subjectType: 2,
|
||||
subjectScore: this.scoreValue,
|
||||
subjectParse: this.subjectAnalysis,
|
||||
categoryIds: this.secondCategoryValue,
|
||||
labelIds: this.thirdCategoryValue,
|
||||
optionList: this.currentActive,
|
||||
};
|
||||
console.log('多选录入 ----', params);
|
||||
req({
|
||||
method: 'post',
|
||||
data: params,
|
||||
url: apiName.addInterviewSubject,
|
||||
isDisabledSubmit
|
||||
})
|
||||
.then((res) => {
|
||||
this.repeatInfo = {};
|
||||
if (res.data && res.data.insertStatus) {
|
||||
this.setState(
|
||||
{
|
||||
isSubmit: true,
|
||||
},
|
||||
() => {
|
||||
this.successModalConfirm();
|
||||
}
|
||||
);
|
||||
} else if (!res.data.insertStatus) {
|
||||
this.repeatInfo = {
|
||||
repeatDocId: res.data.docId, // 重复题目id
|
||||
repeatRate: res.data.repeatRate, // 重复率
|
||||
repeatSubjectName: res.data.subjectName, // 重复题目
|
||||
repeatOptionList: res.data.optionList, // 重复列表项
|
||||
repeatSetterErp: res.data.subjectSetterErp, // 出题人erp
|
||||
repeatSetterName: res.data.subjectSetterName, // 出题人姓名
|
||||
};
|
||||
this.setState({
|
||||
isShowModalBox: true,
|
||||
isSubmit: true,
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
this.setState({
|
||||
isSubmit: true,
|
||||
});
|
||||
console.log(err);
|
||||
});
|
||||
});
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 校验是否支持点击按钮
|
||||
* @returns
|
||||
*/
|
||||
/**
|
||||
* 校验是否支持点击按钮
|
||||
* @returns
|
||||
*/
|
||||
checkData = () => {
|
||||
const { subjectName } = this.state;
|
||||
let list = this.currentActive.filter((item) => item.optionContent === defalutLabel);
|
||||
let isDisabledSubmit = false;
|
||||
if (
|
||||
!!!subjectName ||
|
||||
list.length > 0 ||
|
||||
!!!this.firstCategoryValue ||
|
||||
this.secondCategoryValue.length <= 0 ||
|
||||
this.thirdCategoryValue.length <= 0 ||
|
||||
!!!this.scoreValue
|
||||
) {
|
||||
isDisabledSubmit = true;
|
||||
}
|
||||
return isDisabledSubmit;
|
||||
};
|
||||
|
||||
/**
|
||||
* 取消
|
||||
*/
|
||||
onCancel = () => {
|
||||
this.currentActive = []; // 选项列表
|
||||
this.scoreValue = ''; // 分数
|
||||
this.subjectAnalysis = ''; //试题解析
|
||||
this.rankId = 1;
|
||||
this.subjectAnswer = ''; // 选项内容
|
||||
this.firstCategoryValue = ''; // 一级分类的值
|
||||
this.secondCategoryValue = []; // 二级分类的值
|
||||
this.thirdCategoryValue = []; // 三级标签的值
|
||||
this.repeatInfo = {};
|
||||
this.kindEditor && this.kindEditor.onClear();
|
||||
this.rankLabelBox.initRankLabel();
|
||||
this.optionInputBox.handleClearOption();
|
||||
this.setState({
|
||||
subjectName: '',
|
||||
isShowModalBox: false,
|
||||
isSubmit: true, // 是否支持提交
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 重复率弹框-确认录入
|
||||
*/
|
||||
onSubmitRepeatModal = debounce(
|
||||
() => {
|
||||
let params = {
|
||||
docId: this.repeatInfo.repeatDocId,
|
||||
};
|
||||
req({
|
||||
method: 'post',
|
||||
data: params,
|
||||
url: apiName.addRepeatInterviewSubject,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.data) {
|
||||
this.successModalConfirm();
|
||||
} else {
|
||||
message.info('请再次确认');
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
message.error('请再次确认');
|
||||
});
|
||||
},
|
||||
300,
|
||||
true
|
||||
);
|
||||
|
||||
/**
|
||||
* 重复率弹框-取消录入
|
||||
*/
|
||||
onCancelRepeatModal = () => {
|
||||
this.repeatInfo = {};
|
||||
this.setState({
|
||||
isShowModalBox: false,
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 录入成功的弹框
|
||||
*/
|
||||
successModalConfirm = () => {
|
||||
Modal.confirm({
|
||||
title: (
|
||||
<div
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
color: 'rgba(60, 110, 238, 1)',
|
||||
fontSize: 16,
|
||||
}}>
|
||||
录入成功！贡献榜火力值 + 1
|
||||
</div>
|
||||
),
|
||||
closable: false,
|
||||
maskClosable: false,
|
||||
icon: ' ',
|
||||
onOk: this.onAgainSuccessModal,
|
||||
onCancel: this.onGoHomeSuccessModal,
|
||||
okText: '再录一题',
|
||||
cancelText: '去首页',
|
||||
className: 'questions-success-modal-confirm',
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 录入成功弹框-再来一题
|
||||
*/
|
||||
onAgainSuccessModal = () => {
|
||||
this.onCancel();
|
||||
};
|
||||
|
||||
/**
|
||||
* 录入成功弹框-去首页
|
||||
*/
|
||||
onGoHomeSuccessModal = () => {
|
||||
// this.onCancel();
|
||||
window.location.href = '/cms-supplier/question-bank';
|
||||
};
|
||||
|
||||
/**
|
||||
* 分类选择
|
||||
* @param {*} e
|
||||
*/
|
||||
onChangeRankLabel = (firstCategoryValue, secondCategoryValue, thirdCategoryValue) => {
|
||||
this.firstCategoryValue = firstCategoryValue; // 一级分类的值
|
||||
this.secondCategoryValue = secondCategoryValue; // 二级分类的值
|
||||
this.thirdCategoryValue = thirdCategoryValue; // 三级标签的值
|
||||
let isDisabledSubmit = this.checkData();
|
||||
this.setState({
|
||||
isDisabledSubmit,
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 职级选择
|
||||
* @param {*} list
|
||||
*/
|
||||
handleChangeRank = (list) => {
|
||||
this.rankId = list[0];
|
||||
let isDisabledSubmit = this.checkData();
|
||||
this.setState({
|
||||
isDisabledSubmit,
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 选项操作
|
||||
* @param {*} currentActive 选项列表
|
||||
* @param {*} scoreValue 分值
|
||||
* @param {*} subjectAnalysis 解析
|
||||
*/
|
||||
handleChangeOption = (currentActive, scoreValue, subjectAnalysis) => {
|
||||
this.currentActive = currentActive;
|
||||
this.scoreValue = scoreValue;
|
||||
this.subjectAnalysis = subjectAnalysis;
|
||||
let isDisabledSubmit = this.checkData();
|
||||
this.setState({
|
||||
isDisabledSubmit,
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { subjectName, isDisabledSubmit, isSubmit, isShowModalBox } = this.state;
|
||||
const { questionsType } = this.props;
|
||||
return (
|
||||
<Spin spinning={!isSubmit}>
|
||||
<Fragment>
|
||||
<div className="multiple-questions-container">
|
||||
<div className="multiple-questions-title">题目名称：</div>
|
||||
<Input
|
||||
placeholder="输入题目"
|
||||
style={{ height: 48, width: '100%' }}
|
||||
value={subjectName}
|
||||
maxLength={64}
|
||||
onChange={(e) => this.onChangeSubjectName(e)}
|
||||
/>
|
||||
</div>
|
||||
<OptionInputBox
|
||||
key="multiple-option-input"
|
||||
ref={(ref) => {
|
||||
this.optionInputBox = ref;
|
||||
}}
|
||||
isMultiple={true}
|
||||
handleChangeOption={this.handleChangeOption}
|
||||
/>
|
||||
<RankLabelBox
|
||||
ref={(ref) => {
|
||||
this.rankLabelBox = ref;
|
||||
}}
|
||||
subjectName={subjectName}
|
||||
onChangeRankLabel={this.onChangeRankLabel}
|
||||
handleChangeRank={this.handleChangeRank}
|
||||
/>
|
||||
<div className="multiple-questions-btns-container">
|
||||
<div className="multiple-questions-btn" onClick={this.onCancel}>
|
||||
清空
|
||||
</div>
|
||||
<div
|
||||
className={`multiple-questions-btn multiple-questions-submit ${isDisabledSubmit && 'multiple-questions-disabled-submit'
|
||||
}`}
|
||||
onClick={this.onSubmit}>
|
||||
提交
|
||||
</div>
|
||||
</div>
|
||||
<RepeatContentBox
|
||||
isShowModalBox={isShowModalBox}
|
||||
repeatQuestionsType={questionsType}
|
||||
repeatInfo={this.repeatInfo}
|
||||
handleSubmitRepeatModal={this.onSubmitRepeatModal}
|
||||
handleCancelRepeatModal={this.onCancelRepeatModal}
|
||||
/>
|
||||
</Fragment>
|
||||
</Spin>
|
||||
);
|
||||
/**
|
||||
* 一次确认录入
|
||||
*/
|
||||
onSubmit = debounce(() => {
|
||||
const { subjectName, isDisabledSubmit, isSubmit } = this.state
|
||||
if (isDisabledSubmit || !isSubmit) {
|
||||
return
|
||||
}
|
||||
if (!!!subjectName) {
|
||||
message.warning('请输入题目名称')
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
if (!this.currentActive.length) {
|
||||
message.warning('请录入答案')
|
||||
return
|
||||
}
|
||||
if (!!!this.firstCategoryValue) {
|
||||
message.warning('请选择一级分类')
|
||||
return
|
||||
}
|
||||
if (this.secondCategoryValue.length <= 0) {
|
||||
message.warning('请选择二级分类')
|
||||
return
|
||||
}
|
||||
if (this.thirdCategoryValue.length <= 0) {
|
||||
message.warning('请选择三级标签')
|
||||
return
|
||||
}
|
||||
this.setState({
|
||||
isSubmit: false
|
||||
})
|
||||
let params = {
|
||||
subjectName: subjectName,
|
||||
subjectDifficult: this.rankId,
|
||||
subjectType: 2,
|
||||
subjectScore: this.scoreValue,
|
||||
subjectParse: this.subjectAnalysis,
|
||||
categoryIds: this.secondCategoryValue.filter(item => item.active).map(t => t.id),
|
||||
labelIds: this.thirdCategoryValue.filter(item => item.active).map(t => t.id),
|
||||
optionList: this.currentActive
|
||||
}
|
||||
req({
|
||||
method: 'post',
|
||||
data: params,
|
||||
url: apiName.add
|
||||
})
|
||||
.then(res => {
|
||||
// this.repeatInfo = {}
|
||||
// if (res.data && res.data.insertStatus) {
|
||||
// this.setState(
|
||||
// {
|
||||
// isSubmit: true
|
||||
// },
|
||||
// () => {
|
||||
// this.successModalConfirm()
|
||||
// }
|
||||
// )
|
||||
// } else if (!res.data.insertStatus) {
|
||||
// this.repeatInfo = {
|
||||
// repeatDocId: res.data.docId, // 重复题目id
|
||||
// repeatRate: res.data.repeatRate, // 重复率
|
||||
// repeatSubjectName: res.data.subjectName, // 重复题目
|
||||
// repeatOptionList: res.data.optionList, // 重复列表项
|
||||
// repeatSetterErp: res.data.subjectSetterErp, // 出题人erp
|
||||
// repeatSetterName: res.data.subjectSetterName // 出题人姓名
|
||||
// }
|
||||
// this.setState({
|
||||
// isShowModalBox: true,
|
||||
// isSubmit: true
|
||||
// })
|
||||
// }
|
||||
this.setState(
|
||||
{
|
||||
isSubmit: true
|
||||
},
|
||||
() => {
|
||||
this.successModalConfirm()
|
||||
}
|
||||
)
|
||||
})
|
||||
.catch(err => {
|
||||
this.setState({
|
||||
isSubmit: true
|
||||
})
|
||||
console.log(err)
|
||||
})
|
||||
})
|
||||
|
||||
/**
|
||||
* 校验是否支持点击按钮
|
||||
* @returns
|
||||
*/
|
||||
/**
|
||||
* 校验是否支持点击按钮
|
||||
* @returns
|
||||
*/
|
||||
checkData = () => {
|
||||
const { subjectName } = this.state
|
||||
let list = this.currentActive.filter(item => item.optionContent === defalutLabel)
|
||||
let isDisabledSubmit = false
|
||||
if (
|
||||
!!!subjectName ||
|
||||
list.length > 0 ||
|
||||
!!!this.firstCategoryValue ||
|
||||
this.secondCategoryValue.length <= 0 ||
|
||||
this.thirdCategoryValue.length <= 0 ||
|
||||
!!!this.scoreValue
|
||||
) {
|
||||
isDisabledSubmit = true
|
||||
}
|
||||
return isDisabledSubmit
|
||||
}
|
||||
|
||||
/**
|
||||
* 取消
|
||||
*/
|
||||
onCancel = () => {
|
||||
this.currentActive = [] // 选项列表
|
||||
this.scoreValue = '' // 分数
|
||||
this.subjectAnalysis = '' //试题解析
|
||||
this.rankId = 1
|
||||
this.subjectAnswer = '' // 选项内容
|
||||
this.firstCategoryValue = '' // 一级分类的值
|
||||
this.secondCategoryValue = [] // 二级分类的值
|
||||
this.thirdCategoryValue = [] // 三级标签的值
|
||||
this.repeatInfo = {}
|
||||
this.rankLabelBox.current.initRankLabel()
|
||||
this.optionInputBox.handleClearOption()
|
||||
this.setState({
|
||||
subjectName: '',
|
||||
isShowModalBox: false,
|
||||
isSubmit: true // 是否支持提交
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 重复率弹框-确认录入
|
||||
*/
|
||||
onSubmitRepeatModal = debounce(
|
||||
() => {
|
||||
let params = {
|
||||
docId: this.repeatInfo.repeatDocId
|
||||
}
|
||||
req({
|
||||
method: 'post',
|
||||
data: params,
|
||||
url: apiName.addRepeatInterviewSubject
|
||||
})
|
||||
.then(res => {
|
||||
if (res.data) {
|
||||
this.successModalConfirm()
|
||||
} else {
|
||||
message.info('请再次确认')
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
message.error('请再次确认')
|
||||
})
|
||||
},
|
||||
300,
|
||||
true
|
||||
)
|
||||
|
||||
/**
|
||||
* 重复率弹框-取消录入
|
||||
*/
|
||||
onCancelRepeatModal = () => {
|
||||
this.repeatInfo = {}
|
||||
this.setState({
|
||||
isShowModalBox: false
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 录入成功的弹框
|
||||
*/
|
||||
successModalConfirm = () => {
|
||||
Modal.confirm({
|
||||
title: (
|
||||
<div
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
color: 'rgba(60, 110, 238, 1)',
|
||||
fontSize: 16
|
||||
}}
|
||||
>
|
||||
录入成功！贡献榜火力值 + 1
|
||||
</div>
|
||||
),
|
||||
closable: false,
|
||||
maskClosable: false,
|
||||
icon: ' ',
|
||||
onOk: this.onAgainSuccessModal,
|
||||
onCancel: this.onGoHomeSuccessModal,
|
||||
okText: '再录一题',
|
||||
cancelText: '去首页',
|
||||
className: 'questions-success-modal-confirm'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 录入成功弹框-再来一题
|
||||
*/
|
||||
onAgainSuccessModal = () => {
|
||||
this.onCancel()
|
||||
}
|
||||
|
||||
/**
|
||||
* 录入成功弹框-去首页
|
||||
*/
|
||||
onGoHomeSuccessModal = () => {
|
||||
window.location.href = '/question-bank'
|
||||
}
|
||||
|
||||
/**
|
||||
* 分类选择
|
||||
* @param {*} e
|
||||
*/
|
||||
onChangeRankLabel = (firstCategoryValue, secondCategoryValue, thirdCategoryValue) => {
|
||||
this.firstCategoryValue = firstCategoryValue // 一级分类的值
|
||||
this.secondCategoryValue = secondCategoryValue // 二级分类的值
|
||||
this.thirdCategoryValue = thirdCategoryValue // 三级标签的值
|
||||
let isDisabledSubmit = this.checkData()
|
||||
this.setState({
|
||||
isDisabledSubmit
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 职级选择
|
||||
* @param {*} list
|
||||
*/
|
||||
handleChangeRank = list => {
|
||||
this.rankId = list[0]
|
||||
let isDisabledSubmit = this.checkData()
|
||||
this.setState({
|
||||
isDisabledSubmit
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 选项操作
|
||||
* @param {*} currentActive 选项列表
|
||||
* @param {*} scoreValue 分值
|
||||
* @param {*} subjectAnalysis 解析
|
||||
*/
|
||||
handleChangeOption = (currentActive, scoreValue, subjectAnalysis) => {
|
||||
this.currentActive = currentActive
|
||||
this.scoreValue = scoreValue
|
||||
this.subjectAnalysis = subjectAnalysis
|
||||
let isDisabledSubmit = this.checkData()
|
||||
this.setState({
|
||||
isDisabledSubmit
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
const { subjectName, isDisabledSubmit, isSubmit, isShowModalBox } = this.state
|
||||
const { questionsType } = this.props
|
||||
return (
|
||||
<Spin spinning={!isSubmit}>
|
||||
<Fragment>
|
||||
<div className='multiple-questions-container'>
|
||||
<div className='multiple-questions-title'>题目名称：</div>
|
||||
<Input
|
||||
placeholder='输入题目'
|
||||
style={{ height: 48, width: '100%' }}
|
||||
value={subjectName}
|
||||
maxLength={64}
|
||||
onChange={e => this.onChangeSubjectName(e)}
|
||||
/>
|
||||
</div>
|
||||
<OptionInputBox
|
||||
key='multiple-option-input'
|
||||
ref={ref => {
|
||||
this.optionInputBox = ref
|
||||
}}
|
||||
isMultiple={true}
|
||||
handleChangeOption={this.handleChangeOption}
|
||||
/>
|
||||
<RankLabelBox
|
||||
ref={this.rankLabelBox}
|
||||
subjectName={subjectName}
|
||||
onChangeRankLabel={this.onChangeRankLabel}
|
||||
handleChangeRank={this.handleChangeRank}
|
||||
/>
|
||||
<div className='multiple-questions-btns-container'>
|
||||
<div className='multiple-questions-btn' onClick={this.onCancel}>
|
||||
清空
|
||||
</div>
|
||||
<div
|
||||
className={`multiple-questions-btn multiple-questions-submit ${
|
||||
isDisabledSubmit && 'multiple-questions-disabled-submit'
|
||||
}`}
|
||||
onClick={this.onSubmit}
|
||||
>
|
||||
提交
|
||||
</div>
|
||||
</div>
|
||||
<RepeatContentBox
|
||||
isShowModalBox={isShowModalBox}
|
||||
repeatQuestionsType={questionsType}
|
||||
repeatInfo={this.repeatInfo}
|
||||
handleSubmitRepeatModal={this.onSubmitRepeatModal}
|
||||
handleCancelRepeatModal={this.onCancelRepeatModal}
|
||||
/>
|
||||
</Fragment>
|
||||
</Spin>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,52 +1,52 @@
|
||||
.multiple-questions-container {
|
||||
width: 1000px;
|
||||
// width: 1000px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 24px;
|
||||
padding-top: 36px;
|
||||
// label名字title
|
||||
.multiple-questions-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 24px;
|
||||
padding-top: 36px;
|
||||
// label名字title
|
||||
.multiple-questions-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
width: 140px;
|
||||
line-height: 40px;
|
||||
font-size: 16px;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
&:before {
|
||||
display: inline-block;
|
||||
margin-right: 4px;
|
||||
margin-top: 1px;
|
||||
color: #f5222d;
|
||||
font-size: 16px;
|
||||
content: '*';
|
||||
}
|
||||
justify-content: flex-end;
|
||||
width: 140px;
|
||||
line-height: 40px;
|
||||
font-size: 16px;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
&:before {
|
||||
display: inline-block;
|
||||
margin-right: 4px;
|
||||
margin-top: 1px;
|
||||
color: #f5222d;
|
||||
font-size: 16px;
|
||||
content: '*';
|
||||
}
|
||||
}
|
||||
}
|
||||
.multiple-questions-btns-container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
margin: 20px auto;
|
||||
width: 952px;
|
||||
.multiple-questions-btn {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
margin: 20px auto;
|
||||
width: 952px;
|
||||
.multiple-questions-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 150px;
|
||||
height: 40px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.multiple-questions-submit {
|
||||
margin-left: 40px;
|
||||
background-color: #4390f7;
|
||||
color: #fff;
|
||||
border: 1px solid #4390f7;
|
||||
}
|
||||
.multiple-questions-disabled-submit {
|
||||
opacity: 0.5;
|
||||
}
|
||||
justify-content: center;
|
||||
width: 150px;
|
||||
height: 40px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.multiple-questions-submit {
|
||||
margin-left: 40px;
|
||||
background-color: #4390f7;
|
||||
color: #fff;
|
||||
border: 1px solid #4390f7;
|
||||
}
|
||||
.multiple-questions-disabled-submit {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
import { CloseCircleFilled } from '@ant-design/icons'
|
||||
import { debounce } from '@utils'
|
||||
import { Input, Select, Tooltip, message } from 'antd'
|
||||
import _ from 'lodash'
|
||||
import React, { Component, Fragment } from 'react'
|
||||
import React, { Component, Fragment, createRef } from 'react'
|
||||
import { optionLetter } from '../../constant'
|
||||
import KindEditor from '../kind-editor'
|
||||
import QuestionEditor from '../question-editor'
|
||||
|
||||
import './index.less'
|
||||
const { TextArea } = Input
|
||||
const { Option } = Select
|
||||
@@ -49,7 +51,8 @@ export default class OptionInputBox extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
kindEditor = KindEditor | null
|
||||
// kindEditor = KindEditor | null
|
||||
kindEditor = createRef()
|
||||
subjectAnswer = '' // 选项内容
|
||||
|
||||
/**
|
||||
@@ -98,10 +101,10 @@ export default class OptionInputBox extends Component {
|
||||
*/
|
||||
onChangeOptEditor = (index, type) => () => {
|
||||
let { optionList } = this.state
|
||||
this.kindEditor && this.kindEditor.onClear()
|
||||
if (type === 'submit') {
|
||||
_.set(optionList, [index, 'label'], !!this.subjectAnswer ? this.subjectAnswer : defalutLabel)
|
||||
}
|
||||
this.kindEditor && this.kindEditor.current.onClear()
|
||||
_.set(optionList, [index, 'isShowEditor'], false)
|
||||
this.subjectAnswer = ''
|
||||
this.setState(
|
||||
@@ -131,7 +134,7 @@ export default class OptionInputBox extends Component {
|
||||
optionList
|
||||
},
|
||||
() => {
|
||||
this.kindEditor && this.kindEditor.onCashBack()
|
||||
this.kindEditor && this.kindEditor.current.onCashBack()
|
||||
}
|
||||
)
|
||||
})
|
||||
@@ -140,7 +143,7 @@ export default class OptionInputBox extends Component {
|
||||
* 富文本编辑器
|
||||
* @param {*} e
|
||||
*/
|
||||
onChangeEditor = index => e => {
|
||||
onChangeEditor = e => {
|
||||
this.subjectAnswer = e
|
||||
}
|
||||
|
||||
@@ -318,7 +321,7 @@ export default class OptionInputBox extends Component {
|
||||
<div className='option-input-item-delete'>
|
||||
{listLen > showDeleteLength && (
|
||||
<Tooltip title='删除选项' onClick={this.onChangeAddOption(index, 'del')}>
|
||||
<img className='option-input-item-delete-icon' src='' />
|
||||
<CloseCircleFilled style={{ fontSize: '18px' }} />
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
@@ -331,15 +334,7 @@ export default class OptionInputBox extends Component {
|
||||
style={{ marginTop: 19 }}
|
||||
>
|
||||
<div className='option-input-editor'>
|
||||
<KindEditor
|
||||
ref={ref => {
|
||||
this.kindEditor = ref
|
||||
}}
|
||||
bodyHeight={145}
|
||||
borderRadius={12}
|
||||
onChange={this.onChangeEditor(index)}
|
||||
cashBackText={isShowTip ? '' : item.label}
|
||||
/>
|
||||
<QuestionEditor onChange={this.onChangeEditor} ref={this.kindEditor} />
|
||||
<div className='option-input-editor-btns'>
|
||||
<Tooltip title='取消后内容将不会更新到选项框内'>
|
||||
<div
|
||||
@@ -395,7 +390,7 @@ export default class OptionInputBox extends Component {
|
||||
defaultActiveFirstOption={false}
|
||||
value={currentActiveList}
|
||||
placeholder='请选择'
|
||||
style={{ minWidth: isMultiple ? '64px' : '68px', marginLeft: 4 }}
|
||||
style={{ minWidth: isMultiple ? '84px' : '88px', marginLeft: 4 }}
|
||||
onChange={this.onChangeSelect}
|
||||
>
|
||||
{isJudge
|
||||
|
||||
@@ -1,77 +1,82 @@
|
||||
import '@wangeditor/editor/dist/css/style.css' // 引入 css
|
||||
|
||||
import React, {
|
||||
useState, useEffect, forwardRef,
|
||||
useImperativeHandle,
|
||||
} from 'react'
|
||||
import { Editor, Toolbar } from '@wangeditor/editor-for-react'
|
||||
|
||||
import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react'
|
||||
|
||||
// 当前菜单排序和分组
|
||||
|
||||
function MyEditor(props, ref) {
|
||||
// editor 实例
|
||||
const [editor, setEditor] = useState(null)
|
||||
// editor 实例
|
||||
const [editor, setEditor] = useState(null)
|
||||
|
||||
// 编辑器内容
|
||||
const [html, setHtml] = useState('<p></p>')
|
||||
|
||||
// 编辑器内容
|
||||
const [html, setHtml] = useState('<p></p>')
|
||||
// 工具栏配置
|
||||
const toolbarConfig = {
|
||||
excludeKeys: ['group-image', 'group-video']
|
||||
}
|
||||
|
||||
// 编辑器配置
|
||||
const editorConfig = {
|
||||
placeholder: '请输入内容...'
|
||||
}
|
||||
|
||||
// 工具栏配置
|
||||
const toolbarConfig = {
|
||||
excludeKeys: [
|
||||
'group-image', 'group-video'
|
||||
]
|
||||
const changeValue = html => {
|
||||
setHtml(html)
|
||||
props.onChange(html)
|
||||
}
|
||||
|
||||
const onClear = () => setHtml('')
|
||||
|
||||
/**
|
||||
* 回现代码
|
||||
*/
|
||||
const onCashBack = () => {
|
||||
let { cashBackText } = props
|
||||
if (!!!cashBackText) {
|
||||
return
|
||||
}
|
||||
setHtml(`${cashBackText}`)
|
||||
// editor.fo;
|
||||
}
|
||||
|
||||
// 编辑器配置
|
||||
const editorConfig = {
|
||||
placeholder: '请输入内容...',
|
||||
// 此处注意useImperativeHandle方法的的第一个参数是目标元素的ref引用
|
||||
useImperativeHandle(ref, () => ({
|
||||
// onCallback 就是暴露给父组件的方法
|
||||
onClear,
|
||||
onCashBack
|
||||
}))
|
||||
|
||||
// 及时销毁 editor ，重要！
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (editor == null) return
|
||||
editor.destroy()
|
||||
setEditor(null)
|
||||
}
|
||||
}, [editor])
|
||||
|
||||
|
||||
const changeValue = (html) => {
|
||||
setHtml(html)
|
||||
props.onChange(html)
|
||||
}
|
||||
|
||||
const onClear = () => setHtml('')
|
||||
// 此处注意useImperativeHandle方法的的第一个参数是目标元素的ref引用
|
||||
useImperativeHandle(ref, () => ({
|
||||
// onCallback 就是暴露给父组件的方法
|
||||
onClear
|
||||
}));
|
||||
|
||||
// 及时销毁 editor ，重要！
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (editor == null) return
|
||||
editor.destroy()
|
||||
setEditor(null)
|
||||
}
|
||||
}, [editor])
|
||||
|
||||
return (
|
||||
<>
|
||||
<div style={{ border: '1px solid #ccc', zIndex: 100 }}>
|
||||
<Toolbar
|
||||
editor={editor}
|
||||
defaultConfig={toolbarConfig}
|
||||
mode="default"
|
||||
style={{ borderBottom: '1px solid #ccc' }}
|
||||
/>
|
||||
<Editor
|
||||
defaultConfig={editorConfig}
|
||||
value={html}
|
||||
onCreated={setEditor}
|
||||
onChange={editor => changeValue(editor.getHtml())}
|
||||
mode="default"
|
||||
style={{ height: '300px', overflowY: 'scroll' }}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
return (
|
||||
<>
|
||||
<div style={{ border: '1px solid #ccc', zIndex: 100 }}>
|
||||
<Toolbar
|
||||
editor={editor}
|
||||
defaultConfig={toolbarConfig}
|
||||
mode='default'
|
||||
style={{ borderBottom: '1px solid #ccc' }}
|
||||
/>
|
||||
<Editor
|
||||
defaultConfig={editorConfig}
|
||||
value={html}
|
||||
onCreated={setEditor}
|
||||
onChange={editor => changeValue(editor.getHtml())}
|
||||
mode='default'
|
||||
style={{ height: '300px', overflowY: 'scroll' }}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default forwardRef(MyEditor)
|
||||
export default forwardRef(MyEditor)
|
||||
|
||||
@@ -1,234 +1,190 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import { Modal, Tooltip } from 'antd';
|
||||
import { letterList, judgeList } from '../../constant';
|
||||
import './index.less';
|
||||
import { Modal, Tooltip } from 'antd'
|
||||
import React, { Fragment } from 'react'
|
||||
import { judgeList, letterList } 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 { isShowModalBox, repeatInfo, repeatQuestionsType } = props
|
||||
/**
|
||||
* 确认录入
|
||||
*/
|
||||
const onSubmitRepeatModal = e => {
|
||||
props.handleSubmitRepeatModal && props.handleSubmitRepeatModal()
|
||||
}
|
||||
/**
|
||||
* 取消录入
|
||||
*/
|
||||
const onCancelRepeatModal = () => {
|
||||
props.handleCancelRepeatModal && props.handleCancelRepeatModal()
|
||||
}
|
||||
|
||||
// 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)
|
||||
}
|
||||
}
|
||||
|
||||
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 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">
|
||||
/**
|
||||
* 展示重复内容-单选/多选
|
||||
* @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
|
||||
className='repeat-subject-text'
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: item.optionContent
|
||||
}}
|
||||
></div>
|
||||
</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>
|
||||
)}
|
||||
{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 (
|
||||
<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>
|
||||
);
|
||||
<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'
|
||||
open={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>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,338 +1,365 @@
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import { Input, Modal, message, Spin } from 'antd';
|
||||
import _ from 'lodash';
|
||||
import req from '@utils/request';
|
||||
import { debounce } from '@utils';
|
||||
import KindEditor from '../kind-editor';
|
||||
import RankLabelBox from '../rank-label-box';
|
||||
import OptionInputBox from '../option-input-box';
|
||||
import RepeatContentBox from '../repeat-content-box';
|
||||
import { apiName } from '../../constant';
|
||||
import './index.less';
|
||||
const defalutLabel = '请使用富文本编辑器输入选项内容';
|
||||
import { debounce } from '@utils'
|
||||
import req from '@utils/request'
|
||||
import { Input, Modal, Spin, message } from 'antd'
|
||||
import React, { Component, Fragment, createRef } from 'react'
|
||||
import { apiName } from '../../constant'
|
||||
import OptionInputBox from '../option-input-box'
|
||||
import RankLabelBox from '../rank-label-box'
|
||||
import RepeatContentBox from '../repeat-content-box'
|
||||
import './index.less'
|
||||
const defalutLabel = '请使用富文本编辑器输入选项内容'
|
||||
export default class SingleQuestions extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
subjectName: '', // 题目
|
||||
isDisabledSubmit: true, //是否禁止输入
|
||||
isShowModalBox: false, // 是否展示重复率弹框
|
||||
isSubmit: true, // 是否支持提交
|
||||
};
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
subjectName: '', // 题目
|
||||
isDisabledSubmit: true, //是否禁止输入
|
||||
isShowModalBox: false, // 是否展示重复率弹框
|
||||
isSubmit: true // 是否支持提交
|
||||
}
|
||||
kindEditor = KindEditor | null;
|
||||
rankLabelBox = RankLabelBox | null;
|
||||
optionInputBox = OptionInputBox | null;
|
||||
}
|
||||
rankLabelBox = createRef()
|
||||
|
||||
currentActive = []; // 选项列表
|
||||
scoreValue = ''; // 分数
|
||||
subjectAnalysis = ''; //试题解析
|
||||
rankId = 1; //职级
|
||||
subjectAnswer = ''; // 选项内容
|
||||
optionInputBox = OptionInputBox | null
|
||||
|
||||
firstCategoryValue = ''; // 一级分类的值
|
||||
secondCategoryValue = []; // 二级分类的值
|
||||
thirdCategoryValue = []; // 三级标签的值
|
||||
repeatInfo = {}; // 重复率
|
||||
currentActive = [] // 选项列表
|
||||
scoreValue = '' // 分数
|
||||
subjectAnalysis = '' //试题解析
|
||||
rankId = 1 //职级
|
||||
subjectAnswer = '' // 选项内容
|
||||
|
||||
/**
|
||||
* 输入题目
|
||||
* @param {*} e
|
||||
*/
|
||||
onChangeSubjectName = (e) => {
|
||||
let str = e.target.value.trim();
|
||||
this.setState(
|
||||
{
|
||||
subjectName: str,
|
||||
},
|
||||
() => {
|
||||
this.rankLabelBox.getThirdCategoryList();
|
||||
let isDisabledSubmit = this.checkData();
|
||||
this.setState({
|
||||
isDisabledSubmit,
|
||||
});
|
||||
}
|
||||
);
|
||||
};
|
||||
firstCategoryValue = '' // 一级分类的值
|
||||
secondCategoryValue = [] // 二级分类的值
|
||||
thirdCategoryValue = [] // 三级标签的值
|
||||
repeatInfo = {} // 重复率
|
||||
|
||||
/**
|
||||
* 一次确认录入
|
||||
*/
|
||||
onSubmit = debounce(() => {
|
||||
const { subjectName, isDisabledSubmit, isSubmit } = this.state;
|
||||
if (isDisabledSubmit || !isSubmit) {
|
||||
return;
|
||||
}
|
||||
/**
|
||||
* 输入题目
|
||||
* @param {*} e
|
||||
*/
|
||||
onChangeSubjectName = e => {
|
||||
let str = e.target.value.trim()
|
||||
this.setState(
|
||||
{
|
||||
subjectName: str
|
||||
},
|
||||
() => {
|
||||
// this.rankLabelBox.getThirdCategoryList();
|
||||
let isDisabledSubmit = this.checkData()
|
||||
this.setState({
|
||||
isSubmit: false,
|
||||
});
|
||||
let params = {
|
||||
subjectName: subjectName,
|
||||
difficulty: this.rankId,
|
||||
subjectType: 1,
|
||||
subjectScore: this.scoreValue,
|
||||
subjectParse: this.subjectAnalysis,
|
||||
categoryIds: this.secondCategoryValue,
|
||||
labelIds: this.thirdCategoryValue,
|
||||
optionList: this.currentActive,
|
||||
};
|
||||
console.log('单选题录入 ----', params);
|
||||
req({
|
||||
method: 'post',
|
||||
data: params,
|
||||
url: apiName.addInterviewSubject,
|
||||
isDisabledSubmit
|
||||
})
|
||||
.then((res) => {
|
||||
this.repeatInfo = {};
|
||||
if (res.data && res.data.insertStatus) {
|
||||
this.setState(
|
||||
{
|
||||
isSubmit: true,
|
||||
},
|
||||
() => {
|
||||
this.successModalConfirm();
|
||||
}
|
||||
);
|
||||
} else if (!res.data.insertStatus) {
|
||||
this.repeatInfo = {
|
||||
repeatDocId: res.data.docId, // 重复题目id
|
||||
repeatRate: res.data.repeatRate, // 重复率
|
||||
repeatSubjectName: res.data.subjectName, // 重复题目
|
||||
repeatOptionList: res.data.optionList, // 重复列表项
|
||||
repeatSetterErp: res.data.subjectSetterErp, // 出题人erp
|
||||
repeatSetterName: res.data.subjectSetterName, // 出题人姓名
|
||||
};
|
||||
this.setState({
|
||||
isShowModalBox: true,
|
||||
isSubmit: true,
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
this.setState({
|
||||
isSubmit: true,
|
||||
});
|
||||
console.log(err);
|
||||
});
|
||||
});
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 校验是否支持点击按钮
|
||||
* @returns
|
||||
*/
|
||||
checkData = () => {
|
||||
const { subjectName } = this.state;
|
||||
let list = this.currentActive.filter((item) => item.optionContent === defalutLabel);
|
||||
let isDisabledSubmit = false;
|
||||
if (
|
||||
!!!subjectName ||
|
||||
list.length > 0 ||
|
||||
!!!this.firstCategoryValue ||
|
||||
this.secondCategoryValue.length <= 0 ||
|
||||
this.thirdCategoryValue.length <= 0 ||
|
||||
!!!this.scoreValue
|
||||
) {
|
||||
isDisabledSubmit = true;
|
||||
}
|
||||
return isDisabledSubmit;
|
||||
};
|
||||
|
||||
/**
|
||||
* 取消
|
||||
*/
|
||||
onCancel = () => {
|
||||
this.currentActive = []; // 选项列表
|
||||
this.scoreValue = ''; // 分数
|
||||
this.subjectAnalysis = ''; //试题解析
|
||||
this.rankId = 1;
|
||||
this.subjectAnswer = ''; // 选项内容
|
||||
this.firstCategoryValue = ''; // 一级分类的值
|
||||
this.secondCategoryValue = []; // 二级分类的值
|
||||
this.thirdCategoryValue = []; // 三级标签的值
|
||||
this.kindEditor && this.kindEditor.onClear();
|
||||
this.rankLabelBox.initRankLabel();
|
||||
this.optionInputBox.handleClearOption();
|
||||
this.repeatInfo = {};
|
||||
this.setState({
|
||||
subjectName: '',
|
||||
isShowModalBox: false,
|
||||
isSubmit: true, // 是否支持提交
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 重复率弹框-确认录入
|
||||
*/
|
||||
onSubmitRepeatModal = debounce(
|
||||
() => {
|
||||
let params = {
|
||||
docId: this.repeatInfo.repeatDocId,
|
||||
};
|
||||
req({
|
||||
method: 'post',
|
||||
data: params,
|
||||
url: apiName.addRepeatInterviewSubject,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.data) {
|
||||
this.successModalConfirm();
|
||||
} else {
|
||||
message.info('请再次确认');
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
message.error('请再次确认');
|
||||
});
|
||||
},
|
||||
300,
|
||||
true
|
||||
);
|
||||
|
||||
/**
|
||||
* 重复率弹框-取消录入
|
||||
*/
|
||||
onCancelRepeatModal = () => {
|
||||
this.repeatInfo = {};
|
||||
this.setState({
|
||||
isShowModalBox: false,
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 录入成功的弹框
|
||||
*/
|
||||
successModalConfirm = () => {
|
||||
Modal.confirm({
|
||||
title: (
|
||||
<div
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
color: 'rgba(60, 110, 238, 1)',
|
||||
fontSize: 16,
|
||||
}}>
|
||||
录入成功！贡献榜火力值 + 1
|
||||
</div>
|
||||
),
|
||||
closable: false,
|
||||
maskClosable: false,
|
||||
icon: ' ',
|
||||
onOk: this.onAgainSuccessModal,
|
||||
onCancel: this.onGoHomeSuccessModal,
|
||||
okText: '再录一题',
|
||||
cancelText: '去首页',
|
||||
className: 'questions-success-modal-confirm',
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 录入成功弹框-再来一题
|
||||
*/
|
||||
onAgainSuccessModal = () => {
|
||||
this.onCancel();
|
||||
};
|
||||
|
||||
/**
|
||||
* 录入成功弹框-去首页
|
||||
*/
|
||||
onGoHomeSuccessModal = () => {
|
||||
window.location.href = '/cms-supplier/question-bank';
|
||||
};
|
||||
|
||||
/**
|
||||
* 分类选择
|
||||
* @param {*} e
|
||||
*/
|
||||
onChangeRankLabel = (firstCategoryValue, secondCategoryValue, thirdCategoryValue) => {
|
||||
this.firstCategoryValue = firstCategoryValue; // 一级分类的值
|
||||
this.secondCategoryValue = secondCategoryValue; // 二级分类的值
|
||||
this.thirdCategoryValue = thirdCategoryValue; // 三级标签的值
|
||||
let isDisabledSubmit = this.checkData();
|
||||
this.setState({
|
||||
isDisabledSubmit,
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 职级选择
|
||||
* @param {*} list
|
||||
*/
|
||||
handleChangeRank = (list) => {
|
||||
this.rankId = list[0];
|
||||
let isDisabledSubmit = this.checkData();
|
||||
this.setState({
|
||||
isDisabledSubmit,
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 选项操作
|
||||
* @param {*} currentActive 选项列表
|
||||
* @param {*} scoreValue 分值
|
||||
* @param {*} subjectAnalysis 解析
|
||||
*/
|
||||
handleChangeOption = (currentActive, scoreValue, subjectAnalysis) => {
|
||||
this.currentActive = currentActive;
|
||||
this.scoreValue = scoreValue;
|
||||
this.subjectAnalysis = subjectAnalysis;
|
||||
let isDisabledSubmit = this.checkData();
|
||||
this.setState({
|
||||
isDisabledSubmit,
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { subjectName, isDisabledSubmit, isSubmit, isShowModalBox } = this.state;
|
||||
const { questionsType } = this.props;
|
||||
return (
|
||||
<Spin spinning={!isSubmit}>
|
||||
<Fragment>
|
||||
<div className="single-questions-container">
|
||||
<div className="single-questions-title">题目名称：</div>
|
||||
<Input
|
||||
placeholder="输入题目"
|
||||
style={{ height: 48, width: '100%' }}
|
||||
value={subjectName}
|
||||
maxLength={64}
|
||||
onChange={(e) => this.onChangeSubjectName(e)}
|
||||
/>
|
||||
</div>
|
||||
<OptionInputBox
|
||||
key="single-option-input"
|
||||
ref={(ref) => {
|
||||
this.optionInputBox = ref;
|
||||
}}
|
||||
handleChangeOption={this.handleChangeOption}
|
||||
/>
|
||||
<RankLabelBox
|
||||
ref={(ref) => {
|
||||
this.rankLabelBox = ref;
|
||||
}}
|
||||
subjectName={subjectName}
|
||||
onChangeRankLabel={this.onChangeRankLabel}
|
||||
handleChangeRank={this.handleChangeRank}
|
||||
/>
|
||||
<div className="single-questions-btns-container">
|
||||
<div className="single-questions-btn" onClick={this.onCancel}>
|
||||
清空
|
||||
</div>
|
||||
<div
|
||||
className={`single-questions-btn single-questions-submit ${isDisabledSubmit && 'single-questions-disabled-submit'
|
||||
}`}
|
||||
onClick={this.onSubmit}>
|
||||
提交
|
||||
</div>
|
||||
</div>
|
||||
<RepeatContentBox
|
||||
isShowModalBox={isShowModalBox}
|
||||
repeatQuestionsType={questionsType}
|
||||
repeatInfo={this.repeatInfo}
|
||||
handleSubmitRepeatModal={this.onSubmitRepeatModal}
|
||||
handleCancelRepeatModal={this.onCancelRepeatModal}
|
||||
/>
|
||||
</Fragment>
|
||||
</Spin>
|
||||
);
|
||||
/**
|
||||
* 一次确认录入
|
||||
*/
|
||||
onSubmit = debounce(() => {
|
||||
const { subjectName, isDisabledSubmit, isSubmit } = this.state
|
||||
if (isDisabledSubmit || !isSubmit) {
|
||||
return
|
||||
}
|
||||
}
|
||||
if (!isSubmit) {
|
||||
return
|
||||
}
|
||||
if (!!!subjectName) {
|
||||
message.warning('请输入题目名称')
|
||||
return
|
||||
}
|
||||
if (!this.currentActive.length) {
|
||||
message.warning('请录入答案')
|
||||
return
|
||||
}
|
||||
if (!!!this.firstCategoryValue) {
|
||||
message.warning('请选择一级分类')
|
||||
return
|
||||
}
|
||||
if (this.secondCategoryValue.length <= 0) {
|
||||
message.warning('请选择二级分类')
|
||||
return
|
||||
}
|
||||
if (this.thirdCategoryValue.length <= 0) {
|
||||
message.warning('请选择三级标签')
|
||||
return
|
||||
}
|
||||
this.setState({
|
||||
isSubmit: false
|
||||
})
|
||||
let params = {
|
||||
subjectName: subjectName,
|
||||
subjectDifficult: this.rankId,
|
||||
subjectType: 1,
|
||||
subjectScore: this.scoreValue,
|
||||
subjectParse: this.subjectAnalysis,
|
||||
categoryIds: this.secondCategoryValue.filter(item => item.active).map(t => t.id),
|
||||
labelIds: this.thirdCategoryValue.filter(item => item.active).map(t => t.id),
|
||||
optionList: this.currentActive
|
||||
}
|
||||
req({
|
||||
method: 'post',
|
||||
data: params,
|
||||
url: apiName.add
|
||||
})
|
||||
.then(res => {
|
||||
// this.repeatInfo = {}
|
||||
// if (res.data && res.data.insertStatus) {
|
||||
// this.setState(
|
||||
// {
|
||||
// isSubmit: true
|
||||
// },
|
||||
// () => {
|
||||
// this.successModalConfirm()
|
||||
// }
|
||||
// )
|
||||
// } else if (!res.data.insertStatus) {
|
||||
// this.repeatInfo = {
|
||||
// repeatDocId: res.data.docId, // 重复题目id
|
||||
// repeatRate: res.data.repeatRate, // 重复率
|
||||
// repeatSubjectName: res.data.subjectName, // 重复题目
|
||||
// repeatOptionList: res.data.optionList, // 重复列表项
|
||||
// repeatSetterErp: res.data.subjectSetterErp, // 出题人erp
|
||||
// repeatSetterName: res.data.subjectSetterName // 出题人姓名
|
||||
// }
|
||||
// this.setState({
|
||||
// isShowModalBox: true,
|
||||
// isSubmit: true
|
||||
// })
|
||||
// }
|
||||
this.setState(
|
||||
{
|
||||
isSubmit: true
|
||||
},
|
||||
() => {
|
||||
this.successModalConfirm()
|
||||
}
|
||||
)
|
||||
})
|
||||
.catch(err => {
|
||||
this.setState({
|
||||
isSubmit: true
|
||||
})
|
||||
console.log(err)
|
||||
})
|
||||
})
|
||||
|
||||
/**
|
||||
* 校验是否支持点击按钮
|
||||
* @returns
|
||||
*/
|
||||
checkData = () => {
|
||||
const { subjectName } = this.state
|
||||
let list = this.currentActive.filter(item => item.optionContent === defalutLabel)
|
||||
let isDisabledSubmit = false
|
||||
if (
|
||||
!!!subjectName ||
|
||||
list.length > 0 ||
|
||||
!!!this.firstCategoryValue ||
|
||||
this.secondCategoryValue.length <= 0 ||
|
||||
this.thirdCategoryValue.length <= 0 ||
|
||||
!!!this.scoreValue
|
||||
) {
|
||||
isDisabledSubmit = true
|
||||
}
|
||||
return isDisabledSubmit
|
||||
}
|
||||
|
||||
/**
|
||||
* 取消
|
||||
*/
|
||||
onCancel = () => {
|
||||
this.currentActive = [] // 选项列表
|
||||
this.scoreValue = '' // 分数
|
||||
this.subjectAnalysis = '' //试题解析
|
||||
this.rankId = 1
|
||||
this.subjectAnswer = '' // 选项内容
|
||||
this.firstCategoryValue = '' // 一级分类的值
|
||||
this.secondCategoryValue = [] // 二级分类的值
|
||||
this.thirdCategoryValue = [] // 三级标签的值
|
||||
this.rankLabelBox.current.initRankLabel()
|
||||
this.optionInputBox.handleClearOption()
|
||||
this.repeatInfo = {}
|
||||
this.setState({
|
||||
subjectName: '',
|
||||
isShowModalBox: false,
|
||||
isSubmit: true // 是否支持提交
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 重复率弹框-确认录入
|
||||
*/
|
||||
onSubmitRepeatModal = debounce(
|
||||
() => {
|
||||
let params = {
|
||||
docId: this.repeatInfo.repeatDocId
|
||||
}
|
||||
req({
|
||||
method: 'post',
|
||||
data: params,
|
||||
url: apiName.addRepeatInterviewSubject
|
||||
})
|
||||
.then(res => {
|
||||
if (res.data) {
|
||||
this.successModalConfirm()
|
||||
} else {
|
||||
message.info('请再次确认')
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
message.error('请再次确认')
|
||||
})
|
||||
},
|
||||
300,
|
||||
true
|
||||
)
|
||||
|
||||
/**
|
||||
* 重复率弹框-取消录入
|
||||
*/
|
||||
onCancelRepeatModal = () => {
|
||||
this.repeatInfo = {}
|
||||
this.setState({
|
||||
isShowModalBox: false
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 录入成功的弹框
|
||||
*/
|
||||
successModalConfirm = () => {
|
||||
Modal.confirm({
|
||||
title: (
|
||||
<div
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
color: 'rgba(60, 110, 238, 1)',
|
||||
fontSize: 16
|
||||
}}
|
||||
>
|
||||
录入成功！贡献榜火力值 + 1
|
||||
</div>
|
||||
),
|
||||
closable: false,
|
||||
maskClosable: false,
|
||||
icon: ' ',
|
||||
onOk: this.onAgainSuccessModal,
|
||||
onCancel: this.onGoHomeSuccessModal,
|
||||
okText: '再录一题',
|
||||
cancelText: '去首页',
|
||||
className: 'questions-success-modal-confirm'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 录入成功弹框-再来一题
|
||||
*/
|
||||
onAgainSuccessModal = () => {
|
||||
this.onCancel()
|
||||
}
|
||||
|
||||
/**
|
||||
* 录入成功弹框-去首页
|
||||
*/
|
||||
onGoHomeSuccessModal = () => {
|
||||
window.location.href = '/question-bank'
|
||||
}
|
||||
|
||||
/**
|
||||
* 分类选择
|
||||
* @param {*} e
|
||||
*/
|
||||
onChangeRankLabel = (firstCategoryValue, secondCategoryValue, thirdCategoryValue) => {
|
||||
this.firstCategoryValue = firstCategoryValue // 一级分类的值
|
||||
this.secondCategoryValue = secondCategoryValue // 二级分类的值
|
||||
this.thirdCategoryValue = thirdCategoryValue // 三级标签的值
|
||||
let isDisabledSubmit = this.checkData()
|
||||
this.setState({
|
||||
isDisabledSubmit
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 职级选择
|
||||
* @param {*} list
|
||||
*/
|
||||
handleChangeRank = list => {
|
||||
this.rankId = list[0]
|
||||
let isDisabledSubmit = this.checkData()
|
||||
this.setState({
|
||||
isDisabledSubmit
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 选项操作
|
||||
* @param {*} currentActive 选项列表
|
||||
* @param {*} scoreValue 分值
|
||||
* @param {*} subjectAnalysis 解析
|
||||
*/
|
||||
handleChangeOption = (currentActive, scoreValue, subjectAnalysis) => {
|
||||
this.currentActive = currentActive
|
||||
this.scoreValue = scoreValue
|
||||
this.subjectAnalysis = subjectAnalysis
|
||||
let isDisabledSubmit = this.checkData()
|
||||
this.setState({
|
||||
isDisabledSubmit
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
const { subjectName, isDisabledSubmit, isSubmit, isShowModalBox } = this.state
|
||||
const { questionsType } = this.props
|
||||
return (
|
||||
<Spin spinning={!isSubmit}>
|
||||
<Fragment>
|
||||
<div className='single-questions-container'>
|
||||
<div className='single-questions-title'>题目名称：</div>
|
||||
<Input
|
||||
placeholder='输入题目'
|
||||
style={{ height: 48, width: '100%' }}
|
||||
value={subjectName}
|
||||
maxLength={64}
|
||||
onChange={e => this.onChangeSubjectName(e)}
|
||||
/>
|
||||
</div>
|
||||
<OptionInputBox
|
||||
key='single-option-input'
|
||||
ref={ref => {
|
||||
this.optionInputBox = ref
|
||||
}}
|
||||
handleChangeOption={this.handleChangeOption}
|
||||
/>
|
||||
<RankLabelBox
|
||||
ref={this.rankLabelBox}
|
||||
subjectName={subjectName}
|
||||
onChangeRankLabel={this.onChangeRankLabel}
|
||||
handleChangeRank={this.handleChangeRank}
|
||||
/>
|
||||
<div className='single-questions-btns-container'>
|
||||
<div className='single-questions-btn' onClick={this.onCancel}>
|
||||
清空
|
||||
</div>
|
||||
<div
|
||||
className={`single-questions-btn single-questions-submit ${
|
||||
isDisabledSubmit && 'single-questions-disabled-submit'
|
||||
}`}
|
||||
onClick={this.onSubmit}
|
||||
>
|
||||
提交
|
||||
</div>
|
||||
</div>
|
||||
<RepeatContentBox
|
||||
isShowModalBox={isShowModalBox}
|
||||
repeatQuestionsType={questionsType}
|
||||
repeatInfo={this.repeatInfo}
|
||||
handleSubmitRepeatModal={this.onSubmitRepeatModal}
|
||||
handleCancelRepeatModal={this.onCancelRepeatModal}
|
||||
/>
|
||||
</Fragment>
|
||||
</Spin>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,53 +1,53 @@
|
||||
.single-questions-container {
|
||||
width: 1000px;
|
||||
// width: 1000px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 24px;
|
||||
padding-top: 36px;
|
||||
// label名字title
|
||||
.single-questions-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 24px;
|
||||
padding-top: 36px;
|
||||
// label名字title
|
||||
.single-questions-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
width: 140px;
|
||||
line-height: 40px;
|
||||
font-size: 16px;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
&:before {
|
||||
display: inline-block;
|
||||
margin-right: 4px;
|
||||
margin-top: 1px;
|
||||
color: #f5222d;
|
||||
font-size: 16px;
|
||||
content: '*';
|
||||
}
|
||||
justify-content: flex-end;
|
||||
width: 140px;
|
||||
line-height: 40px;
|
||||
font-size: 16px;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
&:before {
|
||||
display: inline-block;
|
||||
margin-right: 4px;
|
||||
margin-top: 1px;
|
||||
color: #f5222d;
|
||||
font-size: 16px;
|
||||
content: '*';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.single-questions-btns-container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
margin: 20px auto;
|
||||
width: 952px;
|
||||
.single-questions-btn {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
margin: 20px auto;
|
||||
width: 952px;
|
||||
.single-questions-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 150px;
|
||||
height: 40px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.single-questions-submit {
|
||||
margin-left: 40px;
|
||||
background-color: #4390f7;
|
||||
color: #fff;
|
||||
border: 1px solid #4390f7;
|
||||
}
|
||||
.single-questions-disabled-submit {
|
||||
opacity: 0.5;
|
||||
}
|
||||
justify-content: center;
|
||||
width: 150px;
|
||||
height: 40px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.single-questions-submit {
|
||||
margin-left: 40px;
|
||||
background-color: #4390f7;
|
||||
color: #fff;
|
||||
border: 1px solid #4390f7;
|
||||
}
|
||||
.single-questions-disabled-submit {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,27 +1,29 @@
|
||||
import React from 'react';
|
||||
import { Affix } from 'antd';
|
||||
import { RightOutlined } from '@ant-design/icons';
|
||||
import './index.less';
|
||||
import { RightOutlined } from '@ant-design/icons'
|
||||
import { Affix } from 'antd'
|
||||
import React from 'react'
|
||||
import './index.less'
|
||||
|
||||
export default function UploadLeftLayout(props) {
|
||||
return (
|
||||
<Affix offsetTop={150}>
|
||||
<div className="upload-left-layout">
|
||||
{props.layoutList.map((item, index) => {
|
||||
return (
|
||||
<div
|
||||
className={`upload-left-layout-item ${item.active ? 'upload-left-layout-item-active' : ''
|
||||
}`}
|
||||
onClick={() => {
|
||||
props.onChange(index);
|
||||
}}
|
||||
key={`upload_left_layout_${item.id}`}>
|
||||
{item.title}
|
||||
<RightOutlined style={{ marginLeft: 54 }} />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
return (
|
||||
<Affix offsetTop={150}>
|
||||
<div className='upload-left-layout'>
|
||||
{props.layoutList.map((item, index) => {
|
||||
return (
|
||||
<div
|
||||
className={`upload-left-layout-item ${
|
||||
item.active ? 'upload-left-layout-item-active' : ''
|
||||
}`}
|
||||
onClick={() => {
|
||||
props.onChange(index)
|
||||
}}
|
||||
key={`upload_left_layout_${item.id}`}
|
||||
>
|
||||
{item.title}
|
||||
<RightOutlined style={{ marginLeft: 54 }} />
|
||||
</div>
|
||||
</Affix>
|
||||
);
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</Affix>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -18,6 +18,7 @@
|
||||
background: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(208, 212, 222, 1);
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.upload-left-layout-item-active {
|
||||
color: rgba(60, 110, 238, 1);
|
||||
|
||||
Reference in New Issue
Block a user