展开行样式修改

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

@@ -11,10 +11,8 @@
     margin-bottom: @padding-md;
 
     &--actions {
-
         > .ant-btn,
         > .ant-btn-group {
-
             + .ant-btn,
             + .ant-btn-group {
                 margin-left: @padding-xs;
@@ -165,7 +163,6 @@
         align-items: center;
 
         height: 18px;
-
     }
 }
 
@@ -188,3 +185,30 @@
         transform: rotate(-45deg);
     }
 }
+
+.yo-inner-table {
+    .ant-table {
+        .ant-table-tbody {
+            > .ant-table-expanded-row-level-1 > td {
+                padding: 0;
+                border-right: none !important;
+                .ant-table-wrapper {
+                    border: none;
+                    .ant-table {
+                        margin: 0 !important;
+                    }
+                    .ant-table-container {
+                        border: none;
+                        .ant-table-cell:first-child {
+                            padding-left: 25px;
+                        }
+                        .ant-table-expanded-row-level-1 > td {
+                            border-right: @border-width-base @border-style-base @table-border-color !important;
+                            padding: @padding-sm @padding-xs @padding-sm @padding-xl;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

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

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Button, Card, Form, Input, Popconfirm, message as Message } from 'antd'
+import { Button, Table, Card, Form, Input, Popconfirm, message as Message, Tag } from 'antd'
 import { isEqual } from 'lodash'
 import { AntIcon, Auth, Container, ModalForm, QueryTable, QueryTableActions } from 'components'
 import { api } from 'common/api'
@@ -13,19 +13,18 @@ const apiAction = {
     page: api.getMenuList,
     add: api.sysMenuAdd,
     edit: api.sysMenuEdit,
-    delete: api.sysMenuDelete
+    delete: api.sysMenuDelete,
 }
 
 // 用于弹窗标题
 const name = '菜单'
 
 export default class index extends Component {
-
     state = {
         codes: {
             menuType: [],
-            menuWeight: []
+            menuWeight: [],
-        }
+        },
     }
 
     // 表格实例
@@ -53,7 +52,7 @@ export default class index extends Component {
             title: '图标',
             width: 100,
             dataIndex: 'icon',
-            render: text => text && <AntIcon type={text} />
+            render: text => text && <AntIcon type={text} />,
         },
         {
             title: '前端组件',
@@ -71,7 +70,7 @@ export default class index extends Component {
             title: '排序',
             width: 100,
             dataIndex: 'sort',
-        }
+        },
     ]
 
     /**
@@ -88,13 +87,15 @@ export default class index extends Component {
                 title: '操作',
                 width: 150,
                 dataIndex: 'actions',
-                render: (text, record) => (<QueryTableActions>
+                render: (text, record) => (
-                    {
+                    <QueryTableActions>
-                        record.type < 2 &&
+                        {record.type < 2 && (
                             <Auth auth="sysMenu:add">
-                            <a onClick={() => this.onOpen(this.addForm, record, true)}>新增子菜单</a>
+                                <a onClick={() => this.onOpen(this.addForm, record, true)}>
+                                    新增子菜单
+                                </a>
                             </Auth>
-                    }
+                        )}
                         <Auth auth="sysMenu:edit">
                             <a onClick={() => this.onOpen(this.editForm, record)}>编辑</a>
                         </Auth>
@@ -107,7 +108,8 @@ export default class index extends Component {
                                 <a>删除</a>
                             </Popconfirm>
                         </Auth>
-                </QueryTableActions>)
+                    </QueryTableActions>
+                ),
             })
         }
     }
@@ -131,11 +133,14 @@ export default class index extends Component {
     componentDidMount() {
         this.table.current.onLoading()
         getDictData('menu_type', 'menu_weight').then(res => {
-            this.setState({
+            this.setState(
-                codes: res
+                {
-            }, () => {
+                    codes: res,
+                },
+                () => {
                     this.table.current.onLoadData()
-            })
+                }
+            )
         })
     }
 
@@ -151,8 +156,27 @@ 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)
+            }
+        })
+    }
 
     /**
      * 绑定字典数据
@@ -164,7 +188,7 @@ export default class index extends Component {
         name = toCamelCase(name)
         const codes = this.state.codes[name]
         if (codes) {
-            const c = codes.find((p) => p.code === code)
+            const c = codes.find(p => p.code === code)
             if (c) {
                 return c.value
             }
@@ -178,12 +202,14 @@ export default class index extends Component {
      * @param {*} record
      */
     onOpen(modal, record, isParent = false) {
-        const params = isParent ? {
+        const params = isParent
+            ? {
                   parent: record,
-            isParent
+                  isParent,
-        } : {
+              }
+            : {
                   record,
-            isParent
+                  isParent,
               }
 
         modal.current.open(params)
@@ -211,18 +237,66 @@ export default class index extends Component {
      * @param {*} record
      */
     onDelete(record) {
-        this.onAction(
+        this.onAction(apiAction.delete(record), '删除成功')
-            apiAction.delete(record),
+    }
-            '删除成功'
+
+    /**
+     * 绘制新的扩展行
+     * @param {*} record
+     */
+    onRowRender(record) {
+        var arr = []
+        var istag = false
+        record.children.map(s => {
+            if (!s.rowExpandable && s.type == 2) {
+                istag = true
+                var temp = (
+                    <Tag color="#87d068" key={s.id}>
+                        {s.name} |{' '}
+                        <Auth auth="sysMenu:edit">
+                            <a onClick={() => this.onOpen(this.editForm, s)}>编辑</a>
+                        </Auth>{' '}
+                        |{' '}
+                        <Auth auth="sysMenu:delete">
+                            <Popconfirm
+                                placement="topRight"
+                                title="是否确认删除"
+                                onConfirm={() => this.onDelete(s)}
+                            >
+                                <a>删除</a>
+                            </Popconfirm>
+                        </Auth>
+                    </Tag>
                 )
+                arr.push(temp)
+            } else if (s.rowExpandable || (!s.rowExpandable && s.type == 1)) {
+                arr.push(s)
+            }
+        })
+        if (istag) {
+            return arr
+        } else {
+            return (
+                <Table
+                    columns={this.columns}
+                    showHeader={false}
+                    dataSource={arr}
+                    rowKey={record => record.id}
+                    expandable={{
+                        expandedRowRender: record => this.onRowRender(record),
+                        rowExpandable: record => record.rowExpandable === true,
+                    }}
+                    childrenColumnName="11"
+                    bordered={true}
+                    pagination={false}
+                />
+            )
+        }
     }
 
     //#region 自定义方法
     async onSetDefault(record) {
-        this.onAction(
+        this.onAction(apiAction.setDefault(record), '设置成功')
-            apiAction.setDefault(record),
-            '设置成功'
-        )
     }
     //#endregion
 
@@ -232,16 +306,24 @@ export default class index extends Component {
                 <br />
                 <Card bordered={false}>
                     <QueryTable
+                        className="yo-inner-table"
+                        childrenColumnName="111"
                         ref={this.table}
                         autoLoad={false}
                         loadData={this.loadData}
                         columns={this.columns}
+                        expandable={{
+                            expandedRowRender: record => this.onRowRender(record),
+                            rowExpandable: record => record.rowExpandable === true,
+                        }}
                         operator={
                             <Auth auth="sysMenu:add">
                                 <Button
                                     icon={<AntIcon type="plus" />}
                                     onClick={() => this.onOpen(this.addForm)}
-                                >新增{name}</Button>
+                                >
+                                    新增{name}
+                                </Button>
                             </Auth>
                         }
                     />