feat: 修改刷题

2023-10-11 01:08:08 +08:00
parent 4ed48fbe2b
commit a387a61d02
18 changed files with 1045 additions and 297 deletions
--- a/src/components/category-list/index.jsx
+++ b/src/components/category-list/index.jsx
@@ -246,10 +246,10 @@ export default class CategoryList extends Component {
                            }}
                            onClick={this.onChangeCategory(categoryModuleItem.primaryCategoryId)}>
                            <div className="first-category-item-title">
-                                {categoryModuleItem.levelName}
+                                {categoryModuleItem.categoryName}
                            </div>
                            <div className="first-category-item-count">
-                                {categoryModuleItem.count}道题
+                                {categoryModuleItem.count || 50}道题
                            </div>
                        </div>
                    );
--- a/src/components/good-collection-error/constant.js
+++ b/src/components/good-collection-error/constant.js
@@ -0,0 +1,9 @@
+export const good = {
+    0: '未点赞',
+    1: '已点赞',
+};
+
+export const collection = {
+    0: '未收藏',
+    1: '已收藏',
+};
--- a/src/components/good-collection-error/index.jsx
+++ b/src/components/good-collection-error/index.jsx
@@ -0,0 +1,262 @@
+import React, { Component } from 'react'
+import { Modal, Input, Radio, message } from 'antd'
+import { HeartTwoTone, LikeTwoTone, InfoCircleTwoTone } from '@ant-design/icons'
+import { collection, good } from './constant'
+import req from '@utils/request'
+import './index.less'
+
+const { TextArea } = Input
+export default class GoodCollectionError extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      isGood: false, //是否点赞
+      isCollection: false, //是否收藏
+      goodAmount: 0, //点赞数量
+      collectionAmount: 0, //收藏数量
+      // index: 1,
+      question: [], //题目列表
+      isModal: false, //是否显示纠错弹框
+      value: 1, //纠错类型对应值
+      inputValue: '', //纠错详情内容
+      questionId: '', //题目id
+    }
+  }
+  /**纠错类型 */
+  errorType = [
+    {
+      value: 1,
+      content: '答案错误',
+    },
+    {
+      value: 2,
+      content: '题目与答案不符',
+    },
+  ]
+  componentDidMount() {
+    // this.getDetail()
+  }
+
+  getDetail() {
+    let params = {
+      subjectId: this.props.questionId,
+    }
+    req({
+      method: 'post',
+      data: params,
+      url: 'admin/question/collect/getDetail',
+    })
+      .then((res) => {
+        if (res.data) {
+          this.setState({
+            isGood: res.data.isThump,
+            goodAmount: res.data.thumpCount,
+            isCollection: res.data.isCollect,
+            collectionAmount: res.data.collectCount,
+          })
+        }
+      })
+      .catch((err) => console.log(err))
+  }
+
+  /**
+   * 点击纠错按钮
+   */
+  handleModal = () => {
+    this.setState({
+      isModal: true,
+    })
+  }
+  /**
+   * 点击弹框确认按钮
+   */
+  handleOk = () => {
+    const { value, inputValue } = this.state
+    const { questionId } = this.props
+
+    let params = {
+      subjectId: questionId,
+      errorType: value,
+      errorMsg: inputValue,
+    }
+    if (inputValue.length === 0) {
+      message.warning('请填写纠错详情!')
+    } else {
+      this.setState({
+        isModal: false,
+        inputValue: '',
+      })
+      message.success('感谢纠错，立即更改！')
+      JDreq({
+        method: 'post',
+        data: params,
+        url: '/admin/question/subjectError/add',
+      })
+    }
+  }
+  /**
+   * 点击弹框取消按钮
+   */
+  handleCancel = () => {
+    this.setState({
+      isModal: false,
+      inputValue: '',
+    })
+  }
+  /**
+   *
+   * @param {选择纠错类型} e
+   */
+  handleChangeRadio = (e) => {
+    this.setState({
+      value: e.target.value,
+    })
+  }
+  /**
+   *
+   * @param {纠错详情中填写内容} e
+   */
+  handleChangeInput = (e) => {
+    this.setState({
+      inputValue: e.target.value,
+    })
+  }
+  /**
+   *
+   * @returns 点击点赞按钮
+   */
+  handleChangeGood = () => {
+    return message.info('敬请期待')
+    const { isGood, goodAmount } = this.state
+    const { questionId } = this.props
+    let params = {
+      subjectId: questionId,
+    }
+    this.setState(
+      {
+        isGood: isGood === true ? false : true,
+        goodAmount: isGood === true ? goodAmount - 1 : goodAmount + 1,
+      },
+      () => {
+        JDreq({
+          method: 'post',
+          data: params,
+          url: 'admin/question/thump/addOrCancel',
+        }).catch((err) => console.log(err))
+      }
+    )
+  }
+  /**
+   * 点击收藏按钮
+   */
+  handleChangeCollection = () => {
+    return message.info('敬请期待')
+    const { isCollection, collectionAmount } = this.state
+    const { questionId } = this.props
+    let params = {
+      subjectId: questionId,
+    }
+    this.setState(
+      {
+        isCollection: isCollection === true ? false : true,
+        collectionAmount: isCollection === true ? collectionAmount - 1 : collectionAmount + 1,
+      },
+      () => {
+        req({
+          method: 'post',
+          data: params,
+          url: 'admin/question/collect/addOrCancel',
+        }).catch((err) => console.log(err))
+      }
+    )
+  }
+  render() {
+    const { isCollection, isGood, isModal, value, collectionAmount, goodAmount } = this.state
+    return (
+      <div className="left">
+        <div
+          className="good"
+          size="middle"
+          onClick={() => {
+            this.handleChangeGood()
+          }}
+        >
+          <LikeTwoTone twoToneColor={isGood == false ? 'grey' : 'blue'} style={{ marginRight: 4 }} />({goodAmount})
+        </div>
+        <div
+          className="collection"
+          onClick={() => {
+            this.handleChangeCollection()
+          }}
+        >
+          <HeartTwoTone twoToneColor={isCollection == false ? 'grey' : 'blue'} style={{ marginRight: 4 }} />(
+          {collectionAmount})
+        </div>
+        {/* <div className="comment">
+                    <MessageTwoTone twoToneColor="blue" style={{ marginRight: 4 }} />
+                    评论
+                </div> */}
+        <div
+          className="error-collection"
+          onClick={() => {
+            console.log('111')
+            this.handleModal()
+          }}
+        >
+          <InfoCircleTwoTone twoToneColor="red" style={{ marginRight: 4 }} />
+          纠错
+        </div>
+        <Modal
+          className="error-modal"
+          title="题目纠错"
+          visible={isModal}
+          destroyOnClose={true}
+          onOk={() => {
+            this.handleOk()
+          }}
+          onCancel={() => {
+            this.handleCancel()
+          }}
+          okText="确认"
+          cancelText="取消"
+          style={{ fontWeight: 500 }}
+        >
+          <div>
+            <div className="error-collection-title">纠错类型</div>
+            <div className="error-collection-type">
+              {this.errorType.map((item, index) => {
+                return (
+                  <div key={index} className="error-collection-type-detail">
+                    <Radio.Group
+                      onChange={(e) => {
+                        this.handleChangeRadio(e)
+                      }}
+                      defaultValue={1}
+                      buttonStyle="solid"
+                      value={value}
+                    >
+                      <Radio.Button value={item.value} className="ll">
+                        {item.content}
+                      </Radio.Button>
+                    </Radio.Group>
+                  </div>
+                )
+              })}
+            </div>
+            <div className="error-collection-title">纠错详情</div>
+            <TextArea
+              className="error-input"
+              placeholder="请输入..."
+              maxLength={256}
+              rows={4}
+              showCount={true}
+              onChange={(e) => {
+                this.handleChangeInput(e)
+              }}
+            />
+          </div>
+        </Modal>
+      </div>
+    )
+  }
+}
--- a/src/components/good-collection-error/index.less
+++ b/src/components/good-collection-error/index.less
@@ -0,0 +1,42 @@
+
+.left {
+  display: flex;
+  flex: 1;
+  margin: 20px 10px 20px 0px;
+  .good,
+  .collection,
+  .comment {
+    margin: 0 10px 0 0;
+    cursor: pointer;
+  }
+  .error-collection {
+    margin: 0 10px 0 0;
+    cursor: pointer;
+  }
+
+  .error-input {
+    background-color: red;
+  }
+}
+.ant-modal-body {
+  padding: 12px 24px 20px 24px;
+}
+.error-collection-title {
+  font-size: 18px;
+  margin-bottom: 8px;
+}
+
+.error-collection-type {
+  display: flex;
+  .error-collection-type-detail {
+    font-weight: 500;
+    padding: 0 8px 6px 0;
+    .ll {
+      border-radius: 30px;
+    }
+  }
+}
+.ant-modal-title {
+  font-weight: 500;
+  font-size: 20px;
+}
--- a/src/components/question-list/index.jsx
+++ b/src/components/question-list/index.jsx
@@ -1,25 +1,23 @@
-import React, { Component, Fragment } from "react";
-
+import React, { Component, Fragment, useState } from "react";
 import { Tag, Table, Pagination, Input } from "antd";
-import { filterDifficulty, gradeObject, imgObject } from "./constant";
+import { filterDifficulty, gradeObject } from "./constant";
+import { useNavigate } from "react-router-dom";
 import { splicingQuery } from "@utils";
 import "./index.less";
 const { Search } = Input;

 const colors = ['#ffffb8', '#f4ffb8', '#b5f5ec', '#bae0ff', '#d9f7be', '#efdbff', ' #ffd6e7', '#d6e4ff']

-class QuestionList extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      selectValue: "难度",
-    };
-  }

-  componentDidMount() { }
+const QuestionList = (props) => {


-  RandomNumBoth = (Min, Max) => {
+  const [selectValue, setSelectValue] = useState('难度')
+  const navigate = useNavigate();
+
+
+
+  const RandomNumBoth = (Min, Max) => {
    //差值
    const Range = Max - Min;
    // 随机数
@@ -30,7 +28,7 @@ class QuestionList extends Component {
  /**
   * 题目列表
   */
-  questionColumns = [
+  const questionColumns = [
    {
      title: <div style={{ display: 'flex' }}>题目 <div className="question-count-box" style={{ marginLeft: '10px', color: 'rgba(0, 0, 0, 0.5)' }}>
        （当前
@@ -50,7 +48,7 @@ class QuestionList extends Component {
              {item?.tags?.length > 0 &&
                item.tags.map((tagsItem, index) => {
                  return (
-                    <div className="question-info-tag" key={index} style={{ backgroundColor: colors[this.RandomNumBoth(0, 7)] }}>
+                    <div className="question-info-tag" key={index} style={{ backgroundColor: colors[RandomNumBoth(0, 7)] }}>
                      {tagsItem.name}
                    </div>
                  );
@@ -103,8 +101,7 @@ class QuestionList extends Component {
   * 选择标签
   * @param {*} id
   */
-  handleChangeSelect = (id) => {
-    console.log(id);
+  const handleChangeSelect = (id) => {
    let selectValue = "难度";
    if (id != 0) {
      filterDifficulty.forEach((item) => {
@@ -113,14 +110,8 @@ class QuestionList extends Component {
        }
      });
    }
-    this.setState(
-      {
-        selectValue,
-      },
-      () => {
-        this.props.handleChangeSelect(id);
-      }
-    );
+    setSelectValue(selectValue)
+    props.handleChangeSelect(id);
  };

  /**
@@ -129,25 +120,25 @@ class QuestionList extends Component {
   * @param {*} type
   * @returns
   */
-  onChangeAction = (item, index) => () => {
+  const onChangeAction = (item, index) => () => {
    let { isNotToDetail, difficulty, primaryCategoryId, labelList, pageIndex } =
-      this.props;
-    !isNotToDetail &&
-      this.props.history.push(
-        splicingQuery("/brush-questions", {
-          id: item?.id,
-          index: index + (pageIndex - 1) * 10 + 1,
-          difficulty,
-          primaryCategoryId,
-          labelList,
-        })
-      );
+      props;
+    !isNotToDetail && navigate("/brush-question")
+    // this.props.history.push(
+    //   splicingQuery("/brush-questions", {
+    //     id: item?.id,
+    //     index: index + (pageIndex - 1) * 10 + 1,
+    //     difficulty,
+    //     primaryCategoryId,
+    //     labelList,
+    //   })
+    // );
    if (!isNotToDetail) return;
-    this.toChangeSelectRows(item);
+    toChangeSelectRows(item);
  };

-  toChangeSelectRows = (record) => {
-    let newSelectedRows = [...this.props.selectRows];
+  const toChangeSelectRows = (record) => {
+    let newSelectedRows = [...props.selectRows];
    const isHas = newSelectedRows.some((rowItem) => rowItem.id === record.id);
    if (isHas) {
      newSelectedRows = newSelectedRows.filter(
@@ -156,59 +147,19 @@ class QuestionList extends Component {
    } else {
      newSelectedRows.push(record);
    }
-    this.props.setSelectRows(newSelectedRows);
+    props.setSelectRows(newSelectedRows);
  };

-  onChangePagination = (e) => {
-    this.props.onChangePagination(e);
+  const onChangePagination = (e) => {
+    props.onChangePagination(e);
  };

-  render() {
-    const { questionList, total, pageIndex, isHideSelect, isMultiple } =
-      this.props;
-    return (
-      <Fragment>
-        <div className="question-list-filter">
-          {!isHideSelect && this.renderFilterContainer()}
-          <div className="question-list-container">
-            <Table
-              onRow={(record, index) => {
-                return {
-                  onClick: this.onChangeAction(record, index), // 点击行
-                };
-              }}
-              columns={this.questionColumns}
-              dataSource={questionList}
-              rowKey={(record) => record.id}
-              // bordered={false}
-              pagination={false}
-              rowClassName="question-table-row"
-            />
-            {total > 10 && (
-              <Pagination
-                style={{
-                  padding: "24px 0",
-                  textAlign: "center",
-                }}
-                showQuickJumper
-                defaultCurrent={pageIndex}
-                total={total}
-                onChange={this.onChangePagination}
-              />
-            )}
-          </div>
-        </div>
-      </Fragment>
-    );
-  }
-
  /**
   * 过滤框-搜索框-模块
   * @returns
   */
-  renderFilterContainer = () => {
-    const { selectValue } = this.state;
-    const { total, isShowSearch, setSearchStr } = this.props;
+  const renderFilterContainer = () => {
+    const { total, isShowSearch, setSearchStr } = props;
    return (
      <div className="question-filter-container">
        {isShowSearch && (
@@ -223,6 +174,46 @@ class QuestionList extends Component {
      </div>
    );
  };
+
+  const { questionList, total, pageIndex, isHideSelect, isMultiple } =
+    props;
+
+  return (
+    <Fragment>
+      <div className="question-list-filter">
+        {!isHideSelect && renderFilterContainer()}
+        <div className="question-list-container">
+          <Table
+            onRow={(record, index) => {
+              return {
+                onClick: onChangeAction(record, index), // 点击行
+              };
+            }}
+            columns={questionColumns}
+            dataSource={questionList}
+            rowKey={(record) => record.id}
+            // bordered={false}
+            pagination={false}
+            rowClassName="question-table-row"
+          />
+          {total > 10 && (
+            <Pagination
+              style={{
+                padding: "24px 0",
+                textAlign: "center",
+              }}
+              showQuickJumper
+              defaultCurrent={pageIndex}
+              total={total}
+              onChange={onChangePagination}
+            />
+          )}
+        </div>
+      </div>
+    </Fragment>
+  );
+
+
 }


--- a/src/components/top-menu/index.jsx
+++ b/src/components/top-menu/index.jsx
@@ -1,14 +1,16 @@
+import { message } from 'antd';
 import React, { Component } from 'react'
+import { useLocation } from 'react-router-dom';
 import './index.less'
 // 顶部tab
 const MENULIST = [
  {
-    key: 'shareIndex',
+    key: 'questionBank',
    title: '刷题',
-    route: '/share-index',
+    route: '/question-bank',
  },
  {
-    key: 'questionBank',
+    key: 'prictiseQuestion',
    title: '练题',
    route: '/question-bank',
  },
@@ -27,16 +29,13 @@ const MENULIST = [

 // 顶部tab映射
 const mapMenu = {
-  '/cms-supplier/share-index': 'shareIndex',
-  '/cms-supplier/inter-list': 'interList',
-  '/cms-supplier/question-bank': 'questionBank',
-  '/cms-supplier/practice-questions': 'practiceQuestions',
+  '/question-bank': 'questionBank',
 }
 class TopMenu extends Component {
  constructor(props) {
    super(props)
    this.state = {
-      currentKey: 'shareIndex',
+      currentKey: 'questionBank',
    }
  }

@@ -52,9 +51,15 @@ class TopMenu extends Component {
   * @returns
   */
  changeMenu = (item) => () => {
+    if (item.key === "questionBank") {
+      return
+    } else {
+      return message.info("敬请期待")
+    }
+
    // 打开新窗口
    if (item.isOpenNewWindow) {
-      window.open('/cms-supplier' + item.route)
+      window.open(item.route)
      return
    }
    this.setState(