boursecu_admin/src/components/BasicMobileHeader.vue

<template>
  <div theme="light" :class="[prefixCls]" class="md:hidden">
    <div class="flex items-center justify-center gap-2 relative">
      <BaseIcon
        icon="vuesax-linear:menu"
        class="p-3 absolute right-2 top-1"
        @click="showDrawer"
      />
      <img :src="getConfigApp('avatar')" class="w-4rem mr-2 my-5" />
      <div class="absolute left-2 top-3">
        <div class="flex items-center w-full justify-center"></div>
        <ADropdown placement="bottomLeft">
          <a class="ant-dropdown-link" @click.prevent>
            <!--            Hover me-->
            <div class="flex items-center gap-1 text-gray-400">
              <AAvatar :src="placeholderM" />
              <Icon icon="vuesax-linear:arrow-down" size="15" />
            </div>
          </a>
          <template #overlay>
            <AMenu>
              <AMenuItem>
                <div class="flex flex-col">
                  <span class="font-bold">{{ userStore.userInfo?.name }}</span>
                  <span>{{ userStore.userInfo?.post_user }}</span>
                </div>
              </AMenuItem>
              <AMenuDivider />
              <AMenuItem @click="myInfoVisible = true">
                <div class="flex items-center gap-1">
                  <Icon icon="vuesax-linear:profile" size="18" />
                  <span>اطلاعات حساب کاربری</span>
                </div>
              </AMenuItem>
              <AMenuItem @click="clearLocalStorage">
                <div class="flex items-center gap-1">
                  <Icon icon="vuesax-linear:logout" size="18" />
                  <span>خروج</span>
                </div>
              </AMenuItem>
            </AMenu>
          </template>
        </ADropdown>
        <BaseButton
          iconSize="20"
          icon="vuesax-linear:setting"
          type="text"
          v-if="layoutStore.showSettingsIcon"
          @click="handleShowSettings"
        />
      </div>

      <BasicModal
        v-model:visible="myInfoVisible"
        width="40rem"
        title="اطلاعات حساب کاربری"
        @ok="ok"
        :loading="loading"
        @close="myInfoVisible = false"
      >
        <a-form :model="form" ref="formRef" autocomplete="off">
          <div class="grid md:grid-cols-2 gap-4">
            <a-form-item label="نام" name="fname" :rules="inputRules()">
              <BasicInput v-model:value="form.fname" />
            </a-form-item>
            <a-form-item label="نام خانوادگی" name="lname" :rules="inputRules()">
              <BasicInput v-model:value="form.lname" />
            </a-form-item>
            <a-form-item label="شماره موبایل" name="mobile" :rules="inputLenRules(11)">
              <BasicInput v-model:value="form.mobile" type="number" />
            </a-form-item>
            <a-form-item label="رمز کاربری" name="password">
              <BasicInput type="password" v-model:value="form.password" />
            </a-form-item>
          </div>
        </a-form>
      </BasicModal>
    </div>
  </div>
  <ADrawer height="460px" :placement="placement" v-model:visible="open" :closable="false"  @close="onClose">
    <AMenu v-model:selectedKeys="selectedKeys" mode="vertical">
      <template v-for="item in menu">
        <BasicSubMenu
          v-if="!item.meta?.hideChildren && item.children && item.children.length > 0"
          :menu-item="item"
          :key="item.name"
          :level="1"
          @click="onClose"
        />
        <BaseMenuItem v-else :item="item" :key="item.name" @click="onClose" />
      </template>
    </AMenu>
  </ADrawer>
</template>

<script setup lang="ts">
// import Logo from '@/assets/img/saminLogo.png'
import type { DrawerProps } from 'ant-design-vue'
import { inputLenRules, inputRules } from '@/utils/inputRules'

const placement = ref<DrawerProps['placement']>('bottom')
import { usePrefix } from '@core/composable/usePrefix'
import { useLayoutStore } from '@core/stores/layout'
import BasicMenu from '@core/layouts/composnts/BasicMenu.vue'
import placeholderM from '@core/assets/img/avatars/placeholder-m.jpg'
import Icon from '@core/components/BaseIcon/src/Icon.vue'
import { useSettingsStore } from '@core/stores/settings'
import { useStaticApiListsStore } from '@/store/staticApisStore'
import { useUserStore } from '@/store/userStore'
import type { User } from '@/model/user'
import { createUser, updateMyInformation, updateUser } from '@/api/user'
import { message } from 'ant-design-vue/es'
import { onMounted, ref } from 'vue'
import type { FormInstance } from 'ant-design-vue'
import { cloneDeep, sortBy } from 'lodash'
import { useWindowSize } from '@vueuse/core'
import { computed } from 'vue'
import type { ComputedRef } from 'vue'
import type { RouteRecordName, RouteRecordRaw } from 'vue-router'
import { useRouterStore } from '@core/stores/router'
import BasicSubMenu from '@core/layouts/composnts/BasicSubMenu.vue'
import BaseMenuItem from '@core/layouts/composnts/BaseMenuItem.vue'
import {getConfigApp} from "@/utils/config";

const { prefixCls } = usePrefix('basic-header')
const layoutStore = useLayoutStore()
const store = useStaticApiListsStore()
const userStore = useUserStore()
const settingsStore = useSettingsStore()
const currentRoute = useRoute()
const selectedKeys = ref<(RouteRecordName | undefined)[]>([])
const routerStore = useRouterStore()

const { width } = useWindowSize()
//my info modal
const loading = ref<boolean>(false)
const myInfoVisible = ref<boolean>(false)
const formRef = ref<FormInstance>()
const form = ref<User>({
  fname: '',
  lname: '',
  mobile: '',
  post_user: '',
  manager_id: '',
  responsible_id: '',
  section: '',
  section_id: undefined,
  process_id: '',
  qc_id: undefined,
  user_type: undefined,
  permission: []
})
onMounted(() => {
  form.value = cloneDeep(userStore?.userInfo) as User
  if (width.value <= 426) {
    layoutStore.layout = 'side'
    layoutStore.sideMenu.mode = 'vertical'
    layoutStore.sideMenu.collapsed = false
    console.log(layoutStore.layout + width.value)
  }
  const path: (RouteRecordName | undefined)[] = []

  function walkInRoutes(routes: RouteRecordRaw[]) {
    for (const route of routes) {
      if (route.name == currentRoute.name) {
        path.push(route.name)
        return true
      }
      if (route.children && route.children.length > 0) {
        path.push(route.name)
        const res = walkInRoutes(route.children)
        if (!res) {
          path.pop()
        } else {
          return true
        }
      }
    }
    return false
  }

  walkInRoutes(routerStore.routes)
  selectedKeys.value = path
})
const menu: ComputedRef<RouteRecordRaw[]> = computed(() => {
  return sortBy(routerStore.routes, (item) => {
    return item.meta?.order
  }).filter((item) => !item.meta?.hideMenu)
})

//submit user
async function ok() {
  formRef.value?.validateFields().then(async () => {
    loading.value = true
    try {
      await updateMyInformation(form.value)
      userStore.getMyInfo()
      message.success('اطلاعات با موفقیت ویرایش شد')
      myInfoVisible.value = false
    } catch (e) {
      // message.error('خطا در بارگذاری اطلاعات')
      console.error(e)
    } finally {
      loading.value = false
    }
  })
}

//const temp = 12
function handleCollapseSideMenu() {
  layoutStore.sideMenu.collapsed = !layoutStore.sideMenu.collapsed
}

function handleShowSettings() {
  settingsStore.showSettingsDrawer = !settingsStore.showSettingsDrawer
}

function clearLocalStorage() {
  localStorage.clear()
  location.reload()
}

const open = ref<boolean>(false)

const showDrawer = () => {
  open.value = true
}

const onClose = () => {
  open.value = false
  console.log(open.value)
}
</script>

<style scoped lang="less"></style>