ewide/zsxt_nbzs_h5
22
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update 菜单功能样式

Browse Source
This commit is contained in:
自带大佬气场
2021-06-24 15:49:20 +08:00
parent fa229a3802
commit a828a62d20
5 changed files with 272 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
web-react/src/assets/style/lib/table.less
View File

@@ -1,5 +1,4 @@
@import (reference) '../extend.less';
.yo-query-bar {
margin-bottom: @padding-xs;
.ant-form-inline {
@@ -8,13 +7,11 @@
}
}
}
.yo-action-bar {
display: flex;
justify-content: space-between;
margin-bottom: @padding-md;
&--actions {
>.ant-btn,
>.ant-btn-group {
@@ -25,7 +22,6 @@
}
}
}
.ant-table-thead {
th.ant-table-column-has-sorters {
&:hover {
@@ -33,26 +29,22 @@
}
}
}
.ant-table-tbody {
>tr {
>td {
transition-property: background, border-bottom-color;
}
}
>tr.ant-table-row:hover {
>td {
border-bottom-color: lighten(@primary-color, 30%);
}
}
}
.ant-table-small {
>.ant-table-content {
>.ant-table-body {
margin: 0;
>table {
>.ant-table-thead {
>tr {
@@ -65,7 +57,6 @@
}
}
}
.ant-table-thead {
>tr {
>th {
@@ -73,28 +64,22 @@
}
}
}
.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 {
@@ -103,7 +88,6 @@
}
}
}
>.ant-table-tbody {
>tr {
>td {
@@ -113,7 +97,6 @@
}
}
}
.ant-table-fixed-left {
.ant-table-thead {
>tr {
@@ -122,7 +105,6 @@
}
}
}
.ant-table-tbody {
>tr {
>td {
@@ -131,12 +113,10 @@
}
}
}
.ant-table-fixed-right {
.ant-table-fixed {
border-left-width: 0 !important;
}
.ant-table-thead {
>tr {
>th {
@@ -144,7 +124,6 @@
}
}
}
.ant-table-tbody {
>tr {
>td {
@@ -154,23 +133,19 @@
}
}
}
.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 {
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-cell {
padding-left: @padding-md;
}
}
.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;
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;
}
}
}
}
}

6
web-react/src/assets/style/lib/visibility.less
View File

@@ -20,3 +20,9 @@
.flex {
display: flex;
}
.ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

9
web-react/src/assets/style/public.less
View File

@@ -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;
}
}

4
web-react/src/components/query-table/index.jsx
View File

@@ -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 || []))

141
web-react/src/pages/system/menu/index.jsx
View File

@@ -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">