npm i osmanli-yatirim
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.
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");
NPM modülüne dönüştürülmüş olan componentleri aşağıdaki isimleriyle direkt kullanabilirsiniz.
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 />
<contracts />
<test-and-survey />
<legitimacy-test />
<legitimacy-result />
<suitability-test />
<suitability-result />
<customer-statement-test />
<cuopon-redemption-extract />
<dividend-extract />
<account-extract />
<stop-page />
</template>
Component'lerin detaylı kullanımlarına aşağıdan ulaşabilirsiniz.
/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>
{
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" },
},
],
},
}
/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>
{
path: "/hisse-ekstresi",
name: "ShareExtract",
component: () => import("@/views/e-sube/Stock/Extracts/ShareExtract.vue"),
meta: {
requiresAuth: true,
isEsube: true,
}
}
/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>
{
path: "/temettu-ekstresi",
name: "DividendExtract",
component: () => import("@/views/e-sube/Stock/Extracts/DividendExtract.vue"),
meta: {
requiresAuth: true,
isEsube: true,
}
}
/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>
{
path: "/opsiyon-ekstresi",
name: "OptionExtract",
component: () => import("@/views/e-sube/Stock/Extracts/OptionExtract.vue"),
meta: {
requiresAuth: true,
isEsube: true,
}
}
/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>
{
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" },
},
],
},
}
/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>
{
path: "/vadeli-ekstresi",
name: "ViopExtract",
component: () => import("@/views/e-sube/Extracts/ViopExtract.vue"),
meta: {
requiresAuth: true
}
}
/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>
{
path: "/vadeli/kar-zarar-raporum",
name: "ProfitLossReport",
component: () => import("@/views/e-sube/Stock/ProfitLossReports"),
meta: {
requiresAuth: true,
isEsube: true,
}
}
/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>
{
path: "/varant-ekstresi",
name: "WarrantExtract",
component: () => import("@/views/e-sube/Extracts/WarrantExtract.vue"),
meta: {
requiresAuth: true,
isEsube: true,
}
}
/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>
{
path: "/bono-kupon-itfa-ekstre",
name: "CuoponRedemptionExtract",
component: () => import("@/views/e-sube/Extracts/CuoponRedemptionExtract.vue"),
meta: {
requiresAuth: true,
isEsube: true,
}
}
/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>
{
path: "/bono-ekstresi",
name: "BondExtract",
component: () => import("@/views/e-sube/Extracts/BondExtract.vue"),
meta: {
requiresAuth: true,
isEsube: true,
}
}
/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>
{
path: "/fon-ekstre",
name: "FundExtract",
component: () => import("@/views/e-sube/Extracts/FundExtract.vue"),
meta: {
requiresAuth: true,
isEsube: true,
}
}
/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>
{
path: "/hesap-ekstresi",
name: "ExtractOfAccount",
component: () => import("@/views/e-sube/Extracts/AccountExtract"),
meta: {
requiresAuth: true,
isEsube: true,
}
}
/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>
{
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.
/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>
{
path: "/stop-page/detail",
name: "StopPageDetail",
component: () => import("@/views/e-sube/StopPage/Detail.vue"),
meta: {
requiresAuth: true,
isEsube: true,
}
}
/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>
{
path: "/stop-page/detail/report",
name: "StopPageReport",
component: () => import("@/views/e-sube/StopPage/Report.vue"),
meta: {
requiresAuth: true,
isEsube: true,
}
}
/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>
{
path: "/fon/filtreleme",
name: "FundFilters",
component: () => import("@/views/e-sube/Funds/FundFilters.vue"),
meta: {
requiresAuth: true,
isEsube: true,
}
}
/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>
{
path: "/fon/fon-portfoyum",
name: "FundsPortfolio",
component: () => import("@/views/e-sube/Funds/FundPortfolio.vue"),
meta: {
requiresAuth: true,
isEsube: true,
}
}
/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>
{
path: "/fon/fon-anketi",
name: "FundSurvey",
component: () => import("@/views/e-sube/Funds/FundSurvey.vue"),
meta: {
requiresAuth: true,
isEsube: true,
}
}
/e-sube/Funds/
klasörlerini oluşturun ve içerisine FundBuySell.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>
{
path: "/fon/filtreleme/alis",
name: "BuyFund",
component: () => import("@/views/e-sube/Funds/FundBuySell.vue"),
meta: {
requiresAuth: true,
isEsube: true,
}
}
/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>
{
path: "/halka-arz-talep-anasayfa",
name: "PublicOfferingHomePage",
component: () => import("@/views/e-sube/PublicOffers/PublicOfferingHomePage.vue"),
meta: {
requiresAuth: true,
isEsube: true,
}
}
/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>
{
path: "/halka-arz-talep-girisi",
name: "PublicOfferRequestEntry",
component: () => import("@/views/e-sube/PublicOffers/PublicOfferRequestEntry.vue"),
meta: {
requiresAuth: true,
isEsube: true,
}
}
/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>
{
path: "/halka-arz-talep-izleme",
name: "RequestTracking",
props: true,
component: () => import("@/views/e-sube/PublicOffers/PublicOfferRequestTracking.vue"),
meta: {
requiresAuth: true,
isEsube: true,
}
}
/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>
{
path: "/tanimlamalar/kredi-basvur",
name: "ApplyCredit",
component: () => import("@/views/e-sube/Profile/ApplyCredit.vue"),
meta: {
requiresAuth: true,
isEsube: true,
}
}
/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>
{
path: "/tanimlamalar/sozlesmeler",
name: "Contracts",
component: () => import("@/views/e-sube/Profile/Contracts.vue"),
meta: {
requiresAuth: true,
isEsube: true,
}
}
/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>
{
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,
}
},
/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>
{
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,
}
},
/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>
{
path: "/para-transferi",
name: "DefinedBankAccounts",
component: () => import("@/views/e-sube/BankingOperations/DefinedBankAccounts.vue"),
meta: {
requiresAuth: true,
isEsube: true,
}
}
/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>
{
path: "/menkul-transferi",
name: "SecuritiesTransfer",
component: () => import("@/views/e-sube/BankingOperations/SecuritiesTransfer.vue"),
meta: {
requiresAuth: true,
isEsube: true,
}
}
/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>
{
path: "/transfer-izleme/:tabName?",
name: "TransferTracking",
component: () => import("@/views/e-sube/BankingOperations/TransferTracking.vue"),
meta: {
requiresAuth: true,
isEsube: true,
layout: "AppLayout"
},
}
/e-sube/BankingOperations/AccountDefinition.vue
<template>
<account-definition />
</template>
/e-sube/BankingOperations/TransferRequest.vue
<template>
<transfer-request />
</template>
/e-sube/BankingOperations/FxViopWarrantTransfer.vue
<template>
<fx-viop-warrant-transfer />
</template>
{
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,
}
}