WholeProcessPlatform/frontend/src/components/fishSearch/index.vue

<template>
  <a-select
    ref="selectRef"
    :style="{ width: width }"
    :value="modelValue"
    :options="options"
    :loading="loading"
    @change="handleChange"
    @search="handleSearch"
    placeholder="请选择鱼种类"
    :mode="multiple ? 'multiple' : undefined"
    show-search
    :filter-option="false"
    class="custom-fish-select"
    :dropdownMatchSelectWidth="false"
    :getPopupContainer="(triggerNode: HTMLElement) => triggerNode.parentNode"
    @dropdownVisibleChange="handleDropdownVisibleChange"
    :max-tag-count="multiple ? 1 : undefined"
    :open="open"
    @update:open="open = $event"
    :field-names="{ label: 'name', value: 'id' }"
  >
    <!-- 自定义 Tag 显示名称 (仅在多选时生效) -->
    <template #tagRender="{ value: tagId, onClose }" v-if="multiple">
      <a-tag closable @close="onClose" style="margin-right: 3px; max-width: 120px">
        {{ getFishNameById(tagId) }}
      </a-tag>
    </template>

    <template #dropdownRender>
      <div class="custom-dropdown-container">
        <!-- 左侧：可滚动的选项列表 -->
        <div class="dropdown-left-list">
          <div
            v-for="opt in filteredOptions"
            :key="opt.id"
            class="dropdown-item"
            :class="{
              'is-active': isSelected(opt.id),
              'is-hovered': opt.id === hoveredId,
            }"
            @click.stop="handleSelectOption(opt)"
            @mouseenter="hoveredId = opt.id"
          >
            <span class="item-name">{{ opt.name }}</span>
            <!-- 选中对勾 -->
            <span v-if="isSelected(opt.id)" class="check-icon">✓</span>
          </div>
          <div v-if="filteredOptions.length === 0" class="empty-tip">无匹配数据</div>
        </div>

        <!-- 中间分割线 -->
        <div class="dropdown-divider"></div>

        <!-- 右侧：固定显示的别名/详情 -->
        <div class="dropdown-right-detail">
          <div v-if="currentDetailData" class="detail-content">
            <div class="detail-title">{{ currentDetailData.name }}</div>
            <div class="detail-alias" :title="currentDetailData.alias">
              {{ currentDetailData.alias || "暂无别名" }}
            </div>
          </div>
          <div v-else class="detail-placeholder">请选择或悬停查看</div>
        </div>
      </div>
    </template>
  </a-select>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed, watch } from "vue";
import { getFishDictoryDropdown } from "@/api/select";
import { useShuJuTianBaoStore } from "@/store/modules/shuJuTianBao";
const shuJuTianBaoStore = useShuJuTianBaoStore();

// --- Props & Emits ---
interface Props {
  modelValue: string | string[]; // 支持字符串(单选)或数组(多选)
  width?: string;
  multiple?: boolean; // 控制是否多选
}

const props = withDefaults(defineProps<Props>(), {
  multiple: false, // 默认单选，根据需求调整
});

const emit = defineEmits<{
  (e: "update:modelValue", value: string | string[], opt: any): void;
}>();

// --- State ---
const loading = ref(false);
const options = ref<any[]>([]);
const searchKeyword = ref<string>("");
const hoveredId = ref<string | null>(null);
const open = ref(false); // 控制下拉框显隐

// --- Computed ---
const filteredOptions = computed(() => {
  if (!searchKeyword.value) {
    return options.value;
  }
  const lowerKeyword = searchKeyword.value.toLowerCase();
  return options.value.filter((item: any) => {
    const nameMatch = item.name?.toLowerCase().includes(lowerKeyword);
    const aliasMatch = item.alias?.toLowerCase().includes(lowerKeyword);
    return nameMatch || aliasMatch;
  });
});

const currentDetailData = computed(() => {
  if (hoveredId.value) {
    return options.value.find((item: any) => item.id === hoveredId.value);
  }
  return null;
});

// --- Methods ---

// 辅助函数：判断是否选中
const isSelected = (id: string) => {
  if (props.multiple) {
    return Array.isArray(props.modelValue) && props.modelValue.includes(id);
  } else {
    return props.modelValue === id;
  }
};

const handleSearch = (value: string) => {
  searchKeyword.value = value;
};

const handleDropdownVisibleChange = (val: boolean) => {
  open.value = val;
  if (!val) {
    hoveredId.value = null;
    searchKeyword.value = "";
  }
};

const handleSelectOption = (opt: any) => {
  if (props.multiple) {
    // --- 多选逻辑 ---
    let newValues: string[] = Array.isArray(props.modelValue)
      ? [...props.modelValue]
      : [];
    const index = newValues.indexOf(opt.id);

    if (index > -1) {
      newValues.splice(index, 1); // 取消选中
    } else {
      newValues.push(opt.id); // 选中
    }
    emit("update:modelValue", newValues, opt);
  } else {
    // --- 单选逻辑 ---
    // 关键：单选模式下，直接发射当前 ID，覆盖旧值
    // 如果点击的是已选中的项，则清空（可选行为，视需求而定）
    if (props.modelValue === opt.id) {
      emit("update:modelValue", "", opt); // 取消选中
    } else {
      emit("update:modelValue", opt.id, opt); // 选中新项
      // 单选模式下，选择后通常希望关闭下拉框
      open.value = false;
    }
  }
};

const handleChange = (val: any) => {
  // 当 a-select 内部触发 change 时（例如删除 Tag）
  // 在单选模式下，如果用户通过键盘或删除操作改变了值，这里也会捕获
  emit("update:modelValue", val, '');
};

const getFishNameById = (id: string) => {
  if (!id) return "";
  const fish = options.value.find((item: any) => item.id === id);
  return fish ? fish.name : id;
};

// 监听 multiple 变化，确保模式切换时状态正确
watch(
  () => props.multiple,
  (newVal) => {
    // 如果从多选变为单选，且 modelValue 是数组，取第一个值或清空
    if (!newVal && Array.isArray(props.modelValue)) {
      emit("update:modelValue", props.modelValue || null, options.value);
    }
    // 如果从单选变为多选，且 modelValue 是字符串，转为数组
    if (newVal && typeof props.modelValue === "string") {
      emit("update:modelValue", props.modelValue ? [props.modelValue] : [], {});
    }
  }
);
const init = () => { 
  let data = shuJuTianBaoStore.getFishOption();
  if (data.length === 0) {
  loading.value = true;
  getFishDictoryDropdown()
    .then((res) => {
      options.value = res.data || [];
      loading.value = false;
      shuJuTianBaoStore.setFishOption(options.value);
    })
    .catch(() => {
      loading.value = false;
    });
  } else {
    options.value = data;
  }
};

onMounted(() => {
  init();
});
</script>

<style lang="scss" scoped>
/* 样式保持不变 */
.custom-fish-select {
  :deep(.ant-select-dropdown) {
    padding: 0 !important;
    min-width: 400px !important;
    width: auto !important;
  }
}

.custom-dropdown-container {
  display: flex;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  height: 300px;
}

.dropdown-left-list {
  width: 150px;
  height: 100%;
  overflow-y: auto;
  border-right: 1px solid #f0f0f0;

  &::-webkit-scrollbar {
    width: 6px;
  }
  &::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
  }
}

.dropdown-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  transition: background-color 0.3s;
  display: flex;
  justify-content: space-between;
  align-items: center;

  &:hover {
    background-color: #f5f5f5;
  }

  &.is-active {
    background-color: #e6f7ff;
    color: #1890ff;
    font-weight: 500;
  }

  &.is-hovered {
    background-color: #fafafa;
  }

  .item-name {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
  }

  .check-icon {
    color: #1890ff;
    font-weight: bold;
    margin-left: 8px;
  }
}

.dropdown-divider {
  width: 1px;
  background-color: #e8e8e8;
  height: 100%;
}

.dropdown-right-detail {
  width: 250px;
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
  background-color: #fff;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  position: relative;
}

.detail-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}

.detail-alias {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  word-break: break-all;
}

.detail-placeholder {
  color: #999;
  font-size: 14px;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.empty-tip {
  padding: 10px;
  color: #999;
  text-align: center;
  font-size: 12px;
}
</style>