Commit bc46a4fa authored by chenjiahao's avatar chenjiahao

数据库离线加载-目标端配置

parent 86a68622
......@@ -48,7 +48,6 @@
},
{
field: 'incrementIdentificationColumnAlert',
component: 'Slot',
slot: 'incrementIdentificationColumnAlert',
ifShow: false,
},
......
......@@ -172,7 +172,6 @@ export const NewFieldRuleFormSchema: FormSchema[] = [
},
{
field: 'newFieldRuleAlert',
component: 'Slot',
slot: 'newFieldRuleAlert',
},
{
......@@ -184,7 +183,6 @@ export const NewFieldRuleFormSchema: FormSchema[] = [
// {
// field: 'newFieldType',
// label: '规则名称',
// component: 'Slot',
// slot: 'newFieldType',
// required: true,
// },
......@@ -211,7 +209,6 @@ export const FieldTypeMappingRuleFormSchema: FormSchema[] = [
},
{
field: 'newFieldRuleAlert',
component: 'Slot',
slot: 'newFieldRuleAlert',
},
{
......@@ -325,7 +322,6 @@ export const FieldNameMappingRuleFormSchema: FormSchema[] = [
},
{
field: 'regularExpressionAlert',
component: 'Slot',
slot: 'regularExpressionAlert',
},
{
......@@ -396,13 +392,11 @@ export const FieldNameMappingRuleFormSchema: FormSchema[] = [
{
field: 'reviewButton',
label: '',
component: 'Slot',
slot: 'reviewButton',
},
{
field: 'reviewTable',
label: '',
component: 'Slot',
slot: 'reviewTable',
},
];
......@@ -430,7 +424,6 @@ export const SingleTableFieldMappingRuleFormSchema: FormSchema[] = [
},
{
field: 'mappingTable',
component: 'Slot',
slot: 'mappingTable',
},
];
......@@ -126,7 +126,7 @@
<BasicTable title="数据转换规则" @register="registerMappingRuleConfigurationTable">
<template #toolbar>
<a-button
:disabled="getRowSelection().selectedRowKeys <= 0"
:disabled="getMappingRuleConfigurationRowSelection().selectedRowKeys <= 0"
type="primary"
@click="handleDeleteRules"
>删除规则</a-button
......@@ -172,17 +172,129 @@
</BasicTable>
</TabPane>
<TabPane key="3" tab="目标端配置">
<!-- <BasicForm>-->
<!-- </BasicForm>-->
<BasicForm @register="registerDestinationConfigurationForm">
<!--清空目标表单选框&高级配置-->
<template #isClearTargetTable>
<RadioGroup v-model:value="isClearTargetTable">
<Radio value="是"></Radio>
<Radio value="否"></Radio>
</RadioGroup>
<a-button type="link" @click="handleAdvancedConfigurationClick">
高级配置
<Icon v-if="unfoldAdvancedConfiguration" icon="fe:arrow-up" />
<Icon v-else icon="fe:arrow-down" />
</a-button>
<div
v-if="unfoldAdvancedConfiguration"
style="display: flex; align-items: center; gap: 5px; margin-top: 5px"
>
<CheckboxGroup v-model="selectAdvancedConfiguration">
<Checkbox :value="'清空目标表数据'">清空目标表数据</Checkbox>
<Checkbox :value="'删除目标表'">删除目标表</Checkbox>
<Checkbox
v-if="loadType === '增量数据加载'"
:value="'清空目标表在位点范围内的数据'"
>清空目标表在位点范围内的数据</Checkbox
>
</CheckboxGroup>
</div>
</template>
<!--编辑SQL按钮-->
<template #editSQL>
<div style="display: flex !important; justify-content: flex-end !important">
<a-button @click="handleChangeToEditSQL" type="primary">编辑SQL </a-button>
</div>
</template>
<!--切换至配置项按钮-->
<template #switchToTheConfigurationItem>
<div style="display: flex !important; justify-content: flex-end !important">
<a-button @click="handleChangeToTheConfigurationItem" type="primary"
>切换至配置项
</a-button>
</div>
</template>
<!--自定义查询SQL预览-->
<template #CodePreview>
<CodeEditor v-model:value="previewCustomSQL" />
</template>
<!--左侧配置表-->
<template #configurationTable>
<div style="display: flex; justify-content: space-between">
<div style="display: flex; gap: 5px">
<a-button @click="handleConfigurationTableSelectClick">
通过序号批量选择
<Icon v-if="unfoldConfigurationTableSelect" icon="fe:arrow-up" />
<Icon v-else icon="fe:arrow-down" />
</a-button>
<a-input-search style="width: 220px" @search="onSearch" />
</div>
<div style="display: flex; gap: 5px">
<a-button>分区数据处理</a-button>
<a-button>批量表名映射</a-button>
<a-button type="primary">批量配置</a-button>
</div>
</div>
<div
v-if="unfoldConfigurationTableSelect"
style="display: flex; align-items: center; gap: 5px; margin-top: 5px"
>
<a-input v-model:value="startId" class="getMetadataInput" style="width: 60px" />
<a-input v-model:value="endId" class="getMetadataInput" style="width: 60px" />
<a-button @click="handleTableSelect">选择</a-button>
<a-button @click="handleResetInputs">清空</a-button>
</div>
<BasicTable @register="registerConfigurationTable">
<template #configurationMode="{ text }">
<a-button v-if="text === 0" type="link">自定义查询SQL</a-button>
<a-button v-else type="link">配置项</a-button>
</template>
<template #partitionQuantityConfiguration>
<a-button type="link">未配置</a-button>
</template>
</BasicTable>
</template>
<!--右侧配置项表单-->
<template #configurationForm>
<BasicForm @register="registerConfigurationItemForm">
<!--SQL预览-->
<template #reviewSQL>
<div
style="
display: flex;
align-items: center;
justify-content: center;
height: 40px;
background-color: rgba(242, 243, 244, 0.48);
"
>
<a-button type="link">请通过批量或单个配置后预览SQL,也可手动编辑SQL</a-button>
</div>
</template>
<!--分区键-->
<template #partitionKey>
<BasicTable @register="registerPartitionKeyTable">
<template #addPartitionKey>
<a-button type="primary"><Icon icon="mi:add" />添加分区键</a-button>
</template>
</BasicTable>
</template>
<!--分区范围-->
<template #partitionRange> </template>
<!--其他配置-->
<template #otherConfiguration> </template>
</BasicForm>
</template>
</BasicForm>
</TabPane>
<TabPane key="4" tab="列表展示">
<!-- <BasicTable>-->
<!-- </BasicTable>-->
<!-- <BasicTable>-->
<!-- </BasicTable>-->
<TabPane key="4" tab="列表展示" style="display: flex">
<BasicTable @register="registerMappingRuleConfigurationTable">
<template #editSQL>
<div style="display: flex !important; justify-content: flex-end !important">
<a-button @click="handleGetMetadata" type="primary"> 编辑SQL </a-button>
</div>
</template>
</BasicTable>
<BasicTable @register="registerIsBatchCustomSQLTable" />
</TabPane>
</Tabs>
</div>
......@@ -192,7 +304,16 @@
</PageWrapper>
</template>
<script lang="ts" setup>
import { Tabs, TabPane, Alert, Modal } from 'ant-design-vue';
import {
Tabs,
TabPane,
Alert,
Modal,
RadioGroup,
Radio,
CheckboxGroup,
Checkbox,
} from 'ant-design-vue';
import { h, ref, onMounted } from 'vue';
import { BasicTree } from '@/components/Tree';
import { BasicForm, FormSchema, useForm } from '@/components/Form';
......@@ -200,6 +321,7 @@
isCustomSQLColumns,
notCustomSQLColumns,
mappingRuleConfigurationColumns,
configurationColumns,
} from './offlineLoading.data';
import Icon from '@/components/Icon/Icon.vue';
import { useMessage } from '@/hooks/web/useMessage';
......@@ -211,6 +333,7 @@
notCustomSQLTableList,
mappingRuleConfigurationTableList,
tableTreeData,
configurationTableList,
} from './mock';
import { router } from '@/router';
import { DeleteOutlined } from '@ant-design/icons-vue';
......@@ -225,15 +348,26 @@
const emit = defineEmits(['success', 'register']);
const { createMessage, createConfirm } = useMessage();
const myCheckedKeys = ref([]);
const unfoldAdvancedConfiguration = ref(false);
const unfoldConfigurationTableSelect = ref(false);
const isEdit = ref(true);
const previewCustomSQL = ref('SELECT * FROM user_info,customer_details,order_history');
let startId = ref();
let endId = ref();
let isCustomSQLTable = ref(isCustomSQLTableList);
let isBatchCustomSQLTable = ref(isBatchCustomSQLTableList);
let notCustomSQLTable = ref(notCustomSQLTableList);
let mappingRuleConfigurationTable = ref(mappingRuleConfigurationTableList);
let configurationTable = ref(configurationTableList);
let partitionKeyTable = ref(partitionKeyTableList);
let sql = ref('SELECT * FROM user_info,customer_details,order_history,product_inventory');
let metadataAcquisitionModeFlag = ref();
let customSQLFlag = ref();
let isParsingSQL = ref(false);
let isClearTargetTable = ref(false);
let loadType = ref('全量数据加载');
let configurationModeFlag = ref('');
let selectAdvancedConfiguration = ref();
const selectKey = ref('0');
const sourceSideConfigurationFormSchema: FormSchema[] = [
......@@ -352,7 +486,6 @@
{
field: 'getMetadata',
label: ' ',
component: 'Slot',
slot: 'getMetadata',
},
{
......@@ -386,12 +519,10 @@
},
{
field: 'quantityBasedAlert',
component: 'Slot',
slot: 'quantityBasedAlert',
},
{
field: 'conditionBasedAlert',
component: 'Slot',
slot: 'conditionBasedAlert',
ifShow: false,
},
......@@ -448,7 +579,6 @@
},
{
field: 'notCustomSQLTable',
component: 'Slot',
slot: 'notCustomSQLTable',
},
{
......@@ -463,19 +593,16 @@
{
field: 'parsingSQL',
label: ' ',
component: 'Slot',
slot: 'parsingSQL',
ifShow: false,
},
{
field: 'isCustomSQLAlert',
component: 'Slot',
slot: 'isCustomSQLAlert',
ifShow: false,
},
{
field: 'isCustomSQLTable',
component: 'Slot',
slot: 'isCustomSQLTable',
ifShow: isParsingSQL.value,
},
......@@ -491,12 +618,342 @@
},
{
field: 'isBatchCustomSQLTable',
component: 'Slot',
slot: 'isBatchCustomSQLTable',
ifShow: isParsingSQL.value,
},
];
const DestinationConfigurationFormSchema: FormSchema[] = [
{
field: 'dataSource',
label: '数据源',
component: 'Select',
colProps: { lg: 12, md: 12 },
componentProps: {
placeholder: '',
options: [
{ label: 'KunOB数据源', value: 'KunOB数据源' },
{ label: 'MongoDB数据源', value: 'MongoDB数据源' },
{ label: 'AmazonS3', value: 'AmazonS3' },
],
},
required: true,
},
{
field: 'isClearTargetTable',
label: '清空目标表',
colProps: { lg: 12, md: 12 },
slot: 'isClearTargetTable',
},
// {
// field: 'isClearTargetTable',
// label: '清空目标表',
// component: 'RadioGroup',
// defaultValue: '否',
// colProps: { lg: 12, md: 12 },
// componentProps: ({ formModel, formActionType }) => ({
// onChange: () => {
// // const flag = formModel.loadingStrategy === '基于数量';
// // formActionType.updateSchema([{ field: 'quantityBasedAlert', ifShow: flag }]);
// // formActionType.updateSchema([{ field: 'conditionBasedAlert', ifShow: !flag }]);
// // formActionType.updateSchema([{ field: 'cutDivision', ifShow: !flag }]);
// },
// options: [
// { label: '是', value: '是' },
// { label: '否', value: '否' },
// ],
// }),
// },
{
field: 'objectLibrary',
label: '目标库',
component: 'Select',
colProps: { lg: 12, md: 12 },
componentProps: {
placeholder: '',
options: [
{ label: 'maoyanceshi1', value: 'maoyanceshi1' },
{ label: 'bigevent', value: 'bigevent' },
{ label: 'database1', value: 'database1' },
],
},
required: true,
},
{
field: 'theMaximumNumberOfConcurrentRequestsAllowed',
label: '允许最大并发数',
component: 'Input',
colProps: { lg: 12, md: 12 },
componentProps: {
placeholder: '',
},
},
{
field: 'HDFSDataSource',
label: 'HDFS数据源',
component: 'Select',
colProps: { lg: 12, md: 12 },
componentProps: {
placeholder: '',
options: [
{ label: '546-hdfs', value: '546-hdfs' },
{ label: 'cluster1-hdfs', value: 'cluster1-hdfs' },
{ label: 'cluster2-hdfs', value: 'cluster2-hdfs' },
{ label: 'prod-hdfs', value: 'prod-hdfs' },
{ label: 'dev-hdfs', value: 'dev-hdfs' },
{ label: 'test-hdfs', value: 'test-hdfs' },
{ label: 'backup-hdfs', value: 'backup-hdfs' },
],
},
required: true,
},
{
field: 'isTargetTableSnapshot',
label: '目标表快照',
component: 'RadioGroup',
defaultValue: '否',
colProps: { lg: 12, md: 12 },
componentProps: ({ formModel, formActionType }) => ({
onChange: () => {
// const flag = formModel.loadingStrategy === '基于数量';
// formActionType.updateSchema([{ field: 'quantityBasedAlert', ifShow: flag }]);
// formActionType.updateSchema([{ field: 'conditionBasedAlert', ifShow: !flag }]);
// formActionType.updateSchema([{ field: 'cutDivision', ifShow: !flag }]);
},
options: [
{ label: '是', value: '是' },
{ label: '否', value: '否' },
],
}),
},
{
component: 'Divider',
},
{
field: 'isAutomaticTableConstruction',
label: '是否自动建表',
component: 'RadioGroup',
defaultValue: '否',
colProps: { lg: 12, md: 12 },
componentProps: ({ formModel, formActionType }) => ({
onChange: () => {
// const flag = formModel.loadingStrategy === '基于数量';
// formActionType.updateSchema([{ field: 'quantityBasedAlert', ifShow: flag }]);
// formActionType.updateSchema([{ field: 'conditionBasedAlert', ifShow: !flag }]);
// formActionType.updateSchema([{ field: 'cutDivision', ifShow: !flag }]);
},
options: [
{ label: '是', value: '是' },
{ label: '否', value: '否' },
],
}),
},
{
field: 'span',
label: ' ',
component: 'BasicTitle',
colProps: { lg: 6, md: 6 },
ifShow: [''].includes(configurationModeFlag.value),
},
{
field: 'SQLPreview',
label: 'SQL预览',
component: 'BasicTitle',
colProps: { lg: 6, md: 6 },
// colProps: { offset: 1 },
componentProps: {
style: {
fontsize: 16,
fontWeight: 'bold',
marginLeft: '25px',
},
},
ifShow: ['1'].includes(configurationModeFlag.value),
},
{
field: 'editSQL',
colProps: { lg: 6, md: 6 },
slot: 'editSQL',
ifShow: ['1'].includes(configurationModeFlag.value),
},
{
field: 'customQuerySQL',
label: '自定义查询SQL',
component: 'BasicTitle',
colProps: { lg: 6, md: 6 },
// colProps: { offset: 1 },
componentProps: {
style: {
fontsize: 16,
fontWeight: 'bold',
marginLeft: '25px',
},
},
ifShow: ['0'].includes(configurationModeFlag.value),
},
{
field: 'switchToTheConfigurationItem',
colProps: { lg: 6, md: 6 },
slot: 'switchToTheConfigurationItem',
ifShow: ['0'].includes(configurationModeFlag.value),
},
{
field: 'configurationTable',
colProps: { lg: 12, md: 12 },
slot: 'configurationTable',
},
{
field: 'configurationForm',
colProps: { lg: 12, md: 12 },
slot: 'configurationForm',
ifShow: ['1'].includes(configurationModeFlag.value),
},
{
field: 'CodePreview',
colProps: { lg: 12, md: 12 },
slot: 'CodePreview',
ifShow: ['0'].includes(configurationModeFlag.value),
},
];
const ConfigurationItemFormSchema: FormSchema[] = [
{
slot: 'reviewSQL',
},
{
field: 'tableType',
label: '表类型',
component: 'Select',
componentProps: {
placeholder: '',
options: [
{ label: 'ORC', value: 'ORC' },
{ label: 'Parquet', value: 'Parquet' },
{ label: 'CSV', value: 'CSV' },
{ label: 'JSON', value: 'JSON' },
{ label: 'Avro', value: 'Avro' },
{ label: 'Text', value: 'Text' },
{ label: 'SequenceFile', value: 'SequenceFile' },
{ label: 'RCFile', value: 'RCFile' },
{ label: 'HBase', value: 'HBase' },
{ label: 'Kafka', value: 'Kafka' },
],
},
},
{
field: 'partitionConfiguration',
label: '分区配置',
component: 'BasicTitle',
},
{
field: 'isSubzone',
label: '分区',
component: 'RadioGroup',
defaultValue: '无',
componentProps: ({ formModel, formActionType }) => ({
onChange: () => {
const updateFields = (partitionKey, partitionRange, partitionInterval) => {
formActionType.updateSchema([
{ field: 'partitionKey', ifShow: partitionKey },
{ field: 'partitionRange', ifShow: partitionRange },
{ field: 'partitionInterval', ifShow: partitionInterval },
]);
};
switch (formModel.isSubzone) {
case '无':
updateFields(false, false, false);
break;
case '单值分区':
updateFields(true, false, false);
break;
case '范围分区':
updateFields(true, true, true);
break;
default:
break;
}
},
options: [
{ label: '无', value: '无' },
{ label: '单值分区', value: '单值分区' },
{ label: '范围分区', value: '范围分区' },
],
}),
},
{
field: 'partitionKey',
label: '分区键',
slot: 'partitionKey',
ifShow: false,
},
{
field: 'partitionRange',
label: '分区范围',
slot: 'partitionRange',
ifShow: false,
},
{
field: 'partitionInterval',
label: '分区间隔',
component: 'Input',
colProps: { lg: 15, md: 15 },
componentProps: {
placeholder: '',
},
ifShow: false,
},
{
field: 'partitionBarrellingConfiguration',
label: '分桶配置',
component: 'BasicTitle',
},
{
field: 'isBarrelling',
label: '分桶',
component: 'RadioGroup',
defaultValue: '否',
colProps: { lg: 12, md: 12 },
componentProps: ({ formModel, formActionType }) => ({
onChange: () => {
const flag = formModel.isBarrelling === '是';
formActionType.updateSchema([{ field: 'barrellingKey', ifShow: flag }]);
formActionType.updateSchema([{ field: 'barrellingNumber', ifShow: flag }]);
formActionType.updateSchema([{ field: 'barrellingInfo', ifShow: flag }]);
},
options: [
{ label: '否', value: '否' },
{ label: '是', value: '是' },
],
}),
},
{
field: 'barrellingKey',
label: '分桶键',
component: 'Input',
// slot: 'partitionKey',
ifShow: false,
},
{
field: 'barrellingNumber',
label: '分桶个数',
component: 'Input',
// slot: 'partitionRange',
ifShow: false,
itemProps: {
extra: '分桶数量推荐为除31以外的质数',
},
},
{
field: 'otherConfigurationTitle',
label: '其他配置',
component: 'BasicTitle',
},
{
field: 'otherConfiguration',
slot: 'otherConfiguration',
},
];
const [registerGetMetadataModal, { openModal: openGetMetadataModal }] = useModal();
const [registerDeplysModal, { openModal: openDeplysModal }] = useModal();
const [registerAddRuleModal, { openModal: openAddRuleModal }] = useModal();
......@@ -530,6 +987,40 @@
},
});
const [
registerDestinationConfigurationForm,
{
updateSchema: updateDestinationConfigurationSchema,
setFieldsValue: setDestinationConfigurationFieldsValue,
},
] = useForm({
labelWidth: 180,
labelAlign: 'left',
baseColProps: { lg: 24, md: 24 },
schemas: DestinationConfigurationFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
const [
registerConfigurationItemForm,
{
updateSchema: updateConfigurationItemSchema,
setFieldsValue: setConfigurationItemFieldsValue,
},
] = useForm({
labelWidth: 180,
labelAlign: 'left',
baseColProps: { lg: 24, md: 24 },
schemas: ConfigurationItemFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
const [registerIsCustomSQLTable, { reload: isCustomSQLTableReload }] = useTable({
api: async () => {
isCustomSQLTable.value = isCustomSQLTableList.filter((item) => {
......@@ -609,7 +1100,10 @@
},
});
const [registerMappingRuleConfigurationTable, { getRowSelection }] = useTable({
const [
registerMappingRuleConfigurationTable,
{ getRowSelection: getMappingRuleConfigurationRowSelection },
] = useTable({
api: async () => {
const response = {
pageNu: '1',
......@@ -638,6 +1132,62 @@
},
});
const [
registerConfigurationTable,
{
reload,
getDataSource,
getRowSelection: getConfigurationTableRowSelection,
setSelectedRowKeys,
},
] = useTable({
api: async () => {
const response = {
pageNu: '1',
pageSize: '5',
pages: '1',
total: configurationTable.value.length,
code: '',
message: '',
data: configurationTable.value,
};
return { ...response };
},
scroll: { y: 300 },
rowKey: 'businessId',
rowSelection: true,
striped: false,
customRow: configurationTableOnClick,
columns: configurationColumns,
showTableSetting: false,
showIndexColumn: true,
bordered: false,
});
const [registerPartitionKeyTable] = useTable({
api: async () => {
const response = {
pageNu: '1',
pageSize: '5',
pages: '1',
total: partitionKeyTable.value.length,
code: '',
message: '',
data: partitionKeyTable.value,
};
return { ...response };
},
scroll: { y: 300 },
rowKey: 'businessId',
rowSelection: true,
striped: false,
customRow: partitionKeyTableCustomRow,
columns: partitionKeyColumns,
showTableSetting: false,
showIndexColumn: true,
bordered: false,
});
const actionList = [
{
//删除
......@@ -658,7 +1208,6 @@
});
});
// 删除节点
const handleDeleteTable = (node) => {
Modal.confirm({
title: '确认删除',
......@@ -759,7 +1308,9 @@
}
function handleDeleteRules() {
createMessage.success('批量删除数据转换规则成功' + getRowSelection().selectedRowKeys);
createMessage.success(
'批量删除数据转换规则成功' + getMappingRuleConfigurationRowSelection().selectedRowKeys,
);
}
function handleMoveTop(source) {
......@@ -808,6 +1359,116 @@
},
]);
}
function handleAdvancedConfigurationClick() {
unfoldAdvancedConfiguration.value = !unfoldAdvancedConfiguration.value;
}
function handleConfigurationTableSelectClick() {
unfoldConfigurationTableSelect.value = !unfoldConfigurationTableSelect.value;
}
function handleTableSelect() {
const selectedRowKeys = getConfigurationTableRowSelection().selectedRowKeys;
const ids = ref([...selectedRowKeys]);
const dataIds = ref(getDataSource());
if (startId.value && endId.value) {
for (let i = startId.value - 1; i <= endId.value - 1 && i < getDataSource().length; i++) {
const businessId = dataIds.value[i].businessId;
if (!ids.value.includes(businessId)) {
ids.value.push(businessId);
}
}
}
setSelectedRowKeys(ids.value);
}
function handleResetInputs() {
const selectedRowKeys = getConfigurationTableRowSelection().selectedRowKeys;
const ids = ref([...selectedRowKeys]);
const dataIds = ref(getDataSource());
if (startId.value && endId.value) {
const startIndex = startId.value - 1;
const endIndex = endId.value - 1;
// 过滤掉与 i 相等的值
const filteredIds = ids.value.filter((id) => {
for (let i = startIndex; i <= endIndex && i < getDataSource().length; i++) {
if (dataIds.value[i].businessId === id) {
return false;
}
}
return true;
});
// // 清空 startId 和 endId
// startId.value = null;
// endId.value = null;
setSelectedRowKeys(filteredIds);
}
}
function onSearch(searchValue) {
configurationTable.value = configurationTableList.filter(
(item) => item.sourceTableName.includes(searchValue) || searchValue === undefined,
);
reload();
}
function updateDestinationConfiguration() {
updateDestinationConfigurationSchema({
field: 'CodePreview',
ifShow: [0].includes(configurationModeFlag.value),
});
updateDestinationConfigurationSchema({
field: 'configurationForm',
ifShow: [1].includes(configurationModeFlag.value),
});
updateDestinationConfigurationSchema({
field: 'switchToTheConfigurationItem',
ifShow: [0].includes(configurationModeFlag.value),
});
updateDestinationConfigurationSchema({
field: 'customQuerySQL',
ifShow: [0].includes(configurationModeFlag.value),
});
updateDestinationConfigurationSchema({
field: 'editSQL',
ifShow: [1].includes(configurationModeFlag.value),
});
updateDestinationConfigurationSchema({
field: 'SQLPreview',
ifShow: [1].includes(configurationModeFlag.value),
});
updateDestinationConfigurationSchema({
field: 'span',
ifShow: ![0, 1].includes(configurationModeFlag.value),
});
}
function configurationTableOnClick(record) {
return {
onClick: () => {
// console.log(record, index, event);
configurationModeFlag.value = record.configurationMode;
updateDestinationConfiguration();
},
};
}
function handleChangeToTheConfigurationItem() {
configurationModeFlag.value = 1;
updateDestinationConfiguration();
}
function handleChangeToEditSQL() {
configurationModeFlag.value = 0;
updateDestinationConfiguration();
}
</script>
<style lang="scss" scoped>
.content-padding {
......@@ -832,4 +1493,7 @@
align-items: center;
}
}
.selected-row {
background-color: #5cb3ff; /* 可以根据需要调整颜色 */
}
</style>
......@@ -923,6 +923,57 @@ export const getMetadataTableList = [
},
];
export const configurationTableList = [
{
sourceTableName: 'bm_datasource',
targetTableName: 'bm_datasource',
configurationMode: 0,
businessId: '0',
},
{
sourceTableName: 'user_info',
targetTableName: 'user_info',
configurationMode: 1,
businessId: '1',
},
{
sourceTableName: 'customer_details',
targetTableName: 'customer_details',
configurationMode: 1,
businessId: '2',
},
{
sourceTableName: 'order_history',
targetTableName: 'order_history',
configurationMode: 1,
businessId: '3',
},
{
sourceTableName: 'product_inventory',
targetTableName: 'product_inventory',
configurationMode: 1,
businessId: '4',
},
{
sourceTableName: 'transaction_logs',
targetTableName: 'transaction_logs',
configurationMode: 1,
businessId: '5',
},
{
sourceTableName: 'employee_records',
targetTableName: 'employee_records',
configurationMode: 1,
businessId: '6',
},
{
sourceTableName: 'payment_details',
targetTableName: 'payment_details',
configurationMode: 1,
businessId: '7',
},
];
export const mappingRuleConfigurationTableList = [
{
businessId: '1',
......@@ -951,7 +1002,7 @@ export const mappingRuleConfigurationTableList = [
},
];
export const newFieldTypeOptions = [
export const fieldTypeOptions = [
'INT', // 整型
'BIGINT', // 大整型
'FLOAT', // 浮点型
......@@ -1181,7 +1232,6 @@ export const goalFieldNameMappingRuleTableList = [
{
businessId: '1',
ownershipTableId: '1',
fieldName: 'uuid',
targetFieldName: 'test_uuid_obs',
annotation: '-',
fieldType: 'VARCHAR(50)',
......@@ -1189,7 +1239,6 @@ export const goalFieldNameMappingRuleTableList = [
{
businessId: '2',
ownershipTableId: '1',
fieldName: 'catalog_id',
targetFieldName: 'test_catalog_id_obs',
annotation: '-',
fieldType: 'BIGINT(19)',
......@@ -1197,7 +1246,6 @@ export const goalFieldNameMappingRuleTableList = [
{
businessId: '3',
ownershipTableId: '1',
fieldName: 'name',
targetFieldName: 'test_name_obs',
annotation: '-',
fieldType: 'VARCHAR(255)',
......@@ -1205,7 +1253,6 @@ export const goalFieldNameMappingRuleTableList = [
{
businessId: '4',
ownershipTableId: '1',
fieldName: 'description',
targetFieldName: 'test_description_obs',
annotation: '-',
fieldType: 'TEXT',
......@@ -1213,7 +1260,6 @@ export const goalFieldNameMappingRuleTableList = [
{
businessId: '5',
ownershipTableId: '2',
fieldName: 'uuid',
targetFieldName: 'test_uuid_obs_2',
annotation: '-',
fieldType: 'VARCHAR(50)',
......@@ -1221,7 +1267,6 @@ export const goalFieldNameMappingRuleTableList = [
{
businessId: '6',
ownershipTableId: '2',
fieldName: 'user_id',
targetFieldName: 'test_user_id_obs',
annotation: '-',
fieldType: 'BIGINT(19)',
......@@ -1229,7 +1274,6 @@ export const goalFieldNameMappingRuleTableList = [
{
businessId: '7',
ownershipTableId: '2',
fieldName: 'username',
targetFieldName: 'test_username_obs',
annotation: '-',
fieldType: 'VARCHAR(255)',
......@@ -1237,7 +1281,6 @@ export const goalFieldNameMappingRuleTableList = [
{
businessId: '8',
ownershipTableId: '2',
fieldName: 'email',
targetFieldName: 'test_email_obs',
annotation: '-',
fieldType: 'VARCHAR(255)',
......@@ -1245,7 +1288,6 @@ export const goalFieldNameMappingRuleTableList = [
{
businessId: '9',
ownershipTableId: '3',
fieldName: 'uuid',
targetFieldName: 'test_uuid_obs_3',
annotation: '-',
fieldType: 'VARCHAR(50)',
......@@ -1253,7 +1295,6 @@ export const goalFieldNameMappingRuleTableList = [
{
businessId: '10',
ownershipTableId: '3',
fieldName: 'order_id',
targetFieldName: 'test_order_id_obs',
annotation: '-',
fieldType: 'BIGINT(19)',
......@@ -1261,9 +1302,56 @@ export const goalFieldNameMappingRuleTableList = [
{
businessId: '11',
ownershipTableId: '3',
fieldName: 'total_amount',
targetFieldName: 'test_total_amount_obs',
annotation: '-',
fieldType: 'DECIMAL(10,2)',
},
];
export const partitionKeyTable = [
{
businessId: '1',
ownershipTableId: '1',
fieldName: 'test_uuid_obs',
annotation: '-',
fieldType: 'VARCHAR(50)',
},
{
businessId: '2',
ownershipTableId: '2',
fieldName: 'test_catalog_id_obs',
annotation: '-',
fieldType: 'BIGINT(19)',
},
];
export const partitionRangeTable = [
{
businessId: '1',
ownershipTableId: '1',
name: 'test_uuid_obs',
value: 'test_uuid_obs>10',
},
{
businessId: '2',
ownershipTableId: '2',
name: 'test_catalog_id_obs',
value: 'test_catalog_id_obs!==100',
},
];
export const otherConfigurationTable = [
{
businessId: '1',
ownershipTableId: '1',
otherConfigurationType: '表注释',
otherConfigurationContent: '这是个测试用表',
},
{
businessId: '2',
ownershipTableId: '2',
otherConfigurationType: '表注释',
otherConfigurationContent: '这是个测试用表',
},
];
import { FormSchema } from '@/components/Form';
import { BasicColumn } from '@/components/Table';
import {
goalFieldNameMappingRuleTableList,
sourceFieldNameMappingRuleTableList
} from "@/views/dataIntegration/dataLoading/dataEntryLake/mock";
export const isCustomSQLColumns: BasicColumn[] = [
{
......@@ -23,6 +19,28 @@ export const getMetadataColumns: BasicColumn[] = [
},
];
export const configurationColumns: BasicColumn[] = [
{
title: '源端',
dataIndex: 'sourceTableName',
},
{
title: '目标端',
dataIndex: 'targetTableName',
edit: true,
},
{
title: '配置方式',
dataIndex: 'configurationMode',
slots: { customRender: 'configurationMode' },
},
{
title: '分区数量配置',
dataIndex: 'partitionQuantityConfiguration',
slots: { customRender: 'partitionQuantityConfiguration' },
},
];
export const notCustomSQLColumns: BasicColumn[] = [
{
title: '列名',
......
......@@ -164,7 +164,6 @@ export const formSchema: any[] = [
},
{
field: 'requestParameters',
component: 'Slot',
label: ' ',
labelWidth: 20,
slot: 'requestParameters',
......@@ -203,7 +202,6 @@ export const formSchema: any[] = [
field: 'returnParameter',
label: ' ',
labelWidth: 20,
component: 'Slot',
slot: 'returnParameter',
},
{
......@@ -221,7 +219,6 @@ export const formSchema: any[] = [
},
{
field: 'sensitiveRules',
component: 'Slot',
label: ' ',
labelWidth: 16,
slot: 'sensitiveRules',
......
......@@ -569,12 +569,15 @@
target = index;
// 这里就是让数据位置互换,让视图更新 你们可以看record,index的输出,看是什么
console.log(tableData);
// [tableData.value[source], tableData.value[target]] = [tableData.value[target], tableData.value[source]];
const temp = ref();
temp.value = tableData.value[source];
tableData.value[source] = tableData.value[target];
tableData.value[target] = temp.value;
console.log(record, index, 'target', source, target);
[tableData.value[source], tableData.value[target]] = [
tableData.value[target],
tableData.value[source],
];
// const temp = ref();
// temp.value = tableData.value[source];
// tableData.value[source] = tableData.value[target];
// tableData.value[target] = temp.value;
// console.log(record, index, 'target', source, target);
},
};
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment