feat: 添加人员选择器

src/dashboard-front-new/src/components/member-select/Tpl.tsx

@@ -0,0 +1,21 @@
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    englishName: {
+      type: String,
+      default: '',
+    },
+    chineseName: {
+      type: String,
+      default: '',
+    },
+  },
+  setup(props) {
+    return () => (
+      <div class="flex-row align-items-center flex-1 p10">
+        {props.englishName} ({props.chineseName})
+      </div>
+    );
+  },
+});

src/dashboard-front-new/src/components/member-select/index.tsx

@@ -0,0 +1,129 @@
+import { useStaffStore } from '@/store';
+import { Staff, StaffType } from '@/types';
+import { Loading, TagInput } from 'bkui-vue';
+import { computed, defineComponent, onMounted, PropType, ref, watch, nextTick } from 'vue';
+import _ from 'lodash';
+
+import './member-select.scss';
+import Tpl from './Tpl';
+
+export default defineComponent({
+  props: {
+    disabled: {
+      type: Boolean,
+    },
+    modelValue: {
+      type: Array as PropType<string[]>,
+    },
+    type: {
+      type: String as PropType<StaffType>,
+      default: StaffType.RTX,
+    },
+    multiple: {
+      type: Boolean,
+      default: true,
+    },
+    clearable: {
+      type: Boolean,
+      default: true,
+    },
+    allowCreate: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['change', 'input', 'blur'],
+  setup(props, ctx) {
+    const tagInputRef = ref(null);
+    const staffStore = useStaffStore();
+    const searchKey = ['username'];
+    const userList: any = ref([]);
+    const maxData = computed(() => (!props.multiple ? {
+      maxData: 1,
+    } : {}));
+    const popoverProps = {
+      boundary: document.body,
+      fixOnBoundary: true,
+    };
+
+    onMounted(() => {
+      if (staffStore.list.length === 0) {
+        staffStore.fetchStaffs();
+      }
+    });
+
+    function tpl(node: Staff) {
+      return (
+        <Tpl
+          englishName={node.username}
+          chineseName={node.display_name}
+        />
+      );
+    }
+    function handleChange(val: Staff[]) {
+      ctx.emit('input', val);
+      ctx.emit('change', val);
+    }
+
+    function handleBlur(val: Staff[]) {
+      ctx.emit('blur', val);
+    }
+
+    const getUserList = _.debounce((userName: string) => {
+      if (staffStore.fetching || !userName) return;
+      staffStore.fetchStaffs(userName);
+    }, 500);
+
+    function handleInput(userName: string) {
+      getUserList(userName);
+    }
+
+    watch(
+      () => staffStore.list,
+      (list) => {
+        if (list.length) {
+          nextTick(() => {
+            userList.value = _.cloneDeep(list);
+          });
+        }
+      },
+      { immediate: true, deep: true },
+    );
+
+    return () => (
+      <TagInput
+        {...ctx.attrs}
+        {...maxData.value}
+        // disabled={props.disabled || staffStore.fetching}
+        list={userList}
+        ref={tagInputRef}
+        displayKey="display_name"
+        saveKey="username"
+        is-async-list
+        searchKey={searchKey}
+        // filterCallback={handleSearch}
+        modelValue={props.modelValue}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        onInput={handleInput}
+        tpl={tpl}
+        tagTpl={tpl}
+        clearable={props.clearable}
+        allowCreate={props.allowCreate}
+        popoverProps={popoverProps}
+      >
+          {{
+            suffix: () => staffStore.fetching && (
+              <Loading
+                class="mr10"
+                loading={staffStore.fetching}
+                mode="spin"
+                size="mini"
+
+              />
+            ),
+          }}
+      </TagInput>
+    );
+  },
+});

src/dashboard-front-new/src/components/member-select/member-select.scss

@@ -0,0 +1,9 @@
+.bk-metrics-staff-li {
+  height: 40px;
+}
+.bk-metrics-staff-memeber-pic {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  margin: 0 6px 0 0;
+}

src/dashboard-front-new/src/store/index.ts

@@ -5,3 +5,4 @@ export * from './resourceVersion';
 export * from './permission';
 export * from './accessLog';
 export * from './operate-records';
+export * from './staff';

src/dashboard-front-new/src/store/staff.ts

@@ -0,0 +1,47 @@
+// @ts-check
+import { defineStore } from 'pinia';
+import QueryString from 'qs';
+import { shallowRef } from 'vue';
+import _ from 'lodash';
+const { BK_LIST_USERS_API_URL } = window;
+
+
+export const useStaffStore = defineStore({
+  id: 'staffStore',
+  state: () => ({
+    fetching: false,
+    list: shallowRef([]),
+  }),
+  actions: {
+    async fetchStaffs(name?: string) {
+      if (this.fetching) return;
+      this.fetching = true;
+      const usersListPath = `${BK_LIST_USERS_API_URL}`;
+      const params: any = {
+        app_code: 'bk-magicbox',
+        page: 1,
+        page_size: 200,
+        callback: 'callbackStaff',
+      };
+      if (name) {
+        params.fuzzy_lookups = name;
+      }
+      const scriptTag = document.createElement('script');
+      scriptTag.setAttribute('type', 'text/javascript');
+      scriptTag.setAttribute('src', `${usersListPath}?${QueryString.stringify(params)}`);
+
+      const headTag = document.getElementsByTagName('head')[0];
+      // @ts-ignore
+      window[params.callback] = ({ data, result }: { data: any, result: boolean }) => {
+        if (result) {
+          this.fetching = false;
+          this.list = _.unionBy(this.list, data.results, 'id');
+        }
+        headTag.removeChild(scriptTag);
+        // @ts-ignore
+        delete window[params.callback];
+      };
+      headTag.appendChild(scriptTag);
+    },
+  },
+});

src/dashboard-front-new/src/types/common.ts

@@ -29,3 +29,13 @@ export interface IDropList {
   label: string
   disabled?: boolean
 }
+
+export enum StaffType {
+  RTX = 'rtx',
+}
+export interface Staff {
+  english_name: string;
+  chinese_name: string;
+  username: string;
+  display_name: string;
+}

src/dashboard-front-new/src/views/home.vue

@@ -147,12 +147,7 @@
           property="maintainers"
           required
         >
-          <bk-tag-input
-            v-model="formData.maintainers"
-            allow-create
-            has-delete-icon
-            allow-auto-match
-          />
+          <member-select v-model="formData.maintainers" />
         </bk-form-item>
         <bk-form-item
           label="描述"
@@ -187,6 +182,7 @@ import { IDialog } from '@/types';
 import { useRouter } from 'vue-router';
 import { useGetApiList } from '@/hooks';
 import { is24HoursAgo } from '@/common/util';
+import MemberSelect from '@/components/member-select';
 import {
   ref,
   watch,

src/dashboard-front-new/types/global.d.ts

@@ -13,4 +13,5 @@ declare interface Window {
   BK_DOCS_URL_PREFIX_MARKDOWN: string
   BK_APIGATEWAY_VERSION: string
   GLOBAL_CONFIG: any
+  BK_COMPONENT_API_URL: string
 }