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

Page level components developed based on Element Plus.

import { defineComponent, useModel, reactive, onMounted, resolveComponent, createBlock, openBlock, withCtx, createVNode, normalizeStyle, unref, createElementBlock, Fragment, renderList, createTextVNode, toDisplayString, mergeModels } from 'vue';
import { RefreshLeft } from '@element-plus/icons-vue';
import { usefminputdropdownstore } from '../../../stores/ainputdropdow.mjs';

var _sfc_main = /* @__PURE__ */ defineComponent({
  ...{
    name: "Fminputdropdown"
  },
  __name: "index",
  props: /* @__PURE__ */ mergeModels({
    //数据
    optionData: {
      type: Array,
      default: []
    },
    /**
     * 值的属性值
     */
    bvalue: {
      type: String,
      default: "id"
    },
    /**
     * 值的属性标签
     */
    blabel: {
      type: String,
      default: "name"
    },
    placeholder: {
      type: String,
      default: "\u8BF7\u9009\u62E9"
    },
    inputWidth: {
      type: String,
      default: "40%"
    },
    dropWidth: {
      type: String,
      default: "90px"
    },
    dropHeight: {
      type: String,
      default: "180px"
    },
    /**
    * api service name
    */
    apiService: {
      type: String,
      default: "baseData"
    },
    /**
    * api service 下的方法
    */
    apiAction: {
      type: String,
      default: "baseDataList"
    },
    /**
     * 基础编码 自动获取数据
     */
    basecode: {
      type: String,
      default: ""
    },
    /**
    * 基础编码  多个编码合在一起调用
    */
    multibasecode: {
      type: Array,
      default: []
    },
    /**
    * 是否默认加载数据
    */
    autoLoadData: {
      type: Boolean,
      default: true
    }
  }, {
    "id": {
      type: Number,
      default: 0
    },
    "idModifiers": {},
    "name": {
      type: String,
      default: ""
    },
    "nameModifiers": {}
  }),
  emits: /* @__PURE__ */ mergeModels(["change"], ["update:id", "update:name"]),
  setup(__props, { emit: __emit }) {
    const modeValueId = useModel(__props, "id");
    const modeValueName = useModel(__props, "name");
    const props = __props;
    const useBaseApi = usefminputdropdownstore();
    const state = reactive({
      optionData: props.optionData
    });
    const emit = __emit;
    const handCommand = (command) => {
      const fitem = state.optionData.find((item) => item[props.bvalue] === command);
      modeValueId.value = fitem != null ? [props.bvalue] : 0;
      modeValueName.value = fitem != null ? fitem[props.blabel] : "";
      emit("change", fitem);
    };
    onMounted(async () => {
      if (props.optionData.length > 0) {
        state.optionData = props.optionData;
      }
      if (props.autoLoadData && props.basecode && props.basecode != "") {
        state.optionData = await useBaseApi.getOptionsData(props.apiService, props.apiAction, props.basecode, false, props.multibasecode);
      }
    });
    const handRestdata = async () => {
      if (props.basecode && props.basecode != "") {
        state.optionData = await useBaseApi.getOptionsData(props.apiService, props.apiAction, props.basecode, true, []);
      }
    };
    return (_ctx, _cache) => {
      const _component_el_icon = resolveComponent("el-icon");
      const _component_el_input = resolveComponent("el-input");
      const _component_el_dropdown_item = resolveComponent("el-dropdown-item");
      const _component_el_dropdown_menu = resolveComponent("el-dropdown-menu");
      const _component_el_dropdown = resolveComponent("el-dropdown");
      return openBlock(), createBlock(_component_el_dropdown, {
        class: "fminputdropdown",
        placement: "bottom",
        trigger: "click",
        style: { "width": "100%" },
        onCommand: handCommand
      }, {
        dropdown: withCtx(() => [
          createVNode(_component_el_dropdown_menu, {
            style: normalizeStyle({ width: __props.dropWidth, height: __props.dropHeight })
          }, {
            default: withCtx(() => [
              (openBlock(true), createElementBlock(
                Fragment,
                null,
                renderList(state.optionData, (item, index) => {
                  return openBlock(), createBlock(_component_el_dropdown_item, {
                    key: index,
                    command: item[__props.bvalue],
                    divided: ""
                  }, {
                    default: withCtx(() => [
                      createTextVNode(
                        toDisplayString(item[__props.blabel]),
                        1
                        /* TEXT */
                      )
                    ]),
                    _: 2
                    /* DYNAMIC */
                  }, 1032, ["command"]);
                }),
                128
                /* KEYED_FRAGMENT */
              ))
            ]),
            _: 1
            /* STABLE */
          }, 8, ["style"])
        ]),
        default: withCtx(() => [
          createVNode(_component_el_input, {
            modelValue: modeValueName.value,
            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modeValueName.value = $event),
            placeholder: props.placeholder,
            style: normalizeStyle({ width: __props.inputWidth })
          }, {
            append: withCtx(() => [
              createVNode(_component_el_icon, {
                color: "#13c2c2",
                onClick: handRestdata
              }, {
                default: withCtx(() => [
                  createVNode(unref(RefreshLeft))
                ]),
                _: 1
                /* STABLE */
              })
            ]),
            _: 1
            /* STABLE */
          }, 8, ["modelValue", "placeholder", "style"])
        ]),
        _: 1
        /* STABLE */
      });
    };
  }
});

export { _sfc_main as default };