1404/11/04- first
This commit is contained in:
@@ -0,0 +1,235 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user