From a828a62d209e87fa50e5a42f0fdbc8535a4a7ca7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=87=AA=E5=B8=A6=E5=A4=A7=E4=BD=AC=E6=B0=94=E5=9C=BA?= <188633308@qq.com> Date: Thu, 24 Jun 2021 15:49:20 +0800 Subject: [PATCH] =?UTF-8?q?update=20=E8=8F=9C=E5=8D=95=E5=8A=9F=E8=83=BD?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web-react/src/assets/style/lib/table.less | 339 +++++++++--------- .../src/assets/style/lib/visibility.less | 6 + web-react/src/assets/style/public.less | 9 + .../src/components/query-table/index.jsx | 4 +- web-react/src/pages/system/menu/index.jsx | 157 ++++---- 5 files changed, 272 insertions(+), 243 deletions(-) diff --git a/web-react/src/assets/style/lib/table.less b/web-react/src/assets/style/lib/table.less index 0e748c7..2e3d24e 100644 --- a/web-react/src/assets/style/lib/table.less +++ b/web-react/src/assets/style/lib/table.less @@ -1,5 +1,4 @@ @import (reference) '../extend.less'; - .yo-query-bar { margin-bottom: @padding-xs; .ant-form-inline { @@ -8,220 +7,224 @@ } } } - .yo-action-bar { - display: flex; - justify-content: space-between; + display: flex; + justify-content: space-between; - margin-bottom: @padding-md; - - &--actions { - > .ant-btn, - > .ant-btn-group { - + .ant-btn, - + .ant-btn-group { - margin-left: @padding-xs; - } - } + margin-bottom: @padding-md; + &--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; - - > table { - > .ant-table-thead { - > tr { - > th { - background-color: @table-selected-row-bg; - } - } - } + >.ant-table-content { + >.ant-table-body { + margin: 0; + >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; } + } } - .ant-table-sticky-scroll { display: none; } - .yo-table { - .ant-table { - margin: 0 !important; + .ant-table { + margin: 0 !important; + } + .border-right-none { + border-right-width: 0 !important; + &:last-child { + border-right-width: 1px !important; } - - .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 { + .border-right-none(); + } + } } + >.ant-table-tbody { + >tr { + >td { + .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-fixed-left { + .ant-table-thead { + >tr { + >th { + border-right-width: 0 !important; + } } - - .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-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; } } - &--row-no { background-color: @table-header-bg; } } - .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; + align-items: center; + justify-content: space-between; + } + .anticon-pushpin { + transition: @animation-duration-slow; + transform: rotate(45deg); - .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); - } - - .yo-table--fixed { - transform: rotate(-45deg); - } + color: darken(@white, 40%); + } + .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 { - .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; - } - } - } + 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; + .ant-table { + margin: 0 !important; + } + .ant-table-container { + 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; + } + } + } + } } + } } + } } diff --git a/web-react/src/assets/style/lib/visibility.less b/web-react/src/assets/style/lib/visibility.less index 85c9124..a782155 100644 --- a/web-react/src/assets/style/lib/visibility.less +++ b/web-react/src/assets/style/lib/visibility.less @@ -20,3 +20,9 @@ .flex { display: flex; } +.ellipsis { + overflow: hidden; + + white-space: nowrap; + text-overflow: ellipsis; +} diff --git a/web-react/src/assets/style/public.less b/web-react/src/assets/style/public.less index d935b12..7714511 100644 --- a/web-react/src/assets/style/public.less +++ b/web-react/src/assets/style/public.less @@ -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; + } +} diff --git a/web-react/src/components/query-table/index.jsx b/web-react/src/components/query-table/index.jsx index d0028bf..62dc0bd 100644 --- a/web-react/src/components/query-table/index.jsx +++ b/web-react/src/components/query-table/index.jsx @@ -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 || [])) diff --git a/web-react/src/pages/system/menu/index.jsx b/web-react/src/pages/system/menu/index.jsx index c4f44d8..27eaaf9 100644 --- a/web-react/src/pages/system/menu/index.jsx +++ b/web-react/src/pages/system/menu/index.jsx @@ -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) => ( - {record.type < 2 && ( - - this.onOpen(this.addForm, record, true)}> - 新增子菜单 - - - )} this.onOpen(this.editForm, record)}>编辑 @@ -108,6 +94,13 @@ export default class index extends Component { 删除 + {record.type < 2 && ( + + this.onOpen(this.addForm, record, true)}> + {record.type == 0 ? '新增子菜单' : '新增功能'} + + + )} ), }) @@ -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 = ( - - {s.name} |{' '} - - this.onOpen(this.editForm, s)}>编辑 - {' '} - |{' '} - - this.onDelete(s)} - > - 删除 - - - + const grids = [] + let isFunction = false + record.children.map(item => { + if (!(item.children && item.children.length) && item.type == 2) { + isFunction = true + const grid = ( + +

+ {item.visibleParent && ( + + + + )} + {item.name} +

+ {item.permission} +
+ + + + this.onOpen(this.editForm, item)} + > + + + + + + this.onDelete(item)} + > + + + + + + + + +
+ ) - 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( + this.onOpen(this.addForm, record, true)} + > +
+ +
+ 新增功能 + + ) + return {grids} } else { return ( 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 {
this.onRowRender(record), - rowExpandable: record => record.rowExpandable === true, + rowExpandable: record => record.children && record.children.length, }} operator={