mirror of
https://github.com/dataease/dataease.git
synced 2026-05-22 21:38:32 +08:00
feat: 恢复误删
This commit is contained in:
fit2cloud-chenyw
BIN
frontend/src/assets/favicon.ico
Normal file
BIN
frontend/src/assets/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 107 KiB |
45
frontend/src/business/components/chart/Chart.vue
Normal file
45
frontend/src/business/components/chart/Chart.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<ms-container>
|
||||
|
||||
<ms-aside-container>
|
||||
<group/>
|
||||
</ms-aside-container>
|
||||
|
||||
<ms-main-container>
|
||||
<keep-alive>
|
||||
<router-view/>
|
||||
</keep-alive>
|
||||
</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 Group from "./group/Group";
|
||||
|
||||
export default {
|
||||
name: "Chart",
|
||||
components: {MsMainContainer, MsContainer, MsAsideContainer, MsSettingMenu, MsCurrentUser, Group},
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ms-aside-container {
|
||||
height: calc(100vh - 40px);
|
||||
padding: 15px;
|
||||
min-width: 300px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.ms-main-container {
|
||||
height: calc(100vh - 40px);
|
||||
}
|
||||
|
||||
</style>
|
||||
148
frontend/src/business/components/chart/data/AddDB.vue
Normal file
148
frontend/src/business/components/chart/data/AddDB.vue
Normal file
@@ -0,0 +1,148 @@
|
||||
<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" @click="save" :disabled="checkTableList.length < 1">
|
||||
{{$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-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="form-item" style="float: right;">
|
||||
<el-input
|
||||
size="mini"
|
||||
:placeholder="$t('dataset.search')"
|
||||
prefix-icon="el-icon-search"
|
||||
v-model="searchTable"
|
||||
clearable>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row style="overflow: auto;height: 600px;">
|
||||
<el-checkbox-group v-model="checkTableList" size="small">
|
||||
<el-checkbox
|
||||
border
|
||||
v-for="t in tables"
|
||||
:label="t"
|
||||
:key="t">
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-row>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "AddDB",
|
||||
data() {
|
||||
return {
|
||||
searchTable: '',
|
||||
options: [],
|
||||
dataSource: '',
|
||||
tables: [],
|
||||
checkTableList: [],
|
||||
scene: null
|
||||
}
|
||||
},
|
||||
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);
|
||||
let sceneId = this.scene.id;
|
||||
let dataSourceId = this.dataSource;
|
||||
let 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 = [];
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dataSource(val) {
|
||||
if (val) {
|
||||
this.$post("/datasource/getTables", {id: val}, response => {
|
||||
this.tables = response.data;
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</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>
|
||||
25
frontend/src/business/components/chart/data/ChartHome.vue
Normal file
25
frontend/src/business/components/chart/data/ChartHome.vue
Normal file
@@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<el-col style="height: 100%;">
|
||||
<el-row style="height: 100%;" class="custom-position">
|
||||
{{$t('chart.pls_slc_tbl_left')}}
|
||||
</el-row>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ChartHome"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.custom-position {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
flex-flow: row nowrap;
|
||||
color: #9ea6b2;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<el-col>
|
||||
<el-table
|
||||
size="mini"
|
||||
:data="data"
|
||||
border
|
||||
style="width: 100%;">
|
||||
<el-table-column
|
||||
width="180px"
|
||||
v-for="field in fields"
|
||||
:key="field.fieldName"
|
||||
:prop="field.fieldName"
|
||||
:label="field.fieldName">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
table: Object,
|
||||
fields: Array,
|
||||
data: Array
|
||||
},
|
||||
name: "TabDataPreview",
|
||||
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: {},
|
||||
created() {
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
activated() {
|
||||
},
|
||||
methods: {},
|
||||
watch: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
122
frontend/src/business/components/chart/data/ViewTable.vue
Normal file
122
frontend/src/business/components/chart/data/ViewTable.vue
Normal file
@@ -0,0 +1,122 @@
|
||||
<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;
|
||||
}
|
||||
},
|
||||
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: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-divider--horizontal {
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
</style>
|
||||
540
frontend/src/business/components/chart/group/Group.vue
Normal file
540
frontend/src/business/components/chart/group/Group.vue
Normal file
@@ -0,0 +1,540 @@
|
||||
<template xmlns:el-col="http://www.w3.org/1999/html">
|
||||
<el-col>
|
||||
<!-- group -->
|
||||
<el-col v-if="!sceneMode">
|
||||
<el-row class="title-css">
|
||||
<span class="title-text">
|
||||
{{ $t('chart.datalist') }}
|
||||
</span>
|
||||
</el-row>
|
||||
<el-divider/>
|
||||
|
||||
<el-row>
|
||||
<el-button icon="el-icon-circle-plus" type="primary" size="mini" @click="add('group')">
|
||||
{{$t('chart.add_group')}}
|
||||
</el-button>
|
||||
<el-button icon="el-icon-folder-add" type="primary" size="mini" @click="add('scene')">
|
||||
{{$t('chart.add_scene')}}
|
||||
</el-button>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-form>
|
||||
<el-form-item class="form-item">
|
||||
<el-input
|
||||
size="mini"
|
||||
:placeholder="$t('chart.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>
|
||||
<span @click.stop v-if="data.type ==='group'">
|
||||
<el-dropdown trigger="click" @command="clickAdd" size="small">
|
||||
<span class="el-dropdown-link">
|
||||
<el-button
|
||||
icon="el-icon-plus"
|
||||
type="text"
|
||||
size="small">
|
||||
</el-button>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item icon="el-icon-circle-plus" :command="beforeClickAdd('group',data,node)">
|
||||
{{$t('chart.group')}}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-folder-add" :command="beforeClickAdd('scene',data,node)">
|
||||
{{$t('chart.scene')}}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</span>
|
||||
<span @click.stop style="margin-left: 12px;">
|
||||
<el-dropdown trigger="click" @command="clickMore" size="small">
|
||||
<span class="el-dropdown-link">
|
||||
<el-button
|
||||
icon="el-icon-more"
|
||||
type="text"
|
||||
size="small">
|
||||
</el-button>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item icon="el-icon-edit-outline" :command="beforeClickMore('rename',data,node)">
|
||||
{{$t('chart.rename')}}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-delete" :command="beforeClickMore('delete',data,node)">
|
||||
{{$t('chart.delete')}}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<!--group add/edit-->
|
||||
<el-dialog :title="dialogTitle" :visible="editGroup" :show-close="false" width="30%">
|
||||
<el-form :model="groupForm" :rules="groupFormRules" ref="groupForm">
|
||||
<el-form-item :label="$t('commons.name')" prop="name">
|
||||
<el-input v-model="groupForm.name"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="close()" size="mini">{{$t('chart.cancel')}}</el-button>
|
||||
<el-button type="primary" @click="saveGroup(groupForm)" size="mini">{{$t('chart.confirm')}}</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</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('chart.back')}}
|
||||
</el-button>
|
||||
</el-row>
|
||||
<el-divider/>
|
||||
<el-row>
|
||||
<el-button type="primary" size="mini" plain @click="selectTable">
|
||||
{{$t('chart.add_chart')}}
|
||||
</el-button>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-form>
|
||||
<el-form-item class="form-item">
|
||||
<el-input
|
||||
size="mini"
|
||||
:placeholder="$t('chart.search')"
|
||||
prefix-icon="el-icon-search"
|
||||
v-model="search"
|
||||
clearable>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<span>{{sceneData}}</span>
|
||||
<el-tree
|
||||
:data="chartData"
|
||||
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>
|
||||
<span @click.stop style="margin-left: 12px;">
|
||||
<el-dropdown trigger="click" @command="clickMore">
|
||||
<span class="el-dropdown-link">
|
||||
<el-button
|
||||
icon="el-icon-more"
|
||||
type="text"
|
||||
size="small">
|
||||
</el-button>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item icon="el-icon-edit-outline" :command="beforeClickMore('renameChart',data,node)">
|
||||
{{$t('chart.rename')}}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-delete" :command="beforeClickMore('deleteChart',data,node)">
|
||||
{{$t('chart.delete')}}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
|
||||
<!--rename chart-->
|
||||
<el-dialog :title="$t('chart.table')" :visible="editTable" :show-close="false" width="30%">
|
||||
<el-form :model="tableForm" :rules="tableFormRules" ref="tableForm">
|
||||
<el-form-item :label="$t('commons.name')" prop="name">
|
||||
<el-input v-model="tableForm.name"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="closeTable()" size="mini">{{$t('chart.cancel')}}</el-button>
|
||||
<el-button type="primary" @click="saveTable(tableForm)" size="mini">{{$t('chart.confirm')}}</el-button>
|
||||
</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,
|
||||
dialogTitle: '',
|
||||
search: '',
|
||||
editGroup: false,
|
||||
editTable: false,
|
||||
data: [],
|
||||
chartData: [],
|
||||
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'
|
||||
},
|
||||
groupFormRules: {
|
||||
name: [
|
||||
{required: true, message: this.$t('commons.input_content'), trigger: 'blur'},
|
||||
],
|
||||
},
|
||||
tableFormRules: {
|
||||
name: [
|
||||
{required: true, message: this.$t('commons.input_content'), trigger: 'blur'},
|
||||
],
|
||||
},
|
||||
selectTableFlag: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
sceneData: function () {
|
||||
this.chartTree();
|
||||
return this.$store.state.chart.sceneData;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.groupTree(this.groupForm);
|
||||
this.chartTree();
|
||||
this.$router.push('/chart');
|
||||
},
|
||||
activated() {
|
||||
this.groupTree(this.groupForm);
|
||||
this.chartTree();
|
||||
this.$router.push('/chart');
|
||||
},
|
||||
watch: {},
|
||||
methods: {
|
||||
clickAdd(param) {
|
||||
this.add(param.type);
|
||||
this.groupForm.pid = param.data.id;
|
||||
this.groupForm.level = param.data.level + 1;
|
||||
},
|
||||
|
||||
beforeClickAdd(type, data, node) {
|
||||
return {
|
||||
'type': type,
|
||||
'data': data,
|
||||
'node': node
|
||||
}
|
||||
},
|
||||
|
||||
clickMore(param) {
|
||||
switch (param.type) {
|
||||
case 'rename':
|
||||
this.add(param.data.type);
|
||||
this.groupForm = JSON.parse(JSON.stringify(param.data));
|
||||
break;
|
||||
case 'move':
|
||||
|
||||
break;
|
||||
case 'delete':
|
||||
this.delete(param.data);
|
||||
break;
|
||||
case 'renameChart':
|
||||
this.editTable = true;
|
||||
this.tableForm = JSON.parse(JSON.stringify(param.data));
|
||||
break;
|
||||
case 'deleteChart':
|
||||
this.deleteChart(param.data);
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
beforeClickMore(type, data, node) {
|
||||
return {
|
||||
'type': type,
|
||||
'data': data,
|
||||
'node': node
|
||||
}
|
||||
},
|
||||
|
||||
add(type) {
|
||||
switch (type) {
|
||||
case 'group':
|
||||
this.dialogTitle = this.$t('chart.group');
|
||||
break;
|
||||
case 'scene':
|
||||
this.dialogTitle = this.$t('chart.scene');
|
||||
break;
|
||||
}
|
||||
this.groupForm.type = type;
|
||||
this.editGroup = true;
|
||||
},
|
||||
|
||||
saveGroup(group) {
|
||||
this.$refs['groupForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$post("/chart/group/save", group, response => {
|
||||
this.close();
|
||||
this.$message({
|
||||
message: this.$t('commons.save_success'),
|
||||
type: 'success',
|
||||
showClose: true,
|
||||
});
|
||||
this.groupTree(this.groupForm);
|
||||
})
|
||||
} else {
|
||||
this.$message({
|
||||
message: this.$t('commons.input_content'),
|
||||
type: 'error',
|
||||
showClose: true,
|
||||
});
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
saveTable(table) {
|
||||
this.$refs['tableForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$post("/chart/table/update", table, response => {
|
||||
this.closeTable();
|
||||
this.$message({
|
||||
message: this.$t('commons.save_success'),
|
||||
type: 'success',
|
||||
showClose: true,
|
||||
});
|
||||
this.chartTree();
|
||||
this.$router.push('/chart/home');
|
||||
this.$store.commit('setTable', null);
|
||||
})
|
||||
} else {
|
||||
this.$message({
|
||||
message: this.$t('commons.input_content'),
|
||||
type: 'error',
|
||||
showClose: true,
|
||||
});
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
delete(data) {
|
||||
this.$confirm(this.$t('chart.confirm_delete'), this.$t('chart.tips'), {
|
||||
confirmButtonText: this.$t('chart.confirm'),
|
||||
cancelButtonText: this.$t('chart.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$post("/chart/group/delete/" + data.id, null, response => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: this.$t('chart.delete_success'),
|
||||
showClose: true,
|
||||
});
|
||||
this.groupTree(this.groupForm);
|
||||
});
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
|
||||
deleteChart(data) {
|
||||
this.$confirm(this.$t('chart.confirm_delete'), this.$t('chart.tips'), {
|
||||
confirmButtonText: this.$t('chart.confirm'),
|
||||
cancelButtonText: this.$t('chart.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$post("/chart/table/delete/" + data.id, null, 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);
|
||||
});
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
|
||||
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: '',
|
||||
}
|
||||
},
|
||||
|
||||
groupTree(group) {
|
||||
this.$post("/chart/group/tree", group, response => {
|
||||
this.data = response.data;
|
||||
})
|
||||
},
|
||||
|
||||
chartTree() {
|
||||
this.chartData = [];
|
||||
if (this.currGroup) {
|
||||
this.$post('/chart/table/list', {
|
||||
sort: 'type asc,create_time desc,name asc',
|
||||
sceneId: this.currGroup.id
|
||||
}, response => {
|
||||
this.chartData = response.data;
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
nodeClick(data, 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);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
back() {
|
||||
this.sceneMode = false;
|
||||
this.$router.push('/chart/home');
|
||||
},
|
||||
|
||||
beforeClickAddData(type) {
|
||||
return {
|
||||
'type': type
|
||||
}
|
||||
},
|
||||
|
||||
addDB() {
|
||||
this.$router.push({
|
||||
name: 'add_db',
|
||||
params: {
|
||||
scene: this.currGroup
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
sceneClick(data, node) {
|
||||
// this.$store.commit('setChart', data.id);
|
||||
// this.$router.push({
|
||||
// name: 'ChartGroup',
|
||||
// params: {
|
||||
// table: data
|
||||
// }
|
||||
// });
|
||||
},
|
||||
|
||||
selectTable() {
|
||||
this.selectTableFlag = true;
|
||||
}
|
||||
},
|
||||
}
|
||||
</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;
|
||||
}
|
||||
|
||||
.dialog-css >>> .el-dialog__header {
|
||||
padding: 20px 20px 0;
|
||||
}
|
||||
|
||||
.dialog-css >>> .el-dialog__body {
|
||||
padding: 10px 20px 20px;
|
||||
}
|
||||
</style>
|
||||
18
frontend/src/business/components/chart/router.js
Normal file
18
frontend/src/business/components/chart/router.js
Normal file
@@ -0,0 +1,18 @@
|
||||
const Chart = () => import('@/business/components/chart/Chart');
|
||||
const ChartHome = () => import('@/business/components/chart/data/ChartHome');
|
||||
|
||||
export default {
|
||||
path: "/chart",
|
||||
name: "ChartGroup",
|
||||
redirect: "/chart/home",
|
||||
components: {
|
||||
content: Chart,
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'home',
|
||||
name: 'home',
|
||||
component: ChartHome,
|
||||
}
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user