|
|
<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 User " color="cyan"></WM-PartTitle>
|
|
|
<v-layout row wrap class="WM-Section" style="border-right-color: #32c5d2;">
|
|
|
<v-flex class="lg12 RTL text-lg-right">
|
|
|
<div class="Step En" style="color:#32c5d2;"> 01 </div>
|
|
|
<div class="Title">
|
|
|
<div class="FA"> اطلاعـــــات عمــــــومی </div>
|
|
|
<div class="EN"> General Info </div>
|
|
|
</div>
|
|
|
</v-flex>
|
|
|
<v-layout row wrap>
|
|
|
<v-flex class="lg4">
|
|
|
<v-card-text>
|
|
|
<v-autocomplete prepend-icon="fas fa-align-justify" :items="deparment" :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="deparment" :filter="customFilter" color="cyan" item-text="name" label=" اگر لازم است، دپارتمان کاربر را به طور جزئی تر مشخص کنید "></v-autocomplete>
|
|
|
</v-card-text>
|
|
|
</v-flex>
|
|
|
<v-flex pt-2 class="lg1 text-lg-right">
|
|
|
|
|
|
<v-tooltip bottom color="black">
|
|
|
<v-btn mt-4 small @click.native="$store.state.ConfigUserDepartments = true" slot="activator" outline fab color="black" dark><v-icon dark>fas fa-pencil-alt</v-icon></v-btn>
|
|
|
<span> ویرایش دپارتمان ها </span>
|
|
|
</v-tooltip>
|
|
|
</v-flex>
|
|
|
</v-layout>
|
|
|
<!-- --------------------------------------------------------------------
|
|
|
Gneral Info
|
|
|
-------------------------------------------------------------------- -->
|
|
|
<v-layout row wrap>
|
|
|
<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>
|
|
|
<v-flex lg3>
|
|
|
<v-card-text>
|
|
|
<v-text-field label=" آدرس پست الکترونیکی " color="cyan" prepend-icon="fas fa-envelope"></v-text-field>
|
|
|
</v-card-text>
|
|
|
</v-flex>
|
|
|
<v-flex lg3>
|
|
|
<v-card-text>
|
|
|
<v-text-field v-model="password" :append-icon="passwordShow ? 'fas fa-eye' : 'fas fa-eye-slash'" :rules="[rules.required, rules.min]"
|
|
|
:type="passwordShow ? 'text' : 'password'" label=" کلمه ی عبور " color="cyan" prepend-icon="fas fa-asterisk"
|
|
|
hint=" حداقل 8 کاراکتر " counter @click:append="passwordShow = !passwordShow">
|
|
|
</v-text-field>
|
|
|
</v-card-text>
|
|
|
</v-flex>
|
|
|
<v-flex lg3>
|
|
|
<v-card-text>
|
|
|
<v-text-field v-model="passwordRetype" :append-icon="passwordRetypeShow ? 'fas fa-eye' : 'fas fa-eye-slash'" :rules="[rules.required, rules.min]"
|
|
|
:type="passwordRetypeShow ? 'text' : 'password'" label=" تکرار کلمه ی عبور " color="cyan" prepend-icon="fas fa-asterisk"
|
|
|
hint=" حداقل 8 کاراکتر " counter @click:append="passwordRetypeShow = !passwordRetypeShow">
|
|
|
</v-text-field>
|
|
|
</v-card-text>
|
|
|
</v-flex>
|
|
|
</v-layout>
|
|
|
</v-layout>
|
|
|
<!-- --------------------------------------------------------------------
|
|
|
Contact Info
|
|
|
-------------------------------------------------------------------- -->
|
|
|
<v-layout row wrap class="WM-Section" style="border-right-color: #00838F;">
|
|
|
<v-flex class="lg12 RTL text-lg-right">
|
|
|
<div class="Step En" style="color:#00838F;"> 02 </div>
|
|
|
<div class="Title">
|
|
|
<div class="FA"> اطلاعــــــات تمــــــاس </div>
|
|
|
<div class="EN"> Contact Info </div>
|
|
|
</div>
|
|
|
</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-telegram-plane"></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>
|
|
|
</v-layout>
|
|
|
<v-layout row wrap>
|
|
|
<v-flex mt-3 class="lg12 RTL text-lg-left">
|
|
|
<hr>
|
|
|
<v-btn large round color="cyan" dark> <v-icon dark>fas fa-plus</v-icon> افزودن کاربر </v-btn>
|
|
|
</v-flex>
|
|
|
</v-layout>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<!-- --------------------------------------------------------------------
|
|
|
Modals :: BEGIN
|
|
|
-------------------------------------------------------------------- -->
|
|
|
<template>
|
|
|
<div class="text-xs-center">
|
|
|
<wm-user-departments-edit></wm-user-departments-edit>
|
|
|
</div>
|
|
|
</template>
|
|
|
<!-- --------------------------------------------------------------------
|
|
|
Modals :: END
|
|
|
-------------------------------------------------------------------- -->
|
|
|
|
|
|
</v-container>
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
import DepartmentEdit from "@User/components/Config/Department/Modal-Layout.vue";
|
|
|
export default {
|
|
|
components: {
|
|
|
'wm-user-departments-edit' : DepartmentEdit,
|
|
|
},
|
|
|
data () {
|
|
|
return {
|
|
|
passwordShow: false,
|
|
|
passwordRetypeShow: false,
|
|
|
password: '',
|
|
|
passwordRetype: '',
|
|
|
rules: {
|
|
|
required: value => !!value || 'اجباری',
|
|
|
min: v => v.length >= 8 || ' کلمه ی عبور باید حداقل 8 حرف باشد ',
|
|
|
emailMatch: () => ('The email and password you entered don\'t match')
|
|
|
},
|
|
|
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: '/User/List'
|
|
|
},
|
|
|
{
|
|
|
text: ' افزودن کاربر جدید ',
|
|
|
disabled: true,
|
|
|
href: '/User/Add'
|
|
|
}
|
|
|
]
|
|
|
|
|
|
}
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.v-card__text {
|
|
|
padding-top: 4px;
|
|
|
}
|
|
|
.v-btn--round i {
|
|
|
margin-left: 10px;
|
|
|
margin-top: -4px;
|
|
|
}
|
|
|
</style>
|
