osmali-micro-site

1. Paket Kurulumu:

npm i osmanli-yatirim

2. Store and Router Kullanımı

Store ve Router otomatik olarak ilgili projedeki router.js ve store.js ile birleştirilmiş olacaktır. Haliyle bu konuyla alakalı sizin import işlemi yapmanıza gerek kalmayacaktır.

3. Paketin Entegre Edilmesi

main.js dosyanızın aşağıdaki gibi olması yeterli olacaktır.

import Vue from "vue";
import OsmanliPackage from "osmanli-yatirim";
import App from "./App.vue";
import router from "./router";
import store from "./store";

Vue.use(OsmanliPackage, { store });

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

4. Bileşenler Nasıl Kullanılır?

NPM modülüne dönüştürülmüş olan componentleri aşağıdaki isimleriyle direkt kullanabilirsiniz.

Örneğin;

App.vue

<template>
  <buy-sell-viop-transactions />
  <transfer-tracking />
  <securities-transfer />
  <defined-bank-accounts />
  <account-definition />
  <transfer-request />
  <fx-viop-warrant-transfer />
  <apply-credit />
  <public-offering-home-page />
  <public-offer-request-entry />
  <buy-sell-stocks />
  <request-tracking />
  <share-extract />
  <option-extract />
  <warrant-extract />
  <bono-extract />
  <fund-extract />
  <fund-filters />
  <fund-portfolio />
  <fund-survey />
  <fund-command-basket />
  <buy-sell-fund />
  <contracts />
  <test-and-survey />
  <legitimacy-test />
  <legitimacy-result />
  <suitability-test />
  <suitability-result />
  <customer-statement-test />
  <cuopon-redemption-extract />
  <dividend-extract />
  <account-extract />
  <stop-page />
  <general-settings />
  <customer-statement-test />
  <currency-table />
</template>

Component'lerin detaylı kullanımlarına aşağıdan ulaşabilirsiniz.

5. View Olarak Nasıl Kullanılır? (Bonus)

Hisse - Emir Girişi

/views/e-sube/Stock klasörlerini oluşturun ve içerisine Stock.vue adında bir dosya oluşturun. İçerisine aşağıdaki şekilde component register işlemi yapın.

<template>
  <buy-sell-stocks :tabName="this.$route.query.securityNo ? "buy" : this.$route.query.type || 'ozel-emir'" />
</template>

router.js

{
  path: "/hisse/emir-girisi:type?",
  name: "BuySellStock",
  component: () => import("@/views/e-sube/Stock/Stock.vue"),
  meta: {
    requiresAuth: true,
    isEsube: true,
    layout: "AppLayout",
    breadcrumb: [
      {
        name: "Dashboard",
        icon: "dashboard",
        url: { name: "Home" },
      },
    ],
  },
}

Hisse - Hisse Ekstresi

/e-sube/Extracts/ klasörlerini oluşturun ve içerisine ShareExtract.vue adında bir dosya oluşturun. İçerisine aşağıdaki şekilde component register işlemi yapın.

<template>
  <share-extract />
</template>

router.js

{
  path: "/hisse-ekstresi",
  name: "ShareExtract",
  component: () => import("@/views/e-sube/Stock/Extracts/ShareExtract.vue"),
  meta: {
    requiresAuth: true,
    isEsube: true,
  }
}

Hisse - Temettü Ekstresi

/e-sube/Extracts/ klasörlerini oluşturun ve içerisine DividendExtract.vue adında bir dosya oluşturun. İçerisine aşağıdaki şekilde component register işlemi yapın.

<template>
  <dividend-extract />
</template>

router.js

{
  path: "/temettu-ekstresi",
  name: "DividendExtract",
  component: () => import("@/views/e-sube/Stock/Extracts/DividendExtract.vue"),
  meta: {
    requiresAuth: true,
    isEsube: true,
  }
}

Opsiyon - Opsiyon Ekstresi

/e-sube/Extracts/ klasörlerini oluşturun ve içerisine OptionExtract.vue adında bir dosya oluşturun. İçerisine aşağıdaki şekilde component register işlemi yapın.

<template>
  <option-extract />
</template>

router.js

{
  path: "/opsiyon-ekstresi",
  name: "OptionExtract",
  component: () => import("@/views/e-sube/Stock/Extracts/OptionExtract.vue"),
  meta: {
    requiresAuth: true,
    isEsube: true,
  }
}

Vadeli Emir Girişi

/views/e-sube/Viop klasörlerini oluşturun ve içerisine Viop.vue adında bir dosya oluşturun. İçerisine aşağıdaki şekilde component register işlemi yapın.

<template>
  <buy-sell-viop-transactions :tabName="this.$route.query.type || 'ozel-emir'" />
</template>

router.js

{
  path: "/vadeli/emir-girisi:type?",
  name: "Viop",
  component: () => import("@/views/e-sube/Viop/Viop.vue"),
  meta: {
    requiresAuth: true,
    isEsube: true,
    layout: "AppLayout",
    breadcrumb: [
      {
        name: "Dashboard",
        icon: "dashboard",
        url: { name: "Home" },
      },
    ],
  },
}

Vadeli - Vadeli Ekstresi

/e-sube/Extracts/ klasörlerini oluşturun ve içerisine ViopExtract.vue adında bir dosya oluşturun. İçerisine aşağıdaki şekilde component register işlemi yapın.

<template>
  <viop-extract />
</template>

router.js

{
  path: "/vadeli-ekstresi",
  name: "ViopExtract",
  component: () => import("@/views/e-sube/Extracts/ViopExtract.vue"),
  meta: {
    requiresAuth: true
  }
}

Vadeli - Kar/Zarar Raporu

/e-sube/Stock/ klasörlerini oluşturun ve içerisine ProfitLossReports.vue adında bir dosya oluşturun. İçerisine aşağıdaki şekilde component register işlemi yapın.

<template>
  <profit-loss-reports />
</template>

router.js

{
  path: "/vadeli/kar-zarar-raporum",
  name: "ProfitLossReport",
  component: () => import("@/views/e-sube/Stock/ProfitLossReports"),
  meta: {
    requiresAuth: true,
    isEsube: true,
  }
}

Varant - Varant Ekstresi

/e-sube/Extracts/ klasörlerini oluşturun ve içerisine WarrantExtract.vue adında bir dosya oluşturun. İçerisine aşağıdaki şekilde component register işlemi yapın.

<template>
  <warrant-extract />
</template>

router.js

{
  path: "/varant-ekstresi",
  name: "WarrantExtract",
  component: () => import("@/views/e-sube/Extracts/WarrantExtract.vue"),
  meta: {
    requiresAuth: true,
    isEsube: true,
  }
}

Bono - Kupon ve İtfa Ekstresi

/e-sube/Extracts/ klasörlerini oluşturun ve içerisine CuoponRedemptionExtract.vue adında bir dosya oluşturun. İçerisine aşağıdaki şekilde component register işlemi yapın.

<template>
  <cuopon-redemption-extract />
</template>

router.js

{
  path: "/bono-kupon-itfa-ekstre",
  name: "CuoponRedemptionExtract",
  component: () => import("@/views/e-sube/Extracts/CuoponRedemptionExtract.vue"),
  meta: {
    requiresAuth: true,
    isEsube: true,
  }
}

Bono - Bono Ekstresi

/e-sube/Bonds/ klasörlerini oluşturun ve içerisine BuyBond.vue, BuyBondDetail.vue ve BondProcessedList.vue adında üç dosya oluşturun. İçerisine aşağıdaki şekilde ilgili componentlerin register işlemini yapın.

<template>
  <buy-bond />
</template>

<template>
  <buy-bond-detail />
</template>

<template>
  <bond-processed-list />
</template>

router.js

{
  path: "/bono-al",
  name: "BuyBond",
  component: () => import("@/views/e-sube/Bonds/BuyBond.vue"),
  meta: {
    requiresAuth: true,
    isEsube: true,
  }
},
{
  path: "/bono-al/:id",
  name: "BuyBondDetail",
  component: () => import("@/views/e-sube/Bonds/BuyBondDetail.vue"),
  meta: {
    requiresAuth: true,
    isEsube: true,
  }
},
{
  path: "/gerceklesen-bono-tahvil-islemleri",
  name: "BondProcessedList",
  component: () => import("@/views/e-sube/Bonds/BondProcessedList.vue"),
  meta: {
    requiresAuth: true,
    isEsube: true,
  }
},

Bono - Bono Ekstresi

/e-sube/Extracts/ klasörlerini oluşturun ve içerisine BondExtract.vue adında bir dosya oluşturun. İçerisine aşağıdaki şekilde component register işlemi yapın.

<template>
  <bono-extract />
</template>

router.js

{
  path: "/bono-ekstresi",
  name: "BondExtract",
  component: () => import("@/views/e-sube/Extracts/BondExtract.vue"),
  meta: {
    requiresAuth: true,
    isEsube: true,
  }
}

Fon - Fon Ekstresi

/e-sube/Extracts/ klasörlerini oluşturun ve içerisine FundExtract.vue adında bir dosya oluşturun. İçerisine aşağıdaki şekilde component register işlemi yapın.

<template>
  <fund-extract />
</template>

router.js

{
  path: "/fon-ekstre",
  name: "FundExtract",
  component: () => import("@/views/e-sube/Extracts/FundExtract.vue"),
  meta: {
    requiresAuth: true,
    isEsube: true,
  }
}

Hesabım - Hesap Ekstresi

/e-sube/Extracts/ klasörlerini oluşturun ve içerisine AccountExtract.vue adında bir dosya oluşturun. İçerisine aşağıdaki şekilde component register işlemi yapın.

<template>
  <account-extract />
</template>

router.js

{
  path: "/hesap-ekstresi",
  name: "ExtractOfAccount",
  component: () => import("@/views/e-sube/Extracts/AccountExtract"),
  meta: {
    requiresAuth: true,
    isEsube: true,
  }
}

Hesabım - Stopaj İzleme

/e-sube/StopPage/ klasörlerini oluşturun ve içerisine Index.vue adında bir dosya oluşturun. İçerisine aşağıdaki şekilde component register işlemi yapın.

<template>
  <stop-page />
</template>

router.js

{
  path: "/stop-page",
  name: "StopPageMain",
  component: () => import("@/views/e-sube/StopPage/Index.vue"),
  meta: {
    requiresAuth: true,
    isEsube: true,
  }
}

Not: Aşağıdaki Stopaj Detay ve Stopaj Rapor ekranlarını da eklemiz gereklidir.

Hesabım - Stopaj Detay

/e-sube/StopPage/ klasörlerini oluşturun ve içerisine Detail.vue adında bir dosya oluşturun. İçerisine aşağıdaki şekilde component register işlemi yapın.

<template>
  <stop-page-detail />
</template>

router.js

{
  path: "/stop-page/detail",
  name: "StopPageDetail",
  component: () => import("@/views/e-sube/StopPage/Detail.vue"),
  meta: {
    requiresAuth: true,
    isEsube: true,
  }
}

Hesabım - Stopaj Rapor

/e-sube/StopPage/ klasörlerini oluşturun ve içerisine Report.vue adında bir dosya oluşturun. İçerisine aşağıdaki şekilde component register işlemi yapın.

<template>
  <stop-page-report />
</template>

router.js

{
  path: "/stop-page/detail/report",
  name: "StopPageReport",
  component: () => import("@/views/e-sube/StopPage/Report.vue"),
  meta: {
    requiresAuth: true,
    isEsube: true,
  }
}

Fon - Fon Filtreleme

/e-sube/Funds/ klasörlerini oluşturun ve içerisine FundFilters.vue adında bir dosya oluşturun. İçerisine aşağıdaki şekilde component register işlemi yapın.

<template>
  <fund-filters />
</template>

router.js

{
  path: "/fon/filtreleme",
  name: "FundFilters",
  component: () => import("@/views/e-sube/Funds/FundFilters.vue"),
  meta: {
    requiresAuth: true,
    isEsube: true,
  }
}

Fon - Fon Portfolio

/e-sube/Funds/ klasörlerini oluşturun ve içerisine FundPortfolio.vue adında bir dosya oluşturun. İçerisine aşağıdaki şekilde component register işlemi yapın.

<template>
  <fund-portfolio />
</template>

router.js

{
  path: "/fon/fon-portfoyum",
  name: "FundsPortfolio",
  component: () => import("@/views/e-sube/Funds/FundPortfolio.vue"),
  meta: {
    requiresAuth: true,
    isEsube: true,
  }
}

Fon - Fon Anket

/e-sube/Funds/ klasörlerini oluşturun ve içerisine FundSurvey.vue adında bir dosya oluşturun. İçerisine aşağıdaki şekilde component register işlemi yapın.

<template>
  <fund-survey />
</template>

Fon - Fon Emir Sepeti

/e-sube/Funds/ klasörlerini oluşturun ve içerisine <FundCommandBasket.vue adında bir dosya oluşturun. İçerisine aşağıdaki şekilde component register işlemi yapın.

<template>
  <fund-command-basket />
</template>

router.js

{
  path: "/fon-emir-sepeti",
  name: "FundCommandBasket",
  component: () => import("@/views/e-sube/Funds/FundCommandBasket.vue"),
  meta: {
    requiresAuth: true,
    isEsube: true,
  }
}

Fon - Fon Araştırma

/e-sube/Funds/ klasörlerini oluşturun ve içerisine <FundResearch.vue adında bir dosya oluşturun. İçerisine aşağıdaki şekilde component register işlemi yapın.

<template>
  <fund-research />
</template>

router.js

{
  path: "/fon/arastirma",
  name: "FundResearch",
  component: () => import("@/views/e-sube/Funds/FundResearch.vue"),
  meta: {
    requiresAuth: true,
    isEsube: true,
  }
}

Fon - Fon Karşılaştırma

/e-sube/Funds/ klasörlerini oluşturun ve içerisine <FundComparison.vue adında bir dosya oluşturun. İçerisine aşağıdaki şekilde component register işlemi yapın.

<template>
  <fund-comparison />
</template>

router.js

{
  path: "/fon/karsilastirma",
  name: "FundComparison",
  component: () => import("@/views/e-sube/Funds/FundComparison.vue"),
  meta: {
    requiresAuth: true,
    isEsube: true,
  }
}

Fon - Fon Alış/Satış

/e-sube/Funds/ klasörlerini oluşturun ve içerisine BuySellFund.vue adında bir dosya oluşturun. İçerisine aşağıdaki şekilde component register işlemi yapın. Fon portföyüm tablosu üzerinden alış/satış ekranlarına geçiş yapabilirsiniz.

<template>
  <buy-sell-fund />
</template>

router.js

{
  path: "/fon/filtreleme/alis",
  name: "BuyFund",
  component: () => import("@/views/e-sube/Funds/BuySellFund.vue"),
  meta: {
    requiresAuth: true,
    isEsube: true,
  }
}

Halka Arz - Talep Anasayfa

/views/e-sube/PublicOffers/ klasörlerini oluşturun ve içerisine PublicOfferingHomePage.vue adında bir dosya oluşturun. İçerisine aşağıdaki şekilde component register işlemi yapın.

<template>
  <public-offering-home-page />
</template>

router.js

{
  path: "/halka-arz-talep-anasayfa",
  name: "PublicOfferingHomePage",
  component: () => import("@/views/e-sube/PublicOffers/PublicOfferingHomePage.vue"),
  meta: {
    requiresAuth: true,
    isEsube: true,
  }
}

Halka Arz - Talep Girişi

/views/e-sube/PublicOffers/ klasörlerini oluşturun ve içerisine PublicOfferRequestEntry.vue adında bir dosya oluşturun. İçerisine aşağıdaki şekilde component register işlemi yapın.

<template>
  <public-offer-request-entry />
</template>

router.js

{
  path: "/halka-arz-talep-girisi",
  name: "PublicOfferRequestEntry",
  component: () => import("@/views/e-sube/PublicOffers/PublicOfferRequestEntry.vue"),
  meta: {
    requiresAuth: true,
    isEsube: true,
  }
}

Halka Arz - Talep İzleme

/views/e-sube/PublicOffers/ klasörlerini oluşturun ve içerisine PublicOfferRequestTracking.vue adında bir dosya oluşturun. İçerisine aşağıdaki şekilde component register işlemi yapın.

<template>
  <request-tracking :tabName="this.$route.params.tabName || 'requestCollection'"/>
</template>

router.js

{
  path: "/halka-arz-talep-izleme",
  name: "RequestTracking",
  props: true,
  component: () => import("@/views/e-sube/PublicOffers/PublicOfferRequestTracking.vue"),
  meta: {
    requiresAuth: true,
    isEsube: true,
  }
}

Tanımlamalar - Genel Ayarlar

/views/e-sube/Profile/ klasörlerini oluşturun ve içerisine GeneralSettings.vue adında bir dosya oluşturun. İçerisine aşağıdaki şekilde component register işlemi yapın.

<template>
  <general-settings />
</template>

router.js

{
  path: "/tanimlamalar/genel-ayarlar",
  name: "GeneralSettings",
  component: () => import("@/views/e-sube/Profile/GeneralSettings.vue"),
  meta: {
    requiresAuth: true,
    isEsube: true,
  }
}

Tanımlamalar - Kredi Limit Başvur

/views/e-sube/Profile/ klasörlerini oluşturun ve içerisine ApplyCredit.vue adında bir dosya oluşturun. İçerisine aşağıdaki şekilde component register işlemi yapın.

<template>
  <apply-credit />
</template>

router.js

{
  path: "/tanimlamalar/kredi-basvur",
  name: "ApplyCredit",
  component: () => import("@/views/e-sube/Profile/ApplyCredit.vue"),
  meta: {
    requiresAuth: true,
    isEsube: true,
  }
}

Tanımlamalar - Sözleşme ve Talimatlar

/views/e-sube/Profile/ klasörlerini oluşturun ve içerisine Contracts.vue adında bir dosya oluşturun. İçerisine aşağıdaki şekilde component register işlemi yapın.

<template>
  <contracts />
</template>

router.js

{
  path: "/tanimlamalar/sozlesmeler",
  name: "Contracts",
  component: () => import("@/views/e-sube/Profile/Contracts.vue"),
  meta: {
    requiresAuth: true,
    isEsube: true,
  }
}

Tanımlamalar - Testler ve Anketler - Yerindelik Testi

/views/e-sube/Profile/LegitimacyTest klasörlerini oluşturun ve içerisine index.vue LegitimacyTest.vue adlarında iki dosya oluşturun. İçerisine aşağıdaki şekilde componentleri register işlemi yapın.

index.vue

<template>
  <legitimacy-test />
</template>

LegitimacyTest.vue

<template>
  <legitimacy-result />
</template>

router.js

{
  path: "/tanimlamalar/yerindelik-testi",
  name: "LegitimacyTest",
  component: () => import("@/views/e-sube/Profile/LegitimacyTest/LegitimacyTest.vue"),
  meta: {
    requiresAuth: true,
    isEsube: true,
  }
},
{
  path: "/tanimlamalar/yerindelik-testi-sonuc",
  name: "LegitimacyIndex",
  component: () => import("@/views/e-sube/Profile/LegitimacyTest/index.vue"),
  meta: {
    requiresAuth: true,
    isEsube: true,
  }
},

Tanımlamalar - Testler ve Anketler - Uygunluk Testi

/views/e-sube/Profile/SuitabilityTest klasörlerini oluşturun ve içerisine index.vue, SuitabilityTest.vue, CustomerStatementTest.vue adlarında üç dosya oluşturun. İçerisine aşağıdaki şekilde componentleri register işlemi yapın.

SuitabilityTest.vue

<template>
  <suitability-test />
</template>

index.vue

<template>
  <suitability-result />
</template>

CustomerStatementTest.vue

<template>
  <customer-statement-test />
</template>

router.js

{
  path: "/tanimlamalar/uygunluk-testi",
  name: "SuitabilityTest",
  component: () => import("@/views/e-sube/Profile/SuitabilityTest/SuitabilityTest.vue"),
  meta: {
    requiresAuth: true,
    isEsube: true,
  }
},
{
  path: "/tanimlamalar/uygunluk-testi-sonuc",
  name: "SuitabilityIndex",
  component: () => import("@/views/e-sube/Profile/SuitabilityTest/index.vue"),
  meta: {
    requiresAuth: true,
    isEsube: true,
  }
},
{
  path: "/tanimlamalar/risk-ve-getiri-beyan-testi",
  name: "CustomerStatementTest",
  component: () => import("@/views/e-sube/Profile/SuitabilityTest/CustomerStatementTest.vue"),
  meta: {
    requiresAuth: true,
    isEsube: true,
  }
},

Ödemeler ve Transferler - Döviz Al/Sat

/views/e-sube/BankingOperations/ klasörlerini oluşturun ve içerisine CurrencyTable.vue ve CurrencyBuySell.vue adında iki dosya oluşturun. İçerisine aşağıdaki şekilde ilgili componentlerin register işlemini yapın.

  <template>
    <customer-statement-test />
  </template>

  <template>
    <currency-table />
  </template>

{
  path: "/doviz",
  name: "CurrencyTable",
  component: () => import("@/views/e-sube/BankingOperations/CurrencyTable.vue"),
  meta: {
    requiresAuth: true,
    isEsube: true,
  }
},
{
  path: "/doviz-al-sat",
  name: "CurrencyBuySell",
  component: () => import("@/views/e-sube/BankingOperations/CurrencyBuySell.vue"),
  meta: {
    requiresAuth: true,
    isEsube: true,
  }
}

Ödemeler ve Transferler - Para Transferi

/views/e-sube/BankingOperations/ klasörlerini oluşturun ve içerisine DefinedBankAccounts.vue adında bir dosya oluşturun. İçerisine aşağıdaki şekilde component register işlemi yapın.

<template>
  <defined-bank-accounts />
</template>

router.js

{
  path: "/para-transferi",
  name: "DefinedBankAccounts",
  component: () => import("@/views/e-sube/BankingOperations/DefinedBankAccounts.vue"),
  meta: {
    requiresAuth: true,
    isEsube: true,
  }
}

Ödemeler ve Transferler - Menkul Transferi

/views/e-sube/BankingOperations/ klasörlerini oluşturun ve içerisine SecuritiesTransfer.vue adında bir dosya oluşturun. İçerisine aşağıdaki şekilde component register işlemi yapın.

<template>
  <securities-transfer />
</template>

router.js

{
  path: "/menkul-transferi",
  name: "SecuritiesTransfer",
  component: () => import("@/views/e-sube/BankingOperations/SecuritiesTransfer.vue"),
  meta: {
    requiresAuth: true,
    isEsube: true,
  }
}

Ödemeler ve Transferler - Transfer İzleme

/views/e-sube/BankingOperations/ klasörlerini oluşturun ve içerisine TransferTracking.vue adında bir dosya oluşturun. İçerisine aşağıdaki şekilde component register işlemi yapın.

<template>
  <transfer-tracking :tabName="this.$route.query.tabName || this.$route.params.tabName || 'share'" />
</template>

router.js

{
  path: "/transfer-izleme/:tabName?",
  name: "TransferTracking",
  component: () => import("@/views/e-sube/BankingOperations/TransferTracking.vue"),
  meta: {
    requiresAuth: true,
    isEsube: true,
    layout: "AppLayout"
  },
}

Ödemeler ve Transferler - Ara Ekranlar

Hesap Tanımlama

/e-sube/BankingOperations/AccountDefinition.vue

<template>
  <account-definition />
</template>

Para Transferi Talebi

/e-sube/BankingOperations/TransferRequest.vue

<template>
  <transfer-request />
</template>

FX/VİOP Teminat Aktarımı

/e-sube/BankingOperations/FxViopWarrantTransfer.vue

<template>
  <fx-viop-warrant-transfer />
</template>

router.js

{
  path: "/hesap-tanimi",
  name: "AccountDefinition",
  component: () => import("@/views/e-sube/BankingOperations/AccountDefinition.vue"),
  meta: {
    requiresAuth: true,
    isEsube: true,
  }
},
{
  path: "/para-transferi-talebi",
  name: "TransferRequest",
  component: () => import("@/views/e-sube/BankingOperations/TransferRequest.vue"),
  meta: {
    requiresAuth: true,
    isEsube: true,
  }
},
{
  path: "/fx-viop-teminat-aktarimi",
  name: "FxViopWarrantTransfer",
  component: () => import("@/views/e-sube/BankingOperations/FxViopWarrantTransfer.vue"),
  meta: {
    requiresAuth: true,
    isEsube: true,
  }
}