mirror of
https://gitee.com/js-yhsec/energy_storage.git
synced 2026-05-27 18:59:26 +08:00
529 lines
13 KiB
Vue
529 lines
13 KiB
Vue
|
<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>
|