展开行样式修改
This commit is contained in:
Connor
@@ -11,12 +11,10 @@
|
||||
margin-bottom: @padding-md;
|
||||
|
||||
&--actions {
|
||||
|
||||
>.ant-btn,
|
||||
>.ant-btn-group {
|
||||
|
||||
+.ant-btn,
|
||||
+.ant-btn-group {
|
||||
> .ant-btn,
|
||||
> .ant-btn-group {
|
||||
+ .ant-btn,
|
||||
+ .ant-btn-group {
|
||||
margin-left: @padding-xs;
|
||||
}
|
||||
}
|
||||
@@ -32,28 +30,28 @@
|
||||
}
|
||||
|
||||
.ant-table-tbody {
|
||||
>tr {
|
||||
>td {
|
||||
> tr {
|
||||
> td {
|
||||
transition-property: background, border-bottom-color;
|
||||
}
|
||||
}
|
||||
|
||||
>tr.ant-table-row:hover {
|
||||
>td {
|
||||
> tr.ant-table-row:hover {
|
||||
> td {
|
||||
border-bottom-color: lighten(@primary-color, 30%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-table-small {
|
||||
>.ant-table-content {
|
||||
>.ant-table-body {
|
||||
> .ant-table-content {
|
||||
> .ant-table-body {
|
||||
margin: 0;
|
||||
|
||||
>table {
|
||||
>.ant-table-thead {
|
||||
>tr {
|
||||
>th {
|
||||
> table {
|
||||
> .ant-table-thead {
|
||||
> tr {
|
||||
> th {
|
||||
background-color: @table-selected-row-bg;
|
||||
}
|
||||
}
|
||||
@@ -64,8 +62,8 @@
|
||||
}
|
||||
|
||||
.ant-table-thead {
|
||||
>tr {
|
||||
>th {
|
||||
> tr {
|
||||
> th {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
@@ -88,18 +86,18 @@
|
||||
.ant-table-body {
|
||||
overflow-x: auto !important;
|
||||
|
||||
>table {
|
||||
>.ant-table-thead {
|
||||
>tr {
|
||||
>th {
|
||||
> table {
|
||||
> .ant-table-thead {
|
||||
> tr {
|
||||
> th {
|
||||
.border-right-none();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
>.ant-table-tbody {
|
||||
>tr {
|
||||
>td {
|
||||
> .ant-table-tbody {
|
||||
> tr {
|
||||
> td {
|
||||
.border-right-none();
|
||||
}
|
||||
}
|
||||
@@ -109,16 +107,16 @@
|
||||
|
||||
.ant-table-fixed-left {
|
||||
.ant-table-thead {
|
||||
>tr {
|
||||
>th {
|
||||
> tr {
|
||||
> th {
|
||||
border-right-width: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-table-tbody {
|
||||
>tr {
|
||||
>td {
|
||||
> tr {
|
||||
> td {
|
||||
border-right-width: 0 !important;
|
||||
}
|
||||
}
|
||||
@@ -131,16 +129,16 @@
|
||||
}
|
||||
|
||||
.ant-table-thead {
|
||||
>tr {
|
||||
>th {
|
||||
> tr {
|
||||
> th {
|
||||
.border-right-none();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-table-tbody {
|
||||
>tr {
|
||||
>td {
|
||||
> tr {
|
||||
> td {
|
||||
.border-right-none();
|
||||
}
|
||||
}
|
||||
@@ -149,7 +147,7 @@
|
||||
}
|
||||
|
||||
.ant-table-bordered {
|
||||
>.ant-table-container {
|
||||
> .ant-table-container {
|
||||
border-top: @border-width-base @border-style-base @table-border-color;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
{
|
||||
record.type < 2 &&
|
||||
render: (text, record) => (
|
||||
<QueryTableActions>
|
||||
{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({
|
||||
codes: res
|
||||
}, () => {
|
||||
this.setState(
|
||||
{
|
||||
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(
|
||||
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>
|
||||
}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user