627 lines
25 KiB
JavaScript
627 lines
25 KiB
JavaScript
import React, { Component, Fragment, useState, useEffect } from 'react';
|
||
|
||
import {
|
||
RightOutlined,
|
||
UpOutlined,
|
||
DownOutlined,
|
||
CaretDownOutlined,
|
||
CaretUpOutlined,
|
||
} from '@ant-design/icons';
|
||
import req from '@utils/request';
|
||
import { Divider, Spin } from 'antd';
|
||
import _ from 'lodash';
|
||
import './index.less';
|
||
import { apiName, imgObject } from './constant';
|
||
|
||
/**
|
||
* 大分类中的背景图
|
||
*/
|
||
export const categoryBackImg = {
|
||
0: imgObject.backAllImg,
|
||
1: imgObject.dataImg,
|
||
2: imgObject.javaImg,
|
||
3: imgObject.npmImg,
|
||
4: imgObject.parallelComputingImg,
|
||
5: imgObject.springbootImg,
|
||
6: imgObject.sqlImg,
|
||
7: imgObject.systemDesignImg,
|
||
8: imgObject.algorithmImg,
|
||
};
|
||
|
||
const categoryShowCount = 4;
|
||
|
||
const cacheMap = {}
|
||
|
||
const CategoryList = ({ primaryCategoryId, categoryList, ...props }) => {
|
||
const [secondCategoryList, setSecondCategoryList] = useState([])
|
||
const [currentActive, setCurrentActive] = useState(categoryList[0])
|
||
const [isPutAway, setIsPutAway] = useState(true)
|
||
const [loading, setLoading] = useState(false)
|
||
|
||
const getLabels = (id) => {
|
||
return new Promise(resolve => {
|
||
req({
|
||
method: 'post',
|
||
url: apiName.queryLabelByCategoryId,
|
||
data: { categoryId: id }
|
||
}).then(res => {
|
||
if (cacheMap[id]) {
|
||
resolve(cacheMap[id])
|
||
} else {
|
||
cacheMap[id] = res.data
|
||
resolve(res.data)
|
||
}
|
||
})
|
||
})
|
||
}
|
||
|
||
// 获取大类下分类
|
||
const getCategoryByPrimary = () => {
|
||
req({
|
||
method: 'post',
|
||
url: apiName.queryCategoryByPrimary,
|
||
data: { categoryType: 2, parentId: currentActive.id }
|
||
}).then(async res => {
|
||
let list = res.data
|
||
for (let i = 0; i < list.length; i++) {
|
||
list[i].children = await getLabels(list[i].id)
|
||
}
|
||
setSecondCategoryList(_.cloneDeep(list))
|
||
})
|
||
}
|
||
|
||
useEffect(() => {
|
||
if (primaryCategoryId) {
|
||
getCategoryByPrimary()
|
||
}
|
||
}, [primaryCategoryId])
|
||
|
||
|
||
|
||
/**
|
||
* 切换一级分类
|
||
* @param {*} item
|
||
* @returns
|
||
*/
|
||
const onChangeCategory = (item) => () => {
|
||
if (currentActive.id === item.id) {
|
||
return;
|
||
}
|
||
setCurrentActive(item)
|
||
props.onChangeCategory(item);
|
||
};
|
||
|
||
/**
|
||
* 一级分类模块
|
||
* @returns
|
||
*/
|
||
const renderFirstContainer = () => {
|
||
return (
|
||
<div className="first-category-list">
|
||
{categoryList.slice(0, 7).map((categoryModuleItem, categoryModuleIndex) => {
|
||
return (
|
||
<div
|
||
className={`first-category-item ${categoryModuleItem.id === currentActive.id &&
|
||
'first-category-item-active'
|
||
}`}
|
||
key={`first_category_${categoryModuleItem.id}`}
|
||
style={{
|
||
backgroundImage: `url(${categoryBackImg[categoryModuleIndex]})`,
|
||
}}
|
||
onClick={onChangeCategory(categoryModuleItem)}>
|
||
<div className="first-category-item-title">
|
||
{categoryModuleItem.categoryName}
|
||
</div>
|
||
<div className="first-category-item-count">
|
||
{categoryModuleItem.count || 50}道题
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
{categoryList.length > 7 && (
|
||
<div className="first-category-more">
|
||
更多
|
||
<RightOutlined />
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
/**
|
||
* 选择标签-支持单选（多选）
|
||
* @param {*} categoryId 一级分类id
|
||
* @param {*} secondCategoryIndex 二级分类对象index
|
||
* @param {*} thirdCategoryIndex 三级标签index
|
||
* @param {*} active 三级标签当前的选中状态
|
||
* @returns
|
||
*/
|
||
const onChangeLabel = (secondCategoryIndex, thirdCategoryIndex, active) => () => {
|
||
const { isMultipleChoice } = props;
|
||
const list = _.cloneDeep(secondCategoryList)
|
||
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']))
|
||
};
|
||
|
||
/**
|
||
* 展开/收起
|
||
* @param {*} secondCategoryIndex
|
||
* @returns
|
||
*/
|
||
const onChangeOpenStatus = (secondCategoryIndex, isOpen) => () => {
|
||
_.set(secondCategoryList, [secondCategoryIndex, 'isOpen'], !isOpen);
|
||
setSecondCategoryList(secondCategoryList)
|
||
};
|
||
|
||
/**
|
||
* 展开/收起
|
||
*/
|
||
const onChangePutAway = () => {
|
||
setIsPutAway(!isPutAway)
|
||
};
|
||
|
||
/**
|
||
* 二级分类模块
|
||
* @returns
|
||
*/
|
||
const renderSecondContainer = () => {
|
||
return (
|
||
<Spin spinning={loading}>
|
||
<div className="second-category-list">
|
||
{secondCategoryList.map((secondCategoryItem, secondCategoryIndex) => {
|
||
return (
|
||
<div
|
||
style={{
|
||
display:
|
||
secondCategoryIndex >= categoryShowCount && isPutAway
|
||
? 'none'
|
||
: 'flex',
|
||
}}
|
||
className="second-category-item"
|
||
key={`second_category_${secondCategoryItem.id}`}>
|
||
<div className="second-category-item-title">
|
||
{secondCategoryItem.categoryName}：
|
||
</div>
|
||
{secondCategoryItem?.children?.length > 0 && (
|
||
<div className="second-category-item-box">
|
||
<div
|
||
style={{
|
||
height: secondCategoryItem.isOpen ? 'auto' : 43,
|
||
}}
|
||
className="second-category-item-list"
|
||
id={`id_${secondCategoryIndex}`}>
|
||
{secondCategoryItem.children.map(
|
||
(thirdCategoryItem, thirdCategoryIndex) => {
|
||
return (
|
||
<div
|
||
className={`third-category-item ${thirdCategoryItem.active
|
||
? 'third-category-item-active'
|
||
: ''
|
||
}`}
|
||
key={`third_category_${thirdCategoryItem.id}`}
|
||
onClick={onChangeLabel(
|
||
secondCategoryIndex,
|
||
thirdCategoryIndex,
|
||
(thirdCategoryItem.active || false)
|
||
)}>
|
||
{thirdCategoryItem.labelName}
|
||
</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>
|
||
);
|
||
})}
|
||
{secondCategoryList?.length >= categoryShowCount && (
|
||
<Divider
|
||
onClick={onChangePutAway}
|
||
dashed
|
||
style={{
|
||
marginTop: 10,
|
||
fontSize: 13,
|
||
cursor: 'pointer'
|
||
}}>
|
||
{isPutAway ? '展开' : '收起'}
|
||
{isPutAway ? (
|
||
<CaretDownOutlined style={{ marginLeft: 4 }} />
|
||
) : (
|
||
<CaretUpOutlined style={{ marginLeft: 4 }} />
|
||
)}
|
||
</Divider>
|
||
)}
|
||
</div>
|
||
</Spin>
|
||
|
||
);
|
||
};
|
||
|
||
return (
|
||
<div className="category-box">
|
||
<Fragment>{categoryList?.length && renderFirstContainer()}</Fragment>
|
||
<Fragment>
|
||
{secondCategoryList?.length > 0 && renderSecondContainer()}
|
||
</Fragment>
|
||
{/* {!this.props.isHideSec && (
|
||
<Fragment>
|
||
{secondCategoryList?.length > 0 && this.renderSecondContainer()}
|
||
</Fragment>
|
||
)} */}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
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 (
|
||
<div className="first-category-list">
|
||
{categoryList.slice(0, 7).map((categoryModuleItem, categoryModuleIndex) => {
|
||
return (
|
||
<div
|
||
className={`first-category-item ${categoryModuleItem.primaryCategoryId === currentActive &&
|
||
'first-category-item-active'
|
||
}`}
|
||
key={`first_category_${categoryModuleItem.id}`}
|
||
style={{
|
||
backgroundImage: `url(${categoryBackImg[categoryModuleIndex]})`,
|
||
}}
|
||
onClick={this.onChangeCategory(categoryModuleItem.primaryCategoryId)}>
|
||
<div className="first-category-item-title">
|
||
{categoryModuleItem.categoryName}
|
||
</div>
|
||
<div className="first-category-item-count">
|
||
{categoryModuleItem.count || 50}道题
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
{categoryList.length > 7 && (
|
||
<div className="first-category-more">
|
||
更多
|
||
<RightOutlined />
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
/**
|
||
* 二级分类模块
|
||
* @returns
|
||
*/
|
||
renderSecondContainer = () => {
|
||
const { secondCategoryList, isPutAway } = this.state;
|
||
return (
|
||
<div className="second-category-list">
|
||
{secondCategoryList.map((secondCategoryItem, secondCategoryIndex) => {
|
||
return (
|
||
<div
|
||
style={{
|
||
display:
|
||
secondCategoryIndex >= categoryShowCount && isPutAway
|
||
? 'none'
|
||
: 'flex',
|
||
}}
|
||
className="second-category-item"
|
||
key={`second_category_${secondCategoryItem.categoryId}`}>
|
||
<div className="second-category-item-title">
|
||
{secondCategoryItem.categoryName}：
|
||
</div>
|
||
{secondCategoryItem?.labelInfoList?.length > 0 && (
|
||
<div className="second-category-item-box">
|
||
<div
|
||
style={{
|
||
height: secondCategoryItem.isOpen ? 'auto' : 43,
|
||
}}
|
||
className="second-category-item-list"
|
||
id={`id_${secondCategoryIndex}`}>
|
||
{secondCategoryItem.labelInfoList.map(
|
||
(thirdCategoryItem, thirdCategoryIndex) => {
|
||
return (
|
||
<div
|
||
className={`third-category-item ${thirdCategoryItem.active
|
||
? 'third-category-item-active'
|
||
: ''
|
||
}`}
|
||
key={`third_category_${thirdCategoryItem.id}`}
|
||
onClick={this.onChangeLabel(
|
||
secondCategoryItem.labelInfoList,
|
||
secondCategoryIndex,
|
||
thirdCategoryIndex,
|
||
thirdCategoryItem.active
|
||
)}>
|
||
{thirdCategoryItem.labelName}
|
||
</div>
|
||
);
|
||
}
|
||
)}
|
||
</div>
|
||
<div
|
||
id={`second_id_${secondCategoryIndex}`}
|
||
className="second-category-item-status"
|
||
onClick={this.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>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
})}
|
||
{secondCategoryList?.length >= categoryShowCount && (
|
||
<Divider
|
||
onClick={this.onChangePutAway}
|
||
dashed
|
||
style={{
|
||
marginTop: 10,
|
||
fontSize: 13,
|
||
}}>
|
||
{isPutAway ? '展开' : '收起'}
|
||
{isPutAway ? (
|
||
<CaretDownOutlined style={{ marginLeft: 4 }} />
|
||
) : (
|
||
<CaretUpOutlined style={{ marginLeft: 4 }} />
|
||
)}
|
||
</Divider>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
render() {
|
||
const { categoryList } = this.props;
|
||
const { secondCategoryList } = this.state;
|
||
return (
|
||
<div className="category-box">
|
||
<Fragment>{categoryList?.length > 0 && this.renderFirstContainer()}</Fragment>
|
||
{!this.props.isHideSec && (
|
||
<Fragment>
|
||
{secondCategoryList?.length > 0 && this.renderSecondContainer()}
|
||
</Fragment>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
}
|
||
|