update 菜单功能样式
This commit is contained in:
@@ -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 = []
|
||||
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>
|
||||
const grids = []
|
||||
let isFunction = false
|
||||
record.children.map(item => {
|
||||
if (!(item.children && item.children.length) && item.type == 2) {
|
||||
isFunction = true
|
||||
const grid = (
|
||||
<Card.Grid key={item.id}>
|
||||
<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">
|
||||
<Tooltip title="编辑">
|
||||
<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(item)}
|
||||
>
|
||||
<Tooltip title="删除">
|
||||
<a className="link-gray">
|
||||
<AntIcon type="delete" />
|
||||
</a>
|
||||
</Tooltip>
|
||||
</Popconfirm>
|
||||
</Auth>
|
||||
</QueryTableActions>
|
||||
</div>
|
||||
</Card.Grid>
|
||||
)
|
||||
arr.push(temp)
|
||||
} else if (s.rowExpandable || (!s.rowExpandable && s.type == 1)) {
|
||||
arr.push(s)
|
||||
grids.push(grid)
|
||||
} else if (
|
||||
(item.children && item.children.length) ||
|
||||
(!(item.children && item.children.length) && item.type == 1)
|
||||
) {
|
||||
grids.push(item)
|
||||
}
|
||||
})
|
||||
if (istag) {
|
||||
return arr
|
||||
if (isFunction) {
|
||||
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"
|
||||
childrenColumnName="111"
|
||||
className="yo-menu-table"
|
||||
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">
|
||||
|
||||
Reference in New Issue
Block a user