add knowledge

5 years ago · 5c0d2de5be
parent aec7cf9eed
commit 5c0d2de5be
6 changed files with 117 additions and 24 deletions
--- a/public/react/src/modules/developer/components/knowledge/index.js
+++ b/public/react/src/modules/developer/components/knowledge/index.js
@ -4,11 +4,11 @@
 * @Github: 
 * @Date: 2019-12-30 13:51:19
 * @LastEditors  : tangjiang
- * @LastEditTime : 2019-12-31 09:06:44
+ * @LastEditTime : 2019-12-31 10:42:51
 */
 import './index.scss';
 import React, { useState, useEffect } from 'react';
-import { Select } from 'antd';
+import { Select, notification } from 'antd';

 const { Option } = Select;

@ -17,6 +17,7 @@ function KnowLedge (props) {
  const {
    options = [], // 下拉选项
    values = [], // 已选择的下拉项
+    onChange // 获取选择的值
  } = props;

  useEffect(() => {
@ -46,16 +47,43 @@ function KnowLedge (props) {
      }
      return item.id !== value;
    });
+    if (tempArr.length > 50) {
+      notification.warning({
+        message: '提示',
+        description: '知识点不能超过50个'
+      });
+      return;
+    }
    setSelectValue(tempArr);
    setSelectOptions(_result);
+    // 将选择值返回
+    onChange && onChange(tempArr);
+  }
+
+  // 删除
+  const handleRemoveResult = (item) => {
+    // console.log('点击了删除按钮===>>>>', item);
+    // 将删除的值重新加入到列表中
+    const tempOptions = [...selectOptions];
+    const tempValue = selectValue.filter(t => t.id !== item.id);
+    // console.log(selectValue);
+    tempOptions.push(item);
+    setSelectOptions(tempOptions);
+    setSelectValue(tempValue);
+    // 将选择值返回
+    onChange && onChange(tempValue);
  }

  // 渲染下拉结果
  const renderResult = (arrs) => {
    return arrs.map((item) => (
-      <div className="knowledge-item" key={`item_${item.name}`}>
-        <span className="knowledge-item-txt">{item.name}</span>
-      </div>
+      <span className="knowledge-item" key={`item_${item.name}`}>
+        {item.name}
+        <span
+          onClick={() => handleRemoveResult(item)}
+          className="iconfont icon-roundclose knowledge-close"
+        ></span>
+      </span>
    ));
  }
  // 渲染下拉列表
@ -78,11 +106,7 @@ function KnowLedge (props) {
      { renderSelect(selectOptions) }
      {/* 渲染下拉选择项 */}
      <div className="knowledge-result">
-        {/* { renderResult(selectValue) } */}
-        {/* <div className="knowledge-item">1111</div> */}
-        <div className="knowledge-item">
-          <span className="knowledge-item-txt">JAVA</span>
-        </div>
+        { renderResult(selectValue) }        
      </div>
    </div>
  );
--- a/public/react/src/modules/developer/components/knowledge/index.scss
+++ b/public/react/src/modules/developer/components/knowledge/index.scss
@ -6,4 +6,37 @@
    margin-left: 5px;
    margin-top: 2px;
  }
+
+  .knowledge-result{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    // margin-top: 15px;
+
+    .knowledge-item{
+      position: relative;
+      border: 1px solid #DDDDDD;
+      border-radius: 3px;
+      padding: 10px;
+      background: #fff;
+      margin-right: 10px;
+      margin-top: 10px;
+      // margin-bottom: 10px;
+
+      .knowledge-close{
+        display: none;
+        position: absolute;
+        right: -10px;
+        top: -10px;
+        background-color: rgba(250,250,250,1);
+        cursor: pointer;
+      }
+
+      &:hover{
+        .knowledge-close{
+          display: block;
+        }
+      }
+    }
+  }
 }
--- a/public/react/src/modules/developer/newOrEditTask/leftpane/editorTab/index.js
+++ b/public/react/src/modules/developer/newOrEditTask/leftpane/editorTab/index.js
@ -4,12 +4,12 @@
 * @Github: 
 * @Date: 2019-11-20 10:35:40
 * @LastEditors  : tangjiang
- * @LastEditTime : 2019-12-30 20:18:20
+ * @LastEditTime : 2019-12-31 10:49:21
 */
 import './index.scss';
 // import 'katex/dist/katex.css';
 import React from 'react';
-import { Form, Input, Select, InputNumber, Button, Cascader } from 'antd';
+import { Form, Input, Select, InputNumber, Button, Cascader, notification } from 'antd';
 import { connect } from 'react-redux';
 import AddTestDemo from './AddTestDemo';
 // import QuillEditor from '../../../quillEditor';
@ -138,6 +138,7 @@ class EditTab extends React.Component {
    this.setState({
      knowledges: []
    });
+    // 获取当前分类下的知识点
    courseQuestions.forEach(item => {
      if (value[0] && item.id === value[0]) {
        item.sub_disciplines && item.sub_disciplines.forEach(c => {
@ -153,6 +154,7 @@ class EditTab extends React.Component {
        });
      }
    });
+    this.props.validateOjCategory(value[1] || '');
  }
  // 改变公开程序
  handleChangeOpenOrNot = (value) => {
@ -176,10 +178,10 @@ class EditTab extends React.Component {
    } = this.props;
    const {knowledges} = this.state;
    // 表单label
-    const myLabel = (name, subTitle) => {
+    const myLabel = (name, subTitle, nostar) => {
      if (subTitle) {
        return (
-          <span className={'label_text'}>
+          <span className={`label_text ${nostar}`}>
            {name}
            <span className={'label_sub_text'}>
              ({subTitle})
@ -188,7 +190,7 @@ class EditTab extends React.Component {
        )
      } else {
        return (
-          <span className={'label_text'}>{name}</span>
+          <span className={`label_text ${nostar}`}>{name}</span>
        )
      }
    };
@ -224,7 +226,14 @@ class EditTab extends React.Component {
    };
    // 添加测试用例
    const handleAddTest = () => {
-      const {position} = this.props;
+      const {position, testCases = []} = this.props;
+      if (testCases.length >= 50) {
+        notification.warning({
+          message: '提示',
+          description: '测试用例不能超过50个'
+        });
+        return;
+      }
      const obj = { // 测试用例参数
        input: '',
        output: '',
@ -324,6 +333,15 @@ class EditTab extends React.Component {
      )
    }
    
+    // 知识点
+    const handleKnowledgeChange = (values= []) => {
+      const _result = [];
+      values.forEach(v => {
+        _result.push(v.id);
+      });
+      console.log('下拉选择的值:===>>>', _result);
+    }
+    
    return (
      <div className={'editor_area'} id="textCase">
        <Form className={'editor_form'}>
@ -360,10 +378,11 @@ class EditTab extends React.Component {
          <FormItem
            colon={ false }
            className='input_area flex_100'
-            label={<span>{myLabel(jcLabel['knowledge'])}</span>}
+            label={<span>{myLabel(jcLabel['knowledge'], '', 'nostar')}</span>}
          >
            <KnowLedge 
              options={knowledges}
+              onChange={handleKnowledgeChange}
            />
          </FormItem>
          
@ -412,16 +431,13 @@ class EditTab extends React.Component {
            help={ojFormValidate.description.errMsg}
            colon={ false }
          >
-            <div style={{ marginTop: '15px'}}>
-              <QuillForEditor 
+            <QuillForEditor 
                style={{ height: '200px' }}
                placeholder="请输入描述信息" 
                onContentChange={handleContentChange}
                options={quillConfig}
                value={ojForm.description}
              />
-            </div>
-            
          </FormItem>
          
          {/* <FormItem 
--- a/public/react/src/modules/developer/newOrEditTask/leftpane/editorTab/index.scss
+++ b/public/react/src/modules/developer/newOrEditTask/leftpane/editorTab/index.scss
@ -18,6 +18,12 @@
      line-height: 1;
      content: '*';
    }
+
+    &.nostar{
+      &::before {
+        content: ''
+      }
+    }
  }
  .input_area{
    display: inline-block;
--- a/public/react/src/modules/developer/split_pane_resizer.scss
+++ b/public/react/src/modules/developer/split_pane_resizer.scss
@ -162,6 +162,19 @@
  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  background-clip: padding-box;
+
+  &::before{
+    position: absolute;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    margin-top: -12px;
+    top: 50%;
+    right: -12px;
+    font-family: 'iconfont';
+    background: gold;
+    content: '\e673';
+  }
 }
 
 .Resizer:hover {
@ -200,4 +213,4 @@
 }
 .Resizer.disabled:hover {
  border-color: transparent;
-}
+}
--- a/public/react/src/redux/actions/ojForm.js
+++ b/public/react/src/redux/actions/ojForm.js
@ -4,7 +4,7 @@
 * @Github: 
 * @Date: 2019-11-20 16:35:46
 * @LastEditors  : tangjiang
- * @LastEditTime : 2019-12-30 09:56:39
+ * @LastEditTime : 2019-12-31 10:55:48
 */
 import types from './actionTypes';
 import CONST from '../../constants';
@ -106,7 +106,8 @@ export const validateOjForm = (props, type, cb) => {
    const {ojForm, testCases, identifier, code } = getState().ojFormReducer;
    // console.log('code', code);
    /** 表单验证开始  */
-    let keys = Object.keys(ojForm);
+    // let keys = Object.keys(ojForm).filter(k => k !== '');
+    let keys = Object.keys(ojForm)
    // 循环判断每个字段是否为空
    let hasSuccess = true;
    keys.forEach(key => {