dataease/frontend/src/views/panel/ViewSelect/index.vue

244 lines
6.6 KiB
Vue
Raw Normal View History

2021-03-23 13:58:49 +08:00
<template>
2021-06-04 12:22:34 +08:00
<el-col v-loading="loading">
<el-row style="margin-top: 5px">
<el-row style="margin-left: 5px;margin-right: 5px">
<el-col :span="17">
<el-input
v-model="templateFilterText"
:placeholder="$t('panel.filter_keywords')"
size="mini"
clearable
prefix-icon="el-icon-search"
/>
</el-col>
<el-col v-if="!selectModel" :span="7">
<el-button type="primary" size="mini" style="float: right" @click="newChart">新建 </el-button>
</el-col>
</el-row>
<el-row style="margin-top: 5px">
<el-tree
ref="templateTree"
:default-expanded-keys="defaultExpandedKeys"
2021-09-22 17:52:53 +08:00
:show-checkbox="selectModel"
:data="data"
node-key="id"
:props="defaultProps"
draggable
:allow-drop="allowDrop"
:allow-drag="allowDrag"
:expand-on-click-node="true"
:filter-node-method="filterNode"
:highlight-current="true"
@node-drag-start="handleDragStart"
2021-09-22 17:52:53 +08:00
@check="checkChanged"
@node-drag-end="dragEnd"
>
<span slot-scope="{ node, data }" class="custom-tree-node-list father">
<span style="display: flex; flex: 1 1 0%; width: 0px;">
<span v-if="data.modelInnerType==='history'">
<i class="el-icon-collection" />
</span>
<span v-else-if="data.nodeType === 'spine'">
<i class="el-icon-folder" />
</span>
<span v-else-if="data.modelType==='panel'&& data.nodeType === 'leaf'">
<svg-icon icon-class="panel" class="ds-icon-scene" />
</span>
<span v-else>
<svg-icon :icon-class="data.modelInnerType" style="width: 14px;height: 14px" />
</span>
<span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
</span>
<span v-if="data.mode===1" class="child">
<span @click.stop>
<el-button
icon="el-icon-delete"
type="text"
size="small"
@click="deleteHistory(data, node)"
/>
</span>
</span>
</span>
</el-tree>
</el-row>
</el-row>
</el-col>
2021-03-23 13:58:49 +08:00
</template>
<script>
import componentList from '@/components/canvas/custom-component/component-list'
import { deepCopy } from '@/components/canvas/utils/utils'
2021-10-09 00:02:06 +08:00
import eventBus from '@/components/canvas/utils/eventBus'
import { mapState } from 'vuex'
import { queryPanelViewTree } from '@/api/panel/panel'
import { deleteCircle } from '@/api/chart/chart'
import { delUser } from '@/api/system/user'
2021-10-09 00:02:06 +08:00
2021-03-23 13:58:49 +08:00
export default {
name: 'ViewSelect',
2021-09-22 17:52:53 +08:00
props: {
selectModel: {
type: Boolean,
default: false
}
},
2021-03-23 13:58:49 +08:00
data() {
return {
templateFilterText: '',
defaultExpandedKeys: [],
2021-03-23 13:58:49 +08:00
defaultProps: {
children: 'children',
2021-09-26 17:55:31 +08:00
label: 'name',
disabled: 'disabled'
2021-03-23 13:58:49 +08:00
},
data: [],
showdetail: false,
2021-06-04 12:22:34 +08:00
detailItem: null,
loading: false
2021-03-23 13:58:49 +08:00
}
},
2021-10-09 00:02:06 +08:00
computed: {
...mapState([
'canvasStyleData'
])
},
2021-03-23 13:58:49 +08:00
watch: {
templateFilterText(val) {
this.$refs.templateTree.filter(val)
2021-03-23 13:58:49 +08:00
}
},
created() {
this.loadData()
},
methods: {
filterNode(value, data) {
if (!value) return true
return data.name.indexOf(value) !== -1
},
loadData() {
2021-06-04 12:22:34 +08:00
this.loading = true
queryPanelViewTree().then(res => {
2021-09-26 17:55:31 +08:00
const nodeDatas = res.data
if (this.selectModel) {
this.setParentDisable(nodeDatas)
}
this.data = nodeDatas
2021-06-04 12:22:34 +08:00
this.loading = false
2021-03-23 13:58:49 +08:00
})
},
2021-03-25 19:16:32 +08:00
handleDragStart(node, ev) {
this.$store.commit('setDragComponentInfo', this.viewComponentInfo())
2021-03-25 19:16:32 +08:00
ev.dataTransfer.effectAllowed = 'copy'
const dataTrans = {
type: 'view',
id: node.data.innerId
2021-03-25 19:16:32 +08:00
}
ev.dataTransfer.setData('componentInfo', JSON.stringify(dataTrans))
2021-10-09 00:02:06 +08:00
eventBus.$emit('startMoveIn')
2021-03-25 19:16:32 +08:00
},
dragEnd() {
// console.log('dragEnd')
this.$store.commit('clearDragComponentInfo')
},
2021-03-25 19:16:32 +08:00
// 判断节点能否被拖拽
allowDrag(draggingNode) {
if (draggingNode.data.modelType === 'panel' || draggingNode.data.nodeType === 'spine') {
2021-03-25 19:16:32 +08:00
return false
} else {
return true
}
},
allowDrop(draggingNode, dropNode, type) {
return false
},
newChart() {
this.$emit('newChart')
2021-09-22 17:52:53 +08:00
},
2021-09-22 17:52:53 +08:00
checkChanged(node, status) {
this.$refs.templateTree.setCheckedNodes([])
if (status.checkedKeys && status.checkedKeys.length > 0) {
this.$refs.templateTree.setCheckedNodes([node])
}
},
getCurrentSelected() {
const nodes = this.$refs.templateTree.getCheckedNodes(true, false)
return nodes
},
2021-09-26 17:55:31 +08:00
setParentDisable(nodes) {
nodes.forEach(node => {
if (node.modelType === 'panel' || node.nodeType === 'spine') {
2021-09-26 17:55:31 +08:00
node.disabled = true
}
if (node.children && node.children.length > 0) {
this.setParentDisable(node.children)
}
})
},
viewComponentInfo() {
let component
// 用户视图设置 复制一个模板
componentList.forEach(componentTemp => {
if (componentTemp.type === 'view') {
component = deepCopy(componentTemp)
}
})
2021-10-09 00:02:06 +08:00
component.auxiliaryMatrix = this.canvasStyleData.auxiliaryMatrix
component.moveStatus = 'start'
return component
},
deleteHistory(data, node) {
deleteCircle(data.id).then(() => {
this.$success(this.$t('commons.delete_success'))
this.remove(node, data)
// this.loadData()
})
},
remove(node, data) {
const parent = node.parent
const children = parent.data.children || parent.data
const index = children.findIndex(d => d.id === data.id)
children.splice(index, 1)
2021-03-23 13:58:49 +08:00
}
}
}
</script>
<style lang="scss" scoped>
2021-03-25 19:16:32 +08:00
.top-div-class {
2021-03-23 13:58:49 +08:00
max-height: calc(100vh - 335px);
width: 100%;
position: fixed;
overflow-y : auto
2021-03-25 19:16:32 +08:00
}
.detail-class {
width: 300px;
2021-03-23 13:58:49 +08:00
position: fixed;
bottom: 0px;
2021-03-25 19:16:32 +08:00
}
.view-list-thumbnails {
2021-03-23 13:58:49 +08:00
width: 100%;
height: 100%;
2021-03-25 19:16:32 +08:00
}
.father .child {
/*display: none;*/
visibility: hidden;
}
.father:hover .child {
/*display: inline;*/
visibility: visible;
}
.custom-tree-node-list {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding:0 8px;
}
2021-03-23 13:58:49 +08:00
</style>