Merge pull request #3216 from dataease/pr@dev_dataset_source

Pr@dev dataset source
This commit is contained in:
王嘉豪 2022-09-27 18:17:36 +08:00 committed by GitHub
commit 10a925b5be
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 481 additions and 281 deletions

View File

@ -0,0 +1,13 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 1.5C7.07786 1.5 5.30656 1.7586 3.98986 2.1975C3.33543 2.41564 2.75172 2.69192 2.31622 3.03514C1.88917 3.37169 1.5 3.86104 1.5 4.5V13.5C1.5 14.139 1.88917 14.6283 2.31622 14.9649C2.75172 15.3081 3.33543 15.5844 3.98986 15.8025C5.30656 16.2414 7.07786 16.5 9 16.5C10.9221 16.5 12.6934 16.2414 14.0101 15.8025C14.6646 15.5844 15.2483 15.3081 15.6838 14.9649C16.1108 14.6283 16.5 14.139 16.5 13.5V4.5C16.5 3.86104 16.1108 3.37169 15.6838 3.03514C15.2483 2.69192 14.6646 2.41564 14.0101 2.1975C12.6934 1.7586 10.9221 1.5 9 1.5ZM15 6.39495C14.6991 6.54883 14.365 6.68421 14.0101 6.8025C12.6934 7.2414 10.9221 7.5 9 7.5C7.07786 7.5 5.30656 7.2414 3.98986 6.8025C3.63499 6.68421 3.30092 6.54883 3 6.39495V9C3 9.00091 3.00012 9.00435 3.00229 9.01147C3.00484 9.01983 3.01112 9.03634 3.02631 9.06107C3.05814 9.11293 3.12306 9.1909 3.24468 9.28674C3.49231 9.4819 3.89712 9.69045 4.4642 9.87948C5.59052 10.2549 7.19422 10.5 9 10.5C10.8058 10.5 12.4095 10.2549 13.5358 9.87948C14.1029 9.69045 14.5077 9.4819 14.7553 9.28674C14.8769 9.1909 14.9419 9.11293 14.9737 9.06107C14.9889 9.03634 14.9952 9.01983 14.9977 9.01147C14.9999 9.00429 15 9.00105 15 9.00017C15 9.0002 15 9.00012 15 9.00017V6.39495ZM15 10.8949C14.6991 11.0488 14.365 11.1842 14.0101 11.3025C12.6934 11.7414 10.9221 12 9 12C7.07786 12 5.30656 11.7414 3.98986 11.3025C3.63499 11.1842 3.30092 11.0488 3 10.8949V13.5C3 13.5007 2.99999 13.5039 3.00229 13.5115C3.00484 13.5198 3.01112 13.5363 3.02631 13.5611C3.05814 13.6129 3.12306 13.6909 3.24468 13.7867C3.49231 13.9819 3.89712 14.1905 4.4642 14.3795C5.59052 14.7549 7.19422 15 9 15C10.8058 15 12.4095 14.7549 13.5358 14.3795C14.1029 14.1905 14.5077 13.9819 14.7553 13.7867C14.8769 13.6909 14.9419 13.6129 14.9737 13.5611C14.9889 13.5363 14.9952 13.5198 14.9977 13.5115C15 13.5039 15 13.5007 15 13.5V10.8949Z" fill="#1F2329"/>
<g clip-path="url(#clip0_3097_94188)">
<path d="M15 19.5832C17.5313 19.5832 19.5834 17.5311 19.5834 14.9998C19.5834 12.4685 17.5313 10.4165 15 10.4165C12.4687 10.4165 10.4167 12.4685 10.4167 14.9998C10.4167 17.5311 12.4687 19.5832 15 19.5832Z" fill="#F54A45"/>
<path d="M14.7916 12.9165C14.6766 12.9165 14.5833 13.0098 14.5833 13.1248V15.6248C14.5833 15.7399 14.6766 15.8332 14.7916 15.8332H15.2083C15.3234 15.8332 15.4166 15.7399 15.4166 15.6248V13.1248C15.4166 13.0098 15.3234 12.9165 15.2083 12.9165H14.7916Z" fill="white"/>
<path d="M14.7916 16.2498C14.6766 16.2498 14.5833 16.3431 14.5833 16.4582V16.8748C14.5833 16.9899 14.6766 17.0832 14.7916 17.0832H15.2083C15.3234 17.0832 15.4166 16.9899 15.4166 16.8748V16.4582C15.4166 16.3431 15.3234 16.2498 15.2083 16.2498H14.7916Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_3097_94188">
<rect width="10" height="10" fill="white" transform="translate(10 10)"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 2.8 KiB

View File

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.0019 1.77734C14.3394 1.77734 14.6183 2.02815 14.6625 2.35355L14.6686 2.44401V13.5614C14.6686 13.8989 14.4177 14.1779 14.0923 14.222L14.0019 14.2281H9.89143C9.73034 14.2281 9.59595 14.1138 9.56486 13.962L9.55809 13.8948V13.2281C9.55809 13.067 9.67235 12.9326 9.82425 12.9015L9.89143 12.8948H13.3352V3.11068H4.40539L4.40628 6.11325C4.40628 6.29735 4.25704 6.44659 4.07294 6.44659H3.40628C3.22218 6.44659 3.07294 6.29735 3.07294 6.11325V2.11068C3.07294 1.94959 3.1872 1.8152 3.3391 1.78412L3.40628 1.77734H14.0019ZM6.64089 7.59282C6.739 7.59282 6.83394 7.6276 6.90884 7.69097L9.70369 10.0559C9.87858 10.2038 9.90039 10.4656 9.7524 10.6405C9.73754 10.658 9.72125 10.6743 9.70369 10.6892L6.90884 13.0541C6.73395 13.202 6.47221 13.1802 6.32422 13.0053C6.26085 12.9304 6.22607 12.8355 6.22607 12.7374L6.22656 11.1164L2.11141 11.1164C1.92731 11.1164 1.77808 10.9672 1.77808 10.7831V10.1164C1.77808 9.93231 1.92731 9.78307 2.11141 9.78307L6.22656 9.78305L6.22607 8.00764C6.22607 7.77854 6.41179 7.59282 6.64089 7.59282Z" fill="#646A73"/>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.35408 11.2487H7.62476L14.3788 4.49447C14.6109 4.26241 14.6114 3.88631 14.3799 3.65363L12.3343 1.59723C12.1018 1.36473 11.7248 1.36473 11.4923 1.59723L11.0724 2.01709L11.0741 2.01875L4.75873 8.38268V10.6534C4.75873 10.9822 5.02528 11.2487 5.35408 11.2487ZM11.8944 2.84338L13.1001 4.0554L12.0798 5.07666L10.8804 3.87724L11.8944 2.84338ZM11.2383 5.91901L7.12259 10.0386H7.12077L5.9688 8.88486L10.0466 4.72734L11.2383 5.91901Z" fill="#646A73"/>
<path d="M8.76322 2.31588H2.44348C2.07815 2.31588 1.78198 2.61204 1.78198 2.97737V13.5614C1.78198 13.9267 2.07815 14.2229 2.44348 14.2229H13.0275C13.3928 14.2229 13.689 13.9267 13.689 13.5614V7.16128L12.3577 8.5006V12.898H3.11322V3.64068H7.46248L8.76322 2.31588Z" fill="#646A73"/>
</svg>

After

Width:  |  Height:  |  Size: 837 B

View File

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.33325 2.66634V1.99967C5.33325 1.63148 5.63173 1.33301 5.99992 1.33301H9.99992C10.3681 1.33301 10.6666 1.63148 10.6666 1.99967V2.66634H14.2393C14.3879 2.66634 14.4417 2.68181 14.4961 2.71086C14.5504 2.73991 14.593 2.78255 14.6221 2.83687C14.6511 2.89119 14.6666 2.94507 14.6666 3.09366V3.57236C14.6666 3.72095 14.6511 3.77483 14.6221 3.82915C14.593 3.88347 14.5504 3.9261 14.4961 3.95515C14.4417 3.9842 14.3879 3.99967 14.2393 3.99967H13.3333V13.9997C13.3333 14.3679 13.0348 14.6663 12.6666 14.6663H3.33325C2.96506 14.6663 2.66659 14.3679 2.66659 13.9997V3.99967H1.76057C1.61198 3.99967 1.5581 3.9842 1.50378 3.95515C1.44946 3.9261 1.40683 3.88347 1.37777 3.82915C1.34872 3.77483 1.33325 3.72095 1.33325 3.57236V3.09366C1.33325 2.94507 1.34872 2.89119 1.37777 2.83687C1.40683 2.78255 1.44946 2.73991 1.50378 2.71086C1.5581 2.68181 1.61198 2.66634 1.76057 2.66634H5.33325ZM3.99992 3.99967V13.333H11.9999V3.99967H3.99992ZM6.33325 5.33301H6.99992C7.18401 5.33301 7.33325 5.48225 7.33325 5.66634V11.6663C7.33325 11.8504 7.18401 11.9997 6.99992 11.9997H6.33325C6.14916 11.9997 5.99992 11.8504 5.99992 11.6663V5.66634C5.99992 5.48225 6.14916 5.33301 6.33325 5.33301ZM8.99992 5.33301H9.66659C9.85068 5.33301 9.99992 5.48225 9.99992 5.66634V11.6663C9.99992 11.8504 9.85068 11.9997 9.66659 11.9997H8.99992C8.81582 11.9997 8.66659 11.8504 8.66659 11.6663V5.66634C8.66659 5.48225 8.81582 5.33301 8.99992 5.33301Z" fill="#646A73"/>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -1405,6 +1405,7 @@ div:focus {
width: 100%;
padding: 24px;
right: 0;
z-index: 1;
bottom: 0;
text-align: right;
background-color: #fff;
@ -1478,7 +1479,8 @@ div:focus {
background: rgba(31, 35, 41, 0.1);
}
i {
.el-icon-more,
.el-icon-plus {
width: 24px;
height: 24px;
line-height: 24px;
@ -1488,12 +1490,14 @@ div:focus {
cursor: pointer;
}
i:hover {
.el-icon-more:hover,
.el-icon-plus:hover {
background: rgba(31, 35, 41, 0.1);
border-radius: 4px;
}
i:active {
.el-icon-more:active,
.el-icon-plus:active {
background: rgba(31, 35, 41, 0.2);
border-radius: 4px;
}

View File

@ -1,5 +1,5 @@
<template>
<div class="dataset-api">
<div class="dataset-api" v-loading="loading">
<p v-show="!showLeft" class="arrow-right" @click="showLeft = true">
<i class="el-icon-d-arrow-right" />
</p>
@ -154,14 +154,19 @@
import { listApiDatasource, post, isKettleRunning } from '@/api/dataset/dataset'
import { dbPreview, engineMode } from '@/api/system/engine'
import cancelMix from './cancelMix'
import msgCfm from '@/components/msgCfm/index'
export default {
name: 'AddApi',
mixins: [cancelMix],
mixins: [cancelMix, msgCfm],
props: {
param: {
type: Object,
default: null
},
nameList: {
type: Array,
default: () => []
}
},
data() {
@ -203,6 +208,10 @@ export default {
}
},
watch: {
checkTableList(val) {
this.validateName()
this.$emit('setTableNum', val.length)
},
dataSource(val) {
if (val) {
this.checkTableList = []
@ -258,14 +267,6 @@ export default {
},
methods: {
nameExsitValidator(activeIndex) {
if (
!this.nameList ||
this.nameList.length === 0 ||
!this.checkDatasetName.includes(this.tableData[activeIndex].datasetName)
) {
this.tableData[activeIndex].nameExsit = false
return
}
this.tableData[activeIndex].nameExsit =
this.nameList
.concat(this.checkDatasetName)
@ -276,6 +277,8 @@ export default {
this.tableData.forEach((ele, index) => {
if (this.checkDatasetName.includes(ele.datasetName)) {
this.nameExsitValidator(index)
} else {
ele.nameExsit = false;
}
})
},
@ -335,7 +338,7 @@ export default {
const tables = []
const mode = this.mode
const syncType = this.syncType
this.checkTableList.forEach(function(name) {
this.checkTableList.forEach((name) => {
const datasetName = this.tableData.find(
(ele) => ele.name === name
).datasetName

View File

@ -215,7 +215,11 @@ export default {
nameList: {
type: Array,
default: () => []
}
},
originName: {
type: String,
default: ''
},
},
data() {
return {
@ -255,6 +259,11 @@ export default {
defaultCheckedKeys: []
}
},
computed: {
nameListCopy() {
return this.nameList.filter((ele) => ele !== this.originName)
}
},
mounted() {
window.onresize = () => {
this.calHeight()
@ -285,8 +294,8 @@ export default {
this.validateName()
const labelList = this.$refs.tree
.getCheckedNodes()
.map((ele) => ele.excelLable)
const excelList = this.excelData.map((ele) => ele.excelLable)
.map((ele) => ele.id)
const excelList = this.excelData.map((ele) => ele.id)
this.$emit(
'setTableNum',
labelList.filter((ele) => !excelList.includes(ele)).length
@ -296,7 +305,7 @@ export default {
this.$set(
ele,
'nameExsit',
this.nameList
this.nameListCopy
.concat(checkList)
.filter((name) => name === ele.datasetName).length > 1
)
@ -379,7 +388,7 @@ export default {
this.sheets = []
this.data = []
const datas = this.data
this.$refs.plxTable.reloadData(datas)
this.$refs.plxTable?.reloadData(datas)
this.fileList = []
this.uploading = false
this.$message({

View File

@ -105,7 +105,7 @@
"
/>
</p>
<p v-if="dataSource">
<p v-if="dataSource" style="margin-top: 16px">
<span>
<svg-icon icon-class="db-de" />
{{ (showTable && dataTable) || selectedDatasource.name }}
@ -527,7 +527,15 @@ export default {
.removeEventListener('mousemove', this.caculateHeight)
},
caculateHeight(e) {
this.sqlHeight = e.pageY - 56
if (e.pageY - 120 < 248) {
this.sqlHeight = 248
return
}
if (e.pageY - 120 > document.documentElement.clientHeight - 170) {
this.sqlHeight = document.documentElement.clientHeight - 170
return
}
this.sqlHeight = e.pageY - 120
},
kettleState() {
isKettleRunning().then((res) => {
@ -551,13 +559,15 @@ export default {
}
}
this.tableLoading = true
post('/datasource/getTables/' + this.dataSource, {}).then((response) => {
this.tableData = response.data
}).finally(() => {
this.tableLoading = false
})
post('/datasource/getTables/' + this.dataSource, {})
.then((response) => {
this.tableData = response.data
})
.finally(() => {
this.tableLoading = false
})
},
calHeight: _.debounce(function() {
calHeight: _.debounce(function () {
const sqlHeight = Math.max(this.sqlHeight, 248)
const currentHeight = document.documentElement.clientHeight
this.height = currentHeight - sqlHeight - 56 - 54 - 36 - 64
@ -712,6 +722,7 @@ export default {
saveVariable() {
this.variables = JSON.parse(JSON.stringify(this.variablesTmp)).concat()
this.showVariableMgm = false
this.openMessageSuccess('参数设置成功')
},
variableTypeChange(row) {
row.defaultValue = ''
@ -847,6 +858,14 @@ export default {
align-items: center;
padding-left: 4px;
&.field {
color: var(--deTextPrimary, #1f2329);
}
&.field:hover {
background: none;
}
&:hover {
background: rgba(31, 35, 41, 0.1);
}

View File

@ -197,6 +197,14 @@ export default {
.removeEventListener('mousemove', this.caculateHeight)
},
caculateHeight(e) {
if (e.pageY - 56 < 298) {
this.unionHeight = 298
return
}
if (e.pageY - 56 > document.documentElement.clientHeight - 100) {
this.unionHeight = document.documentElement.clientHeight - 100
return
}
this.unionHeight = e.pageY - 56
},
save() {

View File

@ -1,6 +1,9 @@
<template>
<div v-if="tabStatus" class="info-tab">
<div v-if="type === 'chart' && detail.chart" class="info-card">
<div class="title-type">
{{ $t('chart.datalist') }}
</div>
<div class="info-item">
<p class="info-title">
{{ $t('chart.datalist') + $t('desearchbutton.text') }}
@ -28,6 +31,9 @@
</div>
<div v-if="detail.table" class="info-card">
<div class="title-type">
{{ $t('dataset.datalist') }}
</div>
<div class="info-item">
<p class="info-title">
{{ $t('dataset.datalist') + $t('desearchbutton.text') }}
@ -51,6 +57,7 @@
<p v-if="detail.table.type === 'union'" class="info-content">
{{ $t('dataset.union_data') }}
</p>
<p v-if="detail.table.type === 'api'" class="info-content">Api</p>
</div>
<div v-show="detail.table.type === 'db'" class="info-item">
<p class="info-title">{{ $t('dataset.table') }}</p>
@ -81,6 +88,9 @@
</div>
<div v-if="detail.datasource" class="info-card">
<div class="title-type">
{{ $t('datasource.datasource') }}
</div>
<div class="info-item">
<p class="info-title">
{{ $t('datasource.datasource') + $t('desearchbutton.text') }}
@ -93,38 +103,8 @@
</div>
<div class="info-item">
<p class="info-title">{{ $t('datasource.type') }}</p>
<p v-if="detail.datasource.type === 'mysql'" class="info-content">
MySQL
</p>
<p v-if="detail.datasource.type === 'sqlServer'" class="info-content">
SQL Server
</p>
<p v-if="detail.datasource.type === 'oracle'" class="info-content">
Oracle
</p>
<p v-if="detail.datasource.type === 'hive'" class="info-content">
Apache Hive
</p>
<p v-if="detail.datasource.type === 'pg'" class="info-content">
PostgreSQL
</p>
<p v-if="detail.datasource.type === 'es'" class="info-content">
Elasticsearch
</p>
<p v-if="detail.datasource.type === 'mariadb'" class="info-content">
MariaDB
</p>
<p v-if="detail.datasource.type === 'ds_doris'" class="info-content">
Doris
</p>
<p v-if="detail.datasource.type === 'ck'" class="info-content">
ClickHouse
</p>
<p v-if="detail.datasource.type === 'redshift'" class="info-content">
AWS Redshift
</p>
<p v-if="detail.datasource.type === 'mongo'" class="info-content">
MongoDB
<p class="info-content">
{{ detail.datasource.type }}
</p>
</div>
<div class="info-item">
@ -222,18 +202,26 @@ export default {
<style lang="scss" scoped>
.info-tab {
padding: 0 4;
width: 100%;
padding: 0 4px;
font-family: PingFang SC;
box-sizing: border-box;
.title-type {
font-size: 14px;
font-weight: 500;
margin-bottom: 8px;
color: var(--deTextPrimary, #1f2329);
}
.info-card {
padding-bottom: 4px;
border-bottom: 1px solid rgba(31, 35, 41, 0.15);
margin-bottom: 12px;
.info-item {
margin: 6px 0;
font-family: PingFang SC;
font-weight: 400;
margin-bottom: 8px;
margin-bottom: 8px !important;
p {
margin: 0;
}
@ -241,7 +229,7 @@ export default {
.info-title {
font-size: 12px;
color: var(--deTextPrimary, #1f2329);
margin-bottom: 4px;
margin-bottom: 4px !important;
}
.info-content {
font-size: 14px;

View File

@ -3,8 +3,8 @@
<el-row style="margin: 6px 0 16px 0">
<el-col :span="12">
<deBtn
type="primary"
icon="el-icon-circle-plus-outline"
secondary
icon="el-icon-plus"
@click="() => addTask()"
>{{ $t('dataset.add_task') }}</deBtn
>
@ -75,13 +75,6 @@
>{{
$t(`dataset.${scope.row.lastExecStatus.toLocaleLowerCase()}`)
}}
<svg-icon
style="cursor: pointer"
v-if="scope.row.lastExecStatus === 'Error'"
@click="showErrorMassage(scope.row.msg)"
icon-class="icon-maybe"
class="field-icon-location"
/>
</span>
<span v-else>-</span>
</template>
@ -242,7 +235,6 @@
<span v-if="scope.row.status === 'Error'" style="color: red">
<el-link
type="danger"
style="font-size: 12px"
@click="showErrorMassage(scope.row.info)"
>{{ $t('dataset.error') }}</el-link
>
@ -264,9 +256,9 @@
</el-row>
</el-drawer>
<el-drawer
:title="$t('dataset.add_task')"
:title="header"
:visible.sync="update_task"
custom-class="update-drawer-task"
custom-class="user-drawer update-drawer-task"
size="680px"
v-closePress
direction="rtl"
@ -277,6 +269,7 @@
:model="taskForm"
label-width="100px"
class="de-form-item"
:disabled="disableForm"
:rules="taskFormRules"
>
<el-form-item :label="$t('dataset.task_name')" prop="name">
@ -444,7 +437,7 @@
</el-form>
<div class="de-foot">
<deBtn secondary @click="closeTask">{{ $t('dataset.cancel') }}</deBtn>
<deBtn type="primary" @click="saveTask(taskForm)">{{
<deBtn v-if="!disableForm" type="primary" @click="saveTask(taskForm)">{{
$t('dataset.confirm')
}}</deBtn>
</div>
@ -506,6 +499,7 @@ export default {
show_error_massage: false,
update_task_dialog_title: '',
error_massage: '',
disableForm: false,
taskForm: {
name: '',
type: 'all_scope',
@ -600,7 +594,14 @@ export default {
computed: {
codemirror() {
return this.$refs.myCm.codemirror
}
},
header() {
return this.disableForm
? "查看任务"
: this.taskForm.id
? "编辑任务"
: this.$t('dataset.add_task');
},
},
watch: {
table: {
@ -705,6 +706,7 @@ export default {
if (!task) {
// add
this.resetTaskForm()
this.disableForm = false
this.taskForm.name =
this.table.name + ' ' + this.$t('dataset.task_update')
this.taskForm.startTime = new Date()
@ -712,7 +714,11 @@ export default {
} else {
// update
this.taskForm = JSON.parse(JSON.stringify(task))
this.taskForm.extraData = JSON.parse(this.taskForm.extraData)
this.taskForm.extraData = JSON.parse(this.taskForm.extraData) || {
simple_cron_type: 'hour',
simple_cron_value: 1
}
this.showCron = this.taskForm.rate === 'CRON'
this.update_task_dialog_title = this.$t('dataset.task_edit_title')
}
this.update_task = true
@ -739,16 +745,15 @@ export default {
handleSizeChange(pageSize) {
this.paginationConfig.currentPage = 1
this.paginationConfig.pageSize = pageSize
this.search()
this.listTask()
},
handleCurrentChange(currentPage) {
this.paginationConfig.currentPage = currentPage
this.search()
this.listTask()
},
initSearch() {
this.handleCurrentChange(1)
},
search() {},
handleCommand(key, row) {
switch (key) {
case 'exec':
@ -776,7 +781,7 @@ export default {
)
.then(() => {
post('/dataset/task/execTask', task).then((response) => {
this.initSearch(true)
this.initSearch()
})
})
.catch(() => {})
@ -814,6 +819,7 @@ export default {
this.handlerConfirm(options)
},
selectDataset(row) {
this.disableForm = this.disableEdit(row);
this.addTask(row)
},
changeTaskStatus(task) {
@ -1023,6 +1029,7 @@ export default {
simple_cron_value: 1
}
}
this.sql = ''
},
showSQL(val) {
this.sql = val || ''
@ -1088,6 +1095,8 @@ export default {
.update-drawer-task {
.el-drawer__body {
padding: 24px;
padding-bottom: 80px;
position: unset;
}
.simple-cron {
display: flex;

View File

@ -5,12 +5,14 @@
<span class="title-text" style="line-height: 26px">
{{ table.name }}
</span>
<span v-if="table.mode === 0" class="de-tag primary">{{
$t('dataset.direct_connect')
}}</span>
<span v-if="table.mode === 1" class="de-tag warning">{{
$t('dataset.sync_data')
}}</span>
<template v-if="['db', 'sql'].includes(param.modelInnerType)">
<span v-if="table.mode === 0" class="de-tag primary">{{
$t('dataset.direct_connect')
}}</span>
<span v-if="table.mode === 1" class="de-tag warning">{{
$t('dataset.sync_data')
}}</span>
</template>
<span
v-if="sycnStatus === 'Underway'"
class="blue-color"
@ -102,9 +104,7 @@
<el-tab-pane
v-if="
table.mode === 1 &&
(table.type === 'db' ||
table.type === 'sql' ||
table.type === 'api')
(table.type === 'db' || table.type === 'sql' || table.type === 'api')
"
:label="$t('dataset.update_info')"
name="updateInfo"

View File

@ -1,6 +1,6 @@
<template>
<div class="de-dataset-form">
<div class="top" v-if="table.id && !createDataset">
<div class="top">
<span class="name">
<i @click="back" class="el-icon-arrow-left"></i>
<svg-icon
@ -35,94 +35,13 @@
<div class="container">
<component
@setTableNum="(val) => (tableNum = val)"
v-if="table.name || !createDataset"
:param="table"
:is="component"
ref="addDataset"
:originName="originName"
:nameList="nameList"
/>
</div>
<el-dialog
:title="dialogTitle"
class="de-dialog-form"
:visible.sync="createDataset"
width="600px"
v-loading="loading"
:before-close="back"
>
<el-form
ref="datasetForm"
class="de-form-item"
:model="datasetForm"
:rules="datasetFormRules"
>
<el-form-item
v-if="datasetFormRules.name"
:label="$t('dataset.name')"
prop="name"
>
<el-input v-model="datasetForm.name" />
</el-form-item>
<el-form-item :label="$t('deDataset.folder')" prop="id">
<el-popover
placement="bottom"
popper-class="user-popper dataset-filed"
width="552"
trigger="click"
>
<el-tree
:data="tData"
ref="tree"
node-key="id"
class="de-tree"
:expand-on-click-node="false"
highlight-current
:filter-node-method="filterNode"
@node-click="nodeClick"
>
<span slot-scope="{ data }" class="custom-tree-node-dataset">
<span v-if="data.type === 'group'">
<svg-icon icon-class="scene" class="ds-icon-scene" />
</span>
<span
style="
margin-left: 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
"
:title="data.name"
>{{ data.name }}</span
>
</span>
</el-tree>
<el-select
v-model="datasetForm.id"
slot="reference"
filterable
popper-class="tree-select-dataset"
style="width: 100%"
:filter-method="filterMethod"
:placeholder="$t('commons.please_select')"
>
<el-option
v-for="item in selectDatasets"
:key="item.label"
:label="item.label"
:value="item.id"
/>
</el-select>
</el-popover>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<deBtn secondary @click="back">{{ $t('dataset.cancel') }}</deBtn>
<deBtn type="primary" @click="saveDataset"
>{{ $t('dataset.confirm') }}
</deBtn>
</div>
</el-dialog>
</div>
</template>
@ -133,13 +52,12 @@ import AddSQL from './add/AddSQL'
import AddExcel from './add/AddExcel'
import AddUnion from '@/views/dataset/add/AddUnion'
import { post } from '@/api/dataset/dataset'
import { groupTree } from '@/api/dataset/dataset'
import { datasetTypeMap } from './group/options'
export default {
name: 'DatasetForm',
components: { AddDB, AddSQL, AddExcel, AddApi, AddUnion },
data() {
return {
sceneId: '',
originName: '',
tableNum: 0,
showInput: false,
@ -147,9 +65,6 @@ export default {
loading: false,
selectDatasets: [],
tData: [],
filterText: '',
dialogTitle: '',
createDataset: false,
datasetType: '',
component: '',
table: {},
@ -158,7 +73,6 @@ export default {
datasetForm: {
id: '',
name: '',
sceneName: ''
},
datasetFormRules: {
name: [
@ -197,15 +111,20 @@ export default {
}
},
created() {
const { datasetType, sceneId, id, editType } = this.$route.query
const fromGroup = this.$route.params.fromGroup
const routeInfo = fromGroup ? this.$route.params : this.$route.query
const { datasetType, sceneId, id, editType, name } = routeInfo
this.datasetType = datasetType
this.editType = editType
this.sceneId = sceneId
if (id) {
this.initTable(id)
} else {
this.tree(sceneId)
this.createDataset = true
const name = name || this.$t('commons.create') + this.$t(datasetTypeMap[datasetType]) + this.$t('auth.datasetAuth')
this.table = {
name,
id: sceneId
}
this.getDatasetNameFromGroup(sceneId, name)
}
this.switchComponent(datasetType)
},
@ -217,10 +136,13 @@ export default {
this.nameExsitValidator()
this.showInput = this.nameExsit
},
getDatasetNameFromGroup(sceneId) {
getDatasetNameFromGroup(sceneId, name) {
post(`/dataset/table/getDatasetNameFromGroup/${sceneId}`, null).then(
(res) => {
this.nameList = res.data
if (name && ['sql', 'union'].includes(this.datasetType)) {
this.nameBlur()
}
}
)
},
@ -238,53 +160,6 @@ export default {
this.showInput = true
}
},
nodeClick({ id, label }) {
this.selectDatasets = [
{
id,
label
}
]
this.$nextTick(() => {
this.datasetForm.id = id
})
this.getDatasetNameFromGroup(id)
},
tree(sceneId) {
this.loading = true
groupTree({
name: '',
pid: '0',
level: 0,
type: 'group',
children: [],
sort: 'type desc,name asc'
}).then((res) => {
this.tData = res.data
if (sceneId) {
this.dfsTree(res.data, sceneId)
}
this.loading = false
})
},
dfsTree(arr, sceneId) {
arr.some((ele) => {
if (sceneId === ele.id) {
this.nodeClick(ele)
} else if (ele.children?.length) {
this.dfsTree(ele.children, sceneId)
}
return false
})
},
filterMethod(val) {
if (!val) this.$refs.tree.filter(val)
this.$refs.tree.filter(val)
},
filterNode(value, data) {
if (!value) return true
return data.name.indexOf(value) !== -1
},
nameRepeat(value) {
if (!this.nameList || this.nameList.length === 0) {
return false
@ -307,19 +182,6 @@ export default {
(name) => name === this.table.name && name !== this.originName
)
},
saveDataset() {
this.$refs.datasetForm.validate((result) => {
if (result) {
const { name, id } = this.datasetForm
this.table = {
id,
name
}
this.createDataset = false
this.getDatasetNameFromGroup(id)
}
})
},
initTable(id) {
post('/dataset/table/getWithPermission/' + id, null)
.then((response) => {
@ -339,36 +201,25 @@ export default {
.catch(() => {})
},
switchComponent(c) {
let type = ''
if (['db', 'excel', 'api'].includes(c)) {
this.$delete(this.datasetFormRules, 'name')
}
switch (c) {
case 'db':
type = 'deDataset.database'
this.component = AddDB
break
case 'sql':
type = 'SQL'
this.component = AddSQL
break
case 'excel':
type = 'EXCEL'
this.component = AddExcel
break
case 'union':
type = 'dataset.union'
this.component = AddUnion
break
case 'api':
type = 'API'
this.component = AddApi
break
default:
break
}
this.dialogTitle =
this.$t('commons.create') + this.$t(type) + this.$t('auth.datasetAuth')
}
}
}

View File

@ -0,0 +1,230 @@
<template>
<el-dialog
:title="dialogTitle"
class="de-dialog-form"
:visible.sync="createDataset"
width="600px"
v-loading="loading"
:before-close="resetForm"
>
<el-form
ref="datasetForm"
class="de-form-item"
:model="datasetForm"
:rules="datasetFormRules"
>
<el-form-item v-if="datasetFormRules.name" :label="$t('dataset.name')" prop="name">
<el-input v-model="datasetForm.name" />
</el-form-item>
<el-form-item :label="$t('deDataset.folder')" prop="id">
<el-popover
placement="bottom"
popper-class="user-popper dataset-filed"
width="552"
trigger="click"
>
<el-tree
:data="tData"
ref="tree"
node-key="id"
class="de-tree"
:expand-on-click-node="false"
highlight-current
:filter-node-method="filterNode"
@node-click="nodeClick"
>
<span slot-scope="{ data }" class="custom-tree-node-dataset">
<span v-if="data.type === 'group'">
<svg-icon icon-class="scene" class="ds-icon-scene" />
</span>
<span
style="
margin-left: 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
"
:title="data.name"
>{{ data.name }}</span
>
</span>
</el-tree>
<el-select
v-model="datasetForm.id"
slot="reference"
filterable
popper-class="tree-select-dataset"
style="width: 100%"
:filter-method="filterMethod"
:placeholder="$t('commons.please_select')"
>
<el-option
v-for="item in selectDatasets"
:key="item.label"
:label="item.label"
:value="item.id"
/>
</el-select>
</el-popover>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<deBtn secondary @click="resetForm">{{ $t('dataset.cancel') }}</deBtn>
<deBtn type="primary" @click="saveDataset"
>{{ $t('dataset.confirm') }}
</deBtn>
</div>
</el-dialog>
</template>
<script>
import { post } from '@/api/dataset/dataset'
import { datasetTypeMap } from './options'
import { groupTree } from '@/api/dataset/dataset'
export default {
data() {
return {
selectDatasets: [],
createDataset: false,
tData: [],
loading: false,
nameList: [],
datasetForm: {
id: '',
name: ''
},
datasetType: '',
dialogTitle: '',
datasetFormRules: {
name: [
{
required: true,
message: this.$t('commons.input_content'),
trigger: 'change'
},
{
max: 50,
message: this.$t('commons.char_can_not_more_50'),
trigger: 'change'
},
{ required: true, trigger: 'blur', validator: this.nameValidator }
],
id: [
{
required: true,
message: this.$t('fu.search_bar.please_select'),
trigger: 'blur'
}
]
}
}
},
methods: {
saveDataset() {
this.$refs.datasetForm.validate((result) => {
if (result) {
const { name, id } = this.datasetForm
this.createDataset = false
this.$router.push({
name: 'dataset-form',
params: {
datasetType: this.datasetType,
sceneId: id,
fromGroup: true,
name
}
})
}
})
},
resetForm() {
this.$refs.datasetForm.clearValidate()
this.datasetForm = {
id: '',
name: ''
}
this.createDataset = false
},
init(type) {
this.tree()
if (['db', 'excel', 'api'].includes(type)) {
this.$delete(this.datasetFormRules, 'name')
}
this.datasetType = type
this.createDataset = true
this.dialogTitle =
this.$t('commons.create') +
this.$t(datasetTypeMap[type]) +
this.$t('auth.datasetAuth')
},
filterNode(value, data) {
if (!value) return true
return data.name.indexOf(value) !== -1
},
filterMethod(val) {
if (!val) this.$refs.tree.filter(val)
this.$refs.tree.filter(val)
},
nameRepeat(value) {
if (!this.nameList || this.nameList.length === 0) {
return false
}
return this.nameList.some((name) => name === value)
},
nameValidator(rule, value, callback) {
if (this.nameRepeat(value)) {
callback(new Error(this.$t('deDataset.already_exists')))
} else {
callback()
}
},
getDatasetNameFromGroup(sceneId) {
post(`/dataset/table/getDatasetNameFromGroup/${sceneId}`, null).then(
(res) => {
this.nameList = res.data
}
)
},
tree() {
this.loading = true
groupTree({
name: '',
pid: '0',
level: 0,
type: 'group',
children: [],
sort: 'type desc,name asc'
})
.then((res) => {
this.tData = res.data
})
.finally(() => {
this.loading = false
})
},
nodeClick({ id, label }) {
this.selectDatasets = [
{
id,
label
}
]
this.$nextTick(() => {
this.datasetForm.id = id
})
this.getDatasetNameFromGroup(id)
}
}
}
</script>
<style lang="scss">
.dataset-filed {
height: 400px;
overflow-y: auto;
}
.tree-select-dataset {
display: none;
}
</style>

View File

@ -167,15 +167,17 @@
</span>
<el-dropdown-menu class="de-card-dropdown" slot="dropdown">
<el-dropdown-item
icon="el-icon-edit-outline"
command="rename"
>
<svg-icon icon-class="de-ds-rename" />
{{ $t('dataset.rename') }}
</el-dropdown-item>
<el-dropdown-item icon="el-icon-right" command="move">
<el-dropdown-item command="move">
<svg-icon icon-class="de-ds-move" />
{{ $t('dataset.move_to') }}
</el-dropdown-item>
<el-dropdown-item icon="el-icon-delete" command="delete">
<el-dropdown-item command="delete">
<svg-icon icon-class="de-ds-trash" />
{{ $t('dataset.delete') }}
</el-dropdown-item>
</el-dropdown-menu>
@ -263,18 +265,19 @@
</span>
<el-dropdown-menu class="de-card-dropdown" slot="dropdown">
<el-dropdown-item
icon="el-icon-edit-outline"
command="editTable"
>
<svg-icon icon-class="de-ds-rename" />
{{ $t('dataset.rename') }}
</el-dropdown-item>
<el-dropdown-item icon="el-icon-right" command="moveDs">
<el-dropdown-item command="moveDs">
<svg-icon icon-class="de-ds-move" />
{{ $t('dataset.move_to') }}
</el-dropdown-item>
<el-dropdown-item
icon="el-icon-delete"
command="deleteTable"
>
<svg-icon icon-class="de-ds-trash" />
{{ $t('dataset.delete') }}
</el-dropdown-item>
</el-dropdown-menu>
@ -297,6 +300,7 @@
class="de-form-item"
:model="groupForm"
:rules="groupFormRules"
:before-close="close"
@submit.native.prevent
@keypress.enter.native="saveGroup(groupForm)"
>
@ -390,6 +394,9 @@
</deBtn>
</div>
</el-drawer>
<!-- 新增数据集文件夹 -->
<CreatDsGroup ref="CreatDsGroup" />
</el-col>
</template>
@ -405,6 +412,7 @@ import {
alter
} from '@/api/dataset/dataset'
import GroupMoveSelector from './GroupMoveSelector'
import CreatDsGroup from './CreatDsGroup'
import { queryAuthModel } from '@/api/authModel/authModel'
import { engineMode } from '@/api/system/engine'
import _ from 'lodash'
@ -412,7 +420,7 @@ import msgCfm from '@/components/msgCfm/index'
export default {
name: 'Group',
components: { GroupMoveSelector },
components: { GroupMoveSelector, CreatDsGroup },
mixins: [msgCfm],
props: {
saveStatus: {
@ -616,7 +624,7 @@ export default {
this.add('group')
return
}
this.dfsTdata(this.tData, param.id)
this.fileList = (param?.children || []).map((ele) => ele.label)
this.add(param.modelInnerType)
this.groupForm.pid = param.id
this.groupForm.level = param.level + 1
@ -831,7 +839,7 @@ export default {
return
}
this.$store.dispatch('dataset/setSceneData', this.currGroup.id)
if (!this.tData.length) {
if (!this.tData?.length) {
this.openMessageSuccess('deDataset.new_folder_first', 'error')
return
}
@ -856,6 +864,11 @@ export default {
break
}
if (!param.id) {
this.$refs.CreatDsGroup.init(datasetType)
return
}
this.$router.push({
path: '/dataset-form',
query: {
@ -863,6 +876,7 @@ export default {
sceneId: param.id
}
})
},
addData(name) {
this.$emit('switchComponent', { name: name, param: this.currGroup })
@ -945,6 +959,7 @@ export default {
this.closeMoveDs()
this.expandedArray.push(newSceneId)
this.treeNode()
this.openMessageSuccess('移动成功')
})
},
targetDs(val) {
@ -1013,7 +1028,7 @@ export default {
<style scoped lang="scss">
.de-fill-block {
margin-left: 35px !important;
margin-left: 25px !important;
}
.custom-tree-container {

View File

@ -0,0 +1,7 @@
export const datasetTypeMap = {
db: 'deDataset.database',
sql: 'SQL',
excel: 'EXCEL',
union: 'dataset.union',
api: 'API',
}

View File

@ -3,7 +3,7 @@
v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
>
<de-aside-container type="dataset">
<group :currentNodeId="param.id" :save-status="saveStatus" @switchComponent="switchComponent" />
<group :currentNodeId="currentNodeId" :save-status="saveStatus" @switchComponent="switchComponent" />
</de-aside-container>
<de-main-container>
<component
@ -45,6 +45,11 @@ export default {
saveStatus: null
}
},
computed: {
currentNodeId() {
return this.param?.id
}
},
mounted() {
removeClass(document.body, 'showRightPanel')
},

View File

@ -1,5 +1,5 @@
<template>
<div class="de-ds-form">
<div class="de-ds-form" v-loading="formLoading">
<div class="de-ds-top">
<span class="name">
<i @click="backToList" class="el-icon-arrow-left"></i>
@ -359,6 +359,7 @@ export default {
{ id: 'POST', label: 'POST' }
],
loading: false,
formLoading: false,
responseData: { type: 'HTTP', responseResult: {}, subRequestResults: [] },
api_table_title: '',
api_step2_active_name: 'first',
@ -695,10 +696,13 @@ export default {
})
},
method(method, form) {
this.formLoading = true
method(form).then((res) => {
this.$success(i18n.t('commons.save_success'))
this.refreshType(form)
this.backToList()
}).finally(() => {
this.formLoading = false
})
},
getSchema() {

View File

@ -125,8 +125,8 @@ export default {
height: 100%;
width: 100%;
overflow: hidden;
flex-wrap: nowrap;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
.el-empty {
height: 100%;
@ -146,6 +146,7 @@ export default {
align-content: center;
}
.is-driver-mgm {
height: calc(100vh - 56px);
background-color: var(--MainBG, #f5f6f7);
padding: 24px;
.ms-aside-container,

View File

@ -40,7 +40,14 @@
<el-col class="custom-tree-container de-tree">
<div class="block">
<div v-if="!tData.length && !treeLoading" class="no-tdata">
{{ showView === 'Driver' ? '暂无驱动' : '暂无数据源' }}
<span @click="() => addFolder()" class="no-tdata-new">{{
$t('deDataset.create')
}}</span>
</div>
<el-tree
v-else
ref="myDsTree"
:default-expanded-keys="expandedArray"
:data="tData"
@ -64,7 +71,7 @@
</span>
<span v-if="data.status === 'Error'">
<svg-icon
icon-class="exclamationmark"
icon-class="de-ds-error"
class="ds-icon-scene"
/>
</span>
@ -282,6 +289,7 @@ export default {
dsTypeRelate: false,
expandedArray: [],
tData: [],
treeLoading: false,
dsTypes: [],
dsTypesForDriver: [],
showSearchInput: false,
@ -365,15 +373,20 @@ export default {
this.showSearchInput = false
},
queryTreeDatas() {
this.treeLoading = true
if (this.showView === 'Datasource') {
listDatasource().then((res) => {
this.tData = this.buildTree(res.data)
})
}).finally(() => {
this.treeLoading = false
})
}
if (this.showView === 'Driver') {
listDrivers().then((res) => {
this.tData = this.buildTree(res.data)
})
}).finally(() => {
this.treeLoading = false
})
}
},
datasourceTypes() {
@ -418,7 +431,7 @@ export default {
}
})
},
buildTree(array) {
buildTree(array = []) {
const types = {}
const newArr = []
for (let index = 0; index < array.length; index++) {
@ -630,6 +643,18 @@ export default {
<style lang="scss" scoped>
.custom-tree-container {
margin-top: 16px;
.no-tdata {
text-align: center;
margin-top: 80px;
font-family: PingFang SC;
font-size: 14px;
color: var(--deTextSecondary, #646a73);
font-weight: 400;
.no-tdata-new {
cursor: pointer;
color: var(--primary, #3370ff);
}
}
}
.custom-tree-node {
flex: 1;

View File

@ -2,7 +2,7 @@
<div class="ds-table de-serach-table">
<el-row class="top-operate">
<el-col :span="10">
<span class="table-name">{{ params.name }}</span>
<span class="table-name-top">{{ params.name }}</span>
</el-col>
<el-col :span="14" class="right-user">
<el-input
@ -46,13 +46,11 @@
</el-table-column>
</el-table>
</div>
<el-drawer
<el-dialog
:title="$t('dataset.detail')"
:visible.sync="userDrawer"
custom-class="user-drawer-task ds-table-drawer"
size="840px"
v-closePress
direction="rtl"
class="de-dialog-form ds-table-drawer"
width="840px"
>
<el-row style="margin-top: 12px" :gutter="24">
<el-col :span="12">
@ -89,7 +87,7 @@
:label="$t('datasource.field_description')">
</el-table-column>
</el-table>
</el-drawer>
</el-dialog>
</div>
</template>
@ -168,7 +166,7 @@ export default {
.mar3 {
margin-left: -5px;
}
.table-name {
.table-name-top {
font-family: PingFang SC;
font-size: 16px;
font-weight: 500;

View File

@ -359,6 +359,7 @@ export default {
res.data.extraData = JSON.parse(res.data.extraData);
}
this.taskForm = res.data;
this.showCron = this.taskForm.rate === 'CRON'
this.disableForm = this.disableEdit();
});
},