feat：dashboard收藏功能布局重构
This commit is contained in:
18317449825
@@ -1,68 +1,13 @@
|
||||
<template>
|
||||
<el-popover :placement="placement" :popper-class="chartBox === true ? 'nz-pop nz-pop-select-panel right-box-select-top nz-pop-select-panel__dropdown' : 'nz-pop nz-pop-select-panel right-box-select-top right-public-box-dropdown-top nz-pop-select-panel__dropdown'" ref="selectPanelPopBox" transition="slide" v-model="popBox.show" :width="chartBox === true ? 626 : 500" :disabled="disabled">
|
||||
<div class="panel-select-wrap">
|
||||
<div class="panel-select-left">
|
||||
<ul class="panel-select-list">
|
||||
<li class="panel-select-item active">
|
||||
<i class="nz-icon nz-icon-a-leimucuquanbu"></i>
|
||||
<span>全部仪表盘</span>
|
||||
</li>
|
||||
<li class="panel-select-item">
|
||||
<i class="nz-icon nz-icon-xingzhuang"></i>
|
||||
<span>我的收藏</span>
|
||||
</li>
|
||||
<li class="panel-select-item">
|
||||
<i class="nz-icon nz-icon-wodechuangjian"></i>
|
||||
<span>我的创建</span>
|
||||
</li>
|
||||
<li class="panel-select-item">
|
||||
<i class="nz-icon nz-icon-liulanlishi"></i>
|
||||
<span>最近浏览</span>
|
||||
</li>
|
||||
</ul>
|
||||
<slot name="tail"></slot>
|
||||
</div>
|
||||
<el-popover :placement="placement" :popper-class="chartBox === true ? 'nz-pop nz-pop-select-panel right-box-select-top nz-pop-select-panel__dropdown' : 'nz-pop nz-pop-select-panel right-box-select-top right-public-box-dropdown-top nz-pop-select-panel__dropdown'" ref="selectPanelPopBox" transition="slide" v-model="popBox.show" :width="chartBox === true ? 626 : 310" :disabled="disabled">
|
||||
<div>
|
||||
<div class="pop-item-wider">
|
||||
|
||||
<slot name="header"></slot>
|
||||
|
||||
<div :class="{'movable': !panelLock}" class="select-panel-tree">
|
||||
<el-tree
|
||||
v-show="starredData[0].children.length"
|
||||
:data="starredData"
|
||||
:expand-on-click-node="false"
|
||||
:filter-node-method="filterNode"
|
||||
:props="{label: 'name', children: 'children'}"
|
||||
@node-click="selectPanel"
|
||||
default-expand-all
|
||||
node-key="id"
|
||||
ref="starredTree"
|
||||
style="margin-bottom:5px"
|
||||
class="starred-tree"
|
||||
>
|
||||
<div class="tree--node" slot-scope="{ node, data }">
|
||||
<span :title="data.id?node.label + ' (' + data.chartNum +' charts）':''" :class="{'select-panel-title':data.id===0}">{{ node.label }}</span>
|
||||
<el-row class="block-col-2" style="margin-left:10px">
|
||||
<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 v-if="data.id">
|
||||
<i v-if="data.starred" class="nz-icon nz-icon-a-xingzhuang2" @click.stop="delStarred(data)"></i>
|
||||
<i v-else class="nz-icon nz-icon-xingzhuang" @click.stop="addStarred(data)"></i>
|
||||
</template>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-tree>
|
||||
<el-tree
|
||||
:data="treeData"
|
||||
:data="panelData"
|
||||
:draggable="!panelLock"
|
||||
:expand-on-click-node="false"
|
||||
:filter-node-method="filterNode"
|
||||
@@ -76,24 +21,20 @@
|
||||
node-key="id"
|
||||
ref="panelTree">
|
||||
<div class="tree--node" slot-scope="{ node, data }">
|
||||
<span :title="data.id?node.label + ' (' + data.chartNum +' charts）':''" :class="{'select-panel-title':data.id===0}">{{ node.label }}</span>
|
||||
<el-row class="block-col-2" style="margin-left:10px">
|
||||
<span :title="node.label + ' (' + data.chartNum +' charts）' ">{{ node.label }}</span>
|
||||
<el-row class="block-col-2" v-if="!panelLock" style="width: 35px;">
|
||||
<el-col>
|
||||
<el-dropdown v-if="!panelLock" placement="bottom-end" trigger="click" style="margin-right:10px">
|
||||
<el-dropdown placement="bottom-end" trigger="click">
|
||||
<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>
|
||||
<div @click="editPanel(data)"><i v-has="'panel_edit'" 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 v-if="data.id">
|
||||
<i v-if="data.starred" class="nz-icon nz-icon-a-xingzhuang2" @click.stop="delStarred(data)"></i>
|
||||
<i v-else class="nz-icon nz-icon-xingzhuang" @click.stop="addStarred(data)"></i>
|
||||
</template>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
@@ -104,11 +45,13 @@
|
||||
<div slot="reference">
|
||||
<slot name="trigger"></slot>
|
||||
</div>
|
||||
<div slot="default">
|
||||
<slot name="tail"></slot>
|
||||
</div>
|
||||
</el-popover>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bus from '@/libs/bus'
|
||||
export default {
|
||||
name: 'selectPanel',
|
||||
props: {
|
||||
@@ -129,7 +72,6 @@ export default {
|
||||
immediate: true,
|
||||
handler (n) {
|
||||
this.$refs.panelTree && this.$refs.panelTree.filter(n)
|
||||
this.$refs.starredTree && this.$refs.starredTree.filter(n)
|
||||
}
|
||||
},
|
||||
showPanel: {
|
||||
@@ -139,14 +81,6 @@ export default {
|
||||
this.panel = JSON.parse(JSON.stringify(n))
|
||||
}
|
||||
}
|
||||
},
|
||||
panelData: {
|
||||
immediate: true,
|
||||
handler (n) {
|
||||
if (n) {
|
||||
this.treeData[0].children = n
|
||||
}
|
||||
}
|
||||
}
|
||||
/* panel: {
|
||||
immediate: true,
|
||||
@@ -161,108 +95,10 @@ export default {
|
||||
data () {
|
||||
return {
|
||||
popBox: { show: false },
|
||||
panel: { id: 0, name: '' },
|
||||
// 全部列表
|
||||
treeData: [
|
||||
{
|
||||
id: 0,
|
||||
name: 'All Panels',
|
||||
children: []
|
||||
}
|
||||
],
|
||||
// 收藏夹列表
|
||||
starredData: [
|
||||
{
|
||||
id: 0,
|
||||
name: 'Starred Panels',
|
||||
children: []
|
||||
}
|
||||
],
|
||||
tempArr: []
|
||||
panel: { id: 0, name: '' }
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取收藏的列表
|
||||
async getStarred (type) {
|
||||
const params = {
|
||||
type: 'panel'
|
||||
}
|
||||
const response = await this.$get('/sys/user/starred', params)
|
||||
if (response.code === 200) {
|
||||
this.tempArr = []
|
||||
this.recursionStarred(this.panelData, response.data.list)
|
||||
this.starredData[0].children = this.formatStarred(this.tempArr)
|
||||
if (type === 'tree') {
|
||||
// 刷新树形控件
|
||||
this.$emit('refreshStarred', { data: this.panelData, type: 'tree' })
|
||||
} else {
|
||||
this.$emit('refreshStarred', { data: this.panelData })
|
||||
}
|
||||
}
|
||||
},
|
||||
// 比对收藏的列表和全部列表 改变状态
|
||||
recursionStarred (allList, starredList) {
|
||||
allList.forEach((item) => {
|
||||
item.starred = false
|
||||
starredList.forEach((subItem) => {
|
||||
// 判断全部列表每一项的id和收藏列表每一项的id是否相等
|
||||
if (item.id === subItem.tid) {
|
||||
if (this.tempArr.every(val => val.id !== item.id)) {
|
||||
item.starred = true
|
||||
this.tempArr.push({
|
||||
...item,
|
||||
children: []
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
if (item.children && item.children.length) {
|
||||
this.recursionStarred(item.children, starredList)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 格式化收藏列表 (树形)
|
||||
formatStarred (list) {
|
||||
const arr = JSON.parse(JSON.stringify(list))
|
||||
arr.reverse()
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
if (arr[i].pid) {
|
||||
// 找到父级所在下标
|
||||
const parentIndex = arr.findIndex(subItem => subItem.id === arr[i].pid)
|
||||
if (parentIndex > -1) {
|
||||
arr[parentIndex].children.unshift(arr[i])
|
||||
arr.splice(i, 1)
|
||||
i--
|
||||
}
|
||||
}
|
||||
}
|
||||
return arr.reverse()
|
||||
},
|
||||
// 新增收藏
|
||||
addStarred: bus.debounceFn(function (data) {
|
||||
const params = {
|
||||
type: 'panel',
|
||||
tid: data.id
|
||||
}
|
||||
this.$post('/sys/user/starred', params).then(async response => {
|
||||
if (response.code === 200) {
|
||||
await this.getStarred()
|
||||
data.starred = true
|
||||
}
|
||||
})
|
||||
},
|
||||
300, true),
|
||||
|
||||
// 删除收藏
|
||||
delStarred: bus.debounceFn(function (data) {
|
||||
this.$delete('/sys/user/starred?type=panel&tid=' + data.id).then(async response => {
|
||||
if (response.code === 200) {
|
||||
await this.getStarred()
|
||||
data.starred = false
|
||||
}
|
||||
})
|
||||
},
|
||||
300, true),
|
||||
/*
|
||||
* node: 被拖的节点
|
||||
* relative: 发生关系的节点
|
||||
@@ -283,8 +119,8 @@ export default {
|
||||
updateWeight () {
|
||||
const toUpdate = []
|
||||
let count = 0
|
||||
|
||||
handler(this.panelData)
|
||||
|
||||
function handler (panelData) {
|
||||
panelData.forEach(panel => {
|
||||
panel.weight = count++
|
||||
@@ -294,7 +130,7 @@ export default {
|
||||
}
|
||||
})
|
||||
}
|
||||
this.getStarred()
|
||||
|
||||
this.$put('visual/panel/tree', toUpdate)
|
||||
},
|
||||
deletePanel (data) {
|
||||
@@ -308,11 +144,6 @@ export default {
|
||||
},
|
||||
// 确认选择某个节点，与父组件交互
|
||||
selectPanel (data, checked, child) {
|
||||
// 判断是否点击的Starred Panels或All Panels
|
||||
if (!data.id) {
|
||||
this.$refs.panelTree.setCurrentKey(this.showPanel)
|
||||
return false
|
||||
}
|
||||
this.$emit('selectPanel', data)
|
||||
this.$refs.panelTree.setCurrentKey(data)
|
||||
this.esc()
|
||||
|
||||
Reference in New Issue
Block a user