From 27cd042df9aca0383a49f3514bc21958dd890912 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期一, 29 六月 2026 15:42:23 +0800
Subject: [PATCH] 银川 1.联调产品维护页面 2.添加IM即时通讯模块

---
 src/views/im/manager/group/components/select.vue |  129 +++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 129 insertions(+), 0 deletions(-)

diff --git a/src/views/im/manager/group/components/select.vue b/src/views/im/manager/group/components/select.vue
new file mode 100644
index 0000000..4a0d4eb
--- /dev/null
+++ b/src/views/im/manager/group/components/select.vue
@@ -0,0 +1,129 @@
+<script lang="ts" setup>
+import type { ImManagerGroupApi } from '#/api/im/manager/group';
+
+import { computed, ref, useAttrs, watch } from 'vue';
+
+import { IconifyIcon } from '#/packages/icons/src';
+
+import { Input, Tooltip } from 'ant-design-vue';
+
+import { getManagerGroup } from '#/api/im/manager/group';
+
+import GroupSelectDialog from './select-dialog.vue';
+
+defineOptions({ name: 'ImManagerGroupSelect', inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    allowClear?: boolean;
+    disabled?: boolean;
+    modelValue?: number;
+    placeholder?: string;
+  }>(),
+  {
+    allowClear: true,
+    disabled: false,
+    modelValue: undefined,
+    placeholder: '璇烽�夋嫨缇�',
+  },
+);
+
+const emit = defineEmits<{
+  change: [item: ImManagerGroupApi.Group | undefined];
+  'update:modelValue': [value: number | undefined];
+}>();
+
+const attrs = useAttrs();
+const dialogRef = ref<InstanceType<typeof GroupSelectDialog>>(); // 缇ら�夋嫨寮圭獥
+const hovering = ref(false); // 榧犳爣鏄惁鎮仠
+const selectedItem = ref<ImManagerGroupApi.Group>(); // 宸查�夌兢
+
+/** 杈撳叆妗嗘樉绀烘枃鏈� */
+const displayLabel = computed(() => selectedItem.value?.name ?? '');
+
+/** 鏄惁鏄剧ず娓呴櫎鍥炬爣 */
+const showClear = computed(() => {
+  return props.allowClear && !props.disabled && hovering.value && props.modelValue != null;
+});
+
+/** 鏍规嵁缂栧彿鏌ヨ缇や俊鎭紙鐢ㄤ簬缂栬緫鍥炴樉锛� */
+async function resolveItemById(id: number | undefined) {
+  if (id == null) {
+    selectedItem.value = undefined;
+    return;
+  }
+  if (selectedItem.value?.id === id) {
+    return;
+  }
+  selectedItem.value = await getManagerGroup(id);
+}
+
+watch(() => props.modelValue, resolveItemById, { immediate: true });
+
+/** 娓呯┖宸查�夌兢 */
+function clearSelected() {
+  selectedItem.value = undefined;
+  emit('update:modelValue', undefined);
+  emit('change', undefined);
+}
+
+/** 鎵撳紑缇ら�夋嫨寮圭獥 */
+function handleClick(event: MouseEvent) {
+  if (props.disabled) {
+    return;
+  }
+  const target = event.target as HTMLElement;
+  if (showClear.value && target.closest('.ant-input-suffix')) {
+    event.stopPropagation();
+    clearSelected();
+    return;
+  }
+  dialogRef.value?.open(props.modelValue == null ? [] : [props.modelValue]);
+}
+
+/** 寮圭獥閫変腑鍥炶皟 */
+function handleSelected(rows: ImManagerGroupApi.Group[]) {
+  const item = rows[0];
+  if (!item) {
+    return;
+  }
+  selectedItem.value = item;
+  emit('update:modelValue', item.id);
+  emit('change', item);
+}
+</script>
+
+<template>
+  <div
+    v-bind="attrs"
+    class="w-full"
+    :class="disabled ? 'cursor-not-allowed' : 'cursor-pointer'"
+    @click="handleClick"
+    @mouseenter="hovering = true"
+    @mouseleave="hovering = false"
+  >
+    <Tooltip :mouse-enter-delay="0.5" :open="selectedItem ? undefined : false">
+      <template #title>
+        <div v-if="selectedItem" class="leading-6">
+          <div>缇ゅ悕绉帮細{{ selectedItem.name || '-' }}</div>
+          <div>缇や富锛歿{ selectedItem.ownerNickname || '-' }}</div>
+          <div>鎴愬憳鏁帮細{{ selectedItem.memberCount ?? '-' }}</div>
+        </div>
+      </template>
+      <Input
+        :disabled="disabled"
+        :placeholder="placeholder"
+        :value="displayLabel"
+        readonly
+      >
+        <template #suffix>
+          <IconifyIcon
+            class="size-4"
+            :icon="showClear ? 'lucide:circle-x' : 'lucide:search'"
+          />
+        </template>
+      </Input>
+    </Tooltip>
+  </div>
+  <GroupSelectDialog ref="dialogRef" @selected="handleSelected" />
+</template>

--
Gitblit v1.9.3