Skip to content

B
bigDataSystem
Commit 85c0d722 authored by liwei's avatar liwei
Browse files
Options

Merge remote-tracking branch 'origin/master'

parents 601cbca4 506faa35
Hide whitespace changes
Inline Side-by-side
Showing with 1759 additions and 6 deletions
src/views/dataIntegration/dataLakePunctual/dataLakePunctual.data.ts 0 → 100644
View file @ 85c0d722
import {BasicColumn, FormSchema} from "@/components/Table";
/**源端配置-left-表单 */
export const sourceSideConfigurationFormSchema: FormSchema[] = [
{
field: 'logParser',
label: '日志解析器',
component: 'RadioGroup',
defaultValue: '1',
componentProps: ({ formModel, formActionType }) => ({
onChange: () => {
loadType.value = formModel.loadType;
},
options: [
{ label: 'Canal', value: '1' },
{ label: 'OGG', value: '2' },
],
}),
},
{
field: 'metadataAcquisitionMode',
label: '元数据获取方式',
component: 'RadioGroup',
defaultValue: '从JDBC获取元数据',
show: ({ model }) => {
return model.logParser === '2';
},
// show: false,
componentProps: ({ formModel, formActionType }) => ({
options: [
{ label: '从JDBC获取元数据', value: '从JDBC获取元数据' },
// { label: '自定义SQL', value: '自定义SQL' },
{ label: '导入元数据文件', value: '导入元数据文件' },
],
}),
},
{
field: 'dataSource',
label: '数据源',
component: 'Select',
required: true,
defaultValue: [],
componentProps: {
placeholder: '请选择数据源',
options: [
{ label: 'KunOB数据源', value: 'KunOB数据源' },
{ label: 'MongoDB数据源', value: 'MongoDB数据源' },
{ label: 'AmazonS3', value: 'AmazonS3' },
],
},
},
{
field: 'dataBase',
label: '数据库',
component: 'Cascader',
required: true,
componentProps: {
placeholder: '请选择数据源',
displayRender: ({ labels }) => {
return labels[labels.length - 1];
},
options: [
{
value: '数据库对象资源',
label: '数据库对象资源',
children: [
{
value: '数据中台工作区01',
label: '数据中台工作区01',
children: [
{
value: 'ArgoDB_Dev01',
label: 'ArgoDB_Dev01',
},
{
value: 'ArgoDB_Dev02',
label: 'ArgoDB_Dev02',
},
{
value: 'GbaseDB_Dev01',
label: 'GbaseDB_Dev01',
},
],
},
],
},
],
},
},
{
field: 'getMetadata',
label: ' ',
component: 'Slot',
slot: 'getMetadata',
},
];
/**源端配置-获取元数据按钮(弹窗)-字段名 */
export const getMetadataColumns: BasicColumn[] = [
{
title: '表名',
dataIndex: 'tableName',
},
];
/**源端配置-右-列表字段配置 */
export const notCustomSQLColumns: BasicColumn[] = [
{
title: '列名',
dataIndex: 'fieldName',
},
{
title: '类型',
dataIndex: 'fieldType',
},
];
src/views/dataIntegration/dataLakePunctual/getMetadataModal.vue 0 → 100644
View file @ 85c0d722
<template>
<BasicModal
v-bind="$attrs"
@register="registerModal"
title="获取元数据"
@ok="handleSubmit"
minHeight="50"
>
<div style="display: flex; justify-content: space-between">
<a-input-search style="width: 220px" @search="onSearch" />
<a-button @click="handleClick">
通过序号批量选择
<Icon v-if="unfold" icon="fe:arrow-up" />
<Icon v-else icon="fe:arrow-down" />
</a-button>
</div>
<div v-if="unfold" style="margin-top: 5px">
从<a-input
v-model:value="startId"
class="getMetadataInput"
style="margin-right: 10px; margin-left: 10px"
/>
到<a-input
v-model:value="endId"
class="getMetadataInput"
style="margin-right: 10px; margin-left: 10px"
/>
<a-button @click="handleSelect" style="margin-right: 10px">选择</a-button>
<a-button @click="handleResetInputs" style="margin-right: 10px">清空</a-button>
</div>
<BasicTable @register="registerTable" />
</BasicModal>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { BasicTable, useTable } from '@/components/Table';
import { BasicModal, useModalInner } from '@/components/Modal';
import { useMessage } from '@/hooks/web/useMessage';
import { getMetadataTableList } from './mock'
import { getMetadataColumns } from './dataLakePunctual.data';
import Icon from '@/components/Icon/Icon.vue';
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const unfold = ref(false);
let startId = ref();
let endId = ref();
let getMetadataTable = ref(getMetadataTableList);
const [registerTable, { reload, getDataSource, getRowSelection, setSelectedRowKeys }] = useTable({
api: async () => {
const response = {
pageNu: '1',
pageSize: '5',
pages: '1',
total: getMetadataTable.value.length,
code: '',
message: '',
data: getMetadataTable.value,
};
return { ...response };
},
scroll: { y: 300 },
rowKey: 'businessId',
rowSelection: true,
columns: getMetadataColumns,
showTableSetting: false,
showIndexColumn: true,
bordered: false,
});
//初始化弹框
const [registerModal, { closeModal }] = useModalInner(async () => {});
function handleClick() {
unfold.value = !unfold.value;
}
/**确定按钮*/
async function handleSubmit() {
closeModal();
}
/**获取元数据-选择按钮*/
function handleSelect() {
const selectedRowKeys = getRowSelection().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 = getRowSelection().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) {
getMetadataTable.value = getMetadataTableList.filter((item) =>
item.tableName.includes(searchValue),
);
reload();
}
</script>
<style scoped lang="scss">
.getMetadataInput {
width: 120px;
}
</style>
src/views/dataIntegration/dataLakePunctual/index.vue 0 → 100644
View file @ 85c0d722
<template>
<PageWrapper class="content-padding" contentBackground @back="goBack">
<!-- <template #headerContent>-->
<!-- <div class="modal_top">-->
<!-- <Icon-->
<!-- icon="ep:arrow-left-bold"-->
<!-- :size="20"-->
<!-- style="margin-right: 5px"-->
<!-- :color="'#a3a7b1'"-->
<!-- @click="goBack"-->
<!-- />-->
<!-- <div>-->
<!-- <Icon icon="iconoir:db" :size="40" :color="'#9064e9'" />-->
<!-- </div>-->
<!-- <div>-->
<!-- <div class="title">离线加载</div>-->
<!-- <div class="path">数据加载/离线加载</div>-->
<!-- </div>-->
<!-- <div class="buttonGroup">-->
<!-- <a-button type="primary" @click="handleOperation">跳转运维</a-button>-->
<!-- <a-button type="primary" @click="handleSave">保存</a-button>-->
<!-- <a-button type="primary" @click="handleDebug">调试</a-button>-->
<!-- <a-button type="primary" @click="handleRun">运行</a-button>-->
<!-- <a-button type="primary" @click="handlePublish">发布</a-button>-->
<!-- <a-button type="primary" @click="handleGobalDeply">全局配置</a-button>-->
<!-- <a-button type="primary" @click="handleParameterConfiguration">参数配置</a-button>-->
<!-- <a-button type="primary" @click="handleVersionManagement">版本管理</a-button>-->
<!-- </div>-->
<!-- </div>-->
<!-- </template>-->
<div>
<Tabs>
<TabPane key="1" tab="源端配置">
<div style="display: flex">
<div class="w-3/10">
<BasicForm @register="registerSourceSideConfigurationForm" style="width: 100%">
<template #getMetadata="{ field, model }">
<div style="display: flex" v-if="model.logParser === '1'">
<a-button @click="handleGetMetadata" type="primary">获取元数据</a-button>
<a-button class="ml-3" @click="handleCanalConfiguration" type="primary"
>Canal配置</a-button
>
</div>
<div style="display: flex" v-if="model.logParser === '2'">
<a-button :disabled="!model.dataBase" @click="handleGetMetadata" type="primary"
>获取元数据</a-button
>
</div>
</template>
</BasicForm>
<Alert
show-icon
style="font-size: 12px"
message="同步任务首次执行后，更改源表可能会导致日志同步出现问题，请谨慎选择源表，避免更改！"
type="info"
/>
</div>
<div style="width: 20%; padding: 0 5px 5px">
<BasicTree
title="表头"
:search="true"
v-if="!metadataAcquisitionModeFlag"
:checkable="false"
:actionList="actionList"
:treeData="tableTreeData"
v-model:checkedKeys="myCheckedKeys"
@select="handleSelect"
>
</BasicTree>
<!-- <div v-else>-->
<!-- <div style="display: flex; justify-content: space-between">-->
<!-- <strong>自定义查询SQL</strong>-->
<!-- <a-button type="primary" style="margin-right: 5px" @click="handleParsingSQL"-->
<!-- >解析SQL</a-button-->
<!-- >-->
<!-- </div>-->
<!-- <CodeEditor v-model:value="sql" style="height: 100%" />-->
<!-- </div>-->
</div>
<BasicForm @register="registerLoadingStrategyForm" style="width: 50%">
<!-- <template #quantityBasedAlert>-->
<!-- <Alert-->
<!-- show-icon-->
<!-- style="font-size: 12px"-->
<!-- message="基于数量的加载策略，要求在进行数据加载时，源端的表不要发生数据变更，否则可能会出现数据加载异常。"-->
<!-- type="info"-->
<!-- />-->
<!-- </template>-->
<!-- <template #conditionBasedAlert>-->
<!-- <Alert-->
<!-- show-icon-->
<!-- message="基于条件的加载策略，要求选中的切分列的数据分布均匀，否则会出现数据倾斜，影响数据加载性能，其中切分的类型推荐使用数值型或时间类型，不支持字符串类型的字段作为切分列，否则也会丢数。"-->
<!-- type="info"-->
<!-- style="font-size: 12px"-->
<!-- />-->
<!-- </template>-->
<!-- <template #isCustomSQLAlert>-->
<!-- <Alert-->
<!-- show-icon-->
<!-- message="自定义SQL模式下，只支持查询SQL，且无论是新增还是修改SQL都需要点击解析SQL对字段更新。"-->
<!-- type="warning"-->
<!-- style="font-size: 12px"-->
<!-- />-->
<!-- </template>-->
<!-- <template #parsingSQL>-->
<!-- <a-button type="primary" @click="handleParsingSQL">解析SQL</a-button>-->
<!-- </template>-->
<!-- <template #isCustomSQLTable>-->
<!-- <BasicTable @register="registerIsCustomSQLTable" />-->
<!-- </template>-->
<!-- <template #isBatchCustomSQLTable>-->
<!-- <BasicTable @register="registerIsBatchCustomSQLTable" />-->
<!-- </template>-->
<template #notCustomSQLTable>
<BasicTable @register="registerNotCustomSQLTable">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
label: '删除',
onClick: handleDelete.bind(null, record),
},
]"
/>
</template>
</template>
</BasicTable>
</template>
</BasicForm>
</div>
</TabPane>
<TabPane key="2" tab="映射规则配置">
<BasicTable title="数据转换规则" @register="registerMappingRuleConfigurationTable">
<template #toolbar>
<a-button
:disabled="getRowSelection().selectedRowKeys <= 0"
type="primary"
@click="handleDeleteRules"
>删除规则</a-button
>
<a-button type="primary" @click="handleAddRule">新增规则</a-button>
</template>
<template #executionSequence="{ index }">
<div style="display: flex; justify-content: center; color: dimgray">
<Icon
style="font-size: 30px !important"
icon="material-symbols-light:keyboard-double-arrow-up"
@click="handleMoveTop(index)"
/>
<Icon
style="font-size: 20px !important; margin-right: 5px"
icon="oui:arrow-down"
@click="handleMoveDown(index)"
/>
<Icon
style="font-size: 20px !important"
icon="oui:arrow-up"
@click="handleMoveUp(index)"
/>
</div>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
stopButtonPropagation
:actions="[
{
icon: 'iconamoon:edit',
onClick: handleEdit.bind(null, record),
},
{
icon: 'ic:outline-delete-outline',
onClick: handleDeleteRule.bind(null, record),
},
]"
/>
</template>
</template>
</BasicTable>
</TabPane>
<TabPane key="3" tab="目标端配置">
<!-- <BasicForm>-->
<!-- </BasicForm>-->
</TabPane>
<TabPane key="4" tab="列表展示">
<!-- <BasicTable>-->
<!-- </BasicTable>-->
<!-- <BasicTable>-->
<!-- </BasicTable>-->
</TabPane>
</Tabs>
</div>
<GetMetadataModal @register="registerGetMetadataModal" />
<DeplysModal @register="registerDeplysModal" />
<AddDataConversionRuleModal @register="registerAddRuleModal" />
<DataOptionsModal @register="registerDataOptionsModal" />
<GlobalOptionsModal @register="registerGlobalOptionsModal" />
<SaveModal @register="registerSaveModal" />
<VersionManageModal @register="registerVersionManageModal" />
<RunOptionsModal @register="registerRunOptionsModal" />
</PageWrapper>
</template>
<script lang="ts" setup>
import { Tabs, TabPane, Alert, Modal,Select } from 'ant-design-vue';
import { h, ref, onMounted } from 'vue';
import { BasicTree } from '@/components/Tree';
import { BasicForm, FormSchema, useForm } from '@/components/Form';
import { notCustomSQLColumns,sourceSideConfigurationFormSchema } from './dataLakePunctual.data';
import {
isCustomSQLColumns
,
mappingRuleConfigurationColumns,//外（转内进行中）
} from '../dataLoading/dataEntryLake/offlineLoading.data';
import Icon from '@/components/Icon/Icon.vue';
import { useMessage } from '@/hooks/web/useMessage';
import { PageWrapper } from '@/components/Page';
import { useRoute } from 'vue-router';
import { tableTreeData,notCustomSQLTableList } from './mock'
import {//外（转内进行中）
isCustomSQLTableList
// isBatchCustomSQLTableList,
,
mappingRuleConfigurationTableList,
} from '../dataLoading/dataEntryLake/mock';
import { router } from '@/router';
import { DeleteOutlined } from '@ant-design/icons-vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { useModal } from '@/components/Modal';
import GetMetadataModal from './getMetadataModal.vue';
import DeplysModal from '@/views/dataIntegration/dataLoading/dataEntryLake/DeplysModal.vue';
import CodeEditor from '@/components/CodeEditor/src/CodeEditor.vue';
import AddDataConversionRuleModal from '@/views/dataIntegration/dataLoading/dataEntryLake/addDataConversionRuleModal.vue';
import DataOptionsModal from '@/views/dataIntegration/dataLoading/dataEntryLake/dataOptionsModal.vue';
import GlobalOptionsModal from '@/views/dataIntegration/dataLoading/dataEntryLake/globalOptionsModal.vue';
import SaveModal from '@/views/dataIntegration/dataLoading/dataEntryLake/saveModal.vue';
import VersionManageModal from '@/views/dataIntegration/dataLoading/dataEntryLake/versionManageModal.vue';
import RunOptionsModal from '@/views/dataIntegration/dataLoading/dataEntryLake/runOptionsModal.vue';
const route = useRoute();
const emit = defineEmits(['success', 'register']);
const { createMessage, createConfirm } = useMessage();
const myCheckedKeys = ref([]);
let isCustomSQLTable = ref(isCustomSQLTableList);
// let isBatchCustomSQLTable = ref(isBatchCustomSQLTableList);
let notCustomSQLTable = ref(notCustomSQLTableList);
let mappingRuleConfigurationTable = ref(mappingRuleConfigurationTableList);
let sql = ref('SELECT * FROM user_info,customer_details,order_history,product_inventory');
let metadataAcquisitionModeFlag = ref();
let customSQLFlag = ref();
let isParsingSQL = ref(false);
let loadType = ref('1');
const selectKey = ref('0');
// const sourceSideConfigurationFormSchema: FormSchema[] = [
// {
// field: 'logParser',
// label: '日志解析器',
// component: 'RadioGroup',
// defaultValue: '1',
// componentProps: ({ formModel, formActionType }) => ({
// onChange: () => {
// loadType.value = formModel.loadType;
// },
// options: [
// { label: 'Canal', value: '1' },
// { label: 'OGG', value: '2' },
// ],
// }),
// },
// {
// field: 'metadataAcquisitionMode',
// label: '元数据获取方式',
// component: 'RadioGroup',
// defaultValue: '从JDBC获取元数据',
// show: ({ model }) => {
// return model.logParser === '2';
// },
// // show: false,
// componentProps: ({ formModel, formActionType }) => ({
// onChange: () => {
// isParsingSQL.value = false;
// metadataAcquisitionModeFlag.value = formModel.metadataAcquisitionMode === '自定义SQL';
// const flag = !metadataAcquisitionModeFlag.value;
// updateSchema([{ field: 'filterCondition', ifShow: flag && customSQLFlag.value }]);
// updateSchema([{ field: 'notCustomSQLTable', ifShow: flag && customSQLFlag.value }]);
// updateSchema([{ field: 'customSQL', ifShow: flag }]);
// updateSchema([{ field: 'querySQL', ifShow: flag && !customSQLFlag.value }]);
// updateSchema([{ field: 'parsingSQL', ifShow: flag && !customSQLFlag.value }]);
// updateSchema([{ field: 'isCustomSQLAlert', ifShow: flag && !customSQLFlag.value }]);
// updateSchema([
// {
// field: 'isCustomSQLTable',
// ifShow: flag && !customSQLFlag.value && isParsingSQL.value,
// },
// ]);
// updateSchema([{ field: 'sourceDataTableName', ifShow: !flag }]);
// // updateSchema([{ field: 'isBatchCustomSQLTable', ifShow: !flag && isParsingSQL.value }]);
// formActionType.updateSchema([{ field: 'dataBase', ifShow: flag }]);
// formActionType.updateSchema([{ field: 'metadataType', ifShow: flag }]);
// formActionType.updateSchema([{ field: 'getMetadata', ifShow: flag }]);
// },
// options: [
// { label: '从JDBC获取元数据', value: '从JDBC获取元数据' },
// // { label: '自定义SQL', value: '自定义SQL' },
// { label: '导入元数据文件', value: '导入元数据文件' },
// ],
// }),
// },
// {
// field: 'dataSource',
// label: '数据源',
// component: 'Select',
// required: true,
// defaultValue: [],
// componentProps: {
// placeholder: '请选择数据源',
// options: [
// { label: 'KunOB数据源', value: 'KunOB数据源' },
// { label: 'MongoDB数据源', value: 'MongoDB数据源' },
// { label: 'AmazonS3', value: 'AmazonS3' },
// ],
// },
// },
// {
// field: 'dataBase',
// label: '数据库',
// component: 'Cascader',
// required: true,
// componentProps: {
// placeholder: '请选择数据源',
// displayRender: ({ labels }) => {
// return labels[labels.length - 1];
// },
// options: [
// {
// value: '数据库对象资源',
// label: '数据库对象资源',
// children: [
// {
// value: '数据中台工作区01',
// label: '数据中台工作区01',
// children: [
// {
// value: 'ArgoDB_Dev01',
// label: 'ArgoDB_Dev01',
// },
// {
// value: 'ArgoDB_Dev02',
// label: 'ArgoDB_Dev02',
// },
// {
// value: 'GbaseDB_Dev01',
// label: 'GbaseDB_Dev01',
// },
// ],
// },
// ],
// },
// ],
// },
// },
// // {
// // field: 'metadataType',
// // label: '元数据类型',
// // component: 'Input',
// // required: true,
// // componentProps: {
// // placeholder: '以,分隔输入元数据类型',
// // },
// // show: ({ model }) => {
// // return model.logParser === '2';
// // },
// // },
// {
// field: 'getMetadata',
// label: ' ',
// component: 'Slot',
// slot: 'getMetadata',
// },
//
// ];
const LoadingStrategyFormSchema: FormSchema[] = [
// {
// field: 'loadingStrategy',
// label: '加载策略',
// component: 'RadioGroup',
// defaultValue: '基于数量',
// 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: 'quantityBasedAlert',
// component: 'Slot',
// slot: 'quantityBasedAlert',
// },
// {
// field: 'conditionBasedAlert',
// component: 'Slot',
// slot: 'conditionBasedAlert',
// ifShow: false,
// },
{
field: 'primaryKeyColumn',
label: '主键列',
component: 'Select',
colProps: { lg: 23, md: 23 },
componentProps: {
mode: 'multiple'
},
ifShow: false,
required: true,
},
// {
// component: 'Divider',
// },
// {
// field: 'customSQL',
// label: '自定义SQL',
// component: 'RadioGroup',
// defaultValue: '否',
// required: true,
// componentProps: ({ formModel, formActionType }) => ({
// onChange: () => {
// isParsingSQL.value = false;
// customSQLFlag.value = formModel.customSQL === '否';
// formActionType.updateSchema([{ field: 'filterCondition', ifShow: customSQLFlag.value }]);
// formActionType.updateSchema([
// { field: 'notCustomSQLTable', ifShow: customSQLFlag.value },
// ]);
// formActionType.updateSchema([{ field: 'querySQL', ifShow: !customSQLFlag.value }]);
// formActionType.updateSchema([{ field: 'parsingSQL', ifShow: !customSQLFlag.value }]);
// formActionType.updateSchema([
// { field: 'isCustomSQLAlert', ifShow: !customSQLFlag.value },
// ]);
// formActionType.updateSchema([
// { field: 'isCustomSQLTable', ifShow: !customSQLFlag.value && isParsingSQL.value },
// ]);
// },
// options: [
// { label: '是', value: '是' },
// { label: '否', value: '否' },
// ],
// }),
// },
// {
// field: 'filterCondition',
// label: '过滤条件',
// component: 'InputTextArea',
// componentProps: {
// placeholder: '请输入',
// },
// },
{
field: 'notCustomSQLTable',
component: 'Slot',
slot: 'notCustomSQLTable',
// ifShow: false,
},
// {
// field: 'querySQL',
// label: '查询SQL',
// component: 'InputTextArea',
// componentProps: {
// placeholder: '请输入',
// },
// ifShow: false,
// },
{
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,
},
{
field: 'sourceDataTableName',
label: '源端数据表名',
component: 'Input',
colProps: { lg: 11, md: 11 },
componentProps: {
placeholder: '',
},
ifShow: false,
},
// {
// field: 'isBatchCustomSQLTable',
// component: 'Slot',
// slot: 'isBatchCustomSQLTable',
// ifShow: isParsingSQL.value,
// },
];
const [registerGetMetadataModal, { openModal: openGetMetadataModal }] = useModal();
const [registerDeplysModal, { openModal: openDeplysModal }] = useModal();
const [registerAddRuleModal, { openModal: openAddRuleModal }] = useModal();
const [registerDataOptionsModal, { openModal: openDataOptionsModal }] = useModal();
const [registerGlobalOptionsModal, { openModal: openGlobalOptionsModal }] = useModal();
const [registerSaveModal, { openModal: openSaveModal }] = useModal();
const [registerVersionManageModal, { openModal: openVersionManageModal }] = useModal();
const [registerRunOptionsModal, { openModal: openRunOptionsModal }] = useModal();
const [
registerSourceSideConfigurationForm,
{
getFieldsValue,
validate: validateSourceSideConfigurationForm,
submit: submitSourceSideConfiguration,
},
] = useForm({
labelWidth: 120,
labelAlign: 'left',
baseColProps: { lg: 24, md: 24 },
schemas: sourceSideConfigurationFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
const [registerLoadingStrategyForm, { updateSchema, setFieldsValue }] = useForm({
labelWidth: 130,
labelAlign: 'left',
baseColProps: { lg: 24, md: 24 },
schemas: LoadingStrategyFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
const [registerIsCustomSQLTable, { reload: isCustomSQLTableReload }] = useTable({
api: async () => {
isCustomSQLTable.value = isCustomSQLTableList.filter((item) => {
return item.ownershipTableId[0] === selectKey.value;
});
const response = {
pageNu: '1',
pageSize: '5',
pages: '1',
total: isCustomSQLTable.value.length,
code: '',
message: '',
data: isCustomSQLTable.value,
};
return { ...response };
},
scroll: { y: 300 },
rowKey: 'businessId',
columns: isCustomSQLColumns,
showTableSetting: false,
showIndexColumn: false,
bordered: false,
});
const [registerIsBatchCustomSQLTable] = useTable({
api: async () => {
const response = {
pageNu: '1',
pageSize: '5',
pages: '1',
total: isBatchCustomSQLTable.value.length,
code: '',
message: '',
data: isBatchCustomSQLTable.value,
};
return { ...response };
},
scroll: { y: 300 },
rowKey: 'businessId',
columns: isCustomSQLColumns,
showTableSetting: false,
showIndexColumn: false,
bordered: false,
});
const [registerNotCustomSQLTable, { reload: notCustomSQLTableReload, getDataSource: notCustomSQLTableDataSource }] = useTable({
api: async () => {
notCustomSQLTable.value = notCustomSQLTableList.filter(
(item) => item.ownershipTableId[0] === selectKey.value,
);
const response = {
pageNu: '1',
pageSize: '5',
pages: '1',
total: notCustomSQLTable.value.length,
code: '',
message: '',
data: notCustomSQLTable.value,
};
return { ...response };
},
scroll: { y: 300 },
rowKey: 'businessId',
columns: notCustomSQLColumns,
showTableSetting: false,
showIndexColumn: false,
bordered: false,
handleSearchInfoFn(info) {
// console.log('handleSearchInfoFn', info);
return info;
},
actionColumn: {
width: 60,
title: '操作',
dataIndex: 'action',
// slots: { customRender: 'action' },
},
});
const [registerMappingRuleConfigurationTable, { getRowSelection }] = useTable({
api: async () => {
const response = {
pageNu: '1',
pageSize: '5',
pages: '1',
total: mappingRuleConfigurationTable.value.length,
code: '',
message: '',
data: mappingRuleConfigurationTable.value,
};
return { ...response };
},
scroll: { y: 300 },
rowKey: 'businessId',
columns: mappingRuleConfigurationColumns,
showTableSetting: false,
showIndexColumn: false,
rowSelection: true,
bordered: false,
actionColumn: {
width: 100,
title: '操作',
dataIndex: 'action',
// slots: { customRender: 'action' },
},
});
const actionList = [
{
//删除
render: (node) => {
return h(DeleteOutlined, {
class: 'ml-2',
onClick: () => {
handleDeleteTable(node);
},
});
},
},
];
onMounted(() => {
setFieldsValue({
sourceDataTableName: 'user_info,customer_details,order_history,product_inventory',
});
});
// 删除节点
const handleDeleteTable = (node) => {
Modal.confirm({
title: '确认删除',
content: '确定要删除此表吗？',
okText: '确认',
cancelText: '取消',
onOk() {
createMessage.success('删除成功!');
},
onCancel() {
console.log('取消删除');
createMessage.info('取消删除');
},
});
};
function handleDelete() {
Modal.confirm({
title: '确认删除',
content: '确认删除选中字段吗？',
okText: '确认',
cancelText: '取消',
onOk() {
createMessage.success('删除成功!');
},
onCancel() {
console.log('取消删除');
createMessage.info('取消删除');
},
});
// createConfirm({
// iconType: 'warning',
// title: '确认删除',
// content: '确认删除选中数据吗？',
// onOk() {
// createMessage.success('删除成功!');
// },
// });
}
function handleSelect(keys) {
isParsingSQL.value = false;
console.log(keys,'keys', getFieldsValue());
selectKey.value = keys.toString();
const querySQL = tableTreeData.filter((item) => item.key === keys.toString())[0].sql;
setFieldsValue({ querySQL: querySQL });
isCustomSQLTableReload();
notCustomSQLTableReload().then(() => {
const data = notCustomSQLTableDataSource();
const options = [];
data.forEach(item => {
options.push({
label: item.fieldName,
value: item.fieldName,
});
});
updateSchema({
field: 'primaryKeyColumn',
ifShow: true,
componentProps: {
options: [...options],
mode: 'multiple'
}
})
});
// emit('select', keys[0]);
}
/**撤回上个页面 */
function goBack() {
router.back();
}
/**头部-保存按钮 */
async function handleSave() {
try {
const isValid = await validateSourceSideConfigurationForm();
if (!isValid) {
createMessage.error('表单校验未通过，请检查输入');
return;
}
await submitSourceSideConfiguration();
createMessage.success('保存成功');
router.back();
} catch (error) {
console.error('保存失败:', error);
createMessage.error('表单校验未通过，请检查输入');
}
}
/**发布按钮 */
function handlePublish() {
openSaveModal(true, {
title: '发布新版本',
});
}
/**中间sql数-批量配置按钮-弹窗 (未使用)*/
// function handleDeplys() {
// console.log('myCheckedKeys', myCheckedKeys.value);
// openDeplysModal(true, {
// loadType,
// myCheckedKeys,
// });
// }
/**left表单-获取元数据按钮 */
function handleGetMetadata() {
openGetMetadataModal(true);
}
function handleCanalConfiguration(){
console.log('点击了canal配置按钮')
}
/**映射规则配置-新增规则按钮-弹窗 */
function handleAddRule() {
openAddRuleModal();
}
/**头部-参数配置-弹窗 */
function handleParameterConfiguration() {
openDataOptionsModal(true, {
title: '数据加载参数配置',
});
}
/**头部-全局配置-弹窗 */
function handleGobalDeply() {
openGlobalOptionsModal(true, {
title: '数据加载全局配置',
});
}
/**头部-版本管理-弹窗 */
function handleVersionManagement() {
openVersionManageModal(true, {
title: '数据加载版本管理',
});
}
/**头部-运行参数-弹窗 */
function handleRun() {
openRunOptionsModal(true, {
title: '参数列表',
});
}
// /**右sql表-列表 "数据转换（未使用）"*/
// function handleConversion(record) {
// createMessage.success('数据转换成功' + record.fieldType);
// }
/**映射规则配置-列表 "编辑"*/
function handleEdit(record) {
createMessage.success('编辑：' + record);
}
/**映射规则配置-列表 "删除"*/
function handleDeleteRule(record) {
createMessage.success('删除规则成功' + record);
}
/**映射规则配置-删除规则按钮*/
function handleDeleteRules() {
createMessage.success('批量删除数据转换规则成功' + getRowSelection().selectedRowKeys);
}
function handleMoveTop(source) {
[mappingRuleConfigurationTable.value[source], mappingRuleConfigurationTable.value[0]] = [
mappingRuleConfigurationTable.value[0],
mappingRuleConfigurationTable.value[source],
];
}
function handleMoveDown(source) {
if (mappingRuleConfigurationTable.value[source + 1]) {
[
mappingRuleConfigurationTable.value[source],
mappingRuleConfigurationTable.value[source + 1],
] = [
mappingRuleConfigurationTable.value[source + 1],
mappingRuleConfigurationTable.value[source],
];
}
}
function handleMoveUp(source) {
if (mappingRuleConfigurationTable.value[source - 1]) {
[
mappingRuleConfigurationTable.value[source],
mappingRuleConfigurationTable.value[source - 1],
] = [
mappingRuleConfigurationTable.value[source - 1],
mappingRuleConfigurationTable.value[source],
];
}
}
function handleParsingSQL() {
isParsingSQL.value = true;
updateSchema([
{
field: 'isCustomSQLTable',
ifShow: !metadataAcquisitionModeFlag.value && !customSQLFlag.value && isParsingSQL.value,
},
]);
updateSchema([
{
field: 'isBatchCustomSQLTable',
ifShow: metadataAcquisitionModeFlag.value && isParsingSQL.value,
},
]);
}
</script>
<style lang="scss" scoped>
.content-padding {
background-color: white;
}
.modal_top {
padding: 0 0 20px 0;
display: flex;
align-items: center;
.title {
font-size: 16px;
font-weight: 500;
}
.path {
font-size: 14px;
color: gray;
}
.buttonGroup {
margin-left: auto;
display: flex;
gap: 5px;
align-items: center;
}
}
</style>
src/views/dataIntegration/dataLakePunctual/mock.ts 0 → 100644
View file @ 85c0d722
/**源端配置-中间树-表头列表*/
export const tableTreeData = [
{
title: 'bm_datasource',
key: '0',
icon: 'majesticons:table-line',
sql: 'SELECT uuid, catalog_id FROM bm_datasource',
},
{
title: 'user_info',
key: '1',
icon: 'majesticons:table-line',
sql: 'SELECT uuid, catalog_id, name, description FROM user_info',
},
{
title: 'customer_details',
key: '2',
icon: 'majesticons:table-line',
sql: 'SELECT uuid, user_id, username, email FROM customer_details',
},
{
title: 'order_history',
key: '3',
icon: 'majesticons:table-line',
sql: 'SELECT uuid, order_id, total_amount FROM order_history',
},
{
title: 'product_inventory',
key: '4',
icon: 'majesticons:table-line',
sql: 'SELECT uuid, product_id, product_name, price FROM product_inventory',
},
{
title: 'transaction_logs',
key: '5',
icon: 'majesticons:table-line',
sql: 'SELECT uuid, category_id, category_name FROM transaction_logs',
},
{
title: 'employee_records',
key: '6',
icon: 'majesticons:table-line',
sql: 'SELECT uuid, customer_id, customer_name FROM employee_records',
},
{
title: 'payment_details',
key: '7',
icon: 'majesticons:table-line',
sql: 'SELECT uuid, customer_id, order_date FROM payment_details',
},
{
title: 'shipping_addresses',
key: '8',
icon: 'majesticons:table-line',
sql: 'SELECT uuid, product_id, stock_quantity, last_updated FROM shipping_addresses',
},
{
title: 'invoice_data',
key: '9',
icon: 'majesticons:table-line',
sql: 'SELECT uuid, user_id, address, phone_number FROM invoice_data',
},
{
title: 'customer_feedback',
key: '10',
icon: 'majesticons:table-line',
sql: 'SELECT uuid, category_id, category_description, parent_category_id FROM customer_feedback',
},
{
title: 'supplier_info',
key: '11',
icon: 'majesticons:table-line',
sql: 'SELECT * FROM supplier_info', // 假设 supplier_info 表没有在 isCustomSQLTableList 中定义字段
},
];
/**源端配置-右列表*/
export const notCustomSQLTableList = [
// bm_datasource
{
businessId: '1',
ownershipTableId: '0',
fieldName: 'uuid',
fieldType: 'VARCHAR(50,0)',
},
{
businessId: '2',
ownershipTableId: '0',
fieldName: 'catalog_id',
fieldType: 'BIGINT(19,0)',
},
// user_info
{
businessId: '3',
ownershipTableId: '1',
fieldName: 'user_id',
fieldType: 'INT(11,0)',
},
{
businessId: '4',
ownershipTableId: '1',
fieldName: 'username',
fieldType: 'VARCHAR(50,0)',
},
{
businessId: '5',
ownershipTableId: '1',
fieldName: 'email',
fieldType: 'VARCHAR(100,0)',
},
// customer_details
{
businessId: '6',
ownershipTableId: '2',
fieldName: 'customer_id',
fieldType: 'INT(11,0)',
},
{
businessId: '7',
ownershipTableId: '2',
fieldName: 'first_name',
fieldType: 'VARCHAR(50,0)',
},
{
businessId: '8',
ownershipTableId: '2',
fieldName: 'last_name',
fieldType: 'VARCHAR(50,0)',
},
{
businessId: '9',
ownershipTableId: '2',
fieldName: 'address',
fieldType: 'VARCHAR(255,0)',
},
// order_history
{
businessId: '10',
ownershipTableId: '3',
fieldName: 'order_id',
fieldType: 'INT(11,0)',
},
{
businessId: '11',
ownershipTableId: '3',
fieldName: 'customer_id',
fieldType: 'INT(11,0)',
},
{
businessId: '12',
ownershipTableId: '3',
fieldName: 'order_date',
fieldType: 'DATETIME',
},
// product_inventory
{
businessId: '13',
ownershipTableId: '4',
fieldName: 'product_id',
fieldType: 'INT(11,0)',
},
{
businessId: '14',
ownershipTableId: '4',
fieldName: 'quantity',
fieldType: 'INT(11,0)',
},
{
businessId: '15',
ownershipTableId: '4',
fieldName: 'price',
fieldType: 'DECIMAL(10,2)',
},
// transaction_logs
{
businessId: '16',
ownershipTableId: '5',
fieldName: 'log_id',
fieldType: 'INT(11,0)',
},
{
businessId: '17',
ownershipTableId: '5',
fieldName: 'transaction_type',
fieldType: 'VARCHAR(50,0)',
},
{
businessId: '18',
ownershipTableId: '5',
fieldName: 'amount',
fieldType: 'DECIMAL(10,2)',
},
// employee_records
{
businessId: '19',
ownershipTableId: '6',
fieldName: 'employee_id',
fieldType: 'INT(11,0)',
},
{
businessId: '20',
ownershipTableId: '6',
fieldName: 'name',
fieldType: 'VARCHAR(100,0)',
},
{
businessId: '21',
ownershipTableId: '6',
fieldName: 'position',
fieldType: 'VARCHAR(100,0)',
},
// payment_details
{
businessId: '22',
ownershipTableId: '7',
fieldName: 'payment_id',
fieldType: 'INT(11,0)',
},
{
businessId: '23',
ownershipTableId: '7',
fieldName: 'payment_method',
fieldType: 'VARCHAR(50,0)',
},
{
businessId: '24',
ownershipTableId: '7',
fieldName: 'amount',
fieldType: 'DECIMAL(10,2)',
},
// shipping_addresses
{
businessId: '25',
ownershipTableId: '8',
fieldName: 'address_id',
fieldType: 'INT(11,0)',
},
{
businessId: '26',
ownershipTableId: '8',
fieldName: 'customer_id',
fieldType: 'INT(11,0)',
},
{
businessId: '27',
ownershipTableId: '8',
fieldName: 'address',
fieldType: 'VARCHAR(255,0)',
},
// invoice_data
{
businessId: '28',
ownershipTableId: '9',
fieldName: 'invoice_id',
fieldType: 'INT(11,0)',
},
{
businessId: '29',
ownershipTableId: '9',
fieldName: 'invoice_date',
fieldType: 'DATETIME',
},
{
businessId: '30',
ownershipTableId: '9',
fieldName: 'total_amount',
fieldType: 'DECIMAL(10,2)',
},
// customer_feedback
{
businessId: '31',
ownershipTableId: '10',
fieldName: 'feedback_id',
fieldType: 'INT(11,0)',
},
{
businessId: '32',
ownershipTableId: '10',
fieldName: 'customer_id',
fieldType: 'INT(11,0)',
},
{
businessId: '33',
ownershipTableId: '10',
fieldName: 'feedback_text',
fieldType: 'TEXT',
},
// supplier_info
{
businessId: '34',
ownershipTableId: '11',
fieldName: 'supplier_id',
fieldType: 'INT(11,0)',
},
{
businessId: '35',
ownershipTableId: '11',
fieldName: 'company_name',
fieldType: 'VARCHAR(100,0)',
},
{
businessId: '36',
ownershipTableId: '11',
fieldName: 'contact_person',
fieldType: 'VARCHAR(100,0)',
},
];
/**源端配置-获取元数据按钮(弹窗)-列表*/
export const getMetadataTableList = [
{
tableName: 'bm_datasource',
businessId: '0',
},
{
tableName: 'user_info',
businessId: '1',
},
{
tableName: 'customer_details',
businessId: '2',
},
{
tableName: 'order_history',
businessId: '3',
},
{
tableName: 'product_inventory',
businessId: '4',
},
{
tableName: 'transaction_logs',
businessId: '5',
},
{
tableName: 'employee_records',
businessId: '6',
},
{
tableName: 'payment_details',
businessId: '7',
},
{
tableName: 'shipping_addresses',
businessId: '8',
},
{
tableName: 'invoice_data',
businessId: '9',
},
{
tableName: 'customer_feedback',
businessId: '10',
},
{
tableName: 'supplier_info',
businessId: '11',
},
];
src/views/realTimeSync/dataBaseToDataBase/data.ts
View file @ 85c0d722
...@@ -705,3 +705,31 @@ export const policyOptionFormSchema: FormSchema[] = [ ...@@ -705,3 +705,31 @@ export const policyOptionFormSchema: FormSchema[] = [
}, },
}, },
]; ];
export const serverOptionsFormSchema: FormSchema[] = [
{
field: 'type',
label: '存储格式',
component: 'Select',
defaultValue: '1',
componentProps: {
options: [{ label: 'JSON', value: '1' }],
},
colProps: { lg: 6, md: 6 },
},
];
export const serverSourceOptionsColumns: BasicColumn[] = [
{
title: 'Key',
dataIndex: 'keyData',
edit: true,
editable: true,
width: 120,
},
{
title: 'Value',
dataIndex: 'valueData',
edit: true,
editable: true,
width: 120,
},
];
src/views/realTimeSync/dataBaseToDataBase/dataBaseData.ts
View file @ 85c0d722
...@@ -1061,3 +1061,7 @@ export const writePolicyData: any[] = [ ...@@ -1061,3 +1061,7 @@ export const writePolicyData: any[] = [
timeInterval: '1', timeInterval: '1',
}, },
]; ];
export const jsonData = `
{
}
`;
src/views/realTimeSync/dataBaseToDataBase/optionPage.vue
View file @ 85c0d722
...@@ -340,7 +340,83 @@ ...@@ -340,7 +340,83 @@
</BasicForm> </BasicForm>
</TabPane> </TabPane>
<TabPane v-if="tabKey === '4'" key="9" tab="服务配置"> <TabPane v-if="tabKey === '4'" key="9" tab="服务配置">
<!-- <BasicTable>--> <div class="flex">
<div style="width: 50%">
<Description size="middle" title="源端配置" :bordered="false" />
<BasicForm @register="registerServerOptionsForm" />
<div>
<BasicTable @register="registerServerSourceOptionsTable">
<template #toolbar>
<a-button type="primary" @click="addServerSourceOptions">添加参数</a-button>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
icon: 'ic:outline-delete-outline',
onClick: deleteServerSourceOptions.bind(null, record),
},
]"
/>
</template>
</template>
</BasicTable>
</div>
<Description size="middle" title="配置预览" :bordered="false">
<template #action>
<Icon
style="font-size: 30px !important"
icon="fa6-regular:copy"
@click="handleCopy"
/>
<Icon
style="font-size: 30px !important; margin-right: 5px"
icon="icon-park-outline:reload"
@click="handleReload"
/>
</template>
</Description>
<CodeEditor v-model:value="jsonData" :mode="MODE.JSON" />
</div>
<div style="width: 50%">
<Description size="middle" title="目标端配置" :bordered="false" />
<div>
<BasicTable @register="registerServerTopicOptionsTable">
<template #toolbar>
<a-button type="primary" @click="addServerTopicOptions">添加参数</a-button>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
icon: 'ic:outline-delete-outline',
onClick: deleteServerTopicOptions.bind(null, record),
},
]"
/>
</template>
</template>
</BasicTable>
</div>
<Description size="middle" title="配置预览" :bordered="false">
<template #action>
<Icon
style="font-size: 30px !important"
icon="fa6-regular:copy"
@click="handleCopy"
/>
<Icon
style="font-size: 30px !important; margin-right: 5px"
icon="icon-park-outline:reload"
@click="handleReload"
/>
</template>
</Description>
<CodeEditor v-model:value="jsonData" :mode="MODE.JSON" />
</div>
</div>
</TabPane> </TabPane>
<TabPane v-if="tabKey === '5'" key="10" tab="数据流向"> <TabPane v-if="tabKey === '5'" key="10" tab="数据流向">
<Img src="src/assets/images/dataDirection.png" style="width: 1800px" /> <Img src="src/assets/images/dataDirection.png" style="width: 1800px" />
...@@ -357,7 +433,7 @@ ...@@ -357,7 +433,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { Tabs, TabPane, Alert, Col, ListItem, List, Card, Row } from 'ant-design-vue'; import { Tabs, TabPane, Alert, Col, ListItem, List, Card, Row } from 'ant-design-vue';
import { ref, onMounted } from 'vue'; import { ref } from 'vue';
import { BasicForm, FormSchema, useForm } from '@/components/Form'; import { BasicForm, FormSchema, useForm } from '@/components/Form';
import { import {
mappingRuleConfigurationColumns, mappingRuleConfigurationColumns,
...@@ -374,6 +450,8 @@ ...@@ -374,6 +450,8 @@
tableMappingColumns, tableMappingColumns,
writePolicyColumns, writePolicyColumns,
policyOptionFormSchema, policyOptionFormSchema,
serverOptionsFormSchema,
serverSourceOptionsColumns,
} from './data'; } from './data';
import Icon from '@/components/Icon/Icon.vue'; import Icon from '@/components/Icon/Icon.vue';
import { useMessage } from '@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
...@@ -388,6 +466,7 @@ ...@@ -388,6 +466,7 @@
mappingRulesTableData, mappingRulesTableData,
tableMappingData, tableMappingData,
writePolicyData, writePolicyData,
jsonData,
} from './dataBaseData'; } from './dataBaseData';
import { router } from '@/router'; import { router } from '@/router';
import { BasicTable, useTable, TableAction } from '@/components/Table'; import { BasicTable, useTable, TableAction } from '@/components/Table';
...@@ -396,14 +475,17 @@ ...@@ -396,14 +475,17 @@
import SaveModal from '@/views/dataIntegration/dataLoading/dataEntryLake/saveModal.vue'; import SaveModal from '@/views/dataIntegration/dataLoading/dataEntryLake/saveModal.vue';
import VersionManageModal from '@/views/dataIntegration/dataLoading/dataEntryLake/versionManageModal.vue'; import VersionManageModal from '@/views/dataIntegration/dataLoading/dataEntryLake/versionManageModal.vue';
import { Description } from '@/components/Description'; import { Description } from '@/components/Description';
import { CodeEditor, MODE } from '@/components/CodeEditor';
const emit = defineEmits(['success', 'register']); const emit = defineEmits(['success', 'register']);
const { createMessage, createConfirm } = useMessage(); const { createMessage, createConfirm } = useMessage();
const route = useRoute(); const route = useRoute();
const mappingRuleConfigurationTable = ref([]); const mappingRuleConfigurationTable = ref([]);
const kafkaOptionDataTable = ref([]); const kafkaOptionDataTable = ref([]);
const serverSourceOptionsTable = ref([]);
const serverTopicOptionsTable = ref([]);
const tabKey = ref('1'); const tabKey = ref('1');
const n = ref('1'); const n = ref(1);
const mappingRulesTableShow = ref(false); const mappingRulesTableShow = ref(false);
const mappingRulesTopicTableShow = ref(false); const mappingRulesTopicTableShow = ref(false);
const getMetadataTable = ref(getMetadataTableList); const getMetadataTable = ref(getMetadataTableList);
...@@ -510,6 +592,16 @@ ...@@ -510,6 +592,16 @@
span: 23, span: 23,
}, },
}); });
const [registerServerOptionsForm] = useForm({
labelWidth: 110,
labelAlign: 'left',
baseColProps: { lg: 24, md: 24 },
schemas: serverOptionsFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
const [registerMappingRuleConfigurationTable, { getRowSelection, reload }] = useTable({ const [registerMappingRuleConfigurationTable, { getRowSelection, reload }] = useTable({
api: async () => { api: async () => {
const response = { const response = {
...@@ -579,7 +671,54 @@ ...@@ -579,7 +671,54 @@
showIndexColumn: false, showIndexColumn: false,
scroll: { y: 500 }, scroll: { y: 500 },
}); });
const [registerServerSourceOptionsTable, { reload: reloadServerSourceOptionsTable }] = useTable({
title: '高级配置',
api: async () => {
const response = {
pageNu: '1',
pageSize: '5',
pages: '1',
total: serverSourceOptionsTable.value.length,
code: '',
message: '',
data: serverSourceOptionsTable.value,
};
return { ...response };
},
columns: serverSourceOptionsColumns,
pagination: true,
showIndexColumn: false,
actionColumn: {
width: 50,
title: '操作',
dataIndex: 'action',
},
scroll: { y: 200 },
});
const [registerServerTopicOptionsTable, { reload: reloadServerTopicOptionsTable }] = useTable({
title: '高级配置',
api: async () => {
const response = {
pageNu: '1',
pageSize: '5',
pages: '1',
total: serverTopicOptionsTable.value.length,
code: '',
message: '',
data: serverTopicOptionsTable.value,
};
return { ...response };
},
columns: serverSourceOptionsColumns,
pagination: true,
showIndexColumn: false,
actionColumn: {
width: 50,
title: '操作',
dataIndex: 'action',
},
scroll: { y: 200 },
});
const [registerTableMappingTable] = useTable({ const [registerTableMappingTable] = useTable({
dataSource: tableMappingData, dataSource: tableMappingData,
columns: tableMappingColumns, columns: tableMappingColumns,
...@@ -664,12 +803,51 @@ ...@@ -664,12 +803,51 @@
mappingRulesTableShow.value = true; mappingRulesTableShow.value = true;
} }
onMounted(() => {}); function addServerSourceOptions() {
const data = {
businessId: n.value,
keyData: '',
valueData: '',
};
serverSourceOptionsTable.value.push(data);
n.value++;
reloadServerSourceOptionsTable();
}
function deleteServerSourceOptions(record: Recordable) {
serverSourceOptionsTable.value.splice(
serverSourceOptionsTable.value.findIndex((item) => item.businessId === record.businessId),
1,
);
reloadServerSourceOptionsTable();
}
function addServerTopicOptions() {
const topicData = {
businessId: n.value,
keyData: '',
valueData: '',
};
serverTopicOptionsTable.value.push(topicData);
n.value++;
reloadServerTopicOptionsTable();
}
function deleteServerTopicOptions(record: Recordable) {
serverTopicOptionsTable.value.splice(
serverTopicOptionsTable.value.findIndex((item) => item.businessId === record.businessId),
1,
);
reloadServerTopicOptionsTable();
}
function handleChangeTab(key) { function handleChangeTab(key) {
tabKey.value = key; tabKey.value = key;
} }
function handleCopy() {
createMessage.success('复制成功');
}
function handleReload() {
createMessage.success('刷新成功');
}
function goBack() { function goBack() {
router.back(); router.back();
} }
......
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