diff --git a/src/routes/System/User/DataPermModal.js b/src/routes/System/User/DataPermModal.js
index f960dfa54..75c582d4a 100644
--- a/src/routes/System/User/DataPermModal.js
+++ b/src/routes/System/User/DataPermModal.js
@@ -15,30 +15,45 @@
  * limitations under the License.
  */
 
-import React, { Component } from 'react';
-import { Modal, Tree, Icon, Button, Checkbox, Table, Row, Col } from 'antd';
+import React, { Component } from "react";
+import {
+  Modal,
+  Tree,
+  Icon,
+  Button,
+  Checkbox,
+  Table,
+  Row,
+  Col,
+  Input,
+  Empty
+} from "antd";
 import { connect } from "dva";
-import { getIntlContent } from '../../../utils/IntlUtils';
+import { getIntlContent } from "../../../utils/IntlUtils";
+import { titleCase } from "../../../utils/utils";
 
 const { TreeNode } = Tree;
+const { Search } = Input;
 
 @connect(({ dataPermission, resource, global, loading }) => ({
   dataPermission,
   resource,
   global,
-  selectorPermisionLoading: loading.effects["dataPermission/fetchDataPermisionSelectors"],
-  rulePermisionLoading: loading.effects["dataPermission/fetchDataPermisionRules"]
+  selectorPermisionLoading:
+    loading.effects["dataPermission/fetchDataPermisionSelectors"],
+  rulePermisionLoading:
+    loading.effects["dataPermission/fetchDataPermisionRules"]
 }))
 export default class DataPermModal extends Component {
-
   constructor(props) {
     super(props);
     this.state = {
-      currentPlugin:null,
+      currentPlugin: null,
       currentPermissionSelectorPage: 1,
       selectorData: null,
       pageSize: 12,
-      ruleListMap:{}
+      ruleListMap: {},
+      searchValue: ""
     };
   }
 
@@ -57,7 +72,7 @@ export default class DataPermModal extends Component {
         callback: () => {}
       }
     });
-  }
+  };
 
   getPermissionSelectorList = page => {
     const { dispatch, userId } = this.props;
@@ -70,13 +85,13 @@ export default class DataPermModal extends Component {
         userId,
         pluginId: currentPlugin.pluginId
       },
-      callback: (res)=>{
+      callback: res => {
         this.setState({
           selectorData: res
-        })
+        });
       }
     });
-  }
+  };
 
   getPermissionRuleList = (selectorId, page) => {
     const { dispatch, userId } = this.props;
@@ -90,13 +105,16 @@ export default class DataPermModal extends Component {
         pluginId: currentPlugin.pluginId,
         selectorId
       },
-      callback: (res) =>{
-        if(res.dataList && res.dataList.length > 0) {
-          res.dataList.forEach(e=>{
+      callback: res => {
+        if (res.dataList && res.dataList.length > 0) {
+          res.dataList.forEach(e => {
             e.selectorId = selectorId;
-          })
+          });
         }
-        if(ruleListMap[selectorId] && ruleListMap[selectorId].currentRulePage) {
+        if (
+          ruleListMap[selectorId] &&
+          ruleListMap[selectorId].currentRulePage
+        ) {
           res.currentRulePage = ruleListMap[selectorId].currentRulePage;
         } else {
           res.currentRulePage = 1;
@@ -104,26 +122,31 @@ export default class DataPermModal extends Component {
         ruleListMap[selectorId] = res;
         this.setState({
           ruleListMap
-        })
+        });
       }
     });
-  }
+  };
 
   onSelectPlugin = (selectedKeys, e) => {
     const currentPlugin = e.node.props.dataRef;
-    this.setState({
-      currentPlugin,
-      currentPermissionSelectorPage: 1,
-      ruleListMap: {}
-    }, () => {
-      this.getPermissionSelectorList(1);
-    })
-  }
+    this.setState(
+      {
+        currentPlugin,
+        currentPermissionSelectorPage: 1,
+        ruleListMap: {}
+      },
+      () => {
+        this.getPermissionSelectorList(1);
+      }
+    );
+  };
 
-  handleCheckSelector = (record) => {
+  handleCheckSelector = record => {
     const { dispatch, userId } = this.props;
     const { currentPermissionSelectorPage } = this.state;
-    let type = record.isChecked ? "dataPermission/deletePermisionSelector" : "dataPermission/addPermisionSelector";
+    let type = record.isChecked
+      ? "dataPermission/deletePermisionSelector"
+      : "dataPermission/addPermisionSelector";
     dispatch({
       type,
       payload: {
@@ -131,16 +154,18 @@ export default class DataPermModal extends Component {
         userId
       },
       callback: () => {
-        this.getPermissionSelectorList(currentPermissionSelectorPage)
-        this.getPermissionRuleList(record.dataId,1)
+        this.getPermissionSelectorList(currentPermissionSelectorPage);
+        this.getPermissionRuleList(record.dataId, 1);
       }
-    })
-  }
+    });
+  };
 
-  handleCheckRule = (record) => {
+  handleCheckRule = record => {
     const { dispatch, userId } = this.props;
     const { currentPermissionSelectorPage, ruleListMap } = this.state;
-    let type = record.isChecked ? "dataPermission/deletePermisionRule" : "dataPermission/addPermisionRule";
+    let type = record.isChecked
+      ? "dataPermission/deletePermisionRule"
+      : "dataPermission/addPermisionRule";
     dispatch({
       type,
       payload: {
@@ -148,16 +173,16 @@ export default class DataPermModal extends Component {
         userId
       },
       callback: () => {
-        this.getPermissionSelectorList(currentPermissionSelectorPage)
+        this.getPermissionSelectorList(currentPermissionSelectorPage);
         let page = ruleListMap[record.selectorId].currentRulePage || 1;
-        this.getPermissionRuleList(record.selectorId,page)
+        this.getPermissionRuleList(record.selectorId, page);
       }
-    })
-  }
+    });
+  };
 
   handleExpandRuleTable = (expanded, record) => {
-    this.getPermissionRuleList(record.dataId,1)
-  }
+    this.getPermissionRuleList(record.dataId, 1);
+  };
 
   selectorPageOnchange = page => {
     this.setState({ currentPermissionSelectorPage: page });
@@ -167,89 +192,169 @@ export default class DataPermModal extends Component {
   rulePageOnchange = (page, selectorId) => {
     let { ruleListMap } = this.state;
     ruleListMap[selectorId].currentRulePage = page;
-    this.setState({
-      ruleListMap
-    },()=>{
-      this.getPermissionRuleList(selectorId,page);
-    })
-
-  }
-
-  renderPluginTree = ()=>{
-    let { global: { plugins }, resource: { menuTree } } = this.props;
-    let pluginMenuList = menuTree.filter(e=>e.url === "/plug");
+    this.setState(
+      {
+        ruleListMap
+      },
+      () => {
+        this.getPermissionRuleList(selectorId, page);
+      }
+    );
+  };
 
-    if(pluginMenuList && pluginMenuList.length > 0){
-      pluginMenuList[0].children.forEach(p => {
-        if(plugins.some(e => e.name === p.name)) {
-          p.pluginId = plugins.filter(e => e.name === p.name)[0].id;
+  filterPlugin = () => {
+    let {
+      global: { plugins },
+      resource: { menuTree }
+    } = this.props;
+    const { searchValue } = this.state;
+    let pluginMenuList = menuTree.filter(e => e.url === "/plug");
+    if (pluginMenuList && pluginMenuList.length > 0) {
+      pluginMenuList = pluginMenuList[0].children;
+      const treeData = [];
+      pluginMenuList.forEach(plugin => {
+        if (
+          typeof searchValue === "string" &&
+          searchValue.length &&
+          !plugin.name
+            .toLocaleLowerCase()
+            .includes(searchValue.toLocaleLowerCase())
+        ) {
+          return;
         }
-      })
-      return (
-        <Tree
-          style={{background:"white"}}
-          defaultExpandAll
-          onSelect={this.onSelectPlugin}
-          showIcon
-        >
-          {this.renderTreeNodes(pluginMenuList)}
-        </Tree>
-      )
+        const currentPluginInfo = plugins.find(v => v.name === plugin.name);
+        let currentCategory = treeData.find(
+          tree => tree.title === currentPluginInfo.role
+        );
+        if (!currentCategory) {
+          treeData.push({
+            title: currentPluginInfo.role,
+            key: currentPluginInfo.role,
+            selectable: false,
+            icon: "unordered-list",
+            sort: plugin.sort,
+            children: []
+          });
+          currentCategory = treeData[treeData.length - 1];
+        }
+        currentCategory.children.push({
+          key: currentPluginInfo.id,
+          title: titleCase(currentPluginInfo.name),
+          selectable: true,
+          sort: plugin.sort,
+          icon: plugin.meta.icon,
+          pluginId: currentPluginInfo.id
+        });
+      });
+
+      pluginMenuList = treeData;
     }
-  }
+    return pluginMenuList;
+  };
+
+  onSearch = e => {
+    const { value } = e.target;
+    this.setState({
+      searchValue: value
+    });
+  };
+
+  renderPluginTree = () => {
+    let pluginMenuList = this.filterPlugin();
+    return (
+      <Row gutter={[16, 16]}>
+        <Col span={24}>
+          <Search
+            placeholder={getIntlContent("SHENYU.PLUGIN.INPUTNAME")}
+            onChange={this.onSearch}
+          />
+        </Col>
+        {pluginMenuList.length > 0 ? (
+          <Col span={24}>
+            <Tree
+              defaultExpandAll
+              style={{ background: "white" }}
+              onSelect={this.onSelectPlugin}
+              showIcon
+            >
+              {this.renderTreeNodes(pluginMenuList)}
+            </Tree>
+          </Col>
+        ) : (
+          <Col span={24}>
+            <Empty />
+          </Col>
+        )}
+      </Row>
+    );
+  };
 
-  renderTreeNodes = (data) => {
-    data = data.sort((a,b)=>(a.sort||0)-(b.sort||0));
+  renderTreeNodes = data => {
     return data.map(item => {
-      item.title =  item.meta.title;
-      if (item.title.startsWith("SHENYU.")) {
-        item.title = getIntlContent(item.title);
-      }
       if (item.children && item.children.length > 0) {
         return (
-          <TreeNode selectable={false} title={item.title} icon={item.meta.icon&&<Icon type={item.meta.icon} />} key={item.id} dataRef={item}>
+          <TreeNode
+            selectable={item.selectable}
+            title={item.title}
+            icon={<Icon type={item.icon} />}
+            key={item.key}
+            dataRef={item}
+          >
             {this.renderTreeNodes(item.children)}
           </TreeNode>
         );
       } else {
-        return <TreeNode icon={item.meta.icon&&<Icon type={item.meta.icon} />} title={item.title} key={item.id} dataRef={item} />;
+        return (
+          <TreeNode
+            icon={<Icon type={item.icon} />}
+            title={item.title}
+            key={item.key}
+            dataRef={item}
+          />
+        );
       }
     });
-  }
+  };
 
   renderSelectorRuleTable = () => {
-    const {
-      currentPermissionSelectorPage,
-      pageSize
-    } = this.state;
+    const { currentPermissionSelectorPage, pageSize } = this.state;
     const { selectorData, ruleListMap } = this.state;
     const ruleColumns = [
       {
         title: getIntlContent("SHENYU.SYSTEM.DATA.PERMISSION.CHECKED"),
-        dataIndex: 'isChecked',
-        width:90,
-        key: 'isChecked',
+        dataIndex: "isChecked",
+        width: 90,
+        key: "isChecked",
         render: (isChecked, record) => {
-          return <Checkbox checked={isChecked} onClick={this.handleCheckRule.bind(this,record)}  />
+          return (
+            <Checkbox
+              checked={isChecked}
+              onClick={this.handleCheckRule.bind(this, record)}
+            />
+          );
         }
       },
-      { title: getIntlContent("SHENYU.SYSTEM.DATA.PERMISSION.RULENAME"), dataIndex: 'dataName', key: 'dataName' },
+      {
+        title: getIntlContent("SHENYU.SYSTEM.DATA.PERMISSION.RULENAME"),
+        dataIndex: "dataName",
+        key: "dataName"
+      }
     ];
-    const expandedRowRender = (record) => {
-      let ruleData = ruleListMap&&ruleListMap[record.dataId];
-      let currentRulePage = ruleData&&ruleData.currentRulePage;
+    const expandedRowRender = record => {
+      let ruleData = ruleListMap && ruleListMap[record.dataId];
+      let currentRulePage = ruleData && ruleData.currentRulePage;
       return (
         <Table
           size="small"
           bordered
           columns={ruleColumns}
-          dataSource={ruleData&&ruleData.dataList}
+          dataSource={ruleData && ruleData.dataList}
           pagination={{
-            total: (ruleData&&ruleData.total) || 0,
+            total: (ruleData && ruleData.total) || 0,
             current: currentRulePage || 1,
             pageSize,
-            onChange: (page) => {
-              this.rulePageOnchange(page,record.dataId);
+            onChange: page => {
+              this.rulePageOnchange(page, record.dataId);
             }
           }}
         />
@@ -259,38 +364,43 @@ export default class DataPermModal extends Component {
     const columns = [
       {
         title: getIntlContent("SHENYU.SYSTEM.DATA.PERMISSION.CHECKED"),
-        dataIndex: 'isChecked',
-        width:90,
-        key: 'isChecked',
+        dataIndex: "isChecked",
+        width: 90,
+        key: "isChecked",
         render: (isChecked, record) => {
-          return <Checkbox checked={isChecked} onClick={this.handleCheckSelector.bind(this,record)} />
+          return (
+            <Checkbox
+              checked={isChecked}
+              onClick={this.handleCheckSelector.bind(this, record)}
+            />
+          );
         }
       },
       {
         title: getIntlContent("SHENYU.SYSTEM.DATA.PERMISSION.SELECTORNAME"),
-        dataIndex: 'dataName',
-        key: 'dataName'
-      },
+        dataIndex: "dataName",
+        key: "dataName"
+      }
     ];
 
     return (
       <Table
-        style={{width:"350px"}}
+        style={{ width: "350px" }}
         size="small"
         bordered
         columns={columns}
         expandedRowRender={expandedRowRender}
-        dataSource={selectorData&&selectorData.dataList}
+        dataSource={selectorData && selectorData.dataList}
         onExpand={this.handleExpandRuleTable}
         pagination={{
-          total: selectorData&&selectorData.total,
+          total: selectorData && selectorData.total,
           current: currentPermissionSelectorPage,
           pageSize,
           onChange: this.selectorPageOnchange
         }}
       />
     );
-  }
+  };
 
   render() {
     let { handleCancel } = this.props;
@@ -309,14 +419,12 @@ export default class DataPermModal extends Component {
         ]}
       >
         <Row gutter={20}>
-          <Col span={10} style={{minWidth:280}}>
+          <Col span={10} style={{ minWidth: 280 }}>
             {this.renderPluginTree()}
           </Col>
-          <Col span={14}>
-            {this.renderSelectorRuleTable()}
-          </Col>
+          <Col span={14}>{this.renderSelectorRuleTable()}</Col>
         </Row>
       </Modal>
-    )
+    );
   }
 }