update 优化菜单授权界面

Api/Ewide.Core/Ewide.Core.xml

@@ -5148,6 +5148,16 @@
             关联显示父级
             </summary>
         </member>
+        <member name="P:Ewide.Core.Service.MenuTreeOutput.Permission">
+            <summary>
+            权限标识
+            </summary>
+        </member>
+        <member name="P:Ewide.Core.Service.MenuTreeOutput.Remark">
+            <summary>
+            备注
+            </summary>
+        </member>
         <member name="P:Ewide.Core.Service.MenuTreeOutput.Sort">
             <summary>
             排序，越小优先级越高

Api/Ewide.Core/Service/Menu/Dto/MenuTreeOutput.cs

@@ -38,6 +38,16 @@ namespace Ewide.Core.Service
         /// </summary>
         public bool VisibleParent { get; set; }
 
+        /// <summary>
+        /// 权限标识
+        /// </summary>
+        public string Permission { get; set; }
+
+        /// <summary>
+        /// 备注
+        /// </summary>
+        public string Remark { get; set; }
+
         /// <summary>
         /// 排序，越小优先级越高
         /// </summary>

Api/Ewide.Core/Service/Menu/SysMenuService.cs

@@ -460,6 +460,8 @@ namespace Ewide.Core.Service
                                              Title = u.Name,
                                              Type = u.Type,
                                              VisibleParent = u.VisibleParent,
+                                             Permission = u.Permission,
+                                             Remark = u.Remark,
                                              Sort = u.Sort
                                          }).ToListAsync();
             return new TreeBuildUtil<MenuTreeOutput>().DoTreeBuild(menus);

web-react/src/assets/style/lib/authority-view.less

@@ -9,7 +9,12 @@
     width: 150px;
   }
   .ant-descriptions {
+    clear: both;
+
     margin-bottom: @padding-sm;
+    .ant-descriptions-view {
+      overflow: visible;
+    }
     &:last-child {
       margin-bottom: 0;
     }
@@ -26,4 +31,23 @@
       }
     }
   }
+  .ant-card-grid {
+    width: 25%;
+    margin-bottom: @padding-sm;
+    padding: @padding-xs;
+
+    cursor: pointer;
+  }
+  .ant-card {
+    margin-bottom: 0;
+
+    background-color: transparent;
+    &-body {
+      margin: -1px 0 0 -1px;
+      padding: 0;
+    }
+    .ant-card-grid {
+      margin-bottom: 0;
+    }
+  }
 }

web-react/src/components/authority-view/index.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Checkbox, Descriptions, Empty, Spin, Tooltip } from 'antd'
+import { Card, Checkbox, Descriptions, Empty, Popover, Spin, Tooltip } from 'antd'
 import { AntIcon } from 'components'
 import { EMPTY_ID } from 'util/global'
 
@@ -58,7 +58,7 @@ function renderDescriptions(data) {
 
 function renderItem(data) {
     return (
-        <Descriptions bordered column={1}>
+        <Descriptions bordered column={1} contentStyle={{ padding: 0 }}>
             <Descriptions.Item
                 label={
                     <Checkbox
@@ -71,7 +71,7 @@ function renderItem(data) {
                     </Checkbox>
                 }
             >
-                {renderDescriptions.call(this, data.children)}
+                <Card bordered={false}>{renderDescriptions.call(this, data.children)}</Card>
             </Descriptions.Item>
         </Descriptions>
     )
@@ -79,16 +79,26 @@ function renderItem(data) {
 
 function renderCheckbox(data) {
     return (
-        <div className="yo-authority-view--checkbox">
+        <label className="ant-card-grid ant-card-grid-hoverable">
-            <Checkbox value={data.id} checked={data.checked} onChange={e => this.onChange(e, data)}>
+            <Popover
+                placement="topLeft"
+                content={data.remark || <span className="text-normal">没有说明</span>}
+            >
+                <Checkbox
+                    value={data.id}
+                    checked={data.checked}
+                    onChange={e => this.onChange(e, data)}
+                >
                     {data.title}
                 </Checkbox>
                 {data.visibleParent && data.type == 2 && (
-                <Tooltip placement="top" title="选中此项才会显示菜单">
+                    <Tooltip placement="bottom" title="选中此项才会显示菜单">
                         <AntIcon type="eye" style={{ color: '#1890ff' }} className="mr-xxs" />
                     </Tooltip>
                 )}
-        </div>
+                <div className="text-gray">{data.permission}</div>
+            </Popover>
+        </label>
     )
 }