feat(frontend): 权限查询页 TencentBlueKing#6905

royalpioneer · Oct 31, 2024 · bf4cbe9 · bf4cbe9
1 parent a345a00
commit bf4cbe9
Show file tree

Hide file tree

Showing 30 changed files with 3,209 additions and 29 deletions.
diff --git a/dbm-ui/frontend/src/components/cluster-selector/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/Index.vue
@@ -101,13 +101,21 @@
       </template>
     </BkResizeLayout>
     <template #footer>
-      <BkButton
-        class="cluster-selector-button mr-8"
-        :disabled="isEmpty"
-        theme="primary"
-        @click="handleConfirm">
-        {{ t('确定') }}
-      </BkButton>
+      <span class="mr24">
+        <slot
+          v-if="slots.submitTips"
+          :cluster-list="selectedClusterList"
+          name="submitTips" />
+      </span>
+      <span v-bk-tooltips="submitButtonDisabledInfo.tooltips">
+        <BkButton
+          class="cluster-selector-button mr-8"
+          :disabled="submitButtonDisabledInfo.disabled"
+          theme="primary"
+          @click="handleConfirm">
+          {{ t('确定') }}
+        </BkButton>
+      </span>
       <BkButton
         class="cluster-selector-button"
         @click="handleClose">
@@ -201,6 +209,7 @@
     tabListConfig?: Record<string, TabConfig>;
     onlyOneType?: boolean;
     supportOfflineData?: boolean;
+    disableDialogSubmitMethod?: (hostList: Array<string>) => string | boolean;
   }
 
   interface Emits {
@@ -215,6 +224,7 @@
     default: false,
   });
 
+  const slots = useSlots();
   const copy = useCopy();
   const { dialogWidth } = useSelectorDialogWidth();
   const { t } = useI18n();
@@ -414,6 +424,41 @@
   // 选中结果是否为空
   const isEmpty = computed(() => _.every(Object.values(selectedMap.value), (item) => Object.keys(item).length < 1));
 
+  const selectedClusterList = computed(() =>
+    Object.values(selectedMap.value).reduce<string[]>((prevList, selectedItem) => {
+      const clusterList = Object.values(selectedItem).map((clusterItem) => clusterItem.master_domain);
+      prevList.push(...clusterList);
+      return prevList;
+    }, []),
+  );
+
+  const submitButtonDisabledInfo = computed(() => {
+    const info = {
+      disabled: false,
+      tooltips: {
+        disabled: true,
+        content: '',
+      },
+    };
+
+    if (isEmpty.value) {
+      info.disabled = true;
+      info.tooltips.disabled = false;
+      info.tooltips.content = t('请选择集群');
+      return info;
+    }
+
+    const checkValue = props.disableDialogSubmitMethod
+      ? props.disableDialogSubmitMethod(selectedClusterList.value)
+      : false;
+    if (checkValue) {
+      info.disabled = true;
+      info.tooltips.disabled = false;
+      info.tooltips.content = _.isString(checkValue) ? checkValue : t('无法保存');
+    }
+    return info;
+  });
+
   watch(
     () => props.clusterTypes,
     (types) => {

diff --git a/dbm-ui/frontend/src/components/instance-selector/Index.vue b/dbm-ui/frontend/src/components/instance-selector/Index.vue
@@ -69,15 +69,16 @@
       </template>
     </BkResizeLayout>
     <template #footer>
-      <span
-        v-bk-tooltips="{
-          content: t('请选择实例'),
-          disabled: !isEmpty,
-        }"
-        class="inline-block">
+      <span class="mr24">
+        <slot
+          v-if="slots.submitTips"
+          :host-list="lastHostList"
+          name="submitTips" />
+      </span>
+      <span v-bk-tooltips="submitButtonDisabledInfo.tooltips">
         <BkButton
           class="w-88"
-          :disabled="isEmpty"
+          :disabled="submitButtonDisabledInfo.disabled"
           theme="primary"
           @click="handleSubmit">
           {{ t('确定') }}
@@ -232,6 +233,7 @@
   import {
     getTendbsingleFlatList as getTendbsingleList,
     getTendbsingleInstanceList,
+    getTendbSingleMachineList,
   } from '@services/source/tendbsingle';
 
   import { ClusterTypes } from '@common/const';
@@ -247,7 +249,8 @@
   import SqlServerContent from './components/sqlserver/Index.vue';
   import TendbClusterContent from './components/tendb-cluster/Index.vue';
   import TendbClusterHostContent from './components/tendb-cluster-host/Index.vue';
-  import TendbhaHostContent from './components/tendb-ha-host/Index.vue';
+  import TendbHaHostContent from './components/tendb-ha-host/Index.vue';
+  import TendbSingleHostContent from './components/tendb-single-host/Index.vue';
 
   export type TableSetting = ReturnType<typeof getSettings>;
 
@@ -299,26 +302,38 @@
   type RedisModel = ServiceReturnType<typeof getRedisClusterList>[number];
   type RedisHostModel = ServiceReturnType<typeof getRedisMachineList>['results'][number];
 
-  interface Props {
-    clusterTypes: (ClusterTypes | 'TendbhaHost' | 'TendbClusterHost' | 'RedisHost' | 'mongoCluster')[];
+  type Props = {
+    clusterTypes: (
+      | ClusterTypes
+      | 'TendbhaHost'
+      | 'TendbClusterHost'
+      | 'RedisHost'
+      | 'mongoCluster'
+      | 'TendbSingleHost'
+      | 'TendbHaHost'
+    )[];
     tabListConfig?: Record<string, PanelListType>;
     selected?: InstanceSelectorValues<T>;
     unqiuePanelValue?: boolean;
     unqiuePanelTips?: string;
     hideManualInput?: boolean;
-  }
+    onlyOneType?: boolean;
+    disableDialogSubmitMethod?: (hostList: Array<string>) => string | boolean;
+  };
 
-  interface Emits {
+  type Emits = {
     (e: 'change', value: NonNullable<Props['selected']>): void;
     (e: 'cancel'): void;
-  }
+  };
 
   const props = withDefaults(defineProps<Props>(), {
     tabListConfig: undefined,
     selected: undefined,
     unqiuePanelValue: false,
     unqiuePanelTips: t('仅可选择一种实例类型'),
     hideManualInput: false,
+    onlyOneType: false,
+    disableDialogSubmitMethod: () => false,
   });
 
   const emits = defineEmits<Emits>();
@@ -331,6 +346,8 @@
     default: false,
   });
 
+  const slots = useSlots();
+
   const tabListMap: Record<string, PanelListType> = {
     [ClusterTypes.REDIS]: [
       {
@@ -561,7 +578,7 @@
         previewConfig: {
           displayKey: 'ip',
         },
-        content: TendbhaHostContent,
+        content: TendbHaHostContent,
       },
       {
         id: 'manualInput',
@@ -755,6 +772,96 @@
         content: ManualInputContent,
       },
     ],
+    TendbSingleHost: [
+      {
+        id: 'TendbSingleHost',
+        name: t('MySQL 单节点'),
+        topoConfig: {
+          getTopoList: queryMysqlCluster,
+        },
+        tableConfig: {
+          getTableList: getTendbSingleMachineList,
+          firsrColumn: {
+            label: 'IP',
+            field: 'ip',
+            role: '',
+          },
+          columnsChecked: ['ip', 'related_instances', 'cloud_area', 'alive', 'host_name', 'os_name'],
+        },
+        previewConfig: {
+          displayKey: 'ip',
+        },
+        content: TendbSingleHostContent,
+      },
+      {
+        id: 'manualInput',
+        name: t('手动输入'),
+        tableConfig: {
+          getTableList: getTendbSingleMachineList,
+          firsrColumn: {
+            label: 'IP',
+            field: 'ip',
+            role: '',
+          },
+          columnsChecked: ['ip', 'related_instances', 'cloud_area', 'alive', 'host_name', 'os_name'],
+        },
+        manualConfig: {
+          checkInstances: getTendbSingleMachineList,
+          checkType: 'ip',
+          checkKey: 'ip',
+          activePanelId: 'TendbClusterHost',
+        },
+        previewConfig: {
+          displayKey: 'ip',
+        },
+        content: ManualInputHostContent,
+      },
+    ],
+    TendbHaHost: [
+      {
+        id: 'TendbHaHost',
+        name: t('MySQL 主从'),
+        topoConfig: {
+          getTopoList: queryMysqlCluster,
+        },
+        tableConfig: {
+          getTableList: getTendbhaMachineList,
+          firsrColumn: {
+            label: 'IP',
+            field: 'ip',
+            role: '',
+          },
+          columnsChecked: ['ip', 'cloud_area', 'alive', 'host_name', 'os_name'],
+        },
+        previewConfig: {
+          displayKey: 'ip',
+        },
+        content: TendbHaHostContent,
+      },
+      {
+        id: 'manualInput',
+        name: t('手动输入'),
+        tableConfig: {
+          getTableList: getTendbhaMachineList,
+          firsrColumn: {
+            label: 'IP',
+            field: 'ip',
+            role: '',
+          },
+          columnsChecked: ['ip', 'cloud_area', 'alive', 'host_name', 'os_name'],
+        },
+        manualConfig: {
+          checkInstances: getTendbhaMachineList,
+          checkType: 'ip',
+          checkKey: 'ip',
+          activePanelId: 'TendbClusterHost',
+        },
+        previewConfig: {
+          displayKey: 'ip',
+        },
+        content: ManualInputHostContent,
+      },
+    ],
   };
 
   const panelTabActive = ref<string>('');
@@ -829,6 +936,45 @@
   const isEmpty = computed(() => Object.values(lastValues).every((values) => values.length < 1));
   const renderCom = computed(() => (activePanelObj.value ? activePanelObj.value.content : 'div'));
 
+  const lastHostList = computed(() =>
+    Object.values(lastValues).reduce<string[]>((prevList, hostListItem) => {
+      const ipList = hostListItem.map((listItem) => listItem.ip);
+      prevList.push(...ipList);
+      return prevList;
+    }, []),
+  );
+
+  const submitButtonDisabledInfo = computed(() => {
+    const info = {
+      disabled: false,
+      tooltips: {
+        disabled: true,
+        content: '',
+      },
+    };
+
+    if (isEmpty.value) {
+      info.disabled = true;
+      info.tooltips.disabled = false;
+      info.tooltips.content = panelTabActive.value.includes('Host') ? t('请选择主机') : t('请选择实例');
+      return info;
+    }
+
+    const hostList = Object.values(lastValues).reduce<string[]>((prevList, hostListItem) => {
+      const ipList = hostListItem.map((listItem) => listItem.ip);
+      prevList.push(...ipList);
+      return prevList;
+    }, []);
+
+    const checkValue = props.disableDialogSubmitMethod(hostList);
+    if (checkValue) {
+      info.disabled = true;
+      info.tooltips.disabled = false;
+      info.tooltips.content = _.isString(checkValue) ? checkValue : t('无法保存');
+    }
+    return info;
+  });
+
   let isInnerChange = false;
 
   watch(
@@ -859,9 +1005,32 @@
 
   const handleChangePanel = (obj: PanelListItem) => {
     activePanelObj.value = obj;
+    if (props.onlyOneType) {
+      const initValues = Object.keys(lastValues).reduce<Record<string, T[]>>(
+        (results, id) =>
+          Object.assign({}, results, {
+            [id]: [],
+          }),
+        {},
+      );
+      Object.assign(lastValues, initValues);
+    }
   };
 
-  const handleChange = (values: Props['selected']) => {
+  const handleChange = (values: Props['selected'] = {}) => {
+    // 如果只允许选一种类型, 则清空非当前类型的选中列表
+    // 如果是勾选的取消全选，则忽略
+    const currentKey = panelTabActive.value;
+    if (props.onlyOneType && values[currentKey].length > 0) {
+      Object.keys(lastValues).forEach((key) => {
+        if (key !== currentKey) {
+          lastValues[key] = [];
+        } else {
+          lastValues[key] = values[key];
+        }
+      });
+      return;
+    }
     Object.assign(lastValues, values);
   };