QingYu-Club/qing-yu-club-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 首页逻辑

Browse Source
This commit is contained in:
秋水浮尘
2023-10-18 01:49:01 +08:00
parent 5214648d90
commit 9828f6cbbb
11 changed files with 291 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/components/category-list/index.jsx
View File

@@ -137,9 +137,29 @@ const CategoryList = ({ primaryCategoryId, categoryList, ...props }) => {
* @returns
*/
const onChangeLabel = (secondCategoryIndex, thirdCategoryIndex, active) => () => {
const { isMultipleChoice } = props;
const list = _.cloneDeep(secondCategoryList)
_.set(list, [secondCategoryIndex, 'children', thirdCategoryIndex, 'active'], !active)
setSecondCategoryList(list)
if (isMultipleChoice) {
// 三级标签支持多选
_.set(list, [secondCategoryIndex, 'children', thirdCategoryIndex, 'active'], !active)
setSecondCategoryList(list)
} else {
// 三级标签支持单选
let formatLabelList = list[secondCategoryIndex].children.map((item, index) => {
let flag = false;
if (index === thirdCategoryIndex) {
flag = !active; // 将三级标签设置选中/未选中
}
return {
...item,
active: flag,
};
});
_.set(list, [secondCategoryIndex, 'children'], formatLabelList);
setSecondCategoryList(list)
}
// console.log(currentActive, _.get(list, [secondCategoryIndex, 'children', thirdCategoryIndex, 'id']))
props.onChangeLabel(_.get(list, [secondCategoryIndex, 'id']), _.get(list, [secondCategoryIndex, 'children', thirdCategoryIndex, 'id']))
};
/**
@@ -148,23 +168,15 @@ const CategoryList = ({ primaryCategoryId, categoryList, ...props }) => {
* @returns
*/
const onChangeOpenStatus = (secondCategoryIndex, isOpen) => () => {
return
let { secondCategoryList } = this.state;
_.set(secondCategoryList, [secondCategoryIndex, 'isOpen'], !isOpen);
this.setState({
secondCategoryList,
});
setSecondCategoryList(secondCategoryList)
};
/**
* 展开/收起
*/
const onChangePutAway = () => {
return
let { isPutAway } = this.state;
this.setState({
isPutAway: !isPutAway,
});
setIsPutAway(!isPutAway)
};
/**
@@ -211,31 +223,33 @@ const CategoryList = ({ primaryCategoryId, categoryList, ...props }) => {
thirdCategoryIndex,
(thirdCategoryItem.active || false)
)}>
{thirdCategoryItem.labelName}·
{thirdCategoryItem.subjectCount || 0}
{thirdCategoryItem.labelName}
</div>
);
}
)}
</div>
<div
id={`second_id_${secondCategoryIndex}`}
className="second-category-item-status"
onClick={onChangeOpenStatus(
secondCategoryIndex,
secondCategoryItem.isOpen
)}>
<div className="second-category-item-type" style={{ fontSize: 12 }}>
{secondCategoryItem.isOpen ? '收起' : '展开'}
</div>
<div className="second-category-item-icon" style={{ fontSize: 12 }}>
{secondCategoryItem.isOpen ? (
<UpOutlined />
) : (
<DownOutlined />
)}
</div>
</div>
{
secondCategoryItem.children.length > 5 ? <div
id={`second_id_${secondCategoryIndex}`}
className="second-category-item-status"
onClick={onChangeOpenStatus(
secondCategoryIndex,
secondCategoryItem.isOpen
)}>
<div className="second-category-item-type" style={{ fontSize: 12 }}>
{secondCategoryItem.isOpen ? '收起' : '展开'}
</div>
<div className="second-category-item-icon" style={{ fontSize: 12 }}>
{secondCategoryItem.isOpen ? (
<UpOutlined />
) : (
<DownOutlined />
)}
</div>
</div> : null
}
</div>
)}
</div>
@@ -248,6 +262,7 @@ const CategoryList = ({ primaryCategoryId, categoryList, ...props }) => {
style={{
marginTop: 10,
fontSize: 13,
cursor: 'pointer'
}}>
{isPutAway ? '展开' : '收起'}
{isPutAway ? (
@@ -405,7 +420,7 @@ class CategoryList1 extends Component {
if (isMultipleChoice) {
// 三级标签支持多选
_.set(childrenLevelList, [thirdCategoryIndex, 'active'], !active);
_.set(secondCategoryList, [secondCategoryIndex, 'labelInfoList'], childrenLevelList);
_.set(secondCategoryList, [secondCategoryIndex, 'children'], childrenLevelList);
} else {
// 三级标签支持单选
let formatLabelList = childrenLevelList.map((item, index) => {
@@ -418,7 +433,7 @@ class CategoryList1 extends Component {
active: flag,
};
});
_.set(secondCategoryList, [secondCategoryIndex, 'labelInfoList'], formatLabelList);
_.set(secondCategoryList, [secondCategoryIndex, 'children'], formatLabelList);
}
this.setState(
{
@@ -427,7 +442,7 @@ class CategoryList1 extends Component {
() => {
let activeList = [];
secondCategoryList.forEach((categoryItem) => {
categoryItem.labelInfoList.forEach((item) => {
categoryItem.children.forEach((item) => {
if (item.active) {
activeList.push(item.assembleId);
}
@@ -545,8 +560,7 @@ class CategoryList1 extends Component {
thirdCategoryIndex,
thirdCategoryItem.active
)}>
{thirdCategoryItem.labelName}·
{thirdCategoryItem.subjectCount}
{thirdCategoryItem.labelName}
</div>
);
}

8
src/components/question-list/index.jsx
View File

@@ -37,11 +37,11 @@ const QuestionList = (props) => {
</div></div>,
key: "questionNo",
align: "centlefter",
render: (item) => {
render: (item, record) => {
return (
<div className="question-info-container">
<div className="question-info-desc">
{item.questionTitle}
{record.subjectName}
</div>
<div className="question-info-tags">
@@ -60,8 +60,8 @@ const QuestionList = (props) => {
},
{
title: "难度",
dataIndex: "grade",
key: "grade",
dataIndex: "subjectDifficult",
key: "subjectDifficult",
align: "center",
filters: [
{

8
src/components/tags-editor/index.jsx
View File

@@ -207,7 +207,7 @@ export default class TagsEditor extends Component {
let labelList = [];
list.forEach((item) => {
if (item.active) {
labelList.push(item.categoryId);
labelList.push(item.id);
}
});
return labelList;
@@ -242,10 +242,10 @@ export default class TagsEditor extends Component {
backgroundColor: '#fff',
cursor: 'pointer',
}}
key={item.categoryId}
key={item.id}
// 支持删除标签
closable={item.isShowClose && isDeleteTag}
className={`tags-editor-item ${item.active && 'tag-active'}`}
className={`tags-editor-item ${item.active ? 'tag-active' : ''}`}
onClick={this.onChangeLabel(index, item.active)}
onClose={() => this.handleClose(index, item.categoryId)}>
{isLongTag
@@ -254,7 +254,7 @@ export default class TagsEditor extends Component {
</Tag>
);
return isLongTag ? (
<Tooltip title={item.categoryName} key={item.categoryId}>
<Tooltip title={item.categoryName} key={item.id}>
{tagElem}
</Tooltip>
) : (

9
src/components/tags-editor/index.less
View File

@@ -3,9 +3,12 @@
display: flex;
flex-wrap: wrap;
.tag-active {
@include box-backgroundColor(0.1);
@include box-border();
@include font-color();
// @include box-backgroundColor(0.1);
// @include box-border();
// @include font-color();
background-color: rgba(60, 110, 238, 0.1);
color: rgba(60, 110, 238, 1);
border: 1px solid rgba(60, 110, 238, 1)
}
.ant-tag .anticon-close {
font-size: 11px;

1
src/components/top-menu/index.jsx
View File

@@ -23,7 +23,6 @@ const MENULIST = [
key: 'interList',
title: '模拟面试',
route: '/inter-list',
// isOpenNewWindow: true,
},
]

3
src/views/question-bank/constant.ts
View File

@@ -66,6 +66,9 @@ export const apiName = {
*/
queryCategoryByPrimary: '/category/queryCategoryByPrimary',
// 获取题目列表
getSubjectPage: '/getSubjectPage'
};
export const imgObject = {

37
src/views/question-bank/index.tsx
View File

@@ -15,10 +15,10 @@ const QuestionBank = () => {
const [firstCategoryList, setFirstCategoryList] = useState([])
const [questionList, setQuestionList] = useState([])
const [isShowSpin, setIsShowSpin] = useState(false)
const [labelList, setLabelList] = useState<string[]>([]); // 选中的标签列表
const [labelList, setLabelList] = useState<string | number>(); // 选中的标签列表
const [difficulty, setDiffculty] = useState(0); //困难度（全部）
const [total, setTotal] = useState(0); // 总条数
const [pageIndex, setPageIndex] = useState(1);
const [pageIndex, setPageIndex] = useState(0);
const [primaryCategoryId, setPromaryCategoryId] = useState(''); //第一个大类id
@@ -50,7 +50,7 @@ const QuestionBank = () => {
* @param {*} e
*/
const onChangeCategory = (item: Record<string, any>) => {
setLabelList([])
setLabelList('')
setPromaryCategoryId(item.id)
setPageIndex(1)
};
@@ -60,18 +60,44 @@ const QuestionBank = () => {
* @param {*} primaryCategoryId 一级分类id
* @param {*} assembleIds 三级标签 assembleIds
*/
const onChangeLabel = (primaryCategoryId: string, assembleIds: string[]) => {
const onChangeLabel = (primaryCategory: any, assembleIds: string) => {
setPromaryCategoryId(primaryCategory)
setLabelList(assembleIds)
setPromaryCategoryId(primaryCategoryId)
setPageIndex(1)
};
const queryQuestionList = () => {
const params = {
pageNo: pageIndex,
pageSize: 10,
labelId: labelList,
categoryId: primaryCategoryId,
subjectDifficult: 1
}
req({
method: 'post',
url: apiName.getSubjectPage,
data: params
}).then(res => {
console.log(res)
setTotal(res.data.total)
setQuestionList(res.data.result)
})
}
useEffect(() => {
if (!primaryCategoryId) {
getPrimaryCategoryInfo()
}
}, [])
useEffect(() => {
if (labelList && primaryCategoryId) {
queryQuestionList()
}
}, [labelList, primaryCategoryId, pageIndex])
return (
<div className="question-bank-box">
<Spin spinning={isShowSpin}>
@@ -83,6 +109,7 @@ const QuestionBank = () => {
categoryList={firstCategoryList}
onChangeLabel={onChangeLabel}
primaryCategoryId={primaryCategoryId}
isMultipleChoice={false}
/>
)}
</div>

8
src/views/upload-questions/components/brief-questions/index.jsx
View File

@@ -308,12 +308,12 @@ export default class BriefQuestions extends Component {
</div>
<div className="brief-questions-container">
<div className="brief-questions-title">题目答案：</div>
{this.reanderAnser()}
{/* {this.reanderAnser()} */}
</div>
<RankLabelBox
ref={(ref) => {
this.rankLabelBox = ref;
}}
// ref={(ref) => {
// this.rankLabelBox = ref;
// }}
subjectName={subjectName}
onChangeRankLabel={this.onChangeRankLabel}
handleChangeRank={this.handleChangeRank}

197
src/views/upload-questions/components/rank-label-box/index.jsx
View File

@@ -1,9 +1,170 @@
import React, { Component, Fragment } from 'react';
import React, { Component, Fragment, useState, useEffect } from 'react';
import req from '@utils/request';
import TagsEditor from '@components/tags-editor';
import { apiName, ModuleType, starList } from '../../constant';
import './index.less';
export default class RankLabelBox extends Component {
const RankLabelBox = (props) => {
const [rankList, setRankList] = useState(starList)
const [firstCategoryList, setFirstCategoryList] = useState([])
const [firstSelected, setFirstSelected] = useState(null)
const [secondCategoryList, setSecondCategoryList] = useState([])
/**
* 获得一级分类数据
*/
const geFirstCategoryList = () => {
const params = { categoryType: 1 };
req({
method: 'post',
data: params,
url: apiName.queryPrimaryCategory,
})
.then((res) => {
console.log(res)
const list = res.data.map((item, index) => {
return {
...item,
active: index == 0 ? true : false,
};
});
setFirstCategoryList(list)
setFirstSelected(list[0].id)
})
.catch((err) => console.log(err));
}
useEffect(() => {
geFirstCategoryList()
}, [])
/**
* 选择职级-单选
* @param {*} handleStatusList
* @param {*} selectList
*/
const onHandleChangeRank = (handleStatusList, selectList) => {
// console.log(handleStatusList, selectList)
setRankList(handleStatusList)
// this.props.handleChangeRank(selectList);
};
/**
* 职级选择
* @param {*} rankList
* @returns
*/
const rendeRrankModule = () => {
return (
<div className="upload-single-container">
<div className="upload-single-title">职级选择：</div>
<div className="upload-single-main">
<TagsEditor
categoryList={rankList}
isSingleChoice={true}
onChangeLabel={onHandleChangeRank}
isDisabledReverseSelection={true}
/>
{/* <span style={{ marginLeft: '8px', color: 'red' }}>
注：所选职级应为熟练掌握该题的最低职级
</span> */}
</div>
</div>
);
};
/**
* 选择一级分类-单选
* @param {*} handleStatusList 带有是否选中状态的原数组
* @param {*} selectList 选中id的数组
*/
const onChangeFirst = (handleStatusList, selectList) => {
setFirstCategoryList(handleStatusList)
setFirstSelected(selectList[0])
};
/**
* 获得二级分类数据
* @param {*} id 一级分类id
*/
const getSecondCategoryList = (id) => {
const params = { categoryId: id };
req({
method: 'post',
data: params,
url: apiName.queryLabelByCategoryId,
})
.then((res) => {
setSecondCategoryList(res.data)
// this.firstCategoryValue = id;
// this.secondCategoryValue = [];
// this.thirdCategoryValue = [];
// if (res.data && res.data.length > 0) {
// this.setState({
// secondCategoryList: res.data,
// });
// } else {
// // 若需要新增时，则需要将数组第一个item，重置如下
// this.setState({
// secondCategoryList: [{ categoryName: '空', categoryId: -9999 }],
// });
// }
})
.catch((err) => console.log(err));
}
useEffect(() => {
if (firstSelected) {
getSecondCategoryList(firstSelected);
}
}, [firstSelected])
/**
* 一级分类选择
* @param {*} firstCategoryList
* @returns
*/
const renderFirstModule = (firstCategoryList) => {
return (
<Fragment>
{firstCategoryList?.length > 0 && (
<div className="upload-single-container">
<div className="upload-single-title">一级分类：</div>
<div className="upload-single-main">
<TagsEditor
categoryList={firstCategoryList}
isSingleChoice={true}
onChangeLabel={onChangeFirst}
isDisabledReverseSelection={true}
/>
</div>
</div>
)}
</Fragment>
);
};
return (
<Fragment>
{rendeRrankModule()}
{renderFirstModule(firstCategoryList)}
{/* {secondCategoryList?.length > 0 && (
<Fragment>
{this.renderSecondModule(secondCategoryList)}
{thirdCategoryList?.length > 0 && this.renderThirdModule(thirdCategoryList)}
</Fragment>
)} */}
</Fragment>
)
}
export default RankLabelBox
class RankLabelBox1 extends Component {
constructor(props) {
super(props);
this.state = {
@@ -234,21 +395,7 @@ export default class RankLabelBox extends Component {
);
};
render() {
const { firstCategoryList, secondCategoryList, thirdCategoryList, rankList } = this.state;
return (
<Fragment>
{this.rendeRrankModule(rankList)}
{this.renderFirstModule(firstCategoryList)}
{secondCategoryList?.length > 0 && (
<Fragment>
{this.renderSecondModule(secondCategoryList)}
{thirdCategoryList?.length > 0 && this.renderThirdModule(thirdCategoryList)}
</Fragment>
)}
</Fragment>
);
}
/**
* 职级选择
@@ -346,5 +493,21 @@ export default class RankLabelBox extends Component {
</div>
);
};
render() {
const { firstCategoryList, secondCategoryList, thirdCategoryList, rankList } = this.state;
return (
<Fragment>
{this.rendeRrankModule(rankList)}
{this.renderFirstModule(firstCategoryList)}
{secondCategoryList?.length > 0 && (
<Fragment>
{this.renderSecondModule(secondCategoryList)}
{thirdCategoryList?.length > 0 && this.renderThirdModule(thirdCategoryList)}
</Fragment>
)}
</Fragment>
);
}
}

6
src/views/upload-questions/components/rank-label-box/index.less
View File

@@ -36,9 +36,9 @@
height: 40px;
}
.tag-active {
@include box-backgroundColor(0.1);
@include box-border();
@include font-color();
background-color: rgba(60, 110, 238, 0.1);
color: rgba(60, 110, 238, 1);
border: 1px solid rgba(60, 110, 238, 1)
}
}
}

5
src/views/upload-questions/constant.js
View File

@@ -5,7 +5,10 @@ export const apiName = {
/**
* 获取一级
*/
queryPrimaryCategory: '/subject/category/queryPrimaryCategory',
queryPrimaryCategory: '/category/queryPrimaryCategory',
// 根据一级分类查询二级及标签
queryLabelByCategoryId: '/label/queryLabelByCategoryId',
/**
* 获取三级分类标签