157 lines
4.2 KiB
Vue
157 lines
4.2 KiB
Vue
<template>
|
||
<div class="bottom-data-list">
|
||
<div class="top-tools top-tools--sub">
|
||
<div class="top-tool-left">
|
||
<div class="sub-list-title" v-if="showTitle">{{bottomHeaderTitle}}：<slot name="title"></slot></div>
|
||
<div class="sub-list-tabs">
|
||
<div v-for="tab in tabs" :key="tab.prop" :class="{'sub-list-tab--active': tab.active || tab.prop == targetTab }" :title='tab.name' class="sub-list-tab" @click="changeTab(tab.prop)">{{tab.name}}</div>
|
||
</div>
|
||
</div>
|
||
<div class="top-tool-right" v-if="!customTool">
|
||
<div v-if="layout.indexOf('searchInput') > -1" class="top-tool-search margin-r-20">
|
||
<search-input v-if="searchInputShow" :searchMsg="searchMsg" :position="'bottom' + targetTab + obj.id" @search="search" :targetTab="targetTab"></search-input>
|
||
</div>
|
||
<slot name="top-tool-right"></slot>
|
||
<button v-if="layout.indexOf('elementSet') > -1" id="account-column-setting" class="top-tool-btn margin-r-20"
|
||
type="button" @click="tools.showCustomTableTitle = true" :title="$t('overall.selectColumns')">
|
||
<i class="nz-icon-gear nz-icon"></i>
|
||
</button>
|
||
</div>
|
||
<div v-else class="top-tool-right">
|
||
<slot name="top-tool-right"></slot>
|
||
</div>
|
||
</div>
|
||
<!-- 自定义table列 -->
|
||
<transition name="el-zoom-in-top">
|
||
<element-set
|
||
v-if="tools.showCustomTableTitle && layout.indexOf('elementSet') > -1"
|
||
ref="customTableTitle"
|
||
:custom-table-title="customTableTitle"
|
||
:original-table-title="tableTitle"
|
||
:tableId="tableId"
|
||
@close="tools.showCustomTableTitle = false"
|
||
@update="updateCustomTableTitle"
|
||
:table-class="true"
|
||
></element-set>
|
||
</transition>
|
||
<div class="sub-container">
|
||
<div :class="subContentClass">
|
||
<slot></slot>
|
||
</div>
|
||
<div class="pagination-bottom" v-if="showPagination">
|
||
<slot name="pagination"></slot>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { fromRoute } from '@/components/common/js/constants'
|
||
export default {
|
||
name: 'nzBottomDataList',
|
||
props: {
|
||
from: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
tableTitle: {
|
||
type: Array
|
||
},
|
||
customTableTitle: {
|
||
type: Array
|
||
},
|
||
layout: {
|
||
type: Array,
|
||
default () { return [] }
|
||
},
|
||
searchMsg: {
|
||
type: Object
|
||
},
|
||
tableId: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
obj: { },
|
||
tabs: {
|
||
type: Array
|
||
},
|
||
targetTab: String,
|
||
customTool: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
showPagination: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
showTitle: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
title: {
|
||
type: String
|
||
}
|
||
},
|
||
computed: {
|
||
bottomHeaderTitle () {
|
||
return this.title || this.$t('overall.name')
|
||
},
|
||
subContentClass () {
|
||
const className = []
|
||
switch (this.targetTab) {
|
||
case 'panelTab':
|
||
className.push('nz-table-list bottom-panel')
|
||
break
|
||
case 'log': {
|
||
className.push('bottom-log')
|
||
break
|
||
}
|
||
default: {
|
||
className.push('nz-table-list')
|
||
break
|
||
}
|
||
}
|
||
this.from === fromRoute.chartTemp && className.push('chart-temp')
|
||
return className.join(' ')
|
||
}
|
||
},
|
||
data () {
|
||
return {
|
||
fromRoute: fromRoute,
|
||
searchInputShow: true,
|
||
tools: {
|
||
toTopBtnTop: this.$tableHeight.toTopBtnTop, // to-top按钮的top属性
|
||
tableHover: false, // 控制滚动条和top按钮同时出现
|
||
showCustomTableTitle: false // 自定义列弹框是否显示
|
||
}
|
||
}
|
||
},
|
||
watch: {
|
||
obj (n) {
|
||
this.searchInputShow = false
|
||
setTimeout(() => {
|
||
this.searchInputShow = true
|
||
}, 100)
|
||
},
|
||
targetTab (n) {
|
||
this.searchInputShow = false
|
||
setTimeout(() => {
|
||
this.searchInputShow = true
|
||
}, 100)
|
||
}
|
||
},
|
||
methods: {
|
||
updateCustomTableTitle (custom) {
|
||
this.$emit('update:customTableTitle', custom)
|
||
},
|
||
search (searchObj) {
|
||
this.$emit('search', searchObj)
|
||
},
|
||
// 切换tab
|
||
changeTab (tab) {
|
||
this.$emit('changeTab', tab)
|
||
}
|
||
}
|
||
}
|
||
</script>
|