fix:修改asset 详细视图切换时 没有保存分页信息,修改endpoint 搜索部分的数据来源

This commit is contained in:
zhangyu
2021-10-18 14:55:16 +08:00
parent c8ec5b48ea
commit c2267a983d
5 changed files with 109 additions and 38 deletions

View File

@@ -1,6 +1,6 @@
<template> <template>
<div :style="{'min-height': height + 'px',height:getHeight + 'px'}" class="search-box__container"> <div :style="{'min-height': height + 'px',height:getHeight + 'px'}" class="search-box__container">
<div v-for="(data, type, index) in titleSearchListCopy" v-cloak :key="index" ref="searchContentBox" :class="{'search-content-box-height': data.length == 0}" class="search-content-box"> <div v-for="(data, type, index) in titleSearchListCopy" v-if="data.children&&data.children.length" v-cloak :key="index" ref="searchContentBox" :class="{'search-content-box-height': data.length == 0}" class="search-content-box">
<div class="search-title">{{data.label}}:</div> <div class="search-title">{{data.label}}:</div>
<el-skeleton v-if="data.type === 'checkBox'" :class="skeletonClass(data)" :loading="!data.show" :rows="1" class="search-items"> <el-skeleton v-if="data.type === 'checkBox'" :class="skeletonClass(data)" :loading="!data.show" :rows="1" class="search-items">
<template> <template>
@@ -215,17 +215,25 @@ export default {
this.titleSearchListCopy[type].children.forEach(c => { this.titleSearchListCopy[type].children.forEach(c => {
cascs.push(this.$refs[`${type}_${c.id}_cascader`][0]) cascs.push(this.$refs[`${type}_${c.id}_cascader`][0])
}) })
if (type === 'assetLabel') { // label特殊处理组织成{“id”:[“张三”,"lw"],"id":["李四"]} if (type === 'assetLabel' || type === 'state') { // label特殊处理组织成{“id”:[“张三”,"lw"],"id":["李四"]}
const values = {} const values = {}
cascs.forEach(c => { cascs.forEach(c => {
const nodes = c.$refs.cascader.getCheckedNodes() const nodes = c.$refs.cascader.getCheckedNodes()
nodes.forEach(n => { nodes.forEach(n => {
const metaId = n.data.metaId const metaId = n.data.metaId
if (type === 'assetLabel') {
if (values[metaId]) { if (values[metaId]) {
values[metaId].push(n.data.name) values[metaId].push(n.data.name)
} else { } else {
values[metaId] = [n.data.name] values[metaId] = [n.data.name]
} }
} else {
if (values[metaId]) {
values[metaId].push(n.data.id)
} else {
values[metaId] = [n.data.id]
}
}
}) })
}) })
const valuesStr = JSON.stringify(values) const valuesStr = JSON.stringify(values)

View File

@@ -39,7 +39,7 @@ export default {
immediate: true, immediate: true,
handler (n) { handler (n) {
this.cascaderData = [] this.cascaderData = []
if (n && this.type !== 'fields') { if (n && this.type !== 'fields' && this.type !== 'state') {
n.forEach(item => { n.forEach(item => {
if (this.item.children.find(children => children.id == item)) { if (this.item.children.find(children => children.id == item)) {
this.cascaderData.push([item]) this.cascaderData.push([item])
@@ -48,7 +48,7 @@ export default {
}) })
} }
}) })
} else if (n && this.type === 'fields') { } else if (n && (this.type === 'fields' || this.type === 'state')) {
const obj = JSON.parse(n) const obj = JSON.parse(n)
if (obj[this.item.id]) { if (obj[this.item.id]) {
obj[this.item.id].forEach(item => { obj[this.item.id].forEach(item => {

View File

@@ -59,7 +59,6 @@ export default {
this.selectValue.fields = '' this.selectValue.fields = ''
} }
} }
this.pageObj.pageNo = 1
setTimeout(() => { setTimeout(() => {
this.detailViewLoading = false this.detailViewLoading = false
this.$refs.clickSearch && this.$refs.clickSearch.needMore() this.$refs.clickSearch && this.$refs.clickSearch.needMore()

View File

@@ -702,6 +702,13 @@ export default {
this.titleSearchList[key].children = statistics[keys].map(d => { return { ...d, value: d.id } }) 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 } }) 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.titleSearchList[key].show = true
this.detailSearchList[key].show = true this.detailSearchList[key].show = true
}) })

View File

@@ -292,7 +292,7 @@ export default {
state: { state: {
label: 'State', label: 'State',
key: 'state', key: 'state',
type: 'checkBox', type: 'dropdownCheckBox',
children: [], children: [],
show: false, show: false,
showMore: false, showMore: false,
@@ -313,7 +313,7 @@ export default {
selectValue: { selectValue: {
projectIds: [], projectIds: [],
moduleIds: [], moduleIds: [],
state: [], state: '',
type: [] type: []
}, },
searchCheckBox: {}, searchCheckBox: {},
@@ -449,6 +449,11 @@ export default {
} }
this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo) this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize) this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
if (this.$route.path === '/monitor/endpoint' && !this.titleSearchList.project.children.length) {
this.$set(this.searchLabel, 'statistics', 1)
} else {
delete this.searchLabel.statistics
}
const params = { const params = {
...this.searchLabel, ...this.searchLabel,
...this.searchCheckBox ...this.searchCheckBox
@@ -458,6 +463,9 @@ export default {
this.$get(this.url, params).then(response => { this.$get(this.url, params).then(response => {
this.tools.loading = false this.tools.loading = false
if (response.code === 200) { if (response.code === 200) {
if (response.statistics && this.$route.path === '/monitor/endpoint') {
this.setSearchData(response.statistics)
}
for (let i = 0; i < response.data.list.length; i++) { for (let i = 0; i < response.data.list.length; i++) {
response.data.list[i].configs.forEach(item => { response.data.list[i].configs.forEach(item => {
item.config = JSON.parse(item.config) item.config = JSON.parse(item.config)
@@ -475,42 +483,91 @@ export default {
}) })
}, },
reloadTable (obj) { reloadTable (obj) {
Object.keys(obj).forEach(key => { const params = JSON.parse(JSON.stringify(obj))
if (key === 'change') { if (this.detailType === 'view') {
return const obj = {}
params.modelIds = params.modelIdsDetail.map(item => item.split('-')[1])
params.fieldsDetail.forEach(item => {
const arr = item.split('-')
if (obj[arr[0]]) {
obj[arr[0]].push(arr[1])
} else {
obj[arr[0]] = [arr[1]]
} }
this.searchCheckBox[key] = obj[key].join(',')
}) })
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() this.getTableData()
clearTimeout(this.timer)
this.timer = ''
}, 1000)
} else {
clearTimeout(this.timer)
this.timer = setTimeout(() => {
this.getTableData()
clearTimeout(this.timer)
this.timer = ''
}, 1000)
}
}, },
getTitleSearch () { getSearchableStateData (data) {
this.$get('monitor/project', { pageSize: -1 }).then(res => { return new Promise(resolve => {
if (res.code === 200) { // this.$get('asset/model?pageSize=-1').then(response => {
this.titleSearchList.project.children = res.data.list.map(item => { if (data) {
return { key: item.name, value: item.id, name: item.name } this.modelData = data
}) const titleSearchData = {}
this.titleSearchList.project.show = true this.modelData.forEach(m => {
m.value = []
m.metaId = m.type
if (titleSearchData[m.type]) {
titleSearchData[m.type].children.push(m)
} else {
titleSearchData[m.type] = { ...m, children: [m], name: m.type, id: m.type }
} }
}) })
this.$get('monitor/module', { pageSize: -1 }).then(res => { resolve(Object.keys(titleSearchData).map(b => titleSearchData[b]))
if (res.code === 200) { // this.titleSearchList.model.children = Object.keys(titleSearchData).map(b => titleSearchData[b])
this.titleSearchList.module.children = res.data.list.map(item => {
return { key: item.name, value: item.id, name: item.name }
})
this.titleSearchList.module.show = true
} }
resolve()
// })
}) })
this.titleSearchList.state.children = [ },
{ key: 'Down', value: 0, name: 'Down' }, setSearchData (statistics) {
{ key: 'Up', value: 1, name: 'Up' }, Object.keys(this.titleSearchList).forEach(key => {
{ key: 'Suspended', value: 2, name: 'Suspended' } let keys = key
] if (key === 'projectIds') {
// this.titleSearchList.type.children = [ keys = 'project'
// { key: 'Metrics', value: 'metrics', name: 'Metrics' }, } else if (key === 'moduleIds') {
// { key: 'Logs', value: 'logs', name: 'Logs' } keys = 'module'
// ] }
if (key === 'state') {
this.getSearchableStateData(statistics[keys]).then(res => {
this.titleSearchList.state.children = res
// this.detailSearchList.state.children = res
this.titleSearchList.state.show = true this.titleSearchList.state.show = true
// this.titleSearchList.type.show = true // this.detailSearchList.state.show = true
})
} else {
this.titleSearchList[key].children = statistics[keys].map(d => { return { ...d, value: d.id, key: d.name, name: d.name } })
// this.detailSearchList[key].children = statistics[keys].map(d => { return { ...d, value: d.id } })
}
this.titleSearchList[key].show = true
// this.detailSearchList[key].show = true
})
}, },
batchModify () { batchModify () {
if (!this.batchDeleteObjs.length) { if (!this.batchDeleteObjs.length) {
@@ -550,7 +607,7 @@ export default {
this.selectValue.projectIds = [Number(localStorage.getItem('endpointProjectId'))] this.selectValue.projectIds = [Number(localStorage.getItem('endpointProjectId'))]
// this.$refs.clickSearch.selectValueOut.projectIds = [localStorage.getItem('endpointProjectId')] // this.$refs.clickSearch.selectValueOut.projectIds = [localStorage.getItem('endpointProjectId')]
} }
this.getTitleSearch() // this.getTitleSearch()
}, },
watch: { watch: {
$route: { $route: {