@fmdevui/fm-dev/es/packages/core/ui/components/fmautocomplete/index.vue2.mjs

Page level components developed based on Element Plus.

import { defineComponent, useModel, resolveComponent, createBlock, openBlock, createSlots, withCtx, createElementVNode, toDisplayString, renderSlot, mergeModels } from 'vue';
import { useBaseApi } from '../../../api/base/index.mjs';

const _hoisted_1 = { style: { "font-size": "14px", "line-height": "30px" } };
var _sfc_main = /* @__PURE__ */ defineComponent({
  ...{
    name: "FmAutocomplete"
  },
  __name: "index",
  props: /* @__PURE__ */ mergeModels({
    placeholder: {
      type: String,
      default: "\u8BF7\u8F93\u5165\u5FEB\u901F\u641C\u7D22\u9009\u62E9"
    },
    /**
     * api service name
     */
    apiService: {
      type: String,
      default: "planOrder"
    },
    /**
    * api service 下的方法
    */
    apiAction: {
      type: String,
      default: "autoQuerySearch"
    },
    top: {
      type: Number,
      default: 15
    },
    /**
      * 值的属性值
      */
    fId: {
      type: String,
      default: "id"
    },
    /**
     * 值的属性标签
     */
    fName: {
      type: String,
      default: "name"
    },
    /**
     * 查询业务表ID
     */
    qId: {
      type: Number,
      default: 0
    }
  }, {
    "name": {
      required: true,
      default: ""
    },
    "nameModifiers": {},
    "id": {
      required: true,
      default: 0
    },
    "idModifiers": {}
  }),
  emits: /* @__PURE__ */ mergeModels(["select", "reset"], ["update:name", "update:id"]),
  setup(__props, { emit: __emit }) {
    const autoName = useModel(__props, "name");
    const autoId = useModel(__props, "id");
    const props = __props;
    const emit = __emit;
    const querySearchAsync = async (queryString, cb) => {
      resetValue();
      const res = await useBaseApi(props.apiService).post({ top: props.top, keywork: queryString, id: props.qId }, props.apiAction);
      const data = res.data.result ?? [];
      if (data.length === 0) {
        return cb([]);
      }
      const results = data.map((item) => ({
        ...item,
        displayText: `${item[props.fName]}`
        // 自定义展示格式
        //fullData: item                                // 保留原始对象
      }));
      cb(results);
    };
    const handleSelect = (item) => {
      autoName.value = item[props.fName];
      autoId.value = item[props.fId];
      emit("select", item);
    };
    const resetValue = () => {
      autoId.value = 0;
      emit("reset");
    };
    return (_ctx, _cache) => {
      const _component_el_autocomplete = resolveComponent("el-autocomplete");
      return openBlock(), createBlock(_component_el_autocomplete, {
        modelValue: autoName.value,
        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => autoName.value = $event),
        debounce: 500,
        "fetch-suggestions": querySearchAsync,
        placeholder: props.placeholder,
        "trigger-on-focus": false,
        onSelect: handleSelect,
        style: { "margin-top": "-2px" }
      }, createSlots({
        default: withCtx(({ item }) => [
          createElementVNode(
            "div",
            _hoisted_1,
            toDisplayString(item[__props.fName]),
            1
            /* TEXT */
          )
        ]),
        _: 2
        /* DYNAMIC */
      }, [
        _ctx.$slots.append ? {
          name: "append",
          fn: withCtx(() => [
            renderSlot(_ctx.$slots, "append")
          ]),
          key: "0"
        } : void 0
      ]), 1032, ["modelValue", "placeholder"]);
    };
  }
});

export { _sfc_main as default };