|
|
<template>
|
|
|
<v-container fluid>
|
|
|
<div class="Tile Shadowed Padd-0 WM-Margin-B-10" >
|
|
|
<wm-breadcrumbs LinkClass="WM-Link-Cyan" :items="breadcrumbItems"></wm-breadcrumbs>
|
|
|
</div>
|
|
|
<div class="Tile Shadowed">
|
|
|
<WM-PartTitle class="WM-Margin-T-20" TitleFa=" افزودن مشتری جدید " TitleEn=" Add a new Client " Color="cyan"></WM-PartTitle>
|
|
|
<v-layout row wrap>
|
|
|
<v-flex class="lg4">
|
|
|
<v-card-text>
|
|
|
<v-autocomplete prepend-icon="fas fa-align-justify" :items="categories" :filter="customFilter" color="cyan" item-text="name" label=" دسته ی مورد نظر "></v-autocomplete>
|
|
|
</v-card-text>
|
|
|
</v-flex>
|
|
|
<v-flex class="lg4">
|
|
|
<v-card-text>
|
|
|
<v-autocomplete prepend-icon="fas fa-align-right" :items="categories" :filter="customFilter" color="cyan" item-text="name" label=" لطفا دسته ی آیتم را به طور جزئی تر مشخص کنید "></v-autocomplete>
|
|
|
</v-card-text>
|
|
|
</v-flex>
|
|
|
<!-- --------------------------------------------------------------------
|
|
|
Gneral Info
|
|
|
-------------------------------------------------------------------- -->
|
|
|
<v-flex class="lg12 RTL text-lg-right">
|
|
|
<hr>
|
|
|
<h4> اطلاعات عمومی </h4>
|
|
|
</v-flex>
|
|
|
<v-flex lg2>
|
|
|
<v-card-text>
|
|
|
<v-autocomplete prepend-icon="fas fa-align-right" :items="customerTypes" :filter="customFilter" color="cyan" item-text="name" label=" نوع مشتری را مشخص کنید "></v-autocomplete>
|
|
|
</v-card-text>
|
|
|
</v-flex>
|
|
|
<v-flex lg3>
|
|
|
<v-card-text>
|
|
|
<v-text-field label=" نام مشتری به فارسی " color="cyan" prepend-icon="fas fa-tag" ></v-text-field>
|
|
|
</v-card-text>
|
|
|
</v-flex>
|
|
|
<v-flex lg3>
|
|
|
<v-card-text>
|
|
|
<v-text-field label=" نام مشتری به انگلیسی " color="cyan" prepend-icon="fas fa-tag"></v-text-field>
|
|
|
</v-card-text>
|
|
|
</v-flex>
|
|
|
<v-flex lg3>
|
|
|
<v-card-text>
|
|
|
<v-text-field label=" کد ملی، شماره گذرنامه و یا شناسه ی ملی شرکت " color="cyan" prepend-icon="fas fa-sort-numeric-up"></v-text-field>
|
|
|
</v-card-text>
|
|
|
</v-flex>
|
|
|
|
|
|
|
|
|
<!-- --------------------------------------------------------------------
|
|
|
Contact Info
|
|
|
-------------------------------------------------------------------- -->
|
|
|
<v-flex class="lg12 RTL text-lg-right">
|
|
|
<hr>
|
|
|
<h4> اطلاعات تماس </h4>
|
|
|
</v-flex>
|
|
|
<v-flex lg2>
|
|
|
<v-card-text>
|
|
|
<v-autocomplete prepend-icon="fas fa-map" :items="customerTypes" :filter="customFilter" color="cyan" item-text="name" label=" شهر مشتری "></v-autocomplete>
|
|
|
</v-card-text>
|
|
|
</v-flex>
|
|
|
<v-flex lg2>
|
|
|
<v-card-text>
|
|
|
<v-autocomplete prepend-icon="fas fa-align-right" :items="customerTypes" :filter="customFilter" color="cyan" item-text="name" label=" منطقه ی مشتری "></v-autocomplete>
|
|
|
</v-card-text>
|
|
|
</v-flex>
|
|
|
<v-flex lg2>
|
|
|
<v-card-text>
|
|
|
<v-text-field label=" آدرس پست الکترونیکی " color="cyan" prepend-icon="fas fa-envelope"></v-text-field>
|
|
|
</v-card-text>
|
|
|
</v-flex>
|
|
|
<v-flex lg2>
|
|
|
<v-card-text>
|
|
|
<v-text-field label=" آدرس پیج اینستاگرام " color="cyan" prepend-icon="fas fa-instagram"></v-text-field>
|
|
|
</v-card-text>
|
|
|
</v-flex>
|
|
|
<v-flex lg8 style="position:relative; padding: 0px 15px;">
|
|
|
<v-card-text class="Duplicate">
|
|
|
<v-layout row wrap pl-2>
|
|
|
<v-flex lg8>
|
|
|
<v-text-field label=" آدرس " color="cyan" prepend-icon="fas fa-map-marker"></v-text-field>
|
|
|
</v-flex>
|
|
|
<v-flex lg4>
|
|
|
<v-text-field label=" شماره ی ثابت " color="cyan" prepend-icon="fas fa-phone"></v-text-field>
|
|
|
</v-flex>
|
|
|
<v-btn fab color="cyan" fixed bottom left dark style="left:15px; bottom:-25px; position:absolute"><v-icon dark>fas fa-plus</v-icon></v-btn>
|
|
|
<v-btn fab small color="red" fixed bottom left dark style="left:-5px; top:-20px; position:absolute"><v-icon dark>fas fa-times</v-icon></v-btn>
|
|
|
</v-layout>
|
|
|
</v-card-text>
|
|
|
</v-flex>
|
|
|
<v-flex lg4 style="position:relative; padding: 0px 20px;">
|
|
|
<v-card-text class="Duplicate">
|
|
|
<v-layout row wrap pl-2>
|
|
|
<v-flex lg6>
|
|
|
<v-text-field label=" نام شماره " color="cyan" prepend-icon="fas fa-tag"></v-text-field>
|
|
|
</v-flex>
|
|
|
<v-flex lg6>
|
|
|
<v-text-field label=" شماره ی تلفن " color="cyan" prepend-icon="fas fa-phone"></v-text-field>
|
|
|
</v-flex>
|
|
|
<v-btn fab color="cyan" fixed bottom left dark style="left:15px; bottom:-25px; position:absolute"><v-icon dark>fas fa-plus</v-icon></v-btn>
|
|
|
<v-btn fab small color="red" fixed bottom left dark style="left:-5px; top:-20px; position:absolute"><v-icon dark>fas fa-times</v-icon></v-btn>
|
|
|
</v-layout>
|
|
|
</v-card-text>
|
|
|
</v-flex>
|
|
|
|
|
|
<!-- --------------------------------------------------------------------
|
|
|
Epertise Info
|
|
|
-------------------------------------------------------------------- -->
|
|
|
<v-flex mt-3 class="lg12 RTL text-lg-right">
|
|
|
<hr>
|
|
|
<h4> اطلاعات تخصصی </h4>
|
|
|
</v-flex>
|
|
|
<v-flex lg2>
|
|
|
<v-card-text>
|
|
|
<v-autocomplete prepend-icon="fas fa-map" :items="customerTypes" :filter="customFilter" color="cyan" item-text="name" label=" گروه خونی "></v-autocomplete>
|
|
|
</v-card-text>
|
|
|
</v-flex>
|
|
|
<v-flex lg2>
|
|
|
<v-card-text>
|
|
|
<v-text-field label=" سن " color="cyan" prepend-icon="fas fa-sort-numeric-up"></v-text-field>
|
|
|
</v-card-text>
|
|
|
</v-flex>
|
|
|
<v-flex lg2>
|
|
|
<v-card-text>
|
|
|
<v-text-field label=" ورن " color="cyan" prepend-icon="fas fa-sort-numeric-up"></v-text-field>
|
|
|
</v-card-text>
|
|
|
</v-flex>
|
|
|
<v-flex lg2>
|
|
|
<v-card-text>
|
|
|
<v-text-field label=" قد " color="cyan" prepend-icon="fas fa-list-ol"></v-text-field>
|
|
|
</v-card-text>
|
|
|
</v-flex>
|
|
|
<v-flex lg12 style="position:relative; padding: 0px 15px;">
|
|
|
<v-card-text class="Duplicate">
|
|
|
<v-layout row wrap pl-2>
|
|
|
<v-flex lg3>
|
|
|
<v-autocomplete prepend-icon="fas fa-align-right" :items="customerTypes" :filter="customFilter" color="cyan" item-text="name" label=" نوع بیماری "></v-autocomplete>
|
|
|
</v-flex>
|
|
|
<v-flex lg9>
|
|
|
<v-text-field label=" توضیحات " color="cyan" prepend-icon="fas fa-quote-right"></v-text-field>
|
|
|
</v-flex>
|
|
|
<v-btn fab color="cyan" fixed bottom left dark style="left:15px; bottom:-25px; position:absolute"><v-icon dark>fas fa-plus</v-icon></v-btn>
|
|
|
<v-btn fab small color="red" fixed bottom left dark style="left:-5px; top:-20px; position:absolute"><v-icon dark>fas fa-times</v-icon></v-btn>
|
|
|
</v-layout>
|
|
|
</v-card-text>
|
|
|
</v-flex>
|
|
|
<v-flex mt-3 class="lg12 RTL text-lg-left">
|
|
|
<hr>
|
|
|
<v-btn large round color="red" dark> <v-icon dark>fas fa-check</v-icon> ذخیره ی اطلاعات </v-btn>
|
|
|
</v-flex>
|
|
|
<!-- <v-btn fab small color="red" bottom left dark ><v-icon dark>fas fa-check</v-icon> ذخیره ی اطلاعات </v-btn> -->
|
|
|
|
|
|
</v-layout>
|
|
|
<v-layout row wrap>
|
|
|
|
|
|
</v-layout>
|
|
|
</div>
|
|
|
</v-container>
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
components: {
|
|
|
},
|
|
|
data () {
|
|
|
return {
|
|
|
hasSaved: false,
|
|
|
model: null,
|
|
|
categories: [
|
|
|
{ name: ' تلفن همراه ', abbr: 'FL', id: 1 },
|
|
|
{ name: ' تبلت ', abbr: 'GA', id: 2 },
|
|
|
{ name: ' لپ تاپ ', abbr: 'NE', id: 3 },
|
|
|
{ name: ' کامپیوتر ', abbr: 'CA', id: 4 },
|
|
|
{ name: ' دوربین ', abbr: 'NY', id: 5 }
|
|
|
],
|
|
|
customerTypes: [
|
|
|
{ name: ' حقیقی ', abbr: 'FL', id: 1 },
|
|
|
{ name: ' حقوقی ', abbr: 'GA', id: 2 },
|
|
|
],
|
|
|
breadcrumbItems: [
|
|
|
{
|
|
|
text: '',
|
|
|
disabled: false,
|
|
|
href: 'Home',
|
|
|
icon: 'home'
|
|
|
},
|
|
|
{
|
|
|
text: ' مشتریان من ',
|
|
|
disabled: false,
|
|
|
href: 'Clients'
|
|
|
},
|
|
|
{
|
|
|
text: ' افزودن مشتری جدید ',
|
|
|
disabled: true,
|
|
|
href: 'AddClient'
|
|
|
}
|
|
|
]
|
|
|
|
|
|
}
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.v-card__text {
|
|
|
padding-top: 4px;
|
|
|
}
|
|
|
.Duplicate {
|
|
|
border: 1px solid #ddd;
|
|
|
}
|
|
|
.v-btn--round i {
|
|
|
margin-left: 10px;
|
|
|
margin-top: -4px;
|
|
|
}
|
|
|
</style>
|
