From 9828f6cbbb2ad2a533b42baebf9c0a875446d98e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A7=8B=E6=B0=B4=E6=B5=AE=E5=B0=98?= <18510549872@163.comm> Date: Wed, 18 Oct 2023 01:49:01 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A6=96=E9=A1=B5=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/category-list/index.jsx | 88 ++++---- src/components/question-list/index.jsx | 8 +- src/components/tags-editor/index.jsx | 8 +- src/components/tags-editor/index.less | 9 +- src/components/top-menu/index.jsx | 1 - src/views/question-bank/constant.ts | 3 + src/views/question-bank/index.tsx | 37 +++- .../components/brief-questions/index.jsx | 8 +- .../components/rank-label-box/index.jsx | 197 ++++++++++++++++-- .../components/rank-label-box/index.less | 6 +- src/views/upload-questions/constant.js | 5 +- 11 files changed, 291 insertions(+), 79 deletions(-) diff --git a/src/components/category-list/index.jsx b/src/components/category-list/index.jsx index e110a5f..dbd999f 100644 --- a/src/components/category-list/index.jsx +++ b/src/components/category-list/index.jsx @@ -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} ); } )} -
-
- {secondCategoryItem.isOpen ? '收起' : '展开'} -
-
- {secondCategoryItem.isOpen ? ( - - ) : ( - - )} -
-
+ { + secondCategoryItem.children.length > 5 ?
+
+ {secondCategoryItem.isOpen ? '收起' : '展开'} +
+
+ {secondCategoryItem.isOpen ? ( + + ) : ( + + )} +
+
: null + } + )} @@ -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} ); } diff --git a/src/components/question-list/index.jsx b/src/components/question-list/index.jsx index 6836d50..0bf24e5 100644 --- a/src/components/question-list/index.jsx +++ b/src/components/question-list/index.jsx @@ -37,11 +37,11 @@ const QuestionList = (props) => { , key: "questionNo", align: "centlefter", - render: (item) => { + render: (item, record) => { return (
- {item.questionTitle} + {record.subjectName}
@@ -60,8 +60,8 @@ const QuestionList = (props) => { }, { title: "难度", - dataIndex: "grade", - key: "grade", + dataIndex: "subjectDifficult", + key: "subjectDifficult", align: "center", filters: [ { diff --git a/src/components/tags-editor/index.jsx b/src/components/tags-editor/index.jsx index 150c15b..e192b6c 100644 --- a/src/components/tags-editor/index.jsx +++ b/src/components/tags-editor/index.jsx @@ -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 { ); return isLongTag ? ( - + {tagElem} ) : ( diff --git a/src/components/tags-editor/index.less b/src/components/tags-editor/index.less index 24fe416..55c3ad9 100644 --- a/src/components/tags-editor/index.less +++ b/src/components/tags-editor/index.less @@ -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; diff --git a/src/components/top-menu/index.jsx b/src/components/top-menu/index.jsx index 1149732..8ed5172 100644 --- a/src/components/top-menu/index.jsx +++ b/src/components/top-menu/index.jsx @@ -23,7 +23,6 @@ const MENULIST = [ key: 'interList', title: '模拟面试', route: '/inter-list', - // isOpenNewWindow: true, }, ] diff --git a/src/views/question-bank/constant.ts b/src/views/question-bank/constant.ts index a358603..6ff1a73 100644 --- a/src/views/question-bank/constant.ts +++ b/src/views/question-bank/constant.ts @@ -66,6 +66,9 @@ export const apiName = { */ queryCategoryByPrimary: '/category/queryCategoryByPrimary', + // 获取题目列表 + getSubjectPage: '/getSubjectPage' + }; export const imgObject = { diff --git a/src/views/question-bank/index.tsx b/src/views/question-bank/index.tsx index dd703de..574dcb4 100644 --- a/src/views/question-bank/index.tsx +++ b/src/views/question-bank/index.tsx @@ -15,10 +15,10 @@ const QuestionBank = () => { const [firstCategoryList, setFirstCategoryList] = useState([]) const [questionList, setQuestionList] = useState([]) const [isShowSpin, setIsShowSpin] = useState(false) - const [labelList, setLabelList] = useState([]); // 选中的标签列表 + const [labelList, setLabelList] = useState(); // 选中的标签列表 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) => { - 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 (
@@ -83,6 +109,7 @@ const QuestionBank = () => { categoryList={firstCategoryList} onChangeLabel={onChangeLabel} primaryCategoryId={primaryCategoryId} + isMultipleChoice={false} /> )}
diff --git a/src/views/upload-questions/components/brief-questions/index.jsx b/src/views/upload-questions/components/brief-questions/index.jsx index f71e012..da131d7 100644 --- a/src/views/upload-questions/components/brief-questions/index.jsx +++ b/src/views/upload-questions/components/brief-questions/index.jsx @@ -308,12 +308,12 @@ export default class BriefQuestions extends Component {
题目答案：
- {this.reanderAnser()} + {/* {this.reanderAnser()} */}
{ - this.rankLabelBox = ref; - }} + // ref={(ref) => { + // this.rankLabelBox = ref; + // }} subjectName={subjectName} onChangeRankLabel={this.onChangeRankLabel} handleChangeRank={this.handleChangeRank} diff --git a/src/views/upload-questions/components/rank-label-box/index.jsx b/src/views/upload-questions/components/rank-label-box/index.jsx index e5ca885..0fa4cbe 100644 --- a/src/views/upload-questions/components/rank-label-box/index.jsx +++ b/src/views/upload-questions/components/rank-label-box/index.jsx @@ -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 ( +
+
职级选择：
+
+ + {/* + 注：所选职级应为熟练掌握该题的最低职级 + */} +
+
+ ); + }; + + /** + * 选择一级分类-单选 + * @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 ( + + {firstCategoryList?.length > 0 && ( +
+
一级分类：
+
+ +
+
+ )} + + ); + }; + + return ( + + {rendeRrankModule()} + {renderFirstModule(firstCategoryList)} + {/* {secondCategoryList?.length > 0 && ( + + {this.renderSecondModule(secondCategoryList)} + {thirdCategoryList?.length > 0 && this.renderThirdModule(thirdCategoryList)} + + )} */} + + ) +} + +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 ( - - {this.rendeRrankModule(rankList)} - {this.renderFirstModule(firstCategoryList)} - {secondCategoryList?.length > 0 && ( - - {this.renderSecondModule(secondCategoryList)} - {thirdCategoryList?.length > 0 && this.renderThirdModule(thirdCategoryList)} - - )} - - ); - } + /** * 职级选择 @@ -346,5 +493,21 @@ export default class RankLabelBox extends Component {
); }; + + render() { + const { firstCategoryList, secondCategoryList, thirdCategoryList, rankList } = this.state; + return ( + + {this.rendeRrankModule(rankList)} + {this.renderFirstModule(firstCategoryList)} + {secondCategoryList?.length > 0 && ( + + {this.renderSecondModule(secondCategoryList)} + {thirdCategoryList?.length > 0 && this.renderThirdModule(thirdCategoryList)} + + )} + + ); + } } diff --git a/src/views/upload-questions/components/rank-label-box/index.less b/src/views/upload-questions/components/rank-label-box/index.less index 916b427..736c640 100644 --- a/src/views/upload-questions/components/rank-label-box/index.less +++ b/src/views/upload-questions/components/rank-label-box/index.less @@ -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) } } } diff --git a/src/views/upload-questions/constant.js b/src/views/upload-questions/constant.js index 9f22418..10e65be 100644 --- a/src/views/upload-questions/constant.js +++ b/src/views/upload-questions/constant.js @@ -5,7 +5,10 @@ export const apiName = { /** * 获取一级 */ - queryPrimaryCategory: '/subject/category/queryPrimaryCategory', + queryPrimaryCategory: '/category/queryPrimaryCategory', + + // 根据一级分类查询二级及标签 + queryLabelByCategoryId: '/label/queryLabelByCategoryId', /** * 获取三级分类标签