mirror of
https://gitee.com/js-yhsec/energy_storage.git
synced 2026-05-27 18:59:26 +08:00
场站+服务管理功能开发，角色权限完善，总览弹窗接口联调
This commit is contained in:
ym1026
528
web/src/components/TreeTable.vue
Normal file
528
web/src/components/TreeTable.vue
Normal file
@@ -0,0 +1,528 @@
|
||||
<template>
|
||||
<div class="treetable" ref="treetable">
|
||||
<a-table
|
||||
bordered
|
||||
:loading="loading"
|
||||
:scroll="tableOption.scroll"
|
||||
:columns="columns"
|
||||
:data-source="tableData"
|
||||
:pagination="false"
|
||||
:row-class-name="(record, index) => rowClassName(record, index)"
|
||||
row-key="id"
|
||||
size="middle"
|
||||
:row-selection="rowSelection"
|
||||
:indent-size="30"
|
||||
:check-strictly="false"
|
||||
@resizeColumn="handleResizeColumn"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.scopedSlots">
|
||||
<slot
|
||||
v-bind="record"
|
||||
:name="column.scopedSlots ? column.scopedSlots.customRender : ''"
|
||||
></slot>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
props: {
|
||||
columns: { type: Array },
|
||||
tableData: { type: Array },
|
||||
tableOption: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
loading: false,
|
||||
page: true,
|
||||
align: 'center',
|
||||
expand: true,
|
||||
select: true
|
||||
// scroll: { y: 600 },
|
||||
}
|
||||
}
|
||||
},
|
||||
paginationOption: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
pageSizeOptions: ['10', '20', '30'],
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 1
|
||||
}
|
||||
}
|
||||
},
|
||||
selectField: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
|
||||
rowClick: {
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
newPaginationOption: {},
|
||||
newColumns: [],
|
||||
defPageOpt: {
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 1
|
||||
},
|
||||
newPageOptions: {},
|
||||
selectedRowKeys: [],
|
||||
realColumns: [],
|
||||
realTableData: [],
|
||||
selectedRows: {},
|
||||
defaultTabOpt: {
|
||||
page: true,
|
||||
align: 'center',
|
||||
expand: false,
|
||||
select: true
|
||||
},
|
||||
newTableOpt: {},
|
||||
pageSizeOptions: ['10', '20', '30'],
|
||||
scroll: { y: 100 }
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
rowSelection() {
|
||||
const { selectedRowKeys } = this
|
||||
return {
|
||||
checkStrictly: this.tableOption.checkStrictly,
|
||||
selectedRowKeys,
|
||||
type: this.tableOption.type,
|
||||
onChange: (selectedRowKeys, selectedRows) => {
|
||||
this.onSelectChange(selectedRowKeys, selectedRows)
|
||||
},
|
||||
hideDefaultSelections: true,
|
||||
onSelect: (record, selected) => {
|
||||
this.onSelect(record, selected)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selectField: {
|
||||
handler(n, o) {
|
||||
this.handlerTableData(n)
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
paginationOption: {
|
||||
handler(n, o) {
|
||||
this.defPageOpt = { ...this.defPageOpt, ...n }
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
},
|
||||
tableOption: {
|
||||
handler(n, o) {
|
||||
this.newTableOpt = { ...this.defaultTabOpt, ...n }
|
||||
if (n.selectTableData && n.selectTableData.length > 0) {
|
||||
this.selectedRowKeys = n.selectTableData
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.scroll.y = this.$refs.treetable.offsetHeight - 70
|
||||
},
|
||||
methods: {
|
||||
handleResizeColumn(w, col) {
|
||||
col.width = w
|
||||
},
|
||||
|
||||
onSelectChange(selectedRowKeys, selectedRows) {
|
||||
this.selectedRowKeys = selectedRowKeys
|
||||
this.selectedRows = selectedRows[selectedRows.length - 1]
|
||||
this.$emit('getSelectedIds', selectedRowKeys)
|
||||
},
|
||||
onSelect(record, selected) {
|
||||
const selectrows = [record.id]
|
||||
// record.hasOwnProperty("children") &&
|
||||
if (record.children && record.children.length) {
|
||||
const generator = (record) => {
|
||||
record.forEach((item) => {
|
||||
selectrows.push(item.id)
|
||||
if (item.children && item.children.length > 0) {
|
||||
generator(item.children)
|
||||
}
|
||||
})
|
||||
}
|
||||
generator(record.children)
|
||||
}
|
||||
const newselect = this.selectedRowKeys.filter((item) => !selectrows.includes(item))
|
||||
|
||||
selected
|
||||
? (this.selectedRowKeys = Array.from(new Set([...this.selectedRowKeys, ...selectrows])))
|
||||
: (this.selectedRowKeys = newselect)
|
||||
},
|
||||
|
||||
handlerTableData(n) {
|
||||
if (n.length == 0) {
|
||||
this.newColumns = this.columns
|
||||
} else {
|
||||
this.newColumns = []
|
||||
this.selectField.forEach((i) => {
|
||||
this.columns.forEach((e) => {
|
||||
if (i == e.dataIndex) {
|
||||
this.newColumns.push(e)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
rowClassName(record, index) {
|
||||
return 'table-row'
|
||||
},
|
||||
// expandIcon(props) {
|
||||
// // if (props.record.descriptions) {
|
||||
// // if (props.expanded) {
|
||||
// // return (
|
||||
// // <a
|
||||
// // style="color: 'black',margin-right:0px"
|
||||
// // onClick={(e) => {
|
||||
// // props.onExpand(props.record, e)
|
||||
// // }}
|
||||
// // >
|
||||
// // <DownOutlined />{' '}
|
||||
// // </a>
|
||||
// // )
|
||||
// // } else {
|
||||
// // return (
|
||||
// // <span
|
||||
// // style="color: 'black' ,margin-right:0px"
|
||||
// // onClick={(e) => {
|
||||
// // props.onExpand(props.record, e)
|
||||
// // }}
|
||||
// // >
|
||||
// // <a-icon type="right" />
|
||||
// // </span>
|
||||
// // )
|
||||
// // }
|
||||
// // } else {
|
||||
// // return null
|
||||
// // }
|
||||
// },
|
||||
onSizeChange(current, pageSize) {
|
||||
this.defPageOpt.pageSize = pageSize
|
||||
this.defPageOpt.current = 1
|
||||
this.$emit('handlePagesizeChange', this.defPageOpt)
|
||||
},
|
||||
onChange(pageNumber) {
|
||||
this.defPageOpt.current = pageNumber
|
||||
this.$emit('handlePagesizeChange', this.defPageOpt)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.ant-table-body) {
|
||||
.ant-table-cell {
|
||||
background: var(--theme-bg) !important;
|
||||
}
|
||||
.ant-table-row-selected {
|
||||
td {
|
||||
background-color: var(--table-select) !important;
|
||||
}
|
||||
}
|
||||
.ant-table-cell-fix-right.ant-table-cell-fix-right-first,
|
||||
.ant-table-cell-fix-left {
|
||||
box-shadow: none !important;
|
||||
padding: 8px !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
.ant-table-row-expand-icon.ant-table-row-expand-icon-collapsed,
|
||||
.ant-table-row-expand-icon.ant-table-row-expand-icon-expanded {
|
||||
background-color: var(--table-header-bg) !important;
|
||||
}
|
||||
}
|
||||
.treetable {
|
||||
background-color: var(--theme-bg-default);
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 10px;
|
||||
// margin-bottom: 10px;
|
||||
min-width: 420px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
:deep(.ant-table) {
|
||||
border-radius:20px 20px 0 0 !important;
|
||||
overflow: hidden; /* 确保圆角生效 */
|
||||
}
|
||||
:deep(.ant-table-wrapper .ant-table.ant-table-bordered >.ant-table-container){
|
||||
border-inline-start:none!important;
|
||||
}
|
||||
:deep(.ant-table-wrapper .ant-table-cell){
|
||||
background:none!important;
|
||||
}
|
||||
:deep(.ant-table-thead ){
|
||||
background: linear-gradient(0deg, rgba(61, 254, 250, 0.2), rgba(61, 254, 250, 0.2)),
|
||||
linear-gradient(
|
||||
90deg,
|
||||
rgba(61, 254, 250, 0) 0%,
|
||||
rgba(0, 255, 251, 0.15) 50.17%,
|
||||
rgba(61, 254, 250, 0) 100%
|
||||
)!important;
|
||||
}
|
||||
:deep(.ant-table-thead > tr > th) {
|
||||
border-inline: 1px solid transparent !important;
|
||||
background: transparent;
|
||||
color: #fff !important;
|
||||
border-bottom: none !important; /* 可选：去除底部边框 */
|
||||
}
|
||||
|
||||
:deep(.ant-pagination) {
|
||||
.ant-pagination-item-link {
|
||||
color: #fff !important;
|
||||
height: 100% !important;
|
||||
display: block !important;
|
||||
}
|
||||
.ant-pagination-prev,
|
||||
.ant-pagination-next {
|
||||
background: transparent !important;
|
||||
color: #fff !important;
|
||||
border: 1px solid $page-border;
|
||||
button {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.ant-select-selector {
|
||||
border: none !important;
|
||||
}
|
||||
.ant-select-arrow {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
span.ant-input-affix-wrapper,
|
||||
.ant-select,
|
||||
.ant-picker {
|
||||
width: 110px !important;
|
||||
}
|
||||
.ant-select-selection-item {
|
||||
color: #fff !important;
|
||||
border: 1px solid $page-border;
|
||||
}
|
||||
.ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.ant-pagination-total-text,
|
||||
.ant-pagination-options-quick-jumper {
|
||||
color: #fff !important;
|
||||
margin-inline-end: 9px !important;
|
||||
}
|
||||
.ant-pagination-options-quick-jumper input {
|
||||
background-color: transparent !important;
|
||||
// border: none !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
.ant-pagination-options .ant-pagination-options-size-changer .ant-select-selector {
|
||||
padding: 0px !important;
|
||||
color: #fff !important;
|
||||
background-color: transparent !important;
|
||||
|
||||
.ant-select-selection-item {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
.ant-select-dropdown {
|
||||
top: -210px !important;
|
||||
}
|
||||
.ant-pagination-item {
|
||||
&:not(.ant-pagination-item-active):hover {
|
||||
background: #1c797a !important;
|
||||
}
|
||||
a {
|
||||
color: #fff;
|
||||
border-radius: 2px;
|
||||
background: #1c797a !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-pagination-item-active {
|
||||
border: 1px solid transparent;
|
||||
color: #fff;
|
||||
background: #1c797a !important;
|
||||
}
|
||||
}
|
||||
:deep(
|
||||
.ant-table-wrapper
|
||||
.ant-table.ant-table-bordered
|
||||
> .ant-table-container
|
||||
> .ant-table-header
|
||||
> table
|
||||
) {
|
||||
border-top: none !important;
|
||||
border-inline-start: none !important;
|
||||
}
|
||||
:deep(.ant-checkbox-checked .ant-checkbox-inner) {
|
||||
background-color: var(--table-header-bg) !important;
|
||||
border: none !important;
|
||||
}
|
||||
:deep(.ant-checkbox-indeterminate .ant-checkbox-inner:after) {
|
||||
background-color: var(--table-header-bg) !important;
|
||||
}
|
||||
:deep(
|
||||
.ant-table.ant-table-bordered
|
||||
> .ant-table-container
|
||||
> .ant-table-header
|
||||
> table
|
||||
> thead
|
||||
> tr
|
||||
> th
|
||||
) {
|
||||
&:nth-last-child(2) {
|
||||
border-inline-end: 1px solid var(--table-header-bg) !important;
|
||||
// left: 1px !important;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-table-wrapper .ant-table.ant-table-bordered > .ant-table-container) {
|
||||
// tr>th:nth-last-child(){
|
||||
border-inline-start: none !important;
|
||||
// }
|
||||
}
|
||||
:deep(.ant-table-wrapper) {
|
||||
.ant-table-cell-scrollbar,
|
||||
.ant-table.ant-table-bordered > .ant-table-container {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
// .ant-table {
|
||||
// background-color: var(--theme-bg) !important;
|
||||
// }
|
||||
}
|
||||
|
||||
::v-deep .ant-table-thead > tr > th {
|
||||
border-inline-end: 1.5px solid var(--theme-bg) !important;
|
||||
background: var(--table-header-bg);
|
||||
color: var(--theme-text-default);
|
||||
border-bottom: none;
|
||||
&:last-child {
|
||||
border-inline-end: 1.5px solid var(--table-header-bg) !important;
|
||||
}
|
||||
&:nth-last-child(2) {
|
||||
border-inline-end: 1.5px solid var(--table-header-bg) !important;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-table-container > .ant-table-content > table) {
|
||||
border-inline-start: 1px solid var(--theme-bg) !important;
|
||||
}
|
||||
:deep(.ant-pagination-item-link) {
|
||||
color: var(--theme-text-default) !important;
|
||||
|
||||
height: 100% !important;
|
||||
display: block !important;
|
||||
// border: none !important;
|
||||
}
|
||||
:deep(.ant-table-wrapper .ant-table.ant-table-bordered >.ant-table-container >.ant-table-content >table){
|
||||
border-top:none;
|
||||
}
|
||||
:deep(.ant-table-tbody) {
|
||||
color: #fff!important;
|
||||
> tr {
|
||||
&:hover {
|
||||
> td {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
td {
|
||||
border: 1px solid transparent !important; /* 第一行单元格边框为红色 */
|
||||
}
|
||||
}
|
||||
td.ant-table-cell.ant-table-cell-row-hover {
|
||||
// background-color: var(--theme-bg) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 10px;
|
||||
|
||||
min-width: 420px;
|
||||
.total {
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .ant-table-thead > tr > th {
|
||||
border-inline-end: 1px solid var(--theme-bg) !important;
|
||||
background: var(--table-header-bg);
|
||||
color: var(--theme-text-default);
|
||||
border-bottom: none;
|
||||
&:last-child {
|
||||
border-inline-end: 1px solid var(--table-header-bg) !important;
|
||||
}
|
||||
&:nth-last-child(2) {
|
||||
border-inline-end: 1px solid var(--table-header-bg) !important;
|
||||
}
|
||||
}
|
||||
:deep(.ant-table-wrapper .ant-table.ant-table-bordered >.ant-table-container >.ant-table-body >table >tbody>tr>td){
|
||||
border-inline-end: none!important;
|
||||
}
|
||||
:deep(.ant-table-thead) {
|
||||
background: var(--table-header-bg);
|
||||
}
|
||||
|
||||
:deep(.ant-table-tbody) {
|
||||
> tr {
|
||||
&:hover {
|
||||
> .ant-table-cell {
|
||||
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-table-wrapper) {
|
||||
.ant-table-cell-scrollbar,
|
||||
.ant-table.ant-table-bordered > .ant-table-container {
|
||||
box-shadow: none !important;
|
||||
|
||||
&>.ant-table-body >table >tbody>tr>td{
|
||||
border-bottom: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-table-wrapper .ant-table) {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
:deep(.ant-table-wrapper .ant-table-thead th.ant-table-column-has-sorters:hover) {
|
||||
background: var(--table-select) !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user