Skip to content

X
xiaomai-cloud-class-web
Commit 59e7cae0 by yuananting
Options

fix:分类树搜索展开项修改

parent a4a05ed4
Showing with 98 additions and 35 deletions
src/modules/teach-tool/QuestionCategoryManage.jsx
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: yuananting * @Author: yuananting
* @Date: 2021-02-23 18:28:50 * @Date: 2021-02-23 18:28:50
* @LastEditors: yuananting * @LastEditors: yuananting
* @LastEditTime: 2021-03-18 18:13:26 * @LastEditTime: 2021-03-19 14:15:00
* @Description: 助学工具-题库-主页面分类管理 * @Description: 助学工具-题库-主页面分类管理
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -34,6 +34,7 @@ class QuestionCategoryManage extends Component { ...@@ -34,6 +34,7 @@ class QuestionCategoryManage extends Component {
treeData: [], treeData: [],
treeMap: {}, treeMap: {},
selectedKeys: ["0"], selectedKeys: ["0"],
autoExpandParent: true,
}; };
} }
...@@ -52,22 +53,45 @@ class QuestionCategoryManage extends Component { ...@@ -52,22 +53,45 @@ class QuestionCategoryManage extends Component {
QuestionBankService.queryCategoryTree(query).then((res) => { QuestionBankService.queryCategoryTree(query).then((res) => {
const { result = [] } = res; const { result = [] } = res;
let str = "未分类"; let str = "未分类";
if (categoryName && str.indexOf(categoryName) < 0) { if (categoryName) {
this.setState({ treeData: this.renderTreeNodes(result, categoryName) }); this.setState({ autoExpandParent: true });
this.setState({ if (str.indexOf(categoryName) < 0) {
expandedKeys: this.getFirstLevelKeys(result), this.setState({
}); treeData: this.renderTreeNodes(result, categoryName),
});
let nodeId = [];
Object.keys(this.state.treeMap).forEach((item) => {
nodeId.push(item);
});
this.setState({ expandedKeys: nodeId });
} else {
const defaultNode = {
id: "0",
categoryName: "未分类",
categoryCount: 0,
};
result.unshift(defaultNode);
this.setState({
treeData: this.renderTreeNodes(result, categoryName),
});
let nodeId = [];
Object.keys(this.state.treeMap).forEach((item) => {
nodeId.push(item);
});
this.setState({ expandedKeys: nodeId });
}
} else { } else {
this.setState({ autoExpandParent: false });
const defaultNode = { const defaultNode = {
id: "0", id: "0",
categoryName: "未分类", categoryName: "未分类",
categoryCount: 0, categoryCount: 0,
}; };
result.unshift(defaultNode); result.unshift(defaultNode);
this.setState({ treeData: this.renderTreeNodes(result, categoryName) });
this.setState({ this.setState({
expandedKeys: this.getFirstLevelKeys(result), treeData: this.renderTreeNodes(result, categoryName),
}); });
this.setState({ expandedKeys: [] });
} }
}); });
}; };
...@@ -433,29 +457,34 @@ class QuestionCategoryManage extends Component { ...@@ -433,29 +457,34 @@ class QuestionCategoryManage extends Component {
return item; return item;
}); });
// this.getFirstLevelKeys(newTreeData);
let map = {}; let map = {};
let getChildren = function (data) { this.setState({ treeMap: this.getTreeMap(data, map) });
data.forEach((item) => {
map[item.id] = item;
if (item.sonCategoryList && item.sonCategoryList.length > 0) {
getChildren(item.sonCategoryList);
}
});
};
getChildren(data);
this.setState({ treeMap: map });
return newTreeData; return newTreeData;
}; };
getTreeMap = (data, map) => {
data.forEach((item) => {
map[item.id] = item;
if (item.sonCategoryList && item.sonCategoryList.length > 0) {
this.getTreeMap(item.sonCategoryList, map);
}
});
return map;
};
/** 树状选中事件 */ /** 树状选中事件 */
onSelect = (selectedKeys) => { onSelect = (selectedKeys) => {
this.setState({ selectedKeys }); this.setState({ selectedKeys });
}; };
render() { render() {
const { treeData, expandedKeys, selectedKeys } = this.state; const {
treeData,
expandedKeys,
selectedKeys,
autoExpandParent,
} = this.state;
console.log("autoExpandParent:", autoExpandParent);
return ( return (
<div className="page question-category-manage"> <div className="page question-category-manage">
<Breadcrumbs <Breadcrumbs
...@@ -497,6 +526,7 @@ class QuestionCategoryManage extends Component { ...@@ -497,6 +526,7 @@ class QuestionCategoryManage extends Component {
<div className="course-category-tree"> <div className="course-category-tree">
<DirectoryTree <DirectoryTree
expandedKeys={expandedKeys} expandedKeys={expandedKeys}
autoExpandParent={autoExpandParent}
onExpand={this.onExpand} onExpand={this.onExpand}
selectedKeys={selectedKeys} selectedKeys={selectedKeys}
onSelect={this.onSelect} onSelect={this.onSelect}
......
src/modules/teach-tool/components/QuestionBankSider.jsx
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: yuananting * @Author: yuananting
* @Date: 2021-02-22 10:59:43 * @Date: 2021-02-22 10:59:43
* @LastEditors: yuananting * @LastEditors: yuananting
* @LastEditTime: 2021-03-18 18:16:16 * @LastEditTime: 2021-03-19 14:18:59
* @Description: 助学工具-题库-题库主页面侧边栏 * @Description: 助学工具-题库-题库主页面侧边栏
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -26,6 +26,7 @@ class QuestionBankSider extends Component { ...@@ -26,6 +26,7 @@ class QuestionBankSider extends Component {
NewEditQuestionBankCategory: null, //新增或编辑分类模态框 NewEditQuestionBankCategory: null, //新增或编辑分类模态框
ImportCourseCategory: null, // 引用课程分类模态框 ImportCourseCategory: null, // 引用课程分类模态框
treeData: this.props.treeData || [], treeData: this.props.treeData || [],
autoExpandParent: false
}; };
} }
...@@ -80,16 +81,36 @@ class QuestionBankSider extends Component { ...@@ -80,16 +81,36 @@ class QuestionBankSider extends Component {
}; };
QuestionBankService.queryQuestionCategoryTree(query).then((res) => { QuestionBankService.queryQuestionCategoryTree(query).then((res) => {
const { categoryList = [], noCategoryCnt = 0 } = res.result; const { categoryList = [], noCategoryCnt = 0 } = res.result;
let str = "未分类"; let str = "未分类";
if (categoryName && str.indexOf(categoryName) < 0) { if (categoryName) {
this.setState({ this.setState({ autoExpandParent: true });
treeData: this.renderTreeNodes(categoryList, categoryName), if (str.indexOf(categoryName) < 0) {
}); this.setState({
this.setState({ treeData: this.renderTreeNodes(categoryList, categoryName),
expandedKeys: this.getFirstLevelKeys(categoryList), });
}); let nodeId = [];
Object.keys(this.state.treeMap).forEach((item) => {
nodeId.push(item);
});
this.setState({ expandedKeys: nodeId });
} else {
const defaultNode = {
id: "0",
categoryName: "未分类",
categoryCount: noCategoryCnt,
};
categoryList.unshift(defaultNode);
this.setState({
treeData: this.renderTreeNodes(categoryList, categoryName),
});
let nodeId = [];
Object.keys(this.state.treeMap).forEach((item) => {
nodeId.push(item);
});
this.setState({ expandedKeys: nodeId });
}
} else { } else {
this.setState({ autoExpandParent: false });
const defaultNode = { const defaultNode = {
id: "0", id: "0",
categoryName: "未分类", categoryName: "未分类",
...@@ -99,15 +120,23 @@ class QuestionBankSider extends Component { ...@@ -99,15 +120,23 @@ class QuestionBankSider extends Component {
this.setState({ this.setState({
treeData: this.renderTreeNodes(categoryList, categoryName), treeData: this.renderTreeNodes(categoryList, categoryName),
}); });
this.setState({ this.setState({ expandedKeys: [] });
expandedKeys: this.getFirstLevelKeys(categoryList), }
}); });
};
getTreeMap = (data, map) => {
data.forEach((item) => {
map[item.id] = item;
if (item.sonCategoryList && item.sonCategoryList.length > 0) {
this.getTreeMap(item.sonCategoryList, map);
} }
}); });
return map;
}; };
renderTreeNodes = (data, value) => { renderTreeNodes = (data, value) => {
return data.map((item) => { let newTreeData = data.map((item) => {
item.title = item.categoryName; item.title = item.categoryName;
item.key = item.id; item.key = item.id;
item.title = item.title =
...@@ -135,10 +164,13 @@ class QuestionBankSider extends Component { ...@@ -135,10 +164,13 @@ class QuestionBankSider extends Component {
} }
return item; return item;
}); });
let map = {};
this.setState({ treeMap: this.getTreeMap(data, map) });
return newTreeData;
}; };
render() { render() {
const { treeData, expandedKeys, selectedKeys } = this.state; const { treeData, expandedKeys, selectedKeys, autoExpandParent } = this.state;
return ( return (
<div className="question-bank-sider"> <div className="question-bank-sider">
<div className="sider-title">题目分类</div> <div className="sider-title">题目分类</div>
...@@ -164,6 +196,7 @@ class QuestionBankSider extends Component { ...@@ -164,6 +196,7 @@ class QuestionBankSider extends Component {
<div className="sider-tree"> <div className="sider-tree">
<DirectoryTree <DirectoryTree
expandedKeys={expandedKeys} expandedKeys={expandedKeys}
autoExpandParent={autoExpandParent}
onExpand={this.onExpand} onExpand={this.onExpand}
selectedKeys={selectedKeys} selectedKeys={selectedKeys}
onSelect={this.onSelect} onSelect={this.onSelect}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment