base_ui/components/forms/SelectComponentDefault.vue

<template>
  <div class="row form-group mt-3" :key="$attrs.key">
    <label :for="localFormElement.key" :class="$attrs.labelClass ?? 'col-md-3'"
      >{{ getLabel() }}:</label
    >
    <div
      class="mt-2"
      :class="[$attrs.inputClass ?? ' col-md-9', { error: hasError }]"
    >
      <select
        class="form-control form-select in-advanced-search"
        @focus="clearErrors"
        @change="validate"
        :placeholder="localFormElement.placeholder"
        :id="localFormElement.key"
        :name="localFormElement.key"
        v-model="textValue"
      >
        <option
          v-for="(option, index) in listOptions"
          :value="option.value"
          :key="index"
        >
          {{ option.title ?? option.value }}
        </option>
      </select>
    </div>
  </div>
</template>

<script>
import formBuilderMixin from "@mixins/formBuilderMixin";
import HttpService from "@services/httpService";

export default {
  // props:["listOptions"],

  mixins: [formBuilderMixin],

  mounted() {
    setTimeout(() => {
      this.setOptions();
    }, 500);
    // console.log(this.localFormElement.initValue)
  },
  data() {
    return {
      httpService: undefined,
      optionRendering: false,
      listOptions: [],
    };
  },

  methods: {
    updateOptionsViaEventBus(value) {
      // console.log("updateOptionsViaEventBus", this.localFormElement.key, value);
      this.localFormElement.options = [];
      this.setOptions(value);
    },
    setOptions(filter = "", schemaElemant = undefined) {
      if (this.optionRendering) return;

      schemaElemant = schemaElemant ? schemaElemant : this.localFormElement;

      if (schemaElemant?.options && schemaElemant?.options.length) {
        this.listOptions = schemaElemant?.options;
        this.initTextValue();
      }
      //موقت گذاشتم تا بک مجلس بروزرسانی بشه
      else if (schemaElemant.key == "ts_ref") {
        this.listOptions = [
          {
            value: "مجلس شورای اسلامی",
          },
          {
            value: "شورای عالی انقلاب فرهنگی",
          },
          {
            value: "کمیسیون  امور قضایی  و حقوقی  مجلس",
          },
          {
            value: "مقام معظم رهبری",
          },
          {
            value: "مجمع تشخیص مصلحت نظام",
          },
          {
            value: "شورای نگهبان",
          },
          {
            value:
              "کمیسیون مشترک اجتماعی و امنیت ملی و سیاست خارجی و برنامه و بودجه و محاسبات مجلس شورای اسلامی",
          },
          {
            value: "همه پرسی",
          },
          {
            value: "رییس مجلس شورای اسلامی",
          },
          {
            value: "کمیسیون تلفیق مجلس شورای سلامی",
          },
          {
            value: "کمیسیون اقتصادی مجلس شورای اسلامی",
          },
          {
            value: "کمیسیون اجتماعی مجلس",
          },
          {
            value: "کمیسیون برنامه و بودجه و محاسبات مجلس شورای اسلامی",
          },
          {
            value: "کمیسیون صنایع و معادن مجلس شورای اسلامی",
          },
          {
            value: "کمیسیون آموزش و تحقیقات  مجلس شورای اسلامی",
          },
          {
            value: "مجلس خبرگان رهبری",
          },
          {
            value: "کمیسیون برنامه مجلس شورای ملی",
          },
          {
            value: "کمیسیون امور دفاعی مجلس شورای اسلامی",
          },
          {
            value: "شورای توسعه فرهنگ قرآنی",
          },
          {
            value: "کمیسیون بهداری مجلس شورای اسلامی",
          },
          {
            value: "کمیسیون امور داخلی مجلس شورای اسلامی",
          },
          {
            value: "کمیسیون های ارشاد اسلامی و قضایی مجلس شورای اسلامی",
          },
          {
            value: "کمیسیون های 1و2 شورای عالی انقلاب فرهنگی",
          },
        ];
        this.initTextValue();
      } else if (schemaElemant.url_GET) {
        let url = schemaElemant.url_GET;

        if (schemaElemant.url_filter && !filter) return;

        if (filter) url = url.replace("@filter", filter);
        // console.log("url", schemaElemant.key, url);

        this.getDynamicOption(url);
      } else this.listOptions = [];
    },
    // setDefault(schemaElemant) {
    //   let value_defualt = this.localFormElement.value;
    //   if (!value_defualt) value_defualt = schemaElemant.value_defualt ?? "";

    //   if (!value_defualt) {
    //     this.textValue =
    //       this.listOptions.length > 0 ? this.listOptions[0].value : "";
    //     return;
    //   }
    //   // this.disableEmitTemprory(2000);

  
    //   if (!this.textValue) {
    //     this.textValue =
    //       this.listOptions.length > 0 ? this.listOptions[0].value : "";
    //   }
    // },
    getDynamicOption(url) {
      if (this.optionRendering) return;

      let vm = this;
      this.httpService = new HttpService();

      this.optionRendering = true;

      this.httpService.getRequest(url).then((res) => {
        vm.listOptions = [];
        res.data.forEach((el) => {
          let obj = {
            value: el.id,
            title: el.title ?? el.value,
          };

          // if(schemaElemant.value_save)
          //   obj.value = el[schemaElemant.value_save]

          vm.listOptions.push(obj);
        });

        vm.initTextValue();
        // vm.setDefault(vm.localFormElement);
        // vm.textValue = vm.listOptions.length > 0 ? vm.listOptions[0].value : "";
        // vm.objectValue = vm.listOptions.length > 0 ? vm.listOptions[0] : {};
        vm.optionRendering = false;
      });
    },
  },
};
</script>
<style scoped lang="scss">
.form-select {
  background-position: left 0.25em center;
}
</style>