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

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

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

178
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, 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 { 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'
@@ -13,19 +13,18 @@ const apiAction = {
page: api.getMenuList, page: api.getMenuList,
add: api.sysMenuAdd, add: api.sysMenuAdd,
edit: api.sysMenuEdit, edit: api.sysMenuEdit,
delete: api.sysMenuDelete delete: api.sysMenuDelete,
} }
// 用于弹窗标题 // 用于弹窗标题
const name = '菜单' const name = '菜单'
export default class index extends Component { export default class index extends Component {
state = { state = {
codes: { codes: {
menuType: [], menuType: [],
menuWeight: [] menuWeight: [],
} },
} }
// 表格实例 // 表格实例
@@ -53,7 +52,7 @@ export default class index extends Component {
title: '图标', title: '图标',
width: 100, width: 100,
dataIndex: 'icon', dataIndex: 'icon',
render: text => text && <AntIcon type={text} /> render: text => text && <AntIcon type={text} />,
}, },
{ {
title: '前端组件', title: '前端组件',
@@ -71,7 +70,7 @@ export default class index extends Component {
title: '排序', title: '排序',
width: 100, width: 100,
dataIndex: 'sort', dataIndex: 'sort',
} },
] ]
/** /**
@@ -88,26 +87,29 @@ export default class index extends Component {
title: '操作', title: '操作',
width: 150, width: 150,
dataIndex: 'actions', dataIndex: 'actions',
render: (text, record) => (<QueryTableActions> render: (text, record) => (
{ <QueryTableActions>
record.type < 2 && {record.type < 2 && (
<Auth auth="sysMenu:add"> <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> </Auth>
} <Auth auth="sysMenu:delete">
<Auth auth="sysMenu:edit"> <Popconfirm
<a onClick={() => this.onOpen(this.editForm, record)}>编辑</a> placement="topRight"
</Auth> title="是否确认删除"
<Auth auth="sysMenu:delete"> onConfirm={() => this.onDelete(record)}
<Popconfirm >
placement="topRight" <a>删除</a>
title="是否确认删除" </Popconfirm>
onConfirm={() => this.onDelete(record)} </Auth>
> </QueryTableActions>
<a>删除</a> ),
</Popconfirm>
</Auth>
</QueryTableActions>)
}) })
} }
} }
@@ -131,11 +133,14 @@ export default class index extends Component {
componentDidMount() { componentDidMount() {
this.table.current.onLoading() this.table.current.onLoading()
getDictData('menu_type', 'menu_weight').then(res => { getDictData('menu_type', 'menu_weight').then(res => {
this.setState({ this.setState(
codes: res {
}, () => { codes: res,
this.table.current.onLoadData() },
}) () => {
this.table.current.onLoadData()
}
)
}) })
} }
@@ -151,8 +156,27 @@ 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)
}
})
}
/** /**
* 绑定字典数据 * 绑定字典数据
@@ -164,7 +188,7 @@ export default class index extends Component {
name = toCamelCase(name) name = toCamelCase(name)
const codes = this.state.codes[name] const codes = this.state.codes[name]
if (codes) { if (codes) {
const c = codes.find((p) => p.code === code) const c = codes.find(p => p.code === code)
if (c) { if (c) {
return c.value return c.value
} }
@@ -178,13 +202,15 @@ export default class index extends Component {
* @param {*} record * @param {*} record
*/ */
onOpen(modal, record, isParent = false) { onOpen(modal, record, isParent = false) {
const params = isParent ? { const params = isParent
parent: record, ? {
isParent parent: record,
} : { isParent,
record, }
isParent : {
} record,
isParent,
}
modal.current.open(params) modal.current.open(params)
} }
@@ -211,18 +237,66 @@ export default class index extends Component {
* @param {*} record * @param {*} record
*/ */
onDelete(record) { onDelete(record) {
this.onAction( this.onAction(apiAction.delete(record), '删除成功')
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 自定义方法 //#region 自定义方法
async onSetDefault(record) { async onSetDefault(record) {
this.onAction( this.onAction(apiAction.setDefault(record), '设置成功')
apiAction.setDefault(record),
'设置成功'
)
} }
//#endregion //#endregion
@@ -232,16 +306,24 @@ export default class index extends Component {
<br /> <br />
<Card bordered={false}> <Card bordered={false}>
<QueryTable <QueryTable
className="yo-inner-table"
childrenColumnName="111"
ref={this.table} ref={this.table}
autoLoad={false} autoLoad={false}
loadData={this.loadData} loadData={this.loadData}
columns={this.columns} columns={this.columns}
expandable={{
expandedRowRender: record => this.onRowRender(record),
rowExpandable: record => record.rowExpandable === true,
}}
operator={ operator={
<Auth auth="sysMenu:add"> <Auth auth="sysMenu:add">
<Button <Button
icon={<AntIcon type="plus" />} icon={<AntIcon type="plus" />}
onClick={() => this.onOpen(this.addForm)} onClick={() => this.onOpen(this.addForm)}
>新增{name}</Button> >
新增{name}
</Button>
</Auth> </Auth>
} }
/> />