forked from github/dataease
feat(frontend): 前端 数据集，视图 调整
This commit is contained in:
junjie
parent
71195722f8
commit
b2f1926918
@ -15,7 +15,9 @@
|
||||
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
|
||||
},
|
||||
"dependencies": {
|
||||
"@riophae/vue-treeselect": "0.4.0",
|
||||
"axios": "0.18.1",
|
||||
"echarts": "^5.0.2",
|
||||
"element-ui": "2.13.0",
|
||||
"fit2cloud-ui": "^0.1.12",
|
||||
"js-cookie": "2.2.0",
|
||||
@ -30,9 +32,8 @@
|
||||
"vue": "2.6.10",
|
||||
"vue-i18n": "7.3.2",
|
||||
"vue-router": "3.0.6",
|
||||
"vuex": "3.1.0",
|
||||
"@riophae/vue-treeselect": "0.4.0",
|
||||
"vuedraggable": "^2.24.3"
|
||||
"vuedraggable": "^2.24.3",
|
||||
"vuex": "3.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "7.0.0",
|
||||
|
||||
9
frontend/src/api/chart/chart.js
Normal file
9
frontend/src/api/chart/chart.js
Normal file
@ -0,0 +1,9 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function post(url, data) {
|
||||
return request({
|
||||
url: url,
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
@ -52,4 +52,50 @@ export function groupTree(data) {
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function listDatasource() {
|
||||
return request({
|
||||
url: '/datasource/list',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function getTable(id) {
|
||||
return request({
|
||||
url: '/dataset/table/get/' + id,
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
|
||||
export function getPreviewData(data) {
|
||||
return request({
|
||||
url: '/dataset/table/getPreviewData',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function fieldList(id) {
|
||||
return request({
|
||||
url: '/dataset/field/list/' + id,
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
|
||||
export function batchEdit(data) {
|
||||
return request({
|
||||
url: '/dataset/field/batchEdit',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function post(url, data) {
|
||||
return request({
|
||||
url: url,
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export default { loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree }
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<section class="app-main">
|
||||
<section class="app-main">
|
||||
<transition name="fade-transform" mode="out-in">
|
||||
<el-main class="ms-main-container">
|
||||
<keep-alive>
|
||||
<router-view :key="key" />
|
||||
</keep-alive>
|
||||
</el-main>
|
||||
<el-main class="ms-main-container">
|
||||
<keep-alive>
|
||||
<router-view :key="key"/>
|
||||
</keep-alive>
|
||||
</el-main>
|
||||
</transition>
|
||||
</section>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -22,25 +22,30 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/styles/variables.scss";
|
||||
@import "~@/styles/variables.scss";
|
||||
|
||||
.app-main {
|
||||
/*107 = navbar 50 + topbar 57 */
|
||||
min-height: calc(100vh - 107px);
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.fixed-header+.app-main {
|
||||
padding-top: 50px;
|
||||
}
|
||||
.app-main {
|
||||
/*107 = navbar 50 + topbar 57 */
|
||||
min-height: calc(100vh - 107px);
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fixed-header + .app-main {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.ms-main-container {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
// fix css style bug in open el-dialog
|
||||
.el-popup-parent--hidden {
|
||||
.fixed-header {
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
// fix css style bug in open el-dialog
|
||||
.el-popup-parent--hidden {
|
||||
.fixed-header {
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -21,6 +21,10 @@ import message from '@/metersphere/common/js/message'
|
||||
import { left2RightDrag, bottom2TopDrag, right2LeftDrag } from '@/metersphere/common/js/directive'
|
||||
Vue.prototype.$api = api
|
||||
|
||||
import echarts from 'echarts'
|
||||
|
||||
Vue.prototype.$echarts = echarts
|
||||
|
||||
/**
|
||||
* If you don't want to use mock-server
|
||||
* you want to use MockJs for mock api
|
||||
|
||||
@ -6,6 +6,7 @@ import settings from './modules/settings'
|
||||
import user from './modules/user'
|
||||
import permission from './modules/permission'
|
||||
import dataset from './modules/dataset'
|
||||
import chart from './modules/chart'
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
@ -15,7 +16,8 @@ const store = new Vuex.Store({
|
||||
settings,
|
||||
user,
|
||||
permission,
|
||||
dataset
|
||||
dataset,
|
||||
chart
|
||||
},
|
||||
getters
|
||||
})
|
||||
|
||||
62
frontend/src/store/modules/chart.js
Normal file
62
frontend/src/store/modules/chart.js
Normal file
@ -0,0 +1,62 @@
|
||||
const getDefaultState = () => {
|
||||
return {
|
||||
sceneData: {},
|
||||
table: {},
|
||||
sceneId: {},
|
||||
viewId: {},
|
||||
tableId: {},
|
||||
chartSceneData: {}
|
||||
}
|
||||
}
|
||||
|
||||
const state = getDefaultState()
|
||||
|
||||
const mutations = {
|
||||
setSceneData: (state, sceneData) => {
|
||||
state.sceneData = sceneData
|
||||
},
|
||||
setTable: (state, table) => {
|
||||
state.table = table
|
||||
},
|
||||
setSceneId: (state, sceneId) => {
|
||||
state.sceneId = sceneId
|
||||
},
|
||||
setViewId: (state, viewId) => {
|
||||
state.viewId = viewId
|
||||
},
|
||||
setTableId: (state, tableId) => {
|
||||
state.tableId = tableId
|
||||
},
|
||||
setChartSceneData: (state, chartSceneData) => {
|
||||
state.chartSceneData = chartSceneData
|
||||
}
|
||||
}
|
||||
|
||||
const actions = {
|
||||
setSceneData({ commit }, sceneData) {
|
||||
commit('setSceneData', sceneData)
|
||||
},
|
||||
setTable({ commit }, table) {
|
||||
commit('setTable', table)
|
||||
},
|
||||
setSceneId: ({ commit }, sceneId) => {
|
||||
commit('setSceneId', sceneId)
|
||||
},
|
||||
setViewId: ({ commit }, viewId) => {
|
||||
commit('setViewId', viewId)
|
||||
},
|
||||
setTableId: ({ commit }, tableId) => {
|
||||
commit('setTableId', tableId)
|
||||
},
|
||||
setChartSceneData: ({ commit }, chartSceneData) => {
|
||||
commit('setChartSceneData', chartSceneData)
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
state,
|
||||
mutations,
|
||||
actions
|
||||
}
|
||||
|
||||
@ -1,148 +0,0 @@
|
||||
<template>
|
||||
<el-col>
|
||||
<el-row>
|
||||
<el-row style="height: 26px;">
|
||||
<span style="line-height: 26px;">
|
||||
{{ $t('dataset.add_db_table') }}
|
||||
</span>
|
||||
<el-row style="float: right">
|
||||
<el-button size="mini" @click="cancel">
|
||||
{{ $t('dataset.cancel') }}
|
||||
</el-button>
|
||||
<el-button size="mini" type="primary" :disabled="checkTableList.length < 1" @click="save">
|
||||
{{ $t('dataset.confirm') }}
|
||||
</el-button>
|
||||
</el-row>
|
||||
</el-row>
|
||||
<el-divider />
|
||||
<el-row>
|
||||
<el-form :inline="true">
|
||||
<el-form-item class="form-item">
|
||||
<el-select v-model="dataSource" filterable :placeholder="$t('dataset.pls_slc_data_source')" size="mini">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="form-item" style="float: right;">
|
||||
<el-input
|
||||
v-model="searchTable"
|
||||
size="mini"
|
||||
:placeholder="$t('dataset.search')"
|
||||
prefix-icon="el-icon-search"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row style="overflow: auto;height: 600px;">
|
||||
<el-checkbox-group v-model="checkTableList" size="small">
|
||||
<el-checkbox
|
||||
v-for="t in tables"
|
||||
:key="t"
|
||||
border
|
||||
:label="t"
|
||||
/>
|
||||
</el-checkbox-group>
|
||||
</el-row>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AddDB',
|
||||
data() {
|
||||
return {
|
||||
searchTable: '',
|
||||
options: [],
|
||||
dataSource: '',
|
||||
tables: [],
|
||||
checkTableList: [],
|
||||
scene: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dataSource(val) {
|
||||
if (val) {
|
||||
this.$post('/datasource/getTables', { id: val }, response => {
|
||||
this.tables = response.data
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initDataSource()
|
||||
this.scene = this.$route.params.scene
|
||||
},
|
||||
activated() {
|
||||
this.initDataSource()
|
||||
this.scene = this.$route.params.scene
|
||||
},
|
||||
methods: {
|
||||
initDataSource() {
|
||||
this.$get('/datasource/list', response => {
|
||||
this.options = response.data
|
||||
})
|
||||
},
|
||||
|
||||
save() {
|
||||
// console.log(this.checkTableList);
|
||||
// console.log(this.scene);
|
||||
const sceneId = this.scene.id
|
||||
const dataSourceId = this.dataSource
|
||||
const tables = []
|
||||
this.checkTableList.forEach(function(name) {
|
||||
tables.push({
|
||||
name: name,
|
||||
sceneId: sceneId,
|
||||
dataSourceId: dataSourceId,
|
||||
type: 'db'
|
||||
})
|
||||
})
|
||||
this.$post('/dataset/table/batchAdd', tables, response => {
|
||||
this.$store.commit('setSceneData', new Date().getTime())
|
||||
this.cancel()
|
||||
})
|
||||
},
|
||||
|
||||
cancel() {
|
||||
this.dataReset()
|
||||
this.$router.push('/dataset/home')
|
||||
},
|
||||
|
||||
dataReset() {
|
||||
this.searchTable = ''
|
||||
this.options = []
|
||||
this.dataSource = ''
|
||||
this.tables = []
|
||||
this.checkTableList = []
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-divider--horizontal {
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.el-checkbox {
|
||||
margin-bottom: 14px;
|
||||
margin-left: 0;
|
||||
margin-right: 14px;
|
||||
}
|
||||
|
||||
.el-checkbox.is-bordered + .el-checkbox.is-bordered {
|
||||
margin-left: 0;
|
||||
}
|
||||
</style>
|
||||
@ -1,63 +0,0 @@
|
||||
<template>
|
||||
<el-col>
|
||||
<el-table
|
||||
size="mini"
|
||||
:data="data"
|
||||
border
|
||||
style="width: 100%;"
|
||||
>
|
||||
<el-table-column
|
||||
v-for="field in fields"
|
||||
:key="field.fieldName"
|
||||
width="180px"
|
||||
:prop="field.fieldName"
|
||||
:label="field.fieldName"
|
||||
/>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TabDataPreview',
|
||||
props: {
|
||||
table: Object,
|
||||
fields: Array,
|
||||
data: Array
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
}]
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
created() {
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
activated() {
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -1,122 +0,0 @@
|
||||
<template>
|
||||
<el-col>
|
||||
<el-row>
|
||||
<el-row style="height: 26px;">
|
||||
<span v-show="false">{{ tableId }}</span>
|
||||
<span style="line-height: 26px;">
|
||||
{{ table.name }}
|
||||
</span>
|
||||
<el-row style="float: right">
|
||||
<el-button size="mini">
|
||||
{{ $t('dataset.edit') }}
|
||||
</el-button>
|
||||
<el-button size="mini">
|
||||
{{ $t('dataset.create_view') }}
|
||||
</el-button>
|
||||
</el-row>
|
||||
</el-row>
|
||||
<el-divider />
|
||||
|
||||
<el-tabs v-model="tabActive">
|
||||
<el-tab-pane :label="$t('dataset.data_preview')" name="dataPreview">
|
||||
<tab-data-preview :table="table" :fields="fields" :data="data" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="tab2" name="tab2">
|
||||
tab2
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="tab3" name="tab3">
|
||||
tab3
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="tab4" name="tab4">
|
||||
tab4
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TabDataPreview from './TabDataPreview'
|
||||
|
||||
export default {
|
||||
name: 'ViewTable',
|
||||
components: { TabDataPreview },
|
||||
data() {
|
||||
return {
|
||||
table: {
|
||||
name: ''
|
||||
},
|
||||
fields: [],
|
||||
data: [],
|
||||
tabActive: 'dataPreview'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
tableId() {
|
||||
console.log(this.$store.state.dataset.table)
|
||||
this.initTable(this.$store.state.dataset.table)
|
||||
return this.$store.state.dataset.table
|
||||
}
|
||||
},
|
||||
watch: {},
|
||||
created() {
|
||||
this.resetTable()
|
||||
},
|
||||
mounted() {
|
||||
this.resetTable()
|
||||
},
|
||||
activated() {
|
||||
this.resetTable()
|
||||
},
|
||||
methods: {
|
||||
initTable(id) {
|
||||
if (id !== null) {
|
||||
this.fields = []
|
||||
this.data = []
|
||||
this.$post('/dataset/table/get/' + id, null, response => {
|
||||
this.table = response.data
|
||||
this.initPreviewData()
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
initPreviewData() {
|
||||
if (this.table.id) {
|
||||
this.$post('/dataset/table/getPreviewData', this.table, response => {
|
||||
this.fields = response.data.fields
|
||||
this.data = response.data.data
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
initTableFields() {
|
||||
if (this.table.id) {
|
||||
this.$post('/dataset/table/getFields', this.table, response => {
|
||||
})
|
||||
}
|
||||
},
|
||||
initTableData() {
|
||||
if (this.table.id) {
|
||||
this.$post('/dataset/table/getData', this.table, response => {
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
resetTable() {
|
||||
this.table = {
|
||||
name: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-divider--horizontal {
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
</style>
|
||||
@ -7,7 +7,7 @@
|
||||
{{ $t('chart.datalist') }}
|
||||
</span>
|
||||
</el-row>
|
||||
<el-divider />
|
||||
<el-divider/>
|
||||
|
||||
<el-row>
|
||||
<el-button icon="el-icon-circle-plus" type="primary" size="mini" @click="add('group')">
|
||||
@ -101,7 +101,7 @@
|
||||
<el-dialog :title="dialogTitle" :visible="editGroup" :show-close="false" width="30%">
|
||||
<el-form ref="groupForm" :model="groupForm" :rules="groupFormRules">
|
||||
<el-form-item :label="$t('commons.name')" prop="name">
|
||||
<el-input v-model="groupForm.name" />
|
||||
<el-input v-model="groupForm.name"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
@ -121,7 +121,7 @@
|
||||
{{ $t('chart.back') }}
|
||||
</el-button>
|
||||
</el-row>
|
||||
<el-divider />
|
||||
<el-divider/>
|
||||
<el-row>
|
||||
<el-button type="primary" size="mini" plain @click="selectTable">
|
||||
{{ $t('chart.add_chart') }}
|
||||
@ -180,7 +180,7 @@
|
||||
<el-dialog :title="$t('chart.chart')" :visible="editTable" :show-close="false" width="30%">
|
||||
<el-form ref="tableForm" :model="tableForm" :rules="tableFormRules">
|
||||
<el-form-item :label="$t('commons.name')" prop="name">
|
||||
<el-input v-model="tableForm.name" />
|
||||
<el-input v-model="tableForm.name"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
@ -197,7 +197,7 @@
|
||||
width="70%"
|
||||
class="dialog-css"
|
||||
>
|
||||
<table-selector @getTable="getTable" />
|
||||
<table-selector @getTable="getTable"/>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="selectTableFlag = false">{{ $t('chart.cancel') }}</el-button>
|
||||
<el-button type="primary" size="mini" @click="createChart">{{ $t('chart.confirm') }}</el-button>
|
||||
@ -209,6 +209,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { post } from '@/api/chart/chart'
|
||||
import TableSelector from '../view/TableSelector'
|
||||
|
||||
export default {
|
||||
@ -324,7 +325,7 @@ export default {
|
||||
saveGroup(group) {
|
||||
this.$refs['groupForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$post('/chart/group/save', group, response => {
|
||||
post('/chart/group/save', group).then(response => {
|
||||
this.close()
|
||||
this.$message({
|
||||
message: this.$t('commons.save_success'),
|
||||
@ -347,7 +348,7 @@ export default {
|
||||
saveTable(view) {
|
||||
this.$refs['tableForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$post('/chart/view/save', view, response => {
|
||||
post('/chart/view/save', view).then(response => {
|
||||
this.closeTable()
|
||||
this.$message({
|
||||
message: this.$t('commons.save_success'),
|
||||
@ -355,8 +356,9 @@ export default {
|
||||
showClose: true
|
||||
})
|
||||
this.chartTree()
|
||||
this.$router.push('/chart/home')
|
||||
this.$store.commit('setTable', null)
|
||||
// this.$router.push('/chart/home')
|
||||
this.$emit('switchComponent', { name: '' })
|
||||
this.$store.dispatch('chart/setTable', null)
|
||||
})
|
||||
} else {
|
||||
this.$message({
|
||||
@ -375,7 +377,7 @@ export default {
|
||||
cancelButtonText: this.$t('chart.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$post('/chart/group/delete/' + data.id, null, response => {
|
||||
post('/chart/group/delete/' + data.id, null).then(response => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: this.$t('chart.delete_success'),
|
||||
@ -393,15 +395,16 @@ export default {
|
||||
cancelButtonText: this.$t('chart.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$post('/chart/view/delete/' + data.id, null, response => {
|
||||
post('/chart/view/delete/' + data.id, null).then(response => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: this.$t('chart.delete_success'),
|
||||
showClose: true
|
||||
})
|
||||
this.chartTree()
|
||||
this.$router.push('/chart/home')
|
||||
this.$store.commit('setTable', null)
|
||||
// this.$router.push('/chart/home')
|
||||
this.$emit('switchComponent', { name: '' })
|
||||
this.$store.dispatch('chart/setTable', null)
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
@ -427,7 +430,7 @@ export default {
|
||||
},
|
||||
|
||||
groupTree(group) {
|
||||
this.$post('/chart/group/tree', group, response => {
|
||||
post('/chart/group/tree', group).then(response => {
|
||||
this.data = response.data
|
||||
})
|
||||
},
|
||||
@ -435,10 +438,10 @@ export default {
|
||||
chartTree() {
|
||||
this.chartData = []
|
||||
if (this.currGroup.id) {
|
||||
this.$post('/chart/view/list', {
|
||||
post('/chart/view/list', {
|
||||
sort: 'create_time desc,name asc',
|
||||
sceneId: this.currGroup.id
|
||||
}, response => {
|
||||
}).then(response => {
|
||||
this.chartData = response.data
|
||||
})
|
||||
}
|
||||
@ -448,7 +451,7 @@ export default {
|
||||
if (data.type === 'scene') {
|
||||
this.sceneMode = true
|
||||
this.currGroup = data
|
||||
this.$store.commit('setSceneId', this.currGroup.id)
|
||||
this.$store.dispatch('chart/setSceneId', this.currGroup.id)
|
||||
}
|
||||
if (node.expanded) {
|
||||
this.expandedArray.push(data.id)
|
||||
@ -462,7 +465,8 @@ export default {
|
||||
|
||||
back() {
|
||||
this.sceneMode = false
|
||||
this.$router.push('/chart/home')
|
||||
// this.$router.push('/chart/home')
|
||||
this.$emit('switchComponent', { name: '' })
|
||||
},
|
||||
|
||||
beforeClickAddData(type) {
|
||||
@ -481,10 +485,11 @@ export default {
|
||||
},
|
||||
|
||||
sceneClick(data, node) {
|
||||
this.$store.commit('setViewId', null)
|
||||
this.$store.commit('setViewId', data.id)
|
||||
this.$store.commit('setTableId', data.tableId)
|
||||
this.$router.push('/chart/chart-edit')
|
||||
this.$store.dispatch('chart/setViewId', null)
|
||||
this.$store.dispatch('chart/setViewId', data.id)
|
||||
this.$store.dispatch('chart/setTableId', data.tableId)
|
||||
// this.$router.push('/chart/chart-edit')
|
||||
this.$emit('switchComponent', { name: 'ChartEdit' })
|
||||
},
|
||||
|
||||
selectTable() {
|
||||
@ -497,12 +502,13 @@ export default {
|
||||
view.name = this.table.name
|
||||
view.sceneId = this.currGroup.id
|
||||
view.tableId = this.table.id
|
||||
this.$post('/chart/view/save', view, response => {
|
||||
post('/chart/view/save', view).then(response => {
|
||||
this.selectTableFlag = false
|
||||
this.$store.commit('setTableId', null)
|
||||
this.$store.commit('setTableId', this.table.id)
|
||||
this.$router.push('/chart/chart-edit')
|
||||
this.$store.commit('setViewId', response.data.id)
|
||||
this.$store.dispatch('chart/setTableId', null)
|
||||
this.$store.dispatch('chart/setTableId', this.table.id)
|
||||
// this.$router.push('/chart/chart-edit')
|
||||
this.$emit('switchComponent', { name: 'ChartEdit' })
|
||||
this.$store.dispatch('chart/setViewId', response.data.id)
|
||||
this.chartTree()
|
||||
})
|
||||
},
|
||||
@ -516,11 +522,9 @@ export default {
|
||||
if (path === '/chart/chart-edit') {
|
||||
this.sceneMode = true
|
||||
const sceneId = this.$store.state.chart.sceneId
|
||||
this.$post('/chart/group/getScene/' + sceneId, null, response => {
|
||||
post('/chart/group/getScene/' + sceneId, null).then(response => {
|
||||
this.currGroup = response.data
|
||||
})
|
||||
} else {
|
||||
this.$router.push('/chart')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,13 +2,12 @@
|
||||
<ms-container>
|
||||
|
||||
<ms-aside-container>
|
||||
<group />
|
||||
<group @switchComponent="switchComponent"/>
|
||||
</ms-aside-container>
|
||||
|
||||
<ms-main-container>
|
||||
<keep-alive>
|
||||
<router-view />
|
||||
</keep-alive>
|
||||
<!-- <router-view />-->
|
||||
<component :is="component" :param="param" @switchComponent="switchComponent"></component>
|
||||
</ms-main-container>
|
||||
</ms-container>
|
||||
</template>
|
||||
@ -19,11 +18,31 @@ import MsContainer from '@/metersphere/common/components/MsContainer'
|
||||
import MsAsideContainer from '@/metersphere/common/components/MsAsideContainer'
|
||||
import Group from './group/Group'
|
||||
|
||||
import ChartHome from './data/ChartHome'
|
||||
import ChartEdit from './view/ChartEdit'
|
||||
|
||||
export default {
|
||||
name: 'Chart',
|
||||
components: { MsMainContainer, MsContainer, MsAsideContainer, Group },
|
||||
components: { MsMainContainer, MsContainer, MsAsideContainer, Group, ChartHome, ChartEdit },
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
component: ChartHome,
|
||||
param: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
switchComponent(c) {
|
||||
console.log(c)
|
||||
this.param = c.param
|
||||
switch (c.name) {
|
||||
case 'ChartEdit':
|
||||
this.component = ChartEdit
|
||||
break
|
||||
default:
|
||||
this.component = ChartHome
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -57,7 +57,7 @@
|
||||
<div style="border-bottom: 1px solid #E6E6E6;overflow-y:hidden;" class="padding-lr">
|
||||
<el-row>
|
||||
<span>{{ $t('chart.title') }}</span>
|
||||
<!-- <el-checkbox v-model="view.show" style="float: right;">{{$t('chart.show')}}</el-checkbox>-->
|
||||
<!-- <el-checkbox v-model="view.show" style="float: right;">{{$t('chart.show')}}</el-checkbox>-->
|
||||
</el-row>
|
||||
<el-form>
|
||||
<el-form-item class="form-item">
|
||||
@ -147,7 +147,7 @@
|
||||
</el-row>
|
||||
|
||||
<div class="Echarts" style="height: 100%;display: flex;margin-top: 10px;">
|
||||
<div id="echart" style="width: 100%;height: 80vh;" />
|
||||
<div id="echart" style="width: 100%;height: 80vh;"/>
|
||||
</div>
|
||||
</el-row>
|
||||
</el-col>
|
||||
@ -156,6 +156,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { post } from '@/api/dataset/dataset'
|
||||
import draggable from 'vuedraggable'
|
||||
import { BASE_BAR } from '../chart/chart'
|
||||
|
||||
@ -219,14 +220,14 @@ export default {
|
||||
methods: {
|
||||
initTableData(id) {
|
||||
if (id != null) {
|
||||
this.$post('/dataset/table/get/' + id, null, response => {
|
||||
post('/dataset/table/get/' + id, null).then(response => {
|
||||
this.table = response.data
|
||||
this.initTableField(id)
|
||||
})
|
||||
}
|
||||
},
|
||||
initTableField(id) {
|
||||
this.$post('/dataset/table/getFieldsFromDE', this.table, response => {
|
||||
post('/dataset/table/getFieldsFromDE', this.table).then(response => {
|
||||
this.dimension = response.data.dimension
|
||||
this.quota = response.data.quota
|
||||
})
|
||||
@ -259,7 +260,7 @@ export default {
|
||||
},
|
||||
get(id) {
|
||||
if (id) {
|
||||
this.$post('/chart/view/get/' + id, null, response => {
|
||||
post('/chart/view/get/' + id, null).then(response => {
|
||||
this.view = response.data
|
||||
this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
|
||||
this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
|
||||
@ -276,7 +277,7 @@ export default {
|
||||
view.tableId = this.$store.state.chart.tableId
|
||||
view.xaxis = JSON.stringify(view.xaxis)
|
||||
view.yaxis = JSON.stringify(view.yaxis)
|
||||
this.$post('/chart/view/save', view, response => {
|
||||
post('/chart/view/save', view).then(response => {
|
||||
// this.get(response.data.id);
|
||||
this.getData(response.data.id)
|
||||
this.$store.commit('setChartSceneData', null)
|
||||
@ -285,7 +286,7 @@ export default {
|
||||
},
|
||||
getData(id) {
|
||||
if (id) {
|
||||
this.$post('/chart/view/getData/' + id, null, response => {
|
||||
post('/chart/view/getData/' + id, null).then(response => {
|
||||
this.view = response.data
|
||||
this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
|
||||
this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
|
||||
@ -406,4 +407,8 @@ export default {
|
||||
.el-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
</el-button>
|
||||
</el-row>
|
||||
</el-row>
|
||||
<el-divider />
|
||||
<el-divider/>
|
||||
<el-row>
|
||||
<el-form :inline="true">
|
||||
<el-form-item class="form-item">
|
||||
@ -57,7 +57,12 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listDatasource, post } from '@/api/dataset/dataset'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
param: Object
|
||||
},
|
||||
name: 'AddDB',
|
||||
data() {
|
||||
return {
|
||||
@ -66,31 +71,27 @@ export default {
|
||||
dataSource: '',
|
||||
tables: [],
|
||||
checkTableList: [],
|
||||
scene: null,
|
||||
mode: '0'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dataSource(val) {
|
||||
if (val) {
|
||||
this.$post('/datasource/getTables', { id: val }, response => {
|
||||
post('/datasource/getTables', { id: val }).then(response => {
|
||||
this.tables = response.data
|
||||
}
|
||||
)
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initDataSource()
|
||||
this.scene = this.$route.params.scene
|
||||
},
|
||||
activated() {
|
||||
this.initDataSource()
|
||||
this.scene = this.$route.params.scene
|
||||
},
|
||||
methods: {
|
||||
initDataSource() {
|
||||
this.$get('/datasource/list', response => {
|
||||
listDatasource().then(response => {
|
||||
this.options = response.data
|
||||
})
|
||||
},
|
||||
@ -98,7 +99,7 @@ export default {
|
||||
save() {
|
||||
// console.log(this.checkTableList);
|
||||
// console.log(this.scene);
|
||||
const sceneId = this.scene.id
|
||||
const sceneId = this.param.id
|
||||
const dataSourceId = this.dataSource
|
||||
const tables = []
|
||||
const mode = this.mode
|
||||
@ -111,15 +112,16 @@ export default {
|
||||
mode: parseInt(mode)
|
||||
})
|
||||
})
|
||||
this.$post('/dataset/table/batchAdd', tables, response => {
|
||||
this.$store.commit('setSceneData', new Date().getTime())
|
||||
post('/dataset/table/batchAdd', tables).then(response => {
|
||||
this.$store.dispatch('dataset/setSceneData', new Date().getTime())
|
||||
this.cancel()
|
||||
})
|
||||
},
|
||||
|
||||
cancel() {
|
||||
this.dataReset()
|
||||
this.$router.push('/dataset/home')
|
||||
// this.$router.push('/dataset/home')
|
||||
this.$emit('switchComponent', { name: '' })
|
||||
},
|
||||
|
||||
dataReset() {
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
{{ $t('dataset.datalist') }}
|
||||
</span>
|
||||
</el-row>
|
||||
<el-divider />
|
||||
<el-divider/>
|
||||
|
||||
<el-row>
|
||||
<el-form>
|
||||
@ -59,7 +59,7 @@
|
||||
{{ $t('dataset.back') }}
|
||||
</el-button>
|
||||
</el-row>
|
||||
<el-divider />
|
||||
<el-divider/>
|
||||
<el-row>
|
||||
<el-form>
|
||||
<el-form-item class="form-item">
|
||||
@ -85,8 +85,8 @@
|
||||
({{ data.type }})
|
||||
</span>
|
||||
<span>
|
||||
<span v-if="data.mode === 0" style="margin-left: 6px"><i class="el-icon-s-operation" /></span>
|
||||
<span v-if="data.mode === 1" style="margin-left: 6px"><i class="el-icon-time" /></span>
|
||||
<span v-if="data.mode === 0" style="margin-left: 6px"><i class="el-icon-s-operation"/></span>
|
||||
<span v-if="data.mode === 1" style="margin-left: 6px"><i class="el-icon-time"/></span>
|
||||
</span>
|
||||
<span style="margin-left: 6px">{{ data.name }}</span>
|
||||
</span>
|
||||
@ -97,6 +97,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { post } from '@/api/dataset/dataset'
|
||||
|
||||
export default {
|
||||
name: 'DatasetGroupSelector',
|
||||
data() {
|
||||
@ -157,7 +159,7 @@ export default {
|
||||
},
|
||||
|
||||
tree(group) {
|
||||
this.$post('/dataset/group/tree', group, response => {
|
||||
post('/dataset/group/tree', group).then(response => {
|
||||
this.data = response.data
|
||||
})
|
||||
},
|
||||
@ -165,10 +167,10 @@ export default {
|
||||
tableTree() {
|
||||
this.tableData = []
|
||||
if (this.currGroup) {
|
||||
this.$post('/dataset/table/list', {
|
||||
post('/dataset/table/list', {
|
||||
sort: 'type asc,create_time desc,name asc',
|
||||
sceneId: this.currGroup.id
|
||||
}, response => {
|
||||
}).then(response => {
|
||||
this.tableData = response.data
|
||||
})
|
||||
}
|
||||
|
||||
@ -20,6 +20,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { post } from '@/api/dataset/dataset'
|
||||
|
||||
export default {
|
||||
name: 'DatasetTableData',
|
||||
props: {
|
||||
@ -46,7 +48,7 @@ export default {
|
||||
initData() {
|
||||
this.resetData()
|
||||
if (this.table.id) {
|
||||
this.$post('/dataset/table/getPreviewData', this.table, response => {
|
||||
post('/dataset/table/getPreviewData', this.table).then(response => {
|
||||
this.fields = response.data.fields
|
||||
this.data = response.data.data
|
||||
})
|
||||
|
||||
@ -10,22 +10,22 @@
|
||||
<el-button size="mini" @click="edit">
|
||||
{{ $t('dataset.edit') }}
|
||||
</el-button>
|
||||
<!-- <el-button size="mini" type="primary" @click="createChart">-->
|
||||
<!-- {{$t('dataset.create_view')}}-->
|
||||
<!-- </el-button>-->
|
||||
<!-- <el-button size="mini" type="primary" @click="createChart">-->
|
||||
<!-- {{$t('dataset.create_view')}}-->
|
||||
<!-- </el-button>-->
|
||||
</el-row>
|
||||
</el-row>
|
||||
<el-divider />
|
||||
<el-divider/>
|
||||
|
||||
<el-tabs v-model="tabActive">
|
||||
<el-tab-pane :label="$t('dataset.data_preview')" name="dataPreview">
|
||||
<tab-data-preview :table="table" :fields="fields" :data="data" />
|
||||
<tab-data-preview :table="table" :fields="fields" :data="data"/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('dataset.join_view')" name="joinView">
|
||||
关联视图 TODO
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('dataset.update_info')" name="updateInfo">
|
||||
<update-info :table="table" />
|
||||
<update-info :table="table"/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
@ -40,17 +40,17 @@
|
||||
</el-table-column>
|
||||
<el-table-column property="name" :label="$t('dataset.field_name')" width="180">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.name" size="mini" />
|
||||
<el-input v-model="scope.row.name" size="mini"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="originName" :label="$t('dataset.field_origin_name')" width="180" />
|
||||
<el-table-column property="originName" :label="$t('dataset.field_origin_name')" width="180"/>
|
||||
<el-table-column property="checked" :label="$t('dataset.field_check')" width="80">
|
||||
<template slot-scope="scope">
|
||||
<el-checkbox v-model="scope.row.checked" />
|
||||
<el-checkbox v-model="scope.row.checked"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!--下面这一列占位-->
|
||||
<el-table-column property="" />
|
||||
<el-table-column property=""/>
|
||||
</el-table>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="closeEdit">{{ $t('dataset.cancel') }}</el-button>
|
||||
@ -58,14 +58,15 @@
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- <el-dialog title="view" :visible.sync="createViewDialog" :fullscreen="true">-->
|
||||
<!-- <chart-edit/>-->
|
||||
<!-- </el-dialog>-->
|
||||
<!-- <el-dialog title="view" :visible.sync="createViewDialog" :fullscreen="true">-->
|
||||
<!-- <chart-edit/>-->
|
||||
<!-- </el-dialog>-->
|
||||
</el-row>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getTable, getPreviewData, fieldList, batchEdit } from '@/api/dataset/dataset'
|
||||
import TabDataPreview from './TabDataPreview'
|
||||
import UpdateInfo from './UpdateInfo'
|
||||
|
||||
@ -107,7 +108,7 @@ export default {
|
||||
if (id !== null) {
|
||||
this.fields = []
|
||||
this.data = []
|
||||
this.$post('/dataset/table/get/' + id, null, response => {
|
||||
getTable(id).then(response => {
|
||||
this.table = response.data
|
||||
this.initPreviewData()
|
||||
})
|
||||
@ -116,7 +117,7 @@ export default {
|
||||
|
||||
initPreviewData() {
|
||||
if (this.table.id) {
|
||||
this.$post('/dataset/table/getPreviewData', this.table, response => {
|
||||
getPreviewData(this.table).then(response => {
|
||||
this.fields = response.data.fields
|
||||
this.data = response.data.data
|
||||
})
|
||||
@ -124,7 +125,7 @@ export default {
|
||||
},
|
||||
|
||||
initTableFields() {
|
||||
this.$post('/dataset/field/list/' + this.table.id, null, response => {
|
||||
fieldList(this.table.id).then(response => {
|
||||
this.tableFields = response.data
|
||||
})
|
||||
},
|
||||
@ -142,7 +143,7 @@ export default {
|
||||
|
||||
saveEdit() {
|
||||
console.log(this.tableFields)
|
||||
this.$post('/dataset/field/batchEdit', this.tableFields, response => {
|
||||
batchEdit(this.tableFields).then(response => {
|
||||
this.closeEdit()
|
||||
this.initTable(this.table.id)
|
||||
})
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
{{ $t('dataset.datalist') }}
|
||||
</span>
|
||||
</el-row>
|
||||
<el-divider />
|
||||
<el-divider/>
|
||||
|
||||
<el-row>
|
||||
<el-button icon="el-icon-circle-plus" type="primary" size="mini" @click="add('group')">
|
||||
@ -103,12 +103,13 @@
|
||||
<el-dialog :title="dialogTitle" :visible="editGroup" :show-close="false" width="30%">
|
||||
<el-form ref="groupForm" :model="groupForm" :rules="groupFormRules">
|
||||
<el-form-item :label="$t('commons.name')" prop="name">
|
||||
<el-input v-model="groupForm.name" />
|
||||
<el-input v-model="groupForm.name"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="close()">{{ $t('dataset.cancel') }}</el-button>
|
||||
<el-button type="primary" size="mini" @click="saveGroup(groupForm)">{{ $t('dataset.confirm') }}</el-button>
|
||||
<el-button type="primary" size="mini" @click="saveGroup(groupForm)">{{ $t('dataset.confirm') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</el-col>
|
||||
@ -123,7 +124,7 @@
|
||||
{{ $t('dataset.back') }}
|
||||
</el-button>
|
||||
</el-row>
|
||||
<el-divider />
|
||||
<el-divider/>
|
||||
<el-row>
|
||||
<el-dropdown style="margin-right: 10px;" size="small" trigger="click" @command="clickAddData">
|
||||
<el-button type="primary" size="mini" plain>
|
||||
@ -177,8 +178,8 @@
|
||||
({{ data.type }})
|
||||
</span>
|
||||
<span>
|
||||
<span v-if="data.mode === 0" style="margin-left: 6px"><i class="el-icon-s-operation" /></span>
|
||||
<span v-if="data.mode === 1" style="margin-left: 6px"><i class="el-icon-time" /></span>
|
||||
<span v-if="data.mode === 0" style="margin-left: 6px"><i class="el-icon-s-operation"/></span>
|
||||
<span v-if="data.mode === 1" style="margin-left: 6px"><i class="el-icon-time"/></span>
|
||||
</span>
|
||||
<span style="margin-left: 6px">{{ data.name }}</span>
|
||||
</span>
|
||||
@ -212,7 +213,7 @@
|
||||
<el-dialog :title="$t('dataset.table')" :visible="editTable" :show-close="false" width="30%">
|
||||
<el-form ref="tableForm" :model="tableForm" :rules="tableFormRules">
|
||||
<el-form-item :label="$t('commons.name')" prop="name">
|
||||
<el-input v-model="tableForm.name" />
|
||||
<el-input v-model="tableForm.name"/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('dataset.mode')" prop="mode">
|
||||
<el-radio v-model="tableForm.mode" label="0">{{ $t('dataset.direct_connect') }}</el-radio>
|
||||
@ -221,7 +222,8 @@
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="closeTable()">{{ $t('dataset.cancel') }}</el-button>
|
||||
<el-button type="primary" size="mini" @click="saveTable(tableForm)">{{ $t('dataset.confirm') }}</el-button>
|
||||
<el-button type="primary" size="mini" @click="saveTable(tableForm)">{{ $t('dataset.confirm') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
@ -231,6 +233,7 @@
|
||||
|
||||
<script>
|
||||
import { loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree } from '@/api/dataset/dataset'
|
||||
|
||||
export default {
|
||||
name: 'Group',
|
||||
data() {
|
||||
@ -377,7 +380,7 @@ export default {
|
||||
},
|
||||
|
||||
saveTable(table) {
|
||||
// console.log(table)
|
||||
// console.log(table)
|
||||
table.mode = parseInt(table.mode)
|
||||
this.$refs['tableForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
@ -389,7 +392,8 @@ export default {
|
||||
showClose: true
|
||||
})
|
||||
this.tableTree()
|
||||
this.$router.push('/dataset/home')
|
||||
// this.$router.push('/dataset/home')
|
||||
this.$emit('switchComponent', { name: '' })
|
||||
this.$store.dispatch('dataset/setTable', null)
|
||||
})
|
||||
} else {
|
||||
@ -434,7 +438,8 @@ export default {
|
||||
showClose: true
|
||||
})
|
||||
this.tableTree()
|
||||
this.$router.push('/dataset/home')
|
||||
// this.$router.push('/dataset/home')
|
||||
this.$emit('switchComponent', { name: '' })
|
||||
this.$store.dispatch('dataset/setTable', null)
|
||||
})
|
||||
}).catch(() => {
|
||||
@ -501,7 +506,9 @@ export default {
|
||||
this.sceneMode = false
|
||||
// const route = this.$store.state.permission.currentRoutes
|
||||
// console.log(route)
|
||||
this.$router.push('/dataset/index')
|
||||
// this.$router.push('/dataset/index')
|
||||
this.$store.dispatch('dataset/setSceneData', null)
|
||||
this.$emit('switchComponent', { name: '' })
|
||||
},
|
||||
|
||||
clickAddData(param) {
|
||||
@ -529,24 +536,26 @@ export default {
|
||||
},
|
||||
|
||||
addDB() {
|
||||
this.$router.push({
|
||||
name: 'add_db',
|
||||
params: {
|
||||
scene: this.currGroup
|
||||
}
|
||||
})
|
||||
// this.$router.push({
|
||||
// name: 'add_db',
|
||||
// params: {
|
||||
// scene: this.currGroup
|
||||
// }
|
||||
// })
|
||||
this.$emit('switchComponent', { name: 'AddDB', param: this.currGroup })
|
||||
},
|
||||
|
||||
sceneClick(data, node) {
|
||||
// console.log(data);
|
||||
this.$store.dispatch('dataset/setTable', null)
|
||||
this.$store.dispatch('dataset/setTable', data.id)
|
||||
this.$router.push({
|
||||
name: 'table',
|
||||
params: {
|
||||
table: data
|
||||
}
|
||||
})
|
||||
// this.$router.push({
|
||||
// name: 'table',
|
||||
// params: {
|
||||
// table: data
|
||||
// }
|
||||
// })
|
||||
this.$emit('switchComponent', { name: 'ViewTable' })
|
||||
},
|
||||
|
||||
refresh() {
|
||||
@ -557,8 +566,6 @@ export default {
|
||||
getScene(sceneId).then(res => {
|
||||
this.currGroup = res.data
|
||||
})
|
||||
} else {
|
||||
this.$router.push('/dataset')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,13 +2,12 @@
|
||||
<ms-container>
|
||||
|
||||
<ms-aside-container>
|
||||
<group />
|
||||
<group @switchComponent="switchComponent"/>
|
||||
</ms-aside-container>
|
||||
|
||||
<ms-main-container>
|
||||
<keep-alive>
|
||||
<router-view />
|
||||
</keep-alive>
|
||||
<!--<router-view/>-->
|
||||
<component :is="component" :param="param" @switchComponent="switchComponent"></component>
|
||||
</ms-main-container>
|
||||
</ms-container>
|
||||
</template>
|
||||
@ -19,25 +18,49 @@ import MsContainer from '@/metersphere/common/components/MsContainer'
|
||||
import MsAsideContainer from '@/metersphere/common/components/MsAsideContainer'
|
||||
import Group from './group/Group'
|
||||
|
||||
import DataHome from './data/DataHome'
|
||||
import ViewTable from './data/ViewTable'
|
||||
import AddDB from './add/AddDB'
|
||||
|
||||
export default {
|
||||
name: 'DataSet',
|
||||
components: { MsMainContainer, MsContainer, MsAsideContainer, Group },
|
||||
components: { MsMainContainer, MsContainer, MsAsideContainer, Group, DataHome, ViewTable, AddDB },
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
component: DataHome,
|
||||
param: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
switchComponent(c) {
|
||||
console.log(c)
|
||||
this.param = c.param
|
||||
switch (c.name) {
|
||||
case 'ViewTable':
|
||||
this.component = ViewTable
|
||||
break
|
||||
case 'AddDB':
|
||||
this.component = AddDB
|
||||
break
|
||||
default:
|
||||
this.component = DataHome
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ms-aside-container {
|
||||
height: calc(100vh - 40px);
|
||||
height: calc(100vh - 56px);
|
||||
padding: 15px;
|
||||
min-width: 300px;
|
||||
max-width: 500px;
|
||||
min-width: 260px;
|
||||
max-width: 460px;
|
||||
}
|
||||
|
||||
.ms-main-container {
|
||||
height: calc(100vh - 40px);
|
||||
height: calc(100vh - 56px);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -105,7 +105,7 @@ export default {
|
||||
console.log(condition) // demo只查看搜索条件，没有搜索的实现
|
||||
const { currentPage, pageSize } = this.paginationConfig
|
||||
userLists(currentPage, pageSize, {}).then(response => {
|
||||
this.data = response.data.data.listObject
|
||||
this.data = response.data.listObject
|
||||
this.paginationConfig.total = response.data.itemCount
|
||||
})
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user