Skip to content

D
dataease
提交 b2f19269 authored 作者: junjie's avatar junjie
浏览文件
操作

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

上级 71195722
隐藏空白字符变更
内嵌 并排
正在显示 包含 339 行增加 和 478 行删除
frontend/package.json
浏览文件 @ b2f19269
......@@ -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",
......
frontend/src/api/chart/chart.js 0 → 100644
浏览文件 @ b2f19269
import request from '@/utils/request'
export function post(url, data) {
return request({
url: url,
method: 'post',
data
})
}
frontend/src/api/dataset/dataset.js
浏览文件 @ b2f19269
......@@ -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 }
frontend/src/layout/components/AppMain.vue
浏览文件 @ b2f19269
<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>
frontend/src/main.js
浏览文件 @ b2f19269
......@@ -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
......
frontend/src/store/index.js
浏览文件 @ b2f19269
......@@ -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
})
......
frontend/src/store/modules/chart.js 0 → 100644
浏览文件 @ b2f19269
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
}
frontend/src/views/chart/data/AddDB.vue deleted 100644 → 0
浏览文件 @ 71195722
<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>
frontend/src/views/chart/data/TabDataPreview.vue deleted 100644 → 0
浏览文件 @ 71195722
<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>
frontend/src/views/chart/data/ViewTable.vue deleted 100644 → 0
浏览文件 @ 71195722
<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>
frontend/src/views/chart/group/Group.vue
浏览文件 @ b2f19269
......@@ -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')
}
}
}
......
frontend/src/views/chart/index.vue
浏览文件 @ b2f19269
......@@ -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>
......
frontend/src/views/chart/view/ChartEdit.vue
浏览文件 @ b2f19269
......@@ -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>
frontend/src/views/dataset/add/AddDB.vue
浏览文件 @ b2f19269
......@@ -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() {
......
frontend/src/views/dataset/common/DatasetGroupSelector.vue
浏览文件 @ b2f19269
......@@ -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
})
}
......
frontend/src/views/dataset/common/DatasetTableData.vue
浏览文件 @ b2f19269
......@@ -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
})
......
frontend/src/views/dataset/data/ViewTable.vue
浏览文件 @ b2f19269
......@@ -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)
})
......
frontend/src/views/dataset/group/Group.vue
浏览文件 @ b2f19269
......@@ -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')
}
}
}
......
frontend/src/views/dataset/index.vue
浏览文件 @ b2f19269
......@@ -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>
frontend/src/views/system/user/index_back.vue
浏览文件 @ b2f19269
......@@ -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
})
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论