feat(frontend): 表格列支持快捷清空 TencentBlueKing#6565

jinquantianxia · Sep 3, 2024 · 3a57b56 · 3a57b56
1 parent 527fe24
commit 3a57b56
Show file tree

Hide file tree

Showing 29 changed files with 162 additions and 102 deletions.
diff --git a/dbm-ui/frontend/src/components/cluster-selector/components/redis/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/components/redis/Index.vue
@@ -125,6 +125,7 @@
   const columns = computed(() => [
     {
       minWidth: 70,
+      fixed: 'left',
       label: () => (
         <div style="display:flex;align-items:center">
           <bk-checkbox
@@ -181,6 +182,7 @@
     {
       label: t('访问入口'),
       field: 'cluster_name',
+      fixed: 'left',
       minWidth: 250,
       showOverflowTooltip: true,
       render: ({ data }: { data: ResourceItem }) => (
@@ -217,7 +219,7 @@
     {
       label: t('状态'),
       field: 'status',
-      minWidth: 120,
+      minWidth: 100,
       filter: {
         list: [
           {
@@ -246,6 +248,7 @@
     {
       label: t('架构版本'),
       field: 'cluster_type',
+      minWidth: 140,
       showOverflowTooltip: true,
       filter: {
         list: columnAttrs.value.cluster_type,
@@ -256,7 +259,7 @@
     },
     {
       label: t('管控区域'),
-      minWidth: 140,
+      minWidth: 120,
       field: 'bk_cloud_id',
       width: 150,
       showOverflowTooltip: true,

diff --git a/dbm-ui/frontend/src/components/cluster-selector/components/tendb-cluster/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/components/tendb-cluster/Index.vue
@@ -125,7 +125,7 @@
 
   const columns = computed(() => [
     {
-      minWidth: 60,
+      minWidth: 70,
       label: () => props.multiple && (
         <div style="display:flex;align-items:center">
           <bk-checkbox
@@ -189,7 +189,7 @@
     {
       label: t('访问入口'),
       field: 'cluster_name',
-      minWidth: 250,
+      minWidth: 300,
       showOverflowTooltip: true,
       render: ({ data }: { data: ResourceItem }) => (
         <TextOverflowLayout class="cluster-name-box">
@@ -225,7 +225,7 @@
     {
       label: t('状态'),
       field: 'status',
-      minWidth: 120,
+      minWidth: 110,
       filter: {
         list: [
           {
@@ -248,13 +248,13 @@
     {
       label: t('集群名称'),
       field: 'cluster_name',
-      minWidth: 140,
+      minWidth: 130,
       showOverflowTooltip: true,
     },
     {
       label: t('管控区域'),
       field: 'bk_cloud_id',
-      minWidth: 140,
+      minWidth: 130,
       showOverflowTooltip: true,
       filter: {
         list: columnAttrs.value.bk_cloud_id,

diff --git a/dbm-ui/frontend/src/components/cluster-selector/components/tendb-single/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/components/tendb-single/Index.vue
@@ -122,7 +122,7 @@
 
   const columns = computed(() => [
     {
-      minWidth: 60,
+      minWidth: 70,
       fixed: 'left',
       label: () => props.multiple && (
         <div style="display:flex;align-items:center">
@@ -188,7 +188,7 @@
     {
       label: t('访问入口'),
       field: 'cluster_name',
-      minWidth: 220,
+      minWidth: 250,
       fixed: 'left',
       showOverflowTooltip: true,
       render: ({ data }: { data: ResourceItem }) => (
@@ -225,7 +225,7 @@
     {
       label: t('状态'),
       field: 'status',
-      minWidth: 90,
+      minWidth: 100,
       filter: {
         list: [
           {

diff --git a/dbm-ui/frontend/src/components/cluster-selector/components/tendbha/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/components/tendbha/Index.vue
@@ -126,7 +126,7 @@
 
   const columns = computed(() => [
     {
-      minWidth: 60,
+      minWidth: 70,
       showOverflowTooltip: false,
       label: () => props.multiple && (
         <div style="display:flex;align-items:center">
@@ -188,7 +188,7 @@
     {
       label: t('访问入口'),
       field: 'cluster_name',
-      minWidth: 220,
+      minWidth: 280,
       showOverflowTooltip: true,
       render: ({ data }: { data: ResourceItem }) => (
         <TextOverflowLayout class="cluster-name-box">
@@ -224,7 +224,7 @@
     {
       label: t('状态'),
       field: 'status',
-      minWidth: 90,
+      minWidth: 80,
       filter: {
         list: [
           {

diff --git a/dbm-ui/frontend/src/components/instance-selector/components/mysql/table/Index.vue b/dbm-ui/frontend/src/components/instance-selector/components/mysql/table/Index.vue
@@ -33,7 +33,8 @@
         @clear-search="clearSearchValue"
         @column-filter="columnFilterChange"
         @page-limit-change="handeChangeLimit"
-        @page-value-change="handleChangePage" />
+        @page-value-change="handleChangePage"
+        @row-click.stop.prevent="handleRowClick" />
     </BkLoading>
   </div>
 </template>
@@ -373,6 +374,15 @@
     }
   };
 
+  const handleRowClick = (row: unknown, data: T) => {
+    if (props.disabledRowConfig && props.disabledRowConfig.handler(data)) {
+      return;
+    }
+
+    const isChecked = !!checkedMap.value[data[firstColumnFieldId.value]];
+    handleTableSelectOne(!isChecked, data);
+  };
+
   const handleTableSelectOne = (checked: boolean, data: T) => {
     const lastCheckMap = { ...checkedMap.value };
     if (checked) {

diff --git a/dbm-ui/frontend/src/components/instance-selector/components/redis-host/table/Index.vue b/dbm-ui/frontend/src/components/instance-selector/components/redis-host/table/Index.vue
@@ -34,7 +34,8 @@
         @clear-search="clearSearchValue"
         @column-filter="columnFilterChange"
         @page-limit-change="handeChangeLimit"
-        @page-value-change="handleChangePage" />
+        @page-value-change="handleChangePage"
+        @row-click.stop.prevent="handleRowClick" />
     </BkLoading>
   </div>
 </template>
@@ -348,6 +349,15 @@
     }
   };
 
+  const handleRowClick = (row: unknown, data: T) => {
+    if (props.disabledRowConfig && props.disabledRowConfig.handler(data)) {
+      return;
+    }
+
+    const isChecked = !!checkedMap.value[data[firstColumnFieldId.value]];
+    handleTableSelectOne(!isChecked, data);
+  };
+
   const handleTableSelectOne = (checked: boolean, data: T) => {
     const lastCheckMap = { ...checkedMap.value };
     if (checked) {

diff --git a/dbm-ui/frontend/src/components/instance-selector/components/redis/table/Index.vue b/dbm-ui/frontend/src/components/instance-selector/components/redis/table/Index.vue
@@ -35,7 +35,8 @@
         @clear-search="clearSearchValue"
         @column-filter="columnFilterChange"
         @page-limit-change="handeChangeLimit"
-        @page-value-change="handleChangePage" />
+        @page-value-change="handleChangePage"
+        @row-click.stop.prevent="handleRowClick" />
     </BkLoading>
   </div>
 </template>
@@ -372,6 +373,15 @@
     }
   };
 
+  const handleRowClick = (row: unknown, data: T) => {
+    if (props.disabledRowConfig && props.disabledRowConfig.handler(data)) {
+      return;
+    }
+
+    const isChecked = !!checkedMap.value[data[firstColumnFieldId.value]];
+    handleTableSelectOne(!isChecked, data);
+  };
+
   const handleTableSelectOne = (checked: boolean, data: T) => {
     const lastCheckMap = { ...checkedMap.value };
     if (checked) {

diff --git a/...i/frontend/src/components/instance-selector/components/tendb-cluster-host/table/Index.vue b/...i/frontend/src/components/instance-selector/components/tendb-cluster-host/table/Index.vue
@@ -30,7 +30,8 @@
         style="margin-top: 12px"
         @page-limit-change="handeChangeLimit"
         @page-value-change="handleChangePage"
-        @refresh="fetchResources" />
+        @refresh="fetchResources"
+        @row-click.stop.prevent="handleRowClick" />
     </BkLoading>
   </div>
 </template>
@@ -313,6 +314,15 @@
     }
   };
 
+  const handleRowClick = (row: unknown, data: T) => {
+    if (props.disabledRowConfig && props.disabledRowConfig.handler(data)) {
+      return;
+    }
+
+    const isChecked = !!checkedMap.value[data[firstColumnFieldId.value]];
+    handleTableSelectOne(!isChecked, data);
+  };
+
   const handleTableSelectOne = (checked: boolean, data: T) => {
     const lastCheckMap = { ...checkedMap.value };
     if (checked) {

diff --git a/dbm-ui/frontend/src/components/instance-selector/components/tendb-cluster/table/Index.vue b/dbm-ui/frontend/src/components/instance-selector/components/tendb-cluster/table/Index.vue
@@ -33,7 +33,8 @@
         @clear-search="clearSearchValue"
         @column-filter="columnFilterChange"
         @page-limit-change="handeChangeLimit"
-        @page-value-change="handleChangePage" />
+        @page-value-change="handleChangePage"
+        @row-click.stop.prevent="handleRowClick" />
     </BkLoading>
   </div>
 </template>
@@ -373,6 +374,15 @@
     }
   };
 
+  const handleRowClick = (row: unknown, data: T) => {
+    if (props.disabledRowConfig && props.disabledRowConfig.handler(data)) {
+      return;
+    }
+
+    const isChecked = !!checkedMap.value[data[firstColumnFieldId.value]];
+    handleTableSelectOne(!isChecked, data);
+  };
+
   const handleTableSelectOne = (checked: boolean, data: T) => {
     const lastCheckMap = { ...checkedMap.value };
     if (checked) {

diff --git a/dbm-ui/frontend/src/views/db-manage/common/TableSeletorInput.vue b/dbm-ui/frontend/src/views/db-manage/common/TableSeletorInput.vue
@@ -314,6 +314,10 @@
       .inner-input {
         background-color: #fff1f1;
       }
+
+      .edit-btn {
+        right: 25px;
+      }
     }
 
     .inner-input {
@@ -373,10 +377,8 @@
 
     .input-error {
       position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translateY(-50%);
-      padding-bottom: 4px;
+      top: -2px;
+      right: 10px;
       z-index: 10;
       font-size: 14px;
       color: #ea3636;

diff --git a/dbm-ui/frontend/src/views/mysql/checksum/pages/page1/components/RenderData/Index.vue b/dbm-ui/frontend/src/views/mysql/checksum/pages/page1/components/RenderData/Index.vue
@@ -16,8 +16,8 @@
     <template #default>
       <RenderTableHeadColumn
         fixed="left"
-        :min-width="200"
-        :width="250">
+        :min-width="300"
+        :width="350">
         {{ t('目标集群') }}
         <template #append>
           <BatchOperateIcon

diff --git a/dbm-ui/frontend/src/views/mysql/data-migrate/pages/page1/components/Index.vue b/dbm-ui/frontend/src/views/mysql/data-migrate/pages/page1/components/Index.vue
@@ -16,8 +16,8 @@
     <template #default>
       <RenderTableHeadColumn
         fixed="left"
-        :min-width="200"
-        :width="280">
+        :min-width="300"
+        :width="350">
         {{ t('源集群') }}
         <template #append>
           <BatchOperateIcon