update 菜单功能样式
This commit is contained in:
@@ -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-group {
|
||||
+ .ant-btn,
|
||||
+ .ant-btn-group {
|
||||
>.ant-btn,
|
||||
>.ant-btn-group {
|
||||
+.ant-btn,
|
||||
+.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 {
|
||||
> 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;
|
||||
}
|
||||
}
|
||||
@@ -65,112 +57,95 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-table-thead {
|
||||
> tr {
|
||||
> th {
|
||||
>tr {
|
||||
>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 {
|
||||
> .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();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-table-fixed-right {
|
||||
.ant-table-fixed {
|
||||
border-left-width: 0 !important;
|
||||
}
|
||||
|
||||
.ant-table-thead {
|
||||
> tr {
|
||||
> th {
|
||||
>tr {
|
||||
>th {
|
||||
.border-right-none();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-table-tbody {
|
||||
> tr {
|
||||
> td {
|
||||
>tr {
|
||||
>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-inner-table {
|
||||
.yo-menu-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 {
|
||||
padding-left: 25px;
|
||||
.ant-table-row-expand-icon-cell {
|
||||
.ant-table-row-expand-icon {
|
||||
left: @padding-md;
|
||||
}
|
||||
.ant-table-expanded-row-level-1 > td {
|
||||
border-right: @border-width-base @border-style-base @table-border-color !important;
|
||||
+.ant-table-cell {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -20,3 +20,9 @@
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.ellipsis {
|
||||
overflow: hidden;
|
||||
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 || []))
|
||||
|
||||
@@ -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} |{' '}
|
||||
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">
|
||||
<a onClick={() => this.onOpen(this.editForm, s)}>编辑</a>
|
||||
</Auth>{' '}
|
||||
|{' '}
|
||||
<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(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)
|
||||
} 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