Builder

Bu bölüm, kullanıcıların sol sidebar'da yer alan "dragable" (sürüklenebilir) elementleri ana form alanına sürükleyip bırakmalarını sağlar. Form içerisinde, elementlerin yerleri değiştirilebilir veya elementin üzerine tıklanarak, elemente özel yapılandırmalara erişilebilir.

Yapılar ve Kodlar

Bu sistemin nasıl çalıştığını anlamak önemlidir. Sistemimizin çalışmasındaki en büyük bağımlılık vuedraggable versiyon "^4.1.0" paketidir.

Ana Modül: Main Builder

Ana modülümüz olan Main Builder kısmı, formStore.form.columns ile bağlantılıdır. Bu, sürüklenecek ve sürüklendikten sonra yer değiştirecek komponentlerimizin bu array (dizi) içerisinde yer aldığı anlamına gelir.

Bu yapı, kullanıcıya interaktif bir arayüz sunarak, form elemanlarını kolayca yerleştirmesine ve düzenlemesine olanak tanır. Vue.js ve vuedraggable kullanımı sayesinde, geliştiriciler dinamik ve kullanıcı dostu form yapıları oluşturabilir.

Recursive komponentimiz divcontrol.vue döngüyü başlatır ve control tipine göre divcontrol ya da fieldcontrol komponentine yönlendirir.

divcontrol

Her bir elementi draggable hale getirir ve kontrol etme imkanı sağlar.

<draggable
  class="dragArea row"
  :list="data"
  :class="
    formStore.activeClickElement == element?.id ||
    (element?.id && formStore.selectedElement?.id == element?.id)
        ? 'selected-bg'
        : 'selected-inactive-bg'
    "
  group="people"
  item-key="id"
  style="min-height: 150px; border: 1px dashed gray"
  ghost-class="ghost"
  drag-class="drag"
>
  <template #item="{ element }">
    <div
      :class="element.class"
      v-if="formStore.activeTabMenu == element.tab_menu"
    >
      <component
        :key="element.id"
        :is="getComponentName(element.control_type)"
        @click.stop="(e) => clickItem(e, element.id, element)"
        :element="element"
        :data="element.child"
      ></component>
    </div>
  </template>
</draggable>

fieldcontrol

Her bir form elementini render eder.

<component :is="getComponentName(element.html_element)" :column="element" />

• getComponentName ise import edilmiş komponentlerin mapini döndürür.

`draggable` `useModel` kullanımını desteklememektedir. İlerleyen süreçlerde kullanılması gerekiyorsa diye dikkate alınmalıdır!