修改数据库到数据库

src/views/realTimeSync/dataBaseToDataBase/data.ts

@@ -1112,3 +1112,14 @@ export const messageFormSchema: FormSchema[] = [
     colProps: { lg: 6, md: 6 },
   },
 ];
+export const versionManagementFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: ' ',
+    componentProps: {
+      placeholder: '输入关键字搜索',
+    },
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+];

src/views/realTimeSync/dataBaseToDataBase/optionPage.vue

@@ -10,7 +10,7 @@
             style="width: 120px"
             :options="versionOptions"
           />
-          <a-button v-if="isEdit === 'false'">回滚</a-button>
+          <a-button v-if="isEdit === 'false'" @click="handleRollback">回滚</a-button>
           <a-button v-if="isEdit === 'false'" @click="goBack">退出查看</a-button>
         </div>
         <Icon
@@ -28,7 +28,7 @@
           <div class="path">实时同步/DEMO工作区/DEMO/实时同步-DEMO</div>
         </div>
         <div class="buttonGroup">
-          <a-button type="primary" :disabled="isEdit" @click="handleOperation">跳转运维</a-button>
+          <a-button type="primary" @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
@@ -45,20 +45,20 @@
         </div>
       </div>
     </template>
-    <div style="background-color: #edf8f8">
+    <div style="background-color: rgb(245, 247, 252)">
       <div style="margin-right: 100px; margin-left: 100px">
         <Icon
           style="margin-right: 100px"
           icon="material-symbols:drive-file-move-outline-sharp"
           :size="40"
-          :color="selectedItem === '5' ? '#19ee02' : '#54c8e8'"
+          :color="selectedItem === '5' ? 'rgb(0,120,213)' : 'rgb(120,182,238)'"
           @click="handleChangeTab('5')"
         />
         <Icon
           style="margin-right: 10px"
           icon="tabler:database-export"
           :size="40"
-          :color="selectedItem === '1' ? '#19ee02' : '#54c8e8'"
+          :color="selectedItem === '1' ? 'rgb(0,120,213)' : 'rgb(120,182,238)'"
           @click="handleChangeTab('1')"
         />
         <Icon style="margin-right: 10px" icon="quill:arrow-right" :size="35" :color="'#000000'" />
@@ -66,7 +66,7 @@
           style="margin-right: 10px"
           icon="simple-icons:apachekafka"
           :size="40"
-          :color="selectedItem === '2' ? '#19ee02' : '#54c8e8'"
+          :color="selectedItem === '2' ? 'rgb(0,120,213)' : 'rgb(120,182,238)'"
           @click="handleChangeTab('2')"
         />
         <Icon style="margin-right: 10px" icon="quill:arrow-right" :size="35" :color="'#2f3031'" />
@@ -74,7 +74,7 @@
           style="margin-right: 10px"
           icon="tabler:database-export"
           :size="40"
-          :color="selectedItem === '3' ? '#19ee02' : '#54c8e8'"
+          :color="selectedItem === '3' ? 'rgb(0,120,213)' : 'rgb(120,182,238)'"
           @click="handleChangeTab('3')"
         />
         <Icon style="margin-right: 10px" icon="quill:arrow-right" :size="35" :color="'#2f3031'" />
@@ -82,7 +82,7 @@
           style="margin-right: 10px"
           icon="grommet-icons:settings-option"
           :size="40"
-          :color="selectedItem === '4' ? '#19ee02' : '#54c8e8'"
+          :color="selectedItem === '4' ? 'rgb(0,120,213)' : 'rgb(120,182,238)'"
           @click="handleChangeTab('4')"
         />
       </div>
@@ -453,7 +453,7 @@
           <BasicTable @register="registerWritePolicyTable" />
         </TabPane>
         <TabPane v-if="tabKey === '4'" key="8" tab="策略配置">
-          <Description size="middle" title="服务策略配置" :bordered="false" />
+          <span style="font-weight: bold; font-size: 18px">服务策略配置</span>
           <BasicForm @register="registerPolicyOptionsForm">
             <template #policyOption>
               <Alert
@@ -467,9 +467,12 @@
         </TabPane>
         <TabPane v-if="tabKey === '4'" key="9" tab="服务配置">
           <div class="flex" v-if="scene === 'optionPage'">
-            <div style="width: 50%">
-              <Description size="middle" title="源端配置" :bordered="false" />
-              <BasicForm @register="registerServerOptionsForm" />
+            <div style="width: 50%; border: rgb(217, 217, 217) 1px solid">
+              <span style="font-size: 15px; font-weight: bold; margin-left: 10px">源端配置</span>
+              <BasicForm
+                @register="registerServerOptionsForm"
+                style="margin-top: 10px; margin-left: 10px"
+              />
               <div>
                 <BasicTable @register="registerServerSourceOptionsTable">
                   <template #toolbar>
@@ -492,21 +495,23 @@
               <Description size="middle" title="配置预览" :bordered="false">
                 <template #action>
                   <Icon
-                    style="font-size: 30px !important"
+                    style="font-size: 25px !important"
                     icon="fa6-regular:copy"
+                    :color="'rgb(136, 141, 156)'"
                     @click="handleCopy"
                   />
                   <Icon
-                    style="font-size: 30px !important; margin-right: 5px"
-                    icon="icon-park-outline:reload"
+                    style="font-size: 25px !important; margin-right: 5px; marin-left: 5px"
+                    icon="tabler:reload"
+                    :color="'rgb(136, 141, 156)'"
                     @click="handleReload"
                   />
                 </template>
               </Description>
-              <CodeEditor v-model:value="jsonData" :mode="MODE.JSON" />
+              <textarea v-model="jsonData" style="width: 100%; height: 250px"></textarea>
             </div>
-            <div style="width: 50%">
-              <Description size="middle" title="目标端配置" :bordered="false" />
+            <div style="width: 50%; border: rgb(217, 217, 217) 1px solid">
+              <span style="font-size: 15px; font-weight: bold; margin-left: 10px">目标端配置</span>
               <div>
                 <BasicTable @register="registerServerTopicOptionsTable">
                   <template #toolbar>
@@ -529,29 +534,31 @@
               <Description size="middle" title="配置预览" :bordered="false">
                 <template #action>
                   <Icon
-                    style="font-size: 30px !important"
+                    style="font-size: 25px !important"
                     icon="fa6-regular:copy"
+                    :color="'rgb(136, 141, 156)'"
                     @click="handleCopy"
                   />
                   <Icon
-                    style="font-size: 30px !important; margin-right: 5px"
-                    icon="icon-park-outline:reload"
+                    style="font-size: 25px !important; margin-right: 5px; marin-left: 5px"
+                    icon="tabler:reload"
+                    :color="'rgb(136, 141, 156)'"
                     @click="handleReload"
                   />
                 </template>
               </Description>
-              <CodeEditor v-model:value="jsonData" :mode="MODE.JSON" />
+              <textarea v-model="jsonData" style="width: 100%; height: 250px"></textarea>
             </div>
           </div>
           <div v-if="scene === 'message'">
-            <Description size="middle" title="源端配置" :bordered="false" />
+            <span style="font-size: 15px; font-weight: bold; margin-left: 5px">源端配置</span>
             <Alert
               show-icon
               message="支持将源端schema变化进行版本信息统计。"
               type="info"
               style="font-size: 15px"
             />
-            <div>
+            <div style="margin-top: 10px">
               <BasicForm @register="registerMessageForm" />
             </div>
             <div>
@@ -576,18 +583,20 @@
             <Description size="middle" title="配置预览" :bordered="false">
               <template #action>
                 <Icon
-                  style="font-size: 30px !important"
+                  style="font-size: 25px !important"
                   icon="fa6-regular:copy"
+                  :color="'rgb(136, 141, 156)'"
                   @click="handleCopy"
                 />
                 <Icon
-                  style="font-size: 30px !important; margin-right: 5px"
-                  icon="icon-park-outline:reload"
+                  style="font-size: 25px !important; margin-right: 5px; marin-left: 5px"
+                  icon="tabler:reload"
+                  :color="'rgb(136, 141, 156)'"
                   @click="handleReload"
                 />
               </template>
             </Description>
-            <CodeEditor v-model:value="jsonData" :mode="MODE.JSON" />
+            <textarea v-model="jsonData" style="width: 100%; height: 250px"></textarea>
           </div>
         </TabPane>
         <TabPane v-if="tabKey === '5'" key="10" tab="数据流向">
@@ -659,11 +668,10 @@
   import SaveModal from '@/views/dataIntegration/dataLoading/dataEntryLake/saveModal.vue';
   import VersionManageModal from './versionManageModal.vue';
   import { Description } from '@/components/Description';
-  import { CodeEditor, MODE } from '@/components/CodeEditor';
   import AddBaseRulesModal from './addBaseRulesModal.vue';
   import AddTableRulesModal from './addTableRulesModal.vue';
   import AddFieldRulesModal from './addFieldRulesModal.vue';
-  import { associationSearchInfoFormSchema } from '@/views/mallResourceDevelopment/file/fileByApply/data';
+  import { useTabs } from '@/hooks/web/useTabs';
 
   const emit = defineEmits(['success', 'register']);
   const { createMessage, createConfirm } = useMessage();
@@ -706,6 +714,7 @@
   const [registerAddBaseRulesModal, { openModal: openAddBaseRulesModal }] = useModal();
   const [registerAddTableRulesModal, { openModal: openAddTableRulesModal }] = useModal();
   const [registerAddFieldRulesModal, { openModal: openAddFieldRulesModal }] = useModal();
+  const { setTitle } = useTabs();
 
   const mappingRulesFormSchema: FormSchema[] = [
     {
@@ -1143,7 +1152,6 @@
       }
       await submitSourceSideConfiguration();
       createMessage.success('保存成功');
-      router.back();
     } catch (error) {
       console.error('保存失败:', error);
       createMessage.error('表单校验未通过，请检查输入');
@@ -1159,6 +1167,7 @@
   function handleVersionManagement() {
     openVersionManageModal(true, {
       title: '数据加载版本管理',
+      scene: scene.value,
     });
   }
   function addBaseRules() {
@@ -1181,9 +1190,25 @@
   }
   function handleStart() {
     if (isStart.value === 'false') {
+      createConfirm({
+        iconType: 'info',
+        title: '确认启动吗？',
+        content: '是否确认进行启动？',
+        onOk() {
+          createMessage.success('启动成功!');
           isStart.value = 'true';
+        },
+      });
     } else {
+      createConfirm({
+        iconType: 'warning',
+        title: '确认暂停吗？',
+        content: '是否确认进行暂停？',
+        onOk() {
+          createMessage.success('暂停成功!');
           isStart.value = 'false';
+        },
+      });
     }
   }
   function handleDeleteRules() {
@@ -1212,6 +1237,18 @@
     relevantRules.value = 'true';
   }
 
+  function handleRollback() {
+    createConfirm({
+      iconType: 'warning',
+      title: '确认回滚吗？',
+      content: '是否确认进行回滚？',
+      onOk() {
+        createMessage.success('回滚成功!');
+        router.back();
+      },
+    });
+  }
+
   /**新增属性*/
   function addProperty(type) {
     const data = {
@@ -1271,6 +1308,11 @@
   onMounted(() => {
     isEdit.value = route.query.isEdit;
     scene.value = route.query.scene;
+    if (scene.value === 'optionPage') {
+      setTitle('数据库到数据库详情');
+    } else if (scene.value === 'message') {
+      setTitle('数据库到消息队列详情');
+    }
   });
 </script>
 <style lang="scss" scoped>

src/views/realTimeSync/dataBaseToDataBase/versionManageModal.vue

@@ -37,13 +37,15 @@
   import { versionManageColumns } from '@/views/dataIntegration/dataLoading/dataEntryLake/dataEntry.data';
   import { versionManageData } from '@/views/dataIntegration/dataLoading/dataEntryLake/mock';
   import { router } from '@/router';
+  import { versionManagementFormSchema } from '@/views/realTimeSync/dataBaseToDataBase/data';
 
   defineOptions({ name: 'KnowledgeModal' });
 
   const emit = defineEmits(['success', 'register']);
-  const { createMessage } = useMessage();
+  const { createMessage, createConfirm } = useMessage();
   const title = ref();
   const tableData = ref([]);
+  const scene = ref();
   //获取接口数据并放在下拉框里（这里是打开了一个弹框）
   //初始化表单
   const [registerTable, { reload }] = useTable({
@@ -64,8 +66,12 @@
     },
     pagination: false,
     columns: versionManageColumns,
-    useSearchForm: false,
     showTableSetting: false,
+    formConfig: {
+      showActionButtonGroup: false,
+      schemas: versionManagementFormSchema,
+    },
+    useSearchForm: true,
     bordered: true,
     actionColumn: {
       width: 150,
@@ -79,16 +85,25 @@
     await reload();
     setModalProps({ confirmLoading: false });
     title.value = data.title;
+    scene.value = data.scene;
   });
 
   function handleRollback() {
-    createMessage.success('回滚成功');
+    createConfirm({
+      iconType: 'warning',
+      title: '确认回滚吗？',
+      content: '是否确认进行回滚？',
+      onOk() {
+        createMessage.success('回滚成功!');
+      },
+    });
   }
   function handleDetail() {
     router.push({
       path: '/realTimeSync/dataBaseToDataBase/optionPage',
       query: {
         isEdit: false,
+        scene: scene.value,
       },
     });
     closeModal();