center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

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

Browse Source 
# Conflicts:
#	frontend/src/views/dataset/common/DatasetGroupSelectorTree.vue
This commit is contained in:
taojinlong 2021-11-29 17:55:45 +08:00
commit dbd2159a6d
31 changed files with 1294 additions and 432 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/api/authModel/authModel.js
View File

@ -1,11 +1,11 @@
import request from '@/utils/request'
export function queryAuthModel(data) {
export function queryAuthModel(data, loading = true, timeout = 30000) {
return request({
url: 'authModel/queryAuthModel',
method: 'post',
loading: true,
timeout: 30000,
loading: loading,
timeout: timeout,
data
})
}

2
frontend/src/api/chart/chart.js
View File

@ -40,7 +40,7 @@ export function chartGroupTree(data) {
return request({
url: '/chart/group/tree',
method: 'post',
loading: true,
loading: false,
data
})
}

10
frontend/src/api/panel/panel.js
View File

@ -36,20 +36,22 @@ export function querySubjectWithGroup(data) {
})
}
export function defaultTree(data) {
export function defaultTree(data, loading = true, timeout = 30000) {
return request({
url: '/panel/group/defaultTree',
method: 'post',
loading: true,
loading: loading,
timeout: timeout,
data
})
}
export function groupTree(data) {
export function groupTree(data, loading = true, timeout = 30000) {
return request({
url: '/panel/group/tree',
method: 'post',
loading: true,
loading: loading,
timeout: timeout,
data
})
}

17
frontend/src/components/widget/DeWidget/TimeSimple.vue
View File

@ -7,10 +7,9 @@
:width="canvas_width"
:height="canvas_height"
/>
<!-- <canvas id="canvas" class="de-canvas" :width="$refs.canvasContainer.clientWidth" :height="$refs.canvasContainer.clientHeight" /> -->
</div>
<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>
</template>
@ -119,7 +118,7 @@ export default {
}
const nowWeek = this.week[time.getDay()]
var fullTime = showWeek ? (nowDate + ' ' + nowWeek) : nowDate
var fullDoc = document.getElementById('fulltime')
var fullDoc = document.getElementById(this.element.id + '_fulltime')
fullDoc.innerHTML = fullTime
const draw = draws
@ -140,8 +139,6 @@ export default {
draw.beginPath()
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.closePath()
draw.stroke()
@ -157,8 +154,6 @@ export default {
draw.beginPath()
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.closePath()
draw.stroke()
@ -169,21 +164,18 @@ export default {
// 画时阵
draw.save()
draw.strokeStyle = this.element.style.color
// draw.translate(250, 250)
draw.translate(canvas_w / 2, canvas_h / 2)
const hourzs = h + min / 60// 获取浮点类型的小时
draw.rotate(hourzs * 30 * Math.PI / 180)
draw.lineWidth = 6
draw.beginPath()
draw.moveTo(0, 0)
/* draw.lineTo(0, -(side_length / 2 - 60) / 3) */
draw.lineTo(0, -(side_length / 2) * 0.5)
draw.closePath()
draw.stroke()
draw.restore()
// 画分针
draw.save()
// draw.translate(250, 250)
draw.translate(canvas_w / 2, canvas_h / 2)
draw.rotate(min * 6 * Math.PI / 180)
@ -192,13 +184,11 @@ export default {
draw.beginPath()
draw.moveTo(0, 0)
draw.lineTo(0, -(side_length / 2) * 0.7)
/* draw.lineTo(0, -(side_length / 2 - 60) * 3 / 5) */
draw.closePath()
draw.stroke()
draw.restore()
// 画秒针
draw.save()
// draw.translate(250, 250)
draw.translate(canvas_w / 2, canvas_h / 2)
draw.rotate(s * 6 * Math.PI / 180)
draw.strokeStyle = this.element.style.color
@ -206,16 +196,13 @@ export default {
draw.beginPath()
draw.moveTo(0, 15)
draw.lineTo(0, -(side_length / 2) * 0.9)
/* draw.lineTo(0, -(side_length / 2 - 60)) */
draw.closePath()
draw.stroke()
draw.restore()
// 画中心原点
// draw.fillStyle = 'rgba(255,255,255,1)'
draw.lineWidth = 2
draw.beginPath()
// draw.arc(250, 250, 4, 0, 360, false)
draw.arc(canvas_w / 2, canvas_h / 2, 4, 0, 360, false)
draw.closePath()
draw.fill()

6
frontend/src/lang/en.js
View File

@ -1157,7 +1157,11 @@ export default {
union_data: 'Union Dataset',
add_union_table: 'Add 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: 'Data Source',

6
frontend/src/lang/tw.js
View File

@ -1158,7 +1158,11 @@ export default {
union_data: '關聯數據集',
add_union_table: '添加關聯數據集',
edit_union: '編輯關聯數據集',
union: '關聯'
union: '關聯',
edit_union_relation: '編輯關聯關系',
add_union_relation: '新建關聯關系',
field_select: '字段選擇',
add_union_field: '添加關聯字段'
},
datasource: {
datasource: '數據源',

6
frontend/src/lang/zh.js
View File

@ -1160,7 +1160,11 @@ export default {
union_data: '关联数据集',
add_union_table: '添加关联数据集',
edit_union: '编辑关联数据集',
union: '关联'
union: '关联',
edit_union_relation: '编辑关联关系',
add_union_relation: '新建关联关系',
field_select: '字段选择',
add_union_field: '添加关联字段'
},
datasource: {
datasource: '数据源',

69
frontend/src/styles/index.scss
View File

@ -693,39 +693,38 @@ div:focus {
.rate-date-class > .el-picker-panel__footer > .el-button--text:first-child{
display: none;
}
.rate-date-class > .el-picker-panel__body-wrapper > .el-picker-panel__body {
>.el-date-picker__header {
display: none;
}
.rate-date-class > .el-picker-panel__body-wrapper > .el-picker-panel__body {
>.el-date-picker__header {
display: none;
}
>.el-picker-panel__content{
>table > tbody {
>tr:first-child {
display: none;
}
>tr >td.prev-month,td.next-month {
display: none;
}
}
}
}
.rate-day-class > .el-picker-panel__footer > .el-button--text:first-child{
display: none;
}
.rate-day-class > .el-picker-panel__body-wrapper > .el-picker-panel__body {
>.el-date-picker__header {
>.el-picker-panel__content{
>table > tbody {
>tr:first-child {
display: none;
}
>.el-picker-panel__content{
>table > tbody {
>tr:not(:nth-child(3)) {
display: none;
}
}
}
>tr >td.prev-month,td.next-month {
display: none;
}
}
}
}
.rate-day-class > .el-picker-panel__footer > .el-button--text:first-child{
display: none;
}
.rate-day-class > .el-picker-panel__body-wrapper > .el-picker-panel__body {
>.el-date-picker__header {
display: none;
}
>.el-picker-panel__content{
>table > tbody {
>tr:not(:nth-child(3)) {
display: none;
}
}
}
}
.chart-type .el-radio__input{
display: none!important;
@ -735,10 +734,22 @@ div:focus {
padding-left: 0!important;
}
.chart-type .radio-row .radio-style{
width: 80px;
height: 60px;
padding: 0;
}
.el-color-predefine__color-selector{
border: 1px solid #999999!important;
margin: 0 0 6px 6px!important;
}
.de-checkbox {
width: 100%;
margin-left: 0px !important;
.el-checkbox__input {
padding: 0 0 8px 0 !important;
}
}

28
frontend/src/views/chart/group/Group.vue
View File

@ -337,6 +337,11 @@ export default {
type: String,
required: false,
default: null
},
mountedInit: {
type: Boolean,
required: false,
default: true
}
},
data() {
@ -440,10 +445,11 @@ export default {
},
mounted() {
this.treeNode(this.groupForm)
this.refresh()
// this.chartTree()
this.getChartGroupTree()
if (this.mountedInit) {
this.treeNode(true)
this.refresh()
this.getChartGroupTree()
}
},
methods: {
clickAdd(param) {
@ -620,9 +626,17 @@ export default {
})
},
treeNode(group) {
queryAuthModel({ modelType: 'chart' }).then(res => {
this.tData = res.data
treeNode(cache = false) {
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
}
})
},

6
frontend/src/views/chart/view/ChartType.vue
View File

@ -487,10 +487,4 @@ export default {
white-space: pre;
font-size: 12px;
}
.radio-style{
width: 80px;
height: 60px;
padding: 0;
}
</style>

57
frontend/src/views/dataset/add/AddUnion.vue
View File

@ -28,22 +28,44 @@
</div>
<!--数据集关联树型结构-->
<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">
<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>
<!--选择数据集-->
<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" />
<div slot="footer" class="dialog-footer">
<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="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>
</template>
@ -51,9 +73,10 @@
import UnionNode from '@/views/dataset/add/union/UnionNode'
import NodeItem from '@/views/dataset/add/union/NodeItem'
import DatasetGroupSelectorTree from '@/views/dataset/common/DatasetGroupSelectorTree'
import UnionEdit from '@/views/dataset/add/union/UnionEdit'
export default {
name: 'AddUnion',
components: { DatasetGroupSelectorTree, NodeItem, UnionNode },
components: { UnionEdit, DatasetGroupSelectorTree, NodeItem, UnionNode },
props: {
param: {
type: Object,
@ -72,7 +95,7 @@ export default {
currentDsField: [],
childrenDs: [],
unionToParent: {
unionType: '', // left join,right join,inner join
unionType: 'left', // left join,right join,inner join
unionFields: [
{
parentField: {},
@ -94,7 +117,7 @@ export default {
currentDsField: [],
childrenDs: [],
unionToParent: {
unionType: '',
unionType: 'left',
unionFields: []
},
allChildCount: 0
@ -103,7 +126,9 @@ export default {
customType: ['db', 'sql', 'excel'],
selectDsDialog: false,
// 弹框临时选中的数据集
tempDs: {}
tempDs: {},
editUnion: false,
unionParam: {}
}
},
mounted() {
@ -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
}
}
}

49
frontend/src/views/dataset/add/union/NodeItem.vue
View File

@ -1,9 +1,9 @@
<template>
<div>
<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-else-if="currentNode.currentDs.type === '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-if="currentNode.currentDs.modelInnerType === 'db'" icon-class="ds-db" class="ds-icon-db" />
<svg-icon v-else-if="currentNode.currentDs.modelInnerType === 'sql'" icon-class="ds-sql" class="ds-icon-sql" />
<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>
@ -28,11 +28,20 @@
</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" />
<div slot="footer" class="dialog-footer">
<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>
</el-dialog>
</div>
@ -40,9 +49,10 @@
<script>
import DatasetGroupSelectorTree from '@/views/dataset/common/DatasetGroupSelectorTree'
import UnionFieldEdit from '@/views/dataset/add/union/UnionFieldEdit'
export default {
name: 'NodeItem',
components: { DatasetGroupSelectorTree },
components: { UnionFieldEdit, DatasetGroupSelectorTree },
props: {
currentNode: {
type: Object,
@ -60,7 +70,7 @@ export default {
currentDsField: [],
childrenDs: [],
unionToParent: {
unionType: '',
unionType: 'left',
unionFields: []
},
allChildCount: 0
@ -70,12 +80,13 @@ export default {
// 弹框临时选中的数据集
tempDs: {},
// 父级数据集
tempParentDs: {}
tempParentDs: {},
editField: false
}
},
methods: {
nodeClick() {
console.log('node click to edit')
this.editField = true
},
nodeMenuClick(param) {
switch (param.type) {
@ -102,6 +113,7 @@ export default {
this.selectDs()
},
editNode(param) {
this.nodeClick()
},
deleteNode(param) {
this.$emit('deleteNode', this.nodeIndex)
@ -125,9 +137,25 @@ export default {
this.tempParentDs.childrenDs.push(ds)
this.closeSelectDs()
this.notifyFirstParent('union')
// 构建新建关联关系传递的参数
const param = {
type: 'add',
nodeIndex: this.nodeIndex,
node: ds,
parent: this.tempParentDs
}
this.$emit('editUnion', param)
},
// 增加与删除事件向父级传递
notifyFirstParent(type) {
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 {
cursor: pointer;
border: var(--Main,#2681ff) solid 1px;
}
.dialog-css >>> .el-dialog__body {
padding: 0 20px;
}
</style>

88
frontend/src/views/dataset/add/union/UnionEdit.vue Normal file
View File

@ -0,0 +1,88 @@
<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>

44
frontend/src/views/dataset/add/union/UnionFieldEdit.vue Normal file
View File

@ -0,0 +1,44 @@
<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>

176
frontend/src/views/dataset/add/union/UnionFieldList.vue Normal file
View File

@ -0,0 +1,176 @@
<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>

223
frontend/src/views/dataset/add/union/UnionItemEdit.vue Normal file
View File

@ -0,0 +1,223 @@
<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>

80
frontend/src/views/dataset/add/union/UnionNode.vue
View File

@ -1,29 +1,54 @@
<template>
<div class="children-node node-container" :style="{height:nodeHeight}">
<div class="node-line">
<svg-icon v-if="childrenNode.unionToParent.unionType === 'left'" icon-class="left-join" class="join-icon" @click="unionConfig" />
<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 === 'inner'" icon-class="inner-join" class="join-icon" @click="unionConfig" />
<svg-icon v-else icon-class="no-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="unionEdit" />
<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="unionEdit" />
<svg class="join-svg-container">
<path fill="none" stroke="#dcdfe6" :d="pathParam + lineLength" />
</svg>
</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>
<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>
<!--编辑关联关系-->
<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>
</template>
<script>
import NodeItem from '@/views/dataset/add/union/NodeItem'
import UnionEdit from '@/views/dataset/add/union/UnionEdit'
export default {
name: 'UnionNode',
components: {
UnionEdit,
NodeItem
},
props: {
@ -35,6 +60,10 @@ export default {
type: Object,
required: true
},
parentNode: {
type: Object,
required: true
},
nodeIndex: {
type: Number,
required: true
@ -48,7 +77,9 @@ export default {
pathMoreExt: 'M9,0 l0,13 l9,0 m24,0 l18,0 M9,13 l0,27',
nodeHeight: '40px',
lineLength: '',
pathParam: ''
pathParam: '',
editUnion: false,
unionParam: {}
}
},
watch: {
@ -70,12 +101,23 @@ export default {
this.nodeLineHeight()
},
methods: {
unionConfig() {
console.log('union config')
unionEdit() {
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) {
this.childrenList.splice(index, 1)
},
// 计算连接线长度
nodeLineHeight() {
if (this.childrenList.length === 1 && this.nodeIndex === 0) {
this.pathParam = this.path
@ -93,12 +135,14 @@ export default {
}
}
},
// 计算行高
calcNodeHeight() {
this.nodeHeight = this.childrenNode.allChildCount < 1 ? '40px' : (this.childrenNode.allChildCount * 40 + 'px')
},
calc(param) {
this.notifyFirstParent(param)
},
// 判断每个node的状态等，并继续向父级传递
notifyFirstParent(param) {
if (param.type === 'union') {
if (param.grandParentAdd) {
@ -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
if (param.subCount > 1) {
p.grandParentSub = true
@ -122,6 +167,18 @@ export default {
p.grandParentSub = this.childrenNode.allChildCount !== 0
}
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 {
cursor: pointer;
color: var(--Main,#2681ff);
}
.dialog-css >>> .el-dialog__body {
padding: 0 20px;
}
</style>

19
frontend/src/views/dataset/common/DatasetGroupSelectorTree.vue
View File

@ -186,7 +186,7 @@ export default {
this.unionDataChange()
},
'table': function() {
this.treeNode(this.groupForm)
this.treeNode()
},
filterText(val) {
this.searchPids = []
@ -198,7 +198,7 @@ export default {
}
},
mounted() {
this.treeNode(this.groupForm)
this.treeNode(true)
},
created() {
this.kettleState()
@ -227,10 +227,17 @@ export default {
name: ''
}
},
treeNode(group) {
queryAuthModel({ modelType: 'dataset', privileges: this.privileges, datasetMode: this.mode, clearEmptyDir: this.clearEmptyDir}).then(res => {
this.data = res.data
treeNode(cache) {
const modelInfo = localStorage.getItem('dataset-tree')
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
}
})
},
nodeClick(data, node) {

34
frontend/src/views/dataset/group/Group.vue
View File

@ -93,11 +93,10 @@
<svg-icon icon-class="ds-custom" class="ds-icon-custom" />
{{ $t('dataset.custom_data') }}
</el-dropdown-item>
<!--此处菜单暂时隐藏，后续功能完整后再放开-->
<!-- <el-dropdown-item :command="beforeClickAddData('union',data)">-->
<!-- <svg-icon icon-class="ds-union" class="ds-icon-union" />-->
<!-- {{ $t('dataset.union_data') }}-->
<!-- </el-dropdown-item>-->
<el-dropdown-item :command="beforeClickAddData('union',data)">
<svg-icon icon-class="ds-union" class="ds-icon-union" />
{{ $t('dataset.union_data') }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-dropdown-item>
@ -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 === '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 === 'union'" icon-class="ds-union" class="ds-icon-union" />
</span>
<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>
@ -325,7 +325,7 @@ export default {
this.kettleState()
},
mounted() {
this.treeNode(this.groupForm)
this.treeNode(true)
this.refresh()
},
methods: {
@ -407,7 +407,7 @@ export default {
showClose: true
})
this.expandedArray.push(group.pid)
this.treeNode(group.pid)
this.treeNode()
})
} else {
return false
@ -451,7 +451,7 @@ export default {
message: this.$t('dataset.delete_success'),
showClose: true
})
this.treeNode(data.pid)
this.treeNode()
})
}).catch(() => {
})
@ -469,7 +469,7 @@ export default {
message: this.$t('dataset.delete_success'),
showClose: true
})
this.treeNode(data.sceneId)
this.treeNode()
this.$store.dispatch('dataset/setTable', new Date().getTime())
})
}).catch(() => {
@ -496,9 +496,17 @@ export default {
}
},
treeNode(group) {
queryAuthModel({ modelType: 'dataset' }).then(res => {
this.tData = res.data
treeNode(cache) {
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
}
})
},
@ -682,7 +690,7 @@ export default {
this.searchTree(val)
} else {
this.isTreeSearch = false
this.treeNode(this.groupForm)
this.treeNode()
}
},
filterNode(value, data) {

3
frontend/src/views/link/pwd/index.vue
View File

@ -85,10 +85,10 @@ export default {
},
// 验证密码是否正确 如果正确 设置请求头部带LINK-PWD-TOKEN=entrypt(pwd)再刷新页面
refresh() {
this.msg = null
this.$refs.pwdForm.validate(valid => {
if (!valid) return false
const param = {
/* password: encrypt(this.form.password), */
password: this.form.password,
resourceId: this.resourceId
}
@ -96,7 +96,6 @@ export default {
if (!res.data) {
this.msg = this.$t('pblink.pwd_error')
} else {
// window.location.reload()
this.$emit('fresh-token')
}
})

14
frontend/src/views/login/index.vue
View File

@ -92,7 +92,13 @@ export default {
axiosFinished: false,
loginTypes: [0],
isPluginLoaded: false,
contentShow: false
contentShow: false,
clearLocalStorage: [
'panel-main-tree',
'panel-default-tree',
'chart-tree',
'dataset-tree'
]
}
},
computed: {
@ -178,8 +184,14 @@ export default {
}
} */
},
initCache() {
this.clearLocalStorage.forEach(item => {
localStorage.removeItem(item)
})
},
handleLogin() {
this.initCache()
this.clearOidcMsg()
this.$refs.loginForm.validate(valid => {
if (valid) {

17
frontend/src/views/panel/GrantAuth/ShareHead/index.vue
View File

@ -7,22 +7,20 @@
</el-col>
<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 :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') }}
</el-link>
<el-link type="success" disabled class="share-checked">
<!-- <el-checkbox v-model="checked" disabled>角色</el-checkbox> -->
{{ $t('panel.role') }}
</el-link>
<el-link type="info" disabled class="share-checked">
<!-- <el-checkbox v-model="checked" disabled>用户</el-checkbox> -->
{{ $t('panel.user') }}
</el-link>
</el-link> -->
</el-col>
</el-row>
<el-row style="display: flex;">
@ -68,6 +66,7 @@
<script>
import GrantAuth from '../index'
import { shareTargets, removeShares } from '@/api/panel/share'
import bus from '@/utils/bus'
export default {
name: 'ShareHead',
components: { GrantAuth },
@ -135,7 +134,13 @@ export default {
this.granterTime = item.createTime
return item
}).sort((a, b) => b.type - a.type)
if (!this.dynamicTags || this.dynamicTags.length === 0) {
this.afterRemoveAll()
}
})
},
afterRemoveAll() {
bus.$emit('refresh-my-share-out')
}
}
}

94
frontend/src/views/panel/GrantAuth/dept/index.vue
View File

@ -18,13 +18,13 @@
>
<span slot-scope="{ node, data }" class="custom-tree-node">
<span>
<span style="margin-left: 6px">{{ data.name }}</span>
<span style="margin-left: 6px">{{ node.data.name }}</span>
</span>
<span @click.stop>
<div>
<span class="auth-span">
<el-checkbox v-model="data.checked" />
<el-checkbox v-model="data.checked" @change="nodeStatusChange(data)" />
</span>
</div>
</span>
@ -68,7 +68,8 @@ export default {
return !data.hasChildren
}
},
expandNodeIds: []
expandNodeIds: [],
sharesLoad: false
}
},
watch: {
@ -125,33 +126,36 @@ export default {
} else {
param = { conditions: [this.defaultCondition] }
}
this.queryShareNodeIds(() => {
loadTable(param).then(res => {
let data = res.data
data = data.map(obj => {
if (obj.subCount > 0) {
obj.hasChildren = true
}
return obj
})
this.setCheckExpandNodes(data)
this.expandNodeIds = []
if (condition && condition.value) {
// data = data.map(node => {
// delete (node.hasChildren)
// return node
// })
this.data = this.buildTree(data)
this.$nextTick(() => {
// this.expandNodeIds.push()
this.expandResult(this.data)
})
} else {
this.data = data
}
if (!this.sharesLoad) {
this.queryShareNodeIds(() => {
this.sharesLoad = true
this.loadTreeData(param, condition)
})
} else {
this.loadTreeData(param, condition)
}
},
loadTreeData(param, condition) {
loadTable(param).then(res => {
let data = res.data
data = data.map(obj => {
if (obj.subCount > 0) {
obj.hasChildren = true
}
return obj
})
this.setCheckExpandNodes(data)
this.expandNodeIds = []
if (condition && condition.value) {
this.data = this.buildTree(data)
this.$nextTick(() => {
this.expandResult(this.data)
})
} else {
this.data = data
}
})
},
@ -185,18 +189,8 @@ export default {
},
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 {
deptIds: ids
deptIds: this.shares
}
},
@ -221,24 +215,26 @@ export default {
const shares = res.data
const nodeIds = shares.map(share => share.targetId)
this.shares = nodeIds
// this.$nextTick(() => {
// this.setCheckNodes()
// })
callBack && callBack()
})
},
// setCheckNodes() {
// this.data.forEach(node => {
// const nodeId = node.deptId
// this.shares.includes(nodeId) && (node.checked = true)
// })
// },
setCheckExpandNodes(rows) {
rows.forEach(node => {
const nodeId = node.deptId
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)
}
}
}

2
frontend/src/views/panel/GrantAuth/index.vue
View File

@ -59,8 +59,6 @@ export default {
this.showSearchInput = false
},
save() {
// this.$refs[this.activeName].save(this.$t('commons.share_success'))
// this.$emit('close-grant', 0)
this.fineSave()
},
fineSave() {

81
frontend/src/views/panel/GrantAuth/role/index.vue
View File

@ -2,11 +2,12 @@
<div class="my_table">
<el-table
ref="table"
:data="data.filter(node => !keyWord || node[fieldName].toLowerCase().includes(keyWord.toLowerCase()))"
:data="tableData"
:show-header="true"
style="width: 100%"
: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 type="selection" fixd />
@ -18,7 +19,6 @@
import { roleGrid } from '@/api/system/user'
import { formatCondition } from '@/utils/index'
import { loadShares } from '@/api/panel/share'
/* import { saveShare, loadShares } from '@/api/panel/share' */
export default {
name: 'GrantRole',
props: {
@ -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 }],
fieldName: 'name',
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() {
@ -56,48 +64,22 @@ export default {
const param = temp || {}
roleGrid(1, 0, param).then(response => {
const data = response.data
// this.total = data.itemCount
this.data = data.listObject
this.tableData = data.listObject
this.queryShareNodeIds()
})
},
filterHandler(value, row, column) {
// const property = column['property']
// return row[property] === value
const roleId = row['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() {
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() {
},
buildRequest(rows) {
@ -126,10 +108,39 @@ export default {
},
setCheckNodes() {
this.data.forEach(node => {
const nodeId = node.roleId
this.shares.includes(nodeId) && this.$refs.table.toggleRowSelection(node, true)
this.$nextTick(() => {
this.$refs.table.store.states.data.forEach(node => {
const nodeId = node.roleId
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))
}
}
}

30
frontend/src/views/panel/GrantAuth/shareTree.vue
View File

@ -11,15 +11,7 @@
</span>
<span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ data.name }}</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>
</el-tree>
</div>
@ -28,9 +20,9 @@
<el-row>
<span class="header-title">{{ $t('panel.share_out') }}</span>
<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 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">
<svg-icon icon-class="panel" class="ds-icon-scene" />
</span>
@ -79,7 +71,18 @@ export default {
outDatas: []
}
},
computed: {
panelInfo() {
return this.$store.state.panel.panelInfo
}
},
created() {
bus.$on('refresh-my-share-out', () => {
this.initOutData().then(res => {
this.outDatas = res.data
this.setMainNull()
})
})
this.initData().then(res => {
this.datas = res.data
if (this.msgPanelIds && this.msgPanelIds.length > 0) {
@ -145,7 +148,6 @@ export default {
})
},
removeCurrent(node) {
console.log(node)
const param = {
panelId: node.id
}
@ -156,6 +158,7 @@ export default {
type: 'warning'
}).then(() => {
removeShares(param).then(res => {
this.panelInfo && this.panelInfo.id && node.id === this.panelInfo.id && this.setMainNull()
this.initOutData().then(res => {
this.outDatas = res.data
})
@ -167,6 +170,9 @@ export default {
message: this.$t('commons.delete_cancelled')
})
})
},
setMainNull() {
this.$store.dispatch('panel/setPanelInfo', { id: null, name: '', preStyle: null })
}
}

78
frontend/src/views/panel/GrantAuth/user/index.vue
View File

@ -2,11 +2,12 @@
<div class="my_table">
<el-table
ref="table"
:data="data.filter(node => !keyWord || node[fieldName].toLowerCase().includes(keyWord.toLowerCase()))"
:data="tableData"
:show-header="true"
style="width: 100%"
:row-style="{height: '35px'}"
@filter-change="filterChange"
@select="selectOne"
@select-all="selectAll"
>
<el-table-column
:column-key="fieldName"
@ -47,7 +48,14 @@ export default {
filter_options: [{ text: this.$t('panel.unshared_people'), value: 0 }, { text: this.$t('panel.shared_people'), value: 1 }],
fieldName: 'nickName',
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() {
@ -63,48 +71,22 @@ export default {
const param = temp || {}
userLists(1, 0, param).then(response => {
const data = response.data
// this.total = data.itemCount
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()
})
},
filterHandler(value, row, column) {
// const property = column['property']
// return row[property] === value
const userId = row['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() {
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() {
console.log('user cancel')
},
@ -134,10 +116,38 @@ export default {
},
setCheckNodes() {
this.data.forEach(node => {
const nodeId = node.userId
this.shares.includes(nodeId) && this.$refs.table.toggleRowSelection(node, true)
this.$nextTick(() => {
this.$refs.table.store.states.data.forEach(node => {
const nodeId = node.userId
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))
}
}
}

4
frontend/src/views/panel/edit/index.vue
View File

@ -191,6 +191,7 @@
:opt-from="'panel'"
:advice-group-id="adviceGroupId"
style="height: 0px;width:0px;padding:0px;overflow: hidden"
:mounted-init="false"
@newViewInfo="newViewInfo"
/>
@ -521,7 +522,8 @@ export default {
const stick = evt.target.closest('.el-icon-magic-stick')
const xuanfuanniu = evt.target.closest('.icon-xuanfuanniu')
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
window.removeEventListener('click', this.closeSidebar)
this.showIndex = -1

420
frontend/src/views/panel/filter/filterDialog.vue
View File

@ -7,7 +7,8 @@
<div class="component-header filter-common">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item v-for="bread in dataSetBreads" :key="bread.label">
<a v-if="bread.link" :class="{'link-text' : bread.link}" @click="backToLink(bread)"> {{ bread.label }}</a>
<a v-if="bread.link" :class="{'link-text' : bread.link}" @click="backToLink(bread)">
{{ bread.label }}</a>
<span v-else>{{ bread.label }}</span>
</el-breadcrumb-item>
</el-breadcrumb>
@ -66,7 +67,12 @@
@start="start1"
>
<transition-group>
<div v-for="item in fieldDatas.filter(item => !keyWord || (item.name && item.name.toLocaleLowerCase().includes(keyWord)))" :key="item.id" :class="componentInfo && componentInfo.options.attrs.fieldId === item.id ? 'filter-db-row-checked' : 'filter-db-row'" class="filter-db-row">
<div
v-for="item in fieldDatas.filter(item => !keyWord || (item.name && item.name.toLocaleLowerCase().includes(keyWord)))"
:key="item.id"
:class="componentInfo && componentInfo.options.attrs.fieldId === item.id ? 'filter-db-row-checked' : 'filter-db-row'"
class="filter-db-row"
>
<i class="el-icon-s-data" />
<span> {{ item.name }}</span>
</div>
@ -81,7 +87,8 @@
<div class="component-header filter-common">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item v-for="bread in componentSetBreads" :key="bread.label">
<a v-if="bread.link" :class="{'link-text' : bread.link}" @click="comBackLink(bread)"> {{ bread.label }}</a>
<a v-if="bread.link" :class="{'link-text' : bread.link}" @click="comBackLink(bread)">
{{ bread.label }}</a>
<span v-else>{{ bread.label }}</span>
</el-breadcrumb-item>
</el-breadcrumb>
@ -135,7 +142,12 @@
@start="start1"
>
<transition-group>
<div v-for="item in comFieldDatas.filter(item => !viewKeyWord || item.name.toLocaleLowerCase().includes(viewKeyWord))" :key="item.id" :class="componentInfo && componentInfo.options.attrs.fieldId === item.id ? 'filter-db-row-checked' : 'filter-db-row'" class="filter-db-row">
<div
v-for="item in comFieldDatas.filter(item => !viewKeyWord || item.name.toLocaleLowerCase().includes(viewKeyWord))"
:key="item.id"
:class="componentInfo && componentInfo.options.attrs.fieldId === item.id ? 'filter-db-row-checked' : 'filter-db-row'"
class="filter-db-row"
>
<i class="el-icon-s-data" />
<span> {{ item.name }}</span>
</div>
@ -171,7 +183,13 @@
@end="end2"
>
<transition-group class="list-group" :data-value="$t('panel.drag_here')">
<drag-item v-for="(item,index) in selectField" :key="item.id" :item="item" :index="index" @closeItem="closeItem" />
<drag-item
v-for="(item,index) in selectField"
:key="item.id"
:item="item"
:index="index"
@closeItem="closeItem"
/>
</transition-group>
</draggable>
</el-row>
@ -192,46 +210,72 @@
/>
</div>
</el-col>
<el-col :span="16"><div class="filter-options-right">
<span style="padding-right: 10px;">
<el-checkbox v-model="componentInfo.options.attrs.showTitle" @change="showTitleChange">显示标题</el-checkbox>
<el-popover
v-model="titlePopovervisible"
placement="bottom-end"
:disabled="!componentInfo.options.attrs.showTitle"
width="200"
>
<div style="width: 100%;overflow-y: auto;overflow-x: hidden;word-break: break-all;position: relative;">
<el-input v-model="componentInfo.options.attrs.title" placeholder="请输入标题" type="textarea" maxlength="15" show-word-limit />
</div>
<el-col :span="16">
<div class="filter-options-right">
<span style="padding-right: 10px;">
<el-checkbox v-model="componentInfo.options.attrs.showTitle" @change="showTitleChange">显示标题
</el-checkbox>
<el-popover
v-model="titlePopovervisible"
placement="bottom-end"
:disabled="!componentInfo.options.attrs.showTitle"
width="200"
>
<div
style="width: 100%;overflow-y: auto;overflow-x: hidden;word-break: break-all;position: relative;"
>
<el-input
v-model="componentInfo.options.attrs.title"
placeholder="请输入标题"
type="textarea"
maxlength="15"
show-word-limit
/>
</div>
<i slot="reference" :class="{'i-filter-active': componentInfo.options.attrs.showTitle, 'i-filter-inactive': !componentInfo.options.attrs.showTitle}" class="el-icon-setting i-filter" />
</el-popover>
</span>
<span style="padding-left: 10px;">
<el-checkbox v-model="componentInfo.options.attrs.enableRange" @change="enableRangeChange"><span> {{ $t('panel.custom_scope') }} </span> </el-checkbox>
<i
slot="reference"
:class="{'i-filter-active': componentInfo.options.attrs.showTitle, 'i-filter-inactive': !componentInfo.options.attrs.showTitle}"
class="el-icon-setting i-filter"
/>
</el-popover>
</span>
<span style="padding-left: 10px;">
<el-checkbox v-model="componentInfo.options.attrs.enableRange" @change="enableRangeChange"><span>
{{ $t('panel.custom_scope') }} </span> </el-checkbox>
<el-popover
v-model="popovervisible"
placement="bottom-end"
:disabled="!componentInfo.options.attrs.enableRange"
width="200"
>
<div class="view-container-class">
<el-checkbox-group v-model="componentInfo.options.attrs.viewIds" @change="checkedViewsChange">
<el-checkbox v-for="(item ) in viewInfos" :key="item.id" :label="item.id">
<span>
<svg-icon :icon-class="item.type" class="chart-icon" />
<span style="margin-left: 6px">{{ item.name }}</span>
</span>
</el-checkbox>
</el-checkbox-group>
</div>
<el-popover
v-model="popovervisible"
placement="bottom-end"
:disabled="!componentInfo.options.attrs.enableRange"
width="200"
>
<div class="view-container-class">
<el-checkbox-group v-model="componentInfo.options.attrs.viewIds" @change="checkedViewsChange">
<el-checkbox v-for="(item ) in viewInfos" :key="item.id" :label="item.id" class="de-checkbox">
<div class="span-div">
<svg-icon :icon-class="item.type" class="chart-icon" />
<span
v-if="item.name && item.name.length <= 7"
style="margin-left: 6px"
>{{ item.name }}</span>
<el-tooltip v-else class="item" effect="dark" :content="item.name" placement="left">
<span style="margin-left: 6px">{{ item.name }}</span>
</el-tooltip>
</div>
<i slot="reference" :class="{'i-filter-active': componentInfo.options.attrs.enableRange, 'i-filter-inactive': !componentInfo.options.attrs.enableRange}" class="el-icon-setting i-filter" />
</el-popover>
</span>
</div>
</el-checkbox>
</el-checkbox-group>
</div>
<i
slot="reference"
:class="{'i-filter-active': componentInfo.options.attrs.enableRange, 'i-filter-inactive': !componentInfo.options.attrs.enableRange}"
class="el-icon-setting i-filter"
/>
</el-popover>
</span>
</div>
</el-col>
</el-row>
@ -261,11 +305,22 @@ import DeContainer from '@/components/dataease/DeContainer'
import DeAsideContainer from '@/components/dataease/DeAsideContainer'
import draggable from 'vuedraggable'
import DragItem from '@/components/DragItem'
import { mapState } from 'vuex'
// import { ApplicationContext } from '@/utils/ApplicationContext'
import { groupTree, fieldList, fieldValues, post } from '@/api/dataset/dataset'
import { viewsWithIds } from '@/api/panel/view'
import { authModel } from '@/api/system/sysAuth'
import {
mapState
} from 'vuex'
// import { ApplicationContext } from '@/utils/ApplicationContext'
import {
groupTree,
fieldList,
fieldValues,
post
} from '@/api/dataset/dataset'
import {
viewsWithIds
} from '@/api/panel/view'
import {
authModel
} from '@/api/system/sysAuth'
export default {
name: 'FilterDialog',
components: {
@ -292,12 +347,16 @@ export default {
activeName: 'dataset',
showDomType: 'tree',
comShowDomType: 'view',
dataSetBreads: [
{ label: this.$t('panel.data_list'), link: false, type: 'root' }
],
componentSetBreads: [
{ label: this.$t('panel.component_list'), link: false, type: 'root' }
],
dataSetBreads: [{
label: this.$t('panel.data_list'),
link: false,
type: 'root'
}],
componentSetBreads: [{
label: this.$t('panel.component_list'),
link: false,
type: 'root'
}],
datas: [],
sceneDatas: [],
// viewDatas: [],
@ -441,7 +500,8 @@ export default {
// 判断根节点 ###
el.type = el.modelInnerType
el.isLeaf = el.leaf
if (el[this.defaultProps.parentId] === null || el[this.defaultProps.parentId] === 0 || el[this.defaultProps.parentId] === '0') {
if (el[this.defaultProps.parentId] === null || el[this.defaultProps.parentId] === 0 || el[this
.defaultProps.parentId] === '0') {
roots.push(el)
return
}
@ -512,11 +572,19 @@ export default {
tail.link = true
},
addTail(node) {
const tail = { link: false, label: node.label || node.name, type: node.type }
const tail = {
link: false,
label: node.label || node.name,
type: node.type
}
this.dataSetBreads.push(tail)
},
comAddTail(node) {
const tail = { link: false, label: node.label || node.name, type: node.type }
const tail = {
link: false,
label: node.label || node.name,
type: node.type
}
this.componentSetBreads.push(tail)
},
@ -529,19 +597,19 @@ export default {
return
}
}
// this.dataSetBreads = this.dataSetBreads.slice(0, this.dataSetBreads.length - 1)
// this.dataSetBreads[this.dataSetBreads.length - 1]['link'] = false
// this.dataSetBreads = this.dataSetBreads.slice(0, this.dataSetBreads.length - 1)
// this.dataSetBreads[this.dataSetBreads.length - 1]['link'] = false
},
comRemoveTail() {
this.componentSetBreads = this.componentSetBreads.slice(0, this.componentSetBreads.length - 1)
this.componentSetBreads[this.componentSetBreads.length - 1]['link'] = false
},
backToLink(bread) {
// if (bread.type === 'field') {
// this.showDomType = 'db'
// } else {
// this.showDomType = 'tree'
// }
// if (bread.type === 'field') {
// this.showDomType = 'db'
// } else {
// this.showDomType = 'tree'
// }
this.showDomType = 'tree'
this.removeTail(bread)
@ -645,7 +713,7 @@ export default {
multipleChange(value) {
// this.componentInfo.options.attrs.multiple = value
// this.componentInfo.options.value = null
// this.componentInfo.options.value = null
this.$emit('re-fresh-component', this.componentInfo)
},
@ -668,16 +736,19 @@ export default {
}
}
}
</script>
<style lang="scss" scoped>
.my-form-item {
cursor: text;
cursor: text;
}
.de-dialog-container {
height: 50vh !important;
}
.ms-aside-container {
width: 40% !important;
min-width: 230px !important;
@ -697,179 +768,202 @@ export default {
.filter-field {
// background: #99a9bf;
border-radius: 4px;
height: 45px;
.field-content {
position: relative;
display: table;
width: 100%;
height: 100%;
white-space: nowrap;
border-radius: 4px;
height: 45px;
.field-content-left {
width: 50px;
max-width: 50px;
position: relative;
display: table-cell;
vertical-align: middle;
margin: 0px;
padding: 8px;
height: 100%;
border-right: none;
border: 1px solid var(--TableBorderColor, #E6E6E6);;
.field-content-text {
box-sizing: border-box;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
word-break: break-all;
}
}
.field-content-right {
border-left: none;
color: #9ea6b2;
border: 1px solid var(--TableBorderColor, #E6E6E6);
width: 0%;
max-width: 0%;
position: relative;
display: table-cell;
vertical-align: middle;
margin: 0px;
padding: 0 0 0 0;
height: 100%;
.field-content {
position: relative;
display: table;
width: 100%;
height: 100%;
white-space: nowrap;
.field-content-left {
width: 50px;
max-width: 50px;
position: relative;
display: table-cell;
vertical-align: middle;
margin: 0px;
padding: 8px;
height: 100%;
border-right: none;
border: 1px solid var(--TableBorderColor, #E6E6E6);
;
.field-content-text {
box-sizing: border-box;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
word-break: break-all;
}
}
.field-content-right {
border-left: none;
color: #9ea6b2;
border: 1px solid var(--TableBorderColor, #E6E6E6);
width: 0%;
max-width: 0%;
position: relative;
display: table-cell;
vertical-align: middle;
margin: 0px;
padding: 0 0 0 0;
height: 100%;
}
}
}
.filter-options-left {
align-items: center;
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-wrap: nowrap;
height: 50px;
align-items: center;
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-wrap: nowrap;
height: 50px;
}
.filter-options-right {
align-items: center;
display: flex;
flex-direction: row;
justify-content: flex-end;
flex-wrap: nowrap;
height: 50px;
align-items: center;
display: flex;
flex-direction: row;
justify-content: flex-end;
flex-wrap: nowrap;
height: 50px;
}
.filter-content {
height: calc(50vh - 120px);
top: 160px;
height: calc(50vh - 120px);
top: 160px;
}
.filter-dialog-tabs {
border: 1px solid var(--TableBorderColor, #E6E6E6);
padding: 10px;
height: 100%;
>>> div.el-tabs__content {
height: calc(100% - 55px);
}
border: 1px solid var(--TableBorderColor, #E6E6E6);
padding: 10px;
height: 100%;
>>>div.el-tabs__content {
height: calc(100% - 55px);
}
}
.filter-common {
margin: 10px 5px;
margin: 10px 5px;
}
.component-header {
margin: 5px 5px 15px;
margin: 5px 5px 15px;
}
.component-result-content {
height: calc(50vh - 150px);
overflow-y: auto;
height: calc(50vh - 150px);
overflow-y: auto;
}
.link-text {
font-weight: 450 !important;
color: #409EFF;
font-weight: 450 !important;
color: #409EFF;
}
.filter-db-row {
i {
color: #3685f2;
}
i {
color: #3685f2;
}
// background-color: #3685f2;
// color: #fff;
}
.filter-db-row:hover {
background-color: var(--background-color-base, #f5f7fa) !important;
cursor: pointer;
background-color: var(--background-color-base, #f5f7fa) !important;
cursor: pointer;
}
.filter-db-row-checked:hover {
background-color: var(--background-color-base, #f5f7fa) !important;
color: inherit;
cursor: pointer;
i {
background-color: inherit;
color: #3685f2;
}
background-color: var(--background-color-base, #f5f7fa) !important;
color: inherit;
cursor: pointer;
i {
background-color: inherit;
color: #3685f2;
}
}
.filter-db-row-checked {
background-color: #3685f2 !important;
color: #fff;
i {
background-color: #3685f2;
color: #fff;
background-color: #3685f2;
color: #fff;
}
}
.draggable-group {
display: inline-block;
width: 100%;
height: calc(100% - 6px);
}
.box-card {
width: 100%;
height: 100%;
width: 100%;
height: 100%;
}
.i-filter {
text-align: center;
margin-left: 5px;
margin-top: 1px;
}
.i-filter-inactive {
color: #9ea6b2!important;
cursor: not-allowed!important;
color: #9ea6b2 !important;
cursor: not-allowed !important;
}
.i-filter-active {
cursor: pointer!important;
cursor: pointer !important;
}
.view-container-class {
min-height: 150px;
max-height: 200px;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
word-break:break-all;
position: relative;
>>> label {
width: 100%;
margin-left: 0px !important;
}
min-height: 150px;
max-height: 200px;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
word-break: break-all;
position: relative;
}
.list-group:empty,
.list-group > div:empty {
.list-group>div:empty {
display: inline-block;
width: 100%;
height: calc(100% - 13px);
}
.list-group:empty:before,
.list-group > div:empty:before {
.list-group>div:empty:before {
content: attr(data-value);
}
.blackTheme .theme-drag {
background-color: var(--MainBG, #fff);
background-color: var(--MainBG, #fff);
}
.span-div {
width: 135px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
</style>

53
frontend/src/views/panel/list/PanelList.vue
View File

@ -233,6 +233,7 @@ import {
DEFAULT_COMMON_CANVAS_STYLE_STRING
} from '@/views/panel/panel'
import TreeSelector from '@/components/TreeSelector'
import { queryAuthModel } from '@/api/authModel/authModel'
export default {
name: 'PanelList',
@ -334,7 +335,11 @@ export default {
searchMap: {
all: this.$t('commons.all'),
folder: this.$t('commons.folder')
}
},
initLocalStorage: [
'chart',
'dataset'
]
}
},
computed: {
@ -367,9 +372,20 @@ export default {
this.$store.commit('setComponentData', [])
this.$store.commit('setCanvasStyle', DEFAULT_COMMON_CANVAS_STYLE_STRING)
this.defaultTree()
this.tree(this.groupForm)
this.tree(true)
this.initCache()
},
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) {
this.editPanel.visible = false
if (panelInfo) {
@ -392,7 +408,7 @@ export default {
}
this.activeNodeAndClick(panelInfo)
} else {
this.tree(this.groupForm)
this.tree()
}
}
},
@ -535,7 +551,7 @@ export default {
type: 'success',
showClose: true
})
this.tree(this.groupForm)
this.tree()
this.defaultTree()
})
} else {
@ -562,7 +578,7 @@ export default {
showClose: true
})
this.clearCanvas()
this.tree(this.groupForm)
this.tree()
this.defaultTree()
})
}).catch(() => {
@ -591,17 +607,32 @@ export default {
sort: 'node_type desc,name asc'
}
},
tree(group) {
groupTree(group).then(res => {
this.tData = res.data
tree(cache = false) {
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
}
})
},
defaultTree() {
const requestInfo = {
panelType: 'system'
}
defaultTree(requestInfo).then(res => {
this.defaultData = res.data
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
}
})
},
@ -768,7 +799,7 @@ export default {
this.moveInfo.pid = this.tGroup.id
this.moveInfo['optType'] = 'move'
panelSave(this.moveInfo).then(response => {
this.tree(this.groupForm)
this.tree()
this.closeMoveGroup()
})
},

4
frontend/src/views/panel/list/PanelMain.vue
View File

@ -4,7 +4,7 @@
<el-tabs v-model="activeName" class="tab-panel" :stretch="true" @tab-click="handleClick">
<el-tab-pane name="PanelList">
<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 name="panels_star" :lazy="true">
<span slot="label"><i class="el-icon-star-off tablepanel-i" />{{ $t('panel.store') }}</span>
@ -17,7 +17,7 @@
</el-tabs>
</de-aside-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-container>
</template>