更新前端src/views/viewsnew/application/service/datasource目录文件

This commit is contained in:
limengnan 2025-06-24 15:16:08 +08:00
parent 56a68a0602
commit 44956f4609
16 changed files with 2051 additions and 425 deletions

View File

@ -2,10 +2,15 @@
import icon_expandRight_filled from '@/assets/svg/icon_expand-right_filled.svg'
import { ref } from 'vue'
import { propTypes } from '@/utils/propTypes'
import { timestampFormatDate } from '../dataset/form/util'
import { useI18n } from '@/hooks/web/useI18n'
defineProps({
name: propTypes.string.def('')
name: propTypes.string.def(''),
time: propTypes.number.def(0),
showTime: propTypes.bool.def(false)
})
const active = ref(true)
const { t } = useI18n()
defineExpose({
active
})
@ -13,13 +18,15 @@ defineExpose({
<template>
<div :class="[active ? 'active' : 'deactivate', 'base-info-content']">
<div class="title" @click="active = !active">
<!-- <el-icon style="font-size: 10px">
<p class="title" @click="active = !active">
<el-icon style="font-size: 10px">
<Icon name="icon_expand-right_filled"><icon_expandRight_filled class="svg-icon" /></Icon>
</el-icon> -->
<div class="icon-title"></div>
</el-icon>
<span class="name">{{ name }}</span>
</div>
<span v-show="showTime" class="time">
{{ t('data_source.data_time') }}{{ timestampFormatDate(time) }}</span
>
</p>
<slot :active="active"></slot>
</div>
</template>
@ -61,7 +68,12 @@ defineExpose({
line-height: 24px;
margin-left: 8px;
}
.time {
color: #8f959e;
font-size: 14px;
line-height: 22px;
padding: 0 0 0 8px;
}
&.active {
.title {
.ed-icon {

View File

@ -7,10 +7,10 @@ defineProps({
<template>
<div class="base-info-item">
<div class="label">{{ label }}</div>
<div class="value">
<p class="label">{{ label }}</p>
<p class="value ellipsis">
<slot></slot>
</div>
</p>
</div>
</template>

View File

@ -1,7 +1,7 @@
<script lang="ts" setup>
import icon_excel from '@/assets/svg/icon_excel.svg'
import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
const props = withDefaults(
withDefaults(
defineProps<{
name?: string
size?: number

View File

@ -0,0 +1,54 @@
<script lang="ts" setup>
import icon_excel from '@/assets/svg/icon_excel.svg'
withDefaults(
defineProps<{
name?: string
size?: number
showDel?: boolean
}>(),
{
name: '',
size: 0
}
)
</script>
<template>
<div class="excel-info_base">
<el-icon class="excel">
<Icon name="icon_excel"><icon_excel class="svg-icon" /></Icon>
</el-icon>
<p :title="name" class="name ellipsis">{{ name || '-' }}</p>
<p class="size">{{ size || '-' }}</p>
</div>
</template>
<style lang="less" scoped>
.excel-info_base {
display: flex;
align-items: center;
width: 100%;
height: 24px;
padding: 0 0 0 0;
border-radius: 4px;
font-weight: 400;
.excel {
font-size: 24px;
margin-right: 4px;
}
.name {
color: #1f2329;
font-size: 14px;
max-width: calc(100% - 112px);
margin-right: 12px;
line-height: 22px;
}
.size {
color: #8f959e;
font-size: 14px;
line-height: 22px;
}
}
</style>

View File

@ -190,7 +190,17 @@ const initApiItem = (
) => {
pluginDs.value = pluginDsList
pluginIndex.value = indexPlugin
if (!isPluginDs) {
const arr = pluginDs.value.filter(ele => {
return ele.type === from.type
})
if (arr && arr.length > 0) {
isPlugin.value = true
}
} else {
isPlugin.value = isPluginDs
}
copyItem.value = val.copy
copyDs.value = from.copy
dsType.value = from.type
@ -354,6 +364,12 @@ const saveItem = () => {
}
}
returnAPIItem('returnItem', cloneDeep(apiItem))
if (isPlugin.value) {
xpackApiItemBasicInfo?.value?.invokeMethod({
methodName: 'resetForm',
args: []
})
}
edit_api_item.value = false
}
const before = () => {
@ -450,12 +466,14 @@ const validateItem = () => {
}
cancelMap['/datasource/checkApiDatasource']?.()
const params = Base64.encode(JSON.stringify(paramsList))
formLoading.value = true
checkApiItem({
dsType: dsType.value,
data: Base64.encode(JSON.stringify(apiItem)),
paramsList: params
})
.then(response => {
formLoading.value = false
apiItem.jsonFields = response.data.jsonFields
apiItem.fields = []
apiItem.name = response.data.name
@ -464,6 +482,7 @@ const validateItem = () => {
ElMessage.success(t('datasource.validate_success'))
})
.catch(() => {
formLoading.value = false
ElMessage.error(t('data_source.verification_failed'))
})
}
@ -483,6 +502,12 @@ const handleSubmit = param => {
const closeEditItem = () => {
cancelMap['/datasource/checkApiDatasource']?.()
if (isPlugin.value) {
xpackApiItemBasicInfo?.value?.invokeMethod({
methodName: 'resetForm',
args: []
})
}
edit_api_item.value = false
}
@ -645,35 +670,25 @@ defineExpose({
activeName === 'table' ? t('datasource.data_table') : t('data_source.interface_parameters')
"
v-model="edit_api_item"
custom-class="api-datasource-drawer"
modal-class="api-datasource-drawer"
size="1000px"
:before-close="closeEditItem"
direction="rtl"
>
<div class="flex-center">
<el-steps :active="active" align-center>
<div style="display: flex; width: 100%; justify-content: center">
<el-steps custom style="max-width: 400px; flex: 1" :active="active" align-center>
<el-step>
<template #icon>
<div class="step-icon">
<span class="icon">
{{ active <= 0 ? '1' : '' }}
</span>
<span class="title">{{ t('datasource.api_step_1') }}</span>
</div>
<template #title>
{{ t('datasource.api_step_1') }}
</template>
</el-step>
<el-step>
<template #icon>
<div class="step-icon">
<span class="icon">
{{ active <= 1 ? '2' : '' }}
</span>
<span class="title">{{
<template #title>
{{
activeName === 'table'
? t('datasource.api_step_2')
: t('data_source.extract_parameters')
}}</span>
</div>
}}
</template>
</el-step>
</el-steps>
@ -979,7 +994,7 @@ defineExpose({
</el-row>
<template #footer>
<el-button secondary @click="closeEditItem">{{ t('common.cancel') }}</el-button>
<el-button v-show="active === 0" secondary @click="validate"
<el-button v-show="active === 0" :disabled="formLoading" secondary @click="validate"
>{{ t('commons.validate') }}
</el-button>
<el-button type="primary" v-show="active === 0" :disabled="disabledNext" @click="next"
@ -996,10 +1011,11 @@ defineExpose({
<style lang="less">
.api-datasource-drawer {
.select-type {
.ed-select__prefix--light {
border-right: none;
padding: 0;
.ed-select__prefix {
font-size: 16px;
&::after {
display: none;
}
}
}
.ed-drawer__body {

View File

@ -246,12 +246,4 @@ const emits = defineEmits(['changeId'])
margin-right: 45px;
}
}
:deep(.ed-tabs__nav-wrap::after){
background: #5f5f5f !important;
}
</style>
<style>
.ed-drawer__close-btn:hover{
background: #5f5f5f;
}
</style>

View File

@ -3,7 +3,7 @@ import icon_drag_outlined from '@/assets/svg/icon_drag_outlined.svg'
import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
import { propTypes } from '@/utils/propTypes'
import { computed, onBeforeMount, PropType, toRefs, inject, ref } from 'vue'
import { computed, onBeforeMount, PropType, toRefs, inject } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { KeyValue } from './ApiTestModel.js'
import draggable from 'vuedraggable'
@ -285,86 +285,4 @@ const timeFunLists = [
margin-bottom: 0 !important;
}
}
:deep(.ed-input .ed-input__count .ed-input__count-inner){
background: transparent;
}
:deep(.ed-select__popper.ed-popper) {
background: rgb(61, 61, 61) !important;
border: 1px solid var(--ed-border-color-light);
box-shadow: var(--ed-box-shadow-light);
}
</style>
<style>
.ed-select__popper.ed-popper{
background: rgb(41, 41, 41) !important;
border: 1px solid #5f5f5f;
color: #fff;
box-shadow: var(--ed-box-shadow-light);
}
.ed-select-dropdown__item{
color: #fff;
}
.ed-dropdown-menu__item{
color: #fff;
}
.ed-select-dropdown__item.hover, .ed-select-dropdown__item:hover{
background: rgb(61, 61, 61);
}
.ed-input-group__append, .ed-input-group__prepend{
background-color:rgba(37, 38, 38, 1);
}
.ed-input-group__append{
box-shadow: 0 0 0 1px #636363;
}
.ed-input-group__append .ed-button{
background-color: rgba(37, 38, 38, 1) !important;
border: 1px solid rgba(37, 38, 38, 1) !important;
}
.api-datasource-drawer .input-with-select .ed-input-group__append{
background-color: rgba(37, 38, 38, 1) !important;
}
.api-datasource-drawer .table-container{
border: 1px solid #5f5f5f !important;
}
.ed-autocomplete__popper.ed-popper{
background: rgb(41, 41, 41);
border: 1px solid #5f5f5f;
box-shadow: none;
}
.ed-autocomplete-suggestion li{
color: #fff;
}
.ed-scrollbar__thumb{
background-color: rgba(30,30,30, 1) !important;
}
.ed-autocomplete-suggestion li:hover{
background: rgb(61, 61, 61);
}
.ed-popper.is-light .ed-popper__arrow::before {
border: 1px solid #5f5f5f;
background: rgb(41, 41, 41);
right: 0;
}
.ace-chrome .ace_gutter-active-line {
background-color: #595959;
}
.ace-chrome .ace_gutter {
background: #717171;
color: #fff;
overflow: hidden;
}
.ace-chrome {
background-color: #2e2e2e;
color: #fff;
}
.ace-chrome .ace_marker-layer .ace_active-line {
background: #717171;
}
.api-body-code {
border: 1px solid #5f5f5f !important;
}
.el-loading-mask{
background-color: rgba(33,33,33, 0.9) !important;
}
</style>

View File

@ -342,7 +342,4 @@ const timeFunLists = [
font-size: 13px;
}
}
:deep(.ed-input .ed-input__count .ed-input__count-inner){
background: transparent;
}
</style>

View File

@ -298,7 +298,7 @@ const saveDataset = () => {
request.appId = appId.value
checkRepeat(request).then(res => {
let method = request.id === '' ? save : update
if (!request.type.startsWith('API')) {
if (!request.type.startsWith('API') && request.type !== 'ExcelRemote') {
request.syncSetting = null
}
if (res) {
@ -371,7 +371,7 @@ const emits = defineEmits(['finish', 'handleShowFinishPage'])
<el-form-item v-if="showName" :label="labelName" prop="name">
<el-input :placeholder="placeholder" v-model="datasetForm.name" />
</el-form-item>
<!-- <el-form-item v-if="showPid" :label="t('deDataset.folder')" prop="pid">
<el-form-item v-if="showPid" :label="t('deDataset.folder')" prop="pid">
<el-tree-select
v-model="datasetForm.pid"
:data="state.tData"
@ -427,7 +427,7 @@ const emits = defineEmits(['finish', 'handleShowFinishPage'])
<span>{{ t('data_source.relevant_content_found') }}</span>
</div>
</div>
</div> -->
</div>
</el-form>
<template #footer>
<el-button secondary @click="resetForm">{{ t('dataset.cancel') }} </el-button>

View File

@ -9,7 +9,7 @@ import deDelete from '@/assets/svg/de-delete.svg'
import icon_warning_filled from '@/assets/svg/icon_warning_filled.svg'
import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
import { ref, reactive, h, computed, toRefs, nextTick, watch } from 'vue'
import { ref, reactive, computed, toRefs, nextTick, watch } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import type { FormInstance, FormRules } from 'element-plus-secondary'
import EmptyBackground from '@/components/empty-background/src/EmptyBackground.vue'
@ -24,7 +24,7 @@ import { CustomPassword } from '@/components/custom-password'
import { ElForm, ElMessage, ElMessageBox } from 'element-plus-secondary'
import Cron from '@/components/cron/src/Cron.vue'
import { ComponentPublicInstance } from 'vue'
import { PluginComponent, XpackComponent } from '@/components/plugin'
import { XpackComponent } from '@/components/plugin'
import { iconFieldMap } from '@/components/icon-group/field-list'
import { boolean } from 'mathjs'
const { t } = useI18n()
@ -82,6 +82,9 @@ const state = reactive({
})
const schemas = ref([])
const targetCharset = ref(['GBK', 'UTF-8'])
const charset = ref(['GBK', 'BIG5', 'ISO-8859-1', 'UTF-8', 'UTF-16', 'CP850', 'EUC_JP', 'EUC_KR'])
const loading = ref(false)
const dsForm = ref<FormInstance>()
@ -106,8 +109,6 @@ const defaultRule = {
const rule = ref<FormRules>(cloneDeep(defaultRule))
const api_table_title = ref('')
const editApiItem = ref()
const xpack = ref()
const visible = ref(false)
const defaultApiItem = {
name: '',
deTableName: '',
@ -446,35 +447,6 @@ const addApiItem = item => {
})
}
const addLarkItem = item => {
let apiItem = null
let editItem = false
api_table_title.value = t('datasource.data_table')
if (item) {
apiItem = cloneDeep(item)
editItem = true
} else {
apiItem = cloneDeep(defaultApiItem)
apiItem.type = activeName.value
let serialNumber1 =
form.value.apiConfiguration.length > 0
? form.value.apiConfiguration[form.value.apiConfiguration.length - 1].serialNumber + 1
: 0
let serialNumber2 =
form.value.paramsConfiguration && form.value.paramsConfiguration.length > 0
? form.value.paramsConfiguration[form.value.paramsConfiguration.length - 1].serialNumber + 1
: 0
apiItem.serialNumber = serialNumber1 + serialNumber2
}
visible.value = true
nextTick(() => {
xpack?.value?.invokeMethod({
methodName: 'initApiItem',
args: [apiItem, form.value, activeName.value, editItem, isSupportSetKey.value]
})
})
}
const activeName = ref('table')
const showPriority = ref(false)
const showSSH = ref(false)
@ -656,7 +628,6 @@ const apiRule = {
}
const dialogEditParams = ref(false)
const dialogRenameApi = ref(false)
const dialogAddLarkItem = ref(false)
const activeParamsName = ref('')
const activeParamsID = ref(0)
const paramsObj = ref({
@ -773,21 +744,6 @@ const handleApiParams = (cmd: string, data) => {
}
}
const editParams = data => {
dialogEditParams.value = true
}
const getPluginStatic = () => {
const arr = pluginDs.value.filter(ele => {
return ele.type === form.value.type
})
return pluginIndex.value
? pluginIndex.value
: arr && arr.length > 0
? arr[0].staticMap?.index
: null
}
const delParams = data => {
ElMessageBox.confirm(t('data_source.sure_to_delete'), {
confirmButtonType: 'danger',
@ -848,7 +804,7 @@ defineExpose({
v-loading="loading"
>
<el-form-item
:label="t('auth.datasource') + ' ' + t('chart.name')"
:label="t('data_source.data_source_name')"
prop="name"
v-show="activeStep !== 2"
>
@ -881,7 +837,9 @@ defineExpose({
</el-tabs>
<el-button type="primary" style="margin-left: auto" @click="() => addApiItem(null)">
<template #icon>
<Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
<Icon name="icon_add_outlined">
<icon_add_outlined class="svg-icon" />
</Icon>
</template>
{{ t('common.add') }}
</el-button>
@ -914,7 +872,9 @@ defineExpose({
</el-col>
<el-col style="text-align: right" :span="5">
<el-icon class="de-copy-icon hover-icon" @click.stop="copyItem(api)">
<Icon name="de-copy"><deCopy class="svg-icon" /></Icon>
<Icon name="de-copy">
<deCopy class="svg-icon" />
</Icon>
</el-icon>
<span @click.stop>
@ -1012,13 +972,13 @@ defineExpose({
<template #default="scope">
<div class="flex-align-center icon">
<el-icon>
<Icon
><component
<Icon>
<component
class="svg-icon"
:class="`field-icon-${fieldType[scope.row.deType]}`"
:is="iconFieldMap[fieldType[scope.row.deType]]"
></component
></Icon>
></component>
</Icon>
</el-icon>
{{ fieldTypeText[scope.row.deType] }}
</div>
@ -1029,9 +989,9 @@ defineExpose({
<template #default="scope">
<el-button text @click.stop="delParams(scope.row)">
<template #icon>
<Icon name="icon_delete-trash_outlined"
><icon_deleteTrash_outlined class="svg-icon"
/></Icon>
<Icon name="icon_delete-trash_outlined">
<icon_deleteTrash_outlined class="svg-icon" />
</Icon>
</template>
</el-button>
</template>
@ -1193,7 +1153,9 @@ defineExpose({
<span class="name">{{ t('datasource.schema') }}<i class="required" /></span>
<el-button text size="small" @click="getDsSchema()">
<template #icon>
<Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
<Icon name="icon_add_outlined">
<icon_add_outlined class="svg-icon" />
</Icon>
</template>
{{ t('datasource.get_schema') }}
</el-button>
@ -1208,6 +1170,26 @@ defineExpose({
@blur="validatorSchema"
/>
</el-form-item>
<el-form-item v-if="form.type == 'oracle'" :label="$t('datasource.charset')">
<el-select
v-model="form.configuration.charset"
filterable
:placeholder="$t('datasource.please_choose_charset')"
class="de-select"
>
<el-option v-for="item in charset" :key="item" :label="item" :value="item" />
</el-select>
</el-form-item>
<el-form-item v-if="form.type == 'oracle'" :label="$t('datasource.targetCharset')">
<el-select
v-model="form.configuration.targetCharset"
filterable
:placeholder="$t('datasource.please_choose_targetCharset')"
class="de-select"
>
<el-option v-for="item in targetCharset" :key="item" :label="item" :value="item" />
</el-select>
</el-form-item>
<el-form-item
:label="t('datasource.extra_params')"
v-if="form.configuration.urlType !== 'jdbcUrl' && form.type !== 'es'"
@ -1236,9 +1218,9 @@ defineExpose({
</el-form-item>
<template v-if="showSSH">
<el-form-item>
<el-checkbox v-model="form.configuration.useSSH">{{
t('data_source.enable_ssh')
}}</el-checkbox>
<el-checkbox v-model="form.configuration.useSSH"
>{{ t('data_source.enable_ssh') }}
</el-checkbox>
</el-form-item>
<el-form-item :label="t('data_source.host')" prop="configuration.sshHost">
<el-input
@ -1468,7 +1450,7 @@ defineExpose({
<el-form-item v-if="form.syncSetting.syncRate === 'CRON'" prop="syncSetting.cron">
<el-popover :width="834" v-model="cronEdit" trigger="click">
<template #default>
<div style="width: 814px; height: 400px; overflow-y: auto">
<div style="width: 814px; height: 450px; overflow-y: auto">
<cron
v-if="showCron"
v-model="form.syncSetting.cron"
@ -1580,6 +1562,7 @@ defineExpose({
width: 100%;
display: flex;
justify-content: center;
.ed-radio {
height: 22px;
}
@ -1598,6 +1581,7 @@ defineExpose({
.de-select {
width: 100%;
}
.ed-input-number {
width: 100%;
}
@ -1625,16 +1609,20 @@ defineExpose({
.ed-input__wrapper {
width: 100%;
}
width: 100%;
}
.simple-cron {
height: 32px;
.ed-select,
.ed-input-number {
width: 140px;
margin: 0 8px;
}
}
.detail-inner {
width: 800px;
padding-top: 8px;
@ -1655,6 +1643,7 @@ defineExpose({
border: 1px solid #5f5f5f;
width: 300px;
padding: 16px;
.name-copy {
display: none;
line-height: 24px;
@ -1682,6 +1671,7 @@ defineExpose({
.table-info-mr {
margin: 28px 0 12px 0;
.api-tabs {
:deep(.ed-tabs__nav-wrap::after) {
display: none;
@ -1718,6 +1708,7 @@ defineExpose({
font-size: 14px;
font-style: normal;
line-height: 22px;
&::before {
width: 8px;
height: 8px;
@ -1758,6 +1749,7 @@ defineExpose({
flex-wrap: wrap;
margin-left: -16px;
}
.api-card {
height: 120px;
width: 392px;
@ -1772,20 +1764,24 @@ defineExpose({
&:hover {
border-color: var(--ed-color-primary);
}
.name {
font-size: 16px;
font-weight: 500;
margin-right: 8px;
max-width: 70%;
}
.req-title,
.req-value {
display: flex;
font-size: 14px;
font-weight: 400;
:nth-child(1) {
width: 120px;
}
:nth-child(2) {
margin-left: 24px;
max-width: 230px;
@ -1794,20 +1790,25 @@ defineExpose({
white-space: nowrap;
}
}
.req-title {
color: var(--deTextSecondary, #646a73);
margin: 16px 0 4px 0;
}
.req-value {
color: var(--deTextPrimary, #1f2329);
}
.de-copy-icon {
margin-right: 16px;
color: var(--deTextSecondary, #646a73);
}
.de-delete-icon {
cursor: pointer;
}
.de-tag {
display: inline-flex;
justify-content: center;
@ -1835,6 +1836,7 @@ defineExpose({
padding: 20px 24px !important;
display: flex;
flex-wrap: wrap;
.small {
height: 28px;
min-width: 48px !important;
@ -1852,11 +1854,13 @@ defineExpose({
margin-left: 8.67px;
color: var(--deTextPrimary, #1f2329);
}
i {
font-size: 14.666666030883789px;
color: var(--deWarning, #ff8800);
line-height: 22px;
}
.foot {
text-align: right;
width: 100%;
@ -1869,9 +1873,11 @@ defineExpose({
display: flex !important;
justify-content: space-between;
padding-right: 0;
&::after {
display: none;
}
.name {
.required::after {
content: '*';

View File

@ -1,6 +1,5 @@
<script lang="tsx" setup>
import icon_upload_outlined from '@/assets/svg/icon_upload_outlined.svg'
import icon_refresh_outlined from '@/assets/svg/icon_refresh_outlined.svg'
import { Icon } from '@/components/icon-custom'
import { ElIcon } from 'element-plus-secondary'
import { useI18n } from '@/hooks/web/useI18n'
@ -15,6 +14,7 @@ import {
onBeforeUnmount,
nextTick
} from 'vue'
import { fieldType as fieldTypeLowercase } from '@/utils/attr'
import { ElMessage, ElMessageBox } from 'element-plus-secondary'
import { save, update } from '@/api/datasource'
import type { Action } from 'element-plus-secondary'
@ -41,6 +41,7 @@ export interface Param {
creator?: string
isPlugin?: boolean
staticMap?: any
configuration?: {}
}
export interface Field {
@ -49,6 +50,10 @@ export interface Field {
fieldSize: number
fieldType: string
name: string
deExtractType: number
checked: boolean
primaryKey: boolean
length: number
}
const props = defineProps({
param: {
@ -121,10 +126,17 @@ const fieldType = {
DOUBLE: 'value'
}
const fieldTypeToStr = {
0: 'TEXT',
2: 'LONG',
3: 'DOUBLE'
}
const generateColumns = (arr: Field[]) =>
arr.map(ele => ({
key: ele.originName,
fieldType: ele.fieldType,
deExtractType: ele.deExtractType,
dataKey: ele.originName,
title: ele.name,
checked: ele.checked,
@ -324,63 +336,15 @@ const saveExcelData = (sheetFileMd5, table, params, successCb, finallyCb) => {
}
table.configuration = Base64.encode(JSON.stringify(table.sheets))
let method = save
debugger
if (!table.id || table.id === '0') {
delete table.id
table.pid = params.pid
} else {
method = update
}
if (new Set(sheetFileMd5).size !== sheetFileMd5.length && !props.param.id) {
ElMessageBox.confirm(t('dataset.merge_title'), {
confirmButtonText: t('dataset.merge'),
tip: t('dataset.task.excel_replace_msg'),
cancelButtonText: t('dataset.no_merge'),
confirmButtonType: 'primary',
type: 'warning',
autofocus: false,
callback: (action: Action) => {
if (action === 'close') return
loading.value = true
table.mergeSheet = action === 'confirm'
table.appId = appId.value
if (action === 'confirm') {
method(table)
.then(res => {
emitter.emit('showFinishPage', res)
successCb?.()
ElMessage({
message: t('commons.save_success'),
type: 'success'
})
})
.finally(() => {
finallyCb?.()
loading.value = false
})
}
if (action === 'cancel') {
method(table)
.then(res => {
emitter.emit('showFinishPage', res)
successCb?.()
ElMessage({
message: t('commons.save_success'),
type: 'success'
})
})
.finally(() => {
finallyCb?.()
loading.value = false
})
}
}
})
} else {
if (loading.value) return
loading.value = true
table.appId = appId.value
method(table)
.then(res => {
emitter.emit('showFinishPage', res)
@ -395,7 +359,6 @@ const saveExcelData = (sheetFileMd5, table, params, successCb, finallyCb) => {
loading.value = false
})
}
}
const onChange = file => {
state.fileList = file
@ -463,8 +426,17 @@ const appendReplaceExcel = response => {
const status = ref(false)
const initMultipleTable = ref(false)
const currentMode = ref('preview')
const refreshData = () => {
currentMode.value = 'preview'
const deExtractTypeChange = item => {
item.deType = item.deExtractType
const sheet = state.excelData[0]?.sheets.find(ele => ele.sheetId === activeTab.value)
sheet.fields.forEach(row => {
if (row.originName === item.dataKey) {
row.deExtractType = item.deExtractType
row.deType = item.deExtractType
row.fieldType = fieldTypeToStr[item.deExtractType]
}
})
}
const lengthChange = val => {
@ -484,6 +456,15 @@ const primaryKeyChange = val => {
})
}
const fieldOptions = [
{ label: t('dataset.text'), value: 0 },
{ label: t('dataset.value'), value: 2 },
{
label: t('dataset.value') + '(' + t('dataset.float') + ')',
value: 3
}
]
const handleSelectionChange = val => {
if (!initMultipleTable.value) {
multipleSelection.value = val
@ -525,7 +506,7 @@ const disabledFieldLength = item => {
if (!item.checked) {
return true
}
if (item.fieldType !== 'TEXT') {
if (item.deExtractType !== 0) {
return true
}
}
@ -542,6 +523,9 @@ const changeCurrentMode = val => {
}
initMultipleTable.value = false
})
} else {
const sheet = state.excelData[0]?.sheets.find(ele => ele.sheetId === activeTab.value)
handleNodeClick(sheet)
}
}
@ -646,14 +630,31 @@ defineExpose({
:rules="[
{
required: true,
message: t('common.please_input') + t('datasource.datasource') + t('common.name')
message:
t('common.please_input') +
t('common.empty') +
t('datasource.datasource') +
t('common.empty') +
t('common.name')
}
]"
:label="t('visualization.custom') + t('datasource.datasource') + t('common.name')"
:label="
t('visualization.custom') +
t('common.empty') +
t('datasource.datasource') +
t('common.empty') +
t('common.name')
"
>
<el-input
v-model="param.name"
:placeholder="t('common.please_input') + t('datasource.datasource') + t('common.name')"
:placeholder="
t('common.please_input') +
t('common.empty') +
t('datasource.datasource') +
t('common.empty') +
t('common.name')
"
/>
</el-form-item>
</el-form>
@ -714,20 +715,48 @@ defineExpose({
<el-table-column :label="t('data_set.field_name')">
<template #default="scope">{{ scope.row.title }}</template>
</el-table-column>
<el-table-column :label="t('data_set.field_type')">
<template #default="scope">
<div class="flex-align-center">
<el-icon>
<Icon>
<component
:class="`svg-icon field-icon-${fieldType[scope.row.fieldType]}`"
:is="iconFieldMap[fieldType[scope.row.fieldType]]"
></component>
</Icon>
</el-icon>
{{ t(`dataset.${fieldType[scope.row.fieldType]}`) }}
</div>
<el-table-column prop="deExtractType" :label="t('datasource.field_type')">
<template #default="scope">
<el-select
v-model="scope.row.deExtractType"
class="select-type"
style="display: inline-block; width: 120px"
@change="deExtractTypeChange(scope.row)"
>
<template #prefix>
<el-icon>
<Icon :className="`field-icon-${fieldTypeLowercase[scope.row.deExtractType]}`"
><component
class="svg-icon"
:class="`field-icon-${fieldTypeLowercase[scope.row.deExtractType]}`"
:is="iconFieldMap[fieldTypeLowercase[scope.row.deExtractType]]"
></component
></Icon>
</el-icon>
</template>
<el-option
v-for="item in fieldOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
<span style="float: left">
<el-icon>
<Icon :className="`field-icon-${fieldTypeLowercase[item.value]}`"
><component
class="svg-icon"
:class="`field-icon-${fieldTypeLowercase[item.value]}`"
:is="iconFieldMap[fieldTypeLowercase[item.value]]"
></component
></Icon>
</el-icon>
</span>
<span style="float: left; font-size: 12px; color: #8492a6">{{
item.label
}}</span>
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column

View File

@ -171,10 +171,9 @@ const handleNumberSizeChange = () => {
<template #default="scope">
<el-input
v-model="scope.row.resolutionPath"
style="width: 100%;"
style="width: 100%"
:placeholder="t('api_pagination.please_enter_jsonpath')"
>
<template #prepend>
><template #prepend>
<el-select
class="bg-white"
v-model="scope.row.resolutionPathType"
@ -186,8 +185,7 @@ const handleNumberSizeChange = () => {
:label="item.label"
:value="item.value"
/>
</el-select>
</template
</el-select> </template
></el-input>
</template>
</el-table-column>
@ -198,12 +196,10 @@ const handleNumberSizeChange = () => {
<style lang="less" scoped>
.api-pagination {
margin-bottom: 16px;
.type {
font-size: 14px;
font-weight: 400;
line-height: 22px;
color: #fff;
}
.table-title {

View File

@ -9,12 +9,20 @@ import DsTypeList from './DsTypeList.vue'
import { useI18n } from '@/hooks/web/useI18n'
import EditorDetail from './EditorDetail.vue'
import ExcelDetail from './ExcelDetail.vue'
import { save, update, validate, latestUse, isShowFinishPage, checkRepeat } from '@/api/datasource'
import {
save,
update,
validate,
latestUse,
isShowFinishPage,
checkRepeat,
loadRemoteFile
} from '@/api/datasource'
import { Base64 } from 'js-base64'
import type { Param } from './ExcelDetail.vue'
import type { Configuration, ApiConfiguration, SyncSetting } from './option'
import { dsTypes, typeList, nameMap } from './option'
import { useRouter,useRoute } from 'vue-router'
import { useRouter } from 'vue-router'
import { uuid } from 'vue-uuid'
import { useEmitt } from '@/hooks/web/useEmitt'
import FinishPage from '../FinishPage.vue'
@ -57,17 +65,14 @@ interface Form {
staticMap?: any
}
const { t } = useI18n()
const creatDsFolder = ref()
const router = useRouter()
const { wsCache } = useCache()
const dsLoading = ref(false)
let isFormUpdate = false
let isForm2Update = false
let isUpdate = false
const changeUpdate = val => {
isUpdate = val
}
@ -85,6 +90,7 @@ const activeStep = ref(0)
const detail = ref()
const xpack = ref()
const excel = ref()
const excelRemote = ref()
const latestUseTypes = ref([])
const currentType = ref<DsType>('OLTP')
const filterText = ref('')
@ -97,20 +103,13 @@ const selectDsType = (type: string) => {
currentDsType.value = type
activeStep.value = 1
activeApiStep.value = 1
currentTypeList.value
.map(ele => ele.dbList)
.flat()
.some(ele => {
if (ele.type === currentDsType.value) {
isPlugin.value = ele['isPlugin']
}
})
nextTick(() => {
detail?.value?.initForm(type, pluginDs.value, pluginIndex.value, isPlugin.value) ||
xpack?.value?.invokeMethod({
methodName: 'initForm',
args: type
})
excelRemote?.value?.initForm(type)
if (!dsTree.value) return
currentTypeList.value
.map(ele => ele.dbList)
@ -216,7 +215,11 @@ const activeApiStep = ref(0)
const setNextStep = () => {
activeApiStep.value = activeStep.value + 1
if (currentDsType.value.includes('API') && activeStep.value === 1) return
if (
(currentDsType.value.includes('API') || currentDsType.value === 'ExcelRemote') &&
activeStep.value === 1
)
return
activeStep.value = activeStep.value + 1
}
@ -235,6 +238,14 @@ const next = () => {
return
}
if (currentDsType.value.includes('ExcelRemote') && activeStep.value !== 2) {
const validate = excelRemote.value.validateExcel()
if (validate) {
setNextStep()
}
return
}
if (currentDsType.value.includes('API') && activeStep.value !== 2) {
const validateFrom = detail.value.submitForm()
validateFrom(val => {
@ -249,7 +260,15 @@ const next = () => {
}
const complete = (params, successCb, finallyCb) => {
excel.value.saveExcelDs(
excel?.value?.saveExcelDs(
params,
() => {
pid.value = params.pid
successCb()
},
finallyCb
)
excelRemote?.value?.saveExcelDs(
params,
() => {
pid.value = params.pid
@ -305,25 +324,14 @@ const handleShowFinishPage = ({ id, name, pid }) => {
emitter.on('showFinishPage', handleShowFinishPage)
const prev = () => {
if (
(currentDsType.value.includes('API') && activeApiStep.value === 1) ||
activeStep.value === 1
) {
ElMessageBox.confirm(t('data_source.the_previous_step'), {
confirmButtonType: 'primary',
type: 'warning',
autofocus: false,
showClose: false
}).then(() => {
prevConfirm()
})
} else {
prevConfirm()
}
}
const prevConfirm = () => {
if (currentDsType.value.includes('API') && activeApiStep.value === 2) {
if (
(currentDsType.value.includes('API') || currentDsType.value === 'ExcelRemote') &&
activeApiStep.value === 2
) {
activeApiStep.value = 1
activeStep.value = 1
return
@ -382,7 +390,10 @@ const validateDS = () => {
args: [{ eventName: 'validateDs', args: request }]
})
} else {
const validateFrom = detail?.value?.submitForm()
let validateFrom = detail?.value?.submitForm()
if (excelRemote?.value?.submitForm()) {
validateFrom = excelRemote?.value?.submitForm()
}
validateFrom(val => {
if (val) {
doValidateDs(request)
@ -393,9 +404,34 @@ const validateDS = () => {
const doValidateDs = request => {
dsLoading.value = true
if (currentDsType.value === 'ExcelRemote') {
let excelRequest = JSON.parse(JSON.stringify(form2.configuration))
excelRequest.datasourceId = form2.id || 0
excelRequest.editType = form2.editType
excelRequest.userName = Base64.encode(excelRequest.userName)
excelRequest.passwd = Base64.encode(excelRequest.passwd)
return loadRemoteFile(excelRequest)
.then(res => {
dsLoading.value = false
if (!res) {
ElMessage.warning(res.msg)
return
}
if (res?.code !== 0) {
ElMessage.warning(res.msg)
return
}
ElMessage.success(t('datasource.validate_success'))
dsLoading.value = false
})
.catch(() => {
ElMessage.error(t('data_source.verification_failed'))
dsLoading.value = false
})
}
validate(request)
.then(res => {
if (res.data.type === 'API') {
if (res.data.type.includes('API')) {
let error = 0
const status = JSON.parse(res.data.status) as Array<{ status: string; name: string }>
for (let i = 0; i < status.length; i++) {
@ -448,13 +484,13 @@ const saveDS = () => {
configuration: string
apiConfiguration: string
}
if (currentDsType.value === 'Excel') {
excel.value.uploadStatus(false)
if (!excel.value.sheetFile?.name) {
excel.value.uploadStatus(true)
return
}
const validate = excel.value.submitForm()
validate(val => {
if (val) {
@ -465,7 +501,25 @@ const saveDS = () => {
}
}
})
return
}
if (currentDsType.value === 'ExcelRemote') {
const validate = excelRemote.value.submitForm()
validate(val => {
if (val) {
const validateApi = excelRemote?.value?.submitSyncSettingForm()
validateApi(v => {
if (v) {
if (editDs.value && form2.id) {
complete(null, null, null)
} else {
creatDsFolder.value.createInit('datasource', { id: pid.value }, '', form2.name)
}
}
})
}
})
return
} else if (currentDsType.value.includes('API')) {
for (let i = 0; i < request.apiConfiguration.length; i++) {
@ -541,7 +595,6 @@ const doSaveDs = request => {
return
}
dsLoading.value = true
debugger
method(request)
.then(res => {
if (res !== undefined) {
@ -585,16 +638,18 @@ const defaultForm = {
paramsConfiguration: [],
enableDataFill: false
}
const form = reactive<Form>(cloneDeep(defaultForm))
const origin = reactive<Form>(cloneDeep(defaultForm))
const defaultForm2 = {
type: '',
id: '0',
editType: 0,
name: '',
creator: ''
creator: '',
configuration: {}
}
const origin = reactive<Form>(cloneDeep(defaultForm))
const form = reactive<Form>(cloneDeep(defaultForm))
const form2 = reactive<Param>(cloneDeep(defaultForm2))
const visible = ref(false)
const editDs = ref(false)
const pid = ref('0')
@ -627,7 +682,7 @@ const init = (nodeInfo: Form | Param, id?: string, res?: object, supportSetKey:
showFinishPage.value = false
if (!!nodeInfo) {
if (nodeInfo.type == 'Excel') {
if (nodeInfo.type.startsWith('Excel')) {
Object.assign(form2, cloneDeep(nodeInfo))
} else {
Object.assign(form, cloneDeep(nodeInfo))
@ -665,6 +720,7 @@ const init = (nodeInfo: Form | Param, id?: string, res?: object, supportSetKey:
}
nextTick(() => {
detail?.value?.clearForm()
excelRemote?.value?.clearForm()
xpack?.value?.invokeMethod({
methodName: 'clearForm',
args: []
@ -679,6 +735,13 @@ const drawTitle = computed(() => {
if (creator && id && currentDsType.value == 'Excel') {
return editType === 1 ? t('data_source.append_data') : t('data_source.replace_data')
}
if (currentDsType.value == 'ExcelRemote') {
return editDs.value
? !form2.id
? t('data_source.copy_data_source')
: t('datasource.modify')
: t('data_source.create_data_source')
}
return editDs.value
? !form.id
? t('data_source.copy_data_source')
@ -729,26 +792,16 @@ defineExpose({
>
<template #header="{ close }">
<span>{{ drawTitle }}</span>
<div v-if="!editDs" class="editor-step flex-center">
<el-steps space="150px" :active="activeStep" align-center>
<div v-if="!editDs" class="flex-center" style="width: 100%">
<el-steps custom style="max-width: 500px; flex: 1" :active="activeStep" align-center>
<el-step>
<template #icon>
<div class="step-icon">
<span class="icon">
{{ activeStep <= 0 ? '1' : '' }}
</span>
<span class="title">{{ t('deDataset.select_data_source') }}</span>
</div>
<template #title>
{{ t('deDataset.select_data_source') }}
</template>
</el-step>
<el-step>
<template #icon>
<div class="step-icon">
<span class="icon">
{{ activeStep <= 1 ? '2' : '' }}
</span>
<span class="title">{{ t('data_source.configuration_information') }}</span>
</div>
<template #title>
{{ t('data_source.configuration_information') }}
</template>
</el-step>
</el-steps>
@ -849,7 +902,7 @@ defineExpose({
v-if="
activeStep !== 0 &&
currentDsType &&
currentDsType !== 'Excel' &&
!currentDsType.startsWith('Excel') &&
visible &&
(!isPlugin || currentDsType.startsWith('API'))
"
@ -879,6 +932,15 @@ defineExpose({
:param="form2"
></excel-detail>
</template>
<template v-if="activeStep !== 0 && currentDsType == 'ExcelRemote'">
<excel-remote-detail
:editDs="editDs"
:is-supportSetKey="isSupportSetKey"
ref="excelRemote"
:active-step="activeApiStep"
:form="form2"
></excel-remote-detail>
</template>
</div>
</div>
<div class="editor-footer">
@ -899,8 +961,11 @@ defineExpose({
>
<el-button
v-show="
(activeStep === 0 && !currentDsType.startsWith('API')) ||
(activeApiStep !== 2 && currentDsType.startsWith('API'))
(activeStep === 0 &&
!currentDsType.startsWith('API') &&
currentDsType !== 'ExcelRemote') ||
(activeApiStep !== 2 &&
(currentDsType.startsWith('API') || currentDsType === 'ExcelRemote'))
"
type="primary"
@click="next"
@ -909,8 +974,11 @@ defineExpose({
>
<el-button
v-show="
(activeStep === 1 && !currentDsType.startsWith('API')) ||
(activeApiStep === 2 && currentDsType.startsWith('API'))
(activeStep === 1 &&
!currentDsType.startsWith('API') &&
currentDsType !== 'ExcelRemote') ||
(activeApiStep === 2 &&
(currentDsType.startsWith('API') || currentDsType === 'ExcelRemote'))
"
type="primary"
@click="saveDS"
@ -1066,7 +1134,7 @@ defineExpose({
top: 0;
left: 24px;
z-index: 5;
// background: white;
background: white;
padding: 0 17px;
&::before {
content: '';

View File

@ -111,7 +111,13 @@ export const dsTypes = [
},
{
type: 'Excel',
name: 'Excel',
name: t('common.local_excel'),
catalog: 'LOCAL',
extraParams: ''
},
{
type: 'ExcelRemote',
name: t('common.remote_excel'),
catalog: 'LOCAL',
extraParams: ''
}

View File

@ -1,14 +1,10 @@
<script lang="tsx" setup>
import Header from '../header.vue'
import { findApplicationById } from "@/api/application/application";
import icon_down_outlined1 from '@/assets/svg/icon_down_outlined-1.svg'
import icon_down_outlined from '@/assets/svg/icon_down_outlined.svg'
import icon_copy_filled from '@/assets/svg/icon_copy_filled.svg'
import icon_dataset from '@/assets/svg/icon_dataset.svg'
import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
import icon_intoItem_outlined from '@/assets/svg/icon_into-item_outlined.svg'
import icon_datasoure_details from '@/assets/svg/datasoure_details.svg'
import icon_datasoure_add_dataset from '@/assets/svg/datasoure_add_dataset.svg'
import { debounce } from 'lodash-es'
import icon_rename_outlined from '@/assets/svg/icon_rename_outlined.svg'
import icon_warning_colorful_red from '@/assets/svg/icon_warning_colorful_red.svg'
@ -53,7 +49,8 @@ import {
uploadFile,
perDeleteDatasource,
getSimpleDs,
supportSetKey
supportSetKey,
getTableStatus
} from '@/api/datasource'
import CreatDsGroup from './form/CreatDsGroup.vue'
import type { Tree } from '../dataset/form/CreatDsGroup.vue'
@ -78,7 +75,7 @@ import {
} from '@/api/datasource'
import type { SyncSetting, Node } from './form/option'
import EditorDatasource from './form/index.vue'
import ExcelInfo from './ExcelInfo.vue'
import ExcelInfoBase from './ExcelInfoBase.vue'
import SheetTabs from './SheetTabs.vue'
import BaseInfoItem from './BaseInfoItem.vue'
import BaseInfoContent from './BaseInfoContent.vue'
@ -211,7 +208,7 @@ const selectDataset = row => {
Object.assign(dsTableDetail, row)
userDrawer.value = true
dsTableDataLoading.value = true
getTableField({ tableName: row.tableName, datasourceId: nodeInfo.id })
getTableField({ tableName: row.tableName, datasourceId: nodeInfo.id, isCross: false })
.then(res => {
state.dsTableData = res.data
})
@ -714,7 +711,7 @@ const filterNode = (value: string, data: BusiTreeNode) => {
}
const editDatasource = (editType?: number) => {
if (nodeInfo.type === 'Excel') {
if (nodeInfo.type.startsWith('Excel')) {
nodeInfo.editType = editType
}
return getById(nodeInfo.id).then(res => {
@ -948,7 +945,7 @@ const handleClick = (tabName: TabPaneName) => {
switch (tabName) {
case 'config':
tableData.value = []
if (nodeInfo.type === 'Excel') {
if (nodeInfo.type.startsWith('Excel')) {
listDatasourceTables({ datasourceId: nodeInfo.id }).then(res => {
tabList.value = res.data.map(ele => {
const { name, tableName } = ele
@ -970,6 +967,26 @@ const handleClick = (tabName: TabPaneName) => {
listDatasourceTables({ datasourceId: nodeInfo.id }).then(res => {
tableData.value = res.data
initSearch()
if (nodeInfo.type.startsWith('API') || nodeInfo.type === 'ExcelRemote') {
getTableStatus({ datasourceId: nodeInfo.id }).then(res => {
for (let i = 0; i < state.filterTable.length; i++) {
for (let j = 0; j < res.data.length; j++) {
if (state.filterTable[i].tableName === res.data[j].tableName) {
state.filterTable[i].lastUpdateTime = res.data[j].lastUpdateTime
state.filterTable[i].status = res.data[j].status
}
}
}
for (let i = 0; i < tableData.value.length; i++) {
for (let j = 0; j < res.data.length; j++) {
if (tableData.value[i].tableName === res.data[j].tableName) {
tableData.value[i].lastUpdateTime = res.data[j].lastUpdateTime
tableData.value[i].status = res.data[j].status
}
}
}
})
}
})
break
default:
@ -1050,7 +1067,7 @@ onMounted(() => {
loadInit()
listDs()
setSupportSetKey()
const { opt } = router.currentRoute.value.query
const { opt } = router?.currentRoute?.value?.query || {}
if (opt && opt === 'create') {
datasourceEditor.value.init(null, null, null, isSupportSetKey.value)
}
@ -1086,7 +1103,6 @@ const getMenuList = (val: boolean) => {
</script>
<template>
<Header :projectInfo="projectInfo"/>
<div class="datasource-manage" v-loading="dsLoading">
<ArrowSide
:style="{ left: (sideTreeStatus ? width - 12 : 0) + 'px' }"
@ -1132,7 +1148,34 @@ const getMenuList = (val: boolean) => {
</el-icon>
</template>
</el-input>
<el-dropdown @command="handleSortTypeChange" trigger="click">
<el-icon class="filter-icon-span">
<el-tooltip :offset="16" effect="dark" :content="sortTypeTip" placement="top">
<Icon name="dv-sort-asc" class="opt-icon"
><dvSortAsc v-if="state.curSortType.includes('asc')" class="svg-icon opt-icon"
/></Icon>
</el-tooltip>
<el-tooltip :offset="16" effect="dark" :content="sortTypeTip" placement="top">
<Icon name="dv-sort-desc" class="opt-icon"
><dvSortDesc v-if="state.curSortType.includes('desc')" class="svg-icon opt-icon"
/></Icon>
</el-tooltip>
</el-icon>
<template #dropdown>
<el-dropdown-menu style="width: 246px">
<template :key="ele.value" v-for="ele in sortList">
<el-dropdown-item
class="ed-select-dropdown__item"
:class="ele.value === state.curSortType && 'selected'"
:command="ele.value"
>
{{ ele.name }}
</el-dropdown-item>
<li v-if="ele.divided" class="ed-dropdown-menu__item--divided"></li>
</template>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
<el-scrollbar @scroll="handleScroll" ref="scrollbarRef" class="custom-tree">
<el-tree
@ -1235,16 +1278,38 @@ const getMenuList = (val: boolean) => {
<template v-else-if="!!nodeInfo.id">
<div class="datasource-info">
<div class="info-method">
<el-icon class="icon-border">
<Icon :static-content="getDsIconType(nodeInfo.type)"
><component class="svg-icon" :is="iconDatasourceMap[nodeInfo.type]"></component
></Icon>
</el-icon>
<span :title="nodeInfo.name" class="name ellipsis">
{{ nodeInfo.name }}
</span>
<el-divider style="margin: 0 12px" direction="vertical" />
<span class="create-user">
{{ t('visualization.create_by') }}:{{ nodeInfo.creator }}
</span>
<el-popover :offset="8" show-arrow placement="bottom" width="290" trigger="hover">
<template #reference>
<el-icon size="16px" class="create-user">
<Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
</el-icon>
</template>
<dataset-detail
:create-time="infoList.createTime"
:creator="infoList.creator"
></dataset-detail>
</el-popover>
<div class="right-btn flex-align-center">
<!-- <el-button secondary @click="createDataset(null)" v-permission="['dataset']">
<el-button secondary @click="createDataset(null)" v-permission="['dataset']">
<template #icon>
<Icon name="icon_dataset_outlined"
><icon_dataset_outlined class="svg-icon"
/></Icon>
</template>
{{ t('data_set.a_new_dataset') }}
</el-button> -->
</el-button>
<el-button
v-if="nodeInfo.type !== 'Excel' && nodeInfo.weight >= 7"
secondary
@ -1356,7 +1421,7 @@ const getMenuList = (val: boolean) => {
<template #default="scope">
<div class="flex-align-center">
<template v-if="scope.row.status === 'Completed'">
<el-icon style="margin-right: 8px;">
<el-icon style="margin-right: 8px">
<icon name="icon_succeed_filled"
><icon_succeed_filled class="svg-icon"
/></icon>
@ -1404,8 +1469,8 @@ const getMenuList = (val: boolean) => {
v-permission="['dataset']"
>
<template #icon>
<Icon name="icon_datasoure_add_dataset"
><icon_datasoure_add_dataset style="font-size: 16px;" class="svg-icon"
<Icon name="icon_dataset_outlined"
><icon_dataset_outlined class="svg-icon"
/></Icon>
</template>
</el-button>
@ -1413,8 +1478,8 @@ const getMenuList = (val: boolean) => {
<el-tooltip effect="dark" :content="t('visualization.details')" placement="top">
<el-button @click.stop="selectDataset(scope.row)" text>
<template #icon>
<Icon name="icon_datasoure_details"
><icon_datasoure_details class="svg-icon"
<Icon name="icon_describe_outlined"
><icon_describe_outlined class="svg-icon"
/></Icon>
</template>
</el-button>
@ -1429,7 +1494,7 @@ const getMenuList = (val: boolean) => {
<template v-if="slotProps.active">
<el-row :gutter="24">
<el-col :span="12">
<BaseInfoItem :label="t('auth.datasource') + ' ' + t('common.name')">{{
<BaseInfoItem :label="t('data_source.data_source_name')">{{
nodeInfo.name
}}</BaseInfoItem>
</el-col>
@ -1442,10 +1507,20 @@ const getMenuList = (val: boolean) => {
<el-row :gutter="24">
<el-col v-if="nodeInfo.type === 'Excel'" :span="12">
<BaseInfoItem :label="t('data_source.document')">
<ExcelInfo :name="nodeInfo.fileName" :size="nodeInfo.size"></ExcelInfo>
<ExcelInfoBase :name="nodeInfo.fileName" :size="nodeInfo.size"></ExcelInfoBase>
</BaseInfoItem>
</el-col>
<el-col v-else :span="24">
<el-col v-if="nodeInfo.type === 'ExcelRemote'" :span="12">
<BaseInfoItem :label="t('datasource.remote_excel_url')">
{{ nodeInfo.configuration.url }}
</BaseInfoItem>
</el-col>
<el-col v-if="nodeInfo.type === 'ExcelRemote'" :span="12">
<BaseInfoItem :label="t('data_source.document')">
<ExcelInfoBase :name="nodeInfo.fileName" :size="nodeInfo.size"></ExcelInfoBase>
</BaseInfoItem>
</el-col>
<el-col v-if="!nodeInfo.type.startsWith('Excel')" :span="24">
<BaseInfoItem :label="t('common.description')">{{
nodeInfo.description
}}</BaseInfoItem>
@ -1455,6 +1530,7 @@ const getMenuList = (val: boolean) => {
v-if="
!['Excel', 'es'].includes(nodeInfo.type) &&
!nodeInfo.type.startsWith('API') &&
!nodeInfo.type.startsWith('Excel') &&
nodeInfo.weight >= 7
"
>
@ -1504,7 +1580,6 @@ const getMenuList = (val: boolean) => {
</el-col>
</el-row>
<el-row :gutter="24">
<span class="icon-title" style="margin-top: 18px;margin-right: 8px;"></span>
<span
v-if="
!['es', 'api'].includes(nodeInfo.type.toLowerCase()) &&
@ -1544,7 +1619,6 @@ const getMenuList = (val: boolean) => {
</el-row>
</template>
<el-row :gutter="24">
<span class="icon-title" style="margin-top: 18px;margin-right: 8px;"></span>
<span
v-if="!['es', 'api'].includes(nodeInfo.type.toLowerCase())"
class="de-expand"
@ -1660,7 +1734,47 @@ const getMenuList = (val: boolean) => {
</el-button>
</BaseInfoContent>
<BaseInfoContent
v-if="nodeInfo.type.startsWith('API') && nodeInfo.weight >= 7"
v-if="nodeInfo.type.startsWith('Excel')"
v-slot="slotProps"
:name="t('dataset.data_preview')"
:time="nodeInfo.lastSyncTime"
:showTime="nodeInfo.type === 'ExcelRemote'"
>
<template v-if="slotProps.active">
<div class="excel-table">
<SheetTabs
:active-tab="activeTab"
@tab-click="handleTabClick"
:tab-list="tabList"
></SheetTabs>
<div class="sheet-table-content">
<el-auto-resizer>
<template #default="{ height, width }">
<el-table-v2
:columns="columns"
v-loading="dataPreviewLoading"
header-class="excel-header-cell"
:data="tabData"
:width="width"
:height="height"
fixed
><template #empty>
<empty-background
:description="t('data_set.no_data')"
img-type="noneWhite"
/> </template
></el-table-v2>
</template>
</el-auto-resizer>
</div>
</div>
</template>
</BaseInfoContent>
<BaseInfoContent
v-if="
(nodeInfo.type.startsWith('API') || nodeInfo.type === 'ExcelRemote') &&
nodeInfo.weight >= 7
"
v-slot="slotProps"
:name="t('dataset.update_setting')"
:time="(nodeInfo.lastSyncTime as string)"
@ -1694,41 +1808,6 @@ const getMenuList = (val: boolean) => {
{{ t('dataset.update_records') }}
</el-button>
</BaseInfoContent>
<BaseInfoContent
v-if="nodeInfo.type === 'Excel'"
v-slot="slotProps"
:name="t('dataset.data_preview')"
>
<template v-if="slotProps.active">
<div class="excel-table">
<SheetTabs
:active-tab="activeTab"
@tab-click="handleTabClick"
:tab-list="tabList"
></SheetTabs>
<div class="sheet-table-content">
<el-auto-resizer>
<template #default="{ height, width }">
<el-table-v2
:columns="columns"
v-loading="dataPreviewLoading"
header-class="excel-header-cell"
:data="tabData"
:width="width"
:height="height"
fixed
><template #empty>
<empty-background
:description="t('data_set.no_data')"
img-type="noneWhite"
/> </template
></el-table-v2>
</template>
</el-auto-resizer>
</div>
</div>
</template>
</BaseInfoContent>
</template>
</template>
<template v-else-if="mounted">
@ -1766,6 +1845,7 @@ const getMenuList = (val: boolean) => {
v-loading="dsTableDataLoading"
header-cell-class-name="header-cell"
:data="state.dsTableData"
stripe
style="width: 100%"
>
<el-table-column prop="originName" :label="t('datasource.column_name')" />