数据库离线加载-列表展示

src/views/dataIntegration/dataLoading/dataEntryLake/ViewLogModal.vue

+<template>
+  <BasicModal
+    width="40%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="getTitle"
+    @ok="handleSubmit"
+  >
+    <textarea class="textAreaClass" readonly rows="18" v-model="textAreaData"></textarea>
+    <a-button class="buttonClass" @click="downLoadButton">下载全部日志</a-button>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, computed } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { exportRoleList } from '@/api/system/role/role';
+  import { downloadByData } from '@/utils/file/download';
+
+  const emit = defineEmits(['success', 'register']);
+  const { createMessage } = useMessage();
+  const getTitle = computed(() => '查看日志');
+  const textAreaData = ref(
+    '\n' +
+      '2023-07-05 15: 38: 11.224 [ForkJoinPool-2-worker-25] INFO i.t.t.web.schedule.SolutionWatcher - change sub job status to RUNNING, sub job id is 13ad3131-d07b-4f53-92b9-4f06447fe400\n' +
+      '2023-07-05 15: 38: 12.481 [ForkJoinPool-2-worker-25] INFO i.t.t.w.DataImportDyanConfMana - The maximum value of incremental identity column is not recorded. Try to get the maxium value of incremental identity column.\n' +
+      '2023-07-05 15: 38: 13.315 [ForkJoinPool-2-worker-25] INFO i.t.t.w.DataImportDyanConfMana - An exception occurred while getting the maximum value of the incremental identity column of the target table\n' +
+      '2023-07-05 15: 38: 13.323 [ForkJoinPool-2-worker-25] INFO i.t.t.w.DataImportDyanConfMana - The maximum value of incremental identification column null\n' +
+      "2023-07-05 15: 38: 13.331 [ForkJoinPool-2-worker-25] INFO i.t.t.w.DataImportDyanConfMana - get input query select id , age , person_name , gender , height , create_time , upda_to_time from asaoyan_test..table_1 where i=1 and id != '100'\n" +
+      '2023-07-05 15: 38: 13.337 [ForkJoinPool-2-worker-25] INFO i.t.t.w.DataImportDyanConfMana - Local drive file directory : /usr/lib/dtd/connector/server/mysql/sql/mysql-5.7\n' +
+      '2023-07-05 15: 38: 14.297 [ForkJoinPool-2-worker-25] INFO i.t.t.w.DataImportDyanConfMana - table [table_1] use [COUNT] split strategy\n' +
+      '2023-07-05 15: 38: 14.303 [ForkJoinPool-2-worker-25] INFO i.t.t.w.DataImportDyanConfMana - finish to get input query\n' +
+      '2023-07-05 15: 38: 14.309 [ForkJoinPool-2-worker-25] INFO i.t.t.w.DataImportDyanConfMana - <<<<<<<< finish to init solution config info\n' +
+      '2023-07-05 15: 38: 16.071 [ForkJoinPool-2-worker-25] INFO i.t.t.dylan.core.job.DylanJob - Job [13a63131-d07b-4f53-92b9-4f06447fe400] init finish\n' +
+      '2023-07-05 15: 38: 16.080 [ForkJoinPool-2-worker-25] INFO i.t.t.dylan.core.facade.Job - Job [13a63131-d07b-4f53-92b9-4f06447fe400] start\n' +
+      '2023-07-05 15: 38: 16.386 [ForkJoinPool-2-worker-25] INFO i.t.t.dylan.core.job.DylanJob - Job [13a63131-d07b-4f53-92b9-4f06447fe400] finish\n' +
+      '2023-07-05 15: 38: 16.392 [ForkJoinPool-2-worker-25] INFO i.t.t.web.schedule.SolutionWatcher - start recording temporary table[id: 61420, "uniqueid": "edba1ab6-6dad-48bb-bb75-z67d8655a", "colExecuted": "bd2b2441-1dde-4c09-be49-8cd3da91424", engineUuid: "62105b1388b240768800", "isTableExist": true, "isTableEmpty": false, "isTableFull": false, "isTableTruncate": false, "isTableTruncateFailed": false, "isTableTruncateSuccess": false, "isTableTruncateFailed": false, "isTableTruncateSuccess": false, "isTableTruncateFailed": false, "isTableTruncateSuccess": false, "isTableTruncateFailed": false, "isTableTruncateSuccess": false, "isTableTruncateFailed": false, "isTableTruncateSuccess": false, "isTableTruncateFailed": false, "isTableTruncateSuccess": false, "isTableTruncateFailed": false, "isTableTruncateSuccess": false, "isTableTruncateFailed": false, "isTableTruncateSuccess": false, "isTableTruncateFailed": false, "isTableTruncateSuccess": false, "isTableTruncateFailed": false, "isTableTruncateSuccess": false, "isTableTruncateFailed": false, "isTableTruncateSuccess": false, "isTableTruncateFailed": false, "isTableTruncateSuccess": false, "isTableTruncateFailed": false, "isTableTruncateSuccess": false, "isTableTruncateFailed": false, "isTableTruncateSuccess": false, "isTableTruncateFailed": false, "isTableTruncateSuccess": false, "isTableTruncateFailed": false, "isTableTruncateSuccess": false, "isTableTruncateFailed": false, "isTableTruncateSuccess": false, "isTableTruncateFailed": false, "isTableTruncateSuccess": false, "isTableTruncateFailed": false, "isTableTruncateSuccess": false, "isTableTruncateFailed": false, "isTableTruncateSuccess": false, "isTableTruncateFailed": false, "isTableTruncateSuccess": false, "isTableTruncateFailed": false, "isTableTruncateSuccess": false, "isTableTruncateFailed": false, "isTableTruncateSuccess": false, "isTableTruncateFailed": false, "isTableTruncateSuccess": false, "isTableTruncateFailed": false, "isTableTruncateSuccess": false, "isTableTruncateFailed": false, "isTableTruncateSuccess": false, "isTableTruncateFailed": false, "isTableTruncateSuccess": false, "isTableTruncateFailed": false, "isTableTruncateSuccess": false, "isTableTruncateFailed": false, "isTableTruncateSuccess": false, "isTableTruncateFailed": false, "isTableTruncateSuccess": false, "isTableTruncateFailed": false, "isTableTruncateSuccess": false, "isTableTruncateFailed": false, "isTableTruncateSuccess": false, "isTableTruncateFailed": false, "isTableTruncateSuccess": false, "isTableTruncateFailed": false, "isTableTruncateSuccess": false, "isTableTruncateFailed": false, "isTableTruncateSuccess": false, "isTableTruncateFailed": false, "isTableTruncateSuccess": false, "isTableTruncateFailed": false, "isTableTruncateSuccess": false, "isTableTruncateFailed": false, "isTableTruncateSuccess": false, "isTableTruncateFailed": false, "isTableTruncateSuccess": false, "isTableTruncateFailed": false, "isTableTruncateSuccess": false, "isTableTruncateFailed": false, "isTableTruncateSuccess": false, "isTableTruncateFailed": false, "isTableTruncateSuccess": false, "isTableTruncateFailed": false, "isTableTruncateSuccess": false, "isTableTruncateFailed": false, "isTableTruncateSuccess": false, "isTableTruncateFailed": false, "isTableTruncateSuccess": false, "isTableTruncateFailed": false,\n',
+  );
+
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    setModalProps({ confirmLoading: false, showOkBtn: false, cancelText: '关闭' });
+  });
+
+  /**确定按钮*/
+  async function handleSubmit() {
+    closeModal();
+  }
+
+  /**下载全部日志 按钮*/
+  async function downLoadButton() {
+    const params = Object.assign({}, {});
+    const data = await exportRoleList(params);
+    downloadByData(data, '全部日志' + '.xlsx');
+  }
+</script>
+<style lang="less" scoped>
+  .buttonClass {
+    margin-top: 10px;
+    border-color: rgb(41, 147, 249);
+    color: rgb(41, 147, 249);
+  }
+  .textAreaClass {
+    width: 100%;
+    margin-top: 20px;
+    background-color: rgb(138, 138, 138);
+    color: white;
+  }
+</style>

src/views/dataIntegration/dataLoading/dataEntryLake/databaseOfflineLoading.vue

@@ -17,11 +17,13 @@
           <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 v-if="isEdit === 'true'" type="primary" @click="handleOperation"
+            >跳转运维</a-button
+          >
+          <a-button v-if="isEdit === 'true'" type="primary" @click="handleSave">保存</a-button>
+          <a-button v-if="isEdit === 'true'" type="primary" @click="handleDebug">调试</a-button>
+          <a-button v-if="isEdit === 'true'" type="primary" @click="handleRun">运行</a-button>
+          <a-button v-if="isEdit === 'true'" 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>
@@ -281,7 +283,7 @@
                 <template #partitionQuantityConfiguration>
                   <a-button @click="handlePartitionedDataProcessing" type="link">未配置</a-button>
                 </template>
-                <template #clearConfiguration="{ record, index }">
+                <template #clearConfiguration="{ record }">
                   <a-button @click="handleClearConfiguration(record)" type="link">未配置</a-button>
                 </template>
               </BasicTable>
@@ -391,14 +393,37 @@
           </BasicForm>
         </TabPane>
         <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" />
+          <div style="width: 70%">
+            <BasicTable @register="registerTabularPresentationTable">
+              <template #bodyCell="{ column, record }">
+                <template v-if="column.key === 'action'">
+                  <TableAction
+                    stopButtonPropagation
+                    :actions="[
+                      {
+                        label: '查看日志',
+                        onClick: handleViewLogs.bind(null, record),
+                      },
+                    ]"
+                  />
+                </template>
+              </template>
+            </BasicTable>
+          </div>
+          <div style="width: 30%">
+            <BasicTable @register="registerCompareTable">
+              <template #sourceColumnName="{ record }">
+                <span style="font-weight: bold">{{ record.sourceColumnName }}</span
+                ><br />
+                <span style="font-size: 12px">{{ record.sourceFieldType }}</span>
+              </template>
+              <template #targetColumnName="{ record }">
+                <span style="font-weight: bold">{{ record.targetColumnName }}</span
+                ><br />
+                <span style="font-size: 12px">{{ record.targetFieldType }}</span>
+              </template>
+            </BasicTable>
+          </div>
         </TabPane>
       </Tabs>
     </div>
@@ -414,6 +439,7 @@
     <BatchConfigurationModal @register="registerBatchConfigurationModal" />
     <BatchScaleNameMappingModal @register="registerBatchScaleNameMappingModal" />
     <ClearConfigurationModal @register="registerClearConfigurationModal" />
+    <ViewLogModal @register="registerViewLogsModal" />
   </PageWrapper>
 </template>
 <script lang="ts" setup>
@@ -438,6 +464,10 @@
     partitionKeyColumns,
     partitionRangeColumns,
     otherConfigurationColumns,
+    tabularPresentationColumns,
+    compareColumns,
+    tabularPresentationSearchFormSchema,
+    compareSearchFormSchema,
   } from './offlineLoading.data';
   import Icon from '@/components/Icon/Icon.vue';
   import { useMessage } from '@/hooks/web/useMessage';
@@ -453,6 +483,8 @@
     partitionKeyTableList,
     partitionRangeTableList,
     otherConfigurationTableList,
+    tabularPresentationTableList,
+    compareTableList,
   } from './mock';
   import { router } from '@/router';
   import { DeleteOutlined } from '@ant-design/icons-vue';
@@ -471,6 +503,7 @@
   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';
+  import ViewLogModal from '@/views/dataIntegration/dataLoading/dataEntryLake/ViewLogModal.vue';
 
   const route = useRoute();
   const emit = defineEmits(['success', 'register']);
@@ -493,6 +526,8 @@
   let partitionKeyTable = ref(partitionKeyTableList);
   let partitionRangeTable = ref(partitionRangeTableList);
   let otherConfigurationTable = ref(otherConfigurationTableList);
+  let tabularPresentationTable = ref(tabularPresentationTableList);
+  let compareTable = ref(compareTableList);
   let sql = ref('SELECT * FROM user_info,customer_details,order_history,product_inventory');
   let metadataAcquisitionModeFlag = ref();
   let customSQLFlag = ref();
@@ -1122,6 +1157,7 @@
 
   const [registerGetMetadataModal, { openModal: openGetMetadataModal }] = useModal();
   const [registerDeplysModal, { openModal: openDeplysModal }] = useModal();
+  const [registerViewLogsModal, { openModal: openViewLogsModal }] = useModal();
   const [registerAddRuleModal, { openModal: openAddRuleModal }] = useModal();
   const [registerDataOptionsModal, { openModal: openDataOptionsModal }] = useModal();
   const [registerGlobalOptionsModal, { openModal: openGlobalOptionsModal }] = useModal();
@@ -1444,10 +1480,98 @@
     },
   });
 
+  const [
+    registerTabularPresentationTable,
+    { reload: reloadTabularPresentationTable, getDataSource: getTabularPresentationDataSource },
+  ] = useTable({
+    api: async (params) => {
+      tabularPresentationTable.value = tabularPresentationTableList.filter(
+        (item) =>
+          item.sourceTable.includes(params.tableName) ||
+          item.targetTable.includes(params.tableName) ||
+          params.tableName === undefined,
+      );
+      const response = {
+        pageNu: '1',
+        pageSize: '5',
+        pages: '1',
+        total: tabularPresentationTable.value.length,
+        code: '',
+        message: '',
+        data: tabularPresentationTable.value,
+      };
+      return { ...response };
+    },
+    rowKey: 'businessId',
+    rowSelection: false,
+    striped: true,
+    showHeader: true,
+    formConfig: {
+      labelWidth: 120,
+      schemas: tabularPresentationSearchFormSchema,
+      showActionButtonGroup: false,
+      autoSubmitOnEnter: true,
+    },
+    useSearchForm: true,
+    // customRow: tabularPresentationTableCustomRow,
+    columns: tabularPresentationColumns,
+    showTableSetting: false,
+    showIndexColumn: true,
+    pagination: false,
+    bordered: false,
+    actionColumn: {
+      width: 80,
+      title: ' ',
+      dataIndex: 'action',
+    },
+  });
+
+  const [
+    registerCompareTable,
+    { reload: reloadCompareTable, getDataSource: getCompareDataSource },
+  ] = useTable({
+    api: async (params) => {
+      compareTable.value = compareTableList.filter(
+        (item) =>
+          item.sourceColumnName.includes(params.columnName) ||
+          item.targetColumnName.includes(params.columnName) ||
+          params.columnName === undefined,
+      );
+      const response = {
+        pageNu: '1',
+        pageSize: '5',
+        pages: '1',
+        total: compareTable.value.length,
+        code: '',
+        message: '',
+        data: compareTable.value,
+      };
+      return { ...response };
+    },
+    rowKey: 'businessId',
+    rowSelection: false,
+    striped: true,
+    showHeader: true,
+    formConfig: {
+      labelWidth: 120,
+      schemas: compareSearchFormSchema,
+      autoSubmitOnEnter: true,
+      showActionButtonGroup: false,
+    },
+    useSearchForm: true,
+    // customRow: compareTableCustomRow,
+    columns: compareColumns,
+    showTableSetting: false,
+    showIndexColumn: false,
+    pagination: false,
+    bordered: false,
+  });
+
   onMounted(() => {
     setFieldsValue({
       sourceDataTableName: 'user_info,customer_details,order_history,product_inventory',
     });
+    isEdit.value = route.query.isEdit;
   });
 
   const handleDeleteTable = (node) => {
@@ -1535,6 +1659,10 @@
     });
   }
 
+  function handleViewLogs() {
+    openViewLogsModal(true);
+  }
+
   function handleGetMetadata() {
     openGetMetadataModal(true);
   }

src/views/dataIntegration/dataLoading/dataEntryLake/index.vue

@@ -39,7 +39,12 @@
           @click="handleMove(1)"
           >移动</a-button
         >
-        <a-button :disabled="getRowSelection().selectedRowKeys <= 0" type="primary"@click="handleExport">导出</a-button>
+        <a-button
+          :disabled="getRowSelection().selectedRowKeys <= 0"
+          type="primary"
+          @click="handleExport"
+          >导出</a-button
+        >
         <a-button type="primary" @click="handleImport">导入</a-button>
         <a-button type="primary" @click="handleNewFolder">新建文件夹</a-button>
         <a-button type="primary" @click="handleDataEntry">新建文件</a-button>

src/views/dataIntegration/dataLoading/dataEntryLake/mock.ts

@@ -1409,3 +1409,73 @@ export const otherConfigurationTableList = [
     otherConfigurationContent: '测试用表',
   },
 ];
+
+export const tabularPresentationTableList = [
+  {
+    businessId: '1',
+    ownershipTableId: '1',
+    sourceTable: 'table_1',
+    targetTable: 'test_table_1_obs',
+    tableType: 'ORC',
+    areaType: '无',
+    partitionKey: '-',
+    debuggingResult: '',
+  },
+  {
+    businessId: '1',
+    ownershipTableId: '1',
+    sourceTable: 'auto_catalog_hdfs_file_1.txt',
+    targetTable: 'yesy',
+    tableType: 'ORC',
+    areaType: '无',
+    partitionKey: '-',
+    debuggingResult: '',
+  },
+];
+export const compareTableList = [
+  {
+    businessId: '1',
+    ownershipTableId: '1',
+    sourceColumnName: 'uuid',
+    targetColumnName: 'test_uuid_obs',
+    sourceFieldType: 'VARCHAR',
+    targetFieldType: 'string',
+    annotation: '-',
+  },
+  {
+    businessId: '2',
+    ownershipTableId: '2',
+    sourceColumnName: 'catalog',
+    targetColumnName: 'test_catalog_id_obs',
+    annotation: '-',
+    sourceFieldType: 'BIGINT',
+    targetFieldType: 'string',
+  },
+  {
+    businessId: '3',
+    ownershipTableId: '3',
+    sourceColumnName: 'name',
+    targetColumnName: 'test_name_obs',
+    sourceFieldType: 'VARCHAR',
+    targetFieldType: 'string',
+    annotation: '-',
+  },
+  {
+    businessId: '4',
+    ownershipTableId: '4',
+    sourceColumnName: 'description',
+    targetColumnName: 'test_description_obs',
+    sourceFieldType: 'TEXT',
+    targetFieldType: 'string',
+    annotation: '-',
+  },
+  {
+    businessId: '5',
+    ownershipTableId: '5',
+    sourceColumnName: 'created_at',
+    targetColumnName: 'test_created_at_obs',
+    sourceFieldType: 'TIMESTAMP',
+    targetFieldType: 'string',
+    annotation: '-',
+  },
+];

src/views/dataIntegration/dataLoading/dataEntryLake/offlineLoading.data.ts

@@ -189,12 +189,76 @@ export const singleGoalFieldNameMappingRuleColumns: BasicColumn[] = [
   },
 ];
 
+export const tabularPresentationColumns: BasicColumn[] = [
+  {
+    title: '源表名',
+    dataIndex: 'sourceTable',
+  },
+  {
+    title: '目标表名',
+    dataIndex: 'targetTable',
+  },
+  {
+    title: '表类型',
+    width: 90,
+    dataIndex: 'tableType',
+  },
+  {
+    title: '分区类型',
+    width: 90,
+    dataIndex: 'areaType',
+  },
+  {
+    title: '分区键',
+    width: 100,
+    dataIndex: 'partitionKey',
+  },
+  {
+    title: '调试结果',
+    dataIndex: 'debuggingResult',
+  },
+];
+
+export const compareColumns: BasicColumn[] = [
+  {
+    title: '源列名',
+    dataIndex: 'sourceColumnName',
+    slots: { customRender: 'sourceColumnName' },
+  },
+  {
+    title: '目标列名',
+    dataIndex: 'targetColumnName',
+    slots: { customRender: 'targetColumnName' },
+  },
+];
+
+export const tabularPresentationSearchFormSchema: FormSchema[] = [
+  {
+    field: 'tableName',
+    label: '',
+    component: 'Input',
+    componentProps: {
+      placeholder: '输入表名',
+    },
+  },
+];
+
+export const compareSearchFormSchema: FormSchema[] = [
+  {
+    field: 'columnName',
+    label: '',
+    component: 'Input',
+    componentProps: {
+      placeholder: '输入列名',
+    },
+  },
+];
+
 export const tableListSearchFormSchema: FormSchema[] = [
   {
     field: 'name',
-    label: ' ',
+    label: '',
     component: 'Input',
-    colProps: { span: 24 },
     componentProps: {
       placeholder: '输入关键字搜索',
     },

src/views/dataIntegration/dataLoading/dataEntryLake/sceneSelectionModal.vue

@@ -48,6 +48,9 @@
   function handleNewModal(scene) {
     router.push({
       path: '/dataIntegration/dataLoading/dataEntryLake/' + scene,
+      query: {
+        isEdit: true,
+      },
     });
   }
 </script>

src/views/dataIntegration/dataLoading/dataEntryLake/versionManageModal.vue

@@ -36,6 +36,7 @@
   import { BasicTable, TableAction, useTable } from '@/components/Table';
   import { versionManageColumns } from '@/views/dataIntegration/dataLoading/dataEntryLake/dataEntry.data';
   import { versionManageData } from '@/views/dataIntegration/dataLoading/dataEntryLake/mock';
+  import { router } from '@/router';
 
   defineOptions({ name: 'KnowledgeModal' });
 
@@ -83,7 +84,15 @@
   function handleRollback() {
     createMessage.success('回滚成功');
   }
-  function handleDetail() {}
+  function handleDetail() {
+    router.push({
+      path: '/dataIntegration/dataLoading/dataEntryLake/' + 'databaseOfflineLoading',
+      query: {
+        isEdit: false,
+      },
+    });
+    closeModal();
+  }
   async function handleSubmit() {
     closeModal();
   }