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

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

@@ -1,5 +1,4 @@
@import (reference) '../extend.less'; @import (reference) '../extend.less';
.yo-query-bar { .yo-query-bar {
margin-bottom: @padding-xs; margin-bottom: @padding-xs;
.ant-form-inline { .ant-form-inline {
@@ -8,220 +7,224 @@
} }
} }
} }
.yo-action-bar { .yo-action-bar {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: @padding-md; margin-bottom: @padding-md;
&--actions {
&--actions { >.ant-btn,
> .ant-btn, >.ant-btn-group {
> .ant-btn-group { +.ant-btn,
+ .ant-btn, +.ant-btn-group {
+ .ant-btn-group { margin-left: @padding-xs;
margin-left: @padding-xs; }
}
}
} }
}
} }
.ant-table-thead { .ant-table-thead {
th.ant-table-column-has-sorters { th.ant-table-column-has-sorters {
&:hover { &:hover {
background-color: darken(@background-color-base, 5%); background-color: darken(@background-color-base, 5%);
}
} }
}
} }
.ant-table-tbody { .ant-table-tbody {
> tr { >tr {
> td { >td {
transition-property: background, border-bottom-color; transition-property: background, border-bottom-color;
}
} }
}
> tr.ant-table-row:hover { >tr.ant-table-row:hover {
> td { >td {
border-bottom-color: lighten(@primary-color, 30%); border-bottom-color: lighten(@primary-color, 30%);
}
} }
}
} }
.ant-table-small { .ant-table-small {
> .ant-table-content { >.ant-table-content {
> .ant-table-body { >.ant-table-body {
margin: 0; margin: 0;
>table {
> table { >.ant-table-thead {
> .ant-table-thead { >tr {
> tr { >th {
> th { background-color: @table-selected-row-bg;
background-color: @table-selected-row-bg;
}
}
}
} }
}
} }
}
} }
}
} }
.ant-table-thead { .ant-table-thead {
> tr { >tr {
> th { >th {
font-weight: bold; font-weight: bold;
}
} }
}
} }
.ant-table-sticky-scroll { .ant-table-sticky-scroll {
display: none; display: none;
} }
.yo-table { .yo-table {
.ant-table { .ant-table {
margin: 0 !important; margin: 0 !important;
}
.border-right-none {
border-right-width: 0 !important;
&:last-child {
border-right-width: 1px !important;
} }
}
.border-right-none() { .ant-table-content {
border-right-width: 0 !important; .ant-table-body {
overflow-x: auto !important;
&:last-child { >table {
border-right-width: 1px !important; >.ant-table-thead {
>tr {
>th {
.border-right-none();
}
}
} }
>.ant-table-tbody {
>tr {
>td {
.border-right-none();
}
}
}
}
} }
.ant-table-fixed-left {
.ant-table-content { .ant-table-thead {
.ant-table-body { >tr {
overflow-x: auto !important; >th {
border-right-width: 0 !important;
> table { }
> .ant-table-thead {
> tr {
> th {
.border-right-none();
}
}
}
> .ant-table-tbody {
> tr {
> td {
.border-right-none();
}
}
}
}
} }
}
.ant-table-fixed-left { .ant-table-tbody {
.ant-table-thead { >tr {
> tr { >td {
> th { border-right-width: 0 !important;
border-right-width: 0 !important; }
}
}
}
.ant-table-tbody {
> tr {
> td {
border-right-width: 0 !important;
}
}
}
}
.ant-table-fixed-right {
.ant-table-fixed {
border-left-width: 0 !important;
}
.ant-table-thead {
> tr {
> th {
.border-right-none();
}
}
}
.ant-table-tbody {
> tr {
> td {
.border-right-none();
}
}
}
} }
}
} }
.ant-table-fixed-right {
.ant-table-fixed {
border-left-width: 0 !important;
}
.ant-table-thead {
>tr {
>th {
.border-right-none();
}
}
}
.ant-table-tbody {
>tr {
>td {
.border-right-none();
}
}
}
}
}
.ant-table-bordered { .ant-table-bordered {
>.ant-table-container { >.ant-table-container {
border-top: @border-width-base @border-style-base @table-border-color; border-top: @border-width-base @border-style-base @table-border-color;
} }
} }
&--row-no { &--row-no {
background-color: @table-header-bg; background-color: @table-header-bg;
} }
} }
.yo-table-actions { .yo-table-actions {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
&--inner {
display: flex;
align-items: center;
&--inner { height: 18px;
display: flex; }
align-items: center;
height: 18px;
}
} }
.yo-table--column-setting { .yo-table--column-setting {
width: 240px; width: 240px;
.ant-dropdown-menu-item {
display: flex;
align-items: center;
justify-content: space-between;
}
.anticon-pushpin {
transition: @animation-duration-slow;
transform: rotate(45deg);
.ant-dropdown-menu-item { color: darken(@white, 40%);
display: flex; }
justify-content: space-between; .yo-table--fixed {
align-items: center; transform: rotate(-45deg);
} }
.anticon-pushpin {
color: darken(@white, 40%);
transition: @animation-duration-slow;
transform: rotate(45deg);
}
.yo-table--fixed {
transform: rotate(-45deg);
}
} }
.yo-menu-table {
.ant-table {
.ant-table-expand-icon-col {
width: 28px;
}
.ant-table-row-expand-icon-cell {
z-index: 1;
.yo-inner-table { padding-right: 0 !important;
.ant-table {
.ant-table-tbody { border-right: none !important;
> .ant-table-expanded-row-level-1 > td { +.ant-table-cell {
padding: 0; padding-left: 0;
border-right: none !important; }
.ant-table-wrapper { }
border: none; .ant-table-tbody {
.ant-table { >.ant-table-expanded-row-level-1>td {
margin: 0 !important; padding: 0;
}
.ant-table-container { border-right: none !important;
border: none; .ant-table-wrapper {
.ant-table-cell:first-child { border: none;
padding-left: 25px; .ant-table {
} margin: 0 !important;
.ant-table-expanded-row-level-1 > td { }
border-right: @border-width-base @border-style-base @table-border-color !important; .ant-table-container {
padding: @padding-sm @padding-xs @padding-sm @padding-xl; border: none;
} .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 {
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 { .flex {
display: 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; 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 { loading, dataSource, type } = this.state
const { query, operator, columns } = this.props const { query, operator, columns, expandable, expandedRowRender } = this.props
const attrs = {} const attrs = {}
Object.keys(this.props).forEach(key => { Object.keys(this.props).forEach(key => {
@@ -292,7 +292,7 @@ export default class QueryTable extends Component {
dataSource, dataSource,
columns: (() => { columns: (() => {
const c = [] const c = []
if (type !== 'tree' && rowNumber) { if (type !== 'tree' && rowNumber & !expandable & !expandedRowRender) {
c.push(rowNoColumn) c.push(rowNoColumn)
} }
c.push(...(columns || [])) c.push(...(columns || []))

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

@@ -1,5 +1,5 @@
import React, { Component } from 'react' 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 { isEqual } from 'lodash'
import { AntIcon, Auth, Container, ModalForm, QueryTable, QueryTableActions } from 'components' import { AntIcon, Auth, Container, ModalForm, QueryTable, QueryTableActions } from 'components'
import { api } from 'common/api' import { api } from 'common/api'
@@ -58,13 +58,6 @@ export default class index extends Component {
title: '前端组件', title: '前端组件',
width: 220, width: 220,
dataIndex: 'component', dataIndex: 'component',
ellipsis: true,
},
{
title: '权限标识',
width: 220,
dataIndex: 'permission',
ellipsis: true,
}, },
{ {
title: '排序', title: '排序',
@@ -85,17 +78,10 @@ export default class index extends Component {
if (flag) { if (flag) {
this.columns.push({ this.columns.push({
title: '操作', title: '操作',
width: 150, width: 220,
dataIndex: 'actions', dataIndex: 'actions',
render: (text, record) => ( render: (text, record) => (
<QueryTableActions> <QueryTableActions>
{record.type < 2 && (
<Auth auth="sysMenu:add">
<a onClick={() => this.onOpen(this.addForm, record, true)}>
新增子菜单
</a>
</Auth>
)}
<Auth auth="sysMenu:edit"> <Auth auth="sysMenu:edit">
<a onClick={() => this.onOpen(this.editForm, record)}>编辑</a> <a onClick={() => this.onOpen(this.editForm, record)}>编辑</a>
</Auth> </Auth>
@@ -108,6 +94,13 @@ export default class index extends Component {
<a>删除</a> <a>删除</a>
</Popconfirm> </Popconfirm>
</Auth> </Auth>
{record.type < 2 && (
<Auth auth="sysMenu:add">
<a onClick={() => this.onOpen(this.addForm, record, true)}>
{record.type == 0 ? '新增子菜单' : '新增功能'}
</a>
</Auth>
)}
</QueryTableActions> </QueryTableActions>
), ),
}) })
@@ -156,27 +149,8 @@ export default class index extends Component {
...params, ...params,
...query, ...query,
}) })
return this.onfilterdata(data)
//return data
}
onfilterdata(data) {
this.findlastChildren(data)
return 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), '删除成功') this.onAction(apiAction.delete(record), '删除成功')
} }
//#region 自定义方法
/** /**
* 绘制新的扩展行 * 绘制新的扩展行
* @param {*} record * @param {*} record
*/ */
onRowRender(record) { onRowRender(record) {
var arr = [] const grids = []
var istag = false let isFunction = false
record.children.map(s => { record.children.map(item => {
if (!s.rowExpandable && s.type == 2) { if (!(item.children && item.children.length) && item.type == 2) {
istag = true isFunction = true
var temp = ( const grid = (
<Tag color="#87d068" key={s.id}> <Card.Grid key={item.id}>
{s.name} |{' '} <p>
<Auth auth="sysMenu:edit"> {item.visibleParent && (
<a onClick={() => this.onOpen(this.editForm, s)}>编辑</a> <Tooltip placement="top" title="选中此项才会显示菜单">
</Auth>{' '} <AntIcon
|{' '} type="eye"
<Auth auth="sysMenu:delete"> style={{ color: '#1890ff' }}
<Popconfirm className="mr-xxs"
placement="topRight" />
title="是否确认删除" </Tooltip>
onConfirm={() => this.onDelete(s)} )}
> <b>{item.name}</b>
<a>删除</a> </p>
</Popconfirm> <span className="block ellipsis text-gray">{item.permission}</span>
</Auth> <div className="text-right">
</Tag> <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) grids.push(grid)
} else if (s.rowExpandable || (!s.rowExpandable && s.type == 1)) { } else if (
arr.push(s) (item.children && item.children.length) ||
(!(item.children && item.children.length) && item.type == 1)
) {
grids.push(item)
} }
}) })
if (istag) { if (isFunction) {
return arr 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 { } else {
return ( return (
<Table <Table
columns={this.columns} columns={this.columns}
showHeader={false} showHeader={false}
dataSource={arr} dataSource={grids}
rowKey={record => record.id} rowKey={record => record.id}
expandable={{ expandable={{
expandedRowRender: record => this.onRowRender(record), expandedRowRender: record => this.onRowRender(record),
rowExpandable: record => record.rowExpandable === true, rowExpandable: record => record.children && record.children.length,
}} }}
childrenColumnName="11" childrenColumnName="none"
bordered={true} bordered={true}
pagination={false} pagination={false}
/> />
) )
} }
} }
//#region 自定义方法
async onSetDefault(record) {
this.onAction(apiAction.setDefault(record), '设置成功')
}
//#endregion //#endregion
render() { render() {
@@ -306,15 +317,15 @@ export default class index extends Component {
<br /> <br />
<Card bordered={false}> <Card bordered={false}>
<QueryTable <QueryTable
className="yo-inner-table" className="yo-menu-table"
childrenColumnName="111" childrenColumnName="none"
ref={this.table} ref={this.table}
autoLoad={false} autoLoad={false}
loadData={this.loadData} loadData={this.loadData}
columns={this.columns} columns={this.columns}
expandable={{ expandable={{
expandedRowRender: record => this.onRowRender(record), expandedRowRender: record => this.onRowRender(record),
rowExpandable: record => record.rowExpandable === true, rowExpandable: record => record.children && record.children.length,
}} }}
operator={ operator={
<Auth auth="sysMenu:add"> <Auth auth="sysMenu:add">