|
|
|
@ -20,27 +20,24 @@ import { toStore } from 'educoder'; // 保存和读取store值
|
|
|
|
|
import QuillForEditor from '../../../../../common/quillForEditor';
|
|
|
|
|
import KnowLedge from '../../../components/knowledge';
|
|
|
|
|
const scrollIntoView = require('scroll-into-view');
|
|
|
|
|
const {jcLabel} = CONST;
|
|
|
|
|
const { jcLabel } = CONST;
|
|
|
|
|
const FormItem = Form.Item;
|
|
|
|
|
const { Option } = Select;
|
|
|
|
|
const maps = {
|
|
|
|
|
language: [
|
|
|
|
|
{ title: (<span style={{ color: 'rgba(0, 0, 0, 0.35)' }}>请选择</span>), key: '' },
|
|
|
|
|
{ title: 'C', key: 'C' },
|
|
|
|
|
{ title: 'C++', key: 'C++' },
|
|
|
|
|
{ title: 'Python', key: 'Python' },
|
|
|
|
|
{ title: 'Java', key: 'Java' }
|
|
|
|
|
],
|
|
|
|
|
difficult: [
|
|
|
|
|
{ title: (<span style={{ color: 'rgba(0, 0, 0, 0.35)' }}>请选择</span>), key: '' },
|
|
|
|
|
{ title: '简单', key: '1' },
|
|
|
|
|
{ title: '中等', key: '2'},
|
|
|
|
|
{ title: '中等', key: '2' },
|
|
|
|
|
{ title: '困难', key: '3' }
|
|
|
|
|
],
|
|
|
|
|
category: [
|
|
|
|
|
{ title: (<span style={{ color: 'rgba(0, 0, 0, 0.35)' }}>请选择</span>), key: '' },
|
|
|
|
|
{ title: '程序设计', key: '1' },
|
|
|
|
|
{ title: '算法', key: '2'}
|
|
|
|
|
{ title: '算法', key: '2' }
|
|
|
|
|
],
|
|
|
|
|
openOrNot: [
|
|
|
|
|
{ title: '公开', key: '1' },
|
|
|
|
@ -49,7 +46,7 @@ const maps = {
|
|
|
|
|
}
|
|
|
|
|
class EditTab extends React.Component {
|
|
|
|
|
|
|
|
|
|
constructor (props) {
|
|
|
|
|
constructor(props) {
|
|
|
|
|
super(props);
|
|
|
|
|
// this.editorRef = React.createRef();
|
|
|
|
|
this.scrollRef = React.createRef();
|
|
|
|
@ -61,13 +58,13 @@ class EditTab extends React.Component {
|
|
|
|
|
top: 500,
|
|
|
|
|
bottom: 20,
|
|
|
|
|
offsetTop: 0,
|
|
|
|
|
showAdd: props.tag_discipline_id || false
|
|
|
|
|
showAdd: props.tag_discipline_id || false
|
|
|
|
|
// knowledges: [],
|
|
|
|
|
// coursers: [] // 选中的课程
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
componentDidMount () {
|
|
|
|
|
componentDidMount() {
|
|
|
|
|
|
|
|
|
|
const oWrap = document.getElementById('textCase');
|
|
|
|
|
const scrollHeight = oWrap.offsetHeight;
|
|
|
|
@ -85,13 +82,32 @@ class EditTab extends React.Component {
|
|
|
|
|
// this.props.getQuestion({
|
|
|
|
|
// source: 'question'
|
|
|
|
|
// });
|
|
|
|
|
const obj = { // 测试用例参数
|
|
|
|
|
input: '',
|
|
|
|
|
output: '',
|
|
|
|
|
position: 1,
|
|
|
|
|
isAdd: true // 新增的测试用例
|
|
|
|
|
}
|
|
|
|
|
const validateObj = { // 测试用例验证参数
|
|
|
|
|
input: {
|
|
|
|
|
validateStatus: '',
|
|
|
|
|
errMsg: ''
|
|
|
|
|
},
|
|
|
|
|
output: {
|
|
|
|
|
validateStatus: '',
|
|
|
|
|
errMsg: ''
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// this.scrollRef.current.scrollTo(1000);
|
|
|
|
|
this.props.addTestCase({ testCase: obj, tcValidate: validateObj });
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// componentDidUpdate (nextProp) {
|
|
|
|
|
// console.log(nextProp);
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
componentWillUnmount (nextPro) {
|
|
|
|
|
componentWillUnmount(nextPro) {
|
|
|
|
|
this.state.scrollEl.removeEventListener('scroll', this.handleScroll, false);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
@ -101,12 +117,12 @@ class EditTab extends React.Component {
|
|
|
|
|
const tOffsetTop = oTarget.offsetTop;
|
|
|
|
|
const tOffsetHeight = oTarget.offsetHeight;
|
|
|
|
|
const scrollTop = e.target.scrollTop;
|
|
|
|
|
const { scrollHeight, offsetTop} = this.state;
|
|
|
|
|
const { scrollHeight, offsetTop } = this.state;
|
|
|
|
|
// 滚动距离 + 元素的高度 大于 offsetTop值时, 添加 fix_top 样式
|
|
|
|
|
// console.log(tOffsetTop, tOffsetHeight, scrollTop, scrollHeight, offsetTop);
|
|
|
|
|
if ((scrollTop + tOffsetHeight > tOffsetTop) && (tOffsetTop >= offsetTop)) {
|
|
|
|
|
oTarget.className = `test_demo_title fix_top`;
|
|
|
|
|
} else if ((scrollHeight + scrollTop < offsetTop) && (scrollHeight <= offsetTop)){
|
|
|
|
|
} else if ((scrollHeight + scrollTop < offsetTop) && (scrollHeight <= offsetTop)) {
|
|
|
|
|
oTarget.className = `test_demo_title`;
|
|
|
|
|
} else if ((tOffsetTop < offsetTop) && (tOffsetTop + tOffsetHeight + scrollTop) < offsetTop) {
|
|
|
|
|
oTarget.className = `test_demo_title`;
|
|
|
|
@ -169,9 +185,9 @@ class EditTab extends React.Component {
|
|
|
|
|
scrollIntoView(this.scrollRef.current);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
render () {
|
|
|
|
|
render() {
|
|
|
|
|
const { showAdd } = this.state;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const {
|
|
|
|
|
ojForm,
|
|
|
|
|
ojFormValidate,
|
|
|
|
@ -224,19 +240,19 @@ class EditTab extends React.Component {
|
|
|
|
|
const renderTestCase = () => {
|
|
|
|
|
return this.props.testCases.map((item, i) => {
|
|
|
|
|
return <AddTestDemo
|
|
|
|
|
key={`${i}`}
|
|
|
|
|
isOpen={openTestCodeIndex.includes(i)}
|
|
|
|
|
onSubmitTest={handleSubmitTest}
|
|
|
|
|
onDeleteTest={handleDeleteTest}
|
|
|
|
|
testCase={item}
|
|
|
|
|
testCaseValidate={testCasesValidate[i]}
|
|
|
|
|
index={i}
|
|
|
|
|
/>
|
|
|
|
|
});
|
|
|
|
|
key={`${i}`}
|
|
|
|
|
isOpen={openTestCodeIndex.includes(i)}
|
|
|
|
|
onSubmitTest={handleSubmitTest}
|
|
|
|
|
onDeleteTest={handleDeleteTest}
|
|
|
|
|
testCase={item}
|
|
|
|
|
testCaseValidate={testCasesValidate[i]}
|
|
|
|
|
index={i}
|
|
|
|
|
/>
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
// 添加测试用例
|
|
|
|
|
const handleAddTest = () => {
|
|
|
|
|
const {position, testCases = []} = this.props;
|
|
|
|
|
const { position, testCases = [] } = this.props;
|
|
|
|
|
if (testCases.length >= 50) {
|
|
|
|
|
notification.warning({
|
|
|
|
|
message: '提示',
|
|
|
|
@ -262,7 +278,7 @@ class EditTab extends React.Component {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// this.scrollRef.current.scrollTo(1000);
|
|
|
|
|
addTestCase({testCase: obj, tcValidate: validateObj});
|
|
|
|
|
addTestCase({ testCase: obj, tcValidate: validateObj });
|
|
|
|
|
// TODO 点击新增时,需要滚到到最底部
|
|
|
|
|
this.scrollToBottom();
|
|
|
|
|
}
|
|
|
|
@ -281,12 +297,12 @@ class EditTab extends React.Component {
|
|
|
|
|
}
|
|
|
|
|
// 编辑器配置信息
|
|
|
|
|
const quillConfig = [
|
|
|
|
|
{ header: 1}, {header: 2},
|
|
|
|
|
{ header: 1 }, { header: 2 },
|
|
|
|
|
// {size: ['12px', '14px', '16px', '18px', '20px', false]},
|
|
|
|
|
'bold', 'italic', 'underline', 'strike', // 切换按钮
|
|
|
|
|
'blockquote', 'code-block', // 代码块
|
|
|
|
|
{align: []}, { 'list': 'ordered' }, { 'list': 'bullet' }, // 列表
|
|
|
|
|
{ 'script': 'sub'}, { 'script': 'super' },
|
|
|
|
|
{ align: [] }, { 'list': 'ordered' }, { 'list': 'bullet' }, // 列表
|
|
|
|
|
{ 'script': 'sub' }, { 'script': 'super' },
|
|
|
|
|
{ 'color': [] }, { 'background': [] }, // 字体颜色与背景色
|
|
|
|
|
// {font: []},
|
|
|
|
|
'image', 'formula', // 数学公式、图片、视频
|
|
|
|
@ -297,7 +313,7 @@ class EditTab extends React.Component {
|
|
|
|
|
const renderCourseQuestion = (arrs) => {
|
|
|
|
|
const tempArr = [];
|
|
|
|
|
const sub_id = this.props.ojForm.sub_discipline_id;
|
|
|
|
|
function loop (arrs, tempArr) {
|
|
|
|
|
function loop(arrs, tempArr) {
|
|
|
|
|
arrs.forEach(item => {
|
|
|
|
|
const obj = {};
|
|
|
|
|
obj.value = item.id;
|
|
|
|
@ -341,7 +357,7 @@ class EditTab extends React.Component {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 知识点
|
|
|
|
|
const handleKnowledgeChange = (values= []) => {
|
|
|
|
|
const handleKnowledgeChange = (values = []) => {
|
|
|
|
|
const _result = [];
|
|
|
|
|
values.forEach(v => {
|
|
|
|
|
_result.push(v.id);
|
|
|
|
@ -355,11 +371,11 @@ class EditTab extends React.Component {
|
|
|
|
|
const handleAddKnowledge = (values) => {
|
|
|
|
|
// console.log('调用了新增知识点并返回了结果: ', values);
|
|
|
|
|
// 获取课程id
|
|
|
|
|
const {sub_discipline_id} = this.props.ojForm;
|
|
|
|
|
const obj = Object.assign({}, values, {sub_discipline_id})
|
|
|
|
|
const { sub_discipline_id } = this.props.ojForm;
|
|
|
|
|
const obj = Object.assign({}, values, { sub_discipline_id })
|
|
|
|
|
tagDisciplines(obj);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className={'editor_area'} id="textCase">
|
|
|
|
|
<Form className={'editor_form'}>
|
|
|
|
@ -368,7 +384,7 @@ class EditTab extends React.Component {
|
|
|
|
|
label={<span>{myLabel(jcLabel['difficult'])}</span>}
|
|
|
|
|
validateStatus={ojFormValidate.difficult.validateStatus}
|
|
|
|
|
help={ojFormValidate.difficult.errMsg}
|
|
|
|
|
colon={ false }
|
|
|
|
|
colon={false}
|
|
|
|
|
>
|
|
|
|
|
<Select onChange={this.handleChangeDifficult} value={`${ojForm.difficult}`}>
|
|
|
|
|
{getOptions('difficult')}
|
|
|
|
@ -380,7 +396,7 @@ class EditTab extends React.Component {
|
|
|
|
|
label={<span>{myLabel(jcLabel['sub_discipline_id'], '合理的课程分类有利于快速检索')}</span>}
|
|
|
|
|
validateStatus={ojFormValidate.sub_discipline_id.validateStatus}
|
|
|
|
|
help={ojFormValidate.sub_discipline_id.errMsg}
|
|
|
|
|
colon={ false }
|
|
|
|
|
colon={false}
|
|
|
|
|
>
|
|
|
|
|
{/* <Select onChange={this.handleChangeCategory} value={`${ojForm.category}`}>
|
|
|
|
|
{getOptions('category')}
|
|
|
|
@ -390,11 +406,11 @@ class EditTab extends React.Component {
|
|
|
|
|
expandTrigger="hover"
|
|
|
|
|
onChange={this.handleChangeCategory}
|
|
|
|
|
/> */}
|
|
|
|
|
{ renderCourseQuestion(courseQuestions)}
|
|
|
|
|
{renderCourseQuestion(courseQuestions)}
|
|
|
|
|
</FormItem>
|
|
|
|
|
|
|
|
|
|
<FormItem
|
|
|
|
|
colon={ false }
|
|
|
|
|
colon={false}
|
|
|
|
|
className='input_area flex_100'
|
|
|
|
|
label={<span>{myLabel(jcLabel['knowledge'], '', 'nostar')}</span>}
|
|
|
|
|
>
|
|
|
|
@ -412,9 +428,9 @@ class EditTab extends React.Component {
|
|
|
|
|
label={<span>{myLabel(jcLabel['timeLimit'], '程序允许时间限制时长,单位:秒')}</span>}
|
|
|
|
|
validateStatus={ojFormValidate.timeLimit.validateStatus}
|
|
|
|
|
help={ojFormValidate.timeLimit.errMsg}
|
|
|
|
|
colon={ false }
|
|
|
|
|
colon={false}
|
|
|
|
|
>
|
|
|
|
|
<InputNumber value={ojForm.timeLimit} min={0} max={5} style={{ width: '100%' }} onChange={this.handleTimeLimitChange}/>
|
|
|
|
|
<InputNumber value={ojForm.timeLimit} min={0} max={5} style={{ width: '100%' }} onChange={this.handleTimeLimitChange} />
|
|
|
|
|
</FormItem>
|
|
|
|
|
|
|
|
|
|
<FormItem
|
|
|
|
@ -422,9 +438,9 @@ class EditTab extends React.Component {
|
|
|
|
|
label={<span>{myLabel(jcLabel['language'])}</span>}
|
|
|
|
|
validateStatus={ojFormValidate.language.validateStatus}
|
|
|
|
|
help={ojFormValidate.language.errMsg}
|
|
|
|
|
colon={ false }
|
|
|
|
|
colon={false}
|
|
|
|
|
>
|
|
|
|
|
<Select onChange={this.handleLanguageChange} value={`${ojForm.language}`}>
|
|
|
|
|
<Select onChange={this.handleLanguageChange} defaultValue={'C'} value={`${ojForm.language}`}>
|
|
|
|
|
{getOptions('language')}
|
|
|
|
|
</Select>
|
|
|
|
|
</FormItem>
|
|
|
|
@ -434,7 +450,7 @@ class EditTab extends React.Component {
|
|
|
|
|
label={<span>{myLabel(jcLabel['name'])}</span>}
|
|
|
|
|
validateStatus={ojFormValidate.name.validateStatus}
|
|
|
|
|
help={ojFormValidate.name.errMsg}
|
|
|
|
|
colon={ false }
|
|
|
|
|
colon={false}
|
|
|
|
|
>
|
|
|
|
|
<Input
|
|
|
|
|
maxLength={60}
|
|
|
|
@ -450,42 +466,30 @@ class EditTab extends React.Component {
|
|
|
|
|
label={<span>{myLabel(jcLabel['description'])}</span>}
|
|
|
|
|
validateStatus={ojFormValidate.description.validateStatus}
|
|
|
|
|
help={ojFormValidate.description.errMsg}
|
|
|
|
|
colon={ false }
|
|
|
|
|
colon={false}
|
|
|
|
|
>
|
|
|
|
|
<QuillForEditor
|
|
|
|
|
autoFocus={true}
|
|
|
|
|
style={{ height: '200px' }}
|
|
|
|
|
placeholder="请输入描述信息"
|
|
|
|
|
onContentChange={handleContentChange}
|
|
|
|
|
options={quillConfig}
|
|
|
|
|
value={ojForm.description}
|
|
|
|
|
/>
|
|
|
|
|
autoFocus={true}
|
|
|
|
|
style={{ height: '200px' }}
|
|
|
|
|
placeholder="请输入描述信息"
|
|
|
|
|
onContentChange={handleContentChange}
|
|
|
|
|
options={quillConfig}
|
|
|
|
|
value={ojForm.description}
|
|
|
|
|
/>
|
|
|
|
|
</FormItem>
|
|
|
|
|
|
|
|
|
|
{/* <FormItem
|
|
|
|
|
className={`input_area flex_50 flex_50_right`}
|
|
|
|
|
label={<span>{myLabel(jcLabel['openOrNot'], '社区:您的任务将向整个社会公开')}</span>}
|
|
|
|
|
validateStatus={ojFormValidate.openOrNot.validateStatus}
|
|
|
|
|
help={ojFormValidate.openOrNot.errMsg}
|
|
|
|
|
colon={ false }
|
|
|
|
|
>
|
|
|
|
|
<Select onChange={this.handleChangeOpenOrNot} value={`${ojForm.openOrNot}`}>
|
|
|
|
|
{getOptions('openOrNot')}
|
|
|
|
|
</Select>
|
|
|
|
|
</FormItem> */}
|
|
|
|
|
|
|
|
|
|
</Form>
|
|
|
|
|
|
|
|
|
|
{/* 添加测试用例 */}
|
|
|
|
|
<div className={'test_demo_title'} ref={this.headerRef}>
|
|
|
|
|
<h2>测试用例</h2>
|
|
|
|
|
<h3>测试用例</h3>
|
|
|
|
|
<Button type="primary" ghost onClick={handleAddTest}>添加测试用例</Button>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="test_demo_ctx">
|
|
|
|
|
{ renderTestCase() }
|
|
|
|
|
{renderTestCase()}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div style={ {float:"left", clear: "both", background: 'red' } } ref={this.scrollRef}></div>
|
|
|
|
|
<div style={{ float: "left", clear: "both", background: 'red' }} ref={this.scrollRef}></div>
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|