m52mxtq3o
/
educoder
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix issues/28420

Browse Source
video_transcode
harry 5 years ago
parent dc1ca77e6e
commit 40881ad777
4 changed files with 72 additions and 122 deletions
Show Stats Download Patch File Download Diff File

7
public/react/src/modules/developer/components/myMonacoEditor/index.js
Unescape View File

@ -40,8 +40,6 @@ function MyMonacoEditor(props, ref) {
} = props; } = props;
const [showDrawer, setShowDrawer] = useState(false); // 控制配置滑框 const [showDrawer, setShowDrawer] = useState(false); // 控制配置滑框
// const [editCode, setEditCode] = useState('');
// const [curLang, setCurLang] = useState('C');
const [fontSize, setFontSize] = useState(() => { // 字体 const [fontSize, setFontSize] = useState(() => { // 字体
return +fromStore('oj_fontSize') || 14; return +fromStore('oj_fontSize') || 14;
}); });
@ -50,10 +48,7 @@ function MyMonacoEditor(props, ref) {
}); });
const [height, setHeight] = useState('calc(100% - 56px)'); const [height, setHeight] = useState('calc(100% - 56px)');
const editorRef = useRef(null); const editorRef = useRef(null);
console.log(language, code, '-------========----------')
// useEffect(() => {
// setEditCode(props.code || '');
// }, [props]);
useEffect(() => { useEffect(() => {
setHeight(showOrHideControl ? 'calc(100% - 378px)' : 'calc(100% - 56px)'); setHeight(showOrHideControl ? 'calc(100% - 378px)' : 'calc(100% - 56px)');

77
public/react/src/modules/developer/newOrEditTask/leftpane/editorTab/index.js
Unescape View File

@ -20,27 +20,24 @@ import { toStore } from 'educoder'; // 保存和读取store值
import QuillForEditor from '../../../../../common/quillForEditor'; import QuillForEditor from '../../../../../common/quillForEditor';
import KnowLedge from '../../../components/knowledge'; import KnowLedge from '../../../components/knowledge';
const scrollIntoView = require('scroll-into-view'); const scrollIntoView = require('scroll-into-view');
const {jcLabel} = CONST; const { jcLabel } = CONST;
const FormItem = Form.Item; const FormItem = Form.Item;
const { Option } = Select; const { Option } = Select;
const maps = { const maps = {
language: [ language: [
{ title: (<span style={{ color: 'rgba(0, 0, 0, 0.35)' }}>请选择</span>), key: '' },
{ title: 'C', key: 'C' }, { title: 'C', key: 'C' },
{ title: 'C++', key: 'C++' }, { title: 'C++', key: 'C++' },
{ title: 'Python', key: 'Python' }, { title: 'Python', key: 'Python' },
{ title: 'Java', key: 'Java' } { title: 'Java', key: 'Java' }
], ],
difficult: [ difficult: [
{ title: (<span style={{ color: 'rgba(0, 0, 0, 0.35)' }}>请选择</span>), key: '' },
{ title: '简单', key: '1' }, { title: '简单', key: '1' },
{ title: '中等', key: '2'}, { title: '中等', key: '2' },
{ title: '困难', key: '3' } { title: '困难', key: '3' }
], ],
category: [ category: [
{ title: (<span style={{ color: 'rgba(0, 0, 0, 0.35)' }}>请选择</span>), key: '' },
{ title: '程序设计', key: '1' }, { title: '程序设计', key: '1' },
{ title: '算法', key: '2'} { title: '算法', key: '2' }
], ],
openOrNot: [ openOrNot: [
{ title: '公开', key: '1' }, { title: '公开', key: '1' },
@ -49,7 +46,7 @@ const maps = {
} }
class EditTab extends React.Component { class EditTab extends React.Component {
constructor (props) { constructor(props) {
super(props); super(props);
// this.editorRef = React.createRef(); // this.editorRef = React.createRef();
this.scrollRef = React.createRef(); this.scrollRef = React.createRef();
@ -67,7 +64,7 @@ class EditTab extends React.Component {
} }
} }
componentDidMount () { componentDidMount() {
const oWrap = document.getElementById('textCase'); const oWrap = document.getElementById('textCase');
const scrollHeight = oWrap.offsetHeight; const scrollHeight = oWrap.offsetHeight;
@ -103,14 +100,14 @@ class EditTab extends React.Component {
} }
// this.scrollRef.current.scrollTo(1000); // this.scrollRef.current.scrollTo(1000);
this.props.addTestCase({testCase: obj, tcValidate: validateObj}); this.props.addTestCase({ testCase: obj, tcValidate: validateObj });
} }
// componentDidUpdate (nextProp) { // componentDidUpdate (nextProp) {
// console.log(nextProp); // console.log(nextProp);
// } // }
componentWillUnmount (nextPro) { componentWillUnmount(nextPro) {
this.state.scrollEl.removeEventListener('scroll', this.handleScroll, false); this.state.scrollEl.removeEventListener('scroll', this.handleScroll, false);
} }
@ -120,12 +117,12 @@ class EditTab extends React.Component {
const tOffsetTop = oTarget.offsetTop; const tOffsetTop = oTarget.offsetTop;
const tOffsetHeight = oTarget.offsetHeight; const tOffsetHeight = oTarget.offsetHeight;
const scrollTop = e.target.scrollTop; const scrollTop = e.target.scrollTop;
const { scrollHeight, offsetTop} = this.state; const { scrollHeight, offsetTop } = this.state;
// 滚动距离 + 元素的高度 大于 offsetTop值时， 添加 fix_top 样式 // 滚动距离 + 元素的高度 大于 offsetTop值时， 添加 fix_top 样式
// console.log(tOffsetTop, tOffsetHeight, scrollTop, scrollHeight, offsetTop); // console.log(tOffsetTop, tOffsetHeight, scrollTop, scrollHeight, offsetTop);
if ((scrollTop + tOffsetHeight > tOffsetTop) && (tOffsetTop >= offsetTop)) { if ((scrollTop + tOffsetHeight > tOffsetTop) && (tOffsetTop >= offsetTop)) {
oTarget.className = `test_demo_title fix_top`; 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`; oTarget.className = `test_demo_title`;
} else if ((tOffsetTop < offsetTop) && (tOffsetTop + tOffsetHeight + scrollTop) < offsetTop) { } else if ((tOffsetTop < offsetTop) && (tOffsetTop + tOffsetHeight + scrollTop) < offsetTop) {
oTarget.className = `test_demo_title`; oTarget.className = `test_demo_title`;
@ -188,7 +185,7 @@ class EditTab extends React.Component {
scrollIntoView(this.scrollRef.current); scrollIntoView(this.scrollRef.current);
} }
render () { render() {
const { showAdd } = this.state; const { showAdd } = this.state;
const { const {
@ -255,7 +252,7 @@ class EditTab extends React.Component {
}; };
// 添加测试用例 // 添加测试用例
const handleAddTest = () => { const handleAddTest = () => {
const {position, testCases = []} = this.props; const { position, testCases = [] } = this.props;
if (testCases.length >= 50) { if (testCases.length >= 50) {
notification.warning({ notification.warning({
message: '提示', message: '提示',
@ -281,7 +278,7 @@ class EditTab extends React.Component {
} }
// this.scrollRef.current.scrollTo(1000); // this.scrollRef.current.scrollTo(1000);
addTestCase({testCase: obj, tcValidate: validateObj}); addTestCase({ testCase: obj, tcValidate: validateObj });
// TODO 点击新增时，需要滚到到最底部 // TODO 点击新增时，需要滚到到最底部
this.scrollToBottom(); this.scrollToBottom();
} }
@ -300,12 +297,12 @@ class EditTab extends React.Component {
} }
// 编辑器配置信息 // 编辑器配置信息
const quillConfig = [ const quillConfig = [
{ header: 1}, {header: 2}, { header: 1 }, { header: 2 },
// {size: ['12px', '14px', '16px', '18px', '20px', false]}, // {size: ['12px', '14px', '16px', '18px', '20px', false]},
'bold', 'italic', 'underline', 'strike', // 切换按钮 'bold', 'italic', 'underline', 'strike', // 切换按钮
'blockquote', 'code-block', // 代码块 'blockquote', 'code-block', // 代码块
{align: []}, { 'list': 'ordered' }, { 'list': 'bullet' }, // 列表 { align: [] }, { 'list': 'ordered' }, { 'list': 'bullet' }, // 列表
{ 'script': 'sub'}, { 'script': 'super' }, { 'script': 'sub' }, { 'script': 'super' },
{ 'color': [] }, { 'background': [] }, // 字体颜色与背景色 { 'color': [] }, { 'background': [] }, // 字体颜色与背景色
// {font: []}, // {font: []},
'image', 'formula', // 数学公式、图片、视频 'image', 'formula', // 数学公式、图片、视频
@ -316,7 +313,7 @@ class EditTab extends React.Component {
const renderCourseQuestion = (arrs) => { const renderCourseQuestion = (arrs) => {
const tempArr = []; const tempArr = [];
const sub_id = this.props.ojForm.sub_discipline_id; const sub_id = this.props.ojForm.sub_discipline_id;
function loop (arrs, tempArr) { function loop(arrs, tempArr) {
arrs.forEach(item => { arrs.forEach(item => {
const obj = {}; const obj = {};
obj.value = item.id; obj.value = item.id;
@ -360,7 +357,7 @@ class EditTab extends React.Component {
} }
// 知识点 // 知识点
const handleKnowledgeChange = (values= []) => { const handleKnowledgeChange = (values = []) => {
const _result = []; const _result = [];
values.forEach(v => { values.forEach(v => {
_result.push(v.id); _result.push(v.id);
@ -374,8 +371,8 @@ class EditTab extends React.Component {
const handleAddKnowledge = (values) => { const handleAddKnowledge = (values) => {
// console.log('调用了新增知识点并返回了结果: ', values); // console.log('调用了新增知识点并返回了结果: ', values);
// 获取课程id // 获取课程id
const {sub_discipline_id} = this.props.ojForm; const { sub_discipline_id } = this.props.ojForm;
const obj = Object.assign({}, values, {sub_discipline_id}) const obj = Object.assign({}, values, { sub_discipline_id })
tagDisciplines(obj); tagDisciplines(obj);
} }
@ -387,7 +384,7 @@ class EditTab extends React.Component {
label={<span>{myLabel(jcLabel['difficult'])}</span>} label={<span>{myLabel(jcLabel['difficult'])}</span>}
validateStatus={ojFormValidate.difficult.validateStatus} validateStatus={ojFormValidate.difficult.validateStatus}
help={ojFormValidate.difficult.errMsg} help={ojFormValidate.difficult.errMsg}
colon={ false } colon={false}
> >
<Select onChange={this.handleChangeDifficult} value={`${ojForm.difficult}`}> <Select onChange={this.handleChangeDifficult} value={`${ojForm.difficult}`}>
{getOptions('difficult')} {getOptions('difficult')}
@ -399,7 +396,7 @@ class EditTab extends React.Component {
label={<span>{myLabel(jcLabel['sub_discipline_id'], '合理的课程分类有利于快速检索')}</span>} label={<span>{myLabel(jcLabel['sub_discipline_id'], '合理的课程分类有利于快速检索')}</span>}
validateStatus={ojFormValidate.sub_discipline_id.validateStatus} validateStatus={ojFormValidate.sub_discipline_id.validateStatus}
help={ojFormValidate.sub_discipline_id.errMsg} help={ojFormValidate.sub_discipline_id.errMsg}
colon={ false } colon={false}
> >
{/* <Select onChange={this.handleChangeCategory} value={`${ojForm.category}`}> {/* <Select onChange={this.handleChangeCategory} value={`${ojForm.category}`}>
{getOptions('category')} {getOptions('category')}
@ -409,11 +406,11 @@ class EditTab extends React.Component {
expandTrigger="hover" expandTrigger="hover"
onChange={this.handleChangeCategory} onChange={this.handleChangeCategory}
/> */} /> */}
{ renderCourseQuestion(courseQuestions)} {renderCourseQuestion(courseQuestions)}
</FormItem> </FormItem>
<FormItem <FormItem
colon={ false } colon={false}
className='input_area flex_100' className='input_area flex_100'
label={<span>{myLabel(jcLabel['knowledge'], '', 'nostar')}</span>} label={<span>{myLabel(jcLabel['knowledge'], '', 'nostar')}</span>}
> >
@ -431,9 +428,9 @@ class EditTab extends React.Component {
label={<span>{myLabel(jcLabel['timeLimit'], '程序允许时间限制时长，单位：秒')}</span>} label={<span>{myLabel(jcLabel['timeLimit'], '程序允许时间限制时长，单位：秒')}</span>}
validateStatus={ojFormValidate.timeLimit.validateStatus} validateStatus={ojFormValidate.timeLimit.validateStatus}
help={ojFormValidate.timeLimit.errMsg} 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>
<FormItem <FormItem
@ -441,9 +438,9 @@ class EditTab extends React.Component {
label={<span>{myLabel(jcLabel['language'])}</span>} label={<span>{myLabel(jcLabel['language'])}</span>}
validateStatus={ojFormValidate.language.validateStatus} validateStatus={ojFormValidate.language.validateStatus}
help={ojFormValidate.language.errMsg} 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')} {getOptions('language')}
</Select> </Select>
</FormItem> </FormItem>
@ -453,7 +450,7 @@ class EditTab extends React.Component {
label={<span>{myLabel(jcLabel['name'])}</span>} label={<span>{myLabel(jcLabel['name'])}</span>}
validateStatus={ojFormValidate.name.validateStatus} validateStatus={ojFormValidate.name.validateStatus}
help={ojFormValidate.name.errMsg} help={ojFormValidate.name.errMsg}
colon={ false } colon={false}
> >
<Input <Input
maxLength={60} maxLength={60}
@ -469,7 +466,7 @@ class EditTab extends React.Component {
label={<span>{myLabel(jcLabel['description'])}</span>} label={<span>{myLabel(jcLabel['description'])}</span>}
validateStatus={ojFormValidate.description.validateStatus} validateStatus={ojFormValidate.description.validateStatus}
help={ojFormValidate.description.errMsg} help={ojFormValidate.description.errMsg}
colon={ false } colon={false}
> >
<QuillForEditor <QuillForEditor
autoFocus={true} autoFocus={true}
@ -481,18 +478,6 @@ class EditTab extends React.Component {
/> />
</FormItem> </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> </Form>
{/* 添加测试用例 */} {/* 添加测试用例 */}
@ -501,10 +486,10 @@ class EditTab extends React.Component {
<Button type="primary" ghost onClick={handleAddTest}>添加测试用例</Button> <Button type="primary" ghost onClick={handleAddTest}>添加测试用例</Button>
</div> </div>
<div className="test_demo_ctx"> <div className="test_demo_ctx">
{ renderTestCase() } {renderTestCase()}
</div> </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> </div>
) )
} }

38
public/react/src/modules/developer/newOrEditTask/rightpane/index.js
Unescape View File

@ -7,55 +7,25 @@
* @LastEditTime : 2019-12-27 19:33:50 * @LastEditTime : 2019-12-27 19:33:50
*/ */
import './index.scss'; import './index.scss';
import React, { useState, useEffect } from 'react'; import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import MyMonacoEditor from '../../components/myMonacoEditor'; import MyMonacoEditor from '../../components/myMonacoEditor';
// import ControlSetting from '../../components/controlSetting';
import actions from '../../../../redux/actions'; import actions from '../../../../redux/actions';
function RightPane(props, ref) { function RightPane(props) {
const { const { code, language = 'C', saveOjFormCode } = props;
// identifier,
code,
showCode,
language,
// onSubmitForm,
saveOjFormCode
} = props;
// let timer = null;
// 代码改变时，保存
const handleCodeChange = (updateCode) => { const handleCodeChange = (updateCode) => {
// if (props.identifier) {
// // 保存用户输入的代码
// if (!timer) {
// timer = setInterval(() => {
// clearInterval(timer);
// timer = null;
// }, 3000);
// }
// }
saveOjFormCode(updateCode); saveOjFormCode(updateCode);
} }
// 启动调试代码
// const handleDebuggerCode = (value) => {
// console.log('调用的代码调试====', value);
// }
return ( return (
<div className={'right_pane_code_wrap'}> <div className={'right_pane_code_wrap'}>
<MyMonacoEditor <MyMonacoEditor
language={language} language={language}
code={showCode} code={code}
onCodeChange={handleCodeChange} /> onCodeChange={handleCodeChange} />
{/* <ControlSetting
// identifier={identifier}
inputValue={props.input}
onSubmitForm={onSubmitForm}
// onDebuggerCode={handleDebuggerCode}
/> */}
</div> </div>
) )
} }

10
public/react/src/redux/reducers/ojFormReducer.js
Unescape View File

@ -12,9 +12,9 @@ import types from '../actions/actionTypes';
const init = { const init = {
ojForm: { ojForm: {
name: '', // 任务名称 name: '', // 任务名称
language: '', language: 'C',
description: '', description: '',
difficult: '', difficult: '1',
sub_discipline_id: '', // 方向 sub_discipline_id: '', // 方向
// category: '', // category: '',
// openOrNot: 1, // openOrNot: 1,
@ -278,7 +278,7 @@ const ojFormReducer = (state = initialState, action) => {
// 更新验证消息 // 更新验证消息
const curIOjTestValidate = state.testCasesValidate.map((tc, i) => { const curIOjTestValidate = state.testCasesValidate.map((tc, i) => {
if (i === action.payload.index) { if (i === action.payload.index) {
return Object.assign({}, tc, {input}); return Object.assign({}, tc, { input });
} }
return tc; return tc;
}); });
@ -298,7 +298,7 @@ const ojFormReducer = (state = initialState, action) => {
// 更新验证消息 // 更新验证消息
const curOOjTestValidate = state.testCasesValidate.map((tc, i) => { const curOOjTestValidate = state.testCasesValidate.map((tc, i) => {
if (i === action.payload.index) { if (i === action.payload.index) {
return Object.assign({}, tc, {output}); return Object.assign({}, tc, { output });
} }
return tc; return tc;
}); });
@ -355,7 +355,7 @@ const ojFormReducer = (state = initialState, action) => {
console.log(_p.tag_discipline_id); console.log(_p.tag_discipline_id);
return { return {
...state, ...state,
ojForm: Object.assign({}, state.ojForm, {difficult: _p.difficult, sub_discipline_id: _p.sub_discipline_id}), ojForm: Object.assign({}, state.ojForm, { difficult: _p.difficult, sub_discipline_id: _p.sub_discipline_id }),
tag_discipline_id: _p.tag_discipline_id || [] tag_discipline_id: _p.tag_discipline_id || []
} }
case types.SET_SEARCH_PARAMS: case types.SET_SEARCH_PARAMS:

Write Preview
Loading…
Cancel
Save