Merge branch 'refactor/yuananting/20210615/category-tree-related' into gray

61ab356d · yuananting · 0edce662 · d082113c · 61ab356d · 61ab356d
Commit 61ab356d authored Jun 17, 2021 by yuananting
6 changed files
--- a/src/data-source/aidTool/request-apis.ts
+++ b/src/data-source/aidTool/request-apis.ts
@@ -2,89 +2,89 @@
 * @Author: yuananting
 * @Date: 2021-03-03 15:13:12
 * @LastEditors: fusanqiasng
- * @LastEditTime: 2021-05-25 10:07:03
+ * @LastEditTime: 2021-06-16 09:57:18
 * @Description: 助学工具接口
 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 */
-import Service from '@/common/js/service'
+import Service from '@/common/js/service';
 export function queryExternalCategoryTree(params: object) {
-  return Service.Hades('public/externalHades/queryCategoryTree', params)
+  return Service.Hades('public/externalHades/queryCategoryTree', params);
 }
 export function queryCategoryTree(params: object) {
-  return Service.Hades('public/hades/queryCategoryTree', params)
+  return Service.Hades('public/hades/queryCategoryTree', params);
 }
 export function addCategory(params: object) {
-  return Service.Hades('public/hades/addCategory', params)
+  return Service.Hades('public/hades/addCategory', params);
 }
 export function delCategory(params: object) {
-  return Service.Hades('public/hades/delCategory', params)
+  return Service.Hades('public/hades/delCategory', params);
 }
 export function editCategory(params: object) {
-  return Service.Hades('public/hades/editCategory', params)
+  return Service.Hades('public/hades/editCategory', params);
 }
-export function editCategoryTree(params: object) {
+export function moveCategory(params: object) {
-  return Service.Hades('public/hades/editCategoryTree', params)
+  return Service.Hades('public/hades/moveCategory', params);
 }
 export function queryQuestionPageList(params: object) {
-  return Service.Hades('public/hades/queryQuestionPageList', params)
+  return Service.Hades('public/hades/queryQuestionPageList', params);
 }
 export function addQuestion(params: object) {
-  return Service.Hades('public/hades/addQuestion', params)
+  return Service.Hades('public/hades/addQuestion', params);
 }
 export function deleteQuestion(params: object) {
-  return Service.Hades('public/hades/deleteQuestion', params)
+  return Service.Hades('public/hades/deleteQuestion', params);
 }
 export function queryQuestionDetails(params: object) {
-  return Service.Hades('public/hades/queryQuestionDetails', params)
+  return Service.Hades('public/hades/queryQuestionDetails', params);
 }
 export function editQuestion(params: object) {
-  return Service.Hades('public/hades/editQuestion', params)
+  return Service.Hades('public/hades/editQuestion', params);
 }
 export function batchImport(params: object) {
-  return Service.Hades('public/hades/batchImport', params)
+  return Service.Hades('public/hades/batchImport', params);
 }
 export function createPaper(params: object) {
-  return Service.Hades('public/hades/createPaper', params)
+  return Service.Hades('public/hades/createPaper', params);
 }
 export function queryPaperPageList(params: object) {
-  return Service.Hades('public/hades/queryPaperPageList', params)
+  return Service.Hades('public/hades/queryPaperPageList', params);
 }
 export function deletePaper(params: object) {
-  return Service.Hades('public/hades/deletePaper', params)
+  return Service.Hades('public/hades/deletePaper', params);
 }
 export function queryPaperDetail(params: object) {
-  return Service.Hades('public/hades/queryPaperDetail', params)
+  return Service.Hades('public/hades/queryPaperDetail', params);
 }
 export function viewPaper(params: object) {
-  return Service.Hades('public/hades/viewPaper', params)
+  return Service.Hades('public/hades/viewPaper', params);
 }
 export function editPaper(params: object) {
-  return Service.Hades('public/hades/editPaper', params)
+  return Service.Hades('public/hades/editPaper', params);
 }
 export function batchQueryQuestionDetails(params: object) {
-  return Service.Hades('public/hades/batchQueryQuestionDetails', params)
+  return Service.Hades('public/hades/batchQueryQuestionDetails', params);
 }
 export function queryQuestionPageListWithContent(params: object) {
-  return Service.Hades('public/hades/queryQuestionPageListWithContent', params)
+  return Service.Hades('public/hades/queryQuestionPageListWithContent', params);
 }
--- a/src/domains/aid-tool-domain/AidToolService.ts
+++ b/src/domains/aid-tool-domain/AidToolService.ts
@@ -2,7 +2,7 @@
 * @Author: yuananting
 * @Date: 2021-03-11 11:34:37
 * @LastEditors: fusanqiasng
- * @LastEditTime: 2021-05-24 23:44:39
+ * @LastEditTime: 2021-06-16 09:56:46
 * @Description: 助学工具接口
 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 */
@@ -12,7 +12,7 @@ import {
  addCategory,
  delCategory,
  editCategory,
-  editCategoryTree,
+  moveCategory,
  addQuestion,
  queryQuestionPageList,
  deleteQuestion,
@@ -26,8 +26,8 @@ import {
  viewPaper,
  editPaper,
  batchQueryQuestionDetails,
-  queryQuestionPageListWithContent
+  queryQuestionPageListWithContent,
-} from '@/data-source/aidTool/request-apis'
+} from '@/data-source/aidTool/request-apis';
 export default class AidToolService {
  /**
   * 查询运营端分类书
@@ -35,101 +35,101 @@ export default class AidToolService {
   * @returns
   */
  static queryExternalCategoryTree(parmas: any) {
-    return queryExternalCategoryTree(parmas)
+    return queryExternalCategoryTree(parmas);
  }
  // 获取题目分类树
  static queryCategoryTree(params: any) {
-    return queryCategoryTree(params)
+    return queryCategoryTree(params);
  }
  // 新增题目分类
  static addCategory(params: any) {
-    return addCategory(params)
+    return addCategory(params);
  }
  // 删除分类
  static delCategory(params: any) {
-    return delCategory(params)
+    return delCategory(params);
  }
  // 编辑分类
  static editCategory(params: any) {
-    return editCategory(params)
+    return editCategory(params);
  }
-  // 编辑分类树（拖拽）
+  // 拖拽移动分类树
-  static editCategoryTree(params: any) {
+  static moveCategory(params: any) {
-    return editCategoryTree(params)
+    return moveCategory(params);
  }
  // 查询题目列表
  static queryQuestionPageList(params: any) {
-    return queryQuestionPageList(params)
+    return queryQuestionPageList(params);
  }
  // 添加题目
  static addQuestion(params: any) {
-    return addQuestion(params)
+    return addQuestion(params);
  }
  // 删除题目
  static deleteQuestion(params: any) {
-    return deleteQuestion(params)
+    return deleteQuestion(params);
  }
  // 预览题目
  static queryQuestionDetails(params: any) {
-    return queryQuestionDetails(params)
+    return queryQuestionDetails(params);
  }
  // 编辑题目
  static editQuestion(params: any) {
-    return editQuestion(params)
+    return editQuestion(params);
  }
  // 批量导入
  static batchImport(params: any) {
-    return batchImport(params)
+    return batchImport(params);
  }
  // 创建试卷
  static createPaper(params: any) {
-    return createPaper(params)
+    return createPaper(params);
  }
  // 查询试卷列表
  static queryPaperPageList(params: any) {
-    return queryPaperPageList(params)
+    return queryPaperPageList(params);
  }
  // 删除试卷
  static deletePaper(params: any) {
-    return deletePaper(params)
+    return deletePaper(params);
  }
  // 编辑前查询试卷信息
  static queryPaperDetail(params: any) {
-    return queryPaperDetail(params)
+    return queryPaperDetail(params);
  }
  // 预览试卷
  static viewPaper(params: any) {
-    return viewPaper(params)
+    return viewPaper(params);
  }
  // 编辑试卷
  static editPaper(params: any) {
-    return editPaper(params)
+    return editPaper(params);
  }
  // 操作试卷-预览查询多题目信息
  static batchQueryQuestionDetails(params: any) {
-    return batchQueryQuestionDetails(params)
+    return batchQueryQuestionDetails(params);
  }
  // 操作试卷-选择题目列表带题目详情
  static queryQuestionPageListWithContent(params: any) {
-    return queryQuestionPageListWithContent(params)
+    return queryQuestionPageListWithContent(params);
  }
 }
--- a/src/modules/course-manage/graphics-course/AddGraphicsCourse.jsx
+++ b/src/modules/course-manage/graphics-course/AddGraphicsCourse.jsx
--- a/src/modules/knowledge-base/components/Classification.jsx
+++ b/src/modules/knowledge-base/components/Classification.jsx
@@ -2,17 +2,17 @@
 * @Description:
 * @Author: zangsuyun
 * @Date: 2021-03-19 18:05:23
- * @LastEditors: wufan
+ * @LastEditors: fusanqiasng
- * @LastEditTime: 2021-05-30 16:48:46
+ * @LastEditTime: 2021-06-15 11:20:24
 * @Copyright: © 2020 杭州杰竞科技有限公司 版权所有
 */
-import React, { Component } from "react";
+import React, { Component } from 'react';
-import { Input, Button, Tree } from "antd";
+import { Input, Button, Tree } from 'antd';
-import "./Classification.less";
+import './Classification.less';
-import User from "@/common/js/user";
+import User from '@/common/js/user';
-import KnowledgeAPI from "@/data-source/knowledge/request-api";
+import KnowledgeAPI from '@/data-source/knowledge/request-api';
-import Bus from "@/core/bus";
+import Bus from '@/core/bus';
 const { Search } = Input;
 const { DirectoryTree } = Tree;
@@ -21,7 +21,7 @@ class Classification extends Component {
  constructor(props) {
    super(props);
    this.state = {
-      selectedKeys: props.selectedKeys ? [props.selectedKeys] : ["0"],
+      selectedKeys: props.selectedKeys ? [props.selectedKeys] : ['0'],
      searchValue: null,
      NewEditQuestionBankCategory: null, //新增或编辑分类模态框
      ImportCourseCategory: null, // 引用课程分类模态框
@@ -32,11 +32,11 @@ class Classification extends Component {
  componentDidMount() {
    this.queryCategoryTree();
-    Bus.bind('knowledgeCategoryTree', this.queryCategoryTree)
+    Bus.bind('knowledgeCategoryTree', this.queryCategoryTree);
  }
  componentWillUnmount() {
-    Bus.unbind('knowledgeCategoryTree', this.queryCategoryTree)
+    Bus.unbind('knowledgeCategoryTree', this.queryCategoryTree);
  }
  shouldComponentUpdate = (nextProps, nextState) => {
@@ -79,7 +79,7 @@ class Classification extends Component {
    };
    KnowledgeAPI.getCategoryTree(query).then((res) => {
      const { categoryList = [], noCategoryCnt = 0 } = res.result;
-      let str = "未分类";
+      let str = '未分类';
      if (categoryName) {
        this.setState({ autoExpandParent: true });
        if (str.indexOf(categoryName) < 0) {
@@ -93,8 +93,8 @@ class Classification extends Component {
          this.setState({ expandedKeys: nodeId });
        } else {
          const defaultNode = {
-            id: "0",
+            id: '0',
-            categoryName: "未分类",
+            categoryName: '未分类',
            categoryCount: noCategoryCnt,
          };
          categoryList.unshift(defaultNode);
@@ -110,8 +110,8 @@ class Classification extends Component {
      } else {
        this.setState({ autoExpandParent: false });
        const defaultNode = {
-          id: "0",
+          id: '0',
-          categoryName: "未分类",
+          categoryName: '未分类',
          categoryCount: noCategoryCnt,
        };
        categoryList.unshift(defaultNode);
@@ -140,39 +140,35 @@ class Classification extends Component {
      item.title =
        !value || (value && item.categoryName.indexOf(value) > -1) ? (
          <span>
-            {item.categoryName}（{item.categoryCount}）
+            {item.categoryName}
+            {item.categoryCount > 0 && <span>（{item.categoryCount}）</span>}
          </span>
        ) : (
          <span style={{ opacity: 0.5 }}>
-            {item.categoryName}（{item.categoryCount}）
+            {item.categoryName}
+            {item.categoryCount > 0 && <span>（{item.categoryCount}）</span>}
          </span>
        );
      item.icon =
-        item.categoryName === "未分类" ? (
+        item.categoryName === '未分类' ? (
          <img
            style={{
-              width: "24px",
+              width: '24px',
-              height: "24px",
+              height: '24px',
-              opacity:
+              opacity: !value || (value && item.categoryName.indexOf(value) > -1) ? 1 : 0.5,
-                !value || (value && item.categoryName.indexOf(value) > -1)
-                  ? 1
-                  : 0.5,
            }}
-            src="https://image.xiaomaiketang.com/xm/defaultCategory.png"
+            src='https://image.xiaomaiketang.com/xm/defaultCategory.png'
-            alt=""
+            alt=''
          />
        ) : (
          <img
            style={{
-              width: "24px",
+              width: '24px',
-              height: "24px",
+              height: '24px',
-              opacity:
+              opacity: !value || (value && item.categoryName.indexOf(value) > -1) ? 1 : 0.5,
-                !value || (value && item.categoryName.indexOf(value) > -1)
-                  ? 1
-                  : 0.5,
            }}
-            src="https://image.xiaomaiketang.com/xm/hasCategory.png"
+            src='https://image.xiaomaiketang.com/xm/hasCategory.png'
-            alt=""
+            alt=''
          />
        );
      if (item.sonCategoryList) {
@@ -186,36 +182,30 @@ class Classification extends Component {
  };
  render() {
-    const {
+    const { treeData, expandedKeys, selectedKeys, autoExpandParent } = this.state;
-      treeData,
-      expandedKeys,
-      selectedKeys,
-      autoExpandParent,
-    } = this.state;
    return (
-      <div className="question-bank-sider">
+      <div className='question-bank-sider'>
-        <div className="sider-title">知识分类</div>
+        <div className='sider-title'>知识分类</div>
        <Search
-          className="sider-search"
+          className='sider-search'
-          placeholder="搜索名称分类"
+          placeholder='搜索名称分类'
          onSearch={(value) => {
            this.queryCategoryTree(value);
          }}
-          enterButton={<span className="icon iconfont">&#xe832;</span>}
+          enterButton={<span className='icon iconfont'>&#xe832;</span>}
-          style={{width: 230}}
+          style={{ width: 230 }}
        />
-        <div className="sider-btn">
+        <div className='sider-btn'>
          <Button
            onClick={() => {
              window.RCHistory.push({
-                pathname: "/course-category-manage?from=knowledge",
+                pathname: '/course-category-manage?from=knowledge',
              });
-            }}
+            }}>
-          >
            分类管理
          </Button>
        </div>
-        <div className="sider-tree">
+        <div className='sider-tree'>
          <DirectoryTree
            expandedKeys={expandedKeys}
            autoExpandParent={autoExpandParent}

--- a/src/modules/teach-tool/components/CourseCategoryManage.jsx
+++ b/src/modules/teach-tool/components/CourseCategoryManage.jsx
--- a/src/modules/teach-tool/components/CourseCategorySiderTree.jsx
+++ b/src/modules/teach-tool/components/CourseCategorySiderTree.jsx
 /*
 * @Author: yuananting
 * @Date: 2021-02-22 10:59:43
- * @LastEditors: yuananting
+ * @LastEditors: fusanqiasng
- * @LastEditTime: 2021-04-13 13:55:37
+ * @LastEditTime: 2021-06-15 11:20:48
 * @Description: 助学工具-侧边课程分类树
 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 */
-import React, { Component } from "react";
+import React, { Component } from 'react';
-import { Input, Button, Tree } from "antd";
+import { Input, Button, Tree } from 'antd';
-import "./CourseCategorySiderTree.less";
+import './CourseCategorySiderTree.less';
-import User from "@/common/js/user";
+import User from '@/common/js/user';
-import AidToolService from "@/domains/aid-tool-domain/AidToolService";
+import AidToolService from '@/domains/aid-tool-domain/AidToolService';
-import Bus from "@/core/bus";
+import Bus from '@/core/bus';
 const { Search } = Input;
 const { DirectoryTree } = Tree;
@@ -20,31 +20,25 @@ class CourseCategorySiderTree extends Component {
  constructor(props) {
    super(props);
    this.state = {
-      selectedKeys: ["QUESTION_INDEX", "PAPER_INDEX"].includes(props.fromModule)
+      selectedKeys: ['QUESTION_INDEX', 'PAPER_INDEX'].includes(props.fromModule) ? [getParameterByName('categoryId') || 'null'] : ['null'],
-        ? [getParameterByName("categoryId") || "null"]
-        : ["null"],
      treeData: props.treeData || [],
      autoExpandParent: false,
    };
  }
  componentDidMount() {
-    this.queryCategoryTree("init");
+    this.queryCategoryTree('init');
-    Bus.bind("queryCategoryTree", this.queryCategoryTree);
+    Bus.bind('queryCategoryTree', this.queryCategoryTree);
  }
  componentWillUnmount() {
-    Bus.unbind("queryCategoryTree", this.queryCategoryTree);
+    Bus.unbind('queryCategoryTree', this.queryCategoryTree);
  }
  // 查询分类树
-  queryCategoryTree = (type = "init", categoryName) => {
+  queryCategoryTree = (type = 'init', categoryName) => {
    let query = {
-      bizType: ["QUESTION_INDEX", "QUESTION_MODAL"].includes(
+      bizType: ['QUESTION_INDEX', 'QUESTION_MODAL'].includes(this.props.fromModule) ? 'QUESTION' : 'PAPER',
-        this.props.fromModule
-      )
-        ? "QUESTION"
-        : "PAPER",
      categoryName,
      count: true,
      source: 0,
@@ -53,7 +47,7 @@ class CourseCategorySiderTree extends Component {
    };
    AidToolService.queryCategoryTree(query).then((res) => {
      const { categoryList = [], noCategoryCnt = 0 } = res.result;
-      let str = "未分类";
+      let str = '未分类';
      if (categoryName) {
        this.setState({ autoExpandParent: true });
        if (str.indexOf(categoryName) < 0) {
@@ -64,15 +58,15 @@ class CourseCategorySiderTree extends Component {
          Object.keys(this.state.treeMap).forEach((item) => {
            nodeId.push(item);
          });
-          if (type === "init") {
+          if (type === 'init') {
            this.setState({ expandedKeys: nodeId });
          }
        } else {
          const defaultNode = {
-            id: "null",
+            id: 'null',
-            categoryName: "未分类",
+            categoryName: '未分类',
            categoryCount: noCategoryCnt,
-            parentId: "0",
+            parentId: '0',
            categoryLevel: 0,
          };
          categoryList.unshift(defaultNode);
@@ -83,24 +77,24 @@ class CourseCategorySiderTree extends Component {
          Object.keys(this.state.treeMap).forEach((item) => {
            nodeId.push(item);
          });
-          if (type === "init") {
+          if (type === 'init') {
            this.setState({ expandedKeys: nodeId });
          }
        }
      } else {
        this.setState({ autoExpandParent: false });
        const defaultNode = {
-          id: "null",
+          id: 'null',
-          categoryName: "未分类",
+          categoryName: '未分类',
          categoryCount: noCategoryCnt,
-          parentId: "0",
+          parentId: '0',
          categoryLevel: 0,
        };
        categoryList.unshift(defaultNode);
        this.setState({
          treeData: this.renderTreeNodes(categoryList, categoryName),
        });
-        if (type === "init") {
+        if (type === 'init') {
          this.setState({ expandedKeys: [] });
        }
      }
@@ -126,12 +120,12 @@ class CourseCategorySiderTree extends Component {
  // 树状选中事件
  onSelect = (selectedKeys) => {
    this.setState({ selectedKeys }, () => {
-      if (this.props.fromModule === "QUESTION_INDEX") {
+      if (this.props.fromModule === 'QUESTION_INDEX') {
-        Bus.trigger("queryQuestionPageList", selectedKeys[0]);
+        Bus.trigger('queryQuestionPageList', selectedKeys[0]);
-      } else if (this.props.fromModule === "QUESTION_MODAL") {
+      } else if (this.props.fromModule === 'QUESTION_MODAL') {
-        Bus.trigger("queryQuestionPageListWithContent", selectedKeys[0]);
+        Bus.trigger('queryQuestionPageListWithContent', selectedKeys[0]);
      } else {
-        Bus.trigger("queryPaperPageList", selectedKeys[0], 0);
+        Bus.trigger('queryPaperPageList', selectedKeys[0], 0);
      }
    });
  };
@@ -144,39 +138,35 @@ class CourseCategorySiderTree extends Component {
      item.title =
        !value || (value && item.categoryName.indexOf(value) > -1) ? (
          <span>
-            {item.categoryName}（{item.categoryCount}）
+            {item.categoryName}
+            {item.categoryCount > 0 && <span>（{item.categoryCount}）</span>}
          </span>
        ) : (
          <span style={{ opacity: 0.5 }}>
-            {item.categoryName}（{item.categoryCount}）
+            {item.categoryName}
+            {item.categoryCount > 0 && <span>（{item.categoryCount}）</span>}
          </span>
        );
      item.icon =
-        item.categoryName === "未分类" ? (
+        item.categoryName === '未分类' ? (
          <img
            style={{
-              width: "24px",
+              width: '24px',
-              height: "24px",
+              height: '24px',
-              opacity:
+              opacity: !value || (value && item.categoryName.indexOf(value) > -1) ? 1 : 0.5,
-                !value || (value && item.categoryName.indexOf(value) > -1)
-                  ? 1
-                  : 0.5,
            }}
-            src="https://image.xiaomaiketang.com/xm/defaultCategory.png"
+            src='https://image.xiaomaiketang.com/xm/defaultCategory.png'
-            alt=""
+            alt=''
          />
        ) : (
          <img
            style={{
-              width: "24px",
+              width: '24px',
-              height: "24px",
+              height: '24px',
-              opacity:
+              opacity: !value || (value && item.categoryName.indexOf(value) > -1) ? 1 : 0.5,
-                !value || (value && item.categoryName.indexOf(value) > -1)
-                  ? 1
-                  : 0.5,
            }}
-            src="https://image.xiaomaiketang.com/xm/hasCategory.png"
+            src='https://image.xiaomaiketang.com/xm/hasCategory.png'
-            alt=""
+            alt=''
          />
        );
      if (item.sonCategoryList) {
@@ -190,46 +180,34 @@ class CourseCategorySiderTree extends Component {
  };
  render() {
-    const {
+    const { treeData, expandedKeys, selectedKeys, autoExpandParent } = this.state;
-      treeData,
-      expandedKeys,
-      selectedKeys,
-      autoExpandParent,
-    } = this.state;
    return (
-      <div className="category-tree-sider">
+      <div className='category-tree-sider'>
-        {["QUESTION_INDEX", "PAPER_INDEX"].includes(this.props.fromModule) && (
+        {['QUESTION_INDEX', 'PAPER_INDEX'].includes(this.props.fromModule) && (
-          <div className="sider-title">
+          <div className='sider-title'>{this.props.fromModule === 'QUESTION_INDEX' ? '题目分类' : '试卷分类'}</div>
-            {this.props.fromModule === "QUESTION_INDEX"
-              ? "题目分类"
-              : "试卷分类"}
-          </div>
        )}
        <Search
-          className="sider-search"
+          className='sider-search'
-          placeholder="搜索名称分类"
+          placeholder='搜索名称分类'
          onSearch={(value) => {
-            this.queryCategoryTree("init", value);
+            this.queryCategoryTree('init', value);
          }}
-          enterButton={<span className="icon iconfont">&#xe832;</span>}
+          enterButton={<span className='icon iconfont'>&#xe832;</span>}
        />
-        {["QUESTION_INDEX", "PAPER_INDEX"].includes(this.props.fromModule) &&
+        {['QUESTION_INDEX', 'PAPER_INDEX'].includes(this.props.fromModule) && User.getUserRole() !== 'CloudLecturer' && this.props.type !== 'modal-select' && (
-          User.getUserRole() !== "CloudLecturer" &&
+          <div className='sider-btn'>
-          this.props.type !== "modal-select" && (
+            <Button
-            <div className="sider-btn">
+              onClick={() => {
-              <Button
+                window.RCHistory.push({
-                onClick={() => {
+                  pathname: '/course-category-manage?from=aid',
-                  window.RCHistory.push({
+                });
-                    pathname: "/course-category-manage?from=aid",
+              }}>
-                  });
+              分类管理
-                }}
+            </Button>
-              >
+          </div>
-                分类管理
+        )}
-              </Button>
+        <div className='sider-tree'>
-            </div>
-          )}
-        <div className="sider-tree">
          <DirectoryTree
            expandedKeys={expandedKeys}
            autoExpandParent={autoExpandParent}