feat(frontend): 单据管理迭代_1205 #7190

# Reviewed, transaction id: 26008

dbm-ui/frontend/src/locales/zh-cn.json

@@ -3776,5 +3776,16 @@
   "全局超时时间:": "全局超时时间:",
   "回档到指定时间：": "回档到指定时间：",
   "权限：新增n个，删除m个": "权限：新增 {0} 个，删除 {1} 个",
+  "忽略业务连接：": "忽略业务连接：",
+  "备份源：": "备份源：",
+  "校验与修复类型:": "校验与修复类型:",
+  "缩容数量(台)": "缩容数量(台)",
+  "数量不足，Proxy至少保留 2 台": "数量不足，Proxy至少保留 2 台",
+  "复制类型：": "复制类型：",
+  "写入类型：": "写入类型：",
+  "断开设置：": "断开设置：",
+  "提醒频率：": "提醒频率：",
+  "校验与修复类型：": "校验与修复类型：",
+  "校验与修复频率设置：": "校验与修复频率设置：",
   "这行勿动！新增翻译请在上一行添加！": ""
 }

dbm-ui/frontend/src/services/model/ticket/details/mysql/migrateUpgrade.ts

@@ -1,7 +1,7 @@
 import type { DetailBase, DetailClusters } from '../common';
 
 export interface MigrateUpgrade extends DetailBase {
-  backup_source: string;
+  backup_source: 'local' | 'remote';
   clusters: DetailClusters;
   force: boolean;
   infos: {
@@ -30,7 +30,22 @@ export interface MigrateUpgrade extends DetailBase {
       charset: string;
       current_module_name: string;
       target_module_name: string;
+      old_master_slave: string[];
     };
+    read_only_slaves: {
+      old_slave: {
+        bk_biz_id: number;
+        bk_host_id: number;
+        ip: string;
+        bk_cloud_id: number;
+      };
+      new_slave: {
+        bk_biz_id: number;
+        bk_host_id: number;
+        ip: string;
+        bk_cloud_id: number;
+      };
+    }[];
   }[];
   ip_source: string;
   nodes: Record<

dbm-ui/frontend/src/services/model/ticket/details/mysql/proxyUpgrade.ts

@@ -7,6 +7,7 @@ export interface ProxyUpgrade extends DetailBase {
     cluster_ids: number[];
     display_info: {
       current_version: string;
+      target_package: string;
     };
   }[];
   force: boolean;

dbm-ui/frontend/src/services/model/ticket/details/redis/clusterDataCopy.ts

@@ -2,7 +2,7 @@ import type { DetailBase, DetailClusters } from '../common';
 
 export interface ClusterDataCopy extends DetailBase {
   clusters: DetailClusters;
-  dts_copy_type: string;
+  dts_copy_type: 'copy_to_other_system' | 'diff_app_diff_cluster' | 'one_app_diff_cluster' | 'user_built_to_dbm';
   write_mode: string;
   sync_disconnect_setting: {
     type: string;

dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/RenderTargetVersion.vue

@@ -111,6 +111,7 @@
       new_db_module_id: number;
       display_info: {
         target_version: string;
+        target_package: string;
       };
     }>;
   }
@@ -275,6 +276,7 @@
         new_db_module_id: localModule.value as number,
         display_info: {
           target_version: localVersion.value,
+          target_package: packageSelectList.value.find((item) => item.id === localPackage.value)?.name || '',
         },
       }));
     },

dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-access-layer/RenderTargetVersion.vue

@@ -57,7 +57,12 @@
   }
 
   interface Exposes {
-    getValue: () => Promise<Record<'pkg_id', string>>;
+    getValue: () => Promise<{
+      pkg_id: string;
+      display_info: {
+        target_package: string;
+      };
+    }>;
   }
 
   const props = defineProps<Props>();
@@ -124,7 +129,12 @@
 
   defineExpose<Exposes>({
     getValue() {
-      return selectRef.value!.getValue().then(() => ({ pkg_id: localValue.value }));
+      return selectRef.value!.getValue().then(() => ({
+        pkg_id: localValue.value,
+        display_info: {
+          target_package: versionList.value.find((item) => item.value === localValue.value)?.label || '',
+        },
+      }));
     },
   });
 </script>

dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-access-layer/Row.vue

@@ -123,12 +123,12 @@
     getValue() {
       return Promise.all([clusterRef.value!.getValue(true), targetVersionRef.value!.getValue()]).then((data) => {
         const [clusterData, targetVersionData] = data;
+        Object.assign(targetVersionData.display_info, {
+          current_version: props.data.clusterData?.currentVersion,
+        });
         return {
           ...clusterData,
           ...targetVersionData,
-          display_info: {
-            current_version: props.data.clusterData?.currentVersion,
-          },
         };
       });
     },

dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-remote/RenderTargetVersion.vue

@@ -439,6 +439,7 @@
         new_db_module_id: localModule.value as number,
         display_info: {
           target_version: localVersion.value,
+          target_package: packageSelectList.value.find((item) => item.id === localPackage.value)?.name || '',
           target_module_name: moduleSelectList.value.find((item) => item.id === localModule.value)?.name || '',
         },
       }));

dbm-ui/frontend/src/views/db-manage/redis/proxy-scale-down/pages/page1/components/RenderSwitchMode.vue

@@ -17,6 +17,7 @@
       <TableEditSelect
         ref="selectRef"
         v-model="localValue"
+        :disabled="disabled"
         :list="selectList"
         :placeholder="$t('请选择')"
         :rules="rules"
@@ -37,6 +38,7 @@
 
   interface Props {
     data?: string;
+    disabled?: boolean;
     isLoading?: boolean;
   }
 
@@ -46,6 +48,7 @@
 
   const props = withDefaults(defineProps<Props>(), {
     data: OnlineSwitchType.USER_CONFIRM,
+    disabled: false,
     isLoading: false,
   });
 

dbm-ui/frontend/src/views/db-manage/redis/proxy-scale-down/pages/page1/components/Row.vue

@@ -62,6 +62,7 @@
       <RenderSwitchMode
         ref="switchRef"
         :data="data.switchMode"
+        :disabled="!data.cluster || currentHostSelectType === HostSelectType.MANUAL"
         :is-loading="data.isLoading" />
     </td>
     <OperateColumn

dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/mysql/LocalUpgrade.vue

@@ -12,139 +12,71 @@
 -->
 
 <template>
-  <DbOriginalTable
-    :columns="columns"
-    :data="dataList" />
+  <BkTable
+    :data="ticketDetails.details.infos"
+    show-overflow-tooltip>
+    <BkTableColumn :label="t('目标集群')">
+      <template #default="{ data }: { data: RowData }">
+        <p
+          v-for="item in data.cluster_ids"
+          :key="item">
+          {{ ticketDetails.details.clusters[item].immute_domain }}
+        </p>
+      </template>
+    </BkTableColumn>
+    <BkTableColumn :label="t('当前版本')">
+      <template #default="{ data }: { data: RowData }">
+        <VersionContent
+          :data="{
+            version: data.display_info.current_version,
+            package: data.display_info.current_package,
+            charSet: data.display_info.charset,
+            moduleName: data.display_info.current_module_name,
+          }" />
+      </template>
+    </BkTableColumn>
+    <BkTableColumn :label="t('目标版本')">
+      <template #default="{ data }: { data: RowData }">
+        <VersionContent
+          :data="{
+            version: data.display_info.current_version,
+            package: data.display_info.target_package,
+            charSet: data.display_info.charset,
+            moduleName: data.display_info.current_module_name,
+          }" />
+      </template>
+    </BkTableColumn>
+  </BkTable>
+  <InfoList>
+    <InfoItem :label="t('忽略业务连接：')">
+      {{ ticketDetails.details.force ? t('是') : t('否') }}
+    </InfoItem>
+  </InfoList>
 </template>
 
 <script setup lang="tsx">
   import { useI18n } from 'vue-i18n';
-  import { useRequest } from 'vue-request';
 
-  import TicketModel, {type Mysql} from '@services/model/ticket/ticket';
-  import { getPackages } from '@services/source/package';
+  import TicketModel, { type Mysql } from '@services/model/ticket/ticket';
 
   import { TicketTypes } from '@common/const';
 
-  import VersionContent from './components/VersionContent.vue'
+  import InfoList, { Item as InfoItem } from '../components/info-list/Index.vue';
 
-  interface DataItem {
-    cluster_id: number,
-    immute_domain: string,
-    name: string,
-    currentVersion: {
-      version: string;
-      package: string;
-      charSet: string;
-      moduleName: string;
-    }
-    targetVersion: {
-      pkg_id: number,
-      version: string;
-      package: string;
-      charSet: string;
-      moduleName: string;
-    },
-  }
+  import VersionContent from './components/VersionContent.vue';
 
   interface Props {
-    ticketDetails: TicketModel<Mysql.LocalUpgrade>
+    ticketDetails: TicketModel<Mysql.LocalUpgrade>;
   }
 
-  const props = defineProps<Props>();
-
-  const { t } = useI18n();
+  type RowData = Props['ticketDetails']['details']['infos'][number];
 
-  const dataList = ref<DataItem[]>([])
-
-  const columns = [
-    {
-      label: t('集群ID'),
-      field: 'cluster_id',
-      width: 100,
-      render: ({ cell }: { cell: [] }) => <span>{cell || '--'}</span>,
-    },
-    {
-      label: t('集群名称'),
-      field: 'immute_domain',
-      showOverflowTooltip: false,
-      render: ({ data }: { data: any }) => (
-        <div class="cluster-name text-overflow"
-          v-overflow-tips={{
-            content: `
-              <p>${t('域名')}：${data.immute_domain}</p>
-              ${data.name ? `<p>${('集群别名')}：${data.name}</p>` : null}
-            `,
-            allowHTML: true,
-          }}>
-          <span>{data.immute_domain}</span>
-        </div>
-      ),
-    },
-    {
-      label: t('当前版本'),
-      field: 'new_master',
-      render: ({ data }: { data: DataItem }) => <VersionContent data={data.currentVersion} />
-    },
-    {
-      label: t('目标版本'),
-      field: 'new_version',
-      render: ({ data }: { data: DataItem }) => <VersionContent data={data.targetVersion} />
-    }
-  ];
-
-  const list: DataItem[] = [];
-  const infosData = props.ticketDetails?.details?.infos || [];
-  const clusterIds = props.ticketDetails?.details?.clusters || {};
-  infosData.forEach((item) => {
-    item.cluster_ids.forEach((id) => {
-      const clusterData = clusterIds[id];
-      list.push(Object.assign({
-        cluster_id: id,
-        immute_domain: clusterData.immute_domain,
-        name: clusterData.name,
-        currentVersion: {
-          version: item.display_info.current_version,
-          package: item.display_info.current_package,
-          charSet: item.display_info.charset,
-          moduleName: item.display_info.current_module_name
-        },
-        targetVersion: {
-          pkg_id: item.pkg_id,
-          version: item.display_info.current_version,
-          package: '',
-          charSet: item.display_info.charset,
-          moduleName: item.display_info.current_module_name,
-        },
-      }));
-    });
-  });
-  dataList.value = list
-
-  useRequest(getPackages, {
-    defaultParams: [{
-      pkg_type: 'mysql',
-      db_type: 'mysql'
-    }],
-    onSuccess(packageResult) {
-      const packageMap = packageResult.results.reduce((prev, item) => Object.assign(prev, { [item.id]: {
-        name: item.name,
-        version: item.version
-      } }), {} as Record<number, {
-        name: string,
-        version: string
-      }>)
-      dataList.value = dataList.value.map(item => Object.assign(item, {
-        targetVersion: {
-          ...item.targetVersion,
-          package: packageMap[item.targetVersion.pkg_id].name
-        }
-      }))
-    }
-  })
+  defineProps<Props>();
 
   defineOptions({
     name: TicketTypes.MYSQL_LOCAL_UPGRADE,
     inheritAttrs: false,
   });
+
+  const { t } = useI18n();
 </script>