mirror of
https://gitee.com/devlive-community/datacap.git
synced 2024-11-30 11:07:41 +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",
|
"radix-vue": "^1.5.2",
|
||||||
"uuid": "^9.0.1",
|
"uuid": "^9.0.1",
|
||||||
"vaul-vue": "^0.1.0",
|
"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",
|
"view-ui-plus": "^1.3.16",
|
||||||
"vue": "^3.4.21",
|
"vue": "^3.4.21",
|
||||||
"vue-clipboard3": "^2.0.0",
|
"vue-clipboard3": "^2.0.0",
|
||||||
|
|||||||
@ -1020,6 +1020,7 @@ export default {
|
|||||||
info: 'View Info',
|
info: 'View Info',
|
||||||
lifeCycleColumn: 'Lifecycle columns',
|
lifeCycleColumn: 'Lifecycle columns',
|
||||||
lifeCycleNumber: 'Lifecycle number',
|
lifeCycleNumber: 'Lifecycle number',
|
||||||
|
lifeCycleType: 'Lifecycle type',
|
||||||
continuousBuild: 'Continuous Build'
|
continuousBuild: 'Continuous Build'
|
||||||
},
|
},
|
||||||
validator: {
|
validator: {
|
||||||
|
|||||||
@ -1020,6 +1020,7 @@ export default {
|
|||||||
info: '查看详情',
|
info: '查看详情',
|
||||||
lifeCycleColumn: '生命周期列',
|
lifeCycleColumn: '生命周期列',
|
||||||
lifeCycleNumber: '生命周期数',
|
lifeCycleNumber: '生命周期数',
|
||||||
|
lifeCycleType: '生命周期类型',
|
||||||
continuousBuild: '连续构建'
|
continuousBuild: '连续构建'
|
||||||
},
|
},
|
||||||
validator: {
|
validator: {
|
||||||
|
|||||||
@ -1,304 +1,295 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col space-y-1">
|
<ShadcnCard :title="$t('common.dataset')" :border="false">
|
||||||
<div class="flex justify-end">
|
<template #extra>
|
||||||
<Button size="sm" :disabled="!data?.data.columns" @click="configureVisible = true">
|
<ShadcnButton :disabled="!data?.data.columns" @click="configureVisible = true">
|
||||||
{{ $t('common.configure') }}
|
{{ $t('common.configure') }}
|
||||||
</Button>
|
</ShadcnButton>
|
||||||
</div>
|
</template>
|
||||||
<CircularLoading v-if="loading" :show="loading"/>
|
|
||||||
<div v-else>
|
<div class="relative h-full space-y-4" style="min-height: 200px;">
|
||||||
<DataCapCard v-if="sourceInfo">
|
<ShadcnSpin v-model="loading" fixed/>
|
||||||
|
|
||||||
|
<ShadcnCard v-if="sourceInfo" class="w-full">
|
||||||
<template #title>
|
<template #title>
|
||||||
<Button size="sm" :loading="running" :disabled="running" @click="handlerRun()">
|
<ShadcnButton :loading="running" :disabled="running" @click="onRun()">
|
||||||
{{ $t('query.common.execute') }}
|
{{ $t('query.common.execute') }}
|
||||||
</Button>
|
</ShadcnButton>
|
||||||
</template>
|
</template>
|
||||||
<FormField v-slot="{ componentField }" name="content">
|
|
||||||
<FormItem>
|
<div class="relative">
|
||||||
<FormControl>
|
<ShadcnSpin v-model="running" fixed/>
|
||||||
<AceEditor :value="value" v-bind="componentField" @update:value="value = $event"/>
|
|
||||||
</FormControl>
|
<AceEditor :value="value" @update:value="value = $event"/>
|
||||||
</FormItem>
|
</div>
|
||||||
</FormField>
|
</ShadcnCard>
|
||||||
</DataCapCard>
|
|
||||||
<div v-if="data || code" class="mt-3">
|
<div v-if="data || code" class="relative">
|
||||||
<CircularLoading v-if="running" :show="running"/>
|
<ShadcnSpin v-model="running" fixed/>
|
||||||
<AgGridVue v-else-if="data?.data.columns" :style="{height: '300px'}" class="ag-theme-datacap" :pagination="true" :columnDefs="columnDefs" :rowData="data.data.columns"
|
|
||||||
|
<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"/>
|
: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>
|
||||||
<div v-else-if="!sourceInfo" class="mt-3 justify-center items-center">
|
|
||||||
<div class="flex flex-col items-center space-y-3">
|
<div v-if="!sourceInfo" class="mt-3 justify-center items-center">
|
||||||
<Alert variant="destructive" class="w-1/3">
|
<div class="flex flex-col items-center space-y-4">
|
||||||
{{ i18n.t('dataset.common.onlyPreviewCreate') }}
|
<ShadcnAlert :title="i18n.t('dataset.common.onlyPreviewCreate')"/>
|
||||||
</Alert>
|
|
||||||
<Button>
|
<ShadcnButton>
|
||||||
<RouterLink to="/admin/query">
|
<RouterLink to="/admin/query">
|
||||||
{{ i18n.t('dataset.common.returnQuery') }}
|
{{ i18n.t('dataset.common.returnQuery') }}
|
||||||
</RouterLink>
|
</RouterLink>
|
||||||
</Button>
|
</ShadcnButton>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from 'vue'
|
import { defineComponent } from 'vue'
|
||||||
import Button from '@/views/ui/button'
|
|
||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from 'vue-i18n'
|
||||||
import GridOptions from '@/views/components/grid/GridOptions'
|
import GridOptions from '@/views/components/grid/GridOptions'
|
||||||
import DatasetService from '@/services/dataset'
|
import DatasetService from '@/services/dataset'
|
||||||
import { HttpUtils } from '@/utils/http'
|
import { HttpUtils } from '@/utils/http'
|
||||||
import { GridColumn } from '@/views/components/grid/GridColumn'
|
import { GridColumn } from '@/views/components/grid/GridColumn'
|
||||||
import PluginService from '@/services/plugin'
|
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 { AgGridVue } from 'ag-grid-vue3'
|
||||||
import 'ag-grid-community/styles/ag-grid.css'
|
import 'ag-grid-community/styles/ag-grid.css'
|
||||||
import '@/views/components/grid/ag-theme-datacap.css'
|
import '@/views/components/grid/ag-theme-datacap.css'
|
||||||
@ -314,24 +305,7 @@ import { join } from 'lodash'
|
|||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'DatasetInfo',
|
name: 'DatasetInfo',
|
||||||
components: {
|
components: { AceEditor, AgGridVue },
|
||||||
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
|
|
||||||
},
|
|
||||||
setup()
|
setup()
|
||||||
{
|
{
|
||||||
const i18n = useI18n()
|
const i18n = useI18n()
|
||||||
@ -372,15 +346,16 @@ export default defineComponent({
|
|||||||
data: null as ResponseModel | null,
|
data: null as ResponseModel | null,
|
||||||
sourceInfo: null as SourceModel | null,
|
sourceInfo: null as SourceModel | null,
|
||||||
value: '',
|
value: '',
|
||||||
running: false
|
running: false,
|
||||||
|
activeTab: 'columns'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created()
|
created()
|
||||||
{
|
{
|
||||||
this.handlerInitialize()
|
this.handleInitialize()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handlerInitialize()
|
handleInitialize()
|
||||||
{
|
{
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
PluginService.getPlugins()
|
PluginService.getPlugins()
|
||||||
@ -404,7 +379,7 @@ export default defineComponent({
|
|||||||
this.formState.source.id = info.data.source.id
|
this.formState.source.id = info.data.source.id
|
||||||
this.sourceInfo = info.data.source
|
this.sourceInfo = info.data.source
|
||||||
this.value = info.data.query
|
this.value = info.data.query
|
||||||
this.handlerRun()
|
this.onRun()
|
||||||
}
|
}
|
||||||
if (column.status) {
|
if (column.status) {
|
||||||
this.formState.columns = column.data
|
this.formState.columns = column.data
|
||||||
@ -426,7 +401,7 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
handlerCreate()
|
onSubmit()
|
||||||
{
|
{
|
||||||
if (!this.beforeCheck()) {
|
if (!this.beforeCheck()) {
|
||||||
this.saving = true
|
this.saving = true
|
||||||
@ -434,14 +409,18 @@ export default defineComponent({
|
|||||||
DatasetService.saveOrUpdate(this.formState as unknown as DatasetModel)
|
DatasetService.saveOrUpdate(this.formState as unknown as DatasetModel)
|
||||||
.then(response => {
|
.then(response => {
|
||||||
if (response.status) {
|
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')
|
this.$router.push('/admin/dataset')
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.finally(() => this.saving = false)
|
.finally(() => this.saving = false)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
handlerAddColumn(index: number)
|
onAddColumn(index: number)
|
||||||
{
|
{
|
||||||
this.formState.columns.splice(index + 1, 0, {
|
this.formState.columns.splice(index + 1, 0, {
|
||||||
id: null,
|
id: null,
|
||||||
@ -463,11 +442,11 @@ export default defineComponent({
|
|||||||
customColumn: true
|
customColumn: true
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
handlerRemoveColumn(index: number)
|
onRemoveColumn(index: number)
|
||||||
{
|
{
|
||||||
this.formState.columns.splice(index, 1)
|
this.formState.columns.splice(index, 1)
|
||||||
},
|
},
|
||||||
handlerRun()
|
onRun()
|
||||||
{
|
{
|
||||||
const configure: ExecuteModel = {
|
const configure: ExecuteModel = {
|
||||||
content: this.value,
|
content: this.value,
|
||||||
@ -510,7 +489,10 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
ToastUtils.error(response.message)
|
this.$Message.error({
|
||||||
|
content: response.message,
|
||||||
|
showIcon: true
|
||||||
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.finally(() => this.running = false)
|
.finally(() => this.running = false)
|
||||||
@ -563,15 +545,6 @@ export default defineComponent({
|
|||||||
this.validatorMessage = null
|
this.validatorMessage = null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
setMode(item: any, checked: boolean)
|
|
||||||
{
|
|
||||||
if (!checked) {
|
|
||||||
item.mode = 'METRIC'
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
item.mode = 'DIMENSION'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
setNullable(item: any, checked: boolean)
|
setNullable(item: any, checked: boolean)
|
||||||
{
|
{
|
||||||
item.nullable = checked
|
item.nullable = checked
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user