提交 dbd2159a authored 作者: taojinlong's avatar taojinlong

Merge branch 'dev' of github.com:dataease/dataease into dev

# Conflicts: # frontend/src/views/dataset/common/DatasetGroupSelectorTree.vue
import request from '@/utils/request' import request from '@/utils/request'
export function queryAuthModel(data) { export function queryAuthModel(data, loading = true, timeout = 30000) {
return request({ return request({
url: 'authModel/queryAuthModel', url: 'authModel/queryAuthModel',
method: 'post', method: 'post',
loading: true, loading: loading,
timeout: 30000, timeout: timeout,
data data
}) })
} }
...@@ -40,7 +40,7 @@ export function chartGroupTree(data) { ...@@ -40,7 +40,7 @@ export function chartGroupTree(data) {
return request({ return request({
url: '/chart/group/tree', url: '/chart/group/tree',
method: 'post', method: 'post',
loading: true, loading: false,
data data
}) })
} }
......
...@@ -36,20 +36,22 @@ export function querySubjectWithGroup(data) { ...@@ -36,20 +36,22 @@ export function querySubjectWithGroup(data) {
}) })
} }
export function defaultTree(data) { export function defaultTree(data, loading = true, timeout = 30000) {
return request({ return request({
url: '/panel/group/defaultTree', url: '/panel/group/defaultTree',
method: 'post', method: 'post',
loading: true, loading: loading,
timeout: timeout,
data data
}) })
} }
export function groupTree(data) { export function groupTree(data, loading = true, timeout = 30000) {
return request({ return request({
url: '/panel/group/tree', url: '/panel/group/tree',
method: 'post', method: 'post',
loading: true, loading: loading,
timeout: timeout,
data data
}) })
} }
......
...@@ -7,10 +7,9 @@ ...@@ -7,10 +7,9 @@
:width="canvas_width" :width="canvas_width"
:height="canvas_height" :height="canvas_height"
/> />
<!-- <canvas id="canvas" class="de-canvas" :width="$refs.canvasContainer.clientWidth" :height="$refs.canvasContainer.clientHeight" /> -->
</div> </div>
<div style="height: 50px;display: flex;align-items: center;"> <div style="height: 50px;display: flex;align-items: center;">
<p id="fulltime" :style="{'fontSize': (parseInt(element.style.fontSize) * 1) + 'px', 'color':element.style.color}" style="width:100%;margin:auto;" /> <p :id="element.id + '_fulltime'" :style="{'fontSize': (parseInt(element.style.fontSize) * 1) + 'px', 'color':element.style.color}" style="width:100%;margin:auto;" />
</div> </div>
</div> </div>
</template> </template>
...@@ -119,7 +118,7 @@ export default { ...@@ -119,7 +118,7 @@ export default {
} }
const nowWeek = this.week[time.getDay()] const nowWeek = this.week[time.getDay()]
var fullTime = showWeek ? (nowDate + ' ' + nowWeek) : nowDate var fullTime = showWeek ? (nowDate + ' ' + nowWeek) : nowDate
var fullDoc = document.getElementById('fulltime') var fullDoc = document.getElementById(this.element.id + '_fulltime')
fullDoc.innerHTML = fullTime fullDoc.innerHTML = fullTime
const draw = draws const draw = draws
...@@ -140,8 +139,6 @@ export default { ...@@ -140,8 +139,6 @@ export default {
draw.beginPath() draw.beginPath()
draw.moveTo(0, side_length / 2 - 0) draw.moveTo(0, side_length / 2 - 0)
/* draw.moveTo(0, side_length / 2 - 70)
draw.lineTo(0, side_length / 2 - 50) */
draw.lineTo(0, side_length / 2 - 20) draw.lineTo(0, side_length / 2 - 20)
draw.closePath() draw.closePath()
draw.stroke() draw.stroke()
...@@ -157,8 +154,6 @@ export default { ...@@ -157,8 +154,6 @@ export default {
draw.beginPath() draw.beginPath()
draw.moveTo(0, side_length / 2 - 0) draw.moveTo(0, side_length / 2 - 0)
// draw.lineTo(0, side_length / 2 - 50)
// draw.lineTo(0, side_length / 2 - 60)
draw.lineTo(0, side_length / 2 - 10) draw.lineTo(0, side_length / 2 - 10)
draw.closePath() draw.closePath()
draw.stroke() draw.stroke()
...@@ -169,21 +164,18 @@ export default { ...@@ -169,21 +164,18 @@ export default {
// 画时阵 // 画时阵
draw.save() draw.save()
draw.strokeStyle = this.element.style.color draw.strokeStyle = this.element.style.color
// draw.translate(250, 250)
draw.translate(canvas_w / 2, canvas_h / 2) draw.translate(canvas_w / 2, canvas_h / 2)
const hourzs = h + min / 60// 获取浮点类型的小时 const hourzs = h + min / 60// 获取浮点类型的小时
draw.rotate(hourzs * 30 * Math.PI / 180) draw.rotate(hourzs * 30 * Math.PI / 180)
draw.lineWidth = 6 draw.lineWidth = 6
draw.beginPath() draw.beginPath()
draw.moveTo(0, 0) draw.moveTo(0, 0)
/* draw.lineTo(0, -(side_length / 2 - 60) / 3) */
draw.lineTo(0, -(side_length / 2) * 0.5) draw.lineTo(0, -(side_length / 2) * 0.5)
draw.closePath() draw.closePath()
draw.stroke() draw.stroke()
draw.restore() draw.restore()
// 画分针 // 画分针
draw.save() draw.save()
// draw.translate(250, 250)
draw.translate(canvas_w / 2, canvas_h / 2) draw.translate(canvas_w / 2, canvas_h / 2)
draw.rotate(min * 6 * Math.PI / 180) draw.rotate(min * 6 * Math.PI / 180)
...@@ -192,13 +184,11 @@ export default { ...@@ -192,13 +184,11 @@ export default {
draw.beginPath() draw.beginPath()
draw.moveTo(0, 0) draw.moveTo(0, 0)
draw.lineTo(0, -(side_length / 2) * 0.7) draw.lineTo(0, -(side_length / 2) * 0.7)
/* draw.lineTo(0, -(side_length / 2 - 60) * 3 / 5) */
draw.closePath() draw.closePath()
draw.stroke() draw.stroke()
draw.restore() draw.restore()
// 画秒针 // 画秒针
draw.save() draw.save()
// draw.translate(250, 250)
draw.translate(canvas_w / 2, canvas_h / 2) draw.translate(canvas_w / 2, canvas_h / 2)
draw.rotate(s * 6 * Math.PI / 180) draw.rotate(s * 6 * Math.PI / 180)
draw.strokeStyle = this.element.style.color draw.strokeStyle = this.element.style.color
...@@ -206,16 +196,13 @@ export default { ...@@ -206,16 +196,13 @@ export default {
draw.beginPath() draw.beginPath()
draw.moveTo(0, 15) draw.moveTo(0, 15)
draw.lineTo(0, -(side_length / 2) * 0.9) draw.lineTo(0, -(side_length / 2) * 0.9)
/* draw.lineTo(0, -(side_length / 2 - 60)) */
draw.closePath() draw.closePath()
draw.stroke() draw.stroke()
draw.restore() draw.restore()
// 画中心原点 // 画中心原点
// draw.fillStyle = 'rgba(255,255,255,1)'
draw.lineWidth = 2 draw.lineWidth = 2
draw.beginPath() draw.beginPath()
// draw.arc(250, 250, 4, 0, 360, false)
draw.arc(canvas_w / 2, canvas_h / 2, 4, 0, 360, false) draw.arc(canvas_w / 2, canvas_h / 2, 4, 0, 360, false)
draw.closePath() draw.closePath()
draw.fill() draw.fill()
......
...@@ -1157,7 +1157,11 @@ export default { ...@@ -1157,7 +1157,11 @@ export default {
union_data: 'Union Dataset', union_data: 'Union Dataset',
add_union_table: 'Add Union Dataset', add_union_table: 'Add Union Dataset',
edit_union: 'Edit Union Dataset', edit_union: 'Edit Union Dataset',
union: 'Union' union: 'Union',
edit_union_relation: 'Edit Union Relation',
add_union_relation: 'Add Union Relation',
field_select: 'Select Field',
add_union_field: 'Add Union Field'
}, },
datasource: { datasource: {
datasource: 'Data Source', datasource: 'Data Source',
......
...@@ -1158,7 +1158,11 @@ export default { ...@@ -1158,7 +1158,11 @@ export default {
union_data: '關聯數據集', union_data: '關聯數據集',
add_union_table: '添加關聯數據集', add_union_table: '添加關聯數據集',
edit_union: '編輯關聯數據集', edit_union: '編輯關聯數據集',
union: '關聯' union: '關聯',
edit_union_relation: '編輯關聯關系',
add_union_relation: '新建關聯關系',
field_select: '字段選擇',
add_union_field: '添加關聯字段'
}, },
datasource: { datasource: {
datasource: '數據源', datasource: '數據源',
......
...@@ -1160,7 +1160,11 @@ export default { ...@@ -1160,7 +1160,11 @@ export default {
union_data: '关联数据集', union_data: '关联数据集',
add_union_table: '添加关联数据集', add_union_table: '添加关联数据集',
edit_union: '编辑关联数据集', edit_union: '编辑关联数据集',
union: '关联' union: '关联',
edit_union_relation: '编辑关联关系',
add_union_relation: '新建关联关系',
field_select: '字段选择',
add_union_field: '添加关联字段'
}, },
datasource: { datasource: {
datasource: '数据源', datasource: '数据源',
......
...@@ -694,8 +694,8 @@ div:focus { ...@@ -694,8 +694,8 @@ div:focus {
.rate-date-class > .el-picker-panel__footer > .el-button--text:first-child{ .rate-date-class > .el-picker-panel__footer > .el-button--text:first-child{
display: none; display: none;
} }
.rate-date-class > .el-picker-panel__body-wrapper > .el-picker-panel__body { .rate-date-class > .el-picker-panel__body-wrapper > .el-picker-panel__body {
>.el-date-picker__header { >.el-date-picker__header {
display: none; display: none;
} }
...@@ -709,11 +709,11 @@ div:focus { ...@@ -709,11 +709,11 @@ div:focus {
} }
} }
} }
} }
.rate-day-class > .el-picker-panel__footer > .el-button--text:first-child{ .rate-day-class > .el-picker-panel__footer > .el-button--text:first-child{
display: none; display: none;
} }
.rate-day-class > .el-picker-panel__body-wrapper > .el-picker-panel__body { .rate-day-class > .el-picker-panel__body-wrapper > .el-picker-panel__body {
>.el-date-picker__header { >.el-date-picker__header {
display: none; display: none;
} }
...@@ -722,10 +722,9 @@ div:focus { ...@@ -722,10 +722,9 @@ div:focus {
>tr:not(:nth-child(3)) { >tr:not(:nth-child(3)) {
display: none; display: none;
} }
}
} }
} }
}
.chart-type .el-radio__input{ .chart-type .el-radio__input{
display: none!important; display: none!important;
...@@ -735,10 +734,22 @@ div:focus { ...@@ -735,10 +734,22 @@ div:focus {
padding-left: 0!important; padding-left: 0!important;
} }
.chart-type .radio-row .radio-style{
width: 80px;
height: 60px;
padding: 0;
}
.el-color-predefine__color-selector{ .el-color-predefine__color-selector{
border: 1px solid #999999!important; border: 1px solid #999999!important;
margin: 0 0 6px 6px!important; margin: 0 0 6px 6px!important;
} }
.de-checkbox {
width: 100%;
margin-left: 0px !important;
.el-checkbox__input {
padding: 0 0 8px 0 !important;
}
}
...@@ -337,6 +337,11 @@ export default { ...@@ -337,6 +337,11 @@ export default {
type: String, type: String,
required: false, required: false,
default: null default: null
},
mountedInit: {
type: Boolean,
required: false,
default: true
} }
}, },
data() { data() {
...@@ -440,10 +445,11 @@ export default { ...@@ -440,10 +445,11 @@ export default {
}, },
mounted() { mounted() {
this.treeNode(this.groupForm) if (this.mountedInit) {
this.treeNode(true)
this.refresh() this.refresh()
// this.chartTree()
this.getChartGroupTree() this.getChartGroupTree()
}
}, },
methods: { methods: {
clickAdd(param) { clickAdd(param) {
...@@ -620,9 +626,17 @@ export default { ...@@ -620,9 +626,17 @@ export default {
}) })
}, },
treeNode(group) { treeNode(cache = false) {
queryAuthModel({ modelType: 'chart' }).then(res => { const modelInfo = localStorage.getItem('chart-tree')
const userCache = (modelInfo && cache)
if (userCache) {
this.tData = JSON.parse(modelInfo)
}
queryAuthModel({ modelType: 'chart' }, !userCache).then(res => {
localStorage.setItem('chart-tree', JSON.stringify(res.data))
if (!userCache) {
this.tData = res.data this.tData = res.data
}
}) })
}, },
......
...@@ -487,10 +487,4 @@ export default { ...@@ -487,10 +487,4 @@ export default {
white-space: pre; white-space: pre;
font-size: 12px; font-size: 12px;
} }
.radio-style{
width: 80px;
height: 60px;
padding: 0;
}
</style> </style>
...@@ -28,22 +28,44 @@ ...@@ -28,22 +28,44 @@
</div> </div>
<!--数据集关联树型结构--> <!--数据集关联树型结构-->
<div v-else class="union-container"> <div v-else class="union-container">
<node-item :current-node="dataset[0]" :node-index="0" @deleteNode="deleteNode" @notifyParent="calc" /> <node-item
:current-node="dataset[0]"
:node-index="0"
@deleteNode="deleteNode"
@notifyParent="calc"
@editUnion="unionConfig"
/>
<div v-if="dataset.length > 0"> <div v-if="dataset.length > 0">
<union-node v-for="(item,index) in dataset[0].childrenDs" :key="index" :node-index="index" :children-node="item" :children-list="dataset[0].childrenDs" @notifyParent="calc" /> <union-node
v-for="(item,index) in dataset[0].childrenDs"
:key="index"
:node-index="index"
:children-node="item"
:children-list="dataset[0].childrenDs"
:parent-node="dataset[0]"
@notifyParent="calc"
/>
</div> </div>
</div> </div>
</div> </div>
<!--选择数据集--> <!--选择数据集-->
<el-dialog v-dialogDrag :title="$t('chart.select_dataset')" :visible="selectDsDialog" :show-close="false" width="30%" class="dialog-css" destroy-on-close> <el-dialog v-dialogDrag :title="$t('chart.select_dataset')" :visible="selectDsDialog" :show-close="false" width="360px" class="dialog-css" destroy-on-close>
<dataset-group-selector-tree :fix-height="true" show-mode="union" :custom-type="customType" @getTable="firstDs" /> <dataset-group-selector-tree :fix-height="true" show-mode="union" :custom-type="customType" @getTable="firstDs" />
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button size="mini" @click="closeSelectDs()">{{ $t('dataset.cancel') }}</el-button> <el-button size="mini" @click="closeSelectDs()">{{ $t('dataset.cancel') }}</el-button>
<el-button type="primary" size="mini" @click="confirmSelectDs()">{{ $t('dataset.confirm') }}</el-button> <el-button :disabled="!tempDs.id" type="primary" size="mini" @click="confirmSelectDs()">{{ $t('dataset.confirm') }}</el-button>
</div> </div>
</el-dialog> </el-dialog>
<!--编辑关联关系-->
<el-dialog v-if="editUnion" v-dialogDrag top="5vh" :title="unionParam.type === 'add' ? $t('dataset.add_union_relation') : $t('dataset.edit_union_relation')" :visible="editUnion" :show-close="false" width="600px" class="dialog-css">
<union-edit :union-param="unionParam" />
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="closeEditUnion()">{{ $t('dataset.cancel') }}</el-button>
<el-button type="primary" size="mini" @click="confirmEditUnion()">{{ $t('dataset.confirm') }}</el-button>
</div>
</el-dialog>
</el-row> </el-row>
</template> </template>
...@@ -51,9 +73,10 @@ ...@@ -51,9 +73,10 @@
import UnionNode from '@/views/dataset/add/union/UnionNode' import UnionNode from '@/views/dataset/add/union/UnionNode'
import NodeItem from '@/views/dataset/add/union/NodeItem' import NodeItem from '@/views/dataset/add/union/NodeItem'
import DatasetGroupSelectorTree from '@/views/dataset/common/DatasetGroupSelectorTree' import DatasetGroupSelectorTree from '@/views/dataset/common/DatasetGroupSelectorTree'
import UnionEdit from '@/views/dataset/add/union/UnionEdit'
export default { export default {
name: 'AddUnion', name: 'AddUnion',
components: { DatasetGroupSelectorTree, NodeItem, UnionNode }, components: { UnionEdit, DatasetGroupSelectorTree, NodeItem, UnionNode },
props: { props: {
param: { param: {
type: Object, type: Object,
...@@ -72,7 +95,7 @@ export default { ...@@ -72,7 +95,7 @@ export default {
currentDsField: [], currentDsField: [],
childrenDs: [], childrenDs: [],
unionToParent: { unionToParent: {
unionType: '', // left join,right join,inner join unionType: 'left', // left join,right join,inner join
unionFields: [ unionFields: [
{ {
parentField: {}, parentField: {},
...@@ -94,7 +117,7 @@ export default { ...@@ -94,7 +117,7 @@ export default {
currentDsField: [], currentDsField: [],
childrenDs: [], childrenDs: [],
unionToParent: { unionToParent: {
unionType: '', unionType: 'left',
unionFields: [] unionFields: []
}, },
allChildCount: 0 allChildCount: 0
...@@ -103,7 +126,9 @@ export default { ...@@ -103,7 +126,9 @@ export default {
customType: ['db', 'sql', 'excel'], customType: ['db', 'sql', 'excel'],
selectDsDialog: false, selectDsDialog: false,
// 弹框临时选中的数据集 // 弹框临时选中的数据集
tempDs: {} tempDs: {},
editUnion: false,
unionParam: {}
} }
}, },
mounted() { mounted() {
...@@ -154,6 +179,22 @@ export default { ...@@ -154,6 +179,22 @@ export default {
} }
} }
} }
},
unionConfig(param) {
this.unionParam = param
this.editUnion = true
},
closeEditUnion() {
this.editUnion = false
// 添加关联的时候,如果关闭关联关系设置的界面,则删除子节点,同时向父级传递消息
if (this.unionParam.type === 'add') {
this.dataset[0].childrenDs.pop()
this.calc({ type: 'delete', grandParentAdd: true, grandParentSub: true, subCount: 0 })
}
},
confirmEditUnion() {
this.editUnion = false
} }
} }
} }
......
<template> <template>
<div> <div>
<div class="ds-node" @click="nodeClick"> <div class="ds-node" @click="nodeClick">
<svg-icon v-if="currentNode.currentDs.type === 'db'" icon-class="ds-db" class="ds-icon-db" /> <svg-icon v-if="currentNode.currentDs.modelInnerType === 'db'" icon-class="ds-db" class="ds-icon-db" />
<svg-icon v-else-if="currentNode.currentDs.type === 'sql'" icon-class="ds-sql" class="ds-icon-sql" /> <svg-icon v-else-if="currentNode.currentDs.modelInnerType === 'sql'" icon-class="ds-sql" class="ds-icon-sql" />
<svg-icon v-else-if="currentNode.currentDs.type === 'excel'" icon-class="ds-excel" class="ds-icon-excel" /> <svg-icon v-else-if="currentNode.currentDs.modelInnerType === 'excel'" icon-class="ds-excel" class="ds-icon-excel" />
<span class="node-name" :title="currentNode.currentDs.name">{{ currentNode.currentDs.name }}</span> <span class="node-name" :title="currentNode.currentDs.name">{{ currentNode.currentDs.name }}</span>
...@@ -28,11 +28,20 @@ ...@@ -28,11 +28,20 @@
</div> </div>
<!--选择数据集--> <!--选择数据集-->
<el-dialog v-dialogDrag :title="$t('chart.select_dataset')" :visible="selectDsDialog" :show-close="false" width="30%" class="dialog-css" destroy-on-close> <el-dialog v-dialogDrag :title="$t('chart.select_dataset')" :visible="selectDsDialog" :show-close="false" width="360px" class="dialog-css" destroy-on-close>
<dataset-group-selector-tree :fix-height="true" show-mode="union" :custom-type="customType" @getTable="firstDs" /> <dataset-group-selector-tree :fix-height="true" show-mode="union" :custom-type="customType" @getTable="firstDs" />
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button size="mini" @click="closeSelectDs()">{{ $t('dataset.cancel') }}</el-button> <el-button size="mini" @click="closeSelectDs()">{{ $t('dataset.cancel') }}</el-button>
<el-button type="primary" size="mini" @click="confirmSelectDs()">{{ $t('dataset.confirm') }}</el-button> <el-button :disabled="!tempDs.id" type="primary" size="mini" @click="confirmSelectDs()">{{ $t('dataset.confirm') }}</el-button>
</div>
</el-dialog>
<!--编辑单个数据集字段-->
<el-dialog v-if="editField" v-dialogDrag :title="$t('dataset.field_select')" :visible="editField" :show-close="false" width="360px" class="dialog-css" destroy-on-close>
<union-field-edit :node="currentNode" />
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="closeEditField()">{{ $t('dataset.cancel') }}</el-button>
<el-button type="primary" size="mini" @click="confirmEditField()">{{ $t('dataset.confirm') }}</el-button>
</div> </div>
</el-dialog> </el-dialog>
</div> </div>
...@@ -40,9 +49,10 @@ ...@@ -40,9 +49,10 @@
<script> <script>
import DatasetGroupSelectorTree from '@/views/dataset/common/DatasetGroupSelectorTree' import DatasetGroupSelectorTree from '@/views/dataset/common/DatasetGroupSelectorTree'
import UnionFieldEdit from '@/views/dataset/add/union/UnionFieldEdit'
export default { export default {
name: 'NodeItem', name: 'NodeItem',
components: { DatasetGroupSelectorTree }, components: { UnionFieldEdit, DatasetGroupSelectorTree },
props: { props: {
currentNode: { currentNode: {
type: Object, type: Object,
...@@ -60,7 +70,7 @@ export default { ...@@ -60,7 +70,7 @@ export default {
currentDsField: [], currentDsField: [],
childrenDs: [], childrenDs: [],
unionToParent: { unionToParent: {
unionType: '', unionType: 'left',
unionFields: [] unionFields: []
}, },
allChildCount: 0 allChildCount: 0
...@@ -70,12 +80,13 @@ export default { ...@@ -70,12 +80,13 @@ export default {
// 弹框临时选中的数据集 // 弹框临时选中的数据集
tempDs: {}, tempDs: {},
// 父级数据集 // 父级数据集
tempParentDs: {} tempParentDs: {},
editField: false
} }
}, },
methods: { methods: {
nodeClick() { nodeClick() {
console.log('node click to edit') this.editField = true
}, },
nodeMenuClick(param) { nodeMenuClick(param) {
switch (param.type) { switch (param.type) {
...@@ -102,6 +113,7 @@ export default { ...@@ -102,6 +113,7 @@ export default {
this.selectDs() this.selectDs()
}, },
editNode(param) { editNode(param) {
this.nodeClick()
}, },
deleteNode(param) { deleteNode(param) {
this.$emit('deleteNode', this.nodeIndex) this.$emit('deleteNode', this.nodeIndex)
...@@ -125,9 +137,25 @@ export default { ...@@ -125,9 +137,25 @@ export default {
this.tempParentDs.childrenDs.push(ds) this.tempParentDs.childrenDs.push(ds)
this.closeSelectDs() this.closeSelectDs()
this.notifyFirstParent('union') this.notifyFirstParent('union')
// 构建新建关联关系传递的参数
const param = {
type: 'add',
nodeIndex: this.nodeIndex,
node: ds,
parent: this.tempParentDs
}
this.$emit('editUnion', param)
}, },
// 增加与删除事件向父级传递
notifyFirstParent(type) { notifyFirstParent(type) {
this.$emit('notifyParent', { type: type, grandParentAdd: true, grandParentSub: true, subCount: this.currentNode.allChildCount }) this.$emit('notifyParent', { type: type, grandParentAdd: true, grandParentSub: true, subCount: this.currentNode.allChildCount })
},
closeEditField() {
this.editField = false
},
confirmEditField() {
this.editField = false
} }
} }
} }
...@@ -163,4 +191,7 @@ export default { ...@@ -163,4 +191,7 @@ export default {
cursor: pointer; cursor: pointer;
border: var(--Main,#2681ff) solid 1px; border: var(--Main,#2681ff) solid 1px;
} }
.dialog-css >>> .el-dialog__body {
padding: 0 20px;
}
</style> </style>
<template>
<div v-if="unionParam.type" style="height:600px;">
<div class="field-style">
<div class="fields">
<p>{{ unionParam.parent.currentDs.name }}</p>
<union-field-list :field-list="parentField" :node="unionParam.parent" @checkedFields="changeParentFields" />
</div>
<div class="fields">
<p>{{ unionParam.node.currentDs.name }}</p>
<union-field-list :field-list="nodeField" :node="unionParam.node" @checkedFields="changeNodeFields" />
</div>
</div>
<el-divider />
<union-item-edit :parent-field-list="parentField" :node-field-list="nodeField" :union-param="unionParam" />
</div>
</template>
<script>
import { post } from '@/api/dataset/dataset'
import UnionFieldList from '@/views/dataset/add/union/UnionFieldList'
import UnionItemEdit from '@/views/dataset/add/union/UnionItemEdit'
export default {
name: 'UnionEdit',
components: { UnionItemEdit, UnionFieldList },
props: {
unionParam: {
type: Object,
required: true
}
},
data() {
return {
parentField: [],
nodeField: []
}
},
watch: {
'unionParam': function() {
}
},
mounted() {
this.getParentFieldList()
this.getNodeFieldList()
},
methods: {
getParentFieldList() {
post('/dataset/field/list/' + this.unionParam.parent.currentDs.id, null, true).then(response => {
this.parentField = JSON.parse(JSON.stringify(response.data)).filter(ele => ele.extField === 0)
})
},
getNodeFieldList() {
post('/dataset/field/list/' + this.unionParam.node.currentDs.id, null, true).then(response => {
this.nodeField = JSON.parse(JSON.stringify(response.data)).filter(ele => ele.extField === 0)
})
},
changeParentFields(val) {
this.unionParam.parent.currentDsField = val
},
changeNodeFields(val) {
this.unionParam.node.currentDsField = val
}
}
}
</script>
<style scoped>
.field-style{
height: 300px;
}
.fields{
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width: 50%;
float: left;
padding: 0 6px;
}
p{
font-size: 14px;
margin: 6px 0!important;
}
.el-divider--horizontal {
margin: 12px 0;
}
</style>
<template>
<div>
<p>{{ node.currentDs.name }}</p>
<union-field-list :field-list="fieldList" :node="node" @checkedFields="changeFields" />
</div>
</template>
<script>
import { post } from '@/api/dataset/dataset'
import UnionFieldList from '@/views/dataset/add/union/UnionFieldList'
export default {
name: 'UnionFieldEdit',
components: { UnionFieldList },
props: {
node: {
type: Object,
required: true
}
},
data() {
return {
fieldList: []
}
},
mounted() {
this.getFieldList()
},
methods: {
getFieldList() {
post('/dataset/field/list/' + this.node.currentDs.id, null, true).then(response => {
this.fieldList = JSON.parse(JSON.stringify(response.data)).filter(ele => ele.extField === 0)
})
},
changeFields(val) {
this.node.currentDsField = val
}
}
}
</script>
<style scoped>
</style>
<template>
<div>
<div class="field-block-style">
<div class="field-block-option">
<span class="option-field">{{ $t('dataset.field_select') }}({{ checkedFields.length }}/{{ fieldList.length }})</span>
<el-input
v-model="search"
size="mini"
:placeholder="$t('dataset.search')"
prefix-icon="el-icon-search"
clearable
class="option-input"
/>
</div>
<div class="field-block-head">
<el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" class="check-style" @change="handleCheckAllChange">&nbsp;</el-checkbox>
<span class="label-style">
<span class="field-origin-style">{{ $t('dataset.field_origin_name') }}</span>
<span class="field-style">{{ $t('dataset.field_name') }}</span>
</span>
</div>
<div class="field-block-body">
<el-checkbox-group v-model="checkedFields" @change="handleCheckedCitiesChange">
<div v-for="field in fieldSearchList" :key="field.id" class="field-item-style">
<el-checkbox :label="field.id" class="check-style">&nbsp;</el-checkbox>
<span class="label-style">
<span class="field-origin-style" :title="field.originName">
<span>
<svg-icon v-if="field.deType === 0" icon-class="field_text" class="field-icon-text" />
<svg-icon v-if="field.deType === 1" icon-class="field_time" class="field-icon-time" />
<svg-icon v-if="field.deType === 2 || field.deType === 3" icon-class="field_value" class="field-icon-value" />
<svg-icon v-if="field.deType === 5" icon-class="field_location" class="field-icon-location" />
</span>
<span class="origin-style">
{{ field.originName }}
</span>
</span>
<span class="field-style" :title="field.name">{{ field.name }}</span>
</span>
</div>
</el-checkbox-group>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'UnionFieldList',
props: {
fieldList: {
type: Array,
required: true
},
node: {
type: Object,
required: true
}
},
data() {
return {
checkAll: false,
isIndeterminate: false,
checkedFields: [],
search: '',
fieldSearchList: []
}
},
watch: {
fieldList: function() {
this.fieldSearchList = JSON.parse(JSON.stringify(this.fieldList))
this.init()
},
search: function(val) {
if (val && val !== '') {
this.fieldSearchList = JSON.parse(JSON.stringify(this.fieldList)).filter(ele => ele.originName.toLocaleLowerCase().includes(val.toLocaleLowerCase()))
} else {
this.fieldSearchList = JSON.parse(JSON.stringify(this.fieldList))
}
}
},
mounted() {
this.init()
},
methods: {
init() {
this.checkedFields = this.node.currentDsField
this.handleCheckedCitiesChange(this.checkedFields)
},
handleCheckAllChange(val) {
this.checkedFields = val ? this.fieldList.map(ele => ele.id) : []
this.isIndeterminate = false
this.returnCheckedFields()
},
handleCheckedCitiesChange(value) {
const checkedCount = value.length
this.checkAll = checkedCount === this.fieldList.length
this.isIndeterminate = checkedCount > 0 && checkedCount < this.fieldList.length
this.returnCheckedFields()
},
returnCheckedFields() {
this.$emit('checkedFields', this.checkedFields)
}
}
}
</script>
<style scoped>
span{
font-size: 12px;
}
.field-block-style{
height: 300px;
width: 100%;
}
.field-block-head{
height: 30px;
display: flex;
align-items: center;
background: rgba(0, 0, 0, 0.05);
padding: 0 0 0 10px;
}
.field-block-body{
height: 210px;
overflow-y: auto;
}
.field-origin-style{
width: 100px;
display: flex;
align-items: center;
}
.field-style{
margin-left: 10px;
width: 100px;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: pre;
}
.label-style{
display: flex;
align-items: center;
}
.field-item-style{
width: 100%;
height: 30px;
display: flex;
align-items: center;
border-top:1px solid #dcdfe6;
padding: 0 0 0 10px;
}
.check-style{
width: 30px;
text-align: center;
}
.origin-style{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
}
.field-block-option{
width: 100%;
height: 30px;
display: flex;
align-items: center;
justify-content: space-between;
}
.option-field{
color: #C0C4CC;
}
.option-input{
width: 120px;
}
</style>
<template>
<div class="container">
<div class="union-header">
{{ $t('dataset.join_view') }}
<div class="union-header-operator">
<svg-icon v-if="unionParam.node.unionToParent.unionType === 'left'" icon-class="left-join" class="join-icon" />
<svg-icon v-else-if="unionParam.node.unionToParent.unionType === 'right'" icon-class="right-join" class="join-icon" />
<svg-icon v-else-if="unionParam.node.unionToParent.unionType === 'inner'" icon-class="inner-join" class="join-icon" />
<svg-icon v-else icon-class="no-join" class="join-icon" />
<el-select v-model="unionParam.node.unionToParent.unionType" size="mini" class="union-selector">
<el-option v-for="item in unionOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-button size="mini" icon="el-icon-circle-plus-outline" class="union-add" @click="addUnion">{{ $t('dataset.add_union_field') }}</el-button>
</div>
</div>
<div class="union-body">
<div class="union-body-header">
<span class="column" :title="unionParam.parent.currentDs.name">{{ unionParam.parent.currentDs.name }}</span>
<span class="column" :title="unionParam.node.currentDs.name">{{ unionParam.node.currentDs.name }}</span>
<span class="column-last">{{ $t('dataset.operator') }}</span>
</div>
<div class="union-body-container">
<div v-for="(field,index) in unionParam.node.unionToParent.unionFields" :key="index" class="union-body-item">
<!--左侧父级field-->
<span class="column">
<el-select v-model="field.parentField.id" :placeholder="$t('dataset.pls_slc_union_field')" filterable clearable size="mini" class="select-field">
<el-option
v-for="item in parentFieldList"
:key="item.id"
:label="item.name"
:value="item.id"
>
<span>
<span v-if="item.deType === 0">
<svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
</span>
<span v-if="item.deType === 1">
<svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
</span>
<span v-if="item.deType === 2 || item.deType === 3">
<svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
</span>
<span v-if="item.deType === 5">
<svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
</span>
</span>
<span>
{{ item.name }}
</span>
</el-option>
</el-select>
</span>
<!--右侧孩子field-->
<span class="column">
<el-select v-model="field.currentField.id" :placeholder="$t('dataset.pls_slc_union_field')" filterable clearable size="mini" class="select-field">
<el-option
v-for="item in nodeFieldList"
:key="item.id"
:label="item.name"
:value="item.id"
>
<span>
<span v-if="item.deType === 0">
<svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
</span>
<span v-if="item.deType === 1">
<svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
</span>
<span v-if="item.deType === 2 || item.deType === 3">
<svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
</span>
<span v-if="item.deType === 5">
<svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
</span>
</span>
<span>
{{ item.name }}
</span>
</el-option>
</el-select>
</span>
<span class="column-last">
<el-button :disabled="unionParam.node.unionToParent.unionFields && unionParam.node.unionToParent.unionFields.length === 1" icon="el-icon-delete" circle size="mini" @click="removeUnionItem(index)" />
</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'UnionItemEdit',
props: {
parentFieldList: {
type: Array,
required: true
},
nodeFieldList: {
type: Array,
required: true
},
unionParam: {
type: Object,
required: true
}
},
data() {
return {
unionOptions: [
{ label: this.$t('dataset.left_join'), value: 'left' },
{ label: this.$t('dataset.right_join'), value: 'right' },
{ label: this.$t('dataset.inner_join'), value: 'inner' }
]
}
},
watch: {
},
mounted() {
this.init()
},
methods: {
init() {
if (this.unionParam.node.unionToParent.unionFields.length < 1) {
const item = {
parentField: {},
currentField: {}
}
this.unionParam.node.unionToParent.unionFields.push(item)
}
},
addUnion() {
const item = {
parentField: {},
currentField: {}
}
this.unionParam.node.unionToParent.unionFields.push(item)
},
removeUnionItem(index) {
this.unionParam.node.unionToParent.unionFields.splice(index, 1)
}
}
}
</script>
<style scoped>
span{
font-size: 12px;
}
.container{
height: 275px;
}
.union-header{
display: flex;
align-items: center;
width: 100%;
justify-content: space-between;
height: 35px;
}
.union-header-operator{
display: flex;
align-items: center;
justify-content: end;
}
.union-selector{
display: inline-block;
width: 100px;
margin-left: 6px;
}
.union-add{
margin-left: 6px;
}
.union-body{
height: 240px;
}
.union-body-header{
height: 30px;
align-items: center;
justify-content: space-between;
display: flex;
}
.union-body-header .column{
width: 240px;
display: inline-block;
margin-right: 20px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.union-body-header .column-last{
width: 40px;
}
.union-body-container{
height: 180px;
overflow-y: auto;
}
.select-field{
width: 200px;
display: inline-block;
}
.union-body-item{
height: 36px;
align-items: center;
justify-content: space-between;
display: flex;
}
.union-body-item .column{
width: 240px;
display: inline-block;
margin-right: 20px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.union-body-item .column-last{
width: 40px;
}
</style>
<template> <template>
<div class="children-node node-container" :style="{height:nodeHeight}"> <div class="children-node node-container" :style="{height:nodeHeight}">
<div class="node-line"> <div class="node-line">
<svg-icon v-if="childrenNode.unionToParent.unionType === 'left'" icon-class="left-join" class="join-icon" @click="unionConfig" /> <svg-icon v-if="childrenNode.unionToParent.unionType === 'left'" icon-class="left-join" class="join-icon" @click="unionEdit" />
<svg-icon v-else-if="childrenNode.unionToParent.unionType === 'right'" icon-class="right-join" class="join-icon" @click="unionConfig" /> <svg-icon v-else-if="childrenNode.unionToParent.unionType === 'right'" icon-class="right-join" class="join-icon" @click="unionEdit" />
<svg-icon v-else-if="childrenNode.unionToParent.unionType === 'inner'" icon-class="inner-join" class="join-icon" @click="unionConfig" /> <svg-icon v-else-if="childrenNode.unionToParent.unionType === 'inner'" icon-class="inner-join" class="join-icon" @click="unionEdit" />
<svg-icon v-else icon-class="no-join" class="join-icon" @click="unionConfig" /> <svg-icon v-else icon-class="no-join" class="join-icon" @click="unionEdit" />
<svg class="join-svg-container"> <svg class="join-svg-container">
<path fill="none" stroke="#dcdfe6" :d="pathParam + lineLength" /> <path fill="none" stroke="#dcdfe6" :d="pathParam + lineLength" />
</svg> </svg>
</div> </div>
<node-item :current-node="childrenNode" :node-index="nodeIndex" @deleteNode="deleteNode" @notifyParent="calc" /> <node-item
:current-node="childrenNode"
:node-index="nodeIndex"
@deleteNode="deleteNode"
@notifyParent="calc"
@editUnion="unionConfig"
/>
<!--递归调用自身,完成树状结构--> <!--递归调用自身,完成树状结构-->
<div> <div>
<union-node v-for="(item,index) in childrenNode.childrenDs" :key="index" :node-index="index" :children-node="item" :children-list="childrenNode.childrenDs" @notifyParent="calc" /> <union-node
v-for="(item,index) in childrenNode.childrenDs"
:key="index"
:node-index="index"
:children-node="item"
:children-list="childrenNode.childrenDs"
:parent-node="childrenNode"
@notifyParent="calc"
/>
</div> </div>
<!--编辑关联关系-->
<el-dialog v-if="editUnion" v-dialogDrag top="5vh" :title="unionParam.type === 'add' ? $t('dataset.add_union_relation') : $t('dataset.edit_union_relation')" :visible="editUnion" :show-close="false" width="600px" class="dialog-css" destroy-on-close>
<union-edit :union-param="unionParam" />
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="closeEditUnion()">{{ $t('dataset.cancel') }}</el-button>
<el-button type="primary" size="mini" @click="confirmEditUnion()">{{ $t('dataset.confirm') }}</el-button>
</div>
</el-dialog>
</div> </div>
</template> </template>
<script> <script>
import NodeItem from '@/views/dataset/add/union/NodeItem' import NodeItem from '@/views/dataset/add/union/NodeItem'
import UnionEdit from '@/views/dataset/add/union/UnionEdit'
export default { export default {
name: 'UnionNode', name: 'UnionNode',
components: { components: {
UnionEdit,
NodeItem NodeItem
}, },
props: { props: {
...@@ -35,6 +60,10 @@ export default { ...@@ -35,6 +60,10 @@ export default {
type: Object, type: Object,
required: true required: true
}, },
parentNode: {
type: Object,
required: true
},
nodeIndex: { nodeIndex: {
type: Number, type: Number,
required: true required: true
...@@ -48,7 +77,9 @@ export default { ...@@ -48,7 +77,9 @@ export default {
pathMoreExt: 'M9,0 l0,13 l9,0 m24,0 l18,0 M9,13 l0,27', pathMoreExt: 'M9,0 l0,13 l9,0 m24,0 l18,0 M9,13 l0,27',
nodeHeight: '40px', nodeHeight: '40px',
lineLength: '', lineLength: '',
pathParam: '' pathParam: '',
editUnion: false,
unionParam: {}
} }
}, },
watch: { watch: {
...@@ -70,12 +101,23 @@ export default { ...@@ -70,12 +101,23 @@ export default {
this.nodeLineHeight() this.nodeLineHeight()
}, },
methods: { methods: {
unionConfig() { unionEdit() {
console.log('union config') const param = {
type: 'edit',
nodeIndex: this.nodeIndex,
node: this.childrenNode,
parent: this.parentNode
}
this.unionConfig(param)
},
unionConfig(param) {
this.unionParam = param
this.editUnion = true
}, },
deleteNode(index) { deleteNode(index) {
this.childrenList.splice(index, 1) this.childrenList.splice(index, 1)
}, },
// 计算连接线长度
nodeLineHeight() { nodeLineHeight() {
if (this.childrenList.length === 1 && this.nodeIndex === 0) { if (this.childrenList.length === 1 && this.nodeIndex === 0) {
this.pathParam = this.path this.pathParam = this.path
...@@ -93,12 +135,14 @@ export default { ...@@ -93,12 +135,14 @@ export default {
} }
} }
}, },
// 计算行高
calcNodeHeight() { calcNodeHeight() {
this.nodeHeight = this.childrenNode.allChildCount < 1 ? '40px' : (this.childrenNode.allChildCount * 40 + 'px') this.nodeHeight = this.childrenNode.allChildCount < 1 ? '40px' : (this.childrenNode.allChildCount * 40 + 'px')
}, },
calc(param) { calc(param) {
this.notifyFirstParent(param) this.notifyFirstParent(param)
}, },
// 判断每个node的状态等,并继续向父级传递
notifyFirstParent(param) { notifyFirstParent(param) {
if (param.type === 'union') { if (param.type === 'union') {
if (param.grandParentAdd) { if (param.grandParentAdd) {
...@@ -113,8 +157,9 @@ export default { ...@@ -113,8 +157,9 @@ export default {
} }
} }
} }
const p = JSON.parse(JSON.stringify(param))
// 传递到父级 // 传递到父级
const p = JSON.parse(JSON.stringify(param))
p.grandParentAdd = this.childrenNode.allChildCount > 1 p.grandParentAdd = this.childrenNode.allChildCount > 1
if (param.subCount > 1) { if (param.subCount > 1) {
p.grandParentSub = true p.grandParentSub = true
...@@ -122,6 +167,18 @@ export default { ...@@ -122,6 +167,18 @@ export default {
p.grandParentSub = this.childrenNode.allChildCount !== 0 p.grandParentSub = this.childrenNode.allChildCount !== 0
} }
this.$emit('notifyParent', p) this.$emit('notifyParent', p)
},
closeEditUnion() {
this.editUnion = false
if (this.unionParam.type === 'add') {
this.childrenNode.childrenDs.pop()
// 添加关联的时候,如果关闭关联关系设置的界面,则删除子节点,同时向父级传递消息
this.notifyFirstParent({ type: 'delete', grandParentAdd: true, grandParentSub: true, subCount: 0 })
}
},
confirmEditUnion() {
this.editUnion = false
} }
} }
} }
...@@ -151,4 +208,7 @@ export default { ...@@ -151,4 +208,7 @@ export default {
cursor: pointer; cursor: pointer;
color: var(--Main,#2681ff); color: var(--Main,#2681ff);
} }
.dialog-css >>> .el-dialog__body {
padding: 0 20px;
}
</style> </style>
...@@ -186,7 +186,7 @@ export default { ...@@ -186,7 +186,7 @@ export default {
this.unionDataChange() this.unionDataChange()
}, },
'table': function() { 'table': function() {
this.treeNode(this.groupForm) this.treeNode()
}, },
filterText(val) { filterText(val) {
this.searchPids = [] this.searchPids = []
...@@ -198,7 +198,7 @@ export default { ...@@ -198,7 +198,7 @@ export default {
} }
}, },
mounted() { mounted() {
this.treeNode(this.groupForm) this.treeNode(true)
}, },
created() { created() {
this.kettleState() this.kettleState()
...@@ -227,10 +227,17 @@ export default { ...@@ -227,10 +227,17 @@ export default {
name: '' name: ''
} }
}, },
treeNode(cache) {
treeNode(group) { const modelInfo = localStorage.getItem('dataset-tree')
queryAuthModel({ modelType: 'dataset', privileges: this.privileges, datasetMode: this.mode, clearEmptyDir: this.clearEmptyDir}).then(res => { const userCache = (modelInfo && cache)
if (userCache) {
this.data = JSON.parse(modelInfo)
}
queryAuthModel({ modelType: 'dataset', privileges: this.privileges, datasetMode: this.mode, clearEmptyDir: this.clearEmptyDir}, !userCache).then(res => {
localStorage.setItem('dataset-tree', JSON.stringify(res.data))
if (!userCache) {
this.data = res.data this.data = res.data
}
}) })
}, },
nodeClick(data, node) { nodeClick(data, node) {
......
...@@ -93,11 +93,10 @@ ...@@ -93,11 +93,10 @@
<svg-icon icon-class="ds-custom" class="ds-icon-custom" /> <svg-icon icon-class="ds-custom" class="ds-icon-custom" />
{{ $t('dataset.custom_data') }} {{ $t('dataset.custom_data') }}
</el-dropdown-item> </el-dropdown-item>
<!--此处菜单暂时隐藏,后续功能完整后再放开--> <el-dropdown-item :command="beforeClickAddData('union',data)">
<!-- <el-dropdown-item :command="beforeClickAddData('union',data)">--> <svg-icon icon-class="ds-union" class="ds-icon-union" />
<!-- <svg-icon icon-class="ds-union" class="ds-icon-union" />--> {{ $t('dataset.union_data') }}
<!-- {{ $t('dataset.union_data') }}--> </el-dropdown-item>
<!-- </el-dropdown-item>-->
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</el-dropdown-item> </el-dropdown-item>
...@@ -135,6 +134,7 @@ ...@@ -135,6 +134,7 @@
<svg-icon v-if="data.modelInnerType === 'sql'" icon-class="ds-sql" class="ds-icon-sql" /> <svg-icon v-if="data.modelInnerType === 'sql'" icon-class="ds-sql" class="ds-icon-sql" />
<svg-icon v-if="data.modelInnerType === 'excel'" icon-class="ds-excel" class="ds-icon-excel" /> <svg-icon v-if="data.modelInnerType === 'excel'" icon-class="ds-excel" class="ds-icon-excel" />
<svg-icon v-if="data.modelInnerType === 'custom'" icon-class="ds-custom" class="ds-icon-custom" /> <svg-icon v-if="data.modelInnerType === 'custom'" icon-class="ds-custom" class="ds-icon-custom" />
<svg-icon v-if="data.modelInnerType === 'union'" icon-class="ds-union" class="ds-icon-union" />
</span> </span>
<span v-if="data.modelInnerType === 'db' || data.modelInnerType === 'sql'"> <span v-if="data.modelInnerType === 'db' || data.modelInnerType === 'sql'">
<span v-if="data.mode === 0" style="margin-left: 6px"><i class="el-icon-s-operation" /></span> <span v-if="data.mode === 0" style="margin-left: 6px"><i class="el-icon-s-operation" /></span>
...@@ -325,7 +325,7 @@ export default { ...@@ -325,7 +325,7 @@ export default {
this.kettleState() this.kettleState()
}, },
mounted() { mounted() {
this.treeNode(this.groupForm) this.treeNode(true)
this.refresh() this.refresh()
}, },
methods: { methods: {
...@@ -407,7 +407,7 @@ export default { ...@@ -407,7 +407,7 @@ export default {
showClose: true showClose: true
}) })
this.expandedArray.push(group.pid) this.expandedArray.push(group.pid)
this.treeNode(group.pid) this.treeNode()
}) })
} else { } else {
return false return false
...@@ -451,7 +451,7 @@ export default { ...@@ -451,7 +451,7 @@ export default {
message: this.$t('dataset.delete_success'), message: this.$t('dataset.delete_success'),
showClose: true showClose: true
}) })
this.treeNode(data.pid) this.treeNode()
}) })
}).catch(() => { }).catch(() => {
}) })
...@@ -469,7 +469,7 @@ export default { ...@@ -469,7 +469,7 @@ export default {
message: this.$t('dataset.delete_success'), message: this.$t('dataset.delete_success'),
showClose: true showClose: true
}) })
this.treeNode(data.sceneId) this.treeNode()
this.$store.dispatch('dataset/setTable', new Date().getTime()) this.$store.dispatch('dataset/setTable', new Date().getTime())
}) })
}).catch(() => { }).catch(() => {
...@@ -496,9 +496,17 @@ export default { ...@@ -496,9 +496,17 @@ export default {
} }
}, },
treeNode(group) { treeNode(cache) {
queryAuthModel({ modelType: 'dataset' }).then(res => { const modelInfo = localStorage.getItem('dataset-tree')
const userCache = (modelInfo && cache)
if (userCache) {
this.tData = JSON.parse(modelInfo)
}
queryAuthModel({ modelType: 'dataset' }, !userCache).then(res => {
localStorage.setItem('dataset-tree', JSON.stringify(res.data))
if (!userCache) {
this.tData = res.data this.tData = res.data
}
}) })
}, },
...@@ -682,7 +690,7 @@ export default { ...@@ -682,7 +690,7 @@ export default {
this.searchTree(val) this.searchTree(val)
} else { } else {
this.isTreeSearch = false this.isTreeSearch = false
this.treeNode(this.groupForm) this.treeNode()
} }
}, },
filterNode(value, data) { filterNode(value, data) {
......
...@@ -85,10 +85,10 @@ export default { ...@@ -85,10 +85,10 @@ export default {
}, },
// 验证密码是否正确 如果正确 设置请求头部带LINK-PWD-TOKEN=entrypt(pwd)再刷新页面 // 验证密码是否正确 如果正确 设置请求头部带LINK-PWD-TOKEN=entrypt(pwd)再刷新页面
refresh() { refresh() {
this.msg = null
this.$refs.pwdForm.validate(valid => { this.$refs.pwdForm.validate(valid => {
if (!valid) return false if (!valid) return false
const param = { const param = {
/* password: encrypt(this.form.password), */
password: this.form.password, password: this.form.password,
resourceId: this.resourceId resourceId: this.resourceId
} }
...@@ -96,7 +96,6 @@ export default { ...@@ -96,7 +96,6 @@ export default {
if (!res.data) { if (!res.data) {
this.msg = this.$t('pblink.pwd_error') this.msg = this.$t('pblink.pwd_error')
} else { } else {
// window.location.reload()
this.$emit('fresh-token') this.$emit('fresh-token')
} }
}) })
......
...@@ -92,7 +92,13 @@ export default { ...@@ -92,7 +92,13 @@ export default {
axiosFinished: false, axiosFinished: false,
loginTypes: [0], loginTypes: [0],
isPluginLoaded: false, isPluginLoaded: false,
contentShow: false contentShow: false,
clearLocalStorage: [
'panel-main-tree',
'panel-default-tree',
'chart-tree',
'dataset-tree'
]
} }
}, },
computed: { computed: {
...@@ -178,8 +184,14 @@ export default { ...@@ -178,8 +184,14 @@ export default {
} }
} */ } */
}, },
initCache() {
this.clearLocalStorage.forEach(item => {
localStorage.removeItem(item)
})
},
handleLogin() { handleLogin() {
this.initCache()
this.clearOidcMsg() this.clearOidcMsg()
this.$refs.loginForm.validate(valid => { this.$refs.loginForm.validate(valid => {
if (valid) { if (valid) {
......
...@@ -7,22 +7,20 @@ ...@@ -7,22 +7,20 @@
</el-col> </el-col>
<el-col :span="8" style="text-overflow:ellipsis;overflow: hidden;white-space: nowrap;font-size: 14px"> <el-col :span="8" style="text-overflow:ellipsis;overflow: hidden;white-space: nowrap;font-size: 14px">
<span>{{ $t('panel.when_share') + ': ' + (granterTime ? new Date(granterTime).format('yyyy年-MM月-dd日') : '') }}</span> <span>{{ $t('panel.when_share') + ': ' + (granterTime ? new Date(granterTime).format('yyyy-MM-dd hh:mm:ss') : '') }}</span>
</el-col> </el-col>
<el-col :span="8" style="text-overflow:ellipsis;overflow: hidden;white-space: nowrap;font-size: 14px"> <el-col :span="8" style="text-overflow:ellipsis;overflow: hidden;white-space: nowrap;font-size: 14px">
<el-link type="primary" disabled class="share-checked"> <!-- 分享维度提醒 先注释 因为后面有可能还是需要的 -->
<!-- <el-checkbox v-model="checked" disabled>组织</el-checkbox> --> <!-- <el-link type="primary" disabled class="share-checked">
{{ $t('panel.org') }} {{ $t('panel.org') }}
</el-link> </el-link>
<el-link type="success" disabled class="share-checked"> <el-link type="success" disabled class="share-checked">
<!-- <el-checkbox v-model="checked" disabled>角色</el-checkbox> -->
{{ $t('panel.role') }} {{ $t('panel.role') }}
</el-link> </el-link>
<el-link type="info" disabled class="share-checked"> <el-link type="info" disabled class="share-checked">
<!-- <el-checkbox v-model="checked" disabled>用户</el-checkbox> -->
{{ $t('panel.user') }} {{ $t('panel.user') }}
</el-link> </el-link> -->
</el-col> </el-col>
</el-row> </el-row>
<el-row style="display: flex;"> <el-row style="display: flex;">
...@@ -68,6 +66,7 @@ ...@@ -68,6 +66,7 @@
<script> <script>
import GrantAuth from '../index' import GrantAuth from '../index'
import { shareTargets, removeShares } from '@/api/panel/share' import { shareTargets, removeShares } from '@/api/panel/share'
import bus from '@/utils/bus'
export default { export default {
name: 'ShareHead', name: 'ShareHead',
components: { GrantAuth }, components: { GrantAuth },
...@@ -135,7 +134,13 @@ export default { ...@@ -135,7 +134,13 @@ export default {
this.granterTime = item.createTime this.granterTime = item.createTime
return item return item
}).sort((a, b) => b.type - a.type) }).sort((a, b) => b.type - a.type)
if (!this.dynamicTags || this.dynamicTags.length === 0) {
this.afterRemoveAll()
}
}) })
},
afterRemoveAll() {
bus.$emit('refresh-my-share-out')
} }
} }
} }
......
...@@ -18,13 +18,13 @@ ...@@ -18,13 +18,13 @@
> >
<span slot-scope="{ node, data }" class="custom-tree-node"> <span slot-scope="{ node, data }" class="custom-tree-node">
<span> <span>
<span style="margin-left: 6px">{{ data.name }}</span> <span style="margin-left: 6px">{{ node.data.name }}</span>
</span> </span>
<span @click.stop> <span @click.stop>
<div> <div>
<span class="auth-span"> <span class="auth-span">
<el-checkbox v-model="data.checked" /> <el-checkbox v-model="data.checked" @change="nodeStatusChange(data)" />
</span> </span>
</div> </div>
</span> </span>
...@@ -68,7 +68,8 @@ export default { ...@@ -68,7 +68,8 @@ export default {
return !data.hasChildren return !data.hasChildren
} }
}, },
expandNodeIds: [] expandNodeIds: [],
sharesLoad: false
} }
}, },
watch: { watch: {
...@@ -125,8 +126,17 @@ export default { ...@@ -125,8 +126,17 @@ export default {
} else { } else {
param = { conditions: [this.defaultCondition] } param = { conditions: [this.defaultCondition] }
} }
if (!this.sharesLoad) {
this.queryShareNodeIds(() => { this.queryShareNodeIds(() => {
this.sharesLoad = true
this.loadTreeData(param, condition)
})
} else {
this.loadTreeData(param, condition)
}
},
loadTreeData(param, condition) {
loadTable(param).then(res => { loadTable(param).then(res => {
let data = res.data let data = res.data
data = data.map(obj => { data = data.map(obj => {
...@@ -139,20 +149,14 @@ export default { ...@@ -139,20 +149,14 @@ export default {
this.setCheckExpandNodes(data) this.setCheckExpandNodes(data)
this.expandNodeIds = [] this.expandNodeIds = []
if (condition && condition.value) { if (condition && condition.value) {
// data = data.map(node => {
// delete (node.hasChildren)
// return node
// })
this.data = this.buildTree(data) this.data = this.buildTree(data)
this.$nextTick(() => { this.$nextTick(() => {
// this.expandNodeIds.push()
this.expandResult(this.data) this.expandResult(this.data)
}) })
} else { } else {
this.data = data this.data = data
} }
}) })
})
}, },
expandResult(list) { expandResult(list) {
...@@ -185,18 +189,8 @@ export default { ...@@ -185,18 +189,8 @@ export default {
}, },
getSelected() { getSelected() {
// const ids = []
// this.searchChecked(ids)
// return {
// deptIds: ids
// }
// const ids = []
const nodesMap = this.$refs.tree.store.nodesMap
const ids = Object.values(nodesMap).filter(node => node.data.checked).map(item => item.data.deptId)
return { return {
deptIds: ids deptIds: this.shares
} }
}, },
...@@ -221,24 +215,26 @@ export default { ...@@ -221,24 +215,26 @@ export default {
const shares = res.data const shares = res.data
const nodeIds = shares.map(share => share.targetId) const nodeIds = shares.map(share => share.targetId)
this.shares = nodeIds this.shares = nodeIds
// this.$nextTick(() => {
// this.setCheckNodes()
// })
callBack && callBack() callBack && callBack()
}) })
}, },
// setCheckNodes() {
// this.data.forEach(node => {
// const nodeId = node.deptId
// this.shares.includes(nodeId) && (node.checked = true)
// })
// },
setCheckExpandNodes(rows) { setCheckExpandNodes(rows) {
rows.forEach(node => { rows.forEach(node => {
const nodeId = node.deptId const nodeId = node.deptId
this.shares.includes(nodeId) && (node.checked = true) this.shares.includes(nodeId) && (node.checked = true)
}) })
},
nodeStatusChange(val) {
if (val.checked) {
if (!this.shares.includes(val.deptId)) {
this.shares.push(val.deptId)
}
} else {
this.shares = this.shares.filter(deptId => deptId !== val.deptId)
}
} }
} }
......
...@@ -59,8 +59,6 @@ export default { ...@@ -59,8 +59,6 @@ export default {
this.showSearchInput = false this.showSearchInput = false
}, },
save() { save() {
// this.$refs[this.activeName].save(this.$t('commons.share_success'))
// this.$emit('close-grant', 0)
this.fineSave() this.fineSave()
}, },
fineSave() { fineSave() {
......
...@@ -2,11 +2,12 @@ ...@@ -2,11 +2,12 @@
<div class="my_table"> <div class="my_table">
<el-table <el-table
ref="table" ref="table"
:data="data.filter(node => !keyWord || node[fieldName].toLowerCase().includes(keyWord.toLowerCase()))" :data="tableData"
:show-header="true" :show-header="true"
style="width: 100%" style="width: 100%"
:row-style="{height: '35px'}" :row-style="{height: '35px'}"
@filter-change="filterChange" @select="selectOne"
@select-all="selectAll"
> >
<el-table-column :column-key="fieldName" :label="columnLabel" :prop="fieldName" filter-placement="right-start" :filters="filter_options" :filter-multiple="false" :filter-method="filterHandler" /> <el-table-column :column-key="fieldName" :label="columnLabel" :prop="fieldName" filter-placement="right-start" :filters="filter_options" :filter-multiple="false" :filter-method="filterHandler" />
<el-table-column type="selection" fixd /> <el-table-column type="selection" fixd />
...@@ -18,7 +19,6 @@ ...@@ -18,7 +19,6 @@
import { roleGrid } from '@/api/system/user' import { roleGrid } from '@/api/system/user'
import { formatCondition } from '@/utils/index' import { formatCondition } from '@/utils/index'
import { loadShares } from '@/api/panel/share' import { loadShares } from '@/api/panel/share'
/* import { saveShare, loadShares } from '@/api/panel/share' */
export default { export default {
name: 'GrantRole', name: 'GrantRole',
props: { props: {
...@@ -39,7 +39,15 @@ export default { ...@@ -39,7 +39,15 @@ export default {
filter_options: [{ text: this.$t('panel.no_auth_role'), value: 0 }, { text: this.$t('panel.auth_role'), value: 1 }], filter_options: [{ text: this.$t('panel.no_auth_role'), value: 0 }, { text: this.$t('panel.auth_role'), value: 1 }],
fieldName: 'name', fieldName: 'name',
type: 1, // 类型1代表角色 type: 1, // 类型1代表角色
shares: [] shares: [],
tableData: []
}
},
watch: {
'keyWord': function(val) {
this.tableData = this.data.filter(node => !val || node[this.fieldName].toLowerCase().includes(val.toLowerCase()))
this.setCheckNodes()
} }
}, },
created() { created() {
...@@ -56,48 +64,22 @@ export default { ...@@ -56,48 +64,22 @@ export default {
const param = temp || {} const param = temp || {}
roleGrid(1, 0, param).then(response => { roleGrid(1, 0, param).then(response => {
const data = response.data const data = response.data
// this.total = data.itemCount
this.data = data.listObject this.data = data.listObject
this.tableData = data.listObject
this.queryShareNodeIds() this.queryShareNodeIds()
}) })
}, },
filterHandler(value, row, column) { filterHandler(value, row, column) {
// const property = column['property']
// return row[property] === value
const roleId = row['roleId'] const roleId = row['roleId']
return !(value ^ this.shares.includes(roleId)) return !(value ^ this.shares.includes(roleId))
}, },
filterChange(obj) {
const arr = obj[this.fieldName]
if (arr.length === 0) {
this.initColumnLabel()
} else {
this.columnLabel = this.filter_options[arr[0]].text
}
this.$nextTick(() => {
this.setCheckNodes()
})
},
getSelected() { getSelected() {
return { return {
roleIds: this.$refs.table.store.states.selection.map(item => item.roleId) roleIds: this.shares
} }
}, },
/* save(msg) {
const rows = this.$refs.table.store.states.selection
const request = this.buildRequest(rows)
saveShare(request).then(res => {
this.$success(msg)
return true
}).catch(err => {
this.$error(err.message)
return false
})
}, */
cancel() { cancel() {
}, },
buildRequest(rows) { buildRequest(rows) {
...@@ -126,10 +108,39 @@ export default { ...@@ -126,10 +108,39 @@ export default {
}, },
setCheckNodes() { setCheckNodes() {
this.data.forEach(node => { this.$nextTick(() => {
this.$refs.table.store.states.data.forEach(node => {
const nodeId = node.roleId const nodeId = node.roleId
this.shares.includes(nodeId) && this.$refs.table.toggleRowSelection(node, true) this.shares.includes(nodeId) && this.$refs.table.toggleRowSelection(node, true)
}) })
})
},
selectOne(selection, row) {
if (selection.some(node => node.roleId === row.roleId)) {
// 如果选中了 且 已有分享数据不包含当前节点则添加
if (!this.shares.includes(row.roleId)) {
this.shares.push(row.roleId)
}
} else {
// 如果取消选中 则移除
this.shares = this.shares.filter(nodeId => row.roleId !== nodeId)
// this.shares.splice(this.shares.findIndex(item => item.roleId === row.roleId), 1)
}
},
selectAll(selection) {
// 1.全选
if (selection && selection.length > 0) {
selection.forEach(node => {
if (!this.shares.includes(node.roleId)) {
this.shares.push(node.roleId)
}
})
} else {
// 2.全部取消
const currentNodes = this.$refs.table.store.states.data
const currentNodeIds = currentNodes.map(node => node.roleId)
this.shares = this.shares.filter(nodeId => !currentNodeIds.includes(nodeId))
}
} }
} }
......
...@@ -11,15 +11,7 @@ ...@@ -11,15 +11,7 @@
</span> </span>
<span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ data.name }}</span> <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ data.name }}</span>
</span> </span>
<!-- <span :class="!!data.msgNode ? 'msg-node-class': ''">
<span v-if="!!data.id">
<el-button
icon="el-icon-picture-outline"
type="text"
/>
</span>
<span style="margin-left: 6px">{{ data.name }}</span>
</span> -->
</span> </span>
</el-tree> </el-tree>
</div> </div>
...@@ -28,9 +20,9 @@ ...@@ -28,9 +20,9 @@
<el-row> <el-row>
<span class="header-title">{{ $t('panel.share_out') }}</span> <span class="header-title">{{ $t('panel.share_out') }}</span>
<div class="block" style="margin-top:8px;"> <div class="block" style="margin-top:8px;">
<el-tree :data="outDatas" :props="defaultProps" :highlight-current="true" node-key="name" :default-expand-all="true" @node-click="viewMyShare"> <el-tree :data="outDatas" :props="defaultProps" :highlight-current="true" node-key="name" :default-expand-all="true">
<span slot-scope="{ data }" class="custom-tree-node father"> <span slot-scope="{ data }" class="custom-tree-node father">
<span style="display: flex; flex: 1 1 0%; width: 0px;"> <span style="display: flex; flex: 1 1 0%; width: 0px;" @click="viewMyShare(data)">
<span v-if="!!data.id"> <span v-if="!!data.id">
<svg-icon icon-class="panel" class="ds-icon-scene" /> <svg-icon icon-class="panel" class="ds-icon-scene" />
</span> </span>
...@@ -79,7 +71,18 @@ export default { ...@@ -79,7 +71,18 @@ export default {
outDatas: [] outDatas: []
} }
}, },
computed: {
panelInfo() {
return this.$store.state.panel.panelInfo
}
},
created() { created() {
bus.$on('refresh-my-share-out', () => {
this.initOutData().then(res => {
this.outDatas = res.data
this.setMainNull()
})
})
this.initData().then(res => { this.initData().then(res => {
this.datas = res.data this.datas = res.data
if (this.msgPanelIds && this.msgPanelIds.length > 0) { if (this.msgPanelIds && this.msgPanelIds.length > 0) {
...@@ -145,7 +148,6 @@ export default { ...@@ -145,7 +148,6 @@ export default {
}) })
}, },
removeCurrent(node) { removeCurrent(node) {
console.log(node)
const param = { const param = {
panelId: node.id panelId: node.id
} }
...@@ -156,6 +158,7 @@ export default { ...@@ -156,6 +158,7 @@ export default {
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
removeShares(param).then(res => { removeShares(param).then(res => {
this.panelInfo && this.panelInfo.id && node.id === this.panelInfo.id && this.setMainNull()
this.initOutData().then(res => { this.initOutData().then(res => {
this.outDatas = res.data this.outDatas = res.data
}) })
...@@ -167,6 +170,9 @@ export default { ...@@ -167,6 +170,9 @@ export default {
message: this.$t('commons.delete_cancelled') message: this.$t('commons.delete_cancelled')
}) })
}) })
},
setMainNull() {
this.$store.dispatch('panel/setPanelInfo', { id: null, name: '', preStyle: null })
} }
} }
......
...@@ -2,11 +2,12 @@ ...@@ -2,11 +2,12 @@
<div class="my_table"> <div class="my_table">
<el-table <el-table
ref="table" ref="table"
:data="data.filter(node => !keyWord || node[fieldName].toLowerCase().includes(keyWord.toLowerCase()))" :data="tableData"
:show-header="true" :show-header="true"
style="width: 100%" style="width: 100%"
:row-style="{height: '35px'}" :row-style="{height: '35px'}"
@filter-change="filterChange" @select="selectOne"
@select-all="selectAll"
> >
<el-table-column <el-table-column
:column-key="fieldName" :column-key="fieldName"
...@@ -47,7 +48,14 @@ export default { ...@@ -47,7 +48,14 @@ export default {
filter_options: [{ text: this.$t('panel.unshared_people'), value: 0 }, { text: this.$t('panel.shared_people'), value: 1 }], filter_options: [{ text: this.$t('panel.unshared_people'), value: 0 }, { text: this.$t('panel.shared_people'), value: 1 }],
fieldName: 'nickName', fieldName: 'nickName',
type: 0, // 类型0代表用户 type: 0, // 类型0代表用户
shares: [] shares: [],
tableData: []
}
},
watch: {
'keyWord': function(val) {
this.tableData = this.data.filter(node => !val || node[this.fieldName].toLowerCase().includes(val.toLowerCase()))
this.setCheckNodes()
} }
}, },
created() { created() {
...@@ -63,48 +71,22 @@ export default { ...@@ -63,48 +71,22 @@ export default {
const param = temp || {} const param = temp || {}
userLists(1, 0, param).then(response => { userLists(1, 0, param).then(response => {
const data = response.data const data = response.data
// this.total = data.itemCount
this.data = data.listObject.filter(ele => ele.id !== this.$store.getters.user.userId) this.data = data.listObject.filter(ele => ele.id !== this.$store.getters.user.userId)
this.tableData = data.listObject.filter(ele => ele.id !== this.$store.getters.user.userId)
this.queryShareNodeIds() this.queryShareNodeIds()
}) })
}, },
filterHandler(value, row, column) { filterHandler(value, row, column) {
// const property = column['property']
// return row[property] === value
const userId = row['userId'] const userId = row['userId']
return !(value ^ this.shares.includes(userId)) return !(value ^ this.shares.includes(userId))
}, },
filterChange(obj) {
const arr = obj[this.fieldName]
if (arr.length === 0) {
this.initColumnLabel()
} else {
this.columnLabel = this.filter_options[arr[0]].text
}
this.$nextTick(() => {
this.setCheckNodes()
})
},
getSelected() { getSelected() {
return { return {
userIds: this.$refs.table.store.states.selection.map(item => item.userId) userIds: this.shares
} }
}, },
/* save(msg) {
const rows = this.$refs.table.store.states.selection
const request = this.buildRequest(rows)
saveShare(request).then(response => {
this.$success(msg)
return true
}).catch(err => {
this.$error(err.message)
return false
})
}, */
cancel() { cancel() {
console.log('user cancel') console.log('user cancel')
}, },
...@@ -134,10 +116,38 @@ export default { ...@@ -134,10 +116,38 @@ export default {
}, },
setCheckNodes() { setCheckNodes() {
this.data.forEach(node => { this.$nextTick(() => {
this.$refs.table.store.states.data.forEach(node => {
const nodeId = node.userId const nodeId = node.userId
this.shares.includes(nodeId) && this.$refs.table.toggleRowSelection(node, true) this.shares.includes(nodeId) && this.$refs.table.toggleRowSelection(node, true)
}) })
})
},
selectOne(selection, row) {
if (selection.some(node => node.userId === row.userId)) {
// 如果选中了 且 已有分享数据不包含当前节点则添加
if (!this.shares.includes(row.userId)) {
this.shares.push(row.userId)
}
} else {
// 如果取消选中 则移除
this.shares = this.shares.filter(nodeId => row.userId !== nodeId)
}
},
selectAll(selection) {
// 1.全选
if (selection && selection.length > 0) {
selection.forEach(node => {
if (!this.shares.includes(node.userId)) {
this.shares.push(node.userId)
}
})
} else {
// 2.全部取消
const currentNodes = this.$refs.table.store.states.data
const currentNodeIds = currentNodes.map(node => node.userId)
this.shares = this.shares.filter(nodeId => !currentNodeIds.includes(nodeId))
}
} }
} }
......
...@@ -191,6 +191,7 @@ ...@@ -191,6 +191,7 @@
:opt-from="'panel'" :opt-from="'panel'"
:advice-group-id="adviceGroupId" :advice-group-id="adviceGroupId"
style="height: 0px;width:0px;padding:0px;overflow: hidden" style="height: 0px;width:0px;padding:0px;overflow: hidden"
:mounted-init="false"
@newViewInfo="newViewInfo" @newViewInfo="newViewInfo"
/> />
...@@ -521,7 +522,8 @@ export default { ...@@ -521,7 +522,8 @@ export default {
const stick = evt.target.closest('.el-icon-magic-stick') const stick = evt.target.closest('.el-icon-magic-stick')
const xuanfuanniu = evt.target.closest('.icon-xuanfuanniu') const xuanfuanniu = evt.target.closest('.icon-xuanfuanniu')
const shujujuzhen = evt.target.closest('.icon-shujujuzhen') const shujujuzhen = evt.target.closest('.icon-shujujuzhen')
if (!parent && !self && !stick && !xuanfuanniu && !shujujuzhen) { const suffix = evt.target.closest('.el-input__suffix')
if (!parent && !self && !stick && !xuanfuanniu && !shujujuzhen&&!suffix) {
this.show = false this.show = false
window.removeEventListener('click', this.closeSidebar) window.removeEventListener('click', this.closeSidebar)
this.showIndex = -1 this.showIndex = -1
......
...@@ -233,6 +233,7 @@ import { ...@@ -233,6 +233,7 @@ import {
DEFAULT_COMMON_CANVAS_STYLE_STRING DEFAULT_COMMON_CANVAS_STYLE_STRING
} from '@/views/panel/panel' } from '@/views/panel/panel'
import TreeSelector from '@/components/TreeSelector' import TreeSelector from '@/components/TreeSelector'
import { queryAuthModel } from '@/api/authModel/authModel'
export default { export default {
name: 'PanelList', name: 'PanelList',
...@@ -334,7 +335,11 @@ export default { ...@@ -334,7 +335,11 @@ export default {
searchMap: { searchMap: {
all: this.$t('commons.all'), all: this.$t('commons.all'),
folder: this.$t('commons.folder') folder: this.$t('commons.folder')
} },
initLocalStorage: [
'chart',
'dataset'
]
} }
}, },
computed: { computed: {
...@@ -367,9 +372,20 @@ export default { ...@@ -367,9 +372,20 @@ export default {
this.$store.commit('setComponentData', []) this.$store.commit('setComponentData', [])
this.$store.commit('setCanvasStyle', DEFAULT_COMMON_CANVAS_STYLE_STRING) this.$store.commit('setCanvasStyle', DEFAULT_COMMON_CANVAS_STYLE_STRING)
this.defaultTree() this.defaultTree()
this.tree(this.groupForm) this.tree(true)
this.initCache()
}, },
methods: { methods: {
initCache() {
// 初始化时提前加载视图和数据集的缓存
this.initLocalStorage.forEach(item => {
if (!localStorage.getItem(item + '-tree')) {
queryAuthModel({ modelType: item }, false).then(res => {
localStorage.setItem(item + '-tree', JSON.stringify(res.data))
})
}
})
},
closeEditPanelDialog(panelInfo) { closeEditPanelDialog(panelInfo) {
this.editPanel.visible = false this.editPanel.visible = false
if (panelInfo) { if (panelInfo) {
...@@ -392,7 +408,7 @@ export default { ...@@ -392,7 +408,7 @@ export default {
} }
this.activeNodeAndClick(panelInfo) this.activeNodeAndClick(panelInfo)
} else { } else {
this.tree(this.groupForm) this.tree()
} }
} }
}, },
...@@ -535,7 +551,7 @@ export default { ...@@ -535,7 +551,7 @@ export default {
type: 'success', type: 'success',
showClose: true showClose: true
}) })
this.tree(this.groupForm) this.tree()
this.defaultTree() this.defaultTree()
}) })
} else { } else {
...@@ -562,7 +578,7 @@ export default { ...@@ -562,7 +578,7 @@ export default {
showClose: true showClose: true
}) })
this.clearCanvas() this.clearCanvas()
this.tree(this.groupForm) this.tree()
this.defaultTree() this.defaultTree()
}) })
}).catch(() => { }).catch(() => {
...@@ -591,17 +607,32 @@ export default { ...@@ -591,17 +607,32 @@ export default {
sort: 'node_type desc,name asc' sort: 'node_type desc,name asc'
} }
}, },
tree(group) { tree(cache = false) {
groupTree(group).then(res => { const modelInfo = localStorage.getItem('panel-main-tree')
const userCache = (modelInfo && cache)
if (userCache) {
this.tData = JSON.parse(modelInfo)
}
groupTree(this.groupForm, !userCache).then(res => {
localStorage.setItem('panel-main-tree', JSON.stringify(res.data))
if (!userCache) {
this.tData = res.data this.tData = res.data
}
}) })
}, },
defaultTree() { defaultTree() {
const requestInfo = { const requestInfo = {
panelType: 'system' panelType: 'system'
} }
defaultTree(requestInfo).then(res => { const modelInfo = localStorage.getItem('panel-default-tree')
if (modelInfo) {
this.defaultData = JSON.parse(modelInfo)
}
defaultTree(requestInfo, false).then(res => {
localStorage.setItem('panel-default-tree', JSON.stringify(res.data))
if (!modelInfo) {
this.defaultData = res.data this.defaultData = res.data
}
}) })
}, },
...@@ -768,7 +799,7 @@ export default { ...@@ -768,7 +799,7 @@ export default {
this.moveInfo.pid = this.tGroup.id this.moveInfo.pid = this.tGroup.id
this.moveInfo['optType'] = 'move' this.moveInfo['optType'] = 'move'
panelSave(this.moveInfo).then(response => { panelSave(this.moveInfo).then(response => {
this.tree(this.groupForm) this.tree()
this.closeMoveGroup() this.closeMoveGroup()
}) })
}, },
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<el-tabs v-model="activeName" class="tab-panel" :stretch="true" @tab-click="handleClick"> <el-tabs v-model="activeName" class="tab-panel" :stretch="true" @tab-click="handleClick">
<el-tab-pane name="PanelList"> <el-tab-pane name="PanelList">
<span slot="label"><i class="el-icon-document tablepanel-i" />{{ $t('panel.panel_list') }}</span> <span slot="label"><i class="el-icon-document tablepanel-i" />{{ $t('panel.panel_list') }}</span>
<panel-list ref="panelList" v-if="activeName==='PanelList'" /> <panel-list v-if="activeName==='PanelList'" ref="panelList" />
</el-tab-pane> </el-tab-pane>
<el-tab-pane name="panels_star" :lazy="true"> <el-tab-pane name="panels_star" :lazy="true">
<span slot="label"><i class="el-icon-star-off tablepanel-i" />{{ $t('panel.store') }}</span> <span slot="label"><i class="el-icon-star-off tablepanel-i" />{{ $t('panel.store') }}</span>
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
</el-tabs> </el-tabs>
</de-aside-container> </de-aside-container>
<de-main-container> <de-main-container>
<PanelViewShow v-if="mainActiveName==='PanelMain'" :active-tab="activeName" @editPanel="editPanel"/> <PanelViewShow v-if="mainActiveName==='PanelMain'" :active-tab="activeName" @editPanel="editPanel" />
</de-main-container> </de-main-container>
</de-container> </de-container>
</template> </template>
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论