提交 b2f19269 authored 作者: junjie's avatar junjie

feat(frontend): 前端 数据集,视图 调整

上级 71195722
...@@ -15,7 +15,9 @@ ...@@ -15,7 +15,9 @@
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml" "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
}, },
"dependencies": { "dependencies": {
"@riophae/vue-treeselect": "0.4.0",
"axios": "0.18.1", "axios": "0.18.1",
"echarts": "^5.0.2",
"element-ui": "2.13.0", "element-ui": "2.13.0",
"fit2cloud-ui": "^0.1.12", "fit2cloud-ui": "^0.1.12",
"js-cookie": "2.2.0", "js-cookie": "2.2.0",
...@@ -30,9 +32,8 @@ ...@@ -30,9 +32,8 @@
"vue": "2.6.10", "vue": "2.6.10",
"vue-i18n": "7.3.2", "vue-i18n": "7.3.2",
"vue-router": "3.0.6", "vue-router": "3.0.6",
"vuex": "3.1.0", "vuedraggable": "^2.24.3",
"@riophae/vue-treeselect": "0.4.0", "vuex": "3.1.0"
"vuedraggable": "^2.24.3"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "7.0.0", "@babel/core": "7.0.0",
......
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) { ...@@ -52,4 +52,50 @@ export function groupTree(data) {
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 } export default { loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree }
<template> <template>
<section class="app-main"> <section class="app-main">
<transition name="fade-transform" mode="out-in"> <transition name="fade-transform" mode="out-in">
<el-main class="ms-main-container"> <el-main class="ms-main-container">
<keep-alive> <keep-alive>
<router-view :key="key" /> <router-view :key="key"/>
</keep-alive> </keep-alive>
</el-main> </el-main>
</transition> </transition>
</section> </section>
</template> </template>
<script> <script>
...@@ -22,25 +22,30 @@ export default { ...@@ -22,25 +22,30 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "~@/styles/variables.scss"; @import "~@/styles/variables.scss";
.app-main { .app-main {
/*107 = navbar 50 + topbar 57 */ /*107 = navbar 50 + topbar 57 */
min-height: calc(100vh - 107px); min-height: calc(100vh - 107px);
width: 100%; width: 100%;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.fixed-header+.app-main {
padding-top: 50px; .fixed-header + .app-main {
} padding-top: 50px;
}
.ms-main-container {
padding: 0;
}
</style> </style>
<style lang="scss"> <style lang="scss">
// fix css style bug in open el-dialog // fix css style bug in open el-dialog
.el-popup-parent--hidden { .el-popup-parent--hidden {
.fixed-header { .fixed-header {
padding-right: 15px; padding-right: 15px;
} }
} }
</style> </style>
...@@ -21,6 +21,10 @@ import message from '@/metersphere/common/js/message' ...@@ -21,6 +21,10 @@ import message from '@/metersphere/common/js/message'
import { left2RightDrag, bottom2TopDrag, right2LeftDrag } from '@/metersphere/common/js/directive' import { left2RightDrag, bottom2TopDrag, right2LeftDrag } from '@/metersphere/common/js/directive'
Vue.prototype.$api = api Vue.prototype.$api = api
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
/** /**
* If you don't want to use mock-server * If you don't want to use mock-server
* you want to use MockJs for mock api * you want to use MockJs for mock api
......
...@@ -6,6 +6,7 @@ import settings from './modules/settings' ...@@ -6,6 +6,7 @@ import settings from './modules/settings'
import user from './modules/user' import user from './modules/user'
import permission from './modules/permission' import permission from './modules/permission'
import dataset from './modules/dataset' import dataset from './modules/dataset'
import chart from './modules/chart'
Vue.use(Vuex) Vue.use(Vuex)
...@@ -15,7 +16,8 @@ const store = new Vuex.Store({ ...@@ -15,7 +16,8 @@ const store = new Vuex.Store({
settings, settings,
user, user,
permission, permission,
dataset dataset,
chart
}, },
getters getters
}) })
......
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
}
<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>
<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>
<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 @@ ...@@ -7,7 +7,7 @@
{{ $t('chart.datalist') }} {{ $t('chart.datalist') }}
</span> </span>
</el-row> </el-row>
<el-divider /> <el-divider/>
<el-row> <el-row>
<el-button icon="el-icon-circle-plus" type="primary" size="mini" @click="add('group')"> <el-button icon="el-icon-circle-plus" type="primary" size="mini" @click="add('group')">
...@@ -101,7 +101,7 @@ ...@@ -101,7 +101,7 @@
<el-dialog :title="dialogTitle" :visible="editGroup" :show-close="false" width="30%"> <el-dialog :title="dialogTitle" :visible="editGroup" :show-close="false" width="30%">
<el-form ref="groupForm" :model="groupForm" :rules="groupFormRules"> <el-form ref="groupForm" :model="groupForm" :rules="groupFormRules">
<el-form-item :label="$t('commons.name')" prop="name"> <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-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
...@@ -121,7 +121,7 @@ ...@@ -121,7 +121,7 @@
{{ $t('chart.back') }} {{ $t('chart.back') }}
</el-button> </el-button>
</el-row> </el-row>
<el-divider /> <el-divider/>
<el-row> <el-row>
<el-button type="primary" size="mini" plain @click="selectTable"> <el-button type="primary" size="mini" plain @click="selectTable">
{{ $t('chart.add_chart') }} {{ $t('chart.add_chart') }}
...@@ -180,7 +180,7 @@ ...@@ -180,7 +180,7 @@
<el-dialog :title="$t('chart.chart')" :visible="editTable" :show-close="false" width="30%"> <el-dialog :title="$t('chart.chart')" :visible="editTable" :show-close="false" width="30%">
<el-form ref="tableForm" :model="tableForm" :rules="tableFormRules"> <el-form ref="tableForm" :model="tableForm" :rules="tableFormRules">
<el-form-item :label="$t('commons.name')" prop="name"> <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>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
...@@ -197,7 +197,7 @@ ...@@ -197,7 +197,7 @@
width="70%" width="70%"
class="dialog-css" class="dialog-css"
> >
<table-selector @getTable="getTable" /> <table-selector @getTable="getTable"/>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button size="mini" @click="selectTableFlag = false">{{ $t('chart.cancel') }}</el-button> <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> <el-button type="primary" size="mini" @click="createChart">{{ $t('chart.confirm') }}</el-button>
...@@ -209,6 +209,7 @@ ...@@ -209,6 +209,7 @@
</template> </template>
<script> <script>
import { post } from '@/api/chart/chart'
import TableSelector from '../view/TableSelector' import TableSelector from '../view/TableSelector'
export default { export default {
...@@ -324,7 +325,7 @@ export default { ...@@ -324,7 +325,7 @@ export default {
saveGroup(group) { saveGroup(group) {
this.$refs['groupForm'].validate((valid) => { this.$refs['groupForm'].validate((valid) => {
if (valid) { if (valid) {
this.$post('/chart/group/save', group, response => { post('/chart/group/save', group).then(response => {
this.close() this.close()
this.$message({ this.$message({
message: this.$t('commons.save_success'), message: this.$t('commons.save_success'),
...@@ -347,7 +348,7 @@ export default { ...@@ -347,7 +348,7 @@ export default {
saveTable(view) { saveTable(view) {
this.$refs['tableForm'].validate((valid) => { this.$refs['tableForm'].validate((valid) => {
if (valid) { if (valid) {
this.$post('/chart/view/save', view, response => { post('/chart/view/save', view).then(response => {
this.closeTable() this.closeTable()
this.$message({ this.$message({
message: this.$t('commons.save_success'), message: this.$t('commons.save_success'),
...@@ -355,8 +356,9 @@ export default { ...@@ -355,8 +356,9 @@ export default {
showClose: true showClose: true
}) })
this.chartTree() this.chartTree()
this.$router.push('/chart/home') // this.$router.push('/chart/home')
this.$store.commit('setTable', null) this.$emit('switchComponent', { name: '' })
this.$store.dispatch('chart/setTable', null)
}) })
} else { } else {
this.$message({ this.$message({
...@@ -375,7 +377,7 @@ export default { ...@@ -375,7 +377,7 @@ export default {
cancelButtonText: this.$t('chart.cancel'), cancelButtonText: this.$t('chart.cancel'),
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
this.$post('/chart/group/delete/' + data.id, null, response => { post('/chart/group/delete/' + data.id, null).then(response => {
this.$message({ this.$message({
type: 'success', type: 'success',
message: this.$t('chart.delete_success'), message: this.$t('chart.delete_success'),
...@@ -393,15 +395,16 @@ export default { ...@@ -393,15 +395,16 @@ export default {
cancelButtonText: this.$t('chart.cancel'), cancelButtonText: this.$t('chart.cancel'),
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
this.$post('/chart/view/delete/' + data.id, null, response => { post('/chart/view/delete/' + data.id, null).then(response => {
this.$message({ this.$message({
type: 'success', type: 'success',
message: this.$t('chart.delete_success'), message: this.$t('chart.delete_success'),
showClose: true showClose: true
}) })
this.chartTree() this.chartTree()
this.$router.push('/chart/home') // this.$router.push('/chart/home')
this.$store.commit('setTable', null) this.$emit('switchComponent', { name: '' })
this.$store.dispatch('chart/setTable', null)
}) })
}).catch(() => { }).catch(() => {
}) })
...@@ -427,7 +430,7 @@ export default { ...@@ -427,7 +430,7 @@ export default {
}, },
groupTree(group) { groupTree(group) {
this.$post('/chart/group/tree', group, response => { post('/chart/group/tree', group).then(response => {
this.data = response.data this.data = response.data
}) })
}, },
...@@ -435,10 +438,10 @@ export default { ...@@ -435,10 +438,10 @@ export default {
chartTree() { chartTree() {
this.chartData = [] this.chartData = []
if (this.currGroup.id) { if (this.currGroup.id) {
this.$post('/chart/view/list', { post('/chart/view/list', {
sort: 'create_time desc,name asc', sort: 'create_time desc,name asc',
sceneId: this.currGroup.id sceneId: this.currGroup.id
}, response => { }).then(response => {
this.chartData = response.data this.chartData = response.data
}) })
} }
...@@ -448,7 +451,7 @@ export default { ...@@ -448,7 +451,7 @@ export default {
if (data.type === 'scene') { if (data.type === 'scene') {
this.sceneMode = true this.sceneMode = true
this.currGroup = data this.currGroup = data
this.$store.commit('setSceneId', this.currGroup.id) this.$store.dispatch('chart/setSceneId', this.currGroup.id)
} }
if (node.expanded) { if (node.expanded) {
this.expandedArray.push(data.id) this.expandedArray.push(data.id)
...@@ -462,7 +465,8 @@ export default { ...@@ -462,7 +465,8 @@ export default {
back() { back() {
this.sceneMode = false this.sceneMode = false
this.$router.push('/chart/home') // this.$router.push('/chart/home')
this.$emit('switchComponent', { name: '' })
}, },
beforeClickAddData(type) { beforeClickAddData(type) {
...@@ -481,10 +485,11 @@ export default { ...@@ -481,10 +485,11 @@ export default {
}, },
sceneClick(data, node) { sceneClick(data, node) {
this.$store.commit('setViewId', null) this.$store.dispatch('chart/setViewId', null)
this.$store.commit('setViewId', data.id) this.$store.dispatch('chart/setViewId', data.id)
this.$store.commit('setTableId', data.tableId) this.$store.dispatch('chart/setTableId', data.tableId)
this.$router.push('/chart/chart-edit') // this.$router.push('/chart/chart-edit')
this.$emit('switchComponent', { name: 'ChartEdit' })
}, },
selectTable() { selectTable() {
...@@ -497,12 +502,13 @@ export default { ...@@ -497,12 +502,13 @@ export default {
view.name = this.table.name view.name = this.table.name
view.sceneId = this.currGroup.id view.sceneId = this.currGroup.id
view.tableId = this.table.id view.tableId = this.table.id
this.$post('/chart/view/save', view, response => { post('/chart/view/save', view).then(response => {
this.selectTableFlag = false this.selectTableFlag = false
this.$store.commit('setTableId', null) this.$store.dispatch('chart/setTableId', null)
this.$store.commit('setTableId', this.table.id) this.$store.dispatch('chart/setTableId', this.table.id)
this.$router.push('/chart/chart-edit') // this.$router.push('/chart/chart-edit')
this.$store.commit('setViewId', response.data.id) this.$emit('switchComponent', { name: 'ChartEdit' })
this.$store.dispatch('chart/setViewId', response.data.id)
this.chartTree() this.chartTree()
}) })
}, },
...@@ -516,11 +522,9 @@ export default { ...@@ -516,11 +522,9 @@ export default {
if (path === '/chart/chart-edit') { if (path === '/chart/chart-edit') {
this.sceneMode = true this.sceneMode = true
const sceneId = this.$store.state.chart.sceneId 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 this.currGroup = response.data
}) })
} else {
this.$router.push('/chart')
} }
} }
} }
......
...@@ -2,13 +2,12 @@ ...@@ -2,13 +2,12 @@
<ms-container> <ms-container>
<ms-aside-container> <ms-aside-container>
<group /> <group @switchComponent="switchComponent"/>
</ms-aside-container> </ms-aside-container>
<ms-main-container> <ms-main-container>
<keep-alive> <!-- <router-view />-->
<router-view /> <component :is="component" :param="param" @switchComponent="switchComponent"></component>
</keep-alive>
</ms-main-container> </ms-main-container>
</ms-container> </ms-container>
</template> </template>
...@@ -19,11 +18,31 @@ import MsContainer from '@/metersphere/common/components/MsContainer' ...@@ -19,11 +18,31 @@ import MsContainer from '@/metersphere/common/components/MsContainer'
import MsAsideContainer from '@/metersphere/common/components/MsAsideContainer' import MsAsideContainer from '@/metersphere/common/components/MsAsideContainer'
import Group from './group/Group' import Group from './group/Group'
import ChartHome from './data/ChartHome'
import ChartEdit from './view/ChartEdit'
export default { export default {
name: 'Chart', name: 'Chart',
components: { MsMainContainer, MsContainer, MsAsideContainer, Group }, components: { MsMainContainer, MsContainer, MsAsideContainer, Group, ChartHome, ChartEdit },
data() { 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> </script>
......
...@@ -57,7 +57,7 @@ ...@@ -57,7 +57,7 @@
<div style="border-bottom: 1px solid #E6E6E6;overflow-y:hidden;" class="padding-lr"> <div style="border-bottom: 1px solid #E6E6E6;overflow-y:hidden;" class="padding-lr">
<el-row> <el-row>
<span>{{ $t('chart.title') }}</span> <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-row>
<el-form> <el-form>
<el-form-item class="form-item"> <el-form-item class="form-item">
...@@ -147,7 +147,7 @@ ...@@ -147,7 +147,7 @@
</el-row> </el-row>
<div class="Echarts" style="height: 100%;display: flex;margin-top: 10px;"> <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> </div>
</el-row> </el-row>
</el-col> </el-col>
...@@ -156,6 +156,7 @@ ...@@ -156,6 +156,7 @@
</template> </template>
<script> <script>
import { post } from '@/api/dataset/dataset'
import draggable from 'vuedraggable' import draggable from 'vuedraggable'
import { BASE_BAR } from '../chart/chart' import { BASE_BAR } from '../chart/chart'
...@@ -219,14 +220,14 @@ export default { ...@@ -219,14 +220,14 @@ export default {
methods: { methods: {
initTableData(id) { initTableData(id) {
if (id != null) { if (id != null) {
this.$post('/dataset/table/get/' + id, null, response => { post('/dataset/table/get/' + id, null).then(response => {
this.table = response.data this.table = response.data
this.initTableField(id) this.initTableField(id)
}) })
} }
}, },
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.dimension = response.data.dimension
this.quota = response.data.quota this.quota = response.data.quota
}) })
...@@ -259,7 +260,7 @@ export default { ...@@ -259,7 +260,7 @@ export default {
}, },
get(id) { get(id) {
if (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 = response.data
this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : [] this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : [] this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
...@@ -276,7 +277,7 @@ export default { ...@@ -276,7 +277,7 @@ export default {
view.tableId = this.$store.state.chart.tableId view.tableId = this.$store.state.chart.tableId
view.xaxis = JSON.stringify(view.xaxis) view.xaxis = JSON.stringify(view.xaxis)
view.yaxis = JSON.stringify(view.yaxis) 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.get(response.data.id);
this.getData(response.data.id) this.getData(response.data.id)
this.$store.commit('setChartSceneData', null) this.$store.commit('setChartSceneData', null)
...@@ -285,7 +286,7 @@ export default { ...@@ -285,7 +286,7 @@ export default {
}, },
getData(id) { getData(id) {
if (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 = response.data
this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : [] this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : [] this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
...@@ -406,4 +407,8 @@ export default { ...@@ -406,4 +407,8 @@ export default {
.el-form-item { .el-form-item {
margin-bottom: 0; margin-bottom: 0;
} }
span {
font-size: 14px;
}
</style> </style>
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
</el-button> </el-button>
</el-row> </el-row>
</el-row> </el-row>
<el-divider /> <el-divider/>
<el-row> <el-row>
<el-form :inline="true"> <el-form :inline="true">
<el-form-item class="form-item"> <el-form-item class="form-item">
...@@ -57,7 +57,12 @@ ...@@ -57,7 +57,12 @@
</template> </template>
<script> <script>
import { listDatasource, post } from '@/api/dataset/dataset'
export default { export default {
props: {
param: Object
},
name: 'AddDB', name: 'AddDB',
data() { data() {
return { return {
...@@ -66,31 +71,27 @@ export default { ...@@ -66,31 +71,27 @@ export default {
dataSource: '', dataSource: '',
tables: [], tables: [],
checkTableList: [], checkTableList: [],
scene: null,
mode: '0' mode: '0'
} }
}, },
watch: { watch: {
dataSource(val) { dataSource(val) {
if (val) { if (val) {
this.$post('/datasource/getTables', { id: val }, response => { post('/datasource/getTables', { id: val }).then(response => {
this.tables = response.data this.tables = response.data
} })
)
} }
} }
}, },
mounted() { mounted() {
this.initDataSource() this.initDataSource()
this.scene = this.$route.params.scene
}, },
activated() { activated() {
this.initDataSource() this.initDataSource()
this.scene = this.$route.params.scene
}, },
methods: { methods: {
initDataSource() { initDataSource() {
this.$get('/datasource/list', response => { listDatasource().then(response => {
this.options = response.data this.options = response.data
}) })
}, },
...@@ -98,7 +99,7 @@ export default { ...@@ -98,7 +99,7 @@ export default {
save() { save() {
// console.log(this.checkTableList); // console.log(this.checkTableList);
// console.log(this.scene); // console.log(this.scene);
const sceneId = this.scene.id const sceneId = this.param.id
const dataSourceId = this.dataSource const dataSourceId = this.dataSource
const tables = [] const tables = []
const mode = this.mode const mode = this.mode
...@@ -111,15 +112,16 @@ export default { ...@@ -111,15 +112,16 @@ export default {
mode: parseInt(mode) mode: parseInt(mode)
}) })
}) })
this.$post('/dataset/table/batchAdd', tables, response => { post('/dataset/table/batchAdd', tables).then(response => {
this.$store.commit('setSceneData', new Date().getTime()) this.$store.dispatch('dataset/setSceneData', new Date().getTime())
this.cancel() this.cancel()
}) })
}, },
cancel() { cancel() {
this.dataReset() this.dataReset()
this.$router.push('/dataset/home') // this.$router.push('/dataset/home')
this.$emit('switchComponent', { name: '' })
}, },
dataReset() { dataReset() {
......
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
{{ $t('dataset.datalist') }} {{ $t('dataset.datalist') }}
</span> </span>
</el-row> </el-row>
<el-divider /> <el-divider/>
<el-row> <el-row>
<el-form> <el-form>
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
{{ $t('dataset.back') }} {{ $t('dataset.back') }}
</el-button> </el-button>
</el-row> </el-row>
<el-divider /> <el-divider/>
<el-row> <el-row>
<el-form> <el-form>
<el-form-item class="form-item"> <el-form-item class="form-item">
...@@ -85,8 +85,8 @@ ...@@ -85,8 +85,8 @@
({{ data.type }}) ({{ data.type }})
</span> </span>
<span> <span>
<span v-if="data.mode === 0" style="margin-left: 6px"><i class="el-icon-s-operation" /></span> <span v-if="data.mode === 0" style="margin-left: 6px"><i class="el-icon-s-operation"/></span>
<span v-if="data.mode === 1" style="margin-left: 6px"><i class="el-icon-time" /></span> <span v-if="data.mode === 1" style="margin-left: 6px"><i class="el-icon-time"/></span>
</span> </span>
<span style="margin-left: 6px">{{ data.name }}</span> <span style="margin-left: 6px">{{ data.name }}</span>
</span> </span>
...@@ -97,6 +97,8 @@ ...@@ -97,6 +97,8 @@
</template> </template>
<script> <script>
import { post } from '@/api/dataset/dataset'
export default { export default {
name: 'DatasetGroupSelector', name: 'DatasetGroupSelector',
data() { data() {
...@@ -157,7 +159,7 @@ export default { ...@@ -157,7 +159,7 @@ export default {
}, },
tree(group) { tree(group) {
this.$post('/dataset/group/tree', group, response => { post('/dataset/group/tree', group).then(response => {
this.data = response.data this.data = response.data
}) })
}, },
...@@ -165,10 +167,10 @@ export default { ...@@ -165,10 +167,10 @@ export default {
tableTree() { tableTree() {
this.tableData = [] this.tableData = []
if (this.currGroup) { if (this.currGroup) {
this.$post('/dataset/table/list', { post('/dataset/table/list', {
sort: 'type asc,create_time desc,name asc', sort: 'type asc,create_time desc,name asc',
sceneId: this.currGroup.id sceneId: this.currGroup.id
}, response => { }).then(response => {
this.tableData = response.data this.tableData = response.data
}) })
} }
......
...@@ -20,6 +20,8 @@ ...@@ -20,6 +20,8 @@
</template> </template>
<script> <script>
import { post } from '@/api/dataset/dataset'
export default { export default {
name: 'DatasetTableData', name: 'DatasetTableData',
props: { props: {
...@@ -46,7 +48,7 @@ export default { ...@@ -46,7 +48,7 @@ export default {
initData() { initData() {
this.resetData() this.resetData()
if (this.table.id) { 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.fields = response.data.fields
this.data = response.data.data this.data = response.data.data
}) })
......
...@@ -10,22 +10,22 @@ ...@@ -10,22 +10,22 @@
<el-button size="mini" @click="edit"> <el-button size="mini" @click="edit">
{{ $t('dataset.edit') }} {{ $t('dataset.edit') }}
</el-button> </el-button>
<!-- <el-button size="mini" type="primary" @click="createChart">--> <!-- <el-button size="mini" type="primary" @click="createChart">-->
<!-- {{$t('dataset.create_view')}}--> <!-- {{$t('dataset.create_view')}}-->
<!-- </el-button>--> <!-- </el-button>-->
</el-row> </el-row>
</el-row> </el-row>
<el-divider /> <el-divider/>
<el-tabs v-model="tabActive"> <el-tabs v-model="tabActive">
<el-tab-pane :label="$t('dataset.data_preview')" name="dataPreview"> <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>
<el-tab-pane :label="$t('dataset.join_view')" name="joinView"> <el-tab-pane :label="$t('dataset.join_view')" name="joinView">
关联视图 TODO 关联视图 TODO
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('dataset.update_info')" name="updateInfo"> <el-tab-pane :label="$t('dataset.update_info')" name="updateInfo">
<update-info :table="table" /> <update-info :table="table"/>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
...@@ -40,17 +40,17 @@ ...@@ -40,17 +40,17 @@
</el-table-column> </el-table-column>
<el-table-column property="name" :label="$t('dataset.field_name')" width="180"> <el-table-column property="name" :label="$t('dataset.field_name')" width="180">
<template slot-scope="scope"> <template slot-scope="scope">
<el-input v-model="scope.row.name" size="mini" /> <el-input v-model="scope.row.name" size="mini"/>
</template> </template>
</el-table-column> </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"> <el-table-column property="checked" :label="$t('dataset.field_check')" width="80">
<template slot-scope="scope"> <template slot-scope="scope">
<el-checkbox v-model="scope.row.checked" /> <el-checkbox v-model="scope.row.checked"/>
</template> </template>
</el-table-column> </el-table-column>
<!--下面这一列占位--> <!--下面这一列占位-->
<el-table-column property="" /> <el-table-column property=""/>
</el-table> </el-table>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button size="mini" @click="closeEdit">{{ $t('dataset.cancel') }}</el-button> <el-button size="mini" @click="closeEdit">{{ $t('dataset.cancel') }}</el-button>
...@@ -58,14 +58,15 @@ ...@@ -58,14 +58,15 @@
</div> </div>
</el-dialog> </el-dialog>
<!-- <el-dialog title="view" :visible.sync="createViewDialog" :fullscreen="true">--> <!-- <el-dialog title="view" :visible.sync="createViewDialog" :fullscreen="true">-->
<!-- <chart-edit/>--> <!-- <chart-edit/>-->
<!-- </el-dialog>--> <!-- </el-dialog>-->
</el-row> </el-row>
</el-col> </el-col>
</template> </template>
<script> <script>
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'
...@@ -107,7 +108,7 @@ export default { ...@@ -107,7 +108,7 @@ export default {
if (id !== null) { if (id !== null) {
this.fields = [] this.fields = []
this.data = [] this.data = []
this.$post('/dataset/table/get/' + id, null, response => { getTable(id).then(response => {
this.table = response.data this.table = response.data
this.initPreviewData() this.initPreviewData()
}) })
...@@ -116,7 +117,7 @@ export default { ...@@ -116,7 +117,7 @@ export default {
initPreviewData() { initPreviewData() {
if (this.table.id) { if (this.table.id) {
this.$post('/dataset/table/getPreviewData', this.table, response => { getPreviewData(this.table).then(response => {
this.fields = response.data.fields this.fields = response.data.fields
this.data = response.data.data this.data = response.data.data
}) })
...@@ -124,7 +125,7 @@ export default { ...@@ -124,7 +125,7 @@ export default {
}, },
initTableFields() { initTableFields() {
this.$post('/dataset/field/list/' + this.table.id, null, response => { fieldList(this.table.id).then(response => {
this.tableFields = response.data this.tableFields = response.data
}) })
}, },
...@@ -142,7 +143,7 @@ export default { ...@@ -142,7 +143,7 @@ export default {
saveEdit() { saveEdit() {
console.log(this.tableFields) console.log(this.tableFields)
this.$post('/dataset/field/batchEdit', this.tableFields, response => { batchEdit(this.tableFields).then(response => {
this.closeEdit() this.closeEdit()
this.initTable(this.table.id) this.initTable(this.table.id)
}) })
......
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
{{ $t('dataset.datalist') }} {{ $t('dataset.datalist') }}
</span> </span>
</el-row> </el-row>
<el-divider /> <el-divider/>
<el-row> <el-row>
<el-button icon="el-icon-circle-plus" type="primary" size="mini" @click="add('group')"> <el-button icon="el-icon-circle-plus" type="primary" size="mini" @click="add('group')">
...@@ -103,12 +103,13 @@ ...@@ -103,12 +103,13 @@
<el-dialog :title="dialogTitle" :visible="editGroup" :show-close="false" width="30%"> <el-dialog :title="dialogTitle" :visible="editGroup" :show-close="false" width="30%">
<el-form ref="groupForm" :model="groupForm" :rules="groupFormRules"> <el-form ref="groupForm" :model="groupForm" :rules="groupFormRules">
<el-form-item :label="$t('commons.name')" prop="name"> <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-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button size="mini" @click="close()">{{ $t('dataset.cancel') }}</el-button> <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> </div>
</el-dialog> </el-dialog>
</el-col> </el-col>
...@@ -123,7 +124,7 @@ ...@@ -123,7 +124,7 @@
{{ $t('dataset.back') }} {{ $t('dataset.back') }}
</el-button> </el-button>
</el-row> </el-row>
<el-divider /> <el-divider/>
<el-row> <el-row>
<el-dropdown style="margin-right: 10px;" size="small" trigger="click" @command="clickAddData"> <el-dropdown style="margin-right: 10px;" size="small" trigger="click" @command="clickAddData">
<el-button type="primary" size="mini" plain> <el-button type="primary" size="mini" plain>
...@@ -177,8 +178,8 @@ ...@@ -177,8 +178,8 @@
({{ data.type }}) ({{ data.type }})
</span> </span>
<span> <span>
<span v-if="data.mode === 0" style="margin-left: 6px"><i class="el-icon-s-operation" /></span> <span v-if="data.mode === 0" style="margin-left: 6px"><i class="el-icon-s-operation"/></span>
<span v-if="data.mode === 1" style="margin-left: 6px"><i class="el-icon-time" /></span> <span v-if="data.mode === 1" style="margin-left: 6px"><i class="el-icon-time"/></span>
</span> </span>
<span style="margin-left: 6px">{{ data.name }}</span> <span style="margin-left: 6px">{{ data.name }}</span>
</span> </span>
...@@ -212,7 +213,7 @@ ...@@ -212,7 +213,7 @@
<el-dialog :title="$t('dataset.table')" :visible="editTable" :show-close="false" width="30%"> <el-dialog :title="$t('dataset.table')" :visible="editTable" :show-close="false" width="30%">
<el-form ref="tableForm" :model="tableForm" :rules="tableFormRules"> <el-form ref="tableForm" :model="tableForm" :rules="tableFormRules">
<el-form-item :label="$t('commons.name')" prop="name"> <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>
<el-form-item :label="$t('dataset.mode')" prop="mode"> <el-form-item :label="$t('dataset.mode')" prop="mode">
<el-radio v-model="tableForm.mode" label="0">{{ $t('dataset.direct_connect') }}</el-radio> <el-radio v-model="tableForm.mode" label="0">{{ $t('dataset.direct_connect') }}</el-radio>
...@@ -221,7 +222,8 @@ ...@@ -221,7 +222,8 @@
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button size="mini" @click="closeTable()">{{ $t('dataset.cancel') }}</el-button> <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> </div>
</el-dialog> </el-dialog>
...@@ -231,6 +233,7 @@ ...@@ -231,6 +233,7 @@
<script> <script>
import { loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree } from '@/api/dataset/dataset' import { loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree } from '@/api/dataset/dataset'
export default { export default {
name: 'Group', name: 'Group',
data() { data() {
...@@ -377,7 +380,7 @@ export default { ...@@ -377,7 +380,7 @@ export default {
}, },
saveTable(table) { saveTable(table) {
// console.log(table) // console.log(table)
table.mode = parseInt(table.mode) table.mode = parseInt(table.mode)
this.$refs['tableForm'].validate((valid) => { this.$refs['tableForm'].validate((valid) => {
if (valid) { if (valid) {
...@@ -389,7 +392,8 @@ export default { ...@@ -389,7 +392,8 @@ export default {
showClose: true showClose: true
}) })
this.tableTree() this.tableTree()
this.$router.push('/dataset/home') // this.$router.push('/dataset/home')
this.$emit('switchComponent', { name: '' })
this.$store.dispatch('dataset/setTable', null) this.$store.dispatch('dataset/setTable', null)
}) })
} else { } else {
...@@ -434,7 +438,8 @@ export default { ...@@ -434,7 +438,8 @@ export default {
showClose: true showClose: true
}) })
this.tableTree() this.tableTree()
this.$router.push('/dataset/home') // this.$router.push('/dataset/home')
this.$emit('switchComponent', { name: '' })
this.$store.dispatch('dataset/setTable', null) this.$store.dispatch('dataset/setTable', null)
}) })
}).catch(() => { }).catch(() => {
...@@ -501,7 +506,9 @@ export default { ...@@ -501,7 +506,9 @@ export default {
this.sceneMode = false this.sceneMode = false
// const route = this.$store.state.permission.currentRoutes // const route = this.$store.state.permission.currentRoutes
// console.log(route) // 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) { clickAddData(param) {
...@@ -529,24 +536,26 @@ export default { ...@@ -529,24 +536,26 @@ export default {
}, },
addDB() { addDB() {
this.$router.push({ // this.$router.push({
name: 'add_db', // name: 'add_db',
params: { // params: {
scene: this.currGroup // scene: this.currGroup
} // }
}) // })
this.$emit('switchComponent', { name: 'AddDB', param: this.currGroup })
}, },
sceneClick(data, node) { sceneClick(data, node) {
// console.log(data); // console.log(data);
this.$store.dispatch('dataset/setTable', null) this.$store.dispatch('dataset/setTable', null)
this.$store.dispatch('dataset/setTable', data.id) this.$store.dispatch('dataset/setTable', data.id)
this.$router.push({ // this.$router.push({
name: 'table', // name: 'table',
params: { // params: {
table: data // table: data
} // }
}) // })
this.$emit('switchComponent', { name: 'ViewTable' })
}, },
refresh() { refresh() {
...@@ -557,8 +566,6 @@ export default { ...@@ -557,8 +566,6 @@ export default {
getScene(sceneId).then(res => { getScene(sceneId).then(res => {
this.currGroup = res.data this.currGroup = res.data
}) })
} else {
this.$router.push('/dataset')
} }
} }
} }
......
...@@ -2,13 +2,12 @@ ...@@ -2,13 +2,12 @@
<ms-container> <ms-container>
<ms-aside-container> <ms-aside-container>
<group /> <group @switchComponent="switchComponent"/>
</ms-aside-container> </ms-aside-container>
<ms-main-container> <ms-main-container>
<keep-alive> <!--<router-view/>-->
<router-view /> <component :is="component" :param="param" @switchComponent="switchComponent"></component>
</keep-alive>
</ms-main-container> </ms-main-container>
</ms-container> </ms-container>
</template> </template>
...@@ -19,25 +18,49 @@ import MsContainer from '@/metersphere/common/components/MsContainer' ...@@ -19,25 +18,49 @@ import MsContainer from '@/metersphere/common/components/MsContainer'
import MsAsideContainer from '@/metersphere/common/components/MsAsideContainer' import MsAsideContainer from '@/metersphere/common/components/MsAsideContainer'
import Group from './group/Group' import Group from './group/Group'
import DataHome from './data/DataHome'
import ViewTable from './data/ViewTable'
import AddDB from './add/AddDB'
export default { export default {
name: 'DataSet', name: 'DataSet',
components: { MsMainContainer, MsContainer, MsAsideContainer, Group }, components: { MsMainContainer, MsContainer, MsAsideContainer, Group, DataHome, ViewTable, AddDB },
data() { 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> </script>
<style scoped> <style scoped>
.ms-aside-container { .ms-aside-container {
height: calc(100vh - 40px); height: calc(100vh - 56px);
padding: 15px; padding: 15px;
min-width: 300px; min-width: 260px;
max-width: 500px; max-width: 460px;
} }
.ms-main-container { .ms-main-container {
height: calc(100vh - 40px); height: calc(100vh - 56px);
} }
</style> </style>
...@@ -105,7 +105,7 @@ export default { ...@@ -105,7 +105,7 @@ export default {
console.log(condition) // demo只查看搜索条件,没有搜索的实现 console.log(condition) // demo只查看搜索条件,没有搜索的实现
const { currentPage, pageSize } = this.paginationConfig const { currentPage, pageSize } = this.paginationConfig
userLists(currentPage, pageSize, {}).then(response => { userLists(currentPage, pageSize, {}).then(response => {
this.data = response.data.data.listObject this.data = response.data.listObject
this.paginationConfig.total = response.data.itemCount this.paginationConfig.total = response.data.itemCount
}) })
} }
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论