willaengine/resources/js/User/components/Roles.vue

<template>
    <v-dialog v-model="$store.state.UserRoles" width="70%" transition="slide-x-transition">
        <v-card class="RTL">
            <v-card-title class=" grey lighten-3" primary-title>
                <WM-PartTitle class="WM-Margin-T-20" TitleFa=" دسترسی های کاربر " TitleEn=" User's Access " color="black"></WM-PartTitle>
            </v-card-title>

            <v-card-text>
                <v-layout row wrap class="WM-Section" style="border-right-color: #32c5d2;">
                    <v-flex class="lg3 RTL text-lg-right">
                        <div class="Step En" style="color:#32c5d2;"> 01 </div>
                        <div class="Title">
                            <div class="FA"> کاربران  </div>
                            <div class="EN"> Users  </div>
                        </div>
                        <v-tooltip top color="black">
                            <v-btn small slot="activator" fab color="cyan" dark style="float:left; margin-left:10px;"><v-icon dark>fas fa-plus</v-icon></v-btn>
                            <span> افزودن نقش جدید </span>
                        </v-tooltip>
                        <!-- <v-switch style="float:left; margin-left:10px;" color="cyan" v-model="UserSwitch"></v-switch> -->
                    </v-flex>
                    <v-flex class="lg2">
                        <WM-Checkbox ItemText=" افزودن کاربر " ItemID="UserAdd"></WM-Checkbox>
                        <WM-Checkbox ItemText=" ویرایش کاربر " ItemID="ClientDelete"></WM-Checkbox>
                        <WM-Checkbox ItemText=" حذف کاربر " ItemID="UserDelete"></WM-Checkbox>
                    </v-flex>
                    <v-flex class="lg2">
                        <WM-Checkbox ItemText=" ویرایش دسترسی ها " ItemID="UserRoles"></WM-Checkbox>
                        <WM-Checkbox ItemText=" ارسال پیام کوتاه یا ایمیل " ItemID="UserContact"></WM-Checkbox>
                    </v-flex>
                    <v-flex class="lg2">
                        <WM-Checkbox ItemText=" قابلیت انجام وظیفه " ItemID="UserRoles"></WM-Checkbox>
                        <WM-Checkbox ItemText=" قابلیت تعریف وظیفه " ItemID="UserContact"></WM-Checkbox>
                    </v-flex>
                </v-layout>
                <v-layout row wrap class="WM-Section" style="border-right-color: #ee3552;">
                    <v-flex class="lg3 RTL text-lg-right">
                        <div class="Step En" style="color:#ee3552;"> 02 </div>
                        <div class="Title">
                            <div class="FA"> مدیریت ارتباط با مشتری  </div>
                            <div class="EN"> CRM  </div>
                        </div>
                        <v-switch style="float:left; margin-left:10px;" color="red" v-model="UserSwitch"></v-switch>
                    </v-flex>
                    <v-flex class="lg2">
                        <WM-Checkbox ItemText=" افزودن مشتری " ItemID="ClientAdd"></WM-Checkbox>
                        <WM-Checkbox ItemText=" ویرایش مشتری " ItemID="ClientDelete"></WM-Checkbox>
                        <WM-Checkbox ItemText=" حذف مشتری " ItemID="ClientDelete"></WM-Checkbox>
                    </v-flex>
                    <v-flex class="lg2">
                        <WM-Checkbox ItemText=" مدیریت مالی " ItemID="ClientFinance"></WM-Checkbox>
                        <WM-Checkbox ItemText=" ارسال پیام کوتاه یا ایمیل " ItemID="ClientContact"></WM-Checkbox>
                    </v-flex>
                </v-layout>
                <v-layout row wrap class="WM-Section" style="border-right-color: #FF6B57;">
                    <v-flex class="lg3 RTL text-lg-right">
                        <div class="Step En" style="color:#FF6B57;"> 03 </div>
                        <div class="Title">
                            <div class="FA"> فروشگاه  </div>
                            <div class="EN"> Store  </div>
                        </div>
                        <v-switch style="float:left; margin-left:10px;" color="orange" v-model="UserSwitch"></v-switch>
                    </v-flex>
                    <v-flex class="lg2">
                        <WM-Checkbox ItemText=" افزودن آیتم " ItemID="ClientAdd"></WM-Checkbox>
                        <WM-Checkbox ItemText=" ویرایش آیتم " ItemID="ClientAdd"></WM-Checkbox>
                        <WM-Checkbox ItemText=" حذف آیتم " ItemID="ClientDelete"></WM-Checkbox>
                    </v-flex>
                    <v-flex class="lg2">
                        <WM-Checkbox ItemText=" مدیریت مالی " ItemID="ClientFinance"></WM-Checkbox>
                        <WM-Checkbox ItemText=" ارسال پیام کوتاه یا ایمیل " ItemID="ClientContact"></WM-Checkbox>
                    </v-flex>
                </v-layout>
            </v-card-text>
            <v-divider></v-divider>

            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="black" depressed dark @click="$store.state.UserRoles = false">
                    <v-icon dark right>fas fa-check</v-icon> تایید دسترسی ها
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>

</template>

<script>

export default {
    props: {
    },
    data () {
        return {
            status: [
                { name: ' بسته شده ', id: 1 },
                { name: ' ویزیت اولیه ', id: 2 },
                { name: ' انصراف داده ', id: 3 },
            ],
            UserSwitch: true,
        }
    }
};
</script>