@blueking/bk-user-selector 0.0.5 → 0.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -3,7 +3,7 @@
3
3
  })(this, function(exports2, vue, bkuiVue) {
4
4
  "use strict";
5
5
  var __vite_style__ = document.createElement("style");
6
- __vite_style__.textContent = ".user-tag[data-v-203c36cb] {\n margin-right: 4px;\n}\n.user-tag.draggable[data-v-203c36cb] {\n cursor: move;\n}\n.user-tag.active[data-v-203c36cb] {\n background-color: #e1ecff;\n border-color: #3a84ff;\n}\n.user-tag .tag-content .user-name[data-v-203c36cb] {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: 12px;\n}\n.user-tag .tag-content .tenant-name[data-v-203c36cb] {\n color: #f59500;\n margin-left: 3px;\n white-space: nowrap;\n padding: 0 3px;\n border-radius: 2px;\n}.bk-user-selector-popover.bk-popover.bk-pop2-content {\n padding: 0;\n}.multiple-selector[data-v-9ddcc982] {\n position: relative;\n width: 100%;\n}\n.multiple-selector .tags-container[data-v-9ddcc982] {\n min-height: 32px;\n border: 1px solid #dcdee5;\n border-radius: 2px;\n padding: 1px 4px;\n transition: all 0.2s ease;\n background-color: #fff;\n}\n.multiple-selector .tags-container.focused[data-v-9ddcc982] {\n border-color: #3a84ff;\n box-shadow: 0 0 0 2px rgba(58, 132, 255, 0.1);\n}\n.multiple-selector .tags-container.collapsed[data-v-9ddcc982] {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n}\n.multiple-selector .tag-list[data-v-9ddcc982] {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n}\n.multiple-selector .tag-wrapper[data-v-9ddcc982] {\n display: inline-flex;\n align-items: center;\n max-width: 100%;\n}\n.multiple-selector .search-input[data-v-9ddcc982] {\n outline: none;\n border: none;\n height: 28px;\n min-width: 10px;\n background: transparent;\n}\n.multiple-selector .search-input[data-v-9ddcc982]::placeholder {\n color: #c4c6cc;\n}\n.multiple-selector .search-input.inline[data-v-9ddcc982] {\n min-width: 10px;\n}\n.multiple-selector .search-input.last[data-v-9ddcc982], .multiple-selector .search-input.collapsed[data-v-9ddcc982] {\n flex: 1;\n min-width: 60px;\n}\n.dropdown-content[data-v-9ddcc982] {\n min-height: 40px;\n max-height: 300px;\n overflow-y: auto;\n padding: 5px 0;\n}\n.dropdown-content .no-data[data-v-9ddcc982] {\n padding: 10px;\n text-align: center;\n color: #979ba5;\n}\n.dropdown-content .user-option[data-v-9ddcc982] {\n padding: 8px 12px;\n cursor: pointer;\n display: flex;\n align-items: center;\n height: 32px;\n}\n.dropdown-content .user-option[data-v-9ddcc982]:hover {\n background-color: #f5f7fa;\n}\n.dropdown-content .user-option .tenant-name[data-v-9ddcc982] {\n color: #f59500;\n margin-left: 4px;\n padding: 0 4px;\n}\n.me-tag[data-v-9ddcc982] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background-color: #e1ecff;\n color: #4d4f56;\n border-radius: 50%;\n padding: 0 8px;\n height: 24px;\n width: 24px;\n cursor: pointer;\n font-size: 12px;\n position: absolute;\n right: 8px;\n top: 50%;\n transform: translateY(-50%);\n z-index: 1;\n}\n.me-tag[data-v-9ddcc982]:hover {\n background-color: #cddffe;\n color: #3a84ff;\n}\n.me-tag.disabled[data-v-9ddcc982] {\n background-color: #f0f1f5;\n color: #c4c6cc;\n cursor: not-allowed;\n}.single-selector[data-v-1b38f31d] {\n position: relative;\n width: 100%;\n}\n.input-container[data-v-1b38f31d] {\n position: relative;\n display: flex;\n align-items: center;\n min-height: 32px;\n border: 1px solid #dcdee5;\n border-radius: 2px;\n padding: 0 8px;\n background-color: #fff;\n}\n.input-container[data-v-1b38f31d]:focus-within {\n border-color: #3a84ff;\n box-shadow: 0 0 0 2px rgba(58, 132, 255, 0.1);\n}\n.search-input[data-v-1b38f31d] {\n flex: 1;\n outline: none;\n border: none;\n height: 30px;\n background: transparent;\n}\n.search-input[data-v-1b38f31d]::placeholder {\n color: #c4c6cc;\n}\n.selected-user[data-v-1b38f31d] {\n display: inline-flex;\n align-items: center;\n background-color: #f0f1f5;\n border-radius: 2px;\n padding: 0 8px;\n margin-right: 8px;\n height: 24px;\n max-width: calc(100% - 32px);\n}\n.selected-user .tenant-name[data-v-1b38f31d] {\n color: #f59500;\n margin-left: 4px;\n}\n.selected-user .close-icon[data-v-1b38f31d] {\n margin-left: 4px;\n cursor: pointer;\n font-style: normal;\n}\n.dropdown-content[data-v-1b38f31d] {\n min-height: 40px;\n max-height: 300px;\n overflow-y: auto;\n padding: 5px 0;\n}\n.dropdown-content .no-data[data-v-1b38f31d] {\n padding: 10px;\n text-align: center;\n color: #979ba5;\n}\n.dropdown-content .user-option[data-v-1b38f31d] {\n padding: 8px 12px;\n cursor: pointer;\n display: flex;\n align-items: center;\n height: 32px;\n}\n.dropdown-content .user-option[data-v-1b38f31d]:hover {\n background-color: #f5f7fa;\n}\n.dropdown-content .user-option .tenant-name[data-v-1b38f31d] {\n color: #f59500;\n margin-left: 4px;\n padding: 0 4px;\n}\n.me-tag[data-v-1b38f31d] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background-color: #e1ecff;\n color: #4d4f56;\n border-radius: 50%;\n padding: 0 8px;\n height: 24px;\n width: 24px;\n cursor: pointer;\n font-size: 12px;\n position: absolute;\n right: 8px;\n top: 50%;\n transform: translateY(-50%);\n z-index: 1;\n}\n.me-tag[data-v-1b38f31d]:hover {\n background-color: #cddffe;\n color: #3a84ff;\n}\n.me-tag.disabled[data-v-1b38f31d] {\n background-color: #f0f1f5;\n color: #c4c6cc;\n cursor: not-allowed;\n}.bk-user-selector[data-v-fe084750] {\n width: 100%;\n position: relative;\n font-size: 12px;\n}/*$vite$:1*/";
6
+ __vite_style__.textContent = ".me-tag[data-v-887b7c44] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background-color: #e1ecff;\n color: #4d4f56;\n border-radius: 50%;\n padding: 0 8px;\n height: 24px;\n width: 24px;\n cursor: pointer;\n font-size: 12px;\n position: absolute;\n right: 8px;\n top: 50%;\n transform: translateY(-50%);\n z-index: 1;\n}\n.me-tag[data-v-887b7c44]:hover {\n background-color: #cddffe;\n color: #3a84ff;\n}\n.me-tag.disabled[data-v-887b7c44] {\n background-color: #f0f1f5;\n color: #c4c6cc;\n cursor: not-allowed;\n}.dropdown-content[data-v-c68dfcac] {\n min-height: 40px;\n max-height: 300px;\n overflow-y: auto;\n padding: 5px 0;\n}\n.dropdown-content .no-data[data-v-c68dfcac] {\n padding: 10px;\n text-align: center;\n color: #979ba5;\n}\n.dropdown-content .user-group .group-header[data-v-c68dfcac] {\n padding: 8px 12px;\n color: #979ba5;\n display: flex;\n align-items: center;\n}\n.dropdown-content .user-group .group-header .group-count[data-v-c68dfcac] {\n margin-left: 4px;\n}\n.dropdown-content .user-option[data-v-c68dfcac] {\n padding: 8px 12px;\n cursor: pointer;\n display: flex;\n align-items: center;\n height: 32px;\n}\n.dropdown-content .user-option[data-v-c68dfcac]:hover {\n background-color: #f5f7fa;\n}\n.dropdown-content .user-option .tenant-name[data-v-c68dfcac] {\n color: #f59500;\n margin-left: 4px;\n padding: 0 4px;\n}.bk-user-selector-popover.bk-popover.bk-pop2-content {\n padding: 0;\n}.user-tag[data-v-203c36cb] {\n margin-right: 4px;\n}\n.user-tag.draggable[data-v-203c36cb] {\n cursor: move;\n}\n.user-tag.active[data-v-203c36cb] {\n background-color: #e1ecff;\n border-color: #3a84ff;\n}\n.user-tag .tag-content .user-name[data-v-203c36cb] {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: 12px;\n}\n.user-tag .tag-content .tenant-name[data-v-203c36cb] {\n color: #f59500;\n margin-left: 3px;\n white-space: nowrap;\n padding: 0 3px;\n border-radius: 2px;\n}.multiple-selector[data-v-a8dc735f] {\n position: relative;\n width: 100%;\n}\n.multiple-selector .tags-container[data-v-a8dc735f] {\n min-height: 32px;\n border: 1px solid #dcdee5;\n border-radius: 2px;\n padding: 1px 4px;\n transition: all 0.2s ease;\n background-color: #fff;\n}\n.multiple-selector .tags-container.focused[data-v-a8dc735f] {\n border-color: #3a84ff;\n box-shadow: 0 0 0 2px rgba(58, 132, 255, 0.1);\n}\n.multiple-selector .tags-container.collapsed[data-v-a8dc735f] {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n}\n.multiple-selector .tag-list[data-v-a8dc735f] {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n}\n.multiple-selector .tag-wrapper[data-v-a8dc735f] {\n display: inline-flex;\n align-items: center;\n max-width: 100%;\n}\n.multiple-selector .search-input[data-v-a8dc735f] {\n outline: none;\n border: none;\n height: 28px;\n min-width: 10px;\n background: transparent;\n}\n.multiple-selector .search-input[data-v-a8dc735f]::placeholder {\n color: #c4c6cc;\n}\n.multiple-selector .search-input.inline[data-v-a8dc735f] {\n min-width: 10px;\n}\n.multiple-selector .search-input.last[data-v-a8dc735f], .multiple-selector .search-input.collapsed[data-v-a8dc735f] {\n flex: 1;\n min-width: 60px;\n}.single-selector[data-v-8b8dd0fd] {\n position: relative;\n width: 100%;\n}\n.input-container[data-v-8b8dd0fd] {\n position: relative;\n display: flex;\n align-items: center;\n min-height: 32px;\n border: 1px solid #dcdee5;\n border-radius: 2px;\n padding: 0 8px;\n background-color: #fff;\n}\n.input-container[data-v-8b8dd0fd]:focus-within {\n border-color: #3a84ff;\n box-shadow: 0 0 0 2px rgba(58, 132, 255, 0.1);\n}\n.search-input[data-v-8b8dd0fd] {\n flex: 1;\n outline: none;\n border: none;\n height: 30px;\n background: transparent;\n}\n.search-input[data-v-8b8dd0fd]::placeholder {\n color: #c4c6cc;\n}\n.selected-user[data-v-8b8dd0fd] {\n display: inline-flex;\n align-items: center;\n background-color: #f0f1f5;\n border-radius: 2px;\n padding: 0 8px;\n margin-right: 8px;\n height: 24px;\n max-width: calc(100% - 32px);\n}\n.selected-user .tenant-name[data-v-8b8dd0fd] {\n color: #f59500;\n margin-left: 4px;\n}\n.selected-user .close-icon[data-v-8b8dd0fd] {\n margin-left: 4px;\n cursor: pointer;\n font-style: normal;\n}.bk-user-selector[data-v-bc7b4ccd] {\n width: 100%;\n position: relative;\n font-size: 12px;\n}/*$vite$:1*/";
7
7
  document.head.appendChild(__vite_style__);
8
8
  const getTenants = async (apiBaseUrl, tenantId) => {
9
9
  if (!apiBaseUrl || !tenantId) {
@@ -82,7 +82,8 @@
82
82
  return users.map((user) => ({
83
83
  id: user.bk_username,
84
84
  name: user.display_name,
85
- tenantId: user.owner_tenant_id
85
+ tenantId: user.owner_tenant_id,
86
+ ...user
86
87
  }));
87
88
  };
88
89
  const useTenantData = (apiBaseUrl, tenantId) => {
@@ -2964,6 +2965,270 @@
2964
2965
  clearSearch
2965
2966
  };
2966
2967
  };
2968
+ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
2969
+ ...{
2970
+ name: "MeTag"
2971
+ },
2972
+ __name: "me-tag",
2973
+ props: {
2974
+ /**
2975
+ * 当前用户ID
2976
+ */
2977
+ currentUserId: {
2978
+ type: String,
2979
+ default: ""
2980
+ },
2981
+ /**
2982
+ * 是否禁用
2983
+ */
2984
+ isDisabled: {
2985
+ type: Boolean,
2986
+ default: false
2987
+ }
2988
+ },
2989
+ emits: ["click"],
2990
+ setup(__props, { emit: __emit }) {
2991
+ const props = __props;
2992
+ const emit = __emit;
2993
+ const handleClick = () => {
2994
+ if (props.isDisabled) return;
2995
+ emit("click");
2996
+ };
2997
+ return (_ctx, _cache) => {
2998
+ return __props.currentUserId ? (vue.openBlock(), vue.createElementBlock(
2999
+ "div",
3000
+ {
3001
+ key: 0,
3002
+ class: vue.normalizeClass(["me-tag", { disabled: __props.isDisabled }]),
3003
+ onClick: vue.withModifiers(handleClick, ["stop"])
3004
+ },
3005
+ " 我 ",
3006
+ 2
3007
+ /* CLASS */
3008
+ )) : vue.createCommentVNode("v-if", true);
3009
+ };
3010
+ }
3011
+ });
3012
+ const _export_sfc = (sfc, props) => {
3013
+ const target = sfc.__vccOpts || sfc;
3014
+ for (const [key, val] of props) {
3015
+ target[key] = val;
3016
+ }
3017
+ return target;
3018
+ };
3019
+ const MeTag = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-887b7c44"]]);
3020
+ const _hoisted_1$4 = {
3021
+ key: 0,
3022
+ class: "no-data"
3023
+ };
3024
+ const _hoisted_2$3 = { class: "group-name" };
3025
+ const _hoisted_3$3 = { class: "group-count" };
3026
+ const _hoisted_4$1 = ["onMousedown"];
3027
+ const _hoisted_5 = {
3028
+ key: 0,
3029
+ class: "tenant-name"
3030
+ };
3031
+ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
3032
+ ...{
3033
+ name: "SelectionPopover"
3034
+ },
3035
+ __name: "selection-popover",
3036
+ props: {
3037
+ /**
3038
+ * 是否显示下拉菜单
3039
+ */
3040
+ isShow: {
3041
+ type: Boolean,
3042
+ default: false
3043
+ },
3044
+ /**
3045
+ * 容器宽度
3046
+ */
3047
+ containerWidth: {
3048
+ type: [Number, String],
3049
+ default: "auto"
3050
+ },
3051
+ /**
3052
+ * 是否加载中
3053
+ */
3054
+ loading: {
3055
+ type: Boolean,
3056
+ default: false
3057
+ },
3058
+ /**
3059
+ * 搜索结果选项
3060
+ */
3061
+ options: {
3062
+ type: Array,
3063
+ default: () => []
3064
+ },
3065
+ /**
3066
+ * 搜索关键词
3067
+ */
3068
+ searchQuery: {
3069
+ type: String,
3070
+ default: ""
3071
+ },
3072
+ /**
3073
+ * 当前租户ID
3074
+ */
3075
+ tenantId: {
3076
+ type: String,
3077
+ default: ""
3078
+ },
3079
+ /**
3080
+ * 租户信息映射
3081
+ */
3082
+ tenants: {
3083
+ type: Object,
3084
+ default: () => ({})
3085
+ },
3086
+ /**
3087
+ * 用户组
3088
+ */
3089
+ userGroup: {
3090
+ type: Array,
3091
+ default: () => []
3092
+ },
3093
+ /**
3094
+ * 用户组名称
3095
+ */
3096
+ userGroupName: {
3097
+ type: String,
3098
+ default: "用户群组"
3099
+ }
3100
+ },
3101
+ emits: ["select-user"],
3102
+ setup(__props, { emit: __emit }) {
3103
+ const props = __props;
3104
+ const emit = __emit;
3105
+ const groupedUsers = vue.computed(() => {
3106
+ const groups = {};
3107
+ console.log("props.options", props.options);
3108
+ if (Array.isArray(props.userGroup) && props.userGroup.length > 0) {
3109
+ groups[props.userGroupName] = props.userGroup.map((group) => ({
3110
+ id: group.id,
3111
+ name: group.name,
3112
+ tenantId: ""
3113
+ }));
3114
+ }
3115
+ props.options.forEach((user) => {
3116
+ const groupName = user.data_source_type === "real" ? "用户" : "虚拟账号";
3117
+ if (!groups[groupName]) {
3118
+ groups[groupName] = [];
3119
+ }
3120
+ groups[groupName].push(user);
3121
+ });
3122
+ return groups;
3123
+ });
3124
+ const selectUser = (user) => {
3125
+ emit("select-user", user);
3126
+ };
3127
+ return (_ctx, _cache) => {
3128
+ return vue.openBlock(), vue.createBlock(vue.unref(bkuiVue.Popover), {
3129
+ "ext-cls": "bk-user-selector-popover",
3130
+ arrow: false,
3131
+ "is-show": __props.isShow,
3132
+ width: __props.containerWidth,
3133
+ placement: "bottom-start",
3134
+ theme: "light",
3135
+ trigger: "manual"
3136
+ }, {
3137
+ content: vue.withCtx(() => [
3138
+ vue.createVNode(vue.unref(bkuiVue.Loading), {
3139
+ class: "dropdown-content",
3140
+ loading: __props.loading,
3141
+ size: "mini",
3142
+ mode: "spin"
3143
+ }, {
3144
+ default: vue.withCtx(() => [
3145
+ __props.options.length === 0 && __props.userGroup.length === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
3146
+ vue.createElementVNode(
3147
+ "span",
3148
+ null,
3149
+ vue.toDisplayString(__props.searchQuery.length > 1 ? "未找到匹配用户" : "请输入关键词搜索"),
3150
+ 1
3151
+ /* TEXT */
3152
+ )
3153
+ ])) : (vue.openBlock(true), vue.createElementBlock(
3154
+ vue.Fragment,
3155
+ { key: 1 },
3156
+ vue.renderList(groupedUsers.value, (group, groupName) => {
3157
+ return vue.openBlock(), vue.createElementBlock("div", {
3158
+ class: "user-group",
3159
+ key: groupName
3160
+ }, [
3161
+ vue.createElementVNode(
3162
+ "div",
3163
+ {
3164
+ class: "group-header",
3165
+ onMousedown: _cache[0] || (_cache[0] = vue.withModifiers(() => {
3166
+ }, ["prevent"]))
3167
+ },
3168
+ [
3169
+ vue.createElementVNode(
3170
+ "span",
3171
+ _hoisted_2$3,
3172
+ vue.toDisplayString(groupName),
3173
+ 1
3174
+ /* TEXT */
3175
+ ),
3176
+ vue.createElementVNode(
3177
+ "span",
3178
+ _hoisted_3$3,
3179
+ "(" + vue.toDisplayString(group.length) + ")",
3180
+ 1
3181
+ /* TEXT */
3182
+ )
3183
+ ],
3184
+ 32
3185
+ /* NEED_HYDRATION */
3186
+ ),
3187
+ (vue.openBlock(true), vue.createElementBlock(
3188
+ vue.Fragment,
3189
+ null,
3190
+ vue.renderList(group, (user) => {
3191
+ return vue.openBlock(), vue.createElementBlock("div", {
3192
+ class: "user-option",
3193
+ key: user.id,
3194
+ onMousedown: vue.withModifiers(($event) => selectUser(user), ["prevent"])
3195
+ }, [
3196
+ vue.createElementVNode(
3197
+ "span",
3198
+ null,
3199
+ vue.toDisplayString(user.name),
3200
+ 1
3201
+ /* TEXT */
3202
+ ),
3203
+ user.tenantId !== __props.tenantId && user.tenantId && __props.tenants[user.tenantId] ? (vue.openBlock(), vue.createElementBlock(
3204
+ "span",
3205
+ _hoisted_5,
3206
+ "@" + vue.toDisplayString(__props.tenants[user.tenantId]),
3207
+ 1
3208
+ /* TEXT */
3209
+ )) : vue.createCommentVNode("v-if", true)
3210
+ ], 40, _hoisted_4$1);
3211
+ }),
3212
+ 128
3213
+ /* KEYED_FRAGMENT */
3214
+ ))
3215
+ ]);
3216
+ }),
3217
+ 128
3218
+ /* KEYED_FRAGMENT */
3219
+ ))
3220
+ ]),
3221
+ _: 1
3222
+ /* STABLE */
3223
+ }, 8, ["loading"])
3224
+ ]),
3225
+ _: 1
3226
+ /* STABLE */
3227
+ }, 8, ["is-show", "width"]);
3228
+ };
3229
+ }
3230
+ });
3231
+ const SelectionPopover = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-c68dfcac"]]);
2967
3232
  const _hoisted_1$3 = { class: "tag-content" };
2968
3233
  const _hoisted_2$2 = { class: "user-name" };
2969
3234
  const _hoisted_3$2 = {
@@ -3023,26 +3288,10 @@
3023
3288
  };
3024
3289
  }
3025
3290
  });
3026
- const _export_sfc = (sfc, props) => {
3027
- const target = sfc.__vccOpts || sfc;
3028
- for (const [key, val] of props) {
3029
- target[key] = val;
3030
- }
3031
- return target;
3032
- };
3033
3291
  const UserTag = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-203c36cb"]]);
3034
3292
  const _hoisted_1$2 = ["onClick"];
3035
3293
  const _hoisted_2$1 = ["placeholder"];
3036
3294
  const _hoisted_3$1 = ["placeholder"];
3037
- const _hoisted_4$1 = {
3038
- key: 0,
3039
- class: "no-data"
3040
- };
3041
- const _hoisted_5$1 = ["onMousedown"];
3042
- const _hoisted_6$1 = {
3043
- key: 0,
3044
- class: "tenant-name"
3045
- };
3046
3295
  const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
3047
3296
  ...{
3048
3297
  name: "BkUserSelectorMultiple"
@@ -3111,6 +3360,20 @@
3111
3360
  exactSearchKey: {
3112
3361
  type: String,
3113
3362
  default: "bk_username"
3363
+ },
3364
+ /**
3365
+ * 用户组
3366
+ */
3367
+ userGroup: {
3368
+ type: Array,
3369
+ default: () => []
3370
+ },
3371
+ /**
3372
+ * 用户组名称
3373
+ */
3374
+ userGroupName: {
3375
+ type: String,
3376
+ default: "用户群组"
3114
3377
  }
3115
3378
  },
3116
3379
  emits: ["update:selectedUsers", "add-user", "remove-user"],
@@ -3136,6 +3399,9 @@
3136
3399
  const sortableInstance = vue.ref(null);
3137
3400
  const visibleUsers = vue.ref([]);
3138
3401
  const hiddenCount = vue.ref(0);
3402
+ const options = vue.computed(() => {
3403
+ return searchResults.value.filter((user) => !props.selectedUsers.some((selectedUser) => selectedUser.id === user.id));
3404
+ });
3139
3405
  const initSortable = () => {
3140
3406
  if (!props.draggable || !sortableContainerRef.value) return;
3141
3407
  if (sortableInstance.value) {
@@ -3173,7 +3439,11 @@
3173
3439
  };
3174
3440
  const handleFocus = () => {
3175
3441
  isFocused.value = true;
3176
- showDropdown.value = false;
3442
+ if (props.userGroup.length > 0) {
3443
+ showDropdown.value = true;
3444
+ } else {
3445
+ showDropdown.value = false;
3446
+ }
3177
3447
  activeTagIndex.value = -1;
3178
3448
  vue.nextTick(() => {
3179
3449
  if (lastInputRef.value) {
@@ -3424,16 +3694,11 @@
3424
3694
  [vue.vModelText, vue.unref(searchQuery)]
3425
3695
  ]) : vue.createCommentVNode("v-if", true),
3426
3696
  vue.createCommentVNode(' "我"标签 '),
3427
- vue.createElementVNode(
3428
- "div",
3429
- {
3430
- class: vue.normalizeClass(["me-tag", { disabled: __props.currentUserId && __props.selectedUsers.some((user) => user.id === __props.currentUserId) }]),
3431
- onClick: _cache[2] || (_cache[2] = vue.withModifiers(($event) => addCurrentUser(), ["stop"]))
3432
- },
3433
- " 我 ",
3434
- 2
3435
- /* CLASS */
3436
- )
3697
+ vue.createVNode(MeTag, {
3698
+ "current-user-id": __props.currentUserId,
3699
+ "is-disabled": !!__props.currentUserId && __props.selectedUsers.some((user) => user.id === __props.currentUserId),
3700
+ onClick: addCurrentUser
3701
+ }, null, 8, ["current-user-id", "is-disabled"])
3437
3702
  ],
3438
3703
  512
3439
3704
  /* NEED_PATCH */
@@ -3492,23 +3757,18 @@
3492
3757
  ref_key: "collapsedInputRef",
3493
3758
  ref: collapsedInputRef,
3494
3759
  class: "search-input collapsed",
3495
- "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => vue.isRef(searchQuery) ? searchQuery.value = $event : null),
3760
+ "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => vue.isRef(searchQuery) ? searchQuery.value = $event : null),
3496
3761
  placeholder: !__props.selectedUsers.length ? __props.placeholder : "",
3497
3762
  onFocus: handleFocus
3498
3763
  }, null, 40, _hoisted_3$1), [
3499
3764
  [vue.vModelText, vue.unref(searchQuery)]
3500
3765
  ]),
3501
3766
  vue.createCommentVNode(' 未聚焦状态下的"我"标签 '),
3502
- vue.createElementVNode(
3503
- "div",
3504
- {
3505
- class: vue.normalizeClass(["me-tag", { disabled: __props.currentUserId && __props.selectedUsers.some((user) => user.id === __props.currentUserId) }]),
3506
- onClick: _cache[4] || (_cache[4] = vue.withModifiers(($event) => addCurrentUser(), ["stop"]))
3507
- },
3508
- " 我 ",
3509
- 2
3510
- /* CLASS */
3511
- )
3767
+ vue.createVNode(MeTag, {
3768
+ "current-user-id": __props.currentUserId,
3769
+ "is-disabled": !!__props.currentUserId && __props.selectedUsers.some((user) => user[props.exactSearchKey] === __props.currentUserId),
3770
+ onClick: addCurrentUser
3771
+ }, null, 8, ["current-user-id", "is-disabled"])
3512
3772
  ],
3513
3773
  512
3514
3774
  /* NEED_PATCH */
@@ -3518,75 +3778,26 @@
3518
3778
  /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
3519
3779
  )),
3520
3780
  vue.createCommentVNode(" 下拉选项列表 "),
3521
- vue.createVNode(vue.unref(bkuiVue.Popover), {
3522
- "ext-cls": "bk-user-selector-popover",
3523
- arrow: false,
3781
+ vue.createVNode(SelectionPopover, {
3782
+ "container-width": containerRef.value ? containerRef.value.offsetWidth : "auto",
3524
3783
  "is-show": showDropdown.value,
3525
- width: containerRef.value ? containerRef.value.offsetWidth : "auto",
3526
- placement: "bottom-start",
3527
- theme: "light",
3528
- trigger: "manual"
3529
- }, {
3530
- content: vue.withCtx(() => [
3531
- vue.createVNode(vue.unref(bkuiVue.Loading), {
3532
- class: "dropdown-content",
3533
- loading: vue.unref(searchLoading),
3534
- size: "mini",
3535
- mode: "spin"
3536
- }, {
3537
- default: vue.withCtx(() => [
3538
- vue.unref(searchResults).length === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$1, [
3539
- vue.createElementVNode(
3540
- "span",
3541
- null,
3542
- vue.toDisplayString(vue.unref(searchQuery).length > 1 ? "未找到匹配用户" : "请输入关键词搜索"),
3543
- 1
3544
- /* TEXT */
3545
- )
3546
- ])) : (vue.openBlock(true), vue.createElementBlock(
3547
- vue.Fragment,
3548
- { key: 1 },
3549
- vue.renderList(vue.unref(searchResults), (user) => {
3550
- return vue.openBlock(), vue.createElementBlock("div", {
3551
- class: "user-option",
3552
- key: user.id,
3553
- onMousedown: vue.withModifiers(($event) => addUser(user), ["prevent"])
3554
- }, [
3555
- vue.createElementVNode(
3556
- "span",
3557
- null,
3558
- vue.toDisplayString(user.name),
3559
- 1
3560
- /* TEXT */
3561
- ),
3562
- user.tenantId !== __props.tenantId && user.tenantId && __props.tenants[user.tenantId] ? (vue.openBlock(), vue.createElementBlock(
3563
- "span",
3564
- _hoisted_6$1,
3565
- "@" + vue.toDisplayString(__props.tenants[user.tenantId]),
3566
- 1
3567
- /* TEXT */
3568
- )) : vue.createCommentVNode("v-if", true)
3569
- ], 40, _hoisted_5$1);
3570
- }),
3571
- 128
3572
- /* KEYED_FRAGMENT */
3573
- ))
3574
- ]),
3575
- _: 1
3576
- /* STABLE */
3577
- }, 8, ["loading"])
3578
- ]),
3579
- _: 1
3580
- /* STABLE */
3581
- }, 8, ["is-show", "width"])
3784
+ loading: vue.unref(searchLoading),
3785
+ options: options.value,
3786
+ "search-query": vue.unref(searchQuery),
3787
+ "tenant-id": __props.tenantId,
3788
+ tenants: __props.tenants,
3789
+ "user-group": __props.userGroup,
3790
+ "user-group-name": __props.userGroupName,
3791
+ onSelectUser: addUser
3792
+ }, null, 8, ["container-width", "is-show", "loading", "options", "search-query", "tenant-id", "tenants", "user-group", "user-group-name"])
3582
3793
  ])), [
3583
3794
  [vue.unref(bkuiVue.clickoutside), handleClickOutside]
3584
3795
  ]);
3585
3796
  };
3586
3797
  }
3587
3798
  });
3588
- const MultipleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-9ddcc982"]]);
3589
- const _withScopeId = (n) => (vue.pushScopeId("data-v-1b38f31d"), n = n(), vue.popScopeId(), n);
3799
+ const MultipleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-a8dc735f"]]);
3800
+ const _withScopeId = (n) => (vue.pushScopeId("data-v-8b8dd0fd"), n = n(), vue.popScopeId(), n);
3590
3801
  const _hoisted_1$1 = { class: "input-container" };
3591
3802
  const _hoisted_2 = {
3592
3803
  key: 0,
@@ -3600,15 +3811,6 @@
3600
3811
  /* HOISTED */
3601
3812
  ));
3602
3813
  const _hoisted_4 = ["placeholder"];
3603
- const _hoisted_5 = {
3604
- key: 0,
3605
- class: "no-data"
3606
- };
3607
- const _hoisted_6 = ["onMousedown"];
3608
- const _hoisted_7 = {
3609
- key: 0,
3610
- class: "tenant-name"
3611
- };
3612
3814
  const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
3613
3815
  ...{
3614
3816
  name: "BkUserSelectorSingle"
@@ -3616,12 +3818,14 @@
3616
3818
  __name: "single-selector",
3617
3819
  props: {
3618
3820
  modelValue: {},
3619
- placeholder: {},
3821
+ tenants: {},
3620
3822
  apiBaseUrl: {},
3621
3823
  tenantId: {},
3622
- tenants: {},
3824
+ placeholder: {},
3623
3825
  currentUserId: {},
3624
- exactSearchKey: {}
3826
+ exactSearchKey: {},
3827
+ userGroup: {},
3828
+ userGroupName: {}
3625
3829
  },
3626
3830
  emits: ["update:modelValue", "change"],
3627
3831
  setup(__props, { emit: __emit }) {
@@ -3635,7 +3839,15 @@
3635
3839
  const searchQuery = vue.ref("");
3636
3840
  const showDropdown = vue.ref(false);
3637
3841
  const selectedUserInfo = vue.computed(() => {
3638
- return options.value.find((user) => user.id === selectedUser.value);
3842
+ const userGroup = (props.userGroup || []).map((group) => ({
3843
+ id: group.id,
3844
+ name: group.name,
3845
+ tenantId: ""
3846
+ }));
3847
+ const list = [...options.value, ...userGroup];
3848
+ const selectedUserInfo2 = list.find((user) => user.id === selectedUser.value);
3849
+ emit("change", selectedUserInfo2 || null);
3850
+ return selectedUserInfo2;
3639
3851
  });
3640
3852
  vue.onBeforeMount(async () => {
3641
3853
  if (typeof props.modelValue === "string" && props.modelValue) {
@@ -3659,7 +3871,7 @@
3659
3871
  const formattedResults = formatUsers(result);
3660
3872
  if (formattedResults.length > 0) {
3661
3873
  options.value = formattedResults;
3662
- selectUser(formattedResults[0]);
3874
+ addUser(formattedResults[0]);
3663
3875
  }
3664
3876
  } catch (error) {
3665
3877
  console.error("获取当前用户信息失败:", error);
@@ -3673,7 +3885,7 @@
3673
3885
  isLoading.value = true;
3674
3886
  try {
3675
3887
  const result = await searchUsers(props.apiBaseUrl, props.tenantId, keyword);
3676
- options.value = formatUsers(result);
3888
+ options.value = formatUsers(result).filter((user) => !selectedUser.value || user.id !== selectedUser.value);
3677
3889
  console.log("options.value", options.value);
3678
3890
  } catch (error) {
3679
3891
  console.error("获取用户列表失败:", error);
@@ -3682,7 +3894,8 @@
3682
3894
  isLoading.value = false;
3683
3895
  }
3684
3896
  };
3685
- const selectUser = (user) => {
3897
+ const addUser = (user) => {
3898
+ console.log("addUser", user);
3686
3899
  selectedUser.value = user.id;
3687
3900
  searchQuery.value = "";
3688
3901
  showDropdown.value = false;
@@ -3692,7 +3905,7 @@
3692
3905
  searchQuery.value = "";
3693
3906
  };
3694
3907
  const handleInputFocus = () => {
3695
- if (searchQuery.value.length >= 2) {
3908
+ if (searchQuery.value.length >= 2 || Array.isArray(props.userGroup) && props.userGroup.length > 0) {
3696
3909
  showDropdown.value = true;
3697
3910
  }
3698
3911
  };
@@ -3705,9 +3918,8 @@
3705
3918
  showDropdown.value = false;
3706
3919
  };
3707
3920
  vue.watch(selectedUser, (newVal) => {
3921
+ console.log("selectedUser", newVal);
3708
3922
  emit("update:modelValue", newVal);
3709
- const selectedUserInfo2 = options.value.find((user) => user.id === newVal);
3710
- emit("change", selectedUserInfo2 || null);
3711
3923
  });
3712
3924
  return (_ctx, _cache) => {
3713
3925
  return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
@@ -3730,7 +3942,7 @@
3730
3942
  1
3731
3943
  /* TEXT */
3732
3944
  ),
3733
- selectedUserInfo.value.tenantId !== props.tenantId && selectedUserInfo.value.tenantId && _ctx.tenants[selectedUserInfo.value.tenantId] ? (vue.openBlock(), vue.createElementBlock(
3945
+ selectedUserInfo.value.tenantId !== _ctx.tenantId && selectedUserInfo.value.tenantId && _ctx.tenants[selectedUserInfo.value.tenantId] ? (vue.openBlock(), vue.createElementBlock(
3734
3946
  "span",
3735
3947
  _hoisted_2,
3736
3948
  "@" + vue.toDisplayString(_ctx.tenants[selectedUserInfo.value.tenantId]),
@@ -3744,94 +3956,39 @@
3744
3956
  ref: inputRef,
3745
3957
  class: "search-input",
3746
3958
  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchQuery.value = $event),
3747
- placeholder: selectedUserInfo.value ? "" : props.placeholder,
3959
+ placeholder: selectedUserInfo.value ? "" : _ctx.placeholder,
3748
3960
  onFocus: handleInputFocus,
3749
3961
  onInput: handleInput
3750
3962
  }, null, 40, _hoisted_4), [
3751
3963
  [vue.vModelText, searchQuery.value]
3752
3964
  ]),
3753
3965
  vue.createCommentVNode(' "我"标签 '),
3754
- props.currentUserId ? (vue.openBlock(), vue.createElementBlock(
3755
- "div",
3756
- {
3757
- key: 1,
3758
- class: vue.normalizeClass(["me-tag", { disabled: props.currentUserId && selectedUser.value === props.currentUserId }]),
3759
- onClick: _cache[1] || (_cache[1] = ($event) => addCurrentUser())
3760
- },
3761
- " 我 ",
3762
- 2
3763
- /* CLASS */
3764
- )) : vue.createCommentVNode("v-if", true)
3966
+ vue.createVNode(MeTag, {
3967
+ "is-disabled": !!_ctx.currentUserId && !!selectedUserInfo.value && selectedUserInfo.value[_ctx.exactSearchKey || "bk_username"] === _ctx.currentUserId,
3968
+ "current-user-id": _ctx.currentUserId,
3969
+ onClick: addCurrentUser
3970
+ }, null, 8, ["is-disabled", "current-user-id"])
3765
3971
  ]),
3766
- vue.createCommentVNode(" 下拉选项列表 "),
3767
- vue.createVNode(vue.unref(bkuiVue.Popover), {
3768
- "ext-cls": "bk-user-selector-popover",
3769
- arrow: false,
3972
+ vue.createCommentVNode(" 使用新的公共下拉选项组件 "),
3973
+ vue.createVNode(SelectionPopover, {
3974
+ "container-width": containerRef.value ? containerRef.value.offsetWidth : "auto",
3770
3975
  "is-show": showDropdown.value,
3771
- width: containerRef.value ? containerRef.value.offsetWidth : "auto",
3772
- placement: "bottom-start",
3773
- theme: "light",
3774
- trigger: "manual"
3775
- }, {
3776
- content: vue.withCtx(() => [
3777
- vue.createVNode(vue.unref(bkuiVue.Loading), {
3778
- class: "dropdown-content",
3779
- loading: isLoading.value,
3780
- size: "mini",
3781
- mode: "spin"
3782
- }, {
3783
- default: vue.withCtx(() => [
3784
- options.value.length === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
3785
- vue.createElementVNode(
3786
- "span",
3787
- null,
3788
- vue.toDisplayString(searchQuery.value.length > 1 ? "未找到匹配用户" : "请输入关键词搜索"),
3789
- 1
3790
- /* TEXT */
3791
- )
3792
- ])) : (vue.openBlock(true), vue.createElementBlock(
3793
- vue.Fragment,
3794
- { key: 1 },
3795
- vue.renderList(options.value, (user) => {
3796
- return vue.openBlock(), vue.createElementBlock("div", {
3797
- class: "user-option",
3798
- key: user.id,
3799
- onMousedown: vue.withModifiers(($event) => selectUser(user), ["prevent"])
3800
- }, [
3801
- vue.createElementVNode(
3802
- "span",
3803
- null,
3804
- vue.toDisplayString(user.name),
3805
- 1
3806
- /* TEXT */
3807
- ),
3808
- user.tenantId !== props.tenantId && user.tenantId && props.tenants[user.tenantId] ? (vue.openBlock(), vue.createElementBlock(
3809
- "span",
3810
- _hoisted_7,
3811
- "@" + vue.toDisplayString(props.tenants[user.tenantId]),
3812
- 1
3813
- /* TEXT */
3814
- )) : vue.createCommentVNode("v-if", true)
3815
- ], 40, _hoisted_6);
3816
- }),
3817
- 128
3818
- /* KEYED_FRAGMENT */
3819
- ))
3820
- ]),
3821
- _: 1
3822
- /* STABLE */
3823
- }, 8, ["loading"])
3824
- ]),
3825
- _: 1
3826
- /* STABLE */
3827
- }, 8, ["is-show", "width"])
3976
+ loading: isLoading.value,
3977
+ options: options.value,
3978
+ "search-query": searchQuery.value,
3979
+ "tenant-id": _ctx.tenantId,
3980
+ tenants: _ctx.tenants,
3981
+ "user-group": _ctx.userGroup,
3982
+ "user-group-name": _ctx.userGroupName,
3983
+ onSelectUser: addUser
3984
+ }, null, 8, ["container-width", "is-show", "loading", "options", "search-query", "tenant-id", "tenants", "user-group", "user-group-name"])
3828
3985
  ])), [
3829
3986
  [vue.unref(bkuiVue.clickoutside), handleClickOutside]
3830
3987
  ]);
3831
3988
  };
3832
3989
  }
3833
3990
  });
3834
- const SingleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-1b38f31d"]]);
3991
+ const SingleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-8b8dd0fd"]]);
3835
3992
  const _hoisted_1 = { class: "bk-user-selector" };
3836
3993
  const _sfc_main = /* @__PURE__ */ vue.defineComponent({
3837
3994
  ...{
@@ -3839,14 +3996,16 @@
3839
3996
  },
3840
3997
  __name: "user-selector",
3841
3998
  props: {
3842
- apiBaseUrl: { default: "" },
3843
- tenantId: { default: "" },
3844
- placeholder: { default: "请输入人员名称搜索" },
3845
3999
  modelValue: { default: "" },
3846
4000
  draggable: { type: Boolean, default: false },
3847
4001
  multiple: { type: Boolean, default: false },
4002
+ apiBaseUrl: { default: "" },
4003
+ tenantId: { default: "" },
4004
+ placeholder: { default: "请输入人员名称搜索" },
3848
4005
  currentUserId: { default: "" },
3849
- exactSearchKey: { default: "" }
4006
+ exactSearchKey: { default: "bk_username" },
4007
+ userGroup: { default: () => [] },
4008
+ userGroupName: { default: "用户群组" }
3850
4009
  },
3851
4010
  emits: ["update:modelValue", "change"],
3852
4011
  setup(__props, { emit: __emit }) {
@@ -3906,8 +4065,10 @@
3906
4065
  placeholder: _ctx.placeholder,
3907
4066
  "tenant-id": _ctx.tenantId,
3908
4067
  tenants: vue.unref(tenants),
4068
+ "user-group": _ctx.userGroup,
4069
+ "user-group-name": _ctx.userGroupName,
3909
4070
  onChange: handleUpdateUser
3910
- }, null, 8, ["modelValue", "api-base-url", "current-user-id", "exact-search-key", "placeholder", "tenant-id", "tenants"])) : (vue.openBlock(), vue.createElementBlock(
4071
+ }, null, 8, ["modelValue", "api-base-url", "current-user-id", "exact-search-key", "placeholder", "tenant-id", "tenants", "user-group", "user-group-name"])) : (vue.openBlock(), vue.createElementBlock(
3911
4072
  vue.Fragment,
3912
4073
  { key: 1 },
3913
4074
  [
@@ -3923,8 +4084,10 @@
3923
4084
  "selected-users": selectedUsers.value,
3924
4085
  "tenant-id": _ctx.tenantId,
3925
4086
  tenants: vue.unref(tenants),
4087
+ "user-group": _ctx.userGroup,
4088
+ "user-group-name": _ctx.userGroupName,
3926
4089
  "onUpdate:selectedUsers": handleUpdateSelectedUsers
3927
- }, null, 8, ["modelValue", "api-base-url", "current-user-id", "draggable", "exact-search-key", "placeholder", "selected-users", "tenant-id", "tenants"])
4090
+ }, null, 8, ["modelValue", "api-base-url", "current-user-id", "draggable", "exact-search-key", "placeholder", "selected-users", "tenant-id", "tenants", "user-group", "user-group-name"])
3928
4091
  ],
3929
4092
  2112
3930
4093
  /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
@@ -3933,7 +4096,7 @@
3933
4096
  };
3934
4097
  }
3935
4098
  });
3936
- const BkUserSelector = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-fe084750"]]);
4099
+ const BkUserSelector = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-bc7b4ccd"]]);
3937
4100
  exports2.BkUserSelector = BkUserSelector;
3938
4101
  exports2.default = BkUserSelector;
3939
4102
  Object.defineProperties(exports2, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });