305 lines
9.8 KiB
Vue
305 lines
9.8 KiB
Vue
<template>
|
||
<div :class="from" class="list-page detail-view">
|
||
<!-- 主页面 -->
|
||
<div class="main-list">
|
||
<!-- 顶部工具栏 -->
|
||
<div class="main-modal"></div>
|
||
<div class="main-container">
|
||
<div class="top-tools">
|
||
<div class="top-tool-left" style="min-width: 300px">
|
||
<slot name="top-tool-left"></slot>
|
||
<div v-if="showLayout.indexOf('searchInput') > -1" class="top-tool-search margin-r-20" :class="{'project-search alert-table asset-table endpoint-table': searchRight}">
|
||
<search-input ref="searchInput" :from="from" :position="from" :inTransform="bottomBox.inTransform" :searchMsg="searchMsg" @search="search"></search-input>
|
||
</div>
|
||
</div>
|
||
<div :class="{'top-tool-main-right-to-left': bottomBox.showSubList}" class="top-tool-right">
|
||
<slot name="top-tool-right"></slot>
|
||
<el-dropdown
|
||
type="primary"
|
||
v-if="showLayout.indexOf('detailViewSet') > -1"
|
||
trigger="click"
|
||
@command="changeDetailType">
|
||
<button class="top-tool-btn table-column-setting"
|
||
type="button" :title="$t('overall.switchView')">
|
||
<i class="nz-icon nz-icon-detail-view" />
|
||
</button>
|
||
<el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
|
||
<el-dropdown-item :command="'list'" :class="detailType === 'list' ? 'active' : ''">{{$t('asset.detail.list')}}</el-dropdown-item>
|
||
<el-dropdown-item :command="'view'" :class="detailType === 'view' ? 'active' : ''">{{$t('asset.detail.detail')}}</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</el-dropdown>
|
||
</div>
|
||
<!-- 顶部分页组件，当打开底部上滑框时出现 -->
|
||
<!-- <div v-if="showLayout.indexOf('pagination') > -1" class="pagination-top pagination-top-hide display-none"></div>-->
|
||
</div>
|
||
<div :style="{ height: nzTableHeight }" class="nz-detail-view" :class="dataLength?'':'nz-detail-view-no-data'">
|
||
<div class="nz-detail-view-left" v-show="dataLength">
|
||
<slot name="nz-detail-view-list"></slot>
|
||
<div v-if="showLayout.indexOf('pagination') > -1" class="nz-detail-view-pagination">
|
||
<slot name="pagination"></slot>
|
||
</div>
|
||
</div>
|
||
<div v-if="!dataLength" class="no-data">
|
||
<svg class="icon" aria-hidden="true">
|
||
<use xlink:href="#nz-icon-no-data-list"></use>
|
||
</svg>
|
||
<div class="table-no-data__title">No results found</div>
|
||
</div>
|
||
<div class="nz-detail-view-right" v-if="detailViewRightObj">
|
||
<detailViewRight
|
||
@getTableData = 'getTableData'
|
||
ref="detailViewRight"
|
||
v-if="detailViewRightObj"
|
||
:from="from"
|
||
:obj="detailViewRightObj"
|
||
:target-tab="'dashboardTab'"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 全屏查看 -->
|
||
<el-dialog
|
||
v-if="topologyShow"
|
||
:visible.sync="topologyShow"
|
||
:show-close="false"
|
||
class="nz-dialog chart-fullscreen"
|
||
destroy-on-close
|
||
fullscreen
|
||
:modal-append-to-body="false"
|
||
>
|
||
<panel-chart
|
||
:ref="'chart-fullscreen' + topologyChartInfo.id"
|
||
:chart-info="topologyChartInfo"
|
||
:close-on-click-modal="false"
|
||
:from="from"
|
||
:time-range="timeRange"
|
||
:is-fullscreen="true"
|
||
@showFullscreen="showFullscreen"
|
||
></panel-chart>
|
||
</el-dialog>
|
||
<delete-button
|
||
ref="deleteButton"
|
||
:from="triggerFrom"
|
||
:forceDeleteShow="forceDeleteShow"
|
||
:deleteTitle="deleteTitle"
|
||
type=''
|
||
:title="$t('overall.delete')"
|
||
:api="api"
|
||
:single="single"
|
||
:delete-objs="singleDelete"
|
||
@before="delFlag=true"
|
||
></delete-button>
|
||
<diagnosis-tab
|
||
ref="diagnosisTab"
|
||
:diagnosisTabData ="diagnosisTabData"
|
||
></diagnosis-tab>
|
||
<config-sync ref="configSync" type="single" :from="triggerFrom" :batch-objs="syncObj" @getTableData="getTableData"></config-sync>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { fromRoute } from '@/components/common/js/constants'
|
||
import { bottomBoxWindow } from '@/components/common/js/tools'
|
||
import detailViewRight from '@/components/common/detailView/view/detailViewRight'
|
||
import panelChart from '@/components/chart/panelChart'
|
||
import deleteButton from '@/components/common/deleteButton'
|
||
import diagnosisTab from '@/components/common/diagnosisTab'
|
||
import configSync from '@/components/common/configSync'
|
||
export default {
|
||
name: 'nzDetailView',
|
||
components: {
|
||
detailViewRight,
|
||
panelChart,
|
||
deleteButton,
|
||
diagnosisTab,
|
||
configSync
|
||
},
|
||
props: {
|
||
from: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
tableTitle: {
|
||
type: Array
|
||
},
|
||
detailType: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
customTableTitle: {
|
||
type: Array
|
||
},
|
||
dataLength: {
|
||
type: Number,
|
||
default: 1
|
||
},
|
||
layout: {
|
||
type: Array,
|
||
default () { return [] }
|
||
},
|
||
searchMsg: {
|
||
type: Object
|
||
},
|
||
nzTableHeightOffset: Number,
|
||
searchRight: Boolean,
|
||
operationRecord: Boolean,
|
||
detailViewRightObj: {}
|
||
},
|
||
computed: {
|
||
nzTableHeight () {
|
||
if (this.nzTableHeightOffset) {
|
||
if (this.layout.indexOf('clickSearch') > -1) {
|
||
return `calc(100% - ${this.nzTableHeightOffset}px`
|
||
}
|
||
}
|
||
return ''
|
||
},
|
||
topologyShow () {
|
||
return this.$store.getters.getTopologyShow
|
||
},
|
||
topologyChartInfo () {
|
||
return this.$store.getters.getTopologyChartInfo
|
||
},
|
||
showDeleteTableRel () {
|
||
return this.$store.getters.getShowDeleteTableRel
|
||
},
|
||
deleteTableRel () {
|
||
return this.$store.getters.getDeleteTableRel
|
||
},
|
||
diagnosisTab () {
|
||
return this.$store.getters.getDiagnosisTab
|
||
},
|
||
showConfigSync () {
|
||
return this.$store.getters.getShowConfigSync
|
||
},
|
||
configSync () {
|
||
return this.$store.getters.getConfigSync
|
||
}
|
||
},
|
||
data () {
|
||
return {
|
||
fromRoute: fromRoute,
|
||
/* 二级页面相关 */
|
||
api: '',
|
||
bottomBox: {
|
||
object: {},
|
||
mainResizeShow: true, // dom高度改变时是否展示|隐藏
|
||
subResizeShow: true,
|
||
isFullScreen: false, // 全屏状态
|
||
showSubList: false, // 是否显示二级列表
|
||
targetTab: '', // 显示二级列表中的哪个页签
|
||
inTransform: false // 搜索框相关，搜索条件下拉框是否在transform里
|
||
},
|
||
tools: {
|
||
toTopBtnTop: this.$tableHeight.toTopBtnTop, // to-top按钮的top属性
|
||
tableHover: false, // 控制滚动条和top按钮同时出现
|
||
showCustomTableTitle: false // 自定义列弹框是否显示
|
||
},
|
||
showLayout: [],
|
||
timeRange: [new Date(), new Date()],
|
||
single: true,
|
||
deleteTitle: '',
|
||
forceDeleteShow: false,
|
||
singleDelete: [],
|
||
diagnosisTabData: {},
|
||
// 配置同步数据
|
||
syncObj: [],
|
||
triggerFrom: ''
|
||
}
|
||
},
|
||
methods: {
|
||
updateCustomTableTitle (custom) {
|
||
this.$emit('update:customTableTitle', custom)
|
||
},
|
||
// 全屏
|
||
fullScreen () {
|
||
const vm = this
|
||
bottomBoxWindow.fullScreen(vm)
|
||
},
|
||
// 退出全屏
|
||
exitFullScreen () {
|
||
const vm = this
|
||
bottomBoxWindow.exitFullScreen(vm)
|
||
},
|
||
// 鼠标拖动二级列表
|
||
listResize (e) {
|
||
const vm = this
|
||
bottomBoxWindow.listResize(vm, e)
|
||
},
|
||
showBottomBox (targetTab, row) {
|
||
this.bottomBox.targetTab = targetTab
|
||
this.bottomBox.object = JSON.parse(JSON.stringify(row))
|
||
this.bottomBox.showSubList = true
|
||
},
|
||
search (searchObj) {
|
||
this.$emit('search', searchObj)
|
||
},
|
||
getTableData () {
|
||
this.$emit('getTableData')
|
||
},
|
||
changeDetailType (item) {
|
||
this.$emit('changeDetailType', item)
|
||
},
|
||
showFullscreen (flag) {
|
||
this.$store.commit('setTopologyShow', flag)
|
||
},
|
||
configSyncRow (row, from) {
|
||
this.triggerFrom = from || this.from
|
||
this.syncObj = [row]
|
||
this.$nextTick(() => {
|
||
this.$refs.configSync.showDialog()
|
||
})
|
||
},
|
||
delTableRelRow (url, row, forceDeleteShow = false, single = false, deleteTitle = '', from) {
|
||
this.triggerFrom = from || this.from
|
||
this.api = url
|
||
this.singleDelete = [row]
|
||
this.forceDeleteShow = forceDeleteShow
|
||
this.single = single
|
||
this.deleteTitle = deleteTitle
|
||
this.$refs.deleteButton.batchDelete()
|
||
},
|
||
delTableRow (ids) { // 接收一个 删除的id数组 判断当前底部弹窗id 是否包含 包含则关闭当前弹窗
|
||
if (ids.indexOf(this.bottomBox.object.id) !== -1) {
|
||
this.bottomBox = {
|
||
object: {},
|
||
mainResizeShow: true, // dom高度改变时是否展示|隐藏
|
||
subResizeShow: true,
|
||
isFullScreen: false, // 全屏状态
|
||
showSubList: false, // 是否显示二级列表
|
||
targetTab: '', // 显示二级列表中的哪个页签
|
||
inTransform: false // 搜索框相关，搜索条件下拉框是否在transform里
|
||
}
|
||
}
|
||
}
|
||
},
|
||
watch: {
|
||
'bottomBox.showSubList': function (n) {
|
||
const vm = this
|
||
bottomBoxWindow.showSubListWatch(vm, n)
|
||
},
|
||
layout: {
|
||
immediate: true,
|
||
deep: true,
|
||
handler (n) {
|
||
this.showLayout = [...n]
|
||
}
|
||
},
|
||
showDeleteTableRel (n) {
|
||
if (n) {
|
||
this.delTableRelRow(this.deleteTableRel.url, this.deleteTableRel.row, this.deleteTableRel.forceDeleteShow, this.deleteTableRel.single, this.deleteTableRel.deleteTitle, this.deleteTableRel.from)
|
||
}
|
||
},
|
||
diagnosisTab (n) {
|
||
this.diagnosisTabData = n
|
||
},
|
||
showConfigSync (n) {
|
||
if (n) {
|
||
this.configSyncRow(this.configSync.row, this.configSync.from)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|