From 24dabf0c2a4cdd573878df01d955769bca7176c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E6=A0=91=E6=98=8E?= <775174143@qq.com>
Date: Sun, 8 Mar 2020 00:02:34 +0800
Subject: [PATCH] =?UTF-8?q?oj=E5=88=A4=E6=96=AD=E6=BB=9A=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../developer/components/initTabCtx/index.js | 4 +-
.../developer/components/initTabCtx/index1.js | 10 +-
.../leftpane/editorTab/index2.js | 334 ++++++++++++++++++
.../rightpane/initTabCtx/index.js | 10 +-
.../developer/studentStudy/rightpane/index.js | 17 +-
5 files changed, 360 insertions(+), 15 deletions(-)
create mode 100644 public/react/src/modules/developer/newOrEditTask/leftpane/editorTab/index2.js
diff --git a/public/react/src/modules/developer/components/initTabCtx/index.js b/public/react/src/modules/developer/components/initTabCtx/index.js
index 315fd7242..da0e97fe9 100644
--- a/public/react/src/modules/developer/components/initTabCtx/index.js
+++ b/public/react/src/modules/developer/components/initTabCtx/index.js
@@ -76,8 +76,8 @@ function InitTabCtx(props, ref) {
}, [inputValue]);
const _handleTestCodeFormSubmit = (cb) => {
- const { form } = props;
- form.validateFields((err, values) => {
+ const {form} = props;
+ form.validateFieldsAndScroll((err, values) => {
if (!err) { // 表单验证通过时，调用测试接口
cb && cb(); // 调用回调函数，切换 tab
onDebuggerCode && onDebuggerCode(values);
diff --git a/public/react/src/modules/developer/components/initTabCtx/index1.js b/public/react/src/modules/developer/components/initTabCtx/index1.js
index edf741c36..9c2cf099e 100644
--- a/public/react/src/modules/developer/components/initTabCtx/index1.js
+++ b/public/react/src/modules/developer/components/initTabCtx/index1.js
@@ -1,7 +1,7 @@
/*
- * @Description: 显示tab中的内容
- * @Author: tangjiang
- * @Date: 2019-11-18 10:43:03
+ * @Description: 显示tab中的内容
+ * @Author: tangjiang
+ * @Date: 2019-11-18 10:43:03
* @Last Modified by: tangjiang
* @Last Modified time: 2019-11-18 11:35:12
*/
@@ -31,7 +31,7 @@ const renderUserCase = (ctx, position, props) => {
})()
}
- {/*
{
@@ -76,7 +76,7 @@ class InitTabCtx extends PureComponent {
handleTestCodeFormSubmit = (cb) => {
const { form, debuggerCode } = this.props;
console.log(debuggerCode);
- form.validateFields((err, values) => {
+ form.validateFieldsAndScroll((err, values) => {
if (!err) { // 表单验证通过时，调用测试接口
cb && cb(); // 调用回调函数，切换 tab
console.log('表单值:', values);
diff --git a/public/react/src/modules/developer/newOrEditTask/leftpane/editorTab/index2.js b/public/react/src/modules/developer/newOrEditTask/leftpane/editorTab/index2.js
new file mode 100644
index 000000000..851262949
--- /dev/null
+++ b/public/react/src/modules/developer/newOrEditTask/leftpane/editorTab/index2.js
@@ -0,0 +1,334 @@
+/*
+ * @Description:
+ * @Author: tangjiang
+ * @Github:
+ * @Date: 2019-12-01 09:17:07
+ * @LastEditors: tangjiang
+ * @LastEditTime: 2019-12-02 16:33:35
+ */
+import 'quill/dist/quill.core.css';
+import 'quill/dist/quill.bubble.css';
+import 'quill/dist/quill.snow.css';
+import './index.scss';
+import React, { useState, useImperativeHandle, useRef, useEffect } from 'react';
+import { Form, Input, InputNumber, Button, Select } from 'antd';
+import { connect } from 'react-redux';
+import AddTestDemo from './AddTestDemo';
+import QuillEditor from '../../../quillEditor';
+import actions from '../../../../../redux/actions';
+import CONST from '../../../../../constants';
+
+const {jcLabel} = CONST;
+const { Option } = Select;
+const FormItem = Form.Item;
+
+const maps = {
+ language: [
+ { title: 'C', key: 'C' },
+ { title: 'C++', key: 'C++' },
+ { title: 'Python', key: 'Python' },
+ { title: 'Java', key: 'Java' }
+ ],
+ difficult: [
+ { title: '简单', key: '1' },
+ { title: '中等', key: '2'},
+ { title: '困难', key: '3' }
+ ],
+ category: [
+ { title: '程序设计', key: '1' },
+ { title: '算法', key: '2'}
+ ],
+ openOrNot: [
+ { title: '公开', key: '1' },
+ { title: '私有', key: '0' }
+ ]
+}
+
+function EditTab (props, ref) {
+
+ const {
+ form,
+ ojForm,
+ position,
+ testCases,
+ addTestCase,
+ deleteTestCase,
+ testCasesValidate,
+ getFormData
+ } = props;
+
+ const { getFieldDecorator } = form;
+
+ const formRef = useRef(null);
+ const [description, setDescription] = useState('');
+
+ // 获取表单label
+ const myLabel = (name, subTitle) => {
+ if (subTitle) {
+ return (
+
+ {name}
+
+ ({subTitle})
+
+
+ )
+ } else {
+ return (
+ {name}
+ )
+ }
+ };
+ // 获取下拉列表项
+ const getOptions = (key) => {
+ return maps[key].map((opt, i) => {
+ return (
+
+ );
+ });
+ };
+ // 向外暴露的方法
+ useImperativeHandle(ref, () => ({
+ validateForm () {
+ props.form.validateFieldsAndScroll((err, values) => {
+ if (!err) {
+ getFormData(() => {
+ return values;
+ });
+ } else {
+ return;
+ }
+ })
+ }
+ }));
+ // 添加测试用例
+ const handleAddTest = () => {
+ const obj = { // 测试用例参数
+ input: '',
+ output: '',
+ position: position,
+ isAdd: true // 新增的测试用例
+ }
+ const validateObj = { // 测试用例验证参数
+ input: {
+ validateStatus: '',
+ errMsg: ''
+ },
+ output: {
+ validateStatus: '',
+ errMsg: ''
+ }
+ }
+ addTestCase({testCase: obj, tcValidate: validateObj});
+ // TODO 点击新增时，需要滚到到最底部
+ // this.editorRef.current.scrollTop
+ // const oDiv = this.editorRef.current;
+ // oDiv.scrollTo(oDiv.scrollLeft, 99999);
+ // console.log(oDiv.scrollTop);
+ // oDiv.scrollTop = 99999;
+ }
+ // 渲染测试用例
+ const renderTestCase = () => {
+ return testCases.map((item, i) => {
+ return (
+
+ )
+ });
+ };
+ // 提交测试用例
+ const handleSubmitTest = (obj) => {
+ console.log('提交的测试用例: ', obj);
+ };
+ // 删除测试用例
+ const handleDeleteTest = (obj) => {
+ console.log('删除的测试用例: ', obj);
+ deleteTestCase(obj);
+ };
+ // 描述信息改变时
+ const handleChangeDescription = (value) => {
+ console.log('描述信息改变: ', value);
+ if (value) {
+ setDescription(value);
+ }
+ }
+
+ useEffect(() => {
+ if (description) {
+ props.form.setFieldsValue({
+ description: description
+ }, function () {
+ console.log('设置成功。。。');
+ });
+ }
+ }, [description]);
+
+ return (
+
+
+ {/* 添加测试用例 */}
+
+
测试用例
+
+
+
+ { renderTestCase() }
+
+