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

展开行样式修改

Browse Source
This commit is contained in:
Connor
2021-06-23 18:46:31 +08:00
parent ae85cb9ad3
commit bd5f006fcf
2 changed files with 302 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,190 +1,214 @@
@import (reference) '../extend.less';
.yo-query-bar {
margin-bottom: @padding-md;
margin-bottom: @padding-md;
}
.yo-action-bar {
display: flex;
justify-content: space-between;
display: flex;
justify-content: space-between;
margin-bottom: @padding-md;
margin-bottom: @padding-md;
&--actions {
>.ant-btn,
>.ant-btn-group {
+.ant-btn,
+.ant-btn-group {
margin-left: @padding-xs;
}
&--actions {
> .ant-btn,
> .ant-btn-group {
+ .ant-btn,
+ .ant-btn-group {
margin-left: @padding-xs;
}
}
}
}
}
.ant-table-thead {
th.ant-table-column-has-sorters {
&:hover {
background-color: darken(@background-color-base, 5%);
th.ant-table-column-has-sorters {
&:hover {
background-color: darken(@background-color-base, 5%);
}
}
}
}
.ant-table-tbody {
>tr {
>td {
transition-property: background, border-bottom-color;
> tr {
> td {
transition-property: background, border-bottom-color;
}
}
}
>tr.ant-table-row:hover {
>td {
border-bottom-color: lighten(@primary-color, 30%);
> tr.ant-table-row:hover {
> td {
border-bottom-color: lighten(@primary-color, 30%);
}
}
}
}
.ant-table-small {
>.ant-table-content {
>.ant-table-body {
margin: 0;
> .ant-table-content {
> .ant-table-body {
margin: 0;
>table {
>.ant-table-thead {
>tr {
>th {
background-color: @table-selected-row-bg;
> table {
> .ant-table-thead {
> tr {
> th {
background-color: @table-selected-row-bg;
}
}
}
}
}
}
}
}
}
}
.ant-table-thead {
>tr {
>th {
font-weight: bold;
> tr {
> th {
font-weight: bold;
}
}
}
}
.yo-table {
.ant-table {
margin: 0 !important;
}
.border-right-none() {
border-right-width: 0 !important;
&:last-child {
border-right-width: 1px !important;
.ant-table {
margin: 0 !important;
}
}
.ant-table-content {
.ant-table-body {
overflow-x: auto !important;
.border-right-none() {
border-right-width: 0 !important;
>table {
>.ant-table-thead {
>tr {
>th {
.border-right-none();
&:last-child {
border-right-width: 1px !important;
}
}
.ant-table-content {
.ant-table-body {
overflow-x: auto !important;
> table {
> .ant-table-thead {
> tr {
> th {
.border-right-none();
}
}
}
> .ant-table-tbody {
> tr {
> td {
.border-right-none();
}
}
}
}
}
}
>.ant-table-tbody {
>tr {
>td {
.border-right-none();
.ant-table-fixed-left {
.ant-table-thead {
> tr {
> th {
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-left {
.ant-table-thead {
>tr {
>th {
border-right-width: 0 !important;
}
.ant-table-bordered {
> .ant-table-container {
border-top: @border-width-base @border-style-base @table-border-color;
}
}
.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-bordered {
>.ant-table-container {
border-top: @border-width-base @border-style-base @table-border-color;
}
}
}
.yo-table-actions {
display: inline-block;
display: inline-block;
vertical-align: middle;
vertical-align: middle;
&--inner {
display: flex;
align-items: center;
&--inner {
display: flex;
align-items: center;
height: 18px;
}
height: 18px;
}
}
.yo-table--column-setting {
width: 240px;
width: 240px;
.ant-dropdown-menu-item {
display: flex;
justify-content: space-between;
align-items: center;
}
.ant-dropdown-menu-item {
display: flex;
justify-content: space-between;
align-items: center;
}
.anticon-pushpin {
color: darken(@white, 40%);
transition: @animation-duration-slow;
transform: rotate(45deg);
}
.anticon-pushpin {
color: darken(@white, 40%);
transition: @animation-duration-slow;
transform: rotate(45deg);
}
.yo-table--fixed {
transform: rotate(-45deg);
}
}
.yo-table--fixed {
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;
}
}
}
}
}
}
}

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

@@ -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,12 +70,12 @@ export default class index extends Component {
title: '排序',
width: 100,
dataIndex: 'sort',
}
},
]
/**
* 构造函数,在渲染前动态添加操作字段等
* @param {*} props
* @param {*} props
*/
constructor(props) {
super(props)
@@ -88,26 +87,29 @@ export default class index extends Component {
title: '操作',
width: 150,
dataIndex: 'actions',
render: (text, record) => (<QueryTableActions>
{
record.type < 2 &&
<Auth auth="sysMenu:add">
<a onClick={() => this.onOpen(this.addForm, record, true)}>新增子菜单</a>
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>
}
<Auth auth="sysMenu:edit">
<a onClick={() => this.onOpen(this.editForm, record)}>编辑</a>
</Auth>
<Auth auth="sysMenu:delete">
<Popconfirm
placement="topRight"
title="是否确认删除"
onConfirm={() => this.onDelete(record)}
>
<a>删除</a>
</Popconfirm>
</Auth>
</QueryTableActions>)
<Auth auth="sysMenu:delete">
<Popconfirm
placement="topRight"
title="是否确认删除"
onConfirm={() => this.onDelete(record)}
>
<a>删除</a>
</Popconfirm>
</Auth>
</QueryTableActions>
),
})
}
}
@@ -116,9 +118,9 @@ export default class index extends Component {
* 阻止外部组件引发的渲染,提升性能
* 可自行添加渲染条件
* [必要]
* @param {*} props
* @param {*} state
* @returns
* @param {*} props
* @param {*} state
* @returns
*/
shouldComponentUpdate(props, state) {
return !isEqual(this.state, state)
@@ -131,40 +133,62 @@ export default class index extends Component {
componentDidMount() {
this.table.current.onLoading()
getDictData('menu_type', 'menu_weight').then(res => {
this.setState({
codes: res
}, () => {
this.table.current.onLoadData()
})
this.setState(
{
codes: res,
},
() => {
this.table.current.onLoadData()
}
)
})
}
/**
* 调用加载数据接口,可在调用前对query进行处理
* [异步,必要]
* @param {*} params
* @param {*} query
* @returns
* @param {*} params
* @param {*} query
* @returns
*/
loadData = async (params, query) => {
const { data } = await apiAction.page({
...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)
}
})
}
/**
* 绑定字典数据
* @param {*} code
* @param {*} name
* @returns
* @param {*} code
* @param {*} name
* @returns
*/
bindCodeValue(code, name) {
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
}
@@ -174,17 +198,19 @@ export default class index extends Component {
/**
* 打开新增/编辑弹窗
* @param {*} modal
* @param {*} record
* @param {*} modal
* @param {*} record
*/
onOpen(modal, record, isParent = false) {
const params = isParent ? {
parent: record,
isParent
} : {
record,
isParent
}
const params = isParent
? {
parent: record,
isParent,
}
: {
record,
isParent,
}
modal.current.open(params)
}
@@ -192,8 +218,8 @@ export default class index extends Component {
/**
* 对表格上的操作进行统一处理
* [异步]
* @param {*} action
* @param {*} successMessage
* @param {*} action
* @param {*} successMessage
*/
async onAction(action, successMessage) {
this.table.current.onLoading()
@@ -208,21 +234,69 @@ export default class index extends Component {
/**
* 删除
* @param {*} record
* @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>
}
/>