Merge pull request #96 from huangpeng0428/vue3-poloo-dev

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/http/plugin-manage.ts

@@ -21,7 +21,7 @@ export const getPluginBindingsList = (apigwId: number, code: string) => fetch.ge
  * @param apigwId 网关id
  * @param code 插件code
  */
-export const getPluginForm = (apigwId: number, code: string) => fetch.get(`${BK_DASHBOARD_URL}/gateways/${apigwId}/plugins/${code}/form`);
+export const getPluginForm = (apigwId: number, code: string) => fetch.get(`${BK_DASHBOARD_URL}/gateways/${apigwId}/plugins/${code}/form/`);
 
 /**
  * 获取某个环境或资源绑定的插件列表 (插件类型 + 插件配置)

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/components/plugin-manage/index.vue

@@ -20,7 +20,7 @@
             <span class="f15" @mouseenter="handleTitleHover(slotProps)" @mouseleave="handleTitleLeave">
               {{ slotProps.name }}
               <span
-                class="icon apigateway-icon icon-ag-edit-line ml5 mr5 " @click="handleEditePlugin(slotProps)"
+                class="icon apigateway-icon icon-ag-edit-line ml5 mr5 " @click.stop="handleEditePlugin(slotProps)"
                 v-if="slotProps.name === curHoverHead">
               </span>
               <span
@@ -31,7 +31,13 @@
           </template>
           <template #content="slotProps">
             <div>
-              {{ slotProps.config }}
+              <!-- {{ slotProps.config }} -->
+              <div v-for="(item, key) in slotProps.config" :key="key">
+                <div class="flex-row align-items-center">
+                  <div class="form-key-cls">{{key}}：</div>
+                  <div class="form-val-cls">{{item || '--'}}</div>
+                </div>
+              </div>
             </div>
           </template>
         </bk-collapse>
@@ -721,4 +727,14 @@ init();
 :deep(.bk-collapse-header):hover {
   background-color: #fff !important;
 }
+
+.form-key-cls{
+  font-size: 12px;
+  color: #63656E;
+  padding: 5px 0;
+}
+.form-val-cls{
+  font-size: 12px;
+  color: #313238;
+}
 </style>