1071 lines
36 KiB
Vue
1071 lines
36 KiB
Vue
<template>
|
||
<div>
|
||
<nzDetailView
|
||
v-my-loading="detailViewLoading || tools.loading"
|
||
v-if="detailType !== 'list'"
|
||
:api="url"
|
||
ref="detailList"
|
||
:layout="dataListLayout"
|
||
:from="fromRoute.asset"
|
||
:search-msg="searchMsg"
|
||
:detailType="detailType"
|
||
:detailViewRightObj="detailViewRightObj"
|
||
:dataLength="tableData.length"
|
||
@search="search"
|
||
@changeDetailType="changeDetailType"
|
||
>
|
||
<template v-slot:top-tool-left>
|
||
<detailViewTopSearch :selectValue.sync="selectValue" :detailSearchList="detailSearchList" @reload="reloadTable" />
|
||
</template>
|
||
<template v-slot:top-tool-right>
|
||
<button id="asset-create-asset" v-has="'asset_add'" :title="$t('asset.createAsset')" class="top-tool-btn" @click.stop="add">
|
||
<i class="nz-icon nz-icon-create-square"></i>
|
||
</button>
|
||
<top-tool-more-options
|
||
:delete-objs="batchDeleteObjs"
|
||
ref="export"
|
||
id="model"
|
||
:params="searchLabel"
|
||
:params2="searchCheckBox"
|
||
:permissions="{
|
||
import: 'asset_add',
|
||
export: 'asset_edit'
|
||
}"
|
||
class="top-tool-export margin-l-10 margin-r-10"
|
||
export-file-name="asset"
|
||
export-url="/asset/asset/export"
|
||
import-url="/asset/asset/import"
|
||
@afterImport="getTableData"
|
||
>
|
||
</top-tool-more-options>
|
||
</template>
|
||
<template v-slot:nz-detail-view-list>
|
||
<asset-detail
|
||
class="data-detail"
|
||
ref="dataDetail"
|
||
:orderByFa="orderBy"
|
||
v-my-loading="tools.loading"
|
||
:loading="tools.loading"
|
||
:detailViewRightObj="detailViewRightObj"
|
||
:api="url"
|
||
:table-data="tableData"
|
||
@detailViewRightShow = 'detailViewRightShow'
|
||
@orderDetail="orderDetail"
|
||
>
|
||
</asset-detail>
|
||
</template>
|
||
<!-- 分页组件 -->
|
||
<template v-slot:pagination>
|
||
<el-pagination
|
||
@current-change="pageNo"
|
||
:current-page.sync="pageObj.pageNo"
|
||
:page-size="20"
|
||
:total="pageObj.total"
|
||
layout="prev, slot, next"
|
||
small
|
||
>
|
||
<template>
|
||
<el-input-number ref="jumpInput" v-model="pageObj.pageNo" :controls="false" :min="1" :max="pageObj.pages" class="jump-input" @change="getTableData" @keyup.enter.native="getTableData" size="mini"/>
|
||
<span class="jump-pages">/ {{pageObj.pages}}</span>
|
||
</template>
|
||
</el-pagination>
|
||
</template>
|
||
</nzDetailView>
|
||
<nz-data-list
|
||
v-my-loading="detailViewLoading"
|
||
v-if="detailType === 'list'"
|
||
ref="dataList"
|
||
:api="url"
|
||
:custom-table-title.sync="tools.customTableTitle"
|
||
:from="fromRoute.asset"
|
||
:layout="dataListLayout"
|
||
:search-msg="searchMsg"
|
||
:nz-table-height-offset="assetNzTableHeightOffset"
|
||
@search="search"
|
||
:detailType="detailType"
|
||
@changeDetailType="changeDetailType"
|
||
@getTableData="getTableData"
|
||
>
|
||
<template v-slot:top-tool-right>
|
||
<button id="asset-filter" :class="{ 'is-focus': dataListLayout.indexOf('clickSearch') > -1 }" class="top-tool-btn margin-r-10" @click.stop="showClickSearch" :title="$t('dashboard.panel.chartForm.filter')">
|
||
<i class="nz-icon nz-icon-funnel"></i>
|
||
</button>
|
||
<button id="asset-create-asset" v-has="'asset_add'" :title="$t('asset.createAsset')" class="top-tool-btn" @click.stop="add">
|
||
<i class="nz-icon nz-icon-create-square"></i>
|
||
</button>
|
||
<top-tool-more-options
|
||
:delete-objs="batchDeleteObjs"
|
||
ref="export"
|
||
id="model"
|
||
:params="searchLabel"
|
||
:params2="searchCheckBox"
|
||
:permissions="{
|
||
import: 'asset_add',
|
||
export: 'asset_edit'
|
||
}"
|
||
class="top-tool-export margin-l-10 margin-r-10"
|
||
export-file-name="asset"
|
||
export-url="/asset/asset/export"
|
||
import-url="/asset/asset/import"
|
||
@afterImport="getTableData"
|
||
>
|
||
<template v-slot:before>
|
||
<div>
|
||
<el-dropdown-item>
|
||
<div id="asset-batch-asset" v-has="'asset_edit'" @click="batchEdit"><i class="nz-icon nz-icon-batch-edit"></i>{{$t('overall.batchEdit')}}</div>
|
||
</el-dropdown-item>
|
||
<!-- 批量删除 -->
|
||
<el-dropdown-item>
|
||
<div id="asset-list-batch-delete" v-has="'asset_delete'" >
|
||
<el-button type="text" :disabled="isDisabled" @click="BatchDelete"><i class="nz-icon nz-icon-batch-edit"></i>{{$t('overall.batchDel')}}</el-button>
|
||
</div>
|
||
<!-- <delete-button :type="'link'" :title="$t('overall.batchDel')" id="asset-list-batch-delete" v-has="'asset_delete'" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true" @click="deletesBtn"></delete-button> -->
|
||
</el-dropdown-item>
|
||
</div>
|
||
</template>
|
||
</top-tool-more-options>
|
||
</template>
|
||
<template v-slot:search >
|
||
<click-search ref="clickSearch" :select-value.sync="selectValue" :title-search-list="titleSearchList" @reload="reloadTable"/>
|
||
</template>
|
||
<template v-slot:default="slotProps">
|
||
<asset-table
|
||
ref="dataTable"
|
||
:orderByFa="orderBy"
|
||
v-my-loading="tools.loading"
|
||
:loading="tools.loading"
|
||
:api="url"
|
||
:custom-table-title="tools.customTableTitle"
|
||
:height="mainTableHeight"
|
||
:table-data="tableData"
|
||
@cli="cli"
|
||
@del="del"
|
||
@edit="edit"
|
||
@duplicate="duplicate"
|
||
@orderBy="tableDataSort"
|
||
@reload="getTableData"
|
||
@selectionChange="selectionChange"
|
||
@addSilence="addSilence"
|
||
@topology="topology"
|
||
@showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></asset-table>
|
||
</template>
|
||
<!-- 分页组件 -->
|
||
<template v-slot:pagination>
|
||
<Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
|
||
</template>
|
||
</nz-data-list>
|
||
<transition name="right-box">
|
||
<asset-box v-if="rightBox.show"
|
||
ref="assetBox"
|
||
:dc-data="dcData"
|
||
:field-group-data="fieldGroupData"
|
||
:from="fromRoute.asset"
|
||
:obj="object"
|
||
:snmp-credential-data="snmpCredentialData"
|
||
:state-data="stateData"
|
||
:type-data="typeData"
|
||
@close="closeRightBox"
|
||
@refresh="getTableData">
|
||
</asset-box>
|
||
</transition>
|
||
<transition name="right-box">
|
||
<asset-batch-edit-box
|
||
v-if="rightBox.batchShow"
|
||
:field-group-data="fieldGroupData"
|
||
:snmp-credential-data="snmpCredentialData"
|
||
:state-data="stateData"
|
||
@close="closeRightBox"
|
||
@refresh="getTableData">
|
||
</asset-batch-edit-box>
|
||
</transition>
|
||
<transition name="right-box"><alert-silence-box v-if='silenceBoxShow' :alert-silence="objectSilence" @close="closeSilenceBox"></alert-silence-box>
|
||
</transition>
|
||
|
||
<template>
|
||
<!-- 批量删除 -->
|
||
<el-dialog
|
||
ref="dialogData"
|
||
id="dialogID"
|
||
title="Hint"
|
||
v-if="dialogVisible"
|
||
:visible.sync="dialogVisible"
|
||
@close='handleClose'
|
||
width="20%"
|
||
:modal-append-to-body="true"
|
||
:append-to-body="true"
|
||
>
|
||
<!-- -->
|
||
<div class="dialog-header1" style="vertical-align:top;" v-if="showOne">
|
||
<i class="nz-icon nz-icon-jinggao" style="color:#ff000078;"></i>
|
||
<span>Are you sure to delete these {{ this.batchDeleteObjs.length }} Pleaces data?</span>
|
||
</div>
|
||
<!-- -->
|
||
<div class="dialog-header2" style="vertical-align:top;" v-if="showTwo">
|
||
<i class="nz-icon nz-icon-import-failed1" style="color:#ff000078;"></i>
|
||
<span>These Assets cannot be deleted.If you want to continue to delete,please check the "Force delete" action.</span>
|
||
</div>
|
||
<!-- -->
|
||
<div class="dialog-header3" style="vertical-align:top;" v-if="showThree">
|
||
<i class="nz-icon nz-icon-import-success1" style="color:rgb(20 191 25 / 97%);"></i>
|
||
<span>These Assets delete complete.</span>
|
||
</div>
|
||
<el-table
|
||
class="branchTable"
|
||
ref="batchDeleteData"
|
||
:data="batchDeleteObjs"
|
||
tooltip-effect="dark"
|
||
style="width: 100%"
|
||
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
|
||
:row-key="(row) => {return row.id}"
|
||
@selection-change="batchDeleteselectionChange"
|
||
@showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"
|
||
@topology="topology"
|
||
@row-dblclick="(row)=>{$emit('showBottomBox', 'panelTab', row)}"
|
||
>
|
||
<el-table-column
|
||
:resizable="false"
|
||
type="selection"
|
||
:reserve-selection="true"
|
||
width="55">
|
||
</el-table-column>
|
||
<el-table-column
|
||
v-if="idShow"
|
||
label="ID"
|
||
width="100"
|
||
>
|
||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
label="name"
|
||
width="150">
|
||
<template slot-scope="scope"
|
||
>
|
||
<i class="nz-icon nz-icon-overview-project monitorColor"></i>
|
||
<!-- <i class="nz-icon nz-icon-overview-endpoint monitorColor"></i> -->
|
||
{{ scope.row.name }}</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<!-- 底部按钮 -->
|
||
<span slot="footer" class="dialog-footer" v-if="dialogFooterShow">
|
||
<div class="footerBox1">
|
||
<el-checkbox v-model="ForceDeleteShow" text-color="black" @change="this.ForceDeleteShow=!this.ForceDeleteShow" name="type"></el-checkbox>
|
||
<span class="checkTitle">Force delete</span>
|
||
</div>
|
||
<el-button @click="dialogVisible = false">No</el-button>
|
||
<el-button type="primary" @click="BatchDeleteYes">Yes</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</template>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import deleteButton from '@/components/common/deleteButton'
|
||
import assetBox from '@/components/common/rightBox/asset/assetBox'
|
||
import assetBatchEditBox from '@/components/common/rightBox/asset/assetBatchEditBox'
|
||
import nzDataList from '@/components/common/table/nzDataList'
|
||
import nzDetailView from '@/components/common/detailView/nzDetailView'
|
||
import dataListMixin from '@/components/common/mixin/dataList'
|
||
import detailViewMixin from '@/components/common/mixin/detailViewMixin'
|
||
import assetTable from '@/components/common/table/asset/assetTable'
|
||
import assetDetail from '@/components/common/detailView/list/asset/assetDetail'
|
||
import clickSearch from '@/components/common/labelFilter/clickSearch'
|
||
import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
|
||
import alertSilenceBox from '@/components/common/rightBox/alertSilenceBox'
|
||
import detailViewTopSearch from '@/components/common/detailView/detailViewTopSearch'
|
||
import routerPathParams from '@/components/common/mixin/routerPathParams'
|
||
import lodash from 'lodash'
|
||
|
||
export default {
|
||
name: 'asset',
|
||
components: {
|
||
deleteButton,
|
||
assetBox,
|
||
nzDataList,
|
||
assetBatchEditBox,
|
||
assetTable,
|
||
clickSearch,
|
||
topToolMoreOptions,
|
||
alertSilenceBox,
|
||
nzDetailView,
|
||
assetDetail,
|
||
detailViewTopSearch
|
||
},
|
||
mixins: [dataListMixin, detailViewMixin, routerPathParams],
|
||
data () {
|
||
return {
|
||
url: 'asset/asset',
|
||
from: 'asset',
|
||
filter: {},
|
||
// 侧滑
|
||
rightBox: {
|
||
batchShow: false
|
||
},
|
||
silenceBoxShow: false,
|
||
dataListLayout: localStorage.getItem('dataList-layout' + 'assetTable') ? JSON.parse(localStorage.getItem('dataList-layout' + 'assetTable')) : ['searchInput', 'elementSet', 'clickSearch', 'pagination', 'detailViewSet'],
|
||
assetNzTableHeightOffset: 283, // 包含click-search时nz-table的高度
|
||
blankObject: {
|
||
id: '',
|
||
name: '',
|
||
pid: '',
|
||
sn: '',
|
||
manageIp: '',
|
||
stateId: 2,
|
||
purchaseDate: null,
|
||
dcId: '',
|
||
cabinetId: '',
|
||
brandId: '',
|
||
brand: { id: '', name: '' },
|
||
modelId: '',
|
||
model: { id: '', name: '' },
|
||
type: { name: '', id: '' },
|
||
number: '',
|
||
brandAndModel: [],
|
||
typeId: '',
|
||
snmpCredentialId: '',
|
||
clientPort: '10092',
|
||
clientToken: '',
|
||
authProtocolPort: '',
|
||
authType: '',
|
||
authUsername: '',
|
||
authPin: '',
|
||
authPriKey: '',
|
||
authUserTip: '',
|
||
authPinTip: '',
|
||
fields: [],
|
||
accounts: []
|
||
},
|
||
blankSilenceObject: {
|
||
id: '',
|
||
startAt: '',
|
||
endAt: '',
|
||
ruleId: '',
|
||
type: 'asset',
|
||
linkId: '',
|
||
remark: '',
|
||
time: [],
|
||
matchers: [
|
||
{ name: '', value: '', regex: 0 }
|
||
],
|
||
name: ''
|
||
},
|
||
objectSilence: {},
|
||
tableId: 'assetTable', // 需要分页的table的id，用于记录每页数量
|
||
searchMsg: { // 给搜索框子组件传递的信息
|
||
searchLabelList: [{
|
||
id: 'ids',
|
||
name: 'ID',
|
||
type: 'input',
|
||
label: 'ids',
|
||
disabled: false
|
||
}, {
|
||
name: this.$t('overall.name'),
|
||
type: 'input',
|
||
label: 'name',
|
||
id: 'name',
|
||
disabled: false
|
||
}, {
|
||
name: 'SN',
|
||
type: 'input',
|
||
label: 'sn',
|
||
id: 'sn',
|
||
disabled: false
|
||
}, {
|
||
name: 'IP',
|
||
type: 'input',
|
||
label: 'manageIp',
|
||
id: 'manageIp',
|
||
disabled: false
|
||
}, {
|
||
name: this.$t('overall.state'),
|
||
type: 'assetState',
|
||
label: 'assetState',
|
||
id: 'stateIds',
|
||
readonly: true,
|
||
disabled: false
|
||
}]
|
||
},
|
||
|
||
modelData: [],
|
||
stateData: [],
|
||
typeData: [],
|
||
dcData: [],
|
||
snmpCredentialData: [],
|
||
fieldGroupData: [],
|
||
titleSearchList: {
|
||
dc: {
|
||
label: this.$t('overall.dc'),
|
||
key: 'dcIds',
|
||
type: 'checkBox',
|
||
children: [],
|
||
show: false,
|
||
showMore: false,
|
||
width: 0,
|
||
index: -1
|
||
},
|
||
type: {
|
||
label: this.$t('overall.type'),
|
||
key: 'typeIds',
|
||
type: 'checkBox',
|
||
children: [],
|
||
show: false,
|
||
showMore: false,
|
||
width: 0,
|
||
index: -1
|
||
},
|
||
ping: {
|
||
label: 'Ping',
|
||
key: 'ping',
|
||
type: 'checkBox',
|
||
children: [
|
||
{ key: 'Down', value: 0, name: 'Down' },
|
||
{ key: 'Up', value: 1, name: 'Up' }
|
||
],
|
||
show: false,
|
||
showMore: false,
|
||
width: 0,
|
||
index: -1
|
||
},
|
||
model: {
|
||
label: this.$t('asset.model'),
|
||
key: 'modelIds',
|
||
type: 'checkBox',
|
||
children: [],
|
||
show: false,
|
||
showMore: false,
|
||
width: 0,
|
||
index: -1
|
||
},
|
||
assetLabel: {
|
||
label: this.$t('overall.more'),
|
||
key: 'fields',
|
||
type: 'dropdownCheckBox',
|
||
children: [],
|
||
show: false,
|
||
showMore: false,
|
||
width: 0,
|
||
index: -1
|
||
}
|
||
},
|
||
selectValue: {
|
||
dcIds: [],
|
||
typeIds: [],
|
||
ping: [],
|
||
modelIds: [],
|
||
fields: '',
|
||
modelIdsDetail: [],
|
||
fieldsDetail: []
|
||
},
|
||
detailSearchList: {
|
||
dc: {
|
||
label: this.$t('overall.dc'),
|
||
key: 'dcIds',
|
||
type: 'checkBox',
|
||
children: [],
|
||
show: false,
|
||
showMore: false,
|
||
dropShow: false,
|
||
width: 0,
|
||
index: -1
|
||
},
|
||
type: {
|
||
label: this.$t('overall.type'),
|
||
key: 'typeIds',
|
||
type: 'checkBox',
|
||
children: [],
|
||
show: false,
|
||
showMore: false,
|
||
dropShow: false,
|
||
width: 0,
|
||
index: -1
|
||
},
|
||
ping: {
|
||
label: 'Ping',
|
||
key: 'ping',
|
||
type: 'checkBox',
|
||
children: [
|
||
{ key: 'Down', id: 0, name: 'Down' },
|
||
{ key: 'Up', id: 1, name: 'Up' }
|
||
],
|
||
show: false,
|
||
showMore: false,
|
||
dropShow: false,
|
||
width: 0,
|
||
index: -1
|
||
},
|
||
model: {
|
||
label: this.$t('asset.model'),
|
||
key: 'modelIdsDetail',
|
||
type: 'checkBox',
|
||
children: [],
|
||
show: false,
|
||
showMore: false,
|
||
dropShow: false,
|
||
width: 0,
|
||
index: -1
|
||
},
|
||
assetLabel: {
|
||
label: this.$t('overall.more'),
|
||
key: 'fieldsDetail',
|
||
type: 'dropdownCheckBox',
|
||
children: [],
|
||
show: false,
|
||
showMore: false,
|
||
dropShow: false,
|
||
width: 0,
|
||
index: -1
|
||
}
|
||
},
|
||
timer: '',
|
||
needAlertDaysData: true,
|
||
trendKey: 'assetId'
|
||
}
|
||
},
|
||
methods: {
|
||
cli (row) {
|
||
const consoleParam = {
|
||
id: row.id,
|
||
host: row.manageIp,
|
||
port: row.authProtocolPort
|
||
}
|
||
this.$store.commit('addConsole', consoleParam)
|
||
},
|
||
duplicate (row) {
|
||
this.$get(`${this.url}/${row.id}`).then(response => {
|
||
if (response.code === 200) {
|
||
this.object = { ...response.data, id: '', name: `${row.name}-copy`, brandAndModel: '' }
|
||
if (this.object.name.length > 64) {
|
||
const length = this.object.name.length - 64
|
||
this.object.name = row.name.substring(0, row.name.length - length) + '-copy'
|
||
}
|
||
this.rightBox.show = true
|
||
}
|
||
})
|
||
},
|
||
getStateData () {
|
||
return new Promise(resolve => {
|
||
this.$get('asset/stateConf?pageSize=-1').then(response => {
|
||
if (response.code === 200) {
|
||
this.stateData = response.data.list
|
||
}
|
||
resolve()
|
||
})
|
||
})
|
||
},
|
||
getTypeData () {
|
||
return new Promise(resolve => {
|
||
this.$get('asset/typeConf?pageSize=-1').then(response => {
|
||
if (response.code === 200) {
|
||
resolve(response.data.list.map(d => { return { ...d, value: d.id } }))
|
||
// this.titleSearchList.type.children = response.data.list.map(d => { return { ...d, value: d.id } })
|
||
// this.detailSearchList.type.children = response.data.list.map(d => { return { ...d, value: d.id } })
|
||
}
|
||
resolve()
|
||
})
|
||
})
|
||
},
|
||
getTypeTreeData () {
|
||
return new Promise(resolve => {
|
||
this.$get('asset/typeConf/tree').then(response => {
|
||
if (response.code === 200) {
|
||
this.typeData = response.data.list
|
||
}
|
||
resolve()
|
||
})
|
||
})
|
||
},
|
||
reloadTable (obj) {
|
||
this.pageObj.pageNo = 1
|
||
const params = JSON.parse(JSON.stringify(obj))
|
||
if (this.detailType === 'view') {
|
||
const obj = {}
|
||
params.modelIds = params.modelIdsDetail
|
||
params.fieldsDetail.forEach(item => {
|
||
const arr = item.split('-')
|
||
if (obj[arr[0]]) {
|
||
obj[arr[0]].push(arr[1])
|
||
} else {
|
||
obj[arr[0]] = [arr[1]]
|
||
}
|
||
})
|
||
params.fields = JSON.stringify(obj)
|
||
if (params.fields === '{}') {
|
||
params.fields = ''
|
||
}
|
||
delete params.modelIdsDetail
|
||
delete params.fieldsDetail
|
||
}
|
||
Object.keys(params).forEach(key => {
|
||
if (typeof params[key] === 'string') {
|
||
this.searchCheckBox[key] = params[key] ? params[key] : null
|
||
} else {
|
||
params[key] && params[key].length > 0 ? this.searchCheckBox[key] = params[key].join(',') : this.searchCheckBox[key] = null
|
||
}
|
||
})
|
||
if (!this.timer) {
|
||
this.timer = setTimeout(() => {
|
||
this.getTableData()
|
||
clearTimeout(this.timer)
|
||
this.timer = ''
|
||
this.scrollbarToTop()
|
||
}, 1000)
|
||
} else {
|
||
clearTimeout(this.timer)
|
||
this.timer = setTimeout(() => {
|
||
this.getTableData()
|
||
clearTimeout(this.timer)
|
||
this.timer = ''
|
||
this.scrollbarToTop()
|
||
}, 1000)
|
||
}
|
||
},
|
||
scrollbarToTop () {
|
||
this.$nextTick(() => {
|
||
const wraps = document.querySelectorAll('.el-table__body-wrapper')
|
||
wraps.forEach(wrap => {
|
||
if (wrap) {
|
||
wrap.scrollTop = 0
|
||
wrap.scrollLeft = 0
|
||
}
|
||
})
|
||
})
|
||
},
|
||
getDcData () {
|
||
return new Promise(resolve => {
|
||
this.$get('dc', { pageSize: -1 }).then(response => {
|
||
if (response.code === 200) {
|
||
this.dcData = response.data.list
|
||
resolve(response.data.list.map(d => { return { ...d, value: d.id } }))
|
||
// this.titleSearchList.dc.children = response.data.list.map(d => { return { ...d, value: d.id } })
|
||
}
|
||
resolve()
|
||
})
|
||
})
|
||
},
|
||
getSnmpCredentialData () {
|
||
return new Promise(resolve => {
|
||
this.$get('snmp/credential', { pageSize: -1 }).then(response => {
|
||
if (response.code === 200) {
|
||
this.snmpCredentialData = response.data.list
|
||
}
|
||
resolve()
|
||
})
|
||
})
|
||
},
|
||
getFieldGroupData () {
|
||
return new Promise(resolve => {
|
||
this.$get('asset/field/group', { pageSize: -1 }).then(response => {
|
||
if (response.code === 200) {
|
||
this.fieldGroupData = response.data.list
|
||
}
|
||
resolve()
|
||
})
|
||
})
|
||
},
|
||
getSearchableMetaData (metaData) {
|
||
return new Promise(resolve => {
|
||
this.$get('asset/field/meta', { pageSize: -1 }).then(response => {
|
||
if (response.code === 200) {
|
||
const data = []
|
||
const searchableData = response.data.list.filter(d => d.search === 1)
|
||
const showData = response.data.list.filter(d => d.display === 1).map(item => {
|
||
return { label: item.name, prop: item.name, show: false, allowed: true, type: 'label' }
|
||
})
|
||
searchableData.forEach(m => {
|
||
if (m.param) {
|
||
const param = JSON.parse(m.param)
|
||
if (param.items) {
|
||
// param.items.map(p => { return { ...p, id: p.name, metaId: m.id, num: metaData.find(meta => meta.id === m.id && meta.option === p.name).num } })
|
||
data.push({
|
||
...m,
|
||
children: param.items.map(p => {
|
||
const metaFind = metaData.find(meta => meta.id === m.id && meta.option === p.name)
|
||
return {
|
||
...p,
|
||
id: p.name,
|
||
name: p.name,
|
||
metaId: m.id,
|
||
num: metaFind ? metaFind.num : 0
|
||
}
|
||
})
|
||
})
|
||
}
|
||
}
|
||
})
|
||
// this.titleSearchList.assetLabel.children = data
|
||
resolve(data)
|
||
setTimeout(() => {
|
||
const title = this.tools.customTableTitle
|
||
if (!this.$refs.dataTable && !this.$refs.dataDetail) {
|
||
return
|
||
}
|
||
const tableTitle = this.$refs.dataTable ? this.$refs.dataTable.tableTitle : this.$refs.dataDetail.tableTitle
|
||
const originalTitle = title.slice(0, tableTitle.length) // 原title
|
||
const oldLabelTitle = title.slice(tableTitle.length, title.length) // 旧labelTitle
|
||
|
||
const newLabel = showData.filter(item => { return !oldLabelTitle.find(t => { return item.label === t.label }) })
|
||
const keepLabel = oldLabelTitle.filter(item => showData.find(t => item.label === t.label))
|
||
|
||
let result = originalTitle.concat([{ label: this.$t('overall.labels'), show: false, NotSet: true, type: 'title', prop: 'table-label' }])
|
||
|
||
result = result.concat(keepLabel).concat(newLabel)
|
||
this.tools.customTableTitle = JSON.parse(JSON.stringify(result))
|
||
}, 200)
|
||
}
|
||
resolve()
|
||
})
|
||
})
|
||
},
|
||
getModelData (data) {
|
||
return new Promise(resolve => {
|
||
// this.$get('asset/model?pageSize=-1').then(response => {
|
||
if (data) {
|
||
this.modelData = data
|
||
const arr = []
|
||
// const titleSearchData = {}
|
||
this.modelData.forEach(m => {
|
||
m.value = []
|
||
arr.push({ ...m, name: m.brand.name + '/' + m.name, value: m.id, num: m.num })
|
||
// if (titleSearchData[m.brand.name]) {
|
||
// titleSearchData[m.brand.name].children.push(m)
|
||
// } else {
|
||
// titleSearchData[m.brand.name] = { ...m.brand, children: [m] }
|
||
// }
|
||
})
|
||
// resolve(Object.keys(titleSearchData).map(b => titleSearchData[b]))
|
||
resolve(arr)
|
||
// this.titleSearchList.model.children = Object.keys(titleSearchData).map(b => titleSearchData[b])
|
||
}
|
||
resolve()
|
||
// })
|
||
})
|
||
},
|
||
showEndpoint (asset) {
|
||
if (!this.hasButton('asset_endpoint_view')) {
|
||
return
|
||
}
|
||
this.bottomBox.asset = Object.assign({}, asset)
|
||
this.bottomBox.targetTab = 'endpoint'
|
||
this.bottomBox.showSubList = true
|
||
},
|
||
|
||
batchEdit () {
|
||
this.rightBox.batchShow = true
|
||
},
|
||
closeRightBox (refresh) {
|
||
this.rightBox.show = false
|
||
this.rightBox.batchShow = false
|
||
if (refresh) {
|
||
this.delFlag = true
|
||
this.getTableData()
|
||
}
|
||
},
|
||
getPrincipalName (data) {
|
||
for (const item in this.userData) {
|
||
if (this.userData[item].userId === data) {
|
||
return this.userData[item].username
|
||
}
|
||
}
|
||
},
|
||
getTableData (params) {
|
||
if (params && Object.keys(params).length > 0) {
|
||
for (const key in params) {
|
||
this.$set(this.searchLabel, key, params[key])
|
||
}
|
||
}
|
||
if (this.orderBy) {
|
||
this.$set(this.searchLabel, 'orderBy', this.orderBy)
|
||
} else {
|
||
delete this.searchLabel.orderBy
|
||
}
|
||
this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
|
||
this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
|
||
if (this.$route.path === '/asset' && this.titleSearchList) {
|
||
this.$set(this.searchLabel, 'statistics', 1)
|
||
}/* else {
|
||
delete this.searchLabel.statistics
|
||
} */
|
||
this.tools.loading = true
|
||
const assetParam = {
|
||
...this.searchLabel,
|
||
...this.searchCheckBox
|
||
}
|
||
const path = this.fromRoute.asset
|
||
const routePathParams = lodash.cloneDeep(assetParam)
|
||
delete routePathParams.statistics
|
||
this.updatePath(routePathParams, path)
|
||
this.$get(this.url, { ...this.searchLabel, ...this.searchCheckBox }).then(response => {
|
||
this.tools.loading = false
|
||
if (response.code === 200) {
|
||
if (response.statistics && this.$route.path === '/asset') {
|
||
this.setSearchData(response.statistics)
|
||
}
|
||
for (let i = 0; i < response.data.list.length; i++) {
|
||
response.data.list[i].status = response.data.list[i].status + ''
|
||
}
|
||
if (this.needAlertDaysData) {
|
||
response.data.list.forEach(item => {
|
||
item.trendLoading = true
|
||
item.left = 0
|
||
item.top = 0
|
||
item.alertNumtooltipShow = false
|
||
item.alertDaysData = [
|
||
{
|
||
metric: { priority: 'P1' },
|
||
values: [[0, 0]]
|
||
},
|
||
{
|
||
metric: { priority: 'P2' },
|
||
values: [[0, 0]]
|
||
},
|
||
{
|
||
metric: { priority: 'P3' },
|
||
values: [[0, 0]]
|
||
}
|
||
]
|
||
})
|
||
}
|
||
this.tableData = response.data.list
|
||
const globalSearchId = this.$store.getters.getGlobalSearchId
|
||
let detailViewRightObj = ''
|
||
if (globalSearchId) {
|
||
detailViewRightObj = this.tableData.find(item => item.id === globalSearchId)
|
||
} else {
|
||
detailViewRightObj = this.tableData[0]
|
||
}
|
||
this.detailViewRightObj = this.$loadsh.cloneDeep(detailViewRightObj)
|
||
this.pageObj.total = response.data.total
|
||
this.pageObj.pages = response.data.pages
|
||
if (!this.scrollbarWrap && this.$refs.dataTable && this.$refs.dataTable.$refs.dataTable) {
|
||
this.$nextTick(() => {
|
||
this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper
|
||
this.toTopBtnHandler(this.scrollbarWrap)
|
||
})
|
||
}
|
||
if (this.detailType === 'view') {
|
||
this.$refs.dataDetail.$refs.dataTable.scrollTop = 0
|
||
}
|
||
}
|
||
})
|
||
},
|
||
setSearchData (statistics) {
|
||
Object.keys(this.titleSearchList).forEach(key => {
|
||
const keys = key === 'assetLabel' ? 'meta' : key
|
||
if (key === 'assetLabel') {
|
||
this.getSearchableMetaData(statistics[keys]).then(res => {
|
||
this.titleSearchList.assetLabel.children = res
|
||
this.detailSearchList.assetLabel.children = res
|
||
this.titleSearchList.assetLabel.show = true
|
||
this.detailSearchList.assetLabel.show = true
|
||
})
|
||
} else if (key === 'model') {
|
||
this.getModelData(statistics[keys]).then(res => {
|
||
this.titleSearchList.model.children = res
|
||
this.detailSearchList.model.children = res
|
||
this.titleSearchList.model.show = true
|
||
this.detailSearchList.model.show = true
|
||
})
|
||
} else {
|
||
this.titleSearchList[key].children = statistics[keys].map(d => { return { ...d, value: d.id } })
|
||
this.detailSearchList[key].children = statistics[keys].map(d => { return { ...d, value: d.id } })
|
||
}
|
||
if (this.titleSearchList[key].children.length === 0) {
|
||
// delete this.titleSearchList[key]
|
||
// delete this.detailSearchList[key]
|
||
} else {
|
||
this.titleSearchList[key].show = true
|
||
this.detailSearchList[key].show = true
|
||
}
|
||
this.titleSearchList[key].show = true
|
||
this.detailSearchList[key].show = true
|
||
})
|
||
},
|
||
edit (u) {
|
||
this.$get(`${this.url}/${u.id}`).then(response => {
|
||
if (response.code === 200) {
|
||
if (response.data.purchaseDate) {
|
||
response.data.purchaseDate += ' 00:00:00'
|
||
response.data.purchaseDate = new Date(response.data.purchaseDate)
|
||
}
|
||
this.object = {
|
||
...response.data,
|
||
brandAndModel: ''
|
||
}
|
||
this.rightBox.show = true
|
||
}
|
||
})
|
||
}
|
||
},
|
||
created () {
|
||
const searchKeys = {
|
||
// key: path 键
|
||
// value: vue set 参数
|
||
pageNo: { target: this.pageObj, propertyName: 'pageNo', type: 'number' },
|
||
pageSize: { target: this.pageObj, propertyName: 'pageSize', type: 'number' },
|
||
orderBy: { target: this.$data, propertyName: 'orderBy', type: 'string' },
|
||
ids: {
|
||
target: this.searchLabel,
|
||
propertyName: 'ids',
|
||
isSearchInput: true,
|
||
type: 'string',
|
||
defaultJson: {
|
||
disabled: false,
|
||
id: 'ids',
|
||
label: 'ids',
|
||
name: 'ID',
|
||
type: 'input',
|
||
val: ''
|
||
},
|
||
jsonKey: 'val'
|
||
},
|
||
name: {
|
||
target: this.searchLabel,
|
||
isSearchInput: true,
|
||
propertyName: 'name',
|
||
type: 'string',
|
||
defaultJson: {
|
||
disabled: false,
|
||
id: 'name',
|
||
label: 'name',
|
||
name: 'Name',
|
||
type: 'input',
|
||
val: ''
|
||
},
|
||
jsonKey: 'val'
|
||
},
|
||
sn: {
|
||
target: this.searchLabel,
|
||
isSearchInput: true,
|
||
propertyName: 'sn',
|
||
type: 'number',
|
||
defaultJson: {
|
||
disabled: false,
|
||
id: 'sn',
|
||
label: 'sn',
|
||
name: 'SN',
|
||
type: 'input',
|
||
val: ''
|
||
},
|
||
jsonKey: 'val'
|
||
},
|
||
manageIp: {
|
||
target: this.searchLabel,
|
||
isSearchInput: true,
|
||
propertyName: 'manageIp',
|
||
type: 'number',
|
||
defaultJson: {
|
||
disabled: false,
|
||
id: 'manageIp',
|
||
label: 'manageIp',
|
||
name: 'IP',
|
||
type: 'input',
|
||
val: ''
|
||
},
|
||
jsonKey: 'val'
|
||
},
|
||
stateIds: {
|
||
target: this.searchLabel,
|
||
propertyName: 'stateIds',
|
||
type: 'number',
|
||
isSearchInput: true,
|
||
defaultJson: {
|
||
disabled: false,
|
||
id: 'stateIds',
|
||
label: 'assetState',
|
||
name: 'State',
|
||
readonly: true,
|
||
type: 'assetState',
|
||
val: '',
|
||
valnum: '',
|
||
listStr: 'assetStateSelect'
|
||
},
|
||
jsonKey: 'valnum'
|
||
},
|
||
dcIds: { target: this.searchCheckBox, propertyName: 'dcIds', type: 'string', target2: this.selectValue, type2: 'array' },
|
||
fields: { target: this.searchCheckBox, propertyName: 'fields', type: 'json', target2: this.selectValue, type2: 'json' },
|
||
ping: { target: this.searchCheckBox, propertyName: 'ping', type: 'string', target2: this.selectValue, type2: 'array' },
|
||
modelIds: { target: this.searchCheckBox, propertyName: 'modelIds', type: 'string', target2: this.selectValue, type2: 'array' },
|
||
typeIds: { target: this.searchCheckBox, propertyName: 'typeIds', type: 'string', target2: this.selectValue, type2: 'array' }
|
||
}
|
||
this.initQueryFromPath(searchKeys)
|
||
},
|
||
mounted () {
|
||
// 初始化数据
|
||
this.getStateData()
|
||
this.getTypeTreeData()
|
||
this.getSnmpCredentialData()
|
||
this.getFieldGroupData()
|
||
},
|
||
beforeDestroy () {
|
||
clearTimeout(this.timer)
|
||
},
|
||
watch: {
|
||
$route: {
|
||
immediate: true,
|
||
handler () {
|
||
// 是否弹出侧滑
|
||
const add = this.$route.query.add
|
||
const importAsset = this.$route.query.importAsset
|
||
if (add) {
|
||
if (add === 'asset') {
|
||
this.add()
|
||
}
|
||
}
|
||
if (importAsset) {
|
||
this.$nextTick(() => {
|
||
this.$refs.export.showImportBox(1)
|
||
})
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
.list-page /deep/ .main-container{
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
/deep/ .nz-table-list{
|
||
flex: 1;
|
||
}
|
||
/* del 样式 */
|
||
/* .theme-light #dialogID .el-dialog .el-dialog__title {
|
||
font-size: 12px;
|
||
} */
|
||
.el-dialog__footer {
|
||
position: relative;
|
||
}
|
||
.el-dialog__footer .dialog-footer .el-checkbox{
|
||
position: absolute;
|
||
bottom: 30px;
|
||
left: 20px;
|
||
|
||
}
|
||
.checkTitle{
|
||
position: absolute;
|
||
bottom: 30px;
|
||
left: 40px;
|
||
color: #878181;
|
||
}
|
||
.footerBox1{
|
||
line-height: initial;
|
||
}
|
||
.theme-light .el-button.is-disabled, .theme-light .el-button.is-disabled:hover, .theme-light .el-button.is-disabled:focus{
|
||
color: #C0C4CC !important;
|
||
|
||
}
|
||
.theme-light .el-button--text, #asset-list-batch-delete, .theme-light .el-button--text:focus, .theme-light .el-button--text:hover, .theme-light .el-cascader-node.in-active-path, .theme-light .el-cascader-node.is-active, .theme-light .el-cascader-node.is-selectable.in-checked-path, .theme-light .el-select-dropdown.is-multiple .el-select-dropdown__item.selected, .theme-light .el-select-dropdown__item.selected{
|
||
color: #666 !important;
|
||
}
|
||
.theme-light .el-button--text:hover{
|
||
color: #FA901C !important;
|
||
}
|
||
.theme-light .el-table{
|
||
width: 100% !important;
|
||
}
|
||
.theme-light .el-table thead .el-table__row{
|
||
width: 100% !important;
|
||
}
|
||
</style>
|