feat(frontend): mysql支持单据克隆 #4321

TencentBlueKing · May 13, 2024 · 7bc41af · 7bc41af
1 parent f0da594
commit 7bc41af
Show file tree

Hide file tree

Showing 165 changed files with 2,910 additions and 1,650 deletions.
diff --git a/dbm-ui/frontend/src/components/apply-items/BusinessItems.vue b/dbm-ui/frontend/src/components/apply-items/BusinessItems.vue
@@ -172,7 +172,7 @@
   );
 
   watch(
-    bizId,
+    () => [bizId.value, bizList.value],
     () => {
       currentBiz.value = _.find(bizList.value, (item) => item.bk_biz_id === bizId.value);
       const englishName = currentBiz.value?.english_name;

diff --git a/dbm-ui/frontend/src/components/cluster-authorize/ClusterAuthorize.vue b/dbm-ui/frontend/src/components/cluster-authorize/ClusterAuthorize.vue
@@ -34,6 +34,7 @@
         <IpSelector
           :biz-id="bizId"
           button-text="添加 IP"
+          :data="selectedIpList"
           :is-cloud-area-restrictions="false"
           :panel-list="['staticTopo', 'manualInput', 'dbmWhitelist']"
           service-mode="all"
@@ -257,6 +258,14 @@
     (e: 'success'): void,
   }
 
+  interface Exposes {
+    initSelectorData: (data: {
+      clusterType: ClusterTypes,
+      clusterList: ResourceItem[],
+      sourceIpList: ServiceReturnType<typeof checkHost>
+    }) => void,
+  }
+
   type ClusterSelectorResult = Record<string, Array<ResourceItem>>
 
   const props = withDefaults(defineProps<Props>(), {
@@ -267,18 +276,32 @@
     tabList: () => [],
     permissonRuleList: () => [],
   });
+
   const emits = defineEmits<Emits>();
+
   const isShow = defineModel<boolean>({
     required: true,
     default: false,
   });
 
+  /**
+   * 重置表单数据
+   */
+  const initFormdata = (user = '', accessDbs: string[] = []): AuthorizePreCheckData & { mongo_users: number } => ({
+    access_dbs: [...accessDbs],
+    source_ips: [],
+    target_instances: [],
+    user,
+    cluster_type: '',
+    mongo_users: 0,
+  });
+
   const router = useRouter();
   const { t } = useI18n();
   const ticketMessage = useTicketMessage();
   const copy = useCopy();
 
-  const tabListConfigMap: Record<string, TabConfig> = {
+  const tabListConfigMap = {
     [ClusterTypes.MONGO_REPLICA_SET]: {
       name: t('副本集集群'),
       showPreviewResultTitle: true,
@@ -295,25 +318,15 @@
       name: t('主从集群'),
       showPreviewResultTitle: true,
     },
-  };
-
-  /**
-   * 重置表单数据
-   */
-  const initFormdata = (user = '', accessDbs: string[] = []): AuthorizePreCheckData & { mongo_users: number } => ({
-    access_dbs: [...accessDbs],
-    source_ips: [],
-    target_instances: [],
-    user,
-    cluster_type: '',
-    mongo_users: 0,
-  });
+  } as Record<string, TabConfig>;
 
   const formRef = ref();
   /** 设置底部按钮粘性布局 */
   useStickyFooter(formRef);
 
   const accoutRulesShow = ref(false);
+  const selectedIpList = ref<ServiceReturnType<typeof checkHost>>([])
+
   const selectedList = shallowRef<MongodbPermissonAccountModel[]>([]);
 
   const state = reactive({
@@ -590,6 +603,7 @@
    * ip 选择
    */
   const handleChangeIP = (data: ServiceReturnType<typeof checkHost>) => {
+    selectedIpList.value = data;
     state.formdata.source_ips = data.map(item => ({
       ip: item.ip,
       bk_host_id: item.host_id,
@@ -796,6 +810,27 @@
     window.changeConfirm = false;
     isShow.value = false;
   };
+
+  defineExpose<Exposes>({
+    initSelectorData(data: Parameters<Exposes['initSelectorData']>[number]) {
+      nextTick(() => {
+        const {
+          clusterType,
+          clusterList,
+          sourceIpList,
+        } = data;
+
+        clusterState.clusterType = clusterType;
+        clusterState.tableProps.data = clusterList;
+        state.formdata.source_ips = sourceIpList.map(item => ({
+          ip: item.ip,
+          bk_host_id: item.host_id,
+          bk_biz_id: item.biz.id,
+        }));
+        selectedIpList.value = sourceIpList;
+      });
+    },
+  });
 </script>
 
 <style lang="less" scoped>

diff --git a/dbm-ui/frontend/src/components/cluster-selector/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/Index.vue
@@ -492,7 +492,7 @@
   .cluster-selector-dialog {
     font-size: @font-size-mini;
 
-    .bk-modal-body {
+    :deep(.bk-modal-body) {
       .bk-modal-header {
         display: none;
       }

diff --git a/dbm-ui/frontend/src/components/render-table/columns/select/index.vue b/dbm-ui/frontend/src/components/render-table/columns/select/index.vue
@@ -100,7 +100,7 @@
   watch(
     modelValue,
     (value) => {
-      if (!value) {
+      if (value === undefined) {
         return;
       }
       localValue.value = value;

diff --git a/dbm-ui/frontend/src/components/render-table/columns/spec-display/Panel.vue b/dbm-ui/frontend/src/components/render-table/columns/spec-display/Panel.vue
@@ -13,6 +13,7 @@
 
 <template>
   <BkPopover
+    always
     height="0"
     placement="bottom"
     :popover-delay="[100, 200]"
@@ -21,13 +22,11 @@
     <slot />
     <template #content>
       <div class="spec-diaplay-panel">
-        <div class="title">
-          {{ data.name }} {{ $t('规格') }}
-        </div>
+        <div class="title">{{ data.name }} {{ $t('规格') }}</div>
         <div class="items">
           <div class="item">
-            <div class="item__title">CPU：</div>
-            <div class="item__content">
+            <div class="item-title">CPU：</div>
+            <div class="item-content">
               {{
                 data.cpu.min === data.cpu.max
                   ? $t('n核', { n: data.cpu.min })
@@ -36,36 +35,36 @@
             </div>
           </div>
           <div class="item">
-            <div class="item__title">{{ $t('内存') }}：</div>
-            <div class="item__content">
+            <div class="item-title">{{ $t('内存') }}：</div>
+            <div class="item-content">
               {{ data.mem.min === data.mem.max ? data.mem.min : `(${data.mem.min}~${data.mem.max})` }} G
             </div>
           </div>
           <div
             class="item"
             style="align-items: flex-start">
-            <div class="item__title">{{ $t('磁盘') }}：</div>
-            <div class="item__content">
+            <div class="item-title">{{ $t('磁盘') }}：</div>
+            <div class="item-content">
               <div class="table">
                 <div class="head">
-                  <div class="head_one">
+                  <div class="head-one">
                     {{ $t('挂载点') }}
                   </div>
-                  <div class="head_two">
+                  <div class="head-two">
                     {{ $t('最小容量(G)') }}
                   </div>
-                  <div class="head_three">
+                  <div class="head-three">
                     {{ $t('磁盘类别') }}
                   </div>
                 </div>
                 <div class="row">
-                  <div class="row_one">
+                  <div class="row-one">
                     {{ data.storage_spec[0].mount_point }}
                   </div>
-                  <div class="row_two">
+                  <div class="row-two">
                     {{ data.storage_spec[0].size }}
                   </div>
-                  <div class="row_three">
+                  <div class="row-three">
                     {{ data.storage_spec[0].type }}
                   </div>
                 </div>
@@ -75,10 +74,10 @@
           <div
             v-if="!hideQps"
             class="item">
-            <div class="item__title">
+            <div class="item-title">
               {{ $t('单机 QPS') }}
             </div>
-            <div class="item__content">
+            <div class="item-content">
               {{ data.qps.min === data.qps.max ? `${data.qps.min}/s` : `${data.qps.min}/s~${data.qps.max}/s` }}
             </div>
           </div>
@@ -145,29 +144,7 @@
   });
 </script>
 <style lang="less" scoped>
-
-.spec-diaplay-panel {
-  display: flex;
-  width: 514px;
-  padding: 16px 24px 20px 16px;
-  margin-top: -12px;
-  margin-left: -12px;
-  background: #FFF;
-  border: 1px solid #DCDEE5;
-  box-shadow: 0 3px 6px 0 #00000029;
-  box-sizing: border-box;
-  flex-direction: column;
-
-  .title {
-    height: 20px;
-    margin-bottom: 18px;
-    font-size: 12px;
-    font-weight: 700;
-    line-height: 20px;
-    color: #63656E;
-  }
-
-  .items {
+  .spec-diaplay-panel {
     display: flex;
     width: 514px;
     padding: 16px 24px 20px 16px;
@@ -190,23 +167,38 @@
 
     .items {
       display: flex;
+      width: 100%;
+      padding: 16px 24px 20px 16px;
+      margin-top: -12px;
+      margin-left: -12px;
+      background: #fff;
+      box-sizing: border-box;
       flex-direction: column;
       gap: 18px;
 
+      .title {
+        height: 20px;
+        margin-bottom: 18px;
+        font-size: 12px;
+        font-weight: 700;
+        line-height: 20px;
+        color: #63656e;
+      }
+
       .item {
         display: flex;
         width: 100%;
         align-items: center;
 
-        &__title {
+        .item-title {
           min-width: 36px;
           font-size: 12px;
           letter-spacing: 0;
           color: #63656e;
           text-align: right;
         }
 
-        &__content {
+        .item-content {
           font-size: 12px;
           letter-spacing: 0;
           color: #313238;
@@ -227,13 +219,13 @@
               width: 100%;
               background: #f0f1f5;
 
-              &_one {
+              .head-one {
                 .cell_common();
 
                 border-bottom: none;
               }
 
-              &_two {
+              .head-two {
                 .cell_common();
 
                 width: 120px;
@@ -242,7 +234,7 @@
                 border-left: none;
               }
 
-              &_three {
+              .head-three {
                 .cell_common();
 
                 width: 120px;
@@ -254,19 +246,19 @@
               display: flex;
               width: 100%;
 
-              &_one {
+              .row-one {
                 .cell_common();
               }
 
-              &_two {
+              .row-two {
                 .cell_common();
 
                 width: 120px;
                 border-right: none;
                 border-left: none;
               }
 
-              &_three {
+              .row-three {
                 .cell_common();
 
                 width: 120px;
@@ -276,6 +268,5 @@
         }
       }
     }
-   } 
   }
 </style>
-Original file line number
+Diff line change
@@ Expand Up / @@ -172,7 +172,7 @@ @@
       );
       watch(
-        bizId,
+        () => [bizId.value, bizList.value],
         () => {
           currentBiz.value = _.find(bizList.value, (item) => item.bk_biz_id === bizId.value);
           const englishName = currentBiz.value?.english_name;
@@ Expand Down @@