feats

src/components/TestQuestions/index.jsx

@@ -1,32 +1,63 @@
-import React, { useState } from 'react';
-import { Button, Row, Col, Checkbox, Radio, Input, Space } from 'antd';
-import WangEditor from '@/components/WangEditor';
+import React, { useEffect, useState } from 'react';
+import { Button, Row, Col, Checkbox, Radio, Input, Space, notification } from 'antd';
+// import WangEditor from '@/components/WangEditor';
+
+const RedRequire = () => <i style={{ color: 'red' }}>*</i>
+
+const defaultData = {
+  title: undefined,
+  question: undefined,
+  answerType: 'radio',
+  correctAnswers: undefined,
+  optionA: undefined,
+  optionB: undefined,
+  optionC: undefined,
+  optionD: undefined,
+}
 
 export default (props) => {
-  const [formData, setFormData] = useState({
-    question: undefined,
-    answerType: 'radio',
-    correctAnswers: undefined,
-    optionA: undefined,
-    optionB: undefined,
-    optionC: undefined,
-    optionD: undefined,
-  });
-
-  // const [answerTypeValue, setAnswerTypeValue] = useState([])
+  const [formData, setFormData] = useState(defaultData);
+
+  const [correctAnswers, setCorrectAnswers] = useState([])
 
   const handleFormChange = (field) => (e) => {
     const value = e && e.target ? e.target.value : e;
-    console.log('------111--->', field, e, value);
     setFormData({
       ...formData,
       [field]: value,
     });
   };
 
-  const handleCorrectAnswers = () => {};
+  const handleCorrectAnswers = (e) => {
+    if (formData.answerType === 'radio' || formData.answerType === 'switch') {
+      setCorrectAnswers([e.target.value])
+    } else {
+      setCorrectAnswers(e && e.length > 0 ? e : [])
+    }
+  };
 
-  const handleSubmit = () => {};
+  const handleSubmit = () => {
+    if (!formData.title) {
+      notification.warning({ message: '请填写考题' })
+      return
+    }
+    if (!formData.optionA && !formData.optionB && !formData.optionC && !formData.optionD) {
+      notification.warning({ message: '请填写选项' })
+      return
+    }
+    if (!formData.answerType) {
+      notification.warning({ message: '请设置题型' })
+      return
+    }
+    if (!formData.correctAnswers) {
+      notification.warning({ message: '请设置正确答案' })
+      return
+    }
+
+    if (props.onSubmit) {
+      props.onSubmit(formData)
+    }
+  };
 
   const handleCancel = () => {
     if (props.onCancel) {
@@ -34,104 +65,121 @@ export default (props) => {
     }
   };
 
-  const answerTypeDict = [
-    { value: 'switch', label: '判断' },
-    { value: 'radio', label: '单选' },
-    { value: 'checkbox', label: '多选' },
-  ];
+  const answerTypeDict = Object.keys(props.answerTypeDict).map((key) => ({ value: key, label: props.answerTypeDict[key] }));
+
+  useEffect(() => {
+    formData.correctAnswers = (correctAnswers || []).join(',')
+  }, [correctAnswers, formData])
+
+  useEffect(() => {
+    setFormData(props.value || defaultData)
+    if (props.value?.correctAnswers) {
+      setCorrectAnswers(props.value.correctAnswers.split(','))
+    }
+  }, [props.value])
 
   return (
     <div>
       <Space size="large" direction="vertical" style={{ width: '100%' }}>
         <section>
-          <h3>试题:</h3>
-          <WangEditor value={formData.question} onChange={handleFormChange('question')} />
+          <h3><RedRequire />题型:</h3>
+          <Radio.Group
+            options={answerTypeDict}
+            value={formData.answerType}
+            onChange={handleFormChange('answerType')}
+          />
         </section>
 
         <section>
-          <h3>选项:</h3>
+          <h3><RedRequire />考题:</h3>
+          <Input placeholder="不能超过 300 字" value={formData.title} onChange={handleFormChange('title')} />
+        </section>
+
+        {/* <section>
+          <h3>详细内容:</h3>
+          <WangEditor
+            height={120}
+            value={formData.question}
+            onChange={handleFormChange('question')}
+          />
+        </section> */}
+
+        <section>
+          <h3><RedRequire />选项:</h3>
           <Space size="large" direction="vertical" style={{ width: '100%' }}>
             <Row gutter="24">
               <Col span={12}>
-                <Input addonBefore="A" onChange={handleFormChange('optionA')} />
-              </Col>
-              <Col span={12}>
-                <Input addonBefore="B" onChange={handleFormChange('optionB')} />
-              </Col>
-            </Row>
-            <Row gutter="24">
-              <Col span={12}>
-                <Input addonBefore="C" onChange={handleFormChange('optionC')} />
+                <Input addonBefore="A" value={formData.optionA} onChange={handleFormChange('optionA')} />
               </Col>
               <Col span={12}>
-                <Input addonBefore="D" onChange={handleFormChange('optionD')} />
+                <Input addonBefore="B" value={formData.optionB} onChange={handleFormChange('optionB')} />
               </Col>
             </Row>
+            {
+              formData.answerType !== 'switch' && (
+                <Row gutter="24">
+                  <Col span={12}>
+                    <Input addonBefore="C" value={formData.optionC} onChange={handleFormChange('optionC')} />
+                  </Col>
+                  <Col span={12}>
+                    <Input addonBefore="D" value={formData.optionD} onChange={handleFormChange('optionD')} />
+                  </Col>
+                </Row>
+              )
+            }
           </Space>
         </section>
 
         <section>
-          <Row gutter="24">
-            <Col span={12}>
-              <h3>题型:</h3>
-              <Radio.Group
-                options={answerTypeDict}
-                value={formData.answerType}
-                onChange={handleFormChange('answerType')}
-              />
-            </Col>
-            <Col span={12}>
-              <h3>正确答案:</h3>
-              {formData.answerType === 'switch' && (
-                <Radio.Group onChange={handleCorrectAnswers} style={{ width: '100%' }}>
-                  <Row gutter="12">
-                    <Col span={6}>
-                      <Radio value="A">是</Radio>
-                    </Col>
-                    <Col span={6}>
-                      <Radio value="B">否</Radio>
-                    </Col>
-                  </Row>
-                </Radio.Group>
-              )}
-              {formData.answerType === 'radio' && (
-                <Radio.Group onChange={handleCorrectAnswers} style={{ width: '100%' }}>
-                  <Row gutter="12">
-                    <Col span={6}>
-                      <Radio value="A">A</Radio>
-                    </Col>
-                    <Col span={6}>
-                      <Radio value="B">B</Radio>
-                    </Col>
-                    <Col span={6}>
-                      <Radio value="C">C</Radio>
-                    </Col>
-                    <Col span={6}>
-                      <Radio value="D">D</Radio>
-                    </Col>
-                  </Row>
-                </Radio.Group>
-              )}
-              {formData.answerType === 'checkbox' && (
-                <Checkbox.Group onChange={handleCorrectAnswers} style={{ width: '100%' }}>
-                  <Row gutter="12">
-                    <Col span={6}>
-                      <Checkbox value="A">A</Checkbox>
-                    </Col>
-                    <Col span={6}>
-                      <Checkbox value="B">B</Checkbox>
-                    </Col>
-                    <Col span={6}>
-                      <Checkbox value="C">C</Checkbox>
-                    </Col>
-                    <Col span={6}>
-                      <Checkbox value="D">D</Checkbox>
-                    </Col>
-                  </Row>
-                </Checkbox.Group>
-              )}
-            </Col>
-          </Row>
+          <h3><RedRequire />正确答案:</h3>
+          {formData.answerType === 'switch' && (
+            <Radio.Group value={correctAnswers[0]} onChange={handleCorrectAnswers} style={{ width: '100%' }}>
+              <Row gutter="12">
+                <Col span={6}>
+                  <Radio value="A">是</Radio>
+                </Col>
+                <Col span={6}>
+                  <Radio value="B">否</Radio>
+                </Col>
+              </Row>
+            </Radio.Group>
+          )}
+          {formData.answerType === 'radio' && (
+            <Radio.Group value={correctAnswers[0]} onChange={handleCorrectAnswers} style={{ width: '100%' }}>
+              <Row gutter="12">
+                <Col span={6}>
+                  <Radio value="A">A</Radio>
+                </Col>
+                <Col span={6}>
+                  <Radio value="B">B</Radio>
+                </Col>
+                <Col span={6}>
+                  <Radio value="C">C</Radio>
+                </Col>
+                <Col span={6}>
+                  <Radio value="D">D</Radio>
+                </Col>
+              </Row>
+            </Radio.Group>
+          )}
+          {formData.answerType === 'checkbox' && (
+            <Checkbox.Group value={correctAnswers} onChange={handleCorrectAnswers} style={{ width: '100%' }}>
+              <Row gutter="12">
+                <Col span={6}>
+                  <Checkbox value="A">A</Checkbox>
+                </Col>
+                <Col span={6}>
+                  <Checkbox value="B">B</Checkbox>
+                </Col>
+                <Col span={6}>
+                  <Checkbox value="C">C</Checkbox>
+                </Col>
+                <Col span={6}>
+                  <Checkbox value="D">D</Checkbox>
+                </Col>
+              </Row>
+            </Checkbox.Group>
+          )}
         </section>
 
         <section>

src/components/WangEditor/WangEditor.jsx

@@ -1,114 +1,50 @@
-import React, { useState, useRef, useEffect, useCallback } from 'react';
-import E from 'wangeditor';
+import React, { useRef, useEffect } from 'react';
+
 // import PreviewMenu from './PreviewMenu'
-import Preview from './Preview';
-import { uploadImage } from '@/utils/uploadFile';
+// import Preview from './Preview';
+import initEditor from './initEditor';
 
 export default (props) => {
   const ref = useRef();
-  const editorRef = useRef();
-  const [preview, setPreview] = useState(false);
+  const inited = useRef(false);
+  // const [preview, setPreview] = useState(false);
   // const [content, setContent] = useState()
+  const updateContent= useRef()
 
-  const inited = useRef(false);
-  const handleChange = useCallback(
-    (html) => {
+  const editorConfig = useRef({
+    onchange: (html) => {
       if ((inited.current || html) && typeof props.onChange === 'function') {
         inited.current = true;
         props.onChange(html);
       }
     },
-    [props],
-  );
-
-  const initEditor = useCallback(() => {
-    const editor = new E(ref.current);
-    editorRef.current = editor;
-
-    // 取消自动 focus
-    editor.config.focus = false;
-
-    // 触发 change
-    editor.config.onchange = handleChange;
-
-    editor.config.zIndex = 100;
-
-    // 自定义图片上传
-    editor.config.uploadImgMaxLength = 1;
-    editor.config.customUploadImg = (files, insert) => {
-      if (!files.length) return;
-
-      uploadImage(files[0]).then(insert);
-    };
-
-    // 扩展预览按钮
-    // editor.menus.extend('previewMenu', PreviewMenu)
-    // PreviewMenu.preview = (html) => setPreview(true)
-
-    // 配置菜单
-    editor.config.menus = [
-      'head', // 标题
-      'bold', // 粗体
-      'fontSize', // 字号
-      'fontName', // 字体
-      'italic', // 斜体
-      'underline', // 下划线
-      'strikeThrough', // 删除线
-      'foreColor', // 文字颜色
-      'backColor', // 背景颜色
-      'list', // 列表
-      'justify', // 对齐方式
-      'quote', // 引用
-      'image', // 插入图片
-      'undo', // 撤销
-      'redo', // 重复
-      // 'previewMenu'
-    ];
-
-    // 过滤 word 字符
-    editor.config.pasteFilterStyle = false;
-    editor.config.pasteTextHandle = (ctt) => {
-      const regs = [
-        /<!--\[if [\s\S]*?endif\]-->/gi,
-        /<[a-zA-Z0-9]+:[^>]+>[^>]*<\/[a-zA-Z0-9]+:[^>]+>/gi,
-        /<[a-zA-Z0-9]+:[^>]+\/>/gi,
-        /<style>[\s\S]*?<\/style>/gi,
-        new RegExp('\u2029', 'ig'), // 替换word分隔符 序号 8233
-      ];
-
-      return regs.reduce((acc, reg) => {
-        return acc.replace(reg, '');
-      }, ctt);
-    };
-
-    editor.create();
-    editor.$textElem.attr('contenteditable', props.contenteditable !== false);
-
-    return () => editor.destroy();
-  }, [props, handleChange]);
+    height: props.height || 300,
+  })
 
   useEffect(() => {
-    initEditor();
-  }, [initEditor]);
+    const { editor, updateHtml } = initEditor (ref.current, editorConfig.current)
+    updateContent.current = updateHtml
+    return () => editor.destroy();
+  }, []);
 
   //
   useEffect(() => {
-    if (props.value && !inited.current && editorRef.current) {
+    if (props.value && !inited.current && updateContent.current) {
       inited.current = true;
-      editorRef.current.txt.html(props.value);
+      updateContent.current(props.value);
     }
   }, [props.value]);
 
   return (
     <>
       <div ref={ref} style={{ textAlign: 'left' }} />
-      <Preview
+      {/* <Preview
         width={426}
         style={{ width: '426px', height: '863px', margin: 0, padding: 0 }}
         visible={preview}
         html={props.value}
         onCancel={() => setPreview(false)}
-      />
+      /> */}
     </>
   );
 };

src/components/WangEditor/initEditor.js

@@ -0,0 +1,71 @@
+import E from 'wangeditor';
+import { uploadImage } from '@/utils/uploadFile';
+
+export default (elm, config) => {
+  const editor = new E(elm);
+
+  // 取消自动 focus
+  editor.config.focus = false;
+
+  // 触发 change
+  // editor.config.onchange = onchange;
+
+  editor.config.zIndex = 100;
+
+  // 自定义图片上传
+  editor.config.uploadImgMaxLength = 1;
+  editor.config.customUploadImg = (files, insert) => {
+    if (!files.length) return;
+
+    uploadImage(files[0]).then(insert);
+  };
+
+  // 扩展预览按钮
+  // editor.menus.extend('previewMenu', PreviewMenu)
+  // PreviewMenu.preview = (html) => setPreview(true)
+
+  // 配置菜单
+  editor.config.menus = [
+    'head', // 标题
+    'bold', // 粗体
+    'fontSize', // 字号
+    'fontName', // 字体
+    'italic', // 斜体
+    'underline', // 下划线
+    'strikeThrough', // 删除线
+    'foreColor', // 文字颜色
+    'backColor', // 背景颜色
+    'list', // 列表
+    'justify', // 对齐方式
+    'quote', // 引用
+    'image', // 插入图片
+    'undo', // 撤销
+    'redo', // 重复
+    // 'previewMenu'
+  ];
+
+  // 过滤 word 字符
+  editor.config.pasteFilterStyle = false;
+  editor.config.pasteTextHandle = (ctt) => {
+    const regs = [
+      /<!--\[if [\s\S]*?endif\]-->/gi,
+      /<[a-zA-Z0-9]+:[^>]+>[^>]*<\/[a-zA-Z0-9]+:[^>]+>/gi,
+      /<[a-zA-Z0-9]+:[^>]+\/>/gi,
+      /<style>[\s\S]*?<\/style>/gi,
+      new RegExp('\u2029', 'ig'), // 替换word分隔符 序号 8233
+    ];
+
+    return regs.reduce((acc, reg) => {
+      return acc.replace(reg, '');
+    }, ctt);
+  };
+
+  Object.assign(editor.config, config || {})
+
+  editor.create();
+  // editor.$textElem.attr('contenteditable', props.contenteditable !== false);
+  return {
+    editor,
+    updateHtml: (html) => editor.txt.html(html)
+  };
+}

src/layouts/BasicLayout.jsx

@@ -153,10 +153,10 @@ const BasicLayout = (props) => {
       }}
       menuDataRender={menuDataRender(menus)}
       rightContentRender={() => <RightContent />}
-      waterMarkProps={{
-        content: '云致科技',
-        fontColor: 'rgba(24,144,255,0.15)',
-      }}
+      // waterMarkProps={{
+      //   content: '云致科技',
+      //   fontColor: 'rgba(24,144,255,0.15)',
+      // }}
     >
       <Authorized authority={authorized.authority} noMatch={noMatch}>
         {children}

src/pages/Post/Edit/components/Answer.jsx

@@ -1,10 +1,142 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import { Drawer, Button, Row, Col, Space, notification } from 'antd';
+import ProTable from '@ant-design/pro-table';
+import request from '@/utils/request';
 import TestQuestions from '@/components/TestQuestions';
 
-export default () => {
+const answerTypeDict = {
+  switch: '判断',
+  radio: '单选题',
+  checkbox: '多选题',
+}
+
+export default (props) => {
+  const [visible, setVisible] = useState(false)
+  const tableRef = useRef()
+  const [ postTest, setPostTest ] = useState({})
+
+  const handleEdit = (item) => {
+    setVisible(true)
+    setPostTest(item)
+  }
+
+  const columns = [
+    {
+      title: '题型',
+      width: 80,
+      key: 'answerType',
+      dataIndex: 'answerType',
+      valueEnum: Object.keys(answerTypeDict).reduce((acc, key) => ({
+        ...acc,
+        [key]: { text: answerTypeDict[key] }
+      }), {}),
+    },
+    {
+      title: '考题',
+      key: 'title',
+      dataIndex: 'title',
+      ellipsis: true,
+    },
+    {
+      title: '选项',
+      width: 300,
+      key: 'optionA',
+      dataIndex: 'optionA',
+      render: (_, item) => (
+        <Space direction="vertical" style={{ width: '100%' }}>
+          <Row gutter={24}>
+            <Col span={12}>{`A. ${item.optionA}`}</Col>
+            <Col span={12}>{`B. ${item.optionB}`}</Col>
+          </Row>
+          {
+            item.answerType !== 'switch' && (
+              <Row gutter={24}>
+                <Col span={12}>{`C. ${item.optionC}`}</Col>
+                <Col span={12}>{`D. ${item.optionD}`}</Col>
+              </Row>
+            )
+          }
+        </Space>
+      )
+    },
+    {
+      title: '正确答案',
+      width: 100,
+      key: 'correctAnswers',
+      dataIndex: 'correctAnswers',
+    },
+    {
+      title: '操作',
+      width: 80,
+      key: 'option',
+      render: (_, item) => (
+        <a onClick={() => handleEdit(item)}>编辑</a>
+      )
+    },
+  ]
+
+  const actions = [
+    <Button key="add" type="primary" onClick={() => handleEdit({})}>新增</Button>,
+  ]
+
+  const requestMock = () => {
+    const postTestList = props.post.postTestList || []
+    return Promise.resolve({
+      data: postTestList,
+      success: true,
+      total: postTestList.length,
+    })
+  }
+
+  const handleSubmit = (value) => {
+    const data = {
+      ...value,
+      postId: props.post.postId,
+    }
+
+    if (!data.serialNo) {
+      // 新增
+      request('/post-test', { method: 'post', data }).then((res) => {
+        setVisible(false)
+  
+        if (props.onChange) {
+          const postTestList = props.post.postTestList || []
+          props.onChange([res].concat(postTestList))
+        }
+      }).catch((e) => {
+        notification.error({ message: e.message })
+      })
+    } else {
+      //
+    }
+  }
+
+  useEffect(() => {
+    if (tableRef.current) {
+      tableRef.current.reload()
+    }
+  }, [props.post.postTestList])
+
   return (
     <div>
-      <TestQuestions />
+      <Drawer
+        title="试题维护"
+        placement="right"
+        onClose={() => setVisible(false)}
+        visible={visible}
+        width={850}
+      >
+        <TestQuestions value={postTest} answerTypeDict={answerTypeDict} onSubmit={handleSubmit} onCancel={() => setVisible(false)} />
+      </Drawer>
+      <ProTable
+        actionRef={tableRef}
+        request={requestMock}
+        columns={columns}
+        headerTitle="题库"
+        rowKey="serialNo"
+        search={false}
+        toolBarRender={() => actions}
+      />
     </div>
   );
 };

src/pages/Post/Edit/components/Form.jsx

@@ -27,8 +27,14 @@ export default (props) => {
   }, [props.typeList]);
 
   const handleSubmit = (values) => {
-    if (!values.postId) {
-      return request('/post', { method: 'post', data: values })
+    const data = {
+      ...props.post || {},
+      ...values,
+    }
+
+    if (!data.postId) {
+      // 新增
+      return request('/post', { method: 'post', data })
         .then((res) => {
           props.onChange(res);
         })
@@ -38,8 +44,15 @@ export default (props) => {
         });
     }
 
-    // eslint-disable-next-line
-    return;
+    // 编辑
+    return request(`/post/${data.postId}`, { method: 'put', data })
+    .then((res) => {
+      props.onChange(res);
+    })
+    .catch((e) => {
+      notification.error({ message: e.message });
+      return Promise.reject(e.message);
+    });
   };
 
   const handleValueChange = (changed) => {
@@ -99,7 +112,7 @@ export default (props) => {
           </Form.Item>
         </>
       ) : (
-        <Form.Item name="videoUrl" label="图文内容" placeholder="请填写图文内容">
+        <Form.Item name="content" label="图文内容" placeholder="请填写图文内容">
           <WangEditor />
         </Form.Item>
       )}

src/pages/Post/Edit/index.jsx

@@ -18,6 +18,13 @@ const PostEdit = (props) => {
     setPost(newPost);
   };
 
+  const handlePostTestChange = (postTestList) => {
+    setPost({
+      ...post,
+      postTestList,
+    })
+  }
+
   useEffect(() => {
     setLoading(true);
     request(`/post/${id}`)
@@ -50,9 +57,7 @@ const PostEdit = (props) => {
             </Container>
           </TabPane>
           <TabPane tab="题库设置" key="2">
-            <Container>
-              <Answer />
-            </Container>
+            <Answer post={post} onChange={handlePostTestChange} />
           </TabPane>
         </Tabs>
       </Container>