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

jinquantianxia · Sep 5, 2024 · 7cae85c · 7cae85c
1 parent 4fbc25f
commit 7cae85c
Show file tree

Hide file tree

Showing 99 changed files with 583 additions and 2,450 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
@@ -127,6 +127,7 @@
   const columns = computed(() => [
     {
       minWidth: 70,
+      fixed: 'left',
       label: () => (
         <div style="display:flex;align-items:center">
           <bk-checkbox
@@ -183,6 +184,7 @@
     {
       label: t('访问入口'),
       field: 'cluster_name',
+      fixed: 'left',
       minWidth: 250,
       showOverflowTooltip: true,
       render: ({ data }: { data: ResourceItem }) => (
@@ -219,7 +221,7 @@
     {
       label: t('状态'),
       field: 'status',
-      minWidth: 120,
+      minWidth: 100,
       filter: {
         list: [
           {
@@ -248,6 +250,7 @@
     {
       label: t('架构版本'),
       field: 'cluster_type',
+      minWidth: 140,
       showOverflowTooltip: true,
       filter: {
         list: columnAttrs.value.cluster_type,
@@ -258,7 +261,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
@@ -123,7 +123,7 @@
 
   const columns = computed(() => [
     {
-      minWidth: 60,
+      minWidth: 70,
       label: () => props.multiple && (
         <div style="display:flex;align-items:center">
           <bk-checkbox
@@ -187,7 +187,7 @@
     {
       label: t('访问入口'),
       field: 'cluster_name',
-      minWidth: 250,
+      minWidth: 300,
       showOverflowTooltip: true,
       render: ({ data }: { data: ResourceItem }) => (
         <TextOverflowLayout class="cluster-name-box">
@@ -223,7 +223,7 @@
     {
       label: t('状态'),
       field: 'status',
-      minWidth: 120,
+      minWidth: 110,
       filter: {
         list: [
           {
@@ -246,13 +246,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
@@ -120,7 +120,7 @@
 
   const columns = computed(() => [
     {
-      minWidth: 60,
+      minWidth: 70,
       fixed: 'left',
       label: () => props.multiple && (
         <div style="display:flex;align-items:center">
@@ -186,7 +186,7 @@
     {
       label: t('访问入口'),
       field: 'cluster_name',
-      minWidth: 220,
+      minWidth: 250,
       fixed: 'left',
       showOverflowTooltip: true,
       render: ({ data }: { data: ResourceItem }) => (
@@ -223,7 +223,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
@@ -124,7 +124,7 @@
 
   const columns = computed(() => [
     {
-      minWidth: 60,
+      minWidth: 70,
       showOverflowTooltip: false,
       label: () => props.multiple && (
         <div style="display:flex;align-items:center">
@@ -186,7 +186,7 @@
     {
       label: t('访问入口'),
       field: 'cluster_name',
-      minWidth: 220,
+      minWidth: 280,
       showOverflowTooltip: true,
       render: ({ data }: { data: ResourceItem }) => (
         <TextOverflowLayout class="cluster-name-box">
@@ -222,7 +222,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>
@@ -371,6 +372,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>
@@ -347,6 +348,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>
@@ -370,6 +371,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>
@@ -312,6 +313,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>
@@ -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/dbm-ui/frontend/src/components/render-table/columns/DateTime.vue b/dbm-ui/frontend/src/components/render-table/columns/DateTime.vue
@@ -20,7 +20,7 @@
     }">
     <BkDatePicker
       append-to-body
-      :clearable="false"
+      clearable
       :model-value="localValue"
       :placeholder="placeholder"
       style="width: 100%"

diff --git a/dbm-ui/frontend/src/components/render-table/columns/db-table-name/Index.vue b/dbm-ui/frontend/src/components/render-table/columns/db-table-name/Index.vue
@@ -15,6 +15,7 @@
   <TagInput
     ref="tagInputRef"
     v-model="modelValue"
+    clearable
     :disabled="disabled"
     :placeholder="placeholder"
     :rules="rules"