boursecu_admin/src/core/layouts/BasicHeader.vue

<template>
  <ALayoutHeader
    theme="light"
    :class="[prefixCls]"
    :style="`height:${layoutStore.header.height};line-height:${layoutStore.header.height}`"
  >
    <!--    :style="`height:${layoutStore.header.height};line-height:${layoutStore.header.height}`"-->
    <div class="flex items-center">
      <div class="flex-1 flex">
        <img :src="getConfigApp('avatar')" style="height: 38px" class="mr-5 mt-1" />
        <BaseButton
          type="text"
          icon="vuesax-linear:menu"
          @click="handleCollapseSideMenu"
          v-if="layoutStore.layout == 'side'"
        />
        <!-- justify-center  flex-1 -->
        <!--        <div class="">-->
        <BasicMenu/>
        <!--        </div>-->
      </div>
      <!--      <BaseButton icon="vuesax-linear:menu" @click="handleCollapseSideMenu"></BaseButton>-->
      <!--      <div @click="handleCollapseSideMenu">بستن منو</div>-->
      <div class="flex items-center gap-3">
<!--        <div>
          <BaseButton size="small" @click="openNewTabBalance">تراز</BaseButton>
        </div>-->
        <ADropdown placement="bottomLeft" class="ml-5">
          <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>
        <!-- todo remove -->
        <div class="w-2"></div>
        <BaseButton
          iconSize="20"
          icon="vuesax-linear:setting"
          type="text"
          v-if="layoutStore.showSettingsIcon"
          @click="handleShowSettings"
        />
      </div>
    </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>

    <!--    this is admin header-->
    <!--    <div :class="['admin-header-wide', layout, pageWidth]">
      <router-link
        v-if="isMobile || layout === 'head'"
        to="/"s
        :class="['logo', isMobile ? null : 'pc', headerTheme]"
      >
        <img width="32" src="@/assets/img/logo.png" />
        <h1 v-if="!isMobile">{{ systemName }}</h1>
      </router-link>
      <a-divider v-if="isMobile" type="vertical" />
      <a-icon
        v-if="layout !== 'head'"
        class="trigger"
        :type="collapsed ? 'menu-unfold' : 'menu-fold'"
        @click="toggleCollapse"
      />
      <div
        v-if="layout !== 'side' && !isMobile"
        class="admin-header-menu"
        :style="`width: ${menuWidth};`"
      >
        <i-menu
          class="head-menu"
          :theme="headerTheme"
          mode="horizontal"
          :options="menuData"
          @select="onSelect"
        />
      </div>
      <div :class="['admin-header-right', headerTheme]">
        <header-search class="header-item" @active="(val) => (searchActive = val)" />
        <a-tooltip class="header-item" title="帮助文档" placement="bottom">
          <a href="https://iczer.gitee.io/vue-antd-admin-docs/" target="_blank">
            <a-icon type="question-circle-o" />
          </a>
        </a-tooltip>
        <header-notice class="header-item" />
        <header-avatar class="header-item" />
        <a-dropdown class="lang header-item">
          <div><a-icon type="global" /> {{ langAlias }}</div>
          <a-menu @click="(val) => setLang(val.key)" :selected-keys="[lang]" slot="overlay">
            <a-menu-item v-for="lang in langList" :key="lang.key">{{
              lang.key.toLowerCase() + ' ' + lang.name
            }}</a-menu-item>
          </a-menu>
        </a-dropdown>
      </div>
    </div>-->
  </ALayoutHeader>
</template>

<script lang="ts" setup>
import {openNewTabBalance} from '@core/composable/appInfo'
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 { inputRules, inputLenRules } from '@/utils/inputRules'
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 } from 'lodash'
import { useWindowSize } from '@vueuse/core'
import {getConfigApp} from "@/utils/config";
const { prefixCls } = usePrefix('basic-header')
const layoutStore = useLayoutStore()
const store = useStaticApiListsStore()
const userStore = useUserStore()
const settingsStore = useSettingsStore()


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


})
//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()
}
</script>

<style lang="less">
@prefix: ~'@{prefixCls}-basic-header';

.@{prefix} {
  padding: unset;
  //height: unset;
  //@apply flex flex-col justify-center ;
  //height: 64px;
  //line-height: unset;
  border-bottom: 2px solid #eee;
  // height: @header-height;
  background-color: #fff;
  //@apply backdrop-blur bg-red-200;
}
</style>