fe-manage/src/components/growthpath/OfficeSelect.vue

<template>
  <a-select
    :getPopupContainer="
      (triggerNode) => {
        return triggerNode.parentNode || document.body;
      }
    "
    :mode="multiple"
    v-model:value="selectedValue"
    :style="{ width: width || '' }"
    placeholder="请选择任职资格等级"
    :options="options"
    @change="onSelectChange"
    @search="handleSearch"
    @focus="focus"
    notFoundContent="请先选择标准岗位"
    allowClear
    showArrow
    showSearch
    :disabled="disabled"
  ></a-select>
</template>

<script>
import { ref, watch } from "vue";
import { getQualsLevelCode } from "@/api/growthpath";
export default {
  name: "PostSelect",
  props: {
    value: String,
    multiple: {
      type: String,
      default: "",
    },
    width: {
      type: String,
      default: "",
    },
    searchData: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  emits: ["update:value", "change"],
  setup(props, { emit }) {
    const selectedValue = ref(null);
    const options = ref([]);

    async function fetchOptions(val = "") {
      try {
        const data = await getQualsLevelCode({
          stdPosition: val,
        });
        options.value = data.data.data.map((item) => {
          return {
            label: item.qualsLevelDesr,
            value: item.qualsLevelCode,
          };
        });
      } catch (error) {
        console.error("error", error);
      }
    }

    watch(
      () => props.searchData,
      (val) => {
        if (val) {
          fetchOptions(props.searchData || "");
          emit("update:value", null);
        }
      }
    );
    watch(
      () => props.value,
      (val) => {
        selectedValue.value = val;
      }
    );
    function onSelectChange(newVal, postList) {
      emit("update:value", newVal);
      emit("change");
    }
    async function handleSearch(val) {
      console.log(val, "val");
    }
    function focus() {
      fetchOptions(props.searchData || "");
    }
    return {
      selectedValue,
      options,
      onSelectChange,
      handleSearch,
      focus,
    };
  },
};
</script>
<style lang="scss" scoped>
::v-deep .ant-select-selection-overflow {
  flex-wrap: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>