mirror of
https://gitee.com/devlive-community/datacap.git
synced 2024-11-30 02:57:37 +08:00
refactor(page): refactor dataset --> info
This commit is contained in:
qianmoQ
parent
7065f72998
commit
cd47b142c7
@ -40,7 +40,7 @@
|
||||
"radix-vue": "^1.5.2",
|
||||
"uuid": "^9.0.1",
|
||||
"vaul-vue": "^0.1.0",
|
||||
"view-shadcn-ui": "2024.4.0-alpha.1731720972",
|
||||
"view-shadcn-ui": "2024.4.0-alpha.1731814030",
|
||||
"view-ui-plus": "^1.3.16",
|
||||
"vue": "^3.4.21",
|
||||
"vue-clipboard3": "^2.0.0",
|
||||
|
||||
@ -1020,6 +1020,7 @@ export default {
|
||||
info: 'View Info',
|
||||
lifeCycleColumn: 'Lifecycle columns',
|
||||
lifeCycleNumber: 'Lifecycle number',
|
||||
lifeCycleType: 'Lifecycle type',
|
||||
continuousBuild: 'Continuous Build'
|
||||
},
|
||||
validator: {
|
||||
|
||||
@ -1020,6 +1020,7 @@ export default {
|
||||
info: '查看详情',
|
||||
lifeCycleColumn: '生命周期列',
|
||||
lifeCycleNumber: '生命周期数',
|
||||
lifeCycleType: '生命周期类型',
|
||||
continuousBuild: '连续构建'
|
||||
},
|
||||
validator: {
|
||||
|
||||
@ -1,304 +1,295 @@
|
||||
<template>
|
||||
<div class="flex flex-col space-y-1">
|
||||
<div class="flex justify-end">
|
||||
<Button size="sm" :disabled="!data?.data.columns" @click="configureVisible = true">
|
||||
<ShadcnCard :title="$t('common.dataset')" :border="false">
|
||||
<template #extra>
|
||||
<ShadcnButton :disabled="!data?.data.columns" @click="configureVisible = true">
|
||||
{{ $t('common.configure') }}
|
||||
</Button>
|
||||
</div>
|
||||
<CircularLoading v-if="loading" :show="loading"/>
|
||||
<div v-else>
|
||||
<DataCapCard v-if="sourceInfo">
|
||||
</ShadcnButton>
|
||||
</template>
|
||||
|
||||
<div class="relative h-full space-y-4" style="min-height: 200px;">
|
||||
<ShadcnSpin v-model="loading" fixed/>
|
||||
|
||||
<ShadcnCard v-if="sourceInfo" class="w-full">
|
||||
<template #title>
|
||||
<Button size="sm" :loading="running" :disabled="running" @click="handlerRun()">
|
||||
<ShadcnButton :loading="running" :disabled="running" @click="onRun()">
|
||||
{{ $t('query.common.execute') }}
|
||||
</Button>
|
||||
</ShadcnButton>
|
||||
</template>
|
||||
<FormField v-slot="{ componentField }" name="content">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<AceEditor :value="value" v-bind="componentField" @update:value="value = $event"/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</DataCapCard>
|
||||
<div v-if="data || code" class="mt-3">
|
||||
<CircularLoading v-if="running" :show="running"/>
|
||||
<AgGridVue v-else-if="data?.data.columns" :style="{height: '300px'}" class="ag-theme-datacap" :pagination="true" :columnDefs="columnDefs" :rowData="data.data.columns"
|
||||
|
||||
<div class="relative">
|
||||
<ShadcnSpin v-model="running" fixed/>
|
||||
|
||||
<AceEditor :value="value" @update:value="value = $event"/>
|
||||
</div>
|
||||
</ShadcnCard>
|
||||
|
||||
<div v-if="data || code" class="relative">
|
||||
<ShadcnSpin v-model="running" fixed/>
|
||||
|
||||
<AgGridVue v-if="data?.data.columns"
|
||||
:style="{height: '300px'}"
|
||||
class="ag-theme-datacap"
|
||||
:pagination="true"
|
||||
:columnDefs="columnDefs"
|
||||
:rowData="data.data.columns"
|
||||
:gridOptions="gridOptions as any"/>
|
||||
<Sheet :default-open="configureVisible" :open="configureVisible" @update:open="configureVisible = false">
|
||||
<SheetContent side="bottom" class="w-full h-[80%]">
|
||||
<SheetHeader class="border-b pb-3">
|
||||
<SheetTitle>
|
||||
{{ $t('common.configure') }}
|
||||
<Button size="sm" class="float-right mr-5 -mt-2" @click="handlerCreate">
|
||||
{{ code ? $t('dataset.common.modify') : $t('dataset.common.create') }}
|
||||
</Button>
|
||||
</SheetTitle>
|
||||
</SheetHeader>
|
||||
<Alert v-if="validator" variant="destructive" class="mt-2">{{ validatorMessage }}</Alert>
|
||||
<Tabs default-value="columns" class="mt-1">
|
||||
<TabsList class="grid w-full grid-cols-2">
|
||||
<TabsTrigger value="columns">{{ $t('dataset.common.dataColumn') }}</TabsTrigger>
|
||||
<TabsTrigger value="configure">{{ $t('dataset.common.dataConfigure') }}</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="columns">
|
||||
<CircularLoading v-if="loading" :show="loading"/>
|
||||
<div v-else class="flex w-full flex-col">
|
||||
<div class="flex flex-1 flex-col gap-4 p-1 text-center">
|
||||
<div class="grid items-center gap-3 md:grid-cols-2 md:gap-4 lg:grid-cols-12">
|
||||
<div>{{ $t('dataset.common.columnName') }}</div>
|
||||
<div>{{ $t('dataset.common.columnAlias') }}</div>
|
||||
<div>{{ $t('dataset.common.columnType') }}</div>
|
||||
<div>{{ $t('dataset.common.columnMode') }}</div>
|
||||
<div>{{ $t('dataset.common.columnDefaultValue') }}</div>
|
||||
<div>{{ $t('dataset.common.columnIsNullable') }}</div>
|
||||
<div>{{ $t('dataset.common.columnIsOrderByKey') }}</div>
|
||||
<div>{{ $t('dataset.common.columnIsPartitionKey') }}</div>
|
||||
<div>{{ $t('dataset.common.columnIsPrimaryKey') }}</div>
|
||||
<div>{{ $t('dataset.common.columnIsSampling') }}</div>
|
||||
<div>{{ $t('dataset.common.columnLength') }}</div>
|
||||
<div>{{ $t('common.action') }}</div>
|
||||
</div>
|
||||
<div class="grid gap-3 md:grid-cols-2 md:gap-3 lg:grid-cols-12 overflow-y-auto pt-2 pb-2"
|
||||
:style="{ height: 'calc(100vh - 360px)' }">
|
||||
<template v-for="(item, index) in formState.columns" :key="index">
|
||||
<div>
|
||||
<Input v-model="item.name" type="text"/>
|
||||
</div>
|
||||
<div>
|
||||
<Input v-model="item.aliasName" type="text"/>
|
||||
</div>
|
||||
<div>
|
||||
<Select v-model="item.type">
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a fruit"/>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="STRING">{{ $t('dataset.common.columnTypeString') }}</SelectItem>
|
||||
<SelectItem value="NUMBER">{{ $t('dataset.common.columnTypeNumber') }}</SelectItem>
|
||||
<SelectItem value="NUMBER_SIGNED">{{ $t('dataset.common.columnTypeNumberSigned') }}</SelectItem>
|
||||
<SelectItem value="BOOLEAN">{{ $t('dataset.common.columnTypeBoolean') }}</SelectItem>
|
||||
<SelectItem value="DATETIME">{{ $t('dataset.common.columnTypeDateTime') }}</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<div class="flex items-center space-x-2 mt-2">
|
||||
<Label for="airplane-mode">{{ $t('dataset.common.columnModeMetric') }}</Label>
|
||||
<Switch v-model="item.mode" :default-checked="item.mode === 'DIMENSION'" @update:checked="setMode(item, $event)"/>
|
||||
<Label for="airplane-mode">{{ $t('dataset.common.columnModeDimension') }}</Label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Input v-model="item.defaultValue" type="text" :disabled="item.virtualColumn"/>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<Switch v-model="item.nullable" :disabled="item.virtualColumn" :default-checked="item.nullable"
|
||||
@update:checked="setNullable(item, $event)"/>
|
||||
</div>
|
||||
<div class="mt-2 ml-4">
|
||||
<Switch v-model="item.orderByKey" :default-checked="item.orderByKey" :disabled="item.virtualColumn"
|
||||
@update:checked="setOrderByKey(item, $event)"/>
|
||||
</div>
|
||||
<div class="mt-2 ml-4">
|
||||
<Switch v-model="item.partitionKey" :disabled="item.virtualColumn" :default-checked="item.partitionKey"
|
||||
@update:checked="setPartitionKey(item, $event)"/>
|
||||
</div>
|
||||
<div class="mt-2 ml-4">
|
||||
<Switch v-model="item.primaryKey" :disabled="item.virtualColumn" :default-checked="item.primaryKey"
|
||||
@update:checked="setPrimaryKey(item, $event)"/>
|
||||
</div>
|
||||
<div class="mt-2 ml-4">
|
||||
<Switch v-model="item.samplingKey" :disabled="item.virtualColumn" :default-checked="item.samplingKey"
|
||||
@update:checked="setSamplingKey(item, $event)"/>
|
||||
</div>
|
||||
<div>
|
||||
<Input v-model="item.length" type="number" :disabled="item.type === 'BOOLEAN' || item.type === 'DATETIME' || item.virtualColumn"/>
|
||||
</div>
|
||||
<div class="space-x-1 ml-4">
|
||||
<Popover>
|
||||
<PopoverTrigger as-child>
|
||||
<Button class="rounded-full w-6 h-6" variant="outline" size="icon">
|
||||
<Pencil :size="10"/>
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent class="w-80">
|
||||
<div class="grid gap-4">
|
||||
<div class="space-y-2">
|
||||
<h4 class="font-medium leading-none">{{ $t('dataset.common.columnComment') }}</h4>
|
||||
</div>
|
||||
<Textarea v-model="item.comment"/>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<Button class="rounded-full w-6 h-6" variant="destructive" size="icon" :disabled="!item.customColumn" @click="handlerRemoveColumn(index)">
|
||||
<Trash :size="10"/>
|
||||
</Button>
|
||||
<Button class="rounded-full w-6 h-6" size="icon" @click="handlerAddColumn(index)">
|
||||
<Plus :size="10"/>
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
<TabsContent value="configure">
|
||||
<Card class="border-0 mt-5 shadow-transparent">
|
||||
<CardContent class="grid gap-6 pt-2 pb-2 w-[60%] mx-auto">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="grid gap-2">
|
||||
<Label for="name">{{ $t('common.name') }}</Label>
|
||||
<Input v-model="formState.name as string"/>
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="executor">{{ $t('common.executor') }}</Label>
|
||||
<Select v-model="formState.executor">
|
||||
<SelectTrigger>
|
||||
<SelectValue/>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem v-for="item in executors" :value="item">{{ item }}</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="syncMode">{{ $t('dataset.common.syncMode') }}</Label>
|
||||
<Select v-model="formState.syncMode">
|
||||
<SelectTrigger>
|
||||
<SelectValue :placeholder="$t('card.tip.roleHolder')"/>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="MANUAL">{{ $t('dataset.common.syncModeManual') }}</SelectItem>
|
||||
<SelectItem value="TIMING">{{ $t('dataset.common.syncModeTiming') }}</SelectItem>
|
||||
<SelectItem value="OUT_SYNC">{{ $t('dataset.common.syncModeOutSync') }}</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div class="grid gap-2" v-if="formState.syncMode === 'TIMING'">
|
||||
<Label for="syncMode">{{ $t('dataset.common.columnExpression') }}</Label>
|
||||
<Input v-model="formState.expression as string" placeholder="0 0 * * * ?"/>
|
||||
</div>
|
||||
<div class="grid gap-2" v-if="formState.syncMode === 'TIMING'">
|
||||
<Label for="syncMode">{{ $t('common.scheduler') }}</Label>
|
||||
<Select v-model="formState.scheduler">
|
||||
<SelectTrigger>
|
||||
<SelectValue/>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem v-for="item in schedulers" :value="item">{{ item }}</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<Separator/>
|
||||
<div class="grid gap-2 -mt-3">
|
||||
<Label for="description">
|
||||
<HoverCard>
|
||||
<HoverCardTrigger as-child>
|
||||
<Button variant="link" class="-ml-4">{{ $t('dataset.common.dataLifeCycle') }}</Button>
|
||||
</HoverCardTrigger>
|
||||
<HoverCardContent class="w-80">
|
||||
{{ $t('dataset.tip.lifeCycle') }}
|
||||
</HoverCardContent>
|
||||
</HoverCard>
|
||||
</Label>
|
||||
</div>
|
||||
<Alert v-if="formState.columns.filter(item => item.type === 'DATETIME').length === 0" variant="destructive" class="-mt-3">
|
||||
{{ $t('dataset.tip.lifeCycleMustDateColumn') }}
|
||||
</Alert>
|
||||
<div v-else class="grid grid-cols-2 gap-4 -mt-3">
|
||||
<div class="grid gap-2">
|
||||
<Label>{{ $t('dataset.common.lifeCycleColumn') }}</Label>
|
||||
<Select v-model="formState.lifeCycleColumn as string">
|
||||
<SelectTrigger>
|
||||
<SelectValue/>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem v-for="item in formState.columns.filter(item => item.type === 'DATETIME')" :key="item.name" :value="item.name">
|
||||
{{ item.name }}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label>{{ $t('dataset.common.lifeCycleNumber') }}</Label>
|
||||
<Input :disabled="!formState.lifeCycleColumn" type="number" v-model="formState.lifeCycle as number"/>
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label>{{ $t('dataset.common.lifeCycleNumber') }}</Label>
|
||||
<Select :disabled="!formState.lifeCycleColumn" v-model="formState.lifeCycleType as string">
|
||||
<SelectTrigger>
|
||||
<SelectValue/>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="MONTH">
|
||||
{{ $t('dataset.common.lifeCycleMonth') }}
|
||||
</SelectItem>
|
||||
<SelectItem value="WEEK">
|
||||
{{ $t('dataset.common.lifeCycleWeek') }}
|
||||
</SelectItem>
|
||||
<SelectItem value="DAY">
|
||||
{{ $t('dataset.common.lifeCycleDay') }}
|
||||
</SelectItem>
|
||||
<SelectItem value="HOUR">
|
||||
{{ $t('dataset.common.lifeCycleHour') }}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<Separator/>
|
||||
<div class="grid gap-2 -mt-3">
|
||||
<Label for="description">{{ $t('common.description') }}</Label>
|
||||
<Textarea v-model="formState.description as string"/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</div>
|
||||
<div v-else-if="!sourceInfo" class="mt-3 justify-center items-center">
|
||||
<div class="flex flex-col items-center space-y-3">
|
||||
<Alert variant="destructive" class="w-1/3">
|
||||
{{ i18n.t('dataset.common.onlyPreviewCreate') }}
|
||||
</Alert>
|
||||
<Button>
|
||||
|
||||
<div v-if="!sourceInfo" class="mt-3 justify-center items-center">
|
||||
<div class="flex flex-col items-center space-y-4">
|
||||
<ShadcnAlert :title="i18n.t('dataset.common.onlyPreviewCreate')"/>
|
||||
|
||||
<ShadcnButton>
|
||||
<RouterLink to="/admin/query">
|
||||
{{ i18n.t('dataset.common.returnQuery') }}
|
||||
</RouterLink>
|
||||
</Button>
|
||||
</ShadcnButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ShadcnCard>
|
||||
|
||||
<ShadcnDrawer v-model="configureVisible"
|
||||
height="70%"
|
||||
:closable="false"
|
||||
position="bottom">
|
||||
<template #header>
|
||||
<div class="w-full flex items-center">
|
||||
<div class="flex-none">
|
||||
{{ $t('common.configure') }}
|
||||
</div>
|
||||
|
||||
<div class="flex-1 flex items-center justify-end space-x-2">
|
||||
<ShadcnButton @click="onSubmit">
|
||||
{{ code ? $t('dataset.common.modify') : $t('dataset.common.create') }}
|
||||
</ShadcnButton>
|
||||
|
||||
<ShadcnButton type="default" @click="configureVisible = false">
|
||||
{{ $t('common.cancel') }}
|
||||
</ShadcnButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<ShadcnAlert v-if="validator" type="error" class="mt-2">{{ validatorMessage }}</ShadcnAlert>
|
||||
|
||||
<ShadcnTab v-model="activeTab" class="mt-1">
|
||||
<ShadcnTabItem :label="$t('dataset.common.dataColumn')" class="space-y-2" value="columns">
|
||||
<ShadcnSpin v-model="loading" fixed/>
|
||||
|
||||
<ShadcnRow gutter="8">
|
||||
<ShadcnCol span="1" class="text-center">{{ $t('dataset.common.columnName') }}</ShadcnCol>
|
||||
<ShadcnCol span="1" class="text-center">{{ $t('dataset.common.columnAlias') }}</ShadcnCol>
|
||||
<ShadcnCol span="1" class="text-center">{{ $t('dataset.common.columnType') }}</ShadcnCol>
|
||||
<ShadcnCol span="1" class="text-center">{{ $t('dataset.common.columnMode') }}</ShadcnCol>
|
||||
<ShadcnCol span="1" class="text-center">{{ $t('dataset.common.columnDefaultValue') }}</ShadcnCol>
|
||||
<ShadcnCol span="1" class="text-center">{{ $t('dataset.common.columnIsNullable') }}</ShadcnCol>
|
||||
<ShadcnCol span="1" class="text-center">{{ $t('dataset.common.columnIsOrderByKey') }}</ShadcnCol>
|
||||
<ShadcnCol span="1" class="text-center">{{ $t('dataset.common.columnIsPartitionKey') }}</ShadcnCol>
|
||||
<ShadcnCol span="1" class="text-center">{{ $t('dataset.common.columnIsPrimaryKey') }}</ShadcnCol>
|
||||
<ShadcnCol span="1" class="text-center">{{ $t('dataset.common.columnIsSampling') }}</ShadcnCol>
|
||||
<ShadcnCol span="1" class="text-center">{{ $t('dataset.common.columnLength') }}</ShadcnCol>
|
||||
<ShadcnCol span="1" class="text-center">{{ $t('common.action') }}</ShadcnCol>
|
||||
</ShadcnRow>
|
||||
|
||||
<ShadcnRow gutter="8">
|
||||
<template v-for="(item, index) in formState.columns" :key="index">
|
||||
<ShadcnCol span="1" class="flex justify-center">
|
||||
<ShadcnInput v-model="item.name"/>
|
||||
</ShadcnCol>
|
||||
|
||||
<ShadcnCol span="1" class="flex justify-center">
|
||||
<ShadcnInput v-model="item.aliasName"/>
|
||||
</ShadcnCol>
|
||||
|
||||
<ShadcnCol span="1" class="flex justify-center">
|
||||
<ShadcnSelect v-model="item.type" placeholder="Options" class="w-full">
|
||||
<template #options>
|
||||
<ShadcnSelectOption value="STRING" :label="$t('dataset.common.columnTypeString')"/>
|
||||
<ShadcnSelectOption value="NUMBER" :label="$t('dataset.common.columnTypeNumber')"/>
|
||||
<ShadcnSelectOption value="NUMBER_SIGNED" :label="$t('dataset.common.columnTypeNumberSigned')"/>
|
||||
<ShadcnSelectOption value="BOOLEAN" :label="$t('dataset.common.columnTypeBoolean')"/>
|
||||
<ShadcnSelectOption value="DATETIME" :label="$t('dataset.common.columnTypeDateTime')"/>
|
||||
</template>
|
||||
</ShadcnSelect>
|
||||
</ShadcnCol>
|
||||
|
||||
<ShadcnCol span="1" class="flex justify-center items-center">
|
||||
<ShadcnSwitch v-model="item.mode" true-value="METRIC" false-value="DIMENSION">
|
||||
<template #open>{{ $t('dataset.common.columnModeDimension') }}</template>
|
||||
<template #close>{{ $t('dataset.common.columnModeMetric') }}</template>
|
||||
</ShadcnSwitch>
|
||||
</ShadcnCol>
|
||||
|
||||
<ShadcnCol span="1" class="flex justify-center">
|
||||
<ShadcnInput v-model="item.defaultValue" :disabled="item.virtualColumn"/>
|
||||
</ShadcnCol>
|
||||
|
||||
<ShadcnCol span="1" class="flex justify-center items-center">
|
||||
<ShadcnSwitch v-model="item.nullable" :disabled="item.virtualColumn" @on-change="setNullable(item, $event)"/>
|
||||
</ShadcnCol>
|
||||
|
||||
<ShadcnCol span="1" class="flex justify-center items-center">
|
||||
<ShadcnSwitch v-model="item.orderByKey" :disabled="item.virtualColumn" @on-change="setOrderByKey(item, $event)"/>
|
||||
</ShadcnCol>
|
||||
|
||||
<ShadcnCol span="1" class="flex justify-center items-center">
|
||||
<ShadcnSwitch v-model="item.partitionKey" :disabled="item.virtualColumn" @on-change="setPartitionKey(item, $event)"/>
|
||||
</ShadcnCol>
|
||||
|
||||
<ShadcnCol span="1" class="flex justify-center items-center">
|
||||
<ShadcnSwitch v-model="item.primaryKey" :disabled="item.virtualColumn" @on-change="setPrimaryKey(item, $event)"/>
|
||||
</ShadcnCol>
|
||||
|
||||
<ShadcnCol span="1" class="flex justify-center items-center">
|
||||
<ShadcnSwitch v-model="item.samplingKey" :disabled="item.virtualColumn" @on-change="setSamplingKey(item, $event)"/>
|
||||
</ShadcnCol>
|
||||
|
||||
<ShadcnCol span="1" class="flex justify-center">
|
||||
<ShadcnNumber v-model="item.length" type="number" :disabled="item.type === 'BOOLEAN' || item.type === 'DATETIME' || item.virtualColumn"/>
|
||||
</ShadcnCol>
|
||||
|
||||
<ShadcnCol span="1" class="flex justify-center items-center space-x-1">
|
||||
<ShadcnHoverCard position="bottom">
|
||||
<ShadcnButton circle size="small">
|
||||
<ShadcnIcon icon="Pencil" size="10"/>
|
||||
</ShadcnButton>
|
||||
|
||||
<template #content>
|
||||
<div class="p-2 space-y-2">
|
||||
<ShadcnText type="h6">{{ $t('dataset.common.columnComment') }}</ShadcnText>
|
||||
<ShadcnInput v-model="item.comment" type="textarea"/>
|
||||
</div>
|
||||
</template>
|
||||
</ShadcnHoverCard>
|
||||
|
||||
<ShadcnButton circle
|
||||
type="error"
|
||||
size="small"
|
||||
:disabled="!item.customColumn"
|
||||
@click="onRemoveColumn(index)">
|
||||
<ShadcnIcon icon="Trash" size="10"/>
|
||||
</ShadcnButton>
|
||||
|
||||
<ShadcnButton circle size="small" @click="onAddColumn(index)">
|
||||
<ShadcnIcon icon="Plus" size="10"/>
|
||||
</ShadcnButton>
|
||||
</ShadcnCol>
|
||||
</template>
|
||||
</ShadcnRow>
|
||||
</ShadcnTabItem>
|
||||
|
||||
<ShadcnTabItem :label="$t('dataset.common.dataConfigure')" value="configure">
|
||||
<ShadcnForm class="w-[40%] mx-auto items-center" v-model="formState">
|
||||
<ShadcnRow gutter="8">
|
||||
<ShadcnCol span="6">
|
||||
<ShadcnFormItem name="name" :label="$t('common.name')" :rules="[{ required: true, message: $t('common.name') }]">
|
||||
<ShadcnInput v-model="formState.name" name="name"/>
|
||||
</ShadcnFormItem>
|
||||
</ShadcnCol>
|
||||
|
||||
<ShadcnCol span="6">
|
||||
<ShadcnFormItem name="executor" :label="$t('common.executor')">
|
||||
<ShadcnSelect v-model="formState.executor" name="executor">
|
||||
<template #options>
|
||||
<ShadcnSelectOption v-for="item in executors" :label="item" :value="item"/>
|
||||
</template>
|
||||
</ShadcnSelect>
|
||||
</ShadcnFormItem>
|
||||
</ShadcnCol>
|
||||
|
||||
<ShadcnCol span="6">
|
||||
<ShadcnFormItem name="syncMode" :label="$t('dataset.common.syncMode')">
|
||||
<ShadcnSelect v-model="formState.syncMode" name="syncMode">
|
||||
<template #options>
|
||||
<ShadcnSelectOption value="MANUAL" :label="$t('dataset.common.syncModeManual')"/>
|
||||
<ShadcnSelectOption value="TIMING" :label="$t('dataset.common.syncModeTiming')"/>
|
||||
<ShadcnSelectOption value="OUT_SYNC" :label="$t('dataset.common.syncModeOutSync')"/>
|
||||
</template>
|
||||
</ShadcnSelect>
|
||||
</ShadcnFormItem>
|
||||
</ShadcnCol>
|
||||
|
||||
<ShadcnCol span="6">
|
||||
<ShadcnFormItem name="expression" :label="$t('dataset.common.columnExpression')">
|
||||
<ShadcnInput v-model="formState.expression" name="expression" :disabled="formState.syncMode !== 'TIMING'"/>
|
||||
</ShadcnFormItem>
|
||||
</ShadcnCol>
|
||||
|
||||
<ShadcnCol span="6">
|
||||
<ShadcnFormItem name="scheduler" :label="$t('common.scheduler')">
|
||||
<ShadcnSelect v-model="formState.scheduler" name="scheduler">
|
||||
<template #options>
|
||||
<ShadcnSelectOption v-for="item in schedulers" :label="item" :value="item"/>
|
||||
</template>
|
||||
</ShadcnSelect>
|
||||
</ShadcnFormItem>
|
||||
</ShadcnCol>
|
||||
|
||||
<ShadcnCol span="12">
|
||||
<ShadcnDivider/>
|
||||
</ShadcnCol>
|
||||
|
||||
<ShadcnCol span="12">
|
||||
<ShadcnAlert v-if="formState.columns.filter(item => item.type === 'DATETIME').length === 0" type="error">
|
||||
{{ $t('dataset.tip.lifeCycleMustDateColumn') }}
|
||||
</ShadcnAlert>
|
||||
</ShadcnCol>
|
||||
|
||||
<ShadcnCol span="12">
|
||||
<ShadcnFormItem name="lifeCycleColumn" :label="$t('dataset.common.lifeCycleColumn')" :description="$t('dataset.tip.lifeCycle')">
|
||||
<ShadcnSelect v-model="formState.lifeCycleColumn" name="lifeCycleColumn"
|
||||
:disabled="formState.columns.filter(item => item.type === 'DATETIME').length === 0">
|
||||
<template #options>
|
||||
<ShadcnSelectOption v-for="item in formState.columns.filter(v => v.type === 'DATETIME')" :label="item.name" :value="item.name"/>
|
||||
</template>
|
||||
</ShadcnSelect>
|
||||
</ShadcnFormItem>
|
||||
</ShadcnCol>
|
||||
|
||||
<ShadcnCol span="6">
|
||||
<ShadcnFormItem name="lifeCycleType" :label="$t('dataset.common.lifeCycleType')">
|
||||
<ShadcnSelect v-model="formState.lifeCycleType" name="lifeCycleType" :disabled="!formState.lifeCycleColumn">
|
||||
<template #options>
|
||||
<ShadcnSelectOption value="MONTH" :label="$t('dataset.common.lifeCycleMonth')"/>
|
||||
<ShadcnSelectOption value="WEEK" :label="$t('dataset.common.lifeCycleWeek')"/>
|
||||
<ShadcnSelectOption value="DAY" :label="$t('dataset.common.lifeCycleDay')"/>
|
||||
<ShadcnSelectOption value="HOUR" :label="$t('dataset.common.lifeCycleHour')"/>
|
||||
</template>
|
||||
</ShadcnSelect>
|
||||
</ShadcnFormItem>
|
||||
</ShadcnCol>
|
||||
|
||||
<ShadcnCol span="6">
|
||||
<ShadcnFormItem name="lifeCycle" :label="$t('dataset.common.lifeCycleNumber')">
|
||||
<ShadcnNumber v-model="formState.lifeCycle" name="lifeCycle" min="1" :disabled="!formState.lifeCycleColumn"/>
|
||||
</ShadcnFormItem>
|
||||
</ShadcnCol>
|
||||
|
||||
<ShadcnCol span="12">
|
||||
<ShadcnDivider/>
|
||||
</ShadcnCol>
|
||||
|
||||
<ShadcnCol span="12">
|
||||
<ShadcnFormItem name="description" :label="$t('common.description')">
|
||||
<ShadcnInput v-model="formState.description" type="textarea" name="description"/>
|
||||
</ShadcnFormItem>
|
||||
</ShadcnCol>
|
||||
</ShadcnRow>
|
||||
</ShadcnForm>
|
||||
</ShadcnTabItem>
|
||||
</ShadcnTab>
|
||||
</ShadcnDrawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
import Button from '@/views/ui/button'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import GridOptions from '@/views/components/grid/GridOptions'
|
||||
import DatasetService from '@/services/dataset'
|
||||
import { HttpUtils } from '@/utils/http'
|
||||
import { GridColumn } from '@/views/components/grid/GridColumn'
|
||||
import PluginService from '@/services/plugin'
|
||||
import { Sheet, SheetClose, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet'
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||||
import { Alert } from '@/components/ui/alert'
|
||||
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
import { Switch } from '@/components/ui/switch'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
|
||||
import { DataCapCard } from '@/views/ui/card'
|
||||
import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card'
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
import { ToastUtils } from '@/utils/toast'
|
||||
import { AgGridVue } from 'ag-grid-vue3'
|
||||
import 'ag-grid-community/styles/ag-grid.css'
|
||||
import '@/views/components/grid/ag-theme-datacap.css'
|
||||
@ -314,24 +305,7 @@ import { join } from 'lodash'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'DatasetInfo',
|
||||
components: {
|
||||
AceEditor,
|
||||
Separator,
|
||||
Textarea,
|
||||
Label,
|
||||
Switch,
|
||||
SelectTrigger, SelectContent, SelectItem, SelectGroup, SelectValue, Select,
|
||||
Input,
|
||||
|
||||
Alert,
|
||||
Button,
|
||||
SheetClose, Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger,
|
||||
Tabs, TabsContent, TabsList, TabsTrigger,
|
||||
Popover, PopoverContent, PopoverTrigger,
|
||||
DataCapCard,
|
||||
HoverCard, HoverCardContent, HoverCardTrigger,
|
||||
AgGridVue
|
||||
},
|
||||
components: { AceEditor, AgGridVue },
|
||||
setup()
|
||||
{
|
||||
const i18n = useI18n()
|
||||
@ -372,15 +346,16 @@ export default defineComponent({
|
||||
data: null as ResponseModel | null,
|
||||
sourceInfo: null as SourceModel | null,
|
||||
value: '',
|
||||
running: false
|
||||
running: false,
|
||||
activeTab: 'columns'
|
||||
}
|
||||
},
|
||||
created()
|
||||
{
|
||||
this.handlerInitialize()
|
||||
this.handleInitialize()
|
||||
},
|
||||
methods: {
|
||||
handlerInitialize()
|
||||
handleInitialize()
|
||||
{
|
||||
setTimeout(() => {
|
||||
PluginService.getPlugins()
|
||||
@ -404,7 +379,7 @@ export default defineComponent({
|
||||
this.formState.source.id = info.data.source.id
|
||||
this.sourceInfo = info.data.source
|
||||
this.value = info.data.query
|
||||
this.handlerRun()
|
||||
this.onRun()
|
||||
}
|
||||
if (column.status) {
|
||||
this.formState.columns = column.data
|
||||
@ -426,7 +401,7 @@ export default defineComponent({
|
||||
}
|
||||
})
|
||||
},
|
||||
handlerCreate()
|
||||
onSubmit()
|
||||
{
|
||||
if (!this.beforeCheck()) {
|
||||
this.saving = true
|
||||
@ -434,14 +409,18 @@ export default defineComponent({
|
||||
DatasetService.saveOrUpdate(this.formState as unknown as DatasetModel)
|
||||
.then(response => {
|
||||
if (response.status) {
|
||||
ToastUtils.success(`${ this.$t('dataset.tip.publishSuccess').replace('$VALUE', this.formState.name as string) }`)
|
||||
this.$Message.success({
|
||||
content: this.$t('dataset.tip.publishSuccess').replace('$VALUE', this.formState.name as string),
|
||||
showIcon: true
|
||||
})
|
||||
|
||||
this.$router.push('/admin/dataset')
|
||||
}
|
||||
})
|
||||
.finally(() => this.saving = false)
|
||||
}
|
||||
},
|
||||
handlerAddColumn(index: number)
|
||||
onAddColumn(index: number)
|
||||
{
|
||||
this.formState.columns.splice(index + 1, 0, {
|
||||
id: null,
|
||||
@ -463,11 +442,11 @@ export default defineComponent({
|
||||
customColumn: true
|
||||
})
|
||||
},
|
||||
handlerRemoveColumn(index: number)
|
||||
onRemoveColumn(index: number)
|
||||
{
|
||||
this.formState.columns.splice(index, 1)
|
||||
},
|
||||
handlerRun()
|
||||
onRun()
|
||||
{
|
||||
const configure: ExecuteModel = {
|
||||
content: this.value,
|
||||
@ -510,7 +489,10 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
else {
|
||||
ToastUtils.error(response.message)
|
||||
this.$Message.error({
|
||||
content: response.message,
|
||||
showIcon: true
|
||||
})
|
||||
}
|
||||
})
|
||||
.finally(() => this.running = false)
|
||||
@ -563,15 +545,6 @@ export default defineComponent({
|
||||
this.validatorMessage = null
|
||||
}
|
||||
},
|
||||
setMode(item: any, checked: boolean)
|
||||
{
|
||||
if (!checked) {
|
||||
item.mode = 'METRIC'
|
||||
}
|
||||
else {
|
||||
item.mode = 'DIMENSION'
|
||||
}
|
||||
},
|
||||
setNullable(item: any, checked: boolean)
|
||||
{
|
||||
item.nullable = checked
|
||||
|
||||
Loading…
Reference in New Issue
Block a user