Olobase - Belgeler - Olobase UI

« Menüye Dön

Admin
List
Show
Form
Messages

Show

Show sayfası, getOne veri sağlayıcı yöntemini kullanılarak belirli bir kaynak öğesinin tüm ayrıntılarını görüntülemek için kullanılır. Olobase Admin, resource özelliği kullanır ve birçok alan bileşeninin yanı sıra standart bir layout sağlayarak yazılım geliştirmeyi kolaylaştırır. Show sayfası standart bir görünüm sayfası bileşeni olması nedeni ile bu sayfa içerisinde hayal edebileceğiniz herhangi bir gelişmiş detay görünümünü sunmanın gerçek bir sınırı yoktur.

Show Layout

VaShowLayout kaynak ayrıntılarının gösterilmesi için oluşturulmuş sayfa düzenidir. Herhangi bir Olobase Admin alanının (field) yoğun kullanımın gerektiği durumlar için kullanılabilecek en iyi yerdir.

Mixinler

Resource

Özellikler

Özellikler	Tür	Açıklama
title	`string`	Üst başlığın solunda isteğe bağlı h1 başlığı.
disableCard	`boolean`	V-card sarmalını kapatır/açar.

Slotlar

Ad	Açıklama
default	Sayfa içeriği için yer tutucusu.

Row Show

Eğer liste detay verileriniz çok detaylı değilse ve bu detayların hızlı bir şekilde gösterilmesini istiyorsanız, row-show adlı özelliği kullanabilirsiniz.

Row Show

<template>
  <va-list
    disable-create
    :filters="filters"
    :fields="fields"
    :items-per-page="10"
  >
    <va-data-table-server
      row-show
      disable-clone
      disable-show
    >
    </va-data-table-server>
  </va-list>
</template>

oloma-demo-ui/src/resources/Employees/RowShow.vue

<template>
  <va-show-layout
    :title="title"
    disable-card
  >
    <va-show :item="item">
      <v-row justify="center">
        <v-col>
          <v-table density="compact" class="va-row-show-table">
            <tbody>
              <tr>
                <td><b>{{ $t('resources.employees.fields.companyId') }}</b></td>
                <td>
                  <va-field class="sm-field" source="companyId"></va-field>
                </td>
              </tr>
              <tr>
                <td><b>{{ $t('resources.employees.fields.employeeNumber') }}</b></td>
                <td>
                  <va-field class="sm-field" source="employeeNumber"></va-field>
                </td>
              </tr>
              <tr>
                <td><b>{{ $t('resources.employees.fields.jobTitleId') }}</b></td>
                <td>
                  <va-field class="sm-field" source="jobTitleId"></va-field>
                </td>
              </tr>
              <tr>
                <td><b>{{ $t('resources.employees.fields.name') }}</b></td>
                <td>
                  <va-field class="sm-field" source="name"></va-field>
                </td>
              </tr>
              <tr>
                <td><b>{{ $t('resources.employees.fields.surname') }}</b></td>
                <td>
                  <va-field class="sm-field" source="surname"></va-field>
                </td>
              </tr>
              <tr>
                <td><b>{{ $t('resources.employees.fields.gradeId') }}</b></td>
                <td>
                  <va-field class="sm-field" source="gradeId"></va-field>
                </td>
              </tr>
              <tr>
                <td><b>{{ $t('resources.employees.fields.employmentStartDate') }}</b></td>
                <td>
                  <va-field class="sm-field" source="employmentStartDate"></va-field>
                </td>
              </tr>
              <tr>
                <td><b>{{ $t('resources.employees.fields.employmentEndDate') }}</b></td>
                <td>
                  <va-field class="sm-field" source="employmentEndDate"></va-field>
                </td>
              </tr>
              <tr>
                <td><b>{{ $t('resources.employees.fields.createdAt') }}</b></td>
                <td>
                  <va-field class="sm-field" source="createdAt"></va-field>
                </td>
              </tr>
            </tbody>
          </v-table>
        </v-col>
      </v-row>
    </va-show>
  </va-show-layout>
</template>

<script>
export default {
  props: ["title", "item"],
};
</script>

Sekme (Tab) Düzeni

Layout üzerinde tam bir özgürlüğe sahip olduğunuz için, herhangi bir vuetify veya özel bileşeni kullanarak sekmeli bir detay sayfası oluşturabilirsiniz. Aşağıdaki örneğe göz atın.

Show Layout

<template>
  <va-show-layout
    :showList="false"
    :showClone="false"
    :showEdit="false"
    :showDelete="false"
  >
    <va-show :item="item">
      <v-tabs v-model="tabs">
        <v-tab value="1">Tab 1</v-tab>
        <v-tab value="2">Tab 2</v-tab>
        <v-tab value="3">Tab 3</v-tab>
      </v-tabs>
      <v-window v-model="tabs">
        <v-window-item value="1">
          <v-card>
            <v-card-text>
              Tab content 1
            </v-card-text>
          </v-card>
        </v-window-item>
        <v-window-item value="2">
          <v-card>
            <v-card-text>
              Tab content 2
            </v-card-text>
          </v-card>
        </v-window-item>
        <v-window-item value="3">
          <v-card>
            <v-card-text>
              Tab content 3
            </v-card-text>
          </v-card>
        </v-window-item>
      </v-window>
    </va-show>
  </va-show-layout>
</template>

Enjektör

Takip eden örnekte Olobase Admin bileşen alanlarını kullanarak kaynak görüntülemeyi kolaylaştıran bileşen enjektörünü gösteriliyor. Her Olobase Admin alanı için bu öğeyi enjekte edin.

<script>
export default {
  props: ["id", "item"],
}
</script>

Özellikler

Özellikler	Tür	Açıklama
item	`object`	Tüm özelliklerin Olobase Admin alanlarına eklenmesi gereken öğe kaynak nesnesi.

Slotlar

Ad	Açıklama
default	Tüm içerik, tüm iç alanlarla birlikte oluşturulur. Öğe her alana enjekte edilir.

Tahmin edebileceğiniz gibi VaShow'un ana rolü, her Olobase Admin alanı bileşenine tam öğe kaynak nesnesini enjekte etmektir, bu da minimum standart kod demektir. Daha sonra Olobase Admin alanı, kaynak özelllikte belirtilen kaynak özelliğinin değerini yakalayabilecektir.

Alan Sarmacı (Field Wrapper)

Etiket yerelleştirmesini ve desteklenen Olobase Admin alanını destekleyen alan için sarmalayıcı bileşen, esas olarak detay sayfası için kullanılır. Özel ihtiyaçlar için varsayılan slotu kullanın veya geçerli mevcut alan bileşeninin hızlı kullanımı için type özelliğini kullanın. Bu bileşenin diğer tüm nitelikleri alt slot ile birleştirilecektir.

Mixinler

Resource

Özellikler

Özellikler	Tür	Açıklama
source	`string`	Gösterilecek değeri getirmek için kaynağın özelliği. Hiyerarşik nesne için nokta gösterimini destekler.
item	`null`	VaShow tarafından eklenen varsayılan öğeyi geçersiz kılar.
label	`string`	Varsayılan etiket davranışını geçersiz kılar. Varsayılan, yerelleştirilmiş Vue I18n etiketini hem kaynaktan hem de resource kaynağından almaktır.
labelKey	`string`	Çevrilen etiket olarak varsayılan kaynak anahtarını geçersiz kılar.
type	`string`	Kullanılacak alan türü. Gelişmiş özel ihtiyaçlar için varsayılan slotu kullanıyorsanız kullanılmaz.

Slotlar

Ad	Açıklama
default	Alan yer tutucusu. Varsayılan olarak `type` özelliklerine göre alan bileşenini diğer tüm niteliklerin birleştirilmiş olduğu şekilde kullanır.

Varsayılan bir slot sağlanmazsa VaField, özellik türüne göre otomatik olarak başlık altında belirli bir Va alanı bileşenini kullanacaktır.

Aşağıdaki kod:

<template>
  <va-show-layout>
    <va-show :item="item">
      <va-field source="type" type="select" chip></va-field>
    </va-show>
  </va-show-layout>
</template>

Tam olarak bu koda eşdeğerdir:

<template>
  <va-show-layout>
    <va-show :item="item">
      <va-field source="type">
        <va-select-field source="type" chip></va-select-field>
      </va-field>
    </va-show>
  </va-show-layout>
</template>

Ya da:

<template>
  <va-show-layout>
    <va-show :item="item">
      <va-field source="type" v-slot="{ item }">
        <va-select-field source="type" :item="item" chip></va-select-field>
      </va-field>
    </va-show>
  </va-show-layout>
</template>

Bu bileşeni yalnızca etiket ve ürün değeri sağlayıcısı için kullanabilir ve kendi özelleştirmenizi yapabilirsiniz. Size değeri ve tam öğeyi verecek olan varsayılan slot sağlayıcısını kullanmanız yeterlidir.

<template>
  <va-show-layout>
    <va-show :item="item">
      <va-field
        source="address"
        :label="$t('address')"
        v-slot="{ value }"
      >
        {{ value.street }}, {{ value.postcode }} {{ value.city }}
      </va-field>
    </va-show>
  </va-show-layout>
</template>

Field Bileşenleri

Görüntüleme verileri için desteklenen tüm bileşenleri görmek için fields sayfasına gidin. Hiçbiri ihtiyaçlarınızı karşılamıyorsa kendi field bileşeninizi de oluşturabilirsiniz.