fix(frontend): 集群列表问题修复 #9073

TencentBlueKing · Jan 15, 2025 · 77396cb · 77396cb
1 parent af48b61
commit 77396cb
Show file tree

Hide file tree

Showing 27 changed files with 200 additions and 371 deletions.
diff --git a/dbm-ui/frontend/package.json b/dbm-ui/frontend/package.json
@@ -24,7 +24,7 @@
     "@blueking/login-modal": "^1.0.5",
     "@blueking/notice-component": "2.0.5",
     "@blueking/sub-saas": "0.0.0-beta.6",
-    "@blueking/table": "^0.0.1-beta.22",
+    "@blueking/table": "^0.0.1-beta.30",
     "@icon-cool/bk-icon-bk-biz-components": "^0.0.4",
     "@vueuse/core": "^12.0.0",
     "axios": "^1.7.9",

diff --git a/dbm-ui/frontend/src/components/stretch-layout/StretchLayout.vue b/dbm-ui/frontend/src/components/stretch-layout/StretchLayout.vue
@@ -73,6 +73,8 @@
 <script setup lang="ts">
   import { readonly } from 'vue';
 
+  import { useResizeObserver } from '@vueuse/core';
+
   import DragResize from './components/DragResize.vue';
 
   const props = withDefaults(defineProps<Props>(), {
@@ -159,6 +161,7 @@
     if (!isOpen.value) {
       renderLeftWidth.value = getMaxWidth();
     }
+    useResizeObserver(rootRef.value, handleWindowResize);
     window.addEventListener('resize', handleWindowResize);
   });
 

diff --git a/dbm-ui/frontend/src/hooks/useTableSettings.ts b/dbm-ui/frontend/src/hooks/useTableSettings.ts
@@ -11,101 +11,44 @@
  * the specific language governing permissions and limitations under the License.
  */
 
-import type { Settings } from 'bkui-vue/lib/table/props';
-import _ from 'lodash';
-
 import { useUserProfile } from '@stores';
 
-type TableSettingKeys = keyof Settings;
+interface Settings {
+  disabled?: string[];
+  checked?: string[];
+  size?: 'medium' | 'mini' | 'small';
+}
+
+// type TableSettingKeys = keyof Settings;
 
 /**
  * 用户个人配置表头字段
  */
 export const useTableSettings = (key: string, defaultSettings: Settings) => {
   const userProfileStore = useUserProfile();
-  // 获取用户配置的表头信息
-  const settings = shallowRef(getSettings(userProfileStore.profile[key] || defaultSettings));
-
-  // 初始化设置
-  if (userProfileStore.profile[key] === undefined) {
-    updateTableSettings(defaultSettings);
-  }
-
-  function getSettings(updateSettings: Settings) {
-    const values: Settings = Object.assign({}, defaultSettings);
-    if (defaultSettings && updateSettings) {
-      // 获取后续新增字段
-      const newFields = [];
-      const defaultFields = defaultSettings.fields || [];
-      const updateFields = (updateSettings.fields || []).map((item) => item.field);
-      for (const item of defaultFields) {
-        // 新增字段
-        if (item.field && !updateFields.includes(item.field)) {
-          newFields.push(item);
-        }
-      }
-
-      for (const key of Object.keys(updateSettings)) {
-        const settingKey = key as TableSettingKeys;
-
-        // 以 default settings 为准设置 fields，确保增删生效
-        if (settingKey === 'fields') {
-          continue;
-        }
 
-        // 设置新增字段选中
-        if (settingKey === 'checked') {
-          const checked = updateSettings.checked || [];
-          const defaultChecked = defaultSettings.checked || [];
-          // 必须勾选项
-          const disabledFieldsChecked = (defaultSettings.fields || [])
-            .filter((item) => item.field && item.disabled)
-            .map((item) => item.field as string);
-          // 新增字段默认勾选项
-          const newFieldsChecked = newFields
-            .filter((item) => item.field && defaultChecked.includes(item.field))
-            .map((item) => item.field as string);
-
-          Object.assign(values, {
-            [settingKey]: _.uniq(checked.concat(disabledFieldsChecked, newFieldsChecked)),
-          });
-
-          continue;
-        }
-
-        // 确保以 update settings 为准
-        const updateValue = updateSettings[settingKey];
-        if (updateValue) {
-          Object.assign(values, {
-            [settingKey]: updateValue,
-          });
-        }
-      }
-    } else {
-      Object.assign(values, updateSettings);
-    }
-
-    return values;
+  // 获取用户配置的表头信息
+  const settings = shallowRef<{ checked?: string[]; disabled?: string[]; size?: string }>();
+  if (userProfileStore.profile[key]) {
+    settings.value = {
+      checked: userProfileStore.profile[key].checked || defaultSettings.checked,
+      disabled: defaultSettings.disabled,
+      size: userProfileStore.profile[key].size || defaultSettings.size || 'small',
+    };
   }
 
   /**
    * 更新表头设置
    */
-  function updateTableSettings(updateSettings: Settings) {
-    const newSettings = getSettings(updateSettings);
-    newSettings.fields = newSettings.fields?.map((item) => ({
-      field: item.field,
-    }));
-    userProfileStore
-      .updateProfile({
-        label: key,
-        values: newSettings,
-      })
-      .then(() => {
-        newSettings.fields = defaultSettings.fields;
-        settings.value = newSettings;
-      });
-  }
+  const updateTableSettings = (updateSettings: Settings) => {
+    userProfileStore.updateProfile({
+      label: key,
+      values: {
+        checked: updateSettings.checked,
+        size: updateSettings.size,
+      },
+    });
+  };
 
   return {
     settings,

diff --git a/dbm-ui/frontend/src/services/source/taskflow.ts b/dbm-ui/frontend/src/services/source/taskflow.ts
@@ -41,7 +41,7 @@ export enum FlowTypes {
  * 查询任务列表
  */
 export function getTaskflow(params: {
-  bk_biz_id: number;
+  bk_biz_id?: number;
   limit: number;
   offset: number;
   root_id?: string;

diff --git a/dbm-ui/frontend/src/views/db-manage/common/cluster-entry-config/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/cluster-entry-config/Index.vue
@@ -31,6 +31,7 @@
         :cell-class="generateCellClass"
         class="entry-config-table-box"
         :data="tableData"
+        :max-height="450"
         :show-overflow="false">
         <BkTableColumn
           field="entry"

diff --git a/dbm-ui/frontend/src/views/db-manage/common/cluster-table-column/CommonColumn.vue b/dbm-ui/frontend/src/views/db-manage/common/cluster-table-column/CommonColumn.vue
@@ -6,15 +6,17 @@
       checked: columnCheckedMap.major_version,
     }"
     :label="t('版本')"
-    :min-width="150">
+    :min-width="150"
+    :show-overflow="false">
     <template #default="{ data }: { data: IRowData }">
       {{ data.major_version || '--' }}
     </template>
   </BkTableColumn>
   <BkTableColumn
     field="disaster_tolerance_level"
     :label="t('容灾要求')"
-    :min-width="160">
+    :min-width="160"
+    :show-overflow="false">
     <template #default="{ data }: { data: IRowData }">
       {{ data.disasterToleranceLevelName || '--' }}
     </template>
@@ -26,15 +28,17 @@
       checked: columnCheckedMap.region,
     }"
     :label="t('地域')"
-    :min-width="100">
+    :min-width="100"
+    :show-overflow="false">
     <template #default="{ data }: { data: IRowData }">
       {{ data.region || '--' }}
     </template>
   </BkTableColumn>
   <BkTableColumn
     field="cluster_spec"
     :label="t('规格')"
-    :min-width="180">
+    :min-width="180"
+    :show-overflow="false">
     <template #default="{ data }: { data: IRowData }">
       {{ data.cluster_spec.spec_name || '--' }}
     </template>
@@ -46,6 +50,7 @@
       checked: columnCheckedMap.bk_cloud_id,
     }"
     :label="t('管控区域')"
+    :show-overflow="false"
     :width="120">
     <template #default="{ data }: { data: IRowData }">
       {{ data.bk_cloud_name ? `${data.bk_cloud_name}[${data.bk_cloud_id}]` : '--' }}
@@ -54,6 +59,7 @@
   <BkTableColumn
     field="creator"
     :label="t('创建人')"
+    :show-overflow="false"
     :width="140">
     <template #default="{ data }: { data: IRowData }">
       {{ data.creator || '--' }}
@@ -62,6 +68,7 @@
   <BkTableColumn
     field="create_at"
     :label="t('部署时间')"
+    :show-overflow="false"
     sort
     :width="250">
     <template #default="{ data }: { data: IRowData }">
@@ -75,6 +82,7 @@
       checked: columnCheckedMap.time_zone,
     }"
     :label="t('时区')"
+    :show-overflow="false"
     :width="100">
     <template #default="{ data }: { data: IRowData }">
       {{ data.cluster_time_zone || '--' }}

diff --git a/dbm-ui/frontend/src/views/db-manage/common/cluster-table-column/MasterDomainColumn.vue b/dbm-ui/frontend/src/views/db-manage/common/cluster-table-column/MasterDomainColumn.vue
@@ -4,7 +4,8 @@
     :field="field"
     fixed="left"
     :label="label"
-    :min-width="columnMinWidth">
+    :min-width="columnMinWidth"
+    visiable>
     <template #header>
       <RenderHeadCopy
         :config="[

diff --git a/dbm-ui/frontend/src/views/db-manage/common/cluster-table-column/SlaveDomainColumn.vue b/dbm-ui/frontend/src/views/db-manage/common/cluster-table-column/SlaveDomainColumn.vue
@@ -3,7 +3,9 @@
     class-name="cluster-table-slave-domain-column"
     field="slave_domain"
     :label="t('从访问入口')"
-    :min-width="280">
+    :min-width="280"
+    :show-overflow="false"
+    visiable>
     <template #header>
       <RenderHeadCopy
         :config="[
@@ -127,7 +129,7 @@
 
   const { t } = useI18n();
 
-  const renderCount = 1;
+  const renderCount = 6;
   const accessEntryDbConsole = computed(() => dbConsoleMap[props.clusterType]);
 
   const { handleCopySelected, handleCopyAll } = useColumnCopy(props);

diff --git a/dbm-ui/frontend/src/views/db-manage/common/permission/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/permission/Index.vue
@@ -306,6 +306,7 @@
       field: 'user',
       minWidth: 200,
       fixed: 'left',
+      showOverflow: false,
       render: ({ data }: { data: PermissionRule }) => (
         <TextOverflowLayout>
           {{
@@ -360,6 +361,7 @@
       label: t('访问的DB名'),
       field: 'access_db',
       minWidth: 200,
+      showOverflow: false,
       render: ({ data }: { data: PermissionRule }) => {
         if (data.rules.length === 0) {
           return (
@@ -392,6 +394,7 @@
     {
       label: t('权限'),
       field: 'privilege',
+      showOverflow: false,
       minWidth: 250,
       render: ({ data }: { data: PermissionRule }) => (
         getRenderList(data).map((rule) => {
@@ -430,6 +433,7 @@
       label: t('操作'),
       width: 150,
       fixed: 'right',
+      showOverflow: false,
       render: ({ data }: { data: PermissionRule }) => {
         if (data.rules.length === 0) {
           return (
@@ -462,6 +466,7 @@
                 {t('授权')}
               </bk-button>
               {
+                configMap[props.accountType].buttonController[ButtonTypes.DELETE_RULE] &&
                 <OperationBtnStatusTips
                   disabled={!data.rules[index].priv_ticket}
                   data={{
@@ -479,8 +484,16 @@
                       {t('编辑')}
                     </bk-button>
                   }
-                  {
-                    configMap[props.accountType].buttonController[ButtonTypes.DELETE_RULE] &&
+                </OperationBtnStatusTips>
+              }
+              {
+                configMap[props.accountType].buttonController[ButtonTypes.DELETE_RULE] &&
+                <OperationBtnStatusTips
+                  disabled={!data.rules[index].priv_ticket}
+                  data={{
+                    operationStatusText: t('权限规则_t_任务正在进行中', { t: actionMap[data.rules[index].priv_ticket?.action] }),
+                    operationTicketId: data.rules[index].priv_ticket?.ticket_id,
+                  }}>
                     <bk-pop-confirm
                       width="288"
                       content={skipApproval.value ? t('删除规则后将不能恢复，请谨慎操作') : t('删除规则会创建单据，需此规则所有过往调用方审批后才执行删除。')}
@@ -496,7 +509,6 @@
                         {t('删除')}
                       </bk-button>
                     </bk-pop-confirm>
-                  }
                 </OperationBtnStatusTips>
               }
             </div>

diff --git a/dbm-ui/frontend/src/views/db-manage/doris/list/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/doris/list/components/list/Index.vue
@@ -142,7 +142,7 @@
             <AuthButton
               v-db-console="'doris.clusterManage.getAccess'"
               action-id="doris_access_entry_view"
-              class="ml-8"
+              class="ml-8 mr-8"
               :disabled="data.isOffline"
               :permission="data.permission.doris_access_entry_view"
               :resource="data.id"
@@ -212,7 +212,6 @@
               :data="data">
               <AuthButton
                 action-id="doris_destroy"
-                class="ml-8"
                 :disabled="Boolean(data.operationTicketId)"
                 :permission="data.permission.doris_destroy"
                 :resource="data.id"
@@ -429,9 +428,8 @@
     return classList.filter((cls) => cls).join(' ');
   };
 
-  // 设置用户个人表头信息
-  const defaultSettings = {
-    fields: [],
+  const { settings: tableSetting, updateTableSettings } = useTableSettings(UserPersonalSettings.DORIS_TABLE_SETTINGS, {
+    disabled: ['domain'],
     checked: [
       'domain',
       'cluster_name',
@@ -446,13 +444,7 @@
       'doris_backend_cold',
       'cluster_time_zone',
     ],
-    trigger: 'manual' as const,
-  };
-
-  const { settings: tableSetting, updateTableSettings } = useTableSettings(
-    UserPersonalSettings.DORIS_TABLE_SETTINGS,
-    defaultSettings,
-  );
+  });
 
   const getMenuList = async (item: ISearchItem | undefined, keyword: string) => {
     if (item?.id !== 'creator' && keyword) {