修改数据入湖-准实时

src/views/dataIntegration/dataLakePunctual/index.vue

 <template>
   <PageWrapper class="content-padding" contentBackground @back="goBack">
+    <template #headerContent>
+      <div class="modal_top">
+        <div style="display: flex; gap: 5px; align-items: center">
+          <span v-if="isEdit === 'false'">查看版本</span>
+          <Select
+            v-if="isEdit === 'false'"
+            v-model:value="version"
+            style="width: 120px"
+            :options="versionOptions"
+          />
+          <a-button v-if="isEdit === 'false'" @click="handleRollback">回滚</a-button>
+          <a-button v-if="isEdit === 'false'" @click="goBack">退出查看</a-button>
+        </div>
+        <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 :disabled="isEdit !== 'true'" type="primary" @click="handleOperation"
+            >跳转运维</a-button
+          >
+          <a-button :disabled="isEdit !== 'true'" type="primary" @click="handleSave">保存</a-button>
+          <a-button
+            :disabled="isEdit !== 'true'"
+            v-if="isEdit !== 'debug'"
+            type="primary"
+            @click="handleDebug"
+            >调试</a-button
+          >
+          <a-button v-if="isEdit === 'debug'" type="primary" @click="handleExitDebug"
+            >退出调试</a-button
+          >
+          <a-button
+            :disabled="isRun === 'false' || isEdit !== 'true'"
+            type="primary"
+            @click="handleRun"
+            >运行</a-button
+          >
+          <a-button
+            :disabled="isSave === 'false' || 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>
+        </div>
+      </div>
+    </template>
     <div>
       <Tabs v-model:activeKey="key" type="card">
         <TabPane key="1" tab="源端配置">
@@ -132,9 +192,7 @@
             <template #HDFSpath="{ field, model }">
               <div style="display: flex">
                 <AInput v-model:value="model.HDFSpath" :disabled="!model.HDFSDataSource" />
-                <a-button @click="handleGetHDFSpath" type="primary">
-                  浏览
-                </a-button>
+                <a-button @click="handleGetHDFSpath" type="primary"> 浏览 </a-button>
               </div>
             </template>
             <template #divider="{ field, model }">
@@ -178,9 +236,14 @@
       </Tabs>
     </div>
     <!--    源端配置-left-获取元数据按钮-弹窗  -->
-    <GetMetadataModal @setFlag="setFlag" @register="registerGetMetadataModal" />
+    <GetMetadataModal @set-flag="setFlag" @register="registerGetMetadataModal" />
     <AddDataConversionRuleModal @register="registerAddRuleModal" />
     <ViewLogModal @register="registerViewLogsModal" />
+    <SaveModal @register="registerSaveModal" @success="handleSaveSuccess" />
+    <VersionManageModal @register="registerVersionManageModal" />
+    <RunOptionsModal @register="registerRunOptionsModal" />
+    <DataOptionsModal @register="registerDataOptionsModal" />
+    <GlobalOptionsModal @register="registerGlobalOptionsModal" />
   </PageWrapper>
 </template>
 <script lang="ts" setup>
@@ -221,6 +284,13 @@
     showTableFormSchema,
   } from '@/views/dataIntegration/dataLoading/fileLoading/file.data';
   import ViewLogModal from '@/views/dataIntegration/dataLoading/dataEntryLake/ViewLogModal.vue';
+  import RunOptionsModal from '@/views/dataIntegration/dataLoading/dataEntryLake/runOptionsModal.vue';
+  import SaveModal from '@/views/dataIntegration/dataLoading/dataEntryLake/saveModal.vue';
+  import VersionManageModal from '@/views/dataIntegration/dataLoading/dataEntryLake/versionManageModal.vue';
+  import GlobalOptionsModal
+    from "@/views/dataIntegration/dataLoading/dataEntryLake/globalOptionsModal.vue";
+  import DataOptionsModal
+    from "@/views/dataIntegration/dataLoading/dataEntryLake/dataOptionsModal.vue";
 
   const route = useRoute();
   const emit = defineEmits(['success', 'register']);
@@ -229,11 +299,30 @@
   let notCustomSQLTable = ref(notCustomSQLTableList);
   let mappingRuleConfigurationTable = ref(mappingRuleConfigurationTableList);
   let mappingRuleConfiguration = ref(mappingRuleConfigurationColumns);
+  let tabularPresentationTable = ref(tabularPresentationTableList);
   let sql = ref('SELECT * FROM user_info,customer_details,order_history,product_inventory');
   let metadataAcquisitionModeFlag = ref(1);
   let isParsingSQL = ref(false);
   const selectKey = ref('0');
+  const isEdit = ref(true);
+  const isSave = ref('false');
+  const isRun = ref('false');
   const key = ref('1');
+  const version = ref('V1');
+  const versionOptions = [
+    {
+      label: 'V1',
+      value: 'V1',
+    },
+    {
+      label: 'V2',
+      value: 'V2',
+    },
+    {
+      label: 'V3',
+      value: 'V4',
+    },
+  ];
 
   function setFlag(flag) {
     metadataAcquisitionModeFlag.value = flag;
@@ -318,6 +407,11 @@
     },
   });
 
+  const [registerSaveModal, { openModal: openSaveModal }] = useModal();
+  const [registerVersionManageModal, { openModal: openVersionManageModal }] = useModal();
+  const [registerRunOptionsModal, { openModal: openRunOptionsModal }] = useModal();
+  const [registerDataOptionsModal, { openModal: openDataOptionsModal }] = useModal();
+  const [registerGlobalOptionsModal, { openModal: openGlobalOptionsModal }] = useModal();
   const [registerGetMetadataModal, { openModal: openGetMetadataModal }] = useModal();
   const [registerAddRuleModal, { openModal: openAddRuleModal }] = useModal();
 
@@ -492,6 +586,7 @@
     setFieldsValue({
       sourceDataTableName: 'user_info,customer_details,order_history,product_inventory',
     });
+    isEdit.value = route.query.isEdit;
   });
 
   // 删除节点
@@ -569,13 +664,104 @@
       }
       await submitSourceSideConfiguration();
       createMessage.success('保存成功');
-      router.back();
+      isSave.value = 'true';
     } catch (error) {
       console.error('保存失败:', error);
       createMessage.error('表单校验未通过，请检查输入');
     }
   }
 
+  function handleExitDebug() {
+    isEdit.value = 'true';
+  }
+
+  function handleRollback() {
+    createConfirm({
+      iconType: 'warning',
+      title: '确认回滚吗？',
+      content: '是否确认进行回滚？',
+      onOk() {
+        createMessage.success('回滚成功!');
+        router.back();
+      },
+    });
+  }
+
+  function handleParameterConfiguration() {
+    openDataOptionsModal(true, {
+      title: '参数配置',
+    });
+  }
+  function handleGobalDeply() {
+    openGlobalOptionsModal(true, {
+      title: '全局配置',
+    });
+  }
+  function handleRun() {
+    openRunOptionsModal(true, {
+      title: '参数列表',
+    });
+  }
+  function handlePublish() {
+    openSaveModal(true, {
+      title: '发布新版本',
+    });
+  }
+  function handleVersionManagement() {
+    openVersionManageModal(true, {
+      title: '版本管理',
+    });
+  }
+  function handleSaveSuccess() {
+    isRun.value = 'true';
+  }
+  function handleDebug() {
+    isEdit.value = 'debug';
+    key.value = '4';
+    tabularPresentationTable.value = [
+      {
+        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: '成功',
+      },
+      {
+        businessId: '1',
+        ownershipTableId: '1',
+        sourceTable: 'customer_details',
+        targetTable: 'yesy',
+        tableType: 'ORC',
+        areaType: '无',
+        partitionKey: '-',
+        debuggingResult: '成功',
+      },
+      {
+        businessId: '1',
+        ownershipTableId: '1',
+        sourceTable: 'order_history',
+        targetTable: 'yesy',
+        tableType: 'ORC',
+        areaType: '无',
+        partitionKey: '-',
+        debuggingResult: '成功',
+      },
+    ];
+    reloadTabularPresentationTable();
+  }
   /**left表单-获取元数据按钮 */
   function handleGetMetadata() {
     openGetMetadataModal(true);
@@ -610,20 +796,11 @@
   function handleViewLogs() {
     openViewLogsModal(true);
   }
-
-  /**列表展示-列表1*/
-  let tabularPresentationTable = ref(tabularPresentationTableList);
   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',