feat: 修改刷题
This commit is contained in:
秋水浮尘
39
src/App.tsx
39
src/App.tsx
@@ -1,11 +1,8 @@
|
||||
import React, { Component } from 'react';
|
||||
import './App.less';
|
||||
import { Routes, Route, Link } from "react-router-dom"
|
||||
import req from '@utils/request.ts';
|
||||
import { Outlet } from "react-router-dom"
|
||||
import PubSub from 'pubsub-js';
|
||||
import { Input } from 'antd';
|
||||
import QuestionBank from './views/question-bank';
|
||||
import UploadQuestions from './views/upload-questions';
|
||||
import Logo from '@views/imgs/logo.jpg'
|
||||
import Head from '@views/imgs/head.jpg'
|
||||
import TopMenu from '@components/top-menu'
|
||||
@@ -25,22 +22,7 @@ class NavTop extends Component {
|
||||
timerRef = React.createRef();
|
||||
|
||||
componentDidMount() {
|
||||
// req({
|
||||
// method: 'post',
|
||||
// url: 'admin/interview/peo/getDirectorInfo',
|
||||
// }).then((re) => {
|
||||
// this.setState(
|
||||
// {
|
||||
// userName: re.data?.name ?? '',
|
||||
// intervieweEamil: re.data?.email ?? '',
|
||||
// headImg: '',
|
||||
// },
|
||||
// () => {
|
||||
// window.localStorage.setItem('interviewerName', re.data?.name ?? 'XXX');
|
||||
// window.localStorage.setItem('intervieweEamil', re.data?.email ?? 'XXX');
|
||||
// }
|
||||
// );
|
||||
// });
|
||||
|
||||
PubSub.subscribe('handleToRender', () => {
|
||||
this.setState({});
|
||||
});
|
||||
@@ -88,25 +70,12 @@ class NavTop extends Component {
|
||||
);
|
||||
}
|
||||
}
|
||||
class RouteExample extends Component {
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<NavTop />
|
||||
<Routes>
|
||||
<Route path="/question-bank" element={<QuestionBank />}></Route>
|
||||
<Route path="/upload-questions" element={<UploadQuestions />}></Route>
|
||||
</Routes>
|
||||
</>
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
export default class App extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="app-main">
|
||||
<RouteExample />
|
||||
<NavTop />
|
||||
<Outlet />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
9
src/components/good-collection-error/constant.js
Normal file
9
src/components/good-collection-error/constant.js
Normal file
@@ -0,0 +1,9 @@
|
||||
export const good = {
|
||||
0: '未点赞',
|
||||
1: '已点赞',
|
||||
};
|
||||
|
||||
export const collection = {
|
||||
0: '未收藏',
|
||||
1: '已收藏',
|
||||
};
|
||||
262
src/components/good-collection-error/index.jsx
Normal file
262
src/components/good-collection-error/index.jsx
Normal file
@@ -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>
|
||||
)
|
||||
}
|
||||
}
|
||||
42
src/components/good-collection-error/index.less
Normal file
42
src/components/good-collection-error/index.less
Normal file
@@ -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;
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -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(
|
||||
|
||||
29
src/main.tsx
29
src/main.tsx
@@ -3,12 +3,33 @@ import './main.less'
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import App from './App'
|
||||
import { BrowserRouter } from 'react-router-dom';
|
||||
import QuestionBank from '@views/question-bank';
|
||||
import UploadQuestions from '@views/upload-questions';
|
||||
import BrushQuestions from '@views/brush-questions'
|
||||
import {
|
||||
createBrowserRouter,
|
||||
RouterProvider,
|
||||
} from "react-router-dom";
|
||||
|
||||
const router = createBrowserRouter([
|
||||
{
|
||||
path: "/",
|
||||
element: <App />,
|
||||
children: [
|
||||
{
|
||||
path: "question-bank",
|
||||
element: <QuestionBank />,
|
||||
},
|
||||
{
|
||||
path: "brush-question",
|
||||
element: <BrushQuestions />,
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<React.StrictMode>
|
||||
<BrowserRouter basename='/'>
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
<RouterProvider router={router} />
|
||||
</React.StrictMode>
|
||||
)
|
||||
|
||||
@@ -1,16 +1,22 @@
|
||||
|
||||
import QuestionBank from '@views/question-bank';
|
||||
import UploadQuestions from '@views/upload-questions';
|
||||
import BrushQuestions from '@views/brush-questions'
|
||||
|
||||
export default [
|
||||
{
|
||||
path: '/question-bank',
|
||||
exact: true,
|
||||
component: QuestionBank,
|
||||
},
|
||||
{
|
||||
path: '/upload-questions',
|
||||
exact: true,
|
||||
component: UploadQuestions,
|
||||
},
|
||||
// {
|
||||
// path: '/question-bank',
|
||||
// exact: true,
|
||||
// component: QuestionBank,
|
||||
// },
|
||||
// {
|
||||
// path: '/upload-questions',
|
||||
// exact: true,
|
||||
// component: UploadQuestions,
|
||||
// },
|
||||
// {
|
||||
// path: '/brush-questions',
|
||||
// exact: true,
|
||||
// component: BrushQuestions,
|
||||
// },
|
||||
];
|
||||
|
||||
@@ -3,7 +3,7 @@ import { message } from 'antd';
|
||||
|
||||
export const baseHttp = () => {
|
||||
const http = axios.create({
|
||||
// baseURL: "/flow",
|
||||
baseURL: "/subject",
|
||||
timeout: 5 * 60 * 1000, // request timeout
|
||||
withCredentials: true, // send cookies when cross-domain requests
|
||||
headers: {
|
||||
@@ -15,7 +15,7 @@ export const baseHttp = () => {
|
||||
};
|
||||
|
||||
export default function request(config, url) {
|
||||
const baseURL = url || '/api';
|
||||
const baseURL = url || '/subject';
|
||||
// 1.创建axios的实例
|
||||
const instance = axios.create({
|
||||
baseURL,
|
||||
|
||||
9
src/views/brush-questions/constant.ts
Normal file
9
src/views/brush-questions/constant.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
export const good = {
|
||||
0:'未点赞',
|
||||
1:'已点赞',
|
||||
}
|
||||
|
||||
export const collection={
|
||||
0:'未收藏',
|
||||
1:'已收藏',
|
||||
}
|
||||
160
src/views/brush-questions/index.less
Normal file
160
src/views/brush-questions/index.less
Normal file
@@ -0,0 +1,160 @@
|
||||
|
||||
.brush-questions-box {
|
||||
width: 1439px;
|
||||
margin: 0 auto;
|
||||
// display: flex;
|
||||
background-color: #fff;
|
||||
padding: 20px 50px;
|
||||
border-radius: 5px;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
.brush-questions-box,
|
||||
.question-box {
|
||||
// display: flex;
|
||||
// flex: 1;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
// position: relative;
|
||||
.question,
|
||||
.question-content {
|
||||
display: flex;
|
||||
// flex: 1;
|
||||
.question-type,
|
||||
.question-number {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// .answer-box{
|
||||
|
||||
// }
|
||||
.question-box {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.question {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.question-type {
|
||||
// padding-left: 50px;
|
||||
color: rgba(60, 110, 238, 1) !important;
|
||||
font-size: 16px;
|
||||
}
|
||||
.question-number {
|
||||
justify-content: right;
|
||||
// padding-right: 50px;
|
||||
color: rgba(60, 110, 238, 1) !important;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
// padding:2px 10px;
|
||||
}
|
||||
.question-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
// padding: 20px 0 20px 30px;
|
||||
// border-bottom:1px dashed #000
|
||||
line-height: 35px;
|
||||
margin-top: 50px;
|
||||
margin-bottom: 10px;
|
||||
.difficulty {
|
||||
margin-right: 10px;
|
||||
padding: 0 10px;
|
||||
border-radius: 4px;
|
||||
background-color: rgba(60, 110, 238, 0.3) !important;
|
||||
}
|
||||
}
|
||||
.reference-answer {
|
||||
color: rgba(60, 110, 238, 0.8) !important;
|
||||
font-size: 14px;
|
||||
padding: 20px 0 10px 0px;
|
||||
}
|
||||
.answer-content {
|
||||
background-color: rgba(60, 110, 238, 0.2) !important;
|
||||
padding: 15px;
|
||||
font-size: 14px;
|
||||
line-height: 35px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.answer-box {
|
||||
border-radius: 0px;
|
||||
border-top: 1px dashed #e4e4e4;
|
||||
border-bottom: 1px dashed #e4e4e4;
|
||||
}
|
||||
.change-question-box {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
margin: 10px 0 10px 700px;
|
||||
}
|
||||
|
||||
// .question-number-box{
|
||||
// position:absolute;right:0px;
|
||||
// }
|
||||
// .right{
|
||||
// position:absolute;right:0px;
|
||||
// }
|
||||
.jump-question {
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
// .answer-box,.question-box{
|
||||
// display: flex;
|
||||
// flex: 1;
|
||||
// overflow-y: auto;
|
||||
// border-radius: 8px;
|
||||
// // position: relative;
|
||||
// background-color: rgb(84, 169, 248);
|
||||
// font-size: 20px;
|
||||
// height: auto;
|
||||
// min-height:200px;
|
||||
// }
|
||||
.last,
|
||||
.next {
|
||||
// background-color: rgba(60, 110, 238,1) !important;
|
||||
margin: 0px 15px 15px 20px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
width: 110px;
|
||||
height: 46px;
|
||||
// color: white
|
||||
}
|
||||
// .question-type-box,.question-number-box {
|
||||
// height: 200px;
|
||||
// line-height: 200px;
|
||||
// font-size: 30px;
|
||||
// font-weight: bold;
|
||||
// color: rgb(84, 169, 248);
|
||||
// }
|
||||
// .word{
|
||||
// font-size: 20px;
|
||||
// font-weight: bold;
|
||||
// color: rgb(84, 169, 248);
|
||||
// }
|
||||
.last:active,
|
||||
.next:active {
|
||||
background-color: rgba(60, 110, 238, 1) !important;
|
||||
}
|
||||
.number {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(60, 110, 238, 1) !important;
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
.all-number {
|
||||
color: #34495e;
|
||||
}
|
||||
.type {
|
||||
padding: 2px 10px;
|
||||
}
|
||||
191
src/views/brush-questions/index.tsx
Normal file
191
src/views/brush-questions/index.tsx
Normal file
@@ -0,0 +1,191 @@
|
||||
import { Pagination, Button, Modal, Input, Radio, message } from 'antd'
|
||||
import React, { Component, Fragment } from 'react'
|
||||
import { queryParse } from '@utils'
|
||||
import GoodCollectionError from '@components/good-collection-error'
|
||||
import './index.less'
|
||||
import req from '@utils/request'
|
||||
|
||||
export default class BrushQuestions extends Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
isGood: 0,
|
||||
isCollection: 0,
|
||||
index: 1,
|
||||
question: [{
|
||||
id: 1, labelNames: ["原理"], subjectName: 'JDK 和 JRE 有什么区别？', difficulty: 1,
|
||||
subjectAnswer: `<p>JDK：Java Development Kit 的简称，Java 开发工具包，提供了 Java 的开发环境和运行环境。</p>
|
||||
<p>JRE：Java Runtime Environment 的简称，Java 运行环境，为 Java 的运行提供了所需环境。</p>
|
||||
<p>具体来说 JDK 其实包含了 JRE，同时还包含了编译 Java 源码的编译器 Javac，还包含了很多 Java 程序调试和分析的工具。</p>
|
||||
<p>简单来说：如果你需要运行 Java 程序，只需安装 JRE 就可以了，如果你需要编写 Java 程序，需要安装 JDK。</p>` }],
|
||||
// answer: '',
|
||||
isModal: false, //是否显示纠错弹框
|
||||
value: 1, //纠错类型对应值
|
||||
inputValue: '', //纠错详情内容
|
||||
}
|
||||
}
|
||||
pageIndex = 1
|
||||
total = 0
|
||||
assembleIds: string[] = [] // 选中的标签列表
|
||||
difficulty = 0 //困难度（全部）
|
||||
primaryCategoryId = '' //第一个大类id
|
||||
grade: Record<string, string> = {
|
||||
1: '初级',
|
||||
2: '中级',
|
||||
3: '高级',
|
||||
4: '资深',
|
||||
5: '专家',
|
||||
}
|
||||
goodCollectionError = GoodCollectionError | null
|
||||
componentDidMount() {
|
||||
// const urlParams = queryParse(this.props.location.search)
|
||||
const urlParams = {
|
||||
index: 1,
|
||||
difficulty: 1,
|
||||
primaryCategoryId: '1',
|
||||
labelList: '1,2,3,4'
|
||||
}
|
||||
this.pageIndex = Number(urlParams.index)
|
||||
this.difficulty = urlParams.difficulty //困难度（全部）
|
||||
this.primaryCategoryId = urlParams.primaryCategoryId //第一个大类id
|
||||
this.assembleIds = !!urlParams.labelList ? urlParams.labelList.split(',') : []
|
||||
// this.getInterviewSubjectList()
|
||||
}
|
||||
async getInterviewSubjectList() {
|
||||
let params = {
|
||||
pageInfo: {
|
||||
pageIndex: this.pageIndex,
|
||||
pageSize: 1,
|
||||
},
|
||||
difficulty: this.difficulty,
|
||||
primaryCategoryId: this.primaryCategoryId,
|
||||
assembleIds: this.assembleIds,
|
||||
}
|
||||
return await req({
|
||||
method: 'post',
|
||||
data: params,
|
||||
url: '/admin/question/subject/getSubjectList',
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.data && res.data?.pageList?.length > 0) {
|
||||
this.total = res.data.pageInfo.total
|
||||
this.setState(
|
||||
{
|
||||
question: res.data.pageList,
|
||||
},
|
||||
() => {
|
||||
this.goodCollectionError.getDetail()
|
||||
}
|
||||
)
|
||||
}
|
||||
})
|
||||
.catch((err) => console.log(err))
|
||||
}
|
||||
|
||||
onChangePagination = async (pageIndex) => {
|
||||
this.pageIndex = pageIndex
|
||||
this.setState({ index: pageIndex })
|
||||
// await this.getInterviewSubjectList()
|
||||
}
|
||||
|
||||
handleNextQuestion = async (value) => {
|
||||
let { index } = this.state
|
||||
this.pageIndex += value
|
||||
index += value
|
||||
this.setState({
|
||||
index: index,
|
||||
})
|
||||
// await this.getInterviewSubjectList()
|
||||
}
|
||||
|
||||
render() {
|
||||
const { index, question } = this.state
|
||||
return (
|
||||
<div className="brush-questions-box">
|
||||
<div className="question-box">
|
||||
<div className="question">
|
||||
<div className="question-type">
|
||||
<div className="number">{index}</div>
|
||||
<div className="type">问答题</div>
|
||||
</div>
|
||||
{/* <div className="question-number">
|
||||
<div className="now-number">{index}</div>
|
||||
<div className="all-number">/{this.total}</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
<Fragment>
|
||||
{question.map((item, index) => {
|
||||
return (
|
||||
<div key={index}>
|
||||
<div className="question-content">
|
||||
<div className="difficulty">
|
||||
{this.grade[item.difficulty]}-{item.labelNames.join('、')}
|
||||
</div>
|
||||
<div>{item.subjectName}</div>
|
||||
</div>
|
||||
<div className="answer-box">
|
||||
<div className="reference-answer">参考答案</div>
|
||||
<div
|
||||
className="answer-content wang-editor-style"
|
||||
dangerouslySetInnerHTML={{
|
||||
// __html: item.subjectAnswer,
|
||||
__html: item.subjectAnswer,
|
||||
}}
|
||||
></div>
|
||||
<br />
|
||||
</div>
|
||||
<div className="change-question-box">
|
||||
<GoodCollectionError
|
||||
questionId={question[0].id}
|
||||
ref={(ref) => {
|
||||
this.goodCollectionError = ref
|
||||
}}
|
||||
/>
|
||||
{/* <div className="right">
|
||||
<Button
|
||||
disabled={this.pageIndex <= 1 ? true : false}
|
||||
className="last"
|
||||
onClick={() => {
|
||||
this.handleNextQuestion(-1)
|
||||
}}
|
||||
>
|
||||
上一题
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
className="next"
|
||||
disabled={this.pageIndex >= this.total ? true : false}
|
||||
onClick={() => {
|
||||
this.handleNextQuestion(1)
|
||||
}}
|
||||
>
|
||||
下一题
|
||||
</Button>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</Fragment>
|
||||
|
||||
<div className="jump-question">
|
||||
{this.total > 0 && (
|
||||
<Pagination
|
||||
style={{
|
||||
padding: '24px 0',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
showQuickJumper
|
||||
current={this.pageIndex}
|
||||
defaultCurrent={this.pageIndex}
|
||||
total={this.total}
|
||||
defaultPageSize={1}
|
||||
onChange={this.onChangePagination}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
18
src/views/brush-questions/mock.js
Normal file
18
src/views/brush-questions/mock.js
Normal file
@@ -0,0 +1,18 @@
|
||||
export const mockData = [
|
||||
{ id: 1, question: '我是问题1', answer: '我是答案1', isGood: 0, isCollection: 0, isComment: 0},
|
||||
{ id: 2, question: '我是问题2', answer: '我是答案2', isGood: 0, isCollection: 1, isComment: 0},
|
||||
{ id: 3, question: '我是问题3', answer: '我是答案3', isGood: 1, isCollection: 0, isComment: 0},
|
||||
{ id: 4, question: '我是问题4', answer: '我是答案4', isGood: 0, isCollection: 0, isComment: 1},
|
||||
{ id: 5, question: '我是问题5', answer: '我是答案5', isGood: 1, isCollection: 1, isComment: 0},
|
||||
{ id: 6, question: '我是问题6', answer: '我是答案6', isGood: 1, isCollection: 0, isComment: 1},
|
||||
{ id: 7, question: '我是问题7', answer: '我是答案7', isGood: 0, isCollection: 1, isComment: 1},
|
||||
{ id: 8, question: '我是问题8', answer: '我是答案8', isGood: 1, isCollection: 1, isComment: 1},
|
||||
{ id: 9, question: '我是问题9', answer: '我是答案9', isGood: 0, isCollection: 0, isComment: 0},
|
||||
{ id: 10, question: '我是问题10', answer: '我是答案10', isGood: 1, isCollection: 0, isComment: 0},
|
||||
{ id: 11, question: '我是问题11', answer: '我是答案11', isGood: 0, isCollection: 1, isComment: 0},
|
||||
{ id: 12, question: '我是问题12', answer: '我是答案12', isGood: 0, isCollection: 0, isComment: 1},
|
||||
{ id: 13, question: '我是问题13', answer: '我是答案13', isGood: 1, isCollection: 1, isComment: 0},
|
||||
{ id: 14, question: '我是问题14', answer: '我是答案14', isGood: 1, isCollection: 0, isComment: 1},
|
||||
{ id: 15, question: '我是问题15', answer: '我是答案15', isGood: 0, isCollection: 1, isComment: 1},
|
||||
{ id: 16, question: '我是问题16', answer: '我是答案16', isGood: 1, isCollection: 1, isComment: 1},
|
||||
]
|
||||
@@ -3,6 +3,7 @@ import { Popover, Spin } from 'antd';
|
||||
import { debounce } from '@utils';
|
||||
import { imgObject, RankingTypeText, RankingTypeBtnText } from '../../constant';
|
||||
import './index.less';
|
||||
import { message } from 'antd';
|
||||
|
||||
const rankingBackImg = {
|
||||
0: imgObject.ranking1Img,
|
||||
@@ -17,6 +18,8 @@ export default function RankingBox(props) {
|
||||
props.onHandleRanking && props.onHandleRanking(type);
|
||||
});
|
||||
const onJump = debounce(() => {
|
||||
message.destroy()
|
||||
return message.info('敬请期待')
|
||||
props.onHandleJump && props.onHandleJump();
|
||||
});
|
||||
return (
|
||||
|
||||
@@ -57,19 +57,15 @@ export const filterDifficulty = [
|
||||
|
||||
export const apiName = {
|
||||
/**
|
||||
* 获取一级分类
|
||||
* 查询分类
|
||||
*/
|
||||
getPrimaryCategoryInfo: '/admin/question/category/getPrimaryCategoryInfo',
|
||||
queryPrimaryCategory: '/category/queryPrimaryCategory',
|
||||
|
||||
/**
|
||||
* 获取题目列表
|
||||
* 查询大类下分类
|
||||
*/
|
||||
getInterviewSubjectList: '/admin/question/subject/getSubjectList',
|
||||
queryCategoryByPrimary: '/category/queryCategoryByPrimary',
|
||||
|
||||
/**
|
||||
* 获得贡献榜
|
||||
*/
|
||||
getContributeList: '/admin/question/subject/getContributeList',
|
||||
};
|
||||
|
||||
export const imgObject = {
|
||||
@@ -1,4 +1,5 @@
|
||||
import { Component } from 'react';
|
||||
// import { Component } from 'react';
|
||||
import { useState, useEffect } from 'react'
|
||||
import QuestionList from '@components/question-list';
|
||||
import CategoryList from '@components/category-list';
|
||||
import ContributionList from './components/contribution-list';
|
||||
@@ -6,172 +7,229 @@ import RankingList from './components/ranking-list'
|
||||
import { apiName } from './constant';
|
||||
import req from '@utils/request';
|
||||
import { Spin } from 'antd';
|
||||
import { mockTabList, mockDataList } from './mock'
|
||||
import { mockDataList } from './mock';
|
||||
import './index.less';
|
||||
|
||||
export default class QuestionBank extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
firstCategoryList: mockTabList || [],
|
||||
questionList: mockDataList || [],
|
||||
isShowSpin: false,
|
||||
};
|
||||
}
|
||||
labelList = []; // 选中的标签列表
|
||||
difficulty = 0; //困难度（全部）
|
||||
total = 0; // 总条数
|
||||
pageIndex = 1;
|
||||
primaryCategoryId = ''; //第一个大类id
|
||||
const QuestionBank = () => {
|
||||
|
||||
|
||||
const [firstCategoryList, setFirstCategoryList] = useState([])
|
||||
const [questionList, setQuestionList] = useState(mockDataList)
|
||||
const [isShowSpin, setIsShowSpin] = useState(false)
|
||||
const [labelList, setLabelList] = useState<string[]>([]); // 选中的标签列表
|
||||
const [difficulty, setDiffculty] = useState(0); //困难度（全部）
|
||||
const [total, setTotal] = useState(0); // 总条数
|
||||
const [pageIndex, setPageIndex] = useState(1);
|
||||
const [primaryCategoryId, setPromaryCategoryId] = useState(''); //第一个大类id
|
||||
|
||||
componentDidMount() {
|
||||
// this.getPrimaryCategoryInfo();
|
||||
// console.log(this.props.route);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取一级分类数据
|
||||
*/
|
||||
getPrimaryCategoryInfo() {
|
||||
const getPrimaryCategoryInfo = () => {
|
||||
setIsShowSpin(true)
|
||||
req({
|
||||
method: 'post',
|
||||
data: { subjectTypeList: [4] },
|
||||
url: apiName.getPrimaryCategoryInfo,
|
||||
url: apiName.queryPrimaryCategory,
|
||||
data: { categoryType: 1 }
|
||||
})
|
||||
.then((res) => {
|
||||
.then((res: Record<string, any>) => {
|
||||
if (res.data && res.data.length > 0) {
|
||||
this.primaryCategoryId = res.data[0].primaryCategoryId;
|
||||
this.setState(
|
||||
{
|
||||
firstCategoryList: res.data,
|
||||
isShowSpin: false,
|
||||
},
|
||||
() => {
|
||||
this.getInterviewSubjectList();
|
||||
}
|
||||
);
|
||||
setPromaryCategoryId(res.data[0].primaryCategoryId);
|
||||
setFirstCategoryList(res.data)
|
||||
setIsShowSpin(false)
|
||||
} else {
|
||||
this.primaryCategoryId = '';
|
||||
this.setState({
|
||||
isShowSpin: false,
|
||||
});
|
||||
setIsShowSpin(false)
|
||||
}
|
||||
})
|
||||
.catch((err) => console.log(err));
|
||||
.catch((err: string) => console.log(err));
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取题目列表
|
||||
*/
|
||||
getInterviewSubjectList() {
|
||||
let params = {
|
||||
pageInfo: {
|
||||
pageIndex: this.pageIndex,
|
||||
pageSize: 10,
|
||||
},
|
||||
difficulty: this.difficulty,
|
||||
primaryCategoryId: this.primaryCategoryId,
|
||||
assembleIds: this.labelList,
|
||||
};
|
||||
req({
|
||||
method: 'post',
|
||||
data: params,
|
||||
url: apiName.getInterviewSubjectList,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.data && res.data?.pageList?.length > 0) {
|
||||
this.total = res.data.pageInfo.total;
|
||||
this.setState({
|
||||
questionList: res.data.pageList,
|
||||
isShowSpin: false,
|
||||
});
|
||||
} else {
|
||||
this.total = 0;
|
||||
this.setState({
|
||||
questionList: [],
|
||||
isShowSpin: false,
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((err) => console.log(err));
|
||||
}
|
||||
|
||||
/**
|
||||
* 选择标签时，请求列表数据
|
||||
* @param {*} primaryCategoryId 一级分类id
|
||||
* @param {*} assembleIds 三级标签 assembleIds
|
||||
*/
|
||||
onChangeLabel = (primaryCategoryId, assembleIds) => {
|
||||
this.labelList = assembleIds;
|
||||
this.primaryCategoryId = primaryCategoryId;
|
||||
this.pageIndex = 1;
|
||||
this.getInterviewSubjectList();
|
||||
* 切换一级分类
|
||||
* @param {*} e
|
||||
*/
|
||||
const onChangeCategory = (e: string) => {
|
||||
setLabelList([])
|
||||
setPromaryCategoryId(e)
|
||||
setPageIndex(1)
|
||||
};
|
||||
|
||||
/**
|
||||
* 切换一级分类
|
||||
* @param {*} e
|
||||
*/
|
||||
onChangeCategory = (e) => {
|
||||
this.labelList = [];
|
||||
this.primaryCategoryId = e;
|
||||
this.pageIndex = 1;
|
||||
this.getInterviewSubjectList();
|
||||
* 选择标签时，请求列表数据
|
||||
* @param {*} primaryCategoryId 一级分类id
|
||||
* @param {*} assembleIds 三级标签 assembleIds
|
||||
*/
|
||||
const onChangeLabel = (primaryCategoryId: string, assembleIds: string[]) => {
|
||||
setLabelList(assembleIds)
|
||||
setPromaryCategoryId(primaryCategoryId)
|
||||
setPageIndex(1)
|
||||
// this.getInterviewSubjectList();
|
||||
};
|
||||
|
||||
/**
|
||||
* 筛选列表数据
|
||||
* @param {*} id
|
||||
*/
|
||||
handleChangeSelect = (id) => {
|
||||
this.difficulty = id;
|
||||
this.pageIndex = 1;
|
||||
this.getInterviewSubjectList();
|
||||
};
|
||||
useEffect(() => {
|
||||
getPrimaryCategoryInfo()
|
||||
}, [])
|
||||
|
||||
/**
|
||||
* 分页功能
|
||||
* @param {*} pageIndex 当前页码
|
||||
*/
|
||||
onChangePagination = (pageIndex) => {
|
||||
this.pageIndex = pageIndex;
|
||||
this.getInterviewSubjectList();
|
||||
};
|
||||
|
||||
render() {
|
||||
const { firstCategoryList, questionList, isShowSpin } = this.state;
|
||||
return (
|
||||
<div className="question-bank-box">
|
||||
<Spin spinning={isShowSpin}>
|
||||
<div className="question-box">
|
||||
<div className="category-list-box">
|
||||
{firstCategoryList?.length > 0 && (
|
||||
<CategoryList
|
||||
onChangeCategory={this.onChangeCategory}
|
||||
categoryList={firstCategoryList}
|
||||
onChangeLabel={this.onChangeLabel}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="question-list-box">
|
||||
<QuestionList
|
||||
pageIndex={this.pageIndex}
|
||||
total={this.total}
|
||||
questionList={questionList}
|
||||
handleChangeSelect={this.handleChangeSelect}
|
||||
onChangePagination={this.onChangePagination}
|
||||
difficulty={this.difficulty}
|
||||
primaryCategoryId={this.primaryCategoryId}
|
||||
labelList={this.labelList}
|
||||
return (
|
||||
<div className="question-bank-box">
|
||||
<Spin spinning={isShowSpin}>
|
||||
<div className="question-box">
|
||||
<div className="category-list-box">
|
||||
{firstCategoryList?.length > 0 && (
|
||||
<CategoryList
|
||||
onChangeCategory={onChangeCategory}
|
||||
categoryList={firstCategoryList}
|
||||
onChangeLabel={onChangeLabel}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="question-list-box">
|
||||
<QuestionList
|
||||
pageIndex={pageIndex}
|
||||
total={total}
|
||||
questionList={questionList}
|
||||
// handleChangeSelect={this.handleChangeSelect}
|
||||
// onChangePagination={this.onChangePagination}
|
||||
difficulty={difficulty}
|
||||
// primaryCategoryId={this.primaryCategoryId}
|
||||
labelList={labelList}
|
||||
/>
|
||||
</div>
|
||||
</Spin>
|
||||
<div className="ranking-box">
|
||||
<ContributionList />
|
||||
<RankingList />
|
||||
</div>
|
||||
</Spin>
|
||||
<div className="ranking-box">
|
||||
<ContributionList />
|
||||
<RankingList />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default QuestionBank
|
||||
// class QuestionBank extends Component {
|
||||
// constructor(props) {
|
||||
// super(props);
|
||||
// this.state = {
|
||||
// firstCategoryList: [],
|
||||
// questionList: [],
|
||||
// isShowSpin: false,
|
||||
// };
|
||||
// }
|
||||
// labelList = []; // 选中的标签列表
|
||||
// difficulty = 0; //困难度（全部）
|
||||
// total = 0; // 总条数
|
||||
// pageIndex = 1;
|
||||
// primaryCategoryId = ''; //第一个大类id
|
||||
|
||||
// componentDidMount() {
|
||||
// // this.getPrimaryCategoryInfo();
|
||||
// // console.log(this.props.route);
|
||||
// }
|
||||
|
||||
|
||||
|
||||
// /**
|
||||
// * 获取题目列表
|
||||
// */
|
||||
// getInterviewSubjectList() {
|
||||
// let params = {
|
||||
// pageInfo: {
|
||||
// pageIndex: this.pageIndex,
|
||||
// pageSize: 10,
|
||||
// },
|
||||
// difficulty: this.difficulty,
|
||||
// primaryCategoryId: this.primaryCategoryId,
|
||||
// assembleIds: this.labelList,
|
||||
// };
|
||||
// req({
|
||||
// method: 'post',
|
||||
// data: params,
|
||||
// url: apiName.getInterviewSubjectList,
|
||||
// })
|
||||
// .then((res) => {
|
||||
// if (res.data && res.data?.pageList?.length > 0) {
|
||||
// this.total = res.data.pageInfo.total;
|
||||
// this.setState({
|
||||
// questionList: res.data.pageList,
|
||||
// isShowSpin: false,
|
||||
// });
|
||||
// } else {
|
||||
// this.total = 0;
|
||||
// this.setState({
|
||||
// questionList: [],
|
||||
// isShowSpin: false,
|
||||
// });
|
||||
// }
|
||||
// })
|
||||
// .catch((err) => console.log(err));
|
||||
// }
|
||||
|
||||
|
||||
|
||||
// /**
|
||||
// * 切换一级分类
|
||||
// * @param {*} e
|
||||
// */
|
||||
// onChangeCategory = (e) => {
|
||||
// this.labelList = [];
|
||||
// this.primaryCategoryId = e;
|
||||
// this.pageIndex = 1;
|
||||
// this.getInterviewSubjectList();
|
||||
// };
|
||||
|
||||
// /**
|
||||
// * 筛选列表数据
|
||||
// * @param {*} id
|
||||
// */
|
||||
// handleChangeSelect = (id) => {
|
||||
// this.difficulty = id;
|
||||
// this.pageIndex = 1;
|
||||
// this.getInterviewSubjectList();
|
||||
// };
|
||||
|
||||
// /**
|
||||
// * 分页功能
|
||||
// * @param {*} pageIndex 当前页码
|
||||
// */
|
||||
// onChangePagination = (pageIndex) => {
|
||||
// this.pageIndex = pageIndex;
|
||||
// this.getInterviewSubjectList();
|
||||
// };
|
||||
|
||||
// render() {
|
||||
// const { firstCategoryList, questionList, isShowSpin } = this.state;
|
||||
// return (
|
||||
// <div className="question-bank-box">
|
||||
// <Spin spinning={isShowSpin}>
|
||||
// <div className="question-box">
|
||||
// <div className="category-list-box">
|
||||
// {firstCategoryList?.length > 0 && (
|
||||
// <CategoryList
|
||||
// onChangeCategory={this.onChangeCategory}
|
||||
// categoryList={firstCategoryList}
|
||||
// onChangeLabel={this.onChangeLabel}
|
||||
// />
|
||||
// )}
|
||||
// </div>
|
||||
// <div className="question-list-box">
|
||||
// <QuestionList
|
||||
// pageIndex={this.pageIndex}
|
||||
// total={this.total}
|
||||
// questionList={questionList}
|
||||
// handleChangeSelect={this.handleChangeSelect}
|
||||
// onChangePagination={this.onChangePagination}
|
||||
// difficulty={this.difficulty}
|
||||
// primaryCategoryId={this.primaryCategoryId}
|
||||
// labelList={this.labelList}
|
||||
// />
|
||||
// </div>
|
||||
// </div>
|
||||
// </Spin>
|
||||
// <div className="ranking-box">
|
||||
// <ContributionList />
|
||||
// <RankingList />
|
||||
// </div>
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
// }
|
||||
|
||||
@@ -13,5 +13,13 @@ export default defineConfig({
|
||||
'@components': path.resolve(__dirname, 'src/components')
|
||||
}
|
||||
},
|
||||
plugins: [react()]
|
||||
plugins: [react()],
|
||||
server: {
|
||||
proxy: {
|
||||
"/subject": {
|
||||
target: "http://117.72.14.166:3010",
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user