feat(frontend): 工具箱支持资源池协议变更_editable_table #8076

TencentBlueKing · Dec 9, 2024 · 5cf9958 · 5cf9958
1 parent e95b6ef
commit 5cf9958
Show file tree

Hide file tree

Showing 5 changed files with 247 additions and 5 deletions.
diff --git a/dbm-ui/frontend/src/components/editable-table/Column.vue b/dbm-ui/frontend/src/components/editable-table/Column.vue
@@ -30,10 +30,18 @@
             class="bk-dbm db-icon-exclamation-fill" />
         </slot>
       </div>
+      <div
+        v-if="loading"
+        class="bk-editable-table-column-loading">
+        <div class="loading-flag">
+          <Loading />
+        </div>
+      </div>
     </div>
   </td>
 </template>
 <script lang="ts">
+  import { Loading } from 'bkui-vue/lib/icon';
   import get from 'lodash/get';
   import isFunction from 'lodash/isFunction';
   import {
@@ -70,6 +78,8 @@
     fixed?: 'left' | 'right';
     disabledMethod?: (rowData?: any, field?: string) => string | boolean;
     description?: string;
+    loading?: boolean;
+    appendRules?: IRule[];
   }
 
   interface Slots {
@@ -126,13 +136,36 @@
     trigger: string;
   }
 
+  let loadingValidatorTimer: ReturnType<typeof setTimeout>;
+
   const getRulesFromProps = (props: Props) => {
     const rules: (IFinalRule & {
       required?: boolean;
       email?: boolean;
     })[] = [];
 
     const label = props.label || '';
+    if (props.loading) {
+      rules.push({
+        validator: () => {
+          clearTimeout(loadingValidatorTimer);
+          return new Promise((resolve) => {
+            const loop = () => {
+              if (!props.loading) {
+                resolve(true);
+                return;
+              }
+              loadingValidatorTimer = setTimeout(() => {
+                loop();
+              }, 500);
+            };
+            loop();
+          });
+        },
+        message: `${label}查询中`,
+        trigger: 'change',
+      });
+    }
     if (props.required) {
       rules.push({
         required: true,
@@ -266,6 +299,10 @@
     // form-item 自己的 rules 规则优先级更高
     if (props.rules) {
       rules = props.rules as IRule[];
+    } else if (props.appendRules) {
+      // 配置了 props.rules 时 props.appendRules 不生效
+      // props.appendRules 与 form 的验证规则合并且优先级高
+      rules = [...rules, ...props.appendRules];
     }
 
     // 通过 useColumn 注册
@@ -388,6 +425,7 @@
   onBeforeUnmount(() => {
     rowContext?.unregisterColumn(columnKey);
     registerRules = [];
+    clearTimeout(loadingValidatorTimer);
   });
 
   defineExpose<Expose>({
@@ -458,4 +496,32 @@
     align-items: center;
     transform: translateY(-50%);
   }
+
+  @keyframes editable-table-column-loading {
+    0% {
+      transform: rotateZ(0);
+    }
+
+    100% {
+      transform: rotateZ(360deg);
+    }
+  }
+
+  .bk-editable-table-column-loading {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    inset: 0;
+    align-items: center;
+    justify-content: center;
+    background-color: rgb(255 255 255 / 90%);
+
+    .loading-flag {
+      width: 16px;
+      height: 16px;
+      font-size: 16px;
+      color: #3a84ff;
+      animation: editable-table-column-loading 1.5s linear infinite;
+    }
+  }
 </style>
diff --git a/dbm-ui/frontend/src/components/editable-table/Index.vue b/dbm-ui/frontend/src/components/editable-table/Index.vue
@@ -29,8 +29,11 @@
 
     <div class="bk-edit-table-scroll">
       <div
-        ref="scrollX"
+        ref="scrollXRef"
         class="bk-edit-table-scroll-x"
+        :class="{
+          'is-show': isShowScrollX,
+        }"
         @scroll="handleScrollX">
         <div
           class="bk-edit-table-scroll-x-inner"
@@ -108,13 +111,15 @@
   });
 
   const tableRef = ref<HTMLElement>();
-  const scrollX = ref<HTMLElement>();
+  const scrollXRef = ref<HTMLElement>();
   const resizePlaceholderRef = ref<HTMLElement>();
   const tableWidth = ref<'auto' | number>('auto');
 
   const columnList = shallowRef<IColumnContext[]>([]);
   const rowList = shallowRef<IColumnContext[][]>([]);
 
+  const isShowScrollX = ref(true);
+
   const { handleMouseDown, handleMouseMove, columnSizeConfig } = useResize(tableRef, resizePlaceholderRef, columnList);
   const { leftFixedStyles, rightFixedStyles, initalScroll } = useScroll(tableRef);
 
@@ -130,7 +135,12 @@
           return;
         }
         tableWidth.value = tableRef.value.scrollWidth;
-        scrollX.value!.scrollLeft = tableRef.value!.scrollLeft;
+        scrollXRef.value!.scrollLeft = tableRef.value!.scrollLeft;
+        // 重新计算滚动显示状态
+        isShowScrollX.value = false;
+        setTimeout(() => {
+          isShowScrollX.value = scrollXRef.value!.offsetWidth + 2 < scrollXRef.value!.scrollWidth;
+        });
       });
     },
     {
@@ -171,7 +181,7 @@
   }, 30);
 
   const handleContentScroll = _.throttle((event: Event) => {
-    scrollX.value!.scrollLeft = (event.target as Element)!.scrollLeft;
+    scrollXRef.value!.scrollLeft = (event.target as Element)!.scrollLeft;
     tableRef.value?.click();
   }, 30);
 
@@ -384,8 +394,13 @@
     overflow: scroll hidden;
     cursor: pointer;
     opacity: 0%;
+    visibility: hidden;
     transition: 0.15s;
 
+    &.is-show {
+      visibility: visible;
+    }
+
     &::-webkit-scrollbar {
       height: 6px;
       transition: 0.15s;

diff --git a/dbm-ui/frontend/src/components/editable-table/hooks/use-resize.ts b/dbm-ui/frontend/src/components/editable-table/hooks/use-resize.ts
@@ -56,7 +56,6 @@ export default function (
 
         return result;
       }, {});
-      console.log('columnSizeConfig.value = ', columnSizeConfig.value);
     },
     {
       immediate: true,

diff --git a/dbm-ui/frontend/src/demo/Index.vue b/dbm-ui/frontend/src/demo/Index.vue
@@ -0,0 +1,158 @@
+<template>
+  <EditableTable
+    ref="table"
+    :model="dataModel"
+    :rules="rules">
+    <EditableTableRow
+      v-for="(item, index) in dataModel"
+      :key="index">
+      <EditableTableColumn
+        field="name"
+        fixed="left"
+        label="第一列"
+        :loading="isLoading"
+        :min-width="300"
+        :rowspan="5">
+        <EditInput v-model="item.name" />
+      </EditableTableColumn>
+      <EditableTableColumn
+        field="age"
+        label="第二列"
+        :min-width="300">
+        <EditSelect v-model="item.age">
+          <BkOption
+            id="1"
+            name="wx" />
+          <BkOption
+            id="2"
+            name="QQ" />
+        </EditSelect>
+      </EditableTableColumn>
+      <EditableTableColumn
+        field="date"
+        label="第三列"
+        :min-width="300">
+        <EditDatePicker v-model="item.date" />
+      </EditableTableColumn>
+      <EditableTableColumn
+        field="time"
+        label="第四列"
+        :min-width="300">
+        <EditTimePicker v-model="item.time" />
+      </EditableTableColumn>
+      <EditableTableColumn
+        field="tag"
+        label="第五列"
+        :min-width="300">
+        <EditTagInput v-model="item.tag" />
+      </EditableTableColumn>
+      <EditableTableColumn
+        field="tag"
+        label="第五列"
+        :min-width="300">
+        <EditBlock v-model="item.des">
+          <div>
+            <div>这是一段文字</div>
+            <div>这是一段文字</div>
+            <div>这是一段文字</div>
+            <div>这是一段文字</div>
+            <div>这是一段文字</div>
+            <div>这是一段文字</div>
+            <div>这是一段文字</div>
+          </div>
+          <template #append> as </template>
+        </EditBlock>
+      </EditableTableColumn>
+      <EditableTableColumn
+        field="more"
+        label="第六列"
+        :min-width="300">
+        <EditTextarea v-model="item.more" />
+      </EditableTableColumn>
+    </EditableTableRow>
+  </EditableTable>
+  <BkButton
+    :loading="isSubmiting"
+    @click="handleSubmit">
+    提交
+  </BkButton>
+</template>
+<script setup lang="ts">
+  import { reactive, useTemplateRef } from 'vue';
+
+  import EditableTable, {
+    Block as EditBlock,
+    Column as EditableTableColumn,
+    DatePicker as EditDatePicker,
+    Input as EditInput,
+    Row as EditableTableRow,
+    Select as EditSelect,
+    TagInput as EditTagInput,
+    Textarea as EditTextarea,
+    TimePicker as EditTimePicker,
+  } from '@components/editable-table/Index.vue';
+
+  const createData = () => ({
+    name: 'name',
+    age: '',
+    date: '',
+    time: '',
+    tag: [],
+    des: '这是一段描述文字',
+    more: 'mormeroemroemroemro',
+  });
+
+  const tableRef = useTemplateRef('table');
+  const isSubmiting = ref(false);
+  const isLoading = ref(true);
+
+  setTimeout(() => {
+    isLoading.value = false;
+  }, 10000);
+
+  const dataModel = reactive([
+    createData(),
+    createData(),
+    createData(),
+    createData(),
+    createData(),
+    createData(),
+    createData(),
+    createData(),
+    createData(),
+    createData(),
+    createData(),
+    createData(),
+    createData(),
+  ]);
+
+  const rules = {
+    name: [
+      {
+        validator: () => true,
+        message: '错了',
+        trigger: 'change',
+      },
+    ],
+    age: [
+      {
+        validator: () => true,
+        message: '错了没',
+        trigger: 'change',
+      },
+    ],
+  };
+
+  const handleSubmit = () => {
+    isSubmiting.value = true;
+    tableRef
+      .value!.validate()
+      .then(() => {
+        console.log('success');
+      })
+      .finally(() => {
+        console.log('finally');
+        isSubmiting.value = false;
+      });
+  };
+</script>
diff --git a/dbm-ui/frontend/src/router/index.ts b/dbm-ui/frontend/src/router/index.ts
@@ -111,6 +111,10 @@ export default () => {
         ...getTicketSelfManageRoutes(),
       ],
     },
+    {
+      path: '/demo',
+      component: () => import('@/demo/Index.vue'),
+    },
     {
       path: `${rootPath}${currentBiz}`,
       children: [
-Original file line number
+Diff line change
@@ Expand Up / @@ -56,7 +56,6 @@ export default function ( @@
             return result;
           }, {});
-          console.log('columnSizeConfig.value = ', columnSizeConfig.value);
         },
         {
           immediate: true,
@@ Expand Down @@