mirror of
https://gitee.com/js-yhsec/energy_storage.git
synced 2026-05-27 18:59:26 +08:00
448 lines
10 KiB
Vue
448 lines
10 KiB
Vue
|
<template>
|
||
|
|
<div class="comtable" >
|
||
|
|
<div class="table" ref="comtable">
|
||
|
|
<a-table
|
||
|
|
bordered
|
||
|
|
:loading="loading"
|
||
|
|
:columns="columns"
|
||
|
|
:scroll="scroll"
|
||
|
|
:data-source="data.realTableData"
|
||
|
|
:pagination="false"
|
||
|
|
:row-class-name="rowClassName"
|
||
|
|
row-key="id"
|
||
|
|
:expand-icon="expandIcon"
|
||
|
|
:row-selection="
|
||
|
|
data.newTableOpt.select
|
||
|
|
? {
|
||
|
|
selectedRowKeys: data.selectedRowKeys,
|
||
|
|
onChange: onSelectChange
|
||
|
|
}
|
||
|
|
: false
|
||
|
|
"
|
||
|
|
:expanded-row-keys="data.newTableOpt.expand?data.expandedKeys:null"
|
||
|
|
size="middle"
|
||
|
|
:indent-size="30"
|
||
|
|
@resizeColumn="handleResizeColumn"
|
||
|
|
>
|
||
|
|
<template #bodyCell="{ column, record }">
|
||
|
|
<template v-if="column.scopedSlots">
|
||
|
|
<slot
|
||
|
|
v-bind="record"
|
||
|
|
:name="column.scopedSlots ? column.scopedSlots.customRender : ''"
|
||
|
|
></slot>
|
||
|
|
</template>
|
||
|
|
</template>
|
||
|
|
<template v-if="data.newTableOpt.expand" #expandedRowRender="{ record }">
|
||
|
|
<a-table
|
||
|
|
size="small"
|
||
|
|
:columns="innerColumns"
|
||
|
|
:data-source="record.currentLimitList"
|
||
|
|
:pagination="false"
|
||
|
|
>
|
||
|
|
<template #bodyCell="{ column, record }">
|
||
|
|
<template v-if="column.key === 'type'">
|
||
|
|
<span>
|
||
|
|
{{ getType(record.type) }}
|
||
|
|
</span>
|
||
|
|
</template>
|
||
|
|
</template>
|
||
|
|
</a-table>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
</a-table>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="pagination" v-if="data.newTableOpt.page">
|
||
|
|
<a-pagination
|
||
|
|
v-model:current="data.newPageOption.current"
|
||
|
|
:total="data.newPageOption.total"
|
||
|
|
:page-size="data.newPageOption.pageSize"
|
||
|
|
@change="onChange"
|
||
|
|
show-size-changer
|
||
|
|
show-quick-jumper
|
||
|
|
:show-total="(total) => `共 ${total} 条`"
|
||
|
|
:page-size-options="data.pageSizeOptions"
|
||
|
|
>
|
||
|
|
</a-pagination>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
|
||
|
|
// <a-select :dropdownMatchSelectWidth="false" size="small" placement="top" />
|
||
|
|
import {
|
||
|
|
nextTick,
|
||
|
|
ref,
|
||
|
|
toRefs,
|
||
|
|
reactive,
|
||
|
|
onMounted,
|
||
|
|
watch,
|
||
|
|
defineProps,
|
||
|
|
defineEmits,
|
||
|
|
defineExpose,
|
||
|
|
} from 'vue'
|
||
|
|
|
||
|
|
const comtable = ref('')
|
||
|
|
const props = defineProps({
|
||
|
|
columns: { type: Array },
|
||
|
|
tableData: { type: Array },
|
||
|
|
tableOption: {
|
||
|
|
type: Object,
|
||
|
|
default: () => {
|
||
|
|
return {
|
||
|
|
loading: false,
|
||
|
|
page: true,
|
||
|
|
align: 'center',
|
||
|
|
expand: false,
|
||
|
|
select: true,
|
||
|
|
scroll: { y: 750 }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
pageOption: {
|
||
|
|
type: Object,
|
||
|
|
default: () => {
|
||
|
|
return {
|
||
|
|
current: 1,
|
||
|
|
pageSize: 10,
|
||
|
|
total: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
selectField: {
|
||
|
|
type: Array,
|
||
|
|
default: () => {
|
||
|
|
return []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
rowClick: {
|
||
|
|
default: () => {}
|
||
|
|
},
|
||
|
|
tableH: {
|
||
|
|
type: Number,
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
})
|
||
|
|
function handleResizeColumn(w, col) {
|
||
|
|
col.width = w
|
||
|
|
}
|
||
|
|
const mountedScroll = () => {
|
||
|
|
data.newColumns = [...props.columns]
|
||
|
|
data.realTableData = [...props.tableData]
|
||
|
|
// tableScoll()
|
||
|
|
}
|
||
|
|
const emit = defineEmits(['handlePagesizeChange'])
|
||
|
|
const data = reactive({
|
||
|
|
expandedKeys: [],
|
||
|
|
newColumns: [],
|
||
|
|
selectedRowKeys: [],
|
||
|
|
realColumns: [],
|
||
|
|
realTableData: [],
|
||
|
|
selectedRows: [],
|
||
|
|
defaultTabOpt: {
|
||
|
|
page: true,
|
||
|
|
align: 'center',
|
||
|
|
expand: false,
|
||
|
|
select: true
|
||
|
|
},
|
||
|
|
|
||
|
|
newPageOption: {},
|
||
|
|
newTableOpt: {},
|
||
|
|
pageSizeOptions: ['15', '20', '30', '40', '50', '100'],
|
||
|
|
mountedScroll
|
||
|
|
})
|
||
|
|
const loading = ref(false)
|
||
|
|
const scroll = ref({})
|
||
|
|
|
||
|
|
onMounted(async() => {
|
||
|
|
data.newColumns = [...props.columns]
|
||
|
|
data.realTableData = [...props.tableData]
|
||
|
|
await nextTick()
|
||
|
|
// console.log(props.tableH, 'props.tableH');
|
||
|
|
|
||
|
|
scroll.value = { y: comtable.value.offsetHeight - 56 }
|
||
|
|
})
|
||
|
|
|
||
|
|
watch(
|
||
|
|
() => props.tableData,
|
||
|
|
(n, o) => {
|
||
|
|
if (n) {
|
||
|
|
data.realTableData = [...n]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{ deep: true, immediate: true }
|
||
|
|
)
|
||
|
|
watch(
|
||
|
|
() => props.pageOption,
|
||
|
|
(n, o) => {
|
||
|
|
data.newPageOption = { ...n }
|
||
|
|
},
|
||
|
|
{ deep: true, immediate: true }
|
||
|
|
)
|
||
|
|
watch(
|
||
|
|
() => props.tableOption,
|
||
|
|
(n, o) => {
|
||
|
|
data.newTableOpt = { ...data.defaultTabOpt, ...n }
|
||
|
|
},
|
||
|
|
{ deep: true, immediate: true }
|
||
|
|
)
|
||
|
|
watch(
|
||
|
|
() => props.tableH,
|
||
|
|
(n, o) => {
|
||
|
|
if (n && n !== o) {
|
||
|
|
const pageH = data.newTableOpt.page ? 42 : 0
|
||
|
|
scroll.value = { y: n - pageH - 56 }
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// { deep: true, immediate: true }
|
||
|
|
)
|
||
|
|
|
||
|
|
function rowClassName(record, index) {
|
||
|
|
return 'table-row'
|
||
|
|
}
|
||
|
|
function expandIcon(props) {}
|
||
|
|
function onChange(page, pageSize) {
|
||
|
|
data.newPageOption.current = page
|
||
|
|
data.newPageOption.pageSize = pageSize
|
||
|
|
emit('handlePagesizeChange', data.newPageOption)
|
||
|
|
}
|
||
|
|
|
||
|
|
function onSelectChange(selectedRowKeys, selectedRows) {
|
||
|
|
data.selectedRowKeys = selectedRowKeys
|
||
|
|
data.selectedRows = selectedRows
|
||
|
|
}
|
||
|
|
defineExpose({ ...toRefs(data), loading, mountedScroll, scroll: data.scroll })
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
@use '../style/color.scss' as *;
|
||
|
|
.comtable {
|
||
|
|
border-radius: 8px;
|
||
|
|
font-size: 14px;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: space-between;
|
||
|
|
.table{
|
||
|
|
flex:1
|
||
|
|
}
|
||
|
|
|
||
|
|
.pagination {
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-end;
|
||
|
|
margin-top: 10px;
|
||
|
|
// margin-bottom: 10px;
|
||
|
|
min-width: 420px;
|
||
|
|
height: 32px;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep .ant-table-thead > tr > th {
|
||
|
|
border-inline: 1px solid var(--theme-bg) !important;
|
||
|
|
background: var(--table-header-bg);
|
||
|
|
color: var(--theme-text-default);
|
||
|
|
border-bottom: none;
|
||
|
|
// &.ant-table-column-has-sorters{
|
||
|
|
// &::hover{
|
||
|
|
// background: var(--table-header-bg) !important;
|
||
|
|
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
&: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;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(
|
||
|
|
.ant-table-wrapper
|
||
|
|
.ant-table.ant-table-bordered
|
||
|
|
> .ant-table-container
|
||
|
|
> .ant-table-header
|
||
|
|
> table
|
||
|
|
) {
|
||
|
|
border-top: 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-pagination) {
|
||
|
|
|
||
|
|
.ant-pagination-prev,
|
||
|
|
.ant-pagination-next {
|
||
|
|
background: var(--theme-bg) !important;
|
||
|
|
color: var(--theme-text-default) !important;
|
||
|
|
}
|
||
|
|
.ant-select-selector {
|
||
|
|
border: none !important;
|
||
|
|
}
|
||
|
|
.ant-select-arrow {
|
||
|
|
color: var(--theme-text-default) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
span.ant-input-affix-wrapper,
|
||
|
|
.ant-select,
|
||
|
|
.ant-picker {
|
||
|
|
width: 110px !important;
|
||
|
|
border-radius: 8px !important;
|
||
|
|
}
|
||
|
|
.ant-select-selection-item {
|
||
|
|
color: var(--theme-text-default) !important;
|
||
|
|
}
|
||
|
|
.ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
|
||
|
|
background-color: var(--theme-bg) !important;
|
||
|
|
border-radius: 8px !important;
|
||
|
|
}
|
||
|
|
.ant-pagination-total-text,
|
||
|
|
.ant-pagination-options-quick-jumper {
|
||
|
|
color: var(--theme-text-default) !important;
|
||
|
|
margin-inline-end: 9px !important;
|
||
|
|
}
|
||
|
|
.ant-pagination-options-quick-jumper input {
|
||
|
|
background-color: var(--theme-bg) !important;
|
||
|
|
border: none !important;
|
||
|
|
color: var(--theme-text-default) !important;
|
||
|
|
}
|
||
|
|
.ant-pagination-options .ant-pagination-options-size-changer .ant-select-selector {
|
||
|
|
color: var(--theme-text-default) !important;
|
||
|
|
background-color: var(--theme-bg) !important;
|
||
|
|
}
|
||
|
|
.ant-select-dropdown {
|
||
|
|
top: -210px !important;
|
||
|
|
}
|
||
|
|
.ant-pagination-item {
|
||
|
|
&:not(.ant-pagination-item-active):hover{
|
||
|
|
background: var(--theme-bg) !important;
|
||
|
|
}
|
||
|
|
a{
|
||
|
|
color: var(--theme-text-default) !important;
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.ant-pagination-item-ellipsis {
|
||
|
|
color: var(--theme-text-default) !important;
|
||
|
|
}
|
||
|
|
.ant-pagination-item-active {
|
||
|
|
border-color: transparent !important;
|
||
|
|
font-size: 16px;
|
||
|
|
background: var(--theme-bg1) !important;
|
||
|
|
a {
|
||
|
|
color: var(--theme-text2) !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;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
//表格样式
|
||
|
|
:deep(.ant-table-tbody) {
|
||
|
|
color: var(--theme-text-default) !important;
|
||
|
|
|
||
|
|
> tr {
|
||
|
|
&:hover {
|
||
|
|
> .ant-table-cell {
|
||
|
|
background-color: var(--table-select) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
td {
|
||
|
|
border: 1px solid var(--theme-bg-default) !important; /* 第一行单元格边框为红色 */
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// td.ant-table-cell.ant-table-cell-row-hover {
|
||
|
|
// // background-color: var(--table-select) !important;
|
||
|
|
// }
|
||
|
|
}
|
||
|
|
:deep(.ant-table-body) {
|
||
|
|
background: var(--theme-bg) !important;
|
||
|
|
.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;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
:deep(.ant-table-wrapper .ant-table.ant-table-bordered > .ant-table-container) {
|
||
|
|
border-inline-start: none !important;
|
||
|
|
|
||
|
|
:deep(.ant-progress .ant-progress-text) {
|
||
|
|
color: var(--theme-text-default) !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
:deep(.ant-table-wrapper) {
|
||
|
|
.ant-table-cell-scrollbar,
|
||
|
|
.ant-table.ant-table-bordered > .ant-table-container {
|
||
|
|
box-shadow: none !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.ant-table-wrapper .ant-table) {
|
||
|
|
background-color: transparent !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(
|
||
|
|
.ant-table-wrapper
|
||
|
|
.ant-table.ant-table-bordered
|
||
|
|
> .ant-table-container
|
||
|
|
> .ant-table-body
|
||
|
|
> table
|
||
|
|
> tbody
|
||
|
|
> tr
|
||
|
|
> .ant-table-cell-fix-right-first::after
|
||
|
|
) {
|
||
|
|
border-inline-end: 1px solid var(--theme-bg) !important;
|
||
|
|
}
|
||
|
|
:deep(
|
||
|
|
.ant-table-wrapper
|
||
|
|
.ant-table.ant-table-bordered
|
||
|
|
> .ant-table-container
|
||
|
|
> .ant-table-header
|
||
|
|
> table
|
||
|
|
> thead
|
||
|
|
> tr
|
||
|
|
> .ant-table-cell-fix-right-first::after
|
||
|
|
) {
|
||
|
|
border-inline-end: 1px solid var(--theme-bg) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.ant-table-wrapper .ant-table-thead th.ant-table-column-has-sorters:hover) {
|
||
|
|
background: var(--table-select) !important;
|
||
|
|
}
|
||
|
|
</style>
|