add knowledge

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" key={`item_${item.name}`}>
-        <span className="knowledge-item-txt">{item.name}</span>
+        {item.name}
-      </div>
+        <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) } */}
+        { renderResult(selectValue) }        
-        {/* <div className="knowledge-item">1111</div> */}
-        <div className="knowledge-item">
-          <span className="knowledge-item-txt">JAVA</span>
-        </div>
       </div>
     </div>
   );

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;
+        }
+      }
+    }
+  }
 }

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,7 +431,6 @@ class EditTab extends React.Component {
             help={ojFormValidate.description.errMsg}
             colon={ false }
           >
-            <div style={{ marginTop: '15px'}}>
             <QuillForEditor 
                 style={{ height: '200px' }}
                 placeholder="请输入描述信息" 
@@ -420,8 +438,6 @@ class EditTab extends React.Component {
                 options={quillConfig}
                 value={ojForm.description}
               />
-            </div>
-            
           </FormItem>
           
           {/* <FormItem 

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;

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 {

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 => {