gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：修改dashboard收藏状态接口

Browse Source
This commit is contained in:
zyh
2022-07-05 16:52:52 +08:00
parent 80b9164f1a
commit 2b8ddfc5f8
3 changed files with 120 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
nezha-fronted/src/components/common/popBox/selectDashboard.vue
View File

@@ -18,10 +18,11 @@
<div class="panel-select-header"> <div class="panel-select-header">
<el-input id="panel-list-search" v-model="filterPanel" :placeholder="$t('overall.search')" clearable size="small" style="width:316px"></el-input> <el-input id="panel-list-search" v-model="filterPanel" :placeholder="$t('overall.search')" clearable size="small" style="width:316px"></el-input>
</div> </div>
<div :class="{'movable': !panelLock&&currentTab==='all'}" class="select-panel-tree"> <!-- 全部仪表盘 数据 -->
<div :class="{'movable': !panelLock}" class="select-panel-tree" v-if="currentTab==='all'">
<el-tree <el-tree
:data="treeData" :data="panelData"
:draggable="!panelLock&&currentTab==='all'" :draggable="!panelLock"
:expand-on-click-node="false" :expand-on-click-node="false"
:filter-node-method="filterNode" :filter-node-method="filterNode"
:props="{label: 'name', children: 'children'}" :props="{label: 'name', children: 'children'}"
@@ -49,7 +50,46 @@
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
<template> <template>
<i v-if="data.starred" class="nz-icon nz-icon-a-xingzhuang2" @click.stop="delStarred(data)" :title ="$t('overall.starred')"></i> <i v-if="data.starred===1" class="nz-icon nz-icon-a-xingzhuang2" @click.stop="delStarred(data)" :title ="$t('overall.starred')"></i>
<i v-else class="nz-icon nz-icon-xingzhuang" @click.stop="addStarred(data)" :title ="$t('overall.unstarred')"></i>
</template>
</el-col>
</el-row>
</div>
</el-tree>
</div>
<!-- 我的收藏、我的创建、最近浏览数据 -->
<div class="select-panel-tree" v-else>
<el-tree
:data="otherData"
:expand-on-click-node="false"
:filter-node-method="filterNode"
:props="{label: 'name', children: 'children'}"
@node-click="selectDashboard"
@node-drop="nodeDrop"
check-on-click-node
check-strictly
default-expand-all
:highlight-current="true"
node-key="id"
ref="otherTree">
<div class="tree--node" slot-scope="{ node, data }">
<HighlightText :queries="filterPanel" :highlightClass="'highlight-keyword'" style="vertical-align: middle" :title="node.label + ' (' + data.chartNum +' charts）' ">{{node.label}}</HighlightText>
<el-row class="block-col-2" style="margin-left:10px;margin-right:8px">
<el-col>
<el-dropdown v-if="!panelLock" placement="bottom-end" trigger="click" style="margin-right:10px">
<span class="el-dropdown-link tree--operation" @click.stop><i class="nz-icon nz-icon-more1"></i></span>
<el-dropdown-menu class="right-box-select-top" slot="dropdown" v-has="['main_edit', 'main_delete']">
<el-dropdown-item>
<div @click="editPanel(data)" v-has="'main_edit'"><i class="nz-icon nz-icon-edit"></i>{{$t('overall.edit')}}</div>
</el-dropdown-item>
<el-dropdown-item>
<div @click="deletePanel(data)" v-has="'main_delete'"><i class="nz-icon nz-icon-delete"></i>{{$t('overall.delete')}}</div>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<template>
<i v-if="data.starred===1" class="nz-icon nz-icon-a-xingzhuang2" @click.stop="delStarred(data)" :title ="$t('overall.starred')"></i>
<i v-else class="nz-icon nz-icon-xingzhuang" @click.stop="addStarred(data)" :title ="$t('overall.unstarred')"></i> <i v-else class="nz-icon nz-icon-xingzhuang" @click.stop="addStarred(data)" :title ="$t('overall.unstarred')"></i>
</template> </template>
</el-col> </el-col>
@@ -82,7 +122,11 @@ export default {
watch: { watch: {
filterPanel: { filterPanel: {
handler (n) { handler (n) {
if (this.currentTab === 'all') {
this.$refs.panelTree && this.$refs.panelTree.filter(n) this.$refs.panelTree && this.$refs.panelTree.filter(n)
} else {
this.$refs.otherTree && this.$refs.otherTree.filter(n)
}
} }
}, },
showPanel: { showPanel: {
@@ -97,8 +141,9 @@ export default {
}, },
panelData: { panelData: {
immediate: true, immediate: true,
async handler (n) { async handler () {
await this.getStarred() // 获取收藏列表
this.getStarred()
this.setData() this.setData()
} }
} }
@@ -116,8 +161,8 @@ export default {
currentTab: 'all', currentTab: 'all',
// 过滤值 // 过滤值
filterPanel: '', filterPanel: '',
// 树形控件数据 // 其他tab的数据（我的收藏、我的创建、最近浏览数据）
treeData: [], otherData: [],
// 收藏列表 // 收藏列表
starredList: [], starredList: [],
// 用户id // 用户id
@@ -131,9 +176,7 @@ export default {
// 新增仪表盘 // 新增仪表盘
toAdd () { toAdd () {
this.$parent.toAdd() this.$parent.toAdd()
this.esc()
}, },
// 左侧tab点击 // 左侧tab点击
tabChange (value) { tabChange (value) {
if (this.currentTab !== value) { if (this.currentTab !== value) {
@@ -144,13 +187,11 @@ export default {
}, },
// 设置树形菜单数据 // 设置树形菜单数据
setData (type = this.currentTab) { setData (type = this.currentTab) {
if (type === 'all') { // 全部 if (type === 'starred') { // 我的收藏
this.treeData = JSON.parse(JSON.stringify(this.panelData)) this.otherData = JSON.parse(JSON.stringify(this.starredList))
} else if (type === 'starred') { // 我的收藏
this.treeData = JSON.parse(JSON.stringify(this.starredList))
} else if (type === 'create') { // 我的创建 } else if (type === 'create') { // 我的创建
const flatArr = this.flatten(this.panelData) const flatArr = this.flatten(this.panelData)
this.treeData = flatArr.filter(item => item.createBy == this.userId) this.otherData = flatArr.filter(item => item.createBy == this.userId)
} else if (type === 'browse') { // 最近浏览 } else if (type === 'browse') { // 最近浏览
const browseArr = JSON.parse(localStorage.getItem(`nz-view-dashboard-${this.userId}`) || '[]') const browseArr = JSON.parse(localStorage.getItem(`nz-view-dashboard-${this.userId}`) || '[]')
const flatArr = this.flatten(this.panelData) const flatArr = this.flatten(this.panelData)
@@ -163,48 +204,26 @@ export default {
} }
}) })
}) })
this.treeData = JSON.parse(JSON.stringify(tempArr)) this.otherData = JSON.parse(JSON.stringify(tempArr))
} }
// 设置当前面板高亮 以及保持搜索状态
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.panelTree.setCurrentKey(this.showPanel) if (this.currentTab === 'all') {
this.$refs.panelTree.filter(this.filterPanel) this.$refs.panelTree && this.$refs.panelTree.setCurrentKey(this.showPanel)
// 更新父组件面板收藏状态 this.$refs.panelTree && this.$refs.panelTree.filter(this.filterPanel)
this.$set(this.$parent.showPanel, 'starred', this.starredList.some(item => item.id === this.showPanel.id)) } else {
this.$refs.otherTree && this.$refs.otherTree.setCurrentKey(this.showPanel)
this.$refs.otherTree && this.$refs.otherTree.filter(this.filterPanel)
}
}) })
}, },
// 获取收藏的列表 // 获取收藏的列表
async getStarred (type) { async getStarred () {
const params = { // 1: 已收藏 0：未收藏
type: 'panel' const flatArr = this.flatten(this.panelData) // 数组对象扁平化
} this.starredList = flatArr.filter(item => {
const response = await this.$get('/sys/user/starred', params) return item.starred === 1
this.starredList = []
this.recursionStarred(this.panelData, response.data ? response.data.list : [])
},
// 比对收藏的列表和全部列表 设置starred状态
recursionStarred (allList, starredList) {
const that = this
function handler (allList, starredList) {
allList.forEach((item) => {
item.starred = false
starredList.forEach((subItem) => {
// 判断全部列表每一项的id和收藏列表每一项的id是否相等
if (item.id === subItem.tid) {
if (that.starredList.every(val => val.id !== item.id)) {
item.starred = true
that.starredList.push({
...item,
children: []
}) })
}
}
})
if (item.children && item.children.length) {
handler(item.children, starredList)
}
})
}
handler(allList, starredList)
}, },
// 数组对象扁平化 // 数组对象扁平化
flatten (arr) { flatten (arr) {
@@ -223,7 +242,7 @@ export default {
} }
return handler(tempArr) return handler(tempArr)
}, },
// 设置最近浏览的面板 // 存储最近浏览的面板
setBrowse () { setBrowse () {
// 获取最近浏览id数组 // 获取最近浏览id数组
let browseArr = JSON.parse(localStorage.getItem(`nz-view-dashboard-${this.userId}`) || '[]') let browseArr = JSON.parse(localStorage.getItem(`nz-view-dashboard-${this.userId}`) || '[]')
@@ -257,25 +276,22 @@ export default {
} }
this.$post('/sys/user/starred', params).then(async response => { this.$post('/sys/user/starred', params).then(async response => {
if (response.code === 200) { if (response.code === 200) {
await this.getStarred() data.starred = 1
data.starred = true // 更新panelData收藏状态
// 不每次使用this.setData() 是因为会刷新树形图展开收起状态 handler(this.panelData)
if (this.currentTab === 'starred') {
this.setData()
} else {
handler(this.treeData)
function handler (list) { function handler (list) {
list.forEach(item => { list.forEach(item => {
if (item.id === data.id) { if (item.id === data.id) {
item.starred = true item.starred = 1
} else if (item.children && item.children.length > 0) { } else if (item.children && item.children.length > 0) {
handler(item.children) handler(item.children)
} }
}) })
} }
this.getStarred()
this.setData()
// 更新父组件面板收藏状态 // 更新父组件面板收藏状态
this.$set(this.$parent.showPanel, 'starred', this.starredList.some(item => item.id === this.showPanel.id)) this.$set(this.$parent.showPanel, 'starred', this.starredList.some(item => item.id === this.showPanel.id) ? 1 : 0)
}
} }
}) })
}, },
@@ -284,25 +300,22 @@ export default {
delStarred: bus.debounceFn(function (data) { delStarred: bus.debounceFn(function (data) {
this.$delete('/sys/user/starred?type=panel&tid=' + data.id).then(async response => { this.$delete('/sys/user/starred?type=panel&tid=' + data.id).then(async response => {
if (response.code === 200) { if (response.code === 200) {
await this.getStarred() data.starred = 0
data.starred = false // 更新panelData收藏状态
// 不每次使用this.setData() 是因为会刷新树形图展开收起状态 handler(this.panelData)
if (this.currentTab === 'starred') {
this.setData()
} else {
handler(this.treeData)
function handler (list) { function handler (list) {
list.forEach(item => { list.forEach(item => {
if (item.id === data.id) { if (item.id === data.id) {
item.starred = false item.starred = 0
} else if (item.children && item.children.length > 0) { } else if (item.children && item.children.length > 0) {
handler(item.children) handler(item.children)
} }
}) })
} }
this.getStarred()
this.setData()
// 更新父组件面板收藏状态 // 更新父组件面板收藏状态
this.$set(this.$parent.showPanel, 'starred', this.starredList.some(item => item.id === this.showPanel.id)) this.$set(this.$parent.showPanel, 'starred', this.starredList.some(item => item.id === this.showPanel.id) ? 1 : 0)
}
} }
}) })
}, },
@@ -330,7 +343,7 @@ export default {
const toUpdate = [] const toUpdate = []
let count = 0 let count = 0
handler(this.treeData) handler(this.panelData)
function handler (panelData) { function handler (panelData) {
panelData.forEach(panel => { panelData.forEach(panel => {
panel.weight = count++ panel.weight = count++
@@ -341,14 +354,13 @@ export default {
}) })
} }
this.$put('visual/panel/tree', toUpdate) this.$put('visual/panel/tree', toUpdate)
// 更新父组件Weight
this.$emit('updateWeight', this.treeData)
}, },
deletePanel (data) { deletePanel (data) {
this.$emit('deletePanel', data) this.$emit('deletePanel', data)
}, },
editPanel (data) { editPanel (data) {
this.$emit('editPanel', data) this.$emit('editPanel', data)
this.esc()
}, },
esc () { esc () {
this.popBox.show = false this.popBox.show = false
@@ -356,7 +368,11 @@ export default {
// 确认选择某个节点，与父组件交互 // 确认选择某个节点，与父组件交互
selectDashboard (data, checked, child) { selectDashboard (data, checked, child) {
this.$emit('selectDashboard', data) this.$emit('selectDashboard', data)
this.$refs.panelTree.setCurrentKey(data) if (this.currentTab === 'all') {
this.$refs.panelTree && this.$refs.panelTree.setCurrentKey(data)
} else {
this.$refs.otherTree && this.$refs.otherTree.setCurrentKey(data)
}
this.esc() this.esc()
} }
} }

2
nezha-fronted/src/components/common/rightBox/panelBox.vue
View File

@@ -499,10 +499,10 @@ export default {
return temp return temp
}) })
const params = { const params = {
...this.editPanel,
id: this.editPanel.id ? this.editPanel.id : '', id: this.editPanel.id ? this.editPanel.id : '',
name: this.editPanel.name, name: this.editPanel.name,
type: 'dashboard', type: 'dashboard',
pid: 0,
remark: this.editPanel.remark, remark: this.editPanel.remark,
param: { param: {
report: { report: {

14
nezha-fronted/src/components/page/dashboard/panel.vue
View File

@@ -20,14 +20,13 @@
:placement="'bottom-start'" :placement="'bottom-start'"
:show-panel="showPanel" :show-panel="showPanel"
style="display: inline-block;padding: 0" style="display: inline-block;padding: 0"
@updateWeight="updateWeight"
@deletePanel="del" @deletePanel="del"
@editPanel="edit" @editPanel="edit"
@selectDashboard="panelChange"> @selectDashboard="panelChange">
<template v-slot:trigger> <template v-slot:trigger>
<i style="color: #BEBEBE" class="el-icon-menu"></i> <i style="color: #BEBEBE" class="el-icon-menu"></i>
<span :title="showPanel.name + ' (' + showPanel.chartNum +' charts)' " class="show-panel-name">{{showPanel.name}}</span> <span :title="showPanel.name + ' (' + showPanel.chartNum +' charts)' " class="show-panel-name">{{showPanel.name}}</span>
<i @click.stop="delStarred(showPanel)" v-if="showPanel.starred" class="nz-icon nz-icon-a-xingzhuang2" :title ="$t('overall.starred')"></i> <i @click.stop="delStarred(showPanel)" v-if="showPanel.starred===1" class="nz-icon nz-icon-a-xingzhuang2" :title ="$t('overall.starred')"></i>
<i @click.stop="addStarred(showPanel)" v-else class="nz-icon nz-icon-xingzhuang" :title ="$t('overall.unstarred')"></i> <i @click.stop="addStarred(showPanel)" v-else class="nz-icon nz-icon-xingzhuang" :title ="$t('overall.unstarred')"></i>
</template> </template>
</select-dashboard> </select-dashboard>
@@ -323,10 +322,6 @@ export default {
} }
}, },
methods: { methods: {
// 更新Weight
updateWeight (value) {
this.panelData = JSON.parse(JSON.stringify(value))
},
// 新增收藏 // 新增收藏
addStarred (data) { addStarred (data) {
this.$refs.selectDashboard.addStarred(data) this.$refs.selectDashboard.addStarred(data)
@@ -398,9 +393,9 @@ export default {
}) })
}, },
edit (u) { edit (u) {
this.$get('visual/panel?ids=' + u.id).then(res => { this.$get('visual/panel/' + u.id).then(res => {
if (res.code === 200) { if (res.code === 200) {
this.panel = res.data.list[0] this.panel = res.data
if (!this.$loadsh.get(this.panel, 'param.report', '')) { if (!this.$loadsh.get(this.panel, 'param.report', '')) {
this.panel = { this.panel = {
...this.panel, ...this.panel,
@@ -446,7 +441,8 @@ export default {
return return
} }
this.rightBox.panel.show = true this.rightBox.panel.show = true
// this.$refs.panelBox.show(true) // 关闭selectDashboard弹框
this.$refs.selectDashboard && this.$refs.selectDashboard.esc()
this.panel = { this.panel = {
id: '', id: '',
name: '', name: '',