oj判断滚动

public/react/src/modules/developer/components/initTabCtx/index.js

@@ -76,8 +76,8 @@ function InitTabCtx(props, ref) {
   }, [inputValue]);
 
   const _handleTestCodeFormSubmit = (cb) => {
-    const { form } = props;
+    const {form} = props;
-    form.validateFields((err, values) => {
+    form.validateFieldsAndScroll((err, values) => {
       if (!err) { // 表单验证通过时，调用测试接口
         cb && cb(); // 调用回调函数，切换 tab
         onDebuggerCode && onDebuggerCode(values);

public/react/src/modules/developer/components/initTabCtx/index1.js

@@ -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);

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 (
+        <span className={'label_text'}>
+          {name}
+          <span className={'label_sub_text'}>
+            ({subTitle})
+          </span>
+        </span>
+      )
+    } else {
+      return (
+        <span className={'label_text'}>{name}</span>
+      )
+    }
+  };
+  // 获取下拉列表项
+  const getOptions = (key) => {
+    return maps[key].map((opt, i) => {
+      return (
+        <Option value={opt.key} key={`opt_${i}`}>{opt.title}</Option>
+      );
+    });
+  };
+  // 向外暴露的方法
+  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 (
+        <AddTestDemo
+          key={`key_${i}`}
+          onSubmitTest={handleSubmitTest}
+          onDeleteTest={handleDeleteTest}
+          testCase={item}
+          testCaseValidate={testCasesValidate[i]}
+          index={i}
+        />
+      )
+    });
+  };
+  // 提交测试用例
+  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 (
+    <div className={'editor_area'}>
+      <Form
+        hideRequiredMark={true}
+        className={'editor_form'}
+        ref={formRef}>
+        <FormItem
+          className={`input_area flex_60`}
+          label={<span>{myLabel(jcLabel['name'])}</span>}
+        >
+          {
+            getFieldDecorator('name', {
+              rules: [
+                { required: true, message: '任务名称不能为空' }
+              ],
+              initialValue: ojForm.name
+            })(<Input placeholder="请输入任务名称"/>)
+          }
+        </FormItem>
+
+        <FormItem
+          className={`input_area flex_40`}
+          label={<span>{myLabel(jcLabel['language'])}</span>}
+        >
+          {
+            getFieldDecorator('language', {
+              rules: [
+                { required: true, message: '语言不能为空' }
+              ],
+              initialValue: ojForm.language
+            })(
+              <Select>
+                {getOptions('language')}
+              </Select>)
+          }
+        </FormItem>
+
+        <FormItem
+          className={`input_area flex_100`}
+          label={<span>{myLabel(jcLabel['description'])}</span>}
+        >
+          {
+            getFieldDecorator('description', {
+              rules: [
+                { required: true, message: '描述信息不能为空' }
+              ],
+              initialValue: ojForm.description
+            })(<QuillEditor
+                style={{ height: '300px' }}
+                placeholder="请输入描述信息"
+                htmlCtx={ojForm.description}
+                onEditorChange={handleChangeDescription}
+              />)
+          }
+        </FormItem>
+
+        <FormItem
+          className={`input_area flex_50 flex_50_left`}
+          label={<span>{myLabel(jcLabel['difficult'], '任务的难易程度')}</span>}
+        >
+          {
+            getFieldDecorator('difficult', {
+              rules: [
+                { required: true, message: '难度不能为空' }
+              ],
+              initialValue: `${ojForm.difficult || ''}`
+            })(
+              <Select>
+                {getOptions('difficult')}
+              </Select>
+            )
+          }
+        </FormItem>
+
+        <FormItem
+          className={`input_area flex_50 flex_50_right`}
+          label={<span>{myLabel(jcLabel['timeLimit'], '程序允许时间限制时长，单位：秒')}</span>}
+        >
+          {
+            getFieldDecorator('timeLimit', {
+              rules: [
+                { required: true, message: '时间限制不能为空' }
+              ],
+              initialValue: ojForm.timeLimit
+            })(<InputNumber min={0} style={{ width: '100%' }} />)
+          }
+        </FormItem>
+
+        <FormItem
+          className={`input_area flex_50 flex_50_left`}
+          label={<span>{myLabel(jcLabel['category'], '任务所属分类')}</span>}
+        >
+          {
+            getFieldDecorator('category', {
+              rules: [
+                { required: true, message: '任务名称不能为空' }
+              ],
+              initialValue: `${ojForm.category || ''}`
+            })(
+              <Select>
+                {getOptions('category')}
+              </Select>
+            )
+          }
+        </FormItem>
+
+        <FormItem
+          className={`input_area flex_50 flex_50_right`}
+          label={<span>{myLabel(jcLabel['openOrNot'])}</span>}
+        >
+          {
+            getFieldDecorator('openOrNot', {
+              rules: [
+                { required: true, message: '任务名称不能为空' }
+              ],
+              initialValue: `${ojForm.openOrNot}`
+            })(
+              <Select>
+                {getOptions('openOrNot')}
+              </Select>
+            )
+          }
+        </FormItem>
+      </Form>
+      {/* 添加测试用例 */}
+      <div className="test_demo_title">
+          <h2>测试用例</h2>
+          <Button type="primary" onClick={handleAddTest}>添加测试用例</Button>
+        </div>
+        <div className="test_demo_ctx">
+          { renderTestCase() }
+        </div>
+    </div>
+  );
+}
+
+const mapStateToProps = (state) => {
+  const ojFormReducer = state.ojFormReducer;
+  const {ojForm, position, testCases, testCasesValidate} = ojFormReducer;
+  return {
+    ojForm,
+    testCases,
+    testCasesValidate,
+    position
+  };
+}
+
+const mapDispatchToProps = (dispatch) => ({
+  // 新增测试用例
+  addTestCase: (value) => dispatch(actions.addTestCase(value)),
+  // 删除测试用例
+  deleteTestCase: (value) => dispatch(actions.deleteTestCase(value)),
+})
+
+// EditTab = React.formRef(EditTab);
+// EditTab = React.forwardRef(EditTab);
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Form.create()(
+  React.forwardRef(EditTab)
+));

public/react/src/modules/developer/newOrEditTask/rightpane/initTabCtx/index.js

@@ -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);

public/react/src/modules/developer/studentStudy/rightpane/index.js

@@ -37,6 +37,17 @@ const RightPane = (props) => {
 
   const [noteClazz, setNoteClazz] = useState('editor_nodte_area');
   const [noteCount] = useState(5000);
+  // const [code, setCode] = useState(editor_code || hack.code);
+  // let initFlag = true;
+
+  // useEffect(() => {
+  //   if (editor_code) {
+  //     setEditorCode(editor_code);
+  //   } else {
+  //     setEditorCode(hack.code);
+  //   }
+  // }, [hack, editor_code]);
+
 
   const handleSubmitForm = () => {
     submitUserCode(identifier, submitInput, 'submit');
@@ -83,7 +94,7 @@ const RightPane = (props) => {
   }
 
   const handleSubmitNote = () => {
-    props.form.validateFields((err, values) => {
+    props.form.validateFieldsAndScroll((err, values) => {
       if (!err) {
         changeLoadingState(true);
         addNotes(identifier, values, function () {