forked from github/dataease
feat(fronted): 大半夜的 临时提交 明天再搞
This commit is contained in:
xiajunjie
parent
43e7567fc0
commit
b2b8814ee5
@ -122,7 +122,7 @@
|
||||
</el-row>
|
||||
<el-divider/>
|
||||
<el-row>
|
||||
<el-button type="primary" size="mini" plain>
|
||||
<el-button type="primary" size="mini" plain @click="selectTable">
|
||||
{{$t('chart.add_chart')}}
|
||||
</el-button>
|
||||
</el-row>
|
||||
@ -187,13 +187,25 @@
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!--dataset table select-->
|
||||
<el-dialog title="select table" :visible="selectTableFlag" :show-close="false" width="70%" class="dialog-css">
|
||||
<table-selector/>
|
||||
<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="selectTableFlag = false">{{$t('chart.confirm')}}</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
</el-col>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TableSelector from "../view/TableSelector";
|
||||
|
||||
export default {
|
||||
name: "Group",
|
||||
components: {TableSelector},
|
||||
data() {
|
||||
return {
|
||||
sceneMode: false,
|
||||
@ -226,7 +238,8 @@ export default {
|
||||
name: [
|
||||
{required: true, message: this.$t('commons.input_content'), trigger: 'blur'},
|
||||
],
|
||||
}
|
||||
},
|
||||
selectTableFlag: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -245,8 +258,7 @@ export default {
|
||||
this.chartTree();
|
||||
this.$router.push('/chart');
|
||||
},
|
||||
watch: {
|
||||
},
|
||||
watch: {},
|
||||
methods: {
|
||||
clickAdd(param) {
|
||||
this.add(param.type);
|
||||
@ -473,6 +485,9 @@ export default {
|
||||
// });
|
||||
},
|
||||
|
||||
selectTable() {
|
||||
this.selectTableFlag = true;
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -514,4 +529,12 @@ export default {
|
||||
.title-text {
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.dialog-css >>> .el-dialog__header {
|
||||
padding: 20px 20px 0;
|
||||
}
|
||||
|
||||
.dialog-css >>> .el-dialog__body {
|
||||
padding: 10px 20px 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<ms-container>
|
||||
<ms-aside-container>
|
||||
<dataset-group-selector/>
|
||||
</ms-aside-container>
|
||||
|
||||
<ms-main-container>
|
||||
<div>1111</div>
|
||||
</ms-main-container>
|
||||
</ms-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MsMainContainer from "../../common/components/MsMainContainer";
|
||||
import MsContainer from "../../common/components/MsContainer";
|
||||
import MsAsideContainer from "../../common/components/MsAsideContainer";
|
||||
import MsSettingMenu from "../../settings/SettingMenu";
|
||||
import MsCurrentUser from "../../settings/CurrentUser";
|
||||
import DatasetGroupSelector from "../../dataset/common/DatasetGroupSelector";
|
||||
|
||||
export default {
|
||||
name: "TableSelector",
|
||||
components: {MsMainContainer, MsContainer, MsAsideContainer, MsSettingMenu, MsCurrentUser, DatasetGroupSelector},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {},
|
||||
created() {
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ms-aside-container {
|
||||
height: 50vh;
|
||||
min-width: 180px;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.ms-main-container {
|
||||
height: 50vh;
|
||||
border: 1px solid #E6E6E6;
|
||||
border-left: 0 solid;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,246 @@
|
||||
<template>
|
||||
<el-col>
|
||||
<!-- group -->
|
||||
<el-col v-if="!sceneMode">
|
||||
<el-row class="title-css">
|
||||
<span class="title-text">
|
||||
{{ $t('dataset.datalist') }}
|
||||
</span>
|
||||
</el-row>
|
||||
<el-divider/>
|
||||
|
||||
<el-row>
|
||||
<el-form>
|
||||
<el-form-item class="form-item">
|
||||
<el-input
|
||||
size="mini"
|
||||
:placeholder="$t('dataset.search')"
|
||||
prefix-icon="el-icon-search"
|
||||
v-model="search"
|
||||
clearable>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
|
||||
<el-col class="custom-tree-container">
|
||||
<div class="block">
|
||||
<el-tree
|
||||
:default-expanded-keys="expandedArray"
|
||||
:data="data"
|
||||
node-key="id"
|
||||
:expand-on-click-node="true"
|
||||
@node-click="nodeClick">
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<span>
|
||||
<span v-if="data.type === 'scene'">
|
||||
<el-button
|
||||
icon="el-icon-folder"
|
||||
type="text"
|
||||
size="mini">
|
||||
</el-button>
|
||||
</span>
|
||||
<span style="margin-left: 6px">{{ data.name }}</span>
|
||||
</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-col>
|
||||
|
||||
<!--scene-->
|
||||
<el-col v-if="sceneMode">
|
||||
<el-row class="title-css">
|
||||
<span class="title-text">
|
||||
{{currGroup.name}}
|
||||
</span>
|
||||
<el-button icon="el-icon-back" size="mini" @click="back" style="float: right">
|
||||
{{$t('dataset.back')}}
|
||||
</el-button>
|
||||
</el-row>
|
||||
<el-divider/>
|
||||
<el-row>
|
||||
<el-form>
|
||||
<el-form-item class="form-item">
|
||||
<el-input
|
||||
size="mini"
|
||||
:placeholder="$t('dataset.search')"
|
||||
prefix-icon="el-icon-search"
|
||||
v-model="search"
|
||||
clearable>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-tree
|
||||
:data="tableData"
|
||||
node-key="id"
|
||||
:expand-on-click-node="true"
|
||||
@node-click="sceneClick">
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<span>
|
||||
<span>
|
||||
({{data.type}})
|
||||
</span>
|
||||
<span style="margin-left: 6px">{{ data.name }}</span>
|
||||
</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</el-col>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "DatasetGroupSelector",
|
||||
data() {
|
||||
return {
|
||||
sceneMode: false,
|
||||
search: '',
|
||||
data: [],
|
||||
tableData: [],
|
||||
currGroup: null,
|
||||
expandedArray: [],
|
||||
groupForm: {
|
||||
name: '',
|
||||
pid: null,
|
||||
level: 0,
|
||||
type: '',
|
||||
children: [],
|
||||
sort: 'type desc,name asc'
|
||||
},
|
||||
tableForm: {
|
||||
name: '',
|
||||
sort: 'type asc,create_time desc,name asc'
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
mounted() {
|
||||
this.tree(this.groupForm);
|
||||
this.tableTree();
|
||||
},
|
||||
activated() {
|
||||
this.tree(this.groupForm);
|
||||
this.tableTree();
|
||||
},
|
||||
watch: {
|
||||
// search(val){
|
||||
// this.groupForm.name = val;
|
||||
// this.tree(this.groupForm);
|
||||
// }
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.editGroup = false;
|
||||
this.groupForm = {
|
||||
name: '',
|
||||
pid: null,
|
||||
level: 0,
|
||||
type: '',
|
||||
children: [],
|
||||
sort: 'type desc,name asc'
|
||||
}
|
||||
},
|
||||
|
||||
closeTable() {
|
||||
this.editTable = false;
|
||||
this.tableForm = {
|
||||
name: '',
|
||||
}
|
||||
},
|
||||
|
||||
tree(group) {
|
||||
this.$post("/dataset/group/tree", group, response => {
|
||||
this.data = response.data;
|
||||
})
|
||||
},
|
||||
|
||||
tableTree() {
|
||||
this.tableData = [];
|
||||
if (this.currGroup) {
|
||||
this.$post('/dataset/table/list', {
|
||||
sort: 'type asc,create_time desc,name asc',
|
||||
sceneId: this.currGroup.id
|
||||
}, response => {
|
||||
this.tableData = response.data;
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
nodeClick(data, node) {
|
||||
// console.log(data);
|
||||
// console.log(node);
|
||||
if (data.type === 'scene') {
|
||||
this.sceneMode = true;
|
||||
this.currGroup = data;
|
||||
}
|
||||
if (node.expanded) {
|
||||
this.expandedArray.push(data.id);
|
||||
} else {
|
||||
let index = this.expandedArray.indexOf(data.id);
|
||||
if (index > -1) {
|
||||
this.expandedArray.splice(index, 1);
|
||||
}
|
||||
}
|
||||
// console.log(this.expandedArray);
|
||||
},
|
||||
|
||||
back() {
|
||||
this.sceneMode = false;
|
||||
},
|
||||
|
||||
sceneClick(data, node) {
|
||||
// console.log(data);
|
||||
this.$store.commit('setTable', null);
|
||||
this.$store.commit('setTable', data.id);
|
||||
this.$router.push({
|
||||
name: 'table',
|
||||
params: {
|
||||
table: data
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-divider--horizontal {
|
||||
margin: 12px 0
|
||||
}
|
||||
|
||||
.search-input {
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.custom-tree-node {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.custom-position {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
flex-flow: row nowrap;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.title-css {
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
line-height: 26px;
|
||||
}
|
||||
</style>
|
||||
@ -75,7 +75,7 @@
|
||||
|
||||
<script>
|
||||
import TabDataPreview from "./TabDataPreview";
|
||||
import ChartEdit from "../../chart/View/ChartEdit";
|
||||
import ChartEdit from "../../chart/view/ChartEdit";
|
||||
|
||||
export default {
|
||||
name: "ViewTable",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user