From 668d1e0a52987b5c8a5dbb8a3804960428706194 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: Thu, 19 Oct 2023 00:56:23 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84=E9=A6=96=E9=A1=B5?=
=?UTF-8?q?=E4=BA=A4=E4=BA=92,=E5=AE=8C=E5=96=84=E4=B8=8A=E4=BC=A0?=
=?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=88=86=E7=B1=BB=E5=8F=8A=E6=A0=87=E7=AD=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/category-list/index.jsx | 354 +-----------------
src/components/question-list/index.jsx | 5 +-
src/components/tags-editor/index.jsx | 8 +-
src/components/tags-editor/index.less | 3 -
src/views/question-bank/index.tsx | 11 +-
.../components/brief-questions/index.jsx | 2 +-
.../components/rank-label-box/index.jsx | 119 ++++--
src/views/upload-questions/constant.js | 10 +-
8 files changed, 119 insertions(+), 393 deletions(-)
diff --git a/src/components/category-list/index.jsx b/src/components/category-list/index.jsx
index dbd999f..050dac9 100644
--- a/src/components/category-list/index.jsx
+++ b/src/components/category-list/index.jsx
@@ -128,6 +128,8 @@ const CategoryList = ({ primaryCategoryId, categoryList, ...props }) => {
);
};
+ const [currentLabelIndex, setCurrentLabelIndex] = useState([])
+
/**
* 选择标签-支持单选（多选）
* @param {*} categoryId 一级分类id
@@ -145,20 +147,13 @@ const CategoryList = ({ primaryCategoryId, categoryList, ...props }) => {
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);
+ if (currentLabelIndex.length) {
+ _.set(list, [currentLabelIndex[0], 'children', currentLabelIndex[1], 'active'], false)
+ }
+ _.set(list, [secondCategoryIndex, 'children', thirdCategoryIndex, 'active'], !active)
+ setCurrentLabelIndex([secondCategoryIndex, thirdCategoryIndex])
setSecondCategoryList(list)
}
- // console.log(currentActive, _.get(list, [secondCategoryIndex, 'children', thirdCategoryIndex, 'id']))
props.onChangeLabel(_.get(list, [secondCategoryIndex, 'id']), _.get(list, [secondCategoryIndex, 'children', thirdCategoryIndex, 'id']))
};
@@ -168,8 +163,9 @@ const CategoryList = ({ primaryCategoryId, categoryList, ...props }) => {
* @returns
*/
const onChangeOpenStatus = (secondCategoryIndex, isOpen) => () => {
- _.set(secondCategoryList, [secondCategoryIndex, 'isOpen'], !isOpen);
- setSecondCategoryList(secondCategoryList)
+ const _list = _.cloneDeep(secondCategoryList)
+ _.set(_list, [secondCategoryIndex, 'isOpen'], !isOpen);
+ setSecondCategoryList(_list)
};
/**
@@ -235,7 +231,7 @@ const CategoryList = ({ primaryCategoryId, categoryList, ...props }) => {
className="second-category-item-status"
onClick={onChangeOpenStatus(
secondCategoryIndex,
- secondCategoryItem.isOpen
+ (secondCategoryItem.isOpen || false)
)}>
{secondCategoryItem.isOpen ? '收起' : '展开'}
@@ -296,331 +292,3 @@ const CategoryList = ({ primaryCategoryId, categoryList, ...props }) => {
export default CategoryList
-class CategoryList1 extends Component {
- constructor(props) {
- super(props);
- this.state = {
- secondCategoryList: [],
- currentActive: null,
- isPutAway: true, // 是否收起 默认收起状态
- };
- }
-
- componentDidMount() {
- // this.initCategoryList();
- }
-
- /**
- * 初始化数据，默认选择第一个
- */
- initCategoryList() {
- const { categoryList, primaryCategoryId } = this.props;
- let currentActive = primaryCategoryId ?? categoryList[0];
- this.props.onChangeCategory(currentActive);
- this.getSecondCategoryList(currentActive);
- }
-
- /**
- * 获得二级三级分类数据
- */
- getSecondCategoryList(currentActive) {
- const { categoryListMap } = this.props;
- // 调用接口返回二级三级数据
- let params = {
- parentId: currentActive.id,
- categoryType: 2,
- };
- req({
- method: 'post',
- data: params,
- url: apiName.getCategoryLabelInfo,
- })
- .then((res) => {
- if (res.data && res.data.length > 0) {
- let secondCategoryList = res.data;
- let listLen =
- categoryListMap &&
- categoryListMap[currentActive] &&
- categoryListMap[currentActive].length;
- let objActive = {};
- listLen > 0 &&
- categoryListMap &&
- categoryListMap[currentActive] &&
- categoryListMap[currentActive].forEach((item) => {
- objActive[item] = item;
- });
- secondCategoryList.forEach((categoryItem) => {
- categoryItem.labelInfoList.forEach((item) => {
- if (listLen > 0 && objActive[item.assembleId]) {
- item.active = true;
- } else {
- item.active = false;
- }
- });
- categoryItem.isOpen = false;
- });
- this.setState(
- {
- secondCategoryList,
- currentActive,
- },
- () => {
- let activeList = [];
- secondCategoryList.forEach((categoryItem) => {
- categoryItem.labelInfoList.forEach((item) => {
- if (item.active) {
- activeList.push(item.assembleId);
- }
- });
- });
- secondCategoryList.forEach((item, index) => {
- let height = document.getElementById('id_' + index)?.scrollHeight;
- let displayHeight = height > 43 ? 'flex' : 'none';
- !this.props.isHideSec &&
- (document.getElementById('second_id_' + index).style.display =
- displayHeight);
- });
- }
- );
- }
- })
- .catch((err) => console.log(err));
- }
-
- /**
- * 切换一级分类
- * @param {*} item
- * @returns
- */
- onChangeCategory = (primaryCategoryId) => () => {
- let { currentActive } = this.state;
- if (currentActive === primaryCategoryId) {
- return;
- }
- this.props.isHideSec &&
- this.setState({
- currentActive: primaryCategoryId,
- });
- this.props.onChangeCategory(primaryCategoryId);
- !this.props.isHideSec && this.getSecondCategoryList(primaryCategoryId);
- };
-
- /**
- * 选择标签-支持单选（多选）
- * @param {*} categoryId 一级分类id
- * @param {*} childrenLevelList 二级分类对象的标签列表
- * @param {*} secondCategoryIndex 二级分类对象index
- * @param {*} thirdCategoryIndex 三级标签index
- * @param {*} active 三级标签当前的选中状态
- * @returns
- */
- onChangeLabel = (childrenLevelList, secondCategoryIndex, thirdCategoryIndex, active) => () => {
- let { secondCategoryList, currentActive } = this.state;
- const { isMultipleChoice } = this.props;
- if (isMultipleChoice) {
- // 三级标签支持多选
- _.set(childrenLevelList, [thirdCategoryIndex, 'active'], !active);
- _.set(secondCategoryList, [secondCategoryIndex, 'children'], childrenLevelList);
- } else {
- // 三级标签支持单选
- let formatLabelList = childrenLevelList.map((item, index) => {
- let flag = false;
- if (index === thirdCategoryIndex) {
- flag = !active; // 将三级标签设置选中/未选中
- }
- return {
- ...item,
- active: flag,
- };
- });
- _.set(secondCategoryList, [secondCategoryIndex, 'children'], formatLabelList);
- }
- this.setState(
- {
- secondCategoryList,
- },
- () => {
- let activeList = [];
- secondCategoryList.forEach((categoryItem) => {
- categoryItem.children.forEach((item) => {
- if (item.active) {
- activeList.push(item.assembleId);
- }
- });
- });
- this.props.onChangeLabel(currentActive, activeList);
- }
- );
- };
-
- /**
- * 展开/收起
- * @param {*} secondCategoryIndex
- * @returns
- */
- onChangeOpenStatus = (secondCategoryIndex, isOpen) => () => {
- let { secondCategoryList } = this.state;
- _.set(secondCategoryList, [secondCategoryIndex, 'isOpen'], !isOpen);
- this.setState({
- secondCategoryList,
- });
- };
-
- /**
- * 展开/收起
- */
- onChangePutAway = () => {
- let { isPutAway } = this.state;
- this.setState({
- isPutAway: !isPutAway,
- });
- };
-
-
-
- /**
- * 一级分类模块
- * @returns
- */
- renderFirstContainer = () => {
- return (
-
- {categoryList.slice(0, 7).map((categoryModuleItem, categoryModuleIndex) => {
- return (
-
-
- {categoryModuleItem.categoryName}
-
-
- {categoryModuleItem.count || 50}道题
-
-
- );
- })}
- {categoryList.length > 7 && (
-
- 更多
-
-
- )}
-
- );
- };
-
- /**
- * 二级分类模块
- * @returns
- */
- renderSecondContainer = () => {
- const { secondCategoryList, isPutAway } = this.state;
- return (
-
- {secondCategoryList.map((secondCategoryItem, secondCategoryIndex) => {
- return (
-
= categoryShowCount && isPutAway
- ? 'none'
- : 'flex',
- }}
- className="second-category-item"
- key={`second_category_${secondCategoryItem.categoryId}`}>
-
- {secondCategoryItem.categoryName}：
-
- {secondCategoryItem?.labelInfoList?.length > 0 && (
-
-
- {secondCategoryItem.labelInfoList.map(
- (thirdCategoryItem, thirdCategoryIndex) => {
- return (
-
- {thirdCategoryItem.labelName}
-
- );
- }
- )}
-
-
-
- {secondCategoryItem.isOpen ? '收起' : '展开'}
-
-
- {secondCategoryItem.isOpen ? (
-
- ) : (
-
- )}
-
-
-
- )}
-
- );
- })}
- {secondCategoryList?.length >= categoryShowCount && (
-
- {isPutAway ? '展开' : '收起'}
- {isPutAway ? (
-
- ) : (
-
- )}
-
- )}
-
- );
- };
- render() {
- const { categoryList } = this.props;
- const { secondCategoryList } = this.state;
- return (
-
- {categoryList?.length > 0 && this.renderFirstContainer()}
- {!this.props.isHideSec && (
-
- {secondCategoryList?.length > 0 && this.renderSecondContainer()}
-
- )}
-
- );
- }
-}
-
diff --git a/src/components/question-list/index.jsx b/src/components/question-list/index.jsx
index 4de0cb4..23b2551 100644
--- a/src/components/question-list/index.jsx
+++ b/src/components/question-list/index.jsx
@@ -192,11 +192,10 @@ const QuestionList = (props) => {
columns={questionColumns}
dataSource={questionList}
rowKey={(record) => record.id}
- // bordered={false}
pagination={false}
rowClassName="question-table-row"
/>
- {total > 10 && (
+ {/* {total > 10 && (
{
total={total}
onChange={onChangePagination}
/>
- )}
+ )} */}
{labelList?.length > 0 &&
labelList.map((item, index) => {
- const isLongTag = item.categoryName.length > 20;
+ const isLongTag = item.categoryName?.length > 20;
const tagElem = (
this.handleClose(index, item.categoryId)}>
+ onClose={() => this.handleClose(index, item.id)}>
{isLongTag
? `${item.categoryName.slice(0, 20)}...`
: item.categoryName}
diff --git a/src/components/tags-editor/index.less b/src/components/tags-editor/index.less
index 55c3ad9..e1bcfd8 100644
--- a/src/components/tags-editor/index.less
+++ b/src/components/tags-editor/index.less
@@ -3,9 +3,6 @@
display: flex;
flex-wrap: wrap;
.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/question-bank/index.tsx b/src/views/question-bank/index.tsx
index 36483c1..9b1b70e 100644
--- a/src/views/question-bank/index.tsx
+++ b/src/views/question-bank/index.tsx
@@ -52,16 +52,21 @@ const QuestionBank = () => {
const onChangeCategory = (item: Record) => {
setLabelList('')
setPromaryCategoryId(item.id)
+ setQuestionList([])
setPageIndex(1)
+ setTotal(0)
};
+ const [secondCategoryId, setSecondCategoryId] = useState('')
+
/**
* 选择标签时，请求列表数据
* @param {*} primaryCategoryId 一级分类id
* @param {*} assembleIds 三级标签 assembleIds
*/
- const onChangeLabel = (primaryCategory: any, assembleIds: string) => {
- setPromaryCategoryId(primaryCategory)
+ const onChangeLabel = (secondCategoryId: any, assembleIds: string) => {
+ // setPromaryCategoryId(primaryCategory)
+ setSecondCategoryId(secondCategoryId)
setLabelList(assembleIds)
setPageIndex(1)
};
@@ -71,7 +76,7 @@ const QuestionBank = () => {
pageNo: pageIndex,
pageSize: 10,
labelId: labelList,
- categoryId: primaryCategoryId,
+ categoryId: secondCategoryId,
subjectDifficult: 1
}
req({
diff --git a/src/views/upload-questions/components/brief-questions/index.jsx b/src/views/upload-questions/components/brief-questions/index.jsx
index da131d7..36e52c7 100644
--- a/src/views/upload-questions/components/brief-questions/index.jsx
+++ b/src/views/upload-questions/components/brief-questions/index.jsx
@@ -39,7 +39,7 @@ export default class BriefQuestions extends Component {
subjectName: str,
},
() => {
- this.rankLabelBox.getThirdCategoryList();
+ // this.rankLabelBox.getThirdCategoryList();
let isDisabledSubmit = this.checkData();
this.setState({
isDisabledSubmit,
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 0fa4cbe..1ea91aa 100644
--- a/src/views/upload-questions/components/rank-label-box/index.jsx
+++ b/src/views/upload-questions/components/rank-label-box/index.jsx
@@ -11,6 +11,7 @@ const RankLabelBox = (props) => {
const [firstCategoryList, setFirstCategoryList] = useState([])
const [firstSelected, setFirstSelected] = useState(null)
const [secondCategoryList, setSecondCategoryList] = useState([])
+ const [thirdCategoryList, setThirdCategoryList] = useState([])
/**
* 获得一级分类数据
@@ -23,11 +24,10 @@ const RankLabelBox = (props) => {
url: apiName.queryPrimaryCategory,
})
.then((res) => {
- console.log(res)
const list = res.data.map((item, index) => {
return {
...item,
- active: index == 0 ? true : false,
+ active: index == 0,
};
});
setFirstCategoryList(list)
@@ -46,9 +46,8 @@ const RankLabelBox = (props) => {
* @param {*} selectList
*/
const onHandleChangeRank = (handleStatusList, selectList) => {
- // console.log(handleStatusList, selectList)
setRankList(handleStatusList)
- // this.props.handleChangeRank(selectList);
+ props.handleChangeRank(selectList);
};
/**
@@ -75,14 +74,22 @@ const RankLabelBox = (props) => {
);
};
+ const listType = {
+ 1: setFirstCategoryList,
+ 2: setSecondCategoryList,
+ 3: setThirdCategoryList
+ }
+
/**
* 选择一级分类-单选
* @param {*} handleStatusList 带有是否选中状态的原数组
* @param {*} selectList 选中id的数组
*/
- const onChangeFirst = (handleStatusList, selectList) => {
- setFirstCategoryList(handleStatusList)
- setFirstSelected(selectList[0])
+ const onChangeTags = (handleStatusList, selectList, type) => {
+ listType[type](handleStatusList)
+ if (type == 1) {
+ setFirstSelected(selectList[0])
+ }
};
/**
@@ -90,36 +97,43 @@ const RankLabelBox = (props) => {
* @param {*} id 一级分类id
*/
const getSecondCategoryList = (id) => {
+ const params = { categoryType: 2, parentId: id };
+ req({
+ method: 'post',
+ data: params,
+ url: apiName.queryCategoryByPrimary,
+ }).then((res) => {
+ setSecondCategoryList(res.data)
+ }).catch((err) => console.log(err));
+ }
+
+ /**
+ * 获得标签数据
+ * @param {*} id 一级分类id
+ */
+ const getLabelList = (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));
+ }).then((res) => {
+ setThirdCategoryList(res.data.map(item => {
+ return {
+ ...item,
+ categoryName: item.labelName
+ }
+ }))
+ }).catch((err) => console.log(err));
}
+
+
useEffect(() => {
if (firstSelected) {
getSecondCategoryList(firstSelected);
+ getLabelList(firstSelected)
}
-
}, [firstSelected])
/**
@@ -137,7 +151,7 @@ const RankLabelBox = (props) => {
onChangeTags(list, id, 1)}
isDisabledReverseSelection={true}
/>
@@ -147,16 +161,59 @@ const RankLabelBox = (props) => {
);
};
+ /**
+ * 二级分类选择
+ * @param {*} secondCategoryList
+ * @returns
+ */
+ const renderSecondModule = () => {
+ return (
+
+
二级分类：
+
+ onChangeTags(list, id, 2)}
+ />
+
+
+
三级标签：
+
+ onChangeTags(list, id, 3)}
+ />
+
+