修改数据库到数据库配置页面

src/views/realTimeSync/dataBaseToDataBase/optionPage.vue

@@ -2,6 +2,17 @@
   <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'">回滚</a-button>
+          <a-button v-if="isEdit === 'false'" @click="goBack">退出查看</a-button>
+        </div>
         <Icon
           icon="ep:arrow-left-bold"
           :size="20"
@@ -17,9 +28,13 @@
           <div class="path">实时同步/DEMO工作区/DEMO/实时同步-DEMO</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="handlePublish">发布</a-button>
+          <a-button type="primary" :disabled="isEdit" @click="handleOperation"
+            >跳转运维</a-button
+          >
+          <a-button type="primary" :disabled="isEdit" @click="handleSave">保存</a-button>
+          <a-button type="primary" :disabled="isEdit" @click="handlePublish"
+            >发布</a-button
+          >
           <a-button type="primary" @click="handleVersionManagement">版本管理</a-button>
         </div>
       </div>
@@ -525,8 +540,8 @@
   </PageWrapper>
 </template>
 <script lang="ts" setup>
-  import { Tabs, TabPane, Alert, Col, ListItem, List, Card, Row } from 'ant-design-vue';
-  import { ref } from 'vue';
+  import { Tabs, TabPane, Alert, Col, ListItem, List, Card, Row, Select } from 'ant-design-vue';
+  import { onMounted, ref } from 'vue';
   import { BasicForm, FormSchema, useForm } from '@/components/Form';
   import {
     mappingRuleConfigurationColumns,
@@ -571,7 +586,7 @@
   import { useModal } from '@/components/Modal';
   import GetMetadataModal from './getMetadataModal.vue';
   import SaveModal from '@/views/dataIntegration/dataLoading/dataEntryLake/saveModal.vue';
-  import VersionManageModal from '@/views/dataIntegration/dataLoading/dataEntryLake/versionManageModal.vue';
+  import VersionManageModal from './versionManageModal.vue';
   import { Description } from '@/components/Description';
   import { CodeEditor, MODE } from '@/components/CodeEditor';
   import AddBaseRulesModal from './addBaseRulesModal.vue';
@@ -587,6 +602,22 @@
   const serverTopicOptionsTable = ref([]);
   const tabKey = ref('1');
   const n = ref(1);
+  const isEdit = ref(true);
+  const version = ref('V1');
+  const versionOptions = [
+    {
+      label: 'V1',
+      value: 'V1',
+    },
+    {
+      label: 'V2',
+      value: 'V2',
+    },
+    {
+      label: 'V3',
+      value: 'V4',
+    },
+  ];
   const mappingRulesTableShow = ref(false);
   const mappingRulesTopicTableShow = ref(false);
   const tableMappingRulesTableShow = ref(false);
@@ -1101,6 +1132,10 @@
       ];
     }
   }
+
+  onMounted(() => {
+    isEdit.value = route.query.isEdit;
+  });
 </script>
 <style lang="scss" scoped>
   .content-padding {

src/views/realTimeSync/dataBaseToDataBase/versionManageModal.vue

+<template>
+  <BasicModal
+    width="40%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="title"
+    @ok="handleSubmit"
+  >
+    <template #footer>
+      <a-button type="primary" @click="handleSubmit">关闭</a-button>
+    </template>
+    <BasicTable @register="registerTable">
+      <template #bodyCell="{ column }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                label: '回滚',
+                onClick: handleRollback.bind(null),
+              },
+              {
+                label: '查看详情',
+                onClick: handleDetail.bind(null),
+              },
+            ]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { onMounted, ref } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { useMessage } from '@/hooks/web/useMessage';
+  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' });
+
+  const emit = defineEmits(['success', 'register']);
+  const { createMessage } = useMessage();
+  const title = ref();
+  const tableData = ref([]);
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerTable, { reload }] = useTable({
+    api: async () => {
+      const response = {
+        pageNum: '1',
+        pageSize: '10',
+        pages: '1',
+        total: tableData.value.length,
+        code: '',
+        message: '',
+        data: [],
+      };
+      //过滤data中的数据，取出等于params.deptId的数据
+      var data = [];
+      data = tableData.value;
+      return { ...response, data: data };
+    },
+    pagination: false,
+    columns: versionManageColumns,
+    useSearchForm: false,
+    showTableSetting: false,
+    bordered: true,
+    actionColumn: {
+      width: 150,
+      title: '操作',
+      dataIndex: 'action',
+    },
+    showIndexColumn: false,
+  });
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    await reload();
+    setModalProps({ confirmLoading: false });
+    title.value = data.title;
+  });
+
+  function handleRollback() {
+    createMessage.success('回滚成功');
+  }
+  function handleDetail() {
+    router.push({
+      path: '/realTimeSync/dataBaseToDataBase/optionPage',
+      query: {
+        isEdit: false,
+      },
+    });
+    closeModal();
+  }
+  async function handleSubmit() {
+    closeModal();
+  }
+  onMounted(() => {
+    tableData.value = versionManageData;
+  });
+</script>