update 菜单功能样式

web-react/src/assets/style/lib/table.less

@@ -1,5 +1,4 @@
 @import (reference) '../extend.less';
-
 .yo-query-bar {
   margin-bottom: @padding-xs;
   .ant-form-inline {
@@ -8,24 +7,21 @@
     }
   }
 }
-
 .yo-action-bar {
   display: flex;
   justify-content: space-between;
 
   margin-bottom: @padding-md;
-
   &--actions {
-        > .ant-btn,
+    >.ant-btn,
-        > .ant-btn-group {
+    >.ant-btn-group {
-            + .ant-btn,
+      +.ant-btn,
-            + .ant-btn-group {
+      +.ant-btn-group {
         margin-left: @padding-xs;
       }
     }
   }
 }
-
 .ant-table-thead {
   th.ant-table-column-has-sorters {
     &:hover {
@@ -33,30 +29,26 @@
     }
   }
 }
-
 .ant-table-tbody {
-    > tr {
+  >tr {
-        > td {
+    >td {
       transition-property: background, border-bottom-color;
     }
   }
-
+  >tr.ant-table-row:hover {
-    > tr.ant-table-row:hover {
+    >td {
-        > td {
       border-bottom-color: lighten(@primary-color, 30%);
     }
   }
 }
-
 .ant-table-small {
-    > .ant-table-content {
+  >.ant-table-content {
-        > .ant-table-body {
+    >.ant-table-body {
       margin: 0;
-
+      >table {
-            > table {
+        >.ant-table-thead {
-                > .ant-table-thead {
+          >tr {
-                    > tr {
+            >th {
-                        > th {
               background-color: @table-selected-row-bg;
             }
           }
@@ -65,112 +57,95 @@
     }
   }
 }
-
 .ant-table-thead {
-    > tr {
+  >tr {
-        > th {
+    >th {
       font-weight: bold;
     }
   }
 }
-
 .ant-table-sticky-scroll {
   display: none;
 }
-
 .yo-table {
   .ant-table {
     margin: 0 !important;
   }
-
+  .border-right-none {
-    .border-right-none() {
     border-right-width: 0 !important;
-
     &:last-child {
       border-right-width: 1px !important;
     }
   }
-
   .ant-table-content {
     .ant-table-body {
       overflow-x: auto !important;
-
+      >table {
-            > table {
+        >.ant-table-thead {
-                > .ant-table-thead {
+          >tr {
-                    > tr {
+            >th {
-                        > th {
               .border-right-none();
             }
           }
         }
-
+        >.ant-table-tbody {
-                > .ant-table-tbody {
+          >tr {
-                    > tr {
+            >td {
-                        > td {
               .border-right-none();
             }
           }
         }
       }
     }
-
     .ant-table-fixed-left {
       .ant-table-thead {
-                > tr {
+        >tr {
-                    > th {
+          >th {
             border-right-width: 0 !important;
           }
         }
       }
-
       .ant-table-tbody {
-                > tr {
+        >tr {
-                    > td {
+          >td {
             border-right-width: 0 !important;
           }
         }
       }
     }
-
     .ant-table-fixed-right {
       .ant-table-fixed {
         border-left-width: 0 !important;
       }
-
       .ant-table-thead {
-                > tr {
+        >tr {
-                    > th {
+          >th {
             .border-right-none();
           }
         }
       }
-
       .ant-table-tbody {
-                > tr {
+        >tr {
-                    > td {
+          >td {
             .border-right-none();
           }
         }
       }
     }
   }
-
   .ant-table-bordered {
     >.ant-table-container {
       border-top: @border-width-base @border-style-base @table-border-color;
     }
   }
-
   &--row-no {
     background-color: @table-header-bg;
   }
 }
-
 .yo-table-actions {
   display: inline-block;
 
   vertical-align: middle;
-
   &--inner {
     display: flex;
     align-items: center;
@@ -178,32 +153,42 @@
     height: 18px;
   }
 }
-
 .yo-table--column-setting {
   width: 240px;
-
   .ant-dropdown-menu-item {
     display: flex;
-        justify-content: space-between;
     align-items: center;
+    justify-content: space-between;
   }
-
   .anticon-pushpin {
-        color: darken(@white, 40%);
     transition: @animation-duration-slow;
     transform: rotate(45deg);
-    }
 
+    color: darken(@white, 40%);
+  }
   .yo-table--fixed {
     transform: rotate(-45deg);
   }
 }
-
+.yo-menu-table {
-.yo-inner-table {
   .ant-table {
+    .ant-table-expand-icon-col {
+      width: 28px;
+    }
+    .ant-table-row-expand-icon-cell {
+      z-index: 1;
+
+      padding-right: 0 !important;
+
+      border-right: none !important;
+      +.ant-table-cell {
+        padding-left: 0;
+      }
+    }
     .ant-table-tbody {
-            > .ant-table-expanded-row-level-1 > td {
+      >.ant-table-expanded-row-level-1>td {
         padding: 0;
+
         border-right: none !important;
         .ant-table-wrapper {
           border: none;
@@ -212,12 +197,30 @@
           }
           .ant-table-container {
             border: none;
-                        .ant-table-cell:first-child {
+            .ant-table-row-expand-icon-cell {
-                            padding-left: 25px;
+              .ant-table-row-expand-icon {
+                left: @padding-md;
               }
-                        .ant-table-expanded-row-level-1 > td {
+              +.ant-table-cell {
-                            border-right: @border-width-base @border-style-base @table-border-color !important;
+                padding-left: @padding-md;
+              }
+            }
+            .ant-table-expanded-row-level-1>td {
               padding: @padding-sm @padding-xs @padding-sm @padding-xl;
+
+              border-right: @border-width-base @border-style-base @table-border-color !important;
+              .ant-card {
+                max-width: fit-content;
+                margin-bottom: 0;
+
+                background: none;
+                .ant-card-grid {
+                  width: 300px;
+                  padding: @padding-xs @padding-sm;
+
+                  background-color: @white;
+                }
+              }
             }
           }
         }

web-react/src/assets/style/lib/visibility.less

@@ -20,3 +20,9 @@
 .flex {
   display: flex;
 }
+.ellipsis {
+  overflow: hidden;
+
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

web-react/src/assets/style/public.less

@@ -33,3 +33,12 @@
     background: url('~assets/image/adorn/house-top-01.png') no-repeat bottom right;
   }
 }
+a.link-gray {
+  color: fade(@black, 50%);
+  &:hover {
+    color: @link-hover-color;
+  }
+  &:active {
+    color: @link-active-color;
+  }
+}

web-react/src/components/query-table/index.jsx

@@ -277,7 +277,7 @@ export default class QueryTable extends Component {
 
         const { loading, dataSource, type } = this.state
 
-        const { query, operator, columns } = this.props
+        const { query, operator, columns, expandable, expandedRowRender } = this.props
 
         const attrs = {}
         Object.keys(this.props).forEach(key => {
@@ -292,7 +292,7 @@ export default class QueryTable extends Component {
             dataSource,
             columns: (() => {
                 const c = []
-                if (type !== 'tree' && rowNumber) {
+                if (type !== 'tree' && rowNumber & !expandable & !expandedRowRender) {
                     c.push(rowNoColumn)
                 }
                 c.push(...(columns || []))

web-react/src/pages/system/menu/index.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Button, Table, Card, Form, Input, Popconfirm, message as Message, Tag } from 'antd'
+import { Button, Table, Card, Popconfirm, message as Message, Row, Col, Tooltip } from 'antd'
 import { isEqual } from 'lodash'
 import { AntIcon, Auth, Container, ModalForm, QueryTable, QueryTableActions } from 'components'
 import { api } from 'common/api'
@@ -58,13 +58,6 @@ export default class index extends Component {
             title: '前端组件',
             width: 220,
             dataIndex: 'component',
-            ellipsis: true,
-        },
-        {
-            title: '权限标识',
-            width: 220,
-            dataIndex: 'permission',
-            ellipsis: true,
         },
         {
             title: '排序',
@@ -85,17 +78,10 @@ export default class index extends Component {
         if (flag) {
             this.columns.push({
                 title: '操作',
-                width: 150,
+                width: 220,
                 dataIndex: 'actions',
                 render: (text, record) => (
                     <QueryTableActions>
-                        {record.type < 2 && (
-                            <Auth auth="sysMenu:add">
-                                <a onClick={() => this.onOpen(this.addForm, record, true)}>
-                                    新增子菜单
-                                </a>
-                            </Auth>
-                        )}
                         <Auth auth="sysMenu:edit">
                             <a onClick={() => this.onOpen(this.editForm, record)}>编辑</a>
                         </Auth>
@@ -108,6 +94,13 @@ export default class index extends Component {
                                 <a>删除</a>
                             </Popconfirm>
                         </Auth>
+                        {record.type < 2 && (
+                            <Auth auth="sysMenu:add">
+                                <a onClick={() => this.onOpen(this.addForm, record, true)}>
+                                    {record.type == 0 ? '新增子菜单' : '新增功能'}
+                                </a>
+                            </Auth>
+                        )}
                     </QueryTableActions>
                 ),
             })
@@ -156,27 +149,8 @@ export default class index extends Component {
             ...params,
             ...query,
         })
-        return this.onfilterdata(data)
-        //return data
-    }
-
-    onfilterdata(data) {
-        this.findlastChildren(data)
         return data
     }
-    findlastChildren(data) {
-        data.forEach(s => {
-            if (s.children && s.children.length > 0) {
-                s.rowExpandable = true
-                s.children.forEach(p => {
-                    if (p.children && p.children.length === 0) {
-                        p.rowExpandable = false
-                    }
-                })
-                this.findlastChildren(s.children)
-            }
-        })
-    }
 
     /**
      * 绑定字典数据
@@ -240,64 +214,101 @@ export default class index extends Component {
         this.onAction(apiAction.delete(record), '删除成功')
     }
 
+    //#region 自定义方法
     /**
      * 绘制新的扩展行
      * @param {*} record
      */
     onRowRender(record) {
-        var arr = []
+        const grids = []
-        var istag = false
+        let isFunction = false
-        record.children.map(s => {
+        record.children.map(item => {
-            if (!s.rowExpandable && s.type == 2) {
+            if (!(item.children && item.children.length) && item.type == 2) {
-                istag = true
+                isFunction = true
-                var temp = (
+                const grid = (
-                    <Tag color="#87d068" key={s.id}>
+                    <Card.Grid key={item.id}>
-                        {s.name} |{' '}
+                        <p>
+                            {item.visibleParent && (
+                                <Tooltip placement="top" title="选中此项才会显示菜单">
+                                    <AntIcon
+                                        type="eye"
+                                        style={{ color: '#1890ff' }}
+                                        className="mr-xxs"
+                                    />
+                                </Tooltip>
+                            )}
+                            <b>{item.name}</b>
+                        </p>
+                        <span className="block ellipsis text-gray">{item.permission}</span>
+                        <div className="text-right">
+                            <QueryTableActions>
                                 <Auth auth="sysMenu:edit">
-                            <a onClick={() => this.onOpen(this.editForm, s)}>编辑</a>
+                                    <Tooltip title="编辑">
-                        </Auth>{' '}
+                                        <a
-                        |{' '}
+                                            className="link-gray"
+                                            onClick={() => this.onOpen(this.editForm, item)}
+                                        >
+                                            <AntIcon type="edit" />
+                                        </a>
+                                    </Tooltip>
+                                </Auth>
                                 <Auth auth="sysMenu:delete">
                                     <Popconfirm
                                         placement="topRight"
                                         title="是否确认删除"
-                                onConfirm={() => this.onDelete(s)}
+                                        onConfirm={() => this.onDelete(item)}
                                     >
-                                <a>删除</a>
+                                        <Tooltip title="删除">
+                                            <a className="link-gray">
+                                                <AntIcon type="delete" />
+                                            </a>
+                                        </Tooltip>
                                     </Popconfirm>
                                 </Auth>
-                    </Tag>
+                            </QueryTableActions>
+                        </div>
+                    </Card.Grid>
                 )
-                arr.push(temp)
+                grids.push(grid)
-            } else if (s.rowExpandable || (!s.rowExpandable && s.type == 1)) {
+            } else if (
-                arr.push(s)
+                (item.children && item.children.length) ||
+                (!(item.children && item.children.length) && item.type == 1)
+            ) {
+                grids.push(item)
             }
         })
-        if (istag) {
+        if (isFunction) {
-            return arr
+            grids.push(
+                <Card.Grid
+                    style={{ padding: '18px 12px', cursor: 'pointer' }}
+                    className="text-center"
+                    onClick={() => this.onOpen(this.addForm, record, true)}
+                >
+                    <div>
+                        <AntIcon type="plus" className="text-normal h2" />
+                    </div>
+                    <span className="text-gray">新增功能</span>
+                </Card.Grid>
+            )
+            return <Card bordered={false}>{grids}</Card>
         } else {
             return (
                 <Table
                     columns={this.columns}
                     showHeader={false}
-                    dataSource={arr}
+                    dataSource={grids}
                     rowKey={record => record.id}
                     expandable={{
                         expandedRowRender: record => this.onRowRender(record),
-                        rowExpandable: record => record.rowExpandable === true,
+                        rowExpandable: record => record.children && record.children.length,
                     }}
-                    childrenColumnName="11"
+                    childrenColumnName="none"
                     bordered={true}
                     pagination={false}
                 />
             )
         }
     }
-
-    //#region 自定义方法
-    async onSetDefault(record) {
-        this.onAction(apiAction.setDefault(record), '设置成功')
-    }
     //#endregion
 
     render() {
@@ -306,15 +317,15 @@ export default class index extends Component {
                 <br />
                 <Card bordered={false}>
                     <QueryTable
-                        className="yo-inner-table"
+                        className="yo-menu-table"
-                        childrenColumnName="111"
+                        childrenColumnName="none"
                         ref={this.table}
                         autoLoad={false}
                         loadData={this.loadData}
                         columns={this.columns}
                         expandable={{
                             expandedRowRender: record => this.onRowRender(record),
-                            rowExpandable: record => record.rowExpandable === true,
+                            rowExpandable: record => record.children && record.children.length,
                         }}
                         operator={
                             <Auth auth="sysMenu:add">