forked from github/dataease
feat(frontend):数据集、视图名称通过鼠标hover事件,弹出与其关联的数据集 数据源等详情
This commit is contained in:
parent
fea7ceec9b
commit
d05892bd4b
@ -779,9 +779,14 @@ export default {
|
|||||||
showRow: '显示行',
|
showRow: '显示行',
|
||||||
add_excel_table: '添加Excel数据集',
|
add_excel_table: '添加Excel数据集',
|
||||||
add_custom_table: '添加自助数据集',
|
add_custom_table: '添加自助数据集',
|
||||||
upload_file: '上传文件'
|
upload_file: '上传文件',
|
||||||
|
detail: '详情',
|
||||||
|
type: '类型',
|
||||||
|
create_by: '创建者',
|
||||||
|
create_time: '创建时间'
|
||||||
},
|
},
|
||||||
datasource: {
|
datasource: {
|
||||||
|
datasource: '数据源',
|
||||||
create: '新建数据连接',
|
create: '新建数据连接',
|
||||||
type: '类型',
|
type: '类型',
|
||||||
please_choose_type: '请选择数据源类型',
|
please_choose_type: '请选择数据源类型',
|
||||||
|
@ -2,7 +2,16 @@
|
|||||||
<el-row style="height: 100%;overflow-y: hidden;width: 100%;">
|
<el-row style="height: 100%;overflow-y: hidden;width: 100%;">
|
||||||
<span v-show="false">{{ vId }}</span>
|
<span v-show="false">{{ vId }}</span>
|
||||||
<el-row style="height: 40px;background-color: white" class="padding-lr">
|
<el-row style="height: 40px;background-color: white" class="padding-lr">
|
||||||
<span style="line-height: 40px;">{{ view.name }}</span>
|
<el-popover
|
||||||
|
placement="right-start"
|
||||||
|
width="400"
|
||||||
|
trigger="hover"
|
||||||
|
@show="showTab"
|
||||||
|
@hide="hideTab"
|
||||||
|
>
|
||||||
|
<dataset-chart-detail type="chart" :data="view" :tab-status="tabStatus" />
|
||||||
|
<span slot="reference" style="line-height: 40px;cursor: pointer;">{{ view.name }}</span>
|
||||||
|
</el-popover>
|
||||||
<span style="float: right;line-height: 40px;">
|
<span style="float: right;line-height: 40px;">
|
||||||
<el-button size="mini" @click="closeEdit">
|
<el-button size="mini" @click="closeEdit">
|
||||||
{{ $t('chart.close') }}
|
{{ $t('chart.close') }}
|
||||||
@ -229,6 +238,7 @@ import QuotaItem from '../components/drag-item/QuotaItem'
|
|||||||
import FilterItem from '../components/drag-item/FilterItem'
|
import FilterItem from '../components/drag-item/FilterItem'
|
||||||
import ChartComponent from '../components/ChartComponent'
|
import ChartComponent from '../components/ChartComponent'
|
||||||
import bus from '@/utils/bus'
|
import bus from '@/utils/bus'
|
||||||
|
import DatasetChartDetail from '../../dataset/common/DatasetChartDetail'
|
||||||
|
|
||||||
// shape attr,component style
|
// shape attr,component style
|
||||||
import {
|
import {
|
||||||
@ -255,7 +265,7 @@ import QuotaFilterEditor from '../components/filter/QuotaFilterEditor'
|
|||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'ChartEdit',
|
name: 'ChartEdit',
|
||||||
components: { QuotaFilterEditor, BackgroundColorSelector, FilterItem, XAxisSelector, YAxisSelector, TooltipSelector, LabelSelector, LegendSelector, TitleSelector, SizeSelector, ColorSelector, ChartComponent, QuotaItem, DimensionItem, draggable },
|
components: { DatasetChartDetail, QuotaFilterEditor, BackgroundColorSelector, FilterItem, XAxisSelector, YAxisSelector, TooltipSelector, LabelSelector, LegendSelector, TitleSelector, SizeSelector, ColorSelector, ChartComponent, QuotaItem, DimensionItem, draggable },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
table: {},
|
table: {},
|
||||||
@ -296,7 +306,8 @@ export default {
|
|||||||
name: [
|
name: [
|
||||||
{ required: true, message: this.$t('commons.input_content'), trigger: 'change' }
|
{ required: true, message: this.$t('commons.input_content'), trigger: 'change' }
|
||||||
]
|
]
|
||||||
}
|
},
|
||||||
|
tabStatus: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@ -577,6 +588,13 @@ export default {
|
|||||||
},
|
},
|
||||||
resetRename() {
|
resetRename() {
|
||||||
// this.itemForm = {}
|
// this.itemForm = {}
|
||||||
|
},
|
||||||
|
|
||||||
|
showTab() {
|
||||||
|
this.tabStatus = true
|
||||||
|
},
|
||||||
|
hideTab() {
|
||||||
|
this.tabStatus = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
165
frontend/src/views/dataset/common/DatasetChartDetail.vue
Normal file
165
frontend/src/views/dataset/common/DatasetChartDetail.vue
Normal file
@ -0,0 +1,165 @@
|
|||||||
|
<template>
|
||||||
|
<el-col>
|
||||||
|
<el-row>
|
||||||
|
<span style="font-weight: 500;">{{ $t('dataset.detail') }}</span>
|
||||||
|
</el-row>
|
||||||
|
<el-col>
|
||||||
|
<el-tabs v-if="tabStatus" v-model="tabActive" class="info-tab">
|
||||||
|
<el-tab-pane v-if="type === 'chart'" :label="$t('chart.datalist')" name="chart">
|
||||||
|
<el-col class="info-item">
|
||||||
|
<p class="info-title">{{ $t('commons.name') }}</p>
|
||||||
|
<p class="info-content">{{ detail.chart.name }}</p>
|
||||||
|
</el-col>
|
||||||
|
<el-col class="info-item">
|
||||||
|
<p class="info-title">{{ $t('chart.chart_type') }}</p>
|
||||||
|
<svg-icon v-if="detail.chart.type" :icon-class="detail.chart.type" />
|
||||||
|
</el-col>
|
||||||
|
<el-col class="info-item">
|
||||||
|
<p class="info-title">{{ $t('chart.title') }}</p>
|
||||||
|
<p class="info-content">{{ detail.chart.title || 'N/A' }}</p>
|
||||||
|
</el-col>
|
||||||
|
<el-col class="info-item">
|
||||||
|
<p class="info-title">{{ $t('dataset.create_by') }}</p>
|
||||||
|
<p class="info-content">{{ detail.chart.createBy }}</p>
|
||||||
|
</el-col>
|
||||||
|
<el-col class="info-item">
|
||||||
|
<p class="info-title">{{ $t('dataset.create_time') }}</p>
|
||||||
|
<p class="info-content">{{ detail.chart.createTime | timestampFormatDate }}</p>
|
||||||
|
</el-col>
|
||||||
|
</el-tab-pane>
|
||||||
|
|
||||||
|
<el-tab-pane :label="$t('dataset.datalist')" name="table">
|
||||||
|
<el-col class="info-item">
|
||||||
|
<p class="info-title">{{ $t('commons.name') }}</p>
|
||||||
|
<p class="info-content">{{ detail.table.name }}</p>
|
||||||
|
</el-col>
|
||||||
|
<el-col class="info-item">
|
||||||
|
<p class="info-title">{{ $t('dataset.type') }}</p>
|
||||||
|
<p v-if="detail.table.type === 'db'" class="info-content">{{ $t('dataset.db_data') }}</p>
|
||||||
|
<p v-if="detail.table.type === 'sql'" class="info-content">{{ $t('dataset.sql_data') }}</p>
|
||||||
|
<p v-if="detail.table.type === 'excel'" class="info-content">{{ $t('dataset.excel_data') }}</p>
|
||||||
|
<p v-if="detail.table.type === 'custom'" class="info-content">{{ $t('dataset.custom_data') }}</p>
|
||||||
|
</el-col>
|
||||||
|
<el-col class="info-item">
|
||||||
|
<p class="info-title">{{ $t('dataset.mode') }}</p>
|
||||||
|
<p v-if="detail.table.mode === 0" class="info-content">{{ $t('dataset.direct_connect') }}</p>
|
||||||
|
<p v-if="detail.table.mode === 1" class="info-content">{{ $t('dataset.sync_data') }}</p>
|
||||||
|
</el-col>
|
||||||
|
<el-col class="info-item">
|
||||||
|
<p class="info-title">{{ $t('dataset.create_by') }}</p>
|
||||||
|
<p class="info-content">{{ detail.table.createBy }}</p>
|
||||||
|
</el-col>
|
||||||
|
<el-col class="info-item">
|
||||||
|
<p class="info-title">{{ $t('dataset.create_time') }}</p>
|
||||||
|
<p class="info-content">{{ detail.table.createTime | timestampFormatDate }}</p>
|
||||||
|
</el-col>
|
||||||
|
</el-tab-pane>
|
||||||
|
|
||||||
|
<el-tab-pane :label="$t('datasource.datasource')" name="datasource">
|
||||||
|
<el-col class="info-item">
|
||||||
|
<p class="info-title">{{ $t('commons.name') }}</p>
|
||||||
|
<p class="info-content">{{ detail.datasource.name }}</p>
|
||||||
|
</el-col>
|
||||||
|
<el-col class="info-item">
|
||||||
|
<p class="info-title">{{ $t('commons.description') }}</p>
|
||||||
|
<p class="info-content">{{ detail.datasource.desc || 'N/A' }}</p>
|
||||||
|
</el-col>
|
||||||
|
<el-col class="info-item">
|
||||||
|
<p class="info-title">{{ $t('datasource.type') }}</p>
|
||||||
|
<p class="info-content">{{ detail.datasource.type }}</p>
|
||||||
|
</el-col>
|
||||||
|
<el-col class="info-item">
|
||||||
|
<p class="info-title">{{ $t('dataset.create_time') }}</p>
|
||||||
|
<p class="info-content">{{ detail.datasource.createTime | timestampFormatDate }}</p>
|
||||||
|
</el-col>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</el-col>
|
||||||
|
</el-col>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { post } from '@/api/dataset/dataset'
|
||||||
|
export default {
|
||||||
|
name: 'DatasetChartDetail',
|
||||||
|
props: {
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
tabStatus: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tabActive: 'chart',
|
||||||
|
detail: {
|
||||||
|
chart: {},
|
||||||
|
table: {},
|
||||||
|
datasource: {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
'data': function() {
|
||||||
|
this.init()
|
||||||
|
},
|
||||||
|
'type': function() {
|
||||||
|
this.typeChange()
|
||||||
|
},
|
||||||
|
'tabStatus': function() {
|
||||||
|
this.typeChange()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.init()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init() {
|
||||||
|
if (this.data.id) {
|
||||||
|
if (this.type === 'dataset') {
|
||||||
|
post('/dataset/table/datasetDetail/' + this.data.id, null).then(res => {
|
||||||
|
this.detail = res.data
|
||||||
|
})
|
||||||
|
} else if (this.type === 'chart') {
|
||||||
|
post('/chart/view/chartDetail/' + this.data.id, null).then(res => {
|
||||||
|
this.detail = res.data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
typeChange() {
|
||||||
|
if (this.type === 'dataset') {
|
||||||
|
this.tabActive = 'table'
|
||||||
|
} else if (this.type === 'chart') {
|
||||||
|
this.tabActive = 'chart'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.info-tab>>>.el-tabs__item{
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.info-item{
|
||||||
|
margin: 6px 0;
|
||||||
|
}
|
||||||
|
.info-title{
|
||||||
|
margin: 0!important;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.info-content{
|
||||||
|
margin: 0!important;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
</style>
|
@ -3,9 +3,18 @@
|
|||||||
<el-row>
|
<el-row>
|
||||||
<el-row style="height: 26px;">
|
<el-row style="height: 26px;">
|
||||||
<span v-show="false">{{ tableId }}</span>
|
<span v-show="false">{{ tableId }}</span>
|
||||||
<span style="line-height: 26px;">
|
<el-popover
|
||||||
{{ table.name }}
|
placement="right-start"
|
||||||
</span>
|
width="400"
|
||||||
|
trigger="hover"
|
||||||
|
@show="showTab"
|
||||||
|
@hide="hideTab"
|
||||||
|
>
|
||||||
|
<dataset-chart-detail type="dataset" :data="table" :tab-status="tabStatus" />
|
||||||
|
<span slot="reference" style="line-height: 26px;cursor: pointer;">
|
||||||
|
{{ table.name }}
|
||||||
|
</span>
|
||||||
|
</el-popover>
|
||||||
<el-row style="float: right">
|
<el-row style="float: right">
|
||||||
<el-button v-if="table.type ==='sql'" size="mini" @click="editSql">
|
<el-button v-if="table.type ==='sql'" size="mini" @click="editSql">
|
||||||
{{ $t('dataset.edit_sql') }}
|
{{ $t('dataset.edit_sql') }}
|
||||||
@ -81,10 +90,11 @@
|
|||||||
import { getTable, getPreviewData, fieldList, batchEdit } from '@/api/dataset/dataset'
|
import { getTable, getPreviewData, fieldList, batchEdit } from '@/api/dataset/dataset'
|
||||||
import TabDataPreview from './TabDataPreview'
|
import TabDataPreview from './TabDataPreview'
|
||||||
import UpdateInfo from './UpdateInfo'
|
import UpdateInfo from './UpdateInfo'
|
||||||
|
import DatasetChartDetail from '../common/DatasetChartDetail'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'ViewTable',
|
name: 'ViewTable',
|
||||||
components: { UpdateInfo, TabDataPreview },
|
components: { DatasetChartDetail, UpdateInfo, TabDataPreview },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
createViewDialog: false,
|
createViewDialog: false,
|
||||||
@ -98,7 +108,8 @@ export default {
|
|||||||
tableFields: [],
|
tableFields: [],
|
||||||
tableViewRowForm: {
|
tableViewRowForm: {
|
||||||
row: 1000
|
row: 1000
|
||||||
}
|
},
|
||||||
|
tabStatus: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@ -173,6 +184,13 @@ export default {
|
|||||||
reSearch(val) {
|
reSearch(val) {
|
||||||
this.tableViewRowForm = val
|
this.tableViewRowForm = val
|
||||||
this.initPreviewData()
|
this.initPreviewData()
|
||||||
|
},
|
||||||
|
|
||||||
|
showTab() {
|
||||||
|
this.tabStatus = true
|
||||||
|
},
|
||||||
|
hideTab() {
|
||||||
|
this.tabStatus = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user