forked from github/dataease
feat(数据集):数据集 excel、自助数据集，先创建几个界面
This commit is contained in:
junjie
parent
a0ef8e0a4c
commit
0b410f9440
@ -770,7 +770,10 @@ export default {
|
|||||||
current_update_time: '当前更新时间',
|
current_update_time: '当前更新时间',
|
||||||
param: '参数',
|
param: '参数',
|
||||||
edit_sql: '编辑SQL',
|
edit_sql: '编辑SQL',
|
||||||
showRow: '显示行'
|
showRow: '显示行',
|
||||||
|
add_excel_table: '添加Excel数据集',
|
||||||
|
add_custom_table: '添加自助数据集',
|
||||||
|
upload_file: '上传文件'
|
||||||
},
|
},
|
||||||
datasource: {
|
datasource: {
|
||||||
create: '新建数据连接',
|
create: '新建数据连接',
|
||||||
|
|||||||
144
frontend/src/views/dataset/add/AddCustom.vue
Normal file
144
frontend/src/views/dataset/add/AddCustom.vue
Normal file
@ -0,0 +1,144 @@
|
|||||||
|
<template>
|
||||||
|
<el-col>
|
||||||
|
<el-row>
|
||||||
|
<el-row style="height: 26px;">
|
||||||
|
<span style="line-height: 26px;">
|
||||||
|
{{ $t('dataset.add_custom_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-col>
|
||||||
|
123
|
||||||
|
</el-col>
|
||||||
|
<el-col>
|
||||||
|
456
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-row>
|
||||||
|
</el-col>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { post } from '@/api/dataset/dataset'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'AddCustom',
|
||||||
|
props: {
|
||||||
|
param: {
|
||||||
|
type: Object,
|
||||||
|
default: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
searchTable: '',
|
||||||
|
options: [],
|
||||||
|
dataSource: '',
|
||||||
|
tables: [],
|
||||||
|
checkTableList: [],
|
||||||
|
mode: '0',
|
||||||
|
tableData: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
// dataSource(val) {
|
||||||
|
// if (val) {
|
||||||
|
// post('/datasource/getTables', { id: val }).then(response => {
|
||||||
|
// this.tables = response.data
|
||||||
|
// this.tableData = JSON.parse(JSON.stringify(this.tables))
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// searchTable(val) {
|
||||||
|
// if (val && val !== '') {
|
||||||
|
// this.tableData = JSON.parse(JSON.stringify(this.tables.filter(ele => { return ele.includes(val) })))
|
||||||
|
// } else {
|
||||||
|
// this.tableData = JSON.parse(JSON.stringify(this.tables))
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// this.initDataSource()
|
||||||
|
},
|
||||||
|
activated() {
|
||||||
|
// this.initDataSource()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// initDataSource() {
|
||||||
|
// listDatasource().then(response => {
|
||||||
|
// this.options = response.data
|
||||||
|
// })
|
||||||
|
// },
|
||||||
|
|
||||||
|
save() {
|
||||||
|
// console.log(this.checkTableList);
|
||||||
|
// console.log(this.scene);
|
||||||
|
const sceneId = this.param.id
|
||||||
|
const dataSourceId = this.dataSource
|
||||||
|
const tables = []
|
||||||
|
// const mode = this.mode
|
||||||
|
this.checkTableList.forEach(function(name) {
|
||||||
|
tables.push({
|
||||||
|
name: name,
|
||||||
|
sceneId: sceneId,
|
||||||
|
dataSourceId: dataSourceId,
|
||||||
|
type: 'excel',
|
||||||
|
mode: 1
|
||||||
|
})
|
||||||
|
})
|
||||||
|
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.$emit('switchComponent', { name: '' })
|
||||||
|
},
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
span{
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
195
frontend/src/views/dataset/add/AddExcel.vue
Normal file
195
frontend/src/views/dataset/add/AddExcel.vue
Normal file
@ -0,0 +1,195 @@
|
|||||||
|
<template>
|
||||||
|
<el-col>
|
||||||
|
<el-row>
|
||||||
|
<el-row style="height: 26px;">
|
||||||
|
<span style="line-height: 26px;">
|
||||||
|
{{ $t('dataset.add_excel_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">
|
||||||
|
{{ $t('dataset.confirm') }}
|
||||||
|
</el-button>
|
||||||
|
</el-row>
|
||||||
|
</el-row>
|
||||||
|
<el-divider />
|
||||||
|
<el-row>
|
||||||
|
<el-row>
|
||||||
|
<el-col style="width: 500px;">
|
||||||
|
<el-form :model="form" :inline="true" size="mini" class="row-style">
|
||||||
|
<el-form-item>
|
||||||
|
<el-input v-model="form.name" :placeholder="$t('commons.name')" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-upload
|
||||||
|
action="https://jsonplaceholder.typicode.com/posts/"
|
||||||
|
:multiple="false"
|
||||||
|
:show-file-list="false"
|
||||||
|
accept=".xls,.xlsx,.csv"
|
||||||
|
>
|
||||||
|
<el-button size="mini" type="primary">{{ $t('dataset.upload_file') }}</el-button>
|
||||||
|
</el-upload>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<el-row>
|
||||||
|
<el-card class="box-card dataPreview" shadow="never">
|
||||||
|
<div slot="header" class="clearfix">
|
||||||
|
<span>{{ $t('dataset.data_preview') }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="text item">
|
||||||
|
<ux-grid
|
||||||
|
ref="plxTable"
|
||||||
|
size="mini"
|
||||||
|
style="width: 100%;"
|
||||||
|
:height="height"
|
||||||
|
:checkbox-config="{highlight: true}"
|
||||||
|
:width-resize="true"
|
||||||
|
>
|
||||||
|
<ux-table-column
|
||||||
|
v-for="field in fields"
|
||||||
|
:key="field.fieldName"
|
||||||
|
min-width="200px"
|
||||||
|
:field="field.fieldName"
|
||||||
|
:title="field.remarks"
|
||||||
|
:resizable="true"
|
||||||
|
/>
|
||||||
|
</ux-grid>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</el-row>
|
||||||
|
</el-row>
|
||||||
|
</el-col>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { post } from '@/api/dataset/dataset'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'AddExcel',
|
||||||
|
props: {
|
||||||
|
param: {
|
||||||
|
type: Object,
|
||||||
|
default: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
form: {
|
||||||
|
name: ''
|
||||||
|
},
|
||||||
|
fields: [],
|
||||||
|
mode: '1',
|
||||||
|
height: 600
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
// dataSource(val) {
|
||||||
|
// if (val) {
|
||||||
|
// post('/datasource/getTables', { id: val }).then(response => {
|
||||||
|
// this.tables = response.data
|
||||||
|
// this.tableData = JSON.parse(JSON.stringify(this.tables))
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// searchTable(val) {
|
||||||
|
// if (val && val !== '') {
|
||||||
|
// this.tableData = JSON.parse(JSON.stringify(this.tables.filter(ele => { return ele.includes(val) })))
|
||||||
|
// } else {
|
||||||
|
// this.tableData = JSON.parse(JSON.stringify(this.tables))
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// this.initDataSource()
|
||||||
|
},
|
||||||
|
activated() {
|
||||||
|
// this.initDataSource()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// initDataSource() {
|
||||||
|
// listDatasource().then(response => {
|
||||||
|
// this.options = response.data
|
||||||
|
// })
|
||||||
|
// },
|
||||||
|
|
||||||
|
save() {
|
||||||
|
// console.log(this.checkTableList);
|
||||||
|
// console.log(this.scene);
|
||||||
|
const sceneId = this.param.id
|
||||||
|
const dataSourceId = this.dataSource
|
||||||
|
const tables = []
|
||||||
|
const mode = this.mode
|
||||||
|
this.checkTableList.forEach(function(name) {
|
||||||
|
tables.push({
|
||||||
|
name: name,
|
||||||
|
sceneId: sceneId,
|
||||||
|
dataSourceId: dataSourceId,
|
||||||
|
type: 'excel',
|
||||||
|
mode: parseInt(mode)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
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.$emit('switchComponent', { name: '' })
|
||||||
|
},
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
span{
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row-style>>>.el-form-item__label{
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dataPreview>>>.el-card__header{
|
||||||
|
padding: 6px 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dataPreview>>>.el-card__body{
|
||||||
|
padding:10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -536,10 +536,10 @@ export default {
|
|||||||
this.addData('AddSQL')
|
this.addData('AddSQL')
|
||||||
break
|
break
|
||||||
case 'excel':
|
case 'excel':
|
||||||
this.$message(param.type)
|
this.addData('AddExcel')
|
||||||
break
|
break
|
||||||
case 'custom':
|
case 'custom':
|
||||||
this.$message(param.type)
|
this.addData('AddCustom')
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@ -22,10 +22,12 @@ import DataHome from './data/DataHome'
|
|||||||
import ViewTable from './data/ViewTable'
|
import ViewTable from './data/ViewTable'
|
||||||
import AddDB from './add/AddDB'
|
import AddDB from './add/AddDB'
|
||||||
import AddSQL from './add/AddSQL'
|
import AddSQL from './add/AddSQL'
|
||||||
|
import AddExcel from './add/AddExcel'
|
||||||
|
import AddCustom from './add/AddCustom'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'DataSet',
|
name: 'DataSet',
|
||||||
components: { DeMainContainer, DeContainer, DeAsideContainer, Group, DataHome, ViewTable, AddDB, AddSQL },
|
components: { DeMainContainer, DeContainer, DeAsideContainer, Group, DataHome, ViewTable, AddDB, AddSQL, AddExcel, AddCustom },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
component: DataHome,
|
component: DataHome,
|
||||||
@ -46,6 +48,12 @@ export default {
|
|||||||
case 'AddSQL':
|
case 'AddSQL':
|
||||||
this.component = AddSQL
|
this.component = AddSQL
|
||||||
break
|
break
|
||||||
|
case 'AddExcel':
|
||||||
|
this.component = AddExcel
|
||||||
|
break
|
||||||
|
case 'AddCustom':
|
||||||
|
this.component = AddCustom
|
||||||
|
break
|
||||||
default:
|
default:
|
||||||
this.component = DataHome
|
this.component = DataHome
|
||||||
break
|
break
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user