fix(frontend): 新建轮值策略人员搜索无效 TencentBlueKing#7193

ymakedaq · Sep 30, 2024 · 5a5af3d · 5a5af3d
1 parent fe3afcd
commit 5a5af3d
Show file tree

Hide file tree

Showing 9 changed files with 270 additions and 571 deletions.
diff --git a/dbm-ui/frontend/package.json b/dbm-ui/frontend/package.json
@@ -27,7 +27,7 @@
     "@icon-cool/bk-icon-bk-biz-components": "0.0.4",
     "@vueuse/core": "^11.0.3",
     "axios": "^1.7.7",
-    "bkui-vue": "2.0.1-beta.72",
+    "bkui-vue": "2.0.1-beta.74",
     "date-fns": "3.6.0",
     "dayjs": "^1.11.13",
     "html-to-image": "1.11.11",

diff --git a/dbm-ui/frontend/src/components/db-member-selector/index.vue b/dbm-ui/frontend/src/components/db-member-selector/index.vue
@@ -13,111 +13,170 @@
 
 <template>
   <div
-    class="db-member-selector-wrapper"
-    :class="{ 'is-focus': isFocous }">
-    <BkTagInput
+    class="member-selector-wrapper"
+    :class="{ 'is-hover': isHover }"
+    @mouseenter="handleHover"
+    @mouseleave="handleBlur">
+    <UserSelector
+      ref="userSelectorRef"
       v-model="modelValue"
-      allow-auto-match
-      allow-create
-      :create-tag-validator="createTagValidator"
-      has-delete-icon
-      :list="peopleList"
-      v-bind="listeners"
-      @input="remoteFilter" />
+      class="member-selector"
+      :exact-search-method="exactSearchMethod"
+      fast-clear
+      :fixed-height="false"
+      :fuzzy-search-method="fuzzySearchMethod"
+      :paste-validator="pasteValidator"
+      :render-list="renderList"
+      :render-tag="renderTag"
+      :search-from-default-alternate="false"
+      tag-clearable
+      @remove-selected="handleRemoveSelected" />
     <DbIcon
+      v-if="modelValue.length > 0"
       v-bk-tooltips="t('复制')"
-      type="copy db-member-selector-copy"
+      class="db-member-selector-copy"
+      type="copy"
       @click.stop="handleCopy" />
   </div>
 </template>
 
-<script setup lang="tsx">
-  import _ from 'lodash';
+<script setup lang="ts">
+  import { Fragment } from 'vue/jsx-runtime';
   import { useI18n } from 'vue-i18n';
 
   import { getUserList } from '@services/source/user';
 
-  import { useCopy, useListeners } from '@hooks';
+  import { useCopy } from '@hooks';
 
-  type GetUsesParams = ServiceParameters<typeof getUserList>;
+  const emits = defineEmits<{
+    (e: 'change', value: string[]): void;
+  }>();
 
   const modelValue = defineModel<string[]>({
-    default: () => [],
+    required: true,
   });
 
-  const listeners = useListeners();
-
-  const copy = useCopy();
   const { t } = useI18n();
+  const copy = useCopy();
+
+  const userSelectorRef = ref();
+  const isHover = ref(false);
+
+  const exactSearchMethod = () =>
+    getUserList({
+      exact_lookups: modelValue.value.join(','),
+    }).then((result) => result.results);
+
+  const pasteValidator = (values: string[]) => values;
+
+  const fuzzySearchMethod = (keyword: string) =>
+    getUserList({
+      fuzzy_lookups: keyword,
+    }).then((searchList) => ({
+      next: false,
+      results: searchList.results.map((userItem) => ({
+        username: userItem.username,
+        display_name: userItem.display_name,
+      })),
+    }));
+
+  const renderTag = (
+    renderMethod: typeof h,
+    node: {
+      username: string;
+      user: {
+        username: string;
+        display_name: string;
+      };
+    },
+  ) =>
+    renderMethod('div', null, [
+      renderMethod(
+        'span',
+        {
+          class: 'mr-4',
+        },
+        `${node.username}(${node.user?.display_name || node.username})`,
+      ),
+    ]);
+
+  const renderList = (
+    renderMethod: typeof h,
+    node: {
+      user: {
+        username: string;
+        display_name: string;
+        type: string;
+      };
+    },
+  ) => {
+    const { display_name: displayName, username } = node.user;
+
+    return renderMethod(Fragment, [renderMethod('span', `${username}(${displayName})`)]);
+  };
+
+  watch(modelValue, () => {
+    console.log('from watchch modelvall = ', modelValue.value);
+    emits('change', modelValue.value);
+  });
+
+  const handleRemoveSelected = () => {
+    userSelectorRef.value.search();
+  };
 
-  const peopleList = ref<
-    {
-      id: string;
-      name: string;
-    }[]
-  >([]);
-
-  const isFocous = ref(false);
-
-  const createTagValidator = (tag: string) => !!peopleList.value.find((item) => item.name === tag);
-
-  /**
-   * 获取人员列表
-   */
-  const fetchUseList = async (params: GetUsesParams = {}) => {
-    await getUserList(params).then((res) => {
-      // 过滤已经选中的用户
-      peopleList.value = res.results
-        .filter((item) => !modelValue.value?.includes(item.username))
-        .map((item) => ({
-          id: item.username,
-          name: item.username,
-        }));
-    });
+  const handleHover = () => {
+    isHover.value = true;
   };
-  // 初始化加载
-  fetchUseList({ limit: 200, offset: 0 });
 
-  /**
-   * 远程搜索人员
-   */
-  const remoteFilter = _.debounce((value: string) => fetchUseList({ fuzzy_lookups: value }), 500);
+  const handleBlur = () => {
+    isHover.value = false;
+  };
 
   const handleCopy = () => {
     copy(modelValue.value.join(';'));
   };
 </script>
 
 <style lang="less" scoped>
-  .db-member-selector-wrapper {
+  .member-selector-wrapper {
     position: relative;
+    line-height: 1;
 
-    &:hover,
-    &.is-focus {
+    &.is-hover {
+      :deep(.user-selector-clear) {
+        visibility: visible;
+      }
+    }
+
+    &:hover {
       .db-member-selector-copy {
         display: block;
       }
     }
-  }
 
-  .db-member-selector-copy {
-    position: absolute;
-    top: 50%;
-    right: 2px;
-    z-index: 99;
-    display: none;
-    width: 20px;
-    height: 20px;
-    margin-top: -10px;
-    margin-right: 4px;
-    font-size: 16px;
-    line-height: 20px;
-    cursor: pointer;
-    background-color: white;
+    .member-selector {
+      width: 100%;
+    }
 
-    &:hover {
-      color: @primary-color;
-      background-color: #e1ecff;
+    .db-member-selector-copy {
+      position: absolute;
+      top: 50%;
+      right: 24px;
+      z-index: 99;
+      display: none;
+      width: 20px;
+      height: 20px;
+      margin-top: -15px;
+      font-size: 12px;
+      line-height: 20px;
+      color: #979ba5;
+      cursor: pointer;
+      background-color: white;
+
+      &:hover {
+        color: @primary-color;
+        background-color: #e1ecff;
+      }
     }
   }
 </style>
diff --git a/dbm-ui/frontend/src/views/db-manage/common/sql-execute/common/RenderSql/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/sql-execute/common/RenderSql/Index.vue
@@ -12,7 +12,9 @@
         text
         theme="primary"
         @click="handleShowSql">
-        {{ modelValue.length < 1 ? t('点击添加') : t('n 个 SQL 文件', { n: modelValue.length }) }}
+        <span v-if="modelValue.length < 1">{{ t('点击添加') }}</span>
+        <span v-else-if="modelValue.length === 1">{{ modelValue[0] }}</span>
+        <span v-else>{{ t('n 个 SQL 文件', { n: modelValue.length }) }}</span>
       </BkButton>
     </span>
   </RenderTextPlain>

diff --git a/dbm-ui/frontend/src/views/duty-rule-manage/index/Index.vue b/dbm-ui/frontend/src/views/duty-rule-manage/index/Index.vue
@@ -20,13 +20,15 @@
   </div>
 </template>
 <script setup lang="ts">
+  import { DBTypes } from '@common/const';
+
   import DbTab from '@components/db-tab/Index.vue';
 
   import RenderContent from './components/content/Index.vue';
 
   const route = useRoute();
 
-  const activeTab = ref<string>(route.query.db_type as string);
+  const activeTab = ref<string>((route.query.db_type as string) || DBTypes.MYSQL);
 </script>
 <style lang="less">
   .duty-rule-manage-content {