add knowledge

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

@@ -4,13 +4,12 @@
  * @Github: 
  * @Date: 2019-12-30 13:51:19
  * @LastEditors  : tangjiang
- * @LastEditTime : 2020-01-07 11:08:58
+ * @LastEditTime : 2020-01-07 14:19:39
  */
 import './index.scss';
 import React, { useState, useEffect } from 'react';
-import { Select, notification } from 'antd';
-import { CNotificationHOC} from 'educoder';
-// import {} from 'antd';
+import { Select, notification, Modal, Form, Input, Button } from 'antd';
+
 const { Option } = Select;
 
 function KnowLedge (props) {
@@ -18,7 +17,8 @@ function KnowLedge (props) {
   const {
     options = [], // 下拉选项
     values = [], // 已选择的下拉项
-    onChange // 获取选择的值
+    onChange, // 获取选择的值
+    form
   } = props;
 
   useEffect(() => {
@@ -39,9 +39,12 @@ function KnowLedge (props) {
   const [selectOptions, setSelectOptions] = useState(options);
   // 已选择的下拉项
   const [selectValue, setSelectValue] = useState([]);
+  const [visible, setVisible] = useState(false);
   //
   const [value] = useState([]);
 
+  const { getFieldDecorator } = form;
+  const FormItem = Form.Item;
   // 渲染下拉选项
   const renderOptions = (options = []) => {
     return options.map((opt, i) => (
@@ -117,27 +120,71 @@ function KnowLedge (props) {
   
   // 添加知识点
   const handleAddKnowledge = () => {
-
+    setVisible(true);
   };
 
+  const handleResetForm = () => {
+    form.resetFields();
+    setVisible(false);
+  }
+
+  const handleSubmitForm = (e) => {
+    e.preventDefault();
+    form.validateFieldsAndScroll((err, values) => {
+      if (err) {
+        return;
+      }
+      setVisible(false);
+      console.log(values);
+    })
+  }  
+
   const _styles = {
     display: selectOptions.length > 0 || selectValue.length > 0 ? 'inline-block' : 'none'
   };
 
   return (
-    <div className="knowledge-select-area">
-      { renderSelect(selectOptions) }
-      {/* 渲染下拉选择项 */}
-      <div className="knowledge-result">
-        <i
-          style={_styles}
-          className="iconfont icon-roundaddfill icon-add-knowledge"
-          onClick={handleAddKnowledge}
-        ></i>
-        { renderResult(selectValue) }        
+    <React.Fragment>
+      <div className="knowledge-select-area">
+        { renderSelect(selectOptions) }
+        {/* 渲染下拉选择项 */}
+        <div className="knowledge-result">
+          {/* <i
+            style={_styles}
+            className="iconfont icon-roundaddfill icon-add-knowledge"
+            onClick={handleAddKnowledge}
+          ></i> */}
+          { renderResult(selectValue) }        
+        </div>
       </div>
-    </div>
+
+      <Modal
+        closable={false}
+        title="新增知识点"
+        visible={visible}
+        footer={null}
+      >
+        <Form className="knowledge-form">
+          <FormItem>
+            {
+              getFieldDecorator('name', {
+                rules: [{
+                  required: true, message: '知识点名称不能为空'
+                }]
+              })(
+                <Input />
+              )
+            }
+          </FormItem>
+          <FormItem style={{ textAlign: 'center' }}>
+            <Button style={{ marginRight: '20px' }} onClick={handleResetForm}>取消</Button>
+            <Button type="primary" onClick={handleSubmitForm}>确定</Button>
+          </FormItem>
+        </Form>
+      </Modal>
+    </React.Fragment>
+    
   );
 }
 
-export default CNotificationHOC()(KnowLedge);
+export default Form.create()(KnowLedge);

public/react/src/modules/developer/components/knowledge/index.scss

@@ -48,3 +48,9 @@
     }
   }
 }
+
+.knowledge-form{
+  .ant-form-explain{
+    padding: 0;
+  }
+}

public/react/src/services/ojService.js

@@ -4,7 +4,7 @@
  * @Github: 
  * @Date: 2019-11-20 10:55:38
  * @LastEditors  : tangjiang
- * @LastEditTime : 2019-12-30 09:44:56
+ * @LastEditTime : 2020-01-07 14:19:24
  */
 
 import axios from 'axios';
@@ -148,4 +148,7 @@ export async function fetchAddNotes (identifier, params) {
 export async function fetchQuestion (params) {
   const url = `/disciplines.json`;
   return axios.get(url, { params });
-}
+}
+
+// 新增选题
+export async function fetchExaminationItems () {}