update 优化菜单授权界面

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">
-            <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="选中此项才会显示菜单">
-                    <AntIcon type="eye" style={{ color: '#1890ff' }} className="mr-xxs" />
-                </Tooltip>
-            )}
-        </div>
+        <label className="ant-card-grid ant-card-grid-hoverable">
+            <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="bottom" title="选中此项才会显示菜单">
+                        <AntIcon type="eye" style={{ color: '#1890ff' }} className="mr-xxs" />
+                    </Tooltip>
+                )}
+                <div className="text-gray">{data.permission}</div>
+            </Popover>
+        </label>
     )
 }