feat: 通知组内新增变量 --story=119072639

src/frontend/src/domain/service/meta-manage.ts

@@ -124,6 +124,14 @@ export default {
         results: data.results.map(item => new UserModel(item)),
       }));
   },
+  /**
+   * @desc 获取通知组变量列表
+   * @param { Object } params
+   */
+  fetchVariableList() {
+    return MetaManageSource.getVariableList()
+      .then(({ data }) => data.member_variable);
+  },
   /**
    * @desc 获取标准字段
    * @param { Boolean } is_etl

src/frontend/src/domain/source/meta-manage.ts

@@ -106,6 +106,13 @@ class MetaManage extends ModuleBase {
       params,
     });
   }
+  // 获取通知组变量列表
+  getVariableList() {
+    return Request.get<{member_variable: Array<{
+      label: string,
+      value: string
+    }>}>('/api/v1/notice/common/');
+  }
   // 获取标准字段
   getStandardField(params?: Record<'is_etl', boolean>) {
     return Request.get<Array<StandardFieldModel>>(`${this.module}/fields/`, {

src/frontend/src/views/notice-group/language/en.js

@@ -53,5 +53,7 @@ export default {
     编辑成功: 'Edit successfully',
     新建成功: 'New successfully',
     克隆成功: 'Clone successfully',
+    无可选变量: 'No optional variables',
+    '请输入用户名，或通过输入$使用变量': 'Please enter a username, or use a variable by entering $',
   },
 };

src/frontend/src/views/notice-group/language/zh.js

@@ -53,5 +53,7 @@ export default {
     克隆成功: '克隆成功',
     编辑成功: '编辑成功',
     新建成功: '新建成功',
+    无可选变量: '无可选变量',
+    '请输入用户名，或通过输入$使用变量': '请输入用户名，或通过输入$使用变量',
   },
 };

src/frontend/src/views/notice-group/notice-group-create/index.vue

@@ -45,13 +45,13 @@
             :label="t('通知对象')"
             label-width="135"
             property="group_member">
-            <audit-user-selector
+            <user-variable-select
               allow-create
               class="form-item-common"
               :collapse-tags="collapseTags"
               :model-value="formData.group_member"
               :multiple="multiple"
-              :placeholder="t('请选择通知对象')"
+              :placeholder="t('请输入用户名，或通过输入$使用变量')"
               @change="handleNoticeReceiver" />
             <bk-alert
               class="form-item-common mt8"
@@ -140,6 +140,8 @@
   import useMessage from '@hooks/use-message';
   import useRequest from '@hooks/use-request';
 
+  import UserVariableSelect from './user-variable-select.vue';
+
   import getAssetsFile from '@/utils/getAssetsFile';
 
   interface NoticeWay{
@@ -317,7 +319,7 @@
   background-color: white;
 
   :deep(.bk-select .bk-select-trigger .bk-select-tag-input) {
-    width: 20%;
+    width: 330px;
   }
 
   .form-item-common {

src/frontend/src/views/notice-group/notice-group-create/user-variable-select.vue

@@ -0,0 +1,210 @@
+<!--
+  TencentBlueKing is pleased to support the open source community by making
+  蓝鲸智云 - 审计中心 (BlueKing - Audit Center) available.
+  Copyright (C) 2023 THL A29 Limited,
+  a Tencent company. All rights reserved.
+  Licensed under the MIT License (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at http://opensource.org/licenses/MIT
+  Unless required by applicable law or agreed to in writing,
+  software distributed under the License is distributed on
+  an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+  either express or implied. See the License for the
+  specific language governing permissions and limitations under the License.
+  We undertake not to change the open source license (MIT license) applicable
+  to the current version of the project delivered to anyone in the future.
+-->
+<template>
+  <bk-select
+    ref="userSelectorRef"
+    :allow-create="allowCreate"
+    auto-focus
+    class="audit-user-selector"
+    :collapse-tags="collapseTags"
+    filterable
+    :model-value="localValue"
+    :multiple="multiple"
+    multiple-mode="tag"
+    :no-data-text="noDataText"
+    :remote-method="remoteMethod"
+    @blur="handleBlur"
+    @change="handleChange"
+    @focus="handleFocus">
+    <template v-if="isVariableList">
+      <bk-option
+        v-for="(item) in variableList"
+        :key="item.value"
+        :label="`${item.value}(${item.label})`"
+        :value="item.value" />
+    </template>
+    <template v-else>
+      <bk-option
+        v-for="(item) in filterData"
+        :key="item.id"
+        :label="`${item.username}(${item.display_name})`"
+        :value="item.username" />
+    </template>
+  </bk-select>
+</template>
+<script setup lang="ts">
+  import _ from 'lodash';
+  import {
+    computed,
+    nextTick,
+    ref,
+    watch,
+  } from 'vue';
+  import { useI18n } from 'vue-i18n';
+
+  import MetaManageService from '@service/meta-manage';
+
+  import useRequest from '@hooks/use-request';
+
+  interface Props {
+    modelValue: Array<string> | string,
+    allowCreate?: boolean,
+    multiple?: boolean,
+    collapseTags?: boolean,
+    needRecord?:boolean
+  }
+  interface Option{
+    display_name: string,
+    username: string,
+    id:number
+  }
+  interface Emits {
+    (e: 'update:modelValue', value:Array<string>): void
+    (e: 'change', value:Array<string>): void
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    modelValue: () => [],
+    allowCreate: false,
+    multiple: true,
+    collapseTags: true,
+  });
+  const emit = defineEmits<Emits>();
+  const rememberList = ref<Array<Option>>([]);
+  const { t } = useI18n();
+  const userSelectorRef = ref();
+  const noDataText = ref(t('请输入用户名'));
+  const localValue = ref<Props['modelValue']>([]);
+  const pageSize = 30;
+  const isVariableList = ref(false);
+  const filterData = computed(() => data.value.results
+    .filter(item => item && item.username && item.id));
+
+  const {
+    data,
+    run,
+  } = useRequest(MetaManageService.fetchUserList, {
+    defaultParams: {
+      page: 1,
+      page_size: pageSize,
+      fuzzy_lookups: '',
+    },
+    defaultValue: {
+      count: 0,
+      results: [],
+    },
+    onSuccess: (data) => {
+      if (data.results.length <= 0) {
+        noDataText.value = t('找不到对应用户');
+      }
+    },
+  });
+
+  const {
+    data: variableList,
+  } = useRequest(MetaManageService.fetchVariableList, {
+    manual: true,
+    defaultValue: [],
+  });
+
+
+  const recordList = (val: string) => {
+    if (!val) return;
+    const userValue = data.value.results.find(item => item.username === val) as Option;
+    const alreayExistUserValue = rememberList.value.find(item => item.username === val);
+    if (!alreayExistUserValue) {
+      if (rememberList.value.length >= 6) {
+        rememberList.value.splice(rememberList.value.length - 1, 1);
+      }
+      rememberList.value.unshift(userValue);
+    }
+  };
+  const rememberResult = () => {
+    const string = sessionStorage.getItem('audit-userlist');
+    if (string) {
+      const ar = JSON.parse(string);
+      data.value.results = ar;
+      rememberList.value = ar;
+    }
+  };
+  const remoteMethod = (value:string) => {
+    if (!_.trim(value)) {
+      // data.value.results = [];
+      if (!props.multiple) {
+        data.value.results = [];
+      }
+      return;
+    }
+    // 搜索变量
+    if (value.startsWith('$')) {
+      isVariableList.value = true;
+      if (variableList.value.length <= 0) {
+        noDataText.value = t('无可选变量');
+      }
+    } else {
+      isVariableList.value = false;
+      run({
+        page: 1,
+        page_size: pageSize,
+        fuzzy_lookups: value,
+      });
+    }
+  };
+
+  const handleChange = (value: []) => {
+    emit('update:modelValue', value);
+    emit('change', value);
+    if (props.needRecord) {
+      recordList(value[value.length - 1]);
+    }
+    if (props.multiple) {
+      nextTick(() => {
+        userSelectorRef.value.searchKey = '';
+      });
+    }
+  };
+  // 获取焦点优先清掉数据
+  const handleFocus = () => {
+    noDataText.value = t('请输入用户名');
+    data.value.results = [];
+    if (props.needRecord) {
+      rememberResult();
+    }
+  };
+  const handleBlur = () => {
+    isVariableList.value = false;
+    sessionStorage.setItem('audit-userlist', JSON.stringify(rememberList.value));
+  };
+
+  watch(() => props.modelValue, (modelValue: Props['modelValue']) => {
+    localValue.value = modelValue;
+  }, {
+    immediate: true,
+    deep: true,
+  });
+</script>
+<style lang="postcss">
+  .audit-user-selector {
+    position: relative;
+    z-index: 1;
+    width: 100%;
+
+    .angle-up {
+      display: none !important;
+    }
+  }
+</style>