@fmdevui/fm-dev/lib/packages/core/ui/components/inputdropdown/index.vue2.js

Page level components developed based on Element Plus.

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var svg = require('@element-plus/icons-vue');
var ainputdropdow = require('../../../stores/ainputdropdow.js');

var _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...{
    name: "Fminputdropdown"
  },
  __name: "index",
  props: /* @__PURE__ */ vue.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__ */ vue.mergeModels(["change"], ["update:id", "update:name"]),
  setup(__props, { emit: __emit }) {
    const modeValueId = vue.useModel(__props, "id");
    const modeValueName = vue.useModel(__props, "name");
    const props = __props;
    const useBaseApi = ainputdropdow.usefminputdropdownstore();
    const state = vue.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);
    };
    vue.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 = vue.resolveComponent("el-icon");
      const _component_el_input = vue.resolveComponent("el-input");
      const _component_el_dropdown_item = vue.resolveComponent("el-dropdown-item");
      const _component_el_dropdown_menu = vue.resolveComponent("el-dropdown-menu");
      const _component_el_dropdown = vue.resolveComponent("el-dropdown");
      return vue.openBlock(), vue.createBlock(_component_el_dropdown, {
        class: "fminputdropdown",
        placement: "bottom",
        trigger: "click",
        style: { "width": "100%" },
        onCommand: handCommand
      }, {
        dropdown: vue.withCtx(() => [
          vue.createVNode(_component_el_dropdown_menu, {
            style: vue.normalizeStyle({ width: __props.dropWidth, height: __props.dropHeight })
          }, {
            default: vue.withCtx(() => [
              (vue.openBlock(true), vue.createElementBlock(
                vue.Fragment,
                null,
                vue.renderList(state.optionData, (item, index) => {
                  return vue.openBlock(), vue.createBlock(_component_el_dropdown_item, {
                    key: index,
                    command: item[__props.bvalue],
                    divided: ""
                  }, {
                    default: vue.withCtx(() => [
                      vue.createTextVNode(
                        vue.toDisplayString(item[__props.blabel]),
                        1
                        /* TEXT */
                      )
                    ]),
                    _: 2
                    /* DYNAMIC */
                  }, 1032, ["command"]);
                }),
                128
                /* KEYED_FRAGMENT */
              ))
            ]),
            _: 1
            /* STABLE */
          }, 8, ["style"])
        ]),
        default: vue.withCtx(() => [
          vue.createVNode(_component_el_input, {
            modelValue: modeValueName.value,
            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modeValueName.value = $event),
            placeholder: props.placeholder,
            style: vue.normalizeStyle({ width: __props.inputWidth })
          }, {
            append: vue.withCtx(() => [
              vue.createVNode(_component_el_icon, {
                color: "#13c2c2",
                onClick: handRestdata
              }, {
                default: vue.withCtx(() => [
                  vue.createVNode(vue.unref(svg.RefreshLeft))
                ]),
                _: 1
                /* STABLE */
              })
            ]),
            _: 1
            /* STABLE */
          }, 8, ["modelValue", "placeholder", "style"])
        ]),
        _: 1
        /* STABLE */
      });
    };
  }
});

exports.default = _sfc_main;