展开行样式修改

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,12 +70,12 @@ export default class index extends Component {
             title: '排序',
             width: 100,
             dataIndex: 'sort',
-        }
+        },
     ]
 
     /**
      * 构造函数,在渲染前动态添加操作字段等
-     * @param {*} props 
+     * @param {*} props
      */
     constructor(props) {
         super(props)
@@ -88,26 +87,29 @@ export default class index extends Component {
                 title: '操作',
                 width: 150,
                 dataIndex: 'actions',
-                render: (text, record) => (<QueryTableActions>
-                    {
-                        record.type < 2 &&
-                        <Auth auth="sysMenu:add">
-                            <a onClick={() => this.onOpen(this.addForm, record, true)}>新增子菜单</a>
+                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>
-                    }
-                    <Auth auth="sysMenu:edit">
-                        <a onClick={() => this.onOpen(this.editForm, record)}>编辑</a>
-                    </Auth>
-                    <Auth auth="sysMenu:delete">
-                        <Popconfirm
-                            placement="topRight"
-                            title="是否确认删除"
-                            onConfirm={() => this.onDelete(record)}
-                        >
-                            <a>删除</a>
-                        </Popconfirm>
-                    </Auth>
-                </QueryTableActions>)
+                        <Auth auth="sysMenu:delete">
+                            <Popconfirm
+                                placement="topRight"
+                                title="是否确认删除"
+                                onConfirm={() => this.onDelete(record)}
+                            >
+                                <a>删除</a>
+                            </Popconfirm>
+                        </Auth>
+                    </QueryTableActions>
+                ),
             })
         }
     }
@@ -116,9 +118,9 @@ export default class index extends Component {
      * 阻止外部组件引发的渲染,提升性能
      * 可自行添加渲染条件
      * [必要]
-     * @param {*} props 
-     * @param {*} state 
-     * @returns 
+     * @param {*} props
+     * @param {*} state
+     * @returns
      */
     shouldComponentUpdate(props, state) {
         return !isEqual(this.state, state)
@@ -131,40 +133,62 @@ export default class index extends Component {
     componentDidMount() {
         this.table.current.onLoading()
         getDictData('menu_type', 'menu_weight').then(res => {
-            this.setState({
-                codes: res
-            }, () => {
-                this.table.current.onLoadData()
-            })
+            this.setState(
+                {
+                    codes: res,
+                },
+                () => {
+                    this.table.current.onLoadData()
+                }
+            )
         })
     }
 
     /**
      * 调用加载数据接口,可在调用前对query进行处理
      * [异步,必要]
-     * @param {*} params 
-     * @param {*} query 
-     * @returns 
+     * @param {*} params
+     * @param {*} query
+     * @returns
      */
     loadData = async (params, query) => {
         const { data } = await apiAction.page({
             ...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)
+            }
+        })
+    }
 
     /**
      * 绑定字典数据
-     * @param {*} code 
-     * @param {*} name 
-     * @returns 
+     * @param {*} code
+     * @param {*} name
+     * @returns
      */
     bindCodeValue(code, name) {
         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
             }
@@ -174,17 +198,19 @@ export default class index extends Component {
 
     /**
      * 打开新增/编辑弹窗
-     * @param {*} modal 
-     * @param {*} record 
+     * @param {*} modal
+     * @param {*} record
      */
     onOpen(modal, record, isParent = false) {
-        const params = isParent ? {
-            parent: record,
-            isParent
-        } : {
-            record,
-            isParent
-        }
+        const params = isParent
+            ? {
+                  parent: record,
+                  isParent,
+              }
+            : {
+                  record,
+                  isParent,
+              }
 
         modal.current.open(params)
     }
@@ -192,8 +218,8 @@ export default class index extends Component {
     /**
      * 对表格上的操作进行统一处理
      * [异步]
-     * @param {*} action 
-     * @param {*} successMessage 
+     * @param {*} action
+     * @param {*} successMessage
      */
     async onAction(action, successMessage) {
         this.table.current.onLoading()
@@ -208,21 +234,69 @@ export default class index extends Component {
 
     /**
      * 删除
-     * @param {*} record 
+     * @param {*} record
      */
     onDelete(record) {
-        this.onAction(
-            apiAction.delete(record),
-            '删除成功'
-        )
+        this.onAction(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(
-            apiAction.setDefault(record),
-            '设置成功'
-        )
+        this.onAction(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>
                         }
                     />