fix wechat and dingding department tree UI (#7545)

frontend/src/css/dingtalk-departments.css

@@ -22,7 +22,7 @@
 .dir-content-nav {
   position: absolute;
   overflow: hidden;
-  width: 24%;
+  width: 25%;
 }
 
 .dir-content-nav:hover {
@@ -45,43 +45,45 @@
 .tree-node-inner {
   position: relative;
   display: flex;
-  padding-right: 1rem;
+  padding-right: 0.5rem;
 }
 
-.tree-node-inner i {
+.tree-node-inner .sf3-font-down {
   position: absolute;
-  top: 20%;
+  top: 15%;
   left: 0.3rem;
   color: #999;
 }
 
 .tree-node-inner-hover {
-  background-color: #FFEFB2;
+  background-color: #f0f0f0;
   border-radius: 0.25rem;
   cursor: pointer;
 }
 
 .tree-node-hight-light {
-  color: #fff;
   border-radius: 4px;
-  background-color: #feac74 !important;
+  background-color: #f5f5f5 !important;
 }
 
-.tree-node-hight-light i {
+.tree-node-hight-light::before {
-  color: #fff;
+  content: '';
+  position: absolute;
+  display: block;
+  width: 4px;
+  left: -8px;
+  top: 2px;
+  bottom: 2px;
+  border-radius: 2px;
+  background-color: #ff9800;
+  z-index: 0;
 }
 
-.tree-node-hight-light .attr-action-icon,
+.tree-view .tree-node-icon {
-.tree-node-hight-light .attr-action-icon:focus,
-.tree-node-hight-light .attr-action-icon:hover {
-  color: #fff !important;
-}
-
-.tree-node-icon {
   padding-right: 1.5rem;
 }
 
-.tree-node-text {
+.tree-view .tree-node-text {
   width: calc(100% - 2.5rem);
   font-size: 14px;
   white-space: nowrap;
@@ -90,7 +92,18 @@
   line-height: 24px;
 }
 
-.tree-view {
+.tree-view .dropdown .right-icon {
-  padding: 12px 12px 12px 0;
+  width: 20px;
-  flex: 1 1;
+  height: 20px;
+  border-radius: 3px;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #666;
+  margin-top: 2px;
+}
+
+.tree-view .dropdown .right-icon:hover {
+  background-color: #dbdbdb;
 }

frontend/src/css/work-weixin-departments.css

@@ -22,7 +22,7 @@
 .dir-content-nav {
   position: absolute;
   overflow: hidden;
-  width: 24%;
+  width: 25%;
 }
 
 .dir-content-nav:hover {
@@ -45,43 +45,45 @@
 .tree-node-inner {
   position: relative;
   display: flex;
-  padding-right: 1rem;
+  padding-right: 0.5rem;
 }
 
-.tree-node-inner i {
+.tree-node-inner .sf3-font-down {
   position: absolute;
-  top: 20%;
+  top: 15%;
   left: 0.3rem;
   color: #999;
 }
 
 .tree-node-inner-hover {
-  background-color: #FFEFB2;
+  background-color: #f0f0f0;
   border-radius: 0.25rem;
   cursor: pointer;
 }
 
 .tree-node-hight-light {
-  color: #fff;
   border-radius: 4px;
-  background-color: #feac74 !important;
+  background-color: #f5f5f5 !important;
 }
 
-.tree-node-hight-light i {
+.tree-node-hight-light::before {
-  color: #fff;
+  content: '';
+  position: absolute;
+  display: block;
+  width: 4px;
+  left: -8px;
+  top: 2px;
+  bottom: 2px;
+  border-radius: 2px;
+  background-color: #ff9800;
+  z-index: 0;
 }
 
-.tree-node-hight-light .attr-action-icon,
+.tree-view .tree-node-icon {
-.tree-node-hight-light .attr-action-icon:focus,
-.tree-node-hight-light .attr-action-icon:hover {
-  color: #fff !important;
-}
-
-.tree-node-icon {
   padding-right: 1.5rem;
 }
 
-.tree-node-text {
+.tree-view .tree-node-text {
   width: calc(100% - 2.5rem);
   font-size: 14px;
   white-space: nowrap;
@@ -90,7 +92,18 @@
   line-height: 24px;
 }
 
-.tree-view {
+.tree-view .dropdown .right-icon {
-  padding: 12px 12px 12px 0;
+  width: 20px;
-  flex: 1 1;
+  height: 20px;
+  border-radius: 3px;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #666;
+  margin-top: 2px;
+}
+
+.tree-view .dropdown .right-icon:hover {
+  background-color: #dbdbdb;
 }

frontend/src/pages/sys-admin/dingtalk-departments.js

@@ -60,6 +60,10 @@ class DingtalkDepartments extends Component {
 
   getDingtalkDepartmentsList = (departmentID) => {
     systemAdminAPI.sysAdminListDingtalkDepartments(departmentID).then((res) => {
+      if (!res.data.department && res.data.errmsg) {
+        toaster.danger(res.data.errmsg);
+        return;
+      }
       if (!departmentID) {
         let departmentsTree = this.getDepartmentsTree(res.data.department);
         this.setState({
@@ -302,7 +306,7 @@ class DingtalkDepartments extends Component {
             <div className="cur-view-path">
               <h3 className="sf-heading">{'钉钉集成'}</h3>
             </div>
-            <div className="cur-view-content d-flex flex-row">
+            <div className="cur-view-content d-flex flex-row p-0">
               <DingtalkDepartmentsTreePanel
                 departmentsTree={this.state.departmentsTree}
                 isTreeLoading={this.state.isTreeLoading}

frontend/src/pages/sys-admin/dingtalk/dingtalk-departments-tree-node.js

@@ -115,13 +115,14 @@ class DingtalkDepartmentsTreeNode extends Component {
               style={this.state.active ? {} : { opacity: 0 }}
             >
               <DropdownToggle
-                tag='i'
+                tag='span'
-                className='sf3-font sf3-font-more-vertical cursor-pointer attr-action-icon'
+                className='cursor-pointer right-icon'
                 title={gettext('More operations')}
                 aria-label={gettext('More operations')}
                 data-toggle="dropdown"
                 aria-expanded={this.state.dropdownOpen}
               >
+                <i className="sf3-font sf3-font-more"></i>
               </DropdownToggle>
               <DropdownMenu className="drop-list" right={true}>
                 <DropdownItem

frontend/src/pages/sys-admin/dingtalk/dingtalk-departments-tree-panel.js

@@ -12,19 +12,14 @@ const DingtalkDepartmentsTreePanelPropTypes = {
 };
 
 class DingtalkDepartmentsTreePanel extends Component {
-
-  constructor(props) {
-    super(props);
-  }
-
   render() {
     const { departmentsTree } = this.props;
     return (
       <div className="dir-content-nav">
-        <div className="tree-view tree">
+        <div className="tree-view p-4">
           {this.props.isTreeLoading ?
             <Loading/> :
-            <div className="tree-node">
+            <>
               {departmentsTree.length > 0 && departmentsTree.map((department, index) => {
                 return (
                   <DingtalkDepartmentsTreeNode
@@ -38,7 +33,7 @@ class DingtalkDepartmentsTreePanel extends Component {
                   />
                 );
               })}
-            </div>
+            </>
           }
         </div>
       </div>

frontend/src/pages/sys-admin/work-weixin-departments.js

@@ -59,6 +59,10 @@ class WorkWeixinDepartments extends Component {
 
   getWorkWeixinDepartmentsList = (departmentID) => {
     systemAdminAPI.sysAdminListWorkWeixinDepartments(departmentID).then((res) => {
+      if (!res.data.department && res.data.errmsg) {
+        toaster.danger(res.data.errmsg);
+        return;
+      }
       if (!departmentID) {
         let departmentsTree = this.getDepartmentsTree(res.data.department);
         this.setState({
@@ -302,7 +306,7 @@ class WorkWeixinDepartments extends Component {
             <div className="cur-view-path">
               <h3 className="sf-heading">{'企业微信集成'}</h3>
             </div>
-            <div className="cur-view-content d-flex flex-row">
+            <div className="cur-view-content d-flex flex-row p-0">
               <WorkWeixinDepartmentsTreePanel
                 departmentsTree={this.state.departmentsTree}
                 isTreeLoading={this.state.isTreeLoading}

frontend/src/pages/sys-admin/work-weixin/work-weixin-departments-tree-node.js

@@ -115,13 +115,14 @@ class WorkWeixinDepartmentsTreeNode extends Component {
               style={this.state.active ? {} : { opacity: 0 }}
             >
               <DropdownToggle
-                tag='i'
+                tag='span'
-                className='sf3-font sf3-font-more-vertical cursor-pointer attr-action-icon'
+                className='cursor-pointer right-icon'
                 title={gettext('More operations')}
                 aria-label={gettext('More operations')}
                 data-toggle="dropdown"
                 aria-expanded={this.state.dropdownOpen}
               >
+                <i className="sf3-font sf3-font-more"></i>
               </DropdownToggle>
               <DropdownMenu className="drop-list" right={true}>
                 <DropdownItem

frontend/src/pages/sys-admin/work-weixin/work-weixin-departments-tree-panel.js

@@ -12,19 +12,14 @@ const WorkWeixinDepartmentsTreePanelPropTypes = {
 };
 
 class WorkWeixinDepartmentsTreePanel extends Component {
-
-  constructor(props) {
-    super(props);
-  }
-
   render() {
     const { departmentsTree } = this.props;
     return (
       <div className="dir-content-nav">
-        <div className="tree-view tree">
+        <div className="tree-view p-4">
           {this.props.isTreeLoading ?
             <Loading/> :
-            <div className="tree-node">
+            <>
               {departmentsTree.length > 0 && departmentsTree.map((department, index) => {
                 return (
                   <WorkWeixinDepartmentsTreeNode
@@ -38,7 +33,7 @@ class WorkWeixinDepartmentsTreePanel extends Component {
                   />
                 );
               })}
-            </div>
+            </>
           }
         </div>
       </div>